/* =====================================================================
   rebelzentertainment.nl
   Eén motief door de hele site: de schuine streep uit het logo.
   Die komt terug in het logoblok van de header, in de hoek van elke
   kaart en in de streep onder de koppen.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------- */
:root {
  /* Typografie: Outfit voor koppen, logo en knoppen. Manrope voor alle tekst. */
  --rz-font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rz-font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --pink:      #e01c70;
  --pink-600:  #c4185f;
  --pink-700:  #a51450;
  --pink-soft: rgba(224, 28, 112, .12);

  --ink:       #08080a;

  --r-sm:  8px;
  --r:     14px;
  --r-lg:  22px;

  --head-h:      84px;
  --head-h-sm:   68px;
  --wrap:        1280px;
  --gap:         clamp(1rem, 2.4vw, 1.75rem);

  --slice:       46px;   /* diepte van de hoeksnede op kaarten */
  --card-ratio:  6 / 5;  /* verhouding van een actkaart: breedte / hoogte */

  --ease:        cubic-bezier(.22, .61, .36, 1);
}

[data-bs-theme="dark"] {
  --bg:        #08080a;
  --bg-2:      #0e0e12;
  --surface:   #14141a;
  --surface-2: #1c1c24;
  --line:      rgba(255, 255, 255, .10);
  --line-2:    rgba(255, 255, 255, .06);
  --text:      #f4f4f7;
  --muted:     #989aa6;
  --head-bg:   rgba(8, 8, 10, .82);
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.42);
  --tile-veil: linear-gradient(to top, rgba(4,4,6,.96) 4%, rgba(4,4,6,.55) 42%, rgba(4,4,6,.06) 78%);
  color-scheme: dark;
}

[data-bs-theme="light"] {
  --bg:        #ffffff;
  --bg-2:      #f5f5f7;
  --surface:   #ffffff;
  --surface-2: #f3f3f6;
  --line:      rgba(8, 8, 12, .12);
  --line-2:    rgba(8, 8, 12, .07);
  --text:      #0b0b0f;
  --muted:     #62636e;
  --head-bg:   rgba(255, 255, 255, .86);
  --shadow:    0 1px 2px rgba(12,14,26,.06), 0 16px 40px rgba(12,14,26,.09);
  --tile-veil: linear-gradient(to top, rgba(4,4,6,.94) 4%, rgba(4,4,6,.5) 42%, rgba(4,4,6,.04) 78%);
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   2. Basis
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Moet vóór alle display-regels staan: anders overrulen .fav-panel,
   .theme-switch__menu en .review het hidden-attribuut en blijven ze zichtbaar. */
[hidden] { display: none !important; }

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


/* ---- Typografie -----------------------------------------------------
   Outfit voor koppen, logo en knoppen. Manrope voor alle tekst.
   H1 700 · H2 700 · H3 600 · body 400 · nadruk 500 · menu 500 · knop 600
   -------------------------------------------------------------------- */
body, p, li, dd, dt, blockquote, figcaption, label,
input, textarea, select, nav, table, th, td {
  font-family: var(--rz-font-body);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--rz-font-display); }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }

strong, b { font-weight: 600; }
.rz-medium { font-weight: 500; }

.rz-btn, .btn, button { font-family: var(--rz-font-display); font-weight: 600; }
.rz-nav a, .rz-menu a, nav a { font-family: var(--rz-font-body); font-weight: 500; }

/* Het logo krijgt altijd een vaste breedte, nooit zijn eigen pixelmaat */
.rz-logo, .rz-logo img { display: block; max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--rz-font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Let op: 'overflow-x: hidden' op body maakt van de body een scrollgebied,
     en daardoor werkt position: sticky niet meer ten opzichte van het scherm.
     'clip' knipt wel af maar maakt geen scrollgebied, dus de boekingskaart
     op de profielpagina blijft gewoon meelopen. Browsers zonder clip vallen
     terug op de regel eronder. */
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--rz-font-display); line-height: 1.05; }

p { margin: 0; }

::selection { background: var(--pink); color: #fff; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--pink); color: #fff;
  padding: .75rem 1.25rem; z-index: 200; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   3. Iconen (SVG-maskers, nemen de tekstkleur over)
   ------------------------------------------------------------------- */
.ic {
  display: inline-block;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  flex: 0 0 auto;
  vertical-align: -.125em;
}

.ic-heart  { -webkit-mask-image: var(--i-heart);  mask-image: var(--i-heart); }
.ic-play   { -webkit-mask-image: var(--i-play);   mask-image: var(--i-play); }
.ic-close  { -webkit-mask-image: var(--i-close);  mask-image: var(--i-close); }
.ic-sun    { -webkit-mask-image: var(--i-sun);    mask-image: var(--i-sun); }
.ic-moon   { -webkit-mask-image: var(--i-moon);   mask-image: var(--i-moon); }
.ic-auto   { -webkit-mask-image: var(--i-auto);   mask-image: var(--i-auto); }
.ic-check  { -webkit-mask-image: var(--i-check);  mask-image: var(--i-check); }
.ic-clock  { -webkit-mask-image: var(--i-clock);  mask-image: var(--i-clock); }
.ic-shield { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); }
.ic-search { -webkit-mask-image: var(--i-search); mask-image: var(--i-search); }
.ic-mail   { -webkit-mask-image: var(--i-mail);   mask-image: var(--i-mail); }
.ic-phone  { -webkit-mask-image: var(--i-phone);  mask-image: var(--i-phone); }
.ic-pin    { -webkit-mask-image: var(--i-pin);    mask-image: var(--i-pin); }
.ic-doc    { -webkit-mask-image: var(--i-doc);    mask-image: var(--i-doc); }
.ic-tag    { -webkit-mask-image: var(--i-tag);    mask-image: var(--i-tag); }
.ic-euro   { -webkit-mask-image: var(--i-euro);   mask-image: var(--i-euro); }
.ic-users  { -webkit-mask-image: var(--i-users);  mask-image: var(--i-users); }
.ic-arrow  { -webkit-mask-image: var(--i-arrow);  mask-image: var(--i-arrow); }
.ic-left   { -webkit-mask-image: var(--i-left);   mask-image: var(--i-left); }
.ic-right  { -webkit-mask-image: var(--i-right);  mask-image: var(--i-right); }
.ic-bolt   { -webkit-mask-image: var(--i-bolt);   mask-image: var(--i-bolt); }
.ic-star   { -webkit-mask-image: var(--i-star);   mask-image: var(--i-star); }
.ic-quote  { -webkit-mask-image: var(--i-quote);  mask-image: var(--i-quote); }

:root {
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4.5v15l12-7.5z'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cg fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 2.5v2.4M12 19.1v2.4M2.5 12h2.4M19.1 12h2.4M5.3 5.3l1.7 1.7M17 17l1.7 1.7M18.7 5.3L17 7M7 17l-1.7 1.7'/%3E%3C/g%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.7 14.6A8.6 8.6 0 0 1 9.4 3.3 8.8 8.8 0 1 0 20.7 14.6z'/%3E%3C/svg%3E");
  --i-auto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6a9.4 9.4 0 1 0 0 18.8V2.6z'/%3E%3Ccircle cx='12' cy='12' r='9.4' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.3 4.9 11.6l1.5-1.5 3.2 3.2 8-8L19.1 6.8z'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.4l4.2 2.5-.9 1.5-5.3-3.2V7z'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6.2c0 5 3.4 9.7 8 10.8 4.6-1.1 8-5.8 8-10.8V5zm-1 13.4-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v.4l-10 5.6L2 5.9zM2 8.2v10.3A1.5 1.5 0 0 0 3.5 20h17a1.5 1.5 0 0 0 1.5-1.5V8.2l-9.5 5.3a1 1 0 0 1-1 0z'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2h3.1l1.6 4.6-2.2 1.5a13 13 0 0 0 6.8 6.8l1.5-2.2 4.6 1.6v3.1A2.4 2.4 0 0 1 19.6 22 17.6 17.6 0 0 1 2 4.4 2.4 2.4 0 0 1 4.4 2z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  --i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm7 1.5V9h5.5zM8 12h8v1.6H8zm0 3.4h8V17H8z'/%3E%3C/svg%3E");
  --i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.6 2.6H21v9.4l-9.6 9.6a1.5 1.5 0 0 1-2.1 0L2.4 14.7a1.5 1.5 0 0 1 0-2.1zM16.9 8.2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E");
  --i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.9 19.4a6.9 6.9 0 0 1-9.4-4.6H12v-2.1H6.1v-1.4H12V9.2H6.5A6.9 6.9 0 0 1 15.9 4.6l1.1-1.9a9 9 0 0 0-12.7 6.5H2.6v2.1h1.5v1.4H2.6v2.1h1.7A9 9 0 0 0 17 21.3z'/%3E%3C/svg%3E");
  --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11.2a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2zm7.6.4a2.9 2.9 0 1 0 0-5.8 2.9 2.9 0 0 0 0 5.8zM9 13c-3.3 0-6.4 1.7-6.4 3.8V20h12.8v-3.2C15.4 14.7 12.3 13 9 13zm7.6.6c-.7 0-1.4.1-2 .3 1.2 1 1.9 2.2 1.9 3.5V20h5.9v-2.8c0-1.8-2.6-3.6-5.8-3.6z'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/%3E%3C/svg%3E");
  --i-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.4 4.6L8 12l7.4 7.4 1.5-1.5L11 12l5.9-5.9z'/%3E%3C/svg%3E");
  --i-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 4.6L7.1 6.1 13 12l-5.9 5.9 1.5 1.5L16 12z'/%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4.5 13.4H10L9.4 22 19 10.2h-5.6z'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 6.1 6.7.9-4.9 4.6 1.2 6.6-5.9-3.2-5.9 3.2 1.2-6.6L2.4 9.4l6.7-.9z'/%3E%3C/svg%3E");
  --i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 5.4C6.2 6.9 4 10 4 13.6c0 3 1.7 5 4.2 5 2 0 3.5-1.4 3.5-3.3 0-1.8-1.3-3.1-3-3.1-.4 0-.7 0-1 .2.4-1.9 1.9-3.6 4-4.6zm9.4 0c-3.4 1.5-5.6 4.6-5.6 8.2 0 3 1.7 5 4.2 5 2 0 3.5-1.4 3.5-3.3 0-1.8-1.3-3.1-3-3.1-.4 0-.7 0-1 .2.4-1.9 1.9-3.6 4-4.6z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   4. Opmaak van tekst
   ------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3.5vw, 2.5rem);
}

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow .ic { color: var(--pink); font-size: 1.1em; }

/* Kop met de handgetekende roze streep eronder */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.h-section {
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.025em;
  position: relative;
  display: inline-block;
}

.h-section .scribble {
  position: absolute;
  left: 0; bottom: -.55em;
  width: min(100%, 230px);
  height: auto;
  color: var(--pink);
  overflow: visible;
}
.scribble path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.scribble path:last-child { stroke-width: 2.2; opacity: .55; }

.lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--muted);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------
   5. Knoppen
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .875rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn .ic { font-size: 1.05em; transition: transform .22s var(--ease); }
.btn:hover .ic-arrow { transform: translateX(4px); }

.btn--pink { background: var(--pink); color: #fff; }
.btn--pink:hover { background: var(--pink-600); }
.btn--pink:active { background: var(--pink-700); }

.btn--outline { border-color: currentColor; color: var(--text); }
.btn--outline:hover { background: var(--text); color: var(--bg); }

.btn--ghost { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--pink); color: var(--pink); }

.btn--on-image { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--on-image:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: .625rem 1.125rem; font-size: .8125rem; }
.btn--full { width: 100%; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.link-more:hover { color: var(--pink); }
.link-more .ic { transition: transform .22s var(--ease); }
.link-more:hover .ic { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   6. Header
   ------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--head-bg);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.18); }

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  height: var(--head-h);
  display: flex;
  align-items: stretch;
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding-right: clamp(1rem, 3.5vw, 2.5rem);
  transition: height .2s var(--ease);
}
.site-header.is-stuck .site-header__inner { height: var(--head-h-sm); }

/* Het logo in de sitebalk */
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: clamp(1rem, 3.5vw, 2.5rem);
}

/* Het logo staat vrij in de balk, zonder vlak eromheen. De juiste versie
   wordt getoond: zwart met roze op licht, wit met roze op donker.

   De maat gaat op hóógte, niet op breedte. Het logo is gestapeld en dus
   hoger dan breed; op hoogte sturen zorgt dat het nooit uit de balk loopt,
   ook niet wanneer die bij het scrollen krimpt. */
.brand__logo {
  height: clamp(48px, 6vw, 62px);
  width: auto;
  display: block;
  transition: height .2s var(--ease);
}

.site-header.is-stuck .brand__logo { height: clamp(40px, 5vw, 50px); }

.brand__logo--donker { display: none; }

[data-bs-theme="dark"] .brand__logo--licht  { display: none; }
[data-bs-theme="dark"] .brand__logo--donker { display: block; }

.site-footer__logo { width: clamp(120px, 12vw, 148px); height: auto; display: block; }

/* Navigatie */
.nav { display: flex; align-items: center; margin-left: auto; }

.nav__list { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.125rem); }

.nav__link {
  display: block;
  padding: .5rem .3rem;
  /* Een lang menu-item mocht over twee regels vallen, en botste dan tegen
     het logo. Nu blijft elk item op één regel. */
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: .3rem; right: .3rem; bottom: .1rem;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__link.is-current { color: var(--text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: clamp(.5rem, 1.5vw, 1rem);
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 1.0625rem;
  color: var(--text);
  position: relative;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { border-color: var(--pink); color: var(--pink); }

/* Teller op het hartje */
.fav-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-family: var(--rz-font-display);
  font-size: .625rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}
.fav-toggle.is-filled { color: var(--pink); border-color: var(--pink); }

/* Weergaveschakelaar */
.theme-switch { position: relative; }

.theme-switch__menu {
  position: absolute;
  right: 0; top: calc(100% + .5rem);
  min-width: 190px;
  padding: .375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: grid;
  gap: .125rem;
  z-index: 120;
}
.theme-switch__label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .5rem .625rem .25rem;
}
.theme-switch__menu button {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.theme-switch__menu button:hover { background: var(--surface-2); }
.theme-switch__menu button.is-on { color: var(--pink); background: var(--pink-soft); font-weight: 600; }

.nav-burger { display: none; }
.nav-burger__bars,
.nav-burger__bars::before,
.nav-burger__bars::after {
  content: '';
  display: block;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-burger__bars::before { transform: translateY(-5.5px); }
.nav-burger__bars::after  { transform: translateY(3.5px); }
.nav-burger[aria-expanded="true"] .nav-burger__bars { transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars::before { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bars::after { transform: rotate(-90deg) translateX(0); }

/* ---------------------------------------------------------------------
   7. Lijst met bewaarde acts
   ------------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 130;
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.fav-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 92vw);
  height: 100dvh;
  z-index: 140;
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  animation: slide-in .26s var(--ease);
}
@keyframes slide-in { from { transform: translateX(100%); } }

.fav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.fav-panel__head h2 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: -.01em; }

.fav-panel__body { flex: 1; overflow-y: auto; padding: .75rem; }

.fav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem;
  border-radius: var(--r-sm);
}
.fav-item:hover { background: var(--surface-2); }
.fav-item__name { font-weight: 600; font-size: .9375rem; flex: 1; }
.fav-item__drop { color: var(--muted); font-size: 1rem; }
.fav-item__drop:hover { color: var(--pink); }

.fav-panel__empty {
  padding: 2.5rem 1.75rem;
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
}
.fav-panel__empty .ic { font-size: 2rem; color: var(--line); margin: 0 auto .75rem; }

.fav-panel__foot {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: .5rem;
}

/* ---------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------- */
.hero { padding-top: clamp(1rem, 2vw, 1.5rem); }

.hero__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(420px, 58vw, 580px);
  display: flex;
  align-items: center;
  background: var(--ink);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,6,8,.94) 0%, rgba(6,6,8,.72) 46%, rgba(6,6,8,.18) 78%),
    radial-gradient(120% 90% at 88% 18%, rgba(224,28,112,.34), transparent 62%);
}

/* Het beeldmerk als watermerk, met het woordmerk weggesneden */
.hero__mark {
  position: absolute;
  right: clamp(-3rem, -1vw, 1rem);
  top: 50%;
  transform: translateY(-52%);
  width: clamp(240px, 34vw, 460px);
  clip-path: inset(0 0 26% 0);
  opacity: .17;
  z-index: -1;
  pointer-events: none;
}

.hero__body {
  position: relative;
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 46rem;
  color: #fff;
}

.hero__title {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  line-height: .96;
  text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--pink); display: block; }

.hero__text {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: rgba(255,255,255,.82);
  max-width: 34ch;
}

.hero__actions {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------------------------------------------------------------------
   9. Cijferbalk
   ------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--line-2);
}

.stat { display: flex; align-items: center; gap: .875rem; }

.stat__icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--pink-soft);
  color: var(--pink);
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  flex: 0 0 40px;
}
.stat__value {
  font-family: var(--rz-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.stat__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   10. Kaarten met de hoeksnede
   ------------------------------------------------------------------- */
.card-shell {
  position: relative;
  /* De roze laag die door de snede heen zichtbaar wordt */
  background: var(--pink);
  border-radius: var(--r);
}

.card-act {
  display: block;
  position: relative;
  /* De verhouding staat bovenin als --card-ratio, zodat je er in één plek
     aan kunt draaien. Was 3/4 toen er vier op een rij stonden. */
  aspect-ratio: var(--card-ratio);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    calc(var(--slice) * 1.55) 100%,
    0 calc(100% - var(--slice))
  );
  transition: transform .3s var(--ease);
}
.card-shell:hover .card-act { transform: translateY(-4px); }

.card-act__media { position: absolute; inset: 0; }
.card-act__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Nu de kaart lager is, snijdt hij meer van een staande foto af. Het
     uitsnijpunt ligt daarom boven het midden: daar zitten de gezichten. */
  object-position: center 25%;
  transition: transform .5s var(--ease);
}
.card-shell:hover .card-act__media img { transform: scale(1.05); }

.card-act__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--rz-font-display);
  font-size: 2.5rem;
  font-weight: 900;
  color: rgba(255,255,255,.22);
  background: linear-gradient(150deg, #2a2a33, #16161c 60%, var(--pink-700));
}

.card-act::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tile-veil);
  pointer-events: none;
}

.card-act__badge {
  position: absolute;
  top: .75rem; left: .75rem;
  z-index: 2;
  padding: .3125rem .625rem;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card-act__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1rem 1rem calc(var(--slice) * .72);
  color: #fff;
}
.card-act__name {
  font-size: 1.0625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.card-act__role { font-size: .8125rem; color: rgba(255,255,255,.72); margin-top: .125rem; }

.card-act__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .6875rem;
  color: rgba(255,255,255,.66);
}
.card-act__meta li { display: flex; align-items: center; gap: .3125rem; }
.card-act__meta .ic { font-size: .875rem; color: var(--pink); }

.card-act__play {
  position: absolute;
  right: .875rem; bottom: .875rem;
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .9375rem;
  box-shadow: 0 6px 18px rgba(224,28,112,.4);
  transition: transform .22s var(--ease);
}
.card-shell:hover .card-act__play { transform: scale(1.08); }

.card-act__fav {
  position: absolute;
  top: .625rem; right: .625rem;
  z-index: 4;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(10,10,14,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .875rem;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.card-act__fav:hover { transform: scale(1.1); }
.card-act__fav[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }

.card-shell--sm .card-act { aspect-ratio: 4 / 5; }
.card-shell--sm .card-act__name { font-size: .9375rem; }

/* ---------------------------------------------------------------------
   11. Carrousel
   ------------------------------------------------------------------- */
.rail-wrap { position: relative; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 62vw);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  padding-bottom: .5rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* Hoeveel kaarten er in beeld passen. Kolommen blijven doorlopen, dus
   ook bij twintig acts blijft de rij netjes scrollen. */
@media (min-width: 560px)  { .rail { grid-auto-columns: calc((100% - 1 * var(--gap)) / 2); } }
@media (min-width: 760px)  { .rail { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); } }
@media (min-width: 1000px) { .rail { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); } }
@media (min-width: 1240px) { .rail { grid-auto-columns: calc((100% - 4 * var(--gap)) / 5); } }

.rail-nav { display: flex; gap: .5rem; }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav button:disabled:hover { border-color: var(--line); color: var(--text); }

/* ---------------------------------------------------------------------
   12. Categorietegels
   ------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  background: var(--pink);
  border-radius: var(--r);
}

.tile__inner {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 62px 100%, 0 calc(100% - 34px));
  transition: transform .3s var(--ease);
}
.tile:hover .tile__inner { transform: translateY(-4px); }

.tile__inner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.tile:hover img { transform: scale(1.06); }

.tile__inner::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--tile-veil);
}

.tile__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1rem 1.5rem;
  color: #fff;
  z-index: 2;
}
.tile__name {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.tile__sub { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: .125rem; }

.tile__count {
  position: absolute;
  top: .75rem; right: .75rem;
  z-index: 2;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ---------------------------------------------------------------------
   13. Oproep en reviews
   ------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 900px) { .duo { grid-template-columns: 1.05fr .95fr; } }

.promo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  isolation: isolate;
}
.promo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.promo::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(75deg, rgba(6,6,8,.95) 8%, rgba(6,6,8,.6) 62%, rgba(6,6,8,.2));
}
.promo__body { padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff; }
.promo__title {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.promo__title em { font-style: normal; color: var(--pink); }
.promo__text { margin-top: .625rem; color: rgba(255,255,255,.78); font-size: .9375rem; max-width: 32ch; }
.promo__body .btn { margin-top: 1.25rem; }

.reviews {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.25rem, 2.5vw, 1.875rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.reviews__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.reviews__title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.stars { display: flex; gap: .1875rem; color: var(--pink); font-size: .9375rem; }
.reviews__score { font-weight: 700; font-size: .875rem; }
.reviews__score span { color: var(--muted); font-weight: 500; }

.review { display: grid; gap: .75rem; }
.review__quote {
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 500;
}
.review__by { font-size: .8125rem; color: var(--muted); }
.review__by strong { color: var(--text); font-weight: 600; }

.review__mark { color: var(--pink); font-size: 1.5rem; opacity: .45; }

.reviews__dots { display: flex; gap: .375rem; margin-top: auto; }
.reviews__dots button {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--line);
  padding: 0;
}
.reviews__dots button.is-on { background: var(--pink); width: 20px; }

/* ---------------------------------------------------------------------
   14. Merkenbalk
   ------------------------------------------------------------------- */
.brands {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.brands__title {
  text-align: center;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.125rem;
}
.brands__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
}
.brands__list li {
  font-family: var(--rz-font-display);
  font-size: clamp(.9375rem, 1.8vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--muted);
  opacity: .8;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.brands__list li:hover { opacity: 1; color: var(--text); }
.brands__list img { height: clamp(20px, 3vw, 28px); width: auto; filter: grayscale(1); opacity: .75; }

/* ---------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  background: var(--ink);
  color: #d8d9de;
  border-top: 3px solid var(--pink);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 760px)  { .site-footer__top { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1040px) { .site-footer__top { grid-template-columns: 1.8fr 1fr 1fr 1fr; } }

.site-footer__brand img { width: 116px; margin-bottom: 1rem; }
.site-footer__brand p { font-size: .875rem; color: #90929c; max-width: 38ch; }

.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.125rem; }
.socials a {
  padding: .375rem .75rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: #b9bac2;
}
.socials a:hover { border-color: var(--pink); color: #fff; }

.site-footer__col h2 {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: .875rem;
}
.site-footer__col ul { display: grid; gap: .5rem; }
.site-footer__col a, .site-footer__col li { font-size: .875rem; color: #90929c; }
.site-footer__col a:hover { color: var(--pink); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .75rem;
  color: #75767f;
}
.site-footer__bottom a:hover { color: var(--pink); }

/* ---------------------------------------------------------------------
   16. Kleinere schermen
   ------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .nav {
    position: fixed;
    inset: var(--head-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1rem, 3.5vw, 2.5rem) 1.5rem;
    display: none;
    z-index: 99;
    max-height: calc(100dvh - var(--head-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    padding: .875rem .25rem;
    font-size: .9375rem;
    border-bottom: 1px solid var(--line-2);
  }
  .nav__link::after { display: none; }
  .nav__link.is-current { color: var(--pink); }
  .nav-burger { display: grid; }
  .site-header__actions { margin-left: auto; }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
  .boek-nu { display: none; }
  .hero__stage { min-height: 380px; }
  .site-footer__bottom { flex-direction: column; }
}

@media (max-width: 420px) {
  :root { --slice: 36px; }
}

/* ---------------------------------------------------------------------
   17. Rustige weergave en printen
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .site-header, .fav-panel, .overlay, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Overzichtspagina's, profielpagina's, formulieren en 404
   Toegevoegd in update 04. Zelfde tokens als de rest van het bestand.
   ===================================================================== */

.wrap--narrow { max-width: 820px; }
.center { text-align: center; }
.center-actions { justify-content: center; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.section--alt { background: var(--c-surface-2, rgba(127,127,127,.06)); }

/* ---- Kruimelpad ------------------------------------------------------ */
.crumbs { margin-bottom: 1.25rem; font-size: .8125rem; }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.crumbs li { display: flex; gap: .5rem; align-items: center; opacity: .75; }
.crumbs li + li::before { content: '/'; opacity: .4; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--rz-pink, #e01c70); }
.crumbs [aria-current="page"] { opacity: 1; font-weight: 500; }

/* ---- Kop van een overzichtspagina ----------------------------------- */
.page-hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.page-hero__title { margin-bottom: .625rem; }
.page-hero__sub { font-size: 1.125rem; font-weight: 500; opacity: .8; margin-bottom: .75rem; }
.page-hero__count { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }

.page-hero--image { color: #fff; }
.page-hero--image .crumbs a,
.page-hero--image .page-hero__title { color: #fff; }
.page-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,13,16,.88) 0%, rgba(12,13,16,.55) 70%, rgba(12,13,16,.3) 100%);
}

/* ---- Zoeken en sorteren --------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .625rem; align-items: center;
}
.filters__search { position: relative; flex: 1 1 260px; min-width: 220px; }
.filters__search .ic {
  position: absolute; left: .875rem; top: 50%; transform: translateY(-50%);
  opacity: .5; pointer-events: none;
}
.filters__search input {
  width: 100%;
  padding: .8125rem 1rem .8125rem 2.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  border-color: rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  font: 400 .9375rem/1.2 var(--rz-font-body);
}
.filters__sort select {
  padding: .8125rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.35);
  background: transparent;
  color: inherit;
  font: 500 .875rem/1.2 var(--rz-font-body);
}
.filters__search input:focus,
.filters__sort select:focus {
  outline: none;
  border-color: var(--rz-pink, #e01c70);
  box-shadow: 0 0 0 3px rgba(224,28,112,.15);
}
.filters__reset { font-size: .8125rem; opacity: .7; }
.filters__result { margin-top: 1rem; font-size: .875rem; opacity: .8; }

/* ---- Raster met acts ------------------------------------------------ */
.grid-acts {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Drie op een rij op een breed scherm: bredere en minder hoge foto's.
     Op smallere schermen zakt het netjes naar twee en dan één. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .grid-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid-acts { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Niets gevonden ------------------------------------------------- */
.empty {
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  border: 1px dashed rgba(127,127,127,.3);
  border-radius: 18px;
}
.empty p { margin-inline: auto; max-width: 46ch; }

/* ---- Profielpagina: kop --------------------------------------------- */

.tag {
  display: inline-block;
  padding: .3125rem .75rem;
  border-radius: 999px;
  background: rgba(224,28,112,.12);
  color: var(--rz-pink, #e01c70);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
}
.tag:hover { background: var(--rz-pink, #e01c70); color: #fff; }
.tag--plain { background: rgba(127,127,127,.14); color: inherit; }
.tag--plain:hover { background: rgba(127,127,127,.2); color: inherit; }

/* ---- Feiten onder de titel ------------------------------------------ */

/* ---- Profielpagina: hoofdindeling ---------------------------------- */


/* ---- Prijzen -------------------------------------------------------- */
.price:hover { border-color: rgba(224,28,112,.35); }


.act-prices__note { margin-top: 1.25rem; font-size: .8125rem; opacity: .65; }

/* ---- Zijkolom ------------------------------------------------------- */



/* ---- Veelgestelde vragen ------------------------------------------- */
.faq { display: grid; gap: .625rem; }
.faq details {
  border: 1px solid rgba(127,127,127,.25);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.faq summary {
  font: 600 1rem/1.4 var(--rz-font-display);
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--rz-pink, #e01c70); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details[open] summary { margin-bottom: .625rem; }
.faq p { margin: 0; font-size: .9375rem; opacity: .85; }

/* ---- Formulieren ---------------------------------------------------- */
.contact-grid,
.offerte-grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: start;
}

.contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .875rem; }
.contact-list li { display: flex; gap: .75rem; align-items: center; font-size: .9375rem; }
.contact-list .ic { color: var(--rz-pink, #e01c70); flex: 0 0 auto; }

.steps { margin: 1.25rem 0 0; padding-left: 1.25rem; display: grid; gap: .75rem; }
.steps li { font-size: .9375rem; }
.offerte-intro__note { margin-top: 1.25rem; font-size: .8125rem; opacity: .65; }

.form-card {
  border: 1px solid rgba(127,127,127,.22);
  border-radius: 20px;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: rgba(127,127,127,.04);
}
.form-card__title { font: 600 1.25rem/1.2 var(--rz-font-display); margin: 0 0 1.25rem; }

.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form-trap { position: absolute; left: -9999px; }

.field label {
  display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem;
}
.field__opt { font-weight: 400; opacity: .55; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .8125rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,.3);
  background: var(--c-surface, transparent);
  color: inherit;
  font: 400 .9375rem/1.5 var(--rz-font-body);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--rz-pink, #e01c70);
  box-shadow: 0 0 0 3px rgba(224,28,112,.15);
}
.field textarea { resize: vertical; min-height: 130px; }
.field__error { margin: .375rem 0 0; font-size: .8125rem; color: #d81f5a; font-weight: 500; }

.form-note { margin: 0; font-size: .75rem; opacity: .6; }
.form-error {
  padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem;
  background: rgba(216,31,90,.1); color: #d81f5a; font-size: .875rem;
}
.form-done { text-align: center; padding: 1.5rem 0; }
.form-done h3 { font-size: 1.25rem; margin-bottom: .625rem; }
.form-done p { margin: 0 auto; max-width: 40ch; opacity: .8; }

/* ---- Smalle schermen ------------------------------------------------ */
@media (max-width: 900px) {
  .contact-grid,
  .offerte-grid { grid-template-columns: 1fr; }
}

/* ---- Zoekveld in de sitebalk ---------------------------------------- */
.header-search { position: relative; display: flex; align-items: center; }
.header-search input {
  width: 190px;
  padding: .5rem 2.25rem .5rem .875rem;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.3);
  background: transparent;
  color: inherit;
  font: 400 .8125rem/1.2 var(--rz-font-body);
  transition: width .2s cubic-bezier(.2,.7,.3,1), border-color .2s;
}
.header-search input:focus {
  width: 230px;
  outline: none;
  border-color: var(--rz-pink, #e01c70);
}
.header-search button {
  position: absolute; right: .375rem;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit; opacity: .6;
  cursor: pointer;
}
.header-search button:hover { opacity: 1; color: var(--rz-pink, #e01c70); }

@media (max-width: 1100px) { .header-search input { width: 150px; } }
@media (max-width: 900px)  { .header-search { display: none; } }

/* =====================================================================
   Spotify, optredens en evenementen (update 05)
   ===================================================================== */

/* ---- Spotify --------------------------------------------------------- */

/* ---- Optredens bij een act ------------------------------------------ */
.shows { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }

.show {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .875rem 1rem;
  border: 1px solid rgba(127,127,127,.22);
  border-radius: 14px;
}
.show:hover { border-color: rgba(224,28,112,.35); }

.show__date {
  flex: 0 0 62px;
  text-align: center;
  line-height: 1.1;
  padding: .375rem 0;
  border-radius: 10px;
  background: rgba(224,28,112,.1);
}
.show__day   { display: block; font: 700 1.25rem/1 var(--rz-font-display); color: var(--rz-pink, #e01c70); }
.show__month { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; }
.show__year  { display: block; font-size: .625rem; opacity: .55; }

.show__event { font: 600 1rem/1.3 var(--rz-font-display); color: inherit; }
.show__event:hover { color: var(--rz-pink, #e01c70); text-decoration: none; }
.show__meta { margin: .1875rem 0 0; font-size: .8125rem; opacity: .7; }

.show--past .show__date { background: rgba(127,127,127,.12); }
.show--past .show__day  { color: inherit; }

.shows-past { margin-top: 1rem; }
.shows-past summary {
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem 0;
  list-style: none;
}
.shows-past summary::-webkit-details-marker { display: none; }
.shows-past summary::before { content: '▸ '; color: var(--rz-pink, #e01c70); }
.shows-past[open] summary::before { content: '▾ '; }
.shows--past { margin-top: .625rem; opacity: .9; }

/* ---- Overzicht van evenementen -------------------------------------- */
.events-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.event-card {
  border: 1px solid rgba(127,127,127,.22);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.event-card:hover { border-color: rgba(224,28,112,.4); transform: translateY(-3px); }
.event-card__link { color: inherit; display: block; }
.event-card__link:hover { text-decoration: none; }

.event-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: rgba(127,127,127,.12);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.event-card__media img { width: 100%; height: 100%; object-fit: cover; }
.event-card__fallback {
  font: 700 2.25rem/1 var(--rz-font-display);
  color: var(--rz-pink, #e01c70);
  letter-spacing: -.03em;
}
.event-card__badge {
  position: absolute; left: .75rem; top: .75rem;
  background: var(--rz-pink, #e01c70); color: #fff;
  font-size: .6875rem; font-weight: 600;
  padding: .25rem .625rem; border-radius: 999px;
}

.event-card__body { padding: 1.125rem 1.25rem 1.25rem; }
.event-card__name { font-size: 1.125rem; margin: 0 0 .25rem; }
.event-card__city { margin: 0 0 .5rem; font-size: .8125rem; color: var(--rz-pink, #e01c70); font-weight: 600; }
.event-card__text { margin: 0 0 .625rem; font-size: .875rem; opacity: .75; }
.event-card__meta { margin: 0; font-size: .75rem; opacity: .6; }

/* ---- Jaargangen ------------------------------------------------------ */
.editions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.editions__label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em;
  opacity: .55; margin-right: .25rem;
}
.edition-chip {
  padding: .4375rem .875rem;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.3);
  font-size: .8125rem;
  font-weight: 600;
  color: inherit;
}
.edition-chip:hover { border-color: var(--rz-pink, #e01c70); color: var(--rz-pink, #e01c70); text-decoration: none; }
.edition-chip.is-active {
  background: var(--rz-pink, #e01c70);
  border-color: var(--rz-pink, #e01c70);
  color: #fff;
}

/* ---- Het programma --------------------------------------------------- */
.program { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.program__date {
  font-size: 1.125rem;
  margin: 0 0 .875rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid rgba(224,28,112,.25);
}
.program__stage {
  margin: 1.25rem 0 .5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rz-pink, #e01c70);
}

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

.program__slot {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .75rem .875rem;
  border-radius: 10px;
}
.program__slot:nth-child(odd) { background: rgba(127,127,127,.06); }
.program__slot--eigen { box-shadow: inset 3px 0 0 var(--rz-pink, #e01c70); }

.program__time {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  font-weight: 600;
  opacity: .75;
  white-space: nowrap;
}
.program__act { font: 600 1rem/1.4 var(--rz-font-display); }
.program__act a { color: inherit; }
.program__act a:hover { color: var(--rz-pink, #e01c70); text-decoration: none; }
.program__note {
  display: block;
  font: 400 .8125rem/1.4 var(--rz-font-body);
  opacity: .65;
}
.program__where { font-size: .75rem; opacity: .55; white-space: nowrap; }

@media (max-width: 640px) {
  .program__slot { grid-template-columns: 1fr; gap: .1875rem; padding: .875rem; }
  .program__where { display: none; }
  .show { flex-wrap: wrap; }
}

/* Toelichting onder een sectiekop en bij het programma */
.section-head__note {
  margin: .5rem 0 0;
  font-size: .875rem;
  opacity: .7;
  max-width: 54ch;
}
.program__bron {
  margin: -.5rem 0 1.5rem;
  font-size: .8125rem;
  opacity: .6;
}

/* =====================================================================
   Profielpagina van een act
   Twee kolommen met een boekingskaart die blijft meelopen bij het scrollen.
   ===================================================================== */

.profiel { padding-bottom: clamp(2rem, 5vw, 4rem); }

.profiel__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;          /* nodig, anders werkt sticky niet */
}

/* Zonder min-width: 0 weigert een rasterkolom te krimpen zodra er iets
   breeds in staat. Dit is de standaardoplossing daarvoor. */
.profiel__main,
.profiel__aside { min-width: 0; }

.profiel__main > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---- De kaart die blijft staan --------------------------------------- */
.profiel__aside {
  position: sticky;
  top: calc(var(--head-h-sm) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--head-h-sm) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.profiel__aside::-webkit-scrollbar { width: 6px; }
.profiel__aside::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

.boekkaart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(8, 8, 10, .10);
}

/* De roze kop met de schuine snede uit de huisstijl */
.boekkaart__kop {
  margin: 0;
  padding: 1rem 1.375rem;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  position: relative;
}
.boekkaart__kop::after {
  content: '';
  position: absolute;
  right: 0; bottom: -1px;
  border-style: solid;
  border-width: 0 0 14px 22px;
  border-color: transparent transparent var(--surface) transparent;
}

.boekkaart__body { padding: 1.375rem; }

.boekkaart__label {
  margin: 0 0 .25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.boekkaart__prijs {
  margin: 0;
  font-family: var(--rz-font-display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.boekkaart__prijs--aanvraag { font-size: clamp(1.375rem, 2.4vw, 1.625rem); }
.boekkaart__excl { margin: .25rem 0 1.25rem; font-size: .8125rem; color: var(--muted); }

.boekkaart__specs {
  margin: 0 0 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  display: grid;
  gap: .75rem;
}
.boekkaart__specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.boekkaart__specs dt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--muted);
}
.boekkaart__specs dt .ic { color: var(--pink); flex: 0 0 auto; }
.boekkaart__specs dd {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  text-align: right;
}

.boekkaart .btn { margin-bottom: .625rem; }




.boekkaart__fav {
  width: 100%;
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: .8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
}
.boekkaart__fav:hover { border-color: var(--pink); color: var(--pink); }
.boekkaart__fav[aria-pressed="true"] { background: var(--pink-soft); border-color: var(--pink); color: var(--pink); }


/* ---- Kop van de act --------------------------------------------------- */
.act-top {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  min-height: clamp(320px, 42vw, 460px);
  display: flex;
  align-items: flex-end;
}

.act-top__media { position: absolute; inset: 0; }
.act-top__media img { width: 100%; height: 100%; object-fit: cover; }
.act-top__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.15) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.92) 100%);
}
.act-top__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--rz-font-display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: clamp(3rem, 10vw, 6rem);
  color: var(--pink);
}

.act-top__body {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  width: 100%;
}

.act-top__label {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .625rem;
}

.act-top__title {
  color: #fff;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.02;
  margin: 0 0 .5rem;
}

.act-top__sub {
  color: rgba(255,255,255,.85);
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  font-weight: 500;
  margin: 0 0 1.125rem;
  max-width: 46ch;
}

.act-chips {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .875rem;
}
.act-chips li {
  display: flex;
  align-items: center;
  gap: .4375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
}
.act-chips .ic { color: var(--pink); }

.act-top__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Blokken in de hoofdkolom ---------------------------------------- */
.act-blok > .eyebrow { margin-bottom: .5rem; }
.act-blok > .h-section { margin-bottom: 1rem; }
.act-blok > .lead { margin-bottom: 1rem; }

.act-spotify { width: 100%; border: 0; border-radius: var(--r); display: block; }

.act-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.act-gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; }
.act-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---- Pakketten -------------------------------------------------------- */
.pakketten {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
}

.pakket {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.375rem;
}

.pakket--uit {
  border-color: var(--pink);
  box-shadow: 0 0 0 1px var(--pink), 0 16px 36px rgba(224, 28, 112, .14);
}

.pakket__vlag {
  position: absolute;
  top: -.6875rem;
  left: 1.375rem;
  background: var(--pink);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3125rem .75rem;
  border-radius: 999px;
}

.pakket__naam { font-size: 1.0625rem; margin: 0 0 .25rem; }
.pakket__sub { margin: 0 0 1rem; font-size: .8125rem; color: var(--muted); }

.pakket__lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pakket__lijst li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
}
.pakket__lijst .ic { color: var(--pink); flex: 0 0 auto; margin-top: .1875rem; }

.pakket__opmerking { margin: 0 0 1rem; font-size: .75rem; color: var(--muted); }

.pakket__voet { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-2); }

.pakket__prijs {
  margin: 0 0 .875rem;
  font-family: var(--rz-font-display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
}
.pakket__prijs--aanvraag { font-size: 1.125rem; }
.pakket__prijs small {
  display: block;
  margin-top: .1875rem;
  font-family: var(--rz-font-body, 'Manrope', sans-serif);
  font-weight: 400;
  font-size: .6875rem;
  color: var(--muted);
}

.act-prices__note { margin-top: 1rem; font-size: .8125rem; color: var(--muted); }

/* ---- Stappen ---------------------------------------------------------- */
.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  counter-reset: stap;
}

.stap { display: flex; gap: .875rem; align-items: flex-start; }

.stap__nr {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pink-soft);
  color: var(--pink);
  font-family: var(--rz-font-display, 'Outfit', sans-serif);
  font-weight: 700;
}

.stap__titel { font-size: .9375rem; margin: 0 0 .1875rem; text-transform: uppercase; letter-spacing: .06em; }
.stap__tekst { margin: 0; font-size: .8125rem; color: var(--muted); }

/* ---- Kleinere knop ---------------------------------------------------- */
.btn--sm { padding: .625rem 1.125rem; font-size: .8125rem; }
.btn--full { width: 100%; }

/* ---- Smallere schermen ------------------------------------------------ */
@media (max-width: 1080px) {
  /* minmax(0, 1fr) en niet 1fr: '1fr' is kort voor minmax(auto, 1fr), en dan
     kan de kolom niet smaller worden dan zijn breedste inhoud. Eén brede
     tabel of carrousel duwt de hele pagina dan voorbij de schermrand. */
  .profiel__layout { grid-template-columns: minmax(0, 1fr); }

  /* Op smal blijft de kaart niet plakken, maar staat hij bovenaan de inhoud */
  .profiel__aside {
    position: static;
    max-height: none;
    overflow: visible;
    order: -1;
  }
  .profiel__main > * + * { margin-top: clamp(2rem, 6vw, 3rem); }
}

@media (max-width: 640px) {
  .act-top { min-height: 280px; }
  .act-top__actions .btn { width: 100%; }
  .pakketten { grid-template-columns: 1fr; }
}

/* ---- Carrousel met vergelijkbare acts, binnen de kolom ---------------- */
.act-blok__kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.act-blok__kop .eyebrow { margin-bottom: .375rem; }
.act-blok__kop .h-section { margin-bottom: 0; }

/* Smallere kaarten dan op de homepage, want de kolom is smaller.
   Zo staan er ongeveer drie naast elkaar, met de vierde half zichtbaar
   zodat meteen duidelijk is dat je verder kunt schuiven. */
.rail--kolom { grid-auto-columns: minmax(184px, 31%); }

.act-blok--rail .link-more { margin-top: 1rem; display: inline-flex; }

/* De carrousel mag tot net buiten de kolom doorlopen, dat leest prettiger */
@media (min-width: 1081px) {
  .act-blok--rail .rail-wrap {
    margin-right: calc(var(--gap) * -1);
    padding-right: var(--gap);
  }
}

@media (max-width: 1080px) {
  .rail--kolom { grid-auto-columns: minmax(180px, 46vw); }
}

@media (max-width: 640px) {
  .rail--kolom { grid-auto-columns: minmax(170px, 68vw); }
  .act-blok__kop { align-items: flex-start; }
}

/* =====================================================================
   Lopende tekst
   Globaal staat p { margin: 0 }, dus binnen een tekstblok zetten we de
   ruimte tussen alinea's hier expliciet weer aan. Zonder dit lopen de
   alinea's uit de editor aan elkaar vast.
   ===================================================================== */
.prose {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 72ch;
}

/* Alle blokken krijgen hun ruimte ónder zich, met dezelfde specificiteit.
   Dat is bewust: eerder stond hier een regel met * + * die door .prose p
   werd overruled, waardoor alinea's tegen elkaar aan liepen. */
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose figure,
.prose hr,
.prose h2,
.prose h3,
.prose h4 { margin: 0 0 1.15em; }

/* Onder het laatste blok hoort geen ruimte meer */
.prose > :last-child { margin-bottom: 0; }

/* Een kop hoort bij de tekst eronder: veel lucht ervoor, weinig erna */
.prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 1.9em; margin-bottom: .55em; }
.prose h3 { font-size: clamp(1.0625rem, 1.8vw, 1.1875rem); margin-top: 1.6em; margin-bottom: .5em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.4em; margin-bottom: .45em; }

.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child { margin-top: 0; }

.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose u { text-decoration-thickness: 1px; text-underline-offset: .15em; }

.prose ul,
.prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--pink); }

.prose a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--pink-700); }

.prose blockquote {
  padding: .25em 0 .25em 1.25em;
  border-left: 3px solid var(--pink);
  color: var(--muted);
  font-size: 1.0625rem;
}

.prose hr { border: 0; border-top: 1px solid var(--line); }

/* =====================================================================
   Lange tekst inkorten met een knop
   De klasse wordt door het script gezet, en alleen als de tekst echt
   langer is dan de ruimte. Zonder JavaScript staat de tekst dus volledig
   in beeld en blijft de knop verborgen.
   ===================================================================== */
.inkort { position: relative; }

.inkort.is-ingekort {
  max-height: 22rem;
  overflow: hidden;
}

/* Zachte overgang naar de achtergrond, zodat het afbreken niet hard aanvoelt */
.inkort.is-ingekort::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 92%);
}

.inkort__knop {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Het pijltje kantelt mee met de stand van de knop */
.inkort__knop .ic-arrow {
  transform: rotate(90deg);
  transition: transform .2s var(--ease);
}
.inkort__knop[aria-expanded="true"] .ic-arrow { transform: rotate(-90deg); }

@media (max-width: 640px) {
  .inkort.is-ingekort { max-height: 18rem; }
}

/* =====================================================================
   Repertoire
   ===================================================================== */
.repertoire {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}

.repertoire__regel {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .75rem .25rem;
  border-bottom: 1px solid var(--line-2);
}
.repertoire__regel:hover { background: var(--surface-2); }

.repertoire__jaar {
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  font-weight: 700;
  color: var(--pink);
}
.repertoire__jaar--leeg { color: var(--line); }

.repertoire__titel { font-weight: 600; }

.repertoire__artiest {
  font-size: .8125rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

/* Een toelichting krijgt een eigen regel onder de titel */
.repertoire__toelichting {
  grid-column: 2 / -1;
  font-size: .75rem;
  color: var(--muted);
}

/* Regels die het script boven de limiet verbergt */
.repertoire__regel[hidden] { display: none; }

@media (max-width: 640px) {
  .repertoire__regel {
    grid-template-columns: 3.25rem minmax(0, 1fr);
  }
  .repertoire__artiest {
    grid-column: 2;
    text-align: left;
    white-space: normal;
  }
}

/* =====================================================================
   Hoe werkt het boeken, over de volle breedte onderaan de profielpagina
   ===================================================================== */
.stappen-blok__kop { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.stappen-blok__kop .eyebrow { margin-bottom: .5rem; }
.stappen-blok__kop .h-section { margin-bottom: 0; }

/* Vier gelijke kolommen op een breed scherm, zodat het een duidelijke
   route van links naar rechts wordt in plaats van een raster dat afbreekt. */
.stappen--breed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }

/* Verbindingslijntje tussen de nummers: het leest als één route */
.stappen--breed .stap { position: relative; }
.stappen--breed .stap:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 38px;
  top: 19px;
  width: calc(100% - 38px + clamp(1rem, 2.5vw, 2rem));
  height: 1px;
  background: linear-gradient(90deg, var(--pink-soft) 0%, var(--line) 100%);
  pointer-events: none;
}

.stappen-blok__actie {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (max-width: 900px) {
  .stappen--breed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Het lijntje klopt niet meer bij twee kolommen, dus dan weg */
  .stappen--breed .stap::before { display: none; }
}

@media (max-width: 560px) {
  .stappen--breed { grid-template-columns: 1fr; }
  .stappen-blok__actie .btn { width: 100%; }
}

/* =====================================================================
   Video
   De speler wordt pas geladen bij een klik. Tot dat moment staat er een
   voorbeeldafbeelding met een playknop: snel, en zonder cookies van YouTube.
   ===================================================================== */
.videospeler {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
}

.videospeler__beeld {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* De standaardminiatuur van YouTube heeft zwarte balken; die snijden we weg */
  transform: scale(1.35);
}

.videospeler iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.videospeler__knop {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 0;
  cursor: pointer;
  color: #fff;
  text-align: left;
  background: linear-gradient(180deg, rgba(8,8,10,.1) 0%, rgba(8,8,10,.75) 100%);
  transition: background .2s var(--ease);
}
.videospeler__knop:hover { background: linear-gradient(180deg, rgba(8,8,10,.2) 0%, rgba(8,8,10,.85) 100%); }

/* Roze playknop in de huisstijl */
.videospeler__play {
  flex: 0 0 auto;
  width: clamp(52px, 6vw, 68px);
  height: clamp(52px, 6vw, 68px);
  border-radius: 50%;
  background: var(--pink);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(224, 28, 112, .45);
  transition: transform .2s var(--ease);
}
.videospeler__play::after {
  content: '';
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.videospeler__knop:hover .videospeler__play { transform: scale(1.08); }

.videospeler__label {
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.2;
}
.videospeler__label small {
  display: block;
  margin-top: .1875rem;
  font-family: var(--rz-font-body);
  font-weight: 500;
  font-size: .8125rem;
  opacity: .8;
}

/* ---- Keuzelijst met de andere video's -------------------------------- */
.videokeuze {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: .625rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.videokeuze__item {
  width: 100%;
  display: flex;
  gap: .625rem;
  align-items: center;
  padding: .375rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.videokeuze__item:hover { border-color: var(--pink); }
.videokeuze__item.is-actief { border-color: var(--pink); background: var(--pink-soft); }

.videokeuze__item img,
.videokeuze__leeg {
  flex: 0 0 72px;
  width: 72px;
  height: 44px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--surface-2);
}

.videokeuze__tekst { min-width: 0; }
.videokeuze__soort {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}
.videokeuze__titel {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =====================================================================
   Spotlight: artikelen
   ===================================================================== */
.artikelen {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.artikel-kaart {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.artikel-kaart:hover {
  border-color: var(--pink);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(8,8,10,.10);
}

.artikel-kaart__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.artikel-kaart__link:hover { text-decoration: none; }

.artikel-kaart__beeld {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.artikel-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }

.artikel-kaart__leeg {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 3rem;
  color: var(--pink);
}

.artikel-kaart__soort {
  position: absolute;
  left: .75rem;
  top: .75rem;
  background: var(--pink);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: 999px;
}

.artikel-kaart__body { display: flex; flex-direction: column; gap: .375rem; padding: 1.125rem 1.25rem 1.25rem; flex: 1; }
.artikel-kaart__datum { font-size: .75rem; color: var(--muted); }
.artikel-kaart__titel { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.artikel-kaart__tekst { font-size: .875rem; color: var(--muted); }
.artikel-kaart__meer {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* ---- Het artikel zelf ------------------------------------------------ */
.artikel__kop { padding-block: clamp(1rem, 3vw, 2rem) 0; }
.artikel__kop h1 { font-size: clamp(1.875rem, 4.5vw, 3rem); margin-bottom: .625rem; }
.artikel__sub { font-size: 1.125rem; font-weight: 500; opacity: .8; margin-bottom: 1rem; }

.artikel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1rem;
  font-size: .8125rem;
  color: var(--muted);
}
.artikel__soort {
  background: var(--pink-soft);
  color: var(--pink);
  font-weight: 700;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: 999px;
}

.artikel__beeld { margin: clamp(1.5rem, 3vw, 2.5rem) auto; }
.artikel__beeld img { width: 100%; border-radius: var(--r-lg); }

.artikel__tekst { font-size: 1.0625rem; }

.artikel__voet {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.artikel__auteur { font-size: .875rem; color: var(--muted); margin: 0; }

/* ---- Paginering ------------------------------------------------------ */
.paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.paginering__stand { font-size: .875rem; color: var(--muted); }

/* =====================================================================
   Labelveld: gekozen artiesten als losse blokjes
   ===================================================================== */
.labelveld.is-actief {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  padding: .5rem .625rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: text;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.labelveld.is-actief:focus-within {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-soft);
}

.labelveld__lijst { display: contents; list-style: none; margin: 0; padding: 0; }

.labelveld__label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .375rem .3125rem .625rem;
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink);
  font-size: .8125rem;
  font-weight: 600;
  max-width: 100%;
}
.labelveld__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.labelveld__weg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.labelveld__weg:hover { background: var(--pink); color: #fff; }

.labelveld__invoer {
  flex: 1 1 12ch;
  min-width: 12ch;
  border: 0;
  background: transparent;
  padding: .3125rem 0;
  font: inherit;
  color: inherit;
}
.labelveld__invoer:focus { outline: none; }

.field__hint { margin: .375rem 0 0; font-size: .8125rem; color: var(--muted); }

/* =====================================================================
   Vangnet tegen te brede inhoud op smalle schermen
   De body knipt overtollige breedte af zonder schuifbalk (nodig voor de
   meelopende kaart), dus een te breed element valt niet op maar is wel
   stuk. Deze regels voorkomen dat het zover komt.
   ===================================================================== */

/* Een lange naam zonder spaties mag afbreken in plaats van uit te steken */
h1, h2, h3, h4,
.act-top__title,
.artikel-kaart__titel,
.card-act__title { overflow-wrap: break-word; }

/* Kruimelpad mag schuiven in plaats van de pagina te verbreden */
.crumbs ol {
  flex-wrap: wrap;
  min-width: 0;
}

/* De uitvoerder bij een nummer mocht niet afbreken; bij een lange naam
   duwde dat de regel te breed. Nu breekt hij netjes af. */
.repertoire__artiest { white-space: normal; }

/* Rasterkinderen mogen altijd krimpen */
.grid-acts > *,
.artikelen > *,
.pakketten > *,
.videokeuze > *,
.stappen > * { min-width: 0; }

/* Foutmeldingen boven een formulier */
.form-error {
  margin: 0 0 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--r-sm);
  background: var(--pink-soft);
  border-left: 3px solid var(--pink);
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
}
.form-error p { margin: 0 0 .375rem; }
.form-error ul { margin: 0; padding-left: 1.25rem; font-weight: 500; }
.form-error li { margin-bottom: .1875rem; }

/* Melding onder de bedankt-tekst over de favorietenlijst */
.form-done__lijst {
  margin: .75rem 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* =====================================================================
   Kijk ook eens bij: labels naar andere pagina's
   ===================================================================== */
.verder__kop {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.verder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.verder__label {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5rem .875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  color: inherit;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.verder__label:hover {
  border-color: var(--pink);
  background: var(--pink-soft);
  color: var(--pink);
  text-decoration: none;
}
.verder__label .ic { font-size: .875em; opacity: .6; }
.verder__label:hover .ic { opacity: 1; }

/* =====================================================================
   Kaart: titel op vaste hoogte, twee regels tekst, rest bij aanwijzen
   ===================================================================== */

/* De inhoud zit onderaan. De teksthoogte is vast, zodat álle namen in een
   rij op precies dezelfde hoogte staan, ook als de ene act een korte en de
   andere een lange ondertitel heeft. */
.card-act__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.card-act__role {
  /* Precies twee regels, ook bij minder tekst: daardoor blijft de titel staan */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.45em);
  line-height: 1.45;
  transition: max-height .28s var(--ease);
}

/* Bij aanwijzen komt de rest van de tekst tevoorschijn. De kaart is even
   hoog gebleven, dus het blok groeit naar boven. Dat gebeurt bij één kaart
   tegelijk, dus de rij blijft rustig. */
.card-act:hover .card-act__role,
.card-act:focus-visible .card-act__role {
  -webkit-line-clamp: 6;
}

/* Iets meer verduistering bij aanwijzen, anders wordt de extra tekst
   onleesbaar over een lichte foto. */
.card-act::after { transition: opacity .28s var(--ease); }
.card-act:hover::after { opacity: 1; }

/* ---- Het tariefslabel ------------------------------------------------ */
.card-act__tarief {
  display: inline-block;
  margin-top: .5rem;
  padding: .25rem .625rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Op de kleine kaarten in een carrousel is er minder ruimte */
.card-shell--sm .card-act__role { -webkit-line-clamp: 1; min-height: 1.45em; }
.card-shell--sm .card-act:hover .card-act__role { -webkit-line-clamp: 4; }

/* ---- Pakketten als carrousel ----------------------------------------- */
.rail--pakketten {
  /* Drie naast elkaar met de vierde half zichtbaar: zo zie je meteen dat
     er meer is. De kaarten moeten wel even hoog worden. */
  grid-auto-columns: minmax(216px, 31%);
  align-items: stretch;
  padding-block: .75rem;   /* ruimte voor het vlaggetje "meest gekozen" */
}

.rail--pakketten .pakket {
  height: 100%;
  min-width: 0;
}

/* Het roze vlaggetje steekt boven de kaart uit; in een carrousel met
   overflow zou dat worden afgeknipt zonder die extra ruimte hierboven. */

@media (max-width: 1080px) {
  .rail--pakketten { grid-auto-columns: minmax(210px, 46%); }
}
@media (max-width: 640px) {
  .rail--pakketten { grid-auto-columns: minmax(200px, 78%); }
}

/* =====================================================================
   Kop met twee kolommen: tekst links, beeld rechts
   Voor overzichten en landingspagina's met een afbeelding.
   ===================================================================== */
.page-hero--split {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
  background: var(--bg);
}

.page-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}

.page-hero__tekst { min-width: 0; }

.page-hero--split .page-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.02;
  margin: .375rem 0 0;
}

/* Het roze streepje onder de titel */
.page-hero__streep {
  display: block;
  width: 96px;
  height: 3px;
  margin: 1.125rem 0 1.25rem;
  border-radius: 2px;
  background: var(--pink);
}

.page-hero--split .lead {
  max-width: 40ch;
  margin: 0;
}

.page-hero__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: clamp(1.25rem, 3vw, 1.875rem);
}
.page-hero--split .page-hero__count { margin: 0; font-size: .875rem; color: var(--muted); }

/* Het beeld: zelfde ronding en snede als de kaarten, zodat het bij de rest past */
.page-hero__beeld {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--surface-2);
}
.page-hero__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

@media (max-width: 900px) {
  /* Onder elkaar, met het beeld eerst: dat leest op een telefoon prettiger */
  .page-hero__split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .page-hero__beeld { order: -1; aspect-ratio: 16 / 10; }
  .page-hero--split .lead { max-width: none; }
}

@media (max-width: 560px) {
  .page-hero__acties .btn { width: 100%; justify-content: center; }
}