/* 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;

  --rlb-ruimte-xs: .5rem;
  --rlb-ruimte-s: .875rem;
  --rlb-ruimte-m: 1.5rem;
  --rlb-ruimte-l: 2.5rem;
  --rlb-ruimte-xl: 4.5rem;
  --rlb-ruimte-xxl: 7rem;

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

  /* 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;
}

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

html {
  box-sizing: border-box;
  /* Een anker onder de plakkende kopbalk mag niet achter de balk landen. */
  scroll-padding-top: 108px;
}

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

body {
  margin: 0;
  background: var(--merk-grond, #000);
  color: var(--merk-tekst, #A3A3A3);
  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, #0096FF); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--merk-inkt, #fff); }

/* 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, #0096FF);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.rlb {
  position: relative;
  padding-block: var(--rlb-ruimte-xl);
}

.rlb-binnen {
  width: 100%;
  max-width: var(--rlb-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 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: var(--rlb-ruimte-m); }
.rlb--ruimte-normaal  { padding-block: var(--rlb-ruimte-xl); }
.rlb--ruimte-groot    { padding-block: var(--rlb-ruimte-xxl); }

.rlb--vlak-grond  { background: var(--merk-grond, #000); }
.rlb--vlak-vlak   { background: var(--merk-vlak, #111); }
.rlb--vlak-paneel { background: var(--merk-paneel, #1A1A1A); }
.rlb--vlak-accent { background: var(--merk-accent, #0096FF); color: var(--merk-op_accent, #000); }
.rlb--vlak-accent :where(h1, h2, h3, .rlb-titel) { color: var(--merk-op_accent, #000); }

.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, #111);
  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, #0096FF);
}

.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, #fff);
  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: 1.1rem; max-width: var(--rlb-tekst-max); }
.rlb-lijst li { margin-bottom: .35rem; }

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

.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: .5rem;
  padding: .8rem 1.4rem;
  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, #0066B3);
  color: var(--merk-op_accent, #fff);
}
.rlb-knop--primair:hover { background: var(--merk-inkt, #0A1420); color: #fff; }

.rlb-knop--secundair {
  background: transparent;
  color: var(--merk-inkt, #fff);
  border-color: var(--merk-lijn, #262626);
}
.rlb-knop--secundair:hover { border-color: var(--merk-accent, #0096FF); color: var(--merk-accent, #0096FF); }

.rlb-knop--ghost { background: transparent; color: var(--merk-gedempt, #8A8A8A); }
.rlb-knop--ghost:hover { color: var(--merk-inkt, #fff); }

.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, #000) 88%, transparent);
  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, #fff);
  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: .5rem 0;
  color: var(--merk-inkt, #fff);
  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, #0096FF);
  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: .4rem;
  color: var(--merk-inkt, #fff);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-tel:hover { color: var(--merk-accent, #0096FF); }

/* 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: .5rem;
  min-height: 44px;
  padding: .5rem .75rem;
  color: var(--merk-inkt, #fff);
  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(1rem, 4vw, 2.5rem) var(--rlb-ruimte-l);
  background: var(--merk-vlak, #111);
  border-bottom: var(--rlb-rand);
  max-height: 75vh;
  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: .9rem 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: .4rem;
  margin: 0; padding: 0;
  list-style: none;
  font-size: 1rem;
  color: var(--merk-gedempt, #8A8A8A);
}
.rlb-kruimels li + li::before { content: "/"; margin-right: .4rem; color: var(--merk-lijn, #262626); }
.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; 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(1rem, 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, #fff);
}

.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, #0096FF) 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, #1A1A1A) 28%, var(--merk-vlak, #111) 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, #8A8A8A); }

/* ========================================================================
   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: .55rem;
  padding: .85rem 1.35rem;
  background: var(--merk-accent_donker, #0066B3);
  color: var(--merk-op_accent, #fff);
  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, #0A1420); color: #fff; }

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

.rlb-speler-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }

.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: .7rem;
  border-radius: var(--merk-radius_veld, 10px);
  border: 1px solid transparent;
  min-width: 0;
}
.rlb-speler-track:hover { background: var(--merk-vlak, #111); border-color: var(--merk-lijn, #262626); }
.rlb-speler-track[aria-current="true"] {
  background: var(--merk-vlak, #111);
  border-color: var(--merk-accent, #0096FF);
}

.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, #fff); font-weight: 600; overflow-wrap: anywhere; }
.rlb-speler-artiest { font-size: 1rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-speler-duur { flex: none; font-variant-numeric: tabular-nums; color: var(--merk-gedempt, #8A8A8A); }

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

.rlb-speler-koop {
  flex: none;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .5rem .9rem;
  border-radius: var(--merk-radius_knop, 8px);
  background: var(--merk-accent_donker, #0066B3);
  color: var(--merk-op_accent, #fff);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-speler-koop:hover { background: var(--merk-inkt, #0A1420); 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(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--merk-vlak, #111) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 2px solid var(--merk-accent, #0096FF);
  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: .75rem; 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, #fff); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rlb-balk-artiest {
  font-size: 1rem; color: var(--merk-gedempt, #8A8A8A);
  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, #0096FF);
  color: var(--merk-op_accent, #000);
  cursor: pointer;
}
.rlb-balk-knop--klein {
  width: 40px; height: 40px;
  background: transparent; color: var(--merk-inkt, #fff);
  border: 2px solid var(--merk-lijn, #262626);
}

/* 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: .6rem; }
.rlb-balk-tijd {
  flex: none; font-variant-numeric: tabular-nums; font-size: .9375rem;
  color: var(--merk-gedempt, #8A8A8A);
}
.rlb-balk-schuif {
  flex: 1 1 auto; min-width: 0;
  height: 6px;
  appearance: none;
  background: var(--merk-lijn, #262626);
  border-radius: 999px;
  cursor: pointer;
}
.rlb-balk-schuif::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--merk-accent, #0096FF);
  border: 2px solid var(--merk-vlak, #111);
}
.rlb-balk-schuif::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--merk-accent, #0096FF);
  border: 2px solid var(--merk-vlak, #111);
}

.rlb-balk-acties { display: flex; align-items: center; gap: .5rem; 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: .45rem;
  min-height: 44px;
  padding: .55rem 1.1rem;
  border-radius: var(--merk-radius_knop, 999px);
  background: var(--merk-accent_donker, #0066B3);
  color: var(--merk-op_accent, #fff);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-balk-koop:hover { background: var(--merk-inkt, #0A1420); 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, #8A8A8A);
  font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}
.rlb-balk-sluit:hover { color: var(--merk-inkt, #fff); }

/* ========================================================================
   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, #000000);
  color: #fff;
}
.rlb-streaming :where(h1, h2, h3, .rlb-titel) { color: #fff; }
.rlb-streaming .rlb-intro { color: #C7D6E4; }
.rlb-streaming .rlb-kicker { color: var(--merk-accent, #0096FF); }

/* 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: .75rem;
  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: .75rem; }

.rlb-stream-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  height: 100%;
  min-height: 92px;
  padding: 1rem .75rem;
  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, #0096FF);
  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: #8FA7BC;
}

/* ========================================================================
   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: .5rem; }

.rlb-live-badge {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--merk-cerise, #D6246A);
  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 .5rem;
  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, #111);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  position: sticky;
  top: 92px;
}
.rlb-kalender-kop { display: flex; align-items: center; gap: .5rem; margin-bottom: var(--rlb-ruimte-s); }
.rlb-kalender-titel { flex: 1 1 auto; margin: 0; text-align: center; color: var(--merk-inkt, #fff); font-weight: 700; }
.rlb-kalender-nav {
  width: 40px; height: 40px;
  border: var(--rlb-rand); border-radius: 50%;
  background: transparent; color: var(--merk-inkt, #fff);
  font-size: 1.25rem; cursor: pointer;
}
.rlb-kalender-nav:hover { border-color: var(--merk-accent, #0096FF); }

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

/* 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, #0E7A4A); }
.rlb-stip--deels { background: var(--merk-status_deels, #9A6400); border-radius: 2px; }
.rlb-stip--bezet { background: var(--merk-status_bezet, #54657A); 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: .4rem; }
.rlb-kalender-noot { margin: var(--rlb-ruimte-s) 0 0; font-size: .9375rem; color: var(--merk-gedempt, #8A8A8A); }

.rlb-boeker-vak {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #111);
  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, #fff);
}

.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: .4rem; 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, #fff);
}
.rlb-vereist { color: var(--merk-cerise, #D6246A); }

.rlb-invoer {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--merk-grond, #000);
  color: var(--merk-inkt, #fff);
  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, #0096FF); }
.rlb-invoer::placeholder { color: var(--merk-gedempt, #8A8A8A); }
textarea.rlb-invoer { min-height: 110px; resize: vertical; }

.rlb-veld--vink > label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; }
.rlb-veld--vink input { margin-top: .25rem; 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: .5rem;
}
.rlb-genre {
  display: flex; align-items: center; gap: .5rem;
  min-height: 48px;
  padding: .6rem .8rem;
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_veld, 10px);
  background: var(--merk-grond, #000);
  color: var(--merk-inkt, #fff);
  cursor: pointer;
}
.rlb-genre:hover { border-color: var(--merk-accent, #0096FF); }
.rlb-genre input { width: 18px; height: 18px; flex: none; accent-color: var(--merk-accent, #0096FF); }
.rlb-genre:has(input:checked) {
  border-color: var(--merk-accent, #0096FF);
  background: color-mix(in srgb, var(--merk-accent, #0096FF) 14%, var(--merk-grond, #000));
}

.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, #8A8A8A); }
.rlb-samenvatting dd { margin: 0; color: var(--merk-inkt, #fff); }

.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, #8A8A8A); }

/* 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, #111);
  border: var(--rlb-rand);
  border-left: 4px solid var(--merk-accent, #0096FF);
  border-radius: var(--merk-radius_veld, 10px);
  min-width: 0;
}
.rlb-gig--verleden { border-left-color: var(--merk-lijn, #262626); 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, #000);
  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, #fff);
  font-variant-numeric: tabular-nums;
}
.rlb-gig-maand { font-size: .8125rem; text-transform: uppercase; color: var(--merk-accent, #0096FF); }

.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 .2rem; font-size: 1.125rem; color: var(--merk-inkt, #fff); }
.rlb-gig-waar, .rlb-gig-tijd, .rlb-gig-genre {
  display: flex; align-items: center; gap: .35rem;
  margin: 0; font-size: 1rem;
}
.rlb-gig-genre { color: var(--merk-accent, #0096FF); }
.rlb-gig-knop { flex: none; }

.rlb-agenda-leeg {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #111);
  border: 1px dashed var(--merk-lijn, #262626);
  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: .5rem; }
.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, #fff); }
.rlb-release-meta { margin: 0; font-size: 1rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-release-acties { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.rlb-release-acties .rlb-knop { padding: .5rem .9rem; font-size: .9375rem; }

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

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

.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: .4rem;
  height: 100%;
  padding: .75rem;
  background: var(--merk-vlak, #111);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  color: var(--merk-inkt, #fff);
  text-decoration: none;
  transition: border-color var(--rlb-overgang), transform var(--rlb-overgang);
}
a.rlb-product-link:hover { border-color: var(--merk-accent, #0096FF); 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, #8A8A8A); }
.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, #0066B3);
}
.rlb-product--uit .rlb-product-link { opacity: .6; }
.rlb-product-uit { font-size: .875rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-winkel-laden { color: var(--merk-gedempt, #8A8A8A); }

/* ========================================================================
   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 1rem;
  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, #8A8A8A);
}
.rlb-prijstabel tbody th { color: var(--merk-inkt, #fff); font-weight: 600; }
.rlb-prijs-toelichting { display: block; font-weight: 400; font-size: 1rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-prijs-bedrag {
  font-family: var(--merk-font-kop, inherit);
  font-weight: 700; font-size: 1.125rem;
  color: var(--merk-inkt, #fff);
  white-space: nowrap;
}
.rlb-prijs-eenheid { font-weight: 400; font-size: 1rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-prijs-rij--uit { background: color-mix(in srgb, var(--merk-accent, #0096FF) 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); }
.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, #111);
  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: .2rem .6rem; align-items: center; }
.rlb-feit .rlb-icoon { grid-row: span 2; color: var(--merk-accent, #0096FF); }
.rlb-feit dt { font-size: .9375rem; color: var(--merk-gedempt, #8A8A8A); }
.rlb-feit dd { margin: 0; color: var(--merk-inkt, #fff); 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: .2rem;
  text-align: center; min-width: 0;
}
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-accent, #0096FF); margin-bottom: .2rem; }
.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, #fff);
}
.rlb-feitbalk-label { font-size: .9375rem; color: var(--merk-gedempt, #8A8A8A); }

/* ========================================================================
   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 1rem;
  align-content: start;
  width: 100%;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-grond, #fff);
  border: var(--rlb-rand);
  border-top: 3px solid var(--merk-accent, #0096FF);
  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: 11px;
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F4F6F9);
  color: var(--merk-accent_donker, #0066B3);
}
.rlb-usp-titel {
  margin: 0;
  align-self: center;
  font-size: 1.125rem;
  color: var(--merk-inkt, #0A1420);
}
.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, #54657A); padding-top: .35rem; }

/* 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(1rem, 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, #0066B3);
  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: .6rem;
  min-width: 0;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #111);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
}
.rlb-sterren { display: inline-flex; gap: 2px; }
.rlb-ster { color: var(--merk-lijn, #262626); line-height: 0; }
.rlb-ster--aan { color: var(--merk-status_deels, #9A6400); }
.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, #8A8A8A); }
.rlb-review-naam { color: var(--merk-inkt, #fff); 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: .6rem;
  padding: 1.1rem 0;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 600; font-size: 1.0625rem;
  color: var(--merk-inkt, #fff);
  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, #0096FF);
}
.rlb-faq-item[open] > .rlb-faq-vraag::before { content: "\2212"; }
.rlb-faq-antwoord { padding: 0 0 1.1rem 24px; }

/* ========================================================================
   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: .6rem;
  border-radius: 50%;
  background: var(--merk-accent, #0096FF);
  color: var(--merk-op_accent, #000);
  font-family: var(--merk-font-kop, inherit);
  font-weight: 900; font-size: 1.125rem;
}
.rlb-stap-titel { margin: 0 0 .3rem; font-size: 1.125rem; color: var(--merk-inkt, #fff); }
.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, #000000);
  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, #0096FF) 42%, transparent) 0%, transparent 62%),
    radial-gradient(40% 90% at 4% 96%, color-mix(in srgb, var(--merk-accent, #0096FF) 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: #C7D6E4; }
.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: .6rem;
  margin: 0;
  justify-items: stretch;
}
.rlb-cta .rlb-knop { justify-content: center; }
.rlb-cta .rlb-knop--primair {
  background: #fff;
  color: var(--merk-diepblauw, #000000);
  padding: 1.05rem 1.4rem;
  font-size: 1.0625rem;
}
.rlb-cta .rlb-knop--primair:hover { background: var(--merk-accent, #0096FF); color: #fff; }
.rlb-cta .rlb-knop--secundair {
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.rlb-cta .rlb-knop--secundair:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.rlb-cta .rlb-knop--ghost { color: #AFC3D6; }
.rlb-cta .rlb-knop--ghost:hover { 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: .4rem;
  height: 100%;
  padding: var(--rlb-ruimte-m);
  background: var(--merk-vlak, #111);
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_kaart, 14px);
  text-decoration: none;
}
.rlb-ger-link:hover { border-color: var(--merk-accent, #0096FF); }
.rlb-ger-beeld { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--merk-radius_beeld, 10px); }
/* Titel en tekst zijn spans in een <a>; zonder display:block plakken ze
   aan elkaar ("Michael BollePassie voor koken…"). */
.rlb-ger-titel { display: block; font-weight: 700; color: var(--merk-inkt, #fff); }
.rlb-ger-tekst { display: block; margin-top: .35rem; font-size: 1rem; color: var(--merk-tekst, #A3A3A3); }

/* ========================================================================
   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: .5rem; margin: 0; padding: 0; list-style: none; }
.rlb-contact-rij > *,
.rlb-contact-rij {
  display: flex; align-items: center; gap: .75rem;
}
.rlb-contact-rij > a,
.rlb-contact-rij {
  padding: .8rem;
  border-radius: var(--merk-radius_veld, 10px);
  color: var(--merk-inkt, #fff);
  text-decoration: none;
  min-height: 56px;
}
.rlb-contact-rij > a:hover { background: var(--merk-vlak, #111); }
.rlb-contact-rij .rlb-icoon { color: var(--merk-accent, #0096FF); flex: none; }
.rlb-contact-rij span { display: flex; flex-direction: column; min-width: 0; }
.rlb-contact-waarde { color: var(--merk-tekst, #A3A3A3); font-size: 1rem; overflow-wrap: anywhere; }
.rlb-contact-belofte {
  display: flex; align-items: center; gap: .4rem;
  margin: var(--rlb-ruimte-s) 0 0;
  font-size: .9375rem; color: var(--merk-gedempt, #8A8A8A);
}
.rlb-contact-sociaal {
  display: flex; flex-wrap: wrap; gap: .4rem;
  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, #fff);
}
.rlb-contact-sociaal a:hover { border-color: var(--merk-accent, #0096FF); color: var(--merk-accent, #0096FF); }

.rlb-contact-vak {
  padding: var(--rlb-ruimte-l);
  background: var(--merk-vlak, #111);
  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, #fff); }
.rlb-share-lijst { display: flex; gap: .4rem; 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, #fff);
}
.rlb-share-knop:hover { border-color: var(--merk-accent, #0096FF); color: var(--merk-accent, #0096FF); }

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

.rlb-footer {
  padding-block: var(--rlb-ruimte-xl) var(--rlb-ruimte-m);
  background: var(--merk-vlak, #111);
  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, #fff);
  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, #8A8A8A);
}
.rlb-footer-kolom ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.rlb-footer-kolom a { color: var(--merk-inkt, #fff); text-decoration: none; }
.rlb-footer-kolom a:hover { color: var(--merk-accent, #0096FF); text-decoration: underline; }

.rlb-footer-sociaal {
  display: flex; flex-wrap: wrap; gap: .4rem;
  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, #fff);
}
.rlb-footer-sociaal a:hover { border-color: var(--merk-accent, #0096FF); color: var(--merk-accent, #0096FF); }

.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, #8A8A8A); }
.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, #8A8A8A); text-decoration: none; }
.rlb-footer-juridisch a:hover { color: var(--merk-inkt, #fff); 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, #111) 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: .5rem;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, .45);
  color: var(--merk-inkt, #fff);
  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, #0096FF); }

/* ========================================================================
   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) {
  :root { --rlb-ruimte-xl: 3rem; --rlb-ruimte-xxl: 4rem; }
  .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(1rem, 4vw, 2.5rem);
    background: color-mix(in srgb, var(--merk-vlak, #111) 94%, transparent);
    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: .4rem; }
  .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: 1rem; }
}

/* ========================================================================
   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: .4rem; 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, #fff);
  color: var(--merk-inkt, #0A1420);
  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, #0096FF);
  background: var(--merk-vlak, #F4F6F9);
}
/* 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, #000000); color: #fff; }
.rlb-webcast-sectie :where(h1, h2, h3, .rlb-titel, .rlb-tussenkop) { color: #fff; }
.rlb-webcast-sectie .rlb-intro { color: #C7D6E4; }
.rlb-webcast-sectie .rlb-kicker { color: var(--merk-accent, #0096FF); }
.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, #0096FF);
}

.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: .6rem;
  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: 16px;
  border-radius: 50%;
  background: var(--merk-accent, #0096FF);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 150, 255, .5);
  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: .75rem;
  margin: 0; padding: 0 0 .75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.rlb-vod { min-width: 0; scroll-snap-align: start; }

.rlb-vod-knop {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  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: 9px;
  border-radius: 50%;
  background: var(--merk-accent, #0096FF);
  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, #0096FF);
  box-shadow: 0 0 0 2px var(--merk-accent, #0096FF);
}

.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: #8FA7BC; 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: .75rem;
  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, #F4F6F9);
}
.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, #EAEFF5) 26%, var(--merk-vlak, #F4F6F9) 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: .4rem;
  padding: .7rem;
  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, #000000);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--rlb-overgang), transform var(--rlb-overgang);
}
.rlb-disco-actie:hover { background: var(--merk-accent, #0096FF); color: #fff; transform: scale(1.08); }
.rlb-disco-actie--speel { background: var(--merk-accent_donker, #0066B3); color: #fff; }
.rlb-disco-actie--speel:hover { background: #fff; color: var(--merk-accent_donker, #0066B3); }

.rlb-disco-soort {
  position: absolute;
  top: .6rem; left: .6rem;
  padding: .2rem .5rem;
  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: .2rem; padding-top: .7rem; }
.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, #0066B3); }

/* "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: .45rem;
  margin: 0;
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #54657A);
}
.rlb-disco-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 1px; height: .8em;
  margin-right: .45rem;
  vertical-align: -.1em;
  background: var(--merk-lijn, #DCE3EA);
}
.rlb-disco-over { margin: .25rem 0 0; font-size: 1rem; }
.rlb-disco-plays {
  display: flex; align-items: center; gap: .35rem;
  margin: .15rem 0 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #54657A);
  font-variant-numeric: tabular-nums;
}

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

.rlb-albums { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }

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

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

.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, #54657A); }

.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, #F4F6F9);
  color: var(--merk-inkt, #0A1420);
  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: .5rem .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: .35rem .6rem; 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, #000000);
}
.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: #DCE6EF; }
.rlb-hero--achtergrond .rlb-kicker { color: var(--merk-accent, #0096FF); }
.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(.5rem, 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: .5rem;
  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 rgba(0, 150, 255, .55));
}

/* 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, #0096FF) 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: radial-gradient(circle, #222 26%, #0b0b0b 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: .5rem; }
  .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, #D6246A);
  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, #B01B52);
  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, #D6246A) 0%, transparent); }
}

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

.rlb-knop {
  position: relative;
  padding: .85rem 1.5rem;
  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; }

/* De gouden knop van de staging: gradient goud → donker goud, met de zachte
   goudschaduw eronder; bij aanwijzen effen #9D7939 (het gradient-eindpunt
   iets opgelicht), zodat de knop donkerder "indrukt" zonder van kleur-
   familie te wisselen. */
.rlb-knop--primair {
  background: linear-gradient(135deg, #B7924A, #8F6B32);
  color: #fff;
  box-shadow: 0 12px 35px rgba(143, 107, 50, .22);
}
.rlb-knop--primair:hover {
  background: #9D7939;
  color: #fff;
  box-shadow: 0 16px 36px rgba(183, 146, 74, .22);
}

/* 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, #D6246A);
  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: .7rem;
  border-radius: 2px;
  background: var(--merk-accent, #0096FF);
  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: 100px; }    lucht onder rij 1
     .elementor-element-058038c { margin-top: 100px; }       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: .6rem;
  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 rgba(0, 150, 255, .5));
}

/* 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: .35rem; }
  .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, #DCE3EA); }
.rlb-golf-voor rect { fill: var(--merk-accent, #0096FF); }

/* 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, #0066B3);
}

/* 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, #54657A); }

/* 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, #D6246A);
  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, #DCE3EA) 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: .4rem;
  min-height: 44px;
  padding: .5rem .9rem;
  border: var(--rlb-rand);
  border-radius: var(--merk-radius_knop, 8px);
  color: var(--merk-accent_donker, #0066B3);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.rlb-speler-alleen-stream:hover {
  border-color: var(--merk-accent, #0096FF);
  background: var(--merk-vlak, #F4F6F9);
}

@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. */
  backdrop-filter: none;
}

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

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

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

/* De hoofdactie in de balk is cerise, net als de zwevende knop: zo is op
   elke pagina dezelfde kleur de weg naar een boeking. */
.rlb-header .rlb-knop--primair {
  background: var(--merk-cerise, #D6246A);
  color: #fff;
  box-shadow: none;
}
.rlb-header .rlb-knop--primair:hover {
  background: #fff;
  color: #000;
}

.rlb-mobiel > summary { color: #fff; }
.rlb-mobiel-nav { background: #0A0A0A; border-bottom-color: rgba(255, 255, 255, .1); }
.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, #0096FF) 0%,
    var(--merk-cerise, #D6246A) 50%,
    var(--merk-accent, #0096FF) 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: .6rem;
}
.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, #DCE3EA);
}

/* --- 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: #9FB3C6; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }
.rlb-feitbalk-item .rlb-icoon { color: var(--merk-accent, #0096FF); }
/* 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;
  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, #0096FF);
  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, #D6246A); color: #fff; }
.rlb-balk-vak--kar:hover { background: #fff; color: var(--merk-cerise, #D6246A); }

.rlb-balk-vak--uit { color: #7A8A99; }
.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 1rem;
  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: #8FA2B4;
  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, #0096FF) 14%, transparent) 55%,
      color-mix(in srgb, var(--merk-cerise, #D6246A) 16%, transparent) 100%);
}
.rlb-balk-golf:focus-visible { outline: 2px solid var(--merk-accent, #0096FF); 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, #0096FF); }
.rlb-speler-balk[data-speelt="1"] .rlb-balk-golf-voor rect { fill: #35AEFF; }
.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 .9rem;
  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: #8FA2B4; }

/* --- 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: #8FA2B4;
}
.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;
  overflow-y: auto;
  background: #0A0A0A;
  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: 1rem;
  width: 100%;
  padding: .7rem 1.1rem;
  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: rgba(0, 150, 255, .14);
  box-shadow: inset 3px 0 0 var(--merk-accent, #0096FF);
}
.rlb-wachtrij-nr { color: #6F8396; 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: #8FA2B4; font-size: .8125rem; }
.rlb-wachtrij-duur { color: #6F8396; 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 .7rem; }
  .rlb-balk-tijden { padding: 0 .6rem; }
  .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, #0096FF); }
.rlb-footer-kolom a { color: #D4DDE6; }
.rlb-footer-kolom a:hover { color: #fff; }
.rlb-footer-intro { color: #9FB3C6; }
.rlb-footer-onder { border-top-color: rgba(255, 255, 255, .12); }
.rlb-footer-copy,
.rlb-footer-juridisch a { color: #7E93A6; }
.rlb-footer-sociaal a { border-color: rgba(255, 255, 255, .18); color: #fff; }
.rlb-footer-sociaal a:hover { border-color: var(--merk-accent, #0096FF); color: var(--merk-accent, #0096FF); }

/* --- 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, #E4E9EE);
  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: .2rem;
    font-size: 1.125rem;
    letter-spacing: .2em;
    color: var(--merk-accent, #0096FF);
  }
  .rlb-cta-sectie .rlb-kop::before,
  .rlb-webcast-sectie .rlb-kop::before,
  .rlb-streaming .rlb-kop::before { color: var(--merk-accent, #0096FF); }
}

/* --- 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, #E4E9EE);
  background: var(--merk-grond, #fff);
  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, #0096FF);
  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, #0096FF); }
.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, #0096FF);
  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: 2.5rem;
  padding: .9rem 1.25rem;
  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: #C3D2DF; }
.rlb-hero--metvinyl .rlb-kicker { color: var(--merk-accent, #0096FF); }

/* 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, #0096FF) 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, #0096FF);
}

/* --- 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: .85rem 1.25rem;
  background: var(--merk-cerise, #D6246A);
  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 .75rem;
  flex: none;
  max-width: 34%;
}
.rlb-speler-meta-item {
  display: inline-flex;
  align-items: center;
  padding: .2rem .5rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #54657A);
  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, #0096FF);
  color: var(--merk-accent_donker, #0066B3);
}

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

/* --- 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: .6rem;
  margin-top: var(--rlb-ruimte-s);
}
.rlb-cta .rlb-knop { justify-content: center; }
.rlb-cta .rlb-knop--primair { padding: 1rem 2rem; }

@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.
   ======================================================================== */

:root {
  /* de ruimteschaal */
  --rlb-r1: .25rem;    /*  4px */
  --rlb-r2: .5rem;     /*  8px */
  --rlb-r3: .75rem;    /* 12px */
  --rlb-r4: 1rem;      /* 16px */
  --rlb-r5: 1.5rem;    /* 24px */
  --rlb-r6: 2rem;      /* 32px */
  --rlb-r7: 3rem;      /* 48px */
  --rlb-r8: 4.5rem;    /* 72px */
  --rlb-r9: 7rem;      /* 112px */

  /* de oude namen wijzen naar de nieuwe schaal, zodat alles wat er al stond
     meeverandert in plaats van los te raken */
  --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);
}

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

/* Een sectie ademt boven en onder evenveel, en schaalt mee met het scherm.
   Op een telefoon is 112px lucht verspilling; op 1920 is 48px te krap. */
/* De bovenkant leest de variabele van hierboven; staat die er niet, dan
   is boven gelijk aan onder. */
.rlb {
  padding-block: var(--rlb-sectie-top, clamp(var(--rlb-r7), 6vw, var(--rlb-r9)))
                 var(--rlb-sectie-bot, clamp(var(--rlb-r7), 6vw, var(--rlb-r9)));
}
.rlb--ruimte-geen    { padding-block: 0; }
.rlb--ruimte-klein   { padding-block: clamp(var(--rlb-r5), 3vw, var(--rlb-r7)); }
.rlb--ruimte-normaal { padding-block: clamp(var(--rlb-r7), 6vw, var(--rlb-r9)); }
.rlb--ruimte-groot   { padding-block: clamp(var(--rlb-r8), 9vw, 9rem); }

/* De kop van een sectie heeft altijd dezelfde afstand tot wat eronder komt. */
.rlb-kop { margin-bottom: clamp(var(--rlb-r6), 3.5vw, var(--rlb-r7)); }
.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. */
h1, .rlb-hero-titel {
  font-size: clamp(2.25rem, 5.6vw, 4rem);
}
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. */
.rlb p, .rlb-lijst li, .rlb-titel, h1, h2, h3 { overflow-wrap: break-word; }

/* --- 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, #0066B3); }

/* --- 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, #E4E9EE);
}

.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, #E4E9EE);
  border-radius: 0;
  transition: background 200ms ease, padding 200ms ease;
}
.rlb-gig:hover {
  background: var(--merk-vlak, #F7F8FA);
  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, #0096FF);
  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, #0A1420);
  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, #0066B3);
}

/* 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: .2rem; }
.rlb-gig-naam {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--merk-inkt, #0A1420);
}
/* 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: .3rem;
  margin: 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #54657A);
}
.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: .9rem;
  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: .6rem;
  border-radius: 50%;
  background: var(--merk-lijn, #E4E9EE);
}
.rlb-gig-genre { color: var(--merk-accent_donker, #0066B3); font-weight: 600; }
.rlb-gig .rlb-icoon { color: var(--merk-gedempt, #54657A); }

.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, #E4E9EE); }
.rlb-gig--verleden .rlb-gig-dag { color: var(--merk-gedempt, #54657A); }
.rlb-gig--verleden .rlb-gig-maand { color: var(--merk-gedempt, #54657A); }
.rlb-gig--verleden .rlb-gig-naam { color: var(--merk-tekst, #4A5A6A); 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, #0096FF) 0%,
    #0A3B66 48%,
    var(--merk-cerise, #D6246A) 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: #DCE6EF; 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);
  backdrop-filter: blur(3px);
  text-align: center;
}
.rlb-uit-label {
  display: inline-block;
  margin-bottom: var(--rlb-r4);
  padding: .3rem .7rem;
  background: var(--merk-cerise, #D6246A);
  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: #B9C9D8;
}
.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, #D6246A);
}

@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(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(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: .55rem;
  min-height: 46px;
  padding: .7rem 1.4rem;
  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 --------------------------------------------------- */

.rlb-knop--primair {
  background: var(--merk-accent_donker, #0066B3);
  color: var(--merk-op_accent, #fff);
  box-shadow: none;
}
.rlb-knop--primair:hover { background: var(--merk-inkt, #0A1420); color: #fff; box-shadow: none; }

.rlb-knop--secundair {
  background: transparent;
  color: var(--merk-inkt, #0A1420);
  border-color: var(--merk-lijn, #E4E9EE);
}
.rlb-knop--secundair:hover {
  border-color: var(--merk-accent, #0096FF);
  background: var(--merk-vlak, #F7F8FA);
  color: var(--merk-accent_donker, #0066B3);
}

.rlb-knop--ghost { background: transparent; color: var(--merk-gedempt, #54657A); padding-inline: .9rem; }
.rlb-knop--ghost:hover { color: var(--merk-inkt, #0A1420); background: var(--merk-vlak, #F7F8FA); }

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

.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair,
.rlb-hero--metvinyl .rlb-knop--primair {
  background: #fff;
  color: var(--merk-inkt, #0A1420);
}
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover,
.rlb-hero--metvinyl .rlb-knop--primair:hover {
  background: var(--merk-accent, #0096FF);
  color: #fff;
}
.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 zijn cerise en houden hun
   eigen gedrag; ze horen bij elkaar en niet bij de rest. */
.rlb-header .rlb-knop--primair { background: var(--merk-cerise, #D6246A); color: #fff; }
.rlb-header .rlb-knop--primair:hover { background: #fff; color: #000; }

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

.rlb-cta .rlb-knop { min-height: 50px; }
.rlb-cta .rlb-knop--primair { padding-inline: 1.9rem; 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: .5rem 1rem; 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; }

/* GEEN tussenstapjes meer (12 nov 2026, Totaal Catering): de kolom is op elk
   scherm 1440px. De oude trap (1200px onder 1600, 1040px onder 1280) maakte
   de inhoud op een gewoon laptopscherm onnodig smal; onder de 1440px doet
   width:100% + de clamp-padding van .rlb-binnen het werk vanzelf. Vlakken en
   achtergronden staan op het sectie-element en blijven volle breedte; de
   peek-carrousels breken bewust buiten de kolom uit (calc(50% - 50vw)). */

/* --- 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: #0A0A0A; }
}
.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: #EAF4FF; }
  .rlb-prijs-rij--uit { background: #EAF4FF; }
}

/* :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, #0096FF); 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(1rem, 4vw, 2.5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1rem, 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; }

/* ========================================================================
   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.
   ======================================================================== */

.rlb-header-rij {
  display: grid;
  grid-template-columns: auto 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: .65rem 0;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #E8EEF4;
}
.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: #E8EEF4;
}
.rlb-tel .rlb-icoon { color: var(--merk-accent, #0096FF); }
.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: 1.5rem;
  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. */
@media (max-width: 1599px) {
  .rlb-header .rlb-tel { display: none; }
  .rlb-nav { min-width: 0; }                 /* krimpen i.p.v. overlappen */
  .rlb-nav ul { gap: var(--rlb-r3); flex-wrap: nowrap; }
  .rlb-navlink { font-size: .8125rem; white-space: nowrap; }
}

@media (max-width: 1023px) {
  .rlb-header-rij { grid-template-columns: auto 1fr; min-height: 76px; }
  .rlb-logo { height: 54px; }
  .rlb-mobiel { justify-self: end; }
}

@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: 1.5rem;
}
/* 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: .6rem; }

@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, #06243D);
  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: 1.05rem;
}
/* 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, #0096FF);
  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, #E4E9EE);
  padding-block: clamp(var(--rlb-r5), 3vw, var(--rlb-r7));
}
.rlb-feitbalk-waarde { color: var(--merk-inkt, #0A1420); }
.rlb-feitbalk-label { color: var(--merk-gedempt, #54657A); }
.rlb-feitbalk-item + .rlb-feitbalk-item { border-left-color: var(--merk-lijn, #E4E9EE); }

/* ========================================================================
   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, #E4E9EE);
}

/* --- 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, #0096FF);
}
.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, #54657A);
  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: .35rem;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--merk-gedempt, #54657A);
  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: .22rem .6rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-accent_donker, #0066B3);
  white-space: nowrap;
}

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

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

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

@media (max-width: 900px) {
  .rlb-gig {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    row-gap: .3rem;
  }
  .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: .3rem; }
}

/* ========================================================================
   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: 116px; }
@media (max-width: 1023px) { html { scroll-padding-top: 92px; } }

/* --- 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, #0096FF);
}

@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: #C3CCD6; }
.rlb-golf-voor rect { fill: var(--merk-accent_donker, #0066B3); }
.rlb-golf:hover .rlb-golf-achter rect { fill: #9BA9B8; }
.rlb-speler-track[aria-current="true"] .rlb-golf-voor rect { fill: var(--merk-accent, #0096FF); }

/* 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, #E4E9EE);
  border-radius: 0;
}
.rlb-speler-lijst { border-top: 1px solid var(--merk-lijn, #E4E9EE); }
.rlb-speler-track:hover { background: var(--merk-vlak, #F7F8FA); border-color: var(--merk-lijn, #E4E9EE); }
.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, #0096FF); }

/* 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, #0A1420);
  border: 2px solid var(--merk-lijn, #E4E9EE);
  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, #E4E9EE); color: var(--merk-gedempt, #54657A); }
.rlb-speler-meta--bpm,
.rlb-speler-meta--toonaard {
  border-color: #BFD9EE;
  background: #F2F8FD;
  color: var(--merk-accent_donker, #0066B3);
}

/* 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, #F7F8FA); color: var(--merk-inkt, #0A1420); }
.rlb-usp > * { border-top-color: var(--merk-lijn, #E4E9EE); }
.rlb-usp > *:hover,
a.rlb-usp-link:hover { border-top-color: var(--merk-accent, #0096FF); }

/* 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, #54657A); 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, #54657A); border-color: var(--merk-lijn, #E4E9EE); }
.rlb-gig:not(.rlb-gig--verleden) .rlb-gig-genre > span {
  color: var(--merk-accent_donker, #0066B3);
  border-color: #BFD9EE;
}

/* ========================================================================
   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: #C7D6E4; }
.rlb-hero--achter .rlb-kicker { color: var(--merk-accent, #0096FF); }

/* 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. */
.rlb-hero--achter .rlb-hero-sluier {
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(8, 20, 40, calc(var(--rlb-sluier, .55) + .34)) 0%,
    rgba(8, 20, 40, calc(var(--rlb-sluier, .55) + .18)) 32%,
    rgba(8, 20, 40, 0) 66%);
}
/* 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: #8FA2B4; }
.rlb-kruimels a { color: #C7D6E4; }
.rlb-kruimels a:hover { color: #fff; }
.rlb-kruimels li + li::before { color: #4A5A6A; }
.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, #E4E9EE);
  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, #54657A);
  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, #0A1420); }
.rlb-header[data-rl-gescrold="1"] .rlb-navlink::after { background: var(--merk-accent, #0096FF); }
.rlb-header[data-rl-gescrold="1"] .rlb-tel .rlb-icoon { color: var(--merk-accent_donker, #0066B3); }
.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: 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(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(100dvh - var(--rlb-kopbalk-h) - var(--rlb-r5));
}
body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
  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(100dvh - var(--rlb-kopbalk-h) - var(--rlb-r4));
  }
  body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
    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: #9FB3C6; }

/* 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, #0096FF) 0 11%,
      #0b0b0b 11.5% 13%,
      transparent 13.5%),
    repeating-radial-gradient(circle at center, #1a1a1a 0 2px, #0d0d0d 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: #141414;
  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, #0096FF);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 150, 255, .45);
  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 .4rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--merk-accent, #0096FF);
}
.rlb-vitrine-titel {
  margin: 0 0 .25rem;
  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: #9FB3C6;
}

/* 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: #6F8396;
}
.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: #8FA2B4; }
.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: #9FB3C6; }
.rlb-speler--vitrine .rlb-speler-meta--bpm,
.rlb-speler--vitrine .rlb-speler-meta--toonaard {
  background: rgba(0, 150, 255, .14);
  border-color: rgba(0, 150, 255, .5);
  color: #7FC7FF;
}
.rlb-speler--vitrine .rlb-golf-achter rect { fill: rgba(255, 255, 255, .22); }
.rlb-speler--vitrine .rlb-golf-voor rect { fill: var(--merk-accent, #0096FF); }
.rlb-speler--vitrine .rlb-speler-alleen-stream { border-color: rgba(255, 255, 255, .25); color: #7FC7FF; }
.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(100dvh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
}
body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
  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(100dvh - var(--rlb-kopbalk-h) - (2 * var(--rlb-herorand)));
  }
  body.rlb-speler-actief .rlb-hero--metvinyl > .rlb-binnen {
    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 BLAUW VOOR ALLE KNOPPEN
   ========================================================================
   Er liepen twee blauwen door elkaar: #0096FF voor accenten en #0066B3 voor
   knoppen. Dat tweede, doffere blauw oogde als een standaardknop uit een
   WordPress-thema. Nu is er er een: het felle blauw uit het plaatlabel in
   het logo.

   Wit erop haalt 3.09:1 en valt onder de leesbaarheidsnorm, dus de tekst
   wordt bijna-zwart (6.00:1). Dat is bovendien scherper dan wit op blauw.

   Cerise is van de knoppen af. Hij blijft alleen over waar hij een signaal
   is: de live-badge en het labelpilletje op de banner.
   ======================================================================== */

.rlb-knop--primair {
  background: var(--merk-accent, #0096FF);
  color: #0A1420;
}
.rlb-knop--primair:hover {
  background: #0A1420;
  color: #fff;
}

/* De zwevende boekknop en de knop in de kopbalk: zelfde blauw, geen cerise. */
.rlb-zijtab-knop {
  background: var(--merk-accent, #0096FF);
  color: #0A1420;
}
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible { background: #fff; color: #0A1420; }

.rlb-header .rlb-knop--primair { background: var(--merk-accent, #0096FF); color: #0A1420; }
.rlb-header .rlb-knop--primair:hover { background: #fff; color: #0A1420; }
.rlb-header[data-rl-gescrold="1"] .rlb-knop--primair { background: var(--merk-accent, #0096FF); color: #0A1420; }
.rlb-header[data-rl-gescrold="1"] .rlb-knop--primair:hover { background: #0A1420; color: #fff; }

/* Op donkere vlakken blijft de hoofdknop wit — daar is blauw op zwart
   minder sterk dan wit op zwart, en wit op zwart haalt 21:1. */
.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair,
.rlb-hero--metvinyl .rlb-knop--primair,
.rlb-hero--achter .rlb-knop--primair,
.rlb-speler--vitrine .rlb-knop--primair {
  background: var(--merk-accent, #0096FF);
  color: #0A1420;
}
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover,
.rlb-hero--metvinyl .rlb-knop--primair:hover,
.rlb-hero--achter .rlb-knop--primair:hover,
.rlb-speler--vitrine .rlb-knop--primair:hover { background: #fff; color: #0A1420; }

/* Overal waar het doffe blauw nog als tekstkleur stond: naar het felle,
   behalve waar het op wit staat — daar is #0066B3 nodig voor de leesbaarheid.
   Dus alleen de KNOPPEN en de koopknoppen veranderen. */
.rlb-speler-koop,
.rlb-balk-vak--kar,
.rlb-disco-actie--speel {
  background: var(--merk-accent, #0096FF);
  color: #0A1420;
}
.rlb-speler-koop:hover,
.rlb-balk-vak--kar:hover,
.rlb-disco-actie--speel:hover { background: #0A1420; color: #fff; }

.rlb-balk-vak--speel { background: var(--merk-accent, #0096FF); color: #0A1420; }
.rlb-balk-vak--speel:hover { background: #fff; color: #0A1420; }

.rlb-vitrine-speel { background: var(--merk-accent, #0096FF); color: #0A1420; }
.rlb-vitrine-speel:hover { background: #fff; color: #0A1420; }

/* De streep onder de kopbalk was een verloop blauw-cerise-blauw; nu een
   egale accentlijn, want cerise heeft daar geen betekenis meer. */
.rlb-header::after { background: var(--merk-accent, #0096FF); }

/* De overslaanlink pakt dezelfde knopkleur. */
.rlb-overslaan { background: var(--merk-accent, #0096FF); color: #0A1420; }
.rlb-overslaan:focus { color: #0A1420; }

/* ========================================================================
   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: .4rem; }

/* 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(3rem, 9vw, 4.5rem);
  }
}

/* ========================================================================
   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 BLAUWE KNOPPEN
   ========================================================================
   Wit op #0096FF haalt 3.09:1. De norm is 4.5:1 voor gewone tekst, maar
   3:1 voor GROTE tekst — en groot betekent in WCAG 18.66px vet of meer.
   De knoptekst is daarom 1rem (17px) in gewicht 800 hoofdletters: daarmee
   valt hij binnen die uitzondering.

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

.rlb-knop--primair,
.rlb-zijtab-knop,
.rlb-header .rlb-knop--primair,
.rlb-header[data-rl-gescrold="1"] .rlb-knop--primair,
.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair,
.rlb-hero--metvinyl .rlb-knop--primair,
.rlb-hero--achter .rlb-knop--primair,
.rlb-speler--vitrine .rlb-knop--primair,
.rlb-speler-koop,
.rlb-balk-vak--speel,
.rlb-balk-vak--kar,
.rlb-disco-actie--speel,
.rlb-vitrine-speel,
.rlb-overslaan {
  background: var(--merk-accent, #0096FF);
  color: #fff;
}

/* De tekst in een knop is groot en vet genoeg om op dit blauw te mogen. */
.rlb-knop { font-size: 1rem; font-weight: 800; }

/* Bij aanwijzen draait hij om naar zwart met wit: dat haalt 21:1 en maakt
   het verschil tussen rust en actie meteen duidelijk. */
.rlb-knop--primair:hover,
.rlb-speler-koop:hover,
.rlb-balk-vak--kar:hover,
.rlb-disco-actie--speel:hover { background: #0A1420; color: #fff; }

.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible,
.rlb-header .rlb-knop--primair:hover,
.rlb-balk-vak--speel:hover,
.rlb-vitrine-speel:hover,
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover,
.rlb-hero--metvinyl .rlb-knop--primair:hover,
.rlb-hero--achter .rlb-knop--primair:hover,
.rlb-speler--vitrine .rlb-knop--primair:hover { background: #fff; color: #0A1420; }

.rlb-overslaan:focus { color: #fff; }

/* 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, #0096FF) 34%, transparent) 0%, transparent 62%),
    radial-gradient(36% 80% at 94% 86%,
      color-mix(in srgb, var(--merk-accent, #0096FF) 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, #0096FF) 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, #0096FF) 50%, transparent); }
  50%      { box-shadow: 0 0 28px 2px color-mix(in srgb, var(--merk-accent, #0096FF) 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, #E4E9EE);
}

/* 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, #E4E9EE);
}
.rlb-band + .rlb .rlb-feitbalk-item { padding-block: .25rem; }

@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: #C8D6E4; }

/* 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, #0096FF);
}

.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 1rem;
  -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: 1rem; }
.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, #0096FF);
}

/* ---- 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, #0096FF);
}

/* ========================================================================
   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(1rem, 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, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
  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, #0096FF);
  box-shadow: 0 18px 40px -22px rgba(6, 36, 61, .55);
}
.rlb-pak-link:focus-visible { outline: 3px solid var(--merk-accent, #0096FF); 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: .6rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  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, #0096FF);
}
.rlb-pak-naam { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.rlb-pak-cap {
  display: flex; align-items: center; gap: .4rem;
  margin: 0; font-size: .9375rem; font-weight: 600;
  color: var(--merk-gedempt, #5A6A7A);
}
.rlb-pak-sam { margin: 0; color: var(--merk-gedempt, #5A6A7A); }

.rlb-pak-kort { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.rlb-pak-kort li { display: flex; gap: .45rem; align-items: flex-start; font-size: .9375rem; }
.rlb-pak-kort .rlb-icoon { flex: none; margin-top: .2rem; color: var(--merk-accent, #0096FF); }

.rlb-pak-prijs {
  margin: auto 0 0;
  padding-top: .6rem;
  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, #5A6A7A);
}
/* "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, #5A6A7A);
}

.rlb-pak-meer {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--merk-accent_donker, #0066B3);
}
.rlb-pak-link:hover .rlb-pak-meer { text-decoration: underline; }

.rlb-pak-voet {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #5A6A7A);
}

/* --- de merkpillen op een kaart --------------------------------------- */

.rlb-pak-merken {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: 0; padding: 0; list-style: none;
}
.rlb-merk-pil--klein {
  padding: .2rem .5rem;
  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: .5rem;
  margin: 0 0 .5rem;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rlb-pakd-groepkop .rlb-icoon { color: var(--merk-accent, #0096FF); }
.rlb-pakd-lijst { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.rlb-pakd-lijst li { color: var(--merk-gedempt, #5A6A7A); }

.rlb-pakd-noot,
.rlb-pakd-aanvraag {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--merk-accent, #0096FF);
  background: var(--merk-vlak, #F3F6F9);
  font-size: .9375rem;
}
.rlb-pakd-noot .rlb-icoon,
.rlb-pakd-aanvraag .rlb-icoon { flex: none; margin-top: .15rem; color: var(--merk-accent, #0096FF); }

/* --- de zijkolom met de prijzen --------------------------------------- */

.rlb-pakd-zij {
  position: sticky;
  top: calc(var(--rlb-kopbalk-h) + 1rem);
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
}
.rlb-pakd-cap {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-size: 1rem;
}
.rlb-pakd-cap .rlb-icoon { color: var(--merk-accent, #0096FF); }

.rlb-pakd-tabel { width: 100%; border-collapse: collapse; }
.rlb-pakd-caption {
  text-align: left;
  padding-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #5A6A7A);
}
.rlb-pakd-tabel th,
.rlb-pakd-tabel td {
  padding: .6rem 0;
  border-bottom: 1px solid var(--merk-lijn, #E4E9EE);
  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, #5A6A7A);
}
.rlb-pakd-borg th, .rlb-pakd-borg td { border-bottom: 0; }
.rlb-pakd-voet { margin: 0; font-size: .8125rem; color: var(--merk-gedempt, #5A6A7A); }
.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: .75rem;
  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: .35rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.rlb-ups-label:hover { border-color: var(--merk-accent, #0096FF); }
.rlb-ups-vink:focus-visible + .rlb-ups-label {
  outline: 3px solid var(--merk-accent, #0096FF);
  outline-offset: 3px;
}
.rlb-ups-vink:checked + .rlb-ups-label {
  border-color: var(--merk-accent, #0096FF);
  box-shadow: inset 0 0 0 1px var(--merk-accent, #0096FF);
  background: color-mix(in srgb, var(--merk-accent, #0096FF) 7%, var(--merk-grond, #fff));
}
.rlb-ups-kop { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.rlb-ups-naam { font-weight: 700; }
.rlb-ups-aantal { font-size: .75rem; color: var(--merk-gedempt, #5A6A7A); white-space: nowrap; }
.rlb-ups-sam { font-size: .9375rem; color: var(--merk-gedempt, #5A6A7A); }
.rlb-ups-prijs { font-weight: 700; }
.rlb-ups-eenheid { font-weight: 400; font-size: .8125rem; color: var(--merk-gedempt, #5A6A7A); }
.rlb-ups-voet {
  display: flex; gap: .5rem; align-items: flex-start;
  margin: 1rem 0 0; font-size: .9375rem; color: var(--merk-gedempt, #5A6A7A);
}
.rlb-ups-voet .rlb-icoon { flex: none; margin-top: .15rem; color: var(--merk-accent, #0096FF); }

/* 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, #0096FF);
  color: #fff;
  font-size: .75rem;
}

/* --- het merkfilter --------------------------------------------------- */

.rlb-merken { display: flex; flex-wrap: wrap; gap: .5rem; 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: .4rem;
  padding: .4rem .85rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: 999px;
  background: var(--merk-grond, #fff);
  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, #0096FF); }
.rlb-merk-radio:focus-visible + .rlb-merk-pil {
  outline: 3px solid var(--merk-accent, #0096FF);
  outline-offset: 3px;
}
.rlb-merk-radio:checked + .rlb-merk-pil {
  border-color: var(--merk-accent, #0096FF);
  background: var(--merk-accent, #0096FF);
  color: var(--merk-op_accent, #fff);
}
.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(1rem, 1.8vw, 1.5rem);
  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, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
  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, #0096FF);
  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, #F3F6F9);
}
.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: .75rem;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

.rlb-paklijst-kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.rlb-paklijst-naam {
  margin: .1rem 0 .25rem;
  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, #0066B3); }
.rlb-paklijst-naam a:focus-visible { outline: 3px solid var(--merk-accent, #0096FF); 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: .4rem;
  margin: 0;
  padding: .9rem 0 0;
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
  list-style: none;
}
.rlb-pak-inbegrepen-kop {
  margin-right: .25rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #5A6A7A);
}
.rlb-pak-inbegrepen {
  padding: .3rem .6rem;
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F3F6F9);
  font-size: .8125rem;
  color: var(--merk-inkt, #0A1420);
}
.rlb-pak-inbegrepen--meer {
  background: transparent;
  color: var(--merk-gedempt, #5A6A7A);
  font-weight: 700;
}

/* --- de voet met de knoppen ------------------------------------------- */

.rlb-paklijst-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-top: .9rem;
}
/* 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: .35rem; }
  .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: .75rem 0 0;
  font-size: .9375rem;
  color: var(--merk-gedempt, #5A6A7A);
}
/* 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: auto; }

/* 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(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.rlb-demo > * { min-width: 0; }

/* --- de linkerhelft: waarom je zou insturen ---------------------------- */

.rlb-demo-tekst { display: grid; gap: 1rem; }
.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: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-demo-punten li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-weight: 600;
}
.rlb-demo-punten .rlb-icoon {
  flex: none;
  margin-top: .2rem;
  color: var(--merk-accent, #0096FF);
}

.rlb-demo-mail { margin: 0; color: var(--merk-gedempt, #5A6A7A); }
.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: .25rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--merk-accent, #0096FF);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* --- de rechterhelft: het formulier als kaart -------------------------- */

.rlb-demo-vak {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
  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, #fff); }

.rlb-demo-vak .rlb-demo-formulier { gap: 1rem; }

@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: .5rem;
    padding: .55rem .85rem;
    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, #E4E9EE);
    color: var(--merk-inkt, #0A1420);
  }

  /* 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: .25rem;
    padding: calc(68px + 1.25rem) 1.5rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0A0A0A;
    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: .95rem 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, #0096FF); }

  /* --- de acties onderin het paneel ----------------------------------- */
  .rlb-mobiel-acties {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1.5rem;
  }
  .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: .5rem;
    padding: .7rem 1rem;
    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: .4rem;
  padding: 1.1rem;
}
.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 .4rem;
  border-radius: 999px;
  background: var(--merk-vlak, #F3F6F9);
  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, 2rem);
  padding-top: 1rem;
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
  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: .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
}
/* 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: .35rem; }

/* --- 4. de zijkaart met de prijs was krap ----------------------------- */
.rlb-pakd-zij { gap: 1.15rem; }
.rlb-pakd-aanvraag { line-height: 1.55; }
.rlb-pakd-voet { padding-top: .25rem; border-top: 1px solid var(--merk-lijn, #E4E9EE); }

/* ========================================================================
   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: 3.1rem;          /* 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, #CFD9E3);
  border-radius: 6px;
  background: #fff;
  transition: border-color .2s, background .2s;
}
.rlb-ups-label:hover::before { border-color: var(--merk-accent, #0096FF); }

.rlb-ups-vink:checked + .rlb-ups-label::before {
  border-color: var(--merk-accent, #0096FF);
  background: var(--merk-accent, #0096FF);
}
/* 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, #E4E9EE);
  background: #fff;
  color: var(--merk-gedempt, #5A6A7A);
}
/* 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: .25rem .6rem;
  border-radius: 999px;
  background: var(--merk-vlak, #F3F6F9);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--merk-inkt, #0A1420);
}
.rlb-ups-vink:checked + .rlb-ups-label .rlb-ups-prijs {
  background: var(--merk-accent, #0096FF);
  color: var(--merk-op_accent, #fff);
}

@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, 20rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    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: auto;
}

/* --- 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: .4rem;
}
.rlb-ups-sam { align-self: start; }

.rlb-ups-voetrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: 0;
  padding-top: .6rem;
  border-top: 1px solid var(--merk-lijn, #EEF2F6);
}
.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: .85rem;
}
@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: .55rem;
  padding: 1.15rem 1.15rem 1.05rem 3.3rem;
}
.rlb-ups-kop { display: flex; align-items: center; gap: .6rem; }
.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, #0096FF) 10%, #fff);
  color: var(--merk-accent_donker, #0066B3);
}
.rlb-ups-vink:checked + .rlb-ups-label .rlb-ups-ico {
  background: var(--merk-accent, #0096FF);
  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: .55rem; }
.rlb-ups-prijs { font-size: .78rem; padding: .22rem .55rem; }
.rlb-ups-aantal { font-size: .7rem; }
.rlb-ups-voetrij .rlb-merk-pil--klein { font-size: .7rem; padding: .18rem .45rem; }

/* 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, #0096FF) 4%, #fff);
  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, #fff);
  color: var(--merk-inkt, #0A1420);
  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, #F3F6F9);
  color: var(--merk-inkt, #0A1420);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.rlb-popup-sluit:hover { background: var(--merk-lijn, #E4E9EE); }

.rlb-popup-kicker {
  margin: 0; font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--merk-accent, #0096FF);
}
.rlb-popup-titel { margin: .2rem 0 .4rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.rlb-popup-intro { margin: 0 0 1.25rem; color: var(--merk-gedempt, #5A6A7A); }

.rlb-popup-formulier { display: grid; gap: .8rem; }
.rlb-popup-rij { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 520px) { .rlb-popup-rij { grid-template-columns: 1fr; } }
.rlb-popup-formulier .rlb-veld { display: flex; flex-direction: column; gap: .3rem; 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, #D6246A); }
.rlb-popup-formulier input, .rlb-popup-formulier select, .rlb-popup-formulier textarea {
  width: 100%; padding: .62rem .75rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  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, #0096FF) 40%, transparent);
  outline-offset: 1px; border-color: var(--merk-accent, #0096FF);
}
.rlb-akkoord { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; }
.rlb-popup-verstuur { justify-content: center; margin-top: .25rem; }
.rlb-popup-klein { margin: 0; font-size: .8125rem; color: var(--merk-gedempt, #5A6A7A); text-align: center; }
.rlb-popup-fout {
  margin: 0; padding: .7rem .9rem;
  border-left: 3px solid var(--merk-cerise, #D6246A);
  background: color-mix(in srgb, var(--merk-cerise, #D6246A) 7%, #fff);
  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: .5rem; text-align: center; padding: 1.5rem 0; }
.rlb-popup-gelukt .rlb-icoon { color: var(--merk-status_vrij, #1F9D55); }
.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(.75rem, 1.5vw, 1.25rem);
  margin: 0;
  padding: 0 0 .5rem;
  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: 1rem;
  margin-bottom: .9rem;
}
.rlb-carrousel-kop .rlb-tussenkop {
  margin: 0;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #5A6A7A);
}
.rlb-carrousel-nav { display: flex; gap: .4rem; }
.rlb-carrousel-knop {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: 50%;
  background: var(--merk-grond, #fff);
  color: var(--merk-inkt, #0A1420);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.rlb-carrousel-knop:hover { border-color: var(--merk-accent, #0096FF); background: var(--merk-vlak, #F3F6F9); }

@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: .25rem; }

/* ========================================================================
   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(1rem, calc(50vw - 50%));
    /* Zonder dit knipt de scrollcontainer de schaduw van de laatste kaart
       aan de bovenkant af. */
    padding-block: .5rem;
  }
  /* 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: .4rem;
  padding: .5rem .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, #0096FF); 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, #0096FF);
  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(1rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
}
@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: 1rem; 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, #0096FF);
  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: .4rem;
  margin: 0 0 .4rem;
  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: .6rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: 0;
  padding: .9rem 0;
  border-block: 1px solid var(--merk-lijn, #E4E9EE);
}
.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: .6rem; }

/* --- delen -------------------------------------------------------------- */
.rlb-deel-lijst {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rlb-deel-knop {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border: 1px solid var(--merk-lijn, #E4E9EE);
  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, #0096FF);
  background: color-mix(in srgb, var(--merk-accent, #0096FF) 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: #0E7A4A;
  background: color-mix(in srgb, #0E7A4A 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(2rem, 3vw, 3rem);
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
}
/* 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: .55rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
  box-shadow: 0 8px 20px rgba(10, 20, 32, .06);
}
.rlb-reviewscore-merk {
  display: flex;
  align-items: center;
  gap: .5rem;
  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, #0A1420);
}
/* 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, #0A1420);
}
.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, #54657A);
}
.rlb-reviewscore-aantal {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--merk-gedempt, #54657A);
}
.rlb-reviewscore-link {
  margin-top: .3rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--merk-accent_donker, #0066B3);
  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, 1rem);
  margin: 0;
  /* Onderruimte voor de schaduw: een scrollcontainer knipt hem anders af. */
  padding: .25rem 0 .75rem;
  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, #fff);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  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: .7rem;
}
/* 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, #0A1420);
  /* 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 .5rem;
  margin: auto 0 0;
  font-size: .875rem;
  color: var(--merk-gedempt, #54657A);
}
/* 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, #0A1420);
}
.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: .35rem;
  color: var(--merk-lijn, #E4E9EE);
}

/* --- 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: .5rem 1rem;
  }
  .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, 1.5rem);
  }
}

/* ------------------------------------------------------------- de regels */

.rlb-wagen-uitleg {
  margin: 0 0 var(--rlb-ruimte-m, 1.5rem);
  padding: .7rem .9rem;
  border-left: 3px solid var(--merk-accent, #0096FF);
  border-radius: 0 var(--merk-radius_veld, 8px) var(--merk-radius_veld, 8px) 0;
  background: var(--merk-vlak, #F7F8FA);
  color: var(--merk-gedempt, #54657A);
  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, 1.5rem);
  padding: var(--rlb-ruimte-s, .875rem);
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #fff);
  transition: border-color var(--rlb-overgang, 180ms ease);
}
.rlb-wagen-regel:hover { border-color: var(--merk-accent, #0096FF); }
.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, #F7F8FA);
}
.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, #0A1420);
  overflow-wrap: anywhere;
}
.rlb-wagen-variant,
.rlb-wagen-stuk { font-size: .875rem; color: var(--merk-gedempt, #54657A); }

/* 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 .5rem;
  border-radius: 999px;
  background: var(--merk-vlak, #F7F8FA);
  color: var(--merk-gedempt, #54657A);
  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: .25rem;
  color: var(--merk-inkt, #0A1420);
  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 #E4E9EE);
  border-radius: 50%;
  background: var(--merk-grond, #fff);
  color: var(--merk-inkt, #0A1420);
  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, #0096FF);
  background: var(--merk-vlak, #F7F8FA);
}

.rlb-wagen-aantalveld {
  width: 3.5rem;
  min-height: 44px;
  padding: .3rem .4rem;
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-grond, #fff);
  color: var(--merk-inkt, #0A1420);
  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, #0A1420);
  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 .4rem;
  border: 0;
  background: none;
  color: var(--merk-gedempt, #54657A);
  font-family: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rlb-wagen-weg:hover { color: var(--merk-cerise, #D6246A); }

@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, 1.5rem);
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F7F8FA);
}
@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, #0A1420);
}

.rlb-kassa-paneel .rlb-wagen-regels { gap: .5rem; }
.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: .5rem 0;
  border: 0;
  border-bottom: 1px solid var(--merk-lijn, #E4E9EE);
  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, #E4E9EE); }
.rlb-kassa-paneel .rlb-wagen-aantal { font-size: .875rem; color: var(--merk-gedempt, #54657A); }
.rlb-kassa-paneel .rlb-wagen-bedrag { align-self: center; }

/* ----------------------------------------------------------- de bedragen */

.rlb-kassa-bedragen { margin: 0; display: grid; gap: .35rem; }
.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, #54657A); font-size: .9375rem; }
.rlb-kassa-rij dd {
  margin: 0;
  color: var(--merk-inkt, #0A1420);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rlb-kassa-rij--korting dd { color: var(--merk-status_vrij, #0E7A4A); }
.rlb-kassa-rij--eind {
  margin-top: .35rem;
  padding-top: .6rem;
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
}
.rlb-kassa-rij--eind dt { color: var(--merk-inkt, #0A1420); 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, #54657A); }

/* -------------------------------------------------------- de kortingscode */

.rlb-kassa-korting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem;
  padding-top: var(--rlb-ruimte-xs, .5rem);
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
}
.rlb-kassa-korting .rlb-veld { grid-column: 1; }
.rlb-kassa-korting .rlb-kassa-melding { grid-column: 1 / -1; margin-top: .4rem; }
.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, #54657A);
  font-size: .875rem;
}

/* ----------------------------------------------------------- de meldingen */

.rlb-kassa-melding {
  margin: var(--rlb-ruimte-s, .875rem) 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--merk-accent, #0096FF);
  border-radius: 0 var(--merk-radius_veld, 8px) var(--merk-radius_veld, 8px) 0;
  background: var(--merk-vlak, #F7F8FA);
  color: var(--merk-inkt, #0A1420);
  font-size: .9375rem;
}
.rlb-kassa-melding--fout { border-left-color: var(--merk-cerise, #D6246A); }
.rlb-kassa-melding--stop {
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-left: 3px solid var(--merk-cerise, #D6246A);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #fff);
}
.rlb-kassa-leegknop { margin-top: .6rem; }

.rlb-kassa-geenjs {
  margin: var(--rlb-ruimte-m, 1.5rem) 0 0;
  padding: var(--rlb-ruimte-s, .875rem) var(--rlb-ruimte-m, 1.5rem);
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F7F8FA);
  color: var(--merk-inkt, #0A1420);
}

/* --------------------------------------------------------- de lege wagen */

.rlb-kassa-leeg {
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: var(--rlb-ruimte-xl, 4.5rem) var(--rlb-ruimte-m, 1.5rem);
  border: 1px dashed var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  text-align: center;
}
.rlb-kassa-leeg .rlb-icoon { color: var(--merk-gedempt, #54657A); }
.rlb-kassa-leeg-titel { margin: 0; font-size: 1.25rem; color: var(--merk-inkt, #0A1420); }
.rlb-kassa-leeg-tekst { margin: 0; max-width: 40ch; color: var(--merk-gedempt, #54657A); }

/* -------------------------------------------------------- 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, 1.5rem);
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-paneel, #fff);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--rlb-ruimte-m, 1.5rem);
  min-width: 0;
}
.rlb-kassa-vak > legend {
  padding: 0 .4rem;
  margin-left: -.4rem;
  font-family: var(--merk-font-kop, inherit);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--merk-inkt, #0A1420);
}
.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, #F7F8FA);
}

.rlb-kassa-help { font-size: .8125rem; color: var(--merk-gedempt, #54657A); }

.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, #54657A);
  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: .3rem;
  color: var(--merk-status_vrij, #0E7A4A);
}

.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 .3rem;
  border-radius: 999px;
  background: var(--merk-cerise, #D6246A);
  color: var(--merk-op_accent, #fff);
  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: .25rem clamp(1.1rem, 2.4vw, 2rem);
  margin-bottom: var(--rlb-ruimte-m, 1.5rem);
}

.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: .3rem 0;
  color: var(--merk-gedempt, #54657A);
  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, #0A1420) calc(var(--vrh-aan, 0) * 100%),
           var(--merk-gedempt, #54657A));
}
.rlb-vrh-tab:hover { color: var(--merk-inkt, #0A1420); }

/* Het streepje onder de actieve tab groeit uit vanaf links. */
.rlb-vrh-tab::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: .25rem;
  border-radius: 2px;
  background: var(--merk-accent, #0096FF);
  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, #06243D);
}

/* 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, 2rem);
  color: #fff;
}
.rlb-vrh-kopje {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C9D8E6;
}
.rlb-vrh-titel {
  margin: .3rem 0 .55rem;
  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 .9rem;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: #DCE6EF;
}
/* 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: .6rem 1.2rem; 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: .25rem .9rem; }
  .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, #F7F8FA);
}

.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: 2.4rem .85rem .65rem;
  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: .5rem; }
  .rlb-galerij--metselwerk .rlb-galerij-tekst { font-size: .8125rem; padding: 1.8rem .7rem .55rem; }
}

@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 .9rem;
  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, #0096FF);
  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, #0096FF);
}
.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, #0096FF);
}

/* 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 .6rem; }
  .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, 1.5rem) clamp(1.5rem, 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 #E4E9EE);
  background: var(--merk-vlak, #F4F6F9);
}
.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: .4rem .9rem;
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
}
.rlb-pd-kopje {
  display: flex; align-items: center; gap: .45rem;
  margin: .45rem 0 .2rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #54657A);
}
.rlb-pd-kopje .rlb-icoon { color: var(--merk-accent, #0096FF); }

/* --- het koopblok: de kaart die meescrollt ------------------------------ */

.rlb-pd-koop {
  display: grid;
  gap: var(--rlb-ruimte-s, .875rem);
  padding: var(--rlb-ruimte-m, 1.5rem);
  border: var(--rlb-rand, 1px solid #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-grond, #fff);
}
@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, #54657A); }

.rlb-pd-prijs {
  margin: 0;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-size: 1.375rem;
  font-weight: 700;
}
.rlb-pd-van { font-size: 1rem; font-weight: 600; color: var(--merk-gedempt, #8A9AAA); }
.rlb-pd-bedrag { color: var(--merk-inkt, #0A1420); }
.rlb-pd-btw { font-size: .8125rem; font-weight: 500; color: var(--merk-gedempt, #54657A); }

/* --- de variantkiezer: dezelfde pillen als het merkenfilter ------------- */

.rlb-pd-varianten { margin: 0; padding: 0; border: 0; }
.rlb-pd-kieslabel {
  display: block;
  margin-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--merk-gedempt, #54657A);
}
.rlb-pd-pillen {
  display: flex; flex-wrap: wrap; gap: .5rem;
  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: .4rem; }
.rlb-pd-aantal { width: 6.5rem; }

.rlb-pd-voorraad {
  margin: 0;
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #1A7F37;
}
.rlb-pd-voorraad::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.rlb-pd-voorraad--laag { color: #9A6700; }
.rlb-pd-voorraad--uit { color: #C0303A; }

/* --- de knop en de melding ----------------------------------------------- */

.rlb-pd-knop { justify-content: center; }
.rlb-pd-knop:disabled {
  background: var(--merk-vlak, #F4F6F9);
  color: var(--merk-gedempt, #8A9AAA);
  border-color: var(--merk-lijn, #E4E9EE);
  cursor: not-allowed;
  transform: none;
}
.rlb-pd-knop--ok { background: #1A7F37; border-color: #1A7F37; color: #fff; }

.rlb-pd-melding {
  margin: 0;
  padding: .6rem .9rem;
  border-radius: var(--merk-radius_veld, 8px);
  background: var(--merk-vlak, #F4F6F9);
  font-size: .9375rem;
}
.rlb-pd-melding-link { font-weight: 700; color: var(--merk-accent_donker, #0066B3); }
.rlb-pd-geenjs { margin: 0; font-size: .875rem; color: var(--merk-gedempt, #54657A); }

/* --- de accordeon: rlb-faq-opmaak, over de volle breedte ----------------- */

.rlb-pd-info { grid-column: 1 / -1; }

.rlb-pd-formaten { margin: .6rem 0 0; padding-left: 1.2rem; }
.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: 1rem;
  padding: .55rem 0;
  border-bottom: var(--rlb-rand, 1px solid #E4E9EE);
}
.rlb-pd-spec:last-child { border-bottom: 0; }
.rlb-pd-spec dt { font-weight: 600; color: var(--merk-gedempt, #54657A); }
.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: .9rem;
    padding: .6rem clamp(.9rem, 4vw, 1.5rem);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--merk-grond, #fff);
    border-top: var(--rlb-rand, 1px solid #E4E9EE);
    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: .6rem;
  }

  .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, #54657A); }
  .rlb-pd-balk .rlb-pd-knop { flex: none; padding: .6rem 1.2rem; }

  /* Lucht onder de sectie, anders valt de accordeon achter de vaste balk. */
  .rlb-productdetail { padding-bottom: 84px; }
}

@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: .5rem;
  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: .6rem;
  padding: .8rem 1rem;
  border-radius: var(--merk-radius_kaart, 10px);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  background: var(--merk-paneel, #fff);
  color: var(--merk-inkt, #0A1420);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-size: .9375rem;
  cursor: pointer;
}
.rlb-account-toast--fout { border-color: #B3261E; }
.rlb-account-toast--fout .rlb-account-toast-teken { color: #B3261E; }
.rlb-account-toast-teken {
  flex: none;
  font-weight: 900;
  color: var(--merk-accent_donker, #0066B3);
}
@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, 1.5rem);
  align-items: start;
}
.rlb-account-kaart {
  background: var(--merk-paneel, #fff);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}
.rlb-account-kaarttitel { margin: 0 0 .5rem; font-size: 1.375rem; }
.rlb-account-kaarttekst { color: var(--merk-tekst, #4A5A6A); }
.rlb-account-kaarttekst p { margin: 0 0 1rem; }

.rlb-account-voordelen {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  gap: .5rem;
}
.rlb-account-voordelen li { display: flex; gap: .55rem; align-items: flex-start; }
.rlb-account-voordelen svg { flex: none; margin-top: .2rem; color: var(--merk-accent, #0096FF); }

.rlb-account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.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, #54657A);
}
.rlb-account-schakel {
  grid-column: 1 / -1;
  justify-self: start;
  background: none;
  border: 0;
  padding: .4rem 0;
  min-height: 44px;             /* raakdoel */
  font: inherit;
  font-size: .9375rem;
  color: var(--merk-accent_donker, #0066B3);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rlb-account-schakel:hover { color: var(--merk-inkt, #0A1420); }

.rlb-account-wacht { color: var(--merk-gedempt, #54657A); }
.rlb-account-geenjs {
  background: var(--merk-vlak, #F7F8FA);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: 1rem 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, #fff);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: .75rem;
}
.rlb-account-wie {
  margin: .25rem .75rem .75rem;
  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, #54657A);
  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: .65rem;
  width: 100%;
  min-height: 44px;            /* raakdoel */
  padding: .55rem .75rem;
  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, #4A5A6A);
  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, #F7F8FA);
  color: var(--merk-inkt, #0A1420);
}
.rlb-account-item.is-actief {
  background: var(--merk-accent, #0096FF);
  color: var(--merk-op_accent, #fff);
  font-weight: 700;
}
.rlb-account-item--uit { color: var(--merk-gedempt, #54657A); margin-top: .5rem; }

.rlb-account-teller {
  margin-left: auto;
  min-width: 1.4rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: var(--merk-cerise, #D6246A);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}
.rlb-account-item.is-actief .rlb-account-teller {
  background: var(--merk-op_accent, #fff);
  color: var(--merk-accent, #0096FF);
}

.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, #fff);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  border-radius: var(--merk-radius_kaart, 10px);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  min-width: 0;
}
.rlb-account-blok h3 { margin: 0 0 .75rem; font-size: 1.0625rem; }
.rlb-account-leeg { color: var(--merk-gedempt, #54657A); margin: 0; }

/* Regels in lijsten (bestellingen, downloads, facturen, gesprekken). */
.rlb-account-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  padding: .85rem 0;
  border-top: 1px solid var(--merk-lijn, #E4E9EE);
}
.rlb-account-rij:first-of-type { border-top: 0; padding-top: 0; }
.rlb-account-rij-kop { font-weight: 700; color: var(--merk-inkt, #0A1420); overflow-wrap: anywhere; }
.rlb-account-rij-sub { font-size: .875rem; color: var(--merk-gedempt, #54657A); 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 .6rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 700;
  background: var(--merk-vlak, #F7F8FA);
  border: 1px solid var(--merk-lijn, #E4E9EE);
  color: var(--merk-tekst, #4A5A6A);
}
.rlb-account-pil--goed {
  background: var(--merk-accent, #0096FF);
  border-color: transparent;
  color: var(--merk-op_accent, #fff);
}
.rlb-account-pil--let {
  background: var(--merk-cerise, #D6246A);
  border-color: transparent;
  color: #fff;
}

/* De status-tijdlijn van een boeking:
   aangevraagd → bevestigd → (aan)betaald → gespeeld. */
.rlb-account-tijdlijn {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
}
.rlb-account-tijdlijn li {
  position: relative;
  padding-top: 1.35rem;
  font-size: .8125rem;
  color: var(--merk-gedempt, #54657A);
  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, #F7F8FA);
  border: 2px solid var(--merk-lijn, #E4E9EE);
  z-index: 1;
}
.rlb-account-tijdlijn li::after {
  content: "";
  position: absolute;
  top: .72rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--merk-lijn, #E4E9EE);
}
.rlb-account-tijdlijn li:first-child::after { display: none; }
.rlb-account-tijdlijn li.is-gehaald { color: var(--merk-inkt, #0A1420); font-weight: 600; }
.rlb-account-tijdlijn li.is-gehaald::before {
  background: var(--merk-accent, #0096FF);
  border-color: var(--merk-accent, #0096FF);
}
.rlb-account-tijdlijn li.is-gehaald::after { background: var(--merk-accent, #0096FF); }

/* Berichten: de bellen. */
.rlb-account-bel {
  max-width: 44rem;
  margin: 0 0 .6rem;
  padding: .7rem .95rem;
  border-radius: var(--merk-radius_kaart, 10px);
  background: var(--merk-vlak, #F7F8FA);
  border: 1px solid var(--merk-lijn, #E4E9EE);
}
.rlb-account-bel--klant {
  margin-left: auto;
  background: var(--merk-accent, #0096FF);
  border-color: transparent;
  color: var(--merk-op_accent, #fff);
}
.rlb-account-bel--klant .rlb-account-bel-meta { color: var(--merk-op_accent, #fff); opacity: .8; }
.rlb-account-bel p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rlb-account-bel-meta {
  margin: 0 0 .25rem !important;
  font-size: .75rem;
  color: var(--merk-gedempt, #54657A);
  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: .3rem;
  min-width: 44px;
  min-height: 44px;            /* raakdoel */
  font-size: 1.5rem;
  line-height: 1;
  color: var(--merk-lijn, #E4E9EE);
  cursor: pointer;
}
.rlb-account-sterren button.is-aan { color: var(--merk-accent, #0096FF); }

/* Formulieren in de secties hergebruiken .rlb-veld / .rlb-invoer. */
.rlb-account-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.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: #B3261E; }
.rlb-account-blok--gevaar h3 { color: #B3261E; }

/* --- 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: .5rem;
    min-height: 44px;
    padding: .55rem 1.1rem;
    border: 1px solid var(--merk-lijn, #E4E9EE);
    border-radius: var(--merk-radius_knop, 30px);
    background: var(--merk-paneel, #fff);
    color: var(--merk-inkt, #0A1420);
    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: .75rem 0 0;
  font-size: .8125rem;
  color: var(--merk-gedempt, #54657A);
  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, #0096FF); }

/* === 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, #F3F6FA);
  border: 1px solid var(--merk-lijn, #E3E8EF);
  border-radius: var(--merk-radius_kaart, 12px);
  color: var(--merk-tekst, #39465A);
}
.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: 8px;
  padding: 6px 14px; margin-bottom: 12px;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  color: var(--merk-op_accent, #fff);
  background: var(--merk-accent, #1D4E89);
  border-radius: 999px;
}
.rlb-embed-badge svg { width: 18px; height: 18px; }
.rlb-embed-poster-tekst { margin: 0 0 16px; line-height: 1.55; }
.rlb-embed-toon {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--merk-cerise, #8A6A2E);
}
.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: 14px;
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  border: 1px solid var(--merk-lijn, #E3E8EF);
  background: var(--merk-vlak, #F3F6FA);
}
.rlb-embed-frame { width: 100%; height: 100%; border: 0; display: block; }
.rlb-embed-terugval { margin: 16px 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); }
}

/* =====================================================================
 * TOTAAL CATERING — RIJKE GOUD-AFWERKING + BELEVINGS-MOTION  (v2, 5 nov 2026)
 * Eén centrale plek die Marijn kan tweaken. Goud als echt metaal
 * (gradient met glansband + reliëfrand), diep-blauwe tekst voor AA,
 * en rustige scroll/hover-motion die prefers-reduced-motion respecteert.
 * Kleurkeuzes zijn op WCAG gemeten met WITTE knoptekst: de lichtste goudstop
 * #8F6B32 haalt wit 4.65:1 (AA), de donkere stops ruim meer. De gradient is
 * diep en verzadigd zodat de witte tekst overal leesbaar blijft.
 * ===================================================================== */
:root {
  /* Eén modern knopsysteem (2026): diepblauw vlak + dun goud accentrandje,
     witte tekst. Vlak, verfijnd, geen glans/bevel. Goud blijft het detail. */
  --merk-knop-blauw: #171717;
  --merk-knop-blauw-hover: #262220;
  --merk-goud-lijn: #B7924A;        /* helder goud, leesbaar als lijn op blauw */
  --merk-goud-gradient: linear-gradient(120deg, #B7924A, #D3B06D 55%, #BD9330);
  --merk-curve: cubic-bezier(.2, .7, .3, 1);
}

/* PRIMAIRE knop (incl. boek-/reserveerknop, kopbalk, CTA): egaal diepblauw,
   witte tekst, dun goud randje als accent. Zachte hover: iets lichter blauw,
   zachte schaduw, lichte lift. Geen verloop/bevel. */
.rlb-knop--primair,
.rlb-zijtab-knop,
.rlb-header .rlb-knop--primair,
.rlb-cta .rlb-knop--primair,
.rlb-cta-sectie .rlb-knop--primair,
.rlb-uit-kaart .rlb-knop--primair {
  background: var(--merk-knop-blauw, #171717) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  border: 1.5px solid var(--merk-goud-lijn, #B7924A) !important;
  box-shadow: 0 2px 8px rgba(23, 23, 23, .18) !important;
  transition: background-color .2s var(--merk-curve),
              box-shadow .2s var(--merk-curve),
              transform .2s var(--merk-curve),
              border-color .2s var(--merk-curve);
}
.rlb-knop--primair:hover,
.rlb-header .rlb-knop--primair:hover,
.rlb-cta .rlb-knop--primair:hover,
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-uit-kaart .rlb-knop--primair:hover {
  background: var(--merk-knop-blauw-hover, #262220) !important;
  color: #FFFFFF !important;
  border-color: #D3B06D !important;
  box-shadow: 0 8px 22px rgba(23, 23, 23, .28) !important;
  transform: translateY(-2px);
}

/* De zwevende reserveerknop dankt zijn plek aan `transform: rotate(-90deg)`
   (zie .rlb-zijtab--rechts .rlb-zijtab-knop). De lift hierboven zet een eigen
   `transform: translateY(-2px)` en VERVANGT daarmee die rotatie: de tab klapte
   bij aanwijzen uit zijn hoek, zichtbaar zwaaiend omdat transform ook in de
   transition staat. Hij krijgt dezelfde kleuren, maar raakt transform niet
   aan - zijn rotatie blijft dus staan. */
.rlb-zijtab-knop:hover,
.rlb-zijtab-knop:focus-visible {
  background: var(--merk-knop-blauw-hover, #262220) !important;
  color: #FFFFFF !important;
  border-color: #D3B06D !important;
  box-shadow: 0 8px 22px rgba(23, 23, 23, .28) !important;
}

/* SECUNDAIRE knop: outline — dun goud lijntje, transparante vulling, vult bij
   hover met diepblauw + witte tekst. */
.rlb-knop--secundair {
  background: transparent !important;
  color: var(--merk-inkt, #171717) !important;
  border: 1.5px solid var(--merk-goud-lijn, #B7924A) !important;
  box-shadow: none !important;
  transition: background-color .2s var(--merk-curve),
              color .2s var(--merk-curve),
              transform .2s var(--merk-curve);
}
.rlb-knop--secundair:hover {
  background: var(--merk-knop-blauw, #171717) !important;
  color: #FFFFFF !important;
  border-color: var(--merk-knop-blauw, #171717) !important;
  transform: translateY(-2px);
}
/* Secundaire knop op donkere secties/hero: witte outline i.p.v. donkere tekst. */
.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 !important; border-color: rgba(255,255,255,.7) !important;
}
.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 !important; color: var(--merk-inkt, #171717) !important;
  border-color: #fff !important;
}

/* Grote stapnummers in helder goud (leesbaar als tekst). */
.rlb-stap-nummer,
.rlb-stappen--genummerd .rlb-stap-item::before {
  background: var(--merk-goud-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Kaart-hover: zacht liften, goud-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 rgba(23, 23, 23, .14);
  border-color: color-mix(in srgb, var(--merk-accent, #8F6B32) 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: .4rem;
  margin-top: .75rem;
  font-weight: 700;
  color: var(--merk-accent_donker, #6F5426);
}
.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: .5rem;
  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, gestaffelde tekst-entree ---- */
@media (prefers-reduced-motion: no-preference) {
  .rlb-hero--achter .rlb-hero-achterbeeld {
    animation: totaal-catering-kenburns 22s ease-in-out both;
  }
  @keyframes totaal-catering-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.11); }
  }
}

/* =====================================================================
 * TOTAAL CATERING — 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 (#D3B06D haalt ~9:1 op diepblauw). */
.rlb--vlak-diepblauw { background: var(--merk-diepblauw, #171717); color: #fff; }
.rlb--vlak-inkt      { background: #0F141A; 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: #DCE6EF; }
.rlb--vlak-diepblauw :where(.rlb-kicker, .rlb-eyebrow),
.rlb--vlak-inkt :where(.rlb-kicker, .rlb-eyebrow) { color: #D3B06D; }
.rlb--vlak-diepblauw :where(a:not(.rlb-knop)),
.rlb--vlak-inkt :where(a:not(.rlb-knop)) { color: #D3B06D; }
/* 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-goud-gradient, #8F6B32); }
/* 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;
}

/* =====================================================================
 * TOTAAL CATERING — 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(1.5rem, 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: .75rem;
  margin: 0 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--merk-accent, #8F6B32) 55%, transparent);
  font-size: 1.3rem;
}
.rlb-menu-cat-kop > span:first-child { color: var(--merk-inkt, #171717); }
.rlb-menu-cat-prijs {
  flex: none;
  font-size: 1.0625rem; font-weight: 800;
  color: var(--merk-accent_donker, #6F5426);
}
.rlb-menu-cat-oms {
  margin: -.4rem 0 .9rem;
  font-size: .9375rem; font-style: italic;
  color: var(--merk-gedempt, #5B6B80);
}
.rlb-menu-lijst { list-style: none; margin: 0; padding: 0; }
.rlb-menu-rij {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--merk-lijn, #E3E8EF) 85%, var(--merk-accent, #8F6B32));
}
.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, #171717);
}
.rlb-menu-oms {
  display: block; margin-top: .15rem;
  font-size: .9375rem; line-height: 1.5;
  color: var(--merk-gedempt, #5B6B80);
}
.rlb-menu-prijs {
  flex: none; align-self: baseline;
  font-weight: 800; font-size: 1.0625rem;
  color: var(--merk-accent_donker, #6F5426);
  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: #D3B06D; }

/* =====================================================================
 * TOTAAL CATERING — 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 rgba(23, 23, 23, .16);
  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: .35rem;
  padding: 1.1rem 1.2rem 1.25rem;
}
.rlb-gerelateerd--carrousel .rlb-ger-titel { color: #fff; font-size: 1.3rem; margin: 0; }
.rlb-gerelateerd--carrousel .rlb-ger-tekst { color: #E6ECF3; font-size: .9375rem; line-height: 1.5; margin: 0; }
.rlb-gerelateerd--carrousel .rlb-ger-meer { color: #D3B06D; margin-top: .4rem; }
.rlb-gerelateerd--carrousel .rlb-ger-meer::after { content: "\2192"; }
.rlb-gerelateerd--carrousel .rlb-ger-link:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 23, 23, .26); }
.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); }

/* =====================================================================
 * TOTAAL CATERING — 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: .25rem 0 .5rem;
  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: 1.4rem .9rem .7rem;
  color: #fff; font-size: .9375rem; font-weight: 600;
  background: linear-gradient(0deg, rgba(10,20,32,.82) 0%, rgba(10,20,32,0) 100%);
}

/* =====================================================================
 * TOTAAL CATERING — 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, #fff);
  border-top: 3px solid var(--merk-goud-lijn, #B7924A);
  box-shadow: 0 18px 40px rgba(23, 23, 23, .16);
  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(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}
.rlb-nav-koltitel {
  margin: 0 0 .6rem; font-size: .8125rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--merk-accent_donker, #6F5426);
}
.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: .5rem .6rem; 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, #F3F6FA); }
.rlb-nav-sublabel { display: block; font-weight: 700; color: var(--merk-inkt, #171717); }
.rlb-nav-subtekst { display: block; font-size: .8125rem; color: var(--merk-gedempt, #5B6B80); margin-top: .1rem; }
.rlb-nav-kolom--beeld { display: flex; flex-direction: column; gap: .75rem; }
.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: 1.5rem !important; font-size: .95rem; opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .rlb-nav-paneel { transition: none; }
}

/* =====================================================================
 * TOTAAL CATERING — 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); }

/* =====================================================================
 * TOTAAL CATERING — USP-BELEVINGSKAARTEN (met foto): "Waarom Totaal Catering"-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, #fff);
  border: 1px solid var(--merk-lijn, #E3E8EF);
  border-top: 3px solid var(--merk-goud-lijn, #B7924A);
  border-radius: var(--merk-radius_kaart, 12px);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(23, 23, 23, .08);
  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: 1rem 1.15rem 0; }
.rlb-usps--metbeeld .rlb-usp-tekst { margin: .35rem 0 0; padding: 0 1.15rem 1.2rem; }
.rlb-usps--metbeeld .rlb-usp-vak:hover,
.rlb-usps--metbeeld .rlb-usp-link:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 23, 23, .16); }
.rlb-usps--metbeeld .rlb-usp-vak:hover .rlb-usp-beeld,
.rlb-usps--metbeeld .rlb-usp-link:hover .rlb-usp-beeld { transform: scale(1.05); }

/* =====================================================================
 * TOTAAL CATERING — 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(1rem, 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%; }
}

/* =====================================================================
 * TOTAAL CATERING — 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(1rem, 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, 1rem);
}
.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; }
}

/* =====================================================================
 * TOTAAL CATERING — 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, #171717); }

/* =====================================================================
 * TOTAAL CATERING — 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); }
}

/* =====================================================================
 * TOTAAL CATERING — 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;
  backdrop-filter: none !important;
  -webkit-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, #E3E8EF) !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, #171717); }
.rlb-header[data-rl-gescrold="1"] .rlb-navlink:hover,
.rlb-header[data-rl-gescrold="1"] .rlb-navlink--actief { color: var(--merk-accent_donker, #6F5426); }

/* 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;
}

/* =====================================================================
 * TOTAAL CATERING — 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: 110px;   /* 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;
}

/* =====================================================================
 * TOTAAL CATERING — ÉÉN DONKERE KLEUR: diepblauw-gradient overal, zwart volledig weg
 * Dezelfde subtiele diepblauw-gradient voor ELKE donkere sectie, de footer,
 * de kruimels en de hero-achtergrond. Witte tekst, goud accent, en op donker
 * een WITTE primaire knop (pop). Eén herkenbare donkere kleur door de site.
 * ===================================================================== */
:root {
  --merk-diep-gradient: linear-gradient(160deg, #171717 0%, #131110 55%, #0C0A08 100%);
}
.rlb-footer,
.rlb-hero--achter,
.rlb-hero--metvinyl,
.rlb--vlak-diepblauw,
.rlb--vlak-inkt,
.rlb-cta-sectie,
.rlb-cta-sectie--beeld,
.rlb-mobiel-nav {
  background: var(--merk-diep-gradient) !important;
  color: #fff;
}
/* De kruimels stonden hier op diepblauw met lichte tekst. Verderop staat de
   nieuwere, bewuste vormgeving: een lichtgrijze balk met donkere tekst. Twee
   ontwerpen door elkaar gaf lichtgrijze letters op een lichtgrijze balk; dit
   oudere ontwerp is daarom verwijderd in plaats van overschreven. */
/* Footer: witte tekst, gouden kolomkoppen (helder goud op donker). */
.rlb-footer-kop { color: #D3B06D !important; }
.rlb-footer-kolom a { color: #D4DDE6 !important; }
.rlb-footer-kolom a:hover { color: #fff !important; }
/* Mobiel menu randen subtiel. */
.rlb-mobiel-nav li + li { border-top-color: rgba(255, 255, 255, .12) !important; }
/* Gouden eyebrow/accentlijn op alle donkere secties (helder goud). */
.rlb--vlak-diepblauw .rlb-kicker, .rlb--vlak-inkt .rlb-kicker,
.rlb-cta-sectie .rlb-kicker, .rlb-footer .rlb-kicker { color: #D3B06D !important; }

/* WITTE primaire knop op donkere secties (pop), goud randje, diepblauwe tekst. */
.rlb--vlak-diepblauw .rlb-knop--primair,
.rlb--vlak-inkt .rlb-knop--primair,
.rlb-cta-sectie .rlb-knop--primair,
.rlb-footer .rlb-knop--primair {
  background: #fff !important;
  color: var(--merk-inkt, #171717) !important;
  border: 1.5px solid var(--merk-goud-lijn, #B7924A) !important;
  text-shadow: none !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .18) !important;
}
.rlb--vlak-diepblauw .rlb-knop--primair:hover,
.rlb--vlak-inkt .rlb-knop--primair:hover,
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-footer .rlb-knop--primair:hover {
  background: #FBF4DE !important;
  color: var(--merk-inkt, #171717) !important;
  border-color: #D3B06D !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .26) !important;
}

/* =====================================================================
 * TOTAAL CATERING — 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(.5rem, 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; }
}


/* =====================================================================
 * TOTAAL CATERING — 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: 1rem; padding: .9rem 1.1rem;
  background: var(--merk-diep-gradient, #171717); 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 .4rem; 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: .6rem 1.1rem; font-size: .85rem; color: var(--merk-gedempt, #5B6B80); background: #fff; }
.rlb-reserveer-voet a { color: var(--merk-accent_donker, #6F5426); }
@media (max-width: 640px) {
  .rlb-reserveer-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; }
  .rlb-reserveer-kaart { border-radius: 0; max-height: 100dvh; height: 100dvh; }
  .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; }


/* Totaal Catering 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: #D3B06D !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; }

/* =====================================================================
 * TOTAAL CATERING — 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: .25rem; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: 2px solid var(--merk-lijn, #E3E8EF);
  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 1rem; font-weight: 700; font-size: 1rem;
  color: var(--merk-gedempt, #5B6B80);
  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, #171717); }
.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: .6rem .85rem; border-radius: 8px; }
.rlb-menukaart--tabs .rlb-menu-rij:nth-child(odd) { background: var(--merk-vlak, #F3F6FA); }
.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, #6F5426); border-bottom-color: var(--merk-goud-lijn, #B7924A);
}
.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, #8F6B32); outline-offset: 2px; border-radius: 4px; }

/* =====================================================================
 * TOTAAL CATERING — STAPPEN: grote gouden nummers (01/02/03-gevoel), ruime kolommen
 * ===================================================================== */
.rlb-stappen--genummerd .rlb-stap-nummer,
.rlb-stap-nummer {
  width: auto; height: auto; border-radius: 0; margin-bottom: .5rem;
  font-size: clamp(2.6rem, 4.5vw, 3.4rem); line-height: 1; font-weight: 800;
  background: var(--merk-goud-gradient, #8F6B32);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Een fijn goud lijntje onder het nummer als accent. */
.rlb-stap-item .rlb-stap-nummer::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: .5rem;
  background: var(--merk-goud-lijn, #B7924A); 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; }

/* ========================================================================
   TOTAAL CATERING — de mooie blauwe gradient (licht → donker, diagonaal) overal
   Basis voor blauwe knoppen, footer en blauwe secties. Consistent.
   ======================================================================== */
:root {
  --totaal-catering-diep-grad: linear-gradient(135deg, #262220 0%, #1B1815 40%, #171717 70%, #0C0A08 100%);
}
/* Primaire (blauwe) knop krijgt dezelfde gradient + goud randje */
.rlb-knop--primair {
  background: var(--totaal-catering-diep-grad) !important;
  color: #fff !important;
  border: 1px solid rgba(200,161,58,.55) !important;
}
.rlb-knop--primair:hover {
  background: linear-gradient(135deg, #262220 0%, #1B1815 45%, #171717 100%) !important;
  box-shadow: 0 6px 20px rgba(23,23,23,.35);
  color: #fff !important;
}




/* ========================================================================
   TOTAAL CATERING — 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 #171717 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 {
  --totaal-catering-diep-basis:  linear-gradient(160deg, #171717 0%, #131110 55%, #0C0A08 100%);
  --totaal-catering-diep-sluier: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.62) 100%);
  --totaal-catering-diep: var(--totaal-catering-diep-sluier), var(--totaal-catering-diep-basis);
}

.rlb-footer,
.rlb-cta-sectie,
.rlb-cta-sectie--beeld,
.rlb--vlak-diep,
.rlb--vlak-diepblauw,
.rlb--vlak-inkt,
.rlb--vlak-accent,
.rlb-reviews--google,
.rlb-reviews:not(.rlb--vlak-grond):not(.rlb--vlak-vlak) {
  background: var(--totaal-catering-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: #D3B06D !important; }
.rlb-footer-kolom a   { color: #D4DDE6 !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: #D3B06D !important; }
.rlb-footer-sociaal a { border-color: rgba(255,255,255,.35) !important; color: #fff !important; }
.rlb-footer-sociaal a:hover { border-color: #D3B06D !important; color: #D3B06D !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: .9rem;
  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: #D3B06D !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 Totaal Catering" 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; }

/* ========================================================================
   TOTAAL CATERING — 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, #171717);
}
.rlb-reviews--google .rlb-reviewscore-cijfer b {
  color: var(--merk-inkt, #171717);
  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: #5B6B80;              /* 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, #171717) !important;
  text-decoration-color: var(--merk-goud-lijn, #B7924A);
  text-decoration-thickness: 2px;
}
.rlb--vlak-diepblauw .rlb-reviewscore-link:hover { color: #6F5426 !important; }
/* Sterren blijven goud, ook binnen de witte kaart. */
.rlb--vlak-diepblauw .rlb-reviewscore .rlb-sterren,
.rlb--vlak-diepblauw .rlb-review .rlb-sterren { color: #D3B06D; }
.rlb-reviews--google .rlb-review-naam { color: var(--merk-inkt, #171717); }
.rlb-reviews--google .rlb-review-bron,
.rlb-reviews--google .rlb-review-datum { color: #5B6B80; }

/* ---- 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, 1rem);
    align-items: center;
  }
  .rlb-reviews--google .rlb-reviewscore {
    height: auto;
    margin-top: calc(var(--rlb-reviewkop-h) + var(--rlb-reviewgap, 1rem) + .25rem);
    margin-bottom: .75rem;     /* 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: .85rem;
  border-color: rgba(23, 23, 23, .10);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.rlb-reviews--google .rlb-review-tekst p {
  color: var(--merk-inkt, #171717);
  line-height: 1.5;
}
.rlb-reviews--google .rlb-review-wie {
  padding-top: .85rem;
  border-top: 1px solid rgba(23, 23, 23, .10);
}

/* ========================================================================
   TOTAAL CATERING — 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 rgba(200, 161, 58, .28);
}
.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: #C7D6E4; }

/* 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: rgba(200, 161, 58, .75) !important;
}
.rlb-cta-sectie .rlb-knop--secundair:hover {
  background: rgba(255, 255, 255, .10) !important;
  border-color: #D3B06D !important;
  color: #fff !important;
}

/* ========================================================================
   TOTAAL CATERING — 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, #E3E8EF);
  }
  /* 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, #E3E8EF);
    border-radius: 0;
    padding: .55rem .25rem;
  }
}

/* ========================================================================
   TOTAAL CATERING — 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, 2rem);
}
.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, .75rem);
  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, #F3F6FA);
}
.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; }
}

/* ========================================================================
   TOTAAL CATERING — 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(1rem, 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; }

/* ========================================================================
   TOTAAL CATERING — 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, #171717) 50%),
    linear-gradient(135deg, var(--merk-inkt, #171717) 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: 2.75rem;
  appearance: none;
}
.rlb-contact-formulier .rlb-veld--onderwerp { border-bottom: 1px solid var(--merk-lijn, #E3E8EF); padding-bottom: 1rem; }

/* 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: .6rem;
  max-width: 54ch;
}
.rlb-embed-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(200, 161, 58, .55);
  color: #fff; font-weight: 700; font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.rlb-embed-poster-tekst { margin: 0; color: #DCE6EF; font-size: 1.0625rem; }
.rlb-embed-toon {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .25rem;
  color: #D3B06D; font-weight: 700;
}
.rlb-embed-poster:hover .rlb-embed-toon { color: #D3B06D; }
.rlb-embed-terugval { text-align: left; margin-top: 1rem; }

/* ========================================================================
   TOTAAL CATERING — 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, #171717);
}
.rlb-optioneel {
  font-weight: 500;
  font-size: .8125rem;
  color: #5B6B80;
  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: .6rem; }
.rlb-keuze {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1.5px solid var(--merk-lijn, #E3E8EF);
  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, #171717); margin: 0; }
.rlb-keuze:hover { border-color: var(--merk-goud-lijn, #B7924A); }
.rlb-keuze:has(input:checked) {
  border-color: var(--merk-inkt, #171717);
  background: rgba(23, 23, 23, .06);
}
.rlb-keuze:has(input:focus-visible) {
  outline: 2px solid var(--merk-goud-lijn, #B7924A);
  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(1rem, 2vw, 1.4rem);
  border: 1px dashed var(--merk-lijn, #E3E8EF);
  border-radius: var(--merk-radius_kaart, 10px);
  background: rgba(23, 23, 23, .03);
}
.rlb-contact-formulier .rlb-veldgroep--zakelijk[hidden] { display: none; }

/* ========================================================================
   TOTAAL CATERING — 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: #EFEFEF !important;
  color: #4A4A4A !important;
  padding-block: .7rem !important;
  border-bottom: 1px solid rgba(23, 23, 23, .08);
}
.rlb-kruimels ol {
  color: #4A4A4A !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.rlb-kruimels a {
  color: #4A4A4A !important;
  text-decoration: none;
}
.rlb-kruimels a:hover {
  color: var(--merk-inkt, #171717) !important;
  text-decoration: underline;
  text-decoration-color: var(--merk-goud-lijn, #B7924A);
  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, #171717) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--merk-goud-lijn, #B7924A);
  padding-bottom: 1px;
}
/* Het scheidingsteken tussen de kruimels, in goud. */
.rlb-kruimels li + li::before {
  content: "/";
  margin-right: .5rem;
  color: #B7924A;
  font-weight: 600;
}

/* ========================================================================
   TOTAAL CATERING — 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: #DCE6EF !important; }
.rlb-reviews--google > .rlb-binnen > .rlb-kop .rlb-kicker { color: #D3B06D !important; }
.rlb-reviews--google > .rlb-binnen > .rlb-kop::after,
.rlb-reviews--google .rlb-kop > .rlb-titel::after { background: var(--merk-goud-gradient, #B7924A); }

/* 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: #171717; }
.rlb-reviews--google .rlb-review { background: #fff; }

/* ========================================================================
   TOTAAL CATERING — 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(--totaal-catering-diep-basis) !important;
  border-bottom: 1px solid rgba(200, 161, 58, .25) !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(--totaal-catering-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: #D3B06D !important;
}
body:not(:has(main > .rlb-hero--achter)):not(:has(main > .rlb-hero--achtergrond)) .rlb-header .rlb-logo {
  filter: none;
}

/* ========================================================================
   TOTAAL CATERING — 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(1rem, 2vw, 1.4rem);
  border: 1px dashed var(--merk-lijn, #E3E8EF);
  border-radius: var(--merk-radius_kaart, 10px);
  background: rgba(23, 23, 23, .03);
}
.rlb-boeker-formulier .rlb-veldgroep--zakelijk[hidden] { display: none; }
.rlb-boeker-formulier .rlb-veld--onderwerp select.rlb-invoer { font-weight: 600; }

/* ========================================================================
   TOTAAL CATERING — 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: .6rem 1.6rem;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}
.rlb-hero-contact a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  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: #D3B06D;
  border-bottom-color: #D3B06D;
}
.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, #171717);
  border-bottom-color: rgba(23, 23, 23, .25);
  text-shadow: none;
}
.rlb-hero--naast .rlb-hero-contact a:hover,
.rlb-hero--leeg .rlb-hero-contact a:hover { color: #6F5426; border-bottom-color: #B7924A; }

@media (max-width: 559px) {
  .rlb-hero-contact { gap: .55rem 1rem; }
  .rlb-hero-contact a { font-size: .875rem; }
}

/* ========================================================================
   TOTAAL CATERING — 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(--totaal-catering-diep) !important;
  border-radius: var(--merk-radius_kaart, 12px);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  gap: clamp(1rem, 2.5vw, 2.5rem);
}
.rlb-feitbalk-item {
  gap: .3rem;
  padding-inline: clamp(.5rem, 2vw, 1.5rem);
}
.rlb-feitbalk-item .rlb-icoon { color: #D3B06D !important; margin-bottom: .35rem; }
.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: #C7D6E4 !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 rgba(200, 161, 58, .28) !important;
}
@media (max-width: 700px) {
  .rlb-feitbalk-item + .rlb-feitbalk-item { border-left: 0 !important; }
  .rlb-feitbalk-label { max-width: none; }
}

/* ========================================================================
   TOTAAL CATERING — 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, #fff);
  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: .5rem;
  }
  .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: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rlb-tb-collage--gestapeld .rlb-tb-collagetegel { transition-delay: 0ms !important; }
}

/* ========================================================================
   TOTAAL CATERING — 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(--totaal-catering-diep);
  border: 1px solid rgba(200, 161, 58, .28);
  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: rgba(200, 161, 58, .85);
  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: rgba(200, 161, 58, .6);
}

/* ========================================================================
   TOTAAL CATERING — 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(100dvh - 112px); }
}

/* ========================================================================
   TOTAAL CATERING — 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 rgba(23, 23, 23, .10);
  border-top: 0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(23, 23, 23, .06);
  text-align: left;
}
.rlb-usps--metbeeld .rlb-usp-beeldvak {
  position: relative;
  border-bottom: 2px solid var(--merk-goud-lijn, #B7924A);
}
.rlb-usps--metbeeld .rlb-usp-beeld {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}
.rlb-usps--metbeeld .rlb-usp-titel {
  padding: 1.15rem 1.25rem 0;
  text-align: left;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
}
.rlb-usps--metbeeld .rlb-usp-tekst {
  padding: .45rem 1.25rem 1.35rem;
  text-align: left;
  color: #5B6B80;
  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 rgba(23, 23, 23, .14);
  border-color: rgba(200, 161, 58, .45);
}

/* ========================================================================
   TOTAAL CATERING — 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(.75rem, 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: .9rem;
  height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid rgba(23, 23, 23, .10);
  border-radius: 14px;
  background: var(--merk-grond, #fff);
  box-shadow: 0 2px 10px rgba(23, 23, 23, .06);
  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, 1.5rem);
  border: 1px solid rgba(23, 23, 23, .10);
  box-shadow: 0 2px 10px rgba(23, 23, 23, .06);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(23, 23, 23, .14);
  border-color: rgba(200, 161, 58, .5);
  background: var(--merk-grond, #fff);
}
/* 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: 11px;
  border-radius: 50%;
  background: rgba(200, 161, 58, .12);
  color: #8A6D1F;
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-rij strong {
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: #5B6B80; font-weight: 700;
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-waarde {
  font-size: 1.0625rem; font-weight: 700; color: var(--merk-inkt, #171717);
}
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-belofte,
.rlb-contact:not(:has(.rlb-contact-vak)) .rlb-contact-sociaal { margin-top: 1.25rem; }

/* 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 rgba(23, 23, 23, .10);
  border-top: 3px solid var(--merk-goud-lijn, #B7924A);
  border-radius: 14px;
  background: var(--merk-vlak, #F3F6FA);
}

/* ========================================================================
   TOTAAL CATERING — 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(3rem, 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; }

/* ========================================================================
   TOTAAL CATERING — 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, 2rem);
  border: 1px solid rgba(23, 23, 23, .10);
  border-radius: 14px;
  background: var(--merk-grond, #fff);
  box-shadow: 0 2px 10px rgba(23, 23, 23, .06);
}
/* 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); }

/* ========================================================================
   TOTAAL CATERING — 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%; }

/* ========================================================================
   TOTAAL CATERING — 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: .35rem !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-goud-lijn, #B7924A);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ========================================================================
   TOTAAL CATERING — 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; }
}

/* ========================================================================
   TOTAAL CATERING — 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: .75rem;
  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: .25rem 0 .5rem;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 2px solid rgba(200, 161, 58, .35);
}
.rlb-mobiel-sub li + li { border-top: 0; }
.rlb-mobiel-sub .rlb-navlink { padding: .55rem 0; font-size: .9375rem; opacity: .9; }
.rlb-mobiel-groep + li { border-top: var(--rlb-rand); }

/* ========================================================================
   TOTAAL CATERING — 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(--totaal-catering-diep-basis) !important;
    border-bottom: 1px solid rgba(200, 161, 58, .25) !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(--totaal-catering-diep-basis); }
  .rlb-contact-rij-vak { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   TOTAAL CATERING — 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(--totaal-catering-diep-basis,
      linear-gradient(160deg, #171717 0%, #131110 55%, #0C0A08 100%)) !important;
    border-bottom: 1px solid rgba(200, 161, 58, .25) !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: "Totaal Catering in Schelluinen";
    display: block;
    margin: 0 0 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid rgba(200, 161, 58, .32);
    color: #D3B06D;
    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, #171717) !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: #5B6B80 !important;   /* 6,2:1 op wit */
  }
  .rlb-reviews--google .rlb-reviewscore-link {
    color: var(--merk-inkt, #171717) !important;
    text-decoration-color: var(--merk-goud-lijn, #B7924A);
  }
  /* De sterren blijven goud, ook binnen de witte kaart. */
  .rlb-reviewscore .rlb-sterren,
  .rlb-review .rlb-sterren,
  .rlb-reviews--google .rlb-sterren { color: #D3B06D !important; }
}

/* ========================================================================
   TOTAAL CATERING — GEEN DONKERE MODUS

   brand.css draait in `prefers-color-scheme: dark` een paar tokens om:
   --merk-inkt gaat van #171717 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: #8F6B32;
    --merk-accent_donker: #6F5426;
    --merk-inkt: #171717;
    --merk-tekst: #39465A;
    --merk-gedempt: #5B6B80;
    --merk-lijn: #E3E8EF;
    --merk-vlak: #F3F6FA;
    --merk-grond: #FFFFFF;
    --merk-paneel: #FFFFFF;
  }
}

:root[data-theme="dark"] {
  --merk-accent: #8F6B32;
  --merk-accent_donker: #6F5426;
  --merk-inkt: #171717;
  --merk-tekst: #39465A;
  --merk-gedempt: #5B6B80;
  --merk-lijn: #E3E8EF;
  --merk-vlak: #F3F6FA;
  --merk-grond: #FFFFFF;
  --merk-paneel: #FFFFFF;
}

/* ========================================================================
   TOTAAL CATERING — 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 .25rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid rgba(23, 23, 23, .14);
  border-radius: 12px;
  background: color-mix(in srgb, var(--merk-vlak, #F3F6FA) 60%, #fff);
}
.rlb-keuzeveld > legend {
  padding: 0 .45rem;
  margin-inline-start: -.45rem;
  color: var(--merk-inkt, #171717);
  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: .45rem .9rem;
  margin-top: .6rem;
}
.rlb-keuze {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 8px;
  font-size: .9375rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s ease;
}
.rlb-keuze:hover { background: rgba(23, 23, 23, .05); }
/* 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, #171717);
}
.rlb-keuze:has(input:checked) {
  background: color-mix(in srgb, var(--merk-goud-lijn, #B7924A) 14%, transparent);
}
.rlb-keuze:has(input:focus-visible) {
  outline: 2px solid var(--merk-goud-lijn, #B7924A);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .rlb-keuzerij { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================================================
   TOTAAL CATERING — 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: .5rem 0 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid rgba(201, 162, 39, .45);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(23, 23, 23, .14);
  text-align: left;
}
.rlb-contact-gelukt-kop {
  margin: 0 0 .5rem;
  color: var(--merk-inkt, #171717) !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: .55rem;
  vertical-align: -.12rem;
  border-radius: 50%;
  background: #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, #39465A) !important;
  font-size: 1rem;
  line-height: 1.55;
}
.rlb-contact-kenmerk {
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(23, 23, 23, .12);
  color: var(--merk-inkt, #171717) !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: .25rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(163, 68, 59, .4);
  border-inline-start: 4px solid #A3443B;
  border-radius: 10px;
  background: #FDF4F3;
  color: #7A2F28 !important;
  font-size: .9375rem;
  line-height: 1.5;
}

/* ====================================================================
   TOTAAL CATERING — DESIGNRONDE 1 (12 nov 2026)
   Vertaling van het tct67-stagingontwerp: serif-kopaccent en het grote
   gouden footer-wordmark. Kleuren komen uit brand.css-tokens; wat hier
   hard staat is bewust decor op donker (geen tekst-contrast-eis).
   ==================================================================== */

/* --- Serif-kopaccent: een <em> in een kop wordt het cursieve Georgia-
       accent van de staging, op een eigen regel. De renderer laat <em>
       in titels toe (nxrl_inline), de Studio dus ook. --- */
.rlb-hero-titel em,
.rlb-kop h1 em,
.rlb-kop h2 em,
.rlb-titel em {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* In lopende koppen van kaarten (h3/h4) blijft em gewoon inline cursief. */
.rlb-kop h3 em, .rlb-kop h4 em { display: inline; font-family: Georgia, serif; font-style: italic; font-weight: 400; }

/* --- Het grote gouden wordmark onderin de footer (puur decor) --- */
.rlb-footer-wordmark {
  margin: clamp(32px, 5vw, 64px) 0 0;
  line-height: 0.82;
  overflow: hidden;
  user-select: none;
}
.rlb-footer-wordmark span {
  display: block;
  font-weight: 800;
  font-size: clamp(2.5rem, 8vw, 7rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #B7924A;
}
.rlb-footer-wordmark small {
  display: block;
  margin-top: clamp(8px, 1.2vw, 16px);
  font-weight: 600;
  font-size: clamp(0.8rem, 1.3vw, 1.1rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #D3B06D;
}

/* --- Zoek-popup (header-knop + dialog), designronde 1 --- */
.rlb-zoekknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.rlb-zoekknop:hover,
.rlb-zoekknop:focus-visible { background: rgba(183, 146, 74, .16); transform: translateY(-1px); }

.rlb-zoek-modal {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(640px, calc(100vw - 2rem));
  margin: clamp(16px, 12vh, 120px) auto auto;
}
.rlb-zoek-modal::backdrop { background: rgba(12, 10, 8, .55); backdrop-filter: blur(3px); }
.rlb-zoek-kaart {
  background: var(--merk-paneel, #fff);
  border-radius: var(--merk-radius_kaart, 18px);
  box-shadow: 0 30px 80px rgba(23, 23, 23, .35);
  overflow: hidden;
}
.rlb-zoek-kop {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--merk-lijn, #DDD7D0);
}
.rlb-zoek-veld {
  flex: 1;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 1.125rem;
  color: var(--merk-inkt, #171717);
  background: transparent;
}
.rlb-zoek-sluit {
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--merk-gedempt, #66615B);
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 999px;
}
.rlb-zoek-sluit:hover { color: var(--merk-inkt, #171717); background: var(--merk-vlak, #F7F5F1); }
.rlb-zoek-body { max-height: min(55vh, 440px); overflow-y: auto; }
.rlb-zoek-body:empty { display: none; }
.rlb-zoek-leeg { margin: 0; padding: 1rem 1.1rem; color: var(--merk-gedempt, #66615B); }
.rlb-zoek-lijst { list-style: none; margin: 0; padding: .4rem; display: grid; gap: .15rem; }
.rlb-zoek-lijst a {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-radius: 12px;
  text-decoration: none;
}
.rlb-zoek-lijst a:hover,
.rlb-zoek-lijst a:focus-visible { background: var(--merk-vlak, #F7F5F1); }
.rlb-zoek-lijst strong { color: var(--merk-inkt, #171717); font-weight: 600; }
.rlb-zoek-frag { font-size: .9375rem; color: var(--merk-gedempt, #66615B); line-height: 1.5; }
.rlb-zoek-frag mark { background: rgba(183, 146, 74, .22); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ====================================================================
   TOTAAL CATERING — DESIGNRONDE 2 (12 nov 2026, feedback Marijn)
   Deze laag staat ONDERAAN en wint dus van alles hierboven.
   1. Knoppen: primair = GOUD (gradient van de staging), secundair =
      BRONS/koper. Gemeten: wit op #96603C 5.2:1, hover #7E5032 6.8:1;
      de goudgradient draagt witte tekst met dezelfde tekstschaduw-truc
      als de staging (.tc-btn--gold).
   2. Header: beeldlogo, geen onderstreping, kolommen die niet overlappen.
   3. Footer-wordmark een maat kleiner.
   4. Cookiebanner-knoppen in dezelfde knoppentaal.
   ==================================================================== */

.rlb-knop--primair,
.rlb--vlak-inkt .rlb-knop--primair,
.rlb-cta-sectie .rlb-knop--primair,
.rlb-footer .rlb-knop--primair {
  background: linear-gradient(135deg, #B7924A 0%, #A3824A 55%, #8F6B32 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(60, 42, 10, .45);
  border: 1px solid rgba(143, 107, 50, .6) !important;
  box-shadow: 0 10px 26px rgba(143, 107, 50, .28);
}
.rlb-knop--primair:hover,
.rlb--vlak-inkt .rlb-knop--primair:hover,
.rlb-cta-sectie .rlb-knop--primair:hover,
.rlb-footer .rlb-knop--primair:hover {
  background: #9D7939 !important;
  color: #fff !important;
  border-color: #8F6B32 !important;
  box-shadow: 0 6px 20px rgba(80, 58, 20, .4) !important;
  transform: translateY(-1px);
}
.rlb-knop--secundair,
.rlb--vlak-inkt .rlb-knop--secundair,
.rlb-cta-sectie .rlb-knop--secundair {
  background: #96603C !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  text-shadow: 0 1px 2px rgba(60, 30, 10, .35);
}
.rlb-knop--secundair:hover,
.rlb--vlak-inkt .rlb-knop--secundair:hover,
.rlb-cta-sectie .rlb-knop--secundair:hover {
  background: #7E5032 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .28) !important;
  transform: translateY(-1px);
}

/* --- Header: beeldlogo + nette kolommen --------------------------- */
.rlb-merk, .rlb-merk:hover { text-decoration: none !important; border-bottom: 0 !important; }
.rlb-merk img, .rlb-merk picture img {
  height: 44px;
  width: auto;
  max-width: none;
  display: block;
}
.rlb-header.is-klein .rlb-merk img { height: 36px; }
.rlb-nav { min-width: 0; overflow: visible; }
.rlb-nav ul { flex-wrap: nowrap; }
.rlb-header-acties { flex-wrap: nowrap; white-space: nowrap; }
/* Onder de 1360px is er geen ruimte voor het telefoonnummer naast menu
   en CTA; de zijtab en de contactpagina dragen het nummer dan. */
@media (max-width: 1360px) {
  .rlb-header-acties .rlb-header-tel { display: none; }
}

/* --- Footer-wordmark: een maat kleiner ---------------------------- */
.rlb-footer-wordmark span { font-size: clamp(2.5rem, 8.5vw, 7.25rem); }
.rlb-footer-wordmark small { font-size: clamp(0.8rem, 1.2vw, 1.05rem); letter-spacing: 0.38em; }
.rlb-footer-wordmark { margin-top: clamp(32px, 5vw, 64px); }

/* --- Cookiebanner in de knoppentaal van de site ------------------- */
.trc-kaart button.trc-accepteer,
.trc-kaart .trc-knoppen button:first-child {
  background: linear-gradient(135deg, #B7924A 0%, #8F6B32 100%) !important;
  color: #fff !important;
  border: 0 !important;
}
.trc-kaart button.trc-weiger {
  background: #fff !important;
  color: #171717 !important;
  border: 1.5px solid #DDD7D0 !important;
}