/* Remote Receptions, één stylesheet. Waarden uit ontwerp/STIJLGIDS-WEB.md (brandbook GKR 1.0).
   Telefoon eerst; breekpunten 600, 768, 1024 en 1280 px. Geen framework, geen schaduw, geen verloop. */

/* ── lettertypes (zelf gehost, latin) ── */
@font-face {
  font-family: "Red Hat Display";
  src: url(/assets/fonts/red-hat-display-latin.woff2) format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  src: url(/assets/fonts/dm-sans-latin.woff2) format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "RR terugval tekst"; src: local("Arial"); size-adjust: 104.7%; ascent-override: 94.7%; descent-override: 29.6%; line-gap-override: 0%; }
@font-face { font-family: "RR terugval kop"; src: local("Arial Bold"), local("Arial"); font-weight: 700; size-adjust: 97.2%; ascent-override: 104.7%; descent-override: 31.4%; line-gap-override: 0%; }

/* ── tokens ── */
:root {
  --leisteen: #2E3A33;
  --salie: #9DBF9E;
  --diep-salie: #4F7A55;
  --gebroken-wit: #F1EFEA;
  --wit: #FFFFFF;
  --grijsgroen: #4A544E;
  --lichte-salie: #EBF2EC;
  --grijsgroen-70: #808783;
  --grijsgroen-20: #DBDDDC;

  --tekst: var(--leisteen);
  --tekst-steun: var(--grijsgroen);
  --vlak: var(--gebroken-wit);
  --lijn: var(--grijsgroen-20);
  --rand-veld: var(--grijsgroen-70);
  --focus: var(--diep-salie);
  --watermerk: var(--grijsgroen);

  --font-kop: "Red Hat Display", "RR terugval kop", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-tekst: "DM Sans", "RR terugval tekst", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-opening: clamp(2.25rem, 1.663rem + 2.609vw, 3.75rem);
  --fs-h1: clamp(2.125rem, 1.685rem + 1.957vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.457rem + 1.304vw, 2.5rem);
  --fs-h3: clamp(1.3125rem, 1.239rem + 0.326vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-vraag: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);
  --fs-merkzin: clamp(1.625rem, 1.283rem + 1.522vw, 2.5rem);
  --fs-inleiding: clamp(1.125rem, 1.076rem + 0.217vw, 1.25rem);
  --fs-tekst: clamp(1.0625rem, 1.038rem + 0.109vw, 1.125rem);
  --fs-klein: 0.9375rem;
  --fs-boven: clamp(0.875rem, 0.851rem + 0.109vw, 0.9375rem);

  --kader: 75rem;
  --rand: clamp(1.25rem, 0.761rem + 2.174vw, 2.5rem);
  --sectie: clamp(4rem, 2.826rem + 5.217vw, 7rem);
  --na-kopregel: clamp(3rem, 2.413rem + 2.609vw, 4.5rem);
  --maat-tekst: 37.5rem;
  --kophoogte: 64px;
}
@media (min-width: 600px) { :root { --kophoogte: 72px; } }
@media (min-width: 1280px) { :root { --kophoogte: 80px; } }

/* ── basis ── */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kophoogte) + 16px); }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 400 var(--fs-tekst)/1.6 var(--font-tekst); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
::selection { background: var(--salie); color: var(--leisteen); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-kop); font-weight: 700; color: inherit; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.01em; max-width: 20em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4, .h4-maat { font-size: var(--fs-h4); line-height: 1.3; }
.h3-maat { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: 0; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
em { font-style: normal; font-weight: 500; }
h1 em, h2 em { font-weight: inherit; color: var(--diep-salie); }
small { font-size: var(--fs-klein); }
a { color: var(--diep-salie); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.stroom > * + * { margin-top: 1em; }
.klein { max-width: 34rem; font-size: var(--fs-klein); line-height: 1.5; color: var(--tekst-steun); }
.inleiding { font-size: var(--fs-inleiding); line-height: 1.55; max-width: var(--maat-tekst); }
.nadruk { font-weight: 600; }

/* ── kader en secties ── */
.kader { max-width: calc(var(--kader) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sectie { padding-block: var(--sectie); }
.sectie--band { background: var(--vlak); }
.sectie:not(.sectie--band) + .sectie:not(.sectie--band), .opening + .sectie:not(.sectie--band) { padding-top: 0; }
.kopregel + .sectie { padding-top: var(--na-kopregel); }

/* licht vlak (gebroken wit, lichte salie): links en bovenregels in leisteen en grijsgroen */
.sectie--band a:not(.knop), .notitie a, .succes a { color: var(--leisteen); }
.sectie--band .boven { color: var(--grijsgroen); }

/* ── overslaanlink ── */
.overslaan { position: absolute; left: 8px; top: -200px; z-index: 30; padding: 12px 16px; border-radius: 8px; background: var(--leisteen); color: var(--wit); font: 700 1rem/1.2 var(--font-tekst); text-decoration: none; }
.overslaan:focus { top: 8px; }

/* ── kop en navigatie ── */
.kop { position: sticky; top: 0; z-index: 20; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop__binnen { display: flex; align-items: center; gap: 8px; height: var(--kophoogte); }
.kop__logo { display: block; flex: none; margin-right: auto; padding-block: 8px; border-radius: 4px; }
.kop__logo img { width: 160px; height: auto; }
.kop .kop__knop { display: none; }
.menuknop { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--leisteen); border-radius: 8px; background: var(--wit); color: var(--leisteen); font: 600 1rem/1 var(--font-tekst); text-decoration: none; cursor: pointer; }
.menuknop:hover { background: var(--lichte-salie); }
.menuknop svg { width: 18px; height: 18px; }
.menuknop__dicht { display: none; }
.menu-open .menuknop__open { display: none; }
.menu-open .menuknop__dicht { display: block; }
.menu { display: none; position: fixed; top: var(--kophoogte); left: 0; right: 0; height: calc(100vh - var(--kophoogte)); height: calc(100dvh - var(--kophoogte)); overflow: auto; overscroll-behavior: contain; padding: 8px var(--rand) 32px; background: var(--wit); border-top: 1px solid var(--lijn); }
.menu-open .menu { display: block; }
.menu-open, .menu-open body { overflow: hidden; }
.menu__lijst { list-style: none; padding: 0; }
.menu__item a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--lijn); color: var(--leisteen); font: 500 1.25rem/1.2 var(--font-tekst); text-decoration: none; }
.menu__item a:hover { color: var(--diep-salie); }
.menu__item a[aria-current="page"] { color: var(--diep-salie); font-weight: 600; }
.menu__knop { width: 100%; margin-top: 24px; }
@media (min-width: 600px) {
  .kop .kop__knop { display: inline-flex; }
}
@media (min-width: 1280px) {
  .kop__binnen { gap: 0; }
  .kop__logo { margin-right: 0; padding-block: 16px; }
  .kop__logo img { width: 176px; }
  .menuknop { display: none; }
  .menu, .menu-open .menu { display: flex; position: static; height: auto; overflow: visible; padding: 0; margin: 0 auto 0 48px; border: 0; background: none; }
  .menu__lijst { display: flex; align-items: center; gap: 28px; }
  .menu .menu__item--extra, .menu .menu__knop { display: none; }
  .menu__item a { position: relative; min-height: 44px; border: 0; font-size: 1rem; border-radius: 4px; }
  .menu__item a[aria-current="page"] { color: var(--leisteen); font-weight: 500; }
  .menu__item a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--diep-salie); }
  .menu-open, .menu-open body { overflow: visible; }
}

/* ── knoppen ── */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; font: 700 1rem/1.2 var(--font-tekst); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.knop svg, .stil svg { width: 16px; height: 16px; flex: none; }
.knop:active { transform: translateY(1px); }
.knop--primair { background: var(--leisteen); color: var(--wit); }
.knop--primair:hover, .knop--primair:active { background: var(--diep-salie); color: var(--wit); }
.knop--primair:disabled { background: var(--grijsgroen-20); color: var(--grijsgroen); cursor: not-allowed; transform: none; }
.knop--compact { min-height: 44px; padding: 0 20px; }
.knop--op-donker { background: var(--salie); color: var(--leisteen); }
.knop--op-donker:hover, .knop--op-donker:active { background: var(--lichte-salie); color: var(--leisteen); }
.knop--secundair { background: transparent; border: 1.5px solid var(--leisteen); color: var(--leisteen); }
.knop--secundair:hover, .knop--secundair:active { background: var(--lichte-salie); color: var(--leisteen); }

/* stille link: tekst met pijl, geen knop */
.stil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 4px; color: var(--diep-salie); font: 700 1rem/1.2 var(--font-tekst); text-decoration: none; }
.stil:hover { color: var(--leisteen); }
.stil:hover span { text-decoration: underline 2px; text-underline-offset: 0.25em; }
.sectie--band .stil { color: var(--leisteen); }
.donker .stil, .donker .stil:hover, .voet .stil, .voet .stil:hover { color: var(--gebroken-wit); }

/* ── donkere panelen: contactband en kaarten op leisteen ── */
.donker { background: var(--leisteen); color: var(--gebroken-wit); }
.donker :focus-visible, .voet__paneel :focus-visible { outline-color: var(--gebroken-wit); }
.donker .boven { color: var(--salie); }
.donker h1 em, .donker h2 em { color: var(--salie); }
.donker a:not(.knop):not(.stil) { color: var(--salie); }
.donker .icoon, .bericht--ai .icoon { color: var(--gebroken-wit); }
.donker .icoon .accent, .bericht--ai .icoon .accent { fill: var(--salie); }
.paneel { position: relative; overflow: hidden; border-radius: 24px; }
.paneel__tekst { position: relative; z-index: 1; }
.watermerk { display: none; }
.contactband .paneel__tekst { padding: 40px 24px; }
.contactband h2 { max-width: 16em; }
.contactband p { max-width: 34rem; margin: 16px 0 32px; }
@media (min-width: 768px) { .contactband .paneel__tekst { padding: 64px 56px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .contactband .watermerk { width: 25%; } }
@media (min-width: 1024px) {
  .contactband .paneel__tekst { max-width: 60%; padding: 72px 64px; }
  /* zoals brandbook p. 33: alleen rechts en onder afgesneden, nooit onder tekst */
  .watermerk { display: block; position: absolute; top: 32px; right: -3%; width: min(30%, 340px); aspect-ratio: 190 / 208.736; background-color: var(--watermerk); -webkit-mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; }
}

/* ── bovenregel: een korte tekst, geen stip (Martijn 4-11) ── */
.boven { margin-bottom: 14px; color: var(--grijsgroen); font: 600 var(--fs-boven)/1.3 var(--font-tekst); letter-spacing: 0.02em; }

/* ── pil boven de kop op home: lichte salie, leisteen tekst, pijltje; link naar /pakketten ── */
.pil { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 36px; margin-bottom: 22px; padding: 4px 5px 4px 16px; border: 1px solid var(--salie); border-radius: 999px; background: var(--lichte-salie); color: var(--leisteen); font: 600 var(--fs-boven)/1.3 var(--font-tekst); letter-spacing: 0.01em; text-decoration: none; transition: background-color 200ms ease-out; }
.pil::after { content: ""; position: absolute; inset: -5px 0; }
.pil__pijl { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wit); }
.pil:hover { background: var(--salie); }

/* ── kopregel (subpagina's): gecentreerd, veel wit ── */
.kopregel { padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.kopregel__binnen { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kopregel h1 { max-width: 16em; }
.kopregel .inleiding { margin-top: 20px; max-width: 36rem; }
.kopregel .acties { margin-top: 32px; }
.kopregel + .sectie { padding-top: var(--na-kopregel); }

/* ── sectiekop in het midden ── */
.kop-midden { display: flex; flex-direction: column; align-items: center; max-width: 46rem; margin: 0 auto 40px; text-align: center; }
.kop-midden h2 { max-width: 18em; }
.kop-midden__tekst { max-width: 34rem; margin-top: 16px; }
.midden { text-align: center; }
.na-blok { margin-top: 32px; }
.kader.smal { max-width: calc(52rem + 2 * var(--rand)); }
@media (min-width: 1024px) { .kop-midden { margin-bottom: 56px; } .na-blok { margin-top: 48px; } }

/* variant naast (veelgestelde vragen) */
.naast { display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .naast { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .naast__kop { grid-column: 1 / 5; }
  .naast__inhoud { grid-column: 5 / 13; }
}

/* ── iconen ── */
.icoon { flex: none; width: 32px; height: 32px; color: var(--leisteen); }
.icoon .accent { fill: var(--diep-salie); }

/* ── foto's: vaste verhouding per plek; zonder foto een rustig merkvlak ── */
.foto { display: block; position: relative; overflow: hidden; border-radius: 24px; background: var(--lichte-salie) url(/assets/img/RR_beeldmerk_cirkel.svg) no-repeat center / 64px; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto.is-leeg img { visibility: hidden; }
/* zonder foto's (RR_FOTOS=uit, zie foto/LEESMIJ.md): neutrale merkvlakken in dezelfde maten, zoals versie 1 */
.zonder-fotos .foto { background: var(--leisteen); }
.zonder-fotos .foto::before { content: ""; position: absolute; right: -6%; bottom: -14%; width: min(50%, 320px); aspect-ratio: 190 / 208.736; background-color: var(--watermerk); -webkit-mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; }
.zonder-fotos .gesprek__foto::before { right: auto; left: 5%; }
@media (max-width: 1023px) { .zonder-fotos .gesprek__foto::before { right: -8%; left: auto; bottom: 26%; } }
.zonder-fotos .bericht--ai { border-color: var(--grijsgroen); }

/* ── opening (home) ── */
.opening { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 var(--sectie); }
.opening__tekst { display: flex; flex-direction: column; align-items: center; text-align: center; }
.opening__kop { max-width: 18em; font-size: var(--fs-opening); line-height: 1.05; letter-spacing: -0.015em; }
.opening__kop em { display: block; }
.opening__inleiding { max-width: 34rem; margin: 20px 0 32px; font-size: var(--fs-inleiding); line-height: 1.55; }
.acties { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.acties--midden { justify-content: center; }

/* gesprek op de foto: voorbeeld van de dienst */
.gesprek { position: relative; margin: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 0; }
.gesprek__foto { aspect-ratio: 1 / 1; }
.gesprek__foto img { object-position: 45% 30%; }
.gesprek__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(46 58 51 / 0.6), rgb(46 58 51 / 0) 55%); pointer-events: none; }
.gesprek__label { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--gebroken-wit); color: var(--leisteen); font: 600 0.875rem/1.3 var(--font-tekst); }
.gesprek__kaarten { position: relative; z-index: 1; display: grid; gap: 12px; max-width: 30rem; margin: -96px 12px 0; }
.bericht { position: relative; padding: 14px 18px 16px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); font-size: 1rem; line-height: 1.5; text-align: left; }
.bericht--gast { margin-right: 10%; }
.bericht--ai { margin-left: 10%; border-color: var(--leisteen); background: var(--leisteen); color: var(--gebroken-wit); }
.bericht--mens { border-left: 4px solid var(--diep-salie); }
.bericht__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--grijsgroen); font: 600 0.875rem/1.4 var(--font-tekst); }
.bericht--ai .bericht__meta { color: var(--salie); }
.bericht__tijd { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.bericht__tijd::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.bericht__icoon { width: 18px; height: 18px; }
.bericht__kop { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font: 700 1rem/1.35 var(--font-kop); }
.bericht__punt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--diep-salie); }
/* de lus (site.js, alleen met beweging): kaarten komen om de beurt, de gast typt eerst */
.gesprek.is-lus .bericht { transition: opacity 450ms ease, translate 450ms cubic-bezier(.2, .7, .2, 1); }
.gesprek.is-lus .bericht:not(.is-te-zien) { opacity: 0; translate: 0 10px; }
.gesprek.is-lus .bericht--mens:not(.is-te-zien) { translate: -16px 0; }
.bericht > p { transition: opacity 300ms ease; }
.bericht.is-typen > p:last-child { opacity: 0; }
.bericht__typen { display: none; position: absolute; left: 18px; bottom: 22px; gap: 5px; }
.is-typen .bericht__typen { display: flex; }
.bericht__typen i { width: 7px; height: 7px; border-radius: 50%; background: var(--grijsgroen); animation: typen 1s ease-in-out infinite; }
.bericht__typen i:nth-child(2) { animation-delay: 160ms; }
.bericht__typen i:nth-child(3) { animation-delay: 320ms; }
@keyframes typen { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -4px; } }
.gesprek__pauze { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--gebroken-wit); color: var(--leisteen); cursor: pointer; }
.gesprek__pauze:hover { background: var(--lichte-salie); }
.gesprek__pauze svg + svg, .gesprek__pauze[aria-pressed="true"] svg:first-child { display: none; }
.gesprek__pauze[aria-pressed="true"] svg + svg { display: block; }
@media (min-width: 768px) {
  .gesprek__foto { aspect-ratio: 16 / 9; }
  .gesprek__kaarten { margin: -136px auto 0; }
}
@media (min-width: 1024px) {
  .gesprek__foto { aspect-ratio: 20 / 9; }
  .gesprek__label { top: 24px; left: 24px; }
  .gesprek__pauze { top: 18px; right: 18px; }
  .gesprek__kaarten { position: absolute; top: 50%; right: 5%; width: min(380px, 36%); margin: 0; transform: translateY(-50%); gap: 14px; }
}

/* ── hoe het werkt op home: stappen die meelopen met het scrollen ── */
.plakstappen { display: grid; gap: 40px; }
.plakstappen__lijst { list-style: none; padding: 0; counter-reset: stap; border-top: 1px solid var(--lijn); }
.plakstap { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 24px 0; border-bottom: 1px solid var(--lijn); counter-increment: stap; transition: color 300ms ease; }
.plakstap::before { content: counter(stap, decimal-leading-zero); content: counter(stap, decimal-leading-zero) / ""; grid-row: 1 / span 2; padding-top: 3px; color: var(--leisteen); font: 700 1rem/1.5 var(--font-tekst); font-variant-numeric: tabular-nums; transition: color 300ms ease; }
.plakstap::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--diep-salie); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.plakstap p { margin-top: 6px; max-width: 30rem; }
.plakstappen.is-plak .plakstap { color: var(--grijsgroen); }
.plakstappen.is-plak .plakstap::before { color: var(--grijsgroen); }
.plakstappen.is-plak .plakstap.is-actief { color: var(--leisteen); }
.plakstappen.is-plak .plakstap.is-actief::before { color: var(--leisteen); }
.plakstappen.is-plak .plakstap.is-actief::after { transform: none; }

/* wissel: per stap een eigen beeld, zachte overgang (site.js zet .is-aan vanaf 1024 px, met beweging) */
.wissel { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; }
.wissel__beeld { position: absolute; inset: 0; transition: opacity 600ms ease; }
.wissel__beeld:not(.is-basis) { display: none; }
.wissel.is-aan .wissel__beeld { display: block; opacity: 0; }
.wissel.is-aan .wissel__beeld.is-actief { opacity: 1; }
.wissel img { object-position: 50% 22%; }
.wissel [data-stap="1"] img { object-position: 52% 40%; }
/* staand beeld uit een liggende foto: scherm en gast (dienstverlening), receptionist (hoe het werkt) */
.wissel .foto--dienstverlening img { object-position: 28% 50%; }
.wissel .foto--hoe-het-werkt img { object-position: 90% 50%; }
/* merkvlak: een chatpaneel; label linksboven, licht beeldmerk rechtsboven, de kaarten onderaan */
.merkvlak { --m: clamp(24px, 2vw, 28px); display: grid; align-content: end; padding: var(--m); border-radius: 24px; background: var(--salie); }
.merkvlak::before { content: ""; position: absolute; top: var(--m); right: var(--m); width: 36px; aspect-ratio: 190 / 208.736; background-color: var(--gebroken-wit); opacity: 0.55; -webkit-mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; }
.merkvlak .gesprek__label { top: var(--m); left: var(--m); }
.merkvlak__kaarten { display: grid; gap: 14px; }
.wissel.is-aan .merkvlak { display: grid; }
@media (min-width: 1024px) {
  .plakstappen { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .plakstappen__lijst { grid-column: 1 / 7; }
  .plakstap { min-height: clamp(170px, 26vh, 240px); padding: 32px 0; }
  .plakstappen__beeld { grid-column: 8 / 13; position: sticky; top: calc(var(--kophoogte) + 40px); }
  /* nooit hoger dan het scherm onder de kop; de breedte schaalt mee, de verhouding blijft */
  .wissel { --h: calc(100vh - var(--kophoogte) - 80px); aspect-ratio: 4 / 5; max-height: var(--h); max-width: calc(var(--h) * 0.8); margin-left: auto; }
}
/* scrollruimte per stap, zodat het beeld plakt en elke wissel tijd krijgt (in css: geen verspringing bij het laden) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .plakstap { min-height: clamp(260px, 42vh, 400px); }
}

/* ── kaarten en pakketten ── */
.kaarten { display: grid; gap: 20px; list-style: none; padding: 0; }
.kaart { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.kaart__uren { margin-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kaart .vinklijst { margin: 20px 0 24px; }
.kaart__voet { margin-top: auto; }
.kaart__prijs { margin-bottom: 16px; }
.kaart__voet .knop { width: 100%; padding-inline: 16px; white-space: normal; text-align: center; }
.kaart--klein .icoon { margin-bottom: 20px; }
.kaart--klein h3 { margin-bottom: 6px; font-size: 1.1875rem; }
.onder-kaarten { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 28px; }
@media (min-width: 600px) { .kaarten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .kaart { padding: 28px; } .onder-kaarten { flex-direction: row; justify-content: center; gap: 28px; } }
@media (min-width: 1024px) {
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .kaarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kaart { padding: 32px; }
}

/* tijdbalk, klein in de kaart */
.tijdbalk { position: relative; height: 8px; margin-top: 20px; border-radius: 4px; background: var(--lichte-salie); }
.tijdbalk__deel { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--diep-salie); transform-origin: left center; }
.tijdbalk__deel--night { left: 45.833%; width: 33.333%; }
.tijdbalk__deel--evening-night { left: 25%; width: 54.167%; }
.tijdbalk__deel--24-7 { left: 0; width: 100%; }

/* tijdbalk, groot op /pakketten (as van 12:00 tot 12:00 de volgende dag) */
.tijdlijn { margin: 0 0 48px; padding: 24px; border: 1px solid var(--lijn); border-radius: 24px; }
.tijdlijn__rij { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "naam uren" "spoor spoor"; column-gap: 16px; row-gap: 8px; padding-block: 12px; }
.tijdlijn__naam { grid-area: naam; font: 700 1.125rem/1.3 var(--font-kop); }
.tijdlijn__uren { grid-area: uren; font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: right; }
.tijdlijn__spoor { grid-area: spoor; position: relative; }
.tijdlijn__balk { position: relative; display: block; height: 12px; border-radius: 6px; background: var(--lichte-salie); }
.tijdlijn__balk .tijdbalk__deel { border-radius: 6px; }
.tijdlijn__lijn { display: none; }
.tijdlijn__rij--as { padding-top: 4px; }
.tijdlijn__as { width: 100%; height: 20px; overflow: visible; }
.tijdlijn__as text { fill: var(--grijsgroen); font: 500 14px var(--font-tekst); font-variant-numeric: tabular-nums; }
.tijdlijn__as .as-zij { display: none; }
.tijdlijn figcaption { margin-top: 16px; }
@media (min-width: 768px) {
  .tijdlijn { padding: 32px 40px; }
  .tijdlijn__rij { grid-template-columns: 180px minmax(0, 1fr) 150px; grid-template-areas: "naam spoor uren"; align-items: center; column-gap: 24px; }
  .tijdlijn__spoor { align-self: stretch; display: flex; align-items: center; margin-block: -12px; padding-block: 12px; }
  .tijdlijn__balk { flex: 1; }
  .tijdlijn__lijn { display: block; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lijn); }
  .tijdlijn__lijn--0 { left: 0; }
  .tijdlijn__lijn--25 { left: 25%; }
  .tijdlijn__lijn--50 { left: 50%; }
  .tijdlijn__lijn--75 { left: 75%; }
  .tijdlijn__lijn--100 { left: calc(100% - 1px); }
  .tijdlijn__as .as-zij { display: inline; }
}

/* nu-streepje (site.js): de lokale tijd van de bezoeker; de pakketten die nu dekken krijgen een stip */
.tijdlijn__rij--nu { padding-block: 0; }
.tijdlijn .tijdlijn__rij--nu .tijdlijn__spoor { height: 28px; margin: 0; padding: 0; }
.tijdlijn__nu, .tijdlijn__nu-label { position: absolute; left: var(--nu, 0); visibility: hidden; }
.heeft-nu .tijdlijn__nu, .heeft-nu .tijdlijn__nu-label { visibility: visible; }
.tijdlijn__nu { top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--leisteen); }
.tijdlijn__nu-label { bottom: 2px; translate: -50% 0; padding: 2px 10px; border-radius: 999px; background: var(--leisteen); color: var(--wit); font: 600 0.875rem/1.35 var(--font-tekst); }
.is-nu .tijdlijn__nu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--wit); border-radius: 50%; background: var(--leisteen); }
.heeft-nu .tijdlijn__rij:not(.is-nu) .tijdbalk__deel { background: var(--salie); }
@media (min-width: 768px) { .tijdlijn__nu { top: 0; bottom: 0; } }

/* ── bento: ongelijke tegels ── */
.bento { display: grid; gap: 16px; list-style: none; padding: 0; }
.tegel { display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.tegel h2, .tegel h3 { margin-bottom: 6px; }
.tegel h3 { font-size: 1.1875rem; line-height: 1.3; }
.tegel--zacht { border-color: var(--lichte-salie); background: var(--lichte-salie); }
.tegel--salie { border-color: var(--salie); background: var(--salie); }
.tegel--tekst { justify-content: flex-end; min-height: 150px; }
.tegel--groot h3 { font-size: var(--fs-h3); }
.bento__foto .foto { height: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
.bento--groep .tegel { padding: 28px; }
.tegel--visie .merkzin { margin-top: auto; }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .bento__foto { grid-column: 1 / -1; }
  .bento__foto .foto { aspect-ratio: 16 / 9; }
  .bento--segmenten .tegel:last-child { grid-column: 1 / -1; }
  .tegel--visie { grid-row: span 2; }
}
@media (min-width: 1200px) {
  .bento--taken { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 24px; }
  .bento--taken .bento__foto { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bento--taken .bento__foto .foto { aspect-ratio: auto; }
  .bento--taken .tegel { padding: 28px; }
  .tegel--breed { grid-column: span 2; flex-direction: row; align-items: center; gap: 24px; }
}
@media (min-width: 1024px) {
  .bento--segmenten { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .bento--segmenten .tegel { grid-column: span 2; padding: 28px; }
  .bento--segmenten .tegel--groot { grid-column: span 3; min-height: 220px; }
  .bento--segmenten .tegel:last-child { grid-column: span 2; }
  .bento--groep { gap: 24px; }
  .bento--groep .tegel { padding: 40px; }
}

/* ── drie naast elkaar (opvolging) en vier op een rij (pakketten) ── */
.drie, .vierrij { display: grid; gap: 16px; list-style: none; padding: 0; }
.drie__item, .vierrij li { display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.drie__item .icoon { margin-bottom: 14px; }
.vierrij li { gap: 18px; font-weight: 600; }
@media (min-width: 600px) { .vierrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1200px) { .vierrij { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ── twee kaarten naast elkaar ── */
.duo { display: grid; gap: 20px; }
.duo__kaart { padding: 28px 24px; border: 1px solid var(--lijn); border-radius: 24px; background: var(--wit); }
.duo__kaart > .icoon { margin-bottom: 20px; }
.duo__kaart h2, .duo__kaart h3 { margin-bottom: 12px; }
.duo__kaart > p + .puntlijst, .duo__kaart > p + p { margin-top: 20px; }
.duo__kaart--zacht { border-color: var(--lichte-salie); background: var(--lichte-salie); }
.duo__kaart.donker { border-color: var(--leisteen); background: var(--leisteen); }
.duo__noot { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--salie); }
.duo__noot .icoon { width: 24px; height: 24px; margin-top: 2px; }
@media (min-width: 768px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .duo__kaart { padding: 40px; } }

/* ── strook: kop links, korte tekst rechts, lichte salie ── */
.strook { display: grid; gap: 12px; margin-top: 56px; padding: 28px 24px; border-radius: 24px; background: var(--lichte-salie); }
.strook--prijs { margin-top: 0; }
.strook a { color: var(--leisteen); }
@media (min-width: 1024px) { .strook { grid-template-columns: 5fr 7fr; column-gap: 48px; padding: 48px; } .strook p { max-width: var(--maat-tekst); } }

/* ── tijdpad: van kennismaking tot start ── */
.tijdpad { display: grid; gap: 28px; list-style: none; padding: 0; counter-reset: tp; }
.tijdpad__stap { position: relative; padding-left: 56px; counter-increment: tp; }
.tijdpad__stap::before { content: counter(tp); content: counter(tp) / ""; position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--salie); color: var(--leisteen); font: 700 17px/40px var(--font-kop); text-align: center; }
.tijdpad__stap:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 40px; bottom: -28px; width: 1px; background: var(--salie); }
.tijdpad__stap h3 { margin: 8px 0 4px; }
@media (min-width: 1024px) {
  .tijdpad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .tijdpad__stap { padding: 60px 8px 0 0; }
  .tijdpad__stap:not(:last-child)::after { left: 48px; right: 0; top: 19.5px; bottom: auto; width: auto; height: 1px; }
  .tijdpad__stap h3 { margin-top: 0; }
}

/* ── beeld en tekst naast elkaar ── */
.beeldtekst { display: grid; gap: 32px; align-items: center; }
.beeldtekst__beeld .foto { aspect-ratio: 3 / 2; }
.beeldtekst__tekst h2 { margin-bottom: 20px; font-size: clamp(1.625rem, 1.4rem + 1vw, 2.25rem); }
.beeldtekst__tekst .lijnen { margin-bottom: 20px; }
@media (max-width: 1023px) { .beeldtekst__tekst, .strook p { max-width: var(--maat-tekst); } }
@media (min-width: 1024px) {
  .beeldtekst { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .beeldtekst__beeld { grid-column: 1 / 7; }
  .beeldtekst__tekst { grid-column: 8 / 13; }
}

/* ── fotopaneel met kaart (voor wie) ── */
.fotopaneel { position: relative; margin: 0; }
.fotopaneel .foto { aspect-ratio: 3 / 2; }
.fotopaneel__kaart { position: relative; margin: -56px 12px 0; padding: 24px; border: 1px solid var(--lijn); border-radius: 16px; background: var(--wit); }
.fotopaneel__kaart p { margin-top: 12px; }
@media (min-width: 1024px) {
  .fotopaneel .foto { aspect-ratio: 12 / 5; }
  .fotopaneel .foto img { object-position: 50% 40%; }
  .fotopaneel__kaart { position: absolute; left: 40px; bottom: 40px; max-width: 26rem; margin: 0; padding: 32px; }
}

/* ── merkzin ── */
.merkzin { font: 500 var(--fs-merkzin)/1.2 var(--font-kop); letter-spacing: -0.01em; max-width: 22em; }
.fotopaneel .merkzin { font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem); }

/* ── systemen: tabel met status ── */
.systemen { list-style: none; padding: 0; border: 1px solid var(--lijn); border-radius: 24px; overflow: hidden; }
.systeem { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; padding: 24px; }
.systeem + .systeem { border-top: 1px solid var(--lijn); }
.systeem .icoon { width: 28px; height: 28px; margin-top: 2px; }
.systeem h3 { font-size: 1.1875rem; line-height: 1.3; }
.systeem__tekst p { margin-top: 4px; }
.systeem__status { grid-column: 2; }
@media (min-width: 768px) {
  .systeem { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 24px 32px; }
  .systeem__status { grid-column: auto; align-self: center; }
}
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; border-radius: 999px; color: var(--leisteen); font: 600 0.875rem/1.2 var(--font-tekst); white-space: nowrap; }
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.status--in-gebruik { background: var(--lichte-salie); }
.status--in-gebruik::before { background: var(--diep-salie); }
.status--per-hotel { border: 1px solid var(--grijsgroen-20); background: var(--gebroken-wit); }
.status--per-hotel::before { background: var(--grijsgroen); }

/* ── kernwaarden ── */
.waarden { display: grid; gap: 28px 24px; list-style: none; padding: 0; }
.waarde { padding-top: 20px; border-top: 1px solid var(--lijn); }
.waarde h3 { margin-bottom: 6px; }
@media (min-width: 768px) { .waarden { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── lijsten ── */
.vinklijst { list-style: none; padding: 0; }
.vinklijst li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.vinklijst li + li { margin-top: 12px; }
.vink { width: 18px; height: 18px; margin-top: 4px; color: var(--diep-salie); }
.donker .vink { color: var(--salie); }
.puntlijst { display: grid; gap: 12px; list-style: none; padding: 0; }
.puntlijst li { position: relative; padding-left: 20px; }
.puntlijst li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--leisteen); }
.lijnen { list-style: none; padding: 0; border-top: 1px solid var(--lijn); }
.lijnen > li { padding-block: 14px; border-bottom: 1px solid var(--lijn); font: 700 1.125rem/1.35 var(--font-kop); }

/* ── notitie (formulier) ── */
.notitie { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 20px 24px; border-radius: 16px; background: var(--lichte-salie); }
.notitie .icoon { width: 24px; height: 24px; margin-top: 2px; }

/* ── veelgestelde vragen ── */
.vragen { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 20px 0; border-radius: 4px; font: 700 var(--fs-vraag)/1.35 var(--font-kop); list-style: none; cursor: pointer; transition: color 150ms ease; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--diep-salie); }
.vraag__teken { flex: none; width: 16px; height: 16px; color: var(--diep-salie); }
.vraag[open] .vraag__streep { display: none; }
.vraag__antwoord { max-width: var(--maat-tekst); padding-bottom: 24px; }
.onderwerpen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; list-style: none; padding: 0; margin-bottom: 56px; }
.onderwerpen a { display: inline-flex; align-items: center; min-height: 44px; color: var(--leisteen); font-weight: 500; font-size: 1rem; text-decoration: none; border-radius: 4px; }
.onderwerpen a:hover { text-decoration: underline 2px; text-underline-offset: 0.25em; }
.onderwerp + .onderwerp { margin-top: 56px; }

/* ── beweging: rustig in beeld bij het scrollen. site.js (defer) geeft wat al in beeld staat eerst
      .is-in en zet daarna .beweeg op html; niet bij prefers-reduced-motion en niet zonder javascript.
      De vertraging (--v) geldt alleen voor het binnenkomen, niet voor de beweging bij aanwijzen. ── */
:root { --uit: cubic-bezier(.2, .7, .2, 1); }
.beweeg [data-beweeg] { transition: opacity 550ms var(--uit) var(--v, 0ms), transform 550ms var(--uit) var(--v, 0ms), translate 200ms ease-out, border-color 200ms ease-out; }
.beweeg [data-beweeg]:not(.is-in) { opacity: 0; transform: translateY(20px); }
.beweeg li[data-beweeg]:nth-child(2), .beweeg .duo > :nth-child(2), .beweeg .beeldtekst > :nth-child(2) { --v: 80ms; }
.beweeg li[data-beweeg]:nth-child(3) { --v: 160ms; }
.beweeg li[data-beweeg]:nth-child(4) { --v: 240ms; }
.beweeg li[data-beweeg]:nth-child(5) { --v: 320ms; }
.beweeg li[data-beweeg]:nth-child(6) { --v: 400ms; }
/* de tijdbalken tekenen zich in */
.beweeg [data-beweeg] .tijdbalk__deel { transition: transform 900ms var(--uit) 250ms, background-color 200ms ease; }
.beweeg [data-beweeg]:not(.is-in) .tijdbalk__deel { transform: scaleX(0); }
.beweeg .tijdlijn__rij:nth-child(3) .tijdbalk__deel { transition-delay: 400ms; }
.beweeg .tijdlijn__rij:nth-child(4) .tijdbalk__deel { transition-delay: 550ms; }

/* kaarten en tegels: lichte lift bij aanwijzen, zonder schaduw; het icoon beweegt mee */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .kaart, .tegel, .drie__item, .vierrij li, .duo__kaart, .icoon, .pil__pijl { transition: translate 200ms ease-out, border-color 200ms ease-out; }
  .kaart:hover, .tegel:hover, .drie__item:hover, .vierrij li:hover, .duo__kaart:hover { translate: 0 -3px; border-color: var(--salie); }
  :is(.kaart, .tegel, .drie__item, .vierrij li, .duo__kaart):hover .icoon { translate: 0 -2px; }
  .pil:hover .pil__pijl { translate: 2px 0; }
}

/* ── formulier ── */
.contact-raster { display: grid; gap: 56px; }
@media (min-width: 1024px) {
  .contact-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .contact-raster__formulier { grid-column: 1 / 8; }
  .contact-raster__zij { grid-column: 9 / 13; }
}
.formulier-blok { max-width: 640px; }
.formulier-blok > h2 + p { margin-top: 8px; }
.formulier { margin-top: 32px; }
.velden { display: grid; gap: 24px; }
@media (min-width: 768px) { .velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } .veld--vol { grid-column: 1 / -1; } }
.veld { min-width: 0; }
.veld label { display: block; margin-bottom: 8px; font: 600 var(--fs-klein)/1.4 var(--font-tekst); }
.optioneel { color: var(--grijsgroen); font-weight: 400; }
.optioneel::before { content: "("; }
.optioneel::after { content: ")"; }
.invoer { display: block; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid var(--rand-veld); border-radius: 8px; background: var(--wit); color: var(--leisteen); font: 400 1.0625rem/1.4 var(--font-tekst); -webkit-appearance: none; appearance: none; transition: border-color 150ms ease; }
.invoer:hover { border-color: var(--leisteen); }
.invoer:focus { border-color: var(--leisteen); outline: 3px solid var(--focus); outline-offset: 1px; }
.invoer[aria-invalid="true"] { border: 2px solid var(--leisteen); padding: 11px 13px; }
.invoer:disabled { background: var(--gebroken-wit); color: var(--grijsgroen); }
textarea.invoer { min-height: 96px; resize: vertical; }
textarea.invoer--lang { min-height: 144px; }
.keuze { position: relative; }
.keuze select { padding-right: 44px; cursor: pointer; }
.keuze svg { position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--leisteen); pointer-events: none; }
.veld__hulp { margin-top: 6px; }
.veld__fout { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--leisteen); font: 500 var(--fs-klein)/1.5 var(--font-tekst); }
.fouticoon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--leisteen); }
.fouticoon .uitroep { stroke: var(--gebroken-wit); }
.fouticoon .uitroep-punt { fill: var(--gebroken-wit); }
.formulier .notitie { margin-top: 32px; }
.foutoverzicht { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; margin-top: 24px; padding: 20px 24px; border-left: 4px solid var(--leisteen); border-radius: 0 8px 8px 0; background: var(--gebroken-wit); }
.foutoverzicht:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.foutoverzicht__kop { font-weight: 600; font-size: 1rem; }
.foutoverzicht ul { margin-top: 8px; padding-left: 0; list-style: none; }
.foutoverzicht li + li { margin-top: 4px; }
.foutoverzicht a { color: var(--leisteen); }
.formulier__verstuur { margin-top: 24px; }
.formulier__verstuur .knop { width: 100%; }
.formulier__privacy { margin-top: 16px; }
.formulier__privacy a { color: var(--leisteen); }
@media (min-width: 768px) { .formulier__verstuur .knop { width: auto; } }
.lokval { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.succes { margin-top: 32px; padding: 24px; border-radius: 16px; background: var(--lichte-salie); }
.succes:focus { outline: none; }
.succes .icoon { width: 32px; height: 32px; margin-bottom: 16px; }
.succes h3 { margin-bottom: 8px; }
.succes h3:focus { outline: none; }
@media (min-width: 768px) { .succes { padding: 32px; } }
/* zonder javascript: de server zet een klasse op body na verzenden */
.is-verzonden .formulier { display: none; }
.is-verzonden .succes[hidden] { display: block !important; }
.is-fout .foutoverzicht--server[hidden] { display: grid !important; }
.foutoverzicht__tekst { display: none; }
.foutoverzicht__tekst.is-zichtbaar { display: block; }
.is-fout--samenvatting .foutoverzicht__tekst--samenvatting, .is-fout--verzenden .foutoverzicht__tekst--verzenden, .is-fout--te-vaak .foutoverzicht__tekst--te-vaak { display: block; }
.zij-blok { padding-block: 24px; border-top: 1px solid var(--lijn); }
.zij-blok:last-child { border-bottom: 1px solid var(--lijn); }
.zij-blok h2 { margin-bottom: 8px; }

/* ── juridisch ── */
.artikel { display: grid; }
.inhoudsopgave { display: none; }
.artikel__tekst > section + section { margin-top: 48px; }
.artikel__tekst h2 { margin-bottom: 24px; }
.artikel__tekst p { max-width: var(--maat-tekst); }
.artikel__tekst p + p { margin-top: 1em; }
.gegevens { border-top: 1px solid var(--lijn); max-width: var(--maat-tekst); }
.gegevens > div { display: grid; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--lijn); }
.gegevens dt { color: var(--grijsgroen); font: 600 var(--fs-klein)/1.5 var(--font-tekst); }
.gegevens dd { margin: 0; }
.bijgewerkt { margin-top: 48px; }
@media (min-width: 768px) { .gegevens > div { grid-template-columns: 200px minmax(0, 1fr); column-gap: 24px; align-items: baseline; } }
@media (min-width: 1024px) {
  .artikel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .inhoudsopgave { display: block; grid-column: 1 / 4; position: sticky; top: 104px; }
  .inhoudsopgave ul { list-style: none; padding: 0; }
  .inhoudsopgave a { display: inline-flex; align-items: center; min-height: 40px; color: var(--leisteen); font-weight: 500; font-size: 1rem; text-decoration: none; border-radius: 4px; }
  .inhoudsopgave a:hover { text-decoration: underline 2px; text-underline-offset: 0.25em; }
  .artikel__tekst { grid-column: 5 / 12; }
}

/* ── voet (zoals thesixthseat.ai): groot woordmerk als gezette tekst, onderaan afgesneden door een
      leisteen paneel; het logobestand zelf blijft onaangeraakt ── */
.voet { background: var(--gebroken-wit); }
.voet__woordmerk { display: flex; justify-content: center; overflow: hidden; padding-top: clamp(48px, 2rem + 4vw, 104px); user-select: none; }
.voet__woord { margin-bottom: -0.21em; font: 700 min(calc((100vw - 2 * var(--rand)) / 8.45), 8.85rem)/0.86 var(--font-kop); letter-spacing: -0.04em; white-space: nowrap; color: var(--leisteen); }
.voet__woord-2 { color: var(--diep-salie); }
.voet__paneel { position: relative; overflow: hidden; padding: 56px 0 28px; background: var(--leisteen); color: var(--gebroken-wit); }
.voet__paneel .kader { position: relative; }
.voet__watermerk { display: none; position: absolute; right: -48px; bottom: -132px; width: 320px; aspect-ratio: 190 / 208.736; background-color: var(--watermerk); -webkit-mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; mask: url(/assets/img/RR_beeldmerk.svg) no-repeat center / contain; }
.voet__raster { display: grid; gap: 40px; }
.voet__beeldmerk { width: 48px; height: auto; margin-bottom: 20px; }
.voet__merkzin { max-width: 27rem; font: 500 clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem)/1.4 var(--font-kop); letter-spacing: -0.005em; }
.voet__kop { margin-bottom: 10px; color: var(--salie); font: 600 var(--fs-boven)/1.3 var(--font-tekst); letter-spacing: 0.02em; }
.voet__kolom p { max-width: 22rem; font-size: 1rem; }
.voet__lijst { list-style: none; padding: 0; }
.voet__paginas .voet__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 24px; }
.voet__lijst a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gebroken-wit); font-size: 1rem; text-decoration: none; border-radius: 4px; }
.voet__lijst a:hover { color: var(--salie); text-decoration: underline 1px; text-underline-offset: 0.2em; }
.voet__kolom .stil { margin-top: 6px; }
.voet__gast { margin-top: 18px; color: var(--salie); }
.voet__onder { display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--grijsgroen); color: var(--salie); font-size: var(--fs-klein); }
@media (min-width: 768px) {
  .voet__raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 0.9fr); column-gap: 40px; }
  .voet__merk { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .voet__paneel { padding: 80px 0 36px; }
  .voet__watermerk { display: block; }
  .voet__lijst a { min-height: 34px; }
}
@media (min-width: 1200px) {
  .voet__raster { grid-template-columns: minmax(0, 4.6fr) minmax(0, 2fr) minmax(0, 2.9fr) minmax(0, 2fr); }
  .voet__merk { grid-column: auto; }
  .voet__paginas .voet__lijst { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .voet__onder { margin-top: 64px; }
}

/* na verzenden ook de uitlegregel verbergen (CONTROLE-1, klein 4) */
.is-verzonden .formulier__uitleg { display: none; }
.contact-raster__zij .foto { aspect-ratio: 3 / 2; margin-bottom: 8px; }
.contact-raster__zij .foto img { object-position: 50% 55%; }
@media (min-width: 1024px) { .contact-raster__zij .foto { aspect-ratio: 4 / 5; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .kop, .contactband, .voet, .overslaan { display: none; }
  [data-beweeg], .bericht { opacity: 1 !important; transform: none !important; translate: none !important; }
}