/* assets/rl.css — de opmaak van de Re-Lex-bouwblokken.
 *
 * Leest alles uit de merktokens die assets/brand.css uit config/brand.json
 * genereert (--merk-accent, --merk-grond, --merk-inkt, ...). Hier staat dus
 * GEEN kleur hard: wie de huisstijl wijzigt in de Studio, wijzigt de hele site.
 *
 * Drie regels die hier overal terugkomen, elk uit een echt probleem:
 *   1. Grid-items krijgen min-width:0. Zonder dat krimpen ze niet onder hun
 *      inhoud en loopt de pagina over de rand — dat was de oorzaak van bijna
 *      elk "past niet op het scherm"-probleem bij DutchteQ.
 *   2. Alles wat breder kan worden dan het scherm (tabellen, carrousels,
 *      codeblokken) scrollt in zijn EIGEN vak. De pagina zelf scrollt nooit
 *      zijwaarts.
 *   3. Beeld heeft altijd width/height of een aspect-ratio, zodat er niets
 *      verspringt tijdens het laden.
 *
 * Volgorde: tokens, basis, layout, typografie, knoppen, dan blok voor blok in
 * dezelfde volgorde als config/blokken-relex.json.
 */

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

:root {
  /* De inhoud blijft binnen 1440; alleen achtergronden mogen volle breedte. */
  --rlb-max: 1440px;
  --rlb-tekst-max: 70ch;

  /* DE RUIMTESCHAAL — de bron staat in config/brand.json ("ruimte") en komt
     hier binnen als --merk-ruimte-1..9 uit assets/brand.css. Dit is de
     equalized-spacingeis van 10 november: EEN schaal (4/8/12/16/24/32/48/72/
     112 px, factor ~1.5), en niets in dit bestand verzint er een maat naast.
     De terugvalwaarden zijn dezelfde getallen, voor het geval brand.css om
     wat voor reden dan ook niet laadt — niet om ze hier te kunnen wijzigen. */
  --rlb-r1: var(--merk-ruimte-1, .25rem);   /*   4px */
  --rlb-r2: var(--merk-ruimte-2, .5rem);    /*   8px */
  --rlb-r3: var(--merk-ruimte-3, .75rem);   /*  12px */
  --rlb-r4: var(--merk-ruimte-4, 1rem);     /*  16px */
  --rlb-r5: var(--merk-ruimte-5, 1.5rem);   /*  24px */
  --rlb-r6: var(--merk-ruimte-6, 2rem);     /*  32px */
  --rlb-r7: var(--merk-ruimte-7, 3rem);     /*  48px */
  --rlb-r8: var(--merk-ruimte-8, 4.5rem);   /*  72px */
  --rlb-r9: var(--merk-ruimte-9, 7rem);     /* 112px */

  /* De oude namen wijzen naar de schaal, zodat alles wat er al stond
     meeverandert in plaats van los te raken. Nieuwe opmaak gebruikt de
     r-stappen rechtstreeks. */
  --rlb-ruimte-xs: var(--rlb-r2);
  --rlb-ruimte-s:  var(--rlb-r3);
  --rlb-ruimte-m:  var(--rlb-r5);
  --rlb-ruimte-l:  var(--rlb-r6);
  --rlb-ruimte-xl: var(--rlb-r8);
  --rlb-ruimte-xxl: var(--rlb-r9);

  /* HET SECTIERITME — elke sectie dezelfde verticale afstand (zie sectie 44
     voor het waarom van deze clamp). Eén token, zodat "alle blokken even
     veel lucht" een feit is en geen voornemen. */
  --rlb-sectie: clamp(var(--rlb-r6), 4.4vw, 5.25rem);

  --rlb-rand: 1px solid var(--merk-lijn, #E8EAEC);
  --rlb-schaduw: 0 18px 50px rgba(0, 0, 0, .45);
  --rlb-overgang: 180ms cubic-bezier(.2, .7, .3, 1);

  /* OP-DONKER TEKSTROLLEN — ontklanting 11 nov. Op donkere vlakken (inkt,
     diepblauw, zwart, foto met sluier) stonden zeventien losse grijzen hard
     in dit bestand (var(--rlb-op-donker-zacht), var(--rlb-op-donker-gedempt), var(--rlb-op-donker-stil), ...): restanten van het
     demoplatform, geen Zwets-kleuren. Ze zijn teruggebracht tot vier rollen.
     De basis is wit met dekking, zodat de rol op ELKE donkere ondergrond
     klopt; het @supports-blok direct onder deze :root vervangt ze door een
     color-mix met --merk-inkt, zodat ze solide zijn (geen doorschijnende
     tekst op foto) en meebewegen zodra de huisstijl wijzigt. De percentages
     zijn gekozen op de oude, gemeten hexwaarden — dit verandert het beeld
     dus niet, het haalt alleen de losse kleuren weg. */
  --rlb-op-donker-zacht:   rgba(255, 255, 255, .88);  /* intro op foto/hero      (was #E4E7EA) */
  --rlb-op-donker-licht:   rgba(255, 255, 255, .82);  /* leestekst op donker     (was #D9DCE0, #D1D5D9) */
  --rlb-op-donker-gedempt: rgba(255, 255, 255, .72);  /* bijschrift op donker    (was #C3C7CC-familie) */
  --rlb-op-donker-stil:    rgba(255, 255, 255, .57);  /* labels, datums, kruimels (was #8D939A, #9BA1A8) */

  /* OP-LICHT NEUTRALEN — de enkele midgrijzen die op wit of op het vlak
     staan (golfstaven, metabadge-randen). Afgeleid van --merk-gedempt in
     het @supports-blok hieronder; de rgba is de terugval. */
  --rlb-neutraal-zacht: rgba(105, 111, 119, .45);  /* was #C0C4C9 / #BCC1C7 */
  --rlb-neutraal-half:  rgba(105, 111, 119, .69);  /* was #979DA4 (hover)   */

  /* Hoogte van de zwevende spelerbalk; de pagina houdt onderaan ruimte vrij
     zodat de balk nooit over de laatste regel tekst of de cookiemelding valt. */
  --rlb-speler-h: 76px;
}

/* Waar color-mix bestaat (alle grote browsers sinds 2023) worden de vier
   op-donker-rollen solide kleuren uit het merk: wit gemengd met --merk-inkt.
   Solide leest beter op foto en video dan wit-met-dekking, en wie de
   huisstijl wijzigt, wijzigt ook deze tinten mee. De neutralen op licht
   mengen --merk-gedempt met --merk-grond. Oudere browsers houden gewoon de
   rgba-terugval uit de :root hierboven — nette degradatie, geen hack. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --rlb-op-donker-zacht:   color-mix(in srgb, #fff 89%, var(--merk-inkt, #1A1D21));
    --rlb-op-donker-licht:   color-mix(in srgb, #fff 83%, var(--merk-inkt, #1A1D21));
    --rlb-op-donker-gedempt: color-mix(in srgb, #fff 73%, var(--merk-inkt, #1A1D21));
    --rlb-op-donker-stil:    color-mix(in srgb, #fff 58%, var(--merk-inkt, #1A1D21));
    --rlb-neutraal-zacht:    color-mix(in srgb, var(--merk-gedempt, #696F77) 45%, var(--merk-grond, #FFFFFF));
    --rlb-neutraal-half:     color-mix(in srgb, var(--merk-gedempt, #696F77) 69%, var(--merk-grond, #FFFFFF));
  }
}

/* ========================================================================
   2. BASIS
   ======================================================================== */

html {
  box-sizing: border-box;
  /* Een anker onder de plakkende kopbalk mag niet achter de balk landen. */
  scroll-padding-top: var(--rlb-r9);
}

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

body {
  margin: 0;
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-tekst, #3D444D);
  font-family: var(--merk-font-tekst, "Roboto", system-ui, sans-serif);
  /* Geen zijwaarts scrollen op bodyniveau, nooit. */
  overflow-x: hidden;
}

body.rlb-speler-actief { padding-bottom: var(--rlb-speler-h); }

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

a { color: var(--merk-accent, #E2000F); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--merk-inkt, #1A1D21); }

/* Een zichtbare focusring, altijd. Een toetsenbordgebruiker moet kunnen zien
   waar hij is; `outline: none` is hier nergens toegestaan. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========================================================================
   3. LAYOUT — de buitenkant van elk blok
   ======================================================================== */

.rlb {
  position: relative;
  /* Het ritme zelf staat in --rlb-sectie (sectie 1); sectie 44 verfijnt dit
     met de per-blok instelbare --rlb-sectie-top/-bot. */
  padding-block: var(--rlb-sectie);
}

.rlb-binnen {
  width: 100%;
  max-width: var(--rlb-max);
  margin-inline: auto;
  padding-inline: clamp(var(--rlb-r4), 4vw, 2.5rem);
  /* Zie regel 1 in de kop: dit is de belangrijkste regel in dit bestand. */
  min-width: 0;
}

.rlb--ruimte-geen     { padding-block: 0; }
.rlb--ruimte-klein    { padding-block: clamp(var(--rlb-r5), 2.4vw, var(--rlb-r6)); }
.rlb--ruimte-normaal  { padding-block: var(--rlb-sectie); }
.rlb--ruimte-groot    { padding-block: clamp(var(--rlb-r7), 6.4vw, var(--rlb-r9)); }

.rlb--vlak-grond  { background: var(--merk-grond, #FFFFFF); }
.rlb--vlak-vlak   { background: var(--merk-vlak, #F6F7F8); }
.rlb--vlak-paneel { background: var(--merk-paneel, #FFFFFF); }
.rlb--vlak-accent { background: var(--merk-accent, #E2000F); color: var(--merk-op_accent, #FFFFFF); }
.rlb--vlak-accent :where(h1, h2, h3, .rlb-titel) { color: var(--merk-op_accent, #FFFFFF); }

.rlb--met-beeld::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--rlb-vlak-beeld);
  background-size: cover;
  background-position: center;
  opacity: .28;
  z-index: 0;
}
.rlb--met-beeld > .rlb-binnen { position: relative; z-index: 1; }

.rlb--kaart > .rlb-binnen {
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  padding: var(--rlb-ruimte-l);
}

/* ========================================================================
   4. TYPOGRAFIE
   ======================================================================== */

.rlb-kop { max-width: var(--rlb-tekst-max); margin-bottom: var(--rlb-ruimte-l); }

.rlb-kicker {
  margin: 0 0 var(--rlb-ruimte-xs);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}

.rlb-titel { margin: 0 0 var(--rlb-ruimte-s); }
.rlb-intro { margin: 0 0 var(--rlb-ruimte-s); max-width: var(--rlb-tekst-max); }

.rlb-tussenkop {
  margin: var(--rlb-ruimte-l) 0 var(--rlb-ruimte-s);
  color: var(--merk-inkt, #1A1D21);
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rlb p { margin: 0 0 var(--rlb-ruimte-s); max-width: var(--rlb-tekst-max); }

.rlb-lijst { margin: 0 0 var(--rlb-ruimte-s); padding-left: var(--rlb-r4); max-width: var(--rlb-tekst-max); }
.rlb-lijst li { margin-bottom: var(--rlb-r1); }

.rlb-voetnoot { font-size: 1rem; color: var(--merk-gedempt, #696F77); }

.rlb-visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.rlb-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-ruimte-s);
  margin-top: var(--rlb-ruimte-m);
}

.rlb-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  padding: var(--rlb-r3) var(--rlb-r5);
  border: 2px solid transparent;
  border-radius: var(--merk-radius_knop, 999px);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rlb-overgang), background var(--rlb-overgang), color var(--rlb-overgang);
  /* Een trefvlak van minstens 44px: dat is de ondergrens voor een duim. */
  min-height: 44px;
}
.rlb-knop:hover { transform: translateY(-2px); }
.rlb-knop:active { transform: translateY(0); }

/* ZWART op het blauw, niet wit. Wit op #0096FF haalt 3.09:1 en valt dus onder
   de AA-eis; zwart haalt 6.81:1. Het accent zelf blijft ongewijzigd. */
.rlb-knop--primair {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-knop--primair:hover { background: var(--merk-inkt, #1A1D21); color: #fff; }

.rlb-knop--secundair {
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  border-color: var(--merk-lijn, #E8EAEC);
}
.rlb-knop--secundair:hover { border-color: var(--merk-accent, #E2000F); color: var(--merk-accent, #E2000F); }

.rlb-knop--ghost { background: transparent; color: var(--merk-gedempt, #696F77); }
.rlb-knop--ghost:hover { color: var(--merk-inkt, #1A1D21); }

.rlb-icoon { flex: none; }

/* ========================================================================
   6. KOPBALK
   ======================================================================== */

.rlb-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 0;
  background: color-mix(in srgb, var(--merk-grond, #FFFFFF) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: var(--rlb-rand);
}

.rlb-header-rij {
  display: flex;
  align-items: center;
  gap: var(--rlb-ruimte-m);
  min-height: 88px;
}

.rlb-merk { display: inline-flex; align-items: center; flex: none; }
.rlb-logo {
  display: block;
  width: auto;
  /* Het logo is vierkant (2560x2560) met het woordmerk in de onderste helft.
     Op 40px hoog bleef daar een onleesbare 'RE-LEX' van 12px van over. Op
     64px is het woordmerk weer een woordmerk en past hij nog in een balk
     van 88px. */
  height: 64px;
}
.rlb-merk-tekst {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .06em;
  color: var(--merk-inkt, #1A1D21);
  text-transform: uppercase;
}

.rlb-nav { margin-inline-start: auto; min-width: 0; }
.rlb-nav ul { display: flex; gap: var(--rlb-ruimte-m); margin: 0; padding: 0; list-style: none; }

.rlb-navlink {
  position: relative;
  display: block;
  padding: var(--rlb-r2) 0;
  color: var(--merk-inkt, #1A1D21);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
/* De onderstreping uit de oude site, maar nu ook bij toetsenbordfocus. */
.rlb-navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--merk-accent, #E2000F);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rlb-overgang);
}
.rlb-navlink:hover::after,
.rlb-navlink:focus-visible::after,
.rlb-navlink--actief::after { transform: scaleX(1); }

.rlb-header-acties { display: flex; align-items: center; gap: var(--rlb-ruimte-s); flex: none; }

.rlb-tel {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  color: var(--merk-inkt, #1A1D21);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-tel:hover { color: var(--merk-accent, #E2000F); }

/* Het mobiele menu zit in een <details>: dicht staat het niet in de
   tabvolgorde en er is geen JavaScript nodig. */
.rlb-mobiel { display: none; margin-inline-start: auto; }
.rlb-mobiel > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  min-height: 44px;
  padding: var(--rlb-r2) var(--rlb-r3);
  color: var(--merk-inkt, #1A1D21);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.rlb-mobiel > summary::-webkit-details-marker { display: none; }
.rlb-burger { position: relative; width: 22px; height: 2px; background: currentColor; }
.rlb-burger::before, .rlb-burger::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
}
.rlb-burger::before { top: -7px; }
.rlb-burger::after { top: 7px; }

.rlb-mobiel-nav {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  padding: var(--rlb-ruimte-m) clamp(var(--rlb-r4), 4vw, 2.5rem) var(--rlb-ruimte-l);
  background: var(--merk-vlak, #F6F7F8);
  border-bottom: var(--rlb-rand);
  max-height: 75vh;
  max-height: 75dvh; /* iOS: vh rekent de adresbalk mee; dvh niet. vh-regel erboven is de terugval. */
  overflow-y: auto;
}
.rlb-mobiel-nav ul { margin: 0 0 var(--rlb-ruimte-m); padding: 0; list-style: none; }
.rlb-mobiel-nav li + li { border-top: var(--rlb-rand); }
.rlb-mobiel-nav .rlb-navlink { padding: var(--rlb-r4) 0; }
.rlb-mobiel-acties { display: flex; flex-wrap: wrap; gap: var(--rlb-ruimte-s); }

/* ========================================================================
   7. BROODKRUIMELS
   ======================================================================== */

.rlb-kruimels { padding-block: var(--rlb-ruimte-m) 0; }
.rlb-kruimels ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r2);
  margin: 0; padding: 0;
  list-style: none;
  font-size: 1rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-kruimels li + li::before { content: "/"; margin-right: var(--rlb-r2); color: var(--merk-lijn, #E8EAEC); }
.rlb-kruimels a { text-decoration: none; }

/* ========================================================================
   8. HERO
   ======================================================================== */

.rlb-hero { overflow: hidden; }
.rlb-hero--klein    { padding-block: var(--rlb-ruimte-l); }
.rlb-hero--groot    { padding-block: var(--rlb-ruimte-xxl); }
.rlb-hero--volledig { min-height: 86vh; min-height: 86svh; /* svh: het altijd zichtbare deel; vh ervoor is de terugval */ display: flex; align-items: center; }

.rlb-hero-sluier {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, calc(var(--rlb-sluier, .4) * .6)) 0%,
    rgba(0, 0, 0, var(--rlb-sluier, .4)) 100%);
}

.rlb-hero-rij {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--rlb-ruimte-xl);
  align-items: center;
}
.rlb-hero-rij > * { min-width: 0; }
.rlb-hero--enkel .rlb-hero-rij { grid-template-columns: 1fr; }
.rlb-hero--enkel .rlb-hero-tekst { max-width: 56ch; }

.rlb-hero-titel { margin: 0 0 var(--rlb-ruimte-m); }
.rlb-hero-intro { font-size: 1.1875rem; max-width: 52ch; }

.rlb-hero-beeld {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--merk-radius_beeld, 10px);
}

/* ========================================================================
   9. VINYL-INGANGEN — het gezicht van de site
   ======================================================================== */

.rlb-vinyl-raster {
  display: grid;
  gap: clamp(var(--rlb-r4), 3vw, 2.25rem);
  margin: 0; padding: 0;
  list-style: none;
}
.rlb-vinylgrid--k2 .rlb-vinyl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlb-vinylgrid--k3 .rlb-vinyl-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rlb-vinylgrid--k4 .rlb-vinyl-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rlb-vinyl { min-width: 0; }

.rlb-vinyl-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rlb-ruimte-s);
  text-align: center;
  text-decoration: none;
  color: var(--merk-inkt, #1A1D21);
}

.rlb-vinyl-beeld {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
.rlb-vinyl-plaat {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms cubic-bezier(.2, .7, .3, 1), filter var(--rlb-overgang);
}

/* Een plaat draait. Dat is het hele idee van deze ingang, dus hij draait pas
   bij aanwijzen of focus — niet eeuwig, want eeuwige beweging naast tekst
   maakt lezen moeilijk. */
.rlb-vinylgrid--draai .rlb-vinyl-link:hover .rlb-vinyl-plaat,
.rlb-vinylgrid--draai .rlb-vinyl-link:focus-visible .rlb-vinyl-plaat {
  transform: rotate(180deg) scale(1.04);
}

/* De blauwe gloed komt uit het accent, zodat hij meeverandert met de huisstijl. */
.rlb-vinyl-link:hover .rlb-vinyl-beeld::after,
.rlb-vinyl-link:focus-visible .rlb-vinyl-beeld::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--merk-accent, #E2000F) 35%, transparent) 0%, transparent 68%);
  z-index: -1;
}

.rlb-vinyl-leeg {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--merk-paneel, #FFFFFF) 28%, var(--merk-vlak, #F6F7F8) 30%);
  border: var(--rlb-rand);
}

.rlb-vinyl-naam {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rlb-vinyl-sub { font-size: 1rem; color: var(--merk-gedempt, #696F77); }

/* ========================================================================
   10. ZWEVENDE BOEKKNOP
   ======================================================================== */

.rlb-zijtab {
  position: fixed;
  top: 50%;
  z-index: 70;
}
.rlb-zijtab--rechts { right: 0; transform: translateY(-50%); }
.rlb-zijtab--links  { left: 0;  transform: translateY(-50%); }

.rlb-zijtab-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  padding: var(--rlb-r3) var(--rlb-r5);
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--rlb-schaduw);
  transition: background var(--rlb-overgang);
}
/* Een tab, geen pil: alleen de twee hoeken die van de rand af staan zijn
   rond, de rest sluit vlak aan tegen de zijkant van het scherm. */
.rlb-zijtab--rechts .rlb-zijtab-knop {
  transform-origin: bottom right;
  transform: rotate(-90deg) translateX(-50%);
  border-radius: 6px 6px 0 0;
}
.rlb-zijtab--links .rlb-zijtab-knop {
  transform-origin: bottom left;
  transform: rotate(90deg) translateX(50%);
  border-radius: 6px 6px 0 0;
}
.rlb-zijtab-knop:hover { background: var(--merk-inkt, #1A1D21); color: #fff; }

/* ========================================================================
   11. MUZIEKSPELER — lijst in de pagina + zwevende verkoopbalk
   ======================================================================== */

.rlb-speler-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rlb-r1); }

.rlb-speler--raster .rlb-speler-lijst {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
}
.rlb-speler--raster .rlb-speler-track { flex-direction: column; align-items: flex-start; }
.rlb-speler--raster .rlb-speler-hoesvak { width: 100%; }

.rlb-speler-track {
  display: flex;
  align-items: center;
  gap: var(--rlb-ruimte-s);
  padding: var(--rlb-r3);
  border-radius: var(--merk-radius_veld, 10px);
  border: 1px solid transparent;
  min-width: 0;
}
.rlb-speler-track:hover { background: var(--merk-vlak, #F6F7F8); border-color: var(--merk-lijn, #E8EAEC); }
.rlb-speler-track[aria-current="true"] {
  background: var(--merk-vlak, #F6F7F8);
  border-color: var(--merk-accent, #E2000F);
}

.rlb-speler-hoesvak { flex: none; width: 56px; aspect-ratio: 1; }
.rlb-speler-hoes {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--merk-radius_beeld, 10px);
}
/* De hoes draait als een plaat zolang de track speelt. */
.rlb-speler-hoesvak--vinyl .rlb-speler-hoes { border-radius: 50%; }
.rlb-speler-track[aria-current="true"] .rlb-speler-hoesvak--vinyl .rlb-speler-hoes {
  animation: rlb-draai 3.4s linear infinite;
}
@keyframes rlb-draai { to { transform: rotate(360deg); } }

.rlb-speler-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rlb-speler-titel { color: var(--merk-inkt, #1A1D21); font-weight: 600; overflow-wrap: anywhere; }
.rlb-speler-artiest { font-size: 1rem; color: var(--merk-gedempt, #696F77); }
.rlb-speler-duur { flex: none; font-variant-numeric: tabular-nums; color: var(--merk-gedempt, #696F77); }

.rlb-speler-knop {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--merk-lijn, #E8EAEC);
  border-radius: 50%;
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  cursor: pointer;
  transition: background var(--rlb-overgang), border-color var(--rlb-overgang);
}
.rlb-speler-knop:hover {
  background: var(--merk-accent, #E2000F);
  border-color: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}

.rlb-speler-koop {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  min-height: 44px;
  padding: var(--rlb-r2) .9rem;
  border-radius: var(--merk-radius_knop, 8px);
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-speler-koop:hover { background: var(--merk-inkt, #1A1D21); color: #fff; }

.rlb-speler-bron { font-size: 1rem; }

/* --- de zwevende balk over de volle breedte ---------------------------- */

/* Dit is de kern van de speler: hij staat vast onderaan over de hele breedte,
   blijft doorspelen terwijl je doorklikt, en verkoopt de track die speelt.
   Hij wordt pas getoond als er daadwerkelijk iets speelt — een lege balk die
   altijd ruimte inneemt is geen speler maar een obstakel. */
.rlb-speler-balk--oud-ongebruikt {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rlb-ruimte-m);
  min-height: var(--rlb-speler-h);
  padding: .6rem clamp(var(--rlb-r4), 4vw, 2.5rem);
  background: color-mix(in srgb, var(--merk-vlak, #F6F7F8) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 2px solid var(--merk-accent, #E2000F);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .6);
  transform: translateY(100%);
  transition: transform 240ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-speler-balk[data-open="1"] { transform: translateY(0); }
/* Aangemeerd: de balk staat er al, met de eerste track klaar, voordat er
   iets is aangeklikt. Zonder deze stand lijkt de speler te missen - en dat
   was precies de eerste reactie erop. */
.rlb-speler-balk[data-aangemeerd="1"] { transform: translateY(0); }

.rlb-balk-nu { display: flex; align-items: center; gap: var(--rlb-r3); min-width: 0; }
.rlb-balk-hoes {
  flex: none; width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 50%;
  animation: rlb-draai 3.4s linear infinite;
  animation-play-state: paused;
}
.rlb-speler-balk[data-speelt="1"] .rlb-balk-hoes { animation-play-state: running; }

.rlb-balk-tekst { display: flex; flex-direction: column; min-width: 0; }
.rlb-balk-titel {
  color: var(--merk-inkt, #1A1D21); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlb-balk-artiest {
  font-size: 1rem; color: var(--merk-gedempt, #696F77);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rlb-balk-midden { display: flex; align-items: center; gap: var(--rlb-ruimte-s); min-width: 0; }

.rlb-balk-knop {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border: none; border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  cursor: pointer;
}
.rlb-balk-knop--klein {
  width: 40px; height: 40px;
  background: transparent; color: var(--merk-inkt, #1A1D21);
  border: 2px solid var(--merk-lijn, #E8EAEC);
}

/* De voortgangsbalk is een echte <input type=range>: sleepbaar met de muis,
   bedienbaar met de pijltjestoetsen, en hij meldt zijn waarde aan een
   schermlezer. Een <div> met een gevulde breedte doet dat alles niet. */
.rlb-balk-voortgang { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--rlb-r2); }
.rlb-balk-tijd {
  flex: none; font-variant-numeric: tabular-nums; font-size: .9375rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-balk-schuif {
  flex: 1 1 auto; min-width: 0;
  height: 6px;
  appearance: none;
  background: var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
  cursor: pointer;
}
.rlb-balk-schuif::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  border: 2px solid var(--merk-vlak, #F6F7F8);
}
.rlb-balk-schuif::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  border: 2px solid var(--merk-vlak, #F6F7F8);
}

.rlb-balk-acties { display: flex; align-items: center; gap: var(--rlb-r2); flex: none; }

/* De koopknop in de balk is de reden dat deze balk bestaat. Hij valt op met
   het neon-lime uit de huisstijl, zodat hij niet met het blauwe accent van de
   bedieningsknoppen concurreert. */
.rlb-balk-koop {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  min-height: 44px;
  padding: var(--rlb-r2) var(--rlb-r4);
  border-radius: var(--merk-radius_knop, 999px);
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-balk-koop:hover { background: var(--merk-inkt, #1A1D21); color: #fff; }
.rlb-balk-koop[hidden] { display: none; }

.rlb-balk-sluit {
  flex: none;
  width: 36px; height: 36px;
  border: none; background: transparent;
  color: var(--merk-gedempt, #696F77);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.rlb-balk-sluit:hover { color: var(--merk-inkt, #1A1D21); }

/* ========================================================================
   12. STREAMINGKEUZE
   ======================================================================== */

/* Deze sectie staat op diepblauw: hij mag eruit springen, want hier gaat de
   luisteraar weg naar een platform en dat is een bewuste keuze. Op wit zou
   een rij van tien logo's wegvallen tegen de rest van de pagina. */
.rlb-streaming {
  background: var(--merk-diepblauw, #0E284B);
  color: #fff;
}
.rlb-streaming :where(h1, h2, h3, .rlb-titel) { color: #fff; }
.rlb-streaming .rlb-intro { color: var(--rlb-op-donker-gedempt); }
.rlb-streaming .rlb-kicker { color: var(--merk-accent, #E2000F); }

/* Vijf kolommen, hard. Tien platforms worden dan twee volle rijen in plaats
   van de rafelrand die auto-fill ervan maakte. */
.rlb-stream-raster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--rlb-r3);
  margin: 0; padding: 0;
  list-style: none;
}
.rlb-stream-raster > * { min-width: 0; }
.rlb-streaming--lijst .rlb-stream-raster { grid-template-columns: 1fr; }

/* De sociale kanalen sluiten aan op dezelfde vijf kolommen, zodat ze in rij
   twee meelopen en niet als los blokje onderaan hangen. */
.rlb-stream-raster--sociaal { margin-top: var(--rlb-r3); }

.rlb-stream-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rlb-r2);
  height: 100%;
  min-height: 92px;
  padding: var(--rlb-r4) var(--rlb-r3);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--merk-radius_veld, 8px);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background var(--rlb-overgang), border-color var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-stream-link .rlb-icoon { color: #fff; }
.rlb-stream-link:hover {
  background: rgba(255, 255, 255, .11);
  border-color: var(--merk-accent, #E2000F);
  transform: translateY(-3px);
  color: #fff;
}
.rlb-stream-naam { font-weight: 600; font-size: .9375rem; }
.rlb-stream-noot {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rlb-op-donker-stil);
}

/* ========================================================================
   13. WEBCAST
   ======================================================================== */

.rlb-webcast-speler {
  position: relative;
  border-radius: var(--merk-radius_kaart, 14px);
  overflow: hidden;
  background: #000;
  border: var(--rlb-rand);
}
.rlb-webcast-speler iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.rlb-webcast-offline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rlb-ruimte-s);
  padding: var(--rlb-ruimte-l);
}
.rlb-webcast-offline .rlb-knop { margin-right: var(--rlb-r2); }

.rlb-live-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  padding: var(--rlb-r1) var(--rlb-r3);
  border-radius: 999px;
  background: var(--merk-cerise, #E2000F);
  color: #000;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rlb-live-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #000;
  animation: rlb-pols 1.4s ease-in-out infinite;
}
@keyframes rlb-pols { 50% { opacity: .25; } }

.rlb-webcast-eerder { margin-top: var(--rlb-ruimte-l); }

/* De carrousel scrollt in zijn EIGEN vak, met scroll-snap. */
.rlb-webcast-lijst {
  display: flex;
  gap: var(--rlb-ruimte-s);
  margin: 0; padding: 0 0 var(--rlb-r2);
  list-style: none;
  overflow-x: auto;
  /* proximity en niet mandatory. GEMETEN op /live-dj/: met `mandatory` trok
     de snap elke geprogrammeerde scroll terug naar zijn eigen ankerpunt, dus
     deden de pijlknoppen om de klik niets. Met `proximity` voelt vegen nog
     hetzelfde maar blijft een scrollTo() staan waar hij hoort. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.rlb-webcast-lijst > li {
  flex: 0 0 min(280px, 78%);
  scroll-snap-align: start;
  min-width: 0;
}
.rlb-webcast-lijst img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--merk-radius_beeld, 10px);
}

/* ========================================================================
   14. BOEKER — kalender en formulier
   ======================================================================== */

.rlb-boeker {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--rlb-ruimte-l);
  align-items: start;
}
.rlb-boeker > * { min-width: 0; }

.rlb-kalender {
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  position: sticky;
  top: 92px;
}
.rlb-kalender-kop { display: flex; align-items: center; gap: var(--rlb-r2); margin-bottom: var(--rlb-ruimte-s); }
.rlb-kalender-titel { flex: 1 1 auto; margin: 0; text-align: center; color: var(--merk-inkt, #1A1D21); font-weight: 700; }
.rlb-kalender-nav {
  width: 40px; height: 40px;
  border: var(--rlb-rand); border-radius: 50%;
  background: transparent; color: var(--merk-inkt, #1A1D21);
  font-size: 1.25rem; cursor: pointer;
}
.rlb-kalender-nav:hover { border-color: var(--merk-accent, #E2000F); }

.rlb-kalender-dagen {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--rlb-r1);
}
.rlb-kalender-dag {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--rlb-r1);
  aspect-ratio: 1;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--merk-radius_veld, 10px);
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rlb-kalender-dag:hover:not([disabled]) { border-color: var(--merk-accent, #E2000F); }
.rlb-kalender-dag[disabled] { color: var(--merk-lijn, #E8EAEC); cursor: default; }
.rlb-kalender-dag[aria-selected="true"] {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-kalender-weekdag { text-align: center; font-size: .8125rem; color: var(--merk-gedempt, #696F77); }

/* De drie toestanden hebben allemaal een stip ÉN een eigen vorm, want kleur
   alleen is onvoldoende voor wie kleuren slecht onderscheidt. */
.rlb-stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.rlb-stip--vrij  { background: var(--merk-status_vrij, #2F7D4F); }
.rlb-stip--deels { background: var(--merk-status_deels, #8A5B00); border-radius: 2px; }
.rlb-stip--bezet { background: var(--merk-status_bezet, #8C3A33); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }

.rlb-kalender-legenda {
  display: flex; flex-wrap: wrap; gap: var(--rlb-ruimte-s);
  margin: var(--rlb-ruimte-m) 0 0; padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.rlb-kalender-legenda li { display: flex; align-items: center; gap: var(--rlb-r2); }
.rlb-kalender-noot { margin: var(--rlb-ruimte-s) 0 0; font-size: .9375rem; color: var(--merk-gedempt, #696F77); }

.rlb-boeker-vak {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
}

/* --- formuliervelden, voor alle formulieren --------------------------- */

.rlb-stap { border: 0; margin: 0 0 var(--rlb-ruimte-l); padding: 0; }
.rlb-stap > legend {
  padding: 0;
  margin-bottom: var(--rlb-ruimte-m);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--merk-inkt, #1A1D21);
}

.rlb-stap,
.rlb-contact-formulier,
.rlb-demo-formulier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
}
.rlb-stap > legend { grid-column: 1 / -1; }

.rlb-veld { display: flex; flex-direction: column; gap: var(--rlb-r2); min-width: 0; }
.rlb-veld--vol { grid-column: 1 / -1; }

.rlb-veld > label,
.rlb-veld > legend {
  font-weight: 600;
  font-size: 1rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-vereist { color: var(--merk-cerise, #E2000F); }

.rlb-invoer {
  width: 100%;
  min-height: 48px;
  padding: var(--rlb-r3) var(--rlb-r4);
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_veld, 10px);
  /* 1rem voorkomt dat iOS bij focus op het veld inzoomt. */
  font-family: inherit;
  font-size: 1rem;
}
.rlb-invoer:focus { border-color: var(--merk-accent, #E2000F); }
.rlb-invoer::placeholder { color: var(--merk-gedempt, #696F77); }
textarea.rlb-invoer { min-height: 110px; resize: vertical; }

.rlb-veld--vink > label { display: flex; align-items: flex-start; gap: var(--rlb-r2); font-weight: 400; }
.rlb-veld--vink input { margin-top: var(--rlb-r1); width: 20px; height: 20px; flex: none; }

/* De genrekeuze: echte radio-inputs, visueel als tegels. */
.rlb-genre-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: var(--rlb-r2);
}
.rlb-genre {
  display: flex; align-items: center; gap: var(--rlb-r2);
  min-height: 48px;
  padding: var(--rlb-r2) var(--rlb-r3);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_veld, 10px);
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  cursor: pointer;
}
.rlb-genre:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-genre input { width: 18px; height: 18px; flex: none; accent-color: var(--merk-accent, #E2000F); }
.rlb-genre:has(input:checked) {
  border-color: var(--merk-accent, #E2000F);
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 14%, var(--merk-grond, #FFFFFF));
}

.rlb-zakelijk {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
  padding: var(--rlb-ruimte-m);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_veld, 10px);
}

.rlb-samenvatting { grid-column: 1 / -1; }
.rlb-samenvatting dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--rlb-ruimte-m); margin: 0; }
.rlb-samenvatting dt { color: var(--merk-gedempt, #696F77); }
.rlb-samenvatting dd { margin: 0; color: var(--merk-inkt, #1A1D21); }

.rlb-boeker-verstuur { grid-column: 1 / -1; justify-self: start; }
.rlb-boeker-belofte { grid-column: 1 / -1; margin: 0; font-size: .9375rem; color: var(--merk-gedempt, #696F77); }

/* De honeypot moet voor een mens onvindbaar zijn, maar niet met display:none —
   sommige bots vullen juist alleen zichtbare velden niet in. */
.rlb-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ========================================================================
   15. AGENDA
   ======================================================================== */

.rlb-gigs { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rlb-ruimte-s); }
.rlb-agenda--raster .rlb-gigs {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
}
.rlb-agenda--raster .rlb-gig { flex-wrap: wrap; }

.rlb-gig {
  display: flex;
  align-items: center;
  gap: var(--rlb-ruimte-m);
  padding: var(--rlb-ruimte-s);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-left: 4px solid var(--merk-accent, #E2000F);
  border-radius: var(--merk-radius_veld, 10px);
  min-width: 0;
}
.rlb-gig--verleden { border-left-color: var(--merk-lijn, #E8EAEC); opacity: .72; }

.rlb-gig-datum {
  flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  background: var(--merk-grond, #FFFFFF);
  border-radius: var(--merk-radius_veld, 10px);
}
.rlb-gig-dag {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900; font-size: 1.5rem; line-height: 1;
  color: var(--merk-inkt, #1A1D21);
  font-variant-numeric: tabular-nums;
}
.rlb-gig-maand { font-size: .8125rem; text-transform: uppercase; color: var(--merk-accent, #E2000F); }

.rlb-gig-beeldvak { flex: none; width: 72px; }
.rlb-gig-beeld { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }

.rlb-gig-info { flex: 1 1 auto; min-width: 0; }
.rlb-gig-naam { margin: 0 0 var(--rlb-r1); font-size: 1.125rem; color: var(--merk-inkt, #1A1D21); }
.rlb-gig-waar, .rlb-gig-tijd, .rlb-gig-genre {
  display: flex; align-items: center; gap: var(--rlb-r1);
  margin: 0; font-size: 1rem;
}
.rlb-gig-genre { color: var(--merk-accent, #E2000F); }
.rlb-gig-knop { flex: none; }

.rlb-agenda-leeg {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #F6F7F8);
  border: 1px dashed var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 14px);
}

/* ========================================================================
   16. RELEASES
   ======================================================================== */

.rlb-release-raster {
  display: grid;
  gap: var(--rlb-ruimte-m);
  margin: 0; padding: 0; list-style: none;
}
.rlb-releases--k2 .rlb-release-raster { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.rlb-releases--k3 .rlb-release-raster { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.rlb-releases--k4 .rlb-release-raster { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.rlb-releases--k5 .rlb-release-raster { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }

.rlb-release { min-width: 0; display: flex; flex-direction: column; gap: var(--rlb-r2); }
.rlb-release-hoes { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }
.rlb-release-titel { margin: 0; font-size: 1.0625rem; color: var(--merk-inkt, #1A1D21); }
.rlb-release-meta { margin: 0; font-size: 1rem; color: var(--merk-gedempt, #696F77); }
.rlb-release-acties { display: flex; flex-wrap: wrap; gap: var(--rlb-r2); margin-top: auto; }
.rlb-release-acties .rlb-knop { padding: var(--rlb-r2) var(--rlb-r4); font-size: .9375rem; }

/* ========================================================================
   17. WINKEL
   ======================================================================== */

.rlb-filters { display: flex; flex-wrap: wrap; gap: var(--rlb-r2); margin-bottom: var(--rlb-ruimte-m); }
.rlb-filter-knop {
  min-height: 44px;
  padding: var(--rlb-r2) var(--rlb-r4);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_knop, 999px);
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  font-weight: 600;
  cursor: pointer;
}
.rlb-filter-knop--aan {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  border-color: var(--merk-accent, #E2000F);
}

.rlb-product-raster {
  display: grid;
  gap: var(--rlb-ruimte-m);
  margin: 0; padding: 0; list-style: none;
}
.rlb-productgrid--k2 .rlb-product-raster { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.rlb-productgrid--k3 .rlb-product-raster { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.rlb-productgrid--k4 .rlb-product-raster { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.rlb-productgrid--k5 .rlb-product-raster { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }

.rlb-product { min-width: 0; }
.rlb-product-link {
  display: flex; flex-direction: column; gap: var(--rlb-r2);
  height: 100%;
  padding: var(--rlb-r3);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  color: var(--merk-inkt, #1A1D21);
  text-decoration: none;
  transition: border-color var(--rlb-overgang), transform var(--rlb-overgang);
}
a.rlb-product-link:hover { border-color: var(--merk-accent, #E2000F); transform: translateY(-3px); }
.rlb-product-beeldvak { display: block; }
.rlb-product-beeld { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }
.rlb-product-titel { font-weight: 600; overflow-wrap: anywhere; }
.rlb-product-soort { font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--merk-gedempt, #696F77); }
.rlb-product-prijs {
  margin-top: auto;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700; font-size: 1.125rem;
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-product--uit .rlb-product-link { opacity: .6; }
.rlb-product-uit { font-size: .875rem; color: var(--merk-gedempt, #696F77); }
.rlb-winkel-laden { color: var(--merk-gedempt, #696F77); }

/* ========================================================================
   18. PRIJSTABEL
   ======================================================================== */

/* Breed kan: daarom scrollt de tabel in zijn eigen vak. */
.rlb-tabelvak { overflow-x: auto; overscroll-behavior-x: contain; }

.rlb-prijstabel { width: 100%; border-collapse: collapse; min-width: 360px; }
.rlb-prijstabel th, .rlb-prijstabel td {
  padding: .9rem var(--rlb-r4);
  text-align: left;
  border-bottom: var(--rlb-rand);
  vertical-align: top;
}
.rlb-prijstabel thead th {
  font-size: .875rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--merk-gedempt, #696F77);
}
.rlb-prijstabel tbody th { color: var(--merk-inkt, #1A1D21); font-weight: 600; }
.rlb-prijs-toelichting { display: block; font-weight: 400; font-size: 1rem; color: var(--merk-gedempt, #696F77); }
.rlb-prijs-bedrag {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700; font-size: 1.125rem;
  color: var(--merk-inkt, #1A1D21);
  white-space: nowrap;
}
.rlb-prijs-eenheid { font-weight: 400; font-size: 1rem; color: var(--merk-gedempt, #696F77); }
.rlb-prijs-rij--uit { background: color-mix(in srgb, var(--merk-accent, #E2000F) 10%, transparent); }

/* ========================================================================
   19. TEKST MET BEELD / TEKSTBLOK
   ======================================================================== */

.rlb-tb-rij {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rlb-ruimte-xl);
  align-items: center;
}
.rlb-tb-rij > * { min-width: 0; }
.rlb-tekstbeeld--links .rlb-tb-media { order: -1; }

.rlb-tb-beeld { width: 100%; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }
/* Het onderschrift (beeld_onderschrift): een <figure> om de losse foto met
   een rustige figcaption eronder — context, geen tweede alinea. */
.rlb-tb-figuur { margin: 0; }
.rlb-tb-onderschrift {
  margin-top: var(--rlb-ruimte-xs);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--merk-gedempt, #696F77);
}
.rlb-tekstbeeld--v1-1 .rlb-tb-beeld  { aspect-ratio: 1; }
.rlb-tekstbeeld--v4-3 .rlb-tb-beeld  { aspect-ratio: 4 / 3; }
.rlb-tekstbeeld--v16-9 .rlb-tb-beeld { aspect-ratio: 16 / 9; }
.rlb-tekstbeeld--v3-4 .rlb-tb-beeld  { aspect-ratio: 3 / 4; }

.rlb-tekst-rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rlb-ruimte-l); }
.rlb-tekst--met-kaart .rlb-tekst-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }

.rlb-feitenkaart {
  align-self: start;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
}
.rlb-feitenkaart dl { margin: 0; display: grid; gap: var(--rlb-ruimte-s); }
.rlb-feit { display: grid; grid-template-columns: auto 1fr; gap: var(--rlb-r1) var(--rlb-r2); align-items: center; }
.rlb-feit .rlb-icoon { grid-row: span 2; color: var(--merk-accent, #E2000F); }
.rlb-feit dt { font-size: .9375rem; color: var(--merk-gedempt, #696F77); }
.rlb-feit dd { margin: 0; color: var(--merk-inkt, #1A1D21); font-weight: 600; }

/* ========================================================================
   20. FEITENBALK
   ======================================================================== */

.rlb-feitbalk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
  margin: 0; padding: var(--rlb-ruimte-m) 0;
  list-style: none;
  border-block: var(--rlb-rand);
}
.rlb-feitbalk-item {
  display: flex; flex-direction: column; align-items: center; gap: var(--rlb-r1);
  text-align: center; min-width: 0;
}
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-accent, #E2000F); margin-bottom: var(--rlb-r1); }
.rlb-feitbalk-waarde {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900; font-size: 1.5rem; line-height: 1.1;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-feitbalk-label { font-size: .9375rem; color: var(--merk-gedempt, #696F77); }

/* ========================================================================
   21. USP-KAARTEN
   ======================================================================== */

.rlb-usp-raster { display: grid; gap: var(--rlb-ruimte-m); margin: 0; padding: 0; list-style: none; }
.rlb-usps--k2 .rlb-usp-raster { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.rlb-usps--k3 .rlb-usp-raster { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rlb-usps--k4 .rlb-usp-raster { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Alle kaarten in een rij even hoog - via het grid, niet via JavaScript.
   Het icoon zat eerst als los plaatje boven de kop te zweven; nu staat het in
   een vast vierkant met een eigen vlak, zodat de drie kaarten hetzelfde ritme
   hebben en de kop altijd op dezelfde hoogte begint. */
.rlb-usp { min-width: 0; display: flex; }
.rlb-usp > * {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: .35rem var(--rlb-r4);
  align-content: start;
  width: 100%;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-grond, #FFFFFF);
  border: var(--rlb-rand);
  border-top: 3px solid var(--merk-accent, #E2000F);
  border-radius: var(--merk-radius_kaart, 10px);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--rlb-overgang), transform var(--rlb-overgang);
}
a.rlb-usp-link:hover {
  box-shadow: 0 10px 28px rgba(10, 20, 32, .10);
  transform: translateY(-3px);
}
.rlb-usp .rlb-icoon {
  grid-row: span 2;
  align-self: start;
  box-sizing: content-box;
  width: 28px; height: 28px;
  padding: var(--rlb-r3);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-usp-titel {
  margin: 0;
  align-self: center;
  font-size: 1.125rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-usp-tekst { margin: 0; font-size: 1rem; }

/* ========================================================================
   22. GALERIJ
   ======================================================================== */

.rlb-galerij { display: grid; gap: var(--rlb-ruimte-s); margin: 0; padding: 0; list-style: none; }
.rlb-galerij--k2 .rlb-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlb-galerij--k3 .rlb-galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rlb-galerij--k4 .rlb-galerij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rlb-galerij--k5 .rlb-galerij { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rlb-galerij--k8 .rlb-galerij { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.rlb-galerij-item { min-width: 0; margin: 0; }
.rlb-galerij-beeld {
  display: block;
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--merk-radius_beeld, 8px);
  transition: transform var(--rlb-overgang);
}
.rlb-galerij-link { display: block; }
.rlb-galerij-link:hover .rlb-galerij-beeld { transform: scale(1.03); }
.rlb-galerij-tekst { font-size: .9375rem; color: var(--merk-gedempt, #696F77); padding-top: var(--rlb-r1); }

/* VOLLE BREEDTE, TEGELS TEGEN ELKAAR AAN.
   Een mozaiek van vierkanten van rand tot rand, zonder tussenruimte en zonder
   afronding - dan is het een beeldvlak en geen rij losse plaatjes. De sectie
   breekt uit de 1440-kolom door de binnenmarge op te heffen. */
.rlb-galerij--mozaiek > .rlb-binnen { max-width: none; padding-inline: 0; }
.rlb-galerij--mozaiek .rlb-kop {
  max-width: var(--rlb-max);
  margin-inline: auto;
  padding-inline: clamp(var(--rlb-r4), 4vw, 2.5rem);
}
.rlb-galerij--mozaiek .rlb-galerij { gap: 0; }
.rlb-galerij--mozaiek .rlb-galerij-beeld { border-radius: 0; }
.rlb-galerij--mozaiek .rlb-galerij-tekst { display: none; }
/* Bij aanwijzen komt de tegel naar voren in plaats van te schuiven: in een
   raster zonder tussenruimte zou schuiven een naad laten zien. */
.rlb-galerij--mozaiek .rlb-galerij-item { position: relative; overflow: hidden; }
.rlb-galerij--mozaiek .rlb-galerij-link::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--merk-accent_donker, #A50B00);
  opacity: 0;
  transition: opacity var(--rlb-overgang);
}
.rlb-galerij--mozaiek .rlb-galerij-link:hover::after,
.rlb-galerij--mozaiek .rlb-galerij-link:focus-visible::after { opacity: .28; }
/* Het vergrootteken verschijnt midden op de tegel, zodat zichtbaar is dat er
   iets te klikken valt. */
.rlb-galerij--mozaiek .rlb-galerij-link::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-galerij--mozaiek .rlb-galerij-link:hover::before,
.rlb-galerij--mozaiek .rlb-galerij-link:focus-visible::before { opacity: 1; transform: scale(1); }

.rlb-galerij--carrousel .rlb-galerij {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.rlb-galerij--carrousel .rlb-galerij-item { flex: 0 0 min(280px, 78%); scroll-snap-align: start; }

/* ========================================================================
   23. LOGOBALK
   ======================================================================== */

.rlb-logobalk {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--rlb-ruimte-l);
  margin: 0; padding: 0; list-style: none;
}
.rlb-logo-item { min-width: 0; }
.rlb-logo-beeld { width: auto; max-height: 48px; object-fit: contain; }
.rlb-logobalk--grijs .rlb-logo-beeld {
  filter: grayscale(1) brightness(1.8);
  opacity: .72;
  transition: filter var(--rlb-overgang), opacity var(--rlb-overgang);
}
.rlb-logobalk--grijs .rlb-logo-item:hover .rlb-logo-beeld { filter: none; opacity: 1; }

/* ========================================================================
   24. BEOORDELINGEN
   ======================================================================== */

.rlb-review-raster { display: grid; gap: var(--rlb-ruimte-m); margin: 0; padding: 0; list-style: none; }
.rlb-reviews--k2 .rlb-review-raster { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rlb-reviews--k3 .rlb-review-raster { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.rlb-reviews--k4 .rlb-review-raster { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.rlb-reviews--lijst .rlb-review-raster { grid-template-columns: 1fr; }

.rlb-review {
  display: flex; flex-direction: column; gap: var(--rlb-r2);
  min-width: 0;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
}
.rlb-sterren { display: inline-flex; gap: 2px; }
.rlb-ster { color: var(--merk-lijn, #E8EAEC); line-height: 0; }
.rlb-ster--aan { color: var(--merk-status_deels, #8A5B00); }
.rlb-review-tekst { margin: 0; }
.rlb-review-tekst p { margin: 0; }
.rlb-review-wie { margin: auto 0 0; font-size: .9375rem; color: var(--merk-gedempt, #696F77); }
.rlb-review-naam { color: var(--merk-inkt, #1A1D21); font-weight: 600; }

/* ========================================================================
   25. VEELGESTELDE VRAGEN
   ======================================================================== */

.rlb-faq { max-width: 80ch; }
.rlb-faq-item { border-bottom: var(--rlb-rand); }
.rlb-faq-vraag {
  display: flex; align-items: center; gap: var(--rlb-r2);
  padding: var(--rlb-r4) 0;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 600; font-size: 1.0625rem;
  color: var(--merk-inkt, #1A1D21);
  cursor: pointer;
  list-style: none;
}
.rlb-faq-vraag::-webkit-details-marker { display: none; }
.rlb-faq-vraag::before {
  content: "+";
  flex: none;
  width: 24px;
  font-size: 1.25rem;
  color: var(--merk-accent, #E2000F);
}
.rlb-faq-item[open] > .rlb-faq-vraag::before { content: "\2212"; }
.rlb-faq-antwoord { padding: 0 0 var(--rlb-r4) var(--rlb-r5); }

/* ========================================================================
   26. STAPPEN
   ======================================================================== */

.rlb-stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--rlb-ruimte-l);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: rlb-stap;
}
.rlb-stap-item { min-width: 0; }
.rlb-stap-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--rlb-r2);
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900; font-size: 1.125rem;
}
.rlb-stap-titel { margin: 0 0 var(--rlb-r1); font-size: 1.125rem; color: var(--merk-inkt, #1A1D21); }
.rlb-stap-tekst { margin: 0; }

/* ========================================================================
   27. AFSLUITENDE OPROEP
   ======================================================================== */

/* DE AFSLUITENDE BANNER.
   Diepblauw over de volle breedte, met de vraag links en de drie wegen naar
   een antwoord rechts. Eerst stonden de knoppen onder de tekst en viel het
   geheel weg tegen de rest van de pagina; nu is het de enige donkere band
   onderaan en kan hij niet gemist worden. */
.rlb-cta-sectie {
  background: var(--merk-diepblauw, #0E284B);
  color: #fff;
  overflow: hidden;
}
.rlb-cta-sectie.rlb--met-beeld::before { opacity: .22; }
/* Een diagonale glans van het accent: geeft de band diepte zonder een
   afbeelding nodig te hebben. */
.rlb-cta-sectie::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 88% 10%, color-mix(in srgb, var(--merk-accent, #E2000F) 42%, transparent) 0%, transparent 62%),
    radial-gradient(40% 90% at 4% 96%, color-mix(in srgb, var(--merk-accent, #E2000F) 22%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.rlb-cta-sectie > .rlb-binnen { position: relative; z-index: 1; }

.rlb-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--rlb-ruimte-l) var(--rlb-ruimte-xl);
  align-items: center;
}
.rlb-cta > * { min-width: 0; }
.rlb-cta-titel {
  margin: 0 0 var(--rlb-ruimte-s);
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
}
.rlb-cta-tekst { margin: 0; max-width: 46ch; font-size: 1.1875rem; color: var(--rlb-op-donker-gedempt); }
.rlb-cta-tekst p { color: inherit; }

/* De knoppen staan onder elkaar in de rechterkolom, met de hoofdactie groot
   en de twee andere wegen daaronder als gelijkwaardige maar rustiger opties. */
.rlb-cta .rlb-knoppen {
  display: grid;
  gap: var(--rlb-r2);
  margin: 0;
  justify-items: stretch;
}
.rlb-cta .rlb-knop { justify-content: center; }
/* Alleen de MAAT, geen kleur. Deze selector is specifieker dan die in
   sectie 68 en zou de knop anders stilletjes wit maken, ook op de
   lichtgrijze CTA-band waar wit op wit staat. */
.rlb-cta .rlb-knop--primair {
  padding: var(--rlb-r4) var(--rlb-r5);
  font-size: 1.0625rem;
}
/* Witte outline alleen waar de band ook werkelijk donker is. Op de
   lichtgrijze CTA-band stond deze knop wit op bijna-wit. */
.rlb-cta-sectie--beeld .rlb-cta .rlb-knop--secundair,
.rlb--vlak-diepblauw .rlb-cta .rlb-knop--secundair,
.rlb--vlak-inkt .rlb-cta .rlb-knop--secundair {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.rlb-cta-sectie--beeld .rlb-cta .rlb-knop--secundair:hover,
.rlb--vlak-diepblauw .rlb-cta .rlb-knop--secundair:hover,
.rlb--vlak-inkt .rlb-cta .rlb-knop--secundair:hover {
  border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff;
}
.rlb-cta .rlb-knop--ghost { color: var(--rlb-op-donker-gedempt); }
.rlb-cta .rlb-knop--ghost:hover { color: #fff; }

/* DE AFGERONDE BANNERVARIANT (stijl 'afgerond').
   Niet de donkere band over de volle breedte, maar het donkere vlak als
   afgeronde banner BINNEN de paginakolom: de sectie zelf blijft de
   paginagrond, .rlb-cta draagt kleur, ronding en de accentglans. */
.rlb-cta-sectie--afgerond {
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-tekst, #3D444D);
}
.rlb-cta-sectie--afgerond::after { content: none; }
.rlb-cta-sectie--afgerond .rlb-cta {
  position: relative;
  overflow: hidden;
  background: var(--merk-diepblauw, #0E284B);
  color: #fff;
  /* De rounded CTA-banner MAG rond zijn: dat is de vaste afsluiting van
     elke pagina (eis 10 nov). Alleen de knoppen volgen de krappe radius. */
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
  padding: var(--rlb-ruimte-xl) var(--rlb-ruimte-l);
}
/* De diagonale accentglans verhuist mee naar het afgeronde vlak. */
.rlb-cta-sectie--afgerond .rlb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 120% at 88% 10%, color-mix(in srgb, var(--merk-accent, #E2000F) 42%, transparent) 0%, transparent 62%),
    radial-gradient(40% 90% at 4% 96%, color-mix(in srgb, var(--merk-accent, #E2000F) 22%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.rlb-cta-sectie--afgerond .rlb-cta > * { position: relative; z-index: 1; }
/* Binnen de banner is de band donker, dus de secundaire knop krijgt hier
   dezelfde witte outline als op de beeldvariant. */
.rlb-cta-sectie--afgerond .rlb-cta .rlb-knop--secundair {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.rlb-cta-sectie--afgerond .rlb-cta .rlb-knop--secundair:hover {
  border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff;
}

/* ========================================================================
   28. GERELATEERD
   ======================================================================== */

.rlb-ger-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
  margin: 0; padding: 0; list-style: none;
}
.rlb-ger-item { min-width: 0; }
.rlb-ger-link {
  display: flex; flex-direction: column; gap: var(--rlb-r2);
  height: 100%;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  text-decoration: none;
}
.rlb-ger-link:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-ger-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }
.rlb-ger-titel { font-weight: 700; color: var(--merk-inkt, #1A1D21); }
.rlb-ger-tekst { font-size: 1rem; color: var(--merk-tekst, #3D444D); }

/* ========================================================================
   29. CONTACT
   ======================================================================== */

.rlb-contact-rij-vak {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--rlb-ruimte-l);
  align-items: start;
}
.rlb-contact-rij-vak > * { min-width: 0; }

.rlb-contact-lijst { display: grid; gap: var(--rlb-r2); margin: 0; padding: 0; list-style: none; }
.rlb-contact-rij > *,
.rlb-contact-rij {
  display: flex; align-items: center; gap: var(--rlb-r3);
}
.rlb-contact-rij > a,
.rlb-contact-rij {
  padding: var(--rlb-r3);
  border-radius: var(--merk-radius_veld, 10px);
  color: var(--merk-inkt, #1A1D21);
  text-decoration: none;
  min-height: 56px;
}
.rlb-contact-rij > a:hover { background: var(--merk-vlak, #F6F7F8); }
.rlb-contact-rij .rlb-icoon { color: var(--merk-accent, #E2000F); flex: none; }
.rlb-contact-rij span { display: flex; flex-direction: column; min-width: 0; }
.rlb-contact-waarde { color: var(--merk-tekst, #3D444D); font-size: 1rem; overflow-wrap: anywhere; }
.rlb-contact-belofte {
  display: flex; align-items: center; gap: var(--rlb-r2);
  margin: var(--rlb-ruimte-s) 0 0;
  font-size: .9375rem; color: var(--merk-gedempt, #696F77);
}
.rlb-contact-sociaal {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r2);
  margin: var(--rlb-ruimte-m) 0 0; padding: 0; list-style: none;
}
.rlb-contact-sociaal a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: var(--rlb-rand); border-radius: 50%;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-contact-sociaal a:hover { border-color: var(--merk-accent, #E2000F); color: var(--merk-accent, #E2000F); }

.rlb-contact-vak {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #F6F7F8);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
}

/* ========================================================================
   30. DEELKNOPPEN
   ======================================================================== */

.rlb-share { display: flex; align-items: center; gap: var(--rlb-ruimte-s); flex-wrap: wrap; }
.rlb-share-titel { margin: 0; font-weight: 600; color: var(--merk-inkt, #1A1D21); }
.rlb-share-lijst { display: flex; gap: var(--rlb-r2); margin: 0; padding: 0; list-style: none; }
.rlb-share-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: var(--rlb-rand); border-radius: 50%;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-share-knop:hover { border-color: var(--merk-accent, #E2000F); color: var(--merk-accent, #E2000F); }

/* ========================================================================
   31. VOETTEKST
   ======================================================================== */

.rlb-footer {
  padding-block: var(--rlb-ruimte-xl) var(--rlb-ruimte-m);
  background: var(--merk-vlak, #F6F7F8);
  border-top: var(--rlb-rand);
}
.rlb-footer-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--rlb-ruimte-l);
}
.rlb-footer-rij > * { min-width: 0; }

.rlb-footer-logo { width: auto; height: 72px; margin-bottom: var(--rlb-ruimte-s); }
.rlb-footer-merk {
  margin: 0 0 var(--rlb-ruimte-s);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900; font-size: 1.25rem; letter-spacing: .06em;
  color: var(--merk-inkt, #1A1D21);
  text-transform: uppercase;
}
.rlb-footer-intro { font-size: 1rem; max-width: 42ch; }

/* Eén kop per kolom, en de links zijn een lijst. Op de oude site stond elk
   voettekstitem in een <h2> — 'Pagina's', 'Home', 'Agenda', en zelfs de
   copyrightregel. */
.rlb-footer-kop {
  margin: 0 0 var(--rlb-ruimte-s);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-footer-kolom ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rlb-r2); }
.rlb-footer-kolom a { color: var(--merk-inkt, #1A1D21); text-decoration: none; }
.rlb-footer-kolom a:hover { color: var(--merk-accent, #E2000F); text-decoration: underline; }

.rlb-footer-sociaal {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r2);
  margin: var(--rlb-ruimte-m) 0 0; padding: 0; list-style: none;
}
.rlb-footer-sociaal a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: var(--rlb-rand); border-radius: 50%;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-footer-sociaal a:hover { border-color: var(--merk-accent, #E2000F); color: var(--merk-accent, #E2000F); }

.rlb-footer-onder {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--rlb-ruimte-s) var(--rlb-ruimte-m);
  margin-top: var(--rlb-ruimte-l);
  padding-top: var(--rlb-ruimte-m);
  border-top: var(--rlb-rand);
  font-size: .9375rem;
}
.rlb-footer-copy { margin: 0; color: var(--merk-gedempt, #696F77); }
.rlb-footer-juridisch {
  display: flex; flex-wrap: wrap; gap: var(--rlb-ruimte-s);
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.rlb-footer-juridisch a { color: var(--merk-gedempt, #696F77); text-decoration: none; }
.rlb-footer-juridisch a:hover { color: var(--merk-inkt, #1A1D21); text-decoration: underline; }

/* ========================================================================
   32. VIDEO — klik-om-te-laden
   ======================================================================== */

/* Geen iframe bij het laden: dat spaart een verzoek naar YouTube en de
   toestemmingsvraag die daarbij hoort. De iframe komt na een klik. */
.rlb-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--merk-vlak, #F6F7F8) var(--rlb-video-poster, none) center / cover no-repeat;
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_beeld, 10px);
  overflow: hidden;
}
.rlb-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.rlb-video-start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--rlb-r2);
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: var(--merk-inkt, #1A1D21);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  cursor: pointer;
}
.rlb-video-start:hover { background: rgba(0, 0, 0, .25); }
.rlb-video-start .rlb-icoon { color: var(--merk-accent, #E2000F); }

/* ========================================================================
   33. SMALLERE SCHERMEN
   ======================================================================== */

@media (max-width: 1100px) {
  .rlb-boeker { grid-template-columns: minmax(0, 1fr); }
  .rlb-kalender { position: static; }
  .rlb-contact-rij-vak { grid-template-columns: minmax(0, 1fr); }
  .rlb-tekst--met-kaart .rlb-tekst-rij { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .rlb-nav, .rlb-header-acties { display: none; }
  .rlb-mobiel { display: block; }
  .rlb-vinylgrid--k4 .rlb-vinyl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-vinylgrid--k3 .rlb-vinyl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Dezelfde waarden als voorheen (3rem en 4rem), maar uitgedrukt in de schaal. */
  :root { --rlb-ruimte-xl: var(--rlb-r7); --rlb-ruimte-xxl: calc(var(--rlb-r7) + var(--rlb-r4)); }
  .rlb-hero-rij, .rlb-tb-rij { grid-template-columns: minmax(0, 1fr); gap: var(--rlb-ruimte-l); }
  .rlb-tekstbeeld--links .rlb-tb-media { order: 0; }
  .rlb-footer-rij { grid-template-columns: minmax(0, 1fr); }
  .rlb-footer-juridisch { margin-left: 0; }

  /* De zwevende boekknop wordt onderaan een volle balk: een gedraaide knop
     naast een duim is op een telefoon niet te raken. */
  .rlb-zijtab {
    top: auto; bottom: 0; left: 0; right: 0;
    transform: none;
    padding: .6rem clamp(var(--rlb-r4), 4vw, 2.5rem);
    background: color-mix(in srgb, var(--merk-vlak, #F6F7F8) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: var(--rlb-rand);
  }
  .rlb-zijtab-knop,
  .rlb-zijtab--rechts .rlb-zijtab-knop,
  .rlb-zijtab--links .rlb-zijtab-knop {
    transform: none;
    width: 100%;
    justify-content: center;
    border-radius: var(--merk-radius_knop, 999px);
  }
  .rlb-zijtab--niet-mobiel { display: none; }

  /* Speler en boekknop mogen elkaar niet overlappen. */
  body.rlb-speler-actief .rlb-zijtab { bottom: var(--rlb-speler-h); }

  .rlb-speler-balk { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--rlb-r2); }
  .rlb-balk-acties { grid-column: 1 / -1; justify-content: space-between; }
}

@media (max-width: 560px) {
  .rlb-vinylgrid--k4 .rlb-vinyl-raster,
  .rlb-vinylgrid--k3 .rlb-vinyl-raster,
  .rlb-vinylgrid--k2 .rlb-vinyl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rlb-gig { flex-wrap: wrap; }
  .rlb-gig-knop { width: 100%; justify-content: center; }
  .rlb-balk-voortgang .rlb-balk-tijd:last-of-type { display: none; }
}

/* ========================================================================
   34. BEWEGING EN AFDRUK
   ======================================================================== */

/* Wie aangeeft minder beweging te willen, krijgt geen draaiende platen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rlb-vinylgrid--draai .rlb-vinyl-link:hover .rlb-vinyl-plaat { transform: none; }
}

@media print {
  .rlb-header, .rlb-zijtab, .rlb-speler-balk, .rlb-share, .rlb-video-start { display: none !important; }
  body { background: #fff; color: #000; }
  .rlb { padding-block: var(--rlb-r4); }
}

/* ========================================================================
   35. VIDEOCARROUSEL, DISCOGRAFIE EN ALBUMS
   ========================================================================
   De INDELING komt van Kentha: een grote speler met strakke miniaturen
   eronder, releases als een raster van vierkante hoezen met drie actie-iconen,
   en albums die uitklappen naar hun tracklijst. De KLEUREN, de vormen en het
   lettertype zijn die van Re-Lex: wit vlak, blauw accent, Roboto. Kentha doet
   de discografie donker; hier is hij licht.

   Geen overname dus, maar een vertaling.
   ======================================================================== */

/* --- de gedeelde carrouselkop met pijlen ------------------------------- */

.rlb-carrousel-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rlb-ruimte-m);
  margin-bottom: var(--rlb-ruimte-m);
}
.rlb-carrousel-kop > .rlb-kop { margin-bottom: 0; }
.rlb-carrousel-kop .rlb-tussenkop { margin: 0; }

.rlb-carrousel-nav { display: flex; gap: var(--rlb-r2); flex: none; }
.rlb-carrousel-knop {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  font-size: 1.375rem; line-height: 1;
  cursor: pointer;
  transition: border-color var(--rlb-overgang), background var(--rlb-overgang);
}
.rlb-carrousel-knop:hover {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-vlak, #F6F7F8);
}
/* Een pijl die niets meer kan doen hoort uit te staan, niet dood te zijn. */
.rlb-carrousel-knop[disabled] { opacity: .35; cursor: default; }

/* --- de webcast: de grote speler -------------------------------------- */

.rlb-webcast-sectie { background: var(--merk-diepblauw, #0E284B); color: #fff; }
.rlb-webcast-sectie :where(h1, h2, h3, .rlb-titel, .rlb-tussenkop) { color: #fff; }
.rlb-webcast-sectie .rlb-intro { color: var(--rlb-op-donker-gedempt); }
.rlb-webcast-sectie .rlb-kicker { color: var(--merk-accent, #E2000F); }
.rlb-webcast-sectie .rlb-carrousel-knop {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
.rlb-webcast-sectie .rlb-carrousel-knop:hover {
  background: rgba(255, 255, 255, .14);
  border-color: var(--merk-accent, #E2000F);
}

.rlb-webcast-speler {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--merk-radius_kaart, 10px);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45);
}
.rlb-webcast-speler iframe { display: block; width: 100%; height: 100%; border: 0; }

.rlb-webcast-groot {
  position: relative;
  width: 100%;
  height: 100%;
  /* De posterregel stond alleen op .rlb-video, en de grote speler van de
     webcast heet .rlb-webcast-groot. Daardoor bleef hij zwart: er was een
     poster, maar niets dat hem tekende. */
  background: #000 var(--rlb-video-poster, none) center / cover no-repeat;
}
/* Een beetje dempen, anders concurreert het stilstaande beeld met de
   speelknop die eroverheen staat. */
.rlb-webcast-groot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.rlb-webcast-groot .rlb-video-start { position: relative; z-index: 1; }
.rlb-webcast-groot iframe { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border: 0; }
.rlb-webcast-groot .rlb-video-start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--rlb-r2);
  width: 100%;
  border: 0;
  background: rgba(3, 14, 24, .34);
  color: #fff;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700; font-size: 1.0625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--rlb-overgang);
}
.rlb-webcast-groot .rlb-video-start:hover { background: rgba(3, 14, 24, .12); }
.rlb-webcast-groot .rlb-video-start .rlb-icoon {
  box-sizing: content-box;
  padding: var(--rlb-r4);
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--merk-accent, #E2000F) 0%, transparent);
  transition: transform var(--rlb-overgang);
}
.rlb-webcast-groot .rlb-video-start:hover .rlb-icoon { transform: scale(1.08); }

/* --- de webcast: de miniaturen ---------------------------------------- */

.rlb-webcast-eerder { margin-top: var(--rlb-ruimte-l); }

.rlb-webcast-lijst {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(214px, 1fr);
  gap: var(--rlb-r3);
  margin: 0; padding: 0 0 var(--rlb-r3);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
/* Safari (vóór 18.2) en oudere Chromium kennen scrollbar-width niet; daar
   maakt de webkit-pseudo dezelfde dunne balk. Nieuwere browsers negeren de
   pseudo zodra scrollbar-width gezet is — de twee bijten elkaar dus niet. */
.rlb-webcast-lijst::-webkit-scrollbar { height: 8px; }
.rlb-webcast-lijst::-webkit-scrollbar-thumb {
  background: var(--merk-lijn, #E8EAEC);
  border-radius: 4px;
}
.rlb-vod { min-width: 0; scroll-snap-align: start; }

.rlb-vod-knop {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.rlb-vod-beeld {
  position: relative;
  display: block;
  border-radius: var(--merk-radius_beeld, 8px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.rlb-vod-beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform 420ms cubic-bezier(.2, .7, .3, 1), filter var(--rlb-overgang);
}
.rlb-vod-knop:hover .rlb-vod-beeld img,
.rlb-vod-knop:focus-visible .rlb-vod-beeld img { transform: scale(1.06); filter: none; }

.rlb-vod-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 14, 24, .3);
  opacity: 0;
  transition: opacity var(--rlb-overgang);
}
.rlb-vod-play .rlb-icoon {
  box-sizing: content-box;
  padding: var(--rlb-r2);
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: #fff;
}
.rlb-vod-knop:hover .rlb-vod-play,
.rlb-vod-knop:focus-visible .rlb-vod-play { opacity: 1; }

/* De video die nu groot staat, is in de carrousel aangewezen. */
.rlb-vod[aria-current="true"] .rlb-vod-beeld {
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 0 0 2px var(--merk-accent, #E2000F);
}

.rlb-vod-tekst { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rlb-vod-titel {
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.35;
  /* Twee regels, dan afkappen. Anders worden de kaarten verschillend hoog en
     is de carrousel rommelig, en dat was precies de klacht over de agenda. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rlb-vod-datum { font-size: .8125rem; color: var(--rlb-op-donker-stil); font-variant-numeric: tabular-nums; }

/* --- de discografie: raster van vierkante hoezen ---------------------- */

.rlb-disco-lijst {
  display: grid;
  gap: var(--rlb-ruimte-m);
  margin: 0; padding: 0;
  list-style: none;
}
/* auto-fit en geen harde 4: met drie releases gaf repeat(4) een lege
   vierde kolom van 0px en werden de kaarten onnodig breed uitgerekt.
   Nu vullen ze de breedte met zoveel kaarten als er passen. */
.rlb-discografie--raster .rlb-disco-lijst {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
/* Bij hooguit drie releases niet over de volle breedte uitsmeren: een hoes
   van 430px naast twee andere is groter dan een echte elpee. */
.rlb-discografie--raster .rlb-disco-lijst:has(> :last-child:nth-child(-n+3)) {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 22rem));
  justify-content: center;
}
.rlb-discografie--carrousel .rlb-disco-lijst {
  grid-auto-flow: column;
  grid-auto-columns: minmax(264px, 1fr);
  padding-bottom: var(--rlb-r3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.rlb-disco-lijst > * { min-width: 0; }

.rlb-disco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}

.rlb-disco-hoesvak {
  position: relative;
  border-radius: var(--merk-radius_beeld, 8px);
  overflow: hidden;
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-disco-hoes {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 460ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-disco:hover .rlb-disco-hoes { transform: scale(1.04); }
.rlb-disco-leeg {
  display: block; width: 100%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--merk-paneel, #FFFFFF) 26%, var(--merk-vlak, #F6F7F8) 28%);
}

/* De drie acties liggen OP de hoes en komen pas bij aanwijzen tevoorschijn,
   zoals bij Kentha. Op een aanraakscherm staan ze altijd aan, want daar is
   geen hover — zie de media query onderaan. */
.rlb-disco-acties-op-hoes {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: var(--rlb-r2);
  padding: var(--rlb-r3);
  background: linear-gradient(to top, rgba(6, 36, 61, .82), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-disco:hover .rlb-disco-acties-op-hoes,
.rlb-disco:focus-within .rlb-disco-acties-op-hoes { opacity: 1; transform: translateY(0); }

.rlb-disco-actie {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--merk-diepblauw, #0E284B);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-disco-actie:hover { background: var(--merk-accent, #E2000F); color: #fff; transform: scale(1.08); }
.rlb-disco-actie--speel { background: var(--merk-accent_donker, #A50B00); color: #fff; }
.rlb-disco-actie--speel:hover { background: #fff; color: var(--merk-accent_donker, #A50B00); }

.rlb-disco-soort {
  position: absolute;
  top: .6rem; left: .6rem;
  padding: .2rem var(--rlb-r2);
  border-radius: 4px;
  background: rgba(10, 20, 32, .72);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rlb-disco-info { display: flex; flex-direction: column; gap: var(--rlb-r1); padding-top: var(--rlb-r3); }
.rlb-disco-titel { margin: 0; font-size: 1.0625rem; }
.rlb-disco-titel a { color: inherit; text-decoration: none; }
.rlb-disco-titel a:hover { color: var(--merk-accent_donker, #A50B00); }

/* "3 tracks | 2026" — hetzelfde ritme als Kentha, maar met een echte
   scheidingsstreep in plaats van een pipe-teken in de tekst. */
.rlb-disco-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r2);
  margin: 0;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-disco-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 1px; height: .8em;
  margin-right: var(--rlb-r2);
  vertical-align: -.1em;
  background: var(--merk-lijn, #E8EAEC);
}
.rlb-disco-over { margin: var(--rlb-r1) 0 0; font-size: 1rem; }
.rlb-disco-plays {
  display: flex; align-items: center; gap: var(--rlb-r1);
  margin: .15rem 0 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #696F77);
  font-variant-numeric: tabular-nums;
}

/* --- albums met uitklapbare tracklijst -------------------------------- */

.rlb-albums { display: grid; gap: var(--rlb-r2); margin: 0; padding: 0; list-style: none; }

.rlb-album {
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  overflow: hidden;
}
.rlb-album[open] { border-color: var(--merk-accent, #E2000F); }

.rlb-album > summary {
  display: flex;
  align-items: center;
  gap: var(--rlb-ruimte-s);
  padding: var(--rlb-r3);
  cursor: pointer;
  list-style: none;
}
.rlb-album > summary::-webkit-details-marker { display: none; }
.rlb-album > summary:hover { background: var(--merk-vlak, #F6F7F8); }

.rlb-album-hoes {
  flex: none;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--merk-radius_beeld, 8px);
}
.rlb-album-kop { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rlb-album-titel { margin: 0; font-size: 1.0625rem; }
.rlb-album-meta { margin: 0; font-size: .875rem; color: var(--merk-gedempt, #696F77); }

.rlb-album-pijl {
  flex: none;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
  transition: transform var(--rlb-overgang);
}
.rlb-album[open] .rlb-album-pijl { transform: rotate(180deg); }

.rlb-album-tracks { border-top: var(--rlb-rand); }

/* --- de minispeler, voor de hero -------------------------------------- */

/* Compacte variant: alleen nummer, titel en een speelknop. Bedoeld voor de
   hero, waar de tracklijst naast de belofte staat en niet de hoofdrol speelt. */
.rlb-speler--mini .rlb-speler-lijst { gap: 0; }
.rlb-speler--mini .rlb-speler-track {
  padding: var(--rlb-r2) .6rem;
  border-radius: 0;
  border-bottom: var(--rlb-rand);
}
.rlb-speler--mini .rlb-speler-track:last-child { border-bottom: 0; }
.rlb-speler--mini .rlb-speler-hoesvak { width: 40px; }
.rlb-speler--mini .rlb-golf,
.rlb-speler--mini .rlb-speler-meta,
.rlb-speler--mini .rlb-speler-plays { display: none; }
.rlb-speler--mini .rlb-speler-titel { font-size: .9375rem; }
.rlb-speler--mini .rlb-speler-koop { padding: var(--rlb-r1) var(--rlb-r2); font-size: .875rem; }

/* --- smallere schermen ------------------------------------------------ */

@media (max-width: 1100px) {
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .rlb-carrousel-kop { flex-direction: column; align-items: flex-start; }
  .rlb-webcast-lijst { grid-auto-columns: minmax(176px, 1fr); }
  .rlb-discografie--carrousel .rlb-disco-lijst { grid-auto-columns: minmax(228px, 1fr); }
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Op een aanraakscherm bestaat hover niet. De acties op de hoes zouden daar
   dus onbereikbaar zijn; daarom staan ze er altijd. */
@media (hover: none) {
  .rlb-disco-acties-op-hoes { opacity: 1; transform: none; }
  .rlb-vod-play { opacity: 1; background: rgba(3, 14, 24, .18); }
}

/* ========================================================================
   36. HERO MET VIDEOACHTERGROND EN VINYLKNOPPEN
   ======================================================================== */

/* De achtergrond ligt achter alles, maar binnen de sectie: een vaste
   positionering zou hem over de hele pagina uitsmeren. */
.rlb-hero-achter {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--merk-diepblauw, #0E284B);
}
.rlb-hero-video,
.rlb-hero-achterbeeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Met een videoachtergrond wordt de tekst wit; op bewegend beeld is donkere
   tekst niet leesbaar, hoe licht de video ook begint. */
.rlb-hero--achtergrond { color: #fff; }
.rlb-hero--achtergrond :where(h1, h2, h3, .rlb-hero-titel) { color: #fff; }
.rlb-hero--achtergrond .rlb-hero-intro { color: var(--rlb-op-donker-zacht); }
.rlb-hero--achtergrond .rlb-kicker { color: #fff; }

/* EEN TWEEDE SLOT OP DE LEESBAARHEID.
   De sluier doet het werk, maar een foto blijft een onbekende: er komen
   projectfoto's bij en niemand gaat die op helderheid keuren. Een zachte
   schaduw onder de letters kost niets, is op donker niet te zien en vangt
   het geval waarin de foto tóch lichter uitvalt dan verwacht.

   De bovenregel staat niet meer in rood maar in wit: rood op een foto is
   een gok (op het rode gedeelte van een bouwplaatsfoto valt hij weg), en
   het rode streepje ervoor draagt het merk al. */
.rlb-hero--achtergrond :where(.rlb-hero-titel, .rlb-hero-intro, .rlb-kicker) {
  text-shadow: 0 1px 2px rgba(8, 20, 40, .35), 0 2px 28px rgba(8, 20, 40, .45);
}
.rlb-hero--achtergrond .rlb-knop--secundair {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.rlb-hero--achtergrond .rlb-knop--secundair:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* De sluier moet BOVEN de video liggen maar onder de tekst. Zonder deze
   z-index valt hij achter de video en doet hij niets. */
.rlb-hero-sluier { z-index: 1; }
.rlb-hero--achtergrond .rlb-hero-rij,
.rlb-hero--achtergrond .rlb-heroviny-rij { position: relative; z-index: 2; }

/* --- de vinylknoppen in de hero --------------------------------------- */

.rlb-heroviny-rij { margin-top: var(--rlb-ruimte-xl); }
.rlb-heroviny-rij > ul {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(var(--rlb-r2), 1.6vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-heroviny { min-width: 0; }

.rlb-heroviny-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rlb-r2);
  text-decoration: none;
  color: inherit;
}

.rlb-heroviny-beeld {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
.rlb-heroviny-plaat {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* De plaat draait traag en eindeloos, zoals een plaat op een draaitafel.
     Bij aanwijzen gaat hij sneller: dat is de knopbevestiging. */
  animation: rlb-draai 14s linear infinite;
  transition: transform var(--rlb-overgang), filter var(--rlb-overgang);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.rlb-heroviny-link:hover .rlb-heroviny-plaat,
.rlb-heroviny-link:focus-visible .rlb-heroviny-plaat {
  animation-duration: 2.6s;
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent));
}

/* Een blauwe gloed achter de plaat bij aanwijzen, uit het accent zodat hij
   meeverandert met de huisstijl. */
.rlb-heroviny-beeld::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--merk-accent, #E2000F) 42%, transparent) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--rlb-overgang);
}
.rlb-heroviny-link:hover .rlb-heroviny-beeld::after,
.rlb-heroviny-link:focus-visible .rlb-heroviny-beeld::after { opacity: 1; }

.rlb-heroviny-leeg {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--merk-inkt, #1A1D21); /* terugval: zonder color-mix vervalt het gradient hieronder */
  background: radial-gradient(circle, color-mix(in srgb, var(--merk-inkt, #1A1D21) 95%, var(--merk-grond, #FFFFFF)) 26%, var(--merk-inkt, #1A1D21) 28%);
}

.rlb-heroviny-naam {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: clamp(.6875rem, 1vw, .875rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

/* --- smallere schermen ------------------------------------------------ */

@media (max-width: 1100px) {
  .rlb-heroviny-rij > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rlb-heroviny-rij { margin-top: var(--rlb-ruimte-l); }
  .rlb-heroviny-rij > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rlb-r2); }
  .rlb-heroviny-naam { font-size: .625rem; }
}

/* Wie minder beweging wil, krijgt geen draaiende platen en geen video.
   De video wordt hier ook echt verborgen, zodat de browser hem niet laadt. */
@media (prefers-reduced-motion: reduce) {
  .rlb-heroviny-plaat { animation: none; }
  .rlb-heroviny-link:hover .rlb-heroviny-plaat { animation: none; }
  .rlb-hero-video { display: none; }
}

/* ========================================================================
   37. BEWEGING, HOVERS EN DE ZWEVENDE BOEKKNOP IN CERISE
   ========================================================================
   Twee regels gelden overal hieronder:

   1. Beweging is NOOIT voorwaarde om iets te zien. Elk element dat invliegt
      staat zonder JavaScript gewoon op zijn plek — de klasse die hem verbergt
      wordt pas door rl.js gezet, en alleen als de browser kan waarnemen
      wanneer hij in beeld komt. Een bezoeker met JavaScript uit of een
      zoekmachine ziet dus een complete pagina, niet een lege.
   2. Wie `prefers-reduced-motion` aan heeft staan, krijgt geen enkele van
      deze bewegingen. Niet afgezwakt: uit.
   ======================================================================== */

/* --- de zwevende boekknop: cerise ------------------------------------- */

.rlb-zijtab-knop {
  background: var(--merk-cerise, #E2000F);
  color: #fff;
  /* Een dunne lichte rand maakt de tab los van de pagina-inhoud erachter,
     ook als daar toevallig een roodachtige foto staat. */
  box-shadow: 0 10px 30px rgba(10, 20, 32, .3), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible {
  background: var(--merk-cerise_donker, #A50B00);
  color: #fff;
}

/* Een rustige pols op de tab: hij mag opvallen zonder te knipperen. De puls
   stopt zodra je hem aanwijst, want dan heeft hij zijn werk gedaan. */
.rlb-zijtab--rechts .rlb-zijtab-knop,
.rlb-zijtab--links .rlb-zijtab-knop { animation: rlb-tabpols 4.5s ease-in-out infinite; }
.rlb-zijtab-knop:hover { animation: none; }

@keyframes rlb-tabpols {
  0%, 92%, 100% { box-shadow: 0 10px 30px rgba(10, 20, 32, .3), inset 0 0 0 1px rgba(255, 255, 255, .18); }
  96%           { box-shadow: 0 10px 30px rgba(10, 20, 32, .3), inset 0 0 0 1px rgba(255, 255, 255, .18),
                              0 0 0 10px color-mix(in srgb, var(--merk-cerise, #E2000F) 0%, transparent); }
}

/* --- knoppen: strakker ------------------------------------------------ */

.rlb-knop {
  position: relative;
  padding: .85rem var(--rlb-r5);
  border-width: 1px;
  font-size: .9375rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  /* Een knop die bij aanwijzen omhoog schiet voelt sprongerig. Een lichte
     lift met een schaduw eronder leest als "indrukbaar" zonder te springen. */
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
              box-shadow 220ms cubic-bezier(.2, .7, .3, 1), transform 220ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-knop:hover { transform: translateY(-1px); }
.rlb-knop:active { transform: translateY(0); transition-duration: 60ms; }

.rlb-knop--primair {
  box-shadow: 0 2px 0 0 var(--merk-inkt, #1A1D21);
}
.rlb-knop--primair:hover {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--merk-accent_donker, #A50B00) 42%, transparent),
              0 2px 0 0 var(--merk-inkt, #1A1D21);
}

/* De pijl in een knop schuift mee bij aanwijzen: een kleine bevestiging dat
   er iets gaat gebeuren. */
.rlb-knop .rlb-icoon { transition: transform 220ms cubic-bezier(.2, .7, .3, 1); }
.rlb-knop:hover .rlb-icoon { transform: translateX(2px); }

/* --- onderstreping die groeit, voor links in lopende tekst ------------- */

.rlb p a:not(.rlb-knop),
.rlb-intro a:not(.rlb-knop) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 240ms cubic-bezier(.2, .7, .3, 1);
}
.rlb p a:not(.rlb-knop):hover,
.rlb-intro a:not(.rlb-knop):hover { background-size: 100% 1px; }

/* --- invliegen bij in beeld komen ------------------------------------- */

/* rl.js zet data-rl-anim="uit" op de elementen die mogen invliegen, en haalt
   het weg zodra ze in beeld komen. Staat JavaScript uit, dan wordt dat
   attribuut nooit gezet en is alles gewoon zichtbaar. */
[data-rl-anim="uit"] {
  opacity: 0;
  transform: translateY(18px);
}
[data-rl-anim="aan"] {
  opacity: 1;
  transform: none;
  transition: opacity 620ms cubic-bezier(.2, .7, .3, 1),
              transform 620ms cubic-bezier(.2, .7, .3, 1);
}

/* Kinderen binnen een blok komen kort na elkaar, niet tegelijk. Dat leest als
   een beweging in plaats van als een schok. De vertraging wordt per element
   als variabele gezet door rl.js. */
[data-rl-anim] { transition-delay: var(--rlb-vertraag, 0ms); }

/* De kaartjes in een raster komen iets verder van onderen: dat geeft het
   raster diepte zonder dat de pagina gaat schuiven. */
.rlb-usp[data-rl-anim="uit"],
.rlb-disco[data-rl-anim="uit"],
.rlb-review[data-rl-anim="uit"],
.rlb-gig[data-rl-anim="uit"] { transform: translateY(28px) scale(.985); }

/* --- hovers op de vlakken --------------------------------------------- */

.rlb-gig {
  transition: border-color 200ms ease, box-shadow 260ms cubic-bezier(.2, .7, .3, 1),
              transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-gig:hover {
  border-left-color: var(--merk-cerise, #E2000F);
  box-shadow: 0 10px 28px rgba(10, 20, 32, .09);
  transform: translateX(3px);
}

.rlb-stream-link,
.rlb-ger-link,
.rlb-product-link { will-change: transform; }

/* De kop van een sectie krijgt een dun blauw streepje dat uitgroeit zodra de
   sectie in beeld komt. Klein gebaar, maar het markeert waar een nieuw
   onderwerp begint — dat is wat scanbaarheid is. */
.rlb-kop > .rlb-titel::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin-top: var(--rlb-r3);
  border-radius: 2px;
  background: var(--merk-accent, #E2000F);
  transition: width 700ms cubic-bezier(.2, .7, .3, 1) 160ms;
}
.rlb[data-rl-inbeeld="1"] .rlb-kop > .rlb-titel::after { width: 56px; }
/* Zonder JavaScript staat het streepje er gewoon, want dan wordt
   data-rl-inbeeld nooit gezet en zou hij anders onzichtbaar blijven. */
.rlb:not([data-rl-inbeeld]) .rlb-kop > .rlb-titel::after { width: 56px; transition: none; }

.rlb-cta-sectie .rlb-kop > .rlb-titel::after,
.rlb-webcast-sectie .rlb-kop > .rlb-titel::after { background: #fff; }

/* --- uit bij voorkeur voor minder beweging ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-rl-anim="uit"],
  [data-rl-anim="aan"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .rlb-kop > .rlb-titel::after { width: 56px; transition: none; }
  .rlb-zijtab--rechts .rlb-zijtab-knop,
  .rlb-zijtab--links .rlb-zijtab-knop { animation: none; }
  .rlb-knop:hover { transform: none; }
  .rlb-gig:hover { transform: none; }
}

/* ========================================================================
   38. DE HERO-VINYLS — nagemeten op www.re-lex.nl
   ========================================================================
   De eerdere versie liet de platen eindeloos rondtollen en op volle
   kolombreedte staan. Dat is niet wat er op de site stond. Gemeten in
   post-1958.css:

     .elementor-element-addf83a { max-width: 48.053%; }      de plaat is
         ongeveer de helft van zijn kolom, en elke kolom is een kwart van de
         rij — dus een plaat beslaat circa 12% van de breedte, niet 25%.
     .elementor-element-2d7bbe9 > .elementor-widget-wrap { justify-content: center; }
     .elementor-element-5d3b493 { margin-bottom: var(--rlb-r9); }    lucht onder rij 1
     .elementor-element-058038c { margin-top: var(--rlb-r9); }       lucht boven rij 2
     .vinyl:hover { transform: rotate(50deg); transition: transform 5s linear; }

   Die laatste regel is het belangrijkst: de platen STAAN STIL en draaien pas
   bij aanwijzen, langzaam, een halve slag van 50 graden in vijf seconden.
   Geen rondtollende schijven dus. Dat is ook waarom het rustig oogde.
   ======================================================================== */

.rlb-heroviny-rij { margin-top: 0; }
.rlb-heroviny-rij--boven { margin-bottom: clamp(2.5rem, 7vw, 100px); }
.rlb-heroviny-rij--onder { margin-top: clamp(2.5rem, 7vw, 100px); }

.rlb-heroviny-rij > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}

/* Elke plaat staat gecentreerd in zijn kwartkolom en beslaat daar ongeveer de
   helft van. Dat is de verhouding van de oude site, en de reden dat er lucht
   tussen de platen zit zonder dat er een gap voor nodig is. */
.rlb-heroviny { min-width: 0; display: flex; justify-content: center; }

.rlb-heroviny-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rlb-r2);
  width: 48%;
  max-width: 180px;
  text-decoration: none;
  color: inherit;
}

.rlb-heroviny-beeld {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

/* STIL, tot je hem aanwijst. Dan een trage halve draai. */
.rlb-heroviny-plaat {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* De eindeloze draai uit een eerdere ronde wordt hier UITGEZET. Zonder
     deze regel blijft hij uit het vorige CSS-deel staan en tollen de platen
     rond, waardoor de tekst erop ondersteboven komt te staan. Op de echte
     site staan ze stil en draaien ze alleen bij aanwijzen. */
  animation: none !important;
  transform: rotate(0deg);
  transition: transform 5s linear, filter 300ms ease;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
}
.rlb-heroviny-link:hover .rlb-heroviny-plaat,
.rlb-heroviny-link:focus-visible .rlb-heroviny-plaat {
  transform: rotate(50deg);
  filter: drop-shadow(0 12px 26px color-mix(in srgb, var(--merk-accent, #E2000F) 0%, transparent));
}

/* De gloed komt mee, maar sneller dan de draai — anders merk je hem niet. */
.rlb-heroviny-beeld::after { transition: opacity 320ms ease; }

.rlb-heroviny-naam {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: clamp(.625rem, .85vw, .8125rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  opacity: .92;
}

/* --- de tekst tussen de twee rijen ------------------------------------ */

/* De titel staat gecentreerd tussen de platen, zoals op de oude site. Een
   tekstkolom links met platen eromheen leest als twee verschillende
   ontwerpen door elkaar. */
.rlb-hero--metvinyl .rlb-hero-rij { grid-template-columns: minmax(0, 1fr); }
.rlb-hero--metvinyl .rlb-hero-tekst {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
}
.rlb-hero--metvinyl .rlb-hero-tekst .rlb-hero-intro { margin-inline: auto; }
.rlb-hero--metvinyl .rlb-hero-tekst .rlb-knoppen { justify-content: center; }
.rlb-hero--metvinyl .rlb-hero-titel {
  font-size: clamp(2.25rem, 6vw, 4rem);
  margin-bottom: var(--rlb-ruimte-m);
}

/* Met twee rijen platen erbij is een scherm vullende hero te hoog: je ziet
   dan de onderste rij niet meer. Daarom groeit hij mee met de inhoud. */
.rlb-hero--metvinyl.rlb-hero--volledig { min-height: 0; display: block; }
.rlb-hero--metvinyl { padding-block: clamp(2.5rem, 6vw, var(--rlb-ruimte-xxl)); }

/* --- smallere schermen ------------------------------------------------ */

@media (max-width: 860px) {
  .rlb-heroviny-rij--boven { margin-bottom: var(--rlb-ruimte-l); }
  .rlb-heroviny-rij--onder { margin-top: var(--rlb-ruimte-l); }
  .rlb-heroviny-link { width: 72%; }
}

@media (max-width: 560px) {
  .rlb-heroviny-rij > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rlb-heroviny-link { width: 84%; gap: var(--rlb-r1); }
  .rlb-heroviny-naam { font-size: .5625rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-heroviny-link:hover .rlb-heroviny-plaat,
  .rlb-heroviny-link:focus-visible .rlb-heroviny-plaat { transform: none; }
}

/* ========================================================================
   39. DE GOLFVORM
   ========================================================================
   Deze was er niet. Het blok rendert de SVG al sinds de eerste versie, maar
   er stond geen enkele regel opmaak voor, dus hij had geen afmeting en was
   onzichtbaar. Dat is precies het soort fout dat niemand ziet in de code en
   iedereen ziet op het scherm.

   Twee lagen staafjes boven elkaar: de onderste in gedempt grijs, de bovenste
   in het accent, afgesneden door een clipPath. rl.js verandert alleen de
   breedte van dat ene masker — geen 120 losse elementen per frame.
   ======================================================================== */

.rlb-golf {
  position: relative;
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  /* Een vaste hoogte: de SVG heeft een viewBox en schaalt mee, dus zonder
     hoogte hier klapt hij dicht tot nul. */
  height: 42px;
  cursor: pointer;
  touch-action: none;
}

.rlb-golf-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rlb-golf-achter rect { fill: var(--merk-lijn, #E8EAEC); }
.rlb-golf-voor rect { fill: var(--merk-accent, #E2000F); }

/* De spelende track krijgt het donkere accent voor het afgespeelde deel, dat
   leest sterker tegen het grijs. */
.rlb-speler-track[aria-current="true"] .rlb-golf-voor rect {
  fill: var(--merk-accent_donker, #A50B00);
}

/* Het masker schuift mee met de voortgang. rl.js zet alleen het
   width-attribuut; de overgang maakt er een vloeiende beweging van in plaats
   van een schokkerige sprong per tijdsupdate. */
.rlb-golf-masker { transition: width 180ms linear; }

/* Bij aanwijzen komt de hele golfvorm iets naar voren, zodat zichtbaar is dat
   je erin kunt klikken om te springen. */
.rlb-golf:hover .rlb-golf-achter rect { fill: var(--merk-gedempt, #696F77); }

/* Een streepje op de plek waar je zou landen als je nu klikt. */
.rlb-golf-wijzer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--merk-cerise, #E2000F);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.rlb-golf:hover .rlb-golf-wijzer { opacity: 1; }

/* Een track zonder audiobestand heeft geen golfvorm. In plaats van een gat
   komt er een rustige streep, zodat de rijen even hoog blijven. */
.rlb-speler-track:not([data-bron]) .rlb-golf-vervanger {
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    var(--merk-lijn, #E8EAEC) 0 6px, transparent 6px 12px);
}

/* --- een track die alleen te streamen is ------------------------------ */

/* Que Rico Seria staat wel op Spotify maar er is geen mp3. Zo'n track hoort
   niet half in de lijst te hangen met een dode speelknop: hij krijgt een
   eigen actie die wél werkt. */
.rlb-speler-alleen-stream {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  min-height: 44px;
  padding: var(--rlb-r2) .9rem;
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_knop, 8px);
  color: var(--merk-accent_donker, #A50B00);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-speler-alleen-stream:hover {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-vlak, #F6F7F8);
}

@media (max-width: 860px) {
  .rlb-golf { flex-basis: 100%; height: 34px; order: 9; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-golf-masker { transition: none; }
}

/* ========================================================================
   40. ZWARTE KOPBALK, STEVIGER RITME
   ========================================================================
   De site was te vlak: wit vlak na wit vlak, alles even zwaar. Drie
   ingrepen, in volgorde van effect:

   1. Een zwarte kopbalk. Het logo is daarvoor nagekeken: het witte woordmerk
      en YBI blijven leesbaar, de koptelefoon wordt een silhouet en het blauwe
      plaatlabel springt eruit. Op zwart leest hij sterker dan op wit.
   2. Een ritme van vlakken. Wit, dan een lichtgrijs vlak, dan wit — zodat je
      ziet waar een onderwerp ophoudt zonder dat er een lijn nodig is.
   3. Grotere, zwaardere koppen. Een h2 van 2rem op een volle breedte is geen
      kop maar een regel tekst.
   ======================================================================== */

/* --- de zwarte kopbalk ------------------------------------------------ */

.rlb-header {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  /* De blur hoeft niet meer: de balk is dekkend. Hem laten staan kost
     rekenkracht op elke scroll zonder dat je er iets van ziet. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.rlb-header .rlb-navlink { color: #fff; }
.rlb-header .rlb-navlink:hover { color: var(--merk-accent, #E2000F); }
.rlb-header .rlb-navlink::after { background: var(--merk-accent, #E2000F); }
.rlb-header .rlb-navlink--actief { color: var(--merk-accent, #E2000F); }

.rlb-header .rlb-tel { color: #fff; }
.rlb-header .rlb-tel:hover { color: var(--merk-accent, #E2000F); }

.rlb-header .rlb-merk-tekst { color: #fff; }

/* De hoofdactie in de balk: kleur uit sectie 68, hier alleen de schaduw uit. */
.rlb-header .rlb-knop--primair { box-shadow: none; }

.rlb-mobiel > summary { color: var(--merk-inkt, #1A1D21); }
.rlb-mobiel-nav { background: var(--merk-grond, #FFFFFF); border-bottom-color: var(--merk-lijn, #E8EAEC); }
.rlb-mobiel-nav li + li { border-top-color: rgba(255, 255, 255, .1); }

/* Onder de balk een dunne accentlijn: dat maakt de overgang naar wit scherp
   in plaats van vaag. */
.rlb-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--merk-accent, #E2000F) 0%,
    var(--merk-cerise, #E2000F) 50%,
    var(--merk-accent, #E2000F) 100%);
}

/* --- de tekst onder de vinyls weg ------------------------------------- */

/* De naam staat al IN de plaat gedrukt, dus eronder herhalen is dubbel.
   Weggehaald uit beeld, maar NIET uit de pagina: een schermlezer en een
   zoekmachine moeten nog steeds weten waar de link heen gaat, en de
   afbeelding alleen is daar te mager voor. */
.rlb-heroviny-naam {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Zonder de tekst eronder mogen de platen groter. */
.rlb-heroviny-link { width: 62%; max-width: 210px; gap: 0; }

/* --- koppen met meer gewicht ------------------------------------------ */

.rlb-titel {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.08;
}
.rlb-kop { margin-bottom: var(--rlb-ruimte-l); }

/* Een sectie mag beginnen met een bovenregel die ergens op slaat: klein,
   in hoofdletters, met een streepje ervoor. */
.rlb-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
}
.rlb-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
}

/* --- ritme in de vlakken ---------------------------------------------- */

/* Een sectie zonder eigen vlak die tussen twee witte secties staat, krijgt
   geen kleur — maar twee witte secties achter elkaar krijgen wel ruimte,
   zodat ze niet aan elkaar plakken.

   LET OP: dit zet een VARIABELE en geen padding-top. Dat is met opzet.
   De selector weegt 0,4,0 en versloeg daarmee elke sectie die zelf zijn
   opvulling bepaalt — de schuine banner stond op 32 boven en 126 onder, de
   afsluitende oproep op 32 boven en 160 onder. Via een variabele doet de
   regel nog steeds zijn werk bij gewone secties, maar wint een sectie met
   een eigen padding-regel gewoon, want custom properties spelen niet mee
   in de cascade van padding zelf. */
/* GEMETEN OP /verhuur/, 1920px, vóór deze wijziging:
     hero       174 / 144
     usps       112 / 112
     merken       0 /   0     <- geklemd
     pakketten   80 /  80
     upsell      52 /  80
     tekst       32 / 112     <- en de zes daarna allemaal 32/112

   De oude regel halveerde alleen de BOVENKANT van een opvolgende sectie.
   Daardoor plakte elke kop tegen de vorige sectie en gaapte er een gat van
   112px onder de inhoud. Binnen één sectie 32 boven en 112 onder: dat leest
   als scheef, en zo voelde de hele pagina onder de pakketten.

   Nu wordt bij twee opvolgende secties ALLEBEI de kanten teruggebracht naar
   dezelfde maat. De tussenruimte wordt daarmee 2x56 tot 2x80 in plaats van
   32+112, en elke sectie staat weer midden in zijn eigen lucht. */
.rlb + .rlb:not([class*="rlb--vlak-"]):not(.rlb-footer) {
  --rlb-sectie-top: clamp(3.5rem, 4.5vw, 5rem);
}
/* En de onderkant van de sectie die ervóór staat. :has() is sinds 2023 in
   alle browsers; valt het weg, dan blijft de oude 112 staan en is het
   hooguit ruimer -- nooit kapot. */
.rlb:has(+ .rlb:not([class*="rlb--vlak-"]):not(.rlb-footer)) {
  --rlb-sectie-bot: clamp(3.5rem, 4.5vw, 5rem);
}

/* De lichte vlakken krijgen een haarlijn, zodat de grens zichtbaar is ook
   als de schermhelderheid laag staat. */
.rlb--vlak-vlak,
.rlb--vlak-paneel {
  border-block: 1px solid var(--merk-lijn, #E8EAEC);
}

/* --- de feitenbalk steviger ------------------------------------------- */

.rlb-feitbalk {
  padding-block: var(--rlb-ruimte-l);
  border-block: 0;
  background: #000;
  color: #fff;
  border-radius: var(--merk-radius_kaart, 10px);
}
.rlb-feitbalk-waarde { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.rlb-feitbalk-label { color: var(--rlb-op-donker-stil); letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-accent, #E2000F); }
/* Een dunne scheiding tussen de cijfers, behalve voor de eerste. */
.rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 1px solid rgba(255, 255, 255, .14); }

@media (max-width: 700px) {
  .rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 0; }
}

/* ========================================================================
   41. DE SPELERBALK — opnieuw, naar de opzet van de Kentha-speler
   ========================================================================
   De vorige balk had de golfvorm als smal streepje tussen ronde knopjes. Op
   de schermafdruk van Kentha is het precies andersom: de golfvorm vult de
   balk over de volle hoogte en is het hoofdelement, de bediening zit links
   in vierkante vakken met scheidingslijnen, en de hoes staat vlak tegen de
   rand.

   Die opzet is hier overgenomen; de kleuren niet. Kentha is paars-magenta,
   dit is zwart met het blauw van het plaatlabel uit het logo, en cerise voor
   de koopknop.
   ======================================================================== */

:root { --rlb-balk-h: 72px; }
body.rlb-speler-actief { padding-bottom: var(--rlb-balk-h); }

.rlb-speler-balk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: var(--rlb-balk-h);
  padding: 0;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -16px 44px rgba(0, 0, 0, .55);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
  color: #fff;
}
.rlb-speler-balk[data-open="1"],
.rlb-speler-balk[data-aangemeerd="1"] { transform: translateY(0); }

/* --- links: de vierkante bedieningsvakken ----------------------------- */

.rlb-balk-bediening { display: flex; flex: none; }

.rlb-balk-vak {
  width: var(--rlb-balk-h);
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rlb-balk-vak:hover { background: rgba(255, 255, 255, .1); }
.rlb-balk-vak[hidden] { display: none; }

/* De speelknop is het enige gevulde vak: daar begint alles. */
.rlb-balk-vak--speel {
  background: var(--merk-accent, #E2000F);
  color: #fff;
}
.rlb-balk-vak--speel:hover { background: #fff; color: #000; }

/* De winkelwagen is cerise, dezelfde kleur als de boekknop: in deze site is
   cerise altijd "hier gebeurt de transactie". */
.rlb-balk-vak--kar { background: var(--merk-cerise, #E2000F); color: #fff; }
.rlb-balk-vak--kar:hover { background: #fff; color: var(--merk-cerise, #E2000F); }

.rlb-balk-vak--uit { color: var(--merk-gedempt, #696F77); }
.rlb-balk-vak--aan { background: rgba(255, 255, 255, .14); }

/* --- de hoes, vlak tegen de rand -------------------------------------- */

.rlb-balk-hoes {
  flex: none;
  width: var(--rlb-balk-h);
  height: var(--rlb-balk-h);
  object-fit: cover;
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
  /* De draaiende hoes uit de vorige versie is eruit: in een vierkant vak van
     72 pixels leest een roterend vierkant als een fout, niet als een plaat. */
  animation: none;
}

/* --- titel en artiest ------------------------------------------------- */

.rlb-balk-tekst {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  width: clamp(150px, 18vw, 260px);
  min-width: 0;
  padding: 0 var(--rlb-r4);
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.rlb-balk-titel {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: .9375rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlb-balk-artiest {
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rlb-op-donker-stil);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- de golfvorm: het hoofdelement ------------------------------------ */

.rlb-balk-golf {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  cursor: pointer;
  touch-action: none;
  /* Een vleugje kleur achter de staven geeft de balk diepte, net als bij
     Kentha — maar in het blauw van het plaatlabel in plaats van magenta. */
  background:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--merk-accent, #E2000F) 14%, transparent) 55%,
      color-mix(in srgb, var(--merk-cerise, #E2000F) 16%, transparent) 100%);
}
.rlb-balk-golf:focus-visible { outline: 2px solid var(--merk-accent, #E2000F); outline-offset: -2px; }

.rlb-balk-golf-svg { display: block; width: 100%; height: 100%; }
.rlb-balk-golf-achter rect { fill: rgba(255, 255, 255, .22); }
.rlb-balk-golf-voor rect { fill: var(--merk-accent, #E2000F); }
.rlb-speler-balk[data-speelt="1"] .rlb-balk-golf-voor rect { fill: var(--merk-accent_op_donker, #E2000F); }
.rlb-balk-masker { transition: width 160ms linear; }

/* --- de tijden, onder elkaar ------------------------------------------ */

.rlb-balk-tijden {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: .15rem;
  padding: 0 var(--rlb-r4);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.rlb-balk-tijd {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  color: #fff;
  letter-spacing: .04em;
}
.rlb-balk-tijd--totaal { color: var(--rlb-op-donker-stil); }

/* --- uiterst rechts --------------------------------------------------- */

.rlb-balk-rechts { display: flex; flex: none; }
.rlb-balk-vak--rij { border-right: 0; border-left: 1px solid rgba(255, 255, 255, .1); }
.rlb-balk-vak--sluit {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .1);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rlb-op-donker-stil);
}
.rlb-balk-vak--sluit:hover { color: #fff; }

/* --- de wachtrij boven de balk ---------------------------------------- */

.rlb-balk-wachtrij {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  max-height: 46vh;
  max-height: 46dvh;
  overflow-y: auto;
  background: var(--merk-inkt, #1A1D21);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, .6);
}
.rlb-wachtrij-lijst { margin: 0; padding: 0; list-style: none; }
.rlb-wachtrij-item { border-bottom: 1px solid rgba(255, 255, 255, .07); }
.rlb-wachtrij-item:last-child { border-bottom: 0; }

.rlb-wachtrij-knop {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--rlb-r4);
  width: 100%;
  padding: var(--rlb-r3) var(--rlb-r4);
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.rlb-wachtrij-knop:hover { background: rgba(255, 255, 255, .07); }
.rlb-wachtrij-item[aria-current="true"] .rlb-wachtrij-knop {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--merk-accent, #E2000F);
}
.rlb-wachtrij-nr { color: var(--merk-gedempt, #696F77); font-variant-numeric: tabular-nums; font-size: .875rem; }
.rlb-wachtrij-titel {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700; font-size: .9375rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlb-wachtrij-artiest { color: var(--rlb-op-donker-stil); font-size: .8125rem; }
.rlb-wachtrij-duur { color: var(--merk-gedempt, #696F77); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* --- smallere schermen ------------------------------------------------ */

@media (max-width: 900px) {
  /* De tekst en de losse knoppen gaan eruit; de golfvorm en afspelen
     blijven, want dat zijn de twee dingen die je op een telefoon wil. */
  .rlb-balk-tekst { width: auto; max-width: 42vw; }
  .rlb-balk-vak--kar,
  .rlb-balk-vak--rij { display: none; }
}

@media (max-width: 600px) {
  :root { --rlb-balk-h: 60px; }
  .rlb-balk-hoes,
  .rlb-balk-vak:not(.rlb-balk-vak--speel):not(.rlb-balk-vak--sluit) { display: none; }
  .rlb-balk-tekst { max-width: 38vw; padding: 0 var(--rlb-r3); }
  .rlb-balk-tijden { padding: 0 var(--rlb-r2); }
  .rlb-balk-tijd--totaal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-speler-balk { transition: none; }
  .rlb-balk-masker { transition: none; }
}

/* ========================================================================
   42. HET MERK — een systeem in plaats van losse vlakken
   ========================================================================
   De site was saai omdat er geen regel was. Vijf oppervlakken door elkaar,
   kaarten die er per sectie anders uitzagen, en koppen die allemaal even
   zwaar wogen. Hieronder staat de regel.

   DRIE OPPERVLAKKEN, ELK MET EEN TAAK
     wit     lezen. Tekst, formulieren, lijsten.
     zwart   indruk. Hero, feiten, webcast, afsluiting, kopbalk, voettekst.
     #F7F8FA een paneel binnen een witte sectie. Verder niets.

   TWEE ACCENTEN, ELK MET EEN BETEKENIS
     blauw   het merk. Het komt uit het plaatlabel in het logo.
     cerise  de transactie. Boeken en kopen, nooit iets anders.

   EEN TERUGKEREND MOTIEF
     De plaat. Cirkels, groeven en het label komen overal terug — in de
     sectienummers, achter de donkere vlakken en op de kaarten. Dat is wat
     een site van een DJ onderscheidt van een site van een loodgieter.
   ======================================================================== */

/* --- het plaatmotief als achtergrond ---------------------------------- */

/* Groeven: concentrische cirkels, heel licht. Op een zwart vlak geeft dat
   diepte zonder dat er een afbeelding bij hoeft. */
.rlb--vlak-accent,
.rlb-feitbalk,
.rlb-cta-sectie,
.rlb-webcast-sectie,
.rlb-footer {
  position: relative;
  isolation: isolate;
}
.rlb-cta-sectie::before,
.rlb-webcast-sectie::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -12%;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(255, 255, 255, .055) 0 2px,
      transparent 2px 7px);
  pointer-events: none;
  opacity: .9;
}

/* Een fijne korrel over de donkere vlakken. Zonder korrel ziet een groot
   zwart vlak er digitaal en goedkoop uit; met korrel lijkt het gedrukt. */
.rlb-cta-sectie::after,
.rlb-webcast-sectie::after,
.rlb-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- donkere secties: nu zwart, niet diepblauw ------------------------ */

.rlb-webcast-sectie,
.rlb-cta-sectie,
.rlb-streaming,
.rlb-footer {
  background: #000;
  color: #fff;
}
.rlb-streaming :where(h1, h2, h3, .rlb-titel) { color: #fff; }
.rlb-footer { border-top: 0; }
.rlb-footer-kop { color: var(--merk-accent, #E2000F); }
.rlb-footer-kolom a { color: var(--rlb-op-donker-licht); }
.rlb-footer-kolom a:hover { color: #fff; }
.rlb-footer-intro { color: var(--rlb-op-donker-stil); }
.rlb-footer-onder { border-top-color: rgba(255, 255, 255, .12); }

/* LEESBAARHEID OP ZWART.
   Deze regels stonden op --merk-gedempt (#696F77). Op de zwarte voettekst
   haalt dat 4,1:1, en voor tekst van 13 px eist WCAG AA 4,5:1. De
   copyrightregel, de juridische links en het colofon waren dus net te
   donker — Marijn, 8 november 2026: "moet leesbaar". var(--rlb-op-donker-stil) haalt 8,1:1
   en is dezelfde tint als .rlb-footer-intro, dus de voettekst blijft één
   geheel. */
.rlb-footer-copy,
.rlb-footer-colofon,
.rlb-footer-juridisch a { color: var(--rlb-op-donker-stil); }
.rlb-footer-juridisch a:hover { color: #fff; }
/* De bouwer-credit moet als link te herkennen zijn, ook zonder hover. */
.rlb-footer-colofon a { color: var(--rlb-op-donker-licht); text-decoration: underline; }
.rlb-footer-colofon a:hover { color: #fff; }
.rlb-footer-sociaal a { border-color: rgba(255, 255, 255, .18); color: #fff; }
.rlb-footer-sociaal a:hover { border-color: var(--merk-accent, #E2000F); color: var(--merk-accent, #E2000F); }

/* --- genummerde secties ------------------------------------------------ */

/* Elke inhoudelijke sectie krijgt een nummer in de marge. Dat geeft de
   pagina een ruggengraat en maakt scannen makkelijker: je ziet hoeveel er
   nog komt. De teller loopt over de hele pagina, dus hij klopt altijd. */
main { counter-reset: rlb-sectie; }

.rlb--vlak-vlak > .rlb-binnen,
.rlb:not([class*="vlak"]):not(.rlb-header):not(.rlb-footer):not(.rlb-kruimels) > .rlb-binnen {
  position: relative;
}

.rlb-kop { position: relative; }
.rlb-kop::before {
  counter-increment: rlb-sectie;
  content: counter(rlb-sectie, decimal-leading-zero);
  position: absolute;
  top: -.35em;
  left: -4.2rem;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--merk-lijn, #E8EAEC);
  pointer-events: none;
  user-select: none;
}
.rlb-cta-sectie .rlb-kop::before,
.rlb-webcast-sectie .rlb-kop::before,
.rlb-streaming .rlb-kop::before { color: rgba(255, 255, 255, .16); }

/* Op smallere schermen is er geen marge voor een nummer. */
@media (max-width: 1400px) {
  .rlb-kop::before {
    position: static;
    display: block;
    margin-bottom: var(--rlb-r1);
    font-size: 1.125rem;
    letter-spacing: .2em;
    color: var(--merk-accent, #E2000F);
  }
  .rlb-cta-sectie .rlb-kop::before,
  .rlb-webcast-sectie .rlb-kop::before,
  .rlb-streaming .rlb-kop::before { color: var(--merk-accent, #E2000F); }
}

/* --- een kaart, overal dezelfde ---------------------------------------- */

/* Eerst had elk blok zijn eigen kaartstijl: andere rand, andere radius,
   andere schaduw. Nu een vorm, met het plaatmotief als gedeeld gebaar: een
   dunne accentlijn bovenaan die bij aanwijzen oplicht. */
.rlb-usp > *,
.rlb-review,
.rlb-ger-link,
.rlb-product-link,
.rlb-album,
.rlb-agenda-leeg,
.rlb-boeker-vak,
.rlb-contact-vak,
.rlb-feitenkaart,
.rlb-kalender {
  border-radius: var(--merk-radius_kaart, 10px);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 1px 2px rgba(10, 20, 32, .04);
  transition: box-shadow 260ms cubic-bezier(.2, .7, .3, 1),
              transform 260ms cubic-bezier(.2, .7, .3, 1),
              border-color 200ms ease;
}
a.rlb-ger-link:hover,
a.rlb-product-link:hover,
a.rlb-usp-link:hover {
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 14px 34px rgba(10, 20, 32, .11);
  transform: translateY(-4px);
}

/* --- de grote streep onder een kop ------------------------------------- */

.rlb-kop > .rlb-titel::after { height: 4px; background: var(--merk-accent, #E2000F); }
.rlb[data-rl-inbeeld="1"] .rlb-kop > .rlb-titel::after { width: 72px; }

/* --- de lopende band --------------------------------------------------- */

/* Een band met de genres die langzaam langsschuift. Dit is het element dat
   een muzieksite van een bedrijfssite onderscheidt: beweging die niets hoeft
   te betekenen. Hij staat tussen twee secties en is puur sfeer, dus hij is
   voor een schermlezer verborgen. */
.rlb-band {
  overflow: hidden;
  padding: 0;
  background: var(--merk-accent, #E2000F);
  color: #fff;
  border-block: 0;
}
.rlb-band-spoor {
  display: flex;
  width: max-content;
  animation: rlb-schuif 38s linear infinite;
}
.rlb-band-spoor > span {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r6);
  padding: var(--rlb-r4) var(--rlb-r4);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rlb-band-spoor > span::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: .7;
}
.rlb-band:hover .rlb-band-spoor { animation-play-state: paused; }

@keyframes rlb-schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- de hero: zwart, met de plaat erachter ----------------------------- */

.rlb-hero--metvinyl { background: #000; color: #fff; }
.rlb-hero--metvinyl :where(h1, .rlb-hero-titel) { color: #fff; }
.rlb-hero--metvinyl .rlb-hero-intro { color: var(--rlb-op-donker-gedempt); }
.rlb-hero--metvinyl .rlb-kicker { color: var(--merk-accent, #E2000F); }

/* De h1 krijgt een blauwe gloed achter zich, zodat de naam van het vlak af
   komt in plaats van erin te zakken. */
.rlb-hero--metvinyl .rlb-hero-titel {
  position: relative;
  text-shadow: 0 0 62px color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent);
}

/* --- de feitenbalk ----------------------------------------------------- */

.rlb-feitbalk { background: transparent; border-radius: 0; }
.rlb--vlak-grond .rlb-feitbalk,
.rlb:not([class*="vlak"]) .rlb-feitbalk {
  background: #000;
  border-radius: var(--merk-radius_kaart, 10px);
}

/* --- de streamingtegels op zwart --------------------------------------- */

.rlb-stream-link {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .13);
}
.rlb-stream-link:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--merk-accent, #E2000F);
}

/* --- rust bewaren ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rlb-band-spoor { animation: none; }
  .rlb-usp > *:hover,
  a.rlb-ger-link:hover,
  a.rlb-product-link:hover { transform: none; }
}

/* ========================================================================
   43. REPARATIES NA DE EERSTE SCHERMAFDRUK
   ========================================================================
   Zes dingen die op het scherm misgingen. Vier ervan waren fouten van mij,
   twee waren keuzes die in het echt niet werkten.
   ======================================================================== */

/* --- 1. de overslaanlink stond zichtbaar linksboven -------------------
   Ik zette hem wel in elke pagina maar schreef er nooit opmaak voor, dus
   stond er op elke pagina "Naar de inhoud" in beeld. Hij hoort pas te
   verschijnen als iemand met de tabtoets binnenkomt. */

.rlb-overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--rlb-r3) var(--rlb-r4);
  background: var(--merk-cerise, #E2000F);
  color: #fff;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--merk-radius_knop, 8px) 0;
}
.rlb-overslaan:focus {
  left: 0;
  color: #fff;
}

/* --- 2. de sectienummers klopten niet --------------------------------
   De teller liep op per .rlb-kop, maar niet elk blok rendert er een: de
   hero, de CTA en het tekst-met-beeldblok bouwen hun eigen kop. Daardoor
   kreeg de ene sectie een nummer en de andere niet, en liep de reeks niet
   meer op. Een nummering die niet klopt is slechter dan geen nummering,
   dus hij gaat eruit tot hij per blok instelbaar is. */

.rlb-kop::before { content: none; counter-increment: none; }

/* --- 3. de metagegevens in de speler plakten aan elkaar ---------------
   "124AmIbiza HouseYBI Records" stond er. Er zat geen enkele ruimte of
   scheiding tussen BPM, toonaard, genre en label. */

.rlb-speler-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem var(--rlb-r3);
  flex: none;
  max-width: 34%;
}
.rlb-speler-meta-item {
  display: inline-flex;
  align-items: center;
  padding: .2rem var(--rlb-r2);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
  white-space: nowrap;
}
/* BPM en toonaard zijn de twee waar een DJ op zoekt; die krijgen het accent. */
.rlb-speler-meta--bpm,
.rlb-speler-meta--toonaard {
  border-color: var(--merk-accent, #E2000F);
  color: var(--merk-accent_donker, #A50B00);
}

/* De trackrij had te weinig ruimte tussen de onderdelen. */
.rlb-speler-track { gap: var(--rlb-ruimte-m); padding: var(--rlb-r3); }
.rlb-speler-nr {
  flex: none;
  width: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--merk-gedempt, #696F77);
}

/* --- 4. de spelerbalk werd veel te hoog -------------------------------
   min-height liet de balk meegroeien met de golfvorm, die op zijn beurt op
   100% hoogte stond. Twee elementen die zich naar elkaar richten groeien
   samen door. Nu een vaste hoogte, en de golfvorm vult die. */

.rlb-speler-balk {
  height: var(--rlb-balk-h);
  min-height: 0;
  overflow: visible;
}
.rlb-balk-golf { height: var(--rlb-balk-h); overflow: hidden; }
.rlb-balk-golf-svg { height: 100%; }

/* --- 5. de h1 in de hero was te klein tegen de platen -----------------
   Vier platen van 210 pixels naast een kop van 72 pixels laat de kop
   verdwijnen. De naam moet het zwaarste element op het scherm zijn. */

.rlb-hero--metvinyl .rlb-hero-titel {
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: .88;
  letter-spacing: -0.04em;
  margin-bottom: var(--rlb-ruimte-s);
}
.rlb-hero--metvinyl .rlb-kicker { justify-content: center; font-size: .875rem; }
.rlb-hero--metvinyl .rlb-hero-intro { font-size: 1.125rem; max-width: 46ch; }
.rlb-hero--metvinyl .rlb-hero-tekst { padding-block: var(--rlb-ruimte-m); }

/* --- 6. de afsluitende banner stond scheef ----------------------------
   De knoppen stonden als volle witte blokken in een smalle rechterkolom,
   naast een tekst die veel breder was. Nu staan ze naast elkaar onder de
   tekst, met de hoofdactie het breedst. */

.rlb-cta { grid-template-columns: minmax(0, 1fr); gap: var(--rlb-ruimte-m); text-align: left; }
.rlb-cta-titel { max-width: 18ch; }
.rlb-cta .rlb-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r2);
  margin-top: var(--rlb-ruimte-s);
}
.rlb-cta .rlb-knop { justify-content: center; }
.rlb-cta .rlb-knop--primair { padding: var(--rlb-r4) var(--rlb-r6); }

@media (min-width: 900px) {
  .rlb-cta {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
  .rlb-cta .rlb-knoppen { justify-content: flex-end; }
}

/* --- 7. de lege agenda stond boven de afgelopen optredens -------------
   Dat las als "er is niets" terwijl er direct eronder drie optredens
   stonden. De lege melding hoort onder de inhoud die er wel is. */

.rlb-agenda .rlb-agenda-leeg { order: 2; margin-top: var(--rlb-ruimte-m); }
.rlb-agenda > .rlb-binnen { display: flex; flex-direction: column; }
.rlb-agenda > .rlb-binnen > .rlb-kop { order: 0; }
.rlb-agenda > .rlb-binnen > .rlb-tussenkop { order: 1; }
.rlb-agenda > .rlb-binnen > .rlb-gigs { order: 1; }
.rlb-agenda > .rlb-binnen > .rlb-knop { order: 3; align-self: flex-start; }

/* --- de streamingtegels vullen de breedte ----------------------------- */

.rlb-stream-raster { width: 100%; }
.rlb-stream-link { min-height: 104px; }

@media (max-width: 1024px) { .rlb-stream-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .rlb-stream-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .rlb-stream-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- de USP-kaart, nu met een echt omhulsel --------------------------- */

.rlb-usp-vak { /* zelfde vorm als de link-variant; zie .rlb-usp > * */ }
.rlb-usp > * { align-content: start; }
.rlb-usp-tekst { grid-column: 2; }
.rlb-usp-titel { grid-column: 2; }

@media (max-width: 560px) {
  .rlb-speler-meta { max-width: none; width: 100%; }
  .rlb-speler-track { flex-wrap: wrap; }
}

/* ========================================================================
   44. DE SCHAAL — ruimte, lettergrootte en regelafstand
   ========================================================================
   Tot hier stonden maten verspreid en ad hoc: een sectie van 4.5rem naast
   een van 7rem, koppen die niet meeschaalden, en marges die per blok
   verschilden. Hieronder staan ze op een rij, op een schaal.

   RUIMTE — stappen van 1.5, van 4 tot 112 pixels. Alles wat ruimte neemt
   kiest uit deze stappen en verzint er geen tussenwaarde bij.

   TEKST — de maten staan in config/brand.json, want dat is de bron die de
   Studio bewerkt. De validator accepteert daar alleen vaste rem-waarden, dus
   het MEESCHALEN met het scherm gebeurt hier, op precies dezelfde
   verhoudingen. Verander je de schaal in brand.json, dan verander je hier de
   bovengrens mee.
   ======================================================================== */

/* De ruimteschaal zelf (--rlb-r1..r9) staat sinds 10 november in sectie 1,
   en de WAARDEN staan in config/brand.json ("ruimte") — brand.css levert ze
   als --merk-ruimte-1..9. Hier stond een tweede definitie van dezelfde
   schaal; twee plekken die hetzelfde beweren lopen uit elkaar, dus deze is
   weggehaald. Wie een stap wil wijzigen doet dat in brand.json. */

/* --- secties: één ritme ------------------------------------------------ */

/* HET RITME TUSSEN DE SECTIES.
   Het stond op clamp(3rem, 6vw, 7rem) boven én onder. Op 1920 is dat
   112 + 112 = 224 px tussen twee blokken. De pagina werd daardoor een
   reeks losse eilandjes met veel lucht ertussen: monolietvloer kwam op
   8.791 px uit terwijl er niet meer in staat.

   Marijn, 8 november 2026: "stappen zijn te groot", "niveau moet echt
   hoger als grote landelijke speler", en hij noemt Tesla, Apple en
   Revolut. Wat die gemeen hebben is niet méér lucht maar MINDER: dichte,
   besliste blokken die elkaar opvolgen. Daar zit het verschil tussen
   rustig en leeg.

   Nu clamp(2.5rem, 4.4vw, 5.25rem): 84 px op 1920, 63 px op 1440. Samen
   dus 168 respectievelijk 126 px tussen twee blokken. */
.rlb {
  padding-block: var(--rlb-sectie-top, var(--rlb-sectie))
                 var(--rlb-sectie-bot, var(--rlb-sectie));
}
.rlb--ruimte-geen    { padding-block: 0; }
.rlb--ruimte-klein   { padding-block: clamp(var(--rlb-r5), 2.4vw, var(--rlb-r6)); }
.rlb--ruimte-normaal { padding-block: var(--rlb-sectie); }
.rlb--ruimte-groot   { padding-block: clamp(var(--rlb-r7), 6.4vw, var(--rlb-r9)); }

/* TWEE LICHTE SECTIES ACHTER ELKAAR TELLEN HUN LUCHT BIJ ELKAAR OP.
   Bij een kleurwissel markeert de band zelf de grens en mag de ruimte
   blijven staan. Volgt er een gewone sectie op een gewone sectie, dan is
   de onderruimte van de eerste al genoeg en kan de bovenruimte van de
   tweede een stuk korter. Dat haalt de helft van de gaten weg zonder dat
   er ergens iets tegen elkaar aan komt te staan. */
.rlb + .rlb:not([class*="--donker"]):not(.rlb-cta-sectie):not(.rlb-feitenbalk):not(.rlb-footer) {
  padding-top: clamp(var(--rlb-r5), 2.6vw, var(--rlb-r7));
}

/* De kop van een sectie heeft altijd dezelfde afstand tot wat eronder komt. */
.rlb-kop { margin-bottom: clamp(var(--rlb-r5), 2.6vw, var(--rlb-r6)); }
.rlb-kop > :last-child { margin-bottom: 0; }

/* Kaarten en panelen krijgen dezelfde binnenruimte, waar ze ook staan. */
.rlb-usp > *,
.rlb-review,
.rlb-ger-link,
.rlb-feitenkaart,
.rlb-agenda-leeg { padding: clamp(var(--rlb-r5), 2.2vw, var(--rlb-r6)); }

.rlb-boeker-vak,
.rlb-contact-vak { padding: clamp(var(--rlb-r5), 2.6vw, var(--rlb-r7)); }

.rlb-kalender { padding: var(--rlb-r5); }

/* --- tekst: meeschalen op dezelfde verhoudingen ------------------------ */

/* De ondergrens is wat op een telefoon leesbaar is, de bovengrens is de
   waarde uit brand.json. Daartussen schaalt hij met de schermbreedte. */
/* DE KOP MAG FORMAAT HEBBEN.
   Marijn, 8 november 2026: "niveau moet echt hoger, als grote landelijke
   speler" en hij noemt Tesla, Apple en Revolut. Wat die drie gemeen
   hebben is niet een kleur of een effect maar een KOP DIE DURFT: groot,
   strak gespatieerd en met weinig regelafstand, zodat hij als vlak leest
   en niet als zin. Op 1440 px was de kop hier 64 px en dat is voor een
   volledige hero bescheiden; 80 px vult het beeld zonder te schreeuwen.

   De negatieve letterspatiëring hoort bij die grootte: Poppins loopt op
   displaymaat anders te ruim uit elkaar. */
h1, .rlb-hero-titel {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -.022em;
}
h2, .rlb-titel {
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
}
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: clamp(1.125rem, 1.4vw, 1.25rem); }

/* De hero op de homepage mag groter dan de schaal: dat is de enige plek waar
   de naam zelf het beeld is. */
.rlb-hero--metvinyl .rlb-hero-titel { font-size: clamp(2.75rem, 10vw, 8rem); }

/* Een tekstkolom blijft leesbaar: hooguit 70 tekens op een regel, hoe breed
   het scherm ook is. */
.rlb p,
.rlb-lijst,
.rlb-intro { max-width: 68ch; }
.rlb-hero-intro { max-width: 46ch; }

/* Lange woorden en URL's breken af in plaats van de kolom open te duwen. */
/* AFBREKEN MÉT KOPPELTEKEN.
   Hier stond alleen `overflow-wrap: break-word`. Dat laat een te lang woord
   overal breken, zonder teken dat het doorloopt. In de smalle kolom van het
   vragenblok stond daardoor:

       "Wat klanten ons over
        cementgebond
        en gietvloer vragen"

   en dat leest als een spelfout, niet als een regelafbreking. Nederlandse
   samenstellingen zijn lang; dit gaat vaker mis dan één keer.

   De pagina draagt lang="nl", dus de browser weet waar hij mag afbreken.
   Met `hyphens: auto` doet hij dat mét koppelteken en pas als het niet
   anders kan; `break-word` blijft als laatste redmiddel staan voor dingen
   die niet af te breken zijn, zoals een lange URL. */
/* Marijn, 11 nov: `hyphens: auto` brak ook woorden af die prima op de
   volgende regel pasten ("produc-tiehal", "betonvloer."). Dat leest
   rommelig. Automatisch afbreken staat uit; `break-word` blijft als
   laatste redmiddel voor dingen die echt niet passen, zoals een lange URL
   of een woord dat breder is dan de kolom. */
.rlb p, .rlb-lijst li, .rlb-titel, h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: manual;
}
/* Koppen in balans over de regels verdelen in plaats van één los woord
   onderaan: scheelt bovendien een regel. */
.rlb-titel, .rlb h1, .rlb h2, .rlb h3 { text-wrap: balance; }

/* --- afstand tussen tekstelementen ------------------------------------- */

.rlb p + p { margin-top: 0; }
.rlb p { margin: 0 0 var(--rlb-r4); }
.rlb p:last-child { margin-bottom: 0; }
.rlb-tussenkop { margin: var(--rlb-r6) 0 var(--rlb-r3); }
.rlb-lijst { margin: 0 0 var(--rlb-r4); }
.rlb-knoppen { margin-top: var(--rlb-r5); gap: var(--rlb-r3); }

/* --- rasters: één afstand ---------------------------------------------- */

.rlb-usp-raster,
.rlb-ger-raster,
.rlb-review-raster,
.rlb-product-raster,
.rlb-release-raster,
.rlb-disco-lijst { gap: clamp(var(--rlb-r4), 1.6vw, var(--rlb-r5)); }

.rlb-stappen { gap: clamp(var(--rlb-r5), 2.4vw, var(--rlb-r7)); }
.rlb-gigs { gap: var(--rlb-r3); }

/* --- de kopbalk blijft op maat ----------------------------------------- */

.rlb-header-rij { min-height: 88px; gap: var(--rlb-r5); }
.rlb-nav ul { gap: clamp(var(--rlb-r3), 1.4vw, var(--rlb-r5)); }
.rlb-navlink { font-size: .9375rem; }

/* --- de prijs in de winkel --------------------------------------------- */

/* Stond op neonlime: 1.5:1 op wit, dus onleesbaar. Nu het donkere accent. */
.rlb-product-prijs { color: var(--merk-accent_donker, #A50B00); }

/* --- kleine schermen ---------------------------------------------------- */

@media (max-width: 560px) {
  .rlb-binnen { padding-inline: var(--rlb-r4); }
  .rlb-kop { margin-bottom: var(--rlb-r5); }
}

/* ========================================================================
   45. HERSTEL NA DE SCHAAL — kopbalk, voettekst en kruimels
   ========================================================================
   In deel 44 kreeg `.rlb` een eigen verticale ruimte. De kopbalk draagt ook
   de klasse `rlb`, en omdat `.rlb-header { padding-block: 0}` eerder in het
   bestand staat met dezelfde specificiteit, won de latere regel: de balk
   kreeg ineens tot 112px lucht.

   Dit is precies het soort fout dat een schaal introduceert als je hem
   achteraf toevoegt. De drie onderdelen die geen sectie zijn, staan hier
   weer op hun eigen maat — na deel 44, zodat ze winnen.
   ======================================================================== */

.rlb.rlb-header { padding-block: 0; }
.rlb.rlb-kruimels { padding-block: var(--rlb-r5) 0; }
.rlb.rlb-footer { padding-block: clamp(var(--rlb-r7), 5vw, var(--rlb-r8)) var(--rlb-r5); }
.rlb.rlb-band { padding-block: 0; }

/* De balk zelf: 88px hoog, met het logo op 64px en dus 12px lucht boven en
   onder. Dat is de verhouding waarin een vierkant logo niet klem zit. */
.rlb-header .rlb-header-rij { min-height: 88px; }
.rlb-logo { height: 64px; }

@media (max-width: 1023px) {
  /* Zonder menu en knoppen mag de balk lager; het logo blijft leidend. */
  .rlb-header .rlb-header-rij { min-height: 72px; }
  .rlb-logo { height: 52px; }
}

/* ========================================================================
   46. DE AGENDA ALS LIJST, EN DE UITGELICHTE BANNER
   ========================================================================
   De agenda stond als rij kaarten met een gekleurde linkerrand: druk, en
   met acht optredens onder elkaar wordt het een muur. De opzet van de
   events-list is rustiger — regels met een scheidingslijn, een grote datum
   links, de naam in het midden en de actie rechts. Je scant hem in een
   oogopslag.
   ======================================================================== */

/* --- de agenda als lijst ---------------------------------------------- */

.rlb-gigs {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}

.rlb-gig {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rlb-r5);
  padding: var(--rlb-r5) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 0;
  transition: background 200ms ease, padding 200ms ease;
}
.rlb-gig:hover {
  background: var(--merk-vlak, #F6F7F8);
  box-shadow: none;
  transform: none;
  /* De rij schuift niet opzij maar ademt: de inhoud krijgt lucht aan de
     zijkanten. Dat leest rustiger in een lange lijst. */
  padding-inline: var(--rlb-r4);
}

/* De datum: groot dagnummer, maand eronder, in het accent. */
.rlb-gig-datum {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  border-right: 2px solid var(--merk-accent, #E2000F);
  padding-right: var(--rlb-r4);
}
.rlb-gig-dag {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: .95;
  color: var(--merk-inkt, #1A1D21);
  font-variant-numeric: tabular-nums;
}
.rlb-gig-maand {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-accent_donker, #A50B00);
}

/* Het beeld is in een lijst overbodig en maakt de rijen ongelijk hoog. */
.rlb-gig-beeldvak { display: none; }

.rlb-gig-info { min-width: 0; display: flex; flex-direction: column; gap: var(--rlb-r1); }
.rlb-gig-naam {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--merk-inkt, #1A1D21);
}
/* Locatie, tijd en genre op één regel met puntscheiding, in plaats van drie
   regels onder elkaar. Dat scheelt twee derde van de hoogte per rij. */
.rlb-gig-waar,
.rlb-gig-tijd,
.rlb-gig-genre {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r1);
  margin: 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-gig-info > :where(.rlb-gig-waar, .rlb-gig-tijd, .rlb-gig-genre) { display: inline-flex; }
.rlb-gig-info {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--rlb-r4);
  row-gap: .15rem;
}
.rlb-gig-naam { flex: 1 0 100%; }
.rlb-gig-waar + .rlb-gig-tijd::before,
.rlb-gig-tijd + .rlb-gig-genre::before,
.rlb-gig-waar + .rlb-gig-genre::before {
  content: "";
  width: 3px; height: 3px;
  margin-right: var(--rlb-r2);
  border-radius: 50%;
  background: var(--merk-lijn, #E8EAEC);
}
.rlb-gig-genre { color: var(--merk-accent_donker, #A50B00); font-weight: 600; }
.rlb-gig .rlb-icoon { color: var(--merk-gedempt, #696F77); }

.rlb-gig-knop { flex: none; white-space: nowrap; }

/* Een afgelopen optreden is bewijs, geen aanbod: rustiger, zonder accent. */
.rlb-gig--verleden { opacity: 1; }
.rlb-gig--verleden .rlb-gig-datum { border-right-color: var(--merk-lijn, #E8EAEC); }
.rlb-gig--verleden .rlb-gig-dag { color: var(--merk-gedempt, #696F77); }
.rlb-gig--verleden .rlb-gig-maand { color: var(--merk-gedempt, #696F77); }
.rlb-gig--verleden .rlb-gig-naam { color: var(--merk-tekst, #3D444D); font-size: 1.0625rem; }

@media (max-width: 680px) {
  .rlb-gig { grid-template-columns: 64px minmax(0, 1fr); row-gap: var(--rlb-r3); }
  .rlb-gig-dag { font-size: 1.625rem; }
  .rlb-gig-knop { grid-column: 1 / -1; justify-self: start; }
}

/* --- de uitgelichte banner -------------------------------------------- */

.rlb-uit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #000;
  padding-block: clamp(var(--rlb-r8), 10vw, 9rem);
  /* Schuine randen boven en onder: de band springt uit de rij rechte
     secties zonder dat er een vorm bij hoeft. */
  clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
  margin-block: -1px;
}
.rlb-uit :where(h1, h2, h3, .rlb-uit-titel) { color: #fff; }
.rlb-uit .rlb-kicker { color: #fff; opacity: .85; }

.rlb-uit-achter { position: absolute; inset: 0; z-index: -2; }
.rlb-uit-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }

/* De duotoon: eerst alle kleur eruit, dan opnieuw inkleuren met het
   merkblauw en cerise. Daardoor past elke foto in de huisstijl — ook een
   kiekje met een oranje lamp erin. */
.rlb-uit--duotoon .rlb-uit-beeld { filter: grayscale(1) contrast(1.15); }
.rlb-uit--duotoon .rlb-uit-achter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    var(--merk-accent, #E2000F) 0%,
    var(--merk-diepblauw_licht, #17396A) 48%,
    var(--merk-cerise, #E2000F) 100%);
  mix-blend-mode: screen;
  opacity: .62;
}

/* Een sluier onder de tekst: een foto is nooit overal even donker, en tekst
   moet overal leesbaar zijn. */
.rlb-uit-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .62) 100%);
}

.rlb-uit-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--rlb-r6), 5vw, var(--rlb-r8));
  align-items: center;
}
.rlb-uit-rij > * { min-width: 0; }

/* De grote kop links, met een verticale streep ervoor. */
.rlb-uit-links { border-left: 3px solid rgba(255, 255, 255, .55); padding-left: var(--rlb-r5); }
.rlb-uit-titel {
  margin: 0 0 var(--rlb-r4);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .9;
  letter-spacing: -0.04em;
}
.rlb-uit-tekst { color: var(--rlb-op-donker-licht); max-width: 42ch; }
.rlb-uit-tekst p { color: inherit; }

/* De omlijste kaart rechts. */
.rlb-uit-kaart {
  position: relative;
  padding: clamp(var(--rlb-r5), 3vw, var(--rlb-r7));
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(0, 0, 0, .34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  text-align: center;
}
.rlb-uit-label {
  display: inline-block;
  margin-bottom: var(--rlb-r4);
  padding: var(--rlb-r1) var(--rlb-r3);
  background: var(--merk-cerise, #E2000F);
  color: #fff;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rlb-uit-kaarttitel {
  margin: 0 0 var(--rlb-r2);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
}
.rlb-uit-meta {
  margin: 0 0 var(--rlb-r5);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rlb-op-donker-gedempt);
}
.rlb-uit-kaart .rlb-knoppen { justify-content: center; margin: 0; }
.rlb-uit-kaart .rlb-knop--secundair { border-color: rgba(255, 255, 255, .6); color: #fff; }
.rlb-uit-kaart .rlb-knop--secundair:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* Het korte streepje onder de knoppen, zoals in het voorbeeld. */
.rlb-uit-streep {
  display: block;
  width: 56px;
  height: 3px;
  margin: var(--rlb-r5) auto 0;
  background: var(--merk-cerise, #E2000F);
}

@media (max-width: 860px) {
  .rlb-uit { clip-path: none; }
  .rlb-uit-rij { grid-template-columns: minmax(0, 1fr); }
  .rlb-uit-kaart { text-align: left; }
  .rlb-uit-kaart .rlb-knoppen { justify-content: flex-start; }
  .rlb-uit-streep { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-gig:hover { padding-inline: 0; }
}

/* ========================================================================
   47. DE AFSLUITENDE BANNER, OPNIEUW
   ========================================================================
   Op het scherm stonden de titel links, de tekst rechtsboven en de drie
   knoppen scheef onder de titel, met een leeg kwart rechts. Oorzaak: titel,
   tekst en knoppen waren drie losse kinderen in een raster van twee
   kolommen, dus ze vulden de cellen in die volgorde.

   De renderer zet titel en tekst nu samen in een vak. Hieronder staat wat
   dat vak en de knoppen doen.
   ======================================================================== */

.rlb-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rlb-r6);
  align-items: center;
  max-width: none;
}

.rlb-cta-tekstvak { min-width: 0; }
.rlb-cta-titel { max-width: 16ch; margin-bottom: var(--rlb-r4); }
.rlb-cta-tekst { max-width: 44ch; margin: 0; }

/* De drie wegen naar een antwoord: de hoofdactie groot en wit, bellen en
   WhatsApp als gelijkwaardige maar rustiger opties ernaast. Allemaal even
   hoog en op een lijn — dat was het rommelige. */
.rlb-cta .rlb-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--rlb-r3);
  margin: 0;
}
.rlb-cta .rlb-knop {
  justify-content: center;
  min-height: 56px;
  padding-inline: var(--rlb-r5);
}
.rlb-cta .rlb-knop--primair { padding-inline: var(--rlb-r6); font-size: 1.0625rem; }

@media (min-width: 900px) {
  /* Tekst links, knoppen rechts, allebei verticaal gecentreerd. */
  .rlb-cta {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--rlb-r8);
  }
  .rlb-cta .rlb-knoppen { justify-content: flex-end; }
}

/* Op de smalle maat staan ze onder elkaar en even breed, zodat er geen
   trapje ontstaat. */
@media (max-width: 560px) {
  .rlb-cta .rlb-knoppen { flex-direction: column; }
  .rlb-cta .rlb-knop { width: 100%; }
}

/* ========================================================================
   48. DE HERO PAST OP HET SCHERM
   ========================================================================
   Op een laptop van 1900 bij 950 viel de onderste helft weg: de tweede rij
   platen en de knoppen stonden onder de vouw, en "DJ RE-LEX" brak in tweeen.

   De oorzaak was dat ik alles op SCHERMBREEDTE schaalde (vw) terwijl het
   probleem de HOOGTE is. Op een breed maar laag scherm wordt 10vw een kop
   van 190 pixels, en dan is er geen ruimte meer voor de rest.

   Alles wat de hoogte van de hero bepaalt rekent hieronder in vh, en de
   hero als geheel past in wat er onder de kopbalk overblijft. dvh in plaats
   van vh, want op een telefoon telt de adresbalk anders mee.
   ======================================================================== */

:root { --rlb-kopbalk-h: 88px; }

.rlb-hero--metvinyl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--rlb-kopbalk-h));
  min-height: calc(100dvh - var(--rlb-kopbalk-h));
  padding-block: clamp(var(--rlb-r4), 3vh, var(--rlb-r6));
}
.rlb-hero--metvinyl > .rlb-binnen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(var(--rlb-r3), 2.5vh, var(--rlb-r6));
  width: 100%;
}

/* De platen rekenen in schermhoogte. Twee rijen moeten samen met de tekst
   binnen een scherm passen, dus elke rij mag hooguit een zesde van de
   hoogte. De bovengrens van 132px is waar een plaat groot genoeg blijft om
   de tekst erop te lezen. */
.rlb-heroviny-link {
  width: auto;
  max-width: none;
  gap: 0;
}
.rlb-heroviny-beeld {
  width: clamp(64px, 15vh, 132px);
  height: clamp(64px, 15vh, 132px);
  margin-inline: auto;
}

/* De marges tussen de rijen en de tekst waren in vw; nu in vh. */
.rlb-heroviny-rij--boven { margin-bottom: 0; }
.rlb-heroviny-rij--onder { margin-top: 0; }
.rlb-heroviny-rij > ul { align-items: center; }

/* De kop neemt de kleinste van breedte en hoogte, zodat hij op een breed
   maar laag scherm niet alsnog over de rand gaat. Hij mag nooit afbreken:
   "DJ RE-LEX" op twee regels is geen logo meer. */
.rlb-hero--metvinyl .rlb-hero-titel {
  font-size: clamp(2rem, min(8vw, 9vh), 5.5rem);
  line-height: .92;
  margin-bottom: clamp(var(--rlb-r2), 1.2vh, var(--rlb-r4));
  white-space: nowrap;
}
.rlb-hero--metvinyl .rlb-kicker {
  margin-bottom: clamp(var(--rlb-r1), .8vh, var(--rlb-r3));
  font-size: clamp(.75rem, 1.4vh, 1rem);
}
.rlb-hero--metvinyl .rlb-hero-intro {
  font-size: clamp(.9375rem, 1.9vh, 1.125rem);
  margin-bottom: 0;
}
/* Op een laag scherm is de tweede alinea van de intro luxe. */
@media (max-height: 820px) {
  .rlb-hero--metvinyl .rlb-hero-intro p + p { display: none; }
}
.rlb-hero--metvinyl .rlb-knoppen {
  margin-top: clamp(var(--rlb-r3), 2vh, var(--rlb-r5));
}
.rlb-hero--metvinyl .rlb-knop {
  min-height: clamp(42px, 5.6vh, 56px);
  padding-block: 0;
}

/* De zwevende spelerbalk staat over de onderkant van de hero heen. Zolang
   hij zichtbaar is, krimpt de hero mee — anders valt de onderste rij platen
   er net achter. */
body.rlb-speler-actief .rlb-hero--metvinyl {
  min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-balk-h));
  min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-balk-h));
}

@media (max-width: 1023px) {
  :root { --rlb-kopbalk-h: 72px; }
}

/* Een scherm dat te laag is om twee rijen platen EN tekst te tonen, krijgt
   de hero op natuurlijke hoogte: dan mag er gescrold worden, want proppen
   maakt alles onleesbaar. */
@media (max-height: 560px) {
  .rlb-hero--metvinyl,
  body.rlb-speler-actief .rlb-hero--metvinyl { min-height: 0; }
  .rlb-hero--metvinyl .rlb-hero-titel { white-space: normal; }
}

/* ========================================================================
   49. DE KNOPPEN
   ========================================================================
   Ze waren te groot, te zwaar en hadden geen richting. Vier dingen anders:

   1. KLEINER. 56px hoog was een blok; 46px is een knop. De binnenruimte
      staat nu in verhouding tot de tekst in plaats van tot de sectie.
   2. RONDER. 30px uit brand.json — zacht genoeg om uitnodigend te zijn,
      niet zo rond dat het een pil wordt.
   3. EEN PIJL die meebeweegt. Een knop moet laten zien dat er iets gebeurt
      als je hem indrukt, en een pijl die een paar pixels opschuift zegt dat
      zonder een woord.
   4. RUSTIGER BIJ AANWIJZEN. De knop sprong omhoog en kreeg een grote
      schaduw; nu verschuift alleen de pijl en wordt het vlak iets donkerder.
      Beweging hoort bij wat je aanwijst, niet bij de hele knop.
   ======================================================================== */

.rlb-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  min-height: 46px;
  padding: var(--rlb-r3) var(--rlb-r5);
  border: 1px solid transparent;
  border-radius: var(--merk-radius_knop, 30px);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: .875rem;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
/* De knop zelf beweegt niet meer. */
.rlb-knop:hover,
.rlb-knop:active { transform: none; }

/* --- de pijl ----------------------------------------------------------- */

/* Een masker in plaats van een achtergrondafbeelding, zodat de pijl de
   kleur van de tekst aanneemt en dus altijd klopt — ook op de donkere
   varianten en in de voettekst. */
.rlb-knop::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--rlb-pijl) center / contain no-repeat;
  mask: var(--rlb-pijl) center / contain no-repeat;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}
:root {
  --rlb-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rlb-knop:hover::after,
.rlb-knop:focus-visible::after { transform: translateX(4px); }

/* Knoppen die geen "verder" betekenen krijgen geen pijl: bellen, WhatsApp,
   een winkelwagen en een deelknop gaan niet vooruit maar opzij. */
.rlb-knop--ghost::after,
.rlb-knop[href^="tel:"]::after,
.rlb-knop[href^="mailto:"]::after,
.rlb-knop[data-rl-wa]::after,
.rlb-share-knop::after,
.rlb-carrousel-knop::after,
.rlb-filter-knop::after { content: none; }

/* Het icoon vooraan blijft staan; alleen de pijl achteraan beweegt. */
.rlb-knop .rlb-icoon { transition: none; }
.rlb-knop:hover .rlb-icoon { transform: none; }

/* --- de drie soorten --------------------------------------------------- */

/* De primaire knop staat in sectie 68 en alleen daar. Hier bleef hij
   staan zonder kleur, want de rest van dit blok gaat over de twee ANDERE
   soorten en die hebben een rustige basis nodig. */
.rlb-knop--primair { box-shadow: none; }

.rlb-knop--secundair {
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  border-color: var(--merk-lijn, #E8EAEC);
}
.rlb-knop--secundair:hover {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-accent_donker, #A50B00);
}

.rlb-knop--ghost { background: transparent; color: var(--merk-gedempt, #696F77); padding-inline: var(--rlb-r4); }
.rlb-knop--ghost:hover { color: var(--merk-inkt, #1A1D21); background: var(--merk-vlak, #F6F7F8); }

/* --- op donkere vlakken ------------------------------------------------ */

/* De hoofdknop op een donker vlak: zie sectie 68. */
.rlb-cta-sectie .rlb-knop--secundair,
.rlb-hero--metvinyl .rlb-knop--secundair { border-color: rgba(255, 255, 255, .4); color: #fff; }
.rlb-cta-sectie .rlb-knop--secundair:hover,
.rlb-hero--metvinyl .rlb-knop--secundair:hover {
  background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff;
}

/* De hoofdactie in de kopbalk en de zwevende tab hadden bij de vorige klant
   een eigen kleur (cerise). Bij Zwets is er maar één accent en is dat
   onderscheid betekenisloos; ze volgen sectie 68. */

/* --- maten per plek ---------------------------------------------------- */

.rlb-cta .rlb-knop { min-height: 50px; }
.rlb-cta .rlb-knop--primair { padding-inline: var(--rlb-r6); font-size: .9375rem; }
.rlb-hero--metvinyl .rlb-knop { min-height: clamp(40px, 5.2vh, 50px); }
.rlb-release-acties .rlb-knop,
.rlb-disco-acties .rlb-knop { min-height: 40px; padding: var(--rlb-r2) var(--rlb-r4); font-size: .8125rem; }

@media (prefers-reduced-motion: reduce) {
  .rlb-knop::after { transition: none; }
  .rlb-knop:hover::after { transform: none; }
}

/* ========================================================================
   50. <PICTURE> IS GEEN BLOK
   ========================================================================
   nxrl_beeld() wikkelt elk beeld in een <picture>, zodat avif en webp
   aangeboden kunnen worden. Maar <picture> is standaard een INLINE element
   zonder eigen hoogte. Een <img> daarbinnen met height:100% rekent dus tegen
   niets, en een achtergrondbeeld dekt zijn vlak niet.

   Dit is dezelfde soort fout als de USP-kaart en de golfvorm: de opmaak
   klopte, de structuur eronder niet. Overal waar een beeld zijn vlak moet
   vullen, moet de <picture> net zo groot zijn als dat vlak.
   ======================================================================== */

.rlb-uit-achter picture,
.rlb-hero-achter picture,
.rlb-webcast-speler picture,
.rlb-disco-hoesvak picture,
.rlb-product-beeldvak picture,
.rlb-galerij-item picture,
.rlb-speler-hoesvak picture,
.rlb-gig-beeldvak picture,
.rlb-ger-beeldvak picture,
.rlb-vinyl-beeld picture,
.rlb-heroviny-beeld picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Een picture dat een vierkant beeld draagt, houdt die verhouding ook als
   het beeld nog niet geladen is. */
.rlb-disco-hoesvak picture,
.rlb-galerij-item picture,
.rlb-product-beeldvak picture { aspect-ratio: 1; }

.rlb-uit-achter,
.rlb-hero-achter { overflow: hidden; }
.rlb-uit-beeld,
.rlb-hero-achterbeeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========================================================================
   51. BREEKPUNTEN EN BROWSERREPARATIES
   ========================================================================
   Tot hier stonden de breekpunten verspreid: 1400, 1100, 1024, 1023, 900,
   860, 768, 760, 700, 680, 600, 560, 520. Dertien grenzen, half op gevoel
   gekozen. Hieronder staan er zes, elk met een apparaat erachter.

     >= 1600   grote schermen        inhoud 1440
     1280-1599 laptop                inhoud 1200
     1024-1279 MacBook 13 inch       inhoud 1040   <- 1280x800 of 1440x900
      768-1023 tablet                inhoud vol, menu ingeklapt
      480-767  grote telefoon
      < 480    telefoon

   De 13-inch MacBook is apart genoemd omdat die het vaakst misgaat: breed
   genoeg om als desktop te tellen, maar met 800 pixels hoogte te laag voor
   een hero die op schermhoogte rekent.
   ======================================================================== */

:root { --rlb-max: 1440px; }

@media (max-width: 1599px) { :root { --rlb-max: 1200px; } }
@media (max-width: 1279px) { :root { --rlb-max: 1040px; } }

/* --- MacBook 13 inch: breed maar laag --------------------------------- */

@media (min-width: 1024px) and (max-height: 860px) {
  /* Een hero op schermhoogte heeft hier nog maar ~770px te verdelen over
     twee rijen platen, een kop en knoppen. Alles een maatje kleiner. */
  .rlb-heroviny-beeld { width: clamp(64px, 13vh, 108px); height: clamp(64px, 13vh, 108px); }
  .rlb-hero--metvinyl .rlb-hero-titel { font-size: clamp(2rem, min(7vw, 8vh), 4.25rem); }
  .rlb-hero--metvinyl .rlb-hero-intro { font-size: 1rem; }
  .rlb { padding-block: clamp(var(--rlb-r6), 5vw, var(--rlb-r8)); }
}

/* --- tablet ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .rlb-nav, .rlb-header-acties { display: none; }
  .rlb-mobiel { display: block; }
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rlb-galerij--k8 .rlb-galerij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rlb-productgrid--k4 .rlb-product-raster,
  .rlb-productgrid--k5 .rlb-product-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- grote telefoon ---------------------------------------------------- */

@media (max-width: 767px) {
  .rlb-hero-rij, .rlb-tb-rij { grid-template-columns: minmax(0, 1fr); }
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-galerij--k8 .rlb-galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rlb-usps--k3 .rlb-usp-raster,
  .rlb-usps--k4 .rlb-usp-raster { grid-template-columns: minmax(0, 1fr); }
  .rlb-feitbalk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- telefoon ----------------------------------------------------------- */

@media (max-width: 479px) {
  .rlb-binnen { padding-inline: var(--rlb-r4); }
  .rlb-galerij--k8 .rlb-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-productgrid--k3 .rlb-product-raster,
  .rlb-productgrid--k4 .rlb-product-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-knop { width: 100%; justify-content: center; }
  .rlb-knoppen { flex-direction: column; align-items: stretch; }
  /* De zwevende tab en de knoppen in de hero blijven wel naast elkaar. */
  .rlb-zijtab .rlb-knop,
  .rlb-header .rlb-knop { width: auto; }
}

/* ========================================================================
   BROWSERREPARATIES
   ======================================================================== */

/* Safari zoomt in op een veld met een lettergrootte onder 16px zodra je erop
   tikt, en zoomt daarna niet terug. Elk invoerveld dus minstens 16px. */
@supports (-webkit-touch-callout: none) {
  .rlb-invoer, input, select, textarea { font-size: 16px; }
}

/* dvh kent niet elke browser. Zonder terugval krijgt een oudere browser geen
   hoogte en klapt de hero dicht. */
@supports not (height: 100dvh) {
  .rlb-hero--metvinyl { min-height: calc(100vh - var(--rlb-kopbalk-h)); }
}

/* backdrop-filter kost op zwakke toestellen meer dan het oplevert, en
   Firefox had hem lang niet. Zonder ondersteuning een dekkend vlak. */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .rlb-uit-kaart { background: rgba(0, 0, 0, .74); }
  .rlb-mobiel-nav { background: var(--merk-inkt, #1A1D21); }
}
.rlb-uit-kaart { -webkit-backdrop-filter: blur(3px); }

/* color-mix() is nieuw. Waar hij ontbreekt vallen we terug op een vaste
   kleur, anders wordt de eigenschap genegeerd en is er GEEN achtergrond. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .rlb-header { background: #000; }
  .rlb-speler-balk { background: #000; }
  .rlb-genre:has(input:checked) { background: var(--merk-vlak, #F6F7F8); }
  .rlb-prijs-rij--uit { background: var(--merk-vlak, #F6F7F8); }
  .rlb-ups-vink:checked + .rlb-ups-label { background: var(--merk-vlak, #F6F7F8); }
  .rlb-ups-ico { background: var(--merk-vlak, #F6F7F8); }
  .rlb-ups-label:hover { background: var(--merk-vlak, #F6F7F8); }
  .rlb-popup-fout { background: var(--merk-vlak, #F6F7F8); }
}

/* :has() kent Firefox pas sinds 121. Zonder die selector blijft een gekozen
   genre ongemarkeerd, dus een terugval op de radio zelf. */
@supports not selector(:has(*)) {
  .rlb-genre input:checked { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: 2px; }
}

/* -webkit-line-clamp werkt alleen met het hele trio. De standaardvorm staat
   erbij voor browsers die hem inmiddels wel kennen. */
.rlb-vod-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Safari rekent aspect-ratio op een afbeelding binnen een grid soms verkeerd
   zonder expliciete breedte. */
.rlb-disco-hoes, .rlb-galerij-beeld, .rlb-product-beeld { width: 100%; }

/* iOS laat een vast element achter de thuisbalk vallen. */
.rlb-speler-balk { padding-bottom: env(safe-area-inset-bottom, 0); }
@supports (padding: max(0px)){
  .rlb-binnen {
    padding-left: max(clamp(var(--rlb-r4), 4vw, 2.5rem), env(safe-area-inset-left));
    padding-right: max(clamp(var(--rlb-r4), 4vw, 2.5rem), env(safe-area-inset-right));
  }
}

/* Een lange URL in een alinea duwt op een telefoon de hele kolom open. */
.rlb p a { word-break: break-word; }

/* Windows laat een scrollbalk verschijnen die de pagina versmalt en alles
   laat verspringen. scrollbar-gutter houdt die ruimte altijd vrij. */
html { scrollbar-gutter: stable; }

/* flex-gap: Safari kent gap in flexbox sinds 14.1 (2021). Een @supports-test bestaat er niet voor (gap in grid telt ook als steun), en een margin-hack zou elke rij in dit bestand moeten herschrijven. De degradatie is netjes: zonder gap schuiven items tegen elkaar maar blijft alles leesbaar en klikbaar. Safari 14.0 en ouder is daarmee de bewuste ondergrens. */ /* ======================================================================== 52. DE KOPBALK ======================================================================== Wat er misging: het logo stond klein in de linkerhoek, daarna een gat van een halve schermbreedte, en dan alles opgepropt rechts. Oorzaak is `margin-inline-start: auto` op het menu — dat duwt alles naar rechts en laat het gat links vallen. De nieuwe verdeling: logo links, menu er direct naast met ruimte, en alleen telefoon en de boekknop helemaal rechts. Zo lezen de drie groepen als drie groepen in plaats van als een logo met een kluwen. ======================================================================== */ /* DE MIDDENKOLOM MOET KUNNEN KRIMPEN. Dit stond op `1fr`, en een grid-kolom van 1fr heeft een minimumbreedte van `auto`: hij krimpt dus NIET onder de inhoud. Het menu is een flexrij met nowrap, dus liep het bij elke schermbreedte van 1280 tot 1920 gewoon over de telefoon en de knop heen. Het leek een probleem van één breedte; het was
   er een van alle breedtes. `minmax(0, 1fr)` haalt die bodem weg, zodat de
   kolom krimpt in plaats van over zijn buren te schuiven. */
.rlb-header-rij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(var(--rlb-r4), 2.5vw, var(--rlb-r7));
  min-height: 92px;
}

.rlb-merk { justify-self: start; }
.rlb-logo { height: 68px; transition: opacity 180ms ease; }
.rlb-merk:hover .rlb-logo { opacity: .85; }

/* Het menu staat links uitgelijnd direct na het logo, niet rechts geplakt. */
.rlb-nav { margin-inline-start: 0; justify-self: start; }
.rlb-nav ul { gap: clamp(var(--rlb-r3), 1.6vw, 1.75rem); }

.rlb-navlink {
  padding: var(--rlb-r3) 0;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--merk-vlak, #F6F7F8);
}
.rlb-navlink:hover { color: #fff; }
.rlb-navlink--actief { color: #fff; }
/* De onderstreping is nu een kort streepje onder het midden in plaats van
   een lijn over de volle breedte: rustiger in een rij van acht. */
.rlb-navlink::after {
  left: 50%;
  right: auto;
  width: 18px;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.rlb-navlink:hover::after,
.rlb-navlink:focus-visible::after,
.rlb-navlink--actief::after { transform: translateX(-50%) scaleX(1); }

.rlb-header-acties {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(var(--rlb-r3), 1.2vw, var(--rlb-r5));
}

.rlb-tel {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--merk-vlak, #F6F7F8);
}
.rlb-tel .rlb-icoon { color: var(--merk-accent, #E2000F); }
.rlb-tel:hover { color: #fff; }

/* De boekknop in de balk is de enige cerise plek bovenaan: daarmee is op
   elke pagina meteen duidelijk waar de actie zit. */
.rlb-header .rlb-knop--primair {
  min-height: 44px;
  padding-inline: var(--rlb-r5);
  font-size: .8125rem;
}

/* De balk wordt compacter zodra je scrolt: dan is het logo al gezien en mag
   de inhoud meer ruimte krijgen. rl.js zet data-rl-gescrold. */
.rlb-header[data-rl-gescrold="1"] .rlb-header-rij { min-height: 68px; }
.rlb-header[data-rl-gescrold="1"] .rlb-logo { height: 48px; }
.rlb-header { transition: box-shadow 220ms ease; }
.rlb-header[data-rl-gescrold="1"] { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.rlb-header-rij, .rlb-logo { transition: min-height 220ms ease, height 220ms ease; }

/* De kopbalk moet passen in --rlb-max, en die staat op 1200px voor ELK scherm
   tot 1599px. Logo, zes menu-items waaronder "Gelegenheden & feesten", het
   telefoonnummer en de reserveerknop vragen samen ruim 1220px op volle
   grootte. Dat past dus nergens onder de 1600px, niet alleen onder de 1280.

   De grens stond op 1279 en liet daardoor juist de gangbaarste laptop-
   breedtes (1280, 1366, 1440 - een MacBook 13 inch zit er middenin) in de
   volle opmaak vallen, waar het menu over het logo en de knop heen liep.
   De grens hoort te liggen waar de container groeit: 1599.

   Het telefoonnummer gaat als eerste weg; dat staat ook in de voettekst,
   in het contactblok en in de hero. */
/* Krimpen gebeurt in deze volgorde, en dat is een keuze:
   1. het telefoonnummer gaat weg  — het staat ook in de hero, het contactblok
      en de voettekst, dus het verdwijnt nergens echt;
   2. de menuletters worden kleiner en de tussenruimte krapper;
   3. onder 1200 px klapt het menu om naar de uitschuifvariant. Dat is eerder
      dan de 1023 die hier stond: op een laptop van 1280 stonden zeven
      menu-items, een woordmerk en een knop op één regel te vechten. */
/* Het telefoonnummer staat niet meer in de balk. Gemeten op 8 november: met
   zeven menu-items, het woordmerk, het nummer en de offerteknop had de rij
   ongeveer 1560 px nodig terwijl de kolom op 1920 px scherm 1440 px breed is.
   Het nummer stond daardoor OP "Branches" en "Projecten" - op elke breedte
   van 1280 tot 1920, niet alleen op smalle schermen.

   Het nummer verdwijnt niet van de site: het staat in de hero, in het
   contactblok, in de voettekst en in de uitschuifvariant van dit menu. */
.rlb-header .rlb-tel { display: none; }

/* GEMETEN, 8 november 2026, met het menu zoals het nu is (zeven items):

     venster   kolom   woordmerk   menu nodig   knop   totaal nodig
      1904     1440       296         976       252       1604
      1584     1200       296         823       252       1431
      1264     1040       296         823       252       1431

   (totaal is inclusief de twee kolomgaten van ongeveer 40 px)

   De kolom is dus op ELKE breedte te smal, ook op 1920. Daarom klapt het
   menu nu onder 1600 om naar de uitschuifvariant in plaats van onder 1023:
   daarboven past het met kleinere letters en een krapper woordmerk, eronder
   niet. Dit is bewust de voorzichtige stand; zie OVERDRACHT.md taak 2b.1
   voor de twee alternatieven die meer ruimte opleveren. */
@media (min-width: 1200px) {
  .rlb-nav ul { gap: var(--rlb-r3); flex-wrap: nowrap; }
  .rlb-navlink { font-size: .8125rem; white-space: nowrap; }
  /* Het woordmerk is tekst, geen logobestand (dat moet Zwets nog leveren).
     Op 1.25rem is het 296 px breed en kwam de rij tekort; op 1.0625rem is het
     248 px. Zodra er een echt logo komt moet deze meting opnieuw. */
  .rlb-merk-tekst { font-size: 1.0625rem; letter-spacing: .05em; }
}

/* 1200 TOT 1600: WEL HET HELE MENU, GEEN KNOP IN DE BALK.
   De inhoudskolom is hier 1200 px breed. Daar passen het woordmerk (248),
   het menu (738) en de twee kolomgaten (80) in — samen 1066 — maar de
   offerteknop (252) er niet meer bij. Die knop verdwijnt niet van het
   scherm: de zwevende tab rechts staat op elke pagina en is rood. Liever
   het menu volledig en de knop één keer, dan een burger op een laptop. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .rlb-header-acties { display: none; }
  .rlb-header-rij { grid-template-columns: auto minmax(0, 1fr); }
}

@media (max-width: 1199px) {
  .rlb-header-rij { grid-template-columns: auto 1fr; min-height: 76px; }
  .rlb-nav, .rlb-header-acties { display: none; }
  .rlb-mobiel { display: block; justify-self: end; }
  .rlb-logo { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-header-rij, .rlb-logo, .rlb-header { transition: none; }
}

/* ========================================================================
   53. DE AFSLUITENDE BANNER, DEFINITIEF
   ========================================================================
   Nog steeds rommelig: de drie knoppen stapelden in een te smalle kolom en
   hadden elk hun eigen breedte, dus ze liepen rafelig af en leken buiten de
   kolom te vallen.

   De oorzaak is dat knoppen zich naar hun TEKST voegen. Drie knoppen met
   teksten van verschillende lengte worden dan drie verschillende blokken.
   In een rij valt dat niet op, in een stapel wel.

   Oplossing: in de stapel krijgen ze allemaal dezelfde breedte, uitgelijnd
   op de rechterkant van de kolom van 1440.
   ======================================================================== */

.rlb-cta-sectie > .rlb-binnen {
  max-width: var(--rlb-max);
  margin-inline: auto;
}

.rlb-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rlb-r6);
  align-items: center;
}

.rlb-cta-tekstvak { min-width: 0; }
.rlb-cta-titel {
  max-width: 14ch;
  margin: 0 0 var(--rlb-r4);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.02;
}
.rlb-cta-tekst { max-width: 42ch; margin: 0; font-size: 1.0625rem; }

/* De drie wegen naar een antwoord, onder elkaar en even breed. Gelijke
   breedte is wat het strak maakt: een rafelige rechterkant leest als
   slordig, ook als elke knop op zichzelf klopt. */
.rlb-cta .rlb-knoppen {
  display: grid;
  grid-template-columns: minmax(220px, 280px);
  gap: var(--rlb-r3);
  margin: 0;
  justify-content: start;
}
.rlb-cta .rlb-knop {
  width: 100%;
  min-height: 52px;
  justify-content: space-between;
  padding-inline: var(--rlb-r5);
}
/* Met de pijl helemaal rechts en de tekst links leest de stapel als een
   lijstje keuzes in plaats van als drie losse knoppen. */
.rlb-cta .rlb-knop::after { margin-left: auto; }
.rlb-cta .rlb-knop--ghost { justify-content: flex-start; gap: var(--rlb-r2); }

@media (min-width: 900px) {
  .rlb-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--rlb-r8);
    align-items: center;
  }
  .rlb-cta .rlb-knoppen { grid-template-columns: 300px; justify-content: end; }
}

@media (max-width: 480px) {
  .rlb-cta .rlb-knoppen { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   54. DE LICHTKRANT IN NACHTBLAUW
   ========================================================================
   De band stond in het felle accentblauw. Over de volle breedte trok dat
   meer aandacht dan de hero erboven, en dat is de verkeerde volgorde: een
   sfeerelement hoort niet harder te roepen dan de boodschap.

   Nachtblauw sluit aan op de zwarte hero in plaats van ertegen te vechten.
   De band staat nu ook direct onder de hero, zodat de video in dat donkere
   vlak overloopt en de feitenbalk eronder weer rust krijgt.
   ======================================================================== */

.rlb-band {
  background: var(--merk-nachtblauw, #17396A);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rlb-band-spoor > span {
  color: #fff;
  font-size: .9375rem;
  letter-spacing: .22em;
  padding-block: var(--rlb-r4);
}
/* De stip tussen de woorden in het accent: het enige felle blauw in de band,
   en net genoeg om hem te laten leven. */
.rlb-band-spoor > span::after {
  background: var(--merk-accent, #E2000F);
  opacity: 1;
  width: 6px; height: 6px;
}

/* De feitenbalk eronder stond in een eigen zwart kader. Nu de band daar
   direct boven zit, zou dat twee donkere blokken op elkaar zijn. De balk
   wordt licht en krijgt zijn scheiding van de band erboven. */
.rlb:not([class*="vlak"]) .rlb-feitbalk,
.rlb--vlak-grond .rlb-feitbalk {
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  padding-block: clamp(var(--rlb-r5), 3vw, var(--rlb-r7));
}
.rlb-feitbalk-waarde { color: var(--merk-inkt, #1A1D21); }
.rlb-feitbalk-label { color: var(--merk-gedempt, #696F77); }
.rlb-feitbalk-item + .rlb-feitbalk-item { border-left-color: var(--merk-lijn, #E8EAEC); }

/* ========================================================================
   55. DE AGENDA ALS ECHTE KOLOMMEN
   ========================================================================
   De rijen versprongen omdat tijd en genre in dezelfde stroom stonden als
   de naam en de locatie: een langere naam duwde de tijd naar rechts, een
   ontbrekende locatie trok hem naar links. Nu zijn het vijf losse cellen
   met VASTE breedtes, dus elke rij heeft dezelfde kolomposities — ook een
   rij waar de tijd of het genre ontbreekt.

   De cellen worden altijd gerenderd, ook leeg. Een weggelaten cel laat het
   raster inschuiven en dan verspringt alles erachter alsnog.
   ======================================================================== */

.rlb-gig {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 132px 150px 92px;
  align-items: center;
  gap: var(--rlb-r4);
  padding: var(--rlb-r4) 0;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
}

/* --- kolom 1: de datum --- */
.rlb-gig-datum {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding-right: var(--rlb-r4);
  border-right: 2px solid var(--merk-accent, #E2000F);
}
.rlb-gig-dag { font-size: 1.875rem; line-height: 1; }
.rlb-gig-maand { font-size: .75rem; letter-spacing: .16em; }

/* --- kolom 2: naam en locatie, onder elkaar --- */
.rlb-gig-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  min-width: 0;
}
.rlb-gig-naam {
  flex: none;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  /* Een lange naam kapt af in plaats van de rij hoger te maken. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rlb-gig-waar {
  margin: 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #696F77);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rlb-gig-waar::before { content: none; }

/* --- kolom 3: de tijd, altijd op dezelfde plek --- */
.rlb-gig-tijd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--rlb-r1);
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--merk-gedempt, #696F77);
  white-space: nowrap;
}
.rlb-gig-tijd::before { content: none; }

/* --- kolom 4: het genre als label --- */
.rlb-gig-genre { margin: 0; display: flex; }
.rlb-gig-genre::before { content: none; }
.rlb-gig-genre > span {
  display: inline-block;
  padding: var(--rlb-r1) var(--rlb-r2);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-accent_donker, #A50B00);
  white-space: nowrap;
}

/* --- kolom 5: de actie --- */
.rlb-gig-actie { display: flex; justify-content: flex-end; }
.rlb-gig-knop { min-height: 38px; padding: var(--rlb-r2) var(--rlb-r4); font-size: .75rem; }

/* Een afgelopen optreden: zelfde raster, rustiger kleuren. */
.rlb-gig--verleden .rlb-gig-datum { border-right-color: var(--merk-lijn, #E8EAEC); }
.rlb-gig--verleden .rlb-gig-genre > span { color: var(--merk-gedempt, #696F77); }

/* --- smaller: twee kolommen, de rest eronder --- */

@media (max-width: 900px) {
  .rlb-gig {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    row-gap: var(--rlb-r1);
  }
  .rlb-gig-tijd { grid-column: 2; }
  .rlb-gig-genre { grid-column: 2; }
  .rlb-gig-actie { grid-row: 1 / span 3; grid-column: 3; align-items: center; }
  .rlb-gig-dag { font-size: 1.5rem; }
}

@media (max-width: 520px) {
  .rlb-gig { grid-template-columns: 56px minmax(0, 1fr); }
  .rlb-gig-actie { grid-row: auto; grid-column: 2; justify-content: flex-start; margin-top: var(--rlb-r1); }
}

/* ========================================================================
   56. DE VOETTEKST VULT DE KOLOM
   ========================================================================
   De voettekst stond wel in de kolom van 1440, maar het raster erbinnen
   gebruikte `repeat(auto-fit, minmax(160px, 1fr))` naast een vaste
   1.4fr-kolom. auto-fit maakt dan een onvoorspelbaar aantal sporen voor de
   drie kolommen die er werkelijk zijn, en wat overblijft staat rechts leeg.
   Dat las als een inspring, terwijl de banner erboven wel tot de rand liep.

   Nu expliciet: een brede kolom voor het merk en drie gelijke ernaast.
   ======================================================================== */

.rlb-footer-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(var(--rlb-r5), 3vw, var(--rlb-r8));
  align-items: start;
}
.rlb-footer-over { max-width: 38ch; }
.rlb-footer-intro { max-width: none; }

/* De onderste regel loopt tot dezelfde randen als de rij erboven. */
.rlb-footer-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlb-r3) var(--rlb-r5);
}
.rlb-footer-juridisch { margin-left: 0; }

@media (max-width: 1023px) {
  .rlb-footer-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rlb-footer-over { grid-column: 1 / -1; max-width: 52ch; }
}
@media (max-width: 560px) {
  .rlb-footer-rij { grid-template-columns: minmax(0, 1fr); }
  .rlb-footer-over { grid-column: auto; }
}

/* ========================================================================
   57. ACHTERGRONDVIDEO IN EEN SECTIE
   ======================================================================== */

.rlb-uit-achter video.rlb-uit-beeld {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Een video krijgt dezelfde duotoonbehandeling als een foto, zodat hij niet
   als vreemde eend in de huisstijl zit. */
.rlb-uit--duotoon .rlb-uit-achter video.rlb-uit-beeld { filter: grayscale(1) contrast(1.15); }

/* Wie minder beweging wil, krijgt het posterbeeld in plaats van de video. */
@media (prefers-reduced-motion: reduce) {
  .rlb-uit-achter video.rlb-uit-beeld { display: none; }
  .rlb-uit-achter { background-size: cover; background-position: center; }
}

/* ========================================================================
   58. LOGO GROTER, LICHTKRANT STRAK TUSSEN DE BUREN
   ========================================================================
   Twee dingen.

   1. Het logo mag groter. Een vierkant logo met het woordmerk in de
      onderste helft heeft hoogte nodig voordat dat woordmerk telt.

   2. Boven de lichtkrant zat meer lucht dan eronder. Drie regels telden
      daar bij elkaar op: de onderruimte van de hero, een regel uit deel 42
      die elke sectie na een andere sectie extra bovenruimte geeft, en de
      eigen ruimte van de band. Omdat de hero zwart is en de band
      nachtblauw, hoort daar helemaal geen gat te zitten — ze moeten tegen
      elkaar aan liggen.
   ======================================================================== */

/* --- 1. het logo --- */

.rlb-header .rlb-header-rij { min-height: 104px; }
.rlb-logo { height: 80px; }
.rlb-header[data-rl-gescrold="1"] .rlb-header-rij { min-height: 72px; }
.rlb-header[data-rl-gescrold="1"] .rlb-logo { height: 54px; }

@media (max-width: 1279px) { .rlb-logo { height: 68px; } }
@media (max-width: 1023px) {
  .rlb-header .rlb-header-rij { min-height: 80px; }
  .rlb-logo { height: 60px; }
}

/* De ankeroffset volgt de balk, anders landt een anker eronder. */
html { scroll-padding-top: var(--rlb-r9); }
@media (max-width: 1023px) { html { scroll-padding-top: var(--rlb-r8); } }

/* --- 2. de lichtkrant --- */

/* De regel uit deel 42 geldt niet voor de band: die hoort juist tegen zijn
   buren aan te liggen. */
.rlb + .rlb.rlb-band { padding-top: 0; margin-top: 0; }
.rlb.rlb-band { padding: 0; margin: 0; border-top: 0; }

/* De hero sluit onderaan af op de band in plaats van er lucht tussen te
   laten: allebei donker, dus een gat leest als een fout. */
.rlb-hero--metvinyl { padding-bottom: clamp(var(--rlb-r5), 3.5vh, var(--rlb-r7)); }

/* En de feitenbalk eronder neemt dezelfde maat, zodat boven en onder de
   band evenveel ruimte zit. */
.rlb-band + .rlb { padding-top: clamp(var(--rlb-r5), 3.5vh, var(--rlb-r7)); }
.rlb-band + .rlb .rlb-feitbalk { padding-top: 0; }

/* ========================================================================
   59. VIDEO ACHTER DE STREAMINGKEUZE
   ========================================================================
   Een ander fragment uit dezelfde opname als de hero: 20 tot 36 seconden in
   plaats van 1 tot 17. Dezelfde sfeer, maar niet twee keer letterlijk
   hetzelfde beeld op een pagina.

   De tegels moeten leesbaar blijven over bewegend beeld heen, dus er ligt
   een zware sluier tussen. Een achtergrondvideo waar je de tekst niet meer
   op kunt lezen is geen sfeer maar ruis.
   ======================================================================== */

.rlb-streaming--video { position: relative; isolation: isolate; background: #000; }

.rlb-stream-achter {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.rlb-stream-achter video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ontkleurd en donkerder, zodat het beeld sfeer geeft en geen aandacht
     vraagt. De tegels zijn hier het onderwerp. */
  filter: grayscale(.55) brightness(.5) contrast(1.1);
}
.rlb-streaming--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 45%, rgba(0,0,0,.88) 100%);
}

/* De tegels krijgen iets meer vulling, anders verdwijnen ze in het beeld. */
.rlb-streaming--video .rlb-stream-link {
  background: rgba(0, 0, 0, .55);
  border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.rlb-streaming--video .rlb-stream-link:hover {
  background: rgba(0, 0, 0, .3);
  border-color: var(--merk-accent, #E2000F);
}

@media (prefers-reduced-motion: reduce) {
  .rlb-stream-achter video { display: none; }
}

/* ========================================================================
   60. YOUTUBE ALS SECTIEACHTERGROND
   ========================================================================
   Een iframe is altijd 16:9, een sectie zelden. object-fit werkt niet op een
   iframe, dus de enige manier om hem een vlak te laten vullen zonder zwarte
   balken is hem overmaats maken en centreren: 177.77vh breed als de hoogte
   leidend is, 56.25vw hoog als de breedte dat is. Dat is dezelfde rekensom
   die object-fit:cover intern doet.
   ======================================================================== */

.rlb-stream-achter--yt {
  background: var(--rlb-ytposter) center / cover no-repeat, #000;
}

.rlb-yt-achter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;            /* 16:9 op basis van de breedte */
  min-width: 177.77vh;        /* en andersom, als de hoogte leidend is */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;       /* het is behang: je klikt er niet op */
}

/* Dezelfde demping als bij de zelf gehoste video, anders overstemt het
   bewegende beeld de tegels. */
.rlb-stream-achter--yt { filter: grayscale(.45) brightness(.55) contrast(1.05); }

@media (prefers-reduced-motion: reduce) {
  .rlb-yt-achter { display: none; }
}

/* ========================================================================
   61. DE SECTIE MAG DE VIDEO NIET OVERSCHILDEREN
   ========================================================================
   .rlb-streaming had `background: #000`. De achtergrondvideo staat op
   z-index -2 en verdween daar dus achter. Met een video is de sectie zelf
   doorzichtig en doet de sluier het donkere werk.
   ======================================================================== */

.rlb-streaming--video { background: transparent; }
.rlb-streaming--video .rlb-stream-achter { z-index: 0; }
.rlb-streaming--video::before { z-index: 1; }
.rlb-streaming--video > .rlb-binnen { position: relative; z-index: 2; }

/* ========================================================================
   62. STRAK TREKKEN
   ======================================================================== */

/* --- 1. de banner sneed zijn eigen inhoud af --------------------------
   De schuine rand haalt rechtsonder 3vw weg — op 1920 is dat 58 pixels.
   De kaart staat rechts, dus precies daar verdwenen de knoppen. Een
   clip-path knipt zonder te vragen; de ruimte moet er dus bij. */

.rlb-uit {
  padding-block: calc(clamp(var(--rlb-r7), 7vw, var(--rlb-r9)) + 3vw);
  clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}
@media (max-width: 860px) { .rlb-uit { padding-block: clamp(var(--rlb-r7), 9vw, var(--rlb-r8)); } }

/* --- 2. de golfvorm was op wit niet te zien ---------------------------
   De staven stonden in --merk-lijn (#E4E9EE): dat is een randkleur, geen
   beeldkleur. Op wit is dat vrijwel onzichtbaar. Het ongespeelde deel moet
   zichtbaar zijn zonder het gespeelde deel te overstemmen. */

.rlb-golf { height: 46px; }
.rlb-golf-achter rect { fill: var(--rlb-neutraal-zacht); }
.rlb-golf-voor rect { fill: var(--merk-accent_donker, #A50B00); }
.rlb-golf:hover .rlb-golf-achter rect { fill: var(--rlb-neutraal-half); }
.rlb-speler-track[aria-current="true"] .rlb-golf-voor rect { fill: var(--merk-accent, #E2000F); }

/* De trackrij had te weinig lucht en de nummers stonden los. */
.rlb-speler-track {
  gap: var(--rlb-r4);
  padding: var(--rlb-r4) var(--rlb-r3);
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 0;
}
.rlb-speler-lijst { border-top: 1px solid var(--merk-lijn, #E8EAEC); }
.rlb-speler-track:hover { background: var(--merk-vlak, #F6F7F8); border-color: var(--merk-lijn, #E8EAEC); }
.rlb-speler-hoesvak { width: 48px; }
.rlb-speler-titel { font-size: 1rem; }
.rlb-speler-duur { font-size: .875rem; min-width: 3.2rem; text-align: right; }

/* --- 3. kleuren beter op elkaar afstemmen -----------------------------
   Het accentblauw stond overal: de streep onder elke kop, de cijfers in de
   stappen, de rand van elke badge, de datumstreep in de agenda, het icoon
   in elke kaart. Als alles accent is, is niets meer accent.

   De regel die nu geldt: BLAUW markeert waar je bent of wat er speelt;
   CERISE markeert wat je kunt doen. Alles wat alleen decoratie was, wordt
   grijs. */

/* De streep onder een sectiekop blijft blauw: dat is het enige vaste baken
   in de pagina. */
.rlb-kop > .rlb-titel::after { background: var(--merk-accent, #E2000F); }

/* De stapnummers waren blauwe cirkels — decoratie. Nu een omlijnd cijfer,
   zodat de aandacht naar de koppen gaat en niet naar de bolletjes. */
.rlb-stap-nummer {
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  border: 2px solid var(--merk-lijn, #E8EAEC);
  font-size: 1rem;
}

/* De metabadges in de speler: alleen BPM en toonaard krijgen kleur, want
   daar zoekt een DJ op. Genre en label zijn context. */
.rlb-speler-meta-item { border-color: var(--merk-lijn, #E8EAEC); color: var(--merk-gedempt, #696F77); }
.rlb-speler-meta--bpm,
.rlb-speler-meta--toonaard {
  border-color: var(--rlb-neutraal-zacht);
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-accent_donker, #A50B00);
}

/* Het icoon in een USP-kaart was blauw op blauw-grijs; nu rustig, met de
   bovenrand van de kaart als enige accent. */
.rlb-usp .rlb-icoon { background: var(--merk-vlak, #F6F7F8); color: var(--merk-inkt, #1A1D21); }
.rlb-usp > * { border-top-color: var(--merk-lijn, #E8EAEC); }
.rlb-usp > *:hover,
a.rlb-usp-link:hover { border-top-color: var(--merk-accent, #E2000F); }

/* De feitenbalk: de iconen waren losse blauwe stipjes boven de cijfers. Het
   cijfer is de boodschap, dus dat krijgt het gewicht. */
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-gedempt, #696F77); opacity: .65; }
.rlb-feitbalk-waarde { font-size: clamp(1.625rem, 3vw, 2.5rem); }

/* De datumstreep in de agenda blijft blauw voor komende optredens en wordt
   grijs voor afgelopen — dat is het verschil dat ertoe doet. */

/* De genrepil was blauw omlijnd op elke rij; nu grijs, behalve bij een
   komend optreden. */
.rlb-gig-genre > span { color: var(--merk-gedempt, #696F77); border-color: var(--merk-lijn, #E8EAEC); }
.rlb-gig:not(.rlb-gig--verleden) .rlb-gig-genre > span {
  color: var(--merk-accent_donker, #A50B00);
  border-color: var(--rlb-neutraal-zacht);
}

/* ========================================================================
   63. DE PAGINAKOP VAN EEN SUBPAGINA
   ========================================================================
   Elke subpagina had dezelfde hero als de homepage: een tweekolomsopzet met
   het beeld als los kolommetje rechts, plus een donkere sluier die over een
   wit vlak lag omdat er helemaal geen achtergrond was.

   Een paginakop heeft een andere taak dan een homepage-hero. Hij moet in
   een oogopslag zeggen waar je bent, niet overtuigen. Dus: compact, het
   beeld erachter, de tekst erop, en meteen door naar de inhoud.
   ======================================================================== */

.rlb-hero--achter {
  background: #000;
  color: #fff;
  padding-block: clamp(var(--rlb-r7), 7vw, 6rem);
  min-height: 0;
  display: block;
}
.rlb-hero--achter :where(h1, h2, .rlb-hero-titel) { color: #fff; }
.rlb-hero--achter .rlb-hero-intro { color: var(--rlb-op-donker-gedempt); }
.rlb-hero--achter .rlb-kicker { color: var(--merk-accent, #E2000F); }

/* Eén kolom, links uitgelijnd, met een leesbare maat. Een paginakop over de
   volle 1440 breed leest niet. */
.rlb-hero--achter .rlb-hero-rij { grid-template-columns: minmax(0, 1fr); }
.rlb-hero--achter .rlb-hero-tekst { max-width: 56ch; }
.rlb-hero--achter .rlb-hero-titel {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  margin-bottom: var(--rlb-r4);
}
.rlb-hero--achter .rlb-hero-intro { font-size: 1.0625rem; max-width: 52ch; }
.rlb-hero--achter .rlb-knoppen { margin-top: var(--rlb-r5); }

/* Het beeld erachter wordt ontkleurd en gedimd: het is sfeer, de kop is de
   boodschap. */
.rlb-hero--achter .rlb-hero-achter { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rlb-hero--achter .rlb-hero-achterbeeld,
.rlb-hero--achter .rlb-hero-achter picture {
  width: 100%; height: 100%; display: block;
}
.rlb-hero--achter .rlb-hero-achterbeeld {
  object-fit: cover;
  /* Zwaartepunt rechts: het onderwerp staat onder het transparante deel van
     het verloop, zodat de foto niet uitgerekt hoeft en scherp/vrij uitkomt. */
  object-position: right center;
  filter: none;
}
/* Horizontaal verloop: links diep donkerblauw (daar staat de kop), naar rechts
   volledig transparant zodat de foto vrij en helder uitkomt. De kop links is zo
   goed leesbaar zonder de hele foto te verdonkeren. */
/* DE SLUIER MOET DEKKEN WAAR DE TEKST STAAT.
   Het oude verloop was op 66% al helemaal weg, maar de tekstkolom is
   1,05fr van 1,05 + 0,95 — dus ruim de helft van de breedte. Op een foto
   met een lichte lucht stond de witte H1 daardoor op wit: op
   /industrievloeren/monolietvloer/ was "Monolietvloer" letterlijk niet te
   zien. Dat is geen smaakkwestie maar een pagina zonder kop.

   Nu twee lagen over elkaar:
   · van links, dekkend tot voorbij de tekstkolom en pas daarna uitdovend,
     zodat de foto rechts nog vrij en helder uitkomt;
   · van onder, zodat de scrolltip en de onderrand ook op een lichte lucht
     leesbaar blijven.

   De waarden zijn geen smaak maar een ondergrens: bij .60 dekking over
   #0E284B haalt witte tekst ruim 7:1, ook als de foto eronder zuiver wit
   is. */
.rlb-hero--achter .rlb-hero-sluier {
  z-index: 1;
  /* TWEE DINGEN DIE HIER FOUT ZATEN, ALLEBEI ONZICHTBAAR IN DE CODE.
     1. De dekking stond in `calc(var(--rlb-sluier) + .33)` binnen rgba().
        Die declaratie wordt verworpen, dus de sluier deed niets.
     2. Ook met vaste waarden bleef de `background`-shorthand hier zonder
        effect; als `background-image` schildert hij wel. Daarom staat de
        kleurlaag apart.

     Gevolg van allebei: de witte H1 stond onbeschermd op een witte lucht
     en /industrievloeren/monolietvloer/ had geen zichtbare kop. Dat is
     geen smaakkwestie maar een kapotte pagina.

     De waarden zijn een ondergrens, geen smaak: bij .62 dekking over
     #0E284B haalt witte tekst ruim 7:1, ook als de foto eronder wit is.
     De tekstkolom is 1,05fr van 1,05 + 0,95 en loopt dus tot ongeveer
     52% - daar moet de dekking dus nog staan, en pas daarna uitdoven. */
  background-color: transparent;
  background-image:
    linear-gradient(0deg,
      rgba(8, 20, 40, .58) 0%,
      rgba(8, 20, 40, .18) 30%,
      rgba(8, 20, 40, 0) 54%),
    linear-gradient(90deg,
      rgba(8, 20, 40, .90) 0%,
      rgba(8, 20, 40, .84) 32%,
      rgba(8, 20, 40, .62) 52%,
      rgba(8, 20, 40, .24) 74%,
      rgba(8, 20, 40, 0) 100%);
}
/* Op mobiel het verloop van onder naar boven: tekst onderaan leesbaar, foto
   bovenaan vrij. */
@media (max-width: 767px) {
  .rlb-hero--achter .rlb-hero-achterbeeld { object-position: center 30%; }
  .rlb-hero--achter .rlb-hero-sluier {
    background: linear-gradient(0deg,
      rgba(8, 20, 40, .92) 0%,
      rgba(8, 20, 40, .72) 42%,
      rgba(8, 20, 40, .18) 100%);
  }
}
.rlb-hero--achter > .rlb-binnen { position: relative; z-index: 2; }

/* De broodkruimels staan boven de kop en horen daar visueel bij: ze krijgen
   dezelfde donkere grond in plaats van op wit te zweven. */
.rlb-kruimels + .rlb-hero--achter { margin-top: 0; }
.rlb-kruimels {
  background: #000;
  padding-block: var(--rlb-r4) 0;
}
.rlb-kruimels ol { color: var(--rlb-op-donker-stil); }
.rlb-kruimels a { color: var(--rlb-op-donker-gedempt); }
.rlb-kruimels a:hover { color: #fff; }
.rlb-kruimels li + li::before { color: var(--merk-gedempt, #696F77); }
.rlb-kruimels [aria-current="page"] { color: #fff; }

@media (max-width: 767px) {
  .rlb-hero--achter { padding-block: clamp(var(--rlb-r6), 9vw, var(--rlb-r8)); }
}

/* ========================================================================
   64. DOORZICHTIGE KOPBALK, WIT ZODRA JE SCROLT
   ========================================================================
   Boven de vouw ligt de balk OVER de hero: geen vlak, alleen het logo en
   het menu in wit op het beeld. Zodra je scrolt wordt hij wit met grijze
   links, want dan staat hij boven lichte inhoud.

   Daarvoor moet hij uit de documentstroom (`fixed` in plaats van `sticky`),
   anders duwt hij de hero omlaag in plaats van eroverheen te liggen. De
   eerste sectie van elke pagina vangt die hoogte zelf op — dat is netter
   dan het hele document een bovenmarge geven, want dan zou elke pagina een
   witte strook boven het beeld krijgen.
   ======================================================================== */

.rlb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 0;
  transition: background 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
/* Het accentlijntje onder de balk hoort bij de witte stand, niet bij de
   doorzichtige: op een foto is het een streep die nergens op slaat. */
.rlb-header::after { opacity: 0; transition: opacity 260ms ease; }

/* --- boven de vouw: doorzichtig, alles wit --- */

.rlb-header .rlb-navlink,
.rlb-header .rlb-tel,
.rlb-header .rlb-merk-tekst,
.rlb-header .rlb-mobiel > summary { color: #fff; }
.rlb-header .rlb-navlink:hover,
.rlb-header .rlb-navlink--actief { color: #fff; }
.rlb-header .rlb-navlink::after { background: #fff; }
/* Een zachte schaduw onder de tekst, anders verdwijnt wit in een licht
   stuk van de video. */
.rlb-header .rlb-nav,
.rlb-header .rlb-tel { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.rlb-header .rlb-logo { filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5)); }

/* --- gescrold: wit vlak, grijze links --- */

.rlb-header[data-rl-gescrold="1"] {
  background: #fff;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  box-shadow: 0 6px 24px rgba(10, 20, 32, .08);
}
.rlb-header[data-rl-gescrold="1"]::after { opacity: 1; }

.rlb-header[data-rl-gescrold="1"] .rlb-navlink,
.rlb-header[data-rl-gescrold="1"] .rlb-tel,
.rlb-header[data-rl-gescrold="1"] .rlb-mobiel > summary {
  color: var(--merk-gedempt, #696F77);
  text-shadow: none;
}
.rlb-header[data-rl-gescrold="1"] .rlb-navlink:hover,
.rlb-header[data-rl-gescrold="1"] .rlb-navlink--actief { color: var(--merk-inkt, #1A1D21); }
.rlb-header[data-rl-gescrold="1"] .rlb-navlink::after { background: var(--merk-accent, #E2000F); }
.rlb-header[data-rl-gescrold="1"] .rlb-tel .rlb-icoon { color: var(--merk-accent_donker, #A50B00); }
.rlb-header[data-rl-gescrold="1"] .rlb-logo { filter: none; }
.rlb-header[data-rl-gescrold="1"] .rlb-nav { text-shadow: none; }

/* De boekknop blijft cerise in beide standen: dat is het enige vaste punt
   in de balk en moet niet meeveranderen. */

/* --- de eerste sectie vangt de hoogte op --- */

/* De hero van de homepage: vol scherm, met de balk eroverheen. */
.rlb-hero--metvinyl {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--rlb-kopbalk-h) + clamp(var(--rlb-r3), 2vh, var(--rlb-r5)));
}
body.rlb-speler-actief .rlb-hero--metvinyl { min-height: calc(100vh - var(--rlb-balk-h)); }
body.rlb-speler-actief .rlb-hero--metvinyl { min-height: calc(100dvh - var(--rlb-balk-h)); }

/* De subpagina's beginnen met de broodkruimels in dezelfde zwarte band.

   De selector draagt .rlb mee omdat deel 51 met `.rlb.rlb-kruimels` op 0,2,0
   een eigen padding-block zet. Zonder dat gewicht verloor deze regel en
   stond het kruimelpad bovenop het logo — op élke vervolgpagina. */
.rlb.rlb-kruimels { padding-top: calc(var(--rlb-kopbalk-h) + var(--rlb-r4)); }

/* Een pagina zonder kruimels begint met de kop zelf. */
main > .rlb-hero--achter:first-child {
  padding-top: calc(var(--rlb-kopbalk-h) + clamp(var(--rlb-r6), 5vw, var(--rlb-r8)));
}
/* En een pagina die met iets anders begint — zoals contact — ook. */
main > .rlb:first-child:not(.rlb-hero):not(.rlb-kruimels) {
  padding-top: calc(var(--rlb-kopbalk-h) + clamp(var(--rlb-r6), 5vw, var(--rlb-r8)));
}

@media (max-width: 1023px) {
  .rlb-hero--metvinyl { padding-top: calc(var(--rlb-kopbalk-h) + var(--rlb-r4)); }
}

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

/* ========================================================================
   65. DE HERO VERDEELT ZIJN DRIE GROEPEN GELIJK
   ========================================================================
   De bovenste rij platen begon vlak onder de kopbalk, de onderste eindigde
   bijna honderd pixels boven de spelerbalk. Het middenstuk hing te hoog.

   Oorzaak: `justify-content: center` centreert de inhoud binnen het vak,
   maar dat vak heeft bovenaan een flinke opvulling voor de kopbalk die
   eroverheen ligt. Het optische midden van wat je ZIET ligt dus lager dan
   het midden van het vak.

   `space-evenly` lost dat op zonder rekenwerk: het legt dezelfde ruimte
   boven de eerste groep, tussen de groepen en onder de laatste. Drie
   groepen, vier gelijke gaten. Dat klopt altijd, ook als de tekst langer
   wordt of de spelerbalk verdwijnt.
   ======================================================================== */

.rlb-hero--metvinyl > .rlb-binnen {
  justify-content: space-evenly;
  gap: 0;
  /* De opvulling van de hero zelf is nu alleen nog een ondergrens voor de
     kopbalk; de verdeling doet de rest. */
  min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-r5));
  min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-r5));
}
body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
  min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - var(--rlb-r5));
  min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - var(--rlb-r5));
}

.rlb-hero--metvinyl { padding-bottom: 0; }

/* De tekstgroep heeft zijn eigen ademruimte niet meer nodig: die komt nu
   van de verdeling. Een dubbele marge zou het midden weer omhoog duwen. */
.rlb-hero--metvinyl .rlb-hero-tekst { padding-block: 0; }
.rlb-hero--metvinyl .rlb-hero-rij { margin: 0; }

@media (max-width: 1023px) {
  .rlb-hero--metvinyl > .rlb-binnen {
    min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-r4));
    min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-r4));
  }
  body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
    min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - var(--rlb-r4));
    min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - var(--rlb-r4));
  }
}

/* Te laag om gelijk te verdelen: dan liever scrollen dan proppen. */
@media (max-height: 620px) {
  .rlb-hero--metvinyl > .rlb-binnen {
    justify-content: flex-start;
    gap: var(--rlb-r5);
    min-height: 0;
  }
}

/* ========================================================================
   66. DE VITRINE — muziek die eruitziet als muziek
   ========================================================================
   De lijstweergave was een spreadsheet: twee dunne regels in veel wit. Voor
   het blok waar het op deze site om draait is dat te mager.

   De vitrine zet de eerste track groot neer als PLAAT: een zwarte schijf
   die achter de hoes uitsteekt, een speelknop die over de rand hangt, en de
   harde gegevens eronder als kolommen. Rechts de rest als compacte lijst.

   Donker, want een speler is het nachtelijke deel van de site. De zwarte
   schijf bestaat ook alleen tegen een donkere grond.
   ======================================================================== */

.rlb-speler--vitrine {
  background: #000;
  color: #fff;
  position: relative;
  isolation: isolate;
}
.rlb-speler--vitrine :where(h2, h3, .rlb-titel) { color: #fff; }
.rlb-speler--vitrine .rlb-intro { color: var(--rlb-op-donker-stil); }

/* Groeven op de achtergrond, net als bij de andere donkere vlakken. */
.rlb-speler--vitrine::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%; right: -16%;
  width: min(820px, 76vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    rgba(255, 255, 255, .05) 0 2px, transparent 2px 8px);
  pointer-events: none;
}

.rlb-vitrine {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(var(--rlb-r5), 4vw, var(--rlb-r8));
  align-items: center;
  margin-bottom: clamp(var(--rlb-r6), 4vw, var(--rlb-r8));
  padding-bottom: clamp(var(--rlb-r6), 4vw, var(--rlb-r8));
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* --- de plaat --- */

.rlb-vitrine-plaat { position: relative; aspect-ratio: 1; }

/* De zwarte schijf steekt rechts achter de hoes uit en draait langzaam.
   Dit is het beeld dat van een vierkante hoes een plaat maakt. */
.rlb-vitrine-schijf {
  position: absolute;
  top: 50%;
  right: -22%;
  width: 88%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      var(--merk-accent, #E2000F) 0 11%,
      var(--merk-inkt, #1A1D21) 11.5% 13%,
      transparent 13.5%),
    repeating-radial-gradient(circle at center, var(--merk-inkt, #1A1D21) 0 2px, var(--merk-inkt, #1A1D21) 2px 5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  animation: rlb-draai 16s linear infinite;
  animation-play-state: paused;
}
.rlb-speler--vitrine:hover .rlb-vitrine-schijf,
body.rlb-speler-actief .rlb-vitrine-schijf { animation-play-state: running; }

.rlb-vitrine-hoes,
.rlb-vitrine-plaat picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
}
.rlb-vitrine-leeg {
  position: relative; z-index: 1;
  display: block; width: 100%; aspect-ratio: 1;
  background: var(--merk-inkt, #1A1D21);
  border-radius: 4px;
}

/* De speelknop hangt over de onderrand van de hoes. */
.rlb-vitrine-speel {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--merk-accent, #E2000F) 45%, transparent);
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1), background 200ms ease;
}
.rlb-vitrine-speel:hover { transform: translateX(-50%) scale(1.08); background: #fff; color: #000; }

/* --- de gegevens ernaast --- */

.rlb-vitrine-info { min-width: 0; }
.rlb-vitrine-kicker {
  margin: 0 0 var(--rlb-r2);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}
.rlb-vitrine-titel {
  margin: 0 0 var(--rlb-r1);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.02;
  color: #fff;
  text-transform: uppercase;
}
.rlb-vitrine-artiest {
  margin: 0 0 var(--rlb-r5);
  font-size: 1.0625rem;
  letter-spacing: .04em;
  color: var(--rlb-op-donker-stil);
}

/* De harde gegevens als kolommen: dat is hoe een DJ ze leest. */
.rlb-vitrine-feiten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r5);
  margin: 0 0 var(--rlb-r5);
}
.rlb-vitrine-feit { display: flex; flex-direction: column; gap: .15rem; }
.rlb-vitrine-feit dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-vitrine-feit dd {
  margin: 0;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.125rem;
  color: #fff;
}

/* --- de lijst ernaast, op donker --- */

.rlb-speler--vitrine .rlb-speler-lijst { border-top-color: rgba(255, 255, 255, .14); }
.rlb-speler--vitrine .rlb-speler-track { border-bottom-color: rgba(255, 255, 255, .1); }
.rlb-speler--vitrine .rlb-speler-track:hover { background: rgba(255, 255, 255, .05); }
.rlb-speler--vitrine .rlb-speler-titel { color: #fff; }
.rlb-speler--vitrine .rlb-speler-artiest,
.rlb-speler--vitrine .rlb-speler-duur,
.rlb-speler--vitrine .rlb-speler-nr { color: var(--rlb-op-donker-stil); }
.rlb-speler--vitrine .rlb-speler-knop { border-color: rgba(255, 255, 255, .25); color: #fff; }
.rlb-speler--vitrine .rlb-speler-meta-item { border-color: rgba(255, 255, 255, .2); color: var(--rlb-op-donker-stil); }
.rlb-speler--vitrine .rlb-speler-meta--bpm,
.rlb-speler--vitrine .rlb-speler-meta--toonaard {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 14%, transparent);
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 0%, transparent);
  color: var(--merk-accent_op_donker, #E2000F);
}
.rlb-speler--vitrine .rlb-golf-achter rect { fill: rgba(255, 255, 255, .22); }
.rlb-speler--vitrine .rlb-golf-voor rect { fill: var(--merk-accent, #E2000F); }
.rlb-speler--vitrine .rlb-speler-alleen-stream { border-color: rgba(255, 255, 255, .25); color: var(--merk-accent_op_donker, #E2000F); }
.rlb-speler--vitrine .rlb-speler-alleen-stream:hover { background: rgba(255, 255, 255, .08); }

@media (max-width: 860px) {
  .rlb-vitrine { grid-template-columns: minmax(0, 1fr); gap: var(--rlb-r7); }
  .rlb-vitrine-plaat { max-width: 260px; }
  .rlb-vitrine-schijf { right: -18%; width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-vitrine-schijf { animation: none; }
}

/* ========================================================================
   67. DE HERO HOUDT ZIJN EIGEN RANDEN VAST
   ========================================================================
   `space-evenly` verdeelde vier gelijke gaten: boven de eerste rij, tussen
   de groepen, en ONDER de laatste rij. Dat laatste gat zit nog in de hero
   en is dus wat je boven de lichtkrant ziet. Op een hoog scherm wordt dat
   honderd pixels of meer, terwijl onder de band een vaste 48 staat. Die
   twee kunnen nooit gelijk zijn.

   `space-between` is hier het juiste gereedschap: de eerste groep raakt de
   bovenrand, de laatste de onderrand, en alleen de ruimte ERTUSSEN wordt
   verdeeld. De randen bepaal ik dan zelf — en dezelfde waarde zet ik onder
   de band. Daarmee is de lichtkrant aan beide kanten even ver van zijn
   buren.
   ======================================================================== */

:root { --rlb-herorand: clamp(1.25rem, 3.4vh, 3rem); }

.rlb-hero--metvinyl > .rlb-binnen {
  justify-content: space-between;
  gap: var(--rlb-r5);
}

.rlb-hero--metvinyl {
  /* boven: de kopbalk ligt eroverheen, dus die hoogte komt erbij */
  padding-top: calc(var(--rlb-kopbalk-h) + var(--rlb-herorand));
  padding-bottom: var(--rlb-herorand);
}

/* En precies dezelfde maat onder de lichtkrant. */
.rlb-band + .rlb { padding-top: var(--rlb-herorand); }
.rlb-band + .rlb .rlb-feitbalk { padding-top: 0; }

/* De minimumhoogte houdt rekening met beide randen, zodat de hero niet
   hoger wordt dan het scherm nu de opvulling erbij komt. */
.rlb-hero--metvinyl > .rlb-binnen {
  min-height: calc(100vh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
  min-height: calc(100dvh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
}
body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
  min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - (2 * var(--rlb-herorand)));
  min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - (2 * var(--rlb-herorand)));
}

@media (max-width: 1023px) {
  .rlb-hero--metvinyl > .rlb-binnen {
    min-height: calc(100vh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
    min-height: calc(100dvh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
  }
  body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
    min-height: calc(100vh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - (2 * var(--rlb-herorand)));
    min-height: calc(100dvh - var(--rlb-kopbalk-h) - var(--rlb-balk-h) - (2 * var(--rlb-herorand)));
  }
}

@media (max-height: 620px) {
  .rlb-hero--metvinyl > .rlb-binnen { justify-content: flex-start; min-height: 0; }
}

/* ========================================================================
   68. EEN KNOP, EEN KLEUR: ROOD MET WITTE TEKST
   ========================================================================
   Dit blok stond er nog van de vorige klant. Daar was het accent een fel
   blauw (#0096FF) waar wit maar 3.09:1 op haalt, dus stond de knoptekst
   bijna-zwart. Bij Zwets is het accent #E2000F uit het logo, en die keuze
   draait precies om: wit haalt er 4.95:1 op (AA), bijna-zwart slechts
   3.38:1 en zakt dus door de norm. Zie config/brand.json, _afwijkingen:
   "rood kan hier uitzonderlijk genoeg allebei".

   Daarom: rood vlak, witte tekst. Bij aanwijzen het donkere rood
   #A50B00 (7.93:1 op wit) - dezelfde familie, geen kleursprong.

   ER IS EEN ROOD. Hier stond dat de knop op een donkere sectie naar een
   lichter rood #FF5247 ging, omdat #E2000F op diepblauw 2.98:1 haalt en
   daarmee net onder de 3:1 voor de RAND van een vlak zakt. Marijn, 8 nov:
   dat is een tweede tint en die mag er niet komen. Het is overal #E2000F.
   Wat de bezoeker leest is de witte tekst OP het rood, en die haalt 4.95:1.
   Waar het rode vlak op donker toch moet loskomen doen we dat met een dunne
   lichte rand - met vorm, niet met een kleur erbij.
   ======================================================================== */

.rlb-knop--primair {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-knop--primair:hover {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}

/* De zwevende aanvraagknop en de knop in de kopbalk: zelfde rood. */
.rlb-zijtab-knop {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}

.rlb-header .rlb-knop--primair,
.rlb-header[data-rl-gescrold="1"] .rlb-knop--primair {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-header .rlb-knop--primair:hover,
.rlb-header[data-rl-gescrold="1"] .rlb-knop--primair:hover {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}

/* Op donkere vlakken (diepblauwe voettekst, foto-CTA, hero met sluier)
   blijft het dezelfde rode knop met DEZELFDE witte tekst. Marijn, 8 nov:
   "tekst in de rode knop altijd wit". Hier stond bijna-zwarte tekst op het
   rood; dat is een tweede knop en haalt met 3.38:1 bovendien de norm niet,
   terwijl wit op #E2000F 4.95:1 haalt. Een dun lichtgrijs randje laat het
   vlak loskomen van de donkere ondergrond - vorm, geen tweede kleur. */
.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair,
.rlb--vlak-diepblauw .rlb-knop--primair,
.rlb--vlak-inkt .rlb-knop--primair,
.rlb-hero--achter .rlb-knop--primair,
.rlb-hero--achtergrond .rlb-knop--primair {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  border: 1px solid rgba(255, 255, 255, .22);
}
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover,
.rlb--vlak-diepblauw .rlb-knop--primair:hover,
.rlb--vlak-inkt .rlb-knop--primair:hover,
.rlb-hero--achter .rlb-knop--primair:hover,
.rlb-hero--achtergrond .rlb-knop--primair:hover {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
  border-color: rgba(255, 255, 255, .34);
}

/* Knoppen uit de platformkern die Zwets niet gebruikt (speler, discografie,
   vitrine). Ze blijven in de tabel staan tot de DJ-opmaak er in zijn geheel
   uit gaat; zolang ze er staan moeten ze wel dezelfde regel volgen. */
.rlb-speler-koop,
.rlb-balk-vak--kar,
.rlb-balk-vak--speel,
.rlb-vitrine-speel,
.rlb-disco-actie--speel {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-speler-koop:hover,
.rlb-balk-vak--kar:hover,
.rlb-balk-vak--speel:hover,
.rlb-vitrine-speel:hover,
.rlb-disco-actie--speel:hover {
  background: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}

/* De streep onder de kopbalk: een egale accentlijn. */
.rlb-header::after { background: var(--merk-accent, #E2000F); }

/* De overslaanlink pakt dezelfde knopkleur. */
.rlb-overslaan {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-overslaan:focus { color: var(--merk-op_accent, #FFFFFF); }

/* ========================================================================
   69. DE AFSLUITENDE BANNER MET FOTO
   ========================================================================
   Een foto over de volle breedte, met een verloop dat links zwart is en
   naar rechts opentrekt. Links staat de tekst — daar moet het donker zijn —
   en rechts mag de foto doorkomen, want daar staan alleen knoppen die hun
   eigen vlak meebrengen.

   De knoppen staan op EEN rij en verticaal op het midden van de tekst. Ze
   stonden als stapel rechtsboven, los van alles.
   ======================================================================== */

.rlb-cta-sectie--beeld { background: #000; }

.rlb-cta-achter { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.rlb-cta-achter picture { display: block; width: 100%; height: 100%; }
.rlb-cta-beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Ontkleurd: de foto is hier sfeer, de vraag is de boodschap. */
  filter: grayscale(.7) contrast(1.08);
}

/* Links dekkend zwart, naar rechts open. Vier stops in plaats van twee,
   anders zie je een harde band waar het verloop begint. */
.rlb-cta-sluier {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #000 0%,
    rgba(0, 0, 0, .96) 32%,
    rgba(0, 0, 0, .72) 58%,
    rgba(0, 0, 0, .30) 100%);
}

/* De glans en de groeven uit het merksysteem blijven, maar zachter: met een
   foto eronder zou vol er rommelig uitzien. */
.rlb-cta-sectie--beeld::after { opacity: .45; }
.rlb-cta-sectie--beeld::before { opacity: .5; }

.rlb-cta-sectie--beeld > .rlb-binnen { position: relative; z-index: 2; }

/* --- de knoppen op een rij, verticaal gecentreerd --- */

.rlb-cta { align-items: center; }
.rlb-cta .rlb-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--rlb-r3);
  grid-template-columns: none;
}
.rlb-cta .rlb-knop {
  width: auto;
  min-height: 52px;
  justify-content: center;
}
.rlb-cta .rlb-knop::after { margin-left: var(--rlb-r2); }

/* De twee rustige acties krijgen een doorzichtig vlak met een rand: op een
   foto heeft tekst zonder vlak te weinig houvast. */
.rlb-cta .rlb-knop--secundair,
.rlb-cta .rlb-knop--ghost {
  background: rgba(0, 0, 0, .45);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.rlb-cta .rlb-knop--secundair:hover,
.rlb-cta .rlb-knop--ghost:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 899px) {
  /* Op smal is er geen rechterkant meer: het verloop wordt van boven naar
     onder, anders staat de tekst op het lichte deel van de foto. */
  .rlb-cta-sluier {
    background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.92) 100%);
  }
  .rlb-cta .rlb-knoppen { justify-content: flex-start; }
}

/* ========================================================================
   70. DE UITGELICHTE BANNER ADEMT BOVEN EN ONDER GELIJK
   ========================================================================
   De schuine rand loopt bovenaan omhoog naar rechts en onderaan omlaag naar
   links. Daardoor heeft de LINKERkant bovenaan speling en de RECHTERkant
   niet — en de kaart staat rechts. Die plakte dus tegen de bovenrand terwijl
   er onder ruimte over was.

   Twee ingrepen. De helling is gehalveerd, want hoe schuiner de rand hoe
   groter het verschil tussen links en rechts. En de opvulling is ruim en
   expliciet gelijk, met de helling er aan beide kanten bovenop geteld in
   plaats van er doorheen te laten snijden.
   ======================================================================== */

:root { --rlb-helling: 1.6vw; }

.rlb-uit {
  /* De helling telt mee in de opvulling, niet eraf: daarmee is de ruimte
     die je ZIET boven en onder gelijk, ook op de kant waar de rand snijdt. */
  padding-top: calc(clamp(3.5rem, 6vw, 6rem) + var(--rlb-helling));
  padding-bottom: calc(clamp(3.5rem, 6vw, 6rem) + var(--rlb-helling));
  clip-path: polygon(
    0 var(--rlb-helling),
    100% 0,
    100% calc(100% - var(--rlb-helling)),
    0 100%);
}

/* De kaart en de koptekst staan allebei op het midden, zodat ze dezelfde
   hoogte delen — anders valt het verschil tussen de twee kolommen op. */
.rlb-uit-rij { align-items: center; }
.rlb-uit-kaart { align-self: center; }

@media (max-width: 860px) {
  :root { --rlb-helling: 0px; }
  .rlb-uit {
    clip-path: none;
    padding-block: clamp(var(--rlb-r7), 9vw, var(--rlb-r8));
  }
}

/* ========================================================================
   71. HET MOZAÏEK SLUIT AAN OP WAT ERONDER KOMT
   ========================================================================
   Tussen de onderste rij foto's en het grijze vlak eronder stond een witte
   strook: de onderruimte van de galerijsectie. Een mozaïek van rand tot
   rand hoort ook onderaan tegen zijn buurman aan te liggen, anders is het
   geen vlak maar een plaatje met een kader eromheen.
   ======================================================================== */

.rlb-galerij--mozaiek { padding-bottom: 0; }
.rlb-galerij--mozaiek + .rlb { padding-top: clamp(var(--rlb-r7), 6vw, var(--rlb-r8)); }

/* De rijen sluiten ook onderling aan: zonder deze regel houdt het laatste
   beeld de regelhoogte van zijn <li> over als witte naad. */
.rlb-galerij--mozaiek .rlb-galerij { line-height: 0; }
.rlb-galerij--mozaiek .rlb-galerij-item,
.rlb-galerij--mozaiek .rlb-galerij-link { display: block; font-size: 0; }

/* ========================================================================
   72. WITTE TEKST EN ICONEN IN DE KNOPPEN
   ========================================================================
   Dit blok redeneerde over het blauw van de vorige klant: wit haalde daar
   3.09:1 en moest het hebben van de WCAG-uitzondering voor GROTE tekst
   (18.66px vet of meer), vandaar 1rem in gewicht 800.

   Op het rood van Zwets haalt wit 4.95:1 en is die uitzondering niet meer
   nodig. De maat blijft wel staan: een knop die je van een afstand moet
   kunnen lezen is sowieso geen kleine letter.

   Het icoon en de pijl volgen de tekstkleur (currentColor en een masker),
   dus die worden vanzelf wit mee.
   ======================================================================== */

/* De kleurregels die hier stonden waren een kopie van sectie 68, met andere
   hover-kleuren. Twee plekken die hetzelfde proberen te zeggen gaan uit
   elkaar lopen; deze is weg. Wat blijft is de MAAT van de knoptekst, want
   daar hangt de WCAG-uitzondering hierboven aan. */
.rlb-knop { font-size: 1rem; font-weight: 800; }

/* Het icoon vooraan en de pijl achteraan erven de tekstkleur, dus die
   worden vanzelf wit. Expliciet vastgelegd zodat een latere regel ze niet
   per ongeluk terugzet. */
.rlb-knop--primair .rlb-icoon,
.rlb-zijtab-knop .rlb-icoon,
.rlb-speler-koop .rlb-icoon { color: currentColor; }

/* ========================================================================
   73. HET MOZAÏEK ALS NAADLOZE BAND
   ========================================================================
   Zonder kop erboven is het mozaïek geen sectie meer maar een band: grijs
   vlak, dan foto's van rand tot rand, dan weer grijs. Dat is rustiger dan
   een kop met witruimte eromheen, want het oog wordt niet onderbroken.

   Een galerij ZONDER titel krijgt dus geen enkele ruimte meer boven of
   onder. Een galerij mét titel houdt zijn normale opbouw.
   ======================================================================== */

/* :has() herkent een mozaïek zonder kopblok. */
.rlb-galerij--mozaiek:not(:has(.rlb-kop)) {
  padding-block: 0;
}
.rlb-galerij--mozaiek:not(:has(.rlb-kop)) + .rlb {
  padding-top: clamp(var(--rlb-r7), 6vw, var(--rlb-r8));
}

/* Terugval voor browsers zonder :has(): de bouwer zet dan nog steeds een
   leeg kopblok neer, dus we vangen het ook op de klasse af die de renderer
   erbij zet wanneer er geen titel is. */
.rlb-galerij--naadloos { padding-block: 0; }

@supports not selector(:has(*)) {
  .rlb-galerij--mozaiek { padding-block: 0; }
}

/* ========================================================================
   74. DE PREFOOTER: HOGER, BEELD OPGESCHOVEN, MET BEWEGING
   ========================================================================
   Drie dingen.

   1. HOGER. De banner was net zo hoog als een gewone sectie; als afsluiter
      van de pagina mag hij meer gewicht hebben.

   2. HET BEELD OPGESCHOVEN. De foto is staand (1920x2560) en Re-Lex staat
      LINKS in beeld — precies onder het donkerste deel van het verloop.
      Bij een staande foto in een breed vak doet object-position horizontaal
      niets: `cover` schaalt al op breedte. Daarom wordt hij ingezoomd en
      verschoven, zodat het paar in het lichtere rechterdeel valt.

   3. BEWEGING. Een trage inzoom op de achtergrond, een gloed die meeademt,
      en de tekst en knoppen die invliegen zodra de banner in beeld komt.
      Alles uit zodra iemand minder beweging wil.
   ======================================================================== */

.rlb-cta-sectie--beeld {
  padding-block: clamp(5rem, 11vw, 10rem);
  overflow: hidden;
}

/* --- het beeld --- */

.rlb-cta-beeld {
  object-position: center 34%;
  /* Inzoomen en naar rechts schuiven: bij een staande foto in een breed vak
     is dit de enige manier om het onderwerp te verplaatsen. */
  transform: scale(1.22) translateX(9%);
  transform-origin: center;
  /* Heel traag verder inzoomen zolang de banner in beeld is. */
  animation: rlb-ademzoom 26s ease-in-out infinite alternate;
}

@keyframes rlb-ademzoom {
  from { transform: scale(1.22) translateX(9%); }
  to   { transform: scale(1.32) translateX(6%); }
}

/* --- de gloed --- */

/* Twee zachte lichtvlekken in het merkblauw, die om en om zwellen. Dat
   geeft de band diepte zonder dat er iets knippert. */
.rlb-cta-sectie--beeld .rlb-cta-sluier::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 90% at 72% 18%,
      color-mix(in srgb, var(--merk-accent, #E2000F) 34%, transparent) 0%, transparent 62%),
    radial-gradient(36% 80% at 94% 86%,
      color-mix(in srgb, var(--merk-accent, #E2000F) 22%, transparent) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: rlb-gloed 11s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes rlb-gloed {
  from { opacity: .55; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(-2%, 1%, 0) scale(1.08); }
}

/* --- de inhoud vliegt in --- */

/* Niet via het algemene bewegingssysteem: daar vliegt alles van onderen in,
   en hier past een beweging van links naar rechts beter bij een band die
   je van links leest. De klasse wordt door rl.js gezet. */
.rlb-cta-sectie[data-rl-inbeeld="1"] .rlb-cta-titel,
.rlb-cta-sectie[data-rl-inbeeld="1"] .rlb-cta-tekst,
.rlb-cta-sectie[data-rl-inbeeld="1"] .rlb-cta .rlb-knop {
  opacity: 1;
  transform: none;
}
.rlb-cta-sectie .rlb-cta-titel,
.rlb-cta-sectie .rlb-cta-tekst,
.rlb-cta-sectie .rlb-cta .rlb-knop {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 620ms cubic-bezier(.2, .7, .3, 1),
              transform 620ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-cta-sectie .rlb-cta-tekst { transition-delay: 110ms; }
.rlb-cta-sectie .rlb-cta .rlb-knop:nth-child(1) { transition-delay: 210ms; }
.rlb-cta-sectie .rlb-cta .rlb-knop:nth-child(2) { transition-delay: 290ms; }
.rlb-cta-sectie .rlb-cta .rlb-knop:nth-child(3) { transition-delay: 370ms; }

/* Zonder JavaScript wordt data-rl-inbeeld nooit gezet; dan staat alles er
   gewoon. Nooit iets verbergen dat alleen een script kan terugbrengen. */
.rlb-cta-sectie:not([data-rl-inbeeld]) :where(.rlb-cta-titel, .rlb-cta-tekst, .rlb-cta .rlb-knop) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* De hoofdknop krijgt een zachte gloed die met de band meeademt. */
.rlb-cta-sectie .rlb-knop--primair {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent);
  animation: rlb-knopgloed 3.6s ease-in-out infinite;
}
@keyframes rlb-knopgloed {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--merk-accent, #E2000F) 50%, transparent); }
  50%      { box-shadow: 0 0 28px 2px color-mix(in srgb, var(--merk-accent, #E2000F) 45%, transparent); }
}
.rlb-cta-sectie .rlb-knop--primair:hover { animation: none; }

@media (max-width: 899px) {
  .rlb-cta-sectie--beeld { padding-block: clamp(3.5rem, 12vw, 6rem); }
  .rlb-cta-beeld { transform: scale(1.3) translateX(4%); animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-cta-beeld { animation: none; }
  .rlb-cta-sectie--beeld .rlb-cta-sluier::after { animation: none; opacity: .7; }
  .rlb-cta-sectie .rlb-knop--primair { animation: none; }
  .rlb-cta-sectie :where(.rlb-cta-titel, .rlb-cta-tekst, .rlb-cta .rlb-knop) {
    opacity: 1; transform: none; transition: none;
  }
}

/* ========================================================================
   75. ECHT GEEN RUIMTE MEER BOVEN HET MOZAÏEK
   ========================================================================
   Er stond nog een strook boven de fotoband. Niet van de galerij zelf — die
   staat op nul — maar van de regel uit deel 42 die ELKE sectie na een
   andere sectie extra bovenruimte geeft. Die telde er bovenop.
   ======================================================================== */

.rlb + .rlb.rlb-galerij--naadloos { padding-top: 0; margin-top: 0; }
.rlb-galerij--naadloos { margin-block: 0; border-block: 0; }

/* En de buurman erboven mag zijn onderruimte houden, maar niet nog een
   rand erbij: twee lijnen op elkaar leest als een naad. */
.rlb--vlak-vlak:has(+ .rlb-galerij--naadloos) { border-bottom: 0; }

/* ========================================================================
   76. DE KPI-BALK ADEMT ROND GELIJK
   ========================================================================
   Boven zat één ruimte (die van de sectie), onder zaten er twee: eerst de
   opvulling van de balk tot de scheidingslijn, en daarna nog eens de
   opvulling van de sectie eronder. Vandaar dat het onderaan zwaarder oogde.

   Nu doet alleen de SECTIE de ruimte, met dezelfde waarde boven en onder,
   en zit de scheidingslijn op de sectie zelf in plaats van op de balk. Dan
   valt de lijn samen met de onderrand en kan er niets meer tussen vallen.
   ======================================================================== */

:root { --rlb-kpi-ruimte: clamp(1.75rem, 4vh, 3rem); }

.rlb-band + .rlb {
  padding-top: var(--rlb-kpi-ruimte);
  padding-bottom: var(--rlb-kpi-ruimte);
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
}

/* De balk zelf heeft geen eigen ruimte en geen eigen lijn meer. */
.rlb-band + .rlb .rlb-feitbalk {
  padding-block: 0;
  border-block: 0;
  background: transparent;
  border-radius: 0;
}

/* De kolomscheidingen lopen van boven naar onder even ver door, zodat ze
   de hoogte van de balk markeren en niet die van de tekst. */
.rlb-band + .rlb .rlb-feitbalk-item + .rlb-feitbalk-item {
  border-left: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-band + .rlb .rlb-feitbalk-item { padding-block: var(--rlb-r1); }

@media (max-width: 700px) {
  .rlb-band + .rlb .rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 0; }
}

/* ========================================================================
   77. DE ZONE — MEERDERE SECTIES OP ÉÉN ACHTERGROND
   ========================================================================
   Een achtergrond hoort bij een <section>. Wilde je dezelfde video onder
   "Luister" én "Luister op jouw platform" door laten lopen, dan moest je hem
   twee keer laden en zag je de naad op de grens. De zone is het omhulsel dat
   dat oplost: één achtergrond, één sluier, de secties als kinderen erin.

   OVER DE LEESBAARHEID
   De sluier staat bewust licht (38%), want een video die je niet ziet is geen
   video. Dat alleen is niet genoeg voor witte tekst: op een lichte videoframe
   haalt wit op 38% zwart maar 1,9:1, en de norm is 4,5:1. Daarom krijgt de
   TEKST een eigen donkere waas (.rlb-kop::before) in plaats van de hele
   sectie. Op dezelfde lichte frame komt wit daarmee op ~9,5:1, terwijl het
   beeld in de open vlakken gewoon zichtbaar blijft. Dat is dezelfde keuze die
   Beatport en Kentha maken: dempen waar tekst staat, niet overal.
   ======================================================================== */

.rlb-zone {
  position: relative;
  isolation: isolate;
  background: #000;              /* valt nooit door naar wit */
}

.rlb-zone-achter {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  filter: grayscale(var(--rlb-zone-ontkleur, .2))
          brightness(var(--rlb-zone-helder, .82))
          contrast(1.05);
}
.rlb-zone-achter video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rlb-zone-achter--yt    { background: var(--rlb-ytposter) center / cover no-repeat, #000; }
.rlb-zone-achter--beeld { background: var(--rlb-zonebeeld) center / cover no-repeat, #000; }

/* De sluier. Boven en onder iets zwaarder, zodat de zone wegloopt in de
   secties ervoor en erna in plaats van als een losse lap te eindigen. */
.rlb-zone-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0, calc(var(--rlb-zone-sluier, .38) + .34)) 0%,
      rgba(0,0,0, var(--rlb-zone-sluier, .38)) 14%,
      rgba(0,0,0, var(--rlb-zone-sluier, .38)) 86%,
      rgba(0,0,0, calc(var(--rlb-zone-sluier, .38) + .34)) 100%);
}

.rlb-zone-binnen { position: relative; z-index: 1; }

/* ---- de secties binnenin worden doorzichtig -------------------------- */
/* Ze weten zelf niet dat ze in een zone staan en blijven los bruikbaar. */
.rlb-zone-binnen > .rlb,
.rlb-zone-binnen > .rlb-speler--vitrine,
.rlb-zone-binnen > .rlb--vlak-grond,
.rlb-zone-binnen > .rlb--vlak-vlak,
.rlb-zone-binnen > .rlb--vlak-paneel { background: transparent; }

.rlb-zone-binnen > .rlb::before { background: none; }

/* Tekst in een zone is altijd licht: de ondergrond is een video. */
.rlb-zone--media :where(h2, h3, h4, .rlb-titel) { color: #fff; }
.rlb-zone--media .rlb-intro,
.rlb-zone--media .rlb-speler-artiest { color: var(--rlb-op-donker-gedempt); }

/* Op de naad tussen twee secties staat de ruimte twee keer. Eén keer is
   genoeg; de indeling blijft verder zoals hij was.
   De selector draagt .rlb-zone mee omdat deel 42 hier met
   `.rlb + .rlb:not([class*=rlb--vlak-]):not(.rlb-footer)` op 0,4,0 zit — met
   alleen .rlb-zone-binnen eromheen verlies je dat gevecht. */
.rlb-zone .rlb-zone-binnen > .rlb + .rlb { padding-top: 0; }

/* ---- de waas achter de tekst ----------------------------------------- */
/* Loopt ruim buiten het tekstblok door, zodat je de rand niet ziet. */
.rlb-zone--media .rlb-kop {
  position: relative;
  isolation: isolate;
}
.rlb-zone--media .rlb-kop::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.75rem -9rem -2.25rem -4rem;
  /* Links naar rechts donker aflopend, want de tekst is linksuitgelijnd. Een
     radiaal verloop viel bij een brede kop al halverwege weg - daar stond
     "Luister op jouw platform" grijzig in een lichte paarse wolk. */
  background: linear-gradient(90deg,
                rgba(0,0,0,0) 0%,
                rgba(0,0,0,.92) 7%,    /* aanloop, anders zie je de linkerrand */
                rgba(0,0,0,.74) 52%,
                rgba(0,0,0,.30) 80%,
                rgba(0,0,0,0) 96%);
  /* Boven en onder uitvagen, anders zie je de rand van het vlak. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  pointer-events: none;
}

/* ---- de onderdelen die op het beeld staan ---------------------------- */
/* Tegels, trackregels en het vitrinepaneel krijgen hun eigen vlak, anders
   zweven ze in het beeld. */
.rlb-zone--media .rlb-stream-link {
  background: rgba(0, 0, 0, .62);
  border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rlb-zone--media .rlb-stream-link:hover {
  background: rgba(0, 0, 0, .78);
  border-color: var(--merk-accent, #E2000F);
}

.rlb-zone--media .rlb-speler-track {
  background: rgba(0, 0, 0, .52);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.rlb-zone--media .rlb-speler-track:hover { background: rgba(0, 0, 0, .72); }

.rlb-zone--media .rlb-vitrine-info {
  position: relative;
  isolation: isolate;
}
.rlb-zone--media .rlb-vitrine-info::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.5rem -3rem;
  background: radial-gradient(110% 130% at 10% 50%,
                rgba(0,0,0,.86) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}

/* Discografiekaarten: de hoes dekt zichzelf af, maar de titel, de meta en
   de omschrijving eronder staan kaal op de video. Een eigen vlak eronder
   houdt die leesbaar, ook als er net een lichte frame voorbijkomt. */
.rlb-zone--media .rlb-disco {
  background: rgba(0, 0, 0, .55);
  border-radius: var(--merk-radius_veld, 8px);
  padding: 0 0 var(--rlb-r4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.rlb-zone--media .rlb-disco-info,
.rlb-zone--media .rlb-disco-acties,
.rlb-zone--media .rlb-disco-over { padding-inline: var(--rlb-r4); }
.rlb-zone--media .rlb-disco-hoesvak { border-radius: var(--merk-radius_veld, 8px) var(--merk-radius_veld, 8px) 0 0; overflow: hidden; }

/* Een lijnknop op bewegend beeld leest als niets. Hij houdt zijn vorm, maar
   krijgt een eigen ondergrond zodat de letters blijven staan. */
.rlb-zone--media .rlb-knop--secundair {
  background: rgba(0, 0, 0, .6);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
.rlb-zone--media .rlb-knop--secundair:hover {
  background: rgba(0, 0, 0, .82);
  border-color: var(--merk-accent, #E2000F);
}

/* ---- terugvallen ------------------------------------------------------ */
/* Wie minder beweging wil krijgt het posterbeeld; rl.js plaatst de iframe
   dan niet. Dan mag de sluier lichter, want een stilstaand beeld leidt niet
   af zoals een lopende video. */
@media (prefers-reduced-motion: reduce) {
  .rlb-zone-achter video { display: none; }
}

@media (max-width: 760px) {
  /* Op smal scherm staat de tekst over de volle breedte, dus de waas ook. */
  .rlb-zone--media .rlb-kop::before { inset: -1.5rem -2rem; }
  .rlb-zone--media .rlb-vitrine-info::before { inset: -1rem -1.5rem; }
}

/* ------------------------------------------------------------------------
   77b. DE TITELBALK VAN YOUTUBE WEGSNIJDEN
   ------------------------------------------------------------------------
   Een ingesloten YouTube-video toont de eerste seconden zijn eigen titel en
   kanaalnaam over het beeld. Als achtergrond is dat onbruikbaar: er stond
   letterlijk "4K Abstract Liquid V-2 - Relaxation Time" boven de sectie
   Luister. `modestbranding=1` doet daar sinds 2023 niets meer aan.

   De enige manier die wél werkt is de iframe groter maken dan zijn vak, zodat
   die balk buiten beeld valt. 1.34 snijdt ruim 12% van de boven- en onderrand
   weg; de balk zit in de bovenste ~8% van een 16:9-frame.
   ------------------------------------------------------------------------ */

/* Alleen opschalen is niet genoeg: de oude maatvoering (100vw breed,
   56.25vw hoog, min-height 100%) rekent met het VENSTER en niet met het vak.
   In een zone van 1905x1621 werd de iframe daardoor 1905x1621 - geen 16:9
   meer, dus YouTube zette er zelf zwarte balken in en de titelbalk bleef
   netjes bovenaan staan.

   Met containereenheden klopt de rekensom wel: neem de breedte die nodig is
   om het vak te bedekken, houd 16:9 aan, en schaal dan nog 34% op om de
   titelbalk buiten de rand te duwen. */
.rlb-zone-achter { container-type: size; }

@supports (width: 1cqw) {
  .rlb-zone-achter .rlb-yt-achter {
    width: max(100cqw, calc(100cqh * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    min-width: 0;
    min-height: 0;
  }
}

.rlb-zone-achter .rlb-yt-achter,
.rlb-stream-achter .rlb-yt-achter {
  transform: translate(-50%, -50%) scale(1.34);
}

/* ========================================================================
   78. DE PAGINAKOP VAN DE VERVOLGPAGINA'S
   ========================================================================
   Elke vervolgpagina heeft dezelfde kop: foto over de volle breedte, links
   zwart en naar rechts open, met de titel, de regel eronder en de knoppen
   die bij het laden binnenkomen.

   WAAROM DE SLUIER EEN RICHTING HEEFT
   De tekst staat links. Een gelijkmatige waas over de hele foto maakt dan
   twee dingen tegelijk slechter: de letters krijgen niet genoeg ondergrond
   en de foto wordt onnodig dof. Met het verloop van links naar rechts zit
   het zwart waar de letters staan en blijft de foto rechts gewoon te zien.

   WAAROM DE ENTREE GEEN SCROLL-ONTHULLING IS
   De scroll-onthulling slaat alles over wat al in beeld staat, anders zie
   je een flikkering bij het laden. Een paginakop staat per definitie boven
   de vouw en kreeg daardoor nooit beweging. Dit is een eigen moment: bij het
   laden, één keer, van onder naar boven, met een trapje tussen de regels.
   ======================================================================== */

/* --- de sluier, drie richtingen --------------------------------------- */

.rlb-hero-sluier--links {
  background: linear-gradient(90deg,
    rgba(0,0,0, calc(var(--rlb-sluier, .62) + .26)) 0%,
    rgba(0,0,0, calc(var(--rlb-sluier, .62) + .12)) 26%,
    rgba(0,0,0, calc(var(--rlb-sluier, .62) * .62)) 58%,
    rgba(0,0,0, calc(var(--rlb-sluier, .62) * .22)) 82%,
    rgba(0,0,0, 0) 100%);
}
.rlb-hero-sluier--gelijk {
  background: rgba(0, 0, 0, var(--rlb-sluier, .62));
}
.rlb-hero-sluier--onder {
  background: linear-gradient(180deg,
    rgba(0,0,0, calc(var(--rlb-sluier, .62) * .55)) 0%,
    rgba(0,0,0, var(--rlb-sluier, .62)) 100%);
}

/* Onder de 860 staat de tekst over de volle breedte: dan moet de hele foto
   gedempt worden, anders valt het eind van een regel in het licht. */
@media (max-width: 860px) {
  .rlb-hero-sluier--links {
    background: linear-gradient(170deg,
      rgba(0,0,0, calc(var(--rlb-sluier, .62) + .18)) 0%,
      rgba(0,0,0, calc(var(--rlb-sluier, .62) + .08)) 70%,
      rgba(0,0,0, calc(var(--rlb-sluier, .62) + .14)) 100%);
  }
}

/* --- de entree -------------------------------------------------------- */
/* De verbergstand wordt door rl.js gezet. Staat JavaScript uit, dan staat
   het attribuut er niet en is de kop gewoon zichtbaar — nooit een lege
   pagina door een geblokkeerd script. */

.rlb-hero[data-rl-entree] :where(
  .rlb-hero-tekst > .rlb-kicker,
  .rlb-hero-titel,
  .rlb-hero-intro,
  .rlb-hero-tekst > .rlb-knoppen) {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
}

.rlb-hero[data-rl-entree="aan"] :where(
  .rlb-hero-tekst > .rlb-kicker,
  .rlb-hero-titel,
  .rlb-hero-intro,
  .rlb-hero-tekst > .rlb-knoppen) {
  opacity: 1;
  transform: none;
  transition: opacity .62s cubic-bezier(.2, .7, .3, 1) var(--rlb-entree, 0ms),
              transform .62s cubic-bezier(.2, .7, .3, 1) var(--rlb-entree, 0ms);
}

/* Het trapje. Vier stappen is genoeg: daarna gaat het van "aankomen" naar
   "wachten". */
.rlb-hero[data-rl-entree] .rlb-hero-tekst > .rlb-kicker  { --rlb-entree:  60ms; }
.rlb-hero[data-rl-entree] .rlb-hero-titel                { --rlb-entree: 150ms; }
.rlb-hero[data-rl-entree] .rlb-hero-intro                { --rlb-entree: 250ms; }
.rlb-hero[data-rl-entree] .rlb-hero-tekst > .rlb-knoppen { --rlb-entree: 350ms; }

/* Het beeld zelf komt mee: een heel klein beetje uitzoomen leest als
   aankomen zonder dat je de beweging aanwijst. */
.rlb-hero[data-rl-entree] .rlb-hero-achterbeeld {
  transform: scale(1.06);
  transition: transform 1.6s cubic-bezier(.2, .7, .3, 1);
}
.rlb-hero[data-rl-entree="aan"] .rlb-hero-achterbeeld { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .rlb-hero[data-rl-entree] :where(
    .rlb-hero-tekst > .rlb-kicker,
    .rlb-hero-titel,
    .rlb-hero-intro,
    .rlb-hero-tekst > .rlb-knoppen),
  .rlb-hero[data-rl-entree] .rlb-hero-achterbeeld {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- de knoppen in een paginakop -------------------------------------- */
/* Op een foto moet ook de lijnknop een eigen ondergrond hebben, anders leest
   hij als niets zodra er een licht stuk achter valt. */
.rlb-hero--achter .rlb-knoppen { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.rlb-hero--achter .rlb-knop--secundair {
  background: rgba(0, 0, 0, .42);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.rlb-hero--achter .rlb-knop--secundair:hover {
  background: rgba(0, 0, 0, .7);
  border-color: var(--merk-accent, #E2000F);
}

/* ========================================================================
   79. DRIE DINGEN DIE OP DE VERVOLGPAGINA'S MISGINGEN
   ======================================================================== */

/* --- 1. het boekingsformulier stond in een kolom van 340 pixels -------
   `rlb-boeker` zit op TWEE elementen: op de <section> (nxrl_sectie_open
   maakt van rl-boeker vanzelf rlb-boeker) en op de div erbinnen die de
   kalender naast het formulier zet. De rasterregel pakte ze allebei, dus
   kwam .rlb-binnen in de kalenderkolom terecht: 340 pixels breed, tegen de
   linkerrand, buiten de 1440.

   Het raster hoort alleen bij de binnenste div, en die is te herkennen aan
   zijn data-rl-module. De sectie wordt expliciet weer een gewoon blok. */

section.rlb-boeker {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* --- 2. de paginakop mag hoger -----------------------------------------
   Een kop van 6rem opvulling is een strook, geen kop. Met een ondergrens in
   beeldhoogte krijgt hij lucht op een groot scherm zonder op een laptop het
   hele venster op te eten. */

.rlb-hero--achter {
  padding-block: clamp(var(--rlb-r8), 11vw, 9rem);
  min-height: min(52vh, 520px);
  display: grid;
  align-content: center;
}
main > .rlb-hero--achter:first-child,
.rlb-kruimels + .rlb-hero--achter {
  padding-top: calc(var(--rlb-kopbalk-h) * .35 + clamp(var(--rlb-r8), 11vw, 9rem));
}

@media (max-width: 860px) {
  .rlb-hero--achter {
    padding-block: clamp(var(--rlb-r7), 12vw, var(--rlb-r9));
    min-height: 0;
  }
}

/* --- 3. de kruimelbalk hoorde bij de kop, niet ervoor -------------------
   Hij heeft nu dezelfde zwarte grond als de kop erachter en geen eigen
   ruimte eronder, zodat het één band is in plaats van twee stroken. */

.rlb-kruimels + .rlb-hero--achter { margin-top: 0; }
.rlb.rlb-kruimels { padding-bottom: 0; }

/* De knoppenrij viel buiten de 56ch van de tekstkolom en brak daardoor in
   twee regels zodra twee labels wat langer waren — op /verhuur/ stonden
   "Vraag een pakket aan" en "Neem contact op" onder elkaar. De kolom mag
   breder; de leesregels blijven kort doordat titel en intro hun eigen maat
   houden. */
.rlb-hero--achter .rlb-hero-tekst  { max-width: min(70ch, 100%); }
.rlb-hero--achter .rlb-hero-titel  { max-width: 18ch; }
.rlb-hero--achter .rlb-hero-intro  { max-width: 52ch; }
.rlb-hero--achter .rlb-knoppen     { flex-wrap: wrap; }

/* ========================================================================
   80. DE SECTIE IS GEEN RASTER — EEN NAAMBOTSING RECHTZETTEN
   ========================================================================
   nxrl_sectie_open('rl-faq') zet `rlb-faq` op de <section>. De renderer zet
   diezelfde naam óók op de div erbinnen die de vragen draagt. Negen blokken
   doen dat, en bij zes daarvan staat er layout op die naam:

     .rlb-faq       max-width: 80ch   -> de hele sectie werd 80 tekens breed
     .rlb-boeker    display: grid     -> .rlb-binnen belandde in de kolom van
                                         340px, tegen de linkerrand
     .rlb-stappen   display: grid
     .rlb-galerij   display: grid
     .rlb-logobalk  display: flex
     .rlb-share     display: flex

   Gevolg: de inhoud stond buiten de kolom van 1440, soms maar een paar
   honderd pixels breed. Op /dj-boeken/ was dat het boekingsformulier, op
   elke pagina met vragen de FAQ.

   De nette oplossing is de binnenste div hernoemen, maar die naam zit in
   tientallen CSS-regels én in rl.js. Hier wordt daarom de SECTIE expliciet
   weer een gewoon blok: `section.rlb-faq` weegt 0,1,1 en wint van de kale
   klasse, en de div erbinnen houdt al zijn regels.
   ======================================================================== */

section.rlb-boeker,
section.rlb-cta,
section.rlb-demo,
section.rlb-faq,
section.rlb-galerij,
section.rlb-logobalk,
section.rlb-merken,
section.rlb-pakketten,
section.rlb-share,
section.rlb-speler,
section.rlb-stappen,
section.rlb-upsell,
section.rlb-webcast,
section.rlb-agenda,
section.rlb-contact,
section.rlb-tekst {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  flex-wrap: nowrap;
  gap: 0;
  max-width: none;
  list-style: none;
}

/* De vragenlijst houdt zijn leesbreedte van 80 tekens, maar blijft LINKS
   uitgelijnd. Gecentreerd stond hij ingesprongen ten opzichte van de kop
   erboven, en dat las als een fout in plaats van als een keuze. */
.rlb-binnen > .rlb-faq { max-width: 80ch; margin-inline: 0; }

/* ========================================================================
   81. DE VERHUUR: PAKKETTEN, MEERPRIJZEN EN HET MERKFILTER
   ========================================================================
   Drie onderdelen die bij elkaar horen: het pakkettenoverzicht, de
   detailweergave van een pakket, en de dingen die je erbij kunt boeken.

   HET FILTER WERKT ZONDER JAVASCRIPT
   De merkenrij is een groep radioknoppen. Welke er aan staat bepaalt via
   :has() welke kaarten zichtbaar blijven. Geen script dat elementen
   weghaalt, dus zonder JavaScript staat alles er gewoon en is er niets wat
   kan breken. In een browser zonder :has() blijft simpelweg alles staan, en
   dat is de juiste terugval voor een filter.
   ======================================================================== */

/* --- het overzicht ---------------------------------------------------- */

.rlb-pakketten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(var(--rlb-r4), 2vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-pak { min-width: 0; position: relative; }

.rlb-pak-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  color: inherit;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.rlb-pak-link:hover {
  transform: translateY(-4px);
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 18px 40px -22px rgba(6, 36, 61, .55);
}
.rlb-pak-link:focus-visible { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: 3px; }

.rlb-pak-beeld {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rlb-pak-tekst {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r2);
  padding: clamp(var(--rlb-r4), 2vw, var(--rlb-r5));
  flex: 1 1 auto;
}
.rlb-pak-kicker {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}
.rlb-pak-naam { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.rlb-pak-cap {
  display: flex; align-items: center; gap: var(--rlb-r2);
  margin: 0; font-size: .9375rem; font-weight: 600;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pak-sam { margin: 0; color: var(--merk-gedempt, #696F77); }

.rlb-pak-kort { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--rlb-r1); }
.rlb-pak-kort li { display: flex; gap: var(--rlb-r2); align-items: flex-start; font-size: .9375rem; }
.rlb-pak-kort .rlb-icoon { flex: none; margin-top: var(--rlb-r1); color: var(--merk-accent, #E2000F); }

.rlb-pak-prijs {
  margin: auto 0 0;
  padding-top: var(--rlb-r2);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.375rem;
}
.rlb-pak-vanaf, .rlb-pak-per {
  font-family: var(--merk-font-tekst, inherit);
  font-weight: 500;
  font-size: .875rem;
  color: var(--merk-gedempt, #696F77);
}
/* "Prijs op aanvraag" is geen bedrag, dus hij krijgt ook niet het formaat
   van een bedrag. Anders leest hij als een getal dat ontbreekt. */
.rlb-pak-prijs--aanvraag {
  font-family: var(--merk-font-tekst, inherit);
  font-size: 1rem;
  font-weight: 600;
  color: var(--merk-gedempt, #696F77);
}

.rlb-pak-meer {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  font-weight: 700; color: var(--merk-accent_donker, #A50B00);
}
.rlb-pak-link:hover .rlb-pak-meer { text-decoration: underline; }

.rlb-pak-voet {
  margin: clamp(var(--rlb-r4), 2vw, var(--rlb-r5)) 0 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #696F77);
}

/* --- de merkpillen op een kaart --------------------------------------- */

.rlb-pak-merken {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r1);
  margin: 0; padding: 0; list-style: none;
}
.rlb-merk-pil--klein {
  padding: .2rem var(--rlb-r2);
  font-size: .75rem;
  letter-spacing: .04em;
}

/* --- de detailweergave ------------------------------------------------ */

.rlb-pakd {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.rlb-pakd > * { min-width: 0; }

.rlb-pakd-beeldvak { border-radius: var(--merk-radius_kaart, 10px); overflow: hidden; }
.rlb-pakd-beeld { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.rlb-pakd-info { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.rlb-pakd-groepkop {
  display: flex; align-items: center; gap: var(--rlb-r2);
  margin: 0 0 var(--rlb-r2);
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rlb-pakd-groepkop .rlb-icoon { color: var(--merk-accent, #E2000F); }
.rlb-pakd-lijst { margin: 0; padding-left: var(--rlb-r4); display: grid; gap: var(--rlb-r1); }
.rlb-pakd-lijst li { color: var(--merk-gedempt, #696F77); }

.rlb-pakd-noot,
.rlb-pakd-aanvraag {
  display: flex; gap: var(--rlb-r2); align-items: flex-start;
  margin: 0;
  padding: .85rem var(--rlb-r4);
  border-left: 3px solid var(--merk-accent, #E2000F);
  background: var(--merk-vlak, #F6F7F8);
  font-size: .9375rem;
}
.rlb-pakd-noot .rlb-icoon,
.rlb-pakd-aanvraag .rlb-icoon { flex: none; margin-top: .15rem; color: var(--merk-accent, #E2000F); }

/* --- de zijkolom met de prijzen --------------------------------------- */

.rlb-pakd-zij {
  position: sticky;
  top: calc(var(--rlb-kopbalk-h) + 1rem);
  display: grid;
  gap: var(--rlb-r4);
  padding: clamp(var(--rlb-r4), 2vw, var(--rlb-r5));
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
}
.rlb-pakd-cap {
  display: flex; align-items: center; gap: var(--rlb-r2);
  margin: 0; font-size: 1rem;
}
.rlb-pakd-cap .rlb-icoon { color: var(--merk-accent, #E2000F); }

.rlb-pakd-tabel { width: 100%; border-collapse: collapse; }
.rlb-pakd-caption {
  text-align: left;
  padding-bottom: var(--rlb-r2);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pakd-tabel th,
.rlb-pakd-tabel td {
  padding: var(--rlb-r2) 0;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  text-align: left;
  vertical-align: baseline;
}
.rlb-pakd-tabel td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.rlb-pakd-uitleg {
  display: block;
  font-weight: 400;
  font-size: .8125rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pakd-borg th, .rlb-pakd-borg td { border-bottom: 0; }
.rlb-pakd-voet { margin: 0; font-size: .8125rem; color: var(--merk-gedempt, #696F77); }
.rlb-pakd-knop { justify-content: center; }

@media (max-width: 1100px) {
  .rlb-pakd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rlb-pakd-zij { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .rlb-pakd { grid-template-columns: minmax(0, 1fr); }
}

/* --- de meerprijzen --------------------------------------------------- */

.rlb-upsell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--rlb-r3);
  margin: 0; padding: 0; list-style: none;
}
.rlb-ups { min-width: 0; position: relative; }
/* Het vinkje staat uit beeld maar blijft bereikbaar met het toetsenbord:
   display:none zou het uit de tabvolgorde halen. */
.rlb-ups-vink {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rlb-ups-label {
  display: grid;
  gap: var(--rlb-r1);
  height: 100%;
  padding: var(--rlb-r4);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rlb-ups-label:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-ups-vink:focus-visible + .rlb-ups-label {
  outline: 3px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
}
.rlb-ups-vink:checked + .rlb-ups-label {
  border-color: var(--merk-accent, #E2000F);
  box-shadow: inset 0 0 0 1px var(--merk-accent, #E2000F);
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 7%, var(--merk-grond, #FFFFFF));
}
.rlb-ups-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rlb-r2); }
.rlb-ups-naam { font-weight: 700; }
.rlb-ups-aantal { font-size: .75rem; color: var(--merk-gedempt, #696F77); white-space: nowrap; }
.rlb-ups-sam { font-size: .9375rem; color: var(--merk-gedempt, #696F77); }
.rlb-ups-prijs { font-weight: 700; }
.rlb-ups-eenheid { font-weight: 400; font-size: .8125rem; color: var(--merk-gedempt, #696F77); }
.rlb-ups-voet {
  display: flex; gap: var(--rlb-r2); align-items: flex-start;
  margin: var(--rlb-r4) 0 0; font-size: .9375rem; color: var(--merk-gedempt, #696F77);
}
.rlb-ups-voet .rlb-icoon { flex: none; margin-top: .15rem; color: var(--merk-accent, #E2000F); }

/* Aangevinkt krijgt ook een vinkje, niet alleen een kleur: een keuze die
   alleen aan kleur te zien is, is voor een deel van de bezoekers geen
   keuze die te zien is. */
.rlb-ups-vink:checked + .rlb-ups-label::after {
  content: "\2713";
  position: absolute;
  top: .55rem; right: .7rem;
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: #fff;
  font-size: .75rem;
}

/* --- het merkfilter --------------------------------------------------- */

.rlb-merken { display: flex; flex-wrap: wrap; gap: var(--rlb-r2); margin: 0; padding: 0; list-style: none; }
.rlb-merk-keuze { display: contents; }
.rlb-merk-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.rlb-merk-pil {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  padding: var(--rlb-r2) var(--rlb-r3);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
  background: var(--merk-grond, #FFFFFF);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.rlb-merk-pil--knop { cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.rlb-merk-pil--knop:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-merk-radio:focus-visible + .rlb-merk-pil {
  outline: 3px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
}
.rlb-merk-radio:checked + .rlb-merk-pil {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-merk-logo { display: block; height: 22px; width: auto; object-fit: contain; }

/* De miniatuurrij schuift met de pijlen ernaast; een zichtbare schuifbalk
   eronder is dan dubbelop en breekt de strakke rij. Hij blijft wel
   schuifbaar met een veegbeweging en met de pijltjestoetsen. */
.rlb-webcast-lijst {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rlb-webcast-lijst::-webkit-scrollbar { height: 0; width: 0; }

/* ========================================================================
   82. DE PAKKETTEN ALS LIJST
   ========================================================================
   Vier kaarten naast elkaar gaven op 1440 precies 280 pixels per pakket.
   Daar moesten een foto, een capaciteit, een samenvatting van twee zinnen,
   zes apparatuurregels, een prijs en zes merkpillen in. Elke regel brak af,
   en vier kolommen met afgebroken regels lezen niet als vier keuzes maar als
   een tabel die je moet ontcijferen.

   In de lijst heeft elk pakket de volle breedte: beeld vierkant links over
   de hele kaarthoogte, tekst ernaast met ruimte voor hele zinnen, en wat
   erin zit als een rij pillen op één regel.
   ======================================================================== */

.rlb-pakketten--lijst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--rlb-r4), 1.8vw, var(--rlb-r5));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rlb-paklijst {
  display: grid;
  /* Het beeld is vierkant, dus de kolom bepaalt ook de hoogte. Tussen 220 en
     300 blijft hij op elke breedte herkenbaar als foto en nooit een postzegel. */
  grid-template-columns: clamp(13.75rem, 22vw, 18.75rem) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  transition: border-color .28s, box-shadow .28s, transform .28s cubic-bezier(.2,.7,.3,1);
}
.rlb-paklijst:hover {
  transform: translateY(-3px);
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 18px 44px -26px rgba(6, 36, 61, .55);
}

/* Het beeldvak rekt mee met de tekst ernaast: align-self stretch is de
   standaard in een grid, en daardoor is de foto altijd even hoog als de
   kaart. De aspect-ratio op het vak houdt hem vierkant zolang de tekst
   korter is dan dat. */
/* Vierkant is hier de ONDERGRENS, niet de maat. Met `aspect-ratio: 1` stopte
   de foto op 300px terwijl de kaart 422px hoog was, en dan staat er een wit
   gat onder het beeld. Een pseudo-element duwt het vak op minstens zijn eigen
   breedte; is de tekst ernaast hoger, dan rekt het grid-item gewoon mee. */
.rlb-paklijst-beeldvak {
  position: relative;
  align-self: stretch;
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-paklijst-beeldvak::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.rlb-paklijst-beeld {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rlb-paklijst:hover .rlb-paklijst-beeld { filter: brightness(1.04); }

.rlb-paklijst-tekst {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r3);
  padding: clamp(1.25rem, 2.2vw, var(--rlb-r6));
}

.rlb-paklijst-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rlb-r4);
  flex-wrap: wrap;
}
.rlb-paklijst-naam {
  margin: .1rem 0 var(--rlb-r1);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
}
.rlb-paklijst-naam a { color: inherit; text-decoration: none; }
.rlb-paklijst-naam a:hover { color: var(--merk-accent_donker, #A50B00); }
.rlb-paklijst-naam a:focus-visible { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: 3px; }

.rlb-paklijst-prijs {
  margin: 0;
  flex: none;
  text-align: right;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* --- wat erin zit, als rij ------------------------------------------- */

.rlb-pak-inbegrepenrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r2);
  margin: 0;
  padding: var(--rlb-r4) 0 0;
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
  list-style: none;
}
.rlb-pak-inbegrepen-kop {
  margin-right: var(--rlb-r1);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pak-inbegrepen {
  padding: var(--rlb-r1) var(--rlb-r2);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F6F7F8);
  font-size: .8125rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-pak-inbegrepen--meer {
  background: transparent;
  color: var(--merk-gedempt, #696F77);
  font-weight: 700;
}

/* --- de voet met de knoppen ------------------------------------------- */

.rlb-paklijst-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r2);
  margin-top: auto;
  padding-top: var(--rlb-r4);
}
/* De merken staan achteraan op dezelfde regel als de knoppen, en schuiven
   naar rechts zolang daar plek is. Onder elkaar zouden ze een derde blok
   worden terwijl het bijschrift is. */
.rlb-paklijst-voet .rlb-pak-merken { margin-left: auto; }

@media (max-width: 860px) {
  .rlb-paklijst { grid-template-columns: minmax(0, 1fr); }
  /* Staand is vierkant te hoog: de foto duwt de tekst dan onder de vouw. */
  .rlb-paklijst-beeldvak::before { padding-top: 56.25%; }
  .rlb-paklijst-kop { flex-direction: column; gap: var(--rlb-r1); }
  .rlb-paklijst-prijs { text-align: left; }
  .rlb-paklijst-voet .rlb-pak-merken { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  .rlb-paklijst-voet .rlb-knop { flex: 1 1 100%; justify-content: center; }
}

/* ========================================================================
   83. HET LOSSE VIDEOBLOK
   ========================================================================
   De speler zelf (.rlb-video) bestond al voor de hero en de webcast; dit is
   alleen de omlijsting eromheen als zelfstandig blok.
   ======================================================================== */

.rlb-videoblok { margin: 0; }
.rlb-videoblok .rlb-video { width: 100%; }
.rlb-videoblok-bij {
  margin: var(--rlb-r3) 0 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #696F77);
}
/* Smal leest als een citaat, breed als een statement. Normaal is de
   kolombreedte van de pagina. */
.rlb-videoblok--smal .rlb-videoblok  { max-width: 46rem; }
.rlb-videoblok--breed .rlb-videoblok { max-width: none; }
.rlb-videoblok--breed .rlb-video     { border-radius: 0; border-inline: 0; }

/* ========================================================================
   84. "VIER KOLOMMEN" MOET OOK VIER KOLOMMEN BETEKENEN
   ========================================================================
   De Studio biedt bij een pluspuntenblok de keuze 2, 3 of 4 kolommen, maar
   de CSS deed `repeat(auto-fit, minmax(200px, 1fr))`. Dat zet geen vier
   kolommen neer; het zet er zoveel neer als er passen. Op /over-ybi/ met
   acht kaarten in een kolom van 1360px werden dat er ZES van 120 pixels,
   en dan breekt "Re-Lex Ibiza Records" af tot "Re-Lex Ibiza Record / s".

   auto-fit is prima voor een raster zonder keuze. Zodra er een veld
   "kolommen" naast staat is het een fout: de redacteur kiest iets en er
   gebeurt iets anders.

   Hieronder staat het aantal vast, met stappen naar beneden op smallere
   schermen. Die stappen zijn gekozen op de breedte waarop een kaart met een
   icoon links en twee regels tekst nog leesbaar is — rond de 250 pixels.
   ======================================================================== */

.rlb-usps--k2 .rlb-usp-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlb-usps--k3 .rlb-usp-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rlb-usps--k4 .rlb-usp-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .rlb-usps--k4 .rlb-usp-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rlb-usps--k3 .rlb-usp-raster,
  .rlb-usps--k4 .rlb-usp-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rlb-usps--k2 .rlb-usp-raster,
  .rlb-usps--k3 .rlb-usp-raster,
  .rlb-usps--k4 .rlb-usp-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Een woord dat niet past breekt liever af dan dat het de kolom uitrekt —
   maar pas als laatste redmiddel, en met een koppelteken zodat je ziet dat
   het een afbreking is en geen typfout. */
.rlb-usp-titel { overflow-wrap: break-word; hyphens: manual; }

/* Hetzelfde patroon bij de stappen: zes stappen werden vijf kolommen plus
   een weesje op de tweede regel. Drie is hier de bovengrens, want een stap
   heeft een nummer, een kop en twee regels uitleg. */
.rlb-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rlb-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rlb-stappen { grid-template-columns: minmax(0, 1fr); } }

/* ========================================================================
   85. HET DEMOBLOK — DE OPMAAK DIE ER NOOIT KWAM
   ========================================================================
   De HTML van dit blok is destijds gebouwd (tekst links, formulier rechts,
   met een puntenlijst ertussen) maar er is nooit CSS bij geschreven. Het
   gevolg stond op /ybi-records/: alles onder elkaar in één kolom, met
   dubbele opsommingstekens — een bolletje van de browser én het vinkje dat
   de renderer erin zet.

   Dat is precies het soort fout dat je niet ziet in de code en wel op de
   pagina: beide helften klopten, alleen bestond de verbinding niet.
   ======================================================================== */

.rlb-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--rlb-r5), 4vw, 3.5rem);
  align-items: start;
}
.rlb-demo > * { min-width: 0; }

/* --- de linkerhelft: waarom je zou insturen ---------------------------- */

.rlb-demo-tekst { display: grid; gap: var(--rlb-r4); }
.rlb-demo-tekst .rlb-kop { margin-bottom: 0; }

/* Geen browserbolletje: er staat al een vinkje in. Twee markeringen voor
   één punt leest als een fout, en dat was het ook. */
.rlb-demo-punten {
  display: grid;
  gap: var(--rlb-r2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-demo-punten li {
  display: flex;
  align-items: flex-start;
  gap: var(--rlb-r2);
  font-weight: 600;
}
.rlb-demo-punten .rlb-icoon {
  flex: none;
  margin-top: var(--rlb-r1);
  color: var(--merk-accent, #E2000F);
}

.rlb-demo-mail { margin: 0; color: var(--merk-gedempt, #696F77); }
.rlb-demo-mail a { font-weight: 600; }

/* De afsluiter is de reden om op verzenden te drukken; die mag zwaarder
   wegen dan de rest van de alinea's. */
.rlb-demo-slot {
  margin: var(--rlb-r1) 0 0;
  padding-left: var(--rlb-r4);
  border-left: 3px solid var(--merk-accent, #E2000F);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* --- de rechterhelft: het formulier als kaart -------------------------- */

.rlb-demo-vak {
  padding: clamp(1.25rem, 2.4vw, var(--rlb-r6));
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 18px 44px -32px rgba(6, 36, 61, .45);
}
/* In een vlakke sectie zou een witte kaart op wit verdwijnen; daar krijgt
   hij de lichte grond en blijft de rand het verschil maken. */
.rlb--vlak-vlak .rlb-demo-vak,
.rlb--vlak-grond .rlb-demo-vak { background: var(--merk-grond, #FFFFFF); }

.rlb-demo-vak .rlb-demo-formulier { gap: var(--rlb-r4); }

@media (max-width: 900px) {
  .rlb-demo { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   86. DRIE RELEASES IN EEN RASTER VAN VIER
   ========================================================================
   `repeat(4, 1fr)` met drie platen erin laat een kwart van de rij leeg, en
   dat leest als een ontbrekende plaat in plaats van als een keuze. Met
   auto-fit en een maximum van vier vullen ze de breedte die er is: drie
   worden er drie, vijf worden er vier plus een.
   ======================================================================== */

.rlb-discografie--raster .rlb-disco-lijst {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
/* Boven de vier zou een plaat te smal worden voor zijn eigen titel. */
@media (min-width: 1200px) {
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
}
@media (max-width: 640px) {
  .rlb-discografie--raster .rlb-disco-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* De knoppenrij onder een plaat kreeg bij de ene twee knoppen en bij de
   andere geen. Een vaste minimumhoogte houdt de kaarten gelijk zonder dat
   er een lege knop bij hoeft. */
.rlb-disco-acties { min-height: 2.5rem; align-items: flex-end; }

/* Een pijl die nergens heen kan staat uit. Zonder dit zie je geen verschil
   tussen "einde van de rij" en "stuk" — en dat laatste was het ook: de
   knoppen hadden geen enkele luisteraar en deden dus nooit iets. */
.rlb-carrousel-knop[disabled],
.rlb-carrousel-knop[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ========================================================================
   87. DE MOBIELE KOPBALK EN HET OFF-CANVASMENU
   ========================================================================
   GEMETEN OP 402px VOOR DEZE WIJZIGING
     .rlb-header-acties   zichtbaar, 186px breed          (hoorde weg te zijn)
     .rlb-mobiel          op regel twee, y=70             (hoorde ernaast)
     paginabreedte        449px op een scherm van 402     (liep over)

   De oorzaak zat niet in de mediaquery maar erna: op regel 4537 staat
   `.rlb-header-acties { display: flex }` zonder query. Gelijk gewicht, later
   in het bestand. Dit deel staat achteraan en wint daarom wel.
   ======================================================================== */

@media (max-width: 1023px) {

  /* --- de balk: logo links, burger rechts, één regel ------------------ */
  .rlb-header .rlb-header-rij {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: var(--rlb-r4);
    min-height: 68px;
  }
  .rlb-header .rlb-nav,
  .rlb-header .rlb-header-acties { display: none; }
  .rlb-header .rlb-mobiel { display: block; justify-self: end; margin-inline-start: 0; }
  .rlb-logo { height: 46px; }

  /* --- de knop zelf -------------------------------------------------- */
  .rlb-mobiel > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--rlb-r2);
    padding: var(--rlb-r2) var(--rlb-r3);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--merk-radius_knop, 30px);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8125rem;
    list-style: none;
  }
  .rlb-header[data-rl-gescrold="1"] .rlb-mobiel > summary {
    border-color: var(--merk-lijn, #E8EAEC);
    color: var(--merk-inkt, #1A1D21);
  }

  /* De drie streepjes worden een kruis zodra het menu open staat: dan weet
     je zonder tekst dat dezelfde knop hem ook sluit. */
  .rlb-burger,
  .rlb-burger::before,
  .rlb-burger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 220ms ease, opacity 160ms ease;
  }
  .rlb-burger { position: relative; }
  .rlb-burger::before,
  .rlb-burger::after { content: ""; position: absolute; left: 0; }
  .rlb-burger::before { top: -6px; }
  .rlb-burger::after  { top: 6px; }
  .rlb-mobiel[open] .rlb-burger { background: transparent; }
  .rlb-mobiel[open] .rlb-burger::before { transform: translateY(6px) rotate(45deg); }
  .rlb-mobiel[open] .rlb-burger::after  { transform: translateY(-6px) rotate(-45deg); }

  /* --- het paneel: van rechts in beeld -------------------------------- */
  /* <details> verbergt zijn inhoud zelf als hij dicht is, maar een eigen
     `display: flex` overschrijft dat. Gevolg: het paneel stond er altijd,
     38 pixels buiten beeld, en de pagina was 449 breed op een scherm van
     402. Daarom eerst expliciet dicht, en pas opmaak bij [open]. */
  .rlb-mobiel:not([open]) .rlb-mobiel-nav { display: none; }

  .rlb-mobiel[open] .rlb-mobiel-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(21rem, 86vw);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: var(--rlb-r1);
    padding: calc(68px + 1.25rem) var(--rlb-r5) var(--rlb-r6);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--merk-inkt, #1A1D21);
    border-left: 1px solid rgba(255, 255, 255, .12);
    box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .9);
    /* De animatie zit op het OPENEN. <details> verbergt zijn inhoud als hij
       dicht is, dus een sluitanimatie zou een extra laag JavaScript kosten
       voor iets wat niemand mist: je kijkt bij het sluiten naar de pagina
       eronder, niet naar het paneel. */
    animation: rlb-inschuiven 300ms cubic-bezier(.2, .7, .3, 1) both;
  }
  @keyframes rlb-inschuiven {
    from { opacity: 0; transform: translateX(14%); }
    to   { opacity: 1; transform: none; }
  }

  /* De waas erachter: zonder die laag lijkt het paneel op de pagina te
     liggen in plaats van erboven, en blijf je doorlezen wat eronder staat. */
  /* GEMETEN FOUT: de waas stond als ::after op de SUMMARY, en die summary
     kreeg z-index 130. Een pseudo-element zit in de stapelcontext van zijn
     eigen element, dus die waas lag op 130 — bovenóp het menu (120). Je zag
     de links wel maar kon ze niet aanklikken; alleen de knop onderaan deed
     het, omdat die toevallig buiten het bedekte vlak viel.

     De waas hoort bij de <details> zelf, niet bij de knop erin. */
  .rlb-mobiel[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: rlb-waas 260ms ease both;
  }
  @keyframes rlb-waas { from { opacity: 0; } to { opacity: 1; } }
  .rlb-mobiel[open] > summary { position: relative; z-index: 130; }

  .rlb-mobiel[open] .rlb-mobiel-nav ul { margin: 0; padding: 0; list-style: none; }
  .rlb-mobiel-nav li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
  .rlb-mobiel-nav .rlb-navlink {
    display: block;
    padding: var(--rlb-r4) 0;
    color: #fff;
    font-family: var(--merk-font-kop, inherit);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: .02em;
  }
  .rlb-mobiel-nav .rlb-navlink--actief { color: var(--merk-accent, #E2000F); }

  /* --- de acties onderin het paneel ----------------------------------- */
  .rlb-mobiel-acties {
    display: grid;
    gap: var(--rlb-r2);
    margin-top: auto;
    padding-top: var(--rlb-r5);
  }
  .rlb-mobiel-acties .rlb-knop { justify-content: center; width: 100%; }
  .rlb-mobiel-acties .rlb-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rlb-r2);
    padding: .7rem var(--rlb-r4);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--merk-radius_knop, 30px);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
  }
}

/* Onder de 380 wordt het paneel bijna het hele scherm; dan mag de rand weg. */
@media (max-width: 380px) {
  .rlb-mobiel-nav { width: 100vw; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-mobiel-nav,
  .rlb-mobiel[open] > summary::after { animation: none; }
  .rlb-burger, .rlb-burger::before, .rlb-burger::after { transition: none; }
}

/* ========================================================================
   88. DE PAGINA SCHUIFT NOOIT ZIJWAARTS
   ========================================================================
   GEMETEN op 402px: documentElement.scrollWidth = 449 terwijl geen enkel
   element verder reikt dan 404. Ik heb de hele boom nagelopen — de keten
   liep via .rlb-zone naar .rlb-speler, maar binnen die sectie is niets
   breder dan het scherm en ook de golfvorm-SVG niet. Spookoverloop dus,
   vermoedelijk uit een pseudo-element of een afronding.

   `clip` en niet `hidden`: hidden maakt van body een scrollcontainer en
   daarmee sneuvelt `position: sticky` op de kopbalk. clip knipt alleen af.
   ======================================================================== */

html { overflow-x: clip; }
body { overflow-x: clip; }

/* Terugval voor browsers zonder overflow:clip (Safari < 16). Daar is hidden
   het enige dat werkt; de kopbalk valt daar terug op static-gedrag. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* ========================================================================
   89. OPRUIMEN NA DE PAKKETTEN
   ========================================================================
   Boven de pakketten klopt het; daaronder liep het uit elkaar. Drie
   oorzaken, alle drie hetzelfde soort fout: inhoud die de vorm bepaalt in
   plaats van andersom.
   ======================================================================== */

/* --- 1. de meerprijskaarten waren ongelijk ---------------------------- */
/* .rlb-ups-label was een grid met automatische rijen. Een kaart met twee
   regels tekst werd daardoor korter dan een met vier, en de prijs stond bij
   elke kaart op een andere hoogte. Als kolom met een automatische marge
   boven de prijs staan ze allemaal gelijk. */
.rlb-upsell { grid-auto-rows: 1fr; }
.rlb-ups-label {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r2);
  padding: var(--rlb-r4);
}
.rlb-ups-naam { font-size: 1rem; line-height: 1.3; }
.rlb-ups-sam {
  font-size: .875rem;
  line-height: 1.5;
  /* De langste samenvatting bepaalde de hoogte van de hele rij. Drie regels
     is genoeg om te snappen wat het is; de rest staat op de detailpagina. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rlb-ups-prijs {
  font-size: .8125rem;
}
.rlb-ups-label .rlb-pak-merken { margin-top: .15rem; }
.rlb-ups-aantal {
  padding: .1rem var(--rlb-r2);
  border-radius: 999px;
  background: var(--merk-vlak, #F6F7F8);
  font-weight: 600;
}

/* --- 2. de voetnoot plakte onder de kaarten --------------------------- */
.rlb-pak-voet,
.rlb-ups-voet {
  max-width: 68ch;
  margin-top: clamp(1.25rem, 2.5vw, var(--rlb-r6));
  padding-top: var(--rlb-r4);
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
  font-size: .875rem;
  line-height: 1.6;
}

/* --- 3. te veel wit tussen de blokken na de pakketten ----------------- */
/* Drie korte secties achter elkaar (meerprijzen, tekst, video) kregen elk de
   volle sectieruimte. Samen las dat als drie losse pagina's in plaats van
   één onderwerp. */
.rlb-upsell-sectie + .rlb,
.rlb-pakketten-sectie + .rlb { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* --- 4. de kop van een korte sectie stond te los ---------------------- */
.rlb-upsell .rlb-kop,
.rlb-videoblok .rlb-kop { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

@media (max-width: 560px) {
  .rlb-upsell { grid-auto-rows: auto; }
  .rlb-ups-sam { -webkit-line-clamp: 4; }
}

/* ========================================================================
   90. DE DETAILPAGINA VAN EEN PAKKET
   ========================================================================
   Drie dingen liepen uit de pas, alle drie omdat de kolommen en kaarten hun
   hoogte van hun eigen inhoud kregen in plaats van van hun buren.
   ======================================================================== */

/* --- 1. onder de foto stond een gat van bijna 200 pixels -------------- */
/* De drie kolommen hadden `align-items: start`, dus elke kolom eindigde waar
   zijn eigen inhoud ophield. De foto was de kortste en liet een wit vlak
   achter. Hij blijft nu meelopen terwijl je langs de specificaties leest —
   dat is ook waar je naar wilt kijken terwijl je die lijst doorneemt. */
.rlb-pakd-beeldvak {
  position: sticky;
  top: calc(var(--rlb-kopbalk-h) + 1rem);
}
.rlb-pakd-beeld { aspect-ratio: 3 / 4; }

@media (max-width: 1100px) {
  .rlb-pakd-beeldvak { position: static; }
  .rlb-pakd-beeld { aspect-ratio: 4 / 3; }
}

/* --- 2. de merkpillen zweefden los onder de tekst --------------------- */
.rlb-pakd-info > .rlb-pak-merken {
  margin-top: var(--rlb-r1);
  padding-top: var(--rlb-r4);
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
/* De noot hoort bij de lijst erboven, niet als los blokje ertussen. */
.rlb-pakd-noot { margin-top: -.25rem; }

/* --- 3. de vier kaarten onderaan waren rafelig ------------------------ */
/* Elke kaart had een andere lijstlengte, dus "Bekijk dit pakket" stond op
   vier verschillende hoogtes — gemeten: 1586, 1566, 1606 en 1575. Met
   gelijke rijhoogtes en een automatische marge boven prijs en link staan ze
   op één lijn. */
.rlb-pakketten--raster { grid-auto-rows: 1fr; }
.rlb-pakketten--raster .rlb-pak-tekst { display: flex; flex-direction: column; }
.rlb-pakketten--raster .rlb-pak-kort {
  /* Vijf regels is de grens waarop vier kaarten naast elkaar nog te
     vergelijken zijn; wat erbuiten valt staat op de eigen detailpagina. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rlb-pakketten--raster .rlb-pak-sam {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rlb-pakketten--raster .rlb-pak-prijs { margin-top: auto; }
.rlb-pakketten--raster .rlb-pak-merken { min-height: 3.1rem; align-content: start; }
.rlb-pakketten--raster .rlb-pak-meer { margin-top: var(--rlb-r1); }

/* --- 4. de zijkaart met de prijs was krap ----------------------------- */
.rlb-pakd-zij { gap: var(--rlb-r4); }
.rlb-pakd-aanvraag { line-height: 1.55; }
.rlb-pakd-voet { padding-top: var(--rlb-r1); border-top: 1px solid var(--merk-lijn, #E8EAEC); }

/* ========================================================================
   91. DE MEERPRIJZEN ZIEN ER NU UIT ALS KEUZES
   ========================================================================
   Het waren negen tekstvakjes waarvan niets verraadde dat je ze kunt
   aanvinken: het vinkje verscheen pas ná het klikken. Dat is de verkeerde
   volgorde — een keuze moet eruitzien als een keuze voordat je hem maakt.
   ======================================================================== */

.rlb-ups-label {
  position: relative;
  padding-left: var(--rlb-r7);          /* ruimte voor het rondje */
  transition: border-color .2s, background .2s, transform .2s;
}

/* Het rondje staat er ALTIJD. Leeg betekent "kan aan", gevuld "staat aan". */
.rlb-ups-label::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--merk-lijn, #E8EAEC);
  border-radius: 6px;
  background: #fff;
  transition: border-color .2s, background .2s;
}
.rlb-ups-label:hover::before { border-color: var(--merk-accent, #E2000F); }

.rlb-ups-vink:checked + .rlb-ups-label::before {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-accent, #E2000F);
}
/* Het vinkje zelf: het oude ::after stond rechtsboven als los bolletje.
   Nu zit hij ín het rondje, waar je hem verwacht. */
.rlb-ups-vink:checked + .rlb-ups-label::after {
  content: "";
  position: absolute;
  left: 1.52rem;
  top: 1.45rem;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background: none;
  border-radius: 0;
}
.rlb-ups-vink:checked + .rlb-ups-label { transform: translateY(-2px); }

/* --- hiërarchie in de kaart ------------------------------------------ */
.rlb-ups-kop { align-items: flex-start; }
.rlb-ups-naam { font-family: var(--merk-font-kop, inherit); font-size: 1.0625rem; }
.rlb-ups-aantal {
  flex: none;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  background: #fff;
  color: var(--merk-gedempt, #696F77);
}
/* De prijs was dezelfde grijze tekst als de rest. Als chip is hij in één
   oogopslag te vinden, en dat is waar iemand naar zoekt. */
.rlb-ups-prijs {
  align-self: flex-start;
  padding: var(--rlb-r1) .6rem;
  border-radius: 999px;
  background: var(--merk-vlak, #F6F7F8);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-ups-vink:checked + .rlb-ups-label .rlb-ups-prijs {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}

@media (prefers-reduced-motion: reduce) {
  .rlb-ups-label, .rlb-ups-vink:checked + .rlb-ups-label { transition: none; transform: none; }
}

/* ========================================================================
   92. TEKSTSECTIES VULLEN DE BREEDTE
   ========================================================================
   De vragen, de lopende tekst en de verwijzingen stonden alle drie in de
   linkerhelft met een lege rechterhelft ernaast. Per blok is dat te
   verdedigen — een leesregel mag niet 1440 pixels breed zijn — maar vier
   van die blokken onder elkaar maakt van een pagina een smalle kolom met
   een leeg veld ernaast.

   De oplossing is niet de tekst breder maken maar de KOP ernaast zetten:
   kop en intro links, inhoud rechts. De leesregel blijft kort, de pagina
   is gevuld, en je ziet in één oogopslag waar een blok over gaat terwijl je
   de inhoud leest.
   ======================================================================== */

@media (min-width: 1024px) {
  section.rlb-faq > .rlb-binnen,
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen,
  section.rlb-gerelateerd > .rlb-binnen {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: clamp(var(--rlb-r6), 5vw, var(--rlb-r8));
    align-items: start;
  }

  /* De kop blijft staan terwijl je langs de inhoud scrollt. Bij een lijst
     van tien vragen weet je dan halverwege nog waar je bent. */
  section.rlb-faq > .rlb-binnen > .rlb-kop,
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen > .rlb-kop,
  section.rlb-gerelateerd > .rlb-binnen > .rlb-kop {
    position: sticky;
    top: calc(var(--rlb-kopbalk-h) + 1.5rem);
    margin-bottom: 0;
  }

  /* Alles behalve de kop gaat naar de rechterkolom en vult hem. */
  section.rlb-faq > .rlb-binnen > *:not(.rlb-kop),
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen > *:not(.rlb-kop),
  section.rlb-gerelateerd > .rlb-binnen > *:not(.rlb-kop) {
    grid-column: 2;
  }

  /* De vragenlijst mocht 80 tekens; in de rechterkolom is dat precies goed
     en hoeft de beperking er niet meer bovenop. */
  .rlb-binnen > .rlb-faq { max-width: none; }

  /* Een lopende tekst houdt wél zijn leesbreedte: 75 tekens is de grens
     waarboven je oog de volgende regel niet meer terugvindt. */
  section.rlb-tekst:not(.rlb-tekst--met-kaart) .rlb-tekst-rij,
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen > p { max-width: 75ch; }
}

/* ========================================================================
   93. DE MEERPRIJSKAARTEN — DE BADGE KNEEP DE NAAM PLAT
   ========================================================================
   GEMETEN op 1440px: de badge "4x beschikbaar" stond als flex-buur naast de
   naam in een rij met space-between. De badge is flex:none, dus wat er
   overblijft is voor de naam — en dat was te weinig. "CO₂-kanon" brak in
   twee regels, "Full colour laser" in drie, en bij Confettishooter viel de
   badge van de kaart af.

   De naam krijgt nu de volle regel en de badge gaat naar de voet, naast de
   prijs. Daar is ruimte, en daar hoort hij ook: beschikbaarheid en prijs
   zijn allebei "wat kost het en kan het", geen onderdeel van de naam.
   ======================================================================== */

.rlb-ups-kop { display: block; }
.rlb-ups-naam {
  display: block;
  /* Geen afbreking midden in een woord, maar ook niet buiten de kaart. */
  overflow-wrap: break-word;
  hyphens: manual;
}

/* --- de voet: prijs, beschikbaarheid en merk op één regel ------------ */
/* Stonden onder elkaar, dus een kaart mét merkpil werd hoger dan een
   zonder en eindigden de prijschips op vier verschillende hoogtes. */
.rlb-ups-label {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--rlb-r2);
}
.rlb-ups-sam { align-self: start; }

.rlb-ups-voetrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r2);
  margin-top: 0;
  padding-top: var(--rlb-r2);
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-ups-voetrij .rlb-pak-merken { margin: 0; padding: 0; border: 0; }
.rlb-ups-voetrij { margin-top: auto; }

/* De badge hoort nu bij de prijs, niet bij de naam. */
.rlb-ups-aantal {
  order: 2;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .rlb-ups-aantal { margin-left: 0; order: 0; }
}

/* ========================================================================
   94. DE MEERPRIJZEN ALS ECHTE KEUZELIJST
   ========================================================================
   Negen items in een raster van vijf geeft een volle rij en daarna een
   rafelige rij van vier. Negen past precies in 3x3 — dat alleen al haalt de
   rommeligheid eruit. En negen witte vakjes met alleen tekst lezen als een
   opsomming; met een beeldmerk per regel herken je ze uit je ooghoek en
   wordt het een lijst waar je uit kiest.
   ======================================================================== */

.rlb-upsell {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rlb-r3);
}
@media (max-width: 900px) { .rlb-upsell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rlb-upsell { grid-template-columns: minmax(0, 1fr); } }

/* --- de kaart: icoon, naam, uitleg, voet ----------------------------- */
.rlb-ups-label {
  grid-template-rows: auto 1fr auto;
  gap: var(--rlb-r2);
  padding: var(--rlb-r4) var(--rlb-r4) var(--rlb-r4) var(--rlb-r7);
}
.rlb-ups-kop { display: flex; align-items: center; gap: var(--rlb-r2); }
.rlb-ups-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 10%, var(--merk-grond, #FFFFFF));
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-ups-vink:checked + .rlb-ups-label .rlb-ups-ico {
  background: var(--merk-accent, #E2000F);
  color: #fff;
}
.rlb-ups-naam { font-size: 1rem; line-height: 1.25; }
.rlb-ups-sam { -webkit-line-clamp: 2; font-size: .8438rem; }

/* Het aanvinkrondje stond op 1.15rem van boven, naast de naam; met een
   icoon ernaast hoort hij op dezelfde hooglijn als dat icoon. */
.rlb-ups-label::before { top: 1.38rem; left: 1.1rem; }
.rlb-ups-vink:checked + .rlb-ups-label::after { top: 1.68rem; left: 1.52rem; }

.rlb-ups-voetrij { padding-top: var(--rlb-r2); }
.rlb-ups-prijs { font-size: .78rem; padding: var(--rlb-r1) var(--rlb-r2); }
.rlb-ups-aantal { font-size: .7rem; }
.rlb-ups-voetrij .rlb-merk-pil--klein { font-size: .7rem; padding: var(--rlb-r1) var(--rlb-r2); }

/* De hele kaart reageert, niet alleen de rand: dat maakt zichtbaar dat je
   er iets mee kunt voordat je hem aanraakt. */
.rlb-ups-label:hover {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 4%, var(--merk-grond, #FFFFFF));
  box-shadow: 0 10px 24px -18px rgba(6, 36, 61, .5);
}

/* ========================================================================
   95. HET AANVRAAGFORMULIER IN EEN POPUP
   ========================================================================
   Een <dialog> en geen eigen div: Esc sluiten, focus vasthouden, de
   achtergrond onbereikbaar maken en terugspringen naar de knop waarmee je
   hem opende zitten er al in. Zelf nabouwen is vier dingen onderhouden die
   de browser beter doet.
   ======================================================================== */

.rlb-popup {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(88vh, 54rem);
  padding: 0;
  border: 0;
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  box-shadow: 0 40px 90px -40px rgba(6, 36, 61, .7);
  overflow: visible;
}
.rlb-popup::backdrop {
  background: rgba(6, 20, 32, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Infaden. @starting-style is de nette weg: de dialog gaat van display:none
   naar display:block, en zonder dat regeltje slaat de browser de overgang
   over omdat er geen beginstand is om vanaf te animeren. */
.rlb-popup, .rlb-popup::backdrop { opacity: 0; transition: opacity .26s ease, transform .26s cubic-bezier(.2,.7,.3,1), overlay .26s allow-discrete, display .26s allow-discrete; }
.rlb-popup { transform: translateY(12px) scale(.985); }
.rlb-popup[open] { opacity: 1; transform: none; }
.rlb-popup[open]::backdrop { opacity: 1; }
@starting-style {
  .rlb-popup[open] { opacity: 0; transform: translateY(12px) scale(.985); }
  .rlb-popup[open]::backdrop { opacity: 0; }
}

.rlb-popup-binnen { padding: clamp(1.5rem, 3vw, 2.25rem); overflow-y: auto; max-height: inherit; }
.rlb-popup-vak { position: absolute; top: .55rem; right: .55rem; margin: 0; }
.rlb-popup-sluit {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.rlb-popup-sluit:hover { background: var(--merk-lijn, #E8EAEC); }

.rlb-popup-kicker {
  margin: 0; font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}
.rlb-popup-titel { margin: var(--rlb-r1) 0 var(--rlb-r2); font-size: clamp(1.4rem, 3vw, 1.9rem); }
.rlb-popup-intro { margin: 0 0 var(--rlb-r4); color: var(--merk-gedempt, #696F77); }

.rlb-popup-formulier { display: grid; gap: var(--rlb-r3); }
.rlb-popup-rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rlb-r3); }
@media (max-width: 520px) { .rlb-popup-rij { grid-template-columns: 1fr; } }
.rlb-popup-formulier .rlb-veld { display: flex; flex-direction: column; gap: var(--rlb-r1); min-width: 0; }
.rlb-popup-formulier .rlb-veld > span { font-size: .8125rem; font-weight: 700; }
.rlb-popup-formulier .rlb-veld b { color: var(--merk-cerise, #E2000F); }
.rlb-popup-formulier input, .rlb-popup-formulier select, .rlb-popup-formulier textarea {
  width: 100%; padding: var(--rlb-r2) var(--rlb-r3);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_veld, 8px);
  background: #fff; color: inherit; font: inherit;
}
.rlb-popup-formulier :is(input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--merk-accent, #E2000F) 40%, transparent);
  outline-offset: 1px; border-color: var(--merk-accent, #E2000F);
}
.rlb-akkoord { display: flex; gap: var(--rlb-r2); align-items: flex-start; font-size: .875rem; }
.rlb-popup-verstuur { justify-content: center; margin-top: var(--rlb-r1); }
.rlb-popup-klein { margin: 0; font-size: .8125rem; color: var(--merk-gedempt, #696F77); text-align: center; }
.rlb-popup-fout {
  margin: 0; padding: var(--rlb-r3) var(--rlb-r4);
  border-left: 3px solid var(--merk-cerise, #E2000F);
  background: color-mix(in srgb, var(--merk-cerise, #E2000F) 7%, var(--merk-grond, #FFFFFF));
  font-size: .9375rem;
}

/* De honeypot: uit beeld, maar niet display:none — dat slaan bots over. */
.rlb-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rlb-popup-gelukt { display: grid; justify-items: center; gap: var(--rlb-r2); text-align: center; padding: var(--rlb-r5) 0; }
.rlb-popup-gelukt .rlb-icoon { color: var(--merk-status_vrij, #2F7D4F); }
.rlb-popup-kenmerk { font-family: var(--merk-font-kop, inherit); font-weight: 800; font-size: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .rlb-popup, .rlb-popup::backdrop { transition: none; }
  .rlb-popup { transform: none; }
}

/* ========================================================================
   96. DE ANDERE PAKKETTEN ALS CARROUSEL
   ========================================================================
   Vier pakketten naast elkaar gaf 280 pixels per kolom: elke zin brak af en
   de lijsten liepen niet gelijk. Met één pakket per slide krijgt elk de
   volle breedte, en doordat de volgende rechts een stuk uitsteekt zie je
   meteen dat er meer is. Dat laatste is het hele punt van een carrousel —
   een rij die precies past ziet eruit als een rij die compleet is.
   ======================================================================== */

.rlb-pakketten--carrousel {
  display: flex;
  gap: clamp(var(--rlb-r3), 1.5vw, 1.25rem);
  margin: 0;
  padding: 0 0 var(--rlb-r2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* GEEN scroll-behavior: smooth hier. Het script roept scrollTo() aan MET
     behavior:"smooth", en met allebei aan stuurt Chrome twee animaties op
     hetzelfde element. Gemeten: de ene klik kwam aan, de volgende niet.
     Het script bepaalt het gedrag, de CSS bemoeit zich er niet mee. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rlb-pakketten--carrousel::-webkit-scrollbar { height: 0; }

.rlb-pakketten--carrousel > .rlb-pak {
  /* 88% zodat de volgende kaart zichtbaar uitsteekt. Precies 100% zou een
     carrousel maken die eruitziet als een gewone kaart. */
  flex: 0 0 min(58rem, 88%);
  scroll-snap-align: start;
}

/* Binnen een carrousel is de kaart breder, dus de foto mag groter. */
.rlb-pakketten--carrousel .rlb-paklijst {
  grid-template-columns: clamp(14rem, 30%, 22rem) minmax(0, 1fr);
  height: 100%;
}
/* Niet omhoog bewegen bij hover: in een schuifbare rij leest dat als
   "hij gaat schuiven" en dat doet hij niet. */
.rlb-pakketten--carrousel .rlb-paklijst:hover { transform: none; }

.rlb-carrousel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlb-r4);
  margin-bottom: var(--rlb-r4);
}
.rlb-carrousel-kop .rlb-tussenkop {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-carrousel-nav { display: flex; gap: var(--rlb-r2); }
.rlb-carrousel-knop {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 50%;
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.rlb-carrousel-knop:hover { border-color: var(--merk-accent, #E2000F); background: var(--merk-vlak, #F6F7F8); }

@media (max-width: 860px) {
  .rlb-pakketten--carrousel > .rlb-pak { flex: 0 0 86%; }
}

/* ========================================================================
   97. RUIMTE TUSSEN DE SECTIES OP DE PAKKETPAGINA
   ========================================================================
   Op een detailpagina staan vijf secties achter elkaar die elk hun ruimte
   anders opbouwen: de kop heeft een achtergrondbeeld, het pakketblok een
   kolomraster, de meerprijzen een vlak, de carrousel een eigen kop. Deel 42
   zet bovendien alleen de BOVENkant van een volgende sectie, en een sectie
   met een eigen vlak wordt daarvan uitgesloten. Daardoor kwam de tekst van
   het ene blok tegen de rand van het volgende.

   Hieronder staat één ritme voor deze pagina, met gelijke ruimte boven en
   onder. Het staat achteraan in het bestand en wint daarom van de
   algemene regels.
   ======================================================================== */

.rlb-pakket,
.rlb-pakketten,
.rlb-upsell {
  padding-block: clamp(2.75rem, 6vw, 5rem);
}

/* Twee secties met dezelfde achtergrond achter elkaar hoeven niet allebei
   de volle ruimte; dan wordt het een gat in plaats van een scheiding. */
.rlb-upsell + .rlb-pakketten,
/* WEG: deze regel zette alleen de BOVENkant op 52px terwijl de onderkant
   op 80 bleef -- precies de scheefheid die deel 100 juist oplost. De
   meerprijzen volgen nu hetzelfde ritme als de rest.
   .rlb-pakketten + .rlb-upsell { padding-top: clamp(2rem, 4vw, 3.25rem); } */

/* Een sectie met een eigen vlak heeft een zichtbare rand nodig, anders
   plakt de tekst erboven eraan vast. */
.rlb--vlak-vlak + .rlb,
.rlb + .rlb--vlak-vlak { margin-top: 0; }

/* De kop van elk blok op deze pagina houdt dezelfde afstand tot zijn
   inhoud, ongeacht of er een intro onder staat. */
.rlb-pakketten > .rlb-binnen > .rlb-kop,
.rlb-upsell > .rlb-binnen > .rlb-kop { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* Het pakketblok had geen eigen kop en begon daardoor direct onder de hero
   met de foto tegen de rand. */
.rlb-pakket > .rlb-binnen { padding-top: var(--rlb-r1); }

/* ========================================================================
   98. DE CARROUSEL LOOPT DOOR TOT DE SCHERMRAND
   ========================================================================
   "Overflow rechts zichtbaar" kan niet met `overflow: visible`: een flexrij
   zonder `overflow-x: auto` kan niet schuiven, dus dan lopen de kaarten de
   pagina uit en hebben de pijlen niets te verschuiven. Het effect dat je
   wél wilt — kaarten die rechts doorlopen in plaats van netjes stoppen bij
   de kolomrand — krijg je door de TRACK breder te maken dan de kolom.

   De rij begint waar de tekst begint en loopt door tot de rand van het
   scherm. Links blijft hij dus uitgelijnd met de kop; rechts verdwijnt hij
   van het scherm af, en dat is precies het signaal "hier is meer".
   ======================================================================== */

@media (min-width: 1024px) {
  .rlb-pakketten--carrousel {
    /* Van de kolomrand tot de schermrand: de helft van wat er naast de
       kolom overblijft, plus de binnenmarge van de kolom. */
    margin-right: calc(50% - 50vw);
    padding-right: max(var(--rlb-r4), calc(50vw - 50%));
    /* Zonder dit knipt de scrollcontainer de schaduw van de laatste kaart
       aan de bovenkant af. */
    padding-block: var(--rlb-r2);
  }
  /* De kaarten mogen nu breder, want er is meer ruimte. */
  .rlb-pakketten--carrousel > .rlb-pak { flex: 0 0 min(62rem, 72%); }
}

/* De kop met de pijlen blijft wél binnen de kolom staan. */
.rlb-pakketten .rlb-carrousel-kop { margin-right: 0; }

/* ========================================================================
   99. DE POPUP ACHTER EEN RELEASE
   ========================================================================
   De kaart in de discografie toont hoes, titel en een regel meta. Alles wat
   je over een release wilt weten -- het verhaal, het label, hoe vaak hij
   gedraaid is, een speler, waar je hem kunt luisteren -- paste daar niet op.
   Het stond er dus niet, en delen kon helemaal niet.

   Hangt aan dezelfde `dialog.rlb-popup` als de pakketpopups: Esc sluiten,
   focus vasthouden en klik-naast-sluiten zitten al in dat element en in de
   JS-module die ze bedient. Dit deel voegt alleen de INDELING toe.
   ======================================================================== */

/* --- de knop op de hoes ----------------------------------------------- */
/* Over de hele hoes, zodat het hele beeld aanklikbaar is. Een <button> en
   geen overlay-div: Tab en Enter werken dan vanzelf. */
.rlb-disco-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.rlb-disco-hoesvak { position: relative; }

.rlb-disco-open-tekst {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  padding: var(--rlb-r2) .85rem;
  border-radius: 999px;
  background: rgba(10, 20, 32, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  /* Verborgen tot je erover gaat: anders ligt er een knop over elke hoes en
     zie je de platen niet meer. */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.rlb-disco-open:hover .rlb-disco-open-tekst,
.rlb-disco-open:focus-visible .rlb-disco-open-tekst { opacity: 1; transform: none; }
.rlb-disco-open:focus-visible { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: -3px; }

/* Op een telefoon bestaat hover niet; daar staat hij gewoon aan. */
@media (hover: none) {
  .rlb-disco-open-tekst { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-disco-open-tekst { transition: none; }
}

/* De afspeelknop moet bovenop de open-knop blijven liggen, anders opent
   "afspelen" de popup. */
/* GEMETEN: met position:relative stond deze knop IN de flow en werd de
   hoes 36px hoger dan bij de andere kaarten — 467 tegen 431, precies de
   knophoogte. Een rij hoezen die niet uitlijnt omdat één plaat een
   audiobestand heeft. Absoluut dus, linksonder op de hoes, boven de
   open-knop. */
.rlb-disco-speel {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
  transition: transform 180ms ease;
}
.rlb-disco-speel:hover { transform: scale(1.08); }
.rlb-disco-speel:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rlb-disco-speel { transition: none; } }

/* --- de popup zelf ----------------------------------------------------- */
.rlb-popup--track {
  width: min(68rem, 94vw);
  max-width: none;
  /* Zonder een maximum groeit het venster door tot buiten het scherm en
     valt de onderkant — juist de deelknoppen — weg. De kaart begrenzen en
     de INHOUD laten scrollen, zodat de sluitknop altijd bereikbaar blijft. */
  max-height: min(92vh, 56rem);
  overflow: hidden;
}
.rlb-popup--track .rlb-trackpop {
  max-height: min(92vh, 56rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rlb-trackpop {
  display: grid;
  gap: clamp(var(--rlb-r4), 3vw, var(--rlb-r6));
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  padding: clamp(1.25rem, 3vw, var(--rlb-r6));
}
@media (max-width: 719px) {
  .rlb-trackpop { grid-template-columns: 1fr; }
}

.rlb-trackpop-hoes {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  /* Een schaduw en geen rand: de meeste hoezen lopen tot de rand door, en
     een lijn eromheen maakt er een postzegel van. */
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .75);
}

.rlb-trackpop-tekst { display: grid; gap: var(--rlb-r4); min-width: 0; }

.rlb-trackpop-titel {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.1;
}
.rlb-trackpop-artiest {
  margin: -.6rem 0 0;
  color: var(--merk-accent, #E2000F);
  font-weight: 700;
}
.rlb-trackpop-over { margin: 0; }
.rlb-trackpop-over p:last-child { margin-bottom: 0; }

.rlb-trackpop-kopje {
  display: flex;
  align-items: center;
  gap: var(--rlb-r2);
  margin: 0 0 var(--rlb-r2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

.rlb-trackpop-audio { width: 100%; }

.rlb-trackpop-feiten {
  display: grid;
  gap: var(--rlb-r2) var(--rlb-r4);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: 0;
  padding: var(--rlb-r4) 0;
  border-block: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-trackpop-feiten dt {
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}
.rlb-trackpop-feiten dd { margin: 0; font-weight: 700; }

.rlb-trackpop-acties { display: flex; flex-wrap: wrap; gap: var(--rlb-r2); }

/* --- delen -------------------------------------------------------------- */
.rlb-deel-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-deel-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  padding: .45rem var(--rlb-r3);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.rlb-deel-knop:hover,
.rlb-deel-knop:focus-visible {
  border-color: var(--merk-accent, #E2000F);
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 10%, transparent);
}
.rlb-deel-knop svg { flex: 0 0 auto; }

/* De kopieerknop meldt zijn resultaat in de knop zelf. Een toast bovenin
   een popup mis je, want je kijkt naar je muis. */
.rlb-deel-kopieer.is-gelukt {
  border-color: var(--merk-status_vrij, #2F7D4F);
  background: color-mix(in srgb, var(--merk-status_vrij, #2F7D4F) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .rlb-deel-knop { transition: none; }
}

/* ========================================================================
   100. HET MERKENFILTER HEEFT LUCHT NODIG
   ========================================================================
   GEMETEN: padding 0 boven en 0 onder, ingeklemd tussen de USP's en de
   pakketten. Een filterbalk is geen sectie maar hoort wel adem te halen,
   anders lijkt hij bij het blok erboven te horen in plaats van bij de
   pakketten eronder.

   Hij krijgt daarom een halve sectiemaat, en een lijn boven zodat zichtbaar
   is dat hier iets nieuws begint. */
.rlb-merken--filter {
  padding-block: clamp(var(--rlb-r6), 3vw, var(--rlb-r7));
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
/* Staat hij op hetzelfde vlak als het blok erboven, dan is een lijn genoeg
   en hoeft er geen extra vlakovergang bij. */
.rlb--vlak-vlak + .rlb-merken--filter { border-top-color: rgba(10, 20, 32, .09); }

/* ========================================================================
   101. DE BEOORDELINGEN: SCOREKAART LINKS, CARROUSEL RECHTS
   ========================================================================
   Deel 24 geeft rl-reviews een raster van gelijke kaarten. Dat werkt als
   je er zes wilt tonen, maar niet voor wat hier moet gebeuren: één sectie
   die in één blik het CIJFER laat zien en daarnaast de verhalen. Een raster
   van veertien kaarten is een muur tekst waar niemand aan begint; een
   carrousel zonder cijfer ernaast mist het enige harde getal dat er is.

   Dus twee delen in één sectie. Links een derde: de kaart met het
   Google-logo, de sterren, "5/5" en het aantal -- alle drie uit
   config/reviews.json en dus uit de administratie, nooit getypt. Rechts
   twee derde: de carrousel met twee kaarten in beeld die per klik één kaart
   opschuift.

   WAAROM TWEE PER BEELD EN EEN PER KLIK
   Twee kaarten naast elkaar passen in de 2/3-kolom zonder dat een citaat
   van drie regels een kolom van 240 pixels wordt. Een kaart per klik, want
   twee tegelijk verschuiven haalt ook de kaart weg die je net aan het lezen
   was. Dat vraagt geen JavaScript: de module in rl.js springt naar het
   volgende KIND van de lijst, dus met een flex-basis van de halve breedte
   schuift er per klik precies een op. Nul nieuwe regels script.

   WAAROM DE BINNENSTE CONTAINER rlb-reviewbalk HEET EN NIET rlb-reviews
   `rlb-reviews` is de <section> zelf (nxrl_sectie_open zet die klasse). Een
   kind met dezelfde naam geeft de naambotsing die in deel 80 al een keer is
   rechtgezet: de sectieregels gaan dan ook over de binnenkant.

   DE SCHADUW
   De kaarthover in deel 55 gebruikt 0 14px 34px rgba(10,20,32,.11). Op
   veertien kaarten naast elkaar is dat te zwaar -- dan lijkt elke kaart te
   zweven en wordt de rij onrustig. Hier 0 8px 20px rgba(10,20,32,.06):
   dezelfde vorm, duidelijk lichter, en bij aanwijzen een stapje erbij zodat
   je nog ziet welke kaart je hebt.
   ======================================================================== */

.rlb-reviews--google {
  /* Een variabele voor de tussenruimte in de rij: de kaartbreedte rekent
     ermee, dus hij mag maar op een plek staan. */
  --rlb-reviewgap: clamp(.75rem, 1.5vw, 1.25rem);
}

.rlb-reviews--google .rlb-reviewbalk {
  display: grid;
  /* Precies 1/3 en 2/3. minmax(0,...) zodat een lang woord in een citaat de
     kolom niet openduwt. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}

/* --- links: de scorekaart ---------------------------------------------- */

.rlb-reviewscore {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rlb-r2);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 8px 20px rgba(10, 20, 32, .06);
}
.rlb-reviewscore-merk {
  display: flex;
  align-items: center;
  gap: var(--rlb-r2);
  margin: 0;
  font-family: var(--merk-font-kop, "Montserrat", Arial, sans-serif);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--merk-inkt, #1A1D21);
}
/* Het logo is van iemand anders en houdt zijn eigen kleuren; alleen de maat
   is aan ons. */
.rlb-googlelogo { flex: 0 0 auto; display: block; }

.rlb-reviewscore-cijfer {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  margin: 0;
  font-family: var(--merk-font-kop, "Montserrat", Arial, sans-serif);
  line-height: 1;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-reviewscore-cijfer b {
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 900;
}
.rlb-reviewscore-cijfer span {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--merk-gedempt, #696F77);
}
.rlb-reviewscore-aantal {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--merk-gedempt, #696F77);
}
.rlb-reviewscore-link {
  margin-top: var(--rlb-r1);
  font-size: .875rem;
  font-weight: 700;
  color: var(--merk-accent_donker, #A50B00);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rlb-reviewscore-link:hover { text-decoration-thickness: 2px; }

/* --- rechts: de carrousel ---------------------------------------------- */

.rlb-reviewrij { min-width: 0; }

.rlb-reviewkaarten {
  display: flex;
  gap: var(--rlb-reviewgap, var(--rlb-r4));
  margin: 0;
  /* Onderruimte voor de schaduw: een scrollcontainer knipt hem anders af. */
  padding: var(--rlb-r1) 0 var(--rlb-r3);
  list-style: none;
  overflow-x: auto;
  /* proximity en niet mandatory: met mandatory trekt de snap een vloeiende
     scroll terug naar het dichtstbijzijnde ankerpunt en gebeurt er om de
     klik niets -- gemeten op /live-dj/, zie de uitleg in rl.js. GEEN
     scroll-behavior hier: het script bepaalt dat. */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rlb-reviewkaarten::-webkit-scrollbar { height: 0; }

.rlb-reviewkaarten > .rlb-review {
  /* Twee per beeld: de halve breedte min de halve tussenruimte. De slides
     zijn DIRECTE kinderen van de lijst, want daar rekent de module in
     rl.js mee. */
  flex: 0 0 calc((100% - var(--rlb-reviewgap, 1rem)) / 2);
  scroll-snap-align: start;
  background: var(--merk-grond, #FFFFFF);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  box-shadow: 0 8px 20px rgba(10, 20, 32, .06);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  gap: var(--rlb-r3);
}
/* Niet omhoog schuiven bij aanwijzen: in een rij die kan schuiven leest dat
   als "hij gaat bewegen". Een iets diepere schaduw is genoeg. */
.rlb-reviewkaarten > .rlb-review:hover {
  box-shadow: 0 12px 26px rgba(10, 20, 32, .09);
  transform: none;
}

/* --- de tekst in een kaart --------------------------------------------- */

/* Geen serif. Het citaat is Roboto 500 op 20-22px: groot genoeg om als
   citaat te lezen, en in hetzelfde lettertype als de rest van de site. */
.rlb-reviews--google .rlb-review-tekst p {
  font-family: var(--merk-font-tekst, "Roboto", Arial, sans-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--merk-inkt, #1A1D21);
  /* Deel 42 zet op elke .rlb p een leesbreedte van 68ch; binnen een halve
     kolom is dat niet de grens die telt. */
  max-width: none;
}
.rlb-reviews--google .rlb-review-wie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem var(--rlb-r2);
  margin: auto 0 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #696F77);
}
/* De naam in Montserrat 700 met kleine kapitalen. Veel Google-namen staan
   in kleine letters ("barbara logger"); all-small-caps maakt daar een
   rustige regel van zonder de spelling te veranderen -- text-transform zou
   dat wel doen, en dat is iemands naam herschrijven. */
.rlb-reviews--google .rlb-review-naam {
  font-family: var(--merk-font-kop, "Montserrat", Arial, sans-serif);
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  /* Deel 24 zet hier var(--merk-inkt, #fff): een witte terugval op een witte
     kaart. In de Studio wordt brand.css niet geladen, en dan was de naam
     daar onleesbaar. */
  color: var(--merk-inkt, #1A1D21);
}
.rlb-reviews--google .rlb-review-gelegenheid::before,
.rlb-reviews--google .rlb-review-bron::before,
.rlb-reviews--google .rlb-review-datum::before {
  content: "\00b7";
  margin-right: var(--rlb-r1);
  color: var(--merk-lijn, #E8EAEC);
}

/* --- smaller: de kolommen onder elkaar --------------------------------- */

@media (max-width: 1023px) {
  .rlb-reviews--google .rlb-reviewbalk { grid-template-columns: minmax(0, 1fr); }
  /* De scorekaart staat in de HTML voor de rij en komt dus vanzelf boven de
     carrousel -- geen order-truc nodig, dus ook geen verschil tussen wat je
     ziet en wat een schermlezer voorleest. */
  .rlb-reviewscore {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rlb-r2) var(--rlb-r4);
  }
  .rlb-reviewscore-cijfer b { font-size: 2.25rem; }
  .rlb-reviewscore-link { margin-top: 0; }
}

@media (max-width: 767px) {
  /* Een kaart per beeld. Twee halve kaarten op een telefoon zijn twee
     onleesbare kolommen. 92% in plaats van 100%, zodat de volgende kaart een
     strook laat zien en zichtbaar is dat er meer is. */
  .rlb-reviewkaarten > .rlb-review { flex: 0 0 92%; }
  .rlb-reviews--google .rlb-review-tekst p { font-size: 1.125rem; }
}

@media (max-width: 479px) {
  .rlb-reviewkaarten > .rlb-review { flex: 0 0 100%; }
  .rlb-reviewscore { flex-direction: column; align-items: flex-start; }
}

/* Wie minder beweging wil, krijgt er geen: dezelfde afspraak als in rl.js,
   dat zijn scrollTo() dan op "auto" zet. De rij blijft schuifbaar, alleen
   zonder animatie en zonder dat de snap de klik overneemt. */
@media (prefers-reduced-motion: reduce) {
  .rlb-reviewkaarten { scroll-snap-type: none; scroll-behavior: auto; }
  .rlb-reviewkaarten > .rlb-review { transition: none; }
  .rlb-reviewkaarten > .rlb-review:hover { box-shadow: 0 8px 20px rgba(10, 20, 32, .06); }
  .rlb-reviewscore-link:hover { text-decoration-thickness: auto; }
}

/* ========================================================================
   102. DE KASSA — DE WINKELWAGEN EN DE AFREKENPAGINA
   ========================================================================
   TWEE PAGINA'S, EEN OPBOUW
   Links wat je koopt, rechts wat het kost. Dat is op /winkelwagen/ de
   regellijst naast het bedragenpaneel en op /afrekenen/ het formulier naast
   datzelfde paneel. Dezelfde plek voor hetzelfde antwoord, zodat de bezoeker
   bij de tweede stap niet opnieuw hoeft te zoeken waar het totaal staat.

   HET PANEEL PLAKT, DE LIJST NIET
   Vanaf 1024px blijft het bedragenpaneel in beeld terwijl je door de regels
   scrollt. Dat is de enige plek waar het bedrag staat; het uit beeld laten
   lopen betekent dat iemand bij elke wijziging terug naar boven moet. Onder
   1024px valt het paneel ONDER de lijst: op een telefoon hoort eerst te
   staan wat je koopt en daarna wat het kost, niet omgekeerd.

   DE AANTALKNOPPEN ZIJN 44 BIJ 44
   Dat is de maat waaronder een duim ernaast tikt. Het veld ertussen is een
   echte number-input, dus "12" typen kan ook — een rij plusklikken is geen
   invoermethode.

   WAAROM ER ZO WEINIG BEWEGING IN ZIT
   Een bedrag dat verschuift terwijl je ernaar kijkt is een bedrag dat je
   twee keer moet lezen. De totalen wisselen zonder overgang; alleen de
   knoppen en de kaartranden reageren, en ook die niet als de bezoeker om
   minder beweging heeft gevraagd (onderaan dit deel).
   ======================================================================== */

/* --------------------------------------------- hidden moet hidden blijven

   Bijna alles in dit deel krijgt display:grid of display:flex, en daarmee
   wint de regel van de auteur van de browserstandaard [hidden]{display:none}.
   Dat is hier geen schoonheidsfoutje: de lege wagen, de verzendkostenregel,
   de kortingsregel, de bezorgvelden en de zakelijke velden worden allemaal
   met het hidden-attribuut aan- en uitgezet. Zonder deze ene regel staat
   "Je winkelwagen is leeg" onder een gevulde wagen -- precies wat er bij de
   eerste proef gebeurde. */
.rlb-wagen [hidden],
.rlb-kassa [hidden] { display: none !important; }

/* ------------------------------------------------------------ de indeling */

.rlb-wagen,
.rlb-kassa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem);
  gap: var(--rlb-ruimte-l, 2.5rem);
  align-items: start;
}
.rlb-wagen > *,
.rlb-kassa > * { min-width: 0; }

/* De noodstop van het rekeningslot staat over de volle breedte: die gaat
   over de hele bestelling en niet over een van de twee kolommen. */
.rlb-kassa > .rlb-kassa-melding--stop { grid-column: 1 / -1; }

.rlb-wagen-lijst,
.rlb-kassa-kolom { min-width: 0; }

@media (max-width: 1023px) {
  .rlb-wagen,
  .rlb-kassa {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rlb-ruimte-m, var(--rlb-r5));
  }
}

/* ------------------------------------------------------------- de regels */

.rlb-wagen-uitleg {
  margin: 0 0 var(--rlb-ruimte-m, var(--rlb-r5));
  padding: var(--rlb-r3) var(--rlb-r4);
  border-left: 3px solid var(--merk-accent, #E2000F);
  border-radius: 0 var(--merk-radius_veld, 8px) var(--merk-radius_veld, 8px) 0;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-gedempt, #696F77);
  font-size: .9375rem;
}

.rlb-wagen-regels {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--rlb-ruimte-s, .875rem);
}

/* Vier kolommen: beeld, wat het is, het aantal, het bedrag — en de
   verwijderknop op de tweede rij. `auto` voor het beeld, zodat een regel
   zonder beeld geen lege kolom overhoudt. */
.rlb-wagen-regel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "beeld wat aantal bedrag"
    "beeld wat weg    weg";
  align-items: center;
  gap: .35rem var(--rlb-ruimte-m, var(--rlb-r5));
  padding: var(--rlb-ruimte-s, .875rem);
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #FFFFFF);
  transition: border-color var(--rlb-overgang, 180ms ease);
}
.rlb-wagen-regel:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-wagen-regel > * { min-width: 0; }

.rlb-wagen-beeldvak {
  grid-area: beeld;
  display: block;
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--merk-radius_beeld, 8px);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-wagen-beeld { display: block; width: 100%; height: 100%; object-fit: cover; }

.rlb-wagen-wat { grid-area: wat; display: grid; gap: .15rem; min-width: 0; }
.rlb-wagen-naam {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  color: var(--merk-inkt, #1A1D21);
  overflow-wrap: anywhere;
}
.rlb-wagen-variant,
.rlb-wagen-stuk { font-size: .875rem; color: var(--merk-gedempt, #696F77); }

/* De soort als klein label: in de wagen moet zichtbaar zijn dat regel twee
   een download is en niet nog een plaat die verstuurd wordt. */
.rlb-wagen-soort {
  justify-self: start;
  padding: .1rem var(--rlb-r2);
  border-radius: 999px;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-gedempt, #696F77);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- het aantal */

.rlb-wagen-aantal {
  grid-area: aantal;
  display: flex;
  align-items: center;
  gap: var(--rlb-r1);
  color: var(--merk-inkt, #1A1D21);
  font-variant-numeric: tabular-nums;
}

.rlb-wagen-knop {
  /* 44 bij 44: de maat waaronder een duim ernaast tikt. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: 50%;
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rlb-overgang, 180ms ease),
              border-color var(--rlb-overgang, 180ms ease);
}
.rlb-wagen-knop:hover {
  border-color: var(--merk-accent, #E2000F);
  background: var(--merk-vlak, #F6F7F8);
}

.rlb-wagen-aantalveld {
  width: 3.5rem;
  min-height: 44px;
  padding: var(--rlb-r1) var(--rlb-r2);
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  font-family: inherit;
  /* 1rem, want onder de 16px zoomt iOS bij focus op het veld in. */
  font-size: 1rem;
  text-align: center;
}

.rlb-wagen-bedrag {
  grid-area: bedrag;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--merk-inkt, #1A1D21);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rlb-wagen-weg {
  grid-area: weg;
  justify-self: end;
  /* Een raakdoel van 44 hoog zonder dat de knop als een knop schreeuwt:
     verwijderen is niet de actie die je wilt uitlokken. */
  min-height: 44px;
  padding: 0 var(--rlb-r2);
  border: 0;
  background: none;
  color: var(--merk-gedempt, #696F77);
  font-family: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rlb-wagen-weg:hover { color: var(--merk-cerise, #E2000F); }

@media (max-width: 767px) {
  .rlb-wagen-regel {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "beeld  wat"
      "aantal bedrag"
      "weg    weg";
    gap: .6rem var(--rlb-ruimte-s, .875rem);
  }
  .rlb-wagen-bedrag { justify-self: end; }
  .rlb-wagen-weg { justify-self: start; }
}

@media (max-width: 479px) {
  .rlb-wagen-beeldvak { width: 56px; }
  .rlb-wagen-aantalveld { width: 3rem; }
}

/* ------------------------------------------------------------- het paneel */

.rlb-kassa-paneel {
  display: grid;
  gap: var(--rlb-ruimte-s, .875rem);
  padding: var(--rlb-ruimte-m, var(--rlb-r5));
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F6F7F8);
}
@media (min-width: 1024px) {
  /* Het bedrag blijft in beeld. De hoogte van de plakkende kopbalk staat in
     --rlb-kopbalk-h (deel 87); die hier overtypen zou een tweede waarheid
     zijn die uiteenloopt zodra de kopbalk van maat verandert. */
  .rlb-kassa-paneel {
    position: sticky;
    top: calc(var(--rlb-kopbalk-h, 88px) + 1.5rem);
  }
}

.rlb-kassa-paneel-titel {
  margin: 0;
  font-size: 1.125rem;
  color: var(--merk-inkt, #1A1D21);
}

.rlb-kassa-paneel .rlb-wagen-regels { gap: var(--rlb-r2); }
.rlb-kassa-paneel .rlb-wagen-regel {
  /* In het smalle paneel is een kaart om elke regel te veel kader; een lijn
     ertussen zegt hetzelfde met minder. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "wat    bedrag"
    "aantal bedrag";
  padding: var(--rlb-r2) 0;
  border: 0;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: 0;
  background: none;
}
.rlb-kassa-paneel .rlb-wagen-regel:last-child { border-bottom: 0; }
.rlb-kassa-paneel .rlb-wagen-regel:hover { border-color: var(--merk-lijn, #E8EAEC); }
.rlb-kassa-paneel .rlb-wagen-aantal { font-size: .875rem; color: var(--merk-gedempt, #696F77); }
.rlb-kassa-paneel .rlb-wagen-bedrag { align-self: center; }

/* ----------------------------------------------------------- de bedragen */

.rlb-kassa-bedragen { margin: 0; display: grid; gap: var(--rlb-r1); }
.rlb-kassa-rij {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rlb-ruimte-s, .875rem);
}
.rlb-kassa-rij dt { color: var(--merk-gedempt, #696F77); font-size: .9375rem; }
.rlb-kassa-rij dd {
  margin: 0;
  color: var(--merk-inkt, #1A1D21);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rlb-kassa-rij--korting dd { color: var(--merk-status_vrij, #2F7D4F); }
.rlb-kassa-rij--eind {
  margin-top: var(--rlb-r1);
  padding-top: var(--rlb-r2);
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-kassa-rij--eind dt { color: var(--merk-inkt, #1A1D21); font-weight: 700; font-size: 1rem; }
.rlb-kassa-rij--eind dd {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.375rem;
}

.rlb-kassa-btw { margin: 0; font-size: .8125rem; color: var(--merk-gedempt, #696F77); }

/* -------------------------------------------------------- de kortingscode */

.rlb-kassa-korting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--rlb-r2);
  padding-top: var(--rlb-ruimte-xs, var(--rlb-r2));
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-kassa-korting .rlb-veld { grid-column: 1; }
.rlb-kassa-korting .rlb-kassa-melding { grid-column: 1 / -1; margin-top: var(--rlb-r2); }
.rlb-kassa-codeknop { min-height: 48px; justify-content: center; }
@media (max-width: 479px) {
  .rlb-kassa-korting { grid-template-columns: minmax(0, 1fr); }
  .rlb-kassa-codeknop { grid-column: 1; }
}

.rlb-kassa-door,
.rlb-kassa-verder { justify-content: center; }

.rlb-kassa-terug {
  /* Een link is geen knop, maar hij mag wel 44px hoog aan te tikken zijn. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--merk-gedempt, #696F77);
  font-size: .875rem;
}

/* ----------------------------------------------------------- de meldingen */

.rlb-kassa-melding {
  margin: var(--rlb-ruimte-s, .875rem) 0 0;
  padding: var(--rlb-r3) var(--rlb-r4);
  border-left: 3px solid var(--merk-accent, #E2000F);
  border-radius: 0 var(--merk-radius_veld, 8px) var(--merk-radius_veld, 8px) 0;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
  font-size: .9375rem;
}
.rlb-kassa-melding--fout { border-left-color: var(--merk-cerise, #E2000F); }
.rlb-kassa-melding--stop {
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-left: 3px solid var(--merk-cerise, #E2000F);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #FFFFFF);
}
.rlb-kassa-leegknop { margin-top: var(--rlb-r2); }

.rlb-kassa-geenjs {
  margin: var(--rlb-ruimte-m, var(--rlb-r5)) 0 0;
  padding: var(--rlb-ruimte-s, .875rem) var(--rlb-ruimte-m, var(--rlb-r5));
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
}

/* --------------------------------------------------------- de lege wagen */

.rlb-kassa-leeg {
  display: grid;
  justify-items: center;
  gap: var(--rlb-r2);
  padding: var(--rlb-ruimte-xl, var(--rlb-r8)) var(--rlb-ruimte-m, var(--rlb-r5));
  border: 1px dashed var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  text-align: center;
}
.rlb-kassa-leeg .rlb-icoon { color: var(--merk-gedempt, #696F77); }
.rlb-kassa-leeg-titel { margin: 0; font-size: 1.25rem; color: var(--merk-inkt, #1A1D21); }
.rlb-kassa-leeg-tekst { margin: 0; max-width: 40ch; color: var(--merk-gedempt, #696F77); }

/* -------------------------------------------------------- het afrekenvak */

.rlb-kassa-formulier { display: grid; gap: var(--rlb-ruimte-m, 1.5rem); }

/* Een fieldset draagt een eigen rand en padding die niets met deze opmaak te
   maken hebben; die gaan eraf voordat de kaart erop komt. */
.rlb-kassa-vak {
  margin: 0;
  padding: var(--rlb-ruimte-m, var(--rlb-r5));
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #FFFFFF);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--rlb-ruimte-m, var(--rlb-r5));
  min-width: 0;
}
.rlb-kassa-vak > legend {
  padding: 0 var(--rlb-r2);
  margin-left: -.4rem;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-kassa-vak > .rlb-veld { min-width: 0; }

/* De blokken die van een keuze afhangen nemen de volle breedte en houden hun
   eigen raster, zodat KvK en btw naast elkaar blijven staan. */
.rlb-kassa-zakelijk,
.rlb-kassa-factuur {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--rlb-ruimte-s, .875rem);
  padding: var(--rlb-ruimte-s, .875rem);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F6F7F8);
}

.rlb-kassa-help { font-size: .8125rem; color: var(--merk-gedempt, #696F77); }

.rlb-kassa-verstuur {
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 52px;
}
/* Een uitgezette knop hoort er uitgezet uit te zien, maar de focusring blijft
   erop werken: wie met het toetsenbord navigeert moet kunnen zien dat hij op
   de knop staat die nog niet kan. Daarom opacity en niet visibility. */
.rlb-kassa-verstuur[disabled] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.rlb-kassa-wacht,
.rlb-kassa-belofte {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--merk-gedempt, #696F77);
  font-size: .8125rem;
  text-align: center;
}
/* Geen flexrij: bij twee regels tekst duwt die het schildje naar de
   linkerrand terwijl de zin zelf gecentreerd blijft staan. Als inline-icoon
   loopt het gewoon met de eerste regel mee. */
.rlb-kassa-belofte .rlb-icoon {
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: var(--rlb-r1);
  color: var(--merk-status_vrij, #2F7D4F);
}

.rlb-kassa-formulier .rlb-veld--vink,
.rlb-kassa-formulier .rlb-kassa-melding { grid-column: 1 / -1; }

@media (max-width: 479px) {
  .rlb-kassa-vak { padding: var(--rlb-ruimte-s, .875rem); }
}

/* ------------------------------------------------ de teller op de zijtab */

.rlb-zijtab-teller {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--rlb-r1);
  border-radius: 999px;
  background: var(--merk-cerise, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  /* Geen van deze overgangen draagt informatie; ze mogen zonder verlies weg. */
  .rlb-wagen-regel,
  .rlb-wagen-knop,
  .rlb-kassa-verstuur,
  .rlb-kassa-door,
  .rlb-kassa-verder,
  .rlb-kassa-codeknop { transition: none; }
  .rlb-kassa-verstuur:hover,
  .rlb-kassa-door:hover,
  .rlb-kassa-verder:hover,
  .rlb-kassa-codeknop:hover { transform: none; }
}

/* ========================================================================
   103. DE VERHALEN — ÉÉN UITGEKLAPTE KAART NAAST SMALLE PANELEN
   ========================================================================
   HOE HET WERKT
   nxrl_blok_verhalen() zet per verhaal een radio als eerste kind van
   .rlb-vrh. Een meegegeven <style> per blok zet bij de aangevinkte radio
   alleen --vrh-open:1 op het paneel en --vrh-aan:1 op de tab; ALLES wat je
   ziet staat hier en leest die twee properties. Zo blijft rl.css vrij van
   regels per paneel en kan een redacteur een vijfde verhaal toevoegen
   zonder CSS-wijziging.

   DE TERUGVAL
   De basis (buiten de @supports) is een omslaand raster waarin elk verhaal
   volledig zichtbaar is, tekst en al. Pas als de browser custom properties
   kent, wordt het een accordeon. Zonder JavaScript werkt alles sowieso:
   radio's en labels, zoals het merkenfilter.

   MOBIEL (≤767) stapelt verticaal: het open verhaal springt met order
   bovenaan, de rest wordt een strook van 86px met de categorienaam erop. */

.rlb-vrh { position: relative; }

/* De radio's dragen de toestand en zijn zelf onzichtbaar — maar niet
   display:none, want dan is er niets meer te focussen met het toetsenbord.
   Absoluut gepositioneerd doen ze ook niet mee in de flex-rij. */
.rlb-vrh-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- de tabs: actieve in inkt, de rest gedempt -------------------------- */

.rlb-vrh-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r1) clamp(1.1rem, 2.4vw, var(--rlb-r6));
  margin-bottom: var(--rlb-ruimte-m, var(--rlb-r5));
}

.rlb-vrh-tab {
  cursor: pointer;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.4;
  padding-block: var(--rlb-r1) 0;
  color: var(--merk-gedempt, #696F77);
  transition: color 200ms ease;
}
/* Browsers zonder color-mix slaan deze regel over en houden gedempt: de
   tabs blijven dan gewoon bruikbaar, alleen zonder aan/uit-kleur. */
.rlb-vrh-tab {
  color: color-mix(in srgb,
           var(--merk-inkt, #1A1D21) calc(var(--vrh-aan, 0) * 100%),
           var(--merk-gedempt, #696F77));
}
.rlb-vrh-tab:hover { color: var(--merk-inkt, #1A1D21); }

/* Het streepje onder de actieve tab groeit uit vanaf links. */
.rlb-vrh-tab::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: var(--rlb-r1);
  border-radius: 2px;
  background: var(--merk-accent, #E2000F);
  transform: scaleX(var(--vrh-aan, 0));
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(.2, .7, .3, 1);
}

/* --- de panelen: basis = alles zichtbaar naast elkaar ------------------- */

.rlb-vrh-rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-ruimte-s, .875rem);
}

.rlb-vrh-paneel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 280px;
  min-height: clamp(340px, 36vw, 480px);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-nachtblauw, #17396A);
}

/* De foto vult het paneel; width/height uit de HTML houden de verhouding
   vast tot de CSS laadt, daarna neemt object-fit het over. */
.rlb-vrh-achter { position: absolute; inset: 0; }
.rlb-vrh-achter picture { display: block; width: 100%; height: 100%; }
.rlb-vrh-beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 560ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-vrh-paneel:hover .rlb-vrh-beeld { transform: scale(1.04); }

/* Het donkere verloop onderin: daar staat de tekst op. */
.rlb-vrh-sluier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(6, 17, 27, 0) 34%,
    rgba(6, 17, 27, .38) 62%,
    rgba(6, 17, 27, .82) 100%);
}

/* Het klikvlak van een ingeklapt paneel. In de basisweergave (alles open)
   is er niets te kiezen, dus uit. */
.rlb-vrh-kies { display: none; }

.rlb-vrh-inhoud {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(1.1rem, 2.2vw, var(--rlb-r6));
  color: #fff;
}
.rlb-vrh-kopje {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rlb-op-donker-gedempt);
}
.rlb-vrh-titel {
  margin: var(--rlb-r1) 0 var(--rlb-r2);
  font-family: var(--merk-font-kop, inherit);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  color: #fff;
}
.rlb-vrh-tekst {
  margin: 0 0 var(--rlb-r4);
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--rlb-op-donker-licht);
}
/* De pilknop erft alles van .rlb-knop; alleen wat kleiner, want hij staat
   op een foto en niet in een lege kolom. */
.rlb-vrh-inhoud .rlb-knop { padding: var(--rlb-r2) var(--rlb-r4); font-size: .9375rem; }

/* --- het accordeon, alleen voor browsers met custom properties ---------- */

@supports (--vrh: 1) {

  /* Vanaf hier bepaalt --vrh-open (0 of 1, gezet door de meegegeven
     paneelregels) wat open en dicht is. */
  .rlb-vrh-inhoud {
    opacity: var(--vrh-open, 0);
    transform: translateY(calc((1 - var(--vrh-open, 0)) * 14px));
    transition: opacity 320ms ease 160ms,
                transform 460ms cubic-bezier(.2, .7, .3, 1) 160ms;
    /* Dicht paneel: de muis hoort het kieslabel te raken, niet de tekst.
       Het open paneel krijgt pointer-events:auto uit de paneelregels. */
    pointer-events: none;
  }

  .rlb-vrh-kies {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: pointer;
    transition: opacity 240ms ease;
  }

  .rlb-vrh-kieslabel {
    position: absolute;
    left: 50%;
    bottom: 1.1rem;
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    rotate: 180deg;
    white-space: nowrap;
    font-family: var(--merk-font-kop, inherit);
    font-weight: 700;
    font-size: .9375rem;
    letter-spacing: .04em;
    color: #fff;
  }

  @media (min-width: 768px) {
    .rlb-vrh-rij {
      flex-wrap: nowrap;
      min-height: clamp(380px, 38vw, 560px);
    }
    /* Dicht = een strook van 15%; open = de strook plus alle restruimte.
       Bij vier verhalen is dat 15 + 40 = 55% — de maat van het voorbeeld.
       De overgang zit op flex-grow: één getal dat van 0 naar 1 glijdt. */
    .rlb-vrh-paneel {
      flex: var(--vrh-open, 0) 1 15%;
      min-height: 0;
      transition: flex-grow 560ms cubic-bezier(.2, .7, .3, 1);
    }
  }

  @media (max-width: 767px) {
    .rlb-vrh-rij { flex-direction: column; flex-wrap: nowrap; }
    /* Verticaal stapelen: het open verhaal springt bovenaan (order), de
       rest wordt een fotostrook. De hoogte glijdt mee met --vrh-open. */
    .rlb-vrh-paneel {
      flex: none;
      order: calc(2 - var(--vrh-open, 0));
      min-height: calc(86px + var(--vrh-open, 0) * 330px);
      transition: min-height 440ms cubic-bezier(.2, .7, .3, 1);
    }
    /* Op een liggende strook is staande tekst onleesbaar. */
    .rlb-vrh-kieslabel {
      writing-mode: horizontal-tb;
      rotate: none;
      left: auto;
      inset-inline-start: 1.1rem;
      bottom: .9rem;
      transform: none;
    }
  }
}

@media (max-width: 479px) {
  .rlb-vrh-tabs { gap: var(--rlb-r1) var(--rlb-r4); }
  .rlb-vrh-tab { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* Uit is uit: de panelen klappen zonder overgang om en niets gloeit na. */
  .rlb-vrh-paneel,
  .rlb-vrh-inhoud,
  .rlb-vrh-kies,
  .rlb-vrh-beeld,
  .rlb-vrh-tab,
  .rlb-vrh-tab::after { transition: none; }
  .rlb-vrh-paneel:hover .rlb-vrh-beeld { transform: none; }
}

/* ========================================================================
   104. HET METSELWERK — DE GALERIJWEERGAVE VOOR /portfolio/
   ========================================================================
   De renderer kent de weergave 'metselwerk' al; dit is de opmaak erbij.
   Een raster met grid-auto-flow:dense en twee vaste spanregels — het
   eerste beeld 2×2, elk vierde breed — zodat er echte ongelijke vakken
   ontstaan zonder dat iemand per foto iets hoeft in te stellen. dense
   vult de gaten die de brede vakken achterlaten.

   Het bijschrift (rlb-galerij-tekst), dat het mozaïek verbergt, staat hier
   WÉL aan: één witte regel op een donker verloop onderin het vak. Geen
   logo, geen knop — plaats en jaar, meer hoeft een foto niet te zeggen. */

.rlb-galerij--metselwerk .rlb-galerij {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 220px);
  grid-auto-flow: dense;
  gap: var(--rlb-ruimte-s, .875rem);
}

.rlb-galerij--metselwerk .rlb-galerij-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--merk-radius_beeld, 8px);
  background: var(--merk-vlak, #F6F7F8);
}

.rlb-galerij--metselwerk .rlb-galerij-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.rlb-galerij--metselwerk .rlb-galerij-item:nth-child(4n) { grid-column: span 2; }

/* De foto vult zijn vak, hoe het raster hem ook snijdt. */
.rlb-galerij--metselwerk .rlb-galerij-link,
.rlb-galerij--metselwerk .rlb-galerij-item > picture {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
}
.rlb-galerij--metselwerk .rlb-galerij-link picture { display: block; width: 100%; height: 100%; }
.rlb-galerij--metselwerk .rlb-galerij-beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Het bijschrift als witte regel over een donker verloop onderin.
   pointer-events:none, want de klik hoort naar de vergroting te gaan. */
.rlb-galerij--metselwerk .rlb-galerij-tekst {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--rlb-r6) var(--rlb-r3) var(--rlb-r3);
  background: linear-gradient(180deg, rgba(6, 17, 27, 0), rgba(6, 17, 27, .74));
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .rlb-galerij--metselwerk .rlb-galerij {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: clamp(140px, 18vw, 200px);
  }
}

@media (max-width: 767px) {
  .rlb-galerij--metselwerk .rlb-galerij {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 26vw, 180px);
  }
}

@media (max-width: 479px) {
  .rlb-galerij--metselwerk .rlb-galerij { gap: var(--rlb-r2); }
  .rlb-galerij--metselwerk .rlb-galerij-tekst { font-size: .8125rem; padding: var(--rlb-r6) var(--rlb-r3) var(--rlb-r2); }
}

@media (prefers-reduced-motion: reduce) {
  .rlb-galerij--metselwerk .rlb-galerij-beeld { transition: none; }
  .rlb-galerij--metselwerk .rlb-galerij-link:hover .rlb-galerij-beeld { transform: none; }
}

/* ========================================================================
   105. BEWEGING PER SECTIE INSTELBAAR
   ========================================================================
   nxrl_sectie_open() vertaalt de sectie-instelling 'beweging' naar een
   klasse rlb--beweeg-*; rl.js neemt elke sectie met zo'n klasse op in zijn
   BLOKKEN-lijst en zet er het BESTAANDE data-rl-anim-mechanisme op (zie het
   kopje 'invliegen bij in beeld komen'). Hier staat alleen de beginstand
   per variant: wat verschoven, geknepen of doorzichtig is vóór de sectie in
   beeld komt. data-rl-anim="aan" zet alles al terug naar neutraal.

   'geen' is de uitzondering die het mechanisme uitzet: ook als rl.js de
   sectie markeert, blijft hij gewoon staan. Zo kan een redacteur één druk
   sectie stilzetten zonder de rest te raken. */

[class*="rlb--beweeg-"][data-rl-anim="uit"] { opacity: 0; transform: translateY(26px); }
.rlb--beweeg-fade[data-rl-anim="uit"]   { transform: none; }
.rlb--beweeg-links[data-rl-anim="uit"]  { transform: translateX(-30px); }
.rlb--beweeg-rechts[data-rl-anim="uit"] { transform: translateX(30px); }
.rlb--beweeg-zoom[data-rl-anim="uit"]   { transform: scale(.96); }

.rlb--beweeg-geen[data-rl-anim="uit"] { opacity: 1; transform: none; }
.rlb--beweeg-geen[data-rl-anim] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  /* rl.js doet bij reduced motion al niets, maar ook als het attribuut er
     via een andere weg op staat: uit is uit. */
  [class*="rlb--beweeg-"][data-rl-anim="uit"] { opacity: 1; transform: none; }
  [class*="rlb--beweeg-"][data-rl-anim] { transition: none; }
}

/* ========================================================================
   106. DE SPELERBALK: VOLUME EN DE HERVAT-STAND
   ========================================================================
   Aanvulling op de balk van deel 41 (de vakken en de golfvorm). Hier staat
   alleen wat daar nog ontbrak: de volumeschuif naast de dempknop, en de
   "tik om verder te luisteren"-stand waarin de balk belandt als de browser
   het hervatten van het geluid na een paginawissel weigert (autoplay). */

/* Het lege anker uit bouw-pagina.php is hidden tot rl.js hem vult; het
   display:flex van deel 41 mag dat hidden niet overstemmen. */
.rlb-speler-balk[hidden] { display: none; }

/* --- de volumeschuif --------------------------------------------------- */

/* De schuif staat in de rij bedieningsvakken en krijgt dezelfde scheidslijn
   als de vakken, zodat hij bij de dempknop ernaast hoort. */
.rlb-balk-volume {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 var(--rlb-r4);
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.rlb-balk-volume--uit { opacity: .55; }

/* Een echte <input type=range>. De input zelf is 44px hoog — het raakdoel
   voor een duim — terwijl de getekende baan 6px blijft, net als de baan van
   de voortgang. */
.rlb-balk-volume-schuif {
  width: clamp(64px, 9vw, 110px);
  height: 44px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.rlb-balk-volume-schuif:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
  border-radius: 6px;
}
.rlb-balk-volume-schuif::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.rlb-balk-volume-schuif::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -5px; /* (16 - 6) / 2: de knop gecentreerd op de baan */
  border: 2px solid #000;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
}
.rlb-balk-volume-schuif::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.rlb-balk-volume-schuif::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 2px solid #000;
  border-radius: 50%;
  background: var(--merk-accent, #E2000F);
}

/* Smal scherm: de losse vakken verdwijnen daar al (deel 41), maar het volume
   blijft — dat is nou juist de knop die bezoekers misten. Alleen smaller. */
@media (max-width: 600px) {
  .rlb-balk-volume { padding: 0 var(--rlb-r2); }
  .rlb-balk-volume-schuif { width: 64px; }
}

/* --- de "tik om verder te luisteren"-stand ------------------------------ */

/* rl.js zet data-wacht="1" als de browser het hervatten van het geluid na
   een paginawissel weigert. De afspeelknop vraagt dan om die ene tik. */
.rlb-speler-balk[data-wacht="1"] .rlb-balk-vak--speel {
  animation: rlb-balk-tik 1.4s ease-in-out infinite;
}
@keyframes rlb-balk-tik {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .85); }
}

@media (prefers-reduced-motion: reduce) {
  /* Geen pulsering, wel nadruk: een vaste witte binnenrand op de knop. */
  .rlb-speler-balk[data-wacht="1"] .rlb-balk-vak--speel {
    animation: none;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85);
  }
}

/* ========================================================================
   107. DE PRODUCTDETAILPAGINA — /winkel/<slug>/
   ========================================================================
   Bijenkorf als referentie, in de Re-Lex-huisstijl: beeld links, een
   meescrollend koopblok rechts (zelfde sticky-opzet als het kassa-paneel
   in deel 102, dus met --rlb-kopbalk-h en niet met een eigen getal), de
   accordeon in de bestaande rlb-faq-opmaak eronder, en op een telefoon een
   vaste koopbalk onderin die BOVEN de spelerbalk gaat staan zodra die
   actief is — zelfde stapeling als de zijtab in deel 24.
   ======================================================================== */

.rlb-pd {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rlb-ruimte-m, var(--rlb-r5)) clamp(var(--rlb-r5), 4vw, 3.5rem);
  align-items: start;
}

/* --- het beeld, met de zoom van de galerij ------------------------------ */

.rlb-pd-beeldvak {
  overflow: hidden;
  border-radius: var(--merk-radius_kaart, 10px);
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-pd-beeld {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.rlb-pd-beeldvak:hover .rlb-pd-beeld { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .rlb-pd-beeld { transition: none; }
  .rlb-pd-beeldvak:hover .rlb-pd-beeld { transform: none; }
}
.rlb-pd-beeldvak--leeg { aspect-ratio: 1; }

/* --- de audiopreview onder het beeld ------------------------------------ */

.rlb-pd-preview {
  margin-top: var(--rlb-ruimte-s, .875rem);
  padding: var(--rlb-r2) var(--rlb-r4);
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
}
.rlb-pd-kopje {
  display: flex; align-items: center; gap: var(--rlb-r2);
  margin: var(--rlb-r2) 0 var(--rlb-r1);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pd-kopje .rlb-icoon { color: var(--merk-accent, #E2000F); }

/* --- het koopblok: de kaart die meescrollt ------------------------------ */

.rlb-pd-koop {
  display: grid;
  gap: var(--rlb-ruimte-s, .875rem);
  padding: var(--rlb-ruimte-m, var(--rlb-r5));
  border: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #FFFFFF);
}
@media (min-width: 861px) {
  /* De hoogte van de plakkende kopbalk staat in --rlb-kopbalk-h (deel 87);
     die hier overtypen zou een tweede waarheid zijn. */
  .rlb-pd-koop {
    position: sticky;
    top: calc(var(--rlb-kopbalk-h, 88px) + 1.5rem);
  }
}

.rlb-pd-naam { margin: 0; font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; }
.rlb-pd-ondertitel { margin: 0; color: var(--merk-gedempt, #696F77); }

.rlb-pd-prijs {
  margin: 0;
  display: flex; align-items: baseline; gap: var(--rlb-r2); flex-wrap: wrap;
  font-size: 1.375rem;
  font-weight: 700;
}
.rlb-pd-van { font-size: 1rem; font-weight: 600; color: var(--merk-gedempt, #696F77); }
.rlb-pd-bedrag { color: var(--merk-inkt, #1A1D21); }
.rlb-pd-btw { font-size: .8125rem; font-weight: 500; color: var(--merk-gedempt, #696F77); }

/* --- de variantkiezer: dezelfde pillen als het merkenfilter ------------- */

.rlb-pd-varianten { margin: 0; padding: 0; border: 0; }
.rlb-pd-kieslabel {
  display: block;
  margin-bottom: var(--rlb-r2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pd-pillen {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r2);
  margin: 0; padding: 0; list-style: none;
}
.rlb-pd-pil-prijs { font-weight: 500; opacity: .75; }
.rlb-pd-pil--uit { opacity: .45; text-decoration: line-through; }

/* --- aantal en voorraad -------------------------------------------------- */

.rlb-pd-regel { display: grid; gap: var(--rlb-r2); }
.rlb-pd-aantal { width: 6.5rem; }

.rlb-pd-voorraad {
  margin: 0;
  display: flex; align-items: center; gap: var(--rlb-r2);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--merk-status_vrij, #2F7D4F);
}
.rlb-pd-voorraad::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rlb-pd-voorraad--laag { color: var(--merk-status_deels, #8A5B00); }
.rlb-pd-voorraad--uit { color: var(--merk-status_bezet, #8C3A33); }

/* --- de knop en de melding ----------------------------------------------- */

.rlb-pd-knop { justify-content: center; }
.rlb-pd-knop:disabled {
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-gedempt, #696F77);
  border-color: var(--merk-lijn, #E8EAEC);
  cursor: not-allowed;
  transform: none;
}
.rlb-pd-knop--ok { background: var(--merk-status_vrij, #2F7D4F); border-color: var(--merk-status_vrij, #2F7D4F); color: #fff; }

.rlb-pd-melding {
  margin: 0;
  padding: var(--rlb-r2) var(--rlb-r4);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F6F7F8);
  font-size: .9375rem;
}
.rlb-pd-melding-link { font-weight: 700; color: var(--merk-accent_donker, #A50B00); }
.rlb-pd-geenjs { margin: 0; font-size: .875rem; color: var(--merk-gedempt, #696F77); }

/* --- de accordeon: rlb-faq-opmaak, over de volle breedte ----------------- */

.rlb-pd-info { grid-column: 1 / -1; }

.rlb-pd-formaten { margin: var(--rlb-r2) 0 0; padding-left: var(--rlb-r4); }
.rlb-pd-formaten li { margin: .15rem 0; }

.rlb-pd-specs { display: grid; gap: 0; margin: 0; }
.rlb-pd-spec {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr);
  gap: var(--rlb-r4);
  padding: var(--rlb-r2) 0;
  border-bottom: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
}
.rlb-pd-spec:last-child { border-bottom: 0; }
.rlb-pd-spec dt { font-weight: 600; color: var(--merk-gedempt, #696F77); }
.rlb-pd-spec dd { margin: 0; }

/* --- de vaste koopbalk op een telefoon ----------------------------------
   Alleen onder 861px; daarboven plakt het koopblok zelf al. z-index 70:
   onder de spelerbalk (80), boven de rest. Staat de speler aan, dan krijgt
   body .rlb-speler-actief en schuift de balk er bovenop — zelfde haakje als
   de zijtab in deel 24. */

.rlb-pd-balk { display: none; }

@media (max-width: 860px) {
  .rlb-pd { grid-template-columns: minmax(0, 1fr); }

  .rlb-pd-balk {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: var(--rlb-r4);
    padding: .6rem clamp(.9rem, 4vw, var(--rlb-r5));
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--merk-grond, #FFFFFF);
    border-top: var(--rlb-rand, 1px solid var(--merk-lijn, #E8EAEC));
    box-shadow: 0 -10px 30px rgba(10, 20, 32, .12);
  }
  body.rlb-speler-actief .rlb-pd-balk {
    bottom: var(--rlb-balk-h, 72px);
    padding-bottom: var(--rlb-r2);
  }

  .rlb-pd-balk-info { display: grid; min-width: 0; flex: 1 1 auto; }
  .rlb-pd-balk-naam {
    font-weight: 700;
    font-size: .9375rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rlb-pd-balk-prijs { font-size: .875rem; color: var(--merk-gedempt, #696F77); }
  .rlb-pd-balk .rlb-pd-knop { flex: none; padding: var(--rlb-r2) var(--rlb-r4); }

  /* Lucht onder de sectie, anders valt de accordeon achter de vaste balk. */
  .rlb-productdetail { padding-bottom: var(--rlb-r8); }
}

@media print {
  .rlb-pd-balk { display: none !important; }
}

/* ========================================================================
   108. DE KLANTOMGEVING — /account/
   ========================================================================
   De schil komt uit nxrl_blok_account(); assets/account.js vult de inhoud.
   Alles leest de merktokens met een fallback, dus licht en donker werken
   zonder één harde kleur — behalve de foutrood-tinten en de schaduw, en
   die zijn bewust in beide modi gelijk. */

.rlb-account { position: relative; }

/* --- de toasts: WAT er gebeurde, of WAAROM niet ------------------------ */
.rlb-account-toasts {
  position: fixed;
  right: clamp(.75rem, 3vw, 1.5rem);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: grid;
  gap: var(--rlb-r2);
  max-width: min(26rem, calc(100vw - 2rem));
}
body.rlb-speler-actief .rlb-account-toasts { bottom: calc(var(--rlb-speler-h, 76px) + 1rem); }
.rlb-account-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--rlb-r2);
  padding: .8rem var(--rlb-r4);
  border-radius: var(--merk-radius_kaart, 10px);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  background: var(--merk-paneel, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: .9375rem;
  cursor: pointer;
}
.rlb-account-toast--fout { border-color: var(--merk-status_bezet, #8C3A33); }
.rlb-account-toast--fout .rlb-account-toast-teken { color: var(--merk-status_bezet, #8C3A33); }
.rlb-account-toast-teken {
  flex: none;
  font-weight: 900;
  color: var(--merk-accent_donker, #A50B00);
}
@media (prefers-reduced-motion: no-preference) {
  .rlb-account-toast { animation: rlb-acc-toast .22s cubic-bezier(.2, .7, .3, 1); }
  @keyframes rlb-acc-toast {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* --- de poort: inloggen en registreren -------------------------------- */
.rlb-account-poortgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--rlb-ruimte-m, var(--rlb-r5));
  align-items: start;
}
.rlb-account-kaart {
  background: var(--merk-paneel, #FFFFFF);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: clamp(1.25rem, 3vw, var(--rlb-r6));
  min-width: 0;
}
.rlb-account-kaarttitel { margin: 0 0 var(--rlb-r2); font-size: 1.375rem; }
.rlb-account-kaarttekst { color: var(--merk-tekst, #3D444D); }
.rlb-account-kaarttekst p { margin: 0 0 var(--rlb-r4); }

.rlb-account-voordelen {
  list-style: none;
  margin: 0 0 var(--rlb-r4);
  padding: 0;
  display: grid;
  gap: var(--rlb-r2);
}
.rlb-account-voordelen li { display: flex; gap: var(--rlb-r2); align-items: flex-start; }
.rlb-account-voordelen svg { flex: none; margin-top: var(--rlb-r1); color: var(--merk-accent, #E2000F); }

.rlb-account-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rlb-r4); }
.rlb-account-form .rlb-veld { grid-column: 1 / -1; }
.rlb-account-form .rlb-veld:has(#rl-acc-reg-voornaam),
.rlb-account-form .rlb-veld:has(#rl-acc-reg-achternaam) { grid-column: auto; }
.rlb-account-form button[type="submit"] { grid-column: 1 / -1; justify-content: center; }
.rlb-account-privacynoot {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-account-schakel {
  grid-column: 1 / -1;
  justify-self: start;
  background: none;
  border: 0;
  padding: var(--rlb-r2) 0;
  min-height: 44px;             /* raakdoel */
  font: inherit;
  font-size: .9375rem;
  color: var(--merk-accent_donker, #A50B00);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rlb-account-schakel:hover { color: var(--merk-inkt, #1A1D21); }

.rlb-account-wacht { color: var(--merk-gedempt, #696F77); }
.rlb-account-geenjs {
  background: var(--merk-vlak, #F6F7F8);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: var(--rlb-r4) 1.25rem;
}

/* --- de schil: zijbalk links, inhoud rechts ---------------------------- */
.rlb-account-schil {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--rlb-ruimte-l, 2.5rem);
  align-items: start;
}

.rlb-account-zijbalk {
  position: sticky;
  top: 108px;                  /* onder de plakkende kopbalk */
  background: var(--merk-paneel, #FFFFFF);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: var(--rlb-r3);
}
.rlb-account-wie {
  margin: var(--rlb-r1) var(--rlb-r3) var(--rlb-r3);
  font-family: var(--merk-font-kop, "Montserrat", sans-serif);
  font-weight: 800;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
  overflow-wrap: anywhere;
}
.rlb-account-zijbalk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.rlb-account-item {
  display: flex;
  align-items: center;
  gap: var(--rlb-r3);
  width: 100%;
  min-height: 44px;            /* raakdoel */
  padding: .55rem var(--rlb-r3);
  border: 0;
  border-radius: calc(var(--merk-radius_kaart, 10px) - 4px);
  background: none;
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--merk-tekst, #3D444D);
  cursor: pointer;
  transition: background var(--rlb-overgang, 180ms), color var(--rlb-overgang, 180ms);
}
@media (prefers-reduced-motion: reduce) {
  .rlb-account-item { transition: none; }
}
.rlb-account-item svg { flex: none; }
.rlb-account-item:hover {
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
}
.rlb-account-item.is-actief {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-weight: 700;
}
.rlb-account-item--uit { color: var(--merk-gedempt, #696F77); margin-top: var(--rlb-r2); }

.rlb-account-teller {
  margin-left: auto;
  min-width: 1.4rem;
  padding: .1rem var(--rlb-r2);
  border-radius: 999px;
  background: var(--merk-cerise, #E2000F);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.rlb-account-item.is-actief .rlb-account-teller {
  background: var(--merk-op_accent, #FFFFFF);
  color: var(--merk-accent, #E2000F);
}

.rlb-account-menuknop { display: none; }

/* --- de inhoud --------------------------------------------------------- */
.rlb-account-inhoud { min-width: 0; display: grid; gap: var(--rlb-ruimte-m, 1.5rem); }
/* Na een sectiewissel zet account.js de focus hier; de ring van
   :focus-visible blijft gewoon werken voor toetsenbordgebruik. */
.rlb-account-inhoud:focus { outline: none; }

.rlb-account-sectietitel { margin: 0; font-size: 1.5rem; }
.rlb-account-blok {
  background: var(--merk-paneel, #FFFFFF);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: clamp(var(--rlb-r4), 2.5vw, var(--rlb-r5));
  min-width: 0;
}
.rlb-account-blok h3 { margin: 0 0 var(--rlb-r3); font-size: 1.0625rem; }
.rlb-account-leeg { color: var(--merk-gedempt, #696F77); margin: 0; }

/* Regels in lijsten (bestellingen, downloads, facturen, gesprekken). */
.rlb-account-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r2) var(--rlb-r4);
  padding: var(--rlb-r3) 0;
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-account-rij:first-of-type { border-top: 0; padding-top: 0; }
.rlb-account-rij-kop { font-weight: 700; color: var(--merk-inkt, #1A1D21); overflow-wrap: anywhere; }
.rlb-account-rij-sub { font-size: .875rem; color: var(--merk-gedempt, #696F77); flex-basis: 100%; }
.rlb-account-rij .rlb-knop { margin-left: auto; }

/* Statuspil. De kleur ondersteunt; de tekst zelf draagt de betekenis. */
.rlb-account-pil {
  display: inline-block;
  padding: .15rem var(--rlb-r2);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  background: var(--merk-vlak, #F6F7F8);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  color: var(--merk-tekst, #3D444D);
}
.rlb-account-pil--goed {
  background: var(--merk-accent, #E2000F);
  border-color: transparent;
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-account-pil--let {
  background: var(--merk-cerise, #E2000F);
  border-color: transparent;
  color: #fff;
}

/* De status-tijdlijn van een boeking:
   aangevraagd → bevestigd → (aan)betaald → gespeeld. */
.rlb-account-tijdlijn {
  list-style: none;
  margin: var(--rlb-r3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rlb-r1);
}
.rlb-account-tijdlijn li {
  position: relative;
  padding-top: var(--rlb-r5);
  font-size: .8125rem;
  color: var(--merk-gedempt, #696F77);
  text-align: center;
}
.rlb-account-tijdlijn li::before {
  content: "";
  position: absolute;
  top: .35rem;
  left: 50%;
  transform: translateX(-50%);
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: var(--merk-vlak, #F6F7F8);
  border: 2px solid var(--merk-lijn, #E8EAEC);
  z-index: 1;
}
.rlb-account-tijdlijn li::after {
  content: "";
  position: absolute;
  top: .72rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--merk-lijn, #E8EAEC);
}
.rlb-account-tijdlijn li:first-child::after { display: none; }
.rlb-account-tijdlijn li.is-gehaald { color: var(--merk-inkt, #1A1D21); font-weight: 600; }
.rlb-account-tijdlijn li.is-gehaald::before {
  background: var(--merk-accent, #E2000F);
  border-color: var(--merk-accent, #E2000F);
}
.rlb-account-tijdlijn li.is-gehaald::after { background: var(--merk-accent, #E2000F); }

/* Berichten: de bellen. */
.rlb-account-bel {
  max-width: 44rem;
  margin: 0 0 var(--rlb-r2);
  padding: var(--rlb-r3) var(--rlb-r4);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F6F7F8);
  border: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-account-bel--klant {
  margin-left: auto;
  background: var(--merk-accent, #E2000F);
  border-color: transparent;
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-account-bel--klant .rlb-account-bel-meta { color: var(--merk-op_accent, #FFFFFF); opacity: .8; }
.rlb-account-bel p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rlb-account-bel-meta {
  margin: 0 0 var(--rlb-r1) !important;
  font-size: .75rem;
  color: var(--merk-gedempt, #696F77);
  white-space: normal;
}

/* Sterren kiezen bij een review. */
.rlb-account-sterren { display: inline-flex; gap: .15rem; }
.rlb-account-sterren button {
  background: none;
  border: 0;
  padding: var(--rlb-r1);
  min-width: 44px;
  min-height: 44px;            /* raakdoel */
  font-size: 1.5rem;
  line-height: 1;
  color: var(--merk-lijn, #E8EAEC);
  cursor: pointer;
}
.rlb-account-sterren button.is-aan { color: var(--merk-accent, #E2000F); }

/* Formulieren in de secties hergebruiken .rlb-veld / .rlb-invoer. */
.rlb-account-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rlb-r4); }
.rlb-account-formgrid .rlb-veld--vol { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .rlb-account-formgrid { grid-template-columns: 1fr; }
  .rlb-account-form { grid-template-columns: 1fr; }
}

/* De wijzigings-datepicker leent de boekerkalender (.rlb-kalender). */
.rlb-account-kalendervak { max-width: 26rem; }

/* Gevarenzone (account verwijderen). */
.rlb-account-blok--gevaar { border-color: var(--merk-status_bezet, #8C3A33); }
.rlb-account-blok--gevaar h3 { color: var(--merk-status_bezet, #8C3A33); }

/* --- mobiel: de zijbalk wordt een bovenbalk met een menuknop ----------- */
@media (max-width: 860px) {
  .rlb-account-schil { grid-template-columns: 1fr; gap: var(--rlb-ruimte-m, 1.5rem); }
  .rlb-account-menuknop {
    display: inline-flex;
    align-items: center;
    gap: var(--rlb-r2);
    min-height: 44px;
    padding: var(--rlb-r2) var(--rlb-r4);
    border: 1px solid var(--merk-lijn, #E8EAEC);
    border-radius: var(--merk-radius_knop, 30px);
    background: var(--merk-paneel, #FFFFFF);
    color: var(--merk-inkt, #1A1D21);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    justify-self: start;
  }
  .rlb-account-zijbalk { position: static; }
  .rlb-account-zijbalk[hidden] { display: none; }
}

/* ========================================================================
   109. HET COLOFON IN DE VOETTEKST
   ========================================================================
   De bouwer-credit onder de copyrightregel, gedempt en gecentreerd, hover
   in het accent. Beheerbaar via het veld `colofon` van rl-footer. */

.rlb-footer-colofon {
  margin: var(--rlb-r3) 0 0;
  font-size: .8125rem;
  color: var(--merk-gedempt, #696F77);
  text-align: center;
}
.rlb-footer-colofon a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rlb-footer-colofon a:hover { color: var(--merk-accent, #E2000F); }

/* === rl-embed: gekeurde externe widget (TheFork / kaart) ================
   Server-side geparkeerd via consent.js (data-tr-src). De poster is de
   kaart die vóór toestemming en zonder JavaScript zichtbaar blijft. */
.rlb-embed { max-width: 920px; margin-inline: auto; }
.rlb-embed-details { border: 0; }
.rlb-embed-samenvatting {
  list-style: none;
  cursor: pointer;
  display: block;
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
}
.rlb-embed-samenvatting::-webkit-details-marker { display: none; }
.rlb-embed-poster {
  position: relative;
  display: flex;
  min-height: 220px;
  align-items: flex-end;
  padding: clamp(20px, 4vw, 36px);
  background: var(--merk-vlak, #F6F7F8);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 12px);
  color: var(--merk-tekst, #3D444D);
}
.rlb-embed-poster-achter { position: absolute; inset: 0; z-index: 0; }
.rlb-embed-poster-achter .rlb-embed-poster-beeld,
.rlb-embed-poster-achter img { width: 100%; height: 100%; object-fit: cover; }
.rlb-embed-sluier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,33,61,.15), rgba(20,33,61,.78));
}
.rlb-embed-poster-achter + * , .rlb-embed-poster-inhoud { position: relative; z-index: 1; }
.rlb-embed-poster--opbeeld .rlb-embed-poster-inhoud,
.rlb-embed-poster-achter ~ .rlb-embed-poster-inhoud { color: #fff; }
.rlb-embed-poster-inhoud { max-width: 46ch; }
.rlb-embed-badge {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  padding: 6px var(--rlb-r3); margin-bottom: var(--rlb-r3);
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  color: var(--merk-op_accent, #FFFFFF);
  background: var(--merk-accent, #E2000F);
  border-radius: 999px;
}
.rlb-embed-badge svg { width: 18px; height: 18px; }
.rlb-embed-poster-tekst { margin: 0 0 var(--rlb-r4); line-height: 1.55; }
.rlb-embed-toon {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--merk-cerise, #E2000F);
}
.rlb-embed-poster-achter ~ .rlb-embed-poster-inhoud .rlb-embed-toon { color: #fff; }
.rlb-embed-details[open] .rlb-embed-toon { display: none; }
.rlb-embed-details[open] .rlb-embed-poster { min-height: 0; }
.rlb-embed-vak {
  position: relative;
  height: var(--rlb-embed-h, 520px);
  margin-top: var(--rlb-r3);
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-embed-frame { width: 100%; height: 100%; border: 0; display: block; }
.rlb-embed-terugval { margin: var(--rlb-r4) 0 0; text-align: center; }
@media (max-width: 767px) {
  .rlb-embed-poster { min-height: 180px; }
  .rlb-embed-vak { height: min(var(--rlb-embed-h, 520px), 78vh); }
}

/* =====================================================================
 * ZWETS — BELEVING: HOVER, ONTHULLING EN BEWEGING
 *
 * Hier stond tot 8 november 2026 een tweede knopsysteem van de vorige
 * klant: diepblauw vlak met een gouden randje, goud verloop op de
 * stapnummers, gouden kopjes in de voettekst - alles met !important,
 * zodat het sectie 68 hierboven overrulede. Daardoor was de hoofdknop
 * marineblauw met goud terwijl config/brand.json rood voorschrijft, en
 * kwam #E2000F in dit hele bestand geen enkele keer voor.
 *
 * Het is weg. De knop staat nu één keer beschreven (sectie 68) en krijgt
 * hier geen tweede mening. Wat blijft is wat dit blok werkelijk toevoegde:
 * beweging. Hover-lift, beeld dat inzoomt, een pijl die meeschuift, de
 * ken-burns op de hero. Alles achter prefers-reduced-motion waar het
 * ongevraagd beweegt.
 * ===================================================================== */
:root {
  /* Eén curve voor alle beweging op de site, zodat hover overal hetzelfde
     aanvoelt. Niet lineair: dat oogt mechanisch. */
  --merk-curve: cubic-bezier(.2, .7, .3, 1);
}

/* De hoofdknop beweegt subtiel mee. Kleur komt uit sectie 68; hier staat
   alleen hoe hij zich gedraagt. */
.rlb-knop--primair,
.rlb-zijtab-knop,
.rlb-knop--secundair {
  transition: background-color .2s var(--merk-curve),
              color .2s var(--merk-curve),
              border-color .2s var(--merk-curve),
              box-shadow .2s var(--merk-curve),
              transform .2s var(--merk-curve);
}
.rlb-knop--primair:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--merk-accent, #E2000F) 22%, transparent); }

/* De zwevende aanvraagknop dankt zijn plek aan `transform: rotate(-90deg)`
   (zie .rlb-zijtab--rechts .rlb-zijtab-knop). Een hover-lift met een eigen
   `transform: translateY()` VERVANGT die rotatie en klapt de tab uit zijn
   hoek. Hij krijgt dus wel kleur en schaduw, maar raakt transform niet aan. */
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--merk-accent, #E2000F) 28%, transparent);
  transform: rotate(-90deg);
}

/* SECUNDAIRE knop: outline in de lijnkleur, vult bij hover met het accent. */
.rlb-knop--secundair {
  background: transparent;
  color: var(--merk-inkt, #1A1D21);
  border: 1.5px solid var(--merk-lijn, #E8EAEC);
  box-shadow: none;
}
.rlb-knop--secundair:hover {
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  border-color: var(--merk-accent, #E2000F);
  transform: translateY(-2px);
}
/* Op donkere secties en over een hero: witte outline. */
.rlb--vlak-diepblauw .rlb-knop--secundair,
.rlb--vlak-inkt .rlb-knop--secundair,
.rlb-hero--achter .rlb-knop--secundair,
.rlb-hero--achtergrond .rlb-knop--secundair {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.rlb--vlak-diepblauw .rlb-knop--secundair:hover,
.rlb--vlak-inkt .rlb-knop--secundair:hover,
.rlb-hero--achter .rlb-knop--secundair:hover,
.rlb-hero--achtergrond .rlb-knop--secundair:hover {
  background: #fff;
  color: var(--merk-inkt, #1A1D21);
  border-color: #fff;
}

/* Grote stapnummers: egaal rood. Het was een goudverloop met
   background-clip:text - mooi, maar het is een getal, geen sieraad, en op
   een verloop is de leesbaarheid niet te meten. */
.rlb-stap-nummer,
.rlb-stappen--genummerd .rlb-stap-item::before {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--merk-accent, #E2000F);
}

/* ---- Kaart-hover: zacht liften, accentrand, beeld licht inzoomen ---- */
.rlb-ger-link,
.rlb-galerij-link,
a.rlb-product-link {
  transition: transform .24s var(--merk-curve),
              box-shadow .24s var(--merk-curve),
              border-color .24s var(--merk-curve);
}
.rlb-ger-beeldvak,
.rlb-galerij-item,
.rlb-ger-beeldvak :where(img, picture) {
  overflow: hidden;
}
.rlb-ger-beeld,
.rlb-galerij-beeld {
  transition: transform .4s var(--merk-curve);
  will-change: transform;
}
.rlb-ger-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--merk-inkt, #1A1D21) 14%, transparent);
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent);
}
.rlb-ger-link:hover .rlb-ger-beeld,
.rlb-galerij-link:hover .rlb-galerij-beeld {
  transform: scale(1.05);
}

/* De "Ontdek meer"-pijl in een dienstenkaart schuift op bij hover. */
.rlb-ger-meer {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  margin-top: var(--rlb-r3);
  font-weight: 700;
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-ger-meer::after {
  content: "\2192";
  transition: transform .22s var(--merk-curve);
}
.rlb-ger-link:hover .rlb-ger-meer::after { transform: translateX(5px); }

/* ---- De dienstencarrousel: peek rechts, scroll-snap ---- */
.rlb-ger-raster--carrousel {
  display: flex;
  gap: var(--rlb-r4, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--rlb-r2);
  scrollbar-width: none;
}
.rlb-ger-raster--carrousel::-webkit-scrollbar { display: none; }
.rlb-ger-raster--carrousel .rlb-ger-item {
  flex: 0 0 clamp(260px, 30%, 360px);
  scroll-snap-align: start;
}

/* ---- Hero: subtiele ken-burns inzoom ---- */
@media (prefers-reduced-motion: no-preference) {
  .rlb-hero--achter .rlb-hero-achterbeeld {
    animation: zw-kenburns 22s ease-in-out both;
  }
  @keyframes zw-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.11); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-knop--primair:hover,
  .rlb-knop--secundair:hover,
  .rlb-ger-link:hover { transform: none; }
  .rlb-ger-link:hover .rlb-ger-beeld,
  .rlb-galerij-link:hover .rlb-galerij-beeld { transform: none; }
}

/* =====================================================================
 * ZWETS — DONKERE SECTIES (ritme & drama) + GELIJKE REVIEWKAARTEN
 * ===================================================================== */

/* Donkere vlakvarianten voor bewuste contrast-secties (sfeer, quote, CTA).
   Wit op diepblauw haalt 14:1; de gouden accenten lichten licht op naar een
   helder goud dat op donker leesbaar is (#E3B341 haalt ~9:1 op diepblauw). */
.rlb--vlak-diepblauw { background: var(--merk-diepblauw, #0E284B); color: #fff; }
.rlb--vlak-inkt      { background: var(--merk-inkt, #1A1D21); color: #fff; }
.rlb--vlak-diepblauw :where(h1, h2, h3, h4, h5, .rlb-titel, .rlb-hero-titel),
.rlb--vlak-inkt :where(h1, h2, h3, h4, h5, .rlb-titel) { color: #fff; }
.rlb--vlak-diepblauw :where(p, li, .rlb-tekst, .rlb-intro),
.rlb--vlak-inkt :where(p, li, .rlb-tekst, .rlb-intro) { color: var(--rlb-op-donker-licht); }
.rlb--vlak-diepblauw :where(.rlb-kicker, .rlb-eyebrow),
.rlb--vlak-inkt :where(.rlb-kicker, .rlb-eyebrow) { color: var(--merk-accent_op_donker, #E2000F); }
.rlb--vlak-diepblauw :where(a:not(.rlb-knop)),
.rlb--vlak-inkt :where(a:not(.rlb-knop)) { color: var(--merk-accent_op_donker, #E2000F); }
/* De kopstreep onder een sectiekop in goud, als chique accentlijn op donker. */
.rlb--vlak-diepblauw .rlb-kop::after,
.rlb--vlak-inkt .rlb-kop::after { background: var(--merk-accent_donker, #A50B00); }
/* Witte kaarten (reviews, gerelateerd) blijven leesbaar op de donkere grond. */

/* Reviewkaarten in de google-carrousel even hoog, naam onderaan uitgelijnd. */
.rlb-reviews--google .rlb-reviewkaarten { align-items: stretch; }
.rlb-reviews--google .rlb-review { height: auto; }
.rlb-reviewkaarten > .rlb-review { display: flex; flex-direction: column; }
.rlb-reviewkaarten > .rlb-review .rlb-review-wie { margin-top: auto; }
/* De scorekaart links even hoog als de kaartenrij ernaast. */
.rlb-reviews--google .rlb-reviewbalk { align-items: stretch; }
.rlb-reviews--google .rlb-reviewscore { height: 100%; justify-content: center; }

/* Secundaire knoppen op donkere secties: witte rand + witte tekst (gouden
   rand/tekst zou op diepblauw te weinig contrast geven). */
.rlb--vlak-diepblauw .rlb-knop--secundair,
.rlb--vlak-inkt .rlb-knop--secundair {
  border-color: rgba(255, 255, 255, .6); color: #fff;
}
.rlb--vlak-diepblauw .rlb-knop--secundair:hover,
.rlb--vlak-inkt .rlb-knop--secundair:hover {
  border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff;
}

/* =====================================================================
 * ZWETS — MENUKAART (rl-menukaart)
 * Scanbare restaurantkaart: categorieën in twee kolommen op breed scherm,
 * per gerecht naam + omschrijving links, prijs rechts uitgelijnd met een
 * subtiele gouden stippellijn ertussen. Alle waarden komen uit de Studio.
 * ===================================================================== */
.rlb-menu-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(var(--rlb-r5), 3vw, 2.75rem);
  align-items: start;
}
.rlb-menu-cat { break-inside: avoid; }
.rlb-menu-cat + .rlb-menu-cat { margin-top: 0; }
.rlb-menu-cat-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--rlb-r3);
  margin: 0 0 var(--rlb-r4);
  padding-bottom: var(--rlb-r2);
  border-bottom: 2px solid color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent);
  font-size: 1.3rem;
}
.rlb-menu-cat-kop > span:first-child { color: var(--merk-inkt, #1A1D21); }
.rlb-menu-cat-prijs {
  flex: none;
  font-size: 1.0625rem; font-weight: 800;
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-menu-cat-oms {
  margin: -.4rem 0 var(--rlb-r4);
  font-size: .9375rem; font-style: italic;
  color: var(--merk-gedempt, #696F77);
}
.rlb-menu-lijst { list-style: none; margin: 0; padding: 0; }
.rlb-menu-rij {
  display: flex; align-items: baseline; gap: var(--rlb-r2);
  padding: var(--rlb-r2) 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--merk-lijn, #E8EAEC) 85%, var(--merk-accent, #E2000F));
}
.rlb-menu-rij:last-child { border-bottom: 0; }
.rlb-menu-tekst { min-width: 0; flex: 1 1 auto; }
.rlb-menu-naam {
  display: block;
  font-weight: 700; font-size: 1.0625rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-menu-oms {
  display: block; margin-top: .15rem;
  font-size: .9375rem; line-height: 1.5;
  color: var(--merk-gedempt, #696F77);
}
.rlb-menu-prijs {
  flex: none; align-self: baseline;
  font-weight: 800; font-size: 1.0625rem;
  color: var(--merk-accent_donker, #A50B00);
  white-space: nowrap;
}
/* Op donkere secties de koppen/namen wit en de prijs helder goud. */
.rlb--vlak-diepblauw .rlb-menu-cat-kop > span:first-child,
.rlb--vlak-diepblauw .rlb-menu-naam { color: #fff; }
.rlb--vlak-diepblauw .rlb-menu-cat-prijs,
.rlb--vlak-diepblauw .rlb-menu-prijs { color: var(--merk-accent_op_donker, #E2000F); }

/* =====================================================================
 * ZWETS — DIENSTEN-/GELEGENHEID-KAARTEN (full-image, tekst eroverheen)
 * De rl-gerelateerd carrousel wordt een rij full-image kaarten: foto vult de
 * hele kaart, een genummerde badge linksboven, en onderaan over een donker
 * verloop-scrim de witte titel + regel + "ontdek meer". Zo is de tekst altijd
 * leesbaar, ongeacht de foto. Gelijk hoog, peek-overflow, hover-zoom + lift.
 * ===================================================================== */
.rlb-gerelateerd--carrousel .rlb-ger-raster--carrousel { counter-reset: dienst; align-items: stretch; }
.rlb-gerelateerd--carrousel .rlb-ger-item {
  counter-increment: dienst;
  flex: 0 0 clamp(260px, 30%, 340px);
  scroll-snap-align: start;
  display: flex;
}
.rlb-gerelateerd--carrousel .rlb-ger-link {
  position: relative; display: block; width: 100%;
  min-height: clamp(380px, 48vh, 460px);
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 16%, transparent);
  border: 0;
}
.rlb-gerelateerd--carrousel .rlb-ger-beeldvak {
  position: absolute; inset: 0; margin: 0; border-radius: 0;
}
.rlb-gerelateerd--carrousel .rlb-ger-beeld,
.rlb-gerelateerd--carrousel .rlb-ger-beeldvak :where(img, picture) {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Genummerde badge linksboven, wit. */
.rlb-gerelateerd--carrousel .rlb-ger-link::before {
  content: counter(dienst, decimal-leading-zero);
  position: absolute; top: .9rem; left: 1.1rem; z-index: 3;
  color: #fff; font-weight: 800; font-size: 1.1rem; letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
/* Donker verloop-scrim onderaan — altijd, voor leesbaarheid witte tekst. */
.rlb-gerelateerd--carrousel .rlb-ger-link::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(0deg,
    rgba(10, 20, 32, .88) 0%, rgba(10, 20, 32, .55) 30%, rgba(10, 20, 32, 0) 62%);
}
.rlb-gerelateerd--carrousel .rlb-ger-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: var(--rlb-r1);
  padding: var(--rlb-r4) var(--rlb-r4) var(--rlb-r4);
}
.rlb-gerelateerd--carrousel .rlb-ger-titel { color: #fff; font-size: 1.3rem; margin: 0; }
.rlb-gerelateerd--carrousel .rlb-ger-tekst { color: var(--rlb-op-donker-zacht); font-size: .9375rem; line-height: 1.5; margin: 0; }
.rlb-gerelateerd--carrousel .rlb-ger-meer { color: var(--merk-accent_op_donker, #E2000F); margin-top: var(--rlb-r2); }
.rlb-gerelateerd--carrousel .rlb-ger-meer::after { content: "\2192"; }
.rlb-gerelateerd--carrousel .rlb-ger-link:hover { transform: translateY(-4px); box-shadow: 0 16px 34px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 26%, transparent); }
.rlb-gerelateerd--carrousel .rlb-ger-link:hover .rlb-ger-beeld { transform: scale(1.06); }
.rlb-gerelateerd--carrousel .rlb-ger-link:hover .rlb-ger-meer::after { transform: translateX(5px); }

/* =====================================================================
 * ZWETS — BEELD-CARROUSEL (galerij) strak: verborgen scrollbars + pijlen,
 * gelijke kaarten (vaste ratio), overlay-bijschrift met scrim.
 * ===================================================================== */
.rlb-galerij--carrousel .rlb-galerij {
  display: flex;
  gap: var(--rlb-r4, 1.1rem);
  overflow-x: auto;
  overflow-y: hidden;              /* nooit een verticale scrollbar */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
  padding: var(--rlb-r1) 0 var(--rlb-r2);
  margin: 0; list-style: none;
}
.rlb-galerij--carrousel .rlb-galerij::-webkit-scrollbar { display: none; }  /* WebKit */
.rlb-galerij--carrousel .rlb-galerij-item {
  flex: 0 0 clamp(230px, 26%, 300px);
  scroll-snap-align: start;
  position: relative;
  margin: 0;
  border-radius: var(--merk-radius_beeld, 10px);
  overflow: hidden;
}
.rlb-galerij--carrousel .rlb-galerij-link,
.rlb-galerij--carrousel .rlb-galerij-item > .rlb-galerij-beeld,
.rlb-galerij--carrousel .rlb-galerij-item picture { display: block; height: 100%; }
.rlb-galerij--carrousel .rlb-galerij-beeld,
.rlb-galerij--carrousel .rlb-galerij-item :where(img) {
  width: 100%;
  aspect-ratio: 4 / 3;            /* alle kaarten gelijk hoog */
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--merk-curve, ease);
}
.rlb-galerij--carrousel .rlb-galerij-link:hover .rlb-galerij-beeld { transform: scale(1.06); }
/* Bijschrift als elegant overlay-label onderaan met donkere scrim. */
.rlb-galerij--carrousel .rlb-galerij-tekst {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: var(--rlb-r5) var(--rlb-r4) var(--rlb-r3);
  color: #fff; font-size: .9375rem; font-weight: 600;
  background: linear-gradient(0deg, rgba(10,20,32,.82) 0%, rgba(10,20,32,0) 100%);
}

/* =====================================================================
 * ZWETS — MEGA-MENU (header dropdown-panelen, CSS-only, toetsenbaar)
 * Verschijnt op :hover én :focus-within (Tab), sluit zodra de focus het
 * paneel verlaat. Vol-breedte wit paneel met goud accent en kolommen.
 * ===================================================================== */
.rlb-header { position: relative; }
.rlb-nav-heeft-paneel { position: static; }
.rlb-nav-pijl {
  display: inline-block; width: .5em; height: .5em; margin-left: .35em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--merk-curve, ease);
}
.rlb-nav-heeft-paneel:hover .rlb-nav-pijl,
.rlb-nav-heeft-paneel:focus-within .rlb-nav-pijl { transform: rotate(225deg) translateY(2px); }
.rlb-nav-paneel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--merk-grond, #FFFFFF);
  border-top: 3px solid var(--merk-accent, #E2000F);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 16%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--merk-curve, ease), transform .18s var(--merk-curve, ease), visibility .18s;
  z-index: 60;
}
.rlb-nav-heeft-paneel:hover .rlb-nav-paneel,
.rlb-nav-heeft-paneel:focus-within .rlb-nav-paneel {
  opacity: 1; visibility: visible; transform: none;
}
.rlb-nav-paneel-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-block: clamp(var(--rlb-r5), 2.5vw, 2.25rem);
  align-items: start;
}
.rlb-nav-koltitel {
  margin: 0 0 var(--rlb-r2); font-size: .8125rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-nav-kolom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.rlb-nav-kolom a {
  display: block; padding: var(--rlb-r2) var(--rlb-r2); border-radius: 10px;
  text-decoration: none; transition: background-color .15s var(--merk-curve, ease);
}
.rlb-nav-kolom a:hover,
.rlb-nav-kolom a:focus-visible { background: var(--merk-vlak, #F6F7F8); }
.rlb-nav-sublabel { display: block; font-weight: 700; color: var(--merk-inkt, #1A1D21); }
.rlb-nav-subtekst { display: block; font-size: .8125rem; color: var(--merk-gedempt, #696F77); margin-top: .1rem; }
.rlb-nav-kolom--beeld { display: flex; flex-direction: column; gap: var(--rlb-r3); }
.rlb-nav-kolom--beeld .rlb-nav-paneelbeeld img { width: 100%; height: auto; border-radius: var(--merk-radius_beeld, 10px); object-fit: cover; }
/* Mobiele subitems iets ingesprongen en gedempt. */
.rlb-navlink--sub { padding-left: var(--rlb-r5) !important; font-size: .95rem; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .rlb-nav-paneel { transition: none; }
}

/* =====================================================================
 * ZWETS — FORMULIER-FIXES
 * 1. [hidden] moet winnen van display:grid/flex op o.a. .rlb-stap en .rlb-knop,
 *    anders toont de multistep-boeker ALLE stappen + Terug/Volgende/Verstuur
 *    tegelijk (de "kapotte" vorm). Dit herstelt de echte multistep: één stap
 *    zichtbaar, knoppen wisselen, Verstuur alleen op de laatste stap.
 * 2. Het aanvraagformulier op een nette, gecentreerde leesbreedte zodat er
 *    geen half-leeg wit vlak naast staat.
 * ===================================================================== */
[hidden] { display: none !important; }

.rlb-boeker-formulier { max-width: 780px; margin-inline: auto; }
.rlb-boeker .rlb-stap-nav { justify-content: space-between; margin-top: var(--rlb-ruimte-m, 1.25rem); }

/* =====================================================================
 * ZWETS — USP-BELEVINGSKAARTEN (met foto): "Waarom Zwets"-pijlers
 * Foto boven, tekst eronder, gelijke hoogte, hover-lift, goud accentlijn.
 * ===================================================================== */
.rlb-usps--metbeeld .rlb-usp-raster { align-items: stretch; }
.rlb-usps--metbeeld .rlb-usp { height: 100%; }
.rlb-usps--metbeeld .rlb-usp-vak,
.rlb-usps--metbeeld .rlb-usp-link {
  display: flex; flex-direction: column; height: 100%; gap: 0;
  background: var(--merk-paneel, #FFFFFF);
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-top: 3px solid var(--merk-accent, #E2000F);
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 8%, transparent);
  transition: transform .24s var(--merk-curve, ease), box-shadow .24s var(--merk-curve, ease);
}
.rlb-usps--metbeeld .rlb-usp-beeldvak { display: block; overflow: hidden; }
.rlb-usps--metbeeld .rlb-usp-beeld {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .4s var(--merk-curve, ease);
}
.rlb-usps--metbeeld .rlb-usp-titel { margin: 0; padding: var(--rlb-r4) var(--rlb-r4) 0; }
.rlb-usps--metbeeld .rlb-usp-tekst { margin: var(--rlb-r1) 0 0; padding: 0 var(--rlb-r4) var(--rlb-r4); }
.rlb-usps--metbeeld .rlb-usp-vak:hover,
.rlb-usps--metbeeld .rlb-usp-link:hover { transform: translateY(-4px); box-shadow: 0 16px 34px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 16%, transparent); }
.rlb-usps--metbeeld .rlb-usp-vak:hover .rlb-usp-beeld,
.rlb-usps--metbeeld .rlb-usp-link:hover .rlb-usp-beeld { transform: scale(1.05); }

/* =====================================================================
 * ZWETS — FULL-WIDTH PEEK DIENSTEN-CARROUSEL (TC-effect "schuif door")
 * Kop + intro + pijlen blijven in de 1440-kolom; de kaartenrij breekt naar
 * rechts uit tot de schermrand, met de volgende kaart die rechts inpiept.
 * body heeft overflow-x:hidden, dus geen horizontale pagina-scroll.
 * ===================================================================== */
.rlb-gerelateerd--carrousel .rlb-ger-raster--carrousel {
  margin-right: calc(-1 * (50vw - 50%));   /* door tot de rechter schermrand */
  padding-right: clamp(var(--rlb-r4), 6vw, 5rem);   /* laatste kaart niet tegen de rand */
  scroll-padding-left: 0;
}
@media (max-width: 767px) {
  .rlb-gerelateerd--carrousel .rlb-ger-raster--carrousel { padding-right: 18%; }
  .rlb-gerelateerd--carrousel .rlb-ger-item { flex-basis: 78%; }
}

/* =====================================================================
 * ZWETS — MOZAÏEK-BEELDGRID (asymmetrisch, ronde hoeken + gap)
 * Repurpose van de mozaiek-weergave: één groot beeld links + kleinere rechts,
 * ronde hoeken, nette gap, hover-zoom. (Was een naadloze full-bleed muur.)
 * ===================================================================== */
.rlb-galerij--mozaiek > .rlb-binnen {
  max-width: var(--rlb-max, 1440px);
  padding-inline: clamp(var(--rlb-r4), 4vw, 2.5rem);
}
.rlb-galerij--mozaiek .rlb-galerij {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(120px, 15vw, 190px);
  gap: clamp(.6rem, 1.4vw, var(--rlb-r4));
}
.rlb-galerij--mozaiek .rlb-galerij-item {
  border-radius: var(--merk-radius_kaart, 14px);
  overflow: hidden; position: relative;
}
.rlb-galerij--mozaiek .rlb-galerij-item:first-child { grid-column: span 2; grid-row: span 2; }
.rlb-galerij--mozaiek .rlb-galerij-link,
.rlb-galerij--mozaiek .rlb-galerij-beeld { height: 100%; }
.rlb-galerij--mozaiek .rlb-galerij-beeld {
  width: 100%; aspect-ratio: auto; object-fit: cover;
  border-radius: 0;
}
.rlb-galerij--mozaiek .rlb-galerij-item:first-child { grid-column: span 2; grid-row: span 2; }
.rlb-galerij--mozaiek .rlb-galerij-link:hover .rlb-galerij-beeld { transform: scale(1.05); }
.rlb-galerij--mozaiek .rlb-galerij-tekst { display: none; }
@media (max-width: 640px) {
  .rlb-galerij--mozaiek .rlb-galerij { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
}

/* =====================================================================
 * ZWETS — HEADER/MEGA-MENU: schone tekst zonder waas
 * De transparante header over de hero gebruikte een text-shadow/drop-shadow
 * voor leesbaarheid; die waas lekte ook in het witte mega-menu-paneel. Nu:
 * geen letter-waas meer, maar een nette donkere scrim bovenaan de header voor
 * leesbaarheid, en het paneel heeft alleen een zachte box-shadow.
 * ===================================================================== */
.rlb-header { position: relative; isolation: isolate; }
.rlb-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180%;
  background: linear-gradient(180deg, rgba(8, 20, 40, .55) 0%, rgba(8, 20, 40, 0) 100%);
  z-index: -1; pointer-events: none;
  transition: opacity .2s ease;
}
.rlb-header[data-rl-gescrold="1"]::before { opacity: 0; }
/* Geen waas meer achter de letters/logo. */
.rlb-header .rlb-nav,
.rlb-header .rlb-tel { text-shadow: none !important; }
.rlb-header .rlb-logo { filter: none !important; }
/* Het mega-menu-paneel: scherpe tekst, enkel een nette schaduw onder het paneel. */
.rlb-nav-paneel,
.rlb-nav-paneel :where(a, p, span, li) { text-shadow: none !important; }
.rlb-nav-sublabel { color: var(--merk-inkt, #1A1D21); }

/* =====================================================================
 * ZWETS — PREMIUM RITME: royale, consistente sectie-tussenruimte
 * Grotere, rustige sectie-gaps (ca. 72-128px) voor een clean, moderne
 * uitstraling op Mollie/Revolut-niveau. Eén bron, hele site consistent.
 * ===================================================================== */
:root {
  --rlb-sectie-top: clamp(4.5rem, 7vw, 8rem);
  --rlb-sectie-bot: clamp(4.5rem, 7vw, 8rem);
}
@media (max-width: 767px) {
  :root { --rlb-sectie-top: clamp(3rem, 9vw, 4.5rem); --rlb-sectie-bot: clamp(3rem, 9vw, 4.5rem); }
}

/* =====================================================================
 * ZWETS — DEFINITIEVE HEADER (transparant over hero, egaal bij scroll)
 * Geen gloed/waas: alle scrim/shadow/blur/accentlijn achter de header weg.
 * De leesbaarheid van de witte menu-tekst komt van een subtiele donkere
 * top-gradient op de HERO zelf (niet op de header).
 * ===================================================================== */
.rlb-header::before { display: none !important; }   /* mijn eerdere scrim weg */
.rlb-header::after  { display: none !important; }   /* blauw-cerise accentlijn/gloed weg */
.rlb-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  isolation: auto;
}
/* Witte, scherpe tekst over de hero — geen letter-waas. */
.rlb-header .rlb-navlink,
.rlb-header .rlb-tel,
.rlb-header .rlb-merk-tekst,
.rlb-header .rlb-mobiel > summary { color: #fff; text-shadow: none !important; }
.rlb-header .rlb-logo { filter: none !important; }
.rlb-header .rlb-nav { text-shadow: none !important; }

/* Bij scrollen (voorbij de hero): egale WITTE balk, donkere tekst, nette
   zachte schaduw — geen gloed. */
.rlb-header[data-rl-gescrold="1"] {
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(10, 20, 32, .09) !important;
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC) !important;
}
.rlb-header[data-rl-gescrold="1"] .rlb-navlink,
.rlb-header[data-rl-gescrold="1"] .rlb-tel,
.rlb-header[data-rl-gescrold="1"] .rlb-merk-tekst,
.rlb-header[data-rl-gescrold="1"] .rlb-mobiel > summary { color: var(--merk-inkt, #1A1D21); }
.rlb-header[data-rl-gescrold="1"] .rlb-navlink:hover,
.rlb-header[data-rl-gescrold="1"] .rlb-navlink--actief { color: var(--merk-accent_donker, #A50B00); }

/* Nette uitlijning binnen de 1440-kolom, consistente hoogte, verticaal
   gecentreerd. Logo links, menu + telefoon + knop rechts op één lijn. */
.rlb-header .rlb-header-rij { min-height: 84px; align-items: center; }

/* Subtiele donkere top-gradient OP DE HERO (full-width) zodat de witte nav
   over de hele breedte leesbaar is — ook boven het lichte deel van de foto. */
.rlb-hero--achter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background: linear-gradient(180deg, rgba(6, 16, 34, .55) 0%, rgba(6, 16, 34, 0) 100%);
  z-index: 1; pointer-events: none;
}

/* =====================================================================
 * ZWETS — CARROUSEL-KOP EXACT OP DE PAGINAMARGE (links uitgelijnd)
 * De kop/eyebrow/intro staan als normaal blok links op de 1440-kolomrand
 * (identiek aan andere sectiekoppen); de pijlen rechtsboven absoluut.
 * ===================================================================== */
.rlb-gerelateerd--carrousel .rlb-carrousel-kop {
  display: block; position: relative;
  padding-right: var(--rlb-r9);   /* ruimte voor de pijlen rechtsboven */
}
.rlb-gerelateerd--carrousel .rlb-carrousel-kop > .rlb-kop { margin: 0; max-width: var(--rlb-tekst-max); }
.rlb-gerelateerd--carrousel .rlb-carrousel-nav {
  position: absolute; right: 0; top: 0;
}

/* =====================================================================
 * ZWETS — DIEPBLAUW IS EEN VLAK, GEEN OPPERVLAKTEKLEUR
 *
 * Hier stond tot 8 november 2026 het omgekeerde: acht selectors kregen met
 * !important dezelfde diepblauwe gradient - voettekst, hero, CTA-band,
 * mobiel menu, beide donkere vlakvarianten. Daarmee was diepblauw de
 * dragende kleur van de site, terwijl config/brand.json zegt:
 *
 *   "Diepblauw is teruggebracht tot een enkel vlak (voettekst, hooguit een
 *    impactsectie) - niet meer een dragende oppervlaktekleur."
 *
 * Nu dus: de VOETTEKST is dat ene vlak. Alles daarboven is wit of
 * lichtgrijs, met rood als enige kleur. Een blok dat toch donker moet zijn
 * vraagt daar expliciet om via .rlb--vlak-diepblauw of .rlb--vlak-inkt -
 * dat is een keuze per blok in de Studio, geen voorgebakken achtergrond.
 *
 * Geen enkele regel hier gebruikt !important. Sectie 68 beschrijft de knop;
 * dit blok beschrijft het OPPERVLAK waar hij op staat, en die twee hoeven
 * niet te vechten.
 * ===================================================================== */

/* Het ene diepblauwe vlak. */
.rlb-footer {
  background: var(--merk-diepblauw, #0E284B);
  color: #fff;
}
.rlb-footer-kop { color: var(--merk-accent_op_donker, #E2000F); }
.rlb-footer-kolom a { color: var(--rlb-op-donker-licht); }
.rlb-footer-kolom a:hover { color: #fff; }
.rlb-footer .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

/* Een blok dat er expliciet om vraagt. Zeldzaam, en dat is de bedoeling. */
.rlb--vlak-diepblauw { background: var(--merk-diepblauw, #0E284B); color: #fff; }
.rlb--vlak-inkt      { background: var(--merk-inkt, #1A1D21); color: #fff; }

/* De hero met een foto erachter: de achtergrondkleur is alleen zichtbaar in
   de fractie voor het beeld er is. Neutraal grafiet, geen merkkleur - anders
   flitst er een blauw vlak voorbij dat nergens anders op de pagina staat. */
.rlb-hero--achter,
.rlb-hero--metvinyl { background: var(--merk-inkt, #1A1D21); }

/* De CTA-band. Was diepblauw, is nu lichtgrijs: dit is de plek waar de
   aanvraagknop staat, en op lichtgrijs is rood het enige dat kleur heeft.
   Precies wat Marijn vroeg - "cleaner, meer wit en licht grijs". */
.rlb-cta-sectie {
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-tekst, #3D444D);
}
.rlb-cta-sectie :where(h1, h2, h3, .rlb-titel) { color: var(--merk-inkt, #1A1D21); }
.rlb-cta-sectie .rlb-kicker { color: var(--merk-accent_donker, #A50B00); }
/* De variant MET foto houdt zijn eigen donkere sluier; zie sectie 69. */
.rlb-cta-sectie--beeld { background: #000; color: #fff; }
.rlb-cta-sectie--beeld :where(h1, h2, h3, .rlb-titel) { color: #fff; }
.rlb-cta-sectie--beeld .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

/* Het mobiele menu: wit paneel, donkere tekst. Een uitklappend menu is
   navigatie, geen sfeerbeeld. */
.rlb-mobiel-nav {
  background: var(--merk-grond, #FFFFFF);
  color: var(--merk-inkt, #1A1D21);
}
.rlb-mobiel-nav li + li { border-top-color: var(--merk-lijn, #E8EAEC); }

/* De kicker en de accentlijn op elk donker vlak: hetzelfde rood. */
.rlb--vlak-diepblauw .rlb-kicker,
.rlb--vlak-inkt .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

/* =====================================================================
 * ZWETS — TEKSTBEELD FOTOCOLLAGE (asymmetrisch, ronde hoeken, kleine gap)
 * Eerste foto groot (2x2), drie kleiner ernaast. Op mobiel netjes gestapeld.
 * ===================================================================== */
.rlb-tb-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(var(--rlb-r2), 1vw, .85rem);
  aspect-ratio: 1 / 1;
}
.rlb-tb-collagetegel { border-radius: var(--merk-radius_kaart, 14px); overflow: hidden; min-height: 0; }
.rlb-tb-collagetegel:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.rlb-tb-collagebeeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--merk-curve, ease);
}
.rlb-tb-collagetegel:hover .rlb-tb-collagebeeld { transform: scale(1.05); }
@media (max-width: 640px) {
  .rlb-tb-collage { aspect-ratio: auto; grid-auto-rows: 42vw; }
}


/* =====================================================================
 * ZWETS — RESERVEER-MODAL (fade + scale-in) & PARALLAX-afstemming
 * ===================================================================== */
.rlb-reserveer-modal {
  border: 0; padding: 0; margin: auto;
  width: min(560px, 94vw); max-width: 94vw; max-height: 92vh;
  background: transparent; overflow: visible;
  opacity: 0; transform: scale(.96) translateY(6px);
  transition: opacity .24s var(--merk-curve, ease), transform .24s var(--merk-curve, ease),
              overlay .24s allow-discrete, display .24s allow-discrete;
}
.rlb-reserveer-modal[open] { opacity: 1; transform: none; }
@starting-style { .rlb-reserveer-modal[open] { opacity: 0; transform: scale(.96) translateY(6px); } }
.rlb-reserveer-modal::backdrop {
  background: rgba(6, 16, 34, .55);
  opacity: 0; transition: opacity .24s ease, overlay .24s allow-discrete, display .24s allow-discrete;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.rlb-reserveer-modal[open]::backdrop { opacity: 1; }
@starting-style { .rlb-reserveer-modal[open]::backdrop { opacity: 0; } }
.rlb-reserveer-kaart {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(6, 16, 34, .45);
  display: flex; flex-direction: column; max-height: 92vh;
}
.rlb-reserveer-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rlb-r4); padding: var(--rlb-r4) var(--rlb-r4);
  background: var(--merk-diep-gradient, var(--merk-diepblauw, #0E284B)); color: #fff;
}
.rlb-reserveer-kop strong { font-size: 1.05rem; }
.rlb-reserveer-sluit {
  appearance: none; border: 0; background: transparent; color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: .1rem var(--rlb-r2); border-radius: 8px;
}
.rlb-reserveer-sluit:hover { background: rgba(255, 255, 255, .15); }
.rlb-reserveer-body { position: relative; background: #fff; }
.rlb-reserveer-iframe { display: block; width: 100%; height: 60vh; max-height: 560px; border: 0; }
.rlb-reserveer-voet { margin: 0; padding: var(--rlb-r2) var(--rlb-r4); font-size: .85rem; color: var(--merk-gedempt, #696F77); background: #fff; }
.rlb-reserveer-voet a { color: var(--merk-accent_donker, #A50B00); }
@media (max-width: 640px) {
  .rlb-reserveer-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; }
  .rlb-reserveer-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; }
  .rlb-reserveer-kaart { border-radius: 0; max-height: 100vh; height: 100vh; }
  .rlb-reserveer-kaart { border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .rlb-reserveer-iframe { height: calc(100vh - 112px); max-height: none; }
  .rlb-reserveer-iframe { height: calc(100dvh - 112px); max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-reserveer-modal, .rlb-reserveer-modal::backdrop { transition: none; }
  .rlb-reserveer-modal { transform: none; }
}
/* Parallax zet zelf de transform op het herobeeld; de CSS-ken-burns zou daar
   bovenop botsen (animaties winnen van inline transform), dus uit. */
.rlb-hero--achter .rlb-hero-achterbeeld { animation: none !important; }


/* Zwets footer-colofon: links uitlijnen (gelijk met © en Cookievoorkeuren),
   gedempte consistente kleur, link in goud bij hover. */
.rlb-footer-colofon {
  text-align: left !important;
  color: rgba(255,255,255,.55) !important;
}
.rlb-footer-colofon a { color: rgba(255,255,255,.75) !important; font-weight: 600; }
.rlb-footer-colofon a:hover { color: var(--merk-accent_op_donker, #E2000F) !important; }


/* Diensten-carrousel: eerste kaart begint op de linkerlijn van de kop (.rlb-binnen) */
.rlb-galerij--carrousel .rlb-galerij { padding-left: 0; scroll-padding-left: 0; margin-left: 0; }
.rlb-galerij--carrousel .rlb-galerij-item:first-child { margin-left: 0; }

/* =====================================================================
 * ZWETS — MENUKAART TABS (CSS-only radio-hack, één categorie per keer)
 * Lange kaarten (cafetaria) worden getabd i.p.v. een tekstmuur. Werkt zonder
 * JS; de radios zijn verborgen maar focusbaar (pijltjestoetsen wisselen tab).
 * ===================================================================== */
.rlb-menukaart--tabs .rlb-menu-radio {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0;
}
.rlb-menu-tabbar {
  display: flex; gap: var(--rlb-r1); flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 2px solid var(--merk-lijn, #E8EAEC);
  margin-bottom: var(--rlb-ruimte-m, 1.25rem);
}
.rlb-menu-tabbar::-webkit-scrollbar { display: none; }
.rlb-menu-tab {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  padding: .65rem var(--rlb-r4); font-weight: 700; font-size: 1rem;
  color: var(--merk-gedempt, #696F77);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s var(--merk-curve, ease), border-color .15s var(--merk-curve, ease);
}
.rlb-menu-tab:hover { color: var(--merk-inkt, #1A1D21); }
.rlb-menu-panelen > .rlb-menu-cat { display: none; }
/* In tabs is de tab-tekst al de categorienaam: paneel-kop alleen tonen als er
   een categorieprijs bij hoort (bv. "Salades € 15,95"). */
.rlb-menukaart--tabs .rlb-menu-cat-kop { display: none; }
.rlb-menukaart--tabs .rlb-menu-cat-kop:has(.rlb-menu-cat-prijs) { display: flex; }
.rlb-menukaart--tabs .rlb-menu-lijst { max-width: 860px; }
/* Zebra-rijen, naam links / prijs rechts, geen stippellijn in tabs. */
.rlb-menukaart--tabs .rlb-menu-rij { border-bottom: 0; padding: var(--rlb-r2) var(--rlb-r3); border-radius: 8px; }
.rlb-menukaart--tabs .rlb-menu-rij:nth-child(odd) { background: var(--merk-vlak, #F6F7F8); }
.rlb-menu-radio:nth-of-type(1):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(1),
.rlb-menu-radio:nth-of-type(2):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(2),
.rlb-menu-radio:nth-of-type(3):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(3),
.rlb-menu-radio:nth-of-type(4):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(4),
.rlb-menu-radio:nth-of-type(5):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(5),
.rlb-menu-radio:nth-of-type(6):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(6),
.rlb-menu-radio:nth-of-type(7):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(7),
.rlb-menu-radio:nth-of-type(8):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(8),
.rlb-menu-radio:nth-of-type(9):checked ~ .rlb-menu-panelen > .rlb-menu-cat:nth-child(9) { display: block; }
.rlb-menu-radio:nth-of-type(1):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(1),
.rlb-menu-radio:nth-of-type(2):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(2),
.rlb-menu-radio:nth-of-type(3):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(3),
.rlb-menu-radio:nth-of-type(4):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(4),
.rlb-menu-radio:nth-of-type(5):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(5),
.rlb-menu-radio:nth-of-type(6):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(6),
.rlb-menu-radio:nth-of-type(7):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(7),
.rlb-menu-radio:nth-of-type(8):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(8),
.rlb-menu-radio:nth-of-type(9):checked ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(9) {
  color: var(--merk-accent_donker, #A50B00); border-bottom-color: var(--merk-accent, #E2000F);
}
.rlb-menu-radio:nth-of-type(1):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(1),
.rlb-menu-radio:nth-of-type(2):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(2),
.rlb-menu-radio:nth-of-type(3):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(3),
.rlb-menu-radio:nth-of-type(4):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(4),
.rlb-menu-radio:nth-of-type(5):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(5),
.rlb-menu-radio:nth-of-type(6):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(6),
.rlb-menu-radio:nth-of-type(7):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(7),
.rlb-menu-radio:nth-of-type(8):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(8),
.rlb-menu-radio:nth-of-type(9):focus-visible ~ .rlb-menu-tabbar > .rlb-menu-tab:nth-child(9) { outline: 2px solid var(--merk-accent, #E2000F); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
 * ZWETS — STAPPEN: grote gouden nummers (01/02/03-gevoel), ruime kolommen
 * ===================================================================== */
/* Het nummer werd geschilderd met `background: <verloop>` plus
   `background-clip: text` en `color: transparent`. Dat werkte zolang het een
   goudverloop was. Toen daar een egale kleur voor in de plaats kwam, wiste
   `background-color: transparent !important` verderop (ZWETS - STAPNUMMERS
   ZONDER RAND) precies die kleur: de cijfers 1 t/m 5 waren onzichtbaar, en
   er was niets rood om op te vallen - alleen het streepje eronder stond er.

   Een getal is tekst. Dus: color, geen achtergrondtruc. */
.rlb-stappen--genummerd .rlb-stap-nummer,
.rlb-stap-nummer {
  width: auto; height: auto; border-radius: 0; margin-bottom: var(--rlb-r2);
  font-size: clamp(2.6rem, 4.5vw, 3.4rem); line-height: 1; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--merk-accent, #E2000F);
}
/* Een fijn rood lijntje onder het nummer als accent. */
.rlb-stap-item .rlb-stap-nummer::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: var(--rlb-r2);
  background: var(--merk-accent, #E2000F); border-radius: 2px;
  -webkit-text-fill-color: initial;
}

/* Diensten-carrousel: raster begint op de linkerlijn van de kop (.rlb-binnen),
   loopt alleen naar rechts full-bleed. Linkerkant uitlijnen. */
.rlb-gerelateerd--carrousel .rlb-ger-raster--carrousel {
  margin-left: 0 !important;
  padding-left: 0 !important;
  scroll-padding-left: 0 !important;
}
.rlb-gerelateerd--carrousel .rlb-ger-item:first-child { margin-left: 0 !important; }

/* ========================================================================
   ZWETS — de mooie blauwe gradient (licht → donker, diagonaal) overal
   Basis voor blauwe knoppen, footer en blauwe secties. Consistent.
   ======================================================================== */
:root {
  --zwets-blauw-grad: linear-gradient(135deg, var(--merk-diepblauw_licht, #17396A) 0%, var(--merk-diepblauw_licht, #17396A) 40%, var(--merk-diepblauw, #0E284B) 70%, var(--merk-diepblauw, #0E284B) 100%);
}
/* Hier stond het DERDE knopsysteem: dezelfde blauwe gradient met een gouden
   randje, met !important, en omdat het achteraan in het bestand stond won
   het van alles erboven. Dat was de knop die Marijn op zijn scherm zag.
   Weg. De knop staat in sectie 68 en nergens anders. */




/* ========================================================================
   ZWETS — DE DONKERE KLEUR, OP ÉÉN PLEK (definitief)

   Hiervoor stonden hier vijf losse pogingen die elkaar met !important
   overschreven; de laatste won en dat was een platte #0B2A5B zonder
   gradient — vandaar dat de footer lichter en vlakker oogde dan de
   banner. Die vijf blokken zijn weg. Dit is de enige plek waar de
   donkere kleur nog wordt gezet.

   De kleur is exact die van de "Bestel online"-banner: de diepblauwe
   basis-gradient MET de donkere sluier die daar als los laagje overheen
   ligt. Die twee samen maken het bijna-zwarte navy links dat naar rechts
   opklaart. Zwart als eigen kleur komt nergens meer voor.
   ======================================================================== */
:root {
  --zwets-diep-basis:  linear-gradient(160deg, var(--merk-diepblauw, #0E284B) 0%, var(--merk-diepblauw, #0E284B) 55%, var(--merk-diepblauw, #0E284B) 100%);
  --zwets-diep-sluier: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%);
  --zwets-diep: var(--zwets-diep-sluier), var(--zwets-diep-basis);
}

/* HIER STOND DE LIJST WEER VOL. Deze regel zette negen selectors met
   !important terug op het diepblauw - inclusief .rlb-cta-sectie, die
   verderop juist lichtgrijs is gemaakt omdat brand.json diepblauw tot EEN
   vlak beperkt. Omdat deze regel later in het bestand staat en !important
   draagt, won hij, en was de CTA-band op elke pagina alsnog donkerblauw.

   Wat overblijft: de voettekst, en blokken die er in de Studio expliciet om
   vragen. De CTA-band met foto houdt zijn eigen zwarte sluier. */
.rlb-footer,
.rlb--vlak-diep,
.rlb--vlak-diepblauw,
.rlb--vlak-inkt {
  background: var(--zwets-diep) !important;
  color: #fff !important;
}

/* De banner heeft de sluier al als eigen element (.rlb-uit-sluier). Nu de
   sluier in de achtergrond zit zou hij daar dubbel vallen — dus uitzetten.
   Zo zien banner, footer en reviews er precies hetzelfde uit. */
.rlb--vlak-diepblauw > .rlb-uit-sluier { background: none; }

/* ---- Footer: leesbaar op dat donker -------------------------------- */
.rlb-footer-merk      { color: #fff !important; }
.rlb-footer-intro     { color: rgba(255,255,255,.78) !important; }
.rlb-footer-kop,
.rlb-footer .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F) !important; }
.rlb-footer-kolom a   { color: var(--rlb-op-donker-licht) !important; }
.rlb-footer-kolom a:hover { color: #fff !important; }
.rlb-footer-copy      { color: rgba(255,255,255,.60) !important; }
.rlb-footer-juridisch a { color: rgba(255,255,255,.80) !important; }
.rlb-footer-juridisch a:hover { color: var(--merk-accent_op_donker, #E2000F) !important; }
.rlb-footer-sociaal a { border-color: rgba(255,255,255,.35) !important; color: #fff !important; }
.rlb-footer-sociaal a:hover { border-color: var(--merk-accent_op_donker, #E2000F) !important; color: var(--merk-accent_op_donker, #E2000F) !important; }
.rlb-footer-onder     { border-top-color: rgba(255,255,255,.14) !important; }

/* De colofon stond gecentreerd en liep daardoor niet in de lijn van de
   copyrightregel en de cookieknop eronder. Links, net als de rest. */
.rlb-footer .rlb-footer-colofon {
  text-align: left !important;
  margin-top: var(--rlb-r4);
  color: rgba(255,255,255,.55) !important;
}
.rlb-footer .rlb-footer-colofon a { color: rgba(255,255,255,.75) !important; font-weight: 600; }
.rlb-footer .rlb-footer-colofon a:hover { color: var(--merk-accent_op_donker, #E2000F) !important; }

/* Vijf kolommen (merk + vier menu's) pasten niet in een raster van vier,
   dus "Juridisch" viel naar een tweede rij met een gat ernaast. */
@media (min-width: 1024px) {
  .rlb-footer-rij { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
}

/* ---- Diensten-carrousel: links op de paginamarge -------------------- */
/* Tekstsecties zetten hun kop in een smalle linkerkolom en de rest in
   kolom 2. Bij de carrousel zit de kop binnen .rlb-carrousel-kop en matcht
   dus niet als .rlb-kop — waardoor kop én kaarten allebei naar kolom 2
   schoven en de hele carrousel ~20rem naar rechts stond. Hier terug naar
   één kolom, zodat "Vier keer Zwets" en de eerste kaart op dezelfde
   linkerlijn beginnen als elke andere sectiekop. */
@media (min-width: 1024px) {
  section.rlb-gerelateerd--carrousel > .rlb-binnen { display: block; }
  section.rlb-gerelateerd--carrousel > .rlb-binnen > *:not(.rlb-kop) { grid-column: auto; }
}

/* De scrim op de carrouselkaarten was bijna zwart; nu diepblauw, zodat ook
   daar dezelfde kleur terugkomt. Titels blijven wit en leesbaar. */
.rlb-gerelateerd--carrousel .rlb-ger-link::after {
  background: linear-gradient(0deg,
    rgba(7, 28, 62, .90) 0%, rgba(7, 28, 62, .58) 32%, rgba(7, 28, 62, 0) 64%);
}
.rlb-gerelateerd--carrousel .rlb-ger-titel { color: #fff !important; }

/* ========================================================================
   ZWETS — REVIEWSECTIE: leesbaar cijfer + gelijke kaarten

   Het cijfer "4,4" en "251 reviews" stonden in #DCE6EF op een WITTE kaart.
   Oorzaak: de sectie is .rlb--vlak-diepblauw en die zet met
   `:where(p, li, ...)` alle tekst op lichtblauw. :where() heeft
   specificiteit 0, maar de regel staat LATER in het bestand dan de
   scorekaart-regels — dus bij gelijkspel won hij alsnog. Hier zetten we de
   tekst binnen witte kaarten expliciet terug op donker.
   ======================================================================== */

.rlb--vlak-diepblauw .rlb-reviewscore :where(p, li, span, b),
.rlb--vlak-diepblauw .rlb-review :where(p, li, span) {
  color: var(--merk-inkt, #1A1D21);
}
.rlb-reviews--google .rlb-reviewscore-cijfer b {
  color: var(--merk-inkt, #1A1D21);
  font-size: clamp(2.6rem, 4.4vw, 3.4rem);
  letter-spacing: -.03em;
}
.rlb-reviews--google .rlb-reviewscore-cijfer span,
.rlb-reviews--google .rlb-reviewscore-aantal {
  color: var(--merk-gedempt, #696F77);              /* 6,2:1 op wit */
  font-weight: 600;
}
.rlb-reviews--google .rlb-reviewscore-aantal { font-size: 1rem; }
/* De link stond op goud (a:not(.rlb-knop) van de donkere sectie) — op een
   witte kaart haalt dat geen 3:1. Diepblauw met gouden onderlijn. */
.rlb--vlak-diepblauw .rlb-reviewscore-link {
  color: var(--merk-inkt, #1A1D21) !important;
  text-decoration-color: var(--merk-accent, #E2000F);
  text-decoration-thickness: 2px;
}
.rlb--vlak-diepblauw .rlb-reviewscore-link:hover { color: var(--merk-accent_donker, #A50B00) !important; }
/* Sterren blijven goud, ook binnen de witte kaart. */
.rlb--vlak-diepblauw .rlb-reviewscore .rlb-sterren,
.rlb--vlak-diepblauw .rlb-review .rlb-sterren { color: var(--merk-accent_op_donker, #E2000F); }
.rlb-reviews--google .rlb-review-naam { color: var(--merk-inkt, #1A1D21); }
.rlb-reviews--google .rlb-review-bron,
.rlb-reviews--google .rlb-review-datum { color: var(--merk-gedempt, #696F77); }

/* ---- Scorekaart en reviewkaarten even groot ------------------------- */
/* De scorekaart stond op height:100% en liep dus van de bovenkant van de
   kolom tot onderaan, terwijl de kaartenrij pas ónder de carrouselkop
   begint. Daardoor was links zichtbaar hoger dan rechts. De kop krijgt nu
   een vaste hoogte en de scorekaart exact diezelfde voorsprong als marge;
   `stretch` trekt hem dan precies zo hoog als de kaarten ernaast. */
@media (min-width: 1024px) {
  .rlb-reviews--google .rlb-reviewbalk { --rlb-reviewkop-h: 2.5rem; align-items: stretch; }
  .rlb-reviews--google .rlb-reviewrij > .rlb-carrousel-kop {
    height: var(--rlb-reviewkop-h);
    margin: 0 0 var(--rlb-reviewgap, var(--rlb-r4));
    align-items: center;
  }
  .rlb-reviews--google .rlb-reviewscore {
    height: auto;
    margin-top: calc(var(--rlb-reviewkop-h) + var(--rlb-reviewgap, var(--rlb-r4)) + var(--rlb-r1));
    margin-bottom: var(--rlb-r3);     /* gelijk aan de padding onder de kaartenrij */
    justify-content: center;
  }
}

/* Alle reviewkaarten even groot: gelijke hoogte was er al, maar de tekst
   mocht de kaart nog uitrekken. Een vaste regelhoogte + gelijke binnenruimte
   maakt de rij rustig; langere citaten krijgen gewoon meer regels en de
   naam blijft onderaan staan (margin-top: auto). */ .rlb-reviewkaarten > .rlb-review{
  padding: clamp(1.25rem, 2vw, 1.75rem);
  gap: var(--rlb-r3);
  border-color: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.rlb-reviews--google .rlb-review-tekst p {
  color: var(--merk-inkt, #1A1D21);
  line-height: 1.5;
}
.rlb-reviews--google .rlb-review-wie {
  padding-top: var(--rlb-r3);
  border-top: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
}

/* ========================================================================
   ZWETS — VOORFOOTER-BANNER (rl-cta)

   Twee dingen waren mis. Ten eerste stond op vier pagina's een foto achter
   de band; die maakte het diepblauw troebel en de band vlak. De foto is uit
   de paginadefinities gehaald — nu is overal dezelfde schone band, de
   variant die er wél goed uitkomt.

   Ten tweede: sinds footer en banner dezelfde kleur delen liepen ze in
   elkaar over. Een gouden haarlijn eronder zet ze uit elkaar zonder een
   tweede kleur te introduceren.
   ======================================================================== */

.rlb-cta-sectie {
  padding-block: clamp(3.25rem, 7vw, 5.5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 28%, transparent);
}
.rlb-cta-titel {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: #fff;
}
.rlb-cta-tekst, .rlb-cta-tekst p { color: var(--rlb-op-donker-gedempt); }

/* De telefoonknop stond op --merk-inkt (diepblauw) met een gouden rand —
   donkerblauwe tekst op een donkerblauwe band, dus vrijwel onleesbaar. De
   regel die dat op andere donkere secties al repareert noemde
   .rlb-cta-sectie niet. */
.rlb-cta-sectie .rlb-knop--secundair {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 75%, transparent) !important;
}
.rlb-cta-sectie .rlb-knop--secundair:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: var(--merk-accent_op_donker, #E2000F) !important;
  color: #fff !important;
}

/* ========================================================================
   ZWETS — LANGE MENUCATEGORIEËN IN TWEE KOLOMMEN

   "Snacks" telt 49 regels. Als smalle kolom van 860px werd dat een lint van
   bijna twee schermen, met rechts een leeg veld ernaast. Vanaf zestien
   regels loopt de lijst daarom in twee kolommen door.

   De grens zit in CSS en niet in PHP: `:has(> :nth-child(16))` leest het
   aantal regels rechtstreeks uit de opmaak, dus een categorie die groeit of
   krimpt schakelt vanzelf mee zonder dat er iets in de paginadefinitie of
   de renderer bijgehouden hoeft te worden.
   ======================================================================== */

@media (min-width: 900px) {
  .rlb-menukaart--tabs .rlb-menu-lijst:has(> :nth-child(16)) {
    max-width: none;
    columns: 2;
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    column-rule: 1px solid var(--merk-lijn, #E8EAEC);
  }
  /* Een regel mag nooit over de kolomgrens breken: naam boven, prijs onder
     in de volgende kolom is onleesbaar. */
  .rlb-menukaart--tabs .rlb-menu-lijst:has(> :nth-child(16)) > .rlb-menu-rij {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  /* De zebra loopt op bronvolgorde door en dat klopt per kolom niet meer;
     een fijne scheidingslijn leest hier rustiger dan afwisselende vlakken. */
  .rlb-menukaart--tabs .rlb-menu-lijst:has(> :nth-child(16)) > .rlb-menu-rij:nth-child(odd) {
    background: transparent;
  }
  .rlb-menukaart--tabs .rlb-menu-lijst:has(> :nth-child(16)) > .rlb-menu-rij {
    border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
    border-radius: 0;
    padding: .55rem var(--rlb-r1);
  }
}

/* ========================================================================
   ZWETS — INSTAGRAM-MUUR (rl-galerij, weergave "insta")

   Vierkante tegels in twee rijen, met de volgknop naast de kop. De oude
   carrousel op /cafetaria/ toonde vier beelden met bijschriften als "Verse
   friet" — dat vertelde niemand iets wat de foto niet al liet zien. Een
   muur zonder bijschriften laat de beelden zelf het werk doen en stuurt
   door naar het echte account.
   ======================================================================== */

.rlb-galerij--insta .rlb-insta-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rlb-r4, 1.25rem);
  margin-bottom: clamp(1.25rem, 2.5vw, var(--rlb-r6));
}
.rlb-galerij--insta .rlb-insta-kop > .rlb-kop { margin-bottom: 0; }
.rlb-galerij--insta .rlb-insta-volg { flex: none; }

.rlb-galerij--insta .rlb-galerij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.4rem, .9vw, var(--rlb-r3));
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-galerij--insta .rlb-galerij-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;        /* vierkantjes, zoals op Instagram zelf */
  overflow: hidden;
  border-radius: 6px;
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-galerij--insta .rlb-galerij-link { display: block; width: 100%; height: 100%; }
.rlb-galerij--insta .rlb-galerij-beeld {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s var(--merk-curve, ease);
}
.rlb-galerij--insta .rlb-galerij-item:hover .rlb-galerij-beeld { transform: scale(1.05); }
/* De bijschriften zijn de reden dat de oude sectie nietszeggend was; in deze
   weergave staan ze er niet. Voor schermlezers blijft de alt-tekst staan. */
.rlb-galerij--insta .rlb-galerij-tekst { display: none; }

@media (max-width: 899px) {
  .rlb-galerij--insta .rlb-galerij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .rlb-galerij--insta .rlb-galerij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-galerij--insta .rlb-insta-kop { align-items: flex-start; }
  .rlb-galerij--insta .rlb-insta-volg { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-galerij--insta .rlb-galerij-beeld { transition: none; }
  .rlb-galerij--insta .rlb-galerij-item:hover .rlb-galerij-beeld { transform: none; }
}

/* ========================================================================
   ZWETS — ZONE MET TWEE KOLOMMEN (1/3 + 2/3)

   Een smal blok naast een breed blok: de openingstijden naast de menukaart.
   Blokken zijn normaal volle secties onder elkaar; de zone legt hier het
   raster neer en zet de eigen kolombreedte van de secties binnenin uit.
   Die secties weten er zelf niets van en blijven los bruikbaar.
   ======================================================================== */

@media (min-width: 1024px) {
  .rlb-zone--duo > .rlb-zone-binnen,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 3.5rem);
    align-items: start;
    width: 100%;
    max-width: var(--rlb-max);
    margin-inline: auto;
    padding-inline: clamp(var(--rlb-r4), 4vw, 2.5rem);
  }
  .rlb-zone--duo > .rlb-zone-binnen            { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

  /* De sectie binnenin levert zijn eigen container in: de zone verzorgt nu
     de paginamarge. Zonder dit staat er twee keer padding en loopt de
     kolom niet door tot de rasterlijn. */
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) > .rlb-zone-binnen > .rlb > .rlb-binnen {
    max-width: none;
    padding-inline: 0;
  }
  /* Bovenruimte één keer, op de zone zelf — niet per kolom, anders staan de
     twee koppen niet op dezelfde lijn. De regel die bij gestapelde secties
     de tweede padding weghaalt geldt hier voor allebei. */
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) > .rlb-zone-binnen > .rlb { padding-block: 0; }
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) { padding-block: var(--rlb-ruimte-xl); }

  /* Het smalle blok is een kolom van ±1/3: de leesregel-beperkingen die voor
     een volle sectie gelden zouden hem nog verder insnoeren. */
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) .rlb-tekst-kaart,
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) .rlb-tekst-body,
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) .rlb-menu-lijst,
  :where(.rlb-zone--duo, .rlb-zone--duo-omgekeerd) .rlb-kop { max-width: none; }
}

/* --- correcties op de duo-zone ---------------------------------------- */
/* 1. De ruimte stond in een :where()-regel en die weegt nul; hij verloor
      daardoor van elke gewone klasse. Hier met de echte klassen. */
.rlb-zone--duo,
.rlb-zone--duo-omgekeerd { padding-block: var(--rlb-ruimte-xl); }

@media (min-width: 1024px) {
  /* 2. Tekstsecties zetten vanaf 1024px hun kop in een kolom van 20rem met
        de inhoud ernaast. In een kolom van een derde pagina past dat niet:
        20rem is daar bijna de hele breedte. Binnen de duo-zone dus weer
        gewoon onder elkaar. */
  .rlb-zone--duo > .rlb-zone-binnen > section.rlb-tekst > .rlb-binnen,
  .rlb-zone--duo > .rlb-zone-binnen > section.rlb-faq > .rlb-binnen,
  .rlb-zone--duo > .rlb-zone-binnen > section.rlb-gerelateerd > .rlb-binnen,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-tekst > .rlb-binnen,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-faq > .rlb-binnen,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-gerelateerd > .rlb-binnen {
    display: block;
  }
  .rlb-zone--duo > .rlb-zone-binnen > section.rlb-tekst > .rlb-binnen > .rlb-kop,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-tekst > .rlb-binnen > .rlb-kop {
    position: static;
    margin-bottom: var(--rlb-ruimte-m);
  }
  /* 3. De smalle kolom plakt aan de bovenkant mee met de kaart ernaast. */
  .rlb-zone--duo > .rlb-zone-binnen > :first-child,
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > :last-child {
    position: sticky;
    top: calc(var(--rlb-kopbalk-h) + 1.5rem);
  }
}

/* 4. Een zone zonder media-achtergrond stond op #000 ("valt nooit door naar
      wit"). Zodra je hem als indelingshulp gebruikt — twee kolommen, geen
      video — is dat een zwarte band dwars door de pagina, en zwart is uit
      de huisstijl. Zonder achtergrondmedia dus gewoon doorzichtig. */
.rlb-zone:not(.rlb-zone--media) { background: transparent; }

/* ========================================================================
   ZWETS — CONTACTFORMULIER MET ONDERWERP EN MEEBEWEGENDE VELDEN
   ======================================================================== */

/* Het onderwerp staat bovenaan en over de volle breedte: het bepaalt wat er
   verder gevraagd wordt, dus het hoort het eerste te zijn wat je kiest. */
.rlb-contact-formulier .rlb-veld--onderwerp select.rlb-invoer {
  font-weight: 600;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--merk-inkt, #1A1D21) 50%),
    linear-gradient(135deg, var(--merk-inkt, #1A1D21) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--rlb-r7);
  appearance: none;
}
.rlb-contact-formulier .rlb-veld--onderwerp { border-bottom: 1px solid var(--merk-lijn, #E8EAEC); padding-bottom: var(--rlb-r4); }

/* Een veldgroep die bij het gekozen onderwerp hoort. [hidden] moet het hier
   van display:grid winnen, vandaar de expliciete regel. */
.rlb-contact-formulier .rlb-veldgroep {
  display: contents;
}
.rlb-contact-formulier .rlb-veldgroep[hidden] { display: none; }

/* Zonder JavaScript staan alle groepen zichtbaar: beter een formulier met te
   veel velden dan een formulier waarin de helft ontbreekt. assets/rl.js zet
   [hidden] en neemt het daarna over. */
.rlb-contact-formulier .rlb-veld--onderwerp + .rlb-veld { margin-top: 0; }

/* ---- de kaart: volwaardig, niet een smal grijs blokje ---------------- */
/* .rlb-embed stond op max-width 920px en liep daardoor als een los paneeltje
   midden op de pagina. Een kaart is een plattegrond van waar je heen moet;
   die hoort de breedte van de sectie te krijgen. */
.rlb-embed { max-width: none; }
.rlb-embed-details { border-radius: var(--merk-radius_kaart, 12px); overflow: hidden; }
.rlb-embed-vak { border-radius: 0; }
.rlb-embed-frame { width: 100%; height: var(--rlb-embed-h, 520px); border: 0; display: block; }

/* De poster is nu een echte foto met een diepblauwe sluier eroverheen, in
   plaats van een leeg grijs vlak. Hij blijft staan tot er toestemming is. */
.rlb-embed-poster {
  position: relative;
  min-height: clamp(260px, 38vw, 420px);
  display: flex;
  align-items: flex-end;
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  cursor: pointer;
}
.rlb-embed-poster-achter { position: absolute; inset: 0; }
.rlb-embed-poster-achter .rlb-embed-poster-beeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rlb-embed-sluier {
  position: absolute; inset: 0;
  background: linear-gradient(0deg,
    rgba(7, 28, 62, .92) 0%, rgba(7, 28, 62, .55) 45%, rgba(7, 28, 62, .30) 100%);
}
.rlb-embed-poster-inhoud {
  position: relative; z-index: 1;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--rlb-r2);
  max-width: 54ch;
}
.rlb-embed-badge {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  padding: .35rem var(--rlb-r3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 55%, transparent);
  color: #fff; font-weight: 700; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.rlb-embed-poster-tekst { margin: 0; color: var(--rlb-op-donker-licht); font-size: 1.0625rem; }
.rlb-embed-toon {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  margin-top: var(--rlb-r1);
  color: var(--merk-accent_op_donker, #E2000F); font-weight: 700;
}
.rlb-embed-poster:hover .rlb-embed-toon { color: var(--merk-accent_op_donker, #E2000F); }
.rlb-embed-terugval { text-align: left; margin-top: var(--rlb-r4); }

/* ========================================================================
   ZWETS — CONTACTFORMULIER: TWEE KOLOMMEN + PARTICULIER/ZAKELIJK
   ======================================================================== */

/* Het raster stond op auto-fit met minmax(220px), wat op een breed scherm
   drie kolommen gaf. Vast twee: drie smalle invoervelden naast elkaar lezen
   als een invulformulier bij een balie, twee als een gesprek. */
@media (min-width: 720px) {
  .rlb-contact-formulier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Een label dat geen <label for> is (de radiogroep heeft er twee). */
.rlb-veldlabel {
  font-weight: 600;
  font-size: 1rem;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-optioneel {
  font-weight: 500;
  font-size: .8125rem;
  color: var(--merk-gedempt, #696F77);
  text-transform: none;
  letter-spacing: 0;
}

/* Particulier / zakelijk als twee echte knoppen in plaats van twee kale
   rondjes: het is een keuze die de rest van het formulier verandert, dus hij
   mag gezien worden. */
.rlb-keuzerij { display: flex; flex-wrap: wrap; gap: var(--rlb-r2); }
.rlb-keuze {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  padding: var(--rlb-r3) var(--rlb-r4);
  border: 1.5px solid var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  transition: border-color .15s var(--merk-curve, ease), background-color .15s var(--merk-curve, ease);
}
.rlb-keuze input { accent-color: var(--merk-inkt, #1A1D21); margin: 0; }
.rlb-keuze:hover { border-color: var(--merk-accent, #E2000F); }
.rlb-keuze:has(input:checked) {
  border-color: var(--merk-inkt, #1A1D21);
  background: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 6%, transparent);
}
.rlb-keuze:has(input:focus-visible) {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
}

/* De zakelijke velden vormen samen een blok over de volle breedte, met een
   eigen rastertje erbinnen — anders zouden bedrijfsnaam, KvK en btw los door
   de twee kolommen heen vallen. */
.rlb-contact-formulier .rlb-veldgroep--zakelijk {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
  padding: clamp(var(--rlb-r4), 2vw, 1.4rem);
  border: 1px dashed var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 3%, transparent);
}
.rlb-contact-formulier .rlb-veldgroep--zakelijk[hidden] { display: none; }

/* ========================================================================
   ZWETS — KRUIMELPAD: lichtgrijze balk ONDER de hero

   Het kruimelpad stond in de donkere kop (het deelde de regel die elke
   donkere sectie diepblauw maakt) en plakte daardoor aan het menu vast. Het
   hoort bij de PAGINA, niet bij de navigatie: nu een rustige lichtgrijze
   balk direct onder de hero.
   ======================================================================== */

.rlb-kruimels {
  background: var(--merk-vlak, #F6F7F8) !important;
  color: var(--merk-tekst, #3D444D) !important;
  padding-block: var(--rlb-r3) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 8%, transparent);
}
.rlb-kruimels ol {
  color: var(--merk-tekst, #3D444D) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rlb-r1) var(--rlb-r2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.rlb-kruimels a {
  color: var(--merk-tekst, #3D444D) !important;
  text-decoration: none;
}
.rlb-kruimels a:hover {
  color: var(--merk-inkt, #1A1D21) !important;
  text-decoration: underline;
  text-decoration-color: var(--merk-accent, #E2000F);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* De pagina waar je bent: diepblauw en vet, met een gouden streepje eronder. */
.rlb-kruimels [aria-current="page"] {
  color: var(--merk-inkt, #1A1D21) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--merk-accent, #E2000F);
  padding-bottom: 1px;
}
/* Het scheidingsteken tussen de kruimels, in goud. */
.rlb-kruimels li + li::before {
  content: "/";
  margin-right: var(--rlb-r2);
  color: var(--merk-accent, #E2000F);
  font-weight: 600;
}

/* ========================================================================
   ZWETS — REVIEWSECTIE: kop altijd licht

   De reviewsectie krijgt altijd de donkere merkkleur, óók als de pagina hem
   met vlak="vlak" (lichtgrijs) plaatst — zoals op de landingspagina's. De
   tekstkleuren volgden daar nog het vlak en bleven dus donker: donkergrijze
   kop en intro op een donkerblauwe band, en dan lees je "Een 4,4 op Google"
   niet meer. De kop van deze sectie is nu licht, ongeacht het vlak.
   ======================================================================== */

.rlb-reviews--google > .rlb-binnen > .rlb-kop :where(h1, h2, h3, .rlb-titel) { color: #fff !important; }
.rlb-reviews--google > .rlb-binnen > .rlb-kop .rlb-intro,
.rlb-reviews--google > .rlb-binnen > .rlb-kop p { color: var(--rlb-op-donker-licht) !important; }
.rlb-reviews--google > .rlb-binnen > .rlb-kop .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F) !important; }
.rlb-reviews--google > .rlb-binnen > .rlb-kop::after,
.rlb-reviews--google .rlb-kop > .rlb-titel::after { background: var(--merk-accent, #E2000F); }

/* De witte scorekaart staat los van het vlak van de sectie: altijd wit met
   donkere tekst, anders kantelt hij mee met de donkere band eromheen. */
.rlb-reviews--google .rlb-reviewscore { background: #fff; }
.rlb-reviews--google .rlb-reviewscore-merk,
.rlb-reviews--google .rlb-reviewscore-merk span { color: var(--merk-diepblauw, #0E284B); }
.rlb-reviews--google .rlb-review { background: #fff; }

/* ========================================================================
   ZWETS — KOPBALK: doorzichtig op een paginabrede hero, diepblauw erbuiten

   De balk ligt altijd OVER de pagina en is doorzichtig. Dat klopt zolang er
   een paginabrede hero-achtergrond onder ligt (.rlb-hero--achter): dan lees
   je het witte menu op de foto. Staat de foto ingekaderd naast de tekst
   (.rlb-hero--naast) of is er geen beeld, dan hangt wit menu op wit papier
   en zie je niets. Op die pagina's krijgt de balk de merkkleur.
   ======================================================================== */

body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header {
  background: var(--zwets-diep-basis) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 25%, transparent) !important;
  box-shadow: 0 2px 18px rgba(7, 28, 62, .22);
}
/* Op die pagina's blijft hij ook ná het scrollen diepblauw: wisselen naar
   wit zou betekenen dat de balk halverwege de pagina van kleur verschiet. */
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header[data-rl-gescrold="1"] {
  background: var(--zwets-diep-basis) !important;
}
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header :where(.rlb-navlink, .rlb-tel, .rlb-merk-tekst) {
  color: #fff !important;
  text-shadow: none;
}
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header .rlb-navlink:hover,
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header .rlb-navlink--actief {
  color: var(--merk-accent_op_donker, #E2000F) !important;
}
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header .rlb-logo {
  filter: none;
}

/* ========================================================================
   ZWETS — AANVRAAGFORMULIER (rl-boeker) OP VOLLE BREEDTE

   .rlb-boeker is een raster van 340px (kalender) + de rest. Staat de
   kalender uit -- en dat staat hij op alle gelegenheidspagina's -- dan bleef
   die eerste kolom leeg staan en werd het formulier tegen de rechterkant
   geduwd in ongeveer de helft van de ruimte. Plus een max-width van 780px
   daarbovenop. Zonder kalender dus gewoon één kolom.
   ======================================================================== */

.rlb-boeker:not(:has(.rlb-kalender)) { grid-template-columns: minmax(0, 1fr); }
.rlb-boeker:not(:has(.rlb-kalender)) .rlb-boeker-formulier {
  max-width: 1040px;
  margin-inline: auto;
}
/* De velden in twee kolommen, net als het contactformulier. */
@media (min-width: 720px) {
  .rlb-boeker-formulier .rlb-stap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rlb-boeker-formulier .rlb-veldgroep--zakelijk {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--rlb-ruimte-m);
  padding: clamp(var(--rlb-r4), 2vw, 1.4rem);
  border: 1px dashed var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 10px);
  background: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 3%, transparent);
}
.rlb-boeker-formulier .rlb-veldgroep--zakelijk[hidden] { display: none; }
.rlb-boeker-formulier .rlb-veld--onderwerp select.rlb-invoer { font-weight: 600; }

/* ========================================================================
   ZWETS — CONTACTSTROOK IN DE HERO

   Bellen, mailen en de openingstijden staan nu direct onder de knoppen in
   plaats van pas onderaan de pagina. De tijden zelf staan er niet in — die
   zijn seizoensgebonden en horen op één plek te staan — wel een sprong naar
   het blok waar ze wél staan.
   ======================================================================== */

.rlb-hero-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rlb-r2) var(--rlb-r5);
  margin: clamp(1.25rem, 3vw, var(--rlb-r6)) 0 0;
  padding: 0;
  list-style: none;
}
.rlb-hero-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.rlb-hero-contact a:hover {
  color: var(--merk-accent_op_donker, #E2000F);
  border-bottom-color: var(--merk-accent_op_donker, #E2000F);
}
.rlb-hero-contact .rlb-icoon { flex: none; opacity: .85; }

/* Op een hero zonder paginabrede achtergrond staat de strook op licht
   papier; dan moet hij donker zijn in plaats van wit. */
.rlb-hero--naast .rlb-hero-contact a,
.rlb-hero--leeg .rlb-hero-contact a {
  color: var(--merk-inkt, #1A1D21);
  border-bottom-color: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 25%, transparent);
  text-shadow: none;
}
.rlb-hero--naast .rlb-hero-contact a:hover,
.rlb-hero--leeg .rlb-hero-contact a:hover { color: var(--merk-accent_donker, #A50B00); border-bottom-color: var(--merk-accent, #E2000F); }

@media (max-width: 559px) {
  .rlb-hero-contact { gap: var(--rlb-r2) var(--rlb-r4); }
  .rlb-hero-contact a { font-size: .875rem; }
}

/* ========================================================================
   ZWETS — FEITENBALK

   Stond op #000 met blauwe iconen en SCHREEUWENDE hoofdletterlabels — nog
   platformopmaak. Nu dezelfde diepblauwe merkkleur als de rest, grote witte
   cijfers, gouden iconen en labels in gewone schrijfwijze. Een label als
   "Google · 251 recensies" in kapitalen met letterspatiëring leest niet.
   ======================================================================== */

.rlb-feitbalk {
  background: var(--zwets-diep) !important;
  border-radius: var(--merk-radius_kaart, 12px);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-inline: clamp(var(--rlb-r4), 3vw, 2.5rem);
  gap: clamp(var(--rlb-r4), 2.5vw, 2.5rem);
}
.rlb-feitbalk-item {
  gap: var(--rlb-r1);
  padding-inline: clamp(var(--rlb-r2), 2vw, var(--rlb-r5));
}
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-accent_op_donker, #E2000F) !important; margin-bottom: var(--rlb-r1); }
.rlb-feitbalk-waarde {
  color: #fff !important;
  font-family: var(--merk-font-kop, "Montserrat", Arial, sans-serif);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.rlb-feitbalk-label {
  color: var(--rlb-op-donker-gedempt) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: .9375rem !important;
  font-weight: 500;
  line-height: 1.35;
  max-width: 22ch;
}
.rlb-feitbalk-item + .rlb-feitbalk-item {
  border-left: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 28%, transparent) !important;
}
@media (max-width: 700px) {
  .rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 0 !important; }
  .rlb-feitbalk-label { max-width: none; }
}

/* ========================================================================
   ZWETS — GESTAPELDE FOTOCOLLAGE

   Drie of vier foto's die elkaar deels overlappen en in hoogte verspringen,
   naast een tekstkolom. Speelser dan een net raster: je oog springt van de
   ene plaat naar de andere in plaats van een tabel af te lezen.

   De overlap gebeurt met één raster van 12x12 waarin de tegels elkaars
   velden mogen delen; z-index bepaalt wie er bovenop ligt. Een witte rand
   houdt twee foto's die elkaar raken uit elkaar — zonder die rand lopen ze
   in elkaar over en wordt het een vlek.

   De tegels komen kort na elkaar in beeld; rl.js zet daarvoor per tegel een
   vertraging. Wie minder beweging wil krijgt ze gewoon ineens.
   ======================================================================== */

.rlb-tb-collage--gestapeld {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 0;
  aspect-ratio: 5 / 4;
}
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel {
  border-radius: 0;
  border: 4px solid var(--merk-grond, #FFFFFF);
  box-shadow: 0 14px 34px rgba(7, 28, 62, .14);
  transition-delay: calc((var(--rlb-tegel, 1) - 1) * 110ms);
}

/* --- drie foto's: groot rechts, twee kleiner links ------------------- */
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(1) { grid-area: 2 / 1 / 7 / 8;   z-index: 2; }
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(2) { grid-area: 1 / 7 / 11 / 13; z-index: 1; }
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(3) { grid-area: 7 / 1 / 13 / 8;  z-index: 3; }
/* --- vier foto's: de vierde duikt rechtsonder op --------------------- */
.rlb-tb-collage--gestapeld[data-rl-tegels="4"] .rlb-tb-collagetegel:nth-child(2) { grid-area: 1 / 7 / 8 / 13; }
.rlb-tb-collage--gestapeld[data-rl-tegels="4"] .rlb-tb-collagetegel:nth-child(4) { grid-area: 8 / 6 / 13 / 12; z-index: 4; }

/* Staat de collage LINKS van de tekst, dan spiegelt de compositie mee —
   anders wijzen alle foto's van de tekst weg. */
.rlb-tekstbeeld--links .rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(1) { grid-area: 2 / 6 / 7 / 13; }
.rlb-tekstbeeld--links .rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(2) { grid-area: 1 / 1 / 11 / 7; }
.rlb-tekstbeeld--links .rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(3) { grid-area: 7 / 6 / 13 / 13; }
.rlb-tekstbeeld--links .rlb-tb-collage--gestapeld[data-rl-tegels="4"] .rlb-tb-collagetegel:nth-child(2) { grid-area: 1 / 1 / 8 / 7; }
.rlb-tekstbeeld--links .rlb-tb-collage--gestapeld[data-rl-tegels="4"] .rlb-tb-collagetegel:nth-child(4) { grid-area: 8 / 2 / 13 / 8; }

/* Aanwijzen tilt de foto een slag naar voren in plaats van hem op te
   blazen: in een stapel leest schalen als "hij valt eroverheen". */
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel:hover {
  z-index: 9;
  box-shadow: 0 22px 46px rgba(7, 28, 62, .24);
}
.rlb-tb-collage--gestapeld .rlb-tb-collagebeeld { transition: transform .6s var(--merk-curve, ease); }
.rlb-tb-collage--gestapeld .rlb-tb-collagetegel:hover .rlb-tb-collagebeeld { transform: scale(1.04); }

/* Op een telefoon is overlappen onleesbaar: dan gewoon onder elkaar, maar
   met een lichte versprinbg zodat het speels blijft. */
@media (max-width: 720px) {
  .rlb-tb-collage--gestapeld {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: var(--rlb-r2);
  }
  .rlb-tb-collage--gestapeld .rlb-tb-collagetegel {
    grid-area: auto !important;
    aspect-ratio: 1 / 1;
    border-width: 0;
  }
  .rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(1) { grid-column: 1 / span 2; aspect-ratio: 16 / 10; }
  .rlb-tb-collage--gestapeld .rlb-tb-collagetegel:nth-child(3) { margin-top: var(--rlb-r4); }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-tb-collage--gestapeld .rlb-tb-collagetegel { transition-delay: 0ms !important; }
}

/* ========================================================================
   ZWETS — KAART ZONDER FOTO

   Bij sommige diensten hebben we geen foto die er écht bij hoort. Een
   willekeurige foto erbij zetten is erger dan geen: een snackbar-interieur
   bij "Stamppotten" vertelt de bezoeker iets wat niet klopt. Zo'n kaart
   krijgt daarom de merkkleur in plaats van een beeld, met de titel en tekst
   gecentreerd. In een rij naast fotokaarten leest dat als een bewuste vorm.
   ======================================================================== */

.rlb-gerelateerd--carrousel .rlb-ger-link:not(:has(.rlb-ger-beeldvak)) {
  background: var(--zwets-diep);
  border: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 28%, transparent);
  display: flex;
  align-items: flex-end;
}
/* De donkere scrim hoort bij een foto; zonder foto is hij een vlek. */
.rlb-gerelateerd--carrousel .rlb-ger-link:not(:has(.rlb-ger-beeldvak))::after { content: none; }
.rlb-gerelateerd--carrousel .rlb-ger-link:not(:has(.rlb-ger-beeldvak))::before {
  color: color-mix(in srgb, var(--merk-accent, #E2000F) 85%, transparent);
  text-shadow: none;
}
.rlb-gerelateerd--carrousel .rlb-ger-link:not(:has(.rlb-ger-beeldvak)) .rlb-ger-body {
  position: static;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.rlb-gerelateerd--carrousel .rlb-ger-link:not(:has(.rlb-ger-beeldvak)):hover {
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 60%, transparent);
}

/* ========================================================================
   ZWETS — RESERVEERPOPUP RUIMER

   De modal stond op 560px breed. Dat is genoeg voor een knop, maar niet
   voor het reserveerformulier zelf: datum, tijd, aantal personen en de
   tijdslots naast elkaar hebben meer nodig, en in 560px duwt de widget
   zijn eigen inhoud in een kolom of begint hij te scrollen.
   ======================================================================== */

.rlb-reserveer-modal { width: min(880px, 94vw); max-height: 94vh; }
.rlb-reserveer-iframe { width: 100%; height: min(78vh, 760px); border: 0; display: block; }
.rlb-reserveer-body { padding: 0; }
@media (max-width: 720px) {
  .rlb-reserveer-iframe { height: calc(100vh - 112px); }
  .rlb-reserveer-iframe { height: calc(100dvh - 112px); }
}

/* ========================================================================
   ZWETS — USP-KAARTEN MET FOTO, MODERNER

   De foto stond met een witte rand eromheen in de kaart. Oorzaak: de
   basisregel `.rlb-usp > *` zet `padding: var(--rlb-ruimte-m)` op de hele
   kaart, en de fotovariant haalde die niet weg. Zo krijg je een ingelijst
   plaatje in een doosje — de vorm van tien jaar geleden.

   Nu: beeld van rand tot rand, tekst met eigen binnenruimte, alles links
   uitgelijnd (de titel stond gecentreerd boven linkse tekst), een dunne
   gouden lijn ónder het beeld in plaats van een dikke balk erboven, en een
   vlakkere schaduw.
   ======================================================================== */

.rlb-usps--metbeeld .rlb-usp-vak,
.rlb-usps--metbeeld .rlb-usp-link {
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  border-top: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 6%, transparent);
  text-align: left;
}
.rlb-usps--metbeeld .rlb-usp-beeldvak {
  position: relative;
  border-bottom: 2px solid var(--merk-accent, #E2000F);
}
.rlb-usps--metbeeld .rlb-usp-beeld {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}
.rlb-usps--metbeeld .rlb-usp-titel {
  padding: var(--rlb-r4) var(--rlb-r4) 0;
  text-align: left;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
}
.rlb-usps--metbeeld .rlb-usp-tekst {
  padding: var(--rlb-r2) var(--rlb-r4) var(--rlb-r5);
  text-align: left;
  color: var(--merk-gedempt, #696F77);
  line-height: 1.5;
}
/* De tekst duwt de kaartbodem omlaag; zo eindigen vier kaarten met
   verschillend lange teksten toch op dezelfde lijn. */
.rlb-usps--metbeeld .rlb-usp-tekst { margin-top: 0; flex: 1 1 auto; }

/* In de fotovariant staat geen icoon meer; het rastertje van 52px dat de
   icoonvariant gebruikt hoort hier niet. */
.rlb-usps--metbeeld .rlb-usp-vak,
.rlb-usps--metbeeld .rlb-usp-link { grid-template-columns: none; gap: 0; }
.rlb-usps--metbeeld .rlb-usp-icoonvak { display: none; }

.rlb-usps--metbeeld .rlb-usp-vak:hover,
.rlb-usps--metbeeld .rlb-usp-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 14%, transparent);
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 45%, transparent);
}

/* ========================================================================
   ZWETS — CONTACTGEGEVENS ALS DRIE KAARTEN

   Bellen, mailen en de standplaats stonden als smal lijstje naast het
   formulier. Dat zijn de drie dingen waar de meeste bezoekers voor komen,
   dus ze horen bovenaan en even groot. Drie kaarten naast elkaar, met het
   icoon in een gouden rondje.

   Zonder formulier in het blok heeft de tweekolomsrij niets meer te doen:
   dan mag de kanalenkolom de volle breedte hebben.
   ======================================================================== */

.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij-vak { grid-template-columns: minmax(0, 1fr); }
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(var(--rlb-r3), 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij,
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij > a {
  display: flex;
  align-items: center;
  gap: var(--rlb-r4);
  height: 100%;
  padding: clamp(1.1rem, 2.2vw, var(--rlb-r5));
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  border-radius: 14px;
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 6%, transparent);
  text-decoration: none;
  transition: transform .2s var(--merk-curve, ease), box-shadow .2s var(--merk-curve, ease),
              border-color .2s var(--merk-curve, ease);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij { padding: 0; border: 0; box-shadow: none; }
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij:not(:has(a)) {
  padding: clamp(1.1rem, 2.2vw, var(--rlb-r5));
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 6%, transparent);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 14%, transparent);
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 50%, transparent);
  background: var(--merk-grond, #FFFFFF);
}
/* Het icoon in een gouden rondje in plaats van los ernaast. */
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij .rlb-icoon {
  flex: none;
  width: 44px; height: 44px;
  padding: var(--rlb-r3);
  border-radius: 50%;
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 12%, transparent);
  color: var(--merk-accent_donker, #A50B00);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij strong {
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--merk-gedempt, #696F77); font-weight: 700;
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-waarde {
  font-size: 1.0625rem; font-weight: 700; color: var(--merk-inkt, #1A1D21);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-belofte,
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-sociaal { margin-top: var(--rlb-r4); }

/* De openingstijden naast het formulier: een kaart, niet losse tekst. */
.rlb-zone--duo-omgekeerd .rlb-tekst-kaart,
.rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-tekst .rlb-tekst-kolom {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  border-top: 3px solid var(--merk-accent, #E2000F);
  border-radius: 14px;
  background: var(--merk-vlak, #F6F7F8);
}

/* ========================================================================
   ZWETS — MOZAÏEKGALERIJ: ruimte eronder, niet tegen de rand

   De galerij liep tot de onderrand van de sectie, waardoor de foto's tegen
   het volgende vlak aan plakten. Een beeldenrij heeft onderaan net zo veel
   lucht nodig als bovenaan, anders leest hij als afgeknipt.
   ======================================================================== */

.rlb-galerij--mozaiek .rlb-galerij,
.rlb-galerij--metselwerk .rlb-galerij { margin-bottom: 0; }
.rlb-galerij--mozaiek,
.rlb-galerij--metselwerk {
  padding-bottom: clamp(var(--rlb-r7), 6vw, 5rem);
}
/* Een losse tegel op een eigen regel liet een gat vallen; de laatste rij
   vult nu door. */
.rlb-galerij--mozaiek .rlb-galerij { grid-auto-flow: dense; }

/* ========================================================================
   ZWETS — CONTACTBLOK ZONDER KANALEN: formulier op volle breedte

   `.rlb-contact-rij-vak` is een raster van 1fr (kanalen) + 2fr (formulier).
   Staat het blok alleen het formulier te tonen, dan bleef die eerste kolom
   staan en belandde het formulier in de SMALSTE helft — vandaar dat de
   velden onder elkaar in een kolom van 150px stonden en de knoptekst werd
   afgekapt. Zonder kanalen dus één kolom.
   ======================================================================== */

.rlb-contact:not(:has(.rlb-contact-kanalen)) .rlb-contact-rij-vak {
  grid-template-columns: minmax(0, 1fr);
}
.rlb-contact:not(:has(.rlb-contact-kanalen)) .rlb-contact-vak { width: 100%; }
.rlb-contact:not(:has(.rlb-contact-kanalen)) .rlb-contact-formulier {
  width: 100%;
  padding: clamp(1.25rem, 2.5vw, var(--rlb-r6));
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 10%, transparent);
  border-radius: 14px;
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 6%, transparent);
}
/* De verstuurknop mag nooit afgekapt worden. */
.rlb-contact-formulier .rlb-knop { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }

/* De twee kolommen van de duo-zone op dezelfde bovenlijn, en minder lucht
   tussen de blokken dan tussen de secties. */
@media (min-width: 1024px) {
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-contact > .rlb-binnen > .rlb-kop {
    margin-bottom: var(--rlb-ruimte-m);
  }
  .rlb-zone--duo-omgekeerd > .rlb-zone-binnen > section.rlb-tekst { padding-top: 0; }
}

/* De drie contactkaarten even breed en op dezelfde lijn als de kop. */
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-lijst {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-lijst {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }
}
/* Het kanalenblok had onderaan de ruimte van een hele sectie; dat gat viel
   tussen de kaarten en het formulier. */
.rlb-contact:not(:has(.rlb-contact-vak)) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.rlb-zone--duo-omgekeerd { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ========================================================================
   ZWETS — STAPNUMMERS ZONDER RAND

   De nummers 1-2-3 stonden in een omlijnd vierkantje. Dat was de oude
   platformvorm; met het gouden cijfer eronder al als accent is de rand een
   hokje te veel. Het cijfer doet het werk, de gouden streep eronder markeert
   de stap.
   ======================================================================== */

.rlb-stap-nummer,
.rlb-stappen--genummerd .rlb-stap-nummer {
  border: 0 !important;
  outline: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.rlb-stap-item { border: 0; }

/* De titel stond op `align-self: center`. In een kolom-flexbox is dat de
   DWARSAS, dus het <h3>-blokje werd horizontaal gecentreerd en kromp naar
   zijn tekstbreedte — waardoor de titel gecentreerd oogde terwijl er
   `text-align: left` op stond. */
.rlb-usps--metbeeld .rlb-usp-titel,
.rlb-usps--metbeeld .rlb-usp-tekst { align-self: stretch; width: 100%; }

/* ========================================================================
   ZWETS — MENUKNOP: alleen het streepjes-icoon

   De knop had een omlijnd vakje mét het woord "Menu" ernaast. Drie streepjes
   zijn inmiddels universeel; het woord en de rand zijn ruis op een kopbalk
   die toch al vol staat. Het label blijft bestaan voor schermlezers.
   ======================================================================== */

.rlb-mobiel > summary {
  border: 0 !important;
  background: transparent !important;
  padding: var(--rlb-r1) !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.rlb-mobiel > summary .rlb-mobiel-tekst {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.rlb-mobiel > summary:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================================================
   ZWETS — ANKERS NIET ONDER DE KOPBALK

   De kopbalk ligt vast bovenaan (position: fixed). Spring je naar #menukaart
   of #openingstijden, dan zet de browser dat punt op y=0 — precies achter de
   balk. De kop van de sectie was dan onzichtbaar.

   scroll-margin-top houdt de hoogte van de balk vrij, plus wat lucht.
   ======================================================================== */

:target,
[id]:not(body):not(html) {
  scroll-margin-top: calc(var(--rlb-kopbalk-h, 88px) + 1.5rem);
}
/* Zacht scrollen, behalve voor wie dat liever niet heeft. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ========================================================================
   ZWETS — MOBIEL MENU: burger zichtbaar + inklapbaar submenu
   ======================================================================== */

/* 1. De burger werd bij het scrollen diepblauw gekleurd. Op de pagina's waar
      de kopbalk zelf diepblauw is, verdween hij daarmee volledig. */
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header .rlb-mobiel > summary,
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header[data-rl-gescrold="1"] .rlb-mobiel > summary {
  color: #fff !important;
}

/* 2. Het submenu klapt open en dicht met een plus/min. */
.rlb-mobiel-uitklap > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlb-r3);
  cursor: pointer;
  list-style: none;
}
.rlb-mobiel-uitklap > summary::-webkit-details-marker { display: none; }
.rlb-mobiel-uitklap > summary .rlb-navlink { flex: 1 1 auto; }

/* De plus wordt een min zodra de groep openstaat: twee streepjes waarvan de
   verticale wegdraait. Geen tekst, geen pijltje — dat leest sneller. */
.rlb-mobiel-plus {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  margin-inline-start: auto;
}
.rlb-mobiel-plus::before,
.rlb-mobiel-plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .2s var(--merk-curve, ease), opacity .2s var(--merk-curve, ease);
}
.rlb-mobiel-plus::after { transform: translateY(-50%) rotate(90deg); }
.rlb-mobiel-uitklap[open] .rlb-mobiel-plus::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.rlb-mobiel-sub {
  margin: var(--rlb-r1) 0 var(--rlb-r2);
  padding: 0 0 0 var(--rlb-r4);
  list-style: none;
  border-left: 2px solid color-mix(in srgb, var(--merk-accent, #E2000F) 35%, transparent);
}
.rlb-mobiel-sub li + li { border-top: 0; }
.rlb-mobiel-sub .rlb-navlink { padding: var(--rlb-r2) 0; font-size: .9375rem; opacity: .9; }
.rlb-mobiel-groep + li { border-top: var(--rlb-rand); }

/* ========================================================================
   ZWETS — TERUGVAL VOOR BROWSERS ZONDER :has()

   De kopbalk kiest met `body:not(:has(main > .rlb-hero--achter))` tussen
   doorzichtig (over een paginabrede hero) en diepblauw (daarbuiten). Kent
   een browser :has() niet, dan is die hele selector ongeldig en wordt hij
   genegeerd — dan blijft de balk doorzichtig en hangt een wit menu op wit
   papier. Firefox deed dat tot versie 121, Safari tot 15.4.

   De veilige stand is dan: altijd diepblauw. Je verliest het doorzichtige
   effect, maar het menu blijft leesbaar.
   ======================================================================== */

@supports not selector(:has(*)) {
  .rlb-header {
    background: var(--zwets-diep-basis) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 25%, transparent) !important;
  }
  .rlb-header :where(.rlb-navlink, .rlb-tel, .rlb-merk-tekst),
  .rlb-header .rlb-mobiel > summary { color: #fff !important; }

  /* Zonder :has() vallen ook de kaarten-zonder-foto en het contactblok
     terug; die krijgen hier hun veilige stand. */
  .rlb-gerelateerd--carrousel .rlb-ger-link { background: var(--zwets-diep-basis); }
  .rlb-contact-rij-vak { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   ZWETS — MOBIEL: leesbaarheid, insluiting en merknaam

   Vijf losse meldingen van de telefoon (iPhone 12 Pro Max, Safari) bleken
   dezelfde twee oorzaken te hebben:

   1. De kopbalk is doorzichtig zolang er een paginabrede hero onder ligt.
      Op een telefoon is die hero laag en scrol je er meteen voorbij; dan
      hangt een licht menu-icoon boven lichte paginatekst. Bovendien leunt
      die regel op :has(), dat op oudere Safari ontbreekt - en dan valt alles
      terug op de doorzichtige stand. Op dit formaat is het doorzichtige
      effect de moeite niet waard: de balk wordt gewoon altijd diepblauw.

   2. De reviewkaarten zijn wit en staan in een diepblauwe sectie. De regels
      die hun tekst donker maken hangen aan .rlb-reviews--google; op smalle
      schermen herschikt de kaart en won de sectieregel (lichte tekst voor
      op donker) alsnog. Hier staat het per kaart vast.
   ======================================================================== */

@media (max-width: 1023px) {
  /* --- kopbalk altijd dicht, menu-icoon altijd wit ---
     De gescrolde stand staat elders op `background: #fff !important`. Die
     selector draagt het attribuut mee en weegt dus zwaarder dan een kale
     .rlb-header: zonder hem hier mee te nemen werd de balk bij het scrollen
     alsnog wit, met een wit menu-icoon erop. */
  .rlb-header,
  .rlb-header[data-rl-gescrold="1"] {
    background: var(--zwets-diep-basis,
      linear-gradient(160deg, var(--merk-diepblauw, #0E284B) 0%, var(--merk-diepblauw, #0E284B) 55%, var(--merk-diepblauw, #0E284B) 100%)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 25%, transparent) !important;
  }
  .rlb-header .rlb-mobiel > summary,
  .rlb-header[data-rl-gescrold="1"] .rlb-mobiel > summary,
  .rlb-header .rlb-merk-tekst,
  .rlb-header .rlb-mobiel-tekst { color: #fff !important; }

  /* --- het paneel mag nooit zijwaarts schuiven ---
     "Gelegenheden & feesten" plus het open/dicht-knopje is breder dan de
     21rem van het paneel; dat gaf een horizontale schuifbalk in het menu. */
  .rlb-mobiel[open] .rlb-mobiel-nav {
    overflow-x: hidden;
    max-width: 100vw;
  }
  .rlb-mobiel-nav ul,
  .rlb-mobiel-nav li,
  .rlb-mobiel-acties,
  .rlb-mobiel-acties > * { min-width: 0; max-width: 100%; }
  .rlb-mobiel-nav .rlb-navlink {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* --- merknaam in goud boven het menu ---
     Het logo zit in de kopbalk en valt achter het paneel weg, waardoor je
     in een naamloos menu stond. */
  .rlb-mobiel[open] .rlb-mobiel-nav::before {
    content: "Zwets in ";
    display: block;
    margin: 0 0 var(--rlb-r4);
    padding-bottom: var(--rlb-r4);
    border-bottom: 1px solid color-mix(in srgb, var(--merk-accent, #E2000F) 32%, transparent);
    color: var(--merk-accent_op_donker, #E2000F);
    font-family: var(--merk-font-kop, inherit);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .02em;
  }

  /* --- kruimelpad onder de vaste kopbalk vandaan ---
     De lichtgrijze balk zet padding-block en wist daarmee de ruimte die de
     kopbalk vrijhield; de bovenste kruimel viel erachter. */
  main > .rlb-kruimels:first-child { margin-top: var(--rlb-kopbalk-h, 88px); }
}

/* --- reviews op telefoonformaat: witte kaart, donkere tekst, goud sterren --- */
@media (max-width: 767px) {
  .rlb-reviews--google .rlb-reviewscore,
  .rlb-reviews--google .rlb-review { background: #fff !important; }

  .rlb-reviews--google .rlb-reviewscore-cijfer b,
  .rlb-reviews--google .rlb-reviewscore-merk,
  .rlb-reviews--google .rlb-reviewscore-merk span,
  .rlb-reviews--google .rlb-review-naam,
  .rlb-reviews--google .rlb-review-tekst p {
    color: var(--merk-inkt, #1A1D21) !important;
  }
  .rlb-reviews--google .rlb-reviewscore-cijfer span,
  .rlb-reviews--google .rlb-reviewscore-aantal,
  .rlb-reviews--google .rlb-review-bron,
  .rlb-reviews--google .rlb-review-datum {
    color: var(--merk-gedempt, #696F77) !important;   /* 6,2:1 op wit */
  }
  .rlb-reviews--google .rlb-reviewscore-link {
    color: var(--merk-inkt, #1A1D21) !important;
    text-decoration-color: var(--merk-accent, #E2000F);
  }
  /* De sterren blijven goud, ook binnen de witte kaart. */
  .rlb-reviewscore .rlb-sterren,
  .rlb-review .rlb-sterren,
  .rlb-reviews--google .rlb-sterren { color: var(--merk-accent_op_donker, #E2000F) !important; }
}

/* ========================================================================
   ZWETS — GEEN DONKERE MODUS

   brand.css draait in `prefers-color-scheme: dark` een paar tokens om:
   --merk-inkt gaat van #0B2A5B naar #F2F6FC (bijna wit) en --merk-grond van
   wit naar #0E1626. Dat hoort bij een donker thema dat deze site niet heeft:
   de reviewkaarten, de knop in de prefooter-banner en de kruimelbalk zetten
   een HARDE witte achtergrond en halen hun tekstkleur uit --merk-inkt. Bij
   een bezoeker met donkere modus werd die tekst dus bijna wit op wit - wat
   als "grijze letters" op het scherm staat.

   Er zijn twee manieren om dat op te lossen: overal waar een wit vlak staat
   een letterlijke donkere kleur zetten, of het halve donkere thema uitzetten.
   Het tweede is eerlijker: het ontwerp is licht, en een half donker thema is
   erger dan geen.

   Dit staat in rl.css en niet in brand.css, omdat brand.css gegenereerd wordt
   uit config/brand.json en bij de eerstvolgende opslag in Huisstijl zou
   worden overschreven. rl.css laadt erna en wint dus.
   ======================================================================== */

:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --merk-accent: var(--merk-accent_donker, #A50B00);
    --merk-accent_donker: var(--merk-accent_donker, #A50B00);
    --merk-inkt: var(--merk-diepblauw, #0E284B);
    --merk-tekst: var(--merk-tekst, #3D444D);
    --merk-gedempt: var(--merk-gedempt, #696F77);
    --merk-lijn: var(--merk-lijn, #E8EAEC);
    --merk-vlak: var(--merk-vlak, #F6F7F8);
    --merk-grond: #FFFFFF;
    --merk-paneel: #FFFFFF;
  }
}

:root[data-theme="dark"] {
  --merk-accent: var(--merk-accent_donker, #A50B00);
  --merk-accent_donker: var(--merk-accent_donker, #A50B00);
  --merk-inkt: var(--merk-diepblauw, #0E284B);
  --merk-tekst: var(--merk-tekst, #3D444D);
  --merk-gedempt: var(--merk-gedempt, #696F77);
  --merk-lijn: var(--merk-lijn, #E8EAEC);
  --merk-vlak: var(--merk-vlak, #F6F7F8);
  --merk-grond: #FFFFFF;
  --merk-paneel: #FFFFFF;
}

/* ========================================================================
   ZWETS — KEUZEVAKKEN IN HET AANVRAAGFORMULIER

   Bij zaalhuur, een verjaardag of een evenement kun je aanvinken wat je
   erbij wilt: drank, hapjes, muziek. Het zijn wensen voor het voorstel,
   geen bestelling - daarom staan er bewust geen prijzen bij.
   ======================================================================== */

.rlb-keuzeveld {
  grid-column: 1 / -1;
  margin: 0 0 var(--rlb-r1);
  padding: var(--rlb-r4) 1.1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 14%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--merk-vlak, #F6F7F8) 60%, var(--merk-grond, #FFFFFF));
}
.rlb-keuzeveld > legend {
  padding: 0 var(--rlb-r2);
  margin-inline-start: -.45rem;
  color: var(--merk-inkt, #1A1D21);
  font-family: var(--merk-font-kop, inherit);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.rlb-keuzerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--rlb-r2) var(--rlb-r4);
  margin-top: var(--rlb-r2);
}
.rlb-keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--rlb-r2);
  padding: var(--rlb-r2) var(--rlb-r2);
  border-radius: 8px;
  font-size: .9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rlb-keuze:hover { background: color-mix(in srgb, var(--merk-diepblauw, #0E284B) 5%, transparent); }
/* Het vakje mag niet meekrimpen als het label over twee regels loopt. */
.rlb-keuze input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .12rem;
  accent-color: var(--merk-inkt, #1A1D21);
}
.rlb-keuze:has(input:checked) {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 14%, transparent);
}
.rlb-keuze:has(input:focus-visible) {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .rlb-keuzerij { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   ZWETS — BEVESTIGING EN FOUTMELDING IN HET AANVRAAGFORMULIER

   Deze twee blokken zijn met het formulier meegekomen maar hadden geen
   eigen opmaak. Ze erfden dus de tekstkleur van de sectie eromheen, en op
   een diepblauw vlak betekende dat donkere letters op donkerblauw: de
   bevestiging met het kenmerk was niet te lezen.

   Ze krijgen hier een eigen kaart met vaste kleuren, zodat ze leesbaar
   blijven waar het formulier ook staat.
   ======================================================================== */

.rlb-contact-gelukt {
  grid-column: 1 / -1;
  margin: var(--rlb-r2) 0 0;
  padding: 1.6rem var(--rlb-r5);
  border: 1px solid color-mix(in srgb, var(--merk-status_deels, #8A5B00) 45%, transparent);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px color-mix(in srgb, var(--merk-diepblauw, #0E284B) 14%, transparent);
  text-align: left;
}
.rlb-contact-gelukt-kop {
  margin: 0 0 var(--rlb-r2);
  color: var(--merk-inkt, #1A1D21) !important;
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}
/* Een vinkje ervoor: je ziet in een oogopslag dat het goed ging. */
.rlb-contact-gelukt-kop::before {
  content: "";
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-end: var(--rlb-r2);
  vertical-align: -.12rem;
  border-radius: 50%;
  background: var(--merk-status_vrij, #2F7D4F) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.rlb-contact-gelukt-tekst {
  margin: 0;
  color: var(--merk-tekst, #3D444D) !important;
  font-size: 1rem;
  line-height: 1.55;
}
.rlb-contact-kenmerk {
  margin: var(--rlb-r4) 0 0;
  padding-top: var(--rlb-r3);
  border-top: 1px solid color-mix(in srgb, var(--merk-diepblauw, #0E284B) 12%, transparent);
  color: var(--merk-inkt, #1A1D21) !important;
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.rlb-contact-kenmerk:empty { display: none; }

.rlb-contact-fout {
  grid-column: 1 / -1;
  margin: var(--rlb-r1) 0 0;
  padding: .85rem var(--rlb-r4);
  border: 1px solid color-mix(in srgb, var(--merk-status_bezet, #8C3A33) 40%, transparent);
  border-inline-start: 4px solid var(--merk-status_bezet, #8C3A33);
  border-radius: 10px;
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-status_bezet, #8C3A33) !important;
  font-size: .9375rem;
  line-height: 1.5;
}


/* ========================================================================
   rl-projecten — de referentieprojecten.

   EEN RODE DRAAD, KLEINE NUANCES.
   Marijn, 7 nov: niet elke carrousel hoeft exact hetzelfde te zijn, maar hij
   moet er wel bij horen. Hoeken, randen, tussenruimte, hover en pijlen staan
   daarom op gedeelde variabelen; alleen de KAARTBREEDTE verschilt per soort.

   DE KAART IS HET BEELD.
   Eerste opzet was beeld boven, kop eronder, feiten in een regeltje. Dat is
   een nieuwsbericht. Bij een betonvloer verkoopt het BEELD van een hal die er
   ligt, en het GETAL: 3.560 m2 zegt meer dan drie zinnen. Dus beeld over de
   hele kaart, tekst erover, oppervlakte als kop.
   ======================================================================== */

:root {
  /* Gedeeld tussen alle kaartblokken. Wijzig hier en de hele site volgt. */
  --rlb-kaart-radius: var(--merk-radius_kaart, 6px);
  --rlb-kaart-rand: 1px solid var(--merk-lijn);
  --rlb-kaart-gat: var(--rlb-ruimte-m);
  --rlb-kaart-licht: 0 14px 38px rgba(16, 20, 28, .16);
  --rlb-kaart-tijd: .25s cubic-bezier(.22, .61, .36, 1);
  --rlb-kaart-breed: 330px;
  /* De afstand van de inhoudsrand tot de schermrand. Dezelfde clamp als
     .rlb-binnen gebruikt, zodat de rij precies op de marge begint. */
  --rlb-rand-gat: clamp(1rem, 4vw, 2.5rem);
}

.rlb-projecten--smal    { --rlb-kaart-breed: 265px; }
.rlb-projecten--normaal { --rlb-kaart-breed: 330px; }
.rlb-projecten--breed   { --rlb-kaart-breed: 420px; }

/* De sectie klipt zijwaarts. Dat moet, want het spoor steekt er bewust
   uit; zonder clip krijgt de PAGINA een horizontale scrollbalk, en dat is
   precies wat regel 2 in de kop van dit bestand verbiedt.
   `clip` en niet `hidden`: hidden maakt een scroll-container en breekt
   position:sticky verderop in de pagina. */
.rlb-projecten { overflow-x: clip; }

/* ---- filterbalk ---- */
.rlb-projectfilter {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r2);
  margin-bottom: var(--rlb-ruimte-m);
}
.rlb-projectfilter-knop {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: .55rem var(--rlb-r4); line-height: 1;
  color: var(--merk-tekst); background: var(--merk-paneel);
  border: 1.5px solid var(--merk-lijn); border-radius: var(--merk-radius_knop, 4px);
  transition: border-color var(--rlb-kaart-tijd), color var(--rlb-kaart-tijd),
              background var(--rlb-kaart-tijd);
}
.rlb-projectfilter-knop:hover { border-color: var(--merk-inkt); color: var(--merk-inkt); }
.rlb-projectfilter-knop[aria-pressed="true"] {
  background: var(--merk-accent); border-color: var(--merk-accent); color: var(--merk-op_accent);
}

/* ---- het spoor ----
   De rij loopt rechts dóór tot de schermrand in plaats van netjes op de
   inhoudsmarge te stoppen. Dat is geen effect: een rij die precies afgekapt
   wordt, leest als het einde. 50% - 50vw is exact de afstand van de
   inhoudsrand naar de schermrand, ook als de pagina op 1440 gecentreerd
   staat -- eerder stond hier -1.5rem en dat haalde de rand niet. */
.rlb-projecten-vak {
  margin-right: calc(50% - 50vw);
  padding-right: var(--rlb-rand-gat);
}
.rlb-projecten-spoor {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(var(--rlb-kaart-breed), 1fr);
  gap: var(--rlb-kaart-gat);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Geen scrollbalk onder de rij. Hij stond er lelijk bij en zegt niets wat
     de doorlopende rij en de pijlen niet al zeggen. Het spoor blijft gewoon
     sleepbaar en met het toetsenbord bedienbaar. */
  scrollbar-width: none;
}
.rlb-projecten-spoor::-webkit-scrollbar { width: 0; height: 0; }
.rlb-projecten-spoor > * { min-width: 0; scroll-snap-align: start; }

/* Op een breed scherm een raster: dan past alles en is schuiven lastiger
   dan kijken. 'carrousel' houdt hem altijd schuivend. */
@media (min-width: 62rem) {
  .rlb-projecten--auto .rlb-projecten-vak,
  .rlb-projecten--raster .rlb-projecten-vak { margin-right: 0; padding-right: 0; }
  .rlb-projecten--auto .rlb-projecten-spoor,
  .rlb-projecten--raster .rlb-projecten-spoor {
    grid-auto-flow: row; overflow: visible;
    grid-template-columns: repeat(var(--rlb-projecten-kol, 3), minmax(0, 1fr));
  }
  .rlb-projecten--k2 { --rlb-projecten-kol: 2; }
  .rlb-projecten--k3 { --rlb-projecten-kol: 3; }
  .rlb-projecten--k4 { --rlb-projecten-kol: 4; }
  .rlb-projecten--auto .rlb-projecten-pijlen,
  .rlb-projecten--raster .rlb-projecten-pijlen { display: none; }

  /* Eén kaart groter dan de rest. Een raster waarin alles even groot is
     leest als een catalogus; met een accent leest het als een keuze. */
  .rlb-projecten--auto .rlb-projectkaart--uit,
  .rlb-projecten--raster .rlb-projectkaart--uit { grid-column: span 2; }
  .rlb-projecten--k2 .rlb-projectkaart--uit { grid-column: span 2; }
}

/* ---- de kaart ---- */
.rlb-projectkaart { display: flex; }
.rlb-projectkaart-link {
  position: relative; display: block; width: 100%;
  min-height: 330px; isolation: isolate;
  text-decoration: none; color: #fff; overflow: hidden;
  background: var(--merk-inkt);
  border-radius: var(--rlb-kaart-radius);
  transition: transform var(--rlb-kaart-tijd), box-shadow var(--rlb-kaart-tijd);
}
.rlb-projecten--smal .rlb-projectkaart-link { min-height: 280px; }
.rlb-projectkaart--uit .rlb-projectkaart-link { min-height: 400px; }
.rlb-projectkaart-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--rlb-kaart-licht);
}
.rlb-projectkaart-link:focus-visible {
  outline: 2.5px solid var(--merk-accent); outline-offset: 3px;
}

.rlb-projectkaart-beeldvak { position: absolute; inset: 0; z-index: -1; display: block; }
.rlb-projectkaart-beeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.rlb-projectkaart-link:hover .rlb-projectkaart-beeld { transform: scale(1.055); }

/* De sluier stopt op tweederde: de bovenkant van de foto blijft onaangeraakt,
   en daar staat meestal de hal of de lucht -- het beeld dat verkoopt. */
.rlb-projectkaart-sluier {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(0deg,
    rgba(10, 12, 16, .92) 0%,
    rgba(10, 12, 16, .70) 28%,
    rgba(10, 12, 16, .22) 58%,
    rgba(10, 12, 16, 0) 82%);
  transition: opacity var(--rlb-kaart-tijd);
}
/* Marijn, 11 nov: bij hover werd de sluier juist LICHTER (opacity .88) en
   verdween de witte tekst in de foto. Nu wordt hij donkerder in plaats van
   lichter - de kaart "wordt zwart" onder de tekst, zodat titel, plaats en
   sterkteklasse altijd leesbaar blijven. */
.rlb-projectkaart-link:hover .rlb-projectkaart-sluier,
.rlb-projectkaart-link:focus-visible .rlb-projectkaart-sluier {
  opacity: 1;
  background: linear-gradient(0deg,
    rgba(8, 10, 13, .97) 0%,
    rgba(8, 10, 13, .88) 34%,
    rgba(8, 10, 13, .55) 64%,
    rgba(8, 10, 13, .18) 92%);
}
/* De tekst moet ook PASSEN: op een smalle kaart liep een lange projectnaam
   over de rand. Titel maximaal drie regels, plaats en klasse één regel. */
.rlb-projectkaart-titel {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; hyphens: manual;
}
.rlb-projectkaart-plaats, .rlb-projectkaart-groot { min-width: 0; }
.rlb-projectkaart-plaats { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Extra leesbaarheid op lichte foto's: een zachte schaduw achter de tekst. */
.rlb-projectkaart-body > * { text-shadow: 0 1px 2px rgb(0 0 0 / .45); }

/* Geen beeld betekent geen toestemming van de opdrachtgever - bij Xycle zijn
   de foto's uitdrukkelijk eigendom van Xycle. Dat is een reden om er geen
   foto neer te zetten, geen reden om een leeg vlak te laten staan.

   Dit was een egaal diepblauw blok met dunne verticale streepjes, en dat
   las als "er is iets misgegaan". Nu is het een getekende kaart: het
   grafietvlak van de site, een wapeningsraster in de maatvoering van het
   tekenwerk (150 mm hart-op-hart), en linksboven de rode maatlijn die ook
   boven de plaatsnaam staat. Hij hoort er met opzet te zijn. */
.rlb-projectkaart--leeg .rlb-projectkaart-link {
  background:
    /* het wapeningsraster */
    repeating-linear-gradient(90deg,
      transparent 0 37px,
      color-mix(in srgb, var(--merk-op_accent) 10%, transparent) 37px 39px),
    repeating-linear-gradient(0deg,
      transparent 0 37px,
      color-mix(in srgb, var(--merk-op_accent) 10%, transparent) 37px 39px),
    /* en een diagonale lichtval zodat het vlak niet dood is */
    linear-gradient(142deg,
      color-mix(in srgb, var(--merk-op_accent) 7%, var(--merk-inkt)) 0%,
      var(--merk-inkt) 62%);
  background-color: var(--merk-inkt);
}
.rlb-projectkaart--leeg .rlb-projectkaart-sluier { background: none; }
/* Een getypte notitie waar anders de foto zat, zodat zichtbaar is DAT er
   een reden is. De tekst komt uit het blok; staat er niets, dan blijft het
   vlak gewoon leeg. */
.rlb-projectkaart--leeg .rlb-projectkaart-body::before {
  content: attr(data-rl-geenbeeld);
  position: absolute; top: var(--rlb-ruimte-m); left: var(--rlb-ruimte-m);
  right: var(--rlb-ruimte-m);
  font-size: .74rem; font-weight: 600; letter-spacing: .06em;
  line-height: 1.5; max-width: 26ch;
  color: color-mix(in srgb, #fff 58%, transparent);
}

.rlb-projectkaart-body {
  position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; gap: var(--rlb-r1);
  height: 100%; min-height: inherit;
  padding: var(--rlb-ruimte-m);
}
.rlb-projectkaart-plaats {
  font-family: var(--merk-font-kop); font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: #fff; display: inline-flex; align-items: center; gap: var(--rlb-r2);
}
/* De maatlijn uit de bestektekening, als eyebrow-streepje. */
.rlb-projectkaart-plaats::before {
  content: ""; width: 26px; height: 6px; flex: none;
  border-left: 1.5px solid var(--merk-accent);
  border-right: 1.5px solid var(--merk-accent);
  border-bottom: 1.5px solid var(--merk-accent);
  transform: translateY(-2px);
}

/* Het getal is de kop.

   REGELHOOGTE .95 WAS TE KRAP. Een sterkteklasse is "C30/37": de schuine
   streep loopt ver onder de basislijn door, verder dan de regelbox bij een
   regelhoogte onder 1. Het label "STERKTEKLASSE" eronder kreeg die streep
   dus door zijn letters heen - zichtbaar op elke kaart met een /-klasse.
   Een krappe regelhoogte mag op een KOP van meerdere regels; op een enkele
   regel met een diepe glief levert hij alleen botsing op. */
.rlb-projectkaart-groot {
  display: block; font-family: var(--merk-font-kop); font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.04;
  letter-spacing: -.035em; color: #fff;
  font-variant-numeric: tabular-nums;
  margin-top: var(--rlb-r1);
}
.rlb-projectkaart--uit .rlb-projectkaart-groot { font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4rem); }
/* Het merkrood haalt op een donkere foto te weinig contrast; accent_op_donker
   is daar de rol voor (zie config/brand.json, _afwijkingen). */
.rlb-projectkaart-grootlabel {
  display: block; font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  /* NIET IN HET ACCENT. Dit label staat op een foto met een donkere
     sluier eroverheen; #E2000F haalt daar 3,4:1 en bij 11,5 px is dat te
     weinig. Op de kaarten las "STERKTEKLASSE" daardoor als een vlek onder
     het getal. Een lichte tint haalt ruim 9:1 en laat het getal het accent
     houden. */
  color: rgba(255, 255, 255, .78); margin-top: var(--rlb-r2);
}

.rlb-projectkaart-titel {
  font-size: 1.04rem; line-height: 1.3; margin: var(--rlb-r2) 0 0;
  color: #fff; font-weight: 600; text-wrap: balance;
}
.rlb-projectkaart--uit .rlb-projectkaart-titel { font-size: 1.22rem; }

/* RUIMTE VOOR DE PIJL.
   De pijlknop staat rechtsonder absoluut gepositioneerd; de tekst liep er
   onderdoor en "Constructievloeren voor Defensie" werd half afgedekt. De
   inhoud houdt die hoek nu vrij. */
.rlb-projectkaart-body { padding-right: calc(38px + var(--rlb-ruimte-m) + .5rem); }

/* Technische stempels. */
.rlb-projectkaart-labels {
  list-style: none; margin: var(--rlb-r3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--rlb-r1);
}
.rlb-projectkaart-labels li {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: var(--rlb-r1) var(--rlb-r2); line-height: 1;
  color: var(--merk-lijn, #E8EAEC); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 3px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* De pijl schuift pas in beeld bij hover: op een kaart die al een beeld,
   een getal en drie stempels draagt is hij anders ruis. */
.rlb-projectkaart-pijl {
  position: absolute; right: var(--rlb-ruimte-m); bottom: var(--rlb-ruimte-m);
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #fff; background: var(--merk-accent); border-radius: 3px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--rlb-kaart-tijd), transform var(--rlb-kaart-tijd);
}
.rlb-projectkaart-link:hover .rlb-projectkaart-pijl { opacity: 1; transform: none; }

/* ---- pijlen onder de rij ---- */
.rlb-projecten-pijlen {
  display: flex; gap: var(--rlb-r2); justify-content: flex-end;
  margin-top: var(--rlb-ruimte-m);
}
.rlb-rondknop {
  /* De rand stond op --merk-lijn (#E8EAEC): op een witte sectie vielen de
     carrouselknoppen daardoor weg. Nu een rand in de inktkleur en een
     accentkleur bij hover, zodat ze onmiskenbaar knoppen zijn. */
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  color: var(--merk-inkt); background: var(--merk-paneel);
  border: 1.5px solid var(--merk-inkt); border-radius: var(--merk-radius_knop, 4px);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
  transition: border-color var(--rlb-kaart-tijd), color var(--rlb-kaart-tijd);
}
.rlb-rondknop:hover { background: var(--merk-accent); border-color: var(--merk-accent); color: #fff; }
/* Op een donkere sectie draaien de kleuren om, anders verdwijnt de knop daar. */
.rlb--donker .rlb-rondknop, .rlb-projecten--donker .rlb-rondknop {
  color: #fff; background: transparent; border-color: #fff;
}
.rlb--donker .rlb-rondknop:hover, .rlb-projecten--donker .rlb-rondknop:hover {
  background: #fff; color: var(--merk-inkt); border-color: #fff;
}
.rlb-rondknop:focus-visible { outline: 2.5px solid var(--merk-accent); outline-offset: 2px; }
.rlb-rondknop[disabled] { opacity: .3; cursor: default; border-color: var(--merk-lijn); }

.rlb-projecten-meer { margin-top: var(--rlb-ruimte-l); }
.rlb-projectkaart[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rlb-projectkaart-link, .rlb-projectkaart-beeld,
  .rlb-projectkaart-sluier, .rlb-projectkaart-pijl { transition: none; }
  .rlb-projectkaart-link:hover { transform: none; }
  .rlb-projectkaart-link:hover .rlb-projectkaart-beeld { transform: none; }
  .rlb-projectkaart-pijl { opacity: 1; transform: none; }
  .rlb-projecten-spoor { scroll-behavior: auto; }
}

/* Metaregel onder de herokop: leestijd, opleverjaar. Klein, gedempt, met
   een punt ertussen in plaats van een komma -- een opsomming van losse
   feiten, geen zin. */
.rlb-hero-meta {
  list-style: none; margin: var(--rlb-r3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rlb-r2) var(--rlb-r4);
  font-size: .86rem; letter-spacing: .02em;
  color: var(--merk-gedempt); font-variant-numeric: tabular-nums;
}
.rlb-hero--achter .rlb-hero-meta { color: rgba(255, 255, 255, .8); }
.rlb-hero-meta li { display: inline-flex; align-items: center; }
.rlb-hero-meta li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; margin-right: var(--rlb-r4);
}


/* ========================================================================
   rl-sprongen — de miniatuurstrip.

   Zelfde rode draad als rl-projecten: dezelfde hoeken, randen, hover en
   tussenruimte, alleen kleiner. De rij loopt rechts door tot de schermrand,
   want een afgekapte rij leest als het einde.
   ======================================================================== */
.rlb-sprongen { overflow-x: clip; }
.rlb-sprongen-vak {
  margin-right: calc(50% - 50vw);
  padding-right: var(--rlb-rand-gat, clamp(var(--rlb-r4), 4vw, 2.5rem));
}
.rlb-sprongen-spoor {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(var(--rlb-sprong-breed, 158px), 1fr);
  gap: var(--rlb-ruimte-s);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.rlb-sprongen-spoor::-webkit-scrollbar { width: 0; height: 0; }
.rlb-sprongen-spoor > * { min-width: 0; scroll-snap-align: start; }
.rlb-sprongen--normaal { --rlb-sprong-breed: 210px; }

.rlb-sprong-link {
  display: flex; flex-direction: column; gap: var(--rlb-r2); height: 100%;
  text-decoration: none; color: inherit;
}
.rlb-sprong-beeldvak {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--merk-vlak);
  border: var(--rlb-kaart-rand, 1px solid var(--merk-lijn));
  border-radius: var(--rlb-kaart-radius, 6px);
}
.rlb-sprong-beeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.rlb-sprong-link:hover .rlb-sprong-beeld { transform: scale(1.06); }
.rlb-sprong-link:hover .rlb-sprong-beeldvak { border-color: var(--merk-accent); }
.rlb-sprong-link:focus-visible { outline: 2.5px solid var(--merk-accent); outline-offset: 3px; }
.rlb-sprong-leeg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--merk-gedempt); opacity: .4;
}
.rlb-sprong-label {
  display: block; font-family: var(--merk-font-kop); font-weight: 600;
  font-size: .94rem; line-height: 1.25; color: var(--merk-inkt);
}
.rlb-sprong-regel {
  display: block; font-size: .82rem; color: var(--merk-gedempt); margin-top: .15rem;
}

/* ========================================================================
   rl-kerngetallen — de harde getallen over een beeld.

   Het getal draagt; de eenheid staat er klein naast en het label eronder.
   Dat onderscheid is belangrijk: "3.560" moet van een meter afstand leesbaar
   zijn, "m2 per stort" hoeft dat niet.
   ======================================================================== */
.rlb-kerngetallen { position: relative; isolation: isolate; overflow: hidden; }
.rlb-kerngetallen--klein   { padding-block: var(--rlb-ruimte-l); }
.rlb-kerngetallen--groot   { padding-block: var(--rlb-ruimte-xxl); }
.rlb-kerngetallen-achter { position: absolute; inset: 0; z-index: -2; }
.rlb-kerngetallen-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zonder beeld een LICHT vlak. Dit stond op diepblauw; samen met de
   voettekst, de CTA-band en de kopbalk waren dat vier blauwe vlakken op
   een pagina waar config/brand.json er een voorschrijft. Het getal is hier
   het beeld - op wit telt het harder dan op blauw. */
.rlb-kerngetallen:not(.rlb-kerngetallen--beeld) {
  background: var(--merk-vlak, #F6F7F8);
  border-block: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-kerngetallen--beeld::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg,
    rgba(10, 12, 16, calc(var(--rlb-kg-sluier, .62) + .12)) 0%,
    rgba(10, 12, 16, var(--rlb-kg-sluier, .62)) 55%,
    rgba(10, 12, 16, calc(var(--rlb-kg-sluier, .62) * .6)) 100%);
}
/* Tekstkleuren volgen het vlak: licht vlak is donkere tekst, en alleen de
   variant MET foto heeft de donkere sluier en dus witte tekst nodig. */
.rlb-kerngetallen .rlb-titel { color: var(--merk-inkt, #1A1D21); }
.rlb-kerngetallen .rlb-intro { color: var(--merk-tekst, #3D444D); }
.rlb-kerngetallen .rlb-kicker { color: var(--merk-accent_donker, #A50B00); }
.rlb-kerngetallen--beeld .rlb-kop,
.rlb-kerngetallen--beeld .rlb-titel { color: #fff; }
.rlb-kerngetallen--beeld .rlb-intro { color: var(--merk-lijn, #E8EAEC); }
.rlb-kerngetallen--beeld .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

.rlb-kerngetallen-rij {
  list-style: none; margin: var(--rlb-ruimte-m) 0 0; padding: 0;
  display: grid; gap: var(--rlb-ruimte-m);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (min-width: 48rem) {
  .rlb-kerngetallen--n2 .rlb-kerngetallen-rij { grid-template-columns: repeat(2, 1fr); }
  .rlb-kerngetallen--n3 .rlb-kerngetallen-rij { grid-template-columns: repeat(3, 1fr); }
  .rlb-kerngetallen--n4 .rlb-kerngetallen-rij { grid-template-columns: repeat(4, 1fr); }
}
.rlb-kerngetal {
  display: flex; flex-direction: column; gap: var(--rlb-r1); min-width: 0;
  padding-top: var(--rlb-ruimte-s);
  border-top: 2px solid var(--merk-accent);
}

/* Drie regels onder elkaar, in deze volgorde en met vaste maten: getal,
   eenheid, label.

   Het was een rij: getal en eenheid naast elkaar op de baseline, met
   flex-wrap. Dat ging mis zodra de eenheid lang was ("tot C40/50"): die
   brak naar een volgende regel en kwam dus bij de ene kaart naast het
   getal te staan en bij de andere eronder, met verschillende grondlijnen
   tot gevolg. En omdat de eenheid .32em van een clamp-getal was, hing zijn
   grootte af van de schermbreedte - "werkdagen" plakte daardoor tegen de 2.

   Nu: het getal is het getal, de eenheid staat er altijd onder in een
   vaste rem-maat, en de tussenruimte is overal dezelfde. */
.rlb-kerngetal-waarde {
  font-family: var(--merk-font-kop); font-weight: 800;
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); line-height: .92;
  letter-spacing: -.04em;
  color: var(--merk-inkt, #1A1D21);
  font-variant-numeric: tabular-nums;
  display: block;
}
.rlb-kerngetal-eenheid {
  display: block;
  margin-top: var(--rlb-r1);
  font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.3;
  color: var(--merk-tekst, #3D444D);
}
.rlb-kerngetal-label {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .8rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
/* Over een foto draait het contrast om. */
.rlb-kerngetallen--beeld .rlb-kerngetal-waarde { color: #fff; }
.rlb-kerngetallen--beeld .rlb-kerngetal-eenheid { color: var(--merk-lijn, #E8EAEC); }
.rlb-kerngetallen--beeld .rlb-kerngetal-label { color: var(--rlb-op-donker-gedempt); }

/* ========================================================================
   rl-specs — de technische specificatie.

   Donker, dicht, met tabulaire cijfers zodat kolommen uitlijnen. Bij elke
   waarde staat de norm: dat is wat een specificatie onderscheidt van een
   bewering.
   ======================================================================== */
.rlb-specs--donker { background: var(--merk-inkt); color: var(--merk-lijn, #E8EAEC); }
.rlb-specs--donker .rlb-titel { color: #fff; }
.rlb-specs--donker .rlb-intro { color: var(--rlb-op-donker-gedempt); }
.rlb-specs--donker .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

/* De tabel scrollt in zijn EIGEN vak. Regel 2 uit de kop van dit bestand:
   de pagina scrolt nooit zijwaarts. */
.rlb-specs-vak {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--rlb-specs-lijn, var(--merk-lijn));
  border-radius: var(--rlb-kaart-radius, 6px);
}
.rlb-specs--donker { --rlb-specs-lijn: rgba(255, 255, 255, .14); }

.rlb-specs-tabel {
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-size: .96rem; font-variant-numeric: tabular-nums;
}
.rlb-specs-tabel th,
.rlb-specs-tabel td {
  text-align: left; padding: .85rem var(--rlb-ruimte-m);
  border-bottom: 1px solid var(--rlb-specs-lijn, var(--merk-lijn));
}
.rlb-specs-tabel thead th {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--merk-gedempt);
  background: var(--merk-vlak);
}
.rlb-specs--donker .rlb-specs-tabel thead th {
  background: rgba(255, 255, 255, .05); color: var(--rlb-op-donker-gedempt);
}
.rlb-specs-groep th {
  font-family: var(--merk-font-kop); font-weight: 700; font-size: .88rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--merk-accent);
  padding-top: var(--rlb-ruimte-m) !important;
}
.rlb-specs--donker .rlb-specs-groep th { color: var(--merk-accent_op_donker, #E2000F); }
.rlb-specs-tabel tbody th[scope="row"] { font-weight: 500; color: var(--merk-inkt); }
.rlb-specs--donker .rlb-specs-tabel tbody th[scope="row"] { color: #fff; }
.rlb-specs-waarde { font-weight: 600; white-space: nowrap; }
.rlb-specs--donker .rlb-specs-waarde { color: #fff; }
.rlb-specs-norm {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .86rem; letter-spacing: .04em; white-space: nowrap;
  color: var(--merk-gedempt);
}
.rlb-specs--donker .rlb-specs-norm { color: var(--rlb-op-donker-stil); }
.rlb-specs-tabel tbody tr:last-child th,
.rlb-specs-tabel tbody tr:last-child td { border-bottom: 0; }
.rlb-specs-noot {
  margin-top: var(--rlb-ruimte-s); font-size: .88rem;
  color: var(--merk-gedempt); max-width: var(--rlb-tekst-max);
}
.rlb-specs--donker .rlb-specs-noot { color: var(--rlb-op-donker-stil); }

@media (prefers-reduced-motion: reduce) {
  .rlb-sprong-beeld { transition: none; }
  .rlb-sprong-link:hover .rlb-sprong-beeld { transform: none; }
}

/* ========================================================================
   ZWETS — "WAAROM ZWETS": ZES PIJLERS OP EEN RUSTIG VLAK

   Marijn, 8 november 2026: "haal de lijn weg, geef de kaarten lichtgrijs
   net van wit af, mooie fade-ins, zes sterke punten, en eronder een
   gecentreerde ronde knop."

   Wat er stond: witte kaarten met een gekleurde streep langs de bovenrand
   die bij hover van kleur wisselde. Die streep is de vorm van een tabblad,
   niet van een pijler, en met zes kaarten naast elkaar wordt het een hek.
   Nu dragen de kaarten zelf de rust: een vlak dat net van wit afstaat, geen
   rand, en het rood zit alleen nog in het icoon.
   ======================================================================== */

.rlb-usps .rlb-usp-raster { gap: clamp(1rem, 1.6vw, 1.35rem); }

/* Geen rand, geen streep, geen schaduw. Alleen een vlak. */
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp > * {
  background: var(--merk-vlak, #F6F7F8);
  border: 0;
  border-top: 0;
  border-radius: var(--merk-radius_kaart, 6px);
  box-shadow: none;
  padding: clamp(var(--rlb-r5), 2.2vw, var(--rlb-r6));
  transition: background-color .22s var(--merk-curve, ease),
              transform .22s var(--merk-curve, ease);
}
/* Bij aanwijzen wordt het vlak een tintje dieper. Geen lift, geen schaduw:
   dit zijn geen knoppen, het zijn feiten. Alleen de kaarten die ergens
   heen gaan reageren merkbaar. */
.rlb-usps:not(.rlb-usps--metbeeld) a.rlb-usp-link:hover {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 6%, var(--merk-vlak, #F6F7F8));
  transform: translateY(-2px);
}

/* Het icoon staat boven de kop, niet ernaast: met zes kaarten in drie
   kolommen is er geen ruimte voor een icoonkolom naast de tekst. */
/* `align-items: flex-start` liet elk kind naar zijn eigen tekstbreedte
   krimpen. De <h3> heeft van de basisopmaak `text-align: center` mee, en
   in een gekrompen doosje staat die kop dan gecentreerd boven linkse
   tekst. `stretch` geeft elk kind de volle kaartbreedte terug. */
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp > * {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: var(--rlb-r1);
}
/* HET ICOON ZONDER DOOSJE.
   Marijn, 8 november 2026, twee keer: "iconen zijn niet goed genoeg" en
   "lelijke icons". Hij heeft gelijk, en het zat niet in de tekening maar in
   de presentatie: een dunne rode lijn van 26 px in een wit vierkantje op
   een lichtgrijze kaart. Drie zwakke signalen over elkaar - het doosje
   vecht met de kaart, het wit vecht met het grijs, en de lijn is te dun om
   op die afstand nog iets voor te stellen.

   Nu staat de tekening er kaal, groter en met meer lijngewicht. Dat is wat
   Apple en Revolut doen: geen omlijsting, geen achtergrondje, maar één
   duidelijk gebaar. Het rode streepje boven de kaart draagt het merk al;
   het icoon hoeft dat niet nog eens te doen en staat daarom in de inkt, met
   het accent alleen bij aanwijzen. */
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp .rlb-icoon {
  align-self: flex-start;
  width: 40px; height: 40px; padding: 0;
  margin-bottom: var(--rlb-r4);
  background: none;
  border-radius: 0;
  color: var(--merk-inkt, #1A1D21);
  stroke-width: 1.6;
  flex: none;
  transition: color var(--rlb-overgang, .22s ease),
              transform var(--rlb-overgang, .22s ease);
}
.rlb-usp:hover .rlb-icoon,
a.rlb-usp-link:hover .rlb-icoon {
  color: var(--merk-accent, #E2000F);
  transform: translateY(-2px);
}
/* Op een donkere band moet hij juist licht zijn. */
.rlb--vlak-diepblauw .rlb-usp .rlb-icoon,
.rlb--vlak-inkt .rlb-usp .rlb-icoon,
.rlb-usps--donker .rlb-usp .rlb-icoon { color: #fff; }
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp-titel {
  grid-column: auto;
  font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 0;
}
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp-tekst {
  grid-column: auto;
  margin: var(--rlb-r2) 0 0;
  color: var(--merk-tekst, #3D444D);
  line-height: 1.6;
}

/* De onthulling. rl.js zet data-rl-anim op elke .rlb-usp en geeft de
   kaarten in een raster oplopende vertraging; hier staat alleen hoe ver en
   hoe lang. Rustiger en langer dan de standaard: 28 px omhoog met een
   schaalsprong is een sprong, 14 px zonder schaal is een onthulling. */
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp[data-rl-anim="uit"] {
  opacity: 0;
  transform: translateY(14px);
}
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp[data-rl-anim] {
  transition: opacity .55s var(--merk-curve, ease) var(--rlb-vertraag, 0ms),
              transform .55s var(--merk-curve, ease) var(--rlb-vertraag, 0ms);
}
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp[data-rl-anim="aan"] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rlb-usps .rlb-usp[data-rl-anim] { opacity: 1; transform: none; transition: none; }
}

/* De afsluitende actie: gecentreerd onder de rij, met lucht ertussen. */
.rlb-usp-actie {
  margin: clamp(var(--rlb-r6), 3.5vw, var(--rlb-r7)) 0 0;
  text-align: center;
}

/* Een pilvormige knop. brand.json zet radius_knop bewust op 4 px - beton is
   recht - maar deze ene knop sluit een sectie af en mag zacht zijn. Het is
   de uitzondering, en daarom staat hij hier en niet in de huisstijl. */
.rlb-knop--pil {
  border-radius: 999px;
  padding-inline: clamp(1.6rem, 2.4vw, 2.4rem);
  gap: var(--rlb-r2);
}

/* ========================================================================
   ZWETS — SCHERMVULLENDE HERO MET SCROLTEKEN

   De homepage-hero vult het scherm: beeld (of video) van rand tot rand en
   van kopbalk tot onderrand. De kopbalk ligt er doorzichtig overheen, dus
   de hero loopt erachter door — vandaar de negatieve marge en de
   compenserende binnenruimte, en niet 100vh min een vaste balkhoogte.
   Die laatste klopt nooit: de balk krimpt bij scrollen.

   100svh, niet 100vh. Op een telefoon is 100vh de hoogte ZONDER de
   adresbalk; de hero stak daardoor onder het scherm uit en de knoppen
   vielen weg. svh is de kleine variant: altijd zichtbaar.
   ======================================================================== */
.rlb-hero--volledig {
  min-height: 100svh;
  display: flex;
  align-items: stretch;      /* de kolom vult de hoogte, dus kan het teken onderaan */
  position: relative;

  /* De sectieruimte van een gewoon blok (ongeveer 160 px boven en onder)
     komt BOVENOP 100svh: de hero werd daarmee 1124 px hoog op een scherm
     van 805. Een schermvullende hero regelt zijn eigen ruimte. Boven is
     dat de hoogte van de doorzichtige kopbalk, want de hero loopt
     daarachter door; onder niets, want het scrolteken heeft zijn eigen
     marge. */
  padding-block: clamp(var(--rlb-r9), 13vh, 9.5rem) 0;
}
/* De sectieruimte loopt via twee variabelen (--rlb-sectie-top en -bot) die
   door meerdere regels gezet worden. Ze hier overschrijven is zekerder dan
   padding-block, dat verderop opnieuw wordt gezet met dezelfde kracht. */
.rlb-hero--volledig {
  --rlb-sectie-top: clamp(7rem, 13vh, 9.5rem);
  --rlb-sectie-bot: 0rem;
}
@supports not (height: 100svh) {
  .rlb-hero--volledig { min-height: 100vh; }
}
.rlb-hero--volledig > .rlb-binnen { width: 100%; }

/* De video vult het vlak net als een achtergrondfoto. */
.rlb-hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rlb-hero-achter { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

/* ---- het scrolteken ---- */

/* Het teken staat in de HTML binnen .rlb-binnen, en die heeft op een hero
   met achtergrond `position: relative` om boven de sluier uit te komen. Een
   absoluut geplaatst kind rekende daardoor af tegen de TEKSTKOLOM in plaats
   van tegen de hero, en hing halverwege het scherm.

   Niet opgelost door .rlb-binnen static te maken: die z-index is nodig,
   anders verdwijnt de hele herotekst onder de sluier. In plaats daarvan
   wordt het teken onderaan de kolom geplaatst met de normale schikking —
   .rlb-binnen is op een volledige hero even hoog als de sectie. Geen
   absolute plaatsing, dus ook geen ankerpunt om kwijt te raken. */
.rlb-hero--volledig > .rlb-binnen {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rlb-hero--volledig > .rlb-binnen > .rlb-hero-rij { flex: 1 1 auto; display: flex; align-items: center; }

.rlb-hero-scroltip {
  align-self: center;
  flex: none;
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
  position: relative;
  z-index: 3;
  display: grid; place-items: center;
  width: 48px; height: 60px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  color: #fff;
  opacity: .82;
  transition: opacity .2s var(--merk-curve, ease), transform .2s var(--merk-curve, ease);
}
.rlb-hero-scroltip:hover { opacity: 1; transform: translateY(2px); }
.rlb-hero-scroltip:focus-visible {
  outline: 2px solid #fff; outline-offset: 4px; border-radius: 22px; opacity: 1;
}
.rlb-scroltip-muis {
  position: relative;
  display: block;
  width: 26px; height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px;
}
.rlb-scroltip-wiel {
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .rlb-scroltip-wiel { animation: rlb-scroltip 1.9s cubic-bezier(.3,.1,.3,1) infinite; }
  @keyframes rlb-scroltip {
    0%   { transform: translateY(0);    opacity: 0; }
    15%  { opacity: 1; }
    55%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(14px); opacity: 0; }
  }
}
/* Op een laag scherm (landscape telefoon) is er geen ruimte voor een hint
   onderaan; daar overlapt hij de knoppen. */
@media (max-height: 560px) {
  .rlb-hero-scroltip { display: none; }
}

/* De eyebrow boven de herokop stond in merkrood op een donkere foto. Dat is
   ongeveer 3:1 — genoeg voor een vlak, te weinig voor letters van 16 px met
   spatiëring. Er komt geen tweede rood bij (zie sectie 68): de LETTERS gaan
   naar wit en het streepje ervoor blijft rood. Zo blijft het merkaccent
   staan en is de regel leesbaar. */
.rlb-hero--achter .rlb-kicker,
.rlb-hero--achtergrond .rlb-kicker,
.rlb-hero--volledig .rlb-kicker { color: #fff; }
.rlb-hero--achter .rlb-kicker::before,
.rlb-hero--achtergrond .rlb-kicker::before,
.rlb-hero--volledig .rlb-kicker::before { background: var(--merk-accent, #E2000F); }

/* ========================================================================
   ZWETS — LINK NAAR BUITEN

   Marijn, 8 november 2026: een link naar buiten alleen voor normen, wet- en
   regelgeving en brancheorganisaties, en altijd in een nieuw tabblad.
   api/lib/nx-blokken-rl.php dwingt dat af (nxrl_anker); hier staat alleen
   hoe je het ziet.

   Het pijltje is een ::after op een <span>, geen content op de link zelf:
   anders komt hij bij een link van twee regels achter de laatste letter van
   de eerste regel te hangen. De tekst "(opent in een nieuw tabblad)" staat
   er voor schermlezers; een pijltje alleen zegt niets als je niet kijkt.
   ======================================================================== */
.rlb-extern {
  display: inline-block;
  width: .62em; height: .62em;
  margin-left: .32em;
  vertical-align: baseline;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  /* vierkantje met een hoek eruit: het standaardteken voor "nieuw venster" */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 62% 38%, 0 38%);
}
.rlb-enkel-lezer {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   ZWETS — KEUZEHULP: CONTEXTKAARTEN

   Geen klantcases maar het vraagstuk van de bezoeker: de situatie waar hij
   in zit, wat dat technisch betekent, en waar hij dan uitkomt.

   De kaart is daarom VERTICAAL opgebouwd als een redenering, niet als een
   doosje met een plaatje: nummer, situatie, gevolg, uitkomst. De uitkomst
   staat altijd onderaan uitgelijnd, ook als de ene kaart twee regels tekst
   heeft en de andere vier — anders leest de rij als een rommelige tabel.

   Rood zit op één plek: het nummer en de pijl. Dat is genoeg om de rij
   ritme te geven zonder dat het een kerstboom wordt.
   ======================================================================== */
.rlb-keuze-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(var(--rlb-r4), 1.6vw, var(--rlb-r5));
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
@media (min-width: 60rem) {
  .rlb-keuzehulp--k2 .rlb-keuze-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-keuzehulp--k3 .rlb-keuze-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rlb-keuze-kaart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(var(--rlb-r5), 2.2vw, var(--rlb-r6));
  background: var(--merk-vlak, #F6F7F8);
  border-radius: var(--merk-radius_kaart, 6px);
  /* Een lijn langs de bovenrand in het accent: hetzelfde teken als de
     maatlijn boven een plaatsnaam op een projectkaart. Eén taal. */
  border-top: 3px solid var(--merk-accent, #E2000F);
  transition: background-color .22s var(--merk-curve, ease);
}

/* Het volgnummer. Groot, gedempt, achter de tekst langs: het geeft de rij
   ritme zonder de kop te beconcurreren. */
.rlb-keuze-nr {
  font-family: var(--merk-font-kop);
  font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  color: var(--merk-accent, #E2000F);
  margin-bottom: var(--rlb-r3);
}

.rlb-keuze-situatie {
  margin: 0 0 var(--rlb-r2);
  font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em;
  color: var(--merk-inkt, #1A1D21);
  text-wrap: balance;
}
.rlb-keuze-gevolg {
  margin: 0;
  color: var(--merk-tekst, #3D444D);
  line-height: 1.6;
}
.rlb-keuze-gevolg p { margin: 0 0 var(--rlb-r2); }
.rlb-keuze-gevolg p:last-child { margin-bottom: 0; }

/* De uitkomst drukt zichzelf naar de onderkant, zodat alle kaarten in een
   rij op dezelfde lijn eindigen. */
.rlb-keuze-uit {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  margin-top: auto; padding-top: var(--rlb-r4);
  font-weight: 700; font-size: .96rem; line-height: 1.35;
  color: var(--merk-accent_donker, #A50B00);
  text-decoration: none;
}
a.rlb-keuze-uit--link .rlb-icoon { transition: transform .22s var(--merk-curve, ease); }
a.rlb-keuze-uit--link:hover { text-decoration: underline; text-underline-offset: 3px; }
a.rlb-keuze-uit--link:hover .rlb-icoon { transform: translateX(4px); }

/* De kaart als geheel reageert alleen als er iets te klikken valt. */
.rlb-keuze-kaart:has(a.rlb-keuze-uit--link):hover {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 5%, var(--merk-vlak, #F6F7F8));
}

/* Onthulling, net als de pijlers: 14 px omhoog, geen schaalsprong. */
.rlb-keuzehulp .rlb-keuze-kaart[data-rl-anim="uit"] { opacity: 0; transform: translateY(14px); }
.rlb-keuzehulp .rlb-keuze-kaart[data-rl-anim] {
  transition: opacity .55s var(--merk-curve, ease) var(--rlb-vertraag, 0ms),
              transform .55s var(--merk-curve, ease) var(--rlb-vertraag, 0ms);
}
.rlb-keuzehulp .rlb-keuze-kaart[data-rl-anim="aan"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rlb-keuzehulp .rlb-keuze-kaart[data-rl-anim] { opacity: 1; transform: none; transition: none; }
}

/* Twee dingen die uit de basisopmaak doorkwamen en in deze variant verkeerd
   uitpakken. Gemeten, niet geraden:

   1. De kop had `align-self: center`. Dat is logisch in de oorspronkelijke
      opmaak — daar staat het icoon in een eigen kolom ernaast en moet de kop
      verticaal meelopen. In een kolom krimpt de kop daardoor naar zijn
      tekstbreedte en komt hij HORIZONTAAL gecentreerd te staan, boven
      linkse tekst. Gemeten: kop op x=399, tekst op x=257.

   2. De knop eronder staat in een <p>, en een <p> heeft een leesbreedte
      (726 px). `text-align: center` centreerde de knop daarmee binnen die
      726 px in plaats van binnen de sectie. */
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp-titel,
.rlb-usps:not(.rlb-usps--metbeeld) .rlb-usp-tekst {
  align-self: stretch;
  width: 100%;
  text-align: left;
}
.rlb-usp-actie {
  max-width: none;
  display: flex;
  justify-content: center;
}

/* ========================================================================
   ZWETS — DE KOPBALK IN TWEE LAGEN

   Marijn, 8 november 2026: contactgegevens terug in de kopbalk, een
   zoekveld erbij, een icoon naar het klantportaal, en het geheel moet ogen
   als de site van een grote organisatie.

   Dat past niet op één regel. Gemeten: met zes menu-items, het woordmerk en
   de offerteknop is er op 1920 px nog 108 px over in de 1440-kolom, en het
   telefoonnummer alleen kost al 150.

   Dus twee lagen. De bovenband draagt wat je één keer opzoekt — telefoon,
   e-mail, werkgebied, portaal — en schuift bij het scrollen weg. De
   hoofdbalk draagt wat je onderweg nodig hebt en blijft staan.

   De bovenband is ALTIJD donker, ook boven een lichte pagina: zo is de
   bovenrand van het scherm één vorm in plaats van twee halve balken.
   ======================================================================== */
.rlb-header-boven {
  background: var(--merk-diepblauw, #0E284B);
  color: #fff;
  font-size: .82rem;
  line-height: 1.2;
  /* De hoogte zit in een variabele zodat de ankeroffset en het wegschuiven
     met dezelfde waarde rekenen. */
  --rlb-boven-h: 40px;
  height: var(--rlb-boven-h);
  overflow: hidden;
  transition: height .24s var(--merk-curve, ease), opacity .2s var(--merk-curve, ease);
}
.rlb-boven-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rlb-r5);
  height: var(--rlb-boven-h);
}
.rlb-boven-contact {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
  min-width: 0;
}
.rlb-boven-contact li,
.rlb-boven-portaal {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  white-space: nowrap;
}
.rlb-boven-contact a,
.rlb-boven-portaal {
  color: var(--rlb-op-donker-licht);
  text-decoration: none;
  font-weight: 600;
  transition: color .18s var(--merk-curve, ease);
}
.rlb-boven-contact a:hover,
.rlb-boven-portaal:hover { color: #fff; }
.rlb-boven-contact .rlb-icoon,
.rlb-boven-portaal .rlb-icoon { color: var(--merk-accent, #E2000F); flex: none; }
.rlb-boven-stil { color: var(--rlb-op-donker-stil); }

/* Het portaal is de enige actie in deze band en krijgt daarom een randje:
   zonder dat verdwijnt hij tussen de contactgegevens. */
.rlb-boven-portaal {
  padding: .3rem var(--rlb-r3);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--merk-radius_knop, 4px);
  flex: none;
}
.rlb-boven-portaal:hover { border-color: rgba(255, 255, 255, .45); }

/* Zodra er gescrold wordt klapt de band dicht. rl.js zet data-rl-gescrold
   al voor de compacte kopbalk; we haken op dezelfde vlag aan, zodat er geen
   tweede scrollistener bijkomt. */
.rlb-header[data-rl-gescrold="1"] .rlb-header-boven {
  height: 0;
  opacity: 0;
}

/* Op een telefoon is er geen ruimte voor een tweede balk met tekst. Daar
   blijft alleen het telefoonnummer staan; de rest staat in het uitklapmenu
   en in de voettekst. */
@media (max-width: 767px) {
  .rlb-header-boven { --rlb-boven-h: 36px; font-size: .78rem; }
  .rlb-boven-contact li:not(:first-child) { display: none; }
  .rlb-boven-portaal span { display: none; }
  .rlb-boven-portaal { padding: var(--rlb-r1) var(--rlb-r2); }
}

/* ---- ZOEKEN: uitschuivend veld ---- */
.rlb-zoek {
  display: flex; align-items: center;
  position: relative;
}
.rlb-zoek-knop {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer;
  border-radius: 50%;
  transition: background-color .18s var(--merk-curve, ease);
}
.rlb-zoek-knop:hover { background: rgba(255, 255, 255, .12); }
.rlb-header[data-rl-gescrold="1"] .rlb-zoek-knop:hover { background: var(--merk-vlak, #F6F7F8); }

/* Dicht: breedte nul, niet display:none — anders is er niets om te animeren
   en kan het veld ook niet gefocust worden door de knop. */
.rlb-zoek-veld {
  width: 0; min-width: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none;
  font-family: inherit; font-size: .9rem;
  color: inherit; background: transparent;
  border-bottom: 1px solid transparent;
  transition: width .28s var(--merk-curve, ease),
              opacity .22s var(--merk-curve, ease),
              padding .28s var(--merk-curve, ease),
              border-color .22s var(--merk-curve, ease);
}
.rlb-zoek[data-rl-open="1"] .rlb-zoek-veld {
  width: clamp(180px, 22vw, 300px);
  padding: var(--rlb-r2) var(--rlb-r1);
  opacity: 1; pointer-events: auto;
  border-bottom-color: currentColor;
}
.rlb-zoek-veld::placeholder { color: currentColor; opacity: .55; }
.rlb-zoek-veld:focus { outline: none; }
.rlb-zoek[data-rl-open="1"] .rlb-zoek-veld:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F); outline-offset: 3px;
}
/* Zonder JavaScript staat het veld gewoon open: dan is zoeken bereikbaar
   in plaats van onzichtbaar. */
.no-js .rlb-zoek-veld,
.rlb-zoek:not([data-rl-open]) .rlb-zoek-veld:focus {
  width: clamp(180px, 22vw, 300px); padding: var(--rlb-r2) var(--rlb-r1);
  opacity: 1; pointer-events: auto; border-bottom-color: currentColor;
}
@media (max-width: 1199px) { .rlb-zoek { display: none; } }

/* ---- taal en de rechterkant van de bovenbalk ---- */
.rlb-boven-rechts {
  display: flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.5rem);
  flex: none;
}
.rlb-taal {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  color: var(--rlb-op-donker-stil);
}
.rlb-taal .rlb-icoon { color: var(--merk-accent, #E2000F); flex: none; }
.rlb-taal-knop {
  padding: .15rem var(--rlb-r1);
  font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  color: var(--rlb-op-donker-stil); text-decoration: none;
  border-radius: 3px;
  transition: color .18s var(--merk-curve, ease);
}
.rlb-taal-knop:hover { color: #fff; }
.rlb-taal-knop--actief { color: #fff; }
/* Een scheidingsstreepje tussen de talen, zonder het in de HTML te zetten. */
.rlb-taal-knop + .rlb-taal-knop { border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--rlb-r2); margin-left: .15rem; }

/* ========================================================================
   ZWETS — DE KOPBALK STRAKKER

   Marijn, 8 november: "al beter, maar kan qua design nog strakker."

   Drie dingen maken een kopbalk strak, en geen ervan is een kleur:
   1. EEN basislijn. Alles in de hoofdbalk hangt aan hetzelfde midden;
      het woordmerk had een eigen onderstreping die daar dwars op stond.
   2. GELIJKE trefvlakken. Het zoekicoon, de menulink en de knop waren
      42, 36 en 44 px hoog. Dat zie je niet bewust, maar het oogt rommelig.
   3. EEN scheidslijn, niet twee. De balk had een schaduw EN een rand EN
      een accentlijn. Nu: een haarlijn, en alleen zodra er gescrold is.
   ======================================================================== */
.rlb-header-rij { align-items: center; }

/* Het woordmerk: geen onderstreping, wel een duidelijke focusring. */
.rlb-merk { text-decoration: none; }
.rlb-merk-tekst { text-decoration: none; }
.rlb-merk:focus-visible { outline: 2px solid var(--merk-accent, #E2000F); outline-offset: 4px; }

/* Alle bedienbare dingen in de hoofdbalk even hoog. */
.rlb-header .rlb-navlink,
.rlb-header .rlb-zoek-knop,
.rlb-header .rlb-knop--primair { min-height: 42px; display: inline-flex; align-items: center; }

/* Eén haarlijn onderaan, en alleen na het scrollen — boven de hero hoort de
   balk onzichtbaar te zijn. */
.rlb-header::after { content: none; }
.rlb-header[data-rl-gescrold="1"] {
  box-shadow: 0 1px 0 0 var(--merk-lijn, #E8EAEC), 0 8px 24px color-mix(in srgb, var(--merk-inkt, #1A1D21) 6%, transparent) !important;
  border-bottom: 0 !important;
}

/* Het streepje onder een menulink: dunner, strakker, en in het accent. */
.rlb-header .rlb-navlink::after {
  height: 2px;
  background: var(--merk-accent, #E2000F);
}

/* ========================================================================
   ZWETS — BOVENBALK IN HET ACCENT

   Marijn, 8 november 2026: "maak de header-topbalk rood, tekst normal
   weight 400, iconen iets groter — die zijn nu te klein — en zet ze niet
   tegen de tekst, iets meer spacing."

   De band was diepblauw; dat was de derde donkere kleur op het scherm
   (balk, hero-sluier, voettekst). In het accent is hij één ding: een
   merkband. Wit op #E2000F haalt 4.95:1, dus de tekst blijft leesbaar —
   maar dan moet hij wel wit zijn en niet grijs, want var(--rlb-op-donker-licht) op rood zakt
   onder de norm.
   ======================================================================== */
.rlb-header-boven {
  background: var(--merk-accent, #E2000F);
  --rlb-boven-h: 46px;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .005em;
}
.rlb-boven-contact { gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.rlb-boven-contact li,
.rlb-boven-portaal,
.rlb-taal { gap: var(--rlb-r3); }          /* lucht tussen icoon en tekst */

/* Op rood is grijs te zwak: alles wordt wit. */
.rlb-boven-contact a,
.rlb-boven-portaal,
.rlb-taal,
.rlb-taal-knop,
.rlb-boven-stil { color: #fff; font-weight: 400; }
.rlb-boven-contact a:hover,
.rlb-boven-portaal:hover,
.rlb-taal-knop:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rlb-boven-stil { opacity: .85; }

/* Het accent kán niet het accent zijn op een accentkleur. De iconen worden
   wit met iets minder nadruk, zodat de tekst voorgaat. */
.rlb-boven-contact .rlb-icoon,
.rlb-boven-portaal .rlb-icoon,
.rlb-taal .rlb-icoon { color: #fff; opacity: .85; }

.rlb-boven-portaal {
  border-color: rgba(255, 255, 255, .5);
  font-weight: 600;                /* dit is de enige actie: iets zwaarder */
  padding: var(--rlb-r1) var(--rlb-r4);
}
.rlb-boven-portaal:hover { border-color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }

.rlb-taal-knop--actief { font-weight: 700; }
.rlb-taal-knop + .rlb-taal-knop { border-left-color: rgba(255,255,255,.45); }

@media (max-width: 767px) {
  .rlb-header-boven { --rlb-boven-h: 40px; font-size: .82rem; }
}

/* De bovenbalk als verloop van het merkrood naar het donkere rood. Marijn
   gebruikt dat verloop ook op de hero's van de oude site. Let op: dit zijn
   de twee roden die al in config/brand.json staan (#E2000F en #A50B00) —
   een verloop is hier een VORM, geen derde kleur. Daarom ook via de
   variabelen: wie het rood in de Studio wijzigt, wijzigt dit verloop mee. */
.rlb-header-boven {
  background: linear-gradient(100deg,
    var(--merk-accent, #E2000F) 0%,
    var(--merk-accent, #E2000F) 38%,
    var(--merk-accent_donker, #A50B00) 100%);
}

/* ========================================================================
   ZWETS — DE CIJFERBAND OPNIEUW

   Marijn, 8 november 2026, over de band op de monolietvloerpagina: "klopt
   niet en design is niet mooi, moet beter."

   Twee dingen zaten fout. De eerste was inhoudelijk en staat in de
   paginadata: de eyebrow zei "Toepassingen" boven betonklassen. De tweede
   was de opmaak, en die had drie problemen tegelijk:

   1. Het getal plakte tegen de rode streep erboven; er was geen lucht.
   2. Het label stond ONDER de eenheid in een kleinere letter, waardoor er
      drie regels in drie groottes onder elkaar stonden. Dat leest als een
      voetnoot, niet als een cijfer waar je trots op bent.
   3. De kolommen hadden geen onderlinge afstand, dus liepen "28 dagen" en
      "0 voegen" visueel in elkaar over.

   Nu: lucht boven het getal, het getal groot, en eenheid en label samen op
   EEN regel eronder in dezelfde grootte. Zo is het een cijfer met een
   bijschrift, en niet een stapeltje van drie.
   ======================================================================== */
.rlb-kerngetallen-rij {
  gap: clamp(var(--rlb-r5), 4vw, 4rem);
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}
.rlb-kerngetal {
  gap: 0;
  padding-top: clamp(1.1rem, 1.8vw, 1.6rem);
  border-top-width: 2px;
}
.rlb-kerngetal-waarde {
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.045em;
}
/* Eenheid en label op een regel, in dezelfde grootte. De eenheid draagt het
   gewicht, het label de uitleg. */
.rlb-kerngetal-eenheid {
  margin-top: var(--rlb-r3);
  font-size: 1.0625rem; font-weight: 700;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-kerngetal-label {
  margin-top: .15rem;
  font-size: .9375rem; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
  color: var(--merk-gedempt, #696F77);
}
.rlb-kerngetallen--beeld .rlb-kerngetal-eenheid { color: #fff; }
.rlb-kerngetallen--beeld .rlb-kerngetal-label { color: var(--rlb-op-donker-gedempt); }

/* Het beeld loopt nu buiten .rlb-binnen (zie nx-blokken-rl.php), dus hij
   moet ook werkelijk de hele sectie vullen. */
.rlb-kerngetallen-achter { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.rlb-kerngetallen-achter picture { display: block; width: 100%; height: 100%; }
.rlb-kerngetallen-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ========================================================================
   ZWETS — PROJECTKAARTEN HOGER

   Marijn: "op monolietvloeren zit een carrousel met cases, maak de cases
   hoger, nu zie je amper iets."

   Hij heeft gelijk: de kaart was 330 px hoog en de sluier plus de tekst
   nemen de onderste 160 px in beslag. Wat er van de foto overblijft is een
   strook van 170 px, en daar is een hal niet in te herkennen.

   Een kaart met een beeld dat het verhaal moet dragen heeft hoogte nodig.
   Niet oneindig: boven de 520 px past er op een laptop nog maar een rij in
   beeld, en dan zie je de rest juist weer niet.
   ======================================================================== */
.rlb-projectkaart-link { min-height: clamp(380px, 34vw, 470px); }
.rlb-projecten--smal .rlb-projectkaart-link { min-height: clamp(330px, 28vw, 400px); }
.rlb-projectkaart--uit .rlb-projectkaart-link { min-height: clamp(440px, 40vw, 560px); }

/* De sluier stopt nu hoger, zodat er meer foto overblijft: op een hogere
   kaart is er ruimte voor de tekst zonder de hele onderhelft te dempen. */
.rlb-projectkaart-sluier {
  background: linear-gradient(0deg,
    rgba(10, 12, 16, .92) 0%,
    rgba(10, 12, 16, .66) 24%,
    rgba(10, 12, 16, .18) 50%,
    rgba(10, 12, 16, 0) 72%);
}

/* ========================================================================
   ZWETS — DRIE DINGEN UIT DE SCHERMAFDRUK VAN 10:56

   1. DE GERELATEERDE KAARTEN LIEPEN AAN ELKAAR VAST. In de rasterweergave
      staan titel, tekst en de "meer"-regel als <span> onder elkaar in de
      HTML, maar een <span> is inline — dus las het als "Hoe hard wordt het
      oppervlak?Machinaal dichtgezet: slijtvaster dan het beton eronder."
      De carrouselweergave had dit niet omdat die zijn eigen opmaak heeft.

   2. DE LOPENDE TEKST STOND INGESPRONGEN. Een tekstblok houdt zijn
      leesbreedte van 75 tekens, maar die werd gecentreerd binnen de kolom.
      Daardoor begon "Wat is een monolietvloer?" 140 px verder naar rechts
      dan de kop eronder. Smal is goed; ingesprongen is een fout.

   3. HET GOUDEN RANDJE ONDER DE CTA-BAND. Dat zat in rgba-vorm in het
      bestand en ontsnapte daarmee aan de kleursweep van vanochtend, die op
      hexcodes zocht.
   ======================================================================== */

/* 1. */
.rlb-ger-titel,
.rlb-ger-tekst,
.rlb-ger-meer { display: block; }
.rlb-ger-titel {
  font-size: 1.0625rem; line-height: 1.35;
  margin-bottom: var(--rlb-r1);
  text-wrap: balance;
}
.rlb-ger-tekst { line-height: 1.55; margin-bottom: var(--rlb-r1); }
.rlb-ger-meer { margin-top: var(--rlb-r3); }

/* 2. */
section.rlb-tekst > .rlb-binnen > .rlb-tekst-rij,
section.rlb-tekst:not(.rlb-tekst--met-kaart) .rlb-tekst-rij,
section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen > p {
  margin-inline: 0;
}

/* 3. De band sluit af met een lijn in de lijnkleur, niet met een accent.
   Een accentlijn onder elke CTA-band maakt het accent juist minder waard. */
.rlb-cta-sectie { border-bottom: 1px solid var(--merk-lijn, #E8EAEC); }
.rlb-cta-sectie--beeld { border-bottom: 0; }

/* GEMETEN, niet geraden. Op 1500 px: .rlb-binnen loopt van 135 tot 1335,
   maar .rlb-tekst-rij stond op 567..1295 met marge 0 en een maximum van
   800 px. Geen auto-marge dus, maar rechts uitgelijnd in het raster — het
   tekstblok hing tegen de rechterrand van de kolom aan terwijl elke kop
   eronder op 135 begint. Dat is de uitlijning waar Marijn op 7 november
   als eerste over viel.

   De leesbreedte blijft; alleen het beginpunt gaat terug naar links. */
section.rlb-tekst > .rlb-binnen > .rlb-tekst-rij,
section.rlb-tekst .rlb-tekst-rij {
  justify-self: start;
  margin-inline: 0;
}
section.rlb-tekst .rlb-tekst-kolom { justify-self: start; }

/* De kop in de linkerkolom stond 40 px naar binnen ten opzichte van de rest
   van de pagina (gemeten: kop op 175, specificatieblok op 135). Een kop die
   bijna uitlijnt leest als een fout; helemaal uitlijnen of duidelijk
   inspringen zijn allebei een keuze, er tussenin is er geen. */
section.rlb-tekst > .rlb-binnen > .rlb-kop,
section.rlb-faq > .rlb-binnen > .rlb-kop,
section.rlb-gerelateerd > .rlb-binnen > .rlb-kop {
  margin-inline: 0;
  padding-inline: 0;
}

/* ========================================================================
   ZWETS — DE SPECIFICATIEBAND IN DE MERKKLEUR

   Marijn, 8 november 2026: "deze sectie is donkergrijs maar dat gebruiken we
   qua kleuren niet echt, dus pak daar die kleur die we ook voor de footer
   gebruiken, die gradient plus overlay. Maak er een mooie animatie in dat
   hij een keer van kleur fade naar de juiste kleur."

   De tabel stond op --merk-inkt, en dat is de TEKSTkleur van de site, geen
   vlakkleur. Nu dezelfde diepblauwe gradient met donkere sluier als de
   voettekst (--zwets-diep), zodat de site twee donkere vlakken heeft die
   identiek zijn in plaats van twee die net verschillen.

   De animatie loopt EEN KEER, bij het in beeld komen, en duurt 900 ms.
   Geen herhaling en geen beweging: alleen de kleur zakt van grafiet naar
   diepblauw. Dat is genoeg om op te vallen zonder dat iemand erop moet
   wachten. Bij prefers-reduced-motion staat de eindkleur er meteen.
   ======================================================================== */
.rlb-specs--donker {
  background: var(--zwets-diep);
  background-color: var(--merk-diepblauw, #0E284B);
  color: var(--merk-lijn, #E8EAEC);
}

@media (prefers-reduced-motion: no-preference) {
  /* De gradient zelf is niet te animeren; een overlaag wél. Deze ligt als
     grafiet over de band en vervaagt eenmalig, waardoor het diepblauw
     "doorkomt". Eén eigenschap, samengesteld door de compositor: geen
     layout, geen herteken, dus ook op een telefoon vloeiend. */
  .rlb-specs--donker::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--merk-inkt, #1A1D21);
    pointer-events: none;
    /* STANDAARD DOORZICHTIG. Hij stond op 1 en werd pas 0 bij het in beeld
       komen - maar rl.js zet data-rl-anim alleen op elementen die ONDER de
       vouw beginnen. Een band die al in beeld staat kreeg dus nooit "aan"
       en bleef voorgoed grafiet. Zelfde valkuil als bij een CSS-animatie
       die aan moet in plaats van uit: zonder JavaScript hoort de eindstand
       zichtbaar te zijn, niet de beginstand. */
    opacity: 0;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
  }
  .rlb-specs--donker[data-rl-anim="uit"]::after { opacity: 1; transition: none; }
  .rlb-specs--donker[data-rl-anim="aan"]::after { opacity: 0; }
  /* De inhoud blijft boven de overlaag. */
  .rlb-specs--donker > * { position: relative; z-index: 1; }
}
.rlb-specs--donker { position: relative; isolation: isolate; }

/* ========================================================================
   ZWETS — DE BOVENBALK, DERDE RONDE

   Marijn, 8 november 2026, drie punten op een rij:
     "Klantportaal staat in de header nog in verkeerde dikte"
     "Heel Nederland staat niet in het wit, nu van het wit af"
     "icons mail telefoon staan niet mooi verticaal gecentreerd en ook nog
      tegen de tekst"

   Alle drie terecht, en alle drie dezelfde oorzaak: ik had de bovenbalk op
   gewicht 400 gezet en daarna uitzonderingen gemaakt die er niet hadden
   moeten zijn.

   1. Het portaal stond op 600 omdat het de enige actie is. Maar een rij
      waarin één item zwaarder is dan de rest leest als een fout zolang dat
      item er verder hetzelfde uitziet. Het randje doet dat werk al.
   2. Het werkgebied stond op opacity .85 om "rustiger" te zijn. Op een rode
      band is dat geen rust maar een vlek: alles eromheen is wit en dit net
      niet.
   3. De iconen stonden in de regel met align-items van de li, en een SVG
      heeft een andere basislijn dan tekst. Vandaar dat ze een paar pixels
      te hoog hingen. Ze staan nu op hun eigen blokje, verticaal gecentreerd
      ten opzichte van de regelhoogte van de tekst, met meer lucht erna.
   ======================================================================== */

/* 1 en 2: één gewicht, één kleur. */
.rlb-header-boven,
.rlb-boven-contact a,
.rlb-boven-portaal,
.rlb-taal,
.rlb-taal-knop,
.rlb-boven-stil {
  font-weight: 400;
  color: #fff;
  opacity: 1;
}
.rlb-boven-portaal { font-weight: 400; }
.rlb-taal-knop--actief { font-weight: 600; }   /* alleen de huidige taal */

/* 3: het icoon in een eigen vakje, op de optische middenlijn van de tekst. */
.rlb-boven-contact li,
.rlb-boven-portaal,
.rlb-taal {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r3);
  line-height: 1.5;
}
.rlb-boven-contact .rlb-icoon,
.rlb-boven-portaal .rlb-icoon,
.rlb-taal .rlb-icoon {
  flex: none;
  display: block;
  width: 18px; height: 18px;
  /* Een SVG zit op de basislijn van de regel en hangt daardoor te hoog in
     een rij met tekst van 14 px. Deze correctie zet hem optisch midden. */
  margin-block: -1px 0;
  color: #fff;
  opacity: 1;
}
.rlb-boven-contact a { display: inline-flex; align-items: center; gap: var(--rlb-r3); }

/* ========================================================================
   ZWETS — HET LOGO IN DE KOPBALK

   Marijn, 8 november 2026: "head logo mist nog, staat nu gewoon tekst."
   Klopt: er was geen logobestand, dus viel de kopbalk terug op het
   woordmerk in letters. Het logo staat nu in assets/logo/ (opgehaald van de
   live site, 1048x550) en wordt op 320 en 640 px geleverd.

   HET LOGO IS ROOD MET GRIJS EN WERKT DUS OP WIT. Over een donkere hero is
   het grijs te zwak. Daar krijgt het een lichte achtergrondplaat: een plaat
   is eerlijker dan het logo wit maken, want dan is het het logo niet meer.
   ======================================================================== */
.rlb-logo {
  height: clamp(42px, 4.4vw, 56px);
  width: auto;
  display: block;
}
.rlb-header[data-rl-gescrold="1"] .rlb-logo { height: clamp(36px, 3.4vw, 44px); }

/* Over een donkere hero: een witte plaat met ruimte eromheen. */
.rlb-merk {
  display: inline-flex; align-items: center;
  padding: var(--rlb-r2) var(--rlb-r3);
  border-radius: var(--merk-radius_beeld, 4px);
  background: #fff;
  transition: box-shadow .2s var(--merk-curve, ease);
}
.rlb-merk:hover { box-shadow: 0 2px 14px color-mix(in srgb, var(--merk-inkt, #1A1D21) 18%, transparent); }
/* Bij een witte, gescrolde balk hoeft de plaat niet. */
.rlb-header[data-rl-gescrold="1"] .rlb-merk { background: transparent; padding-inline: 0; }
.rlb-header[data-rl-gescrold="1"] .rlb-merk:hover { box-shadow: none; }

/* Staat er toch geen logobestand, dan blijft het woordmerk werken. */
.rlb-merk:has(.rlb-merk-tekst) { background: none; padding: 0; }

/* ========================================================================
   ZWETS — ELKE RODE KNOP HETZELFDE VERLOOP

   Marijn, 8 november 2026: "maak alle rode knoppen hetzelfde gradient als
   de top-hero-balk-achtergrond."

   Dat is het verloop van #E2000F naar #A50B00 dat nu ook in de bovenbalk
   zit. Belangrijk: dat zijn de twee roden die al in config/brand.json
   staan, dus het verloop volgt de Studio. Wie daar het accent wijzigt,
   wijzigt elke knop mee.

   Bij aanwijzen draait het verloop niet om maar wordt het DONKERDER over de
   volle breedte. Een verloop dat van richting wisselt bij hover leest als
   een glitch; een verloop dat dieper wordt leest als indrukken.
   ======================================================================== */
.rlb-knop--primair,
.rlb-zijtab-knop,
.rlb-header .rlb-knop--primair,
.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair,
.rlb--vlak-diepblauw .rlb-knop--primair,
.rlb--vlak-inkt .rlb-knop--primair,
.rlb-hero--achter .rlb-knop--primair,
.rlb-hero--achtergrond .rlb-knop--primair {
  background-image: linear-gradient(100deg,
    var(--merk-accent, #E2000F) 0%,
    var(--merk-accent, #E2000F) 38%,
    var(--merk-accent_donker, #A50B00) 100%);
  background-color: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-knop--primair:hover,
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible,
.rlb-header .rlb-knop--primair:hover,
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover,
.rlb--vlak-diepblauw .rlb-knop--primair:hover,
.rlb--vlak-inkt .rlb-knop--primair:hover,
.rlb-hero--achter .rlb-knop--primair:hover,
.rlb-hero--achtergrond .rlb-knop--primair:hover {
  background-image: linear-gradient(100deg,
    var(--merk-accent_donker, #A50B00) 0%,
    var(--merk-accent_donker, #A50B00) 42%,
    color-mix(in srgb, var(--merk-accent_donker, #A50B00) 76%, #000) 100%);
  background-color: var(--merk-accent_donker, #A50B00);
  color: var(--merk-op_accent, #FFFFFF);
}

/* ========================================================================
   ZWETS — DE FEITENBALK IS EEN BAND, GEEN DOOS

   Op /over-zwets/ stond hij als donkere doos met ronde hoeken midden in een
   wit vlak, met boven en onder een gat van ruim 100 px. Dat leest als een
   losse widget, niet als onderdeel van de pagina — en het verdubbelt de
   tussenruimte, want de sectie heeft zelf al ruimte én de doos staat er
   los in.

   Nu draagt de SECTIE de kleur en staan de cijfers gewoon in de kolom. Zo
   krijgt de pagina het ritme wit → band → wit dat de specificatietabel ook
   heeft, en sluit de band links uit op dezelfde lijn als elke kop.
   ======================================================================== */
.rlb-feitenbalk {
  background: var(--zwets-diep);
  background-color: var(--merk-diepblauw, #0E284B);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}
.rlb-feitbalk {
  background: none !important;
  border-radius: 0;
  border-block: 0;
  padding-inline: 0;
  padding-block: 0;
}
/* De cijfers links uitlijnen in plaats van gecentreerd: zo staan ze op
   dezelfde lijn als de koppen erboven en eronder. */
.rlb-feitbalk-item {
  align-items: flex-start;
  text-align: left;
  padding-inline: 0;
}
.rlb-feitbalk-item + .rlb-feitbalk-item {
  border-left: 1px solid color-mix(in srgb, #fff 16%, transparent) !important;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 700px) {
  .rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 0 !important; padding-left: 0; }
}

/* Onder de rij bleef een haarlijn staan: de basisregel geeft .rlb-feitbalk
   een border-block, en dat hoorde bij de oude variant met een lichte
   achtergrond. In een donkere band is het een streep zonder betekenis. */
.rlb-feitenbalk .rlb-feitbalk { border-block: 0 !important; }
/* Het icoon stond op 18 px boven een cijfer van 48. Dat leest als een
   stofje. Groter, en met lucht naar het cijfer toe. */
.rlb-feitenbalk .rlb-feitbalk-item .rlb-icoon {
  width: 26px; height: 26px;
  margin-bottom: var(--rlb-r3);
}

/* ========================================================================
   ZWETS — DE CTA-BAND WAS ONLEESBAAR

   De band staat sinds vanochtend op lichtgrijs, omdat config/brand.json
   diepblauw tot één vlak beperkt. Maar de TEKST stond nog op wit: die
   kleur hoorde bij de donkere band van daarvoor. Resultaat: witte kop en
   lichtgrijze tekst op een lichtgrijs vlak — op de schermafdruk van 12:30
   nauwelijks te lezen.

   Dit is de klassieke valkuil bij het omkeren van een vlak: je verandert
   de achtergrond en vergeet dat er een handvol regels elders de tekstkleur
   vastzet omdat het vroeger donker was. De les staat in deze opmerking
   zodat de volgende omkering er wél aan denkt.
   ======================================================================== */
.rlb-cta-sectie .rlb-cta-titel,
.rlb-cta-sectie .rlb-kop,
.rlb-cta-sectie :where(h1, h2, h3, .rlb-titel) { color: var(--merk-inkt, #1A1D21); }
.rlb-cta-sectie .rlb-cta-tekst,
.rlb-cta-sectie .rlb-cta-tekst p,
.rlb-cta-sectie .rlb-intro { color: var(--merk-tekst, #3D444D); }
.rlb-cta-sectie .rlb-kicker { color: var(--merk-accent_donker, #A50B00); }

/* Op de variant MET foto blijft alles wit: daar ligt een donkere sluier. */
.rlb-cta-sectie--beeld .rlb-cta-titel,
.rlb-cta-sectie--beeld :where(h1, h2, h3, .rlb-titel) { color: #fff; }
.rlb-cta-sectie--beeld .rlb-cta-tekst,
.rlb-cta-sectie--beeld .rlb-cta-tekst p { color: var(--rlb-op-donker-licht); }
.rlb-cta-sectie--beeld .rlb-kicker { color: var(--merk-accent_op_donker, #E2000F); }

/* Op een donker vlak dat er expliciet om vraagt, idem. */
.rlb--vlak-diepblauw .rlb-cta-titel,
.rlb--vlak-inkt .rlb-cta-titel { color: #fff; }
.rlb--vlak-diepblauw .rlb-cta-tekst,
.rlb--vlak-inkt .rlb-cta-tekst { color: var(--rlb-op-donker-licht); }

/* ========================================================================
   ZWETS — DE MERKBAND ONDER DE VOETTEKST

   Marijn, 8 november 2026: "ik wil onder de footer het logo van Zwets met
   witte achtergrond, goede padding, en in lichtgrijs een mooie slogan."

   Het logo is rood met grijs. Op het diepblauw van de voettekst valt het
   grijze woord ZWETS weg en blijft er een rode doos over — vandaar een
   eigen witte band. Die sluit de pagina ook rustiger af dan een
   copyrightregel op donker.
   ======================================================================== */
.rlb-merkband {
  background: var(--merk-grond, #FFFFFF);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-merkband-rij {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--rlb-r5), 4vw, 3.5rem);
  flex-wrap: wrap;
  text-align: center;
}
.rlb-merkband-link { display: block; flex: none; }
.rlb-merkband-logo {
  display: block;
  width: auto;
  height: clamp(54px, 6vw, 76px);
  transition: opacity .2s var(--merk-curve, ease);
}
.rlb-merkband-link:hover .rlb-merkband-logo { opacity: .82; }

/* De slogan in lichtgrijs: hij hoort te ondersteunen, niet te concurreren
   met het logo ernaast. Wel groot genoeg om te lezen — 5,09:1 op wit. */
.rlb-merkband-slogan {
  margin: 0;
  font-family: var(--merk-font-kop, inherit);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .005em;
  color: var(--merk-gedempt, #696F77);
  max-width: 34ch;
}

@media (max-width: 600px) {
  .rlb-merkband-rij { flex-direction: column; gap: var(--rlb-r4); }
  .rlb-merkband-slogan { max-width: none; }
}

/* ========================================================================
   ZWETS — DE PROJECTCARROUSEL: TWEEËNHALVE KAART IN BEELD

   Marijn, 8 november 2026: "ik zou 3 cases inclusief overflow in zicht, dus
   2,5 eigenlijk, en dan wel de rest in carrousel."

   Precies de juiste maat. Drie hele kaarten zien er netjes uit maar
   vertellen niet dat er meer is; een halve kaart die rechts het beeld uit
   loopt doet dat wel, en dat is het hele punt van een carrousel.

   De breedte is daarom een PERCENTAGE van het spoor en geen vaste maat:
   het spoor loopt van de linkerkolomrand tot de schermrand, dus 38%
   daarvan levert op elk scherm ongeveer 2,5 kaart op. Met een onder- en
   bovengrens, want op een telefoon moet een kaart bijna de volle breedte
   krijgen en op een zeer breed scherm mag hij niet uitdijen tot een poster.
   ======================================================================== */
/* GEEN minmax(0, ...) OP EEN CARROUSELSPOOR.
   Zo stond het er, en die nul is een ondergrens: een spoor MAG tot niets
   krimpen. Met drie kaarten valt dat niet op - er is ruimte zat - maar
   vanaf vier gaan ze zichzelf platdrukken. Op
   /industrievloeren/gevlinderde-betonvloer/ stonden acht kaarten als
   stroken van tachtig pixel met één letter per regel.

   Het raakte 76 van de 85 pagina's met projecten. Dat monolietvloer er
   goed uitzag was toeval: die heeft er precies drie.

   Een carrouselspoor hoort juist NIET te krimpen. De vaste maat is wat het
   laat overlopen, en dat overlopen is de carrousel. */
@media (min-width: 62rem) {
  .rlb-projecten--carrousel .rlb-projecten-spoor {
    grid-auto-columns: clamp(300px, 38%, 480px);
  }
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .rlb-projecten--carrousel .rlb-projecten-spoor {
    grid-auto-columns: 62%;                /* anderhalve kaart */
  }
}
@media (max-width: 47.99rem) {
  .rlb-projecten--carrousel .rlb-projecten-spoor {
    grid-auto-columns: 86%;                /* een kaart plus een randje */
  }
}

/* De uitgelichte eerste kaart hoort niet in een carrousel: die spant twee
   kolommen en breekt dan het ritme van het schuiven. */
.rlb-projecten--carrousel .rlb-projectkaart--uit { grid-column: auto; }
.rlb-projecten--carrousel .rlb-projectkaart--uit .rlb-projectkaart-link {
  min-height: clamp(380px, 34vw, 470px);
}

/* De pijlen onder de rij: zichtbaar genoeg om te weten dat ze er zijn. */
.rlb-projecten--carrousel .rlb-projecten-pijlen { display: flex; }

/* ========================================================================
   ZWETS — DE SECTIERUIMTE KRAPPER

   Marijn, 8 november 2026: "de gaps zijn te groot!!!"

   Ze stonden op clamp(4.5rem, 7vw, 8rem) — tot 128 px boven én onder, dus
   256 px tussen twee secties. Dat was gemikt op het ritme van Mollie en
   Revolut, maar daar staat tussen twee secties ook een hele gedachte. Op
   een vloerpagina volgen de blokken elkaar op als een redenering, en dan
   voelt een kwart scherm wit ertussen als een gat in plaats van als rust.

   Nu 3 tot 5,5 rem (48 tot 88 px), dus tussen twee secties 96 tot 176 px.
   Nog altijd royaal, maar de pagina leest weer als één verhaal.

   De regel uit het stramien blijft staan: veel wit TUSSEN secties, weinig
   wit BINNEN een sectie. Alleen is "veel" iets minder veel geworden.
   ======================================================================== */
:root {
  --rlb-sectie-top: clamp(3rem, 4.6vw, 5.5rem);
  --rlb-sectie-bot: clamp(3rem, 4.6vw, 5.5rem);
}
@media (max-width: 767px) {
  :root { --rlb-sectie-top: clamp(2.25rem, 6vw, 3.25rem); --rlb-sectie-bot: clamp(2.25rem, 6vw, 3.25rem); }
}

/* Twee donkere banden achter elkaar hoeven geen dubbele ruimte: de
   kleurovergang doet het scheidingswerk al. */
.rlb--vlak-diepblauw + .rlb--vlak-diepblauw,
.rlb-specs--donker + .rlb-feitenbalk,
.rlb-feitenbalk + .rlb-specs--donker { --rlb-sectie-top: clamp(2rem, 3vw, 3rem); }

/* ========================================================================
   ZWETS — DE BLAUWE RAND ONDER DE WITTE LOGOBALK

   Marijn: "er zit onder de witte bar met logo een donkerblauwe rand, die
   hoort er niet."

   Klopt: de merkband staat BINNEN <footer>, en die heeft zelf ruimte
   onderaan. Onder de witte band bleef daardoor een strook voettekstkleur
   staan. Op een pagina met een witte afsluiter hoort de voettekst zijn
   onderruimte af te staan.
   ======================================================================== */
.rlb-footer:has(.rlb-merkband) { padding-bottom: 0; }
.rlb-footer:has(.rlb-merkband) > .rlb-binnen { padding-bottom: 0; }
/* Terugval voor browsers zonder :has(): de band krijgt dan een negatieve
   ondermarge die de voettekstruimte opslokt. */
@supports not selector(:has(a)) {
  .rlb-merkband { margin-bottom: calc(-1 * var(--rlb-sectie-bot, 3rem)); }
}

/* ========================================================================
   ZWETS — VIJF DINGEN UIT DE KOPBALK EN DE CARROUSEL

   1. "Logo is ineens niet transparant meer." Het logobestand IS
      transparant (gemeten: hoekpixel alfa 127). Wat Marijn zag was de
      WITTE PLAAT die ik eronder had gezet om het grijze woord ZWETS
      leesbaar te houden op een donkere hero. Een plaat leest als een
      ondoorzichtig logo, en dat is erger dan een logo dat op een foto wat
      minder uitspringt. De plaat is weg; in plaats daarvan een zachte
      schaduw onder het logo, die hem op elke foto losmaakt zonder er een
      doos omheen te zetten.

   2. Het zoekicoon was grijs op de donkere balk. Wit dus.

   3. "Menu te dicht op elkaar." De tussenruimte stond op var(--rlb-r3)
      (ongeveer 12 px) zodra de balk krapper werd. Bij zes items met
      uitklappijlen plakken de woorden dan aan elkaar.

   4. "Als je erop klikt komt er een rare outline omheen." Dat is de
      standaard :focus van de browser op de <details>-samenvatting en de
      knoppen. Niet weghalen — dan kan niemand meer met het toetsenbord
      navigeren — maar vervangen door een ring die bij het ontwerp past en
      alleen verschijnt bij toetsenbordgebruik (:focus-visible).

   5. De carrousel kwam niet uit de zijkant. margin-right rekende met 50vw,
      maar 50vw telt de scrollbalk mee; daardoor bleef er een strook over.
      ======================================================================== */

/* 1. */
.rlb-merk {
  background: none;
  padding: 0;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .45));
}
.rlb-merk:hover { box-shadow: none; }
.rlb-header[data-rl-gescrold="1"] .rlb-merk { filter: none; }

/* 2. */
.rlb-header .rlb-zoek-knop { color: #fff; }
.rlb-header[data-rl-gescrold="1"] .rlb-zoek-knop { color: var(--merk-inkt, #1A1D21); }
.rlb-zoek-knop .rlb-icoon { width: 20px; height: 20px; }

/* 3. */
@media (min-width: 1200px) {
  .rlb-nav ul { gap: clamp(1.1rem, 1.9vw, 2rem); }
  .rlb-nav-pijl { margin-left: .45em; }
}

/* 4. Eén focusring voor de hele kopbalk, en alleen bij toetsenbordgebruik. */
.rlb-header :where(a, button, summary):focus { outline: none; }
.rlb-header :where(a, button, summary):focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
  border-radius: 3px;
}
.rlb-header[data-rl-gescrold="1"] :where(a, button, summary):focus-visible {
  outline-color: var(--merk-accent, #E2000F);
}
/* De <details> van het mobiele menu krijgt er standaard ook een. */
.rlb-mobiel > summary:focus { outline: none; }
.rlb-mobiel > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 5. De carrousel tot de schermrand. 100vw telt de verticale scrollbalk
      mee en is dus breder dan het zichtbare venster; met 100% van de
      pagina-breedte klopt het wel. */
/* HET SPOOR TOT DE SCHERMRAND — MET HET JUISTE TEKEN.
   Hier stond calc(-1 * (100% - 100cqw)). Bij een kolom van 1200 in een
   venster van 1440 levert dat -1 x (1200 - 1440) = PLUS 240 px op: een
   positieve rechtermarge die de bak 240 px SMALLER maakt in plaats van
   breder. Precies het omgekeerde van de bedoeling, en het hielp mee de
   kaarten plat te drukken.

   De klassieke vorm is 50% - 50vw: de helft van de eigen breedte minus de
   helft van het venster is precies de afstand van de kolomrand tot de
   schermrand. In cqw, want 100vw telt de verticale scrollbalk mee en levert
   dan een horizontale scrollbalk op. */
.rlb-projecten-vak {
  margin-right: calc(50% - 50cqw);
}
@supports not (width: 1cqw) {
  .rlb-projecten-vak {
    /* Terugval voor browsers zonder containereenheden. */
    margin-right: calc(50% - 50vw);
  }
}

/* ========================================================================
   rl-bronnen — DOCUMENTATIE OM MEE TE NEMEN
   ========================================================================
   Marijn, 8 november 2026: "bouw ook onpage downloads, maak mooi resource
   bouwblok."

   WAAROM HET KAARTEN ZIJN EN GEEN LIJST
   Een rij blauwe linkjes met een pdf-icoontje leest als een bijlagenmap.
   Dit is geen bijlage maar het enige van de pagina dat de bezoeker MEENEEMT:
   het komt op een bureau te liggen of gaat als bijlage mee naar een collega.
   Dat verdient dezelfde ruimte als een projectkaart.

   WAAROM DE HELE KAART DE LINK IS
   Een klikbaar gebied van 300 bij 120 pixels mist niemand, ook niet op een
   telefoon met handschoenen aan - en dat is op een bouwplaats geen
   theoretisch geval.

   WAAROM SOORT, FORMAAT EN GROOTTE ZICHTBAAR ZIJN
   Niemand klikt graag op een onbekende download. "PDF · 180 kB" naast de
   naam haalt die twijfel weg voordat hij ontstaat.
   ======================================================================== */

.rlb-bronnen-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--rlb-r5);
}
.rlb-bronnen--k1 .rlb-bronnen-raster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .rlb-bronnen--k2 .rlb-bronnen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rlb-bronnen--k3 .rlb-bronnen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rlb-bron { min-width: 0; }

.rlb-bron-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--rlb-r5);
  height: 100%;
  padding: var(--rlb-r5);
  text-decoration: none;
  color: inherit;
  background: var(--merk-grond, #fff);
  border: var(--rlb-rand);
  /* De rode bovenrand is hetzelfde gebaar als op de pluspuntkaarten, zodat
     de pagina één handschrift houdt. */
  border-top: 3px solid var(--merk-accent, #E2000F);
  border-radius: var(--merk-radius_kaart, 12px);
  transition: border-color var(--rlb-overgang, .22s ease),
              box-shadow var(--rlb-overgang, .22s ease),
              transform var(--rlb-overgang, .22s ease);
}
.rlb-bron-link:hover,
.rlb-bron-link:focus-visible {
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 40%, transparent);
  border-top-color: var(--merk-accent, #E2000F);
  box-shadow: 0 12px 30px rgba(10, 20, 32, .10);
  transform: translateY(-3px);
}

/* Het pictogram staat in een rustig vlak: genoeg om het af te bakenen,
   niet zoveel dat het met de kaart concurreert. */
.rlb-bron-icoon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F6F7F8);
  color: var(--merk-inkt, #1A1D21);
  transition: background var(--rlb-overgang, .22s ease),
              color var(--rlb-overgang, .22s ease);
}
.rlb-bron-link:hover .rlb-bron-icoon {
  background: color-mix(in srgb, var(--merk-accent, #E2000F) 10%, transparent);
  color: var(--merk-accent, #E2000F);
}

.rlb-bron-tekst { display: block; min-width: 0; }
.rlb-bron-soort {
  display: block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}
.rlb-bron-titel {
  display: block;
  margin-top: var(--rlb-r1);
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-bron-uitleg {
  margin-top: var(--rlb-r1);
  font-size: .9375rem; line-height: 1.55;
  color: var(--merk-tekst, #3D444D);
}
.rlb-bron-meta {
  display: inline-block;
  margin-top: var(--rlb-r2);
  padding: var(--rlb-r1) var(--rlb-r2);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .04em;
  color: var(--merk-gedempt, #696F77);
  background: var(--merk-vlak, #F6F7F8);
  border-radius: 999px;
}

/* De pijl schuift pas bij het aanwijzen aan: in rust zou hij met het
   pictogram concurreren om de aandacht. */
.rlb-bron-pijl {
  align-self: center;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--merk-accent, #E2000F);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--rlb-overgang, .22s ease),
              transform var(--rlb-overgang, .22s ease);
}
.rlb-bron-link:hover .rlb-bron-pijl,
.rlb-bron-link:focus-visible .rlb-bron-pijl { opacity: 1; transform: none; }

/* Op een donkere band draait alles om. */
.rlb--vlak-diepblauw .rlb-bron-link,
.rlb--vlak-inkt .rlb-bron-link {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.rlb--vlak-diepblauw .rlb-bron-titel,
.rlb--vlak-inkt .rlb-bron-titel { color: #fff; }
.rlb--vlak-diepblauw .rlb-bron-uitleg,
.rlb--vlak-inkt .rlb-bron-uitleg { color: var(--rlb-op-donker-licht); }
.rlb--vlak-diepblauw .rlb-bron-icoon,
.rlb--vlak-inkt .rlb-bron-icoon { background: rgba(255, 255, 255, .08); color: #fff; }
.rlb--vlak-diepblauw .rlb-bron-meta,
.rlb--vlak-inkt .rlb-bron-meta { background: rgba(255, 255, 255, .08); color: var(--rlb-op-donker-gedempt); }

@media (prefers-reduced-motion: reduce) {
  .rlb-bron-link, .rlb-bron-icoon, .rlb-bron-pijl { transition: none; }
  .rlb-bron-link:hover { transform: none; }
  .rlb-bron-pijl { opacity: 1; transform: none; }
}

/* ========================================================================
   rl-gerelateerd — DE KAARTEN NAAR DE VOLGENDE PAGINA
   ========================================================================
   Marijn, 8 november 2026, kijkend naar de cementgebonden gietvloer:
   "post haalt het niveau niet", en eerder "blog posts kunnen beter en
   carousel naar blogs kan ook mooier".

   Hij heeft gelijk en het is goed te zien waarom. Boven deze kaarten staan
   de projectkaarten: beeld van rand tot rand, tekst eroverheen, een getal
   dat eruit springt. Daaronder stonden deze: een postzegeltje binnen een
   grijs vlak met wat padding eromheen, een regel vet en een regel grijs.
   Dezelfde pagina, twee niveaus. Dat voelt als een blok dat er later is
   bijgeplakt - en dat ís het ook.

   WAT ER VERANDERT
   Het beeld gaat tot de rand van de kaart in plaats van er los binnenin te
   zweven, en wordt breder (16:10 leest als redactie, 4:3 als miniatuur).
   De kaart krijgt een witte grond zodat hij nààst de grijze USP-kaarten
   staat in plaats van erin op te gaan. De vraag is de kop en krijgt
   displaygewicht; de bestemming staat eronder als een route, met een pijl
   die bij het aanwijzen meebeweegt.

   WAAROM DE VRAAG DE KOP IS EN NIET DE PAGINANAAM
   "Hoe blijft de vloer goed?" vertelt wat je er haalt. "Nabehandeling"
   vertelt waar je heen gaat. Allebei nodig, in die volgorde - een bezoeker
   klikt op een vraag, niet op een rubriek.
   ======================================================================== */

.rlb-ger-link {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--merk-grond, #fff);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  text-decoration: none;
  transition: border-color var(--rlb-overgang, .22s ease),
              box-shadow var(--rlb-overgang, .22s ease),
              transform var(--rlb-overgang, .22s ease);
}
.rlb-ger-link:hover,
.rlb-ger-link:focus-visible {
  border-color: color-mix(in srgb, var(--merk-accent, #E2000F) 45%, transparent);
  box-shadow: 0 14px 34px rgba(10, 20, 32, .12);
  transform: translateY(-4px);
}

.rlb-ger-beeldvak {
  display: block;
  overflow: hidden;
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-ger-beeld,
.rlb-ger-beeldvak img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
/* Een heel klein beetje inzoomen leest als "dit kun je openen". Meer dan
   vier procent wordt een effect en trekt de aandacht naar zichzelf. */
.rlb-ger-link:hover .rlb-ger-beeld,
.rlb-ger-link:hover .rlb-ger-beeldvak img { transform: scale(1.04); }

.rlb-ger-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--rlb-r2);
  padding: var(--rlb-r5);
}
.rlb-ger-titel {
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.1875rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--merk-inkt, #1A1D21);
  margin-bottom: 0;
}
.rlb-ger-tekst {
  font-size: .9375rem; line-height: 1.55;
  color: var(--merk-tekst, #3D444D);
  margin-bottom: 0;
}
/* De bestemming hoort onderaan de kaart, ook als de ene kaart meer tekst
   heeft dan de andere: anders staan de routes op drie hoogtes. */
.rlb-ger-meer {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  margin-top: auto; padding-top: var(--rlb-r4);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}
.rlb-ger-meer::after {
  content: "→";
  font-size: 1rem; line-height: 1;
  transition: transform var(--rlb-overgang, .22s ease);
}
.rlb-ger-link:hover .rlb-ger-meer::after { transform: translateX(4px); }

/* Een kaart zonder beeld is geen halve kaart: hij krijgt een rustig vlak
   met het merkstreepje, zodat de rij op hoogte blijft. */
.rlb-ger-link:not(:has(.rlb-ger-beeldvak)) {
  border-top: 3px solid var(--merk-accent, #E2000F);
}
.rlb-ger-link:not(:has(.rlb-ger-beeldvak)) .rlb-ger-body { padding-top: var(--rlb-r6); }

@media (prefers-reduced-motion: reduce) {
  .rlb-ger-link, .rlb-ger-beeld, .rlb-ger-meer::after { transition: none; }
  .rlb-ger-link:hover { transform: none; }
  .rlb-ger-link:hover .rlb-ger-beeld { transform: none; }
}

/* ========================================================================
   DE NIEUWE BLOKKEN VAN 11 NOVEMBER — DEEL 1: ANTWOORD, DOORSNEDE,
   VERGELIJK, NORM, PROJECTREFERENTIES

   De eerste vijf van de negen blokken uit inventarisatie/bouwblokken-kloof.md
   (prioriteitsorde BOUWPLAN-SEO.md §3). Alles hieronder gebruikt uitsluitend
   de ruimteschaal (--rlb-r1..r9) en de merk-tokens uit assets/brand.css —
   geen maat of kleur ernaast (eis 10 nov: equalized spacing, één branding).
   Tabellen scrollen in hun EIGEN vak; de pagina scrolt nooit zijwaarts.
   ======================================================================== */

/* ------------------------------------------------------------------------
   rl-antwoord — het directe antwoord voor AI- en spraakzoekopdrachten.

   Eén afwijkend vlak met de vraag, het antwoord en de feiten. Het vlak is
   licht met een accentlijn links: opvallend genoeg om als "het antwoord"
   te lezen, rustig genoeg om niet met de CTA-band te vechten. De klasse
   .rlb-antwoord-tekst is het speakable-contract met schema-plan.json.
   ------------------------------------------------------------------------ */
/* Marijn, 11 nov: het introblok is een volvlak in de rode merkgradient,
   sluit direct aan op de hero (geen witte kier), inhoud 1440px breed en
   LINKS uitgelijnd, alle tekst wit. Dit blok staat op bijna elke pagina;
   een halve oplossing valt dus overal op. */
.rlb-antwoord {
  background: linear-gradient(135deg, var(--merk-accent, #E2000F) 0%, #9E0009 100%);
  padding: 0; margin: 0;
}
/* De sectie ervoor (hero/kruimels) mag geen witte ruimte laten staan. */
.rlb-hero + .rlb-antwoord, .rlb-kruimels + .rlb-antwoord { margin-top: 0; }
.rlb-antwoord + * { margin-top: 0; }

.rlb-antwoord > .rlb-binnen {
  max-width: 1440px; margin: 0 auto;
  padding: 50px var(--rlb-r5, 1.5rem);   /* 50px boven en onder (Marijn, 11 nov) */
  width: 100%;
}
@media (max-width: 700px) { .rlb-antwoord > .rlb-binnen { padding: 34px var(--rlb-r5, 1.25rem); } }

.rlb-antwoord-vlak {
  background: none; border: 0; border-radius: 0; padding: 0;
  color: #fff; text-align: left;
}
/* Alles binnen het rode vlak is wit - ook de kicker, de sterke woorden,
   de links en de feitenlijst. Eerder erfde een deel nog --merk-tekst (grijs). */
.rlb-antwoord, .rlb-antwoord * { color: #fff; border-color: rgb(255 255 255 / .3); }
.rlb-antwoord .rlb-kicker { color: rgb(255 255 255 / .85); }
.rlb-antwoord a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rlb-antwoord a:hover { text-decoration-thickness: 2px; }

.rlb-antwoord-vraag {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  letter-spacing: -.01em; max-width: 24ch;
}
.rlb-antwoord-tekst { max-width: 80ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }

/* De feiten: witte opsomming met een streepje ervoor, naast elkaar waar het
   past. Ze waren onzichtbaar omdat de bolletjes uit stonden en de rand grijs was. */
.rlb-antwoord-feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--rlb-r4, 1rem) var(--rlb-r6, 2rem);
  margin-top: var(--rlb-r6, 2rem); padding: 0; list-style: none; max-width: 1440px;
}
.rlb-antwoord-feiten li {
  border-top: 0; border-left: 3px solid rgb(255 255 255 / .55);
  padding: .15rem 0 .15rem var(--rlb-r4, 1rem);
  display: flex; flex-direction: column; gap: .15rem;
}
.rlb-antwoord-feit-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: rgb(255 255 255 / .8); }
.rlb-antwoord-feit-waarde { font-weight: 600; }

.rlb-antwoord-vraag { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -.01em; }
.rlb-antwoord-vlak .rlb-antwoord-tekst { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }



/* color-mix is nieuw; browsers zonder steun krijgen een vaste tweede stop. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .rlb-antwoord-vlak { background: linear-gradient(135deg, #E2000F 0%, #9E0009 100%); }
}
/* Het inhoudsvlak: 1440px, gecentreerd. */

.rlb-antwoord-vlak .rlb-antwoord-vraag,
.rlb-antwoord-vlak .rlb-antwoord-tekst,
.rlb-antwoord-vlak .rlb-antwoord-feiten { color: #fff; }
.rlb-antwoord-vlak .rlb-antwoord-tekst { max-width: 1440px; }
.rlb-antwoord-vlak .rlb-antwoord-feiten li { border-color: rgb(255 255 255 / .28); }
.rlb-antwoord-vlak a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rlb-antwoord-vlak a:hover { text-decoration-thickness: 2px; }
/* De oude witte variant op een grijze sectie is niet meer nodig. */
.rlb--vlak-vlak .rlb-antwoord-vlak { background: linear-gradient(135deg, var(--merk-accent, #E2000F) 0%, #9E0009 100%); }

.rlb-antwoord-vraag {
  margin: 0 0 var(--rlb-r4);
  font-family: var(--merk-font-kop);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-antwoord-tekst {
  max-width: var(--rlb-tekst-max);
  font-size: 1.0625rem; line-height: 1.7;
  color: var(--merk-tekst, #3D444D);
}
.rlb-antwoord-tekst p { margin: 0 0 var(--rlb-r3); }
.rlb-antwoord-tekst p:last-child { margin-bottom: 0; }

/* De feiten: compacte regels met een lijntje erboven — de vorm van een
   specificatie, niet van een opsomming met bolletjes. */
.rlb-antwoord-feiten {
  list-style: none;
  margin: var(--rlb-r5) 0 0; padding: 0;
  max-width: var(--rlb-tekst-max);
}
.rlb-antwoord-feiten li {
  display: flex; flex-wrap: wrap; gap: var(--rlb-r1) var(--rlb-r3);
  padding: var(--rlb-r2) 0;
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
  font-size: .95rem; line-height: 1.5;
  color: var(--merk-tekst, #3D444D);
}
.rlb-antwoord-feit-label {
  flex: 0 0 auto;
  font-weight: 700; color: var(--merk-inkt, #1A1D21);
}
.rlb-antwoord-feit-waarde { font-variant-numeric: tabular-nums; }

/* Hoogstens twee bewijslinks, als rustige tekstlinks met pijl — geen
   knoppen: de knop van de pagina is de CTA-band, dit is onderbouwing. */
.rlb-antwoord-bewijs ul {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--rlb-r3) var(--rlb-r5);
  margin: var(--rlb-r5) 0 0; padding: 0;
}
.rlb-antwoord-bewijs a {
  display: inline-flex; align-items: center; gap: var(--rlb-r2);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
  text-decoration: none;
}
.rlb-antwoord-bewijs a::after {
  content: "→";
  font-size: 1rem; line-height: 1;
  transition: transform var(--rlb-overgang, .22s ease);
}
.rlb-antwoord-bewijs a:hover { text-decoration: underline; }
.rlb-antwoord-bewijs a:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------------
   rl-doorsnede — de vloer- of funderingsopbouw in lagen.

   Elke laag is één rij: links de band (nummer, naam, dikte), rechts de
   functie. De banden sluiten op elkaar aan en dragen links een strook die
   per laag donkerder wordt — zo leest de stapel als grond onder een vloer.
   De diepte komt uit --rlb-laag-i (gezet door de renderer); de strook is
   een ::before NAAST de tekst, nooit eronder, zodat het contrast van de
   tekst nooit van de laagdiepte afhangt. min() klemt de dekking, zodat ook
   een doorsnede van acht lagen leesbaar blijft.
   ------------------------------------------------------------------------ */
.rlb-doorsnede-lagen {
  list-style: none;
  margin: 0; padding: 0;
}
.rlb-laag {
  display: grid;
  grid-template-columns: minmax(240px, 38%) 1fr;
  gap: var(--rlb-r2) var(--rlb-r6);
  align-items: center;
}
/* 2px tussenruimte: de banden raken elkaar bijna en lezen als één
   doorsnede, maar de lagen blijven te onderscheiden. */
.rlb-laag + .rlb-laag { margin-top: 2px; }

.rlb-laag-band {
  position: relative;
  display: flex; align-items: baseline; gap: var(--rlb-r3);
  min-width: 0;
  background: var(--merk-vlak, #F6F7F8);
  padding: var(--rlb-r4) var(--rlb-r5);
  padding-left: calc(var(--rlb-r5) + 14px);
  overflow: hidden;
}
.rlb--vlak-vlak .rlb-laag-band { background: var(--merk-paneel, #FFFFFF); }
.rlb-laag:first-child .rlb-laag-band { border-radius: var(--merk-radius_kaart, 6px) var(--merk-radius_kaart, 6px) 0 0; }
.rlb-laag:last-child .rlb-laag-band { border-radius: 0 0 var(--merk-radius_kaart, 6px) var(--merk-radius_kaart, 6px); }
.rlb-laag-band::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 14px;
  background: var(--merk-diepblauw, #0E284B);
  opacity: min(calc(.16 + var(--rlb-laag-i, 0) * .11), .92);
}
.rlb-laag-nr {
  flex: none;
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--merk-gedempt, #696F77);
}
.rlb-laag-naam {
  font-weight: 700;
  color: var(--merk-inkt, #1A1D21);
  min-width: 0;
}
.rlb-laag-dikte {
  margin-left: auto;
  font-size: .86rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--merk-gedempt, #696F77);
}
.rlb-laag-tekst {
  font-size: .97rem; line-height: 1.6;
  color: var(--merk-tekst, #3D444D);
  max-width: var(--rlb-tekst-max);
}
.rlb-laag-tekst p { margin: 0; }
.rlb-doorsnede-noot {
  margin-top: var(--rlb-r4);
  font-size: .88rem; color: var(--merk-gedempt, #696F77);
  max-width: var(--rlb-tekst-max);
}
/* Smal: band en uitleg onder elkaar; de uitleg springt in tot de band,
   zodat het oog de laag en zijn uitleg als één geheel leest. */
@media (max-width: 47.9375rem) {
  .rlb-laag { grid-template-columns: 1fr; gap: var(--rlb-r2); }
  .rlb-laag-tekst { padding: 0 var(--rlb-r5) var(--rlb-r3) calc(var(--rlb-r5) + 14px); }
}

/* ------------------------------------------------------------------------
   rl-vergelijk — deze vloer naast de alternatieven.

   Dezelfde tabelvorm als rl-specs (licht, tabulaire cijfers, eigen
   scrollvak), met één verschil: de kolom van deze pagina is gemarkeerd met
   een accentlijn en een lichte roodwaas. De rgba is de terugval; waar
   color-mix bestaat wordt de waas uit het merk gemengd.
   ------------------------------------------------------------------------ */
.rlb-verg-vak {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb-verg-tabel {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: .96rem; font-variant-numeric: tabular-nums;
}
.rlb-verg-tabel th,
.rlb-verg-tabel td {
  text-align: left; vertical-align: top;
  padding: .85rem var(--rlb-r5);
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-verg-tabel thead th,
.rlb-verg-tabel thead td {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-inkt, #1A1D21);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-verg-tabel thead a {
  color: var(--merk-inkt, #1A1D21);
  text-decoration: underline;
  text-decoration-color: var(--merk-accent, #E2000F);
  text-underline-offset: 3px;
}
.rlb-verg-tabel thead a:hover { color: var(--merk-accent, #E2000F); }
.rlb-verg-tabel tbody th[scope="row"] {
  font-weight: 500; color: var(--merk-inkt, #1A1D21);
}
.rlb-verg-tabel td { color: var(--merk-tekst, #3D444D); }
.rlb-verg-tabel tbody tr:last-child th,
.rlb-verg-tabel tbody tr:last-child td { border-bottom: 0; }

/* De gemarkeerde kolom. De waas is bewust licht: de kolom moet voorrang
   hebben, niet schreeuwen. */
.rlb-verg-tabel .rlb-verg-deze { background: rgba(226, 0, 15, .04); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rlb-verg-tabel .rlb-verg-deze {
    background: color-mix(in srgb, var(--merk-accent, #E2000F) 4%, var(--merk-grond, #FFFFFF));
  }
}
.rlb-verg-tabel thead th.rlb-verg-deze {
  border-top: 3px solid var(--merk-accent, #E2000F);
  color: var(--merk-inkt, #1A1D21);
}
.rlb-verg-badge {
  display: block; margin-top: var(--rlb-r1);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
}
.rlb-verg-conclusie {
  margin-top: var(--rlb-r5);
  max-width: var(--rlb-tekst-max);
  color: var(--merk-tekst, #3D444D);
}
.rlb-verg-conclusie p { margin: 0 0 var(--rlb-r3); }
.rlb-verg-conclusie p:last-child { margin-bottom: 0; }
.rlb-verg-noot {
  margin-top: var(--rlb-r3);
  font-size: .88rem; color: var(--merk-gedempt, #696F77);
  max-width: var(--rlb-tekst-max);
}

/* ------------------------------------------------------------------------
   rl-norm — de normen uitgelegd, als kaarten.

   Kaarten op het lichte vlak (dezelfde rust als de USP-kaarten): code in
   het accent, naam, wat de norm regelt, en onderaan — uitgelijnd over de
   rij dankzij margin-top: auto — het koopargument "Voor uw vloer: ...". ------------------------------------------------------------------------ */ .rlb-norm-raster{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: var(--rlb-r4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .rlb-norm--k2 .rlb-norm-raster,
  .rlb-norm--k3 .rlb-norm-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .rlb-norm--k3 .rlb-norm-raster { grid-template-columns: repeat(3, 1fr); }
}
.rlb-norm-kaart {
  display: flex; flex-direction: column; gap: var(--rlb-r2);
  min-width: 0;
  background: var(--merk-vlak, #F6F7F8);
  border-radius: var(--merk-radius_kaart, 6px);
  padding: clamp(var(--rlb-r5), 2.2vw, var(--rlb-r6));
}
.rlb--vlak-vlak .rlb-norm-kaart { background: var(--merk-paneel, #FFFFFF); }
.rlb-norm-code {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--merk-accent, #E2000F);
  font-variant-numeric: tabular-nums;
}
.rlb-norm-naam {
  margin: 0;
  font-size: 1.05rem; line-height: 1.35;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-norm-tekst {
  font-size: .95rem; line-height: 1.6;
  color: var(--merk-tekst, #3D444D);
}
.rlb-norm-tekst p { margin: 0 0 var(--rlb-r2); }
.rlb-norm-tekst p:last-child { margin-bottom: 0; }
.rlb-norm-betekenis {
  margin: var(--rlb-r3) 0 0;
  margin-top: auto;
  padding: var(--rlb-r3) var(--rlb-r4);
  background: var(--merk-paneel, #FFFFFF);
  border-left: 3px solid var(--merk-accent, #E2000F);
  border-radius: 0 var(--merk-radius_kaart, 6px) var(--merk-radius_kaart, 6px) 0;
  font-size: .92rem; line-height: 1.55;
  color: var(--merk-tekst, #3D444D);
}
.rlb--vlak-vlak .rlb-norm-betekenis { background: var(--merk-vlak, #F6F7F8); }
.rlb-norm-betekenis strong { color: var(--merk-inkt, #1A1D21); }
.rlb-norm-link { margin: var(--rlb-r2) 0 0; font-size: .9rem; }
.rlb-norm-link a { color: var(--merk-inkt, #1A1D21); text-underline-offset: 3px; }
.rlb-norm-link a:hover { color: var(--merk-accent, #E2000F); }
.rlb-norm-noot {
  margin-top: var(--rlb-r4);
  font-size: .88rem; color: var(--merk-gedempt, #696F77);
  max-width: var(--rlb-tekst-max);
}
.rlb-norm-cta { margin-top: var(--rlb-r6); }

/* ------------------------------------------------------------------------
   rl-projectreferenties — de referentielijst met bouwbedrijven.

   De nieuwe huisstijl in plaats van het statische groene blok van live:
   een lichte tabel in een eigen scrollvak, het projectnaam-anker in de
   inkt, het accent alleen in de koplijn. Een inkoper scant hier op het
   bouwbedrijf waarmee hij zelf werkt — de kolommen zijn dus allemaal even
   belangrijk en krijgen geen kleurhiërarchie.
   ------------------------------------------------------------------------ */
.rlb-ref-vak {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--merk-lijn, #E8EAEC);
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb-ref-tabel {
  width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: .94rem;
}
.rlb-ref-tabel th,
.rlb-ref-tabel td {
  text-align: left; vertical-align: top;
  padding: .75rem var(--rlb-r5);
  border-bottom: 1px solid var(--merk-lijn, #E8EAEC);
}
.rlb-ref-tabel thead th {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
  background: var(--merk-vlak, #F6F7F8);
  border-bottom: 2px solid var(--merk-accent, #E2000F);
  white-space: nowrap;
}
.rlb-ref-tabel tbody th[scope="row"] {
  font-weight: 600; color: var(--merk-inkt, #1A1D21);
}
.rlb-ref-tabel tbody th[scope="row"] a {
  color: var(--merk-inkt, #1A1D21);
  text-decoration: underline;
  text-decoration-color: var(--merk-lijn, #E8EAEC);
  text-underline-offset: 3px;
  transition: color var(--rlb-overgang, .22s ease);
}
.rlb-ref-tabel tbody th[scope="row"] a:hover {
  color: var(--merk-accent, #E2000F);
  text-decoration-color: var(--merk-accent, #E2000F);
}
.rlb-ref-tabel td { color: var(--merk-tekst, #3D444D); }
.rlb-ref-jaar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rlb-ref-tabel tbody tr:last-child th,
.rlb-ref-tabel tbody tr:last-child td { border-bottom: 0; }
.rlb-ref-tabel tbody tr:hover { background: var(--merk-vlak, #F6F7F8); }

.rlb-ref-12build {
  margin: var(--rlb-r4) 0 0;
  font-size: .95rem;
  color: var(--merk-tekst, #3D444D);
  max-width: var(--rlb-tekst-max);
}
.rlb-ref-12build a {
  font-weight: 700;
  color: var(--merk-accent, #E2000F);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rlb-antwoord-bewijs a::after,
  .rlb-ref-tabel tbody th[scope="row"] a { transition: none; }
  .rlb-antwoord-bewijs a:hover::after { transform: none; }
}

/* ------------------------------------------------------------------------
   rl-certificering — gecertificeerd vakmanschap en correct betalingsgedrag.

   Tekst plus document, GEEN logorij: op geen enkele live pagina staat een
   keurmerklogo, dus hier ook niet. Links het verhaal (livetekst als basis)
   met de betalingsalinea als uitgelicht vlak — dat is wat een hoofdaannemer
   als eerste controleert — en de CTA naar /certificering/; rechts de lijst
   als rustige kaart met het schild-icoon in het accent. Eén accentkleur,
   alles uit de tokens: het statische groene blok van de live site is het
   schrikvoorbeeld.
   ------------------------------------------------------------------------ */
.rlb-cert-raster {
  display: grid; gap: var(--rlb-r6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 64rem) {
  /* Marijn, 11 nov: de keurmerken links, het verhaal rechts. De lijst is het
     bewijs; die hoort als eerste gelezen te worden. Beide kolommen beginnen
     op dezelfde hoogte: de lijst krijgt dezelfde bovenmarge als de titel,
     zodat hij niet half zwevend naast de kop hangt. */
  .rlb-cert-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--rlb-r7); }
  .rlb-cert-verhaal { order: 2; }
  .rlb-cert-lijst { order: 1; }
  /* Uitlijnen vanaf de titel: de lijst begint op de hoogte van de H2, niet
     van de kicker erboven. Daarom dezelfde bovenruimte als kicker+marge. */
  .rlb-cert-raster > * { margin-top: 0; }
  .rlb-cert-lijst { padding-top: calc(1.05rem + var(--rlb-r4, 1rem)); }
}
.rlb-cert-verhaal { min-width: 0; }
.rlb-cert-tekst {
  max-width: var(--rlb-tekst-max);
  color: var(--merk-tekst, #3D444D); line-height: 1.65;
}
.rlb-cert-tekst p { margin: 0 0 var(--rlb-r3); }
.rlb-cert-tekst p:last-child { margin-bottom: 0; }
/* De betalingsalinea krijgt hetzelfde uitgelichte vlak als rl-norm zijn
   "Voor uw vloer"-regel: accentlijn links, rustig vlak erachter. Zo leest
   hij als claim met gewicht, niet als voetnoot. */
.rlb-cert-betaling {
  margin-top: var(--rlb-r4);
  max-width: var(--rlb-tekst-max);
  padding: var(--rlb-r4) var(--rlb-r5);
  background: var(--merk-vlak, #F6F7F8);
  border-left: 3px solid var(--merk-accent, #E2000F);
  border-radius: 0 var(--merk-radius_kaart, 6px) var(--merk-radius_kaart, 6px) 0;
  font-size: .95rem; line-height: 1.6;
  color: var(--merk-tekst, #3D444D);
}
.rlb--vlak-vlak .rlb-cert-betaling { background: var(--merk-paneel, #FFFFFF); }
.rlb-cert-betaling p { margin: 0 0 var(--rlb-r2); }
.rlb-cert-betaling p:last-child { margin-bottom: 0; }
.rlb-cert-document { margin: var(--rlb-r4) 0 0; font-size: .92rem; }
.rlb-cert-document a {
  color: var(--merk-inkt, #1A1D21);
  text-decoration: underline;
  text-decoration-color: var(--merk-accent, #E2000F);
  text-underline-offset: 3px;
}
.rlb-cert-document a:hover { color: var(--merk-accent, #E2000F); }
.rlb-cert-verhaal .rlb-knoppen { margin-top: var(--rlb-r5); }

.rlb-cert-lijst {
  list-style: none; margin: 0;
  padding: var(--rlb-r2) clamp(var(--rlb-r5), 2.2vw, var(--rlb-r6));
  background: var(--merk-vlak, #F6F7F8);
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb--vlak-vlak .rlb-cert-lijst { background: var(--merk-paneel, #FFFFFF); }
.rlb-cert-punt {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--rlb-r1) var(--rlb-r3);
  padding: var(--rlb-r3) 0;
}
.rlb-cert-punt + .rlb-cert-punt { border-top: 1px solid var(--merk-lijn, #E8EAEC); }
.rlb-cert-punt .rlb-icoon { color: var(--merk-accent, #E2000F); }
.rlb-cert-naam {
  font-weight: 700;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-cert-dekking {
  margin-left: auto;
  font-size: .88rem;
  color: var(--merk-gedempt, #696F77);
  text-align: right;
}
/* Smal: naam en dekking onder elkaar in plaats van over de rand gedrukt. */
@media (max-width: 29.9375rem) {
  .rlb-cert-dekking { margin-left: calc(20px + var(--rlb-r3)); flex-basis: 100%; text-align: left; }
}

/* ------------------------------------------------------------------------
   rl-beeldverhaal — één project in chronologie, van bekisting tot oplevering.

   Drie kaarten naast elkaar op breed (720×480-beeld, 3:2), twee op tablet,
   onder elkaar op mobiel. Het stapnummer komt server-side mee (geen
   CSS-counter: wat betekenis draagt hoort in de HTML) en staat in het
   accent naast het label; de regel eronder springt in tot het label zodat
   nummer, naam en uitleg als één stap lezen. De beelden dragen al
   width/height — de aspect-ratio hier is alleen de zekering die het vak op
   maat houdt vóór het beeld binnen is.
   ------------------------------------------------------------------------ */
.rlb-verhaal-rij {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--rlb-r5);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .rlb-verhaal-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .rlb-verhaal-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rlb-r6); } }
.rlb-verhaalstap { min-width: 0; }
.rlb-verhaalstap figure {
  margin: 0;
  display: flex; flex-direction: column; gap: var(--rlb-r3);
  height: 100%;
}
.rlb-verhaalstap-vak {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--merk-radius_kaart, 6px);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-verhaalstap-beeld {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.rlb-verhaalstap figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--rlb-r3);
  row-gap: var(--rlb-r1);
  align-items: baseline;
}
.rlb-verhaalstap-nr {
  grid-column: 1;
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--merk-accent, #E2000F);
}
.rlb-verhaalstap-label {
  grid-column: 2;
  font-weight: 700; line-height: 1.35;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-verhaalstap-tekst {
  grid-column: 2;
  font-size: .95rem; line-height: 1.6;
  color: var(--merk-tekst, #3D444D);
}
.rlb-verhaalstap-tekst p { margin: 0; }

/* ------------------------------------------------------------------------
   rl-tegelraster — het tegelraster van vloer- en funderingstypen.

   De interne-linkmotor (lw_trailer_box van de live site, maar dan in de
   huisstijl): beeld op vaste 4:3, de naam ALTIJD zichtbaar onder het vak —
   nooit tekst-over-beeld, want dan bepaalt de foto het contrast. De
   "Bekijk"-chip verschijnt bij hover of toetsenbordfocus; op aanraakschermen
   is er geen hover, dus daar staat hij er gewoon (anders is de affordance
   onvindbaar). Vier of drie kolommen op breed (modifier --k3/--k4), twee op
   tablet, en op mobiel een veegrij met scroll-snap in een eigen scrollvak —
   de pagina zelf scrollt nooit horizontaal.
   ------------------------------------------------------------------------ */
.rlb-tegels {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--rlb-r4);
}
/* Mobiel: de veegrij. min() klemt de tegelbreedte zodat er altijd een rand
   van de volgende tegel zichtbaar is — dat is de uitnodiging om te vegen. */
@media (max-width: 47.9375rem) {
  .rlb-tegels {
    grid-auto-flow: column;
    grid-auto-columns: min(68vw, 20rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--rlb-r2);
    scrollbar-width: thin;
  }
  .rlb-tegel { scroll-snap-align: start; }
}
@media (min-width: 48rem) { .rlb-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .rlb-tegelraster--k3 .rlb-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rlb-tegelraster--k4 .rlb-tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rlb-tegel { min-width: 0; }
.rlb-tegel-link {
  display: block; min-width: 0;
  text-decoration: none;
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb-tegel-link:focus-visible {
  outline: 3px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
}
.rlb-tegel-vak {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--merk-radius_kaart, 6px);
  background: var(--merk-vlak, #F6F7F8);
}
/* Een tegel zonder beeld blijft op hoogte en krijgt een rustig vlak met een
   lijn eromheen — geen grijs gat dat als fout leest. */
.rlb-tegel-vak--leeg { box-shadow: inset 0 0 0 1px var(--merk-lijn, #E8EAEC); }
.rlb-tegel-beeld {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--rlb-overgang, .22s ease);
}
.rlb-tegel-link:hover .rlb-tegel-beeld,
.rlb-tegel-link:focus-visible .rlb-tegel-beeld { transform: scale(1.04); }
.rlb-tegel-bekijk {
  position: absolute; left: var(--rlb-r3); bottom: var(--rlb-r3);
  display: inline-flex; align-items: center; gap: var(--rlb-r1);
  padding: var(--rlb-r1) var(--rlb-r3);
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--rlb-overgang, .22s ease), transform var(--rlb-overgang, .22s ease);
}
.rlb-tegel-link:hover .rlb-tegel-bekijk,
.rlb-tegel-link:focus-visible .rlb-tegel-bekijk { opacity: 1; transform: none; }
@media (hover: none) {
  .rlb-tegel-bekijk { opacity: 1; transform: none; }
}
.rlb-tegel-naam {
  display: block;
  margin-top: var(--rlb-r3);
  font-weight: 700; line-height: 1.35;
  color: var(--merk-inkt, #1A1D21);
  transition: color var(--rlb-overgang, .22s ease);
}
.rlb-tegel-link:hover .rlb-tegel-naam { color: var(--merk-accent, #E2000F); }

/* ------------------------------------------------------------------------
   rl-voornahar — de voor/na-schuif.

   Zonder JavaScript staan beide foto's er volledig in en knipt clip-path
   het voor-beeld op de helft: de vergelijking is er altijd. rl.js (module
   voorna) haalt daarna alleen het hidden-attribuut van de <input
   type="range"> en stuurt --rlb-vna bij — één variabele beweegt de knip,
   de greep en niets anders, dus geen layout-werk en geen CLS. In een
   browser zonder clip-path (alleen stokoud) verdwijnt het voor-beeld en
   blijft het NA-beeld staan: het resultaat is het beeld dat verkoopt.
   ------------------------------------------------------------------------ */
.rlb-vna-vak {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--merk-radius_kaart, 6px);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-vna-na,
.rlb-vna-voor { position: absolute; inset: 0; }
.rlb-vna-beeld {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.rlb-vna-voor { clip-path: inset(0 calc(100% - var(--rlb-vna, 50%)) 0 0); }
@supports not (clip-path: inset(0 50% 0 0)) {
  .rlb-vna-voor { display: none; }
  .rlb-vna-greep { display: none; }
}
.rlb-vna-greep {
  position: absolute; top: 0; bottom: 0;
  left: var(--rlb-vna, 50%);
  width: 2px; margin-left: -1px;
  background: var(--merk-grond, #FFFFFF);
  box-shadow: 0 0 0 1px rgba(10, 20, 32, .18);
  pointer-events: none;
}
.rlb-vna-etiket {
  position: absolute; top: var(--rlb-r3);
  padding: var(--rlb-r1) var(--rlb-r3);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px;
  background: rgba(26, 29, 33, .72);
  color: var(--merk-op_accent, #FFFFFF);
  pointer-events: none;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rlb-vna-etiket { background: color-mix(in srgb, var(--merk-inkt, #1A1D21) 72%, transparent); }
}
.rlb-vna-etiket--voor { left: var(--rlb-r3); }
.rlb-vna-etiket--na { right: var(--rlb-r3); }
/* De schuif staat in de HTML maar is verborgen tot rl.js hem aansluit; het
   [hidden]-attribuut wint hier expliciet van de display-regel eronder,
   anders staat er een regelaar die niets doet. */
.rlb-vna-schuif[hidden] { display: none; }
.rlb-vna-schuif {
  display: block; width: 100%;
  margin-top: var(--rlb-r4);
  accent-color: var(--merk-accent, #E2000F);
  cursor: ew-resize;
}
.rlb-vna-feiten {
  list-style: none;
  margin: var(--rlb-r5) 0 0; padding: 0;
  display: grid; gap: var(--rlb-r4);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.rlb-vna-feit {
  display: flex; flex-direction: column; gap: var(--rlb-r1);
  padding: var(--rlb-r4) var(--rlb-r5);
  background: var(--merk-vlak, #F6F7F8);
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb--vlak-vlak .rlb-vna-feit { background: var(--merk-paneel, #FFFFFF); }
.rlb-vna-feit-waarde {
  font-family: var(--merk-font-smal, var(--merk-font-kop));
  font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--merk-inkt, #1A1D21);
}
.rlb-vna-feit-label {
  font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--merk-gedempt, #696F77);
}

@media (prefers-reduced-motion: reduce) {
  .rlb-tegel-beeld,
  .rlb-tegel-bekijk,
  .rlb-tegel-naam { transition: none; }
  .rlb-tegel-link:hover .rlb-tegel-beeld,
  .rlb-tegel-link:focus-visible .rlb-tegel-beeld { transform: none; }
}

/* Contact als CTA in het hoofdmenu (eis Marijn, 11 nov). Hij staat rechts,
   los van de menulinks, zodat hij als actie leest en niet als navigatie. */
.rlb-nav-knop-item { margin-left: var(--rlb-r4, 1rem); }
.rlb-nav-knop { padding: var(--rlb-r2) var(--rlb-r4); font-size: .9375rem; white-space: nowrap; }
@media (max-width: 1100px) { .rlb-nav-knop { padding: var(--rlb-r2) var(--rlb-r4); } }

/* Eerste footerkolom (Marijn, 11 nov): logo boven de naam, daaronder de
   tekst, dan de klikbare contactgegevens, dan LinkedIn. */
.rlb-footer-logo { display: block; height: auto; margin-bottom: var(--rlb-r4, 1rem); }
.rlb-footer-merk { font-size: 1.125rem; margin: 0 0 var(--rlb-r3, .75rem); }
.rlb-footer-gegevens { list-style: none; margin: var(--rlb-r4, 1rem) 0 0; padding: 0; display: grid; gap: var(--rlb-r2); }
.rlb-footer-gegevens a { display: inline-flex; align-items: center; gap: var(--rlb-r2); }
.rlb-footer-adres { opacity: .85; line-height: 1.5; }
.rlb-footer-sociaal { margin-top: var(--rlb-r4, 1rem); }

/* ------------------------------------------------------------------------
   Vloertypenraster (Marijn, 11 nov): geen schuifspoor maar een vol raster
   van grote fotokaarten, vier op een rij, ZONDER tussenruimte — de foto's
   vormen samen één vlak. Titel en één regel tagline staan in de kaart,
   onderin uitgelijnd zodat alle kaarten dezelfde leesregel hebben.
   Beweging: kaarten faden in bij het scrollen (scroll-driven animation,
   zonder JavaScript) en de foto zoomt rustig in bij hover.
   ------------------------------------------------------------------------ */
.rlb-sprongen .rlb-sprongen-spoor {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; list-style: none;
}
@media (max-width: 1100px) { .rlb-sprongen .rlb-sprongen-spoor { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .rlb-sprongen .rlb-sprongen-spoor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .rlb-sprongen .rlb-sprongen-spoor { grid-template-columns: 1fr; } }

.rlb-sprongen .rlb-sprong { min-width: 0; scroll-snap-align: none; }
.rlb-sprongen .rlb-sprong-link {
  position: relative; display: block; isolation: isolate;
  aspect-ratio: 4 / 3; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--merk-inkt, #1A1D21);
}
.rlb-sprongen .rlb-sprong-beeldvak { position: absolute; inset: 0; display: block; }
.rlb-sprongen .rlb-sprong-beeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1), filter .4s ease;
  filter: saturate(.92);
}
/* Sluier zodat witte tekst op elke foto leesbaar is (contrast-eis). */
.rlb-sprongen .rlb-sprong-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(16 18 22 / .88) 0%, rgb(16 18 22 / .35) 45%, rgb(16 18 22 / .05) 100%);
  transition: background .4s ease;
}
.rlb-sprongen .rlb-sprong-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--rlb-r1);
  padding: clamp(1rem, 1.6vw, 1.5rem);
}
.rlb-sprongen .rlb-sprong-label {
  font-family: var(--merk-font-kop); font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem);
  line-height: 1.2; color: #fff;
}
.rlb-sprongen .rlb-sprong-regel {
  font-size: .9375rem; line-height: 1.4; color: rgb(255 255 255 / .82);
  /* één regel, netjes afgekapt: alle kaarten houden dezelfde hoogte */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Hover: foto zoomt in, sluier licht op, een rode lijn onderaan de kaart. */
.rlb-sprongen .rlb-sprong-link:hover .rlb-sprong-beeld,
.rlb-sprongen .rlb-sprong-link:focus-visible .rlb-sprong-beeld { transform: scale(1.06); filter: saturate(1.05); }
.rlb-sprongen .rlb-sprong-link:hover::after { background: linear-gradient(to top, rgb(16 18 22 / .92) 0%, rgb(226 0 15 / .28) 60%, rgb(16 18 22 / .05) 100%); }
.rlb-sprongen .rlb-sprong-link:focus-visible { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: -3px; }

/* Fade-in bij het scrollen, zonder JavaScript. Browsers zonder steun tonen
   de kaarten gewoon meteen — nooit onzichtbare inhoud. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rlb-sprongen .rlb-sprong {
      animation: rlb-opkomen linear both;
      animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    @keyframes rlb-opkomen {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* =====================================================================
 * ZWETS — MEGAMENU, CONTACTKNOP EN BELLEN (11 november 2026)
 *
 * Marijn: "Contact mist in het headermenu — superbelangrijk. Contact hoort
 * altijd zichtbaar in de hoofdnavigatie (rechts, als opvallende knop/CTA
 * naast de menu-items), plus telefoonnummer 0184 636 767 klikbaar. Daarbij:
 * het hoofdmenu wordt een megamenu met kolommen per categorie."
 *
 * Wat hier staat, in die volgorde:
 *   1. het paneel open/dicht (hover, focus-within EN de JS-vlag)
 *   2. de kolommen en de voetregel "Alle ... bekijken"
 *   3. de rode Contactknop en het nummer in de hoofdbalk
 *   4. de breedte: zeven menu-items, zoeken, nummer en twee knoppen
 *   5. bellen en Contact op een telefoon, zonder het menu te openen
 *   6. het accordeon-menu onder 1024px
 *
 * ALLE kleuren, radii en afstanden komen uit de tokens van brand.css. Geen
 * hoogte die mag verspringen: het paneel is absoluut gepositioneerd, dus het
 * duwt nooit iets weg (CLS 0), en elk trefvlak in de balk is 44px.
 * ===================================================================== */

/* ---- 1. OPEN EN DICHT ----------------------------------------------- */

/* Zonder JavaScript doet :hover en :focus-within het werk (dat staat al in
   de sectie MEGA-MENU hierboven). assets/rl.js zet daarnaast
   data-rl-open="1" op het <li> en aria-expanded op de link, zodat een
   schermlezer de stand hoort en Escape werkt. Allebei dezelfde eindstand,
   dus het paneel springt niet als de JS later binnenkomt. */
.rlb-nav-heeft-paneel[data-rl-open="1"] > .rlb-nav-paneel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.rlb-nav-heeft-paneel[data-rl-open="1"] > .rlb-navlink .rlb-nav-pijl {
  transform: rotate(225deg) translateY(2px);
}
/* Staat het paneel open, dan blijft de menulink zelf ook actief ogen. */
.rlb-nav-heeft-paneel[data-rl-open="1"] > .rlb-navlink { color: #fff; }
.rlb-nav-heeft-paneel[data-rl-open="1"] > .rlb-navlink::after {
  transform: translateX(-50%) scaleX(1);
}

/* Een paneel met 23 links moet op een laptop van 768px hoog nog passen.
   dvh houdt op iOS rekening met de adresbalk; de vh-regel erboven is de
   terugval voor browsers die dvh niet kennen. overscroll-behavior houdt het
   doorscrollen in het paneel, zodat de pagina eronder blijft staan. */
.rlb-nav-paneel {
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Firefox kent scrollbar-width, WebKit/Blink ::-webkit-scrollbar. Beide
     staan er, want een brede systeembalk over het paneel oogt rommelig. */
  scrollbar-width: thin;
  scrollbar-color: var(--merk-lijn, #E8EAEC) transparent;
}
.rlb-nav-paneel::-webkit-scrollbar { width: 10px; }
.rlb-nav-paneel::-webkit-scrollbar-thumb {
  background: var(--merk-lijn, #E8EAEC);
  border-radius: 999px;
}

/* ---- 2. KOLOMMEN EN DE VOETREGEL ------------------------------------ */

/* Vier kolommen naast elkaar bij industrievloeren (23 vloertypen), twee bij
   engineering. auto-fit doet dat zelf; de bodem van 210px houdt een kolom
   leesbaar en voorkomt dat er een vijfde reepje bij komt. */
.rlb-nav-paneel-rij {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--rlb-r5) clamp(var(--rlb-r5), 2.5vw, var(--rlb-r7));
  padding-block: var(--rlb-r6);
}
/* Koppen op één lijn en regels van gelijke hoogte: dat was Marijns kritiek
   op de sjablonen en geldt hier net zo goed. */
.rlb-nav-kolom { align-self: start; }
.rlb-nav-koltitel { margin-bottom: var(--rlb-r3); }
.rlb-nav-kolom ul { gap: 0; }
.rlb-nav-kolom a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: var(--rlb-r1) var(--rlb-r2);
  border-radius: var(--merk-radius_knop, 4px);
}
.rlb-nav-kolom a:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 1px;
}
.rlb-nav-sublabel { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
/* Heeft een link wél een ondertitel, dan mag de regel twee lagen hoog zijn. */
.rlb-nav-kolom a:has(.rlb-nav-subtekst) { display: block; }

/* De voetregel: wie zijn vloertype niet in de lijst ziet, moet niet terug
   naar de menulink hoeven. Hetzelfde idee als het tegelraster hoog op de
   hub — eerst kunnen kiezen, dan lezen. */
.rlb-nav-paneel-voet {
  border-top: 1px solid var(--merk-lijn, #E8EAEC);
  background: var(--merk-vlak, #F6F7F8);
}
.rlb-nav-alles {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  min-height: 48px;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--merk-accent_donker, #A50B00);
  text-decoration: none;
}
.rlb-nav-alles:hover { color: var(--merk-accent, #E2000F); }
.rlb-nav-alles .rlb-icoon { transition: transform var(--rlb-overgang); }
.rlb-nav-alles:hover .rlb-icoon { transform: translateX(4px); }
.rlb-nav-alles:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
}

/* ---- 3. DE CONTACTKNOP EN HET NUMMER IN DE HOOFDBALK ---------------- */

/* De rode knop met de afronding van de CTA-banner onderaan elke pagina
   (calc(radius_kaart * 3)) — dezelfde vorm, dezelfde kleur, dus de bezoeker
   herkent op elke pagina dezelfde "hier moet je klikken". */
.rlb-kop-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  min-height: 44px;
  padding-inline: var(--rlb-r5);
  border: 2px solid var(--merk-accent, #E2000F);
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  /* Eerst een platte rgba-schaduw als terugval, daarna dezelfde in tokens.
     Een browser zonder color-mix houdt de eerste regel. */
  box-shadow: 0 6px 18px rgba(226, 0, 15, .3);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--merk-accent, #E2000F) 30%, transparent);
  transition: background var(--rlb-overgang), border-color var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-kop-contact:hover {
  background: var(--merk-accent_donker, #A50B00);
  border-color: var(--merk-accent_donker, #A50B00);
  color: #fff;
  transform: translateY(-1px);
}
.rlb-kop-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rlb-kop-contact .rlb-icoon { color: currentColor; }

/* De offerteknop blijft staan, maar als witte omlijning. Twee massief rode
   knoppen naast elkaar vechten om dezelfde klik; nu is er één rode knop in
   de balk (Contact, de eis van 11 november) en blijft de offerteroute
   zichtbaar en even groot ernaast. Offerte staat bovendien in het paneel
   van Over Zwets, in de CTA-banner van elke pagina en in de onderbalk op
   mobiel. */
.rlb-header-acties .rlb-knop--primair {
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.rlb-header-acties .rlb-knop--primair:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: none;
}

/* Het nummer staat ook in de rode bovenbalk, maar die klapt dicht zodra er
   gescrold wordt. Daarom staat het hier nog een keer: na één scrollbeweging
   is bellen anders van de pagina verdwenen. */
.rlb-header-acties .rlb-tel {
  min-height: 44px;
  padding-inline: var(--rlb-r2);
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
}
.rlb-header-acties .rlb-tel:focus-visible {
  outline: 2px solid var(--merk-accent, #E2000F);
  outline-offset: 2px;
}

/* ---- 4. BREEDTE: ZEVEN ITEMS, ZOEKEN, NUMMER EN TWEE KNOPPEN -------- */

/* Gemeten in de 1200px-kolom: zeven menu-items in kapitalen kosten ~705px,
   logo 160, zoeken 40, nummer 150, offerte 170 en Contact 130. Dat past niet
   onder 1600px. Daarom krimpt het in twee stappen in plaats van over elkaar
   te schuiven. */
@media (max-width: 1599px) {
  .rlb-nav ul { gap: clamp(var(--rlb-r3), 1.2vw, var(--rlb-r5)); }
  .rlb-nav .rlb-navlink { font-size: .8125rem; }
  /* Alleen het icoon; de tekst blijft in de HTML staan en dus leesbaar voor
     een schermlezer. display:none zou de link zijn naam afnemen. */
  .rlb-header-acties .rlb-tel span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .rlb-header-acties .rlb-tel {
    justify-content: center;
    min-width: 44px;
    border: 2px solid rgba(255, 255, 255, .35);
  }
  .rlb-header-acties .rlb-knop--primair { padding-inline: var(--rlb-r4); }
}
@media (max-width: 1279px) {
  /* Hier gaat de offerteknop uit de balk. Niet de contactknop: die is de
     eis, en offerte blijft bereikbaar via het paneel van Over Zwets, de
     CTA-banner van elke pagina en de onderbalk. */
  .rlb-header-acties .rlb-knop--primair { display: none; }
}

/* ---- 5. BELLEN EN CONTACT OP EEN TELEFOON --------------------------- */

/* Onder 1024px zijn .rlb-nav en .rlb-header-acties weg (zie de media-regels
   eerder in dit bestand). Deze twee knoppen staan dan naast de menuknop:
   bellen en Contact mogen nooit achter een menu verdwijnen. De onderbalk van
   rl-zijtab houdt zijn eigen taak (de offerteroute) en krijgt er dus geen
   tweede bij. */
.rlb-kop-snel { display: none; }
.rlb-kop-snel-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-kop-snel-bel {
  border: 2px solid rgba(255, 255, 255, .5);
  color: #fff;
}
.rlb-kop-snel-bel:hover,
.rlb-kop-snel-bel:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .12); }
.rlb-kop-snel-bel .rlb-icoon { color: currentColor; }
.rlb-kop-snel-contact {
  padding-inline: var(--rlb-r4);
  border: 2px solid var(--merk-accent, #E2000F);
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
}
.rlb-kop-snel-contact:hover,
.rlb-kop-snel-contact:focus-visible {
  background: var(--merk-accent_donker, #A50B00);
  border-color: var(--merk-accent_donker, #A50B00);
  color: #fff;
}

@media (max-width: 1023px) {
  .rlb-kop-snel {
    display: flex;
    align-items: center;
    gap: var(--rlb-r2);
    justify-self: end;
  }
  .rlb-mobiel { margin-inline-start: 0; }
}
/* Op een smalle telefoon valt het woord "Menu" weg in plaats van een van de
   twee contactknoppen: het hamburgericoon is bekend genoeg. */
@media (max-width: 479px) {
  .rlb-mobiel-tekst { display: none; }
  .rlb-kop-snel-contact { padding-inline: var(--rlb-r3); }
}

/* ---- 6. HET ACCORDEON ONDER 1024px --------------------------------- */

/* Elk hoofditem is een <details> met de paneellinks erin (staat al in de
   renderer). Hieronder alleen de afsluitende regel per groep. */
.rlb-mobiel-sub .rlb-navlink--alles {
  color: #fff;
  font-weight: 700;
}
.rlb-mobiel-sub .rlb-navlink--alles::before {
  content: "";
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .5em;
  border-top: 2px solid var(--merk-accent, #E2000F);
  border-right: 2px solid var(--merk-accent, #E2000F);
  transform: rotate(45deg);
}
.rlb-mobiel-acties .rlb-kop-contact { flex: 1 1 auto; justify-content: center; }
.rlb-mobiel-acties .rlb-tel { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .rlb-kop-contact,
  .rlb-nav-alles .rlb-icoon { transition: none; }
  .rlb-kop-contact:hover { transform: none; }
}

/* ------------------------------------------------------------------------
   rl-pijlers — de vier invalshoeken op de home, naar het voorbeeld van
   damen.com. Vier staande beeldpanelen naast elkaar. Het paneel waar de
   bezoeker op staat wordt breder en schuift zijn tekst omhoog; de andere
   drie krimpen. Alles met CSS: grid-template-columns animeert via
   flex-grow, dus geen JavaScript en geen layout-shift bij het laden.
   ------------------------------------------------------------------------ */
.rlb-pijlers-rij {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  min-height: clamp(380px, 56vh, 620px); overflow: hidden;
  border-radius: var(--merk-radius_kaart, 6px);
}
.rlb-pijler { flex: 1 1 0; min-width: 0; transition: flex-grow .55s cubic-bezier(.2,.7,.3,1); }
/* Het actieve paneel wordt ruim twee keer zo breed. :has zorgt dat de
   ANDERE panelen krimpen; browsers zonder :has tonen vier gelijke panelen. */
@media (hover: hover) and (min-width: 900px) {
  .rlb-pijlers-rij:hover .rlb-pijler { flex-grow: .8; }
  .rlb-pijler:hover, .rlb-pijler:focus-within { flex-grow: 2.4 !important; }
}
.rlb-pijler-link {
  position: relative; display: block; height: 100%; isolation: isolate;
  text-decoration: none; color: #fff; background: var(--merk-inkt, #1A1D21);
  overflow: hidden;
}
.rlb-pijler-beeldvak { position: absolute; inset: 0; display: block; }
.rlb-pijler-beeld {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  filter: grayscale(.25) brightness(.78);
}
.rlb-pijler-link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgb(12 14 18 / .92) 6%, rgb(12 14 18 / .35) 48%, rgb(12 14 18 / 0) 85%);
  transition: background .5s ease;
}
/* Een rode streep die vanaf links invult: het accent van Zwets, niet een
   willekeurige hover-kleur. */
.rlb-pijler-link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3;
  background: var(--merk-accent, #E2000F); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.rlb-pijler-tekst {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--rlb-r1);
  padding: clamp(1.25rem, 2vw, 2.25rem);
}
.rlb-pijler-nummer {
  font-size: .8125rem; letter-spacing: .14em; color: rgb(255 255 255 / .6);
  font-variant-numeric: tabular-nums;
}
.rlb-pijler-label {
  font-family: var(--merk-font-kop); line-height: 1.1;
  font-size: clamp(1.25rem, .9rem + 1.1vw, 2rem);
  /* staand label op smalle panelen zou kantelen; we houden het leesbaar */
}
/* De tekstregel en de pijl verschijnen pas als het paneel opengaat — dat is
   het gedrag dat het blok rustig houdt tot je er iets mee wilt. */
.rlb-pijler-regel, .rlb-pijler-pijl {
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease .05s, transform .45s cubic-bezier(.2,.7,.3,1) .05s;
}
.rlb-pijler-regel { font-size: 1rem; line-height: 1.45; color: rgb(255 255 255 / .88); max-width: 34ch; }
.rlb-pijler-pijl { display: inline-flex; margin-top: var(--rlb-r1); }
.rlb-pijler-link:hover .rlb-pijler-regel, .rlb-pijler-link:focus-visible .rlb-pijler-regel,
.rlb-pijler-link:hover .rlb-pijler-pijl,  .rlb-pijler-link:focus-visible .rlb-pijler-pijl { opacity: 1; transform: none; }
.rlb-pijler-link:hover .rlb-pijler-beeld, .rlb-pijler-link:focus-visible .rlb-pijler-beeld {
  transform: scale(1.05); filter: grayscale(0) brightness(.92);
}
.rlb-pijler-link:hover::after { background: linear-gradient(to top, rgb(12 14 18 / .94) 6%, rgb(12 14 18 / .3) 55%, rgb(12 14 18 / 0) 90%); }
.rlb-pijler-link:hover::before, .rlb-pijler-link:focus-within::before { transform: scaleX(1); }
.rlb-pijler-link:focus-visible { outline: 3px solid var(--merk-accent, #E2000F); outline-offset: -3px; }

/* Onder 900px worden het vier volle kaarten onder elkaar: op een telefoon
   is een uitklappend paneel onbruikbaar. Daar staat de tekst altijd aan. */
@media (max-width: 900px) {
  .rlb-pijlers-rij { flex-direction: column; min-height: 0; }
  .rlb-pijler { flex: none; }
  .rlb-pijler-link { height: 260px; }
  .rlb-pijler-regel, .rlb-pijler-pijl { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-pijler, .rlb-pijler-beeld, .rlb-pijler-regel, .rlb-pijler-pijl, .rlb-pijler-link::before { transition: none; }
}

/* Projectkaart (Marijn, 11 nov): de projectnaam is het grote element, de
   sterkteklasse een rustig label eronder, de plaats erboven met marker. */
.rlb-projectkaart-titel { font-size: clamp(1.0625rem, .95rem + .45vw, 1.375rem); line-height: 1.25; margin: .15rem 0 var(--rlb-r2); }
.rlb-projectkaart-plaats { display: inline-flex; align-items: center; gap: var(--rlb-r1); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.rlb-projectkaart-plaats .rlb-icoon { flex: none; opacity: .9; }
.rlb-projectkaart-groot {
  display: inline-flex; align-items: baseline; gap: var(--rlb-r2);
  font-size: .9375rem; font-weight: 600; letter-spacing: 0;
  opacity: .95;
}
.rlb-projectkaart-grootlabel { font-size: .75rem; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }

/* De afsluitende CTA onder de USP's staat gecentreerd (Marijn, 11 nov). */
.rlb-usp-actie { display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; }
.rlb-usp-actie .rlb-knop { margin-inline: auto; }

/* Footer: telefoon en e-mail in wit, alleen het icoon ervoor in Zwets-rood. */
.rlb-footer-gegevens a { color: #fff; }
.rlb-footer-gegevens a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rlb-footer-gegevens .rlb-icoon { color: var(--merk-accent, #E2000F); }

/* Footer (Marijn, 11 nov): de kopjes zijn goed, de links mogen dunner.
   Ze erfden de zwaarte van de footer-tekst; nu expliciet 400 met iets
   meer regelhoogte, zodat de kolommen rustiger lezen. */
.rlb-footer-kolom ul a { font-weight: 400; font-size: .9375rem; line-height: 1.5; }
.rlb-footer-kolom ul { gap: var(--rlb-r2); }

/* Megamenu (Marijn, 11 nov): de menulinks sprongen in ten opzichte van de
   kolomtitel door de linkerpadding van de hover-vlakken. Nu lijnen titel en
   links links uit; het hover-vlak loopt met een negatieve marge naar buiten,
   zodat de aanraakzone even groot blijft. */
.rlb-nav-kolom a { padding-left: 0; padding-right: var(--rlb-r2); margin-inline: 0; }
.rlb-nav-kolom a:hover,
.rlb-nav-kolom a:focus-visible {
  background: var(--merk-vlak, #F6F7F8);
  box-shadow: -.6rem 0 0 var(--merk-vlak, #F6F7F8);
}


/* Introblok definitief links uitgelijnd en op volle breedte (Marijn, 11 nov).
   Er stonden nog centreer-regels uit een eerdere versie in: de alinea werd
   gecentreerd (margin auto) en de feitenrij ook, waardoor het blok scheef
   oogde ten opzichte van de rest van de pagina. */
.rlb-antwoord > .rlb-binnen { max-width: 1440px; margin-inline: auto; text-align: left; }
.rlb-antwoord-vlak { text-align: left; }
.rlb-antwoord-vlak > * { margin-left: 0; margin-right: 0; max-width: none; }
.rlb-antwoord-vlak .rlb-antwoord-vraag { max-width: 28ch; margin-left: 0; }
.rlb-antwoord-vlak .rlb-antwoord-tekst { max-width: 95ch; margin-left: 0; }
.rlb-antwoord-vlak .rlb-antwoord-tekst p { max-width: none; margin-left: 0; margin-right: 0; }
.rlb-antwoord-vlak .rlb-antwoord-feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rlb-r4, 1rem) var(--rlb-r6, 2rem);
  justify-content: start; justify-items: start; margin-left: 0; max-width: none;
}
.rlb-antwoord-vlak .rlb-antwoord-feiten li {
  border-top: 0; border-left: 3px solid rgb(255 255 255 / .55);
  padding: .15rem 0 .15rem var(--rlb-r4, 1rem); text-align: left; width: 100%;
}

/* FAQ-indeling (Marijn, 11 nov): de tweekolomsvorm is goed, maar de titel
   in de linkerkolom brak midden in een woord af ("voedselpro-ducenten").
   De kolom was 23rem; dat is te krap voor lange samenstellingen. Nu ruimer,
   en afbreken midden in een woord staat uit — de vragenlijst schuift
   daardoor iets naar rechts, precies wat gevraagd is. */
@media (min-width: 1024px) {
  section.rlb-faq > .rlb-binnen,
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen,
  section.rlb-gerelateerd > .rlb-binnen {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  }
  section.rlb-faq > .rlb-binnen > .rlb-kop .rlb-titel,
  section.rlb-tekst:not(.rlb-tekst--met-kaart) > .rlb-binnen > .rlb-kop .rlb-titel,
  section.rlb-gerelateerd > .rlb-binnen > .rlb-kop .rlb-titel {
    hyphens: manual; overflow-wrap: normal; text-wrap: balance; padding-right: var(--rlb-r4);
  }
}
@media (min-width: 1400px) {
  section.rlb-faq > .rlb-binnen { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
}

/* CTA-blok met beeld (Marijn, 11 nov): achtergrondfoto met een donkere
   overlay en witte tekst, in plaats van een vlakke band. De titel mag niet
   midden in een woord afbreken ("produc-tiehal") en past op twee regels. */
.rlb-cta-sectie--beeld .rlb-cta-titel,
.rlb-cta-sectie--beeld .rlb-cta-tekst,
.rlb-cta-sectie--beeld .rlb-cta-tekst p { color: #fff; }
.rlb-cta-sectie--beeld .rlb-cta-tekst { color: rgb(255 255 255 / .9); }
.rlb-cta-titel {
  hyphens: manual; overflow-wrap: normal; text-wrap: balance;
  max-width: 20ch;              /* twee regels in plaats van drie */
  line-height: 1.12;
}
.rlb-cta-tekst { hyphens: manual; overflow-wrap: normal; }
/* Iets meer ruimte boven en onder, zodat de foto lucht krijgt. */
.rlb-cta-sectie--beeld > .rlb-binnen { padding-block: clamp(2.5rem, 5vw, 4.5rem); }

/* Introblok: de ruimte boven de alinea was groter dan die eronder
   (Marijn, 11 nov). Kicker, vraag en tekst krijgen nu hetzelfde ritme. */
.rlb-antwoord .rlb-kicker { margin: 0 0 var(--rlb-r2); }
.rlb-antwoord-vraag { margin: 0 0 var(--rlb-r3); }
.rlb-antwoord-tekst { margin-top: 0; }
.rlb-antwoord-speakable { margin-top: 0; }

/* Herotitel (Marijn, 11 nov): "Betonvloer voor de levensmiddelenindustrie"
   liep over drie regels terwijl het er makkelijk twee kunnen zijn. De
   tekstkolom was te smal voor zo'n lange samenstelling; nu ruimer, met
   text-wrap: balance zodat de regels gelijk verdeeld worden. */
.rlb-hero-titel { max-width: 22ch; text-wrap: balance; }
@media (min-width: 1024px) {
  .rlb-hero .rlb-hero-tekst { max-width: 68ch; }
  .rlb-hero-titel { max-width: 26ch; }
}

/* Beeldverhaal (Marijn, 11 nov): op drie kolommen bleef de vierde stap
   alleen op een tweede rij achter. Twee kolommen geeft een nette 2x2, en
   de kaarten worden meteen groter en duidelijker. */
@media (min-width: 64rem) {
  .rlb-verhaal-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rlb-r6); }
}
.rlb-verhaalstap-beeld { aspect-ratio: 16 / 10; width: 100%; height: auto; object-fit: cover; }
.rlb-verhaalstap figcaption { align-items: start; gap: var(--rlb-r1) var(--rlb-r4); }

/* Kopbalk (Marijn, 11 nov): het menu staat nu midden tussen het logo en de
   acties (zoeken, portaal, Contact), met gelijke afstand aan beide kanten.
   Drie kolommen waarvan de buitenste even breed zijn: het menu valt dan
   optisch in het midden, ook als links en rechts verschillend breed zijn. */
@media (min-width: 1024px) {
  .rlb-header .rlb-header-rij {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    gap: clamp(var(--rlb-r4, 1rem), 3vw, var(--rlb-r7, 3rem));
  }
  .rlb-header .rlb-merk { justify-self: start; }
  .rlb-header .rlb-nav { justify-self: center; }
  .rlb-header .rlb-header-acties { justify-self: end; }
  .rlb-header .rlb-nav > ul { justify-content: center; }
}

/* ------------------------------------------------------------------------
   RITME TUSSEN SECTIES (Marijn, 11 nov): "quantise alles zodat het overal
   evenredig is". Alle losse marges en paddings zijn naar de 8px-schaal
   gebracht; hieronder krijgt ook de afstand TUSSEN blokken één maat, zodat
   geen enkel blok zijn eigen ritme meer meeneemt.
   ------------------------------------------------------------------------ */
:root { --rlb-sectie: clamp(var(--rlb-r7), 6vw, var(--rlb-r8)); }

.rlb > .rlb-binnen { padding-block: var(--rlb-sectie); }
.rlb + .rlb { margin-top: 0; }

/* Blokken die bewust tegen elkaar aan liggen (volvlakken) houden hun eigen
   maat: het rode introblok, de hero, de kopbalk, de voet en de pijlers. */
.rlb-hero > .rlb-binnen,
.rlb-header > .rlb-binnen,
.rlb-antwoord > .rlb-binnen,
.rlb-kruimels > .rlb-binnen { padding-block: revert; }

/* Een kop en zijn inhoud horen dichter op elkaar dan twee blokken: half
   ritme binnen een sectie. */
.rlb > .rlb-binnen > .rlb-kop { margin-bottom: var(--rlb-r6); }
.rlb-kop .rlb-kicker { margin-bottom: var(--rlb-r2); }
.rlb-kop .rlb-titel { margin-bottom: var(--rlb-r3); }
.rlb-kop .rlb-intro { margin-bottom: 0; }

/* Alle knoppen in de kopbalk delen één radius, zodat er geen uitzondering
   meer tussen staat (Marijn, 11 nov). */
.rlb-kop-contact, .rlb-kop-snel-knop, .rlb-header-acties .rlb-knop {
  border-radius: var(--merk-radius_knop, 4px);
}

/* CTA met achtergrondfoto (Marijn, 11 nov): het diepblauwe vlak en de rode
   gloed lagen OVER de foto, waardoor het blok weer blauw oogde. Zodra er
   een foto in zit, verdwijnen beide en blijft alleen een neutrale donkere
   sluier over — foto zichtbaar, tekst leesbaar. */
.rlb-cta-sectie--beeld { background: var(--merk-inkt, #1A1D21); }
.rlb-cta-sectie--beeld::after { display: none; }
.rlb-cta-sectie--beeld .rlb-cta-achter { z-index: 0; }
/* Marijn, 11 nov: de sluier dekt ALLEEN de linkerhelft, want daar staat de
   tekst; rechts blijft de foto vrij. De kleur is de rode merkgradient van
   de knoppen, zodat de band bij de huisstijl hoort in plaats van een
   neutraal grijs vlak te zijn. */
.rlb-cta-sectie--beeld .rlb-cta-sluier {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--merk-accent_donker, #A50B00) 94%, #000) 0%,
    color-mix(in srgb, var(--merk-accent, #E2000F) 86%, transparent) 34%,
    color-mix(in srgb, var(--merk-accent, #E2000F) 34%, transparent) 56%,
    transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .rlb-cta-sectie--beeld .rlb-cta-sluier {
    background: linear-gradient(90deg, rgba(123,8,6,.96) 0%, rgba(226,0,15,.86) 34%, rgba(226,0,15,.34) 56%, rgba(226,0,15,0) 72%);
  }
}
/* De foto vult de hele band en is rechts uitgelijnd, zodat het onderwerp
   naast de tekst valt en niet erachter. */
.rlb-cta-sectie--beeld .rlb-cta-beeld { object-position: right center; }
/* Tekst en knoppen links, in de breedte van de sluier. */
.rlb-cta-sectie--beeld .rlb-cta { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.rlb-cta-sectie--beeld .rlb-cta-tekstvak { max-width: 56ch; }
@media (max-width: 860px) {
  /* Op smal scherm staat de tekst over de volle breedte; dan moet de sluier
     ook de hele band dekken, anders valt de tekst op de foto. */
  .rlb-cta-sectie--beeld .rlb-cta-sluier {
    background: linear-gradient(180deg, rgba(123,8,6,.95) 0%, rgba(226,0,15,.82) 70%, rgba(226,0,15,.72) 100%);
  }
  .rlb-cta-sectie--beeld .rlb-cta { grid-template-columns: 1fr; }
}
.rlb-cta-sectie--beeld .rlb-cta-beeld { width: 100%; height: 100%; object-fit: cover; }

/* Noten onder een blok (Marijn, 11 nov): altijd op één regel, gecentreerd,
   en met een kleine marge zodat ze niet strak tegen het blok plakken.
   Past niet alles op één regel, dan loopt hij netjes door in plaats van
   dat de tekst wordt afgekapt. */
.rlb-verg-noot, .rlb-specs-noot, .rlb-norm-noot, .rlb-tabel-noot, .rlb-kalender-noot {
  margin-top: var(--rlb-r4);
  text-align: center;
  max-width: 100%;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--merk-gedempt, #696F77);
  text-wrap: balance;
}

/* CTA-foto (Marijn, 11 nov): de foto stond 22% ingezoomd en 9% verschoven
   met een langzame zoomanimatie. Daardoor zag je vaak een uitsnede zonder
   herkenbaar onderwerp. Nu: geen zoom, geen animatie, en de foto uitgelijnd
   op de rechterhelft waar hij vrij ligt naast de rode gradient. */
.rlb-cta-sectie--beeld .rlb-cta-beeld {
  transform: none;
  animation: none;
  object-fit: cover;
  object-position: 72% center;
  width: 100%; height: 100%;
}
@media (max-width: 899px) {
  .rlb-cta-sectie--beeld .rlb-cta-beeld { transform: none; object-position: center 45%; }
}


/* Ronde CTA-banner MET foto (Marijn, 11 nov): het blauwe vlak zat op de
   binnenkaart (.rlb-cta) en lag dus over de foto heen. Met een foto erin
   wordt die kaart doorzichtig en draagt de sluier de kleur. */
.rlb-cta-sectie--beeld.rlb-cta-sectie--afgerond .rlb-cta { background: transparent; }
.rlb-cta-sectie--beeld.rlb-cta-sectie--afgerond .rlb-cta::after { content: none; }
/* De foto en de sluier krijgen dezelfde ronding als de kaart, zodat het
   beeld binnen de banner blijft en er geen vierkante hoek uitsteekt. */
.rlb-cta-sectie--beeld.rlb-cta-sectie--afgerond .rlb-cta-achter,
.rlb-cta-sectie--beeld.rlb-cta-sectie--afgerond .rlb-cta-sluier {
  border-radius: calc(var(--merk-radius_kaart, 6px) * 3);
  overflow: hidden;
}
.rlb-cta-sectie--beeld.rlb-cta-sectie--afgerond > .rlb-binnen { position: relative; }

/* CTA-knoppen (Marijn, 11 nov): offerte-knop en telefoonknop naast elkaar
   in plaats van onder elkaar, en de telefoonknop wit met zwarte tekst en
   een zwart telefoonicoon — hij was grijs en viel weg tegen de banner. */
.rlb-cta .rlb-knoppen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--rlb-r3);
  justify-items: initial;
}
.rlb-cta .rlb-knop { justify-content: center; width: auto; }
.rlb-cta-sectie .rlb-knop--secundair,
.rlb-cta-sectie--beeld .rlb-knop--secundair {
  background: #fff;
  color: var(--merk-inkt, #1A1D21);
  border-color: #fff;
}
.rlb-cta-sectie .rlb-knop--secundair .rlb-icoon,
.rlb-cta-sectie--beeld .rlb-knop--secundair .rlb-icoon { color: var(--merk-inkt, #1A1D21); }
.rlb-cta-sectie .rlb-knop--secundair:hover {
  background: var(--merk-inkt, #1A1D21); color: #fff; border-color: var(--merk-inkt, #1A1D21);
}
.rlb-cta-sectie .rlb-knop--secundair:hover .rlb-icoon { color: #fff; }
@media (max-width: 560px) {
  .rlb-cta .rlb-knoppen { flex-direction: column; align-items: stretch; }
}

/* Geen losse woorden op een eigen regel en geen afgebroken woorden
   (Marijn, 11 nov). `pretty` voorkomt een weeskind op de laatste regel,
   `balance` verdeelt koppen gelijk, en afbreken staat al uit. */
.rlb p, .rlb li, .rlb-intro, .rlb-antwoord-tekst, .rlb-cta-tekst, .rlb-hero-intro {
  text-wrap: pretty;
  hyphens: manual;
  overflow-wrap: break-word;
}
.rlb-titel, .rlb-hero-titel, .rlb-cta-titel, .rlb-antwoord-vraag,
.rlb h1, .rlb h2, .rlb h3, .rlb h4 {
  text-wrap: balance;
  hyphens: manual;
}

/* Telefoonknop in de CTA-banner (Marijn, 11 nov): het nummer bleef wit op
   de witte knop. Nu erft niets meer de witte bannerkleur: tekst én icoon
   zijn zwart, met hogere voorrang dan de algemene bannerregel. */
.rlb-cta-sectie .rlb-knop--secundair,
.rlb-cta-sectie .rlb-knop--secundair span,
.rlb-cta-sectie .rlb-knop--secundair .rlb-icoon,
.rlb-cta-sectie--beeld .rlb-knop--secundair,
.rlb-cta-sectie--beeld .rlb-knop--secundair span,
.rlb-cta-sectie--beeld .rlb-knop--secundair .rlb-icoon {
  color: var(--merk-inkt, #1A1D21) !important;
}
.rlb-cta-sectie .rlb-knop--secundair:hover,
.rlb-cta-sectie .rlb-knop--secundair:hover span,
.rlb-cta-sectie .rlb-knop--secundair:hover .rlb-icoon,
.rlb-cta-sectie--beeld .rlb-knop--secundair:hover,
.rlb-cta-sectie--beeld .rlb-knop--secundair:hover span,
.rlb-cta-sectie--beeld .rlb-knop--secundair:hover .rlb-icoon {
  color: #fff !important;
}

/* Introblok (Marijn, 11 nov): de feitenrij plakte tegen de onderrand van
   het rode vlak. Vaste ruimte eronder, en de vraag mag over de volle
   breedte lopen in plaats van op 28 tekens te worden afgeknepen. */
.rlb-antwoord > .rlb-binnen { padding-bottom: 50px; }
.rlb-antwoord-feiten { margin-bottom: 0; }
.rlb-antwoord-vlak .rlb-antwoord-vraag,
.rlb-antwoord-vraag { max-width: none; }
@media (max-width: 700px) { .rlb-antwoord > .rlb-binnen { padding-bottom: 34px; } }

/* =====================================================================
 * rl-postcarrousel — de kennis- en projectcarrousel
 * =====================================================================
 * De vorm van de stories-carrousel op adwise.nl, in Zwets-tokens: drie tot
 * vier kaarten naast elkaar met een PEEK — de volgende kaart steekt
 * zichtbaar in beeld, zodat niemand hoeft te raden of er meer is. Dat is de
 * hele reden dat een carrousel een carrousel is.
 *
 * ZONDER JAVASCRIPT WERKT HET. De rij is een gewone scroll-container met
 * scroll-snap: swipen op mobiel, shift+wiel op desktop, en met het
 * toetsenbord omdat de lijst zelf focusbaar is (tabindex="0" in de HTML).
 * De twee ronde pijlen zijn aanvulling; assets/rl.js zet ze uit aan het
 * begin en het eind.
 *
 * Alle maten komen uit de spacing-schaal (--rlb-r*) en alle kleuren uit
 * assets/brand.css. Geen losse waarden.
 * ===================================================================== */

.rlb-pcar-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rlb-ruimte-m);
  margin-bottom: var(--rlb-ruimte-l);
}
.rlb-pcar-koptekst { flex: 1 1 22rem; min-width: 0; }
.rlb-pcar-koptekst > .rlb-kop { margin-bottom: 0; }
.rlb-pcar-acties {
  display: flex;
  align-items: center;
  gap: var(--rlb-r5);
  flex: none;
}

/* De tekstlink rechtsboven: het "Bekijk alle stories"-equivalent. */
.rlb-pcar-alles {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r2);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  color: var(--merk-inkt, #1A1D21);
  text-decoration: none;
  border-bottom: 2px solid var(--merk-lijn, #E8EAEC);
  padding-bottom: var(--rlb-r1);
  transition: color var(--rlb-overgang), border-color var(--rlb-overgang);
}
.rlb-pcar-alles:hover,
.rlb-pcar-alles:focus-visible {
  color: var(--merk-accent, #E2000F);
  border-color: var(--merk-accent, #E2000F);
}
.rlb-pcar-alles svg { transition: transform var(--rlb-overgang); }
.rlb-pcar-alles:hover svg { transform: translateX(4px); }

/* De pijlen zijn hier echt rond; elders houdt .rlb-rondknop zijn
   kaartradius. */
.rlb-pcar-nav .rlb-rondknop { border-radius: 999px; }

/* --- de rij ---------------------------------------------------------- */

.rlb-pcar-spoor {
  --rlb-pcar-zicht: 1.2;          /* kaarten in beeld, inclusief de peek */
  display: flex;
  gap: var(--rlb-r5);
  margin: 0;
  padding: var(--rlb-r1) 0 var(--rlb-r4);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;   /* iOS: vaartscroll */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* oudere Edge */
}
.rlb-pcar-spoor::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
/* De lijst is focusbaar (toetsenbordscroll); dan hoort die focus zichtbaar. */
.rlb-pcar-spoor:focus-visible {
  outline: 2.5px solid var(--merk-accent, #E2000F);
  outline-offset: 4px;
  border-radius: var(--merk-radius_kaart, 6px);
}

.rlb-pcar-kaart {
  flex: 0 0 calc((100% - (var(--rlb-pcar-zicht) - 1) * var(--rlb-r5)) / var(--rlb-pcar-zicht));
  display: flex;                 /* zo rekt de link tot volle kaarthoogte */
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 700px)  { .rlb-pcar-spoor { --rlb-pcar-zicht: 2.3; } }
@media (min-width: 1024px) { .rlb-pcar-spoor { --rlb-pcar-zicht: 3.35; } }

/* --- de kaart -------------------------------------------------------- */

.rlb-pcar-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--merk-paneel, #FFFFFF);
  border: var(--rlb-rand);
  /* "licht afgerond": de kaartradius uit de branding, iets ruimer omdat dit
     vlak groter is dan een gewone kaart. Afgeleid, niet verzonnen. */
  border-radius: calc(var(--merk-radius_kaart, 6px) + 4px);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 28px rgb(0 0 0 / .07);
  transition: transform var(--rlb-overgang),
              box-shadow var(--rlb-overgang),
              border-color var(--rlb-overgang);
}
.rlb-pcar-link:hover,
.rlb-pcar-link:focus-visible {
  transform: translateY(-6px);
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 18px 44px rgb(0 0 0 / .13);
}
.rlb-pcar-link:focus-visible {
  outline: 2.5px solid var(--merk-accent, #E2000F);
  outline-offset: 3px;
}

.rlb-pcar-beeldvak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--merk-vlak, #F6F7F8);
}
/* Safari 14 en oudere Firefox kennen aspect-ratio niet: dan houdt deze
   terugval het vlak op 16:9 in plaats van op nul. */
@supports not (aspect-ratio: 16 / 9) {
  .rlb-pcar-beeldvak { height: 0; padding-bottom: 56.25%; }
  .rlb-pcar-beeldvak picture,
  .rlb-pcar-beeldvak .rlb-pcar-beeld { position: absolute; inset: 0; }
}
.rlb-pcar-beeldvak picture { display: block; width: 100%; height: 100%; }
.rlb-pcar-beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-pcar-link:hover .rlb-pcar-beeld,
.rlb-pcar-link:focus-visible .rlb-pcar-beeld { transform: scale(1.06); }

.rlb-pcar-etiket {
  position: absolute;
  inset-block-start: var(--rlb-r3);
  inset-inline-start: var(--rlb-r3);
  padding: var(--rlb-r1) var(--rlb-r3);
  border-radius: 999px;
  background: var(--merk-inkt, #1A1D21);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.rlb-pcar-body {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r2);
  flex: 1 1 auto;
  padding: var(--rlb-r5);
}
.rlb-pcar-titel {
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--merk-inkt, #1A1D21);
  /* Twee regels, daarna netjes afgekapt: anders duwt een lange titel de
     hele rij uit het lood. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--rlb-overgang);
}
.rlb-pcar-link:hover .rlb-pcar-titel,
.rlb-pcar-link:focus-visible .rlb-pcar-titel { color: var(--merk-accent, #E2000F); }

.rlb-pcar-tekst {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--merk-tekst, #3D444D);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rlb-pcar-voet {
  margin-top: auto;              /* lijnt de voet van elke kaart gelijk uit */
  padding-top: var(--rlb-r3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rlb-r3);
}
.rlb-pcar-datum {
  font-size: .8125rem;
  color: var(--merk-gedempt, #696F77);
}
.rlb-pcar-meer {
  display: inline-flex;
  align-items: center;
  gap: var(--rlb-r1);
  font-size: .875rem;
  font-weight: 600;
  color: var(--merk-accent, #E2000F);
}
.rlb-pcar-meer svg { transition: transform var(--rlb-overgang); }
.rlb-pcar-link:hover .rlb-pcar-meer svg { transform: translateX(4px); }

/* --- op een donkere sectie ------------------------------------------- */
/* De generieke donkerregels kleuren elke <a> rood; een kaart is geen link
   in een lopende zin, dus die krijgt haar eigen afspraak terug. */
.rlb--vlak-diepblauw .rlb-pcar-link,
.rlb--vlak-inkt .rlb-pcar-link { border-color: rgba(255, 255, 255, .16); }
.rlb--vlak-diepblauw .rlb-pcar-alles,
.rlb--vlak-inkt .rlb-pcar-alles { color: #fff; border-bottom-color: rgba(255, 255, 255, .3); }
.rlb--vlak-diepblauw .rlb-pcar-titel,
.rlb--vlak-inkt .rlb-pcar-titel { color: var(--merk-inkt, #1A1D21); }
.rlb--vlak-diepblauw .rlb-pcar-tekst,
.rlb--vlak-inkt .rlb-pcar-tekst { color: var(--merk-tekst, #3D444D); }

/* --- wie minder beweging wil, krijgt er geen ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rlb-pcar-spoor { scroll-behavior: auto; }
  .rlb-pcar-link,
  .rlb-pcar-beeld,
  .rlb-pcar-alles svg,
  .rlb-pcar-meer svg { transition: none; }
  .rlb-pcar-link:hover,
  .rlb-pcar-link:focus-visible { transform: none; }
  .rlb-pcar-link:hover .rlb-pcar-beeld,
  .rlb-pcar-link:focus-visible .rlb-pcar-beeld { transform: none; }
  .rlb-pcar-alles:hover svg,
  .rlb-pcar-link:hover .rlb-pcar-meer svg { transform: none; }
}

/* --- smal scherm ------------------------------------------------------ */
@media (max-width: 699px) {
  .rlb-pcar-kop { flex-direction: column; align-items: flex-start; }
  /* Pijlen hebben op een touchscreen geen functie naast de veeg, en ze
     kosten daar de breedte die de titel nodig heeft. */
  .rlb-pcar-nav { display: none; }
  .rlb-pcar-body { padding: var(--rlb-r4); }
}

/* ========================================================================
   ZWETS — DE VIDEOCARROUSEL (rl-videocarrousel)

   De vier werkvideo's van /over-zwets-industrievloeren/ terug, maar met de
   kosten omgedraaid: op de pagina staat alleen een posterbeeld. Het
   <video>-element komt er pas bij een klik (zie Videokaarten in rl.js), dus
   een bezoeker die niet klikt betaalt vier lazy posterbeelden en verder
   niets.

   De opmaak leunt bewust op de postcarrousel: zelfde spoor, zelfde peek,
   zelfde ronde pijlen. Twee carrousels die er anders uitzien zijn twee
   systemen, en de bezoeker hoort te herkennen hoe iets werkt.

   Alle maten komen uit de 8px-schaal (--rlb-r1..r9) en alle kleuren uit
   brand.css. Er staat hier geen los verzonnen getal.
   ======================================================================== */

.rlb-vcar-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rlb-ruimte-m);
  margin-bottom: var(--rlb-ruimte-l);
}
.rlb-vcar-koptekst { flex: 1 1 22rem; min-width: 0; }
.rlb-vcar-koptekst > .rlb-kop { margin-bottom: 0; }
.rlb-vcar-acties { display: flex; align-items: center; gap: var(--rlb-r5); flex: none; }

/* Rond, net als bij de postcarrousel; elders houdt .rlb-rondknop zijn
   kaartradius. */
.rlb-vcar-nav .rlb-rondknop { border-radius: 999px; }

/* ---- het spoor ------------------------------------------------------- */

.rlb-vcar-spoor {
  --rlb-vcar-zicht: 1.15;         /* kaarten in beeld, inclusief de peek */
  display: flex;
  gap: var(--rlb-r5);
  margin: 0;
  padding: var(--rlb-r1) 0 var(--rlb-r4);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;   /* iOS: vaartscroll */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* oudere Edge */
}
.rlb-vcar-spoor::-webkit-scrollbar { display: none; }   /* Chrome, Safari */
/* De lijst is focusbaar (toetsenbordscroll); dan hoort die focus zichtbaar. */
.rlb-vcar-spoor:focus-visible {
  outline: 2.5px solid var(--merk-accent, #E2000F);
  outline-offset: 4px;
  border-radius: var(--merk-radius_kaart, 6px);
}

.rlb-vcar-kaart {
  flex: 0 0 calc((100% - (var(--rlb-vcar-zicht) - 1) * var(--rlb-r5)) / var(--rlb-vcar-zicht));
  display: flex;
  scroll-snap-align: start;
  min-width: 0;
}

/* Twee en een kwart kaart op een tablet, drie plus een peek op een breed
   scherm: een halve kaart die rechts het beeld uit loopt vertelt dat er meer
   is, drie hele kaarten vertellen dat niet. Zelfde redenering als bij de
   projectcarrousel. */
@media (min-width: 700px)  { .rlb-vcar-spoor { --rlb-vcar-zicht: 2.25; } }
@media (min-width: 1024px) { .rlb-vcar-spoor { --rlb-vcar-zicht: 3.25; } }

/* ---- de kaart -------------------------------------------------------- */

.rlb-vcar-figuur {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  background: var(--merk-paneel, #FFFFFF);
  border: var(--rlb-rand);
  border-radius: calc(var(--merk-radius_kaart, 6px) + 4px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 28px rgb(0 0 0 / .07);
  transition: border-color var(--rlb-overgang), box-shadow var(--rlb-overgang);
}
.rlb-vcar-figuur:hover,
.rlb-vcar-figuur:focus-within {
  border-color: var(--merk-accent, #E2000F);
  box-shadow: 0 2px 4px rgb(0 0 0 / .06), 0 18px 44px rgb(0 0 0 / .13);
}

/* Het beeldvak is het anker voor poster, knop, duur en straks de video.
   De donkere ondergrond is wat je ziet terwijl de video zijn eerste frames
   ophaalt; zonder die kleur knippert er een wit vlak. */
.rlb-vcar-vak {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--merk-inkt, #1A1D21);
}
/* Safari 14 en oudere Firefox kennen aspect-ratio niet: dan houdt deze
   terugval het vlak op 16:9 in plaats van op nul. */
@supports not (aspect-ratio: 16 / 9) {
  .rlb-vcar-vak { height: 0; padding-bottom: 56.25%; }
}
.rlb-vcar-dek { position: absolute; inset: 0; display: block; }
.rlb-vcar-dek picture { display: block; width: 100%; height: 100%; }
.rlb-vcar-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.rlb-vcar-figuur:hover .rlb-vcar-poster,
.rlb-vcar-figuur:focus-within .rlb-vcar-poster { transform: scale(1.04); }

/* ---- de speelknop ---------------------------------------------------- */
/* De knop vult het hele beeldvak. Een knopje van 56 px midden op een kaart
   is op een telefoon een mikspel, het hele posterbeeld raken is dat niet.
   De ronde schijf erbinnen is wat je ziet, de trefzone is het vlak. */
.rlb-vcar-start {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  /* Een donkere waas onder de knop: op een lichte lucht verdween de rode
     schijf anders in het beeld. */
  background: linear-gradient(to top, rgb(0 0 0 / .42), rgb(0 0 0 / .06) 55%, rgb(0 0 0 / .14));
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--rlb-overgang);
}
.rlb-vcar-start:hover {
  background: linear-gradient(to top, rgb(0 0 0 / .5), rgb(0 0 0 / .14) 55%, rgb(0 0 0 / .22));
}
.rlb-vcar-start:focus-visible {
  outline: 3px solid var(--merk-accent, #E2000F);
  outline-offset: -3px;
}

.rlb-vcar-knop {
  width: var(--rlb-r8);            /* 72px */
  height: var(--rlb-r8);
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--merk-op_accent, #FFFFFF);
  background: var(--merk-accent, #E2000F);
  box-shadow: 0 var(--rlb-r1) var(--rlb-r4) rgb(0 0 0 / .35);
  transition: transform var(--rlb-overgang), background var(--rlb-overgang);
}
/* Het driehoekje staat optisch links van het midden als het er wiskundig
   precies in staat; twee pixel naar rechts maakt de schijf rustig. */
.rlb-vcar-knop svg { transform: translateX(2px); }
.rlb-vcar-start:hover .rlb-vcar-knop,
.rlb-vcar-start:focus-visible .rlb-vcar-knop {
  transform: scale(1.08);
  background: var(--merk-accent_donker, #B8000C);
}

.rlb-vcar-duur {
  position: absolute;
  inset-block-end: var(--rlb-r3);
  inset-inline-end: var(--rlb-r3);
  padding: var(--rlb-r1) var(--rlb-r2);
  border-radius: var(--merk-radius_knop, 4px);
  background: rgb(0 0 0 / .68);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  pointer-events: none;            /* de knop eronder moet de klik krijgen */
}

/* ---- de video, pas aanwezig na een klik ------------------------------ */
.rlb-vcar-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;             /* nooit bijsnijden tijdens het kijken */
  background: var(--merk-inkt, #1A1D21);
}

/* ---- zonder JavaScript ----------------------------------------------- */
.rlb-vcar-zonderjs {
  position: absolute;
  inset-block-end: var(--rlb-r3);
  inset-inline-start: var(--rlb-r3);
  z-index: 2;
  white-space: nowrap;
  padding: var(--rlb-r3) var(--rlb-r5);
  border-radius: var(--merk-radius_knop, 4px);
  background: var(--merk-accent, #E2000F);
  color: var(--merk-op_accent, #FFFFFF);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---- het bijschrift -------------------------------------------------- */
.rlb-vcar-bij {
  display: flex;
  flex-direction: column;
  gap: var(--rlb-r2);
  flex: 1 1 auto;
  padding: var(--rlb-r5);
  margin: 0;
}
.rlb-vcar-titel {
  font-family: var(--merk-font-kop, inherit);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--merk-inkt, #1A1D21);
}
/* Hoogstens twee regels bijschrift, daarna netjes afgekapt: kaarten naast
   elkaar met een verschillend aantal regels zetten de rij scheef, en gelijke
   hoogtes zijn een harde eis. */
.rlb-vcar-tekst {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--merk-tekst, #3D444D);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- op een donkere sectie ------------------------------------------- */
/* De kaart blijft een licht paneel, ook op een donkere band; de generieke
   donkerregels zouden de titel anders meekleuren tot onleesbaar. */
.rlb--vlak-diepblauw .rlb-vcar-figuur,
.rlb--vlak-inkt .rlb-vcar-figuur { border-color: rgba(255, 255, 255, .16); }
.rlb--vlak-diepblauw .rlb-vcar-titel,
.rlb--vlak-inkt .rlb-vcar-titel { color: var(--merk-inkt, #1A1D21); }
.rlb--vlak-diepblauw .rlb-vcar-tekst,
.rlb--vlak-inkt .rlb-vcar-tekst { color: var(--merk-tekst, #3D444D); }

/* ---- wie minder beweging wil, krijgt er geen ------------------------- */
/* Geldt ook voor het schuiven zelf: rl.js springt dan hard naar de volgende
   kaart in plaats van ernaartoe te glijden. */
@media (prefers-reduced-motion: reduce) {
  .rlb-vcar-spoor { scroll-behavior: auto; }
  .rlb-vcar-figuur,
  .rlb-vcar-poster,
  .rlb-vcar-start,
  .rlb-vcar-knop { transition: none; }
  .rlb-vcar-figuur:hover .rlb-vcar-poster,
  .rlb-vcar-figuur:focus-within .rlb-vcar-poster { transform: none; }
  .rlb-vcar-start:hover .rlb-vcar-knop,
  .rlb-vcar-start:focus-visible .rlb-vcar-knop { transform: none; }
}

/* ---- smal scherm ------------------------------------------------------ */
@media (max-width: 699px) {
  .rlb-vcar-kop { flex-direction: column; align-items: flex-start; }
  /* Pijlen hebben naast de veeg geen functie en kosten daar de breedte die
     de titel nodig heeft. */
  .rlb-vcar-nav { display: none; }
  .rlb-vcar-bij { padding: var(--rlb-r4); }
  .rlb-vcar-knop { width: var(--rlb-r7); height: var(--rlb-r7); }   /* 48px */
  /* Een regel bijschrift wordt op 412 px al snel drie regels. Twee regels
     kapten hem daar af met een beletselteken, en een afgekapt bijschrift is
     geen bijschrift meer. */
  .rlb-vcar-tekst { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ------------------------------------------------------------------------
   Carrousels tot aan de schermrand (Marijn, 11 nov): de projecten- en
   kenniskaarten werden hard afgeknipt op de rand van de inhoudskolom.
   Nu loopt het spoor door tot de viewportrand, zodat de volgende kaart
   zichtbaar "peekt" in plaats van afgesneden te lijken. De eerste kaart
   blijft uitlijnen met de rest van de pagina.
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
  .rlb-projecten--carrousel .rlb-projecten-spoor,
  .rlb-postcarrousel-spoor,
  .rlb-videocarrousel-spoor {
    /* de ruimte tussen de inhoudskolom en de schermrand teruggeven */
    --rlb-rand: max(0px, calc((100vw - var(--rlb-max, 1440px)) / 2));
    margin-right: calc(-1 * (var(--rlb-rand) + var(--rlb-r5, 1.5rem)));
    padding-right: calc(var(--rlb-rand) + var(--rlb-r5, 1.5rem));
    scroll-padding-left: 0;
  }
}
/* Niets mag de kaarten verticaal afknippen: schaduw en hover-lift moeten
   buiten het spoor kunnen vallen. */
.rlb-projecten--carrousel .rlb-projecten-spoor,
.rlb-postcarrousel-spoor,
.rlb-videocarrousel-spoor {
  overflow-x: auto;
  overflow-y: visible;
  padding-block: var(--rlb-r2);
  scrollbar-width: none;
}
.rlb-projecten--carrousel .rlb-projecten-spoor::-webkit-scrollbar,
.rlb-postcarrousel-spoor::-webkit-scrollbar,
.rlb-videocarrousel-spoor::-webkit-scrollbar { height: 0; width: 0; }
/* De sectie zelf mag niet klemmen, anders knipt die alsnog af. */
.rlb-projecten--carrousel, .rlb-postcarrousel, .rlb-videocarrousel { overflow: clip; }
.rlb-projecten--carrousel > .rlb-binnen,
.rlb-postcarrousel > .rlb-binnen,
.rlb-videocarrousel > .rlb-binnen { overflow: visible; }

/* Adres in de voet leesbaar: wit, net als telefoon en e-mail (Marijn, 11 nov). */
.rlb-footer-adres, .rlb-footer-gegevens .rlb-footer-adres { color: #fff; opacity: 1; }