/* SSN — ALLEEN SSN-specifieke toevoegingen. GEEN dubbele papa-classes, GEEN !important.
   De volledige recolor zit nu IN-PLACE in shared-ssn.css (papa's eigen regels, via de
   --ssn-* variabelen + de theme-variabelen). Dit bestand bevat enkel:
   1) de SSN-merkvariabelen, en 2) één scoped layout-uitzondering voor de hero-kop. */

:root {
  color-scheme: dark;       /* dark-only lock: navy canvas, geen light-variant (Safari tint donker) */
  --ssn-surface: #DED3C5;   /* beige licht-vlak: 2e component, primaire knoppen, kaart-tekst/borders */
  --ssn-accent:  #9c5b38;   /* oranje accent: chevron + accent-/hover-tekst + nav-hover-glow */
}

/* ============================================================================
   BEELD-BESCHERMING — alleen MEDIA, NIET tekst. Afbeeldingen niet sleep-/selecteer-/save-baar
   (cross-device): user-select / -webkit-user-drag / -webkit-touch-callout uit op media + contextmenu
   en dragstart geblokt via globale JS (build-nl.mjs → elke pagina). TEKST blijft gewoon selecteerbaar/
   kopieerbaar — selectie blokkeren op tekst is gebruikersvijandig (kopiëren, lezen-anker, vertalen,
   schermlezers) en houdt vastberaden kopieerders tóch niet tegen. Geen absolute beveiliging. */
img, picture, video, canvas, svg {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
html { -webkit-tap-highlight-color: transparent; }   /* alleen de grijze tap-flash weg; selectie blijft aan */

/* Hero-kop breder zodat 'LOMBOK' op één regel past. Scoped exceptie op de generieke utility
   .max-width-col-06 — wint puur op specificity (0,2,0 > 0,1,0), dus geen !important nodig. */
.hh_title .max-width-col-06 { max-width: 68rem; }


/* Scherm 3 — kleine CTA ("Over ons") krijgt de oranje accent-box i.p.v. de donkere outline-box. */
.section_cta-cards .button-icon { background-color: var(--ssn-accent); color: #FFFFFF; }


/* Onderbalk (mockup 19-09): merkteken klein naast de credits, allebei gedempt, één regel. */
.footer-logo { display: flex; align-items: center; gap: var(--_sizes---size--12px); }
.footer-credits { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--_sizes---size--12px); min-width: 0; }   /* wikkelt zelf; een tweede regel begint onder de tekst, niet onder het merkteken */
.footer-credits-2 { display: flex; align-items: center; gap: var(--_sizes---size--12px); flex: none; }   /* KvK + merknaam blijven bij elkaar */
.footer-logo .footer-mark { height: 1.1em; width: auto; display: block; flex: none; color: var(--_colors---swatch--beige); }   /* de lichte tegels in de tekstkleur ernaast */
.footer-logo .footer-mark rect[fill="white"] { fill: currentColor; }   /* Dévin 19-09: oranje tegels blijven oranje, zoals in de header; alleen de witte tegels volgen de tekstkleur */
/* Handtekening: de maten staan in de kern (shared-ssn.css: .footer-signature zonder max-width, .signature-line 8em). */
/* Credits onder de lijn: merk + entiteit, gedempt. */
.footer-copyright, .footer-kvk, .footer-merk { line-height: 1.25; font-size: var(--_sizes---size--16px); letter-spacing: .02em; color: var(--_colors---swatch--beige); white-space: nowrap; }   /* zelfde tint als het merkteken ernaast */
.footer-merk { letter-spacing: .06em; }
.footer-dim { opacity: .7; }   /* '© 2026' en 'KvK' gedempt, zoals 'Samen met' erboven */
.footer-link__count { font-variant-numeric: tabular-nums; letter-spacing: 0; margin-left: .15em; }   /* teller naast een footer-link (VACATURES⁰): <sup> geeft hoogte en 75% (papa's ®-patroon), .footer-dim de tint van '© 2026'; tabular zodat 0 en 12 even breed staan. Haak: data-vacatures-count */
.footer-link.is-uit { pointer-events: none; }   /* pagina nog niet klaar (Dévin 21-09): onklikbaar, maar in de standaardstijl; alleen de teller is gedimd (.footer-dim). Klasse weg zodra /nl/careers bestaat */
@media (max-width: 767px) {   /* smal: de credits wikkelen (gemeten 531px op 390); het merkteken blijft bij de eerste regel */
  .footer-logo { align-items: flex-start; }
  .footer-logo .footer-mark { margin-top: .2em; }
}

/* Footer-bottom: favicon + partnerregel; slot-CTA-kop op één regel (desktop). */
.footer-favicon { height: 1.25em; width: auto; border-radius: .2em; }
/* Partnerregel in de disclaimer: gedempt, naam als anker maar NIET onderstreept (Dévin 17-09). */
.footer-disclaimer a { color: inherit; text-decoration: none; text-underline-offset: .2em; transition: text-decoration-color var(--duration-fast, .2s) var(--ease-ssn, cubic-bezier(.16,1,.3,1)); }
.footer-disclaimer a:hover { text-decoration: underline; }
@media (min-width: 992px) {
  .footer-col.is-left .heading-wrapper .heading-s { white-space: nowrap; }
}

/* Footer slot-CTA: PRIMAIR, gevuld zoals de header (Dévin 17-09). Papa's basisregel vult hem; de
   transparant-override die hier stond is weg. Zelfde variant, zelfde vulling, zelfde tekstkleur. */
/* WhatsApp-icoon in de footer: ingetogen beige i.p.v. goedkoop groen op navy. */
.footer-whatsapp .whatsapp-color { color: var(--_colors---swatch--beige); }

/* Partnerregel: gedempt label. */
.footer-partner-label { opacity: .7; }

/* WhatsApp-modal: bone-card (consistent met scherm 3), navy tekst, outline-knop met navy border. */
.whatsapp-modal__card{background-color:var(--ssn-surface)}
.whatsapp-modal__card .whatsapp-modal__h2{color:var(--_colors---swatch--black)}
.whatsapp-modal__card .whatsapp-modal__p{color:var(--_colors---swatch--black);opacity:.62}
.whatsapp-modal__card .btn-animate-chars__bg{background-color:transparent;border:1px solid var(--_colors---swatch--black)}
.whatsapp-modal__card .btn-animate-chars__text{color:var(--_colors---swatch--black)}
.whatsapp-modal__card .whatsapp-modal__close-bar{background-color:var(--_colors---swatch--black)}

/* Groen uit het design-systeem: WhatsApp-iconen (floating + footer) ingetogen beige. */
:root { --_colors---whatsapp: var(--_colors---swatch--beige); }

/* Mobiel menu — secundaire knoppen (WhatsApp + taal-switch). Papa's .outline-variant rendert nu
   gevuld beige doordat onze recolor de basis .btn-animate-chars__bg op --ssn-surface zette en de
   labeltekst op navy. Hier herstellen we de secundaire look zoals papa 'm bedoelde: transparant vlak,
   1px border in de header-border-kleur (dezelfde dual-context grijs als de header zelf), lichte tekst
   + icoon (currentColor). Scoped op .navmenu zodat de desktop-header onaangeroerd blijft. */
.navmenu .btn-animate-chars.outline { color: var(--_colors---swatch--beige); border: none; }
.navmenu .btn-animate-chars.outline .btn-animate-chars__text { color: var(--_colors---swatch--beige); }
/* Eén border op het zichtbare (afgeronde) __bg-vlak, in de header-kleur. Papa's .outline-anchor draagt
   zelf óók een border -> die zetten we hierboven op 'none' zodat er geen dubbele rand ontstaat. */
.navmenu .btn-animate-chars.outline .btn-animate-chars__bg {
  background-color: transparent;
  border: 1px solid var(--_colors---swatch--grey);
}


/* --- NAVBAR: centrale menukolom past zijn eigen menu (geen overlap met is-right) ---
   Papa's 3 navbar-kolommen zijn elk 33.3333% breed, maar .navbar_menu is breder dan een
   derde en liep ~25–34px de is-right-kolom in. Omdat .navbar_col.is-right later in de DOM
   staat, schilderde die ÓVER de rechter menulink ("Contact") -> die werd geblokkeerd.
   Fix = de centrale kolom breed genoeg maken om het menu te bevatten, symmetrisch (28/44/28),
   zodat is-right rechts van het menu begint en is-left links ervan. Geen z-index-truc (die
   laat de geometrische overlap staan); het menu blijft exact gecentreerd en logo + CTA
   klemmen niet (leftClipped=false). Geverifieerd: overlap=0px op 1440/1280/1100/992px.
   Scoped op desktop (≥992px) zodat papa's mobiele width:100% + verborgen center intact blijft. */
@media (min-width: 992px) {
  .nav .navbar_col.is-left   { width: 28%; }
  .nav .navbar_col.is-center { width: 44%; }
  .nav .navbar_col.is-right  { width: 28%; }
}


/* --- NAVBAR: WhatsApp-cel linker rand (enkel mobiel) + logo links uitlijnen (alle apparaten) ---
   .navbar-item.is-wapp heeft al een rechter rand (1px grey-swatch); de basis zet border-left-width:0.
   Op mobiel (≤767px) krijgt de cel óók een linker rand — exact hetzelfde recept — zodat hij aan beide
   zijden ingekaderd staat. Het logo lijnt links uit i.p.v. gecentreerd, op alle apparaten. Header is
   single-source, dus dit geldt voor elke /nl-pagina. */
.navbar_logo { justify-content: left; }

@media screen and (max-width: 767px) {
  .navbar-item.is-wapp { border-left: 1px solid var(--_colors---swatch--grey); }
}


/* Footer mobiel: de oude 17.4em-dop op de disclaimer (voor "© … Alle rechten voorbehouden") is weg, die tekst
   bestaat niet meer en de dop brak "Samen met PT Seven Stones Indonesia" in tweeën. De legal-links staan in
   de kern (shared-ssn.css, onderbalk ≤991px). */


/* ============================================================
   AANBOD-STAGE — beige podium tussen S3 en S4.
   100% gedupliceerd uit het bestaande systeem: zelfde rail
   (container-col-12 → padding-global → cta-wrap → container-col-11),
   zelfde em-cascade (Osmo body-font: alles in em schaalt mee),
   zelfde 1px header-grijs (--_colors---swatch--grey) als lijnkleur.
   Geen px-maten (behalve 1px lijnen), geen nieuwe kleuren.
   Verboden klassen (S3/S4-GSAP): panel, pin-height, uc-*, cta-cards-wrap,
   mwg_effect031 — bewust NIET hergebruikt.
   v4 (2026-06-13): plaat herbouwd (bg-laag + 80px-fade + 3-traps blur),
   listing 550/400, kruis-tegel portret-in-cel, drag-momentum+soft-snap,
   filterset eigen scroll + rand-fades, tooltip-roll.
   ============================================================ */

/* --- NAAD: tuck onder S3's afgeronde onderhoeken (beige op beige, geen wig) --- */
.section_aanbod {
  position: relative;
  margin-top: calc(-1 * var(--_layout---padding-global--page-padding) - var(--_layout---border-radius--12px) - 1px);
}

/* --- PANEEL: S3's .cta-wrap, in-flow, kolom --- */
.cta-wrap.is-aanbod {
  height: auto;
  flex-flow: column;
  align-items: stretch;
  justify-content: flex-start;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: var(--_sizes---size--40px);
  padding-bottom: var(--_sizes---size--80px);
}

/* --- STICKY-NAAD (desktop-only flourish; ScrollTrigger-scrub) --- */
.aanbod-sticky-naad {
  position: relative;
  z-index: 5;
  height: var(--_layout---padding-global--page-padding);
  margin-left: calc(-1 * var(--_layout---padding-global--page-padding));
  margin-right: calc(-1 * var(--_layout---padding-global--page-padding));
  background-color: var(--_colors---swatch--black);
  pointer-events: none;
  will-change: transform;
}
.aanbod-naad-hoek {
  position: absolute;
  bottom: 100%;
  width: var(--_layout---border-radius--12px);
  height: var(--_layout---border-radius--12px);
}
.aanbod-naad-hoek.is-links {
  left: var(--_layout---padding-global--page-padding);
  background: radial-gradient(circle at 100% 0%, rgba(42, 36, 32, 0) calc(var(--_layout---border-radius--12px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--12px));
}
.aanbod-naad-hoek.is-rechts {
  right: var(--_layout---padding-global--page-padding);
  background: radial-gradient(circle at 0% 0%, rgba(42, 36, 32, 0) calc(var(--_layout---border-radius--12px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--12px));
}
/* Tablet + mobiel (hamburger-breakpoint): geen sticky-naad; de tuck-overlap
   houdt de naad beige-op-beige dicht. */
@media screen and (max-width: 991px) {
  .aanbod-sticky-naad { display: none; }
}

/* --- FILTERRIJ — robuust met de ORIGINELE HTML-structuur (je preview-panel revert ssn-home.html, dus
       CSS-only): groep (Doel/Budget/Locatie) scrollt links, 'Meer filters'-CTA blijft rechts.
       De groep is ALTIJD horizontaal (flex), nooit gestapeld. --- */
.aanbod-filters { display: flex; justify-content: space-between; align-items: center; grid-column-gap: 1em; }
.aanbod-filters-scroll { position: relative; flex: 1 1 auto; min-width: 0; }
.aanbod-filters-groep {
  display: flex; align-items: center; grid-column-gap: 1em;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px; margin: -2px;   /* borders/focus-ring niet clippen */
}
.aanbod-filters-groep::-webkit-scrollbar { display: none; }
/* Rechter shadow-fade (geen gradient): ALLEEN zichtbaar bij overflow. Geen overflow → groep scrollt
   niet → is-end staat meteen aan (JS) → geen fade. Tot het einde gescrold → is-end → fade weg. */
.aanbod-filters-scroll::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 5em;
  pointer-events: none; z-index: 2; transition: opacity .3s ease;
  box-shadow: inset -4em 0 3em -2.5em var(--ssn-surface); opacity: 1;
}
.aanbod-filters-scroll.is-end::after { opacity: 0; }
.aanbod-filters-cta { flex: 0 0 auto; }
.aanbod-filters .btn-animate-chars { flex: 0 0 auto; }
/* Selects: kaal — header-grijze border, geen icoonbox, navy chevron omlaag. */
.aanbod-filters .btn-animate-chars:not(.is-aanbod-cta) .btn-animate-chars__bg { border-color: var(--_colors---swatch--grey); }
.aanbod-filters .btn-animate-chars:not(.is-aanbod-cta) .button-icon { background-color: transparent; color: var(--_colors---swatch--black); }
/* CTA: oranje box + wit chevron, navy border blijft. */
.aanbod-filters .is-aanbod-cta .button-icon { background-color: var(--ssn-accent); color: #FFFFFF; }
/* Geregistreerde length-custom-props → de mask-fade-breedtes kunnen vloeiend transitionen
   (en zijn typed, dus de gradient herrekent betrouwbaar bij class-wissel). */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-b { syntax: "<length>"; inherits: false; initial-value: 0px; }   /* filterdoos-fade (onderkant), zelfde recept */

/* Mobiel: .aanbod-filters wordt zélf de horizontale scroller (filter-set + 'Meer filters'-CTA scrollen samen).
   Edge-fade = een MASK op de scroller zelf: de chips zélf vervagen aan de scrollrand. Hoog contrast
   (donkere chip → transparant) én GPU-composited, dus betrouwbaar zichtbaar op échte iOS Safari — i.t.t.
   de oude subtiele navy-overlay op een beige band (onzichtbaar). Dynamisch via is-scrolled/is-end
   (JS in ssn-home.html, draait in de preview) die de fade-breedte per kant zetten: links pas zodra er
   links iets verborgen is, rechts tot het eind bereikt is. */
@media screen and (max-width: 767px) {
  .aanbod-filters {
    justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain;   /* swipe blijft IN de filter — geen horizontale page-scroll / iOS-swipe-back */
    --aanbod-fade: 1.6em;              /* fade-breedte aan een actieve rand */
    --fade-l: 0px;                      /* links uit tot er links iets verborgen is (is-scrolled) */
    --fade-r: var(--aanbod-fade);       /* rechts aan zolang er rechts meer is (tot is-end) */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: --fade-l .25s ease, --fade-r .25s ease;
  }
  .aanbod-filters.is-scrolled { --fade-l: var(--aanbod-fade); }   /* links iets verborgen → linker fade aan */
  .aanbod-filters.is-end      { --fade-r: 0px; }                  /* eind bereikt → rechter fade uit */
  .aanbod-filters::-webkit-scrollbar { display: none; }
  .aanbod-filters-scroll { flex: 0 0 auto; }          /* niet meer rekken; set + CTA mogen overlopen */
  .aanbod-filters-groep { overflow-x: visible; }       /* de groep scrollt niet meer; de parent doet 't */
  .aanbod-filters-scroll::after { display: none; }      /* desktop-fade uit op mobiel */
}

/* --- BAND: header-lijnen boven+onder, rand-fades (binnen de lijnen) --- */
.aanbod-band {
  position: relative;
  width: 100%;
  margin-top: var(--_sizes---size--40px);
  border-top: 1px solid var(--_colors---swatch--grey);
  border-bottom: 1px solid var(--_colors---swatch--grey);
}
.aanbod-band::before, .aanbod-band::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 7em;
  pointer-events: none; user-select: none; z-index: 3; transition: opacity .3s ease;
}
.aanbod-band::before { left: 0;  box-shadow: inset  5em 0 4em -3em var(--ssn-surface); opacity: 0; }
.aanbod-band::after  { right: 0; box-shadow: inset -5em 0 4em -3em var(--ssn-surface); opacity: 1; }
.aanbod-band.is-scrolled::before { opacity: 1; }
.aanbod-band.is-end::after { opacity: 0; }
/* Mobiel: rand-fades iets dunner (zachter, natuurlijk) — desktop blijft 5em/4em. */
@media screen and (max-width: 767px) {
  .aanbod-band::before, .aanbod-band::after { width: 5em; }
  .aanbod-band::before { box-shadow: inset  3.5em 0 3em -2em var(--ssn-surface); }
  .aanbod-band::after  { box-shadow: inset -3.5em 0 3em -2em var(--ssn-surface); }
}

/* --- TRACK: drag-rail (muis: JS-momentum+snap; touch: native + CSS-snap) --- */
.aanbod-track {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none; user-select: none;
}
.aanbod-track::-webkit-scrollbar { display: none; }
.aanbod-track.is-grabbing { cursor: grabbing; }
@media (pointer: coarse) {
  .aanbod-track { scroll-snap-type: x proximity; }
  .aanbod-cel, .aanbod-alle { scroll-snap-align: start; }
}
.aanbod-track:focus-visible { outline: none; }

/* --- CEL: verticaal 56px-token, horizontaal de col-11-inzet (4.1667%).
       .aanbod-alle is óók een cel (de kruis-tegel = de cel zelf, 1 parent minder). --- */
.aanbod-cel, .aanbod-alle {
  flex: 0 0 50%;
  min-width: 0;
  padding: var(--_sizes---size--56px) 4.1667%;
  border-right: 1px solid var(--_colors---swatch--grey);
}
.aanbod-cel:last-child { border-right: none; }   /* alle (laatste kind) HOUDT z'n rechter border = op de rail */
@media screen and (max-width: 767px) { .aanbod-cel, .aanbod-alle { flex-basis: 100%; } }
@media screen and (max-width: 479px) { .aanbod-cel, .aanbod-alle { padding: var(--_sizes---size--40px) 0; } }

/* ============================================================
   KAARTEN-SECTIE (homepage, "Wie regelt jouw koop?" met de drie waaierkaarten)
   Alleen de scroll-lengte van papa's pin: .pin-height staat in papa's CSS op 400vh (vier schermen) voor drie korte kaarten.
   Dévin 05-10: korter. De animatie hangt aan de voortgang door dit blok en loopt dus gewoon sneller mee; er is geen JS aangepast.
   Op telefoon staat .pin-height op display:none (papa), dat blijft.
   ============================================================ */
@media screen and (min-width: 992px) {
  .pin-height { height: 230vh; }
}
/* ============================================================================
   TELEFOON-STAAND — alleen ECHTE phones in portret. pointer:coarse = touch-device
   (sluit smal-desktop met muis uit), orientation:portrait (landscape blijft as-is),
   max-width 600 = phone (geen tablet). Doel: carousel full-bleed tot de schermrand;
   spacing var-gedreven in REM (16px root = STABIEL) i.p.v. de em-size-tokens die op de
   mobiele body-font (~13px) inklappen ("var-afstand werkt niet op telefoon").
   ============================================================================ */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  /* 1) De .padding-global side-padding WEG binnen de aanbod (= S3-paneel + carousel-parent) → die laag
     is edge-to-edge. GEEN radius o.i.d. weggehaald, alleen links/rechts-padding. */
  .section_aanbod .padding-global { padding-left: 0; padding-right: 0; }
  /* 2) De elementen dragen nu ZELF de gutter = dezelfde page-padding die de header/hero/alles gebruikt,
     zodat ze daarmee uitlijnen. Verticale ritmes in rem (stabiel; em-tokens klappen in op de mobiele font). */
  .cta-wrap.is-aanbod {
    --aanbod-gutter: var(--_layout---padding-global--page-padding);   /* = header/hero-gutter → uitlijnen */
    --aanbod-vgap: 1.75rem;
    padding-left: var(--aanbod-gutter); padding-right: var(--aanbod-gutter);   /* paneel + filter lijnen uit met header */
    padding-top: var(--aanbod-vgap); padding-bottom: 2.5rem;
  }
  /* 3) CAROUSEL = de uitzondering: breekt uit de gutter tot de schermrand (full-bleed). */
  .aanbod-band {
    width: auto;                      /* override width:100% zodat de negatieve marges 'm ECHT verbreden */
    margin-left:  calc(-1 * var(--aanbod-gutter));
    margin-right: calc(-1 * var(--aanbod-gutter));
    margin-top: var(--aanbod-vgap);
  }
  /* 4) Cellen: dezelfde gutter → kaarten lijnen uit met filter/header + de gutter = de gaps tussen listings. */
  .aanbod-cel, .aanbod-alle { padding-left: var(--aanbod-gutter); padding-right: var(--aanbod-gutter); }
  /* 5) CAROUSEL-RAND-FADES UIT op telefoon: de beige gutter-fades zagen er lelijk uit op deze smalle
     full-bleed-staat. Desktop/landscape (buiten deze query) houden hun fades. */
  .aanbod-band::before, .aanbod-band::after { display: none; }
  /* 6) SCHERM-3 (.section_cta-cards) net als de carousel edge-to-edge → het beige sluit naadloos aan.
     Zijn beige zit op .cta-wrap.is-cta-cards (liep ingesprongen door de .padding-global-gutter → een
     'kader'-stap t.o.v. de full-bleed carousel-beige). Gutter-padding weg op de padding-global → beige
     loopt tot de schermrand; dezelfde gutter terug op de beige-wrap zelf zodat de inhoud níét verschuift
     (alleen het beige verbreedt). Radius blijft staan (niet weggehaald). */
  .section_cta-cards .padding-global { padding-left: 0; padding-right: 0; }
  .section_cta-cards .cta-wrap.is-cta-cards {
    padding-left: var(--_layout---padding-global--page-padding);
    padding-right: var(--_layout---padding-global--page-padding);
  }
  /* FILTER: geen verticale wiggle (overflow-y clip → hidden); horizontale scroll blijft */
  .aanbod-filters { overflow-y: clip; }
}

/* ============================================================================
   LISTING-CARD — media (scherp) + media--blur (tweeling) + veil + panel.
   4 lagen i.p.v. 7. Cross-browser verloop-blur via een echte foto-tweeling
   (backdrop-filter + mask blurt ALLEEN in Chromium, valt wég in Safari + Firefox).
   Blur-band = gradient-mask in % van de kaart; blur en panel schalen mee met de kaart.
   ============================================================================ */
.listing-card {
  position: relative;
  width: 100%;
  aspect-ratio: 550 / 400;
  border-radius: var(--_layout---border-radius--8px);
  overflow: hidden;
  cursor: pointer;
  background-color: var(--_colors---swatch--green);
  container-type: inline-size;
  --listing-sec: max(.62em, 1.667cqi);
  --listing-tag-h: max(2.25em, 5.2cqi);
}
@media screen and (max-width: 767px) { .listing-card { aspect-ratio: 1 / 1; } }

/* 1 — MEDIA: scherpe foto.  2 — MEDIA-BLUR: geblurde TWEELING (zelfde src → browser-cachet 'm = 1 download).
   Cross-browser gefadede blur = een foto-kloon met filter:blur + gradient-mask (de mask maskt de EIGEN
   pixels van de IMG → werkt in álle engines). Een backdrop-filter kun je NIET faden: mask op hetzelfde
   element = solide blok, mask op een ouder/::after = géén blur (empirisch bewezen, beide sessies).
   scale(1.05) duwt de blur-rand off-card; mask-stops in % van de KAART (band ≈ onderste 38%). */
.listing-card__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-card__media--blur {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none; transform: scale(1.05); transform-origin: center; filter: blur(3px);
  -webkit-mask: linear-gradient(to top, #000 0%, #000 15%, transparent 38%);
          mask: linear-gradient(to top, #000 0%, #000 15%, transparent 38%);
}

/* 3 — VEIL: de beige->navy RADIAAL-scrim (1:1 ongewijzigd t.o.v. .aanbod-overlay). */
.listing-card__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 170% 135% at 24% -8%,
    rgba(247, 231, 217, .16) 40%,
    rgba(42, 36, 32, .66) 92%);
}

/* 4 — PLAAT: __plate = navy-melt + tekst + border-ring in ÉÉN laag. __plate-body is hierin samengevoegd:
   sinds de plaat flush is (0/0/0) bezetten beide exact dezelfde box, en niets (JS/CSS) hing aan plate-body.
   border-radius = card (NIET kleiner): flush + kleinere radius = de hoek steekt buiten de overflow-clip van de
   kaart → border afgesneden in de hoek. Gelijk aan card → de 1px border-ring volgt exact de kaartronding.
   De blur zit op de card-level tweeling (__media--blur, zie boven), niet op de plaat. */
.listing-card__plate {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-radius: var(--_layout---border-radius--8px);
  padding: 20cqi 1.667cqi 1.667cqi;
  display: flex; flex-direction: column; justify-content: flex-end; row-gap: 3cqi;
  color: var(--ssn-surface);
  background: linear-gradient(to top, rgba(42, 36, 32, .58) 0%, rgba(42, 36, 32, .40) 35%, rgba(42, 36, 32, 0) 72%);
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 18cqi);
          mask: linear-gradient(to bottom, transparent 0, #000 18cqi);
}
.listing-card__plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; padding: 1px;
  background: var(--_colors---swatch--grey);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}

/* --- INHOUD (waarden ongewijzigd; alleen selectors hernoemd) --- */
.listing-card__head { position: relative; padding-left: 1cqi; padding-right: 1cqi;
  display: flex; justify-content: space-between; align-items: flex-end; grid-column-gap: 1.5em; }
.listing-card__head-main { min-width: 0; display: flex; flex-direction: column; row-gap: 0.667cqi; }
.listing-card__place { display: flex; align-items: center; font-size: calc(var(--listing-sec) * 1.272);
  font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--ssn-surface); line-height: 1; }
.listing-card__place svg { display: none; }
.listing-card__title {
  font-family: var(--_headings---heading-m--font);
  font-size: max(1em, 4cqi);
  font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: 1.1;
  color: var(--ssn-surface);
  /* mag binnen z'n breedte over 2 regels wrappen; pas op de 2e regel knipt-ie met … */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.listing-card__price-block { display: flex; flex-direction: column-reverse; align-items: flex-end;
  row-gap: 1cqi; text-align: right; flex: 0 0 auto; }
.listing-card__price { font-size: max(.85em, 2.7cqi); font-weight: 400; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1; color: var(--ssn-surface); }
.listing-card__on-request { font-size: var(--listing-sec); font-weight: 400; letter-spacing: .03em;
  text-transform: uppercase; color: #BEA88F; line-height: 1; }
.listing-card__per { text-transform: none; margin-left: .32em; letter-spacing: .01em; }

.listing-card__meta { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; grid-column-gap: 1em; }
/* Tussenruimte = die tussen plus en pijl (1cqi): sinds de badges hetzelfde vlak zonder rand hebben, is de hele rij één
   familie; één gap houdt hem rustig. Tags en knoppen blijven gescheiden door de grotere meta-gap (1em). */
.listing-card__tags {
  display: flex; flex-wrap: wrap; column-gap: 1cqi; row-gap: 1cqi; min-width: 0;
  max-height: var(--listing-tag-h); overflow: hidden;
}
/* Badge = het referentie-vak in rust: vlak #d4c6b912, geen zichtbare rand (1px transparant houdt de maat gelijk).
   Een rand betekent op de plaat alleen "aan": actieve badge (is-match) en hover op de plus. */
.listing-card__tag {
  flex: 0 0 auto; display: flex; align-items: center;
  height: var(--listing-tag-h); padding: 0 3.333cqi; background-color: #d4c6b912;
  border: 1px solid transparent; border-radius: var(--_layout---border-radius--4px);
  transition: border-color .2s;
}
.listing-card__tag span { font-size: var(--listing-sec); font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ssn-surface); line-height: 1; white-space: nowrap; }
.listing-card__meta .button-icon,
.listing-card__meta .button-icon_arrow { width: var(--listing-tag-h); min-width: var(--listing-tag-h);
  height: var(--listing-tag-h); min-height: var(--listing-tag-h); }
.listing-card__meta .icon-10px { width: max(.72em, 1.7cqi); }
/* Knoppen rechts (referentie + chevron) als één paar; tussenruimte = die tussen de tags (1cqi). */
.listing-card__actions { flex: 0 0 auto; display: flex; column-gap: 1cqi; }
/* Vlak + rand van beide vakken zitten op één laag (::before), zodat rand en vlak altijd dezelfde radius hebben.
   Hover op de kaart: de chevron schuift (ook als je op de referentie-knop staat). Geen knijpen (Dévin 25-09: slordig). */
.listing-card__actions .button-icon { background-color: transparent; transition: color .6s cubic-bezier(.16, 1, .3, 1); }
.listing-card__actions .button-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid transparent; background-color: var(--ssn-accent);
  transition: background-color .6s cubic-bezier(.16, 1, .3, 1), border-color .2s; }
.listing-card__actions .button-icon_track { position: relative; }   /* boven de laag */
.listing-card:hover .listing-card__go .button-icon_track { transform: translate(50%, 0); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (max-width: 991px) { .listing-card:hover .listing-card__go .button-icon_track { transform: translate(0, 0); } }

/* REFERENTIE-KNOP (/nl/properties). De <button> is alleen het klikvlak (knijpen verkleint het klikvlak dus niet); het vak
   is de .button-icon erin. Rust = het vak van de actieve-filter-chips in de listing-bar (.listings-bar__chip .button-icon:
   #d4c6b912 + beige icoon), zodat de oranje CTA het sterkste vak op de kaart blijft. Actief = vol beige met navy icoon
   (de primaire beige --ssn-surface, net als de header-CTA): gevuld = in je lijst, zoals de filter-checkbox vult.
   Hover op de plus = de chip-rand (niet op de min). Klik = aria-pressed: de track schuift zoals de chevron (plus eruit, vinkje erin), het vinkje tekent zich 100 ms later
   in zoals in de filter-checkbox. Afronden + plat vallen tot het min-streepje doet REF_SCRIPT (listings.mjs).
   Iconen: 13 chevron-eenheden breed (chevron = 8) → zelfde px per eenheid, dus de plus is even hoog (11.06) en even dik
   (1.5) als de chevron; het vinkje krijgt in zijn 12-eenheden-viewBox stroke 1.385 (= 1.5 chevron-eenheid) en rechte
   uiteinden, net als de chevron en de plus. */
.listing-card__save { -webkit-appearance: none; appearance: none; display: flex; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; border-radius: var(--_layout---border-radius--4px); }
.listing-card__save:focus-visible { outline: 2px solid var(--ssn-surface); outline-offset: 3px; }
.listing-card__save .button-icon { color: var(--ssn-surface); }   /* = de badge-tekst */
.listing-card__save .button-icon::before { background-color: #d4c6b912; }
/* Hover op de plus = de rand van het chip-vak, 1:1 (.listings-bar__chip .button-icon: 1px, rgba(235,227,216,.45), .2s);
   niet op de min. Zelfde kleur = de rand van een actieve badge (.listing-card__tag.is-match). */
.listing-card__save[aria-pressed="false"]:hover .button-icon::before { border-color: rgba(235, 227, 216, .45); }
.listing-card__save[aria-pressed="true"] .button-icon { color: var(--_colors---swatch--black); }
.listing-card__save[aria-pressed="true"] .button-icon::before { background-color: var(--ssn-surface); }   /* primaire beige = de header-knop */
.listing-card__save .button-icon_track { transform: translate(0, 0); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.listing-card__save[aria-pressed="true"] .button-icon_track { transform: translate(50%, 0); }
.listing-card__save-ic { display: block; flex: 0 0 auto; width: calc(max(.72em, 1.7cqi) * 1.625); }
.listing-card__save-mark path { fill: none; stroke: currentColor; stroke-width: 1.385; stroke-linecap: butt; stroke-linejoin: round; shape-rendering: geometricPrecision;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .34s cubic-bezier(.22, 1, .36, 1) .12s; }
.listing-card__save.is-drawn .listing-card__save-mark path { stroke-dashoffset: 0; }
.listing-card__save.is-instant .listing-card__save-mark path { transition: none; }
/* ronde 4 (pandpagina, referentielijst stap A): het stille pad van REF_SCRIPT (bij laden al bewaard, of gewijzigd in een
   ander tabblad of met de andere knop van hetzelfde pand) zet meteen de eindstand: vak, track en vinkje zonder overgang.
   Een eigen klasse: is-instant hoort bij fresh(), waarbij de track wél schuift. */
.listing-card__save.is-silent .button-icon, .listing-card__save.is-silent .button-icon::before,
.listing-card__save.is-silent .button-icon_track, .listing-card__save.is-silent .listing-card__save-mark path { transition: none; }
/* Na het intekenen geen streepjespatroon meer: tijdens de boog verandert de padlengte elke frame, en het afronden van
   pathLength liet de uiteinden flikkeren. Zonder dasharray tekent de boog altijd het hele pad, scherp. */
.listing-card__save.is-morph .listing-card__save-mark path { stroke-dasharray: none; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] .listing-card__actions .button-icon,
html[data-ssn-motion="reduced"] .listing-card__actions .button-icon::before,
html[data-ssn-motion="reduced"] .listing-card__save .button-icon_track,
html[data-ssn-motion="reduced"] .listing-card__save-mark path,
html[data-ssn-motion="reduced"] .listing-card__tag { transition: none; }


/* --- KRUIS-TEGEL: .aanbod-alle = de cel zelf (1 parent minder). Kruis groot + EXACT
       gecentreerd in de cel; button-span-label (lichter dan navy) op afstand eronder. --- */
.aanbod-alle {
  position: relative;
  display: block;
  /* Smallere basis + margin (= cel-padding 4.1667%) → de enkele rechter border valt op de
     col-11-rail (lijnt uit met filters erboven + onder-copy eronder). Footprint blijft 50%
     (basis + margin), dus de listing-cel ernaast snapt gewoon op de zijkant. */
  flex-basis: calc(50% - 4.1667%);
  margin-right: 4.1667%;
  border-right: 1px solid var(--_colors---swatch--grey);
  text-decoration: none;
  color: var(--_colors---swatch--black);
}
/* Mobiel: de kruis-tegel pakt DRIEKWART (75%) i.p.v. een hele listing (100%) → eigen breedte, eind-
   tegel-gevoel + peek naar de vorige. Komt ná de basis-regel zodat het de generieke mobiele 100% wint. */
@media screen and (max-width: 767px) { .aanbod-alle { flex-basis: 75%; margin-right: 0; } }

/* ============================================================================
   LISTINGS (/nl/properties) — RAIL-FRAME-ARCHITECTUUR (Engelse BEM).
   .listings__rails = een bordered, afgeronde box (RONDOM dicht: alle 4 hoeken rond) die DOORLOOPT
   OVER de header: de top-border zit op layout-padding van de schermtop, uitgelijnd met de header. De grid
   start op 1× layout-padding ónder de header en eindigt op 1× layout-padding bóven de afgeronde onderrand
   (symmetrisch). Bij filter-open versmalt de rail-box (rechter-rand schuift mee, sidebar sluit erop aan).
   Tokens + em/cqi; geen losse px (m.u.v. de 1px-rand).
   ============================================================================ */
/* FUNDAMENT: drie maten, één bron. Op BODY, niet op :root — de site zet de rand op telefoons ≤479 op body
   naar 1em; :root zag die wissel nooit (header 13 ↔ aanbod 19,5). Alles is em en rekent dus in de
   lettergrootte van het element dat de maat gebruikt → een doos die de indeling bepaalt (baan, filterdoos,
   balk, menu) houdt de body-lettergrootte; alleen de inhoud mag schalen.
   P = rand (header–bovenkant, zijkanten, balk–onderkant) · G = tussenruimte (grid-gap, onder de header,
   boven de balk) · N = header-hoogte = balkhoogte. */
body {
  --listings-line: var(--_colors---swatch--grey);
  --listings-pad: var(--_layout---padding-global--page-padding);                                /* P */
  --listings-gap: var(--listings-pad);                                                          /* G (= P, telefoon kleiner) */
  --listings-nav-h: 4.5em;                                                                      /* N = .navbar-hoogte */
  --listings-header-h: calc(var(--listings-pad) + var(--listings-nav-h));                       /* headerzone: P + N */
  --listings-foot-h: calc(var(--listings-gap) + var(--listings-nav-h) + var(--listings-pad));   /* balkzone: G + N + P */
  --listings-fade-h: 9.375rem;                                                                  /* fade-hoogte: kaarten én filters */
  --listings-sidebar-w: 28em;
  /* HET VAK — één bron voor de faint bak die de tabs, de actieve-filter-chips én de VORIGE/VOLGENDE-knoppen dragen
     (Dévin 27-09: "de fill kleur van de knoppen moet gelijk zijn aan de actieve filters"). De rand is 1px dik en in
     rust onzichtbaar; de hover-rand is de grijze swatch, die staat al als token. Radius = --_layout---border-radius--4px. */
  --listings-vak-vul: #d4c6b90d;
  --listings-vak-vul-hover: #d4c6b91a;
  --listings-vak-rand: #706d6600;
}
/* HEADER-MAAT VOLGT DE ECHTE NAVBAR: ≤991px is de navbar 4em (shared CSS) → N (en dus de header-onderkant) zakt mee. */
@media (max-width: 991px) { body { --listings-nav-h: 4em; } }
/* --listings-pad-px = P als vaste lengte (@property → px, op body berekend). Voor dozen met een eigen letter (de
   menu-tabs op 1.3333em): een em-token rekende daar in hún letter. */
@property --listings-pad-px { syntax: '<length>'; inherits: true; initial-value: 0px; }
body { --listings-pad-px: var(--listings-pad); }
/* MOBIEL (≤767): strakkere layout-dikte zoals de header — kleinere kaart-gap; de grid-top volgt de gap. */
@media (max-width: 991px) { body { --listings-foot-h: calc(.5em + var(--lcount-h) + var(--listings-nav-h) + var(--listings-pad)); } }   /* telefoon én tablet: de teller-rij (.listings-count-m, .5em + --lcount-h) vervangt G boven de balk */
@media (max-width: 767px) { body { --listings-gap: .75em; } }

/* SECTIE: omhoog getrokken OVER de header (de rails lopen erover) + boven de header in z-volgorde. Parent
   levert de zij-padding (het kader). */
.listings { position: relative; z-index: 101; padding-inline: var(--listings-pad); }

/* LAYOUT: frame + filter-sidebar-sleuf. */
.listings__layout { position: relative; display: flex; align-items: flex-start; min-height: calc(100dvh - var(--listings-foot-h)); }   /* DE BAAN: minstens scherm − balkzone → een korte lijst vult precies één scherm en de balk staat op z'n eigen plek (= z'n plakplek), niks beweegt los */
/* TELEFOON: DE BAAN OP HET KLEINSTE SCHERM (Dévin 16-10, "voor mobiel"). dvh groeit en krimpt met de adresbalk, dus een korte lijst (0 of 1
   resultaat) schoof mee bij elke scroll. svh = het scherm met de adresbalk uitgeklapt: de baan staat stil. Zelfde regel in 55 (de lege staat) en
   hieronder bij de sleuf: die is op de telefoon 0 breed maar telt wél mee in de hoogte van de baan (100dvh − de negatieve marge). Bleef die op dvh,
   dan duwde hij de baan alsnog mee. Op de tablet (768-991) is de sleuf het echte filtervak en blijft alles dvh. */
@media (max-width: 767px) { .listings__layout { min-height: calc(100svh - var(--listings-foot-h)); } }

/* FRAME: positie-context voor de grid (frameloos — de rail-box is verwijderd). */
.listings__frame { position: relative; flex: 1 1 auto; min-width: 0; --cols: 3; }
/* DE BREEKPUNTEN ZIJN DIE VAN DE SITE (Dévin 28-09: "die moet precies matchen met het breekpunt van de website").
   Papa's stylesheet knikt op 991 (tablet) en 767 (telefoon); deze grid deed dat op 1100 en 680 en zakte daardoor te
   vroeg naar één kolom — met de filterdoos open al vanaf 1100. Nu: 3 kolommen ≥992, 2 op 768-991, 1 ≤767; met de
   doos open één kolom minder, op hetzelfde breekpunt. */
@media (max-width: 991px) { .listings__frame { --cols: 2; } }
@media (max-width: 767px) { .listings__frame { --cols: 1; } }
@media (min-width: 992px) { .listings__layout.is-filtered .listings__frame { --cols: 2; } }
@media (min-width: 1920px) { .listings__frame { --cols: 4; } .listings__layout.is-filtered .listings__frame { --cols: 3; } }   /* heel grote schermen (Dévin 01-10): 4 kaarten naast elkaar, met de filters open 3 */

/* GRID: frameloos, edge-to-edge — start op 1× layout-padding ónder de header; GEEN zij/onder-padding (de
   sectie .listings levert al de zij-padding). gap = layout-padding. */
.listings__grid {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--listings-gap);
  padding: calc(var(--listings-header-h) + var(--listings-gap)) 0 0;
}
/* Geen scroll anchoring op de kaarten zolang renderPage ze wisselt en verschuift (filter, sortering, bladeren; listings.mjs
   zet .is-rendering vóór de mutatie en haalt hem weg als de FLIP klaar is). WebKit volgde anders een kaart en sprong de
   pagina 813 px (twee kaartrijen) omlaag; renderPage scrollt zelf als het moet. Alleen tijdens de render: bij het openen
   en sluiten van de filters houden Chromium en Firefox met hun eigen scroll anchoring de kaart waar je naar keek in beeld. */
.listings__grid.is-rendering { overflow-anchor: none; }
/* filters onthouden: tot de eerste gefilterde pagina er staat blijft de grid onzichtbaar (alleen zichtbaarheid, de hoogte blijft staan) */
.listings__grid.is-herstel { visibility: hidden; }
.listings__grid > .listing-card { display: block; }
/* WACHTEN OP DE FOTO (Dévin 28-09, herzien 29-09). Een kaart waarvan de foto nog niet binnen is, is er niet — geen browser-
   icoontje met alt-tekst, geen halve plaat. Zijn plek in het raster blijft wél staan (het element blijft in de stroom, met
   zijn aspect-ratio), dus er springt niets als hij verschijnt.
   VISIBILITY, GEEN OPACITY: de eerste versie zette hier opacity: 0. Maar een lopende animatie (de entree die flip() elke
   nieuwkomer gaf) wint van een gewone opacity, dus de kaart kwam zichtbaar binnen, de animatie eindigde, en dán verdween
   hij — Dévin zag hem komen en weggaan. visibility: hidden kan geen animatie overrulen, en zet de kaart meteen uit het
   toetsenbord en de muis (een onzichtbare kaart die je kon aanklikken bestond eerst wel).
   De entree (fade + schaal) speelt window.__ssnWacht af op het moment dat de foto binnen is; zie KAART_AANKOMST in
   listings.mjs. Alleen met JS aan (.w-mod-js, door Webflow in de head gezet): zonder script zou een wachtende kaart voor
   altijd wachten. Pagina 1 staat al wachtend in de HTML, zodat er niets zichtbaar is vóór het script draait. */
.w-mod-js .listing-card.is-wacht { visibility: hidden; }
/* Komt de foto niet (404, geen verbinding): de kaart verschijnt wél — anders blijft hij eeuwig weg — maar de <img>
   gaat uit beeld, want anders tekent de browser daar zijn kapotte-plaatje-icoontje mét de alt-tekst. Wat je ziet is
   het stille navy vlak van de kaart zelf, met zijn tekstplaat. De alt-tekst blijft in de HTML (schermlezers). */
.listing-card.is-geen-foto .listing-card__media,
.listing-card.is-geen-foto .listing-card__media--blur { visibility: hidden; }
/* FILTER-HIDE: de FLIP-engine zet [hidden] op niet-match-kaarten; die regel hierboven (spec 0,2,0) overruldede
   anders [hidden]{display:none} (0,1,0) → kaarten bleven zichtbaar terwijl de count wél klopte. [hidden] moet winnen. */
.listings__grid > .listing-card[hidden] { display: none !important; }
/* BADGE-MATCH (Devin): de gefilterde dimensie → bijbehorende kaart-badge vetgedrukt + lichtere rand. Rand = de hover-rand
   van het referentie-vak / chip-vak (rgba(235,227,216,.45)), zodat 'actief' en 'hover' op de plaat één taal spreken. */
.listing-card__tag.is-match span { font-weight: 700; }
.listing-card__tag.is-match { border-color: rgba(235, 227, 216, .45); }
@media (min-width: 1101px) { .listings__grid .listing-card__plate { font-size: 2.78cqi; } }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings__grid > .listing-card { animation: none !important; }


/* SIDEBAR-SLEUF: vrije container rechts (sluit aan op de rechter-rand). Opent op desktop → frame 3→2. */
.listings__sidebar { flex: 0 0 auto; width: 0; overflow: hidden; align-self: flex-start; position: sticky; top: 0; height: calc(100dvh - var(--kb-lift, 0px)); margin-bottom: calc(-1 * var(--listings-foot-h)); padding-top: calc(var(--listings-nav-h) + var(--listings-gap) + var(--listings-pad) * (1 - var(--sb-snap, 0))); transition: padding-top .7s cubic-bezier(.625, .05, 0, 1); display: flex; flex-direction: column; box-sizing: border-box; }   /* DE FILTERDOOS vult het hele scherm en loopt ONDER de balk door (fade). De negatieve marge = balkzone → de baan rekent de doos als 100dvh − balkzone: korte lijst past in één scherm, en doos + balk stoppen op hetzelfde moment met plakken. Ruimte boven de filters = alleen padding: N + G + P; bij de kleine header valt P weg (--sb-snap = 1, gezet in updateNav, alléén als de doos écht plakt). padding-top staat óók als de sleuf dicht is → openen animeert 'm niet. */
@media (max-width: 767px) { .listings__sidebar { height: calc(100svh - var(--kb-lift, 0px)); } }   /* telefoon: svh, zie DE BAAN OP HET KLEINSTE SCHERM hierboven */
@media (min-width: 768px) { .listings__layout.is-filtered .listings__sidebar {
  width: var(--listings-sidebar-w); overflow: visible;
  /* padding ALLEEN als de sleuf open is — dicht (width 0) zonder padding, anders schuift de grid op (Devin). */
  /* RECHTER layout-padding hoort bij de FILTER-INHOUD zelf (niet los op .listings): de sleuf strekt 1 pad naar rechts tot de viewport-rand (margin-right) en geeft de inhoud z'n eigen rechter-padding terug → de listing-grid houdt z'n rechter-gutter via .listings (dicht), de scrollende filter-sectie bezit 'm zelf (open). Vast, niet dynamisch. (Devin) */
  padding-inline: var(--listings-pad);   /* padding-top staat op de basis-regel (ook dicht), zie .listings__sidebar */
  margin-right: calc(-1 * var(--listings-pad));
} }
/* TABLET (768-991): de sleuf is gewoon een sidebar (zelfde mechaniek), de grid zakt naar 1 kolom en de
   filter-typografie schaalt één trede op — zoals de site vaker per-breakpoint z'n maten bumpt. */
@media (min-width: 768px) and (max-width: 991px) {
  .listings__layout.is-filtered .listings__frame { --cols: 1; }
  .listings__sidebar .ssnf { font-size: 1.35em; }
}
.listings__sidebar-inner {
  /* vult de ruimte ÓNDER de gepinde .ssnf-top en scrollt intern; alle padding (clearance + links) zit op .listings__sidebar.
     ssnf-top staat als directe sibling erbóven → die scrollt dus NIET mee (Devin). */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  /* EIGEN FADE onder de balk: mask op de scroll-doos (zelfde recept als de chips). Uit zodra er niets meer onder staat:
     dat meet de bestaande has-more op .listings__sidebar al (scroll + ResizeObserver), dus geen tweede meting. */
  --fade-b: var(--listings-fade-h);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-b)), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-b)), transparent 100%);
  transition: --fade-b .25s ease;
}
.listings__sidebar:not(.has-more) .listings__sidebar-inner { --fade-b: 0px; }
.listings__sidebar-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }
.listings__sidebar-inner::after { content: ""; display: block; height: var(--listings-foot-h); }   /* scroll-ruimte = balkzone: helemaal doorgescrold staat het laatste filter op G boven de balk. Hier (body-lettergrootte), niet in .ssnf--rail (eigen lettergrootte ×1,25 / tablet ×1,35 → rekende 90 per toeval) */
.listings__sidebar-inner > i { display: block; height: 4.5em; border-top: 1px solid var(--listings-line); }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings__sidebar,
html[data-ssn-motion="reduced"] .listings__sidebar-inner { transition: none; }


/* PAGINA-FADE: navy-verloop onderaan de viewport, 100vw (dekt de hele pagina, óók met filters open), 150px
   hoog (= 9.375em). Native position:fixed werkt nu (ScrollSmoother is uit op deze pagina). Zit in .listings
   vóór .listings__layout; z-5 = bóven de grid (z-0), ónder de balk (z-6). */
.listings__fade {
  position: fixed; left: 0; bottom: var(--kb-lift, 0px); width: 100vw; height: var(--listings-fade-h); z-index: 4; pointer-events: none;   /* z4: ónder het filtermenu (5), bóven de grid */
  background: linear-gradient(to top, var(--_colors---swatch--black), transparent);
}
/* DE ONDERBALK VAN SAFARI ("de dock"). Eén strook, op elke pagina, gezet en weggehaald door lib/dock.mjs: staat hij er, dan is de balk
   gevuld in het merk-navy; is hij weg (header-menu, showcase, typen; op de filterpagina nooit), dan is de balk glas. Uitleg en metingen staan in dock.mjs;
   kort: Safari 26 leest het vaste element dat de onderrand raakt, en alleen als het verschijnt of verdwijnt, nooit een kleurwissel.
   4 px zichtbaar (bottom -8px, 12 px hoog; de eis is 3 px). Met het toetsenbord omhoog rekt hij mee tot de bovenkant ervan (min-height + --kb-lift,
   net als de strook van 29-09): anders ziet het glas van het toetsenbord de ruwe pagina (foto's) in plaats van navy. Buiten de aanbodpagina is --kb-lift 0, dus daar blijft het bij 12 px.
   Navy = --_theme---background, en omdat de balk er zelf navy van wordt valt die strook visueel samen met de balk. Boven 991 px bestaat er geen onderbalk (iPad: tabbalk bovenin). */
.ssn-dock { position: fixed; left: 0; bottom: -8px; width: 100%; height: 12px; min-height: calc(12px + var(--kb-lift, 0px)); background-color: var(--_theme---background); pointer-events: none; z-index: 2147483647; }
/* z-index: Safari telt de strook alleen als er aan de onderrand niets bovenop ligt (gemeten 01-10: een strook die door een later of hoger
   element bedekt werd gaf glas). Op de aanbodpagina lag de kaartenlijst er bovenop (z-index 1 was te laag, de oude strook zat binnen .listings
   met z-index 3). De strook is pointer-events: none en maar 4 px zichtbaar, en hij verdwijnt zodra een uitklap opent, dus bovenop alles kost niets. */
@media (min-width: 992px) { .ssn-dock { display: none; } }
/* De kaart-fade (aanbod) staat op iOS 4 px hoger: aan de onderrand ligt dan maar één element, dus Safari kiest niet tussen twee. */
@media (max-width: 991px) { .is-ios-safari .listings__fade { bottom: calc(var(--kb-lift, 0px) + 4px); } }
@media (min-width: 768px) { .listings__layout.is-filtered ~ .listings__fade { width: auto; right: var(--listings-sidebar-w); } }   /* filters open: de kaart-fade stopt bij de filterdoos (die heeft z'n eigen fade) → nooit een dubbele fade over de filters */
.aanbod-alle-icoon {
  position: absolute; inset: 0;                    /* exact gecentreerd in de tegel; GEEN hover-scale (geen push) */
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
/* Hover: alléén de SVG schaalt (1.2). De icoon-box blijft absolute inset:0 → geen reflow,
   dus de hoogte van .aanbod-alle verandert niet. transform-origin center = groeit vanuit het hart. */
.aanbod-alle-icoon svg { height: 16em; width: auto; color: var(--_colors---swatch--black); transform-origin: center; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.aanbod-alle:hover .aanbod-alle-icoon svg { transform: scale(1.2); }
/* Label = exacte knop-span-stijl (Basic Grotesque 500 / uppercase / .01em), lichter dan navy.
   Onderaan verankerd op de cel-padding → lijnt uit met de onderkant van de listing-kaarten. */
.aanbod-alle-label {
  position: absolute; left: 0; right: 0; bottom: var(--_sizes---size--56px);
  text-align: center; white-space: nowrap;
  font-family: var(--_fonts---fonts--paragraph);
  font-size: var(--_sizes---size--16px);
  font-weight: 500; letter-spacing: .01em; text-transform: uppercase; line-height: 1.5;
  color: var(--_colors---swatch--grey);
}
@media screen and (max-width: 479px) { .aanbod-alle-label { bottom: var(--_sizes---size--40px); } }

/* --- CURSOR-TOOLTIP — knop-span-roll: twee regels met NATUURLIJKE kerning, per-letter
       stagger (transition-delay per letter in de markup), geklemd door de pill (overflow
       hidden). Beide regels in één grid-cel: de langste zet de breedte. --- */
body:has([data-cursor]:hover) .cursor:not(.is-ref) { opacity: 1; }
/* Referentie-tooltip ('bewaren' / 'weghalen'): alleen boven de referentie-knop, en niet meer na een klik tot je hem verlaat. */
body:has(.listing-card__save:hover:not(.is-tip-off)) .cursor.is-ref { opacity: 1; }
.cursor.is-instant .cursor-line span { transition: none; }   /* woord wisselen zonder rol (terwijl hij onzichtbaar is) */
/* Tooltip verticaal centreren: papa's .cursor had top .3 < bottom .4 (tekst zat hoog) → meer top, minder bottom. */
.cursor { padding: .42em .75em .34em; }
/* Desktop-only drag-cursor: nooit op touch/mobiel (anders blijft 'sleep' linksboven plakken). */
@media (max-width: 991px), (pointer: coarse) { body .cursor { display: none; } }
.cursor-text { position: relative; display: inline-grid; height: 1.25em; line-height: 1.25; overflow: hidden; vertical-align: top; font-weight: 500; }
/* Beide regels in dezelfde grid-cel: de pil is zo breed als de LANGSTE regel, welke dat ook is (was: is-b moest de
   breedste zijn; '‹ sorteer ›' is langer dan 'weghalen'). Elke regel gecentreerd. */
.cursor-line { grid-area: 1 / 1; display: inline-flex; justify-content: center; white-space: nowrap; }
.cursor-line span { display: inline-block; line-height: 1.25; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.cursor-line.is-a span { transform: translateY(0); }
.cursor-line.is-b span { transform: translateY(100%); }
.cursor.is-alt .cursor-line.is-a span { transform: translateY(-100%); }
.cursor.is-alt .cursor-line.is-b span { transform: translateY(0); }

/* --- ONDER-COPY op de col-11-rail --- */
.aanbod-onder-wrap { margin-top: var(--_sizes---size--80px); }

/* Whoosh-prep voor latere preload-shimmer per dynamisch veld. */
.is-dyn { position: relative; overflow: hidden; }

/* --- WhatsApp-modal: dicht = klik-doorlaatbaar (SplitText-reveal-fix) --- */
.whatsapp-modal__card,
.whatsapp-modal__dark { pointer-events: none; }
[data-whatsapp-modal-status="active"] .whatsapp-modal__card,
[data-whatsapp-modal-status="active"] .whatsapp-modal__dark { pointer-events: auto; }

/* =====
   Koppen die geen kop zijn (SEO-poort, 25-10)
   De tekst in de chatknop ("WhatsApp ons") en de lege staat van het aanbod ("We hebben hier niks gevonden") stonden als <h2>: voor Google en een
   AI-assistent waren dat koppen van de inhoud. Nu zijn het alinea's met .ssn-als-h2, en die klasse geeft ze papa's h2-regel uit shared-ssn.css
   (letter, spatiëring, hoofdletters, geen marge). Maat, regelhoogte en gewicht blijven van hun eigen klasse (.whatsapp-modal__h2, .heading-style-64px-2),
   net als voorheen. Het beeld verandert niet: gemeten met de computed style vóór en na (PR-beschrijving).
   ===== */
.ssn-als-h2 {
  font-family: var(--_fonts---fonts--heading);
  letter-spacing: var(--_headings---heading-xl--letter-spacing);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}
/* ============================================================
   FOOTER-CREDITS — op mobiel LINKS uitgelijnd (Devin-eis: niet centreren). Webflow centreert de credits op mobiel
   (© via mijn eerdere regel, samen-met + legal-links native) → nu alles links: © text-align:left, footer-bottom
   align-items:flex-start, de links-groep links-gepakt (auto-breedte, wrap als 't niet past). Desktop = de native
   Webflow-layout (ongemoeid). Footer = single-source (1× HOME_FOOTER op élke pagina; alléén de actieve nav-globe
   verschilt). ssn-overrides laadt ná shared → wint (zelfde specificity).
   ============================================================ */
@media screen and (max-width: 991px) {
  .footer-disclaimer { text-align: left; }       /* © links */
  .footer-bottom { align-items: flex-start; }    /* 'Samen met …'-credit links; legal-links blijven Webflow-native (rij) */
}

/* ============================================================
   VRAGENLIJST-PODIUM (/nl/properties) — hergebruikt de beige AANBOD-STAGE-panel (.cta-wrap.is-aanbod),
   maar STANDALONE: geen S3-tuck (dus geen negatieve marge), alle hoeken rond. Alleen het beige vlak + kop;
   de vragenlijst komt later in de panel. Geen carousel/filters/scroll. (taak: beige vlak van de homepage.)
   ============================================================ */
.section_aanbod.is-vragenlijst { position: relative; z-index: 1; margin-top: var(--_layout---padding-global--page-padding); }   /* = P onder de balk op /nl/properties (de meet-test z'n K5/V8/K10 hangen hier vanaf); position en z-index: de omgekeerde hoekjes van de brug (58) liggen op het navy erboven en eronder */
.section_aanbod.is-vragenlijst .cta-wrap.is-aanbod {
  border-radius: var(--_layout---border-radius--12px);
}

/* ORANGE GLOBE (navbar current-indicator) — toon de oranje globe op de huidige-pagina-navlink via
   aria-current (overleeft Webflow's runtime; w--current wordt op .html-URL's gestript). Zelfde
   'current'-positie (translate 35%) als de bestaande w--current/hover-regel in de shared CSS. */
.btn-animate-chars.is-navlink[aria-current="page"] .navlink_globe-item { transform: translate(0px, 35%); }

/* ============================================================
   ONDERBAR (/nl/properties) — MIRROR van de header: zelfde EM-hoogte (4.5em → 4em mobiel, groeit/krimpt mee per
   breakpoint, net als .navbar), .navbar-bg-blur (navy-60 + blur 14px), 1px-rand + 6px radius. Platte wapp-cellen
   (52px, scheidings-rand via border-inline, GEEN radius/padding, 24px iconen). Tabs = .navbar_menu-navlinks MÉT hun
   header-rand. position:sticky in .listings (ScrollSmoother is uit op deze pagina → sticky werkt gewoon). Geen
   oranje hover, geen balk-padding, één parent.
   ============================================================ */
/* EM-KALIBRATIE (Devin: dynamisch, maar exact als de oorspronkelijke rem-look). --size-font = clamp(992,100vw,
   1600)/120 = 12px op 1440 (niet 16px). De interne maten waren in rem (16px-basis) getekend en zagen er goed uit;
   1:1 naar em kromp ze naar 12/16 = 75%. Fix: zet de bar-font op 1.3333em → 1em-binnen = 16px op 1440 (schaalt mét
   --size-font). Alle interne em-getallen (cel 3.25em, icoon 1.3em, tekst .75em…) renderen nu 1:1 als de oude rem,
   maar dynamisch. Die 1.3333em staat op de INHOUD van de balk (.listings-bar > *), niet op de balk-doos: de doos
   houdt de body-lettergrootte, dus hoogte/marge/onderkant/radius zijn gewoon de tokens N/G/P (lek 2: een em op
   de doos zelf rekende ×1.3333 → 24 i.p.v. 18 van de onderkant). */
/* HET TOETSENBORD (Dévin 28-09, herzien 29-09). listings.mjs meet met visualViewport en zet twee getallen op <html>:
     --kb     de hoogte die het toetsenbord inneemt (0 als er geen staat, of geen tekstveld focus heeft)
     --vv-top hoever iOS het zichtbare venster heeft opgeschoven om het veld in beeld te brengen
   --kb is een GEREGISTREERDE eigenschap (@property, <length>) met een transitie op <html>: alles wat we optillen beweegt mee
   met dezelfde curve als het Apple-toetsenbord. Zonder registratie kan de browser een variabele niet animeren; dan springt hij
   (het valt netjes terug, niets breekt). De curve is de omgekeerd ontwikkelde curve 7 van UIKit's toetsenbord,
   cubic-bezier(.38, .7, .125, 1), en .25 s is de duur die iOS zelf in zijn toetsenbord-meldingen opgeeft. Beide zijn op
   één plek aan te passen (--kb-ease, --kb-dur) als het op een echte telefoon net anders voelt.
   --vv-top volgt onmiddellijk, ZONDER animatie: een animatie zou wiebelen tegen de beweging van iOS zelf in.
   --kb-lift = wat een vastgezet ding onderaan omhoog moet: het toetsenbord min wat iOS al opschoof (zit iOS zelf al
   omhoog gepand, dan hoeft dat stuk niet nog eens). Elk ding onderaan telt hem op bij zijn eigen onderkant, zodat balk,
   teller, filtermenu, fade en filterdoos samen omhoog komen en onderling op exact dezelfde afstand blijven.
   html krijgt ook zelf de achtergrond: zonder die viel Safari's eigen balk terug op wit (of de tint van de pagina) zodra er
   niets op de body zichtbaar aan de onderrand hing. */
@property --kb { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --vv-top { syntax: '<length>'; inherits: true; initial-value: 0px; }
html { background-color: var(--_theme---background); --kb-lift: calc(var(--kb) - var(--vv-top));
  transition: --kb var(--kb-dur, .25s) var(--kb-ease, cubic-bezier(.38, .7, .125, 1)); }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] { transition: none; }

.listings-bar {
  position: sticky; bottom: calc(var(--listings-pad) + var(--kb-lift, 0px)); z-index: 6;   /* P van de onderkant = de header van de bovenkant */
  margin-top: var(--listings-gap);                                    /* G boven de balk = de grid-gap */
  display: flex; align-items: stretch; height: var(--listings-nav-h); /* N = de header-navbar, per breakpoint */
  overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--listings-line); border-radius: var(--_layout---border-radius--8px);   /* = de navbar-radius */
}
.listings-bar > * { font-size: 1.3333em; }   /* alleen de INHOUD schaalt (1em-binnen = 16px op 1440); de doos blijft op body-maat */
/* .listings-bar__bg = de blur-laag (zelfde recept als de header-.navbar-bg): navy-60 + backdrop-filter blur(14px). */
.listings-bar > .listings-bar__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--_colors---swatch--black-60);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.listings-bar__group { position: relative; z-index: 1; display: flex; align-items: stretch; flex: 0 0 auto; }
.listings-bar__group.is-right { margin-left: auto; align-items: center; height: 100%; }   /* teller + bladeren + FILTEREN naar rechts; geen gap: de vakjes sluiten op elkaar aan, gescheiden door hun 1px-rand (Dévin 27-09). height:100% = even hoog als de stretch, maar WebKit kent de hoogte dan al bij het meten van de breedte: zonder rekende Safari de vierkante bladerknoppen als 2em + rand (33 i.p.v. 52 op 1440) en schoven ze over FILTEREN */
/* SCOPE links uitgelijnd (ná sorteer/zoek), met 0.5em links-padding (zoals v6). */
.listings-bar__scope { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; }   /* stretcht tot aan de teller (Devin) */

/* PLATTE WAPP-CEL: 52px breed, volle hoogte, ALLEEN rechter scheidings-rand, GEEN radius/padding, 24px icoon, geen hover. */
.listings-bar__cell {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  box-sizing: border-box;                                  /* OUTER (incl. de 1px-rand) = exact de header-wapp; em = schaalt met --size-font */
  width: 3.25em; height: 100%; padding: 0; flex: 0 0 auto;
  background: transparent; color: var(--_colors---swatch--beige);
  border: 0; border-right: 1px solid var(--listings-line); border-radius: 0; cursor: pointer;
}
.listings-bar__cell svg { width: 1.3em; display: block; }   /* iconen ~21px (> 1.2em) */
/* FILTEREN-cel: ALLEEN linker scheidings-rand, meer L+R-ruimte, plat (overrulet btn-animate-chars faint-bg). */
.listings-bar__cell.is-filters {
  width: auto; padding: 0 1.5em; gap: .55em; background: transparent;
  border: 0; border-left: 1px solid var(--listings-line);
}

/* RESULTAAT-TELLER (X van de Y) — bone, header-type (Basic Grotesque 12px). */
.listings-bar__count {
  flex: 0 0 auto; white-space: nowrap; color: var(--_colors---swatch--beige);
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 400; letter-spacing: .01em;
}
.listings-bar__count strong { font-weight: 600; }

/* BLADEREN — twee balk-cellen, perfect vierkant (Dévin 27-09): hoogte = de cel (100%), breedte volgt via aspect-ratio
   — geen tweede em-maat, want de cellen rekenen in de 1.3333em van de balk-inhoud. Tegen elkaar en tegen FILTEREN
   aan, gescheiden door hun 1px-rand links, net als sorteren en zoeken. overflow:hidden: het spoor steekt niet uit
   terwijl een knop opengroeit. */
.listings-bar__pager { display: flex; align-items: stretch; align-self: stretch; flex: 0 0 auto; margin-left: 1em; }   /* de lucht tussen teller en bladeren = de oude gap van .is-right, in de em van de groep (16 px op 1440). Op de teller zou 1em maar 12 px zijn (.75em). Zonder zichtbare knoppen blijft de groep staan (0 breed), dus teller → FILTEREN houdt dezelfde lucht. */
.listings-bar__cell.is-pager { width: auto; height: 100%; aspect-ratio: 1; overflow: hidden; border-right: 0; border-left: 1px solid var(--listings-line); }
/* GEEN HOVER-VULLING (Dévin 29-09). Alleen deze twee vakjes vulden zich bij hover; sorteren, zoeken en FILTEREN doen dat niet, en
   de header ook niet. Gemeten: de vier andere cellen blijven op transparant, de chevrons gingen naar rgba(235,227,216,.05).
   Nu is de balk overal hetzelfde. Voor het toetsenbord blijft er wel een teken: dezelfde dunne focusrand als de sorteercel
   (.is-sort:focus-within), naar binnen getekend want dit vakje knipt (overflow: hidden). */
.listings-bar__cell.is-pager:focus-visible { outline: 1px solid currentColor; outline-offset: -.25em; }
/* Een knop die je niet kunt gebruiken, is er niet: geen breedte, doorzichtig, geen rand. Dit is de rust-stand; de
   overgang (.6s, fade + opengroeien) speelt pagerPaint() in listings.mjs af. */
.listings-bar__cell.is-pager.is-off { width: 0; opacity: 0; border-left-width: 0; pointer-events: none; }
/* het spoor: papa's .button-icon zonder zijn oranje vlak (net als .pand-pijl op de pandpagina); flex: none houdt het
   2em-vak heel terwijl de knop groeit (anders krimpt het mee en verschuift de chevron) */
.lb-pager__ic { display: flex; align-items: center; justify-content: flex-end; flex: none; width: 2em; height: 2em; overflow: hidden; }
.listings-bar__cell.is-pager[data-pager="prev"] .lb-pager__ic { transform: scaleX(-1); }
.listings-bar__cell.is-pager .icon-10px { width: .625em; }   /* overrulet .listings-bar__cell svg { width: 1.3em } */
/* DE CHEVRON SCHUIFT OP DE KLIK, NIET OP HOVER (Dévin 28-09). Het spoor draagt twee gelijke chevrons van 2em; in de
   ruststand (translate 0) staat de tweede in het venster. De keyframe schuift het spoor één vak op: de tweede gaat er
   rechts uit, de eerste komt er links in en landt precies op diens plek. Dan is de animatie klaar en valt het spoor
   terug (geen fill-mode) — waar nu weer de tweede staat, op exact dezelfde plek. Zelfde aanblik, dus die terugval is
   onzichtbaar, en elke volgende klik speelt hem opnieuw af. Eindeloos, zonder dat de JS iets hoeft terug te zetten.
   Bij ‹ staat het venster gespiegeld (scaleX(-1)), dus daar schuift hij naar links.
   Gemeten (1440, Chromium): venster 0–32, rust −32/0, na .6 s 0/32, daarna weer −32/0.
   .is-schuif zet listings.mjs bij elke klik op de knop (ook Enter en Spatie) en haalt hij bij animationend weg. */
@keyframes lb-pager-schuif { from { transform: translate(0, 0); } to { transform: translate(50%, 0); } }
.listings-bar__cell.is-pager.is-schuif .button-icon_track { animation: lb-pager-schuif .6s cubic-bezier(.16, 1, .3, 1); }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings-bar__cell.is-pager.is-schuif .button-icon_track { animation: none; }

/* cijfers springen niet bij het bladeren */
.listings-bar__count, .listings-count-m__t { font-variant-numeric: tabular-nums; }
/* focus op de teller: pagerPaint() in listings.mjs zet hem daar als de bladerknop met focus verdwijnt (tabindex -1, niet in
   de tabvolgorde). Dezelfde dunne lijn als .ssn-toast__x en de bedieningen van de pandpagina (1px solid currentColor), de
   afstand in em: .25em = 3 px op de 12 px van de teller, de afstand van de pandpagina. */
.listings-bar__count:focus-visible, .listings-count-m__t:focus-visible { outline: 1px solid currentColor; outline-offset: .25em; }
/* BLADEREN ONDER DE KAARTEN (Dévin 27-09, taak 3c + 3d): papa's VORIGE/VOLGENDE-balk uit zijn stories staat onder de
   24 kaarten. Op de telefoon ÉN de tablet (≤991, het breekpunt van de site — Dévin 28-09: op tabletbreedte liep de
   teller in de balk over de tabs heen): alleen op de laptop bladert de bezoeker met de vierkante ‹ › in de onderbalk
   (Dévin 27-09: "die hele volgende vorrige balk uit desktop. minder mooi dan verwacht"). De opmaak komt van papa zelf (shared-ssn.css: .navbar = 1px-rand, radius, hoogte N,
   .navbar.is-stories = padding .5em, .navbar-bg.hide-filter = navy-60 zonder blur, .btn-animate-chars.is-stories =
   het knop-vak met de letter-voor-letter-hover). Die stylesheet staat al op elke /nl-pagina, dus hier staat alleen
   wat papa niet weet: de plek in de stroom, VORIGE links en VOLGENDE rechts, de <button>-reset en de onbruikbare
   knop. Beide knoppen uit (één pagina, 0 resultaten) = de hele balk weg (hidden). De teller staat niet in deze balk:
   .listings-count-m landt aan het eind van de lijst vanzelf in het MIDDEN ervan (zie MOBIELE TELLER onderaan).
   De balk is een kind van .listings__frame, direct onder .listings__grid — zie de uitlijning hieronder. */
.listings__blader { display: none; }                                     /* ≥992: bladeren gaat met de vierkante ‹ › in de onderbalk */
@media screen and (max-width: 991px) {
  .listings__blader { display: flex; margin-top: var(--listings-gap); }  /* G onder de laatste kaart; breedte/hoogte/rand komen van .navbar */
  .listings__blader[hidden] { display: none; }                           /* .navbar zet display:flex en overrulet het UA-hidden */
}
/* UITLIJNEN MET HET ORANJE KAARTVAK (Dévin 27-09: "fix de padding zodat ze precies match aan de oranje boxjes").
   Dat vak staat 1.667cqi van de kaartrand — de padding van .listing-card__plate, dus 1,667% van de KAARTbreedte.
   Papa's .navbar.is-stories heeft padding .5em; samen met de 1px-rand van .navbar stond de knop 7,5 px van de
   balkrand terwijl het oranje vak op 390 op 6,06 px stond. Daarom rekenen we hier met de kaartbreedte: de balk hangt
   in .listings__frame, dus --cols geldt en 100% is de rasterbreedte. --kaart-w = de breedte van één kaart; de 1px
   eraf is de rand van .navbar, die net als bij het oranje vak van buiten af meetelt. Opent de filter-sleuf, dan
   wordt het frame smaller en de kaart breder: balk en padding volgen vanzelf. Gemeten rand→knop, links én rechts:
   6,06 px op 390, 5,84 op 768, 7,59 op 1440 en 8,89 op 1440 met de sleuf open — alle vier exact het getal van het
   oranje vak op datzelfde scherm.
   .navbar.is-stories is 0,2,0, dus de eigen naam erbij om die padding te kunnen overrulen. */
.navbar.is-stories.listings__blader {
  --kaart-w: calc((100% - (var(--cols) - 1) * var(--listings-gap)) / var(--cols));
  padding: calc(var(--kaart-w) * 0.01667 - 1px);
}
/* papa's twee kolommen als ÉÉN lijst: VORIGE links, VOLGENDE rechts — exact de regels van .pand-buren op de pandpagina */
.listings__blader .navbar_col.is-stories { flex: 1 1 auto; min-width: 0; }
.listings__blader .stories-prev-next_wrap { width: 100%; }
.listings__blader .collection-list-wrapper { flex: 1 1 auto; min-width: 0; }
.listings__blader .collection-list { display: flex; justify-content: space-between; align-items: center; gap: 1.25em; height: 100%; }
.listings__blader .collection-item { min-width: 0; }
/* Onze knoppen zijn <button> in plaats van papa's <a>: de standaardopmaak eruit, zoals .btn-animate-chars.pand-save-knop
   op de pandpagina. Twee dingen die papa's <a> gratis krijgt en een knop niet — gemeten, niet gegokt:
   · box-sizing: papa's reset noemt <a> wel en <button> niet, dus een knop rekent zijn 3.5em-hoogte zónder de
     1.5em-padding mee en werd 78 px hoog in een balk van 52;
   · het lettertype: .btn-animate-chars rekent padding en hoogte in em, en een knop begint op de letter van de
     browser, niet op die van de pagina.
   Met deze twee meet onze knop exact hetzelfde als papa's <a>: naast elkaar gezet op 390 allebei 112,6 × 41,1 px,
   zelfde padding, achtergrond, rand, radius, letter en regelhoogte. */
.listings__blader .btn-animate-chars { -webkit-appearance: none; appearance: none; box-sizing: border-box; margin: 0;
  color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; }
/* HET VAK = dat van de tabs en de actieve-filter-chips (Dévin 27-09), uit de tokens op body. Papa's is-stories gaf de
   knop #ebe3d80d en op de telefoon zelfs #ebe3d81a; die twee waren lichter én een andere kleur dan de chips. Radius
   is dezelfde token als daar (--_layout---border-radius--4px = .25em) — in px verschilt hij, want de tabs rekenen in
   de 1.3333em van de balk-inhoud en deze knop in de body-letter. 0,3,0 is genoeg voor papa's 0,2,0. */
.listings__blader .btn-animate-chars.is-stories {
  background-color: var(--listings-vak-vul); border: 1px solid var(--listings-vak-rand);
  border-radius: var(--_layout---border-radius--4px); transition: background-color .4s, border-color .4s;
}
.listings__blader .btn-animate-chars.is-stories:hover { border-style: solid; border-color: var(--_colors---swatch--grey); background-color: var(--listings-vak-vul-hover); }
/* Onbruikbaar = onzichtbaar, de PLEK BLIJFT staan (geen breedte-animatie zoals de vakjes in de balk): zo blijft de
   teller precies tussen VORIGE en VOLGENDE hangen. */
.listings__blader .btn-animate-chars.is-off { visibility: hidden; }

/* TABS = exacte header-navlinks MÉT hun rand + faint-bg: alléén het box-model repliceren (40px, niet rekken),
   want de .navbar-scoped maatregels gelden buiten .navbar niet. Rand/bg/globe/hover blijven van de basis-klasse.
   Selectors op .listings-bar__scope (niet .listings-bar …) → gelden voor BEIDE hosts (bar-desktop + menu-mobiel),
   dus de mobiele tabs zijn per definitie dezelfde stijl als desktop. */
.listings-bar__scope.navbar_menu { gap: .5em; padding: .5em; }
/* GEPIND op de desktop-look voor ÁLLE breakpoints: papa's mobile-CSS herstijlt .is-navlink binnen een
   navbar_menu naar de navmenu-onderstreep (alleen onder-border, geen radius) — hier expliciet de
   desktop-waarden (faint bg, transparante rand, 4px radius) zodat mobiel = desktop (Devin). */
.listings-bar__scope .btn-animate-chars.is-navlink {
  height: 100%; box-sizing: border-box; padding: 0 1.125em; gap: .75em; flex: 0 0 auto;   /* vult de gepadde laag → gelijke marge rondom (zie --tab-inset) */
  background-color: var(--listings-vak-vul); border: 1px solid var(--listings-vak-rand); border-radius: var(--_layout---border-radius--4px);
  transition: background-color .4s, border-color .4s; overflow: hidden;
}
.listings-bar__scope .btn-animate-chars.is-navlink:hover { border-style: solid; border-color: var(--_colors---swatch--grey); background-color: var(--listings-vak-vul-hover); }
.listings-bar .navbar-link_text, .listings-bar__scope .navbar-link_text {
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500;
  text-transform: uppercase; letter-spacing: .01em; color: var(--_colors---swatch--beige); line-height: 1;
}

/* ── ZOEK (Devin: GEEN groei) — de zoek-cel-toggle wisselt loep→kruis; de input-laag fadet absoluut in. ── */
/* De input-LAAG groeit niet: ze fadet absoluut in over de scope (geen width-animatie). Left/right = JS-gemeten
   (ná de 2 cellen → tot de teller/balkrand). Onzichtbaar = geen pointer-events. */
.listings-bar__search {
  position: absolute; top: 0; bottom: 0; z-index: 2;
  left: var(--srch-left, 6.5em); right: var(--srch-right, 0);
  display: flex; align-items: center;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .5s cubic-bezier(.16,1,.3,1), visibility 0s .5s;
}
.listings-bar.is-search .listings-bar__search { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .55s cubic-bezier(.16,1,.3,1); }
.listings-bar__search-in {
  width: 100%; min-width: 0; height: 100%; padding: 0 1em;   /* min-width 0: het wis-kruisje ernaast mag de input laten krimpen */
  background: transparent; border: 0; outline: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
  color: var(--_colors---swatch--beige);
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .01em;   /* normaler — richting de tab-/knop-spans (Devin) */
  transform: translateX(-.55em);   /* subtiele, langzame entree: schuift een fractie naar RECHTS z'n plek in */
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.listings-bar.is-search .listings-bar__search-in { transform: none; }
/* actieve query terwijl dicht → de zoek-toggle-cel krijgt het bekende actieve vlakje; een gekozen sortering (niet Beste
   match) zet de sorteercel met hetzelfde vlakje aan (ontwerp 2026-09-26, §2: "licht aan, zoals zoeken") */
.listings-bar__cell.is-searchtoggle.is-search-active, .listings-bar__cell.is-sort.is-on { background: #ebe3d80d; }
.listings-bar.is-search .listings-bar__count { position: relative; z-index: 3; }   /* teller blijft leesbaar bóven de open zoeklaag */
.listings-bar__search-in::placeholder { color: var(--_colors---swatch--grey); font-weight: 400; }
.listings-bar__search-in::-webkit-search-cancel-button, .listings-bar__search-in::-webkit-search-decoration { -webkit-appearance: none; }
.listings-bar__scope { transition: opacity .35s cubic-bezier(.16,1,.3,1); }
.listings-bar.is-search .listings-bar__scope { opacity: 0; pointer-events: none; }
.listings-bar__count { position: relative; z-index: 3; pointer-events: none; }   /* blijft bóven de open zoekbalk */
/* SORTEREN = een eigen menu in Apple-stijl (19-10), boven de sorteerknop. De knop is de cel; het menu staat als broertje van
   de balk (de balk knipt haar kinderen af: overflow hidden) en ligt fixed boven de balk. listings.mjs zet --sm-l (links =
   de sorteercel) en --sm-b (afstand van de viewport-onderkant tot de bovenkant van de balk). Rand, radius en tekstkleur
   = het filtermenu (.listings-bar__menu, css/50); het vlak is glas, als de balk; letter = het zoekveld van de balk. Hover en focus van een rij = de lichte laag van
   .is-sort.is-on. */
.listings-bar__cell.is-sort { position: relative; }
.listings-bar__cell.is-sort:focus { outline: 0; }   /* geen standaardrand van de browser: de eigen rand staat hieronder */
/* focus: de cel draagt de rand, de 1px-lijn van de teller, naar binnen gezet (de balk knipt af wat erbuiten valt). Alleen bij
   het toetsenbord: een muisklik of tik zet is-pointer op de cel (listings.mjs), de volgende toets haalt hem weg. */
.listings-bar__cell.is-sort:focus-visible:not(.is-pointer) { outline: 1px solid currentColor; outline-offset: -.25em; }
.lb-sortmenu {
  position: fixed; z-index: 7; left: var(--sm-l, 0); top: var(--sm-t, 0px); translate: 0 calc(-100% - .5em);   /* vast aan de bovenkant van de balk (JS volgt hem elk beeldje); translate apart van transform, die doet de in- en uitschuif */
  box-sizing: border-box; min-width: 15em; max-width: calc(100vw - 2 * var(--listings-pad)); padding: .35em;
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .01em; color: var(--_colors---swatch--beige);   /* letter = het zoekveld van de balk (14 px op desktop); het filterrij-token gaf hier 9 px */
  background: var(--_colors---swatch--black-60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);   /* glas (Dévin 19-10): het recept van de balk zelf (.listings-bar__bg, css/45) en de header: navy-60 + blur 14px */
  border: 1px solid var(--listings-line); border-radius: var(--_layout---border-radius--8px);
  opacity: 0; visibility: hidden; transform: translateY(.6em); pointer-events: none;
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s;
}
.lb-sortmenu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
html[data-ssn-motion="reduced"] .lb-sortmenu, html[data-ssn-motion="reduced"] .lb-sortmenu.is-open { transform: none; transition: none; }
.lb-sortmenu__row {
  display: grid; grid-template-columns: 1.1em 1.4em 1fr; align-items: center; column-gap: .7em; width: 100%; box-sizing: border-box;
  margin: 0; padding: .65em .75em; background: transparent; color: inherit; border: 0; border-radius: var(--_layout---border-radius--4px);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lb-sortmenu__row:hover, .lb-sortmenu__row:focus-visible { background: #ebe3d80d; outline: 0; }
.lb-sortmenu__row[aria-disabled="true"] { opacity: .34; cursor: default; }
.lb-sortmenu__row[aria-disabled="true"]:hover, .lb-sortmenu__row[aria-disabled="true"]:focus-visible { background: transparent; }
.lb-sortmenu__chk, .lb-sortmenu__ic { display: grid; place-items: center; }
.lb-sortmenu__chk { opacity: 0; }
.lb-sortmenu__row[aria-checked="true"] .lb-sortmenu__chk { opacity: 1; }
.lb-sortmenu__chk svg { width: .85em; height: auto; display: block; }
.lb-sortmenu__ic svg { width: 1.4em; height: auto; display: block; }
.lb-sortmenu__sep { height: 0; margin: .35em -.35em; border-top: 1px solid var(--listings-line); }   /* volle breedte: de negatieve marge = de padding van het menu (Dévin 19-10) */
/* ZOEK-CEL → SLUIT-SWAP: twee gestapelde iconen in de ZOEK-cel; bij is-search pusht het kruis de loep van
   rechts naar links weg (signature-ease). Kruis = ssnf-x-patroon, even groot als het chip-wis-kruis (.65em),
   incl. kwartslag-draai op hover. */
.listings-bar__cell.is-searchtoggle { position: relative; overflow: hidden; }
.listings-bar__cell.is-searchtoggle .lb-swap__i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.listings-bar__cell.is-searchtoggle .lb-swap__i.is-a svg { width: 1.3em; display: block; }
.listings-bar__cell.is-searchtoggle .lb-swap__i.is-b { transform: translateX(2.6em); }
.listings-bar__cell.is-searchtoggle .lb-swap__i.is-b svg { width: .8em; height: auto; display: block; }   /* het vinkje: de punten van de filter-checkbox, iets breder dan het chip-kruis omdat het lager is */
/* Dévin 16-10: open = het vinkje, ook als de balk nog leeg is (de knop blijft één schakelaar: tik = dicht, de term blijft).
   Wissen = het kleine kruisje rechts in de balk zelf, alleen met tekst. */
.listings-bar.is-search .listings-bar__cell.is-searchtoggle .lb-swap__i.is-a { transform: translateX(-2.6em); }
.listings-bar.is-search .listings-bar__cell.is-searchtoggle .lb-swap__i.is-b { transform: translateX(0); }
/* het wis-kruisje IN de balk = exact het wis-boxje van een chip (zelfde vak, vulling, hover-rand en kwartslag); alleen zichtbaar met tekst */
.listings-bar__search-x { flex: none; display: grid; place-items: center; margin: 0 .375em 0 0; padding: 0; background: none; border: 0; cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(.85); transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility 0s .35s; }
.listings-bar.has-q .listings-bar__search-x { opacity: 1; visibility: visible; transform: none; transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.listings-bar__search-x .button-icon { justify-content: center; background-color: #d4c6b912; border: 1px solid transparent; color: var(--_colors---swatch--beige); transition: background-color .2s, border-color .2s; }
.listings-bar__search-x:hover .button-icon { border-color: rgba(235,227,216,.45); }
.listings-bar__search-x .button-icon svg { width: .65em; height: .65em; display: block; pointer-events: none; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.listings-bar__search-x:hover .button-icon svg { transform: rotate(90deg); }
.listings-bar__search-x:focus-visible { outline: 1px solid currentColor; outline-offset: .125em; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings-bar__search,
html[data-ssn-motion="reduced"] .listings-bar__search-in,
html[data-ssn-motion="reduced"] .listings-bar__scope,
html[data-ssn-motion="reduced"] .listings-bar__cell.is-searchtoggle .lb-swap__i,
html[data-ssn-motion="reduced"] .listings-bar__search-x,
html[data-ssn-motion="reduced"] .listings-bar__search-x .button-icon svg { transition: none; }


/* ── ACTIEVE-FILTER-CHIPS — tabs↔chips = fade-STACK in de scope (beide op grid 1/1, achter elkaar).
   Chip = exact de tab-look (btn-animate-chars.is-navlink, zelfde box-model) zónder char-animatie/globe,
   met klein/licht prioriteit-nummer (teller-stijl) + oranje button-icon (het kaart-chevron-patroon,
   zelfde oranje-regel als .is-aanbod-cta). Ghost-exits staan absolute → hosts zijn relative. ── */
/* TABS + CHIPS = ALTIJD position:absolute in de scope (Devin): twee lagen die inset:0 over elkaar liggen en
   puur op opacity in/uit faden — nooit in-flow, dus geen positie-glitches en geen padding-pomp bij add/remove.
   Onzichtbaar = pointer-events + user-select uit. De CHIPS-laag is de scroller met het rechter-schaduwmasker
   (fade-r); links pas na scrollen (is-scrolled/is-end via JS). De scope zelf is enkel de relatieve host. */
.listings-bar__scope.navbar_menu { display: block; position: relative; min-width: 0; overflow: visible; --tab-inset: .375em; }   /* .375em van de 16px-basis = 6px = de verticale centreer-gap (2.5em-pill in de 3.375em-laag) → links = boven = onder */
.listings-bar__tabs, .listings-bar__chips {
  position: absolute; inset: 0; display: flex; align-items: center; gap: .5em;
  padding: var(--tab-inset) 0 var(--tab-inset) var(--tab-inset);   /* links-marge = boven/onder (Devin): pills vullen de gepadde box → 3 zijden exact gelijk, rechts open voor de scroll */
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
}
.listings-bar__tabs { overflow: hidden; }
.listings-bar__chips {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  --fade-l: 0px; --fade-r: 1.6em;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.listings-bar__chips.is-scrolled { --fade-l: 1.6em; }   /* links iets verborgen → linker fade aan */
.listings-bar__chips.is-end      { --fade-r: 0px; }     /* einde bereikt → rechter fade uit */
.listings-bar__chips::-webkit-scrollbar { display: none; }
/* zichtbaarheids-gating: onzichtbare laag krijgt geen pointer-events én geen user-select (Devin) */
.listings-bar__chips { opacity: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.listings.has-chips .listings-bar__chips { opacity: 1; pointer-events: inherit; user-select: auto; -webkit-user-select: auto; }   /* inherit: klikbaar zoals de scope-laag (in zoekmodus onklikbaar) */
.listings.has-chips .listings-bar__tabs { opacity: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.listings-bar__tabs > *, .listings-bar__chips > * { pointer-events: inherit; }   /* tabs en chips erven de klikbaarheid van hun laag: de site zet button{pointer-events:auto}, daardoor bleef een onzichtbare scope-chip boven de tab 'Alles' klikken afvangen (Dévin 26-09) */
/* chip = tab-box zónder flex-grow (base .btn-animate-chars heeft flex-grow:1 → dát pompte de padding bij deselect).
   padding-rechts = .25em (= de verticale gap van de 2em-box in de ~40px-chip → box-marge rondom gelijk, Devin);
   padding-links kleiner (nummer meer naar links) + grotere gap tussen nummer en label. */
.listings-bar__scope .btn-animate-chars.listings-bar__chip { flex: 0 0 auto; padding: 0 .1875em 0 .8em; gap: .8em; }
.listings-bar__chip .navbar-link_text { white-space: nowrap; }
.listings-bar__chip-n { font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 400; color: var(--_colors---swatch--grey); font-variant-numeric: tabular-nums; line-height: 1; }
/* chip = subtiele bekende achtergrond-blur (het navbar-bg-recept) achter de faint tint */
.listings-bar__chip { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* wis-boxje = SUBTIEL: lichte faint-fill, GEEN rand in rust; alléén op hover een lichte normale rand.
   Kruis = EXACT het zoek-sluit-kruis (.65em) + kwartslag-draai op hover. */
.listings-bar__chip .button-icon { justify-content: center; background-color: #d4c6b912; border: 1px solid transparent; color: var(--_colors---swatch--beige); transition: background-color .2s, border-color .2s; }
.listings-bar__chip .button-icon:hover { border-color: rgba(235,227,216,.45); }
.listings-bar__chip .button-icon svg { width: .65em; height: .65em; display: block; pointer-events: none; transition: transform .7s cubic-bezier(.16,1,.3,1); }   /* pointer-events:none → down/up/click landen ALLEMAAL op de box (data-chip-x); anders bubbelt de click naar de chip en faalt de wis-detectie (Devin) */
.listings-bar__chip .button-icon:hover svg { transform: rotate(90deg); }
/* OF/OF-hover (Devin): hover je het boxje → de chip-EIGEN hover-rand/tint vervalt (de box neemt de nadruk over) */
.listings-bar__scope .listings-bar__chip:has(.button-icon:hover) { border-color: var(--listings-vak-rand); background-color: var(--listings-vak-vul); }
/* vastpakken (mousedown/hold/drag) = de hover-staat van de tab (rand + tint) — is-held = zodra je 'm vasthoudt (Devin) */
.listings-bar__chip:active, .listings-bar__chip.is-held, .listings-bar__chip.is-dragging { border-style: solid; border-color: var(--_colors---swatch--grey); background-color: var(--listings-vak-vul-hover); }
/* tijdens het slepen: massief navy + blur (het navbar-bg-recept) → schone zwevende pill die netjes over de
   andere chips valt (Devin). Scope-prefix = hogere specificity dan de held-regel hierboven → navy wint. */
.listings-bar__scope .listings-bar__chip.is-dragging { z-index: 2; background-color: var(--_colors---swatch--black); transition: background-color .18s, border-color .2s; }   /* SOLIDE navy (Devin-fallback: blur onbetrouwbaar in de gemaskerde laag) → altijd schoon over andere chips; snappy bg (niet de trage .4s-basis) */
/* tijdens herordenen: overflow BLIJFT geclipt + het gradient-masker blijft aan → de opgepakte chip blijft in de
   baan (onder zoek/filter, vóór de teller) en fadet netjes onder de rand i.p.v. over alles heen te zweven (Devin). */
/* tijdens herordenen: overflow clipt (chip gaat niet over alles heen) + BEIDE fade-randen aan (Devin) → de
   gesleepte chip fadet netjes weg onder de knoppen door (links) en net vóór de resultaten-teller (rechts). */
.listings-bar__chips.is-reordering { overflow: hidden; --fade-l: 1.6em; --fade-r: 1.6em; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings-bar__tabs,
html[data-ssn-motion="reduced"] .listings-bar__chips { transition: none; }


/* MENU-HOST (mobiel, in de dropup): tabs/chips-scroller direct ónder de ssnf-top — zelfde parent-vorm als
   de onderbar-scope (zelfde .5em boven/onder-padding, zelfde scroll+mask via de gedeelde regels hierboven),
   mét onder-border. */
.listings-bar__scope.is-menu {
  flex: 0 0 auto;
  font-size: 1.3333em;                            /* zelfde em-basis als de bar-scope → menu-tabs/chips = exact desktop-maat */
  height: 3.5em; box-sizing: border-box;          /* VASTE rij-hoogte: de tabs/chips-lagen zijn absolute → de host moet een box hebben (papa's .navbar_menu height:100% zou de dropup vullen + de filterlijst versperren) */
  padding: .5em var(--listings-pad);
  border-bottom: 1px solid transparent; transition: border-color .4s cubic-bezier(.16, 1, .3, 1);   /* lijn pas bij scrollen (is-scrolled) */
}
.listings-bar__menu.is-scrolled .listings-bar__scope.is-menu { border-bottom-color: var(--listings-line); }
/* Tabs/chips in het menu lijnen uit met Reset (links) en X (rechts): links de pagina-marge als padding in de scroller,
   rechts een even grote spacer achter de laatste chip (end-padding van een flex-scroller telt niet overal mee). Scrollt
   mee; in rust staan de randen gelijk met de kop erboven. */
.listings-bar__scope.is-menu > .listings-bar__tabs, .listings-bar__scope.is-menu > .listings-bar__chips { padding-left: var(--listings-pad-px); padding-right: 0; }
.listings-bar__scope.is-menu > .listings-bar__tabs::after, .listings-bar__scope.is-menu > .listings-bar__chips::after { content: ""; flex: 0 0 max(0px, calc(var(--listings-pad-px) - .5em)); align-self: stretch; }

/* MOBIEL (=991px, net als de header): de tabs/chips-parent is NIET in de balk zichtbaar — die leeft in de
   dropup (.is-menu, onder de ssnf-top). De balk krijgt zo ruimte voor sorteer+zoek links en een
   FILTEREN-stretch rechts die de rest opvult (Devin). */
/* MOBIEL (≤767, het site-breakpoint 'small'): pas hier wisselt de indeling — tabs/chips de dropup in,
   sorteer+zoek links, FILTEREN-stretch rechts. Tablet (768-991) houdt de volledige desktop-indeling. */
/* De teller en de vierkante ‹ › verlaten de balk al op de TABLET (≤991): daar botste "73 tot 96 van de 358" met de
   tabs. Het bladeren staat dan onder de kaarten, de teller in zijn eigen rij erboven. De rest van deze indeling
   (tabs de dropup in, FILTEREN over de volle breedte) blijft op ≤767 — dat is de telefoon-indeling. */
@media screen and (max-width: 991px) {
  .listings-bar__count { display: none; }
  .listings-bar__pager { display: none; }   /* de balk blijft sorteren, zoeken, FILTEREN; het bladeren staat onder de kaarten (.listings__blader) */
}
@media screen and (max-width: 767px) {
  .listings-bar > .listings-bar__scope { display: none; }
  .listings-bar__group.is-right { flex: 1 1 auto; }
  .listings-bar__cell.is-filters { flex: 1 1 auto; justify-content: center; border-left: 0; transition: opacity .35s cubic-bezier(.16,1,.3,1); }   /* geen linker rand (dubbel met de zoek-rand); fade-baar */
  .listings-bar.is-search .listings-bar__cell.is-filters { opacity: 0; pointer-events: none; }
  /* FILTEREN / RESULTATEN in het midden van de knop, zonder schuiven (Dévin 01-10): beide labels staan op dezelfde plek, elk gecentreerd; de breedte beweegt niet meer. */
  .listings-bar__cell.is-filters .lb-flabel { display: grid; justify-items: start; transition: none; }
  .listings-bar__cell.is-filters .lb-flabel__a, .listings-bar__cell.is-filters .lb-flabel__b { grid-area: 1 / 1; position: static; }   /* zoek groeit erOVERheen — FILTEREN fadet, wordt nooit geperst */
}

/* HEADER op /nl/properties = EXACT de homepage. is-nav-small wordt nu (zoals de site zelf doet) op BÉIDE .nav
   én .navbar gezet → de shared CSS regelt het per breakpoint zelf: DESKTOP = full-width-snap (vierkant, alléén
   onder-rand), MOBIEL = blijft pill (8px radius + volle rand). GÉÉN eigen override meer — die forceerde de
   desktop-vierkant-look óók op mobiel (= de 'kapotte' mobiele header).
   MOBIEL hide-on-scroll (zoals home): de navbar schuift omhoog weg bij naar-beneden-scrollen, terug bij omhoog.
   Gebruikt de bestaande navbar-transition (transform .6s cubic-bezier(.16,1,.3,1)). */
@media screen and (max-width: 991px) {
  .navbar.is-nav-hidden { transform: translateY(-150%); }
}

/* ============================================================================
   MOBIEL FILTER-MENU (/nl/properties) — KOPIE van de header-hamburger-menu (.navmenu), OMGEKEERD: rijst op
   uít de balk (bottom-verankerd) i.p.v. neer uit de header; ALLÉÉN BOVEN-radius (navmenu had alléén onder-
   radius); omgekeerde slide (omhoog). Zelfde tokens als de navmenu: zwart vlak, grijze rand, 8px radius,
   scroll-lock + scrim + Escape. De FILTEREN-knop opent 'm (mobiel); desktop houdt de sidebar-sleuf.
   Z-volgorde binnen .listings: grid(0) < fade(4) < menu(5) < balk(6). Géén scrim: het header-menu heeft er ook geen.
   ============================================================================ */
/* MENUWRAP = het CLIP-VENSTER: de exacte spiegel van .navmenu-wrapper (absolute + inset 0 0 auto +
   overflow:hidden ónder de header) — hier fixed BOVEN de balk. Het panel rijst BINNEN dit venster op,
   dus het komt visueel ÚIT de balk (zoals de navmenu uit de header komt), niet over de pagina schuivend. */
.listings-bar__menuwrap {
  position: fixed; z-index: 5;
  left: var(--listings-pad); right: var(--listings-pad);
  bottom: calc(var(--listings-pad) + var(--listings-nav-h) - var(--_layout---border-radius--8px) + var(--kb-lift, 0px));   /* bovenkant balk (P + N) min zijn radius: de onderkant van het menu valt precies achter de afgeronde hoeken */
  top: calc(var(--listings-header-h) + var(--listings-gap) + var(--vv-top, 0px));    /* = bovenkant van de eerste kaart (grid-padding, Dévin 25-09); + wat iOS het zichtbare venster opschoof, zodat het menu stilstaat */
  overflow: hidden; pointer-events: none;
}
/* MENU-PANEL = de gespiegelde .navmenu: zwart vlak, 1px grey rand RONDOM (exact als de navmenu — óók aan
   de balk-zijde), alléén BOVEN-radius (navmenu = onder). Slide = EXACT de header-interactie (IX2 a-18):
   800ms cubic-bezier(.625,.05,0,1) met 100ms delay, terwijl de balk-bg in 200ms massief navy wordt. */
.listings-bar__menu {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--_colors---swatch--black);
  border: 1px solid var(--listings-line);
  border-top-left-radius: var(--_layout---border-radius--8px);
  border-top-right-radius: var(--_layout---border-radius--8px);
  transform: translateY(100%);                                  /* verborgen achter de balk, geklipt door het venster */
  visibility: hidden; pointer-events: none;
  transition: transform .8s cubic-bezier(.625,.05,0,1) .1s, visibility 0s .9s;
}
.listings.is-filter-menu .listings-bar__menu {
  transform: translateY(0); visibility: visible; pointer-events: auto;
  touch-action: none;   /* HET PANEEL BEWEEGT NIET ONDER JE VINGER (Dévin 29-09: "als je typt moet je niet de filter uitklap zelf kunnen scrollen, wel nog de inhoud lijst"). touch-action werkt op het element én zijn ouders tot en met de eerste scrollende ouder: een veeg op de lijst (.listings-bar__menu-body, scrollt echt) valt daar buiten en scrolt gewoon; een veeg op de kop, de knoppen of een lijst die niet scrollt vindt het paneel op none en trekt dus ook de pagina erachter niet mee (iOS liet het visuele venster dan opschuiven zodra het toetsenbord er stond) */
  transition: transform .8s cubic-bezier(.625,.05,0,1) .1s;
}
/* BALK WORDT NAVY (exact IX2 a-18: navbar-bg → massief black in 200ms). De balk HOUDT z'n eigen rand +
   radius — precies zoals de header dat doet; het panel schuift erachter vandaan (balk z-6 > venster z-3). */
.listings-bar > .listings-bar__bg { transition: background-color .2s linear .05s; }   /* = de header bij het hamburgermenu (gemeten: lineair 60%→100% in 200ms na 50ms); blur blijft staan, anders springt hij */
.listings.is-filter-menu .listings-bar > .listings-bar__bg { background-color: var(--_colors---swatch--black); }
/* Fade blijft ook met het menu open (Dévin 25-09): hij ligt nu ónder het menu (z4 < 5), dus niet over de filters. De
   FILTEREN-cel krijgt open géén lichte laag meer: zelfde navy als de balk. */

/* MENU-inhoud = de navmenu-indeling gespiegeld: ssnf-top (Reset+X, ZELFDE bron als de sidebar-kop) →
   tabs/chips-scroller (.is-menu, onder-border) → de gedeelde .ssnf-lijst (_filterBody, zelfde bron als
   desktop) → één apply-voet (de navmenu_bottom-plek). De oude eigen-stijl opties (menu-opt/-label/-head)
   zijn WEG — de inhoud is letterlijk de desktop-filterlijst (single source, wijzig één keer). */
.listings-bar__menu > .ssnf-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1em var(--listings-pad) .8em; }
.listings-bar__menu-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--listings-pad) var(--listings-pad); }
/* Menu + scrim ALLEEN mobiel (≤767); tablet + desktop = de sidebar-sleuf. */
@media (min-width: 768px) { .listings-bar__menuwrap, .listings-bar__menu { display: none; } }
/* Scroll-lock terwijl het menu open is (zoals de navmenu). overflow:hidden op de scroll-container breekt
   position:sticky → de balk zou wegvallen; daarom pinnen we de balk dán expliciet fixed op z'n sticky-plek
   (viewport-bodem). Geen sprong: bij FILTEREN-tik stáát de sticky-balk al op die plek. Menu sluit er exact op aan. */
html.is-listings-menu-locked, html.is-listings-menu-locked body { overflow: hidden; }
@media screen and (max-width: 767px) {
  .listings.is-filter-menu .listings-bar, .listings.is-menu-los .listings-bar {   /* is-menu-los = het menu zakt nog weg: de balk wacht vast op zijn plek (listings.mjs, losLaten) */
    position: fixed; left: var(--listings-pad); right: var(--listings-pad); bottom: calc(var(--listings-pad) + var(--kb-lift, 0px));   /* balk = body-maat → P = even breed als dicht */
    margin-top: 0;
  }
  /* DE RUIMTE DIE ZE ACHTERLATEN (Dévin 27-09: "de container eronder schiet naar boven"). Bij een open menu gaan
     twee dingen uit de stroom: de onderbalk (hierboven) én de tellerrij (verderop, dezelfde reden). Sta je aan het
     eind van de lijst, dan werd de sectie daardoor 61,9 px korter en sprong alles eronder omhoog — en bij het
     sluiten weer terug. De sectie houdt die ruimte nu vast: N (de balk) + G (de tellerrij en de marge erboven,
     die samenklappen). Gemeten op 390: 52 + 9,75 = 61,75 tegen een verlies van 61,9. */
  .listings.is-filter-menu, .listings.is-menu-los { padding-bottom: calc(var(--listings-nav-h) + var(--listings-gap)); }
  /* ÉÉN PAGINA (Dévin 16-10: "die positie waar hij in zit als hij relatief is moet gereserveerd blijven"). Zonder VORIGE/VOLGENDE
     zakt de tellerrij niet in die balk: ze staat met haar .5em en haar eigen hoogte (C) gewoon boven de balk. Wat er dan uit de
     stroom gaat is .5em + C + N, niet N + G: met één resultaat werd de sectie 26 px korter (gemeten op 390, P90). */
  .listings.is-filter-menu:not(:has(.listings__blader:not([hidden]))), .listings.is-menu-los:not(:has(.listings__blader:not([hidden]))) { padding-bottom: calc(.5em + var(--lcount-h) + var(--listings-nav-h)); }
}
/* Reduced-motion: menu/scrim instant (geen slide/fade). */
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] .listings-bar__menu { transition: none; }


/* ============================================================================
   FILTER-UI (.ssnf*) — de gegenereerde sidebar/bottom-sheet-filter. On-system: navy/bone tokens, Basic
   Grotesque, radius .25em. Werkt in twee hosts: .ssnf--rail (28em-sidebar) + .ssnf--sheet (mobiel menu).
   ============================================================================ */
/* BASIS = site-token (em t.o.v. de body, die op --size-font schaalt) i.p.v. .95rem (vaste html-root → schaalde NIET mee).
   paragraph-m (1.25em) ≈ de oude .95rem-grootte op desktop, maar nu schaalt de héle filter (alle kinderen zijn em) mét de site. */
.ssnf { font-family: var(--_fonts---fonts--paragraph); color: var(--_colors---swatch--beige); font-size: var(--_paragraphs---paragraph-m--font-size); letter-spacing: normal; word-spacing: normal; line-height: 1.4; }
.ssnf *, .ssnf *::before, .ssnf *::after { box-sizing: border-box; }
.listings__sidebar-inner, .listings-bar__menu-body { overflow-x: clip; }   /* Devin: filters NOOIT horizontaal scrollen → clip (nooit een h-scrollbar). Handles/tooltips blijven zichtbaar: ze vallen binnen de container-rand (gemeten 1415<1422) + de tooltips zijn al geclamped (--tipx) */
/* hele filter-sidebar niet-selecteerbaar (Devin); invulvelden blijven wél selecteerbaar/typbaar */
.listings__sidebar, .ssnf { -webkit-user-select: none; user-select: none; }
.ssnf input, .ssnf .ssnf-in { -webkit-user-select: text; user-select: text; }
.listings__sidebar > .ssnf-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 0 .4em; margin-bottom: .4em; }
/* Desktop: géén lijn onder de vaste kop (Dévin 25-09), alleen een dynamische fade bovenin de lijst: verschijnt zodra de
   lijst eronder gescrold is (is-scrolled), de filters verdwijnen er zacht onder. Sticky pseudo in de scroller zelf. */
.listings__sidebar-inner::before { content: ""; display: block; position: sticky; top: 0; z-index: 2; height: 3em; margin-bottom: -3em; pointer-events: none;
  background: linear-gradient(var(--_colors---swatch--black) 15%, rgba(42, 36, 32, 0)); opacity: 0; transition: opacity .4s cubic-bezier(.16, 1, .3, 1); }
.listings__sidebar.is-scrolled .listings__sidebar-inner::before { opacity: 1; }   /* gepind: directe child van de sticky sleuf, buiten de scroll */
.ssnf--sheet .ssnf-top, .ssnf--sheet .ssnf-foot { display: none; }   /* het bottom-sheet heeft al een eigen head + foot */
/* RESET = letterlijke kopie van de footer-knop (.btn-animate-chars green-variant: navy bg + beige char-anim
   tekst), ZONDER de oranje .button-icon, mét het reset-icoontje. De variant-CSS levert bg + tekstkleur. */
.ssnf-reset { position: relative; display: inline-flex; align-items: center; gap: .55em; flex: 0 0 auto; height: auto; min-height: 0; padding: .9em 1.25em; background: transparent; border: 1px solid var(--listings-line); border-radius: 0; cursor: pointer; overflow: hidden; transition: background .2s, border-color .2s; }   /* v-padding .8em→.9em → reset ≈ 34px = even hoog als de kruisje-box .ssnf-x (Devin); min-height:0 houdt de btn-animate-chars-stack ingeklapt */
.ssnf-reset .btn-animate-chars__bg { background: transparent; border: 0; border-radius: 0; }   /* alleen border, alles licht — geen fill */
.ssnf-reset .btn-animate-chars__text, .ssnf-reset__t { color: var(--_colors---swatch--beige); }   /* lichte tekst (was donker, ontworpen voor de beige fill) */
.ssnf-reset:hover { background: rgba(235,227,216,.07); border-color: rgba(235,227,216,.7); }
.ssnf-reset:active { transform: scale(.96); }
.ssnf-reset > svg { position: relative; top: -.04em; z-index: 1; width: 1.3em; height: 1.3em; margin: -.2em -.2em -.2em 0; color: var(--_colors---swatch--beige); }   /* top: optische centrering (glyph zit ~0.5/13 laag in z'n viewBox); GEEN draai meer — Devin: te druk bovenop de char-span-animatie (geldt voor BEIDE reset-knoppen) */
.ssnf-reset .ssnf-reset__t { position: relative; z-index: 1; font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }   /* button-span; paragraph-s = de gulden-snede-trede PRECIES tussen xs (te klein) en regular (te groot) — Devin */
/* kruisje = kopie van de reset-knop (alleen border, licht); +1.5px optisch naar rechts + kwartslag-draai bij hover */
.ssnf-x { display: grid; place-items: center; width: 2.7em; height: 2.7em; background: transparent; border: 1px solid var(--listings-line); border-radius: 0; color: var(--_colors---swatch--beige); cursor: pointer; transition: background .2s, border-color .2s, transform .12s; }   /* zelfde border als reset */
.ssnf-x:hover { background: rgba(235,227,216,.07); border-color: rgba(235,227,216,.7); }
.ssnf-x:active { transform: scale(.94); }
.ssnf-x svg { width: .85em; height: .85em; color: var(--_colors---swatch--beige); transition: transform .7s cubic-bezier(.16,1,.3,1); }   /* left: .5px (was 1.5px → 1px naar links, Devin: nu beter gecentreerd) */
.ssnf-x:hover svg { transform: rotate(90deg); }   /* kwartslag NAAR RECHTS (CW), zelfde duur/ease als de reset-pijl */
/* ── 0-RESULTATEN (Dévin 25-09): de 404, minimaal — dezelfde klassen (._404-content, heading-style-24px alt-heading,
   heading-style-64px-2, max-width-40ch, padding-top-stappen, button-group), zonder achtergrond en zonder 100vh; gecentreerd
   in de grid-ruimte tussen header en onderbar. Knoppen: Reset = .btn-secundair (knijpt, normale maat), rechts de hero-CTA. */
.listings__empty { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - var(--listings-foot-h) - var(--listings-header-h) - var(--listings-gap)); padding: 1.5em 1.25em; }
.listings__empty[hidden] { display: none; }
@media (max-width: 767px) { .listings__empty { min-height: calc(100svh - var(--listings-foot-h) - var(--listings-header-h) - var(--listings-gap)); } }   /* telefoon: svh, net als de baan (35): de lege staat beweegt niet met de adresbalk */
.listings__empty .btn-animate-chars[hidden] { display: none; }   /* .btn-animate-chars zet display; zo wisselen 'Dossier aanvragen' en 'Zoek los van filters' echt (zelfde regel als .ssn-toast__act) */
/* Reset: de standaard secundaire knop, maar zonder knijpen, met de reset-pijl uit de filterkop en bij hover de rand +
   het vlak van de filter-reset (.ssnf-reset:hover). */
.listings__empty-reset { gap: .55em; }
.listings__empty-reset > svg { position: relative; z-index: 1; top: -.04em; width: 1.3em; height: 1.3em; margin: -.2em -.2em -.2em 0; flex: 0 0 auto; color: var(--_colors---swatch--beige); }
.listings__empty-reset .btn-animate-chars__bg { transition: background-color .2s, border-color .2s; }
.listings__empty .listings__empty-reset:hover .btn-animate-chars__bg { inset: 0; background-color: rgba(235,227,216,.07); border-color: rgba(235,227,216,.7); }
/* secties = koppen + hairline; inklapbaar met een chevron RECHTS (is-fixed = altijd open, niet klikbaar) */
/* PADDING-REFACTOR (Devin): .ssnf-sec heeft GEEN padding meer. De kop is een vaste band (1.3em boven + onder), open
   én dicht even hoog, en de hele band is klikbaar (Dévin 26-09). De bodem-ruimte van een open sectie zit ín de klapper. */
.ssnf-sec { padding: 0; border-bottom: 1px solid rgba(118, 107, 96,.22); }
.ssnf-sec:first-of-type > .ssnf-h { padding-top: var(--listings-pad); }   /* meer top-ademruimte boven LOCATIE */
.ssnf-sec:last-of-type { border-bottom: 0; }
.ssnf-h { width: 100%; display: flex; align-items: center; gap: .5em; padding: 1.3em 0; margin: 0; background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.ssnf-sec.is-fixed > .ssnf-h { cursor: default; }
.ssnf-t { font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: var(--_colors---swatch--beige); line-height: 1; }   /* button-span-stijl, nu schaalbaar (paragraph-xs i.p.v. vaste .75rem) */
.ssnf-hr { margin-left: auto; display: inline-flex; align-items: center; gap: .65em; }
.ssnf-chev { display: inline-flex; width: .8em; color: var(--_colors---swatch--grey); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.ssnf-chev svg { width: 100%; height: auto; display: block; }

/* INKLAPPEN (Dévin 26-09): dicht = hoogte 0, open = de eigen hoogte (auto), dus in rust klopt hij altijd, ook als de
   filterdoos breder wordt. De beweging zelf doet listings.mjs (toggleSec): de echte, gemeten hoogte, één duur, één ease
   (de oude max-height van 220em sprong open en stond dicht eerst stil; een 0fr/1fr-grid hield in Safari de oude hoogte vast). */
.ssnf-b { overflow: hidden; height: 0; opacity: 0; }
.ssnf-b::after { content: ""; display: block; height: 1.3em; }   /* bodem-ruimte van een open sectie, klapt mee */
.ssnf-sec.is-open > .ssnf-b { height: auto; opacity: 1; }
/* KLIKVLAK ONDER DE KOP VAN PRIJS: Prijs begint met de slider, en die heeft .6em marge boven (.ssnf-slider). Die strook
   hoorde bij de klapper, dus een klik daar klapte niets (S1: 12 missers). Het klikvlak van de kop loopt daarom door tot
   de slider, zoals het sleepvlak van .ssnf-rng__h::before; het beeld blijft gelijk. Alleen open: dicht zou het over de
   volgende kop vallen. De hoogte is de slider-marge; kop en slider hebben dezelfde font-size. */
.ssnf-sec.is-open > .ssnf-h:has(+ .ssnf-b > .ssnf-slider:first-child) { position: relative; }
.ssnf-sec.is-open > .ssnf-h:has(+ .ssnf-b > .ssnf-slider:first-child)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6em; }
.ssnf-info { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border: 0; background: transparent; color: var(--_colors---swatch--grey); cursor: pointer; transition: color .2s; }
.ssnf-info:hover { color: var(--_colors---swatch--beige); }
/* ⓘ-TOOLTIP (Dévin 26-09): dezelfde beige tip als op de pandpagina (vlak, tekstmaat, radius, schaduw). Zweeft in <body>
   (listings.mjs zet hem links boven het icoon), zodat de mask en overflow van de filterdoos en het menu hem niet
   afknippen. Geen help-cursor: de ⓘ is uitleg, geen actie. */
.ssnf-info, .ssnf-i { cursor: default; }
.ssn-tip { position: fixed; left: 0; top: 0; z-index: 1001; width: max-content; max-width: min(23.3333em, calc(100vw - 2 * var(--listings-pad))); padding: .75em .9em; background: var(--ssn-surface); color: var(--_colors---swatch--black); border-radius: var(--_layout---border-radius--4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 .7em 1.9em rgba(0, 0, 0, .3); font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-regular--font-size); line-height: 1.4; letter-spacing: 0; text-align: left; text-transform: none; white-space: pre-line; text-wrap: pretty; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(.25em); transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), visibility 0s .2s; }
.ssn-tip.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .ssn-tip,
html[data-ssn-motion="reduced"] .ssn-tip.is-on { transition: none; }

.ssnf-slider { display: block; margin: .6em 0 .5em; transition: opacity .3s; }   /* meer witruimte rond de slider → premium */
/* resultaat ≤1 door ANDERE filters → slider-blok (prijs ÉN m²) doet niets meer: dim + niet-klikbaar (zoals de 0-count-rijen) */
.ssnf-slider.is-off, .ssnf-slider.is-off ~ .ssnf-eulabels, .ssnf-slider.is-off ~ .ssnf-eurow { opacity: .34; transition: opacity .3s; }
/* pointer-events op de slider zelf is niet genoeg: de handles (<button>) krijgen elders pointer-events:auto → expliciet ÉLK kind blokkeren (handles, rail, histo, inputs) */
.ssnf-slider.is-off, .ssnf-slider.is-off *, .ssnf-slider.is-off ~ .ssnf-eulabels, .ssnf-slider.is-off ~ .ssnf-eurow, .ssnf-slider.is-off ~ .ssnf-eurow * { pointer-events: none !important; }
.ssnf-histo { display: flex; align-items: flex-end; justify-content: space-between; height: 3.4em; margin: 0; padding: 0 .85em; cursor: pointer; }   /* 1px hairline-staafjes met ruime gap → rustig + consistent met de overige filters, tóch een functie */
.ssnf-histo span { position: relative; flex: 0 0 1px; width: 1px; background: var(--listings-line); min-height: 3px; border-radius: 99px; transition: height .42s cubic-bezier(.76,0,.24,1); }   /* 1px grijze hairline met ronde tip; hoogte morpht met de grid-ease (FLIP) bij elke query-wijziging */
.ssnf-histo.is-flat span { min-height: 0; }   /* resultaat ≤ 1 → alle staafjes plat naar 0 */
/* ── m²-SNAP-SLIDERS (Woonoppervlak/Perceel): compacter dan prijs — lagere histo, brede discrete staven (één per snap-interval), kleinere velden ── */
.ssnf-slider--sm { margin: .4em 0 .3em; }
.ssnf-slider--sm .ssnf-histo { height: 2.4em; }   /* zelfde dunne staven als prijs (default-stijl), alleen lager */
.ssnf-eurow--sm { margin-top: .6em; }
.ssnf-eurow--sm .ssnf-in { padding: .42em 3em .42em .7em; }
.ssnf-cur--unit { font-weight: 400; }
.ssnf-histo span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--ssn-accent); border-radius: 99px; transition: height .32s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i,0) * 5ms); }   /* oranje select-vulling, ronde tip, schiet gestaffeld omhoog */
.ssnf-slider:hover .ssnf-histo span.in::after, .ssnf-slider:has(.ssnf-rng.is-active) .ssnf-histo span.in::after, .ssnf-slider:has(.ssnf-rng.is-drag) .ssnf-histo span.in::after { height: 100%; }   /* staafjes oranje zodra de slider óók oranje is: hover, actief sub-bereik én sleep */
.ssnf-rngrow { display: flex; align-items: flex-start; gap: .6em; margin-top: 0; }   /* histo sluit vlak tegen de slidertrack aan (geen gap) */
.ssnf-rng { position: relative; flex: 1 1 auto; height: 1.6em; margin: 0 .85em; touch-action: none; z-index: 1; cursor: pointer; }   /* hoger + heel het vlak klikbaar */
.ssnf-rng__track { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--listings-line); transform: translateY(-50%); border-radius: 2px; }   /* achtergrond = border-kleur (Devin); top:0 → direct ónder de staafjes */
.ssnf-rng__fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--_colors---swatch--beige); border-radius: 2px; transition: background .2s; }   /* vult de track exact (kind van de 2px-track → géén eigen translateY, anders 1px te hoog) */
/* HANDLE = dot-in-cirkel, ALTIJD zichtbaar (Devin). Bone in rust → ORANJE zodra een sub-bereik gekozen is (.is-active). 2px-ring = trackdikte. */
.ssnf-rng__h { position: absolute; top: 0; left: 0; width: .85em; height: .85em; border-radius: 50%; background: var(--_colors---swatch--beige); border: 0; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.35); transform: translate(-50%,-50%); cursor: grab; transition: transform .2s cubic-bezier(.16,1,.3,1), background .2s; }
.ssnf-rng__h::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--_colors---swatch--black); }   /* binnen-dot laat een 2px-ring over = trackdikte */
.ssnf-rng__h::before { content: ""; position: absolute; inset: -.85em; }   /* ≥40px sleep-/klik-vlak */
.ssnf-rng__h:active { cursor: grabbing; }
.ssnf-slider:hover .ssnf-rng__h { transform: translate(-50%,-50%) scale(1.14); }   /* lichte nadruk zodra je het prijs-blok aanwijst */
.ssnf-slider:hover .ssnf-rng__fill, .ssnf-slider:hover .ssnf-rng__h, .ssnf-rng.is-active .ssnf-rng__fill, .ssnf-rng.is-active .ssnf-rng__h, .ssnf-rng.is-drag .ssnf-rng__fill, .ssnf-rng.is-drag .ssnf-rng__h { background: var(--ssn-accent); }   /* hele slider oranje bij hover over het blok, sleep én gekozen sub-bereik */
/* TOOLTIP = sibling van de handles; klampt binnen de rail (--tipx) → nooit overflow-clip; HOVER-ONLY; iets hoger. */
.ssnf-rng__tip { position: absolute; bottom: 100%; left: 0; margin-bottom: .85em; padding: .3em .5em; background: var(--ssn-surface); color: var(--_colors---swatch--black); font-size: var(--_paragraphs---paragraph-xxs--font-size); font-weight: 600; letter-spacing: .01em; line-height: 1; border-radius: var(--_layout---border-radius--4px); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(var(--tipx,-50%)) translateY(.25em) scale(.95); transform-origin: bottom center; transition: transform .22s cubic-bezier(.16,1,.3,1), opacity .22s; }
.ssnf-slider:hover .ssnf-rng__tip, .ssnf-rng.is-drag .ssnf-rng__tip { opacity: 1; transform: translateX(var(--tipx,-50%)) translateY(0) scale(1); }
.ssnf-end { flex: 0 0 auto; min-width: 2.8em; text-align: center; font-size: var(--_paragraphs---paragraph-xs--font-size); font-variant-numeric: tabular-nums; color: var(--_colors---swatch--beige); background: rgba(235,227,216,.05); border: 1px solid rgba(118, 107, 96,.4); border-radius: var(--_layout---border-radius--4px); padding: .4em .45em; }
.ssnf-eulabels { display: flex; justify-content: space-between; padding: 0 .2em; margin-bottom: .55em; }   /* Min prijs (links) · Max prijs (rechts) boven de velden */
/* mededeling = kaal ónder de velden (geen vlak/rand), eigen regel, icoon + tekst zelfde kleur, strak gecentreerd met een nette gap.
   LET OP: papa's GSAP-reveal wikkelt de inhoud in een block-<div> → icoon+tekst stromen INLINE, dus uitlijnen via vertical-align (niet flex) en gap via margin (flex-gap werkt niet meer). */
.ssnf .ssnf-help--cap { margin: 1em 0 0; font-size: var(--_paragraphs---paragraph-xxs--font-size); color: rgba(235,227,216,.55); letter-spacing: .015em; line-height: 1.3; }
/* ALTIJD zichtbaar (Devin): papa's GSAP-reveal (data-gsap-reveal) wikkelt de melding + stuurt z'n opacity/transform; buiten z'n scroll-trigger kan dat op 0 blijven → de melding 'verdwijnt'. Forceer 'm + z'n wrapper zichtbaar. */
.ssnf .ssnf-help--cap, .ssnf .ssnf-help--cap > * { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.ssnf-help__ic { display: inline-flex; align-items: center; color: inherit; vertical-align: middle; margin-right: .5em; }   /* zelfde kleur; vertical-align:middle = optisch gecentreerd op de kleine-letter-tekst, margin = de gap */
.ssnf-help__ic svg { width: 1em; height: 1em; display: block; }
.ssnf-eurow { display: flex; align-items: center; gap: .7em; margin-top: 0; }
.ssnf-eusep { flex: 0 0 auto; color: var(--_colors---swatch--grey); }
.ssnf-eufield { position: relative; flex: 1 1 0; min-width: 0; }
.ssnf-cur { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 .75em; border-left: 1px solid var(--listings-line); color: var(--_colors---swatch--grey); font-weight: 400; pointer-events: none; }   /* valuta = suffix achter een verticale streep, niet vet (Devin) */
.ssnf-in { width: 100%; border: 1px solid rgba(118, 107, 96,.5); border-radius: var(--_layout---border-radius--4px); background: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); font: inherit; font-weight: 500; outline: 0; transition: border-color .2s; }   /* radius = 4px (consistent met de chips/knoppen) */
.ssnf-in::placeholder { color: var(--_colors---swatch--grey); font-weight: 400; }
.ssnf-in:focus { border-color: var(--_colors---swatch--beige); }
.ssnf-eufield .ssnf-in { padding: .5em 2.7em .5em .85em; font-variant-numeric: tabular-nums; }   /* lager + ruimte rechts voor de streep + valuta */
.ssnf-help { font-size: var(--_paragraphs---paragraph-xs--font-size); color: var(--_colors---swatch--grey); margin: .8em 0 0; white-space: nowrap; }
.ssnf-search { position: relative; margin-bottom: 0; }   /* geen gat: de lijst eronder heeft z'n eigen top-padding en verdwijnt bij scrollen ín de balk */
.ssnf-sic { position: absolute; left: .3em; top: 0; bottom: 0; width: 2.6em; display: grid; place-items: center; color: var(--_colors---swatch--grey); pointer-events: none; }
/* Het icoon stond op een vaste 18 px uit zijn eigen svg-attributen: op een smal scherm, waar de filterlijst in
   10,7 px rekent, was dat een joekel naast een veld van 26 px (Dévin 28-09: "zoek icoontje kleiner"). In em, net als
   al het andere hier, dus hij volgt de lijst zoals het icoon in de onderbalk zijn cel volgt. Zelfde pad, kleiner. */
.ssnf-sic svg { width: 1.1em; height: 1.1em; display: block; }
.ssnf-in.is-search { padding: .6em .9em .6em 2.7em; }   /* minder hoog */
/* Placeholder afgekapt = '…' op de knip (Dévin 25-09): aanbod-zoekbalk + locatie-zoek. */
.listings-bar__search-in, .ssnf-in.is-search { text-overflow: ellipsis; }
.listings-bar__search-in::placeholder, .ssnf-in.is-search::placeholder { text-overflow: ellipsis; }
/* scroll-venster + LIVE count (vervangt de 'meer'-knop) */
.ssnf-scrollwrap { position: relative; }
.ssnf-search + .ssnf-scrollwrap .ssnf-scroll { padding-top: .5em; }
.ssnf-scroll { position: relative; max-height: 15em; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.ssnf-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ssnf-scrollcount { position: absolute; left: 0; right: 0; bottom: 0; height: 3.1em; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .1em; padding-bottom: .35em; pointer-events: none; background: linear-gradient(rgba(42, 36, 32,0), var(--_colors---swatch--black) 78%); color: rgba(235,227,216,.62); font-size: var(--_paragraphs---paragraph-xs--font-size); font-variant-numeric: tabular-nums; transition: opacity .25s; }
.ssnf-scrollcount svg { width: .9em; height: .9em; }
/* Dezelfde fade BOVENIN, omgekeerd: verloop van navy naar transparant, pijl omhoog + het aantal rijen dat erboven uit beeld
   is (listings.mjs updScroll). Bij Locatie ligt hij tegen de zoekbalk: de rijen verdwijnen in de balk. */
.ssnf-scrollcount.is-top { top: 0; bottom: auto; z-index: 1; justify-content: flex-start; padding-bottom: 0; padding-top: .35em; opacity: 0;
  background: linear-gradient(var(--_colors---swatch--black) 22%, rgba(42, 36, 32,0)); }
.ssnf-scrollcount.is-top svg { transform: rotate(180deg); }
.ssnf-scrollcount b { font-weight: 500; }
.ssnf-row { width: 100%; display: flex; align-items: center; gap: .6em; min-height: 1.9em; padding: .22em 0; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--_colors---swatch--beige); font: inherit; }
.ssnf-lead { flex: 0 0 auto; width: calc(.6em + var(--d,0) * 1.4em); height: 1px; background: rgba(118, 107, 96,.5); }
.ssnf-list .ssnf-lead { display: none; }
.ssnf-row__t { font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }   /* w400 = licht, net als de listing-cards (niet meer shoutend) */
.ssnf-row.is-child .ssnf-row__t { color: rgba(235,227,216,.72); font-weight: 400; }
.ssnf-tree[data-facetgroup="location"] .ssnf-row.is-parent .ssnf-row__t { font-weight: 700; }   /* alléén Locatie-parent bold; type-woning/kenmerken blijven normaal (500) */
.ssnf-row__c { margin-left: auto; font-size: var(--_paragraphs---paragraph-xs--font-size); color: var(--_colors---swatch--grey); font-variant-numeric: tabular-nums; min-width: 2em; text-align: right; padding-right: .2em; }
.ssnf-i { margin-left: .45em; font-size: .82em; line-height: 1; color: var(--_colors---swatch--grey); opacity: .65; transition: opacity .15s ease; text-transform: none; }   /* ADR-023: inline info-ⓘ achter HGB/Hak Pakai (voor wie & waarvoor); de uitleg is de .ssn-tip */
.ssnf-i:hover, .ssnf-i:focus-visible { opacity: 1; outline: none; }
/* CHECKBOX (Devin's checkbox-wrapper-4, geïntegreerd in ons systeem): oranje vak + SVG-icoon dat INTEKENT
   (stroke-dashoffset 16→0) + wave-puls (scale .9). Vinkje = polyline; parent-indeterminate = eigen streepje-vector,
   exact dezelfde intekening/animatie. Bewezen conventie: streepje = ouder-indeterminate, subs = gewone vinkjes. */
.ssnf-cbx { flex: 0 0 auto; position: relative; width: 1.2em; height: 1.2em; border: 1px solid var(--_colors---swatch--grey); border-radius: 4px; background: transparent; box-shadow: 0 1px 1px rgba(0,16,75,.06); transition: background .24s cubic-bezier(.22,1,.36,1), border-color .24s cubic-bezier(.22,1,.36,1), transform .16s cubic-bezier(.34,1.45,.64,1); }
.ssnf-cbx__ic { position: absolute; inset: 0; margin: auto; width: .78em; height: .65em; fill: none; stroke: var(--ssn-surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; visibility: hidden; transition: stroke-dashoffset .34s cubic-bezier(.22,1,.36,1) .02s, visibility 0s .36s; }   /* ease-OUT (cubic-bezier(.22,1,.36,1)), rustiger tempo (.34s). PURE transitie = geen JS-animatie per vak → bulk (BALI = 28 subs) tekent in 1 synchrone aria-pressed-batch tegelijk in, tijd-gebaseerd dus in-sync óók bij lag. */
/* GEEN STIPJE IN EEN LEEG VAKJE (Dévin 28-09). Het vinkje is één lijn die zich intekent met stroke-dashoffset; bij
   een volle offset is er niets te zien behálve de ronde lijnkop, en die tekende de browser als een puntje aan het
   eind van het pad — rechtsboven in elk leeg vakje. Een butt-kop zou de vinkjes vierkante uiteinden geven, dus in
   plaats daarvan staat de hele lijn op visibility: hidden zolang hij niet getekend is. De vertraging van .36s is de
   duur van het intekenen plus zijn .02s aanloop: bij het uitzetten blijft hij dus zichtbaar tot hij helemaal weg
   gerekend is, en bij het aanzetten staat hij er meteen. */
.ssnf-row[aria-pressed="true"] .ssnf-cbx__ic--check,
.ssnf-row.is-indeterminate .ssnf-cbx__ic--minus { visibility: visible; transition: stroke-dashoffset .34s cubic-bezier(.22,1,.36,1) .02s, visibility 0s; }
.ssnf-row:hover .ssnf-cbx { border-color: var(--_colors---swatch--beige); }   /* hover-border = bone, niet oranje */
.ssnf-row:active .ssnf-cbx { transform: scale(.9); }   /* bounce = shrink TIJDENS mouse-down (press-feedback), veert terug bij loslaten */
.ssnf-row[aria-pressed="true"] .ssnf-cbx { background: var(--ssn-accent); border-color: var(--ssn-accent); }
.ssnf-row[aria-pressed="true"] .ssnf-cbx__ic--check { stroke-dashoffset: 0; }
.ssnf-row.is-indeterminate .ssnf-cbx { background: var(--ssn-accent); border-color: var(--ssn-accent); }
.ssnf-row.is-indeterminate .ssnf-cbx__ic--minus { stroke-dashoffset: 0; }
.ssnf-row.is-zero { opacity: .34; pointer-events: none; }
.ssnf-row[aria-pressed="true"].is-zero, .ssnf-row.is-indeterminate.is-zero { opacity: .65; pointer-events: auto; }
/* Eigendomsvorm = single-select Freehold ⊕ Leasehold; HGB/Hak Pakai = sub-toggles ONDER Freehold */
.ssnf-seg { display: flex; flex-wrap: wrap; gap: .5em; align-items: flex-start; }
.ssnf-segwrap { flex: 1 1 0; display: flex; flex-direction: column; gap: .5em; }
.ssnf-seg > .ssnf-segbtn { flex: 1 1 0; }
.ssnf-segbtn { position: relative; width: 100%; padding: .95em 1em; border: 1px solid transparent; border-radius: var(--_layout---border-radius--4px); background: rgba(235,227,216,.05); color: var(--_colors---swatch--beige); font: inherit; font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s; }   /* letter-spacing .04em→.01em = exact als de EIGENDOMSVORM-kop (.ssnf-t); zelfde font/size/weight → nu visueel even groot (Devin) */
.ssnf-seg__c { position: absolute; right: .9em; top: 50%; transform: translateY(-50%); font-size: calc(var(--_paragraphs---paragraph-xxs--font-size) / .75); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--_colors---swatch--grey); opacity: 1; font-variant-numeric: tabular-nums; pointer-events: none; }   /* exact even groot + zelfde kleur als .ssnf-row__c: /.75 heft de paragraph-xs-compounding van .ssnf-segbtn op → 9.375px grijs (Devin) */
.ssnf-segbtn[aria-pressed="true"] .ssnf-seg__c { color: var(--_colors---swatch--grey); opacity: 1; }   /* count blijft grijs (net als de checkbox-counts) — niet hercoloreren bij selectie (Devin) */
.ssnf-segbtn:hover { border-color: rgba(235,227,216,.45); }   /* border alléén op hover (nav-menu-stijl) */
.ssnf-segbtn[aria-pressed="true"] { background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); border-color: var(--_colors---swatch--beige); }
.ssnf-segbtn:active { transform: scale(.97); }
.ssnf-segbtn.is-zero { opacity: .34; pointer-events: none; }   /* 0 resultaten mét de overige filters → onklikbaar (solide 0-preventie, Devin) */
/* subs = volle-breedte checkbox-blok ÓNDER het Freehold/Leasehold-paar; verschijnt als Freehold actief is (de sectie groeit) */
.ssnf-subs { display: none; flex-basis: 100%; flex-direction: column; padding-top: .35em; }
.ssnf-seg:has(.ssnf-segbtn[data-tenroot="freehold"][aria-pressed="true"]) > .ssnf-subs { display: flex; }
.ssnf-sub { flex: 1 1 0; padding: .6em .4em; border: 1px solid rgba(118, 107, 96,.45); border-radius: var(--_layout---border-radius--4px); background: rgba(235,227,216,.03); color: var(--_colors---swatch--beige); font: inherit; font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s; }
.ssnf-sub[aria-pressed="true"] { background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); border-color: var(--_colors---swatch--beige); }
.ssnf-sub:active { transform: scale(.96); }
/* EUR/IDR-select in de Prijs-kop */
.ssnf-field + .ssnf-field { margin-top: 1.1em; }
.ssnf-fl { display: block; font-size: var(--_paragraphs---paragraph-xs--font-size); color: rgba(235,227,216,.72); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .6em; }
.ssnf-pills { display: flex; flex-wrap: wrap; gap: .4em; }
.ssnf-pill { min-width: 2.6em; padding: .55em .75em; border: 1px solid transparent; border-radius: var(--_layout---border-radius--4px); background: rgba(235,227,216,.05); color: var(--_colors---swatch--beige); font: inherit; font-size: var(--_paragraphs---paragraph-s--font-size); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .12s; }
.ssnf-pill:hover { border-color: rgba(235,227,216,.45); }   /* border alléén op hover */
.ssnf-pill[aria-pressed="true"] { background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); border-color: var(--_colors---swatch--beige); }
.ssnf-pill:active { transform: scale(.96); }
.ssnf-pill.is-na { display: none; }   /* waarde bestaat niet binnen de huidige query → pill verdwijnt (Devin) */
/* INDELING-RANGE-RAIL (slaapk/badk): OMRANDE cellen 1-6 + losse 'N+'-toggle ernaast. 3-LAAGS (Devin): cel-BORDER onderop → cream SELECTOR ertussen (z:1) → CIJFERS bovenop (z:2).
   De cel is STATIC (geen stacking-context) zodat de cijfer-span (z:2) bóven de selector valt terwijl de border eronder blijft. Selector = één blok dat de gaps overbrugt.
   7+ = volledig APARTE toggle (eigen cream-bg, geen schuif-selector, geen entree-animatie). Cellen krimpen (flex:1, min-width:0) → NOOIT horizontaal scrollen. */
.ssnf-railwrap { display: flex; gap: .45em; align-items: stretch; min-width: 0; }
.ssnf-rail__track { position: relative; flex: 1 1 auto; min-width: 0; display: flex; gap: .3em; }
.ssnf-rail__sel { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--_colors---swatch--beige); border-radius: var(--_layout---border-radius--4px); opacity: 0; transform: scale(.82); transform-origin: center; transition: left .4s cubic-bezier(.76,0,.24,1), width .4s cubic-bezier(.76,0,.24,1), opacity .22s ease, transform .34s cubic-bezier(.34,1.56,.64,1); pointer-events: none; z-index: 1; }
.ssnf-railwrap.is-on .ssnf-rail__sel { opacity: 1; transform: scale(1); }
.ssnf-rail__cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: .9em 0; border: 1px solid var(--listings-line); border-radius: var(--_layout---border-radius--4px); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s ease, background .2s ease; }
.ssnf-rail__cell:not(.ssnf-rail__open) { background: rgba(235,227,216,.05); border-color: transparent; }   /* de eerste 6: faint bg, rand pas bij hover (7+ houdt z'n vaste rand = zoals het is) */
.ssnf-rail__num { position: relative; z-index: 2; color: var(--_colors---swatch--beige); font: inherit; font-size: var(--_paragraphs---paragraph-xxs--font-size); font-variant-numeric: tabular-nums; line-height: 1; transition: color .22s ease, transform .2s cubic-bezier(.16,1,.3,1); }   /* cijfers = exact de SLAAPKAMERS-kop (paragraph-xxs) */
.ssnf-rail__cell[aria-pressed="true"] .ssnf-rail__num { color: var(--_colors---swatch--black); }   /* donker op de cream selector */
.ssnf-rail__cell:not(.is-na):hover .ssnf-rail__num { transform: scale(1.1); }   /* hover over een cijfer = minimaal maar zichtbaar schalen */
.ssnf-rail__cell:not([aria-pressed="true"]):not(.is-na):hover { border-color: rgba(235,227,216,.45); }   /* subtiele bone hover-rand */
.ssnf-rail__cell.is-na { opacity: .26; pointer-events: none; }   /* waarde bestaat niet in de huidige query → dim */
.ssnf-rail__cell.is-na[aria-pressed="true"] { opacity: .55; pointer-events: auto; }   /* een gekozen cel zonder panden (gat in het bereik, of een keuze die de zoekterm uitsluit) blijft leesbaar op de balk en een enkele keuze blijft weg te halen; de klik zelf beslist in listings.mjs */
.ssnf-rail__open { flex: 0 0 auto; padding: .9em 1.05em; transition: background .22s ease, border-color .22s ease; }   /* losse 'N+'-toggle = zelfde cel-maat + vaste rand; bg transparant (donker); pressed = solide cream */
.ssnf-rail__open[aria-pressed="true"] { background: var(--_colors---swatch--beige); border-color: var(--_colors---swatch--beige); }
.ssnf-foot { display: flex; gap: .6em; padding-top: 1.4em; }
.ssnf-wis { display: inline-flex; align-items: center; gap: .5em; background: transparent; border: 1px solid rgba(118, 107, 96,.5); border-radius: var(--_layout---border-radius--4px); color: var(--_colors---swatch--beige); padding: .9em 1.1em; font: inherit; font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .12s; }
.ssnf-wis:hover { background: rgba(255,255,255,.05); }
.ssnf-wis:active { transform: scale(.96); }
.ssnf-wis svg { width: .9em; height: .9em; }
.ssnf-apply { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4em; background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); border: 0; border-radius: var(--_layout---border-radius--4px); padding: .9em; font: inherit; font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-variant-numeric: tabular-nums; cursor: pointer; transition: filter .2s, transform .12s; }
.ssnf-apply:hover { filter: brightness(.96); }
.ssnf-apply:active { transform: scale(.98); }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .ssnf-rng__h,
html[data-ssn-motion="reduced"] .ssnf-rng__tip,
html[data-ssn-motion="reduced"] .ssnf-histo span,
html[data-ssn-motion="reduced"] .ssnf-histo span::after { transition: none !important; }

/* ── TYPE-HIERARCHIE — paragraph-em-tokens (schaalt met het systeem), grootte-geleid net als de listing-cards.
   Koppen + invoer LEIDEN (.875) > optie-labels (.75, licht w400) > veld-eyebrows + tellingen/meta (.625). ── */
.ssnf-in, .ssnf-cur { font-size: var(--_paragraphs---paragraph-s--font-size); }   /* invoervelden = grootst (.875em) */
.ssnf-t, .ssnf-row__t, .ssnf-segbtn, .ssnf-sub, .ssnf-pill, .ssnf-wis, .ssnf-apply { font-size: var(--_paragraphs---paragraph-xs--font-size); }   /* sectiekoppen = even groot als header-nav/knoppen + optie-labels (.75em ≈ 11-12px). RESET-span bewust NIET hier → die houdt paragraph-regular (knop-maat, ietsje groter; Devin) */
.ssnf-fl, .ssnf-row__c, .ssnf-help, .ssnf-end, .ssnf-scrollcount { font-size: var(--_paragraphs---paragraph-xxs--font-size); }   /* veld-eyebrows + tellingen/meta (.625em) */
/* GEEN INZOOMEN BIJ EEN TEKSTVELD (Dévin 29-09: "appen zoomt automatisch om te passen, dat moet je voorkomen"). iOS Safari zoomt de
   pagina in op elk tekstveld waarvan de lettergrootte onder 16 px ligt, zodra je erop tikt. Gemeten op een telefoonscherm: locatie
   zoeken en de prijsvelden 13,2 px (360) tot 15,7 px (430), de zoekbalk 14,0 tot 15,2 px. Dat was ook waarom de zoekknop en een tik op
   het veld zich anders gedroegen: focus vanuit een knop zoomt niet, een tik op het veld wel. Nu nooit onder 16 px op telefoon en
   tablet (≤991) en op elk aanraakscherm (ook een iPad in de breedte); daarboven blijft de lettergrootte van het systeem. max() laat
   grotere schermen ongemoeid. Pinch-zoom blijft mogelijk: dit haalt alleen de automatische zoom weg, niet de toegankelijkheid. */
@media (max-width: 991px), (pointer: coarse) {
  .ssnf-in, .listings-bar__search-in { font-size: max(16px, var(--_paragraphs---paragraph-s--font-size)); }
}

/* ── WHATSAPP-POPUP THUMB — foto i.p.v. video ──────────────────────────────────
   De <video> is uit ssn-home.html gehaald (alleen de foto tonen). De containers
   .video / .video-cover.is-popup / .video-frame blijven bewust in de DOM staan zodat de
   videofunctie later terug kan. Maar .video ligt absoluut op inset:0 over .popup-thumb,
   en .video-frame draagt nog een eigen <img> — leeg zou hij de foto dus alsnog afdekken.
   Deze regel weghalen + een <video> terugplaatsen = videofunctie hersteld. */
.popup-thumb .video { display: none; }

/* ============================================================
   DE BRUG (/nl/properties, het beige vlak onder de lijst; spec docs/superpowers/specs/2026-10-24-brug-aanbod-design.md §3.7).
   Alleen PLAATSING. Elke vorm, kleur, letter en rand komt van een onderdeel dat de site al heeft (Dévin 24-10: "altijd beginnen met onderdelen
   copieren uit de site"): het paneel van het dossier (.vl-paneel, 84), de kop van de Gids (.gids-ingang, 97), de vraagkop en de kaarten van het
   dossier (.vl-scherm__kopdoos, .vl-kaart, 85 en 87), de top 3-tabel (.vl-tabel, 84) en papa's formulierbalk met Vorige en Volgende (85).
   Hier staat alleen hoe die onderdelen in dit ene vlak staan: papa's balk is vast onderin het scherm (fixed), hier staat hij in het vlak.
   ============================================================ */
.brug { --vl-kop-fs: var(--_headings---heading-s--font-size); }   /* de kopmaat van het vraagscherm (85) zet .vl-scherm; dit vlak is geen vraagscherm */

/* RAND TOT RAND (Dévin 28-10: "dit word het enige beige stuk in de hele website die geen kader heeft maar volledige breedte pakt met negatieve corners er boven en er onder").
   Zoals het beige van de telefoon (25: .section_aanbod .padding-global zonder zijmarge, de gutter op het vlak zelf): het beige loopt tot de schermrand, de inhoud staat waar hij stond.
   Geen radius; erboven en eronder de omgekeerde hoekjes van de Gids (73: .gids-hst.is-citaat, een radial-gradient), hier in het beige, zodat het navy erboven en de footer
   eronder hun ronde hoeken op het beige zetten, in de grote radius van de site (Dévin 28-10: "de negatieve corners moeten de grotere versie zijn"). De afstand tot de filterbalk blijft P (42). */
.section_aanbod.is-vragenlijst .padding-global { padding-left: 0; padding-right: 0; }
.section_aanbod.is-vragenlijst .brug .cta-wrap.vl-paneel { border-radius: 0; padding-left: var(--_layout---padding-global--page-padding); padding-right: var(--_layout---padding-global--page-padding); }
.section_aanbod.is-vragenlijst::before, .section_aanbod.is-vragenlijst::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--_layout---border-radius--12px); pointer-events: none; background-repeat: no-repeat; background-size: var(--_layout---border-radius--12px) var(--_layout---border-radius--12px);
}
.section_aanbod.is-vragenlijst::before {
  top: calc(-1 * var(--_layout---border-radius--12px)); background-position: left bottom, right bottom;
  background-image: radial-gradient(circle at 100% 0%, transparent calc(var(--_layout---border-radius--12px) - .5px), var(--vl-vlak) var(--_layout---border-radius--12px)), radial-gradient(circle at 0% 0%, transparent calc(var(--_layout---border-radius--12px) - .5px), var(--vl-vlak) var(--_layout---border-radius--12px));
}
.section_aanbod.is-vragenlijst::after {
  top: 100%; background-position: left top, right top;
  background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--_layout---border-radius--12px) - .5px), var(--vl-vlak) var(--_layout---border-radius--12px)), radial-gradient(circle at 0% 100%, transparent calc(var(--_layout---border-radius--12px) - .5px), var(--vl-vlak) var(--_layout---border-radius--12px));
}

/* HET VLAK IS ÉÉN SCHERM (Dévin 24-10: "het beige veld moet altijd zelfde hoogte hebben namelijk viewport, en rest moet scrollen met onder en boven dynamische fades").
   De maat is die van de baan van het aanbod (35: .listings__layout): het scherm min de headerzone (P + N, de navbar staat altijd bovenin) en één paginamarge eronder;
   op de telefoon svh, zodat de adresbalk niets laat verspringen. De kop en de stappenbalk staan vast; het midden scrolt. .cta-wrap erbij: het dossier (84) zet het paneel later op 100 %. */
.brug:not(.is-intro) .cta-wrap.vl-paneel { padding-bottom: var(--_sizes---size--40px); }
/* --brug-top = waar het vlak begint (brug.js meet het: de onderrand van de header plus P, zodat de filterbalk precies achter de header valt). */
.brug { --brug-top: calc(var(--listings-header-h) + var(--listings-pad)); }
/* Open loopt het vlak tot de onderrand van het scherm (Dévin 28-10: "geef het beige vlak die onderste lijn terug ... ik wil die onder navy bar niet meer zien"): geen P meer eronder. */
.brug .cta-wrap.vl-paneel { display: flex; flex-direction: column; height: calc(100dvh - var(--brug-top)); }
@media (max-width: 767px) { .brug .cta-wrap.vl-paneel { height: calc(100svh - var(--brug-top)); } }
.brug .brug__kolom > .brug__kop { flex: none; }
.brug .cta-wrap.vl-paneel { position: relative; }
.brug__venster { position: relative; flex: 1 1 auto; min-height: 0; }
/* De balk ligt óver het midden, onderin het vlak (Dévin 24-10: "de onder fade moet niet boven de onderbar beginnen maar onder en dan gewoon veel hoger zijn, dus dan moeten de knoppen
   en voortgang bar ... gewoon beige solide"). De fade loopt tot de onderrand van het vlak en is zo hoog als de fade onder de kaarten (35: --listings-fade-h); de stappen en de knoppen
   hebben het beige van het paneel als vlak. Het midden houdt onderaan ruimte voor de balk. */
.brug .brug__voet { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; }
.brug .brug__vraag { padding-bottom: calc(var(--vl-knop, 3.5em) + var(--_sizes---size--40px) * 1.5); }
.brug .ssnf-scrollcount:not(.is-top) { bottom: calc(-1 * var(--_sizes---size--40px)); left: -4.5455%; right: -4.5455%; height: var(--listings-fade-h); padding-bottom: calc(var(--vl-knop, 3.5em) + var(--_sizes---size--40px) * 1.25); }
.brug__midden { display: flex; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }   /* zoals het scrollvenster van het filter (55: .ssnf-scroll), zonder balk */
.brug__midden::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* de fades van dat venster (55: .ssnf-scrollcount), in het beige van het paneel zoals de Gids ze op beige zet (73: .gids-keuze); brug.js zet ze aan en uit */
.brug .ssnf-scrollcount { z-index: 4; opacity: 0; color: var(--vl-ink); background: linear-gradient(to top, var(--vl-vlak) 40%, transparent); }
.brug .ssnf-scrollcount.is-top { background: linear-gradient(to bottom, var(--vl-vlak) 40%, transparent); }

/* het midden: de vraag gecentreerd, zoals op het vraagscherm */
.brug__vraag { margin-block: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--_sizes---size--24px); padding-top: var(--_sizes---size--40px); text-align: left; }
.brug .brug__vraag .vl-scherm__keuzes { width: 100%; max-width: none; margin: 0; }
.brug .brug__vraag .vl-scherm__keuzes > .vl-weetniet { display: block; margin: var(--_sizes---size--16px) 0 0; text-align: left; }   /* links op de kolom, onder de kaarten */
.brug__vraag .vl-tabel { width: 100%; text-align: left; }

/* Een vraag staat gecentreerd zoals op het vraagscherm van het dossier (85: .vl-scherm, Dévin 27-10): de eyebrow met de stap, de vraag getypt en groot, daaronder de keuzes */
/* De marges onder de kop zijn die van het dossier (85, Dévin 28-10: "het dossier heeft iets andere margins zie je onder de vraag tekst"): de regel eronder (.vl-scherm__noot, ook leeg)
   en de antwoorden (.vl-scherm__antwoorden) met hun eigen afstand; het vlak zelf zet er niets tussen. */
.brug .brug__vraag--midden { align-items: center; text-align: center; gap: 0; }
.brug .brug__vraag--midden .vl-scherm__kopdoos { margin: 0; }
.brug .brug__vraag--midden .vl-scherm__keuzes > .vl-weetniet { text-align: center; margin-inline: auto; }
.brug .brug__vraag--midden .vl-kaart { text-align: left; }   /* de kaarten zelf blijven zoals ze zijn */
/* ELKE VRAAG EEN EIGEN SCHIKKING, elk uit een onderdeel van het dossier */
/* de plek: de vier motieven twee bij twee (de motiefkaart van vraag 2, 86: .vk-motief: de titel in IvyPresto, eronder de plekken), het aantal eronder */
.brug .brug__motieven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brug .brug__motief > .vl-kaart__tekst { gap: .3em; }
.brug .brug__motief .vk-motief__titel { font-size: var(--_paragraphs---paragraph-l--font-size); }
.brug .brug__motief .vk-motief__tekst { font-size: var(--_paragraphs---paragraph-s--font-size); white-space: normal; opacity: .72; }
/* DE INTRO (Dévin 24-10: "het mag veel minder hoog in deze eerste stap, meer tekst in paragraaf"): het vlak zo hoog als zijn inhoud, met de marges van het begin; de H3, de alinea en
   Begin onder elkaar, links op de kolom. Na Begin groeit het vlak naar één scherm en schiet de balk omhoog (brug.js). */
.brug.is-intro .cta-wrap.vl-paneel { height: auto; }
.brug.is-intro .brug__venster { flex: none; }
.brug.is-intro .brug__midden { height: auto; overflow: visible; }
.brug.is-intro .ssnf-scrollcount { visibility: hidden; }   /* in de intro weg (brug.js fades zet ze op 0); na Begin vagen ze in (hieronder), ze springen er niet in */
.brug .ssnf-scrollcount { transition: opacity .6s var(--vl-zacht); }
/* Begin staat rechts op de regel van de alinea (Dévin 25-10: "zorg dat dit met de tekst ook gewoon goed in elkaar past"): de alinea eindigt op de onderrand van de knop.
   Op de telefoon is de alinea zo breed als de kolom; daar staat Begin eronder, met de afstand van de vragen (24px). */
.brug.is-intro .brug__intro { padding-bottom: 0; }
@media (max-width: 767px) { .brug.is-intro .brug__intro { padding-bottom: calc(var(--vl-knop, 3.5em) + var(--_sizes---size--24px)); } }
.brug .brug__intro { max-width: calc(var(--vl-rem) * 40); align-items: flex-start; padding-bottom: 0; }
.brug .brug__intro .rich-text-regular p { margin: 0; }
.brug .brug__intro .rich-text-regular p + p { margin-top: .9em; }   /* zoals de alinea's van de eindstap */
.brug .brug__link { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* de link van "Lees meer" op de pandpagina (60: .pand-more-btn) */
.brug .cta-wrap.vl-paneel { overflow: hidden; }

/* OPEN (spec 2026-10-26 §5.2, Dévin 26-10: "geen scroll tijdens het invullen"): de pagina staat stil zolang de brug open is, met het slot van het mobiele menu (67: is-navmenu-locked);
   de kop met de titel is weg, zodat het vlak eruitziet als het dossier; in de header staat Sluiten naast Mijn dossier (build-nl.mjs: papa's Sluiten-vak van het dossier). */
html.is-brug-open { overflow: hidden; }
html.is-brug-open body { overflow: clip; }
html.is-brug-open .listings__layout { visibility: hidden; }   /* het aanbod erboven valt weg: er piept niets boven de header uit (de balk ligt er precies achter, de bladerbalk erboven niet) */
html:not(.is-brug-kop) [data-brug-knoppen] { display: none; }
.brug.is-open:not([data-brug-stap="selectie"]) .brug__kop, .brug.is-open:not([data-brug-stap="selectie"]) .brug__lijn { display: none; }
/* De eindstap toont de kop weer, zoals het vlak eerst was (Dévin 27-10: "misschien toch als eerder de titel en count bovenaan maar dan zonder de bekijk de selectie knop, gebruik dat
   oude design want die was best vet"): links de titel, rechts wat op al je antwoorden past met de foto's van je beste drie (brug.js telvak). */
.brug.is-open[data-brug-stap="selectie"] .brug__lijn { margin-top: var(--_sizes---size--24px); }
@media (max-width: 767px) {   /* op de telefoon alleen de telling met zijn label: de tabel krijgt de ruimte */
  .brug.is-open[data-brug-stap="selectie"] .brug__kop .heading-s { display: none; }
  .brug.is-open[data-brug-stap="selectie"] .brug__tel .vl-paneel__klein { display: block; }
}
/* Sluiten precies zoals in de kop van het dossier (82: [data-vl-knoppen] en [data-vl-sluit]): een vak van de balk over de volle hoogte, aan het rechtereind, met alleen een lijn links,
   zonder eigen achtergrond of rand. is-brug-kop staat aan zolang Sluiten in de kop staat: brug.js laat het vak in breedte opengroeien en weer dichtgaan (Dévin 26-10).
   Op een groot scherm schuift Mijn dossier ervoor op, met de ruimte die het dicht ook had (papa's .5em van .navbar_col.is-right, zoals .vl-aanmelden in het dossier, 82);
   op de telefoon neemt Sluiten de plek van het menu in, en de lijn links is daar al de lijn van WhatsApp (één lijn, geen twee). */
html.is-brug-kop .navbar_col.is-right { padding-right: 0; }
html.is-brug-kop .navbar_col.is-right > .navbar-cta { margin-right: .5em; }
[data-brug-knoppen] { display: flex; align-items: center; align-self: stretch; justify-content: flex-end; gap: 0; flex: none; overflow: hidden; }
[data-brug-knoppen] > [data-brug-sluit] { flex: none; align-self: stretch; height: auto; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 1.5em; white-space: nowrap; border-left: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: none; }
[data-brug-knoppen] > [data-brug-sluit] .btn-animate-chars__bg { display: none; }
@media (max-width: 767px) {
  html.is-brug-kop .navbar .nav-trigger { display: none; }
  [data-brug-knoppen] > [data-brug-sluit] { border-left-width: 0; }
}
@media (max-width: 479px) { [data-brug-knoppen] > [data-brug-sluit] { padding: 0 .9em; } }   /* zoals het dossier (82) op een smalle telefoon */

/* DE EINDSTAP (spec 2026-10-26 §5.3): links de H3 en het eerlijke getal, rechts Beste match van het dossier (84) met de tien; het midden scrolt
   (op de telefoon de tekst boven de tabel). Alles op de kolom van de titel. */
.brug__eind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; column-gap: var(--_sizes---size--40px); row-gap: var(--_sizes---size--40px); width: 100%; }
.brug .brug__vraag.brug__eind { margin-block: 0; align-items: stretch; }   /* de inhoud tegen de kop; links even hoog als de tabel ernaast */
.brug__eind .brug__verhaal { display: flex; flex-direction: column; gap: var(--_sizes---size--24px); min-width: 0; }
.brug .brug__eind .rich-text-regular p { margin: 0; }
.brug .brug__eind .rich-text-regular p + p { margin-top: .9em; }
/* De bladen uit de Gids (97: .gids-blok) op de onderkant van de tabel (Dévin 25-10: "uitgelijnd met onderkant van grid ernaast"), aan elkaar met één zachte lijn */
/* Links blijft staan terwijl de tabel scrolt (Dévin 27-10, het oude ontwerp: links de H3, de tekst en onderaan de bladen): de kolom is zo hoog als het zichtbare midden
   (brug.js zet --brug-midden-h) min de ruimte boven en onder (.brug__vraag), en de bladen staan op de onderkant ervan, net boven de balk. */
@media (min-width: 768px) {
  .brug__eind .brug__verhaal { position: sticky; top: 0; height: calc(var(--brug-midden-h, 100%) - var(--_sizes---size--40px) - var(--vl-knop, 3.5em) - var(--_sizes---size--40px) * 1.5); }
}
.brug__eind .brug__verhaal > .brug__aanbevolen { margin-top: auto; }
.brug__aanbevolen { display: flex; flex-direction: column; gap: var(--_sizes---size--16px); }
.brug__aanbevolen .gids-blokken { --gids-lijn-zacht: color-mix(in srgb, var(--_colors---swatch--grey) 50%, transparent); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 1px 0 0 1px; }   /* de zachte lijn van de Gids (73) staat alleen op de Gids-pagina */
.brug__aanbevolen .gids-blokken > .gids-blok { margin: -1px 0 0 -1px; }
.brug__aanbevolen .gids-blok__naam { white-space: normal; }
/* Komt dichtbij: één regel in de letter van de tabelkop, over de hele breedte (geen tweede kop met Naam en Prijs) */
.brug .brug__beste .vl-rij.brug__dichtbij, .brug .brug__beste .vl-rij.brug__dichtbij::before { height: var(--vl-kop); min-height: 0; border-radius: 0; }   /* een tussenregel, geen eerste rij: zonder de ronde hoek van de kop (84, telefoon) */   /* de hoogte van de tabelkop (84) */
.brug .brug__beste .brug__dichtbij > .vl-kopcel { flex: 1 1 auto; padding-left: 1.2em; }   /* het label op de plek van Beste match erboven (84: .vl-kopcel--nr) */
.brug__aanbevolen .gids-blokken > a.gids-blok:hover, .brug__aanbevolen .gids-blokken > a.gids-blok:focus-visible { z-index: 1; }
@media (min-width: 768px) { .brug .brug__eind .brug__aanbevolen { width: min(100%, calc(var(--vl-rem) * 19)); } }   /* de maat van een blok in een rij van de Gids (97), Dévin 25-10 */
@media (max-width: 767px) {   /* telefoon: de tekst, dan de tabel, dan de bladen */
  .brug__eind .brug__verhaal { display: contents; }
  .brug__eind > .brug__beste { order: 2; }
  .brug__eind .brug__verhaal > .brug__aanbevolen { order: 3; margin-top: 0; }
}

/* LICHT THEMA (Dévin 24-10: "moet allemaal beige achtergrond en navy tekst"). De kaart van het dossier blijft het fundament (vorm, maat, vinkje,
   lijnkunst, binnenkomst); op het beige paneel krijgt hij de kleuren van dat paneel (84: --vl-vlak, --vl-ink). Gekozen = een navy rand, geen
   navy vulling. De lijnen in de inkt van het paneel, zacht; het vlak tussen de lijnen van "kruis" in het beige van de kaart.
   De rand van de kaart is altijd een lijn zoals de lijnen erin (Dévin 26-10: "de contour moet altijd matchen met de rest van de lijnen ook bij hover"): in rust even zacht, bij zweven en gekozen navy. */
.brug .vl-tegels { --vl-kaart-h: calc(var(--vl-rem) * 7); }
.brug .vl-scherm__keuzes .vl-kaart, .brug .vl-scherm__keuzes .vl-kaart[aria-pressed="true"] { background: var(--vl-vlak); color: var(--vl-ink); border-color: color-mix(in srgb, var(--vl-ink) 16%, transparent); }
.brug .vl-scherm__keuzes .vl-kaart:hover, .brug .vl-scherm__keuzes .vl-kaart:focus-visible { border-color: var(--vl-ink); }
/* Gekozen = één navy lijn, zoals de gekozen kaart van het dossier (87: één lijn, box-shadow none; Dévin 26-10: "net als dossier ... de contour houden", geen dubbele lijn). */
.brug .vl-scherm__keuzes .vl-kaart[aria-pressed="true"] { border-color: var(--vl-ink); box-shadow: none; }
.brug .vl-kaart__beeld { background: var(--vl-vlak); }
/* ZWEVEN (Dévin 25-10: "gewoon de lijnen die navy moeten worden"): de kaart blijft beige, de lijnen, staafjes en het vinkje worden navy, tegelijk. Alleen met een muis (zoals 87). */
@media (hover: hover) and (pointer: fine) {
  .brug .vl-scherm__keuzes .vl-kaart:hover .vl-lijnen__l { stroke: var(--vl-ink); }
  .brug .vl-scherm__keuzes .vl-kaart--bedrag:hover .vl-bars i { background: var(--vl-ink); }
  .brug .vl-scherm__keuzes .vl-kaart:not([aria-pressed="true"]):hover .vl-kaart__vink { border-color: var(--vl-ink); }
}
.brug .vl-lijnen__l { stroke: color-mix(in srgb, var(--vl-ink) 16%, transparent); }
.brug .vl-bars i { background: color-mix(in srgb, var(--vl-ink) 16%, transparent); }   /* de staafjes van het bedrag als de lijnen: in rust zacht, gekozen navy (het dossier, 87, zet ze beige op navy) */
.brug .vl-scherm__keuzes .vl-kaart--bedrag[aria-pressed="true"] .vl-bars i { background: var(--vl-ink); }
.brug .vl-scherm__keuzes .vl-kaart[aria-pressed="true"] .vl-lijnen__l { stroke: var(--vl-ink); }
.brug .vl-lijnen__vlak { fill: var(--vl-vlak); }
.brug .vl-scherm__keuzes .vl-kaart--keuze > .vl-kaart__tekst { background: var(--vl-vlak); border-color: inherit; }
.brug .vl-kaart .vl-kaart__vink { border-color: color-mix(in srgb, var(--vl-ink) 35%, transparent); background: var(--vl-vlak); }
.brug .vl-kaart[aria-pressed="true"] .vl-kaart__vink { background: var(--ssn-accent); border-color: var(--ssn-accent); }
.brug .vl-scherm__keuzes.is-stil, .brug .vl-scherm__keuzes.is-stil * { transition: none; animation: none; }   /* hertekend na een klik: geen tweede binnenkomst */

/* DE KOP ZOALS HET VLAK IN HET BEGIN WAS (papa's .hiw-header in .container-col-11, met de marges van het vlak: 40 boven, 80 onder; Dévin 24-10, bijlage met de originele marges).
   Links de titel (H2), rechts de huizen die nu passen, met één kolomlijn ernaast (de lijn van de Gids-kop, 97); daaronder de dikke navy lijn rand tot rand (97: .gids-ingang__lijn).
   De kolom (.container-col-11) is 11 van 12 kolommen breed: rand tot rand is dus 1/22 van zijn breedte aan elke kant. */
.brug .brug__kolom { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; row-gap: 0; }
.brug .brug__kop { margin: 0; align-items: stretch; }
.brug .brug__kop .heading-s { margin: 0; align-self: flex-end; }
.brug .brug__lijn { flex: none; height: 0; margin: var(--_sizes---size--40px) 0 0; background: none; }   /* geen lijn onder de kop (Dévin 25-10: "onderlijn mag ook helemaal weg"); de afstand blijft */
.brug__tel { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .6em; padding-left: var(--_sizes---size--40px); border-left: 1px solid color-mix(in srgb, var(--_colors---swatch--grey) 50%, transparent); }
.brug__tel .vl-paneel__klein { margin: 0; font-size: var(--_paragraphs---paragraph-xs--font-size); line-height: 1; }
.brug__tel-rij { display: flex; align-items: center; }
.brug__aantal { margin: 0; font-size: var(--_paragraphs---paragraph-l--font-size); line-height: 1; white-space: nowrap; }
.brug__aantal [data-brug-aantal] { font-family: var(--_fonts---fonts--alt-heading); font-size: 2.2em; margin-right: .1em; }
.brug__mee { margin: 0; max-width: 22em; font-size: var(--_paragraphs---paragraph-s--font-size); opacity: .75; }
.brug__mee:empty { display: none; }
/* De foto's gestapeld: elke volgende schuift half onder de vorige, met een rand in het beige van het vlak. Een foto komt pas als hij geladen is (brug.js zetFotos):
   dan groeit zijn plek open en faadt hij in, en het aantal schuift rustig mee. */
.brug__fotos { display: flex; padding-right: 0; transition: padding-right .6s var(--vl-ease); }
.brug__fotos.is-vol { padding-right: .9em; }
.brug .brug__fotos .vl-foto { position: relative; flex: none; width: 0; min-width: 0; max-width: 2.6em; height: 1.9em; overflow: hidden; opacity: 0; border-radius: var(--_layout---border-radius--4px);
  box-shadow: 0 0 0 var(--_sizes---size--2px) var(--vl-vlak); transition: width .6s var(--vl-ease), margin-left .6s var(--vl-ease), opacity .4s var(--vl-zacht) .2s; }
.brug .brug__fotos .vl-foto.is-in { width: 2.6em; opacity: 1; }
.brug .brug__fotos .vl-foto.is-in ~ .vl-foto.is-in { margin-left: -1.1em; }
.brug .brug__fotos .vl-foto:nth-child(1) { z-index: 3; }
.brug .brug__fotos .vl-foto:nth-child(2) { z-index: 2; }
html[data-ssn-motion="reduced"] .brug .brug__fotos .vl-foto, html[data-ssn-motion="reduced"] .brug__fotos { transition: none; }
.brug .brug__fotos .vl-foto img { width: 100%; height: 100%; object-fit: cover; }

/* DE KOPPEN, EEN VASTE ORDE (Dévin 24-10: "niet alle komen uit het design systeem en niet alle hebben hierarchie h1 h2 h3"): H2 de titel van het vlak (.heading-s), H3 de vraag of de
   stap (.heading-xs), H4 een label boven een groep (.vl-paneel__klein, het label van het dossierpaneel). Alles links op de kolom van de titel, één ritme: 24 tussen de delen, 40 boven. */
.brug .brug__kopdoos { align-items: flex-start; text-align: left; margin: 0; }
.brug .brug__stapkop { margin: 0; }
.brug .brug__label { margin: 0; font-weight: 600; }

/* papa's formulierbalk (Stappen, Vorige, Volgende) in het paneel, onder het midden (Dévin 24-10), in plaats van vast onderin het scherm. Verder de balk van het dossier
   zoals hij is (85, Dévin 24-10: "waar is de voortgang in de balk en terug knop NET als in het dossier?"): één vulling van links tot waar je bent (.vl-balkvul, brug.js balkVul),
   de tekst die met mix-blend-mode van kleur wisselt waar de vulling erachter ligt, en op de telefoon het stapvak met de vierkante terug-chevron en Volgende ernaast.
   Alleen de kleuren omgekeerd voor het beige paneel: het vak beige met een navy rand, de vulling navy (in het dossier beige op navy). [data-vl-form] erbij: dan wint dit van 85. */
.brug .brug__nav { position: relative; inset: auto; transform: none; margin: 0; }
.brug[data-vl-form] .f-form-navigation { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.brug[data-vl-form] .vl-balklabel { color: var(--vl-ink); }
.brug[data-vl-form] { --brug-lijn: color-mix(in srgb, var(--vl-ink) 25%, transparent); --brug-tussen: var(--brug-lijn); }   /* de lichte lijn van de balk (Dévin 24-10: "de lichtere lijn contour en tussen lijnen"); rand, scheidingen en de lijnen van de voortgang één kleur (Dévin 28-10: "zelfde kleur maken als alle andere lijnen") */
.brug[data-vl-form] .f-form-navigation_steps-group { background: var(--vl-vlak); border-color: var(--brug-lijn); -webkit-backdrop-filter: none; backdrop-filter: none; }
.brug[data-vl-form] .form-step_btn, .brug[data-vl-form] .form-step_btn.done { color: var(--vl-ink); border-right-color: var(--brug-tussen); background: none; }
.brug[data-vl-form] .form-step_btn > .steps-icon, .brug[data-vl-form] .form-step_btn > .form-step_title { mix-blend-mode: normal; }   /* niets mengt: de vulling is lijnen, geen vlak */
/* DE VOORTGANG (Dévin 28-10: "er is geen schuivene bar meer maar elk stuk moet even lang zodat er verticale lijnen zijn die er om ste beurt verdeeld in kunnen groeien van onder
   naar boven en die vullen elke stap"). De stappen even breed (een raster van gelijke kolommen, zo breed als de langste naam). In elke stap staande lijnen in de streek van de
   arcering van het dossier (in de kleur van de rand), gelijk verdeeld; een stap die af is of waar je bent, vult zich: de lijnen groeien om de beurt van onder naar boven, van links naar
   rechts. Terug krimpen ze in omgekeerde volgorde. --brug-wacht (brug.js balkVul): na Begin wacht de eerste stap tot het vlak gegroeid is. */
.brug[data-vl-form] .f-form-navigation_steps-group { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); }
.brug[data-vl-form] .brug-stapvul { position: absolute; z-index: 1; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.brug[data-vl-form] .brug-stapvul > i { width: 1px; height: 100%; background-color: var(--brug-lijn); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--vl-ease) calc((9 - var(--i)) * 30ms); }
.brug[data-vl-form] .form-step_btn.is-voor .brug-stapvul > i, .brug[data-vl-form] .form-step_btn.current .brug-stapvul > i { transform: scaleY(1); transition-delay: calc(var(--brug-wacht, 0s) + var(--i) * 45ms); }
html[data-ssn-motion="reduced"] .brug[data-vl-form] .brug-stapvul > i { transition: none; }
.brug[data-vl-form] .form-step_btn > .steps-icon, .brug[data-vl-form] .form-step_btn > .form-step_title { position: relative; z-index: 2; }
html[data-ssn-motion="reduced"] .brug[data-vl-form] .brug-lijnen path, html[data-ssn-motion="reduced"] .brug[data-vl-form] .brug-naad { transition: none; }
.brug[data-vl-form] .form-step_btn .steps-icon { border-color: currentColor; background-color: var(--vl-vlak); }   /* papa's ring heeft een navy vulling, voor het navy dossier; hier beige, zodat de arcering er niet door loopt */
.brug[data-vl-form] .form-step_btn .steps-icon_fill { background-color: currentColor; }
.brug[data-vl-form] .form-step_btn.current .steps-icon_fill { transform: scale(.5); }   /* waar je bent: de stip */
.brug[data-vl-form] .form-step_btn:not(.current):not(.is-voor) .steps-icon_fill { transform: scale(0); }   /* wat nog komt: een leeg rondje */
.brug[data-vl-form] .vl-stapvink { stroke: currentColor; }
/* Volgende: zoals Vorige beige met een navy rand, met het oranje pijlvak van de site (de CTA) */
.brug[data-vl-form] .form-button[data-form="next-btn"] { background: transparent; padding: 0; }
.brug .vl-paneel .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__bg { background-color: var(--vl-vlak); border: 1px solid var(--vl-ink); }
.brug .vl-paneel .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__text { color: var(--vl-ink); }
.brug[data-vl-form] .f-form-navigation .vl-vorige > a .btn-animate-chars__bg { background-color: var(--vl-vlak); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* De intro (Dévin 24-10: "de begin knop ... op de plek van de volgende knop ... de terug knop en voortgang bar moet een fadein krijgen zelfde als de rest van de inhoud tijdens het groeien
   van het beige vlak"): de balk staat er al met alleen Begin; na Begin faden de stappen en Vorige in terwijl het vlak groeit, en Begin wordt Volgende (brug.js zetKnop). */
.brug .f-form-navigation_steps, .brug .msf-button.is-prev { transition: opacity .6s var(--vl-zacht) .25s, visibility 0s linear 0s; }
.brug.is-intro .f-form-navigation_steps, .brug.is-intro .msf-button.is-prev { opacity: 0; visibility: hidden; transition: none; }
@media (max-width: 767px) {   /* de telefoonbalk van het dossier (85): het stapvak en de terug-chevron aan elkaar, in het beige van het paneel met een navy rand */
  .brug[data-vl-form] .f-form-navigation_steps, .brug[data-vl-form] .f-form-navigation .hide-desktop .msf-button.is-prev { background: var(--vl-vlak); border-color: var(--brug-lijn); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--vl-ink); }
  .brug[data-vl-form] .f-form-navigation_steps-group { border: 0; }
  .brug[data-vl-form] .f-form-navigation .hide-desktop .msf-button.is-prev .icon-button_element { color: var(--vl-ink); }
  .brug[data-vl-form] .f-form-navigation .hide-desktop .msf-button.is-prev[aria-disabled="true"] { opacity: .35; pointer-events: none; }
}

.brug [aria-disabled="true"].btn-animate-chars { opacity: .35; pointer-events: none; }
.brug .vl-paneel .vl-weetniet { color: var(--vl-ink); }   /* op het beige paneel de inkt van het paneel, zoals 84 de knoppen op .vl-paneel omkeert */

@media (max-width: 767px) {
  .brug .brug__kop { row-gap: .75em; }
  .brug .brug__kolom { padding-inline: var(--_sizes---size--16px); }   /* de inhoud niet tegen de rand van het vlak */
  .brug__tel { padding-left: 0; border-left: 0; }
  .brug__tel .vl-paneel__klein, .brug .brug__fotos .vl-foto:nth-child(n + 2) { display: none; }   /* op de telefoon het getal met één foto: het midden krijgt de ruimte */
  .brug__aantal [data-brug-aantal] { font-size: 1.6em; }
  .brug .brug__motief .vk-motief__tekst { display: none; }   /* twee naast elkaar: de titel en het aantal; de plekken staan op een groot scherm */
  .brug__eind { grid-template-columns: minmax(0, 1fr); }
  .brug .vl-scherm__keuzes .vl-tegels--keuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* twee naast elkaar; het dossier zet er één per rij */
  .brug .vl-scherm__keuzes .brug__drie { grid-template-columns: minmax(0, 1fr); }   /* drie keuzes: onder elkaar */
  /* Beste match op de telefoon: de naam met de prijs eronder vult de rij (de prijs staat al in de naamcel); de kolommen erachter en de ruimte voor het weghalen vallen weg */
  .brug .brug__beste .vl-rij { min-width: 0; }
  .brug .brug__beste { margin-right: 0; }   /* geen uitloop naar de rand zoals de brede tabel van het dossier (84): de tabel schuift hier niet, dus dezelfde marges als de tekst en de bladen */
  .brug .brug__beste .vl-tabel__scroll { padding-right: 0; }
  .brug .brug__beste .vl-vast { flex: 1 1 auto; width: auto; border-right-width: 0; }
  .brug .brug__beste .vl-data { display: none; }
  .brug .vl-scherm__keuzes .vl-tegels--bedrag { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* het bedrag twee bij twee, zoals het dossier op de telefoon (87); --vl-n van de rij zette er vier */
}

/* De cursor-tooltip in het vlak (brug.js, de pil van de Gids, 97: [data-gids-cursor]): navy met beige letters, linksboven de muis, ook boven het plusje van Beste match
   (bewaren / weghalen). De beige pil van de kaarten (listings.mjs) blijft in het vlak weg; de voorvertoning houdt die beige pil rechtsonder (Dévin 27-10). */
.cursor.is-brug[data-gids-cursor] { background-color: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); }
body:has(.brug .listing-card__save:hover) .cursor.is-ref { opacity: 0; }
/* Het linkervak van Beste match is het vakje van de voorvertoning (60: .pand-save-box, Dévin 26-10: "de plus ook gewoon naar de check schuiven die in min veranderd net als
   de preview uitklap"): plus → vinkje → min van REF_SCRIPT. Op het beige vlak in de kleuren van dat vlak: in rust leeg met het icoon in navy, bewaard het hele vak navy
   (Dévin 25-10: "die hele box wordt navy"). De lijnen van de tabel zijn de rand; het vakje zelf heeft er geen. */
.brug .brug__bewaar { display: flex; padding: 0; }
.brug .brug__bewaar .listing-card__save.pand-save-box { width: 100%; height: 100%; aspect-ratio: auto; border: 0; color: var(--vl-ink); }
.brug .brug__bewaar .listing-card__save.pand-save-box[aria-pressed="false"]:hover, .brug .brug__bewaar .listing-card__save.pand-save-box[aria-pressed="false"]:focus-visible { background-color: color-mix(in srgb, var(--vl-ink) 7%, transparent); }   /* de zweefkleur van de knopvakken van het dossier (84: button.vl-nr) */
.brug .brug__bewaar .listing-card__save.pand-save-box[aria-pressed="true"] { background-color: var(--vl-ink); color: var(--vl-vlak); }
.brug .brug__bewaar .listing-card__save.pand-save-box:focus-visible { outline-offset: -4px; }
@media (max-width: 767px) { .brug[data-vl-form] .vl-paneel a[data-brug-dossier] { padding-left: 1em; } }   /* Ga door met het getalvak past op de telefoon: links iets minder ruimte (gemeten 390: 3 px tekort) */
/* Snel bekijken (Dévin 25-10): foto en naam in Beste match openen het pandvenster (61). Bij hover op de foto of de naam verschijnt op de foto het vierkantje
   met de vier hoeken van de pandpagina (60: .pand-zoom, .pand-hoek), op een donker vlakje zoals de zoomknoppen in de uitklap, en de hoeken schuiven naar buiten. */
.brug [data-brug-venster] { cursor: pointer; }
.brug .vl-foto[data-brug-venster] { position: relative; }
.brug .brug__kijk { position: absolute; inset: 50% auto auto 50%; display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; translate: -50% -50%;
  color: var(--_colors---swatch--beige); opacity: 0; pointer-events: none; transition: opacity .3s var(--vl-zacht); }
.brug .brug__kijk .pand-full-icon { width: 2.4em; height: 2.4em; filter: drop-shadow(0 0 .25em color-mix(in srgb, var(--_colors---swatch--black) 45%, transparent)); }   /* groot, zonder vlakje (Dévin 25-10); een zachte schaduw houdt de hoeken leesbaar op een lichte foto */
.brug .vl-rij:has([data-brug-venster]:hover) .brug__kijk { opacity: 1; }
/* de foto zelf wijkt (Dévin 28-10: "de voorvertoning icon in de afbeeldign moet nu ook bij hover de afbeelding naar .7 dimmen en blurren"): naar .7 en wazig, met de blur
   van de Gids (73: .2em) en de schaal van de wazige foto op de kaart (30: 1.05), zodat de wazige rand buiten het vakje valt */
.brug .vl-foto[data-brug-venster] img { transition: opacity .3s var(--vl-zacht), filter .3s var(--vl-zacht), transform .3s var(--vl-zacht); }
.brug .vl-rij:has([data-brug-venster]:hover) .vl-foto[data-brug-venster] img { opacity: .7; filter: blur(.2em); transform: scale(1.05); }
html[data-ssn-motion="reduced"] .brug .vl-foto[data-brug-venster] img { transition: none; }
html[data-ssn-motion="full"] .brug .brug__kijk .pand-hoek { transition: transform .45s cubic-bezier(.76, 0, .24, 1); }
html[data-ssn-motion="full"] .brug .vl-rij:has([data-brug-venster]:hover) .brug__kijk .pand-hoek--lb { transform: translate(-.15em, -.15em); }
html[data-ssn-motion="full"] .brug .vl-rij:has([data-brug-venster]:hover) .brug__kijk .pand-hoek--rb { transform: translate(.15em, -.15em); }
html[data-ssn-motion="full"] .brug .vl-rij:has([data-brug-venster]:hover) .brug__kijk .pand-hoek--ro { transform: translate(.15em, .15em); }
html[data-ssn-motion="full"] .brug .vl-rij:has([data-brug-venster]:hover) .brug__kijk .pand-hoek--lo { transform: translate(-.15em, .15em); }
/* ============================================================================
   PANDPAGINA (proef 25-09) — docs/superpowers/specs/2026-09-25-pandpagina-asbuild.md
   Carrousel in papa's verhaal-opening (ronde 5: vol scherm, Apple-overgang), de knoppenrij (teller, ‹, ›, vergroten,
   plus), ⓘ, de plus-knop van de aanbodkaart (ronde 4), de uitklap met kleine foto's en de grote carrousel (ronde 5),
   vorige/volgende. Zonder important-vlaggen en zonder gekopieerde papa-regels. Maten in em: 1em = --size-font (12px op
   1440); waar een maat in px gespecificeerd is (uitleg max 280, de tussenruimte) staat dat erbij. Alle selectors raken
   alleen markup die op pand-proef.html staat.
   ============================================================================ */
/* F1 + ronde 5 (Dévin 26-09: "de ratio loslaten en het hele scherm bedekken, ten alle tijden. wel een gap"): elke foto is
   zo breed en hoog als de opening (cover). Tussen twee foto's een kleine, overal gelijke tussenruimte: --pand-gap (px, op
   alle breedtes gelijk; pand.js leest hem en geeft hem aan Swiper als spaceBetween). In die ruimte de navy van de opening.
   De overgang (Apple Foto's, zie pand.js): het beeld schuift binnen zijn vak mee, zodat de uitgaande foto verder wordt
   afgesneden en de komende groeit; in rust staat alles op de identiteit. Curve en duur: --pand-ease en pand.js. */
/* --pand-gap: 16 px, zoals Apples eigen voorbeeld van deze paging (WWDC24 sessie 10151, spacing 16); ronde 6: dezelfde in de
   uitklap ("wel minimale gab van de hero carrousel gab"). --pand-ease: de curve van Apples galerij op apple.com (bronnen in
   pand.js); pand.js zet hem per carrousel op het swiper-element (na slepen de curve voor een onderbroken wissel). */
.pand-hero, .pand-sheet { --pand-gap: 16px; }
.pand-swiper, .pand-sheet-swiper { --swiper-wrapper-transition-timing-function: var(--pand-ease, cubic-bezier(0.645, 0.045, 0.355, 1)); }
.pand-hero { position: absolute; inset: 0; overflow: hidden; background: var(--_colors---swatch--black); }
.pand-hero .pand-swiper { height: 100%; }
.pand-hero .pand-slide { width: 100%; height: 100%; overflow: hidden; }
.pand-hero .pand-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; backface-visibility: hidden; }
.pand-hero.is-static .pand-slide { cursor: zoom-in; }
/* het nummer heel klein onder de titel (Dévin 25-09), in de letter en maat van de teller; papa's .text-align-center
   zet Inter op de kop, dus de letter expliciet. In de kolom van de kop, dus nooit over "Ontdek dit pand" heen. */
.section_story-header .pand-ref { margin: 1.25em 0 0; font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 400; line-height: 1.2; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-align: center; opacity: .8; }
/* titel en fade liggen erover zonder klikken te vangen; alleen de knoppenrij vangt ze */
.section_story-header .story-header_content { pointer-events: none; }
.section_story-header .story-header-sound, .section_story-header .story-header-sound * { pointer-events: auto; }

/* F4 + ronde 3: één rij rechtsonder in papa's geluidsvak: teller, ‹, ›, vergroten, plus. Het vak houdt papa's plek en
   hoogte (4em; 3.5em ≤ 991; 3em ≤ 479), de breedte volgt de rij. */
.section_story-header .story-header-sound { display: flex; align-items: center; justify-content: flex-end; gap: .5em; width: auto; }
/* Ronde 6 (Dévin 26-09: "de hero zij knoppen moeten vanaf tablet al boven de titel gaan zitten"): onder 992 staat de rij
   boven de titel, zoals papa hem op de telefoon (≤ 479) al zet: eerste in de kolom (order -1, relatief), met papa's
   tussenruimte van 1.5em in de kolom. Ronde 5 blijft: de vierkantjes als groep gecentreerd, de teller absoluut links
   ervan (hij telt niet mee voor het midden en raakt de vierkantjes niet). Centreren zonder transform: papa's reveal (GSAP)
   zet er zelf een op dit vak. */
@media (max-width: 991px) {
  .section_story-header .story-header_content { row-gap: 1.5em; }
  .section_story-header .story-header-sound { order: -1; position: relative; inset: auto; align-self: center; width: max-content; justify-content: center; }
  .section_story-header .story-header-sound > .pand-count { position: absolute; right: 100%; top: 0; bottom: 0; display: flex; align-items: center; margin-right: .75em; }
  .section_story-header .story-header-sound > .pand-count:empty { display: none; }
}
/* de vierkantjes: even groot, papa's omrande vierkant van de geluidsknop, het icoon in de tekstkleur (ronde 8: zonder ‹ en ›) */
.pand-zoom { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 100%; aspect-ratio: 1; padding: 0; background: none; border: 1px solid var(--_theme---body-text); border-radius: 0; color: inherit; cursor: pointer; transition: background-color .4s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.pand-zoom:hover, .pand-zoom:focus-visible { background-color: rgba(235, 227, 216, .1); }
/* ‹ en › in de uitklap: papa's knop-icoon (.button-icon: vak van 2em, spoor rechts uitgelijnd, overloop verborgen) zonder
   zijn oranje vlak; bij ‹ het hele vak gespiegeld, zodat de chevron naar links wijst en het spoor naar links schuift. De
   hover-animatie van alle knoppen (papa: .button-icon_track schuift naar translate(50%)) staat bij de uitklap. */
.pand-pijl { display: flex; justify-content: flex-end; align-items: center; width: 2em; height: 2em; overflow: hidden; }
/* Vergroten (de uitklap openen), ronde 6 terug naar ronde 3 (Dévin: "de open knop die moet terug naar vorige versie"): vier
   hoeken; bij hover en focus schuiven ze licht naar buiten (signature-ease), niet bij minder beweging. 1.5em: de hoeken
   beslaan dan 1em, even hoog als de chevron ernaast (papa's .icon-10px), en de lijn (1.8 op 24 = 1.35px op 1440) even dik
   als die chevron (1.4px). */
.pand-full-icon { display: block; width: 1.5em; height: 1.5em; overflow: visible; }
/* was @media (prefers-reduced-motion: no-preference): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="full"] .pand-hoek { transition: transform .45s cubic-bezier(.76, 0, .24, 1); }
  html[data-ssn-motion="full"] .pand-zoom:focus-visible .pand-hoek--lb { transform: translate(-.15em, -.15em); }
  html[data-ssn-motion="full"] .pand-zoom:focus-visible .pand-hoek--rb { transform: translate(.15em, -.15em); }
  html[data-ssn-motion="full"] .pand-zoom:focus-visible .pand-hoek--ro { transform: translate(.15em, .15em); }
  html[data-ssn-motion="full"] .pand-zoom:focus-visible .pand-hoek--lo { transform: translate(-.15em, .15em); }
  @media (hover: hover) and (pointer: fine) {
    html[data-ssn-motion="full"] .pand-zoom:hover .pand-hoek--lb { transform: translate(-.15em, -.15em); }
    html[data-ssn-motion="full"] .pand-zoom:hover .pand-hoek--rb { transform: translate(.15em, -.15em); }
    html[data-ssn-motion="full"] .pand-zoom:hover .pand-hoek--ro { transform: translate(.15em, .15em); }
    html[data-ssn-motion="full"] .pand-zoom:hover .pand-hoek--lo { transform: translate(-.15em, .15em); }
  }

/* Dévins iconen (ronde 5): vergroten (loep met plus) en verkleinen (loep met min), in de tekstkleur (currentColor); sinds
   ronde 6 alleen op de zoomknoppen in de uitklap. 1.5em (18 px op 1440, ≤ 32 px), zo hoog als de vier hoeken. */
.pand-ic-vergroten, .pand-ic-verkleinen { display: block; flex: none; width: 1.5em; height: 1.5em; }
.pand-count { flex: none; margin-right: .25em; white-space: nowrap; font-size: var(--_paragraphs---paragraph-s--font-size); letter-spacing: .04em; font-variant-numeric: tabular-nums; opacity: .8; }
.pand-count:empty { display: none; }

/* info-sectie: de foto in papa's lijst (klik = alle foto's) */
.pand-lijst { display: block; width: 100%; cursor: zoom-in; }
.pand-lijst img { display: block; width: 100%; height: auto; }

/* Ronde 4: de plus-knop van de aanbodkaart, letterlijk (SAVE_BTN, MARK, PLUS en REF_SCRIPT uit listings.mjs; de kaart-css
   hierboven doet het spoor, het vinkje en de tooltip). Twee plekken, die elkaar volgen: een vijfde vierkantje in de rij
   rechtsonder en het vakje van de knop onder de tekst. In je lijst = vol beige met een navy icoon, zoals op de kaart.
   Het icoon op de maat van de chevron in de andere knoppen: papa's .icon-10px is .625em breed en de plus/het vinkje van
   de kaart zijn 13 van die 8 chevron-eenheden breed, dus zelfde hoogte en lijndikte als de chevron; iets kleiner dan op
   de kaart (daar max(.72em, 1.7cqi) × 13/8; cqi rekent buiten een kaart met de schermbreedte). */
.pand-save-box .listing-card__save-ic, .pand-save-knop .listing-card__save-ic { width: calc(.625em * 13 / 8); }
/* het vierkantje: zo groot en zo omrand als de andere drie, in rust doorzichtig met het icoon in de tekstkleur (hover = de
   lichte vulling van de rij), in je lijst vol beige. Papa's oranje .button-icon erin wordt doorzichtig: het vak is de knop. */
.listing-card__save.pand-save-box { flex: none; justify-content: center; align-items: center; box-sizing: border-box; height: 100%; aspect-ratio: 1;
  border: 1px solid var(--_theme---body-text); border-radius: 0; color: inherit;
  transition: background-color .6s cubic-bezier(.16, 1, .3, 1), border-color .6s cubic-bezier(.16, 1, .3, 1), color .6s cubic-bezier(.16, 1, .3, 1); }
.listing-card__save.pand-save-box .button-icon { background-color: transparent; border-radius: 0; color: inherit; }
.listing-card__save.pand-save-box[aria-pressed="false"]:hover, .listing-card__save.pand-save-box[aria-pressed="false"]:focus-visible { background-color: rgba(235, 227, 216, .1); }
.listing-card__save.pand-save-box[aria-pressed="true"] { background-color: var(--ssn-surface); border-color: var(--ssn-surface); color: var(--_colors---swatch--black); }
.listing-card__save.pand-save-box:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.listing-card__save.pand-save-box.is-silent { transition: none; }
/* de knop onder de tekst: papa's site-knop (.btn-secundair) als <button>, op zijn eigen breedte. Het spoor in het vakje
   volgt de stand (plus in rust, vinkje → min in je lijst), niet de hover: papa's hover-schuif staat hier uit (ook ≤ 991,
   waar papa hem bij :hover terugzet). Het vakje zelf is het plusvak van de kaart, letterlijk (ronde 4b, Dévin: "letterlijk
   het plusje overnemen"; oranje is CTA-only): vlak + rand op één laag (::before), in rust #d4c6b912 met een beige plus,
   rand bij hover, in je lijst vol beige met een navy icoon. Zelfde waarden als .listing-card__save .button-icon hierboven. */
.btn-animate-chars.pand-save-knop { display: inline-flex; -webkit-appearance: none; appearance: none; padding-top: 0; padding-bottom: 0; background: none; border: 0; }
.pand-save-knop .button-icon_track, .btn-animate-chars.pand-save-knop:hover .button-icon_track { transform: translate(0, 0); }
.pand-save-knop[aria-pressed="true"] .button-icon_track, .btn-animate-chars.pand-save-knop[aria-pressed="true"]:hover .button-icon_track { transform: translate(50%, 0); }
.pand-save-knop .button-icon { background-color: transparent; color: var(--ssn-surface); transition: color .6s cubic-bezier(.16, 1, .3, 1); }
.pand-save-knop .button-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; background-color: #d4c6b912;
  transition: background-color .6s cubic-bezier(.16, 1, .3, 1), border-color .2s; }
.pand-save-knop .button-icon_track { position: relative; }   /* boven de laag */
.pand-save-knop[aria-pressed="false"]:hover .button-icon::before { border-color: rgba(235, 227, 216, .45); }
.pand-save-knop[aria-pressed="true"] .button-icon { color: var(--_colors---swatch--black); }
.pand-save-knop[aria-pressed="true"] .button-icon::before { background-color: var(--ssn-surface); }
.pand-save-knop.is-drawn .listing-card__save-mark path { stroke-dashoffset: 0; }
.pand-save-knop.is-instant .listing-card__save-mark path { transition: none; }
.pand-save-knop.is-morph .listing-card__save-mark path { stroke-dasharray: none; }
.pand-save-knop.is-silent .button-icon, .pand-save-knop.is-silent .button-icon::before, .pand-save-knop.is-silent .button-icon_track, .pand-save-knop.is-silent .listing-card__save-mark path { transition: none; }
.pand-save-knop:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
/* papa's cursor-tooltip van de kaart ('bewaren' / 'weghalen') ook boven de knop onder de tekst (het vierkantje is een
   .listing-card__save en valt al onder de regel van de kaart) */
body:has(.pand-save-knop:hover:not(.is-tip-off)) .cursor.is-ref:not(.is-vergroten):not(.is-kopieer) { opacity: 1; }
/* Ronde 5: het vergroten-vierkantje krijgt dezelfde tooltip, met 'vergroten' (pand.mjs: .cursor.is-ref.is-vergroten). De
   regel van de kaart toont elke .cursor.is-ref boven een plus: deze daar niet. Plek (linksboven de cursor): pand.js. */
body:has(.listing-card__save:hover) .cursor.is-ref.is-vergroten, body:has(.listing-card__save:hover) .cursor.is-ref.is-kopieer { opacity: 0; }
body:has(.pand-zoom:hover) .cursor.is-ref.is-vergroten { opacity: 1; }

/* SSN-nummer onder de titel = knop die kopieert (pand.js initKopieer). Hover/focus: een subtiel kader eromheen dat invaded (::before, alleen
   opacity; het nummer zelf verandert niet, dus niets schuift). Het kader staat in het raakvlak van de knop (padding met gelijke negatieve
   marge). Muis: de cursor-tooltip 'kopiëren' rolt na de klik naar een vinkje dat zich tekent. Aanraking: geen kader (geen hover), een kaartje
   onder het nummer met vinkje en 'gekopieerd' (los van het nummer, anders erft het zijn opacity). */
.section_story-header .pand-ref { position: relative; }
.pand-ref__knop { position: relative; -webkit-appearance: none; appearance: none; display: inline-block; margin: -.5em -.75em; padding: .5em .75em; background: none; border: 0; border-radius: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pand-ref__knop::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(235, 227, 216, .38); border-radius: 0; opacity: 0; pointer-events: none;
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .pand-ref__knop:hover::before { opacity: 1; } }
.pand-ref__knop:focus-visible::before { opacity: 1; }
.pand-ref__knop:focus-visible { outline: none; }
.pand-ref__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:has(.pand-ref__knop:hover) .cursor.is-ref.is-kopieer { opacity: 1; }
.cursor.is-kopieer .pand-kopieer-vink { display: inline-flex; align-items: center; justify-content: center; }
.cursor.is-kopieer .listing-card__save-mark { width: 1.05em; height: .88em; }
.cursor.is-kopieer.is-drawn .listing-card__save-mark path { stroke-dashoffset: 0; }
.cursor.is-kopieer.is-instant .listing-card__save-mark path { transition: none; }
.pand-ref__bev { position: fixed; left: 0; top: 0; z-index: 1000; display: inline-flex; align-items: center; gap: .55em; padding: .55em .85em .5em; white-space: nowrap; pointer-events: none;
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-s--font-size); font-weight: 500; letter-spacing: .02em; line-height: 1.25; text-transform: none;
  background: var(--ssn-surface); color: var(--_colors---swatch--black); border-radius: var(--_layout---border-radius--4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 .7em 1.9em rgba(0, 0, 0, .3);
  opacity: 0; visibility: hidden; transform: translate(-50%, -.4em);
  transition: opacity .25s cubic-bezier(.32, .72, 0, 1), transform .25s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .25s; }
.pand-ref__bev.is-aan { opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .35s cubic-bezier(.32, .72, 0, 1), transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.pand-ref__bev .listing-card__save-mark { width: .9em; height: .75em; flex: none; }
.pand-ref__bev.is-aan .listing-card__save-mark path { stroke-dashoffset: 0; }
.pand-ref__bev:not(.is-aan) .listing-card__save-mark path { transition-duration: 0s; transition-delay: .3s; }   /* het vinkje blijft staan tot het kaartje weg is */
html[data-ssn-motion="reduced"] .pand-ref__bev, html[data-ssn-motion="reduced"] .pand-ref__bev.is-aan { transition: none; transform: translate(-50%, 0); }

/* F7/F8 eigenschappen: ⓘ na de waarde, uitleg in een beige vlak (Floating UI zet top/left) */
#info-section .ai_table-row > [id] { min-width: 0; }   /* een lang label (Voorzieningen) duwt de waardekolom niet opzij: alle waarden op één lijn */
/* Papa's lijn onder elke tabelrij tekent zich met een Webflow-interactie (breedte 0 → 100%). Op een aanraakscherm gaat die
   nooit af: de breedte bleef 0, de tabel had op de telefoon geen lijnen (gemeten 27-09, Chromium met touch). Daar staat de
   lijn dus meteen op volle breedte, net als hij op de desktop eindigt. */
@media (hover: none) and (pointer: coarse) { #info-section .devider.is-table-row .devider-fill { width: 100% !important; } }
.pand-tip-btn { display: inline-flex; vertical-align: middle; margin-left: .35em; padding: .25em; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; transition: opacity .3s cubic-bezier(.16, 1, .3, 1); }
.pand-tip-btn:hover, .pand-tip-btn:focus-visible { opacity: 1; }
.pand-tip-btn svg { width: .8333em; height: .8333em; }
.pand-tip { position: absolute; top: 0; left: 0; z-index: 20; width: max-content; max-width: min(23.3333em, calc(100vw - 2.6667em)); padding: .75em .9em; background: var(--ssn-surface); color: var(--_colors---swatch--black); border-radius: var(--_layout---border-radius--4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 .7em 1.9em rgba(0, 0, 0, .3); font-family: var(--_fonts---fonts--paragraph); font-size: calc(var(--_paragraphs---paragraph-regular--font-size) / 1.5); line-height: 1.4; letter-spacing: 0; text-align: left; text-transform: none; white-space: normal; text-wrap: pretty; }   /* de rij staat op 1.5em: gedeeld door 1.5 = de gewone tekstmaat; max 23.33em = 280px op 1440 */
.pand-tip[hidden] { display: none; }
.pand-sub { display: block; margin-top: .35em; font-family: var(--_fonts---fonts--paragraph); font-size: calc(var(--_paragraphs---paragraph-xs--font-size) / 1.5); letter-spacing: .03em; text-transform: uppercase; opacity: .7; }   /* zoals "exacte prijs op aanvraag" op de kaart: klein, hoofdletters */
.pand-more-btn { padding: 0; background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }

/* F11 vorige/volgende: papa's twee kolommen als één lijst (pand-template.mjs); vorige links, volgende rechts. De namen
   dragen papa's hide-mobile (ronde 3): op de telefoon (≤ 479) alleen de knoppen, zoals bij papa. */
.pand-buren .navbar_col.is-stories { flex: 1 1 auto; min-width: 0; }
.pand-buren .stories-prev-next_wrap { width: 100%; }
.pand-buren .collection-list-wrapper { flex: 1 1 auto; min-width: 0; }
.pand-buren .collection-list { display: flex; justify-content: space-between; align-items: center; gap: 1.25em; height: 100%; }
.pand-buren .collection-item, .pand-buren .stories-nav_title { min-width: 0; }

/* ============================================================================
   HET PANDVENSTER (spec 2026-10-23-dossier-top3-uitleg-design.md U3, beelden 4 en 5; in de brug: spec 2026-10-25-brug-eindstap-bewaren-design.md).
   De uitklap van de pandpagina (62) met het verhaal, de kaart en de tabel eronder, in één scrollvak; vendor/ssn-brug/pandvenster.js zet hem in elkaar.
   Kop: het plusje van de kaart in een vierkant vak, de naam in de letter van de pandtitel (.heading-m) met de regio schuin (.alt-heading), het SSN-nummer
   in het kadertje dat het nummer op de pandpagina bij hover krijgt (60: .pand-ref__knop::before, beige op 38 %), dan het kruis. Daaronder de carrousel
   (tot het streepje, dat op de onderrand eindigt), het scrollstreepje van de pandpagina (.callout-line: 1px grijs, 4,5em; telefoon 3em) en het informatieblok.
   ============================================================================ */
/* Het vlak als het beige vlak (Dévin 25-10): de breedte van dat vlak (pandvenster.js zet -l en -r), bovenaan de ronding van het beige vlak. Het loopt door tot de
   onderkant van het scherm (Dévin 26-10: "die voorvertoon uitklap moet wel doortrekken tot de boden omdat het beige vlak nu een no-scroll krijgt"), dus onderaan
   recht, zoals de uitklap van de pandpagina (62). Het komt van onder het scherm omhoog (62: translateY). Boven de filterbalk (35: .listings, laag 101), onder de header (1000). */
.pand-venster .pand-sheetwrap { z-index: 102; bottom: 0; overflow: visible; }
.pand-venster .pand-sheet { inset: 0; border-radius: var(--_layout---border-radius--12px) var(--_layout---border-radius--12px) 0 0; transform: translateY(calc(100% + 1px)); }
.pand-venster .pand-sheetwrap.is-open .pand-sheet { transform: translateY(0); }
.pand-venster .pand-sheet-top { align-items: stretch; }
.pand-venster__bewaar { flex: none; display: flex; align-items: center; justify-content: center; align-self: stretch; aspect-ratio: 1; border-right: 1px solid var(--pand-lijn); }
.pand-venster__kop { flex: 1 1 auto; display: flex; align-items: center; gap: 1em; min-width: 0; padding: 0 1.5em; }
.pand-venster__naam { margin: 0; font-size: 2.1em; line-height: 1.1; letter-spacing: -.005em; text-transform: uppercase; }
.pand-venster__nw { white-space: nowrap; }
.pand-venster__ref { flex: none; padding: .5em .75em; border: 1px solid color-mix(in srgb, var(--_colors---swatch--beige) 38%, transparent); white-space: nowrap; }
.pand-venster__rol { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; container-type: size; --pand-streep: 4.5em; }
/* Over de foto's scrollt het vak ook (verticaal is van de browser, opzij van de carrousel); ingezoomd schuift slepen de foto (62: touch-action none) */
.pand-venster .pand-sheet-swiper { touch-action: pan-y; }
.pand-venster .pand-sheet-swiper:has(.is-zoomed) { touch-action: none; }
/* De foto's vullen het venster tot het streepje, en het streepje komt precies op de onderrand (Dévin 28-10: "de voorvertonging moet nu de hoogte krijgen zodat die verticale
   lijn onder de hero precies tegen de onderkant aan komt als je hem opent"): de hoogte van het scrollvak (cqh) min het streepje. */
.pand-venster .pand-sheet-stage { flex: none; box-sizing: border-box; height: calc(100cqh - var(--pand-streep)); border-bottom: 1px solid var(--pand-lijn); }
.pand-venster__streep { width: 1px; height: var(--pand-streep); margin: 0 auto; background-color: var(--pand-lijn); }
.pand-venster__info { padding: 4.5em var(--_layout---padding-global--page-padding) 0; }
.pand-venster__info .kaart { border-radius: 0; }   /* de kaart sluit het venster af: zonder ruimte eronder en zonder ronding (Dévin 26-10) */
/* Desktop zoals de pandpagina (Dévin 27-10: "de kaart kleiner en op desktop gewoon een radius"): de twee kolommen in papa's container-col-10 (83,33 %,
   gecentreerd), dus de kaart even groot als daar, met de ronding van 75. De onderrij van de kaart haalt pandvenster.js weg. */
@media screen and (min-width: 992px) {
  .pand-venster__info { padding-inline: 0; padding-bottom: var(--_layout---padding-global--page-padding); }   /* met de ronding een smalle rand eronder, als opzij */
  .pand-venster__info > .artwork-info_group { width: 83.3333%; margin-inline: auto; }
  .pand-venster__info .kaart { border-radius: var(--_layout---border-radius--8px); }   /* de ronding van 75 */
}
/* het plusje en zijn tooltip. De tooltip van het plusje (REF_TIP) mag in het venster wél: 62 verbergt de tooltips van de pagina zolang een uitklap open is */
html:has(.pand-venster .pand-sheetwrap.is-open) .cursor.is-ref:not(.is-vergroten):not(.is-kopieer):not(.is-brug) { visibility: visible; }
/* het vakje van de pandpagina (60: .pand-save-box, plus → vinkje → min, bewaard = beige vlak) vult het vierkante vak in de kop; de rand is de lijn van de kop */
.pand-venster__bewaar .listing-card__save.pand-save-box { width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) {
  .pand-venster__kop { flex-wrap: wrap; align-content: center; gap: .35em .6em; padding: .8em 1em; }   /* het nummer op een eigen regel onder de naam, niet onder het kruis */
  .pand-venster__naam { font-size: 1.3em; line-height: 1.25; }
  .pand-venster__ref { padding: .35em .5em; font-size: .8em; }
  .pand-venster__rol { --pand-streep: 3em; }
  .pand-venster__info { padding-top: 3em; }
}
/* ============================================================================
   DE UITKLAP (.pand-sheet, ronde 5–7) — een kopie van de filter-uitklap van het aanbod (MOBIEL FILTER-MENU hierboven:
   .listings-bar__menuwrap = vast venster met overflow:hidden, .listings-bar__menu = navy paneel met 1px rand in de
   randkleur, alleen boven een radius van 8px, dat met de header-interactie (IX2 a-18: 800ms cubic-bezier(.625,.05,0,1) na
   100ms) omhoog schuift; scroll-lock op <html>, Escape en het kruisje sluiten).
   Hij komt uit de vloer van het scherm, ook op de computer. De bovenrand ligt even ver onder de header als de header van de
   bovenkant staat; links en rechts gelijk met de header, ook op de telefoon (ronde 6). pand.js meet de header bij het openen
   en zet --pand-sheet-t/-l/-r; de waarden hier zijn het vangnet (papa's header: page-padding + 4.5em, ≤ 991 4em).
   Ronde 7 (Dévin 26-09: "ik vind de licht mode helemaal niet zo mooi. dus zet dat weer terug", "zorg dat het simpel
   blijft"): weer navy, met de kleuren van ronde 5 (checkpoint 19f0fc9).
   ============================================================================ */
.pand-sheetwrap { position: fixed; z-index: 90; bottom: 0; overflow: hidden; pointer-events: none;
  top: var(--pand-sheet-t, calc(2 * var(--_layout---padding-global--page-padding) + 4.5em));
  left: var(--pand-sheet-l, var(--_layout---padding-global--page-padding)); right: var(--pand-sheet-r, var(--_layout---padding-global--page-padding)); }
.pand-sheet { --pand-thumb: 5.5em; --pand-lijn: var(--_colors---swatch--grey); --pand-in: .5em; --pand-knop: 4em; --pand-sluit: 6em;
  position: absolute; inset: 0 0 -1px; display: flex; flex-direction: column; overflow: hidden;   /* -1px: de onderrand valt buiten beeld, zoals bij de filters achter de balk */
  background: var(--_colors---swatch--black); color: var(--_colors---swatch--beige);
  border: 1px solid var(--pand-lijn); border-top-left-radius: var(--_layout---border-radius--8px); border-top-right-radius: var(--_layout---border-radius--8px);
  transform: translateY(100%); visibility: hidden; pointer-events: none;
  transition: transform .8s cubic-bezier(.625, .05, 0, 1) .1s, visibility 0s .9s; }
.pand-sheetwrap.is-open .pand-sheet { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .8s cubic-bezier(.625, .05, 0, 1) .1s; }
/* De dichte uitklap bouwt zijn foto's niet op en haalt ze dus ook niet: loading=lazy laadt alles binnen ± 1250 px van het scherm, en de dichte
   uitklap ligt er vlak onder (gemeten 01-10: 9 foto's op 1920 px en 26 duimen bij het laden, 5,5 MB tegen 0,8). pand.js haalt .is-dicht weg bij de eerste
   intentie (aanraking of hover op de opening, focus op de vergrootknop, openen), dus de opbouw valt vóór het openen. De vakjes hebben een eigen maat
   (Swipers breedte, --pand-thumb), dus er verschuift niets. Browsers zonder content-visibility doen alleen het oude gedrag. */
.pand-sheetwrap.is-dicht .pand-sheet-slide, .pand-sheetwrap.is-dicht .pand-thumb { content-visibility: hidden; }
.pand-sheet:focus { outline: none; }
/* scroll-lock terwijl hij open is: dezelfde klasse als de filter-uitklap (html.is-listings-menu-locked hierboven, pand.js) */
/* de tooltips van de pagina (plus, vergroten) niet boven de open uitklap: de muis kan na de klik nog op de knop eronder staan */
html:has(.pand-sheetwrap.is-open) .cursor.is-ref { visibility: hidden; }
@media (max-width: 479px) { .pand-sheet { --pand-thumb: 5em; } }

/* Bovenin de kleine foto's (lage resolutie, strak vierkant, zonder tussenruimte en zonder radius); horizontaal scrollen en
   slepen, ook met de vinger (pand.js; touch-action: none, want de pagina staat stil zonder geneste scroll); wat niet past,
   verdwijnt achter de rand. Strak rechts de sluitknop, even groot als een vierkantje.
   Ronde 7 (Dévin: "de kleine afbeeldingen stijl moet gewoon iets simpeler"): een lijn van 1 px in de randkleur tussen de
   vakjes en één onder de rij, zodat elk vakje rondom een lijn heeft (ronde 6) zonder dubbele lijnen. Ronde 8 ("de oranje
   eruit ... nog simpeler zodat het niet zo druk lijkt"): de actieve heeft alleen een beige lijn rondom, geen laag en geen
   nummer; alleen bij hover een navy laag met het nummer in beige (stijl van de stappen-telling op de homepage,
   .card-number), en de foto in het vakje wordt ietsje groter. */
.pand-sheet-top { position: relative; flex: 0 0 auto; display: flex; box-sizing: content-box; height: var(--pand-thumb); border-bottom: 1px solid var(--pand-lijn); }   /* content-box: de lijn komt onder de vakjes, die blijven vierkant */
/* Ronde 10 (Dévin: "een dynamische fade direct tegen de kruis knop, die verdwijnt wanneer hij helemaal uitgescrold is", en
   daarna: "zelfde als vorige keer alleen navy"): dezelfde rand-fade als op het aanbod (.aanbod-filters-scroll::after), geen
   gradient maar een inset-schaduw, tegen het sluitvak aan, in de navy van het paneel. pand.js zet is-end zodra de rij
   helemaal is uitgescrold. */
.pand-sheet-top::after { content: ""; position: absolute; z-index: 5; top: 0; bottom: 0; right: var(--pand-sluit); width: 5em;
  pointer-events: none; transition: opacity .3s ease; box-shadow: inset -4em 0 3em -2.5em var(--_colors---swatch--black); opacity: 1; }
.pand-sheet-top.is-end::after { opacity: 0; }
.pand-thumbs { position: relative; flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: none;
  cursor: grab; -webkit-user-select: none; user-select: none; }
.pand-thumbs::-webkit-scrollbar { display: none; }
.pand-thumbs.is-grabbing { cursor: grabbing; }
.pand-thumbs.is-kader-hover { cursor: grab; }   /* de selector is te pakken (pand.js, initThumbs) */
.pand-thumb { position: relative; flex: 0 0 var(--pand-thumb); width: var(--pand-thumb); height: var(--pand-thumb); margin: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--_colors---swatch--night); color: inherit; font: inherit; cursor: pointer; overflow: hidden; }
.pand-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pand-thumb + .pand-thumb::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 1px; background: var(--pand-lijn); pointer-events: none; }
/* Rechterlijn van de laatste kleine foto (Dévin 10-10: "een rechter border die hij nog mist, maar buiten de container, zodat hij achter
   de kruis box valt en je geen dubbele lijn krijgt"). Een eigen streepje van 1 px aan het eind van de rij, dus buiten elke foto (de selector
   en de nummerstrook meten de foto's en blijven even breed). Het sluitvak ligt er 1 px overheen (margin-left -1px) en trekt met zijn
   eigen lijn links precies dezelfde pixel over: één lijn, nooit twee. */
.pand-thumbs::after { content: ""; flex: 0 0 1px; width: 1px; background: var(--pand-lijn); pointer-events: none; }
/* Hover op een kleine foto. Ronde 14 (Dévin: "nu niet meer schalen en geen overlay, alleen het nummer dat wel ietsje
   infadet en schaalt; als je klikt komt hij hem halen, en die stijl moet echt alleen bij hover blijven"): de foto blijft
   zoals hij is, er komt geen donkere laag meer overheen, alleen het nummer komt op (van 92 % naar zijn maat). Een zachte
   schaduw om de letters houdt het leesbaar op een lichte foto — zonder vlak eronder.
   Alleen bij echte hover met een muis: op aanraakschermen blijft :hover na een tik hangen, en het toetsenbord ziet de
   focusrand. Na een klik haalt de selector het nummer op (pand.js zet dan is-gehaald): vanaf dat moment toont het vakje
   zijn eigen nummer niet meer, ook niet als de muis er nog op staat — het nummer is dan dat van de selector. */
.pand-thumb-n { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-family: var(--_fonts---fonts--alt-heading); font-style: italic; font-size: calc(var(--pand-thumb) * .5); line-height: 1; color: var(--_colors---swatch--beige);
  text-shadow: 0 1px 10px rgba(42, 36, 32, .55); opacity: 0; transform: scale(.92);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .pand-thumb:hover .pand-thumb-n { opacity: 1; transform: scale(1); }
}
.pand-thumb.is-gehaald .pand-thumb-n { opacity: 0; transform: scale(.92); }
.pand-thumb:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: -4px; }
/* Ronde 10 (Dévin: "de actieve kleine foto moet wel het getal zichtbaar hebben en een dikkere border"): nummer zichtbaar,
   beige, op dezelfde navy laag als bij hover. Ronde 13: dat doet de selector nu (zie .pand-thumb-kader hieronder). */
/* Ronde 11 (Dévin: "de kleine actieve foto met de dikke border moet een selector zijn die meeschuift"): niet langer een rand
   per vakje, maar één vakje-groot kader dat naar de actieve foto schuift. Het staat in de rij zelf, dus het scrollt mee;
   pand.js zet zijn maat en plek (transform).
   Ronde 12: exact de curve en duur van een fotowissel (pand.js: EASE en SPEED), dezelfde waarmee de rij eronderdoor
   schuift. Omdat beide even lang met dezelfde curve lopen, staat de selector tijdens die beweging stil op zijn plek in de
   rij en schuiven de foto's eronderdoor; kan de rij niet verder, dan glijdt hij vanzelf naar zijn eigen vakje. */
.pand-thumb-kader { position: absolute; z-index: 4; top: 0; left: 0; width: var(--pand-thumb); height: var(--pand-thumb);
  overflow: hidden; background: rgba(42, 36, 32, .35);
  box-shadow: inset 0 0 0 2px var(--_colors---swatch--beige); pointer-events: none;
  transition: none; }   /* ronde 12: pand.js schuift hem per frame mee met de rij, zodat ze niet uit elkaar lopen */
/* Ronde 13: de donkere laag hoort bij de selector. Ronde 14 (Dévin: "de nummering blijft op positie in zijn afbeelding,
   maar wordt onthuld door het frame van de selector"): in de selector ligt een strook met álle nummers, even breed als de
   rij. pand.js legt die strook precies op de kleine foto's (hij schuift hem tegen de selector in mee), dus elk nummer ligt
   op zijn eigen foto — hij scrollt en sleept met de foto's mee. De selector snijdt af: zijn frame is het venster waardoor
   je het nummer van de foto eronder ziet. Schuift de selector naar een andere foto, dan glijdt het oude nummer het frame
   uit en het nieuwe erin. */
.pand-thumb-strook { position: absolute; top: 0; left: 0; height: 100%; display: flex; pointer-events: none; }
/* de breedte per nummer is de gemeten breedte van een kleine foto (pand.js zet --pand-cel in px). Niet var(--pand-thumb):
   die staat in em, en deze vakjes hebben een grotere letter, dus 5.5em zou hier veel breder uitvallen dan een foto. De
   terugval 2em klopt ook (letter = de helft van een vakje), maar de gemeten maat volgt de rij tot op de subpixel. */
.pand-thumb-strook > span { flex: 0 0 var(--pand-cel, 2em); width: var(--pand-cel, 2em); height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--_fonts---fonts--alt-heading); font-style: italic; font-size: calc(var(--pand-thumb) * .5); line-height: 1;
  color: var(--_colors---swatch--beige); }
/* De sluitknop (ronde 6): het draaiende kruisje van de filters (IC_CLOSE, .ssnf-x: .85em, een halve pixel naar rechts, een
   kwartslag bij hover in .7 s), met een lijn links. Ronde 9 en 10 maakten dit vak beige; Dévin zag het naast elkaar en koos
   het oude terug: "het oude kruisje zonder fade en in navy die 90 graden draait vind ik eigenlijk veel mooier". Wat van
   ronde 10 blijft: het vak is even breed als papa's hamburger (6em), zodat het daar precies onder uitlijnt. */
.pand-sheet-close { position: relative; z-index: 6; box-sizing: border-box; flex: 0 0 var(--pand-sluit); width: var(--pand-sluit); height: var(--pand-thumb); display: flex; align-items: center; justify-content: center;
  margin: 0 0 0 -1px; padding: 0; border: 0; border-left: 1px solid var(--pand-lijn); border-radius: 0; background: none; color: inherit; cursor: pointer;
  transition: background-color .4s cubic-bezier(.16, 1, .3, 1); }
.pand-sheet-close:hover, .pand-sheet-close:focus-visible { background-color: rgba(235, 227, 216, .1); }
.pand-ic-sluiten { position: relative; left: .5px; display: block; width: .85em; height: .85em; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.pand-sheet-close:hover .pand-ic-sluiten, .pand-sheet-close:focus-visible .pand-ic-sluiten { transform: rotate(90deg); }

/* Daaronder de grote carrousel: dezelfde Apple-carrousel als de opening (pand.js), één foto per blok met de tussenruimte van
   de opening, zonder scheidingslijn (ronde 6). Ronde 7 (Dévin: "niet compleet bedekkend maar vullend, dus als de boven en
   onderkant geraakt worden; voor desktop betekent dat er nog grote linker en rechter gaps blijven"): elke foto heel in beeld
   en zo groot als het blok toelaat (pand.js, fotoMaat). Op de computer raakt een liggende foto boven en onder, op de
   telefoon links en rechts. Inzoomen: eerst vullend (de foto bedekt het hele blok), dan het maximum. */
.pand-sheet-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.pand-sheet .pand-sheet-swiper { width: 100%; height: 100%; touch-action: none; }
.pand-sheet-slide { box-sizing: border-box; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; }
/* Ronde 9 (Dévin: "de apple transitie … moet binnen het contour van de afbeelding blijven, heel suptiel"): om elke foto een
   kader dat precies zo groot is als de foto in beeld (pand.js meet hem) en dat stilstaat in zijn blok. Het beeld erin staat
   een tikje groter en schuift alleen bínnen dat kader mee, dus de afstand tussen twee foto's blijft onderweg altijd gelijk.
   Zoomen vergroot het kader zelf (pand.js), dus je ziet steeds dezelfde uitsnede: geen sprongetje bij het inzoomen. */
.pand-foto { position: relative; flex: none; width: 100%; height: 100%; overflow: hidden; }
.pand-sheet-swiper .swiper-zoom-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pand-sheet-swiper .swiper-zoom-container > img { flex: none; max-width: none; max-height: none; object-fit: contain; }   /* maat: pand.js */
.pand-sheet-slide.is-zoomed { cursor: move; }
/* Bediening in de uitklap: dezelfde vierkantjes als de rij in de opening (papa's omrande vierkant), met de vervaging van de
   secundaire knop (.btn-secundair: blur 4px) en een navy laag zoals de sluier op de kaart (.55), zodat ze ook boven een
   (ingezoomde, lichte) foto leesbaar blijven. Ronde 7 (Dévin: "toch een margin van de zijkant en van elkaar, maar heel
   klein, zelfde voor de chevrons"): overal .5em, dezelfde tussenruimte als tussen de vierkantjes in de opening. */
.pand-sheet-arrow, .pand-sheet-zoom > button { position: absolute; z-index: 2; box-sizing: border-box; width: var(--pand-knop); height: var(--pand-knop); display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 1px solid var(--pand-lijn); border-radius: 0; background: rgba(42, 36, 32, .55); color: inherit; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color .4s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.pand-sheet-arrow { top: 50%; margin-top: calc(var(--pand-knop) / -2); }
.pand-sheet-arrow--prev { left: var(--pand-in); }
.pand-sheet-arrow--next { right: var(--pand-in); }
.pand-sheet-arrow--prev .pand-pijl { transform: scaleX(-1); }
.pand-sheet-zoom { position: absolute; z-index: 2; top: var(--pand-in); right: var(--pand-in); display: flex; gap: var(--pand-in); }
.pand-sheet-zoom > button { position: relative; }
.pand-sheet-arrow:hover, .pand-sheet-arrow:focus-visible, .pand-sheet-zoom > button:hover, .pand-sheet-zoom > button:focus-visible { background: linear-gradient(rgba(235, 227, 216, .1), rgba(235, 227, 216, .1)) rgba(42, 36, 32, .55); }
.pand-sheet-arrow:disabled, .pand-sheet-zoom > button:disabled { opacity: .35; cursor: default; background: rgba(42, 36, 32, .55); }
@media (min-width: 992px) { .pand-sheet-arrow:not(:disabled):hover .button-icon_track { transform: translate(50%, 0); } }
.pand-sheet-arrow:focus-visible .button-icon_track { transform: translate(50%, 0); }
@media (max-width: 991px) { .pand-sheet { --pand-knop: 3.5em; } }
@media (max-width: 479px) { .pand-sheet { --pand-knop: 3em; } }
/* Ronde 9 (Dévin: "de count van de hero dan ook links boven zetten in de uitklap"): dezelfde teller als in de opening,
   linksboven, tegenover de zoomknoppen en even hoog (de deling: zijn eigen letter is .875em van het vak). Hetzelfde matte
   vlak als de knoppen, zodat hij ook boven een lichte foto leesbaar blijft, maar zonder rand: het is een bijschrift. */
.pand-sheet-count { position: absolute; z-index: 2; top: var(--pand-in); left: var(--pand-in); display: flex; align-items: center;
  height: calc(var(--pand-knop) / .875); padding: 0 1.25em;
  font-size: var(--_paragraphs---paragraph-s--font-size); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--_colors---swatch--beige); opacity: .8; pointer-events: none; }   /* ronde 10: zonder vlak erachter */
.pand-sheet-count:empty { display: none; }
.pand-sheet-close:focus-visible, .pand-sheet-arrow:focus-visible, .pand-sheet-zoom > button:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }

/* toetsenbord: papa zet site-breed :focus { outline: 0 }; onze bedieningen krijgen een dunne lijn bij :focus-visible */
.pand-zoom:focus-visible, .pand-tip-btn:focus-visible, .pand-more-btn:focus-visible, .pand-lijst:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] .pand-zoom,
html[data-ssn-motion="reduced"] .pand-tip-btn,
html[data-ssn-motion="reduced"] .listing-card__save.pand-save-box,
html[data-ssn-motion="reduced"] .pand-save-knop .button-icon,
html[data-ssn-motion="reduced"] .pand-save-knop .button-icon::before,
html[data-ssn-motion="reduced"] .pand-save-knop .button-icon_track,
html[data-ssn-motion="reduced"] .pand-sheet,
html[data-ssn-motion="reduced"] .pand-sheetwrap.is-open .pand-sheet,
html[data-ssn-motion="reduced"] .pand-thumb-n,
html[data-ssn-motion="reduced"] .pand-thumb-kader,
html[data-ssn-motion="reduced"] .pand-sheet-close,
html[data-ssn-motion="reduced"] .pand-ic-sluiten,
html[data-ssn-motion="reduced"] .pand-sheet-top::after,
html[data-ssn-motion="reduced"] .pand-sheet-arrow,
html[data-ssn-motion="reduced"] .pand-sheet-zoom > button { transition: none; }


/* ============================================================================
   GIDS-GROEI (Gids v4, unit 3; spec docs/superpowers/specs/2026-10-12-gids-v4-krant-design.md). Een staand lijntje in de marge onder het beeld
   (lib/gids.mjs, groeiLijn): op /nl/guide en op elk blad tussen de foto en wat eronder komt. 3em hoog, mobiel 2em; de kleur zet 97.
   GIDS_GROEI_SCRIPT in lib/gids-strook.mjs zet --gids-groei van 0 naar 1 terwijl je scrollt (vol na een kwart scherm); zonder script, of met
   Minder beweging, staat de variabele op 1 en het lijntje helemaal.
   Op een blad loopt het lijntje door als de middenlijn van de krant: die staat in 73-gids-blad (sinds 16-10; de oude lijndelen per stuk, de knoop
   en het verschijnen staan in _archive/oud-2026-10-16-gids-uitleg/).
   ============================================================================ */
.gids-groei { display: block; height: 3em; pointer-events: none; }
.gids-groei__lijn {
  display: block; width: 1px; height: 100%;
  background: var(--_colors---swatch--black); opacity: .6;
  transform-origin: center top; transform: scaleY(var(--gids-groei, 1));
}
@media screen and (max-width: 767px) {
  .gids-groei { height: 2em; }
}
html[data-ssn-motion="reduced"] .gids-groei__lijn { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gids-groei__lijn { transform: none; }
}
/* ============================================================
   GIDS · KRUIMELPAD
   Vierkante cellen tegen elkaar die samen één beige blok vormen (Gids v4 unit 3, spec 2026-10-12-gids-v4-krant-design.md): papa's beige
   (--ssn-surface, zoals de knop Mijn dossier) met zwarte letters, tussen twee cellen een dunne lijn in --kaart-taupe-diep (de lijnkleur van de strook).
   Dezelfde hoogte- en letterlogica als de cellen van de onderbalk (45-onderbar): hoofdletters, gespatieerd. De buitenhoeken krijgen de kleine radius van de tags.
   Gebruikt op /nl/guide/<begrip> in de banner en op /nl/guide in de splash (lib/gids.mjs, kruimelHtml).
   ============================================================ */
.gids-kruimel { display: inline-flex; flex-wrap: wrap; align-items: stretch; margin: 0 0 1.5em; }
.gids-kruimel__cel {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 3.25em; padding: 0 1.5em;
  border: 1px solid var(--ssn-surface); color: var(--_colors---swatch--black); background: var(--ssn-surface);
  font-size: 1em; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none;
}
.gids-kruimel__cel + .gids-kruimel__cel { margin-left: -1px; border-left-color: var(--kaart-taupe-diep); }   /* één dunne lijn tussen twee cellen */
.gids-kruimel__cel:first-child { border-radius: var(--_layout---border-radius--4px) 0 0 var(--_layout---border-radius--4px); }
.gids-kruimel__cel:last-child { border-radius: 0 var(--_layout---border-radius--4px) var(--_layout---border-radius--4px) 0; }
.gids-kruimel__cel:only-child { border-radius: var(--_layout---border-radius--4px); }
a.gids-kruimel__cel { transition: background-color .2s, border-color .2s; }
a.gids-kruimel__cel:hover { background: #d4c6b9; border-color: #d4c6b9; }   /* de beige cel wordt een tint donkerder, geen oranje (zoals de onderbalk) */
a.gids-kruimel__cel:focus-visible { outline: 2px solid var(--ssn-accent); outline-offset: 2px; }
html[data-ssn-motion="reduced"] a.gids-kruimel__cel { transition: none; }
/* ============================================================================
   MELDING (.ssn-toast, window.ssnToast — lib/toast.mjs). Elke melding = een eigen kaartje (kloon); een nieuwe komt bovenop
   terwijl de oude wegschuift. Het beige kaartje (--ssn-surface, navy tekst, radius 8px), letter van de tooltip (Basic
   Grotesque, 1em): tekst en link 400, link onderstreept, geen hover-stijl; font-synthesis uit (nooit nep-vet).
   Rechter padding zet toast.mjs op desktop live: de tekst eindigt op dezelfde lijn als de inhoud van de header-knop.
   Sluitknop (Dévin 10-10, zoals een macOS-melding): een klein rond knopje met een dunne rand op de linkerrand, verticaal gecentreerd, half over de rand
   van het kaartje. Inhoud (tekst + actieknop) staat verticaal gecentreerd en de actieknop heeft overal een rand. Eén opmaak voor elke melding.
   --ssn-toast-gap zet toast.mjs live = de binnenmarge van de header (header-rand → header-knop). Plek zet toast.mjs ook:
   desktop die gap onder de header, rechts gelijk met de header / gesnapt met de header-knop; ≤991px zo breed als de
   header, die gap boven de listing-bar.
   Beweging = een macOS-melding: van rechts erin en naar rechts eruit, met in- en uitfaden (zelfde duur en curve), curve
   iOS/Apple cubic-bezier(.32,.72,0,1), 500ms erin / 300ms eruit; tijdens slepen zet toast.mjs de opacity lager.
   ============================================================================ */
.ssn-toast { --ssn-toast-gap: 6px; --ssn-toast-off: 0px; --ssn-toast-lh: 1.3em;   /* Dévin 12-10: breekt een melding, dan dicht op elkaar (was 1.5em) */
  position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0; margin-inline: auto;
  width: max-content; max-width: min(40rem, calc(100vw - 2 * var(--ssn-toast-gap)));
  display: flex; align-items: center; column-gap: 16px; padding: 20px 1.625em 20px calc(.9em + 10px); font-synthesis: none;   /* één ritme voor elke melding: kruisje → tekst 10px (het kruisje steekt 0,9em in het kaartje), tekst → knop 16px, hoogte gelijk met een melding met knop (58px) */
  --ssn-toast-lijn: color-mix(in srgb, var(--_colors---swatch--black) 30%, transparent);
  background-color: var(--ssn-surface); color: var(--_colors---swatch--black);
  border-radius: var(--_layout---border-radius--8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 .7em 1.9em rgba(0, 0, 0, .3);   /* dezelfde schaduw als de andere beige zwevende kaartjes (.ssn-tip, .pand-tip, .listings__error). Nu de melding op de hele pagina geldt, valt hij ook over beige stukken (het vragenlijstblok onder de lijst); zonder schaduw verdween zijn rand daar, beige op beige */
  touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab;
  transform: translateX(calc(100% + var(--ssn-toast-off) + 2px)); visibility: hidden; opacity: 0;
  transition: transform .3s cubic-bezier(.32, .72, 0, 1), opacity .3s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .3s; }
.ssn-toast.is-top { left: auto; bottom: auto; margin-inline: 0; }
.ssn-toast.is-open { transform: translateX(0); visibility: visible; opacity: 1;
  transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .5s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.ssn-toast.is-drag { transition: none; cursor: grabbing; }
/* De wissel van plek op telefoon/tablet (boven de vastgeplakte listing-bar ↔ onderaan de pagina, met de zijmarge) is een sprong van
   tientallen pixels en schuift rustig: toast.mjs zet .is-schuift precies dan. Het meebewegen met de balk zelf gebeurt zonder deze klasse. */
.ssn-toast.is-open.is-schuift { transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .5s cubic-bezier(.32, .72, 0, 1), visibility 0s, bottom .6s cubic-bezier(.32, .72, 0, 1); }
.ssn-toast__t { flex: 0 1 auto; min-width: 0; margin: 0; color: inherit; font-family: var(--_fonts---fonts--paragraph);
  font-size: 1em; font-weight: 400; line-height: var(--ssn-toast-lh); letter-spacing: .01em; text-transform: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ssn-toast__t a { color: inherit; font-weight: 400; white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ssn-toast__act { flex: 0 0 auto; }
.ssn-toast__act .btn-animate-chars__bg { border: 1px solid var(--ssn-toast-lijn); }
.ssn-toast.has-act { --ssn-toast-rand: 8px; padding-block: var(--ssn-toast-rand); padding-right: var(--ssn-toast-rand) !important; }   /* met knop: rand → knop 8px (boven, onder, rechts) */
/* Binnen de knop: geen eigen padding meer (Dévin 12-10: "die cta heeft een hele andere margin"). De knop houdt papa's 0 18px, net als elke knop op de pandpagina en in de header. */
.ssn-toast__act-ic { position: relative; z-index: 1; display: inline-flex; margin-right: 6px; }
.ssn-toast__act-ic svg { width: 1.3em; height: 1.3em; }
.ssn-toast__act:has(.ssn-toast__act-ic) { display: inline-flex; align-items: center; column-gap: 0; }
.ssn-toast__act[hidden] { display: none; }   /* .btn-animate-chars zet display; zonder deze regel blijft een verborgen knop staan */
.ssn-toast__x { position: absolute; top: 50%; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em;
  transform: translate(-40%, -50%); margin: 0; padding: 0; border: 1px solid var(--ssn-toast-lijn); border-radius: 50%;
  background: var(--ssn-surface); color: inherit; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); cursor: pointer; }
.ssn-toast__x::before { content: ""; position: absolute; inset: -.5em; border-radius: 50%; }   /* ruimer tikvlak dan het zichtbare rondje */
.ssn-toast__x svg { width: .6em; height: .6em; display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) { .ssn-toast__x:hover svg { transform: rotate(90deg); } }
.ssn-toast__x:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
/* Regelbreuk tussen de zinnen alleen op desktop; ≤991px lopen ze gewoon door (de spatie staat er al vóór). */
.ssn-toast__br { display: block; }
@media (max-width: 991px) {
  .ssn-toast__br { display: none; }
  .ssn-toast { padding-right: 1.25em; }
}
/* Op /nl/dossier (Dévin 01-10): alles in de melding verticaal gecentreerd, een lichte rand om de melding en om de knop erin (de rand van de lijnen in het vlak). */
body:has([data-vl-paneel]) .ssn-toast { --ssn-toast-lijn: var(--vl-lijn); border: 1px solid var(--vl-lijn); }
/* Desktop: een melding bij een actie in het beige vlak valt in dat vlak (toast.mjs, { vlak: true } → .is-vlak); daar is hij navy met beige tekst, anders valt een beige kaartje weg
   tegen het vlak. Een algemene melding (ingelogd, samenvoegen) blijft het beige kaartje rechtsboven, zoals op de rest van de site (Dévin 18-10). */
@media (min-width: 992px) {
  body:has([data-vl-paneel]) .ssn-toast:not(.is-vlak) { border-color: transparent; }   /* beige op de navy pagina: geen lijn nodig, de schaduw draagt hem */
  .ssn-toast.is-vlak { background-color: var(--vl-ink); color: var(--vl-vlak); border-color: transparent; }
  .ssn-toast.is-vlak { --ssn-toast-lijn: color-mix(in srgb, var(--vl-vlak) 55%, transparent); }
  .ssn-toast.is-vlak .ssn-toast__x { background-color: var(--vl-ink); }
  .ssn-toast.is-vlak .ssn-toast__act .btn-animate-chars__bg { background-color: transparent; }
  .ssn-toast.is-vlak .ssn-toast__act .btn-animate-chars__text { color: var(--vl-vlak); }
}
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] .ssn-toast { transform: none; opacity: 0; transition: opacity .2s, visibility 0s linear .2s; }
  html[data-ssn-motion="reduced"] .ssn-toast.is-open { transform: none; opacity: 1; transition: opacity .2s, visibility 0s; }
  html[data-ssn-motion="reduced"] .ssn-toast.is-open.is-schuift { transition: opacity .2s, visibility 0s; }
  html[data-ssn-motion="reduced"] .ssn-toast__x svg { transition: none; }


/* MOBIELE TELLER (≤767): '[resultaat] van [totaal in Alles/Kopen/Huren]' klein en beige, gecentreerd net boven de balk.
   Dicht: sticky boven de balk (de balk heeft dan geen eigen marge; deze rij is de ruimte). Open: vast op dezelfde plek.
   Géén eigen verloop (Dévin 25-09): alleen in het open filtermenu zit een dynamische fade onderin (.listings-bar__menu-fade,
   alleen als er nog filters onder staan). Géén lijn. */
body { --lcount-h: 2.25em; }   /* op body: ook de balkzone (--listings-foot-h) telt ermee */
.listings-count-m { display: none; }
.listings-bar__count strong, .listings-count-m strong { font-weight: 500; }   /* 500 = de dikste geladen snede; 600 was nep-vet */
@media screen and (max-width: 991px) {
  .listings-count-m { display: flex; align-items: center; justify-content: center; position: sticky; z-index: 7;
    bottom: calc(var(--listings-pad) + var(--listings-nav-h) + var(--kb-lift, 0px)); height: var(--lcount-h); margin-top: .5em; pointer-events: none;
    color: var(--_colors---swatch--beige); font-family: var(--_fonts---fonts--paragraph); letter-spacing: .01em; }
  .listings-count-m__t { font-size: var(--_paragraphs---paragraph-xs--font-size); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .listings-count-m + .listings-bar { margin-top: 0; }
  /* DE TELLER LANDT IN HET MIDDEN (taak 3c, Dévin 27-09). Tijdens het scrollen verandert er niets: hij plakt op
     dezelfde plek boven de balk (sticky bottom = P + N, hierboven). Alleen zijn NATUURLIJKE plek — waar hij staat als
     hij niet plakt — ligt nu precies in het midden van de VORIGE/VOLGENDE-balk. Met B = de hoogte van die balk
     (= papa's .navbar, gemeten op 390: 52,09 px, exact --listings-nav-h) en C = --lcount-h:
       margin-top    = −(B + C) / 2      → de bovenkant komt op (B − C) / 2 onder de bovenkant van de balk
       margin-bottom =  (B − C) / 2 + G  → de stroom gaat verder op de ONDERKANT van de balk, plus G boven de balk.
     Die G staat hier en niet op .listings-bar, omdat naast elkaar liggende marges samenklappen tot de grootste: als
     .listings-bar zijn eigen G kreeg, at hij de marge van de teller op en verdween de lucht. Alleen als de
     VORIGE/VOLGENDE-balk er echt staat; bij één pagina blijft alles zoals het was.
     TAAK 3d: de balk is verhuisd naar .listings__frame (daar geldt --cols), dus hij is geen buur meer van deze rij en
     `.listings__blader:not([hidden]) + .listings-count-m` werkt niet langer. :has() op de sectie doet hetzelfde werk
     — de site gebruikt :has() al (de chip-hover in de balk). Die selector is wél specifieker dan de twee vaste
     standen hieronder, dus in plaats van op volgorde te vertrouwen sluiten we de open panelen hier hard uit: staat het
     filtermenu of het hamburger-menu open, dan gelden deze marges niet en staat de teller op zijn vaste plek
     (Dévin 27-09: "als je de filter uitklapt moet de count weer naar de absolute positie net als normaal"). */
  html:not(.is-navmenu-locked) .listings:not(.is-filter-menu):not(.is-menu-los):has(.listings__blader:not([hidden])) .listings-count-m {
    margin-top: calc(-1 * (var(--listings-nav-h) + var(--lcount-h)) / 2);
    margin-bottom: calc((var(--listings-nav-h) - var(--lcount-h)) / 2 + var(--listings-gap));
  }
  /* KOOPOBJECTEN/HUUROBJECTEN OP EEN EIGEN REGEL (Dévin 28-09). Tussen VORIGE en VOLGENDE past "1 tot 24 van de 358
     koopobjecten" niet op één regel: hij liep over de knoppen heen. Zolang die balk er staat, gaat het onderdeel-woord
     daarom naar een tweede regel, gecentreerd onder de getallen. Het blok staat in de rij op align-items: center, dus op
     het midden van de balk; de rij zelf houdt C (--lcount-h), zodat de rekensom hierboven blijft kloppen. nowrap blijft
     staan: de getallen breken nooit, alleen het woord (een blok) begint op een nieuwe regel. Zonder woord (Alles) is dat
     blok leeg en 0 hoog, dus één regel zoals altijd. Staat het filtermenu of de hamburger open, dan staat de teller vast
     boven de balk over de hele breedte en blijft hij één regel. */
  /* PRECIES TUSSEN DE KNOPPEN, ALLEEN ALS HIJ DAAR STAAT (Dévin 28-09, herzien 29-09). VORIGE en VOLGENDE zijn niet even breed —
     op 390 lag het midden van de ruimte ertussen 11 px naast het midden van de balk, en dat zie je. listings.mjs meet dat verschil
     in --lcount-x, en zet .is-tussen op de sectie ALLEEN als (a) de tellerrij onderaan in de VORIGE/VOLGENDE-balk zit en (b) beide
     knoppen er zijn. Zwevend boven de listing bar staat de teller gewoon gecentreerd op het scherm (vroeger schoof hij ook daar 11 px
     opzij, alsof er knoppen naast hem stonden), en op pagina 1 of de laatste pagina is er niets om tussen te passen.
     ALTIJD MET EEN EASE: de verschuiving loopt over .6 s op de site-ease, dus de teller schuift rustig op als VORIGE erbij komt
     of weggaat en als je de balk in scrolt. Bij een open menu staat de teller vast boven de balk; daar geen verschuiving en ook geen ease. */
  .listings-count-m__t { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .listings.is-tussen:not(.is-filter-menu):not(.is-menu-los) .listings-count-m__t { transform: translateX(var(--lcount-x, 0px)); }
  .listings.is-filter-menu .listings-count-m__t, .listings.is-menu-los .listings-count-m__t { transition: none; }
  /* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .listings-count-m__t { transition: none; }

  .listings.is-filter-menu .listings-count-m, .listings.is-menu-los .listings-count-m { position: fixed; left: calc(var(--listings-pad) + 1px); right: calc(var(--listings-pad) + 1px); bottom: calc(var(--listings-pad) + var(--listings-nav-h) + var(--kb-lift, 0px)); margin: 0; }
  /* FADE ONDERIN HET MENU: zelfde verloop, maar met de functie van de scroll-fades — alleen als er nog iets onder staat
     (has-more via listings.mjs), niet zonder scroll en niet aan de onderkant. Loopt tot achter de balk (.5em). */
  .listings-bar__menu-fade { position: absolute; left: 0; right: 0; bottom: calc(var(--_layout---border-radius--8px) - 1px);   /* balk-radius min de menu-rand: de fade reikt precies tot de bovenkant van de balk */ height: calc(var(--lcount-h) + 2em); z-index: 2; pointer-events: none;   /* lang en zacht verloop; alleen het stuk achter de balk (.5em) is massief */
    background: linear-gradient(to top, var(--_colors---swatch--black) .5em, rgba(42, 36, 32, .85) calc(.5em + 20%), rgba(42, 36, 32, 0)); opacity: 0; transition: opacity .25s; }
  .listings-bar__menu.has-more .listings-bar__menu-fade { opacity: 1; }
  .listings-bar__menu-body { padding-bottom: calc(var(--lcount-h) + var(--_layout---border-radius--8px)); }   /* laatste filter scrolt tot boven de teller + het stuk achter de balk */
}

/* FILTEREN ↔ RESULTATEN (mobiel, menu open). Twee regels in één vak: A = papa's per-letter-hover (Filteren), B =
   Resultaten eronder. Open: A rolt omhoog weg (zonder de text-shadow-kopie), B rolt per letter omhoog in, met dezelfde
   .6s-ease en 0.01s-stagger als een knop-hover. Pas dáárna (transition-delay .35s) schuift de gecentreerde groep naar
   de nieuwe breedte (flabelTo zet de width). Clip alleen verticaal (clip-path), zodat het langere woord tijdens de rol al
   helemaal leesbaar is. B staat absoluut → dicht is het vak zo breed als A (desktop ongemoeid). */
.lb-flabel { position: relative; display: inline-flex; overflow: visible; clip-path: inset(0 -100vw); vertical-align: middle; transition: width .6s cubic-bezier(.16, 1, .3, 1) .35s; }
.lb-flabel__b { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; white-space: nowrap; pointer-events: none; }
.lb-flabel__b > span { display: inline-block; transform: translateY(1.3em); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.listings-bar__cell.is-filters.is-res .lb-flabel__a span { transform: translateY(-1.3em) rotate(.001deg); text-shadow: none; }
.listings-bar__cell.is-filters.is-res .lb-flabel__b > span { transform: translateY(0); }
/* Dezelfde twee-woorden-rol op papa's knoppen in de balk van de vragenlijst (Vorige/Volgende stap ↔ vraag). */
.btn-animate-chars.is-res .lb-flabel__a span { transform: translateY(-1.3em) rotate(.001deg); text-shadow: none; }
.btn-animate-chars.is-res .lb-flabel__b > span { transform: translateY(0); }
/* Het tweede woord rolt bij zweven net als het eerste (Dévin 17-10: "deze knop mist de hover animatie"): papa's rol van de letters (de schaduw 1,3 em eronder schuift omhoog in beeld).
   De clip-path van het vak knipt boven en onder, dus de schaduw is alleen tijdens het zweven te zien. */
.btn-animate-chars .lb-flabel__b > span { text-shadow: 0 1.3em currentColor; }
.btn-animate-chars.is-res:hover .lb-flabel__b > span, .btn-animate-chars.is-res:focus-visible .lb-flabel__b > span { transform: translateY(-1.3em) rotate(.001deg); }

/* SECTIE-TEKEN: plus → min (open). De verticale lijn draait 90°, de horizontale 180° (twee stokjes die in elkaar
   klappen); zelfde maat/kleur/ease als de oude chevron. */
.ssnf-chev .ssnf-pm__h, .ssnf-chev .ssnf-pm__v { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.ssnf-sec.is-open .ssnf-chev .ssnf-pm__v { transform: rotate(90deg); }
.ssnf-sec.is-open .ssnf-chev .ssnf-pm__h { transform: rotate(180deg); }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */ html[data-ssn-motion="reduced"] .lb-flabel,
html[data-ssn-motion="reduced"] .lb-flabel__b > span,
html[data-ssn-motion="reduced"] .ssnf-chev path { transition: none; }
html[data-ssn-motion="reduced"] .btn-animate-chars.is-res:hover .lb-flabel__b > span { transform: translateY(0) rotate(.001deg); }   /* zoals papa's eigen knop bij minder beweging: geen rol */


/* ============================================================
   GIDS · LICHT
   De basis van de uitleg-pagina's van de Gids (spec 2026-10-10-gids-lat-design.md): beige papier met navy tekst, de pil zoals op een pandkaart, en de uitklaplijst
   van de vragen. Alleen bestaande tokens (--ssn-surface, --ssn-accent, de radius-tokens, de taupe van de kaart in 75, navy #2a2420).
   Het kruimelpad staat in 64, de rail in 68, de banner in 71, de blokken in 73, de header in 96.
   ============================================================ */
.gids-papier { background: var(--ssn-surface); color: #2a2420; }
.gids-papier :is(.heading-l, .heading-m, .heading-s, .paragraph-l, .alt-heading, p, h2, h3, li) { color: #2a2420; }

/* De labels zoals op een pandkaart: een pil met een contour. */
.gids-pil { display: inline-flex; align-items: center; height: 2.5em; padding: 0 1em; border: 1px solid currentColor; border-radius: var(--_layout---border-radius--4px);
  font-size: .75em; letter-spacing: .06em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-align: left; color: #2a2420; }

/* Vragen (v5, Dévin 17-10): een uitklaplijst met haarlijnen. Per vraag een knop met het teken van het filter op het aanbod (65: twee streepjes; dicht staat het
   tweede rechtop, open draait het een kwartslag en ligt het op het eerste: een min). Het antwoord gaat in hoogte open en dicht (GIDS_LAT_SCRIPT, 420ms,
   de ease van het filter). Zonder JavaScript staan alle antwoorden open: dicht klappen alleen onder [data-klap], dat het script zet. Geen nummers: het
   is geen volgorde. */
.gids-vraag { border-top: 1px solid var(--kaart-taupe-diep); }
.gids-vraag:last-child { border-bottom: 1px solid var(--kaart-taupe-diep); }
.gids-vraag__kop { margin: 0; font: inherit; font-size: 1em; line-height: inherit; letter-spacing: normal; text-transform: none; }   /* papa's h3 is groot en in hoofdletters */
.gids-vraag__knop { display: flex; align-items: center; column-gap: 1em; width: 100%; padding: 1.4em 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gids-vraag__knop:focus-visible { outline: 2px solid var(--ssn-accent); outline-offset: 2px; }
.gids-vraag__t { flex: 1 1 0; min-width: 0; font-family: var(--_fonts---fonts--heading); font-size: 1.25em; font-weight: 400; line-height: 1.3; }
/* Het teken in de maat van het filter op het aanbod (Dévin 17-10: "veel kleiner kruisje, net als in de filter pagina"): het svg-vak van 14 (55, .ssnf-chev). */
.gids-vraag__ic { flex: none; display: grid; place-items: center; color: #2a2420; }
.gids-vraag__ic svg { display: block; }
.gids-vraag__ic path { transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.gids-vraag.is-open .gids-vraag__ic .gids-pm__v { transform: rotate(90deg); }
.gids-vraag.is-open .gids-vraag__ic .gids-pm__h { transform: rotate(180deg); }
.gids-vragen__lijst[data-klap] .gids-vraag__b { overflow: hidden; height: 0; opacity: 0; }
.gids-vragen__lijst[data-klap] .gids-vraag.is-open > .gids-vraag__b { height: auto; opacity: 1; }
.gids-antwoord { padding: 0 2.5em 1.5em 0; max-width: 40em; }
.gids-papier .gids-stuk .gids-antwoord p { margin: 0; font-size: 1em; line-height: 1.7; }
/* Het hele open blok is klikbaar om te sluiten (GIDS_LAT_SCRIPT). Eén knop naast de vragen: Vraag je dossier aan (papa's btn-secundair). */
.gids-vraag.is-open .gids-vraag__b { cursor: pointer; }
/* .gids-vragen__knop staat sinds ronde 34 in 73 (de omlijnde knop met het oranje blokje). */
html[data-ssn-motion="reduced"] .gids-vraag__ic path { transition: none; }
/* ============================================================================
   HEADER-MENU MOBIEL (.navmenu, alle pagina's — lib/navmenu.mjs). Netjes zoals de filters (Dévin 25-09): de pagina
   eronder staat stil (scroll-lock), het menu scrolt zelf als het niet past (max-height zet navmenu.mjs: tot pagina-marge
   boven de onderrand), zonder zichtbare scrollbalk, en met een fade onderin zolang er nog iets onder staat.
   Op het aanbod blijven de balk en de mobiele teller gewoon sticky tijdens de lock (Dévin 01-10: "als je de header opent dat de listing
   bar fixed wordt uit zijn listing grid trail, dat mag niet"). Eerst sloopte overflow:hidden op body de sticky (body werd een
   scroll-container) en pinden we ze daarom vast met position:fixed: dan verliet de balk de stroom en sprong de hele lijst eronder 88 px
   omhoog (gemeten 01-10, 390 px). Nu klemt html het scrollen (overflow:hidden, schuift door naar het venster) en body gebruikt
   overflow:clip: dat knipt zonder scroll-container te worden, dus sticky blijft werken en er verschuift niets.
   ============================================================================ */
html.is-navmenu-locked { overflow: hidden; }
html.is-navmenu-locked body { overflow: clip; }
@media (max-width: 991px) {
  .navmenu { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
  .navmenu::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .navmenu::after { content: ""; position: sticky; bottom: 0; flex: 0 0 auto; height: 3em; margin-top: -3em; pointer-events: none;
    background: linear-gradient(to top, var(--_colors---swatch--black) 35%, rgba(42, 36, 32, 0)); opacity: 0; transition: opacity .25s; }
  .navmenu.has-more::after { opacity: 1; }
  /* En bovenin, zodra er iets boven de rand staat (has-less, lib/navmenu.mjs; Dévin 26-10: "alle overflow functies moeten dynamische fades krijgen"): dezelfde fade, gespiegeld. */
  .navmenu::before { content: ""; position: sticky; z-index: 3; top: 0; flex: 0 0 auto; height: 3em; margin-bottom: -3em; pointer-events: none;
    background: linear-gradient(to bottom, var(--_colors---swatch--black) 35%, rgba(42, 36, 32, 0)); opacity: 0; transition: opacity .25s; }
  .navmenu.has-less::before { opacity: 1; }
}

/* ============================================================
   GIDS · RAIL
   Knoppen, stand en focusrand voor de rail van vijf panden op /nl/guide/<begrip> (lib/gids-rail.mjs). Alles hangt aan .section_aanbod.is-gids-aanbod:
   de rail op de homepage blijft zoals hij is. De knoppen zijn twee vierkante cellen tegen elkaar, zoals het kruimelpad (64), met een navy contour op het beige podium.
   ============================================================ */
.section_aanbod.is-gids-aanbod .aanbod-track:focus-visible { outline: 2px solid var(--ssn-accent); outline-offset: -2px; }   /* de homepage zet de focusrand uit; hier blijft hij zichtbaar */
/* v5 (Dévin 17-10): de knoppen zijn de vierkantjes van de pandpagina (60, .pand-zoom: omrand, radius 0, .5em ertussen) met papa's chevron-spoor (.pand-pijl),
   en de stand staat er direct naast, links ervan, zoals de teller "1 / 14" op de pandpagina. Alles rechts. */
.gids-rail-ctl { display: flex; align-items: center; justify-content: flex-end; padding: 1.25em 0 1.5em; color: #2a2420; }
@media screen and (min-width: 480px) { .gids-rail-ctl { padding-left: 4.1667%; padding-right: 4.1667%; } }   /* dezelfde inzet als de cellen van de rail (20-aanbod-stage-home) */
.gids-rail-knoppen { display: inline-flex; align-items: center; gap: .5em; }
/* De stand in gewone letters (Dévin 17-10: "de resultaten count moet in normal case"). */
.gids-papier p.gids-rail-stand { margin: 0 .75em 0 0; max-width: none; font-size: .9em; font-variant-numeric: tabular-nums; color: #2a2420; }
.gids-rail-knop { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 3.5em; height: 3.5em; padding: 0; margin: 0;
  border: 1px solid #2a2420; border-radius: 0; background: transparent; color: #2a2420; cursor: pointer; transition: background-color .6s cubic-bezier(.16, 1, .3, 1), opacity .2s; }
.gids-rail-knop.is-vorig .pand-pijl { transform: scaleX(-1); }
/* Geen vulling bij hover (Dévin 18-10, ronde 36: "geen hover fill maar gewoon alleen de schuif animatie"): alleen de chevron schuift. */
@media (min-width: 992px) { .gids-rail-knop:not(.is-uit):hover .button-icon_track { transform: translate(50%, 0); } }
.gids-rail-knop:focus-visible .button-icon_track { transform: translate(50%, 0); }
.gids-rail-knop.is-uit { opacity: .35; cursor: default; }
.gids-rail-knop:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; position: relative; z-index: 1; }
html[data-ssn-motion="reduced"] .gids-rail-knop { transition: none; }
/* Het plus-vak aan het eind op de telefoon (ronde 42, Dévin: "voor mobiel mag dat plusje kleiner en die box mag net als de listing de hele breedte gebruiken"):
   zo breed als een kaart (de homepage houdt zijn 75%, 30-listing-card) en het kruis half zo groot. */
@media screen and (max-width: 767px) {
  .section_aanbod.is-gids-aanbod .aanbod-alle { flex-basis: 100%; border-right: 0; }
  .section_aanbod.is-gids-aanbod .aanbod-alle-icoon svg { height: 8em; }
}
/* ============================================================================
   GIDS-RUBRIEKBALK (Gids v4; spec docs/superpowers/specs/2026-10-12-gids-v4-krant-design.md). lib/gids.mjs (rubriekBalk) zet de vijf
   rubrieken bovenin het beige vlak (97-gids-ingang), op /nl/guide en op elk blad. Dévin 15-10 (ontwerp 5.webp):
   - vijf gelijke cellen met grijze scheidingen van boven tot onder, geen oranje;
   - het cijfer cursief, kleiner dan de naam (.875em) en grijs, gelijk aan het megamenu (72, .gids-mega__nr), Dévin 16-10;
   - bij hover draaien de letters van de naam zoals in elke site-knop: papa's span-draai, gekopieerd van .ssn-consent__naar (94);
   - op de telefoon (≤ 767) scrolt de rij zijwaarts met de fades van de homepage-filters (20-aanbod-stage-home, .aanbod-filters).
     GIDS_FADE_SCRIPT (lib/gids-strook.mjs) zet .is-scrolled en .is-end.
   Alle maten in em of papa's maten, zodat de balk met de letter van de site meeschaalt.
   ============================================================================ */
.gids-rubriekbalk {
  position: sticky; top: var(--gids-balk-top, 0); z-index: 900;
  margin: 0 calc(-1 * var(--gids-vel-x, 0px)) 0;
  background-color: var(--_colors---swatch--black);
  color: var(--_colors---swatch--beige);
}
.gids-rubriekbalk ol {
  display: flex; justify-content: center; gap: 0 var(--_sizes---size--24px);
  list-style: none; margin: 0; padding: 0 var(--gids-vel-x, 0px);
}
.gids-rubriekbalk__nr {
  font-family: var(--_fonts---fonts--paragraph); font-style: italic; font-weight: 400;
  font-size: .875em; line-height: 1; letter-spacing: 0; text-transform: none;
  color: var(--_colors---swatch--grey);
}

/* De span-draai (94, .ssn-consent__naar): papa's script splitst de naam in letters en zet per letter de vertraging inline. */
/* Ronde 42 (Dévin: "de 5 stap titels ... worden soms wat afgesneden door de overflow, fix dit voor alle apparaten"): met regelhoogte 1 viel de staart van een g of j
   buiten het vak dat de draai afknipt. Het vak krijgt .15em boven en onder (met een negatieve marge, zodat de balk niet verschuift) en de draai gaat 1.45em. */
.gids-rubriekbalk__naam[data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; padding: .15em 0; margin: -.15em 0; }
.gids-rubriekbalk__naam[data-button-animate-chars] > span {
  display: inline-block; position: relative; white-space: pre;
  text-shadow: 0 1.45em currentColor;
  transform: translateY(0) rotate(.001deg);
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .gids-rubriekbalk__link:hover .gids-rubriekbalk__naam[data-button-animate-chars] > span { transform: translateY(-1.45em) rotate(.001deg); }
}
.gids-rubriekbalk__link:focus-visible .gids-rubriekbalk__naam[data-button-animate-chars] > span { transform: translateY(-1.45em) rotate(.001deg); }

@media screen and (max-width: 767px) {
  .gids-rubriekbalk ol {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    --gids-fade: 1.6em; --fade-l: 0px; --fade-r: var(--gids-fade);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: --fade-l .25s ease, --fade-r .25s ease;
  }
  .gids-rubriekbalk ol.is-scrolled { --fade-l: var(--gids-fade); }
  .gids-rubriekbalk ol.is-end { --fade-r: 0px; }
  .gids-rubriekbalk ol::-webkit-scrollbar { display: none; }
}

html[data-ssn-motion="reduced"] .gids-rubriekbalk__naam[data-button-animate-chars] > span { transition: none; transform: translateY(0) rotate(.001deg); }
html[data-ssn-motion="reduced"] .gids-rubriekbalk ol { transition: none; }
/* =====================================================================   FOTO-VANGNET (29-09) — vendor/pand/beeld-vangnet.js
   Een foto die niet laadt (of nog onderweg is) toont niet het icoontje van de browser met een stukje alt-tekst, maar de primaire navy van het
   merk met één brede, zachte, iets lichtere gloed die er langzaam overheen trekt: de laadgolf.
   Herkomst: variant A van het voorbeeld van de aanbod-sessie (27-09; docs/superpowers/specs/2026-09-27-aanbod-laadgolf-voorbeeld-A.html op tak
   claude/aanbod-layout-height-bugs-4d371e, commit f90b13bf): 4,5 s per doorloop, lineair, hoek 105°, één golf voor het hele raster.
   Dévin 29-09, na het eerste resultaat: "ik wil een realistische brede gradient zien, dit is een scherp lijntje, dat is niet mooi, en ik vroeg
   absolute navy, de primaire kleur". Daarom is het nu anders dan dat voorbeeld:
   - KLEUR: het vlak is de primaire navy (--_colors---swatch--black, #2a2420, dezelfde als de pagina) en de gloed loopt naar de lichtere navy
     uit het palet (--_colors---swatch--green, #2a2420) met 8 % beige erdoor (--_colors---swatch--beige): meer licht dan de navy alleen.
     Geen nieuwe kleuren, alles uit het palet. Het voorbeeld had eigen tinten (#0F1E32 en #1A2D48).
   - VORM: een gladde klokvorm, sin² (het Hann-venster), over de hele bandbreedte. Het voorbeeld had een driehoek: die heeft een knik in het
     midden en het oog ziet die knik als een scherp lijntje (Mach-band). De klok heeft geen knik en loopt aan beide kanten zacht naar nul.
   - BREEDTE: de band is 1,4 keer zo breed als het raster (b = 140 %, voorheen 62 %) en trekt van buiten het raster naar buiten het raster
     (W + b) in dezelfde 4,5 s, dus zonder dode tijd. Gekozen door Dévin (30-09) na een look-dev op ware helderheid: "c in de zachte band van b,
     dus beige 140 %" (C = de kleur met beige, B = de band van 140 %). Een smallere band met alleen navy (A, 100 %) was de eerste keuze.
   Het script zet op de plek van de foto (.pand-slide, .pand-thumb, .pand-foto) data-beeld:
     laadt → klaar, of stuk (er komt een nieuwe poging) → op (de pogingen zijn op: het vlak blijft, zonder golf, want een golf die
     nooit ophoudt zegt "nog bezig"). Alles hangt aan [data-beeld]: zonder script, of voor een foto die gewoon laadt, verandert er niets.
   ÉÉN GOLF VOOR HET HELE RASTER: alle plekken delen dezelfde fase (het script legt de starttijd van elke animatie op 0 van de klok van de
   pagina) en de band loopt door over de naden. Een vierkantje is een stuk van de strook: zijn band is even breed als voor de hele strook
   (140 % van de strookbreedte) en staat verschoven met de plek van het vierkantje (--golf-van en --golf-naar, één keer gemeten).
   Een carrousel-plek en de uitklap-foto zijn elk hun eigen raster. De stops staan in pixels van de band (u x b, met u van 0 tot 1), niet in
   procenten van het vak: een vak dat hoger is dan breed (de carrousel: 1440 x 900) legt procenten anders neer dan pixels.
   DE SCHUINE BAND WORDT NIET AFGESNEDEN. De band van 105° helt 15°; in een tegel van precies b breed zou hij in een hoog vak linksonder met
   een harde verticale rand worden afgesneden. Daarom loopt de tegel links e = hoogte x tan 15° door (--golf-e) en schuiven de stops e x cos 15°
   op (--golf-o): rechts van de oude tegelrand verandert er niets, links ervan loopt de band gewoon door. De band beweegt met transform (de
   videokaart, geen herschilderen).
   ALLEEN IN BEELD. Dat 'de videokaart' geldt alleen voor een plek die je ziet: de browser laat een animatie op een plek buiten beeld (een slide die
   nog komt, de uitklap zolang hij dicht is) niet op de videokaart draaien en rekent hem elk beeld door op de hoofdlijn (gemeten: 74 van 78
   animaties, op een telefoon 4x trager 3,4 tot 4,7 s hoofdlijn per 6 s). Het script zet daarom data-buiten op wat je niet ziet; de regel
   hieronder haalt daar de animatie weg. Het vlak blijft, alleen de beweging niet.
   Het vlak zit op ::after, want .pand-thumb + .pand-thumb::before is het scheidingslijntje tussen de vierkantjes. De band ligt met
   z-index -1 in een eigen stapel (isolation) achter de foto: een geladen foto dekt hem, een onzichtbare foto laat hem zien.
   De gloed is ondoorzichtig (een mengsel van de twee tinten per stop, geen alfa): geen kleurrand, en het vlak eronder is toch al dezelfde navy.
   Geen color-mix (heel oude browsers): dan valt alleen de gloed weg, het navy vlak blijft.
   De kaart (Dévin 01-10: "voeg die nu ook toe aan de kaart") wacht met dezelfde golf: kaart.js zet data-beeld op het kaartvak zolang de
   basiskaart nog onderweg is (laadt → klaar → weg), en meet zijn golf op dezelfde manier.
   ============================================================================ */
:root { --vangnet-vlak: var(--_colors---swatch--black); --vangnet-piek: color-mix(in srgb, var(--_colors---swatch--green), var(--_colors---swatch--beige) 8%); }
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld] { isolation: isolate; }
/* Het navy vlak is er meteen als de plek gaat wachten (de foto is er dan nog niet, dus er valt niets te faden) en gaat pas weg met een
   overgang, onder de foto die erin vervaagt. De overgang staat dus alleen op 'klaar': ook geen bestaande transition van een plek overschreven. */
/* Dévin 05-10: de foto's van de carrousel krijgen hun fade van beeld-vangnet.js (fadeIn: 140 ms, alleen in beeld); de kaart houdt zijn eigen rustige overgang. */
.kaart[data-beeld="klaar"] { transition: background-color .5s cubic-bezier(.16, 1, .3, 1); }
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart):is([data-beeld="laadt"], [data-beeld="stuk"], [data-beeld="op"]) { background-color: var(--vangnet-vlak); }
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld]::after {
  --golf-o: calc(var(--golf-e, 0px) * .9659);
  content: ""; position: absolute; left: calc(var(--golf-e, 0px) * -1); top: 0; bottom: 0; width: calc(var(--golf-b) + var(--golf-e, 0px)); z-index: -1; pointer-events: none;
  background-image: linear-gradient(105deg,
    var(--vangnet-vlak) 0,
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 2.45%) calc(var(--golf-b) * 0.05 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 9.55%) calc(var(--golf-b) * 0.1 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 20.61%) calc(var(--golf-b) * 0.15 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 34.55%) calc(var(--golf-b) * 0.2 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 50.00%) calc(var(--golf-b) * 0.25 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 65.45%) calc(var(--golf-b) * 0.3 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 79.39%) calc(var(--golf-b) * 0.35 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 90.45%) calc(var(--golf-b) * 0.4 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 97.55%) calc(var(--golf-b) * 0.45 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 100.00%) calc(var(--golf-b) * 0.5 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 97.55%) calc(var(--golf-b) * 0.55 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 90.45%) calc(var(--golf-b) * 0.6 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 79.39%) calc(var(--golf-b) * 0.65 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 65.45%) calc(var(--golf-b) * 0.7 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 50.00%) calc(var(--golf-b) * 0.75 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 34.55%) calc(var(--golf-b) * 0.8 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 20.61%) calc(var(--golf-b) * 0.85 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 9.55%) calc(var(--golf-b) * 0.9 + var(--golf-o)),
    color-mix(in srgb, var(--vangnet-vlak), var(--vangnet-piek) 2.45%) calc(var(--golf-b) * 0.95 + var(--golf-o)),
    var(--vangnet-vlak) calc(var(--golf-b) * 1 + var(--golf-o)));
  transform: translateX(var(--golf-van, -100%));
  animation: vangnet-golf 4.5s linear infinite;
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1);   /* geen will-change: een lopende transform-animatie krijgt vanzelf een eigen laag, en 'klaar' laat er geen achter */
}
/* De eerste foto van de carrousel krijgt 'laadt' al van de pagina zelf, vóór het foto-vangnet (zie renderPand in pand.mjs); tot het script hem opmeet heeft de golf deze maat: een slide is zo breed als
   het scherm. Het script zet daarna zijn eigen maat inline, en die wint. */
.pand-slide[data-beeld] { --golf-b: 140vw; --golf-van: -140vw; --golf-naar: 100vw; --golf-e: 27vh; }
/* Buiten beeld loopt de golf niet (het script zet data-buiten): de browser laat zo'n animatie niet op de videokaart draaien en rekent hem dan
   elk beeld door op de hoofdlijn. Het ontwerp zegt het ook: "is het raster uit beeld, dan hoeft de golf niet te lopen". */
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld][data-buiten]::after { animation: none; }
/* van volledig buiten het raster links (de band begint op -b) tot net buiten het raster rechts (linkerkant op W): het raster is W breed en de band b, dus
   x = t / 4,5 s * (W + b) - b. Net als de gloed zelf begint en eindigt dit op nul, dus de lus heeft geen naad. */
@keyframes vangnet-golf { from { transform: translateX(var(--golf-van, -100%)); } to { transform: translateX(var(--golf-naar, 100%)); } }
/* de foto zelf is er niet (nog niet, of niet meer): onzichtbaar, dus ook geen icoontje van de browser en geen alt-tekst.
   Voor schermlezers blijft hij bestaan (opacity haalt hem niet uit de boom). */
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart):is([data-beeld="laadt"], [data-beeld="stuk"], [data-beeld="op"]) img { opacity: 0; }
/* de pogingen zijn op: het stille vlak blijft, de golf gaat weg */
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld="op"]::after { opacity: 0; animation: none; }
/* de foto is er: hij vervaagt erin, de golf en het vlak vervagen weg */
.kaart[data-beeld="klaar"] img { transition: opacity .5s cubic-bezier(.16, 1, .3, 1); }
:is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld="klaar"]::after { opacity: 0; animation: none; }
/* minder beweging: alleen het stille navy vlak, geen golf */
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] :is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld]::after { animation: none; opacity: 0; transition: none; }
  html[data-ssn-motion="reduced"] :is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld="klaar"] { transition: none; }
  html[data-ssn-motion="reduced"] :is(.pand-slide, .pand-thumb, .pand-foto, .kaart)[data-beeld="klaar"] img { transition: none; }
/* ============================================================
   GIDS · DE PAGINA EN DE BANNER
   De hele uitleg-pagina is beige; header en footer zijn navy zoals op de rest van de site (spec 2026-10-10-gids-lat-design.md §2). De banner is een lage beeldkaart
   onder de header, als eerste sectie (papa's trust_wrapper) met een vlakke donkere laag, het kruimelpad bovenaan en de kop links uitgelijnd onderaan. Geen verloop
   en geen volle schermhoogte. De kop draagt het enige schuine woord van de pagina.
   ============================================================ */
.gids-pagina.gids-papier { border-radius: 0; padding-bottom: 1px; }

/* De banner: onder de header (de header is 4.5em hoog en zweeft erover), met dezelfde zijmarge als de rest. */
.gids-hero { padding-top: 6em; }
.gids-hero .padding-global { padding-top: 0; padding-bottom: 0; }
.gids-hero .trust_inner.is-gids-hero { height: clamp(22em, 40svh, 28em); min-height: 0; border-radius: var(--_layout---border-radius--8px); }   /* de kleine radius (v4 unit 3) */
.gids-hero .trust_bg-overlay { background-color: #2a242066; }
.gids-hero .trust_content.is-gids-hero { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; height: 100%; box-sizing: border-box; padding: 2em 3em 2.25em; }
.gids-hero .gids-kruimel { margin: 0; }
.gids-hero__kop { display: flex; flex-direction: column; row-gap: .75em; align-items: flex-start; max-width: 42em; }
.gids-hero :is(.heading-m, .paragraph-l, .alt-heading) { color: var(--ssn-surface); opacity: 1; margin: 0; }
.gids-hero .heading-m { text-transform: uppercase; }
.gids-hero .paragraph-l { max-width: 32em; }
/* Beige op de foto: hoger dan de navy tekstregel van het papier (66). */
.gids-papier .gids-hero .gids-hero__telling { margin: .25em 0 0; font-size: .95em; line-height: 1.4; color: var(--ssn-surface); max-width: 36em; }
.gids-hero .trust_bg img, .gids-hero .trust_bg .video-frame, .gids-hero .trust_bg .video-cover { width: 100%; height: 100%; object-fit: cover; }
.gids-hero .trust_bg img { object-position: 50% 55%; }
@media (max-width: 767px) {
  .gids-hero { padding-top: 5.5em; }
  .gids-hero .trust_inner.is-gids-hero { height: auto; min-height: 26em; }
  .gids-hero .trust_content.is-gids-hero { padding: 1.25em 1.25em 1.5em; row-gap: 4em; }
  .gids-hero .gids-kruimel__cel { height: 2.75em; padding: 0 1em; font-size: .85em; }
}

/* De naad onder het aanbodpodium van de homepage is navy (hij schuift mee op een navy pagina); op een beige pagina hoort hij er niet. */
.gids-pagina .aanbod-sticky-naad { display: none; }
/* ============================================================================
   GIDS-MEGAMENU (Gids v4; spec docs/superpowers/specs/2026-10-12-gids-v4-krant-design.md). Op elke /nl-pagina (Dévin 17-10: overal hetzelfde):
   build-nl.mjs (megaPlaatsen; gidsKop op de Gids-pagina's) zet #gids-mega in .nav, vóór .navbar-mask, op dezelfde plek als papa's .navmenu-wrapper (het mobiele menu).
   Het script GIDS_MENU_SCRIPT (Gids-pagina's) of GIDS_MEGA_SCRIPT (de rest) in lib/gids-strook.mjs opent en sluit hem (hover met een vaste zone, focus, pijl omlaag, Escape).
   Dévin 15-10 (prompt 23): zo schoon als het mobiele menu.
   - Het vlak is een kopie van papa's .navmenu: zwart, rand rondom (de bovenrand verdwijnt achter de navbar), onderhoeken uit de radius-var.
   - Het knipraam begint één radius boven de onderrand van de navbar, net als papa's menu (op 991 gemeten: 10 px erachter). De navbar staat later
     in de html en tekent er dus overheen; zo vult het paneel de ronde hoeken van de header en blijft de onderrand van de navbar zichtbaar.
   - Links en rechts erft het knipraam de padding van .nav: het volgt de navbar, ook tijdens het klein worden (.7s .625/.05/0/1).
   - De navbar wordt dicht zwart zolang het menu open is en gaat bij sluiten met het paneel mee terug (.8s, ronde 40).
   - Inhoud minimaal: per tak het cijfer (grijs, klein) boven de korte naam, daaronder de bladen als papa's footer-nav (zijn hover-dim, zijn bolletje
     voor het blad waar je bent) op de maat van de footer-links. Geen lijnen tussen de kolommen (Dévin 17-10).
   Onder 992px bestaat het niet; het hamburgermenu blijft papa's eigen menu (Dévin 12-10).
   ============================================================================ */
.gids-mega {
  position: absolute; top: calc(100% - var(--_layout---border-radius--8px)); left: 0; right: 0;
  padding-left: inherit; padding-right: inherit;
  overflow: hidden; pointer-events: none;
}
.gids-mega__paneel {
  padding-top: var(--_layout---border-radius--8px);
  background-color: var(--_colors---swatch--black);
  border: 1px solid var(--_colors---swatch--grey);
  border-bottom-left-radius: var(--_layout---border-radius--8px); border-bottom-right-radius: var(--_layout---border-radius--8px);
  color: var(--_colors---swatch--beige);
  transform: translateY(-100%); visibility: hidden;
  transition: transform .8s cubic-bezier(.625, .05, 0, 1) .1s, visibility 0s .9s,
    border-color .7s cubic-bezier(.625, .05, 0, 1), border-radius .7s cubic-bezier(.625, .05, 0, 1);
}
.gids-mega.is-open .gids-mega__paneel {
  transform: translateY(0); visibility: visible; pointer-events: auto;
  transition: transform .8s cubic-bezier(.625, .05, 0, 1) .1s,
    border-color .7s cubic-bezier(.625, .05, 0, 1), border-radius .7s cubic-bezier(.625, .05, 0, 1);
}
/* De kleine header (papa: .nav en .navbar is-nav-small, zijranden doorzichtig, radius 0): het paneel doet hetzelfde, open of dicht. */
.nav.is-nav-small .gids-mega__paneel {
  border-left-color: transparent; border-right-color: transparent;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* De navbar wordt dicht zwart zolang het menu open is (papa's mobiele menu: .navbar-bg van black-60 naar black). Openen gaat snel (200 ms); terug gaat hij
   met het paneel mee (Dévin 18-10, ronde 40: "de header fill moet een langere ease hebben om terug te veranderen net als mobiel"): .8s, de curve van het paneel,
   .1s later, zodat de kleur pas weggaat als het paneel omhoog schuift. Alleen vanaf 992px, waar het paneel bestaat. */
@media screen and (min-width: 992px) {
  .nav:has(.gids-mega) .navbar-bg { transition: background-color .8s cubic-bezier(.625, .05, 0, 1) .1s; }
  .nav.is-mega-open .navbar-bg { transition: background-color .2s ease; }
  /* GIDS houdt zijn hoverstand zolang het menu open is (Dévin 27-10: "de GIDS nav moet de hover staat houden zolang de mega nav open is"): dezelfde regels als papa's
     .is-navlink:hover (rand, vulling), nu ook voor aria-expanded. Geen eigen stand erbij verzonnen; sluit het menu, dan gaat de knop terug naar zijn gewone stand. */
}
/* Precies papa's hover van een navlink (inline stijl + shared: rand rondom, vulling, de letters rollen omhoog, het binnenvlak, de globe); de "alleen onderrand" van papa geldt
   pas onder 992 en hoort hier niet (ronde 63, tweede keer goed). */
.btn-animate-chars.is-navlink[aria-expanded="true"] { border-color: var(--_colors---swatch--grey); background-color: #ebe3d81a; }
.btn-animate-chars.is-navlink[aria-expanded="true"] [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(.001deg); }
.btn-animate-chars.is-navlink[aria-expanded="true"] .btn-animate-chars__bg { inset: .125em; }
.btn-animate-chars.is-navlink[aria-expanded="true"] .navlink_globe-item { transform: translate(0px, 35%); }
body[data-thema="licht"] .nav .is-navlink[aria-expanded="true"] { background-color: #DED3C514; }
.nav.is-mega-open .navbar-bg { background-color: var(--_colors---swatch--black); }

.gids-mega__raster {
  /* Zes kolommen sinds 26-10 (Begin met een plan, dan I-V): het aantal volgt de kolommen, elk even breed. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
}
.gids-mega__kolom {
  position: relative; display: flex; flex-direction: column;
  padding: 2.25em 1.5em 2.5em;
}
/* De kop van een deel (Dévin 17-10, ronde 32: "I EIGENDOM ... mee cursief en gedimd maken achter de romeinse cijfers"): het cijfer en de naam op één regel, allebei
   cursief, grijs en klein, in de letter van het cijfer. De bladen eronder zijn wat telt. */
/* Ronde 36 (Dévin 18-10: "niet border kleur maar de gedimde versie van beige ... niet klikbaar"): geen link, in gedimd beige. Het cijfer een tree stiller dan de naam,
   allebei cursief: zo is de kop een zachte aankondiging boven de grote rechte links, en draagt de stijl (cursief, klein, gedimd) de hiërarchie, niet een lijn of
   een andere kleur (zijn bijlage 6). */
.gids-mega__kop {
  display: flex; flex-direction: row; align-items: center; gap: .7em; margin: 0; min-height: 2.08em;
  font-size: 1.1667em; font-weight: 400; letter-spacing: 0; line-height: 1; text-transform: none; cursor: default;
}
/* De tijdlijn (Dévin 26-10: "moet het een horizontale tijdlijn worden met de cijfers in de bolletjes met daarachter de titels minimaal ... opzich gaat het om design
   en minimalisme"): de knoop van de bladen (73: .gids-knoop, zoals de stappen van II op de ingang, 97: .gids-knoop.is-stap) met het Romeinse cijfer, in de stroom van
   de kop, en één haarlijn van knoop tot knoop. De naam staat recht ("de delen titels in de mega uit cursief"), het cijfer blijft cursief zoals in elke knoop.
   Het plan heeft geen knoop: I tot V zijn de delen van de Gids; het plan is de deur ervoor. Zijn kop heeft de hoogte van een knoop, zodat de bladen op één lijn staan.
   De lijn loopt van het midden van een knoop tot het midden van de volgende: een kolom breed, vanaf de knoop (padding 1.5em plus de straal), op de hoogte van het midden
   (padding 2.25em plus de straal; de knoop is 2.6 x .8em in de kop van 1.1667em, dus de straal is 1.213em in de kolom). Waar elk stuk loopt: hieronder bij ::before. */
.gids-mega .gids-knoop.is-mega {
  --knoop-rand: color-mix(in srgb, var(--_colors---swatch--beige) 32%, transparent); --knoop-vlak: var(--_colors---swatch--black);
  position: relative; top: auto; left: auto; margin: 0; flex: none; width: 2.6em; height: 2.6em;
  color: color-mix(in srgb, var(--_colors---swatch--beige) 55%, transparent);
}
/* Drie klassen: 73 (.gids-knoop:not(.is-punt)::before, de teller 01-05) komt later in de cascade en zou anders winnen. */
/* Dévin 26-10: "bolletje nu niet van de bovenkant maar de zijkant!" De lijn komt van links binnen, dus de ring begint links (270deg) en sluit rechts, waar de lijn verder gaat. */
.gids-mega .gids-knoop.is-mega::after {
  background: conic-gradient(from 270deg, var(--knoop-rand) 0deg calc(var(--k) * 180deg), transparent calc(var(--k) * 180deg) calc(360deg - var(--k) * 180deg), var(--knoop-rand) calc(360deg - var(--k) * 180deg));
}
.gids-mega .gids-knoop.is-mega::before { counter-increment: none; content: attr(data-nr); }
/* De lijn loopt door de hele rij (Dévin 26-10: "lijntje moet aansluiten op locatie net als bij de andere stappen, en lijntje moet beginnen met een consistente gab
   net als de rest achter '... je plan'"): achter "Begin met een plan" begint hij na dezelfde ruimte als achter elke naam, en na V loopt hij nog tot Locatie, zoals hij
   bij I tot IV de knoop met zijn naam verbindt. Elke kolom tekent zijn stuk: van het midden van zijn knoop (bij het plan: het begin van de kolom) tot het midden van de
   volgende knoop; bij V tot onder de naam. De naam en de knoop hebben het vlak als achtergrond, dus de lijn loopt erachter langs. */
.gids-mega__kolom::before {
  content: ""; position: absolute; z-index: 0; top: calc(2.25em + 1.213em); left: calc(1.5em + 1.213em); width: 100%; height: 1px;
  background-color: color-mix(in srgb, var(--_colors---swatch--beige) 18%, transparent);
  transform-origin: left center;
}
.gids-mega__kolom.is-plan::before { left: 1.5em; width: calc(100% + 1.213em); }
.gids-mega__kolom:last-child::before { width: 2.5em; }
.gids-mega__kop > .gids-knoop, .gids-mega__naam { position: relative; z-index: 1; }

/* Binnenkomen (Dévin 26-10: "de inkomende animatie van de tijdlijn is natuurlijk van links naar rechts zoals op de pagina's om het bolletje heen infade inhoud. en de
   columns eronder moeten dan telkens invallen per regel als er weer een deel titel staat ... redelijk snel en passend na (of net tijdens) de uitklap animatie").
   Daarna: "de bolletjes moeten beginnen als de tijdlijn hem aanraakt en klaarzijn als hij eruit gaat ... misschien een iets rustigere cubic bezier, maar maak het uniek en sterk!"
   De lijn rijdt als een trein langs haltes: per kolom (--i, 0 is het plan) één stuk van knoop tot knoop in --stap, met een sterke in-uit-curve (--rit),
   dus hij remt af naar elke knoop en trekt weer op. Bij die curve raakt de lijn de ring op 76,6% van zijn stuk en verlaat hij hem op 23,4% van het volgende
   (ring 29 px op een stuk van 234 px op 1440; nagemeten per frame: de ring start op het frame dat de lijn hem raakt en is klaar op het frame dat de lijn eruit gaat). Precies in dat venster tekent de ring zich rond, vanaf de zijkant:
   - de ring start op --t min .234 stap en duurt .467 stap, met een curve (--ring) die de lijn volgt: snel aan de rand, rustig in het midden, waar de lijn het traagst is;
   - het cijfer en de naam komen als de ring dicht is; de bladen eronder vallen daarna per regel in (--r);
   - het laatste stuk (na V) heeft geen knoop meer om naar af te remmen: het trekt op en loopt uit (ease-out), zo lang dat het de ring van V ook op .234 stap verlaat.
   Sinds 26-10 (later die dag) één beweging: zie hieronder en GIDS_MEGA_SCRIPT (meet). --gids-mk en --gids-mn zijn geregistreerd, anders kan een eigen eigenschap niet vloeiend veranderen; de knoop leest ze als --k en --kn. */
@property --gids-mk { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --gids-mn { syntax: '<number>'; inherits: false; initial-value: 1; }
.gids-mega { --stap: .25s; --start: .3s; --rit: cubic-bezier(.35, .3, .65, .7); --ring: cubic-bezier(.15, .8, .85, .2); }
.gids-mega__kolom { --t: calc(var(--start) + var(--i, 0) * var(--stap)); }
.gids-mega .gids-knoop.is-mega { --k: var(--gids-mk); --kn: var(--gids-mn); --gids-mk: 0; --gids-mn: 0; transition: --gids-mk 0s .9s, --gids-mn 0s .9s; }
.gids-mega__kolom::before { transform: scaleX(0); transition: transform 0s .9s; }
.gids-mega .gids-bladen > * > div { opacity: 0; transition: opacity 0s .9s, transform 0s .9s; }
.gids-mega .gids-bladen > * > div { transform: translateY(-.35em); }   /* de tekst valt in; de link zelf (zijn dim, zijn bolletje) blijft staan */
/* Dicht (Dévin 26-10: "als je hem sluit moet het gewoon uitfaden en verborgen worden door de overflow hidden"): de inhoud fadet uit terwijl het paneel omhoog achter de
   rand schuift; de lijn, de ringen en de tekst gaan pas terug naar het begin als het paneel weg is (.9s, de visibility van het paneel). */
.gids-mega__raster { opacity: 0; transition: opacity .3s ease; }
.gids-mega.is-open .gids-mega__raster { opacity: 1; transition: opacity 0s; }
/* Open: de tijden komen uit het script (meet); zonder script de oude treinstand per kolom. */
.gids-mega.is-open .gids-knoop.is-mega { --gids-mk: 1; --gids-mn: 1; transition: --gids-mk var(--rd, calc(var(--stap) * .467)) var(--rrit, var(--ring)) var(--rt, calc(var(--t) - var(--stap) * .234)), --gids-mn .3s ease var(--nt, calc(var(--t) + var(--stap) * .2)); }
.gids-mega.is-open .gids-mega__kolom::before { transform: scaleX(1); transition: transform var(--ld, var(--stap)) var(--lrit, var(--rit)) var(--lt, var(--t)); }
.gids-mega.is-open .gids-bladen > * > div { opacity: 1; transform: translateY(0); transition: opacity .4s ease calc(var(--nt, var(--t)) + .06s + var(--r, 0) * .045s), transform .45s cubic-bezier(.65, 0, .35, 1) calc(var(--nt, var(--t)) + .06s + var(--r, 0) * .045s); }
.gids-mega .gids-bladen > :nth-child(2) { --r: 1; } .gids-mega .gids-bladen > :nth-child(3) { --r: 2; } .gids-mega .gids-bladen > :nth-child(4) { --r: 3; }
.gids-mega .gids-bladen > :nth-child(5) { --r: 4; } .gids-mega .gids-bladen > :nth-child(6) { --r: 5; }
.gids-mega__naam { font-family: var(--_fonts---fonts--paragraph); font-size: .875em; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
  padding-right: .7em; background-color: var(--_colors---swatch--black); --naam-kleur: color-mix(in srgb, var(--_colors---swatch--beige) 72%, transparent); }   /* het vlak achter de naam houdt de lijn op een vaste afstand */
/* Het vlak staat er vóór de lijn (Dévin 27-10: "hij gaat eerst door de titel en pas dan komt de navy spacing"): alleen de letters komen later, door hun kleur, niet door
   de dekking van het hele vak, dus de lijn loopt nooit door de naam. */
.gids-mega__naam { color: transparent; transition: color 0s .9s; }
.gids-mega.is-open .gids-mega__naam { color: var(--naam-kleur); transition: color .35s ease var(--nt, calc(var(--t) + var(--stap) * .2)); }
/* De bladen: papa's footer-nav (lib/gids.mjs bladLinks), zonder lijn erboven. Hover-dim (hover-spotlight, papa's script) en het bolletje (w--current)
   komen van papa. De hover blijft beige: papa zet oranje, en op het huidige blad body-text.
   De maat is 1.75em: 70% van .footer-link (2.5em, 30 px op 1440), dus ietsje kleiner (Dévin 17-10). 2em (80%) is gemeten en past niet: het ene woord
   Belastingvoordelen kan niet afbreken en is op 2em 264 px breed in een kolom van 244 px (24 px lettergrootte op 1440), op 1.75em 231 px. Een lange naam (Onderhoud en vaste kosten) breekt net als in de
   footer over twee regels, gebalanceerd en nooit midden in een woord. Eén link blijft één blok: line-height 1.1 en geen minimumhoogte, de rijafstand zit in de gap.
   Het bolletje van w--current staat op de eerste regel (anders zou het tussen twee regels zweven). 97 zet .gids-bladen .footer-link op 1.5em; drie klassen winnen daarvan. */
/* Geen gat tussen de bladen (Dévin 26-10: "in de footer nav kan je met je muis van de ene naar de andere zonder gab ... zorg dat de items geen gab hebben maar dat
   opvullen met hun eigen hoogte"): de ruimte van de oude gap (.75em) zit nu als padding in elke link, half boven en half onder (.214em in de letter van de link,
   1.75em), en de bovenmarge van de lijst krimpt met die halve ruimte. Zo staat alles op dezelfde plek en blijft de hover heel tussen twee bladen. */
.gids-mega .gids-bladen { margin-top: 1.125em; border-top: 0; padding-top: 0; gap: 0; }
.gids-mega .gids-bladen .footer-link { font-size: 1.75em; line-height: 1.1; min-height: 0; padding-top: .214em; padding-bottom: .214em; align-items: flex-start; text-align: left; hyphens: none; overflow-wrap: normal; }
.gids-mega .gids-bladen .footer-link > div { text-wrap: balance; }
/* Een blad zonder inhoud (ronde 53): gedimd en niet aan te klikken, ook niet bij hover van de lijst. */
.gids-mega .gids-bladen .footer-link.is-volgt { opacity: .4; pointer-events: none; cursor: default; }
/* Het bolletje van het huidige blad komt als een lampje (Dévin 27-10: "waarom is het oranje bolletje er al voordat alles er is ... de titel normale positie, daarna opschuift
   en ruimte maakt voor het bolletje om van 0 naar normaal te schalen"): papa's achtergrondbolletje en zijn vaste inspringing gaan uit; de titel valt in op de plek van alle
   andere (--d0 = het eind van het invallen), schuift dan op met papa's curve, en het bolletje gaat aan op de vrijgekomen plek: van 0, zonder gloed: het bolletje blijft zoals papa het tekent. */
.gids-mega .gids-bladen .footer-link.w--current { --d0: calc(var(--nt, var(--t)) + .06s + var(--r, 0) * .045s + .45s); position: relative; background-image: none;
  padding-left: 0; transition: padding .55s cubic-bezier(.625, .05, 0, 1) 0s, color .4s; }
.gids-mega .gids-bladen .footer-link.w--current::before { content: ""; position: absolute; left: 0; top: .514em; width: .5em; height: .5em; background: url(/images/stip.svg) no-repeat 0 0 / 100% 100%;
  transform: scale(0); opacity: 0; transform-origin: center; pointer-events: none; }
.gids-mega.is-open .gids-bladen .footer-link.w--current, .gids-mega.is-open .gids-bladen .footer-link.w--current:hover { padding-left: .75em; transition: padding .55s cubic-bezier(.625, .05, 0, 1) var(--d0), color .4s; }
.gids-mega.is-open .gids-bladen .footer-link.w--current::before { animation: gids-lamp .6s cubic-bezier(.34, 1.3, .64, 1) calc(var(--d0) + .3s) both; }
@keyframes gids-lamp { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.gids-mega .gids-bladen .footer-link:hover, .gids-mega .gids-bladen .footer-link.w--current:hover { color: var(--_colors---swatch--beige); }

@media screen and (max-width: 991px) {
  .gids-mega { display: none; }
}

html[data-ssn-motion="reduced"] .gids-mega__paneel, html[data-ssn-motion="reduced"] .gids-mega__kolom,
html[data-ssn-motion="reduced"] .gids-mega.is-open .gids-mega__paneel, html[data-ssn-motion="reduced"] .gids-mega.is-open .gids-mega__kolom,
html[data-ssn-motion="reduced"] .nav:has(.gids-mega) .navbar-bg,
html[data-ssn-motion="reduced"] :is(.gids-mega, .gids-mega.is-open) :is(.gids-knoop.is-mega, .gids-mega__naam, .gids-bladen > * > div),
html[data-ssn-motion="reduced"] :is(.gids-mega, .gids-mega.is-open) .gids-mega__kolom::before { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .gids-mega__paneel, .gids-mega__kolom, .gids-mega.is-open .gids-mega__paneel, .gids-mega.is-open .gids-mega__kolom,
  .nav:has(.gids-mega) .navbar-bg { transition: none; }
  :is(.gids-mega, .gids-mega.is-open) :is(.gids-knoop.is-mega, .gids-mega__naam, .gids-bladen > * > div) { transition: none; }
  :is(.gids-mega, .gids-mega.is-open) .gids-mega__kolom::before { transition: none; }
}
html[data-ssn-motion="reduced"] .gids-mega.is-open .gids-bladen .footer-link.w--current { transition: none; }
html[data-ssn-motion="reduced"] .gids-mega.is-open .gids-bladen .footer-link.w--current::before { animation: none; transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gids-mega.is-open .gids-bladen .footer-link.w--current { transition: none; }
  .gids-mega.is-open .gids-bladen .footer-link.w--current::before { animation: none; transform: scale(1); opacity: 1; }
}
/* --- DE GIDS IN HET HAMBURGERMENU (Dévin 26-10; lib/gids.mjs gidsMenuMobielHtml, script GIDS_MM_SCRIPT in lib/gids-strook.mjs) ---
   "Lees de gids" blijft de link naar /nl/guide. Rechts ernaast een vak over de hele hoogte van de rij, met de haarlijn van de header-cellen ervoor (10-navbar:
   .navbar-item.is-wapp, 1px grey), de chevron in het midden: "of moeten we gewoon zon groter vak van maken ... niet zon klein boxje, dat is misschien nog profecioneler".
   Het vak is het klikvlak. Open: de chevron draait naar boven en het vak krijgt het gedimde beige van de referentie-knop (30: #d4c6b912).
   Open is .navmenu.is-gids: het paneel groeit onder de Gids-rij, het menu scrolt tot de rij bovenaan staat, en het paneel scrolt zelf. De tijdlijn loopt "strak langs de linkerkant": één lijn door de knopen, de namen ernaast, de
   bladen eronder op de lijn van de naam. Alles in em, uit tokens en bestaande stukken: de knoop van 73 met het cijfer zoals in het megamenu (72), de bladen
   zijn papa's footer-nav (bladLinks). --- */
@property --mm-ft { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mm-fb { syntax: '<length>'; inherits: false; initial-value: 0px; }
.gids-mm__knop, .gids-mm { display: none; }
@media screen and (max-width: 991px) {
  /* Het vak ligt over de rechterkant van de link (absoluut), zodat "Lees de gids" net als de andere links over de hele breedte gecentreerd blijft. */
  .gids-mm__rij { position: relative; }
  .gids-mm__knop { -webkit-appearance: none; appearance: none; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 6em; margin: 0; padding: 0;
    border: 0; border-left: 1px solid var(--_colors---swatch--grey); border-radius: 0; background-color: transparent; color: var(--ssn-surface); font: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .6s cubic-bezier(.16, 1, .3, 1); }
  .gids-mm__knop:focus-visible { outline: 2px solid var(--ssn-surface); outline-offset: -.3em; }
  /* Even breed als de cel met het kruis erboven (6em, papa's .navbar_col.is-right op de telefoon): de haarlijn van de header loopt recht door in het vak. Het verschil
     zit in de stand, niet in de maat: open krijgt het vak het gedimde beige. */
  .gids-mm__knop[aria-expanded="true"] { background-color: #d4c6b912; }
  /* Open krijgt de hele Gids-rij een bovenlijn (Dévin 26-10: "alleen het chevron blokje moet wel een bovenlijn hebben", daarna "geef gewoon de hele gids ook bovenlijn"),
     want de link erboven, met zijn onderlijn, is dan weggeklapt. Een losse lijn die infadet, zodat er dicht niets verschuift. */
  .gids-mm__rij::before { content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 1px; background-color: var(--_colors---swatch--grey); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  .navmenu.is-gids .gids-mm__rij::before { opacity: 1; transition: opacity .4s ease .35s; }
  .gids-mm__pijl { display: block; width: .55em; transform: rotate(90deg); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .gids-mm__pijl > svg { display: block; width: 100%; height: auto; }
  .gids-mm__knop[aria-expanded="true"] .gids-mm__pijl { transform: rotate(-90deg); }

  /* Van menu naar Gids (Dévin 26-10: "de animatie van lees de gids naar de uitklap moet gewoon heel vast zijn, het enige wat echt gebeurt is dat er onder de gids een
     container vak ontstaat en in de hoogte groeit ... het zit alleen verborgen achter de overflow"): het paneel groeit (het script zet zijn hoogte, van 0 tot de ruimte
     onder de rij) en duwt Contact en de knoppen omlaag; het menu scrolt mee tot de rij bovenaan staat. Er klapt niets weg. Open scrolt alleen het paneel: het menu
     staat stil (overflow hidden; het script scrolt het wel), en zijn eigen fades wijken voor die van het paneel. */
  /* Contact opnemen krijgt zijn eigen bovenlijn, die dicht precies achter de onderlijn van de Gids-rij valt (-1px, dus er verschuift niets) en open onder het paneel verschijnt. */
  .gids-mm + .is-navlink { border-top: 1px solid var(--_colors---swatch--grey); margin-top: -1px; }
  /* De rij landt net onder de header, en de onderrand van de header (met zijn radius) valt over de bovenste .7em. Open krijgt de Gids-rij net zoveel extra bovenruimte, op de
     beweging van het uitklappen, zodat de tekst weer in het midden tussen de lijnen staat. */
  .gids-mm__rij > .is-navlink { transition: padding-top .8s cubic-bezier(.65, 0, .35, 1); }
  .navmenu.is-gids .gids-mm__rij > .is-navlink { padding-top: 2.2em; }
  /* Het chevron-vak volgt: zijn midden zakt mee, anders staat het pijltje hoger dan de tekst. */
  .gids-mm__knop { transition: background-color .6s cubic-bezier(.16, 1, .3, 1), padding-top .8s cubic-bezier(.65, 0, .35, 1); }
  .navmenu.is-gids .gids-mm__knop { padding-top: .4em; }
  /* Sluit het menu, dan zet het script de Gids pas terug als het echt dicht is, zonder één beweging. */
  .navmenu.is-terug :is(.gids-mm, .gids-mm__rij), .navmenu.is-terug :is(.gids-mm, .gids-mm__rij) *, .navmenu.is-terug .gids-mm__rij::before { transition: none; }
  .navmenu.is-gids { overflow: hidden; }
  .navmenu.is-gids::before, .navmenu.is-gids::after, .navmenu.is-mm-rit::before, .navmenu.is-mm-rit::after { display: none; }
  .navmenu.is-mm-rit { overflow: hidden; }   /* tijdens open en dicht: geen fades over de rij, geen eigen scroll */
  .gids-mm { display: block; height: 0; overflow: hidden; }
  .navmenu.is-gids .gids-mm { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  /* De fades van het paneel: een masker dat boven verschijnt zodra er iets boven de rand staat (is-boven) en onder zolang er nog iets komt (is-onder), uit het script.
     Een masker en geen vlak erover, zodat de lijn en de tekst echt vervagen; --mm-fb en --mm-ft zijn geregistreerd, dus de rand groeit en krimpt vloeiend. */
  .gids-mm { --mm-ft: 0em; --mm-fb: 0em; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--mm-ft), #000 calc(100% - var(--mm-fb)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--mm-ft), #000 calc(100% - var(--mm-fb)), transparent); transition: --mm-ft .3s ease, --mm-fb .3s ease; }
  .gids-mm.is-boven { --mm-ft: 3em; }
  .gids-mm.is-onder { --mm-fb: 4em; }
  .gids-mm::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* De tijdlijn: --kd is de knoop; de lijn loopt door het midden van de knopen, van onder het label van het plan tot onder de laatste regel van V. */
  .gids-mm__lijst { --kd: 2.2em; --kg: .8em; --zij: var(--_layout---padding-global--page-padding); position: relative; padding: 1.75em var(--zij) 2.5em; }   /* de marge van Mijn dossier eronder */
  .gids-mm__deel { position: relative; }
  .gids-mm__deel + .gids-mm__deel { margin-top: 1.5em; }
  .gids-mm__kop { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--kg); min-height: var(--kd); margin: 0; }
  .gids-mm__lijn { position: absolute; z-index: 0; top: calc(1.75em + var(--kd) + .35em); bottom: 2.5em; left: calc(var(--zij) + var(--kd) / 2 - .5px); width: 1px;
    background-color: color-mix(in srgb, var(--_colors---swatch--beige) 18%, transparent); transform-origin: center top; }
  .gids-mm .gids-knoop.is-mega {
    --knoop-rand: color-mix(in srgb, var(--_colors---swatch--beige) 32%, transparent); --knoop-vlak: var(--_colors---swatch--black);
    position: relative; top: auto; left: auto; margin: 0; flex: none; width: calc(var(--kd) / .8); height: calc(var(--kd) / .8);   /* de knoop staat op .8em (73): zo is hij --kd in de maat van de lijst, en loopt de lijn door zijn midden */
    color: color-mix(in srgb, var(--_colors---swatch--beige) 55%, transparent);
  }
  .gids-mm .gids-knoop.is-mega::before { counter-increment: none; content: attr(data-nr); }
  .gids-mm__naam { font-family: var(--_fonts---fonts--paragraph); font-size: .875em; font-weight: 400; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--_colors---swatch--beige) 72%, transparent); }
  .gids-mm .gids-bladen { position: relative; z-index: 1; display: flex; flex-direction: column; margin: .35em 0 0; padding: 0 0 0 calc(var(--kd) + var(--kg)); border-top: 0; gap: 0; }
  .gids-mm .gids-bladen .footer-link { font-size: 1.5em; line-height: 1.1; min-height: 0; padding-top: .2em; padding-bottom: .2em; align-items: flex-start; text-align: left; }
  .gids-mm .gids-bladen .footer-link.is-volgt { opacity: .4; pointer-events: none; cursor: default; }
  /* Het bolletje van het huidige blad gaat aan als een lampje (Dévin 27-10, ook op de telefoon; zoals het megamenu, 72-gids-megamenu): de titel valt in op de plek van alle
     andere (--bt, het begin van het invallen; --d0 het eind), schuift dan op en het bolletje schaalt van 0 naar 1, zonder gloed. Keyframes gids-lamp: 72-gids-megamenu. */
  .gids-mm .gids-bladen .footer-link.w--current { --d0: calc(var(--bt, .3s) + .45s); position: relative; background-image: none; padding-left: 0; transition: padding .55s cubic-bezier(.625, .05, 0, 1) 0s, color .4s; }
  .gids-mm .gids-bladen .footer-link.w--current::before { content: ""; position: absolute; left: 0; top: .5em; width: .5em; height: .5em; background: url(/images/stip.svg) no-repeat 0 0 / 100% 100%; transform: scale(0); opacity: 0; transform-origin: center; pointer-events: none; }
  .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current, .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current:hover { padding-left: .75em; transition: padding .55s cubic-bezier(.625, .05, 0, 1) var(--d0), color .4s; }
  .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current::before { animation: gids-lamp .6s cubic-bezier(.34, 1.3, .64, 1) calc(var(--d0) + .3s) both; }

  /* Binnenkomen: de lijn tekent zich van boven naar beneden en remt af bij elke knoop (--l0, --ld, --lrit: een linear()-curve uit het script); het script rekent per knoop uit wanneer de lijn hem raakt en verlaat (--rt, --rd), wanneer
     de naam komt (--nt) en wanneer de lijn langs elke regel komt (--bt). De ring begint bovenaan (73: conic-gradient vanaf 0deg), waar de lijn binnenkomt, en de
     curve (.15, .8, .85, .2) volgt een lijn die naar het midden van de knoop afremt en weer optrekt, zoals in het megamenu. Dicht gaat alles in .2s tegelijk weg. */
  .gids-mm .gids-knoop.is-mega { --k: var(--gids-mk); --kn: var(--gids-mn); --gids-mk: 0; --gids-mn: 0; transition: --gids-mk .2s ease, --gids-mn .2s ease; }
  .gids-mm__lijn { transform: scaleY(0); transition: transform .2s ease; }
  .gids-mm__naam, .gids-mm .gids-bladen > * > div { opacity: 0; transition: opacity .2s ease, transform .2s ease; }
  .gids-mm .gids-bladen > * > div { transform: translateY(-.35em); }
  .navmenu.is-gids .gids-mm__lijn { transform: scaleY(1); transition: transform var(--ld, .9s) var(--lrit, cubic-bezier(.65, 0, .35, 1)) var(--l0, .3s); }
  .navmenu.is-gids .gids-mm .gids-knoop.is-mega { --gids-mk: 1; --gids-mn: 1; transition: --gids-mk var(--rd, .1s) cubic-bezier(.15, .8, .85, .2) var(--rt, .3s), --gids-mn .3s ease var(--nt, .3s); }
  .navmenu.is-gids .gids-mm__naam { opacity: 1; transition: opacity .35s ease var(--nt, .3s); }
  .navmenu.is-gids .gids-mm .gids-bladen > * > div { opacity: 1; transform: translateY(0); transition: opacity .4s ease var(--bt, .3s), transform .45s cubic-bezier(.625, .05, 0, 1) var(--bt, .3s); }
}
html[data-ssn-motion="reduced"] .gids-mm__rij > .is-navlink, html[data-ssn-motion="reduced"] .gids-mm__knop, html[data-ssn-motion="reduced"] .gids-mm__pijl,
html[data-ssn-motion="reduced"] :is(.navmenu, .navmenu.is-gids) :is(.gids-mm .gids-knoop.is-mega, .gids-mm__naam, .gids-mm .gids-bladen > * > div),
html[data-ssn-motion="reduced"] :is(.navmenu, .navmenu.is-gids) .gids-mm__lijn { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .gids-mm__rij > .is-navlink, .gids-mm__knop, .gids-mm__pijl,
  :is(.navmenu, .navmenu.is-gids) :is(.gids-mm .gids-knoop.is-mega, .gids-mm__naam, .gids-mm .gids-bladen > * > div),
  :is(.navmenu, .navmenu.is-gids) .gids-mm__lijn { transition: none; }
}
html[data-ssn-motion="reduced"] .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current { transition: none; }
html[data-ssn-motion="reduced"] .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current::before { animation: none; transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current { transition: none; }
  .navmenu.is-gids .gids-mm .gids-bladen .footer-link.w--current::before { animation: none; transform: scale(1); opacity: 1; }
}
/* ============================================================================
   GIDS-BLAD: DE KRANT (unit 4b; blokkenplan van 16-10, akkoord Dévin; spec docs/superpowers/specs/2026-10-12-gids-v4-krant-design.md, mini-spec 4b).
   lib/gids.mjs (gidsPaginaBlokken, ritme) zet onder de kop van het vlak:
   .gids-papier > .gids-krant (de vijf hoofdstukken, met .gids-as: één middenlijn) > rail (met .gids-vloer boven de filterrij) > vragen > slot.

   HET RASTER: twaalf kolommen; de middenlijn valt in de goot tussen kolom 6 en 7. Elk hoofdstuk heeft een eigen indeling (.gids-vak met .is-kop,
   .is-tekst, .is-beeld, ...), nooit links en rechts gelijk. Twee brede banden (.gids-band: de drie rechten, de tijdbalk) lopen over de volle breedte
   van het vlak, met een lijn boven en onder, net als de dikke lijnen in de kop.

   DE REGEL VAN DE LIJN (Dévin 16-10): elk stuk middenlijn begint bij een knoop of sluit aan op een element, nooit een los eind. Daarom liggen de banden
   en de foto boven de lijn (z-index 3, in de kleur van het vlak): de lijn stopt op de bovenlijn of de bovenrand en gaat eronder verder. Tussenlijnen
   (.gids-tak) komen uit een knoop of uit de middenlijn, nooit los.

   LETTER (een krant): IvyPresto (--_fonts---fonts--eyebrow, 400 rechtop en 300 cursief) voor de koppen, de beginletter van de eerste alinea, de termen,
   het citaat, de onderschriften en de grote cijfers; Basic Grotesque voor de alinea's. Wat het belangrijkst is weegt zwaarder: de lead groter, in de
   band met de rechten de regel "voor een buitenlander" (.is-kern) in 500.

   RUIMTE (één schaal, overal dezelfde): --g1 1em · --g2 2em · --g3 3.5em · --g4 6em · --g5 9em.
   Lijnen in het grijs van de site: de middenlijn en de banden vol, de tussenlijnen op de helft. Geen oranje: dat blijft op de knop van het slot.

   BEWEGING (alleen transform en opacity, papa's ease):
   - de middenlijn en de vloer hangen aan de scroll (--gids-as, --gids-vloer, --gids-as-h van GIDS_AS_SCRIPT);
   - knoop, tussenlijnen, de lijnen van de banden en de balken tekenen één keer als de middenlijn ze raakt ([data-raak].is-geraakt), alleen onder
     html.gids-as-loopt (dat zet het script zelf, alleen als beweging mag);
   - de vakken schuiven omhoog als hun hoofdstuk in beeld komt (.is-in van GIDS_BLAD_SCRIPT), alleen onder html.gids-blad-wacht.
   Zonder JavaScript en bij Minder beweging staat alles vol en zichtbaar.
   De maat groeit mee met de site (Dévin 17-10, ronde 33; css/LEESMIJ.md regel 9): papa's letter schaalt met de breedte (body 12 px op 1440, 10 op 1200,
   8,3 op 992) en de hoofdstukken staan op 1.25em, net als papa's alinea's; geen vloer meer. De zijmarge (--gids-zijmaat) is de linkerlijn van de rail, in
   papa's --size-font: op 1440 77 px, zoals de oude 5,35vw, en boven 1600 stopt hij met groeien, net als de rest van de site.
   ============================================================================ */
/* De rand van het vlak (P) als lengte die één keer op het papier wordt uitgerekend: P staat in em, en binnen de hoofdstukken (letter 1.25x) zou hij
   anders 1.25x te groot zijn. Zo lopen het navy vlak, de banden en de lijnen precies tot de rand van het vlak. */
@property --gids-rand { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --gids-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.gids-papier {
  counter-reset: gids-knoop;
  --gids-lijn: var(--_colors---swatch--grey); --gids-lijn-zacht: color-mix(in srgb, var(--_colors---swatch--grey) 50%, transparent);
  --gids-ease: cubic-bezier(.625, .05, 0, 1); --gids-rand: var(--_layout---padding-global--page-padding); --gids-r: var(--_layout---border-radius--8px);
  --gids-zijmaat: calc(var(--size-font) * 6.42);
}
/* Tussen 768 en 991 rekent papa's --size-font met een andere ideale breedte (834): dezelfde zijmarge als voorheen is daar 2,7888 --size-font. */
@media (max-width: 991px) { .gids-papier { --gids-zijmaat: calc(var(--size-font) * 2.7888); } }
.gids-stuk, .gids-slot { font-size: 1.25em; }
.gids-stuk, .gids-slot, .gids-band { --g1: 1em; --g2: 2em; --g3: 3.5em; --g4: 6em; --g5: 9em; --gids-goot: 2em; }
.gids-stuk > .padding-global, .gids-slot > .padding-global, .gids-band > .padding-global { --gids-zij: 0px; position: relative; padding-left: 0; padding-right: 0; }
@media (min-width: 768px) {
  .gids-stuk > .padding-global, .gids-slot > .padding-global, .gids-band > .padding-global { --gids-zij: var(--gids-zijmaat); padding-left: var(--gids-zij); padding-right: var(--gids-zij); }
}

/* --- De middenlijn: van de foto tot de vloer boven de filterrij --- */
.gids-krant { position: relative; }
.gids-as { position: absolute; z-index: 2; top: var(--gids-as-top, 0px); left: 50%; width: 1px; height: var(--gids-as-h, 100%); margin-left: -.5px; pointer-events: none; }
/* Stiller dan v4 (Dévin 17-10: "de tijdlijn moet suptieler"): de lijn in het zachte grijs. */
.gids-as__lijn { display: block; width: 100%; height: 100%; background-color: var(--gids-lijn-zacht); transform-origin: center top; transform: scaleY(var(--gids-as, 1)); }
/* De vloer staat in de kolom van de rail (op de linkerlijn van de krant) en loopt met negatieve marges tot de rand van het vlak. */
.gids-vloer { position: relative; z-index: 3; height: 1px; margin: 0 calc(-1 * var(--gids-rand)) var(--_sizes---size--32px); }
@media (min-width: 768px) { .gids-papier .gids-vloer { margin-left: calc(-1 * (var(--gids-rand) + var(--gids-zijmaat))); margin-right: calc(-1 * (var(--gids-rand) + var(--gids-zijmaat))); } }
.gids-vloer__lijn { display: block; height: 1px; background-color: var(--gids-lijn); transform-origin: center; transform: scaleX(var(--gids-vloer, 1)); }

/* --- Een hoofdstuk: de knoop op de lijn, dan het raster --- */
.gids-hst { padding-top: var(--g5); }
.gids-hst > .padding-global { padding-top: var(--g3); }
.gids-krant > .gids-hst:last-child { padding-bottom: var(--g5); }
.gids-knoop {
  /* Ronde 36 (Dévin 18-10): de knoop wordt getekend, niet geschaald: de rand begint boven, loopt naar twee kanten en komt onder samen (--k van 0 tot 1,
     een conic-gradient in een ring), en onderweg komen de achtergrond en het cijfer erbij. Zonder script en bij Minder beweging is --k 1: alles staat. */
  /* Ronde 38 (Dévin: "de tijdlijn moet altijd stoppen achter deze cirkels ... standaard achtergrond fill ... de tijdlijn mag pas doorgaan als het rondje heel is"):
     de vulling is dicht zodra de tekening begint (--k > 0), dus de lijn loopt erachter; --k komt van GIDS_AS_SCRIPT (--kp) en is 1 precies als het eind van de
     lijn de onderkant van de knoop haalt. */
  --k: 1; --knoop-rand: var(--gids-lijn-zacht); --knoop-vlak: var(--ssn-surface);
  position: absolute; z-index: 4; top: 0; left: 50%; margin: -1.6em 0 0 -1.6em;
  box-sizing: border-box; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%;
  border: 0; background-color: var(--knoop-vlak);   /* ronde 41: de achtergrond staat er altijd ("nu flitst de achtergrond van 02 zomaar in beeld") */
  font-family: var(--_fonts---fonts--paragraph); font-style: italic; font-size: .8em; line-height: 1; color: var(--_colors---swatch--grey);
  font-variant-numeric: tabular-nums;
}
.gids-knoop::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--knoop-rand) 0deg calc(var(--k) * 180deg), transparent calc(var(--k) * 180deg) calc(360deg - var(--k) * 180deg), var(--knoop-rand) calc(360deg - var(--k) * 180deg));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
}
/* Het cijfer optisch in het midden (ronde 36: "de cijfers beter gecentreerd"): een cursief cijfer helt naar rechts en de lijnhoogte 1 zet het iets hoog;
   een kleine verschuiving naar links en omlaag, gemeten op de inkt van "02" (.unlazy/gids-v5/knoop36.cjs). */
/* Het cijfer komt als de cirkel heel is (ronde 38: "infaden en schalen ... lichte blur"), mee met de scroll (ronde 41: "de nummering moet niet ease maar ook in
   de viewport voortgang"): --kn van GIDS_AS_SCRIPT gaat van 0 naar 1 over het volgende tiende scherm nadat de lijn onder de cirkel is; zonder script 1. */
.gids-knoop:not(.is-punt)::before { counter-increment: gids-knoop; content: counter(gids-knoop, decimal-leading-zero); translate: var(--knoop-dx, -.06em) var(--knoop-dy, .015em);
  opacity: var(--kn, 1); scale: var(--kn, 1); filter: blur(calc((1 - var(--kn, 1)) * .2em)); }
/* Een tussenlijn uit de knoop naar links (01, 05), of uit de middenlijn naar rechts (in een vak dat tegen de lijn begint, 02 en 04). */
.gids-tak { position: absolute; z-index: 1; height: 1px; background-color: var(--gids-lijn-zacht); }
/* Ze lopen door tot de rand van het vlak (Dévin 16-10: lijnen over de volle breedte). */
.padding-global > .gids-tak.is-links { top: 0; left: calc(-1 * var(--gids-rand)); right: 50%; transform-origin: right center; }
.gids-vak > .gids-tak.is-rechts { left: calc(-.5 * var(--gids-goot)); right: calc(-1 * (var(--gids-zij) + var(--gids-rand))); transform-origin: left center; }
.gids-hst__raster { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gids-goot); row-gap: var(--g4); align-items: start; }
.gids-vak { position: relative; min-width: 0; }

/* --- Letter (v5, Dévin 17-10: "meer profecioneel ... masculien ... kleinere fonts, nog meer krant achtig ... langere UPPERCASE headings ... geen eerste letter
       over 2 regels meer"). Voorbeelden: Apple Newsroom (label, kop, één inleidende zin, de plaatsregel in kapitalen, één maat lopende tekst) en Monocle
       (dunne lijnen, kaders met een label). De kop komt uit papa's heading-s (de footer: "BALI OF LOMBOK?"), de inleiding uit zijn alt-heading (IvyPresto,
       hier rechtop: minder cursief). --- */
.gids-papier .gids-stuk p.gids-rubriek { margin: 0 0 1.6em; font-size: .72em; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
.gids-papier .gids-stuk__kop {
  margin: 0; font-family: var(--_headings---heading-s--font); font-style: normal; font-weight: var(--_headings---heading-s--font-weight);
  font-size: 2.3em; line-height: 1.04; letter-spacing: var(--_headings---heading-s--letter-spacing); text-transform: uppercase; color: var(--_colors---swatch--black); text-wrap: balance;
}
.gids-vak .gids-stuk__kop:not(:last-child) { margin-bottom: .75em; }
.gids-papier .gids-stuk p, .gids-papier .gids-slot__tekst { margin: 0 0 1em; max-width: 31em; font-size: 1em; line-height: 1.7; color: var(--_colors---swatch--black); }
.gids-papier .gids-stuk p:last-child { margin-bottom: 0; }
/* De inleiding: één alinea in IvyPresto, net als het citaat in de kop. */
.gids-stuk p.gids-lede { max-width: 21em; margin-bottom: 0; font-family: var(--_fonts---fonts--alt-heading); font-style: normal; font-weight: 400; font-size: 1.6em; line-height: 1.32; letter-spacing: -.005em; }
.gids-stuk p.gids-telling.gids-lede { margin-bottom: 1.2em; }
/* Volgt er lopende tekst in hetzelfde vak (het navy hoofdstuk), dan ademt de inleiding eerst. */
.gids-papier .gids-stuk p.gids-lede + p { margin-top: 1.4em; }
/* De plaatsregel van een krantenbericht: de eerste woorden van de eerste alinea in kapitalen, iets kleiner en zwaarder (.gids-aanloop is al de lijn boven het slot). */
.gids-plaatsregel { font-weight: 500; font-size: .86em; letter-spacing: .06em; text-transform: uppercase; }
/* Een kader (Monocle): een haarlijn rondom, het label bovenin met een lijn eronder. Voor de twee situaties en de voorbeelden van het label. */
.gids-vak.is-kader { padding: 1.9em 1.75em 2em; border: 1px solid var(--gids-lijn-zacht); border-radius: var(--_layout---border-radius--4px); background-color: var(--ssn-surface); }
.gids-vak.is-kader > h3 { margin: 0 0 1.2em; padding-bottom: 1em; border-bottom: 1px solid var(--gids-lijn-zacht); font-family: var(--_fonts---fonts--paragraph); font-style: normal; font-weight: 500; font-size: .8em; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--_colors---swatch--black); }
.gids-stuk .text-link { color: inherit; text-decoration: underline; text-decoration-color: var(--gids-lijn); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.gids-stuk .text-link:hover { text-decoration-color: var(--_colors---swatch--black); }
.gids-stuk .text-link:focus-visible { outline: 2px solid var(--_colors---swatch--black); outline-offset: 2px; }

/* Sectie 1 sluit strak aan op het navy vlak (Dévin 18-10, ronde 34: "boven sectie 2 moet die scheidingslijn weg"): de onderlijn van de band vervalt en het
   navy vlak begint direct onder de band. */
.gids-hst:has(+ .gids-hst.is-citaat) .gids-band__lijn.is-onder { display: none; }
.gids-hst:has(+ .gids-hst.is-citaat) { padding-bottom: 0; margin-bottom: 0; }
.gids-hst:has(+ .gids-hst.is-citaat) + .gids-hst.is-citaat { margin-top: 0; padding-top: 0; }
/* --- Brede band: over de volle breedte van het vlak, een lijn boven en onder (zoals de dikke lijnen in de kop, hier 1px), in de kleur van het vlak,
       boven de middenlijn --- */
.gids-band { position: relative; z-index: 3; margin-top: var(--g4); padding: 7.5em 0; background-color: var(--ssn-surface); }
.gids-band__lijn { position: absolute; top: 0; left: calc(-1 * var(--gids-rand)); right: calc(-1 * var(--gids-rand)); height: 1px; background-color: var(--gids-lijn); transform-origin: center; }
.gids-band__lijn.is-onder { top: auto; bottom: 0; }

/* De titel boven een visual (Dévin 16-10: "alles moet super voorgekauwd zijn"): wat je ziet, klein en in hoofdletters, over de hele breedte. */
.gids-papier p.gids-visual__titel { grid-column: 1 / -1; max-width: none; margin: 0 0 2.4em; font-size: .78em; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--_colors---swatch--grey); }

/* --- 01: kop links groot, tekst rechts; de band met de drie rechten --- */
.is-tabel > .padding-global .is-kop { grid-column: 1 / 6; }
.is-tabel > .padding-global .is-tekst { grid-column: 8 / 12; padding-top: 2.6em; }
.is-rechten .gids-recht { grid-column: span 4; }
.gids-recht__term { margin: 0 0 .55em; font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 3em; line-height: 1; text-transform: none; color: var(--_colors---swatch--black); }
.gids-recht dl { margin: 0; }
.gids-recht dt { margin: 1.6em 0 .5em; font-size: .72em; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
.gids-recht dd { margin: 0; max-width: 18em; font-size: 1.05em; line-height: 1.6; color: var(--_colors---swatch--black); hyphens: auto; overflow-wrap: break-word; }
.gids-recht dd.is-kern { font-size: 1.15em; font-weight: 500; line-height: 1.5; }

/* --- 02: het navy vlak (Dévin 16-10: het belangrijkste hoofdstuk, de waarschuwing, krijgt het donker van de site). Over de volle breedte van het vlak.
       De middenlijn loopt erdoorheen (Dévin 17-10, ronde 31: "de tijdlijn in het navy vlak moet terug"): het vlak heeft geen eigen laag (z-index auto), dus de
       lijn (z-index 2) ligt boven het navy en onder de foto (z-index 3). De navy balk onderaan wijkt voor het vlak (GIDS_AS_SCRIPT, duw). Erin: de foto groot links,
       kop en tekst rechts, daaronder rechts het citaat met een tussenlijn naar rechts. Beige op navy. --- */
.gids-hst.is-citaat > .padding-global {
  z-index: auto; width: auto; max-width: none; margin: 0 calc(-1 * var(--gids-rand)); padding: var(--g4) calc(var(--gids-zij) + var(--gids-rand));
  border-radius: var(--_layout---border-radius--8px); background-color: var(--_colors---swatch--black); color: var(--ssn-surface);
}
.gids-papier .is-citaat .gids-stuk__kop, .gids-papier .is-citaat .gids-stuk p, .gids-papier .gids-hst.is-citaat p { color: var(--ssn-surface); }
.gids-papier .is-citaat .gids-rubriek, .gids-papier .is-citaat cite, .gids-papier .gids-hst.is-citaat p.gids-hst__onderschrift { color: color-mix(in srgb, var(--ssn-surface) 60%, transparent); }
.gids-papier .is-citaat .gids-tak { background-color: color-mix(in srgb, var(--ssn-surface) 30%, transparent); }
.gids-hst.is-citaat .gids-vak > .gids-tak.is-rechts { right: calc(-1 * (var(--gids-zij) + var(--gids-rand))); }
/* Desktop (Dévin 16-10): het navy vlak loopt recht van rand tot rand; het beige erboven en eronder krijgt de ronde hoeken, met dezelfde omgekeerde hoekjes
   als de naad onder het vlak (20, 97: een radial-gradient in het navy). Op de telefoon blijft het een blok met radius, zo breed als de header. */
@media screen and (min-width: 992px) {
  .gids-hst.is-citaat > .padding-global { border-radius: 0; }
  /* Regel 11 (Dévin 18-10, ronde 34): het navy vlak ligt boven de onderbar (de naad, z-index 5), dus het schuift er strak overheen en de balk blijft staan.
     Daarmee ligt het vlak ook boven de middenlijn; het tekent zijn eigen stuk (gids-hst__as), zo lang als de middenlijn erin is (GIDS_AS_SCRIPT). */
  .gids-hst.is-citaat > .padding-global { z-index: 6; }
  .gids-hst__as { position: absolute; z-index: 1; top: 0; left: 50%; width: 1px; height: var(--gids-navy-as, 100%); margin-left: -.5px; background-color: var(--gids-lijn-zacht); pointer-events: none; }
  .gids-hst.is-citaat > .padding-global::before, .gids-hst.is-citaat > .padding-global::after {
    content: ""; position: absolute; left: 0; right: 0; height: var(--gids-r); pointer-events: none; background-repeat: no-repeat; background-size: var(--gids-r) var(--gids-r);
  }
  .gids-hst.is-citaat > .padding-global::before {
    bottom: 100%; background-position: left top, right top;
    background-image: radial-gradient(circle at 100% 0%, transparent calc(var(--gids-r) - .5px), var(--_colors---swatch--black) var(--gids-r)), radial-gradient(circle at 0% 0%, transparent calc(var(--gids-r) - .5px), var(--_colors---swatch--black) var(--gids-r));
  }
  .gids-hst.is-citaat > .padding-global::after {
    top: 100%; background-position: left bottom, right bottom;
    background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--gids-r) - .5px), var(--_colors---swatch--black) var(--gids-r)), radial-gradient(circle at 0% 100%, transparent calc(var(--gids-r) - .5px), var(--_colors---swatch--black) var(--gids-r));
  }
}
.is-citaat > .padding-global .is-beeld { grid-column: 1 / 8; z-index: 3; }
.is-citaat > .padding-global .is-kop { grid-column: 9 / 13; }
.is-citaat > .padding-global .is-citaat { grid-column: 7 / 13; padding-bottom: var(--g2); }
.gids-hst__beeld { margin: 0; }
.gids-hst__beeld img { position: static; display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--_layout---border-radius--8px); }
/* Het onderschrift is een alinea: papa verbergt figcaption. */
.gids-papier p.gids-hst__onderschrift { max-width: 60%; margin: .9em 0 0; font-size: .72em; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
/* De foto in het navy hoofdstuk (Dévin 18-10, ronde 36 en 38): een kader strak om de foto alleen (een haarlijn in het licht van het vlak, een smalle rand
   ruimte, de radius van het vlak); het bijschrift staat eronder, buiten het kader, ingetogen in IvyPresto. Niet meer sticky (ronde 38: "net te veel"). */
.gids-hst__kader { display: block; }
@media screen and (min-width: 768px) {
  .gids-hst.is-citaat .gids-hst__kader { padding: .5em; border: 1px solid color-mix(in srgb, var(--ssn-surface) 25%, transparent); border-radius: var(--_layout---border-radius--8px); }
  .gids-hst.is-citaat .gids-hst__kader img { border-radius: var(--_layout---border-radius--4px); }
}
.gids-papier .gids-hst.is-citaat p.gids-hst__onderschrift { max-width: none; margin: .8em 0 0; padding: 0 calc(.5em / .95 + 1px); font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-size: .95em; line-height: 1.3; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--ssn-surface) 55%, transparent); }
.gids-citaat { margin: 0; padding: 0 0 0 calc(.5 * var(--gids-goot)); border: 0; font-size: 1em; }
.gids-stuk .gids-citaat p { max-width: none; margin: 0; font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 4.2em; line-height: 1; letter-spacing: -.01em; }
.gids-citaat cite { display: block; margin-top: 1.2em; font-style: normal; font-size: .72em; letter-spacing: .1em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
.is-citaat > .padding-global .is-citaat > .gids-tak { bottom: 0; }
/* Ons standpunt onder het citaat: de moderne letter, zwaarder, zodat het leest als een uitspraak en niet als uitleg. */
.gids-papier .gids-hst.is-citaat p.gids-wij { max-width: 22em; margin: 1.6em 0 0 calc(.5 * var(--gids-goot)); font-size: 1.35em; line-height: 1.35; font-weight: 500; }

/* --- 03: tekst links, kop rechts; de band met de tijdbalk --- */
.is-jaren > .padding-global .is-tekst { grid-column: 1 / 6; }
.is-jaren > .padding-global .is-kop { grid-column: 8 / 13; }
.gids-jaren { grid-column: 1 / -1; margin: 0; color: var(--_colors---swatch--black); }
.gids-jaren__rij { display: flex; margin: 0; padding: 0; list-style: none; }
/* De balk: één stuk dat van links groeit, de delen naadloos tegen elkaar (Dévins ontwerp 18-10: 14 px hoog op 1440, dus .95em van de 15 px van het hoofdstuk). */
.gids-jaren__balk { display: flex; height: .95em; }
.gids-jaren__balk i { position: relative; flex: var(--d) 1 0; min-width: 0; background-color: var(--_colors---swatch--black); }
.gids-jaren__deel { position: relative; flex: var(--d) 1 0; min-width: 0; display: flex; flex-direction: column; row-gap: .35em; padding: 1.4em 1em 0 0; }
/* Verlengen en vernieuwen kunnen, ze zijn geen recht (register -007, -017): die delen zijn gearceerd (de arcering, hieronder), het eerste deel is vol.
   Het eerste gearceerde deel in navy, het tweede in grijs: hoe verder weg, hoe lichter. */
.gids-jaren__balk i + i { background-color: transparent; --gids-arcering: var(--_colors---swatch--black); }
.gids-jaren__balk i + i + i { --gids-arcering: var(--_colors---swatch--grey); }
.gids-jaren b, .gids-aantal b { font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; line-height: 1; }
/* "30 jaar": het getal groot, jaar er direct achter op de basislijn; de uitleg eronder. */
.gids-stuk p.gids-jaren__getal { display: flex; align-items: baseline; column-gap: .35em; margin: 0; max-width: none; font-size: 1em; color: var(--_colors---swatch--black); }
.gids-jaren__deel b { font-size: 4em; }
.gids-jaren__deel span { font-size: .85em; line-height: 1.35; color: var(--_colors---swatch--grey); }
/* De as: de jaren op de grenzen van de delen (de som van de delen), met een streepje. */
.gids-jaren__as { position: relative; height: 2.4em; margin: 2.2em 0 0; padding: 0; list-style: none; }
/* De ruimte tussen de uitleg en de as (Dévin 18-10, ronde 34: "een nettere gap met de tijdlijn eronder"): één maat, ook als de uitleg op de telefoon over drie regels loopt. */
.gids-papier .gids-jaren .gids-jaren__as { margin-top: 1.8em; }
.gids-jaren__as::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--gids-lijn-zacht); }
.gids-jaren__as li { position: absolute; top: 0; left: calc(var(--x) * 100%); padding-top: .7em; transform: translateX(-50%); font-size: .8em; line-height: 1; color: var(--_colors---swatch--grey); font-variant-numeric: tabular-nums; }
.gids-jaren__as li:first-child { transform: none; }
.gids-jaren__as li:last-child { transform: translateX(-100%); }
.gids-jaren__as li::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: .45em; background-color: var(--gids-lijn); }
.gids-jaren__as li:first-child::before { left: 0; }
.gids-jaren__as li:last-child::before { left: auto; right: 0; }
.gids-stuk p.gids-jaren__som { display: flex; justify-content: flex-end; align-items: baseline; column-gap: .6em; max-width: none; margin: .5em 0 0; font-size: 1em; }
.gids-jaren__som b { font-style: normal; font-weight: 400; font-size: 7em; }
.gids-jaren__som span { font-size: .85em; color: var(--_colors---swatch--grey); }

/* --- 04: kop en intro links; wonen rechts hoog, een tussenlijn naar rechts, bedrijf links lager --- */
.is-twee > .padding-global .is-kop { grid-column: 1 / 6; grid-row: 1; }
.is-twee > .padding-global .is-een { grid-column: 8 / 13; grid-row: 1; padding-top: 2.6em; }
.is-twee > .padding-global .is-tak { grid-column: 7 / 13; grid-row: 2; height: 1px; }
.is-twee > .padding-global .is-tak > .gids-tak { top: 0; }
.is-twee > .padding-global .is-twee { grid-column: 2 / 6; grid-row: 3; }

/* --- 05: het aantal groot links met de verdeling; kop, telling en uitleg rechts; de voorbeelden verspringen --- */
.is-label > .padding-global .is-beeld { grid-column: 1 / 6; }
.is-label > .padding-global .is-kop { grid-column: 8 / 13; }
.is-label > .padding-global .is-voorbeeld.is-links { grid-column: 2 / 6; grid-row: 2; }
.is-label > .padding-global .is-voorbeeld.is-rechts { grid-column: 8 / 12; grid-row: 2; margin-top: var(--g4); }
.gids-aantal { margin: 0; color: var(--_colors---swatch--black); }
.gids-stuk p.gids-aantal__getal { display: flex; flex-direction: column; row-gap: .6em; margin: 0; max-width: none; font-size: 1em; }
.gids-aantal__getal b { font-size: 9em; letter-spacing: -.02em; }
.gids-aantal__getal span { max-width: 18em; font-size: 1.2em; line-height: 1.45; color: var(--_colors---swatch--black); }
.gids-verdeling__balk { display: flex; column-gap: .2em; height: .95em; margin-top: 1.8em; }
.gids-verdeling__balk i { position: relative; flex: var(--d) 1 0; min-width: .3em; background-color: var(--_colors---swatch--black); }
.gids-verdeling__balk i:nth-child(2), .gids-verdeling li:nth-child(2) .gids-verdeling__stip { background-color: var(--kaart-taupe-diep); }
.gids-verdeling__balk i:nth-child(3), .gids-verdeling li:nth-child(3) .gids-verdeling__stip { background-color: var(--kaart-taupe); }
.gids-verdeling { margin: 1.4em 0 0; padding: 0; list-style: none; }
.gids-verdeling li { display: flex; align-items: baseline; column-gap: .8em; padding: .45em 0; }
.gids-verdeling__stip { position: relative; flex: none; align-self: center; width: .6em; height: .6em; border-radius: 50%; background-color: var(--_colors---swatch--black); }
/* Het onbekende deel (het aanbod noemt geen recht): gearceerd in grijs, in de balk en in zijn stip (met een grijze haarlijn eromheen, zodat de stip een stip blijft). */
.gids-papier .gids-verdeling__balk i.is-open, .gids-papier .gids-verdeling li .gids-verdeling__stip.is-open { background-color: transparent; --gids-arcering: var(--_colors---swatch--grey); }
.gids-verdeling__stip.is-open { overflow: hidden; width: .8em; height: .8em; box-shadow: inset 0 0 0 1px var(--_colors---swatch--grey); }
.gids-verdeling li b { min-width: 1.6em; font-size: 1.7em; text-align: right; }
.gids-verdeling li span { font-size: 1em; line-height: 1.4; color: var(--_colors---swatch--black); }
.is-voorbeeld .gids-pil { margin-bottom: 1em; }
.gids-stuk .is-voorbeeld p { font-size: 1em; }

/* De rail over de volle breedte van het vlak (Dévin 16-10). Desktop en tablet: de sectie tot de rand en papa's binnenranden weg; de carrousel loopt
   dan van rand tot rand. Op de telefoon (25 zet daar al eigen randen) alleen de sectie tot de rand. Papa's negatieve marge bovenaan valt weg: de vloer
   staat erboven. */
.gids-papier .section_aanbod.is-gids-aanbod { margin: var(--_sizes---size--32px) calc(-1 * var(--gids-rand)) 0; }
@media not ((pointer: coarse) and (orientation: portrait) and (max-width: 600px)) {
  .gids-papier .is-gids-aanbod > .container-col-12 > .padding-global { padding-left: 0; padding-right: 0; }
  /* Specifieker dan 97 (.section_aanbod.is-gids .cta-wrap.is-aanbod), dat anders ook de wrapper van de rail een rand geeft. */
  .gids-papier .section_aanbod.is-gids-aanbod .cta-wrap.is-aanbod { padding-left: 0; padding-right: 0; }
}
/* De tekst van de rail (kop, filters, stand en knoppen) op de linkerlijn van de krant: de rand van het vlak plus de zijmaat. De carrousel zelf blijft een
   beeldband van rand tot rand. */
@media (min-width: 768px) {
  /* Papa centreert zijn kolommen met margin auto !important; de kolom krijgt daarom de breedte van de krant en staat dan vanzelf op zijn lijn. */
  .gids-papier .section_aanbod.is-gids-aanbod .container-col-11 { width: calc(100% - 2 * (var(--gids-rand) + var(--gids-zijmaat))); max-width: none; }
  .gids-papier .section_aanbod.is-gids-aanbod .gids-rail-ctl { padding-left: calc(var(--gids-rand) + var(--gids-zijmaat)); padding-right: calc(var(--gids-rand) + var(--gids-zijmaat)); }
}
/* De kop van de rail staat boven de filters (build-nl), met ruimte tot de vloerlijn eronder. */
.gids-papier .section_aanbod.is-gids-aanbod .hiw-header { margin: 0 0 var(--_sizes---size--56px); }
/* De kop van de rail (papa's podium): in de letter van de krant. */
/* In de letter van de hoofdstukken (v5): papa's heading-s in hoofdletters; 2.875em = de 2.3em van een hoofdstukkop op zijn letter van 1.25em. */
/* Ronde 35 (Dévin 18-10: "moet in ivopresto net als 'nietig van rechtswege'"): de letter van het citaat (IvyPresto, --_fonts---fonts--eyebrow), gewone
   letters, iets groter dan de hoofdstukkop omdat IvyPresto kleiner valt. */
.is-gids-aanbod .gids-rail__kop { font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 3.4em; line-height: 1; letter-spacing: -.01em; text-transform: none; }

/* --- Het filterblok van de rail (v5, Dévin 17-10: "een vierkant blok als je er over hovert ... absolute positie even breedt als de drie filter knoppen tot
       max de breedte van de header"). Absoluut onder de filterrij (GIDS_KEUZE_SCRIPT zet --gk-x, --gk-y, --gk-min en --gk-max), dus de carrousel schuift
       niet. Vierkant: radius 0 zoals de vierkantjes van de rail, een rand in de lijnkleur, het beige van het vlak. Erin de sectie van het aanbod (55, ssnf-*),
       hier in navy op beige. Type en Prijs zo breed als de drie knoppen; Locatie zo breed als de header, met de plaatsen in kolommen. --- */
.is-gids-aanbod .aanbod-filters { position: relative; }
.gids-keuze { position: absolute; z-index: 20; left: var(--gk-x, 0px); top: var(--gk-y, 100%); box-sizing: border-box; width: var(--gk-min, 24em); max-width: var(--gk-max, 100%);
  margin-top: .5em; padding: 0 1.5em 1.25em; border: 1px solid var(--gids-lijn-zacht); border-radius: var(--_layout---border-radius--4px); background-color: var(--ssn-surface); color: var(--_colors---swatch--black);
  font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-m--font-size); }
.gids-keuze[hidden], .gids-keuze .ssnf-sec[hidden] { display: none; }
.gids-keuze .ssnf-sec { border-bottom: 0; }
.gids-keuze .ssnf-sec > .ssnf-h { padding: 1.25em 0 1em; border-bottom: 1px solid var(--gids-lijn-zacht); }
.gids-keuze .ssnf-t { color: var(--_colors---swatch--black); }
.gids-keuze .ssnf-b { padding-top: .75em; }
/* Het scrollvenster van het aanbod (55, .ssnf-scroll: 15em hoog, tellers boven en onder), hier in navy op beige. */
.gids-keuze .ssnf-scroll { overscroll-behavior: contain; }
.gids-keuze .ssnf-scrollcount { color: var(--_colors---swatch--black); background: linear-gradient(to top, var(--ssn-surface) 40%, transparent); }
.gids-keuze .ssnf-scrollcount.is-top { background: linear-gradient(to bottom, var(--ssn-surface) 40%, transparent); }
.gids-keuze .ssnf-row { color: var(--_colors---swatch--black); }
.gids-keuze .ssnf-row[hidden] { display: none; }
.gids-keuze .ssnf-row.is-child .ssnf-row__t { color: color-mix(in srgb, var(--_colors---swatch--black) 72%, transparent); }
.gids-keuze .ssnf-tree[data-facetgroup="location"] .ssnf-row.is-parent .ssnf-row__t { font-weight: 500; }
.gids-keuze .ssnf-row:hover .ssnf-cbx { border-color: var(--_colors---swatch--black); }
.gids-keuze .ssnf-in { background: transparent; color: var(--_colors---swatch--black); border-color: var(--gids-lijn-zacht); }
.gids-keuze .ssnf-in:focus { border-color: var(--_colors---swatch--black); }
.gids-keuze .ssnf-fl, .gids-keuze .ssnf-sic { color: var(--_colors---swatch--grey); }
.gids-keuze .ssnf-search { margin-bottom: .75em; }
/* De prijsschuif van het aanbod (55) op beige (ronde 38): de lijnen en staafjes in de zachte lijnkleur van de Gids, de handvatten omgekeerd (navy ring, beige
   kern), de tooltips beige met een haarlijn zodat ze op het beige blijven staan, de koersregel in grijs. Oranje bij hover, slepen en een gekozen bereik blijft
   van 55. */
.gids-keuze .ssnf-histo span, .gids-keuze .ssnf-rng__track { background: var(--gids-lijn-zacht); }
.gids-keuze .ssnf-rng__fill { background: var(--_colors---swatch--black); }
.gids-keuze .ssnf-rng__h { background: var(--_colors---swatch--black); box-shadow: none; }
.gids-keuze .ssnf-rng__h::after { background: var(--ssn-surface); }
.gids-keuze .ssnf-rng__tip { box-shadow: 0 0 0 1px var(--gids-lijn-zacht); }
.gids-keuze .ssnf-help--cap { color: var(--_colors---swatch--grey); }
/* Reset rechtsboven in het blok (ronde 38): het teken en het woord van de Reset van het aanbod, klein en zonder kader. */
.gids-keuze__wis { display: inline-flex; align-items: center; gap: .4em; padding: 0; border: 0; background: transparent; color: var(--_colors---swatch--grey); font: inherit; font-size: var(--_paragraphs---paragraph-xxs--font-size); letter-spacing: .01em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.gids-keuze__wis[hidden] { display: none; }
/* EUR | IDR in de kop van het budget (ronde 39): de kleine keuzeschakelaar (91), navy op het papier. */
.gids-keuze__valuta { display: flex; justify-content: flex-end; margin: 0 0 .4em; }
.gids-keuze__wis svg { width: 1.1em; height: 1.1em; }
.gids-keuze__wis:hover, .gids-keuze__wis:focus-visible { color: var(--_colors---swatch--black); }
.gids-keuze__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.5em; margin-top: 1em; padding-top: 1em; border-top: 1px solid var(--gids-lijn-zacht); }
.gids-papier p.gids-keuze__n { margin: 0 auto 0 0; max-width: none; font-size: .9em; color: var(--_colors---swatch--grey); white-space: nowrap; }
.gids-keuze__n b { font-weight: 500; color: var(--_colors---swatch--black); font-variant-numeric: tabular-nums; }
/* Onderin: "5 van de N resultaten" en Bekijk (papa's knop, de kleuren van de knop in de kop, 97 .gids-ingang__knop), die het blok sluit. */
.gids-keuze__voet .btn-animate-chars { flex: none; }
/* Een optie met 0 wordt grijs (deel 55), maar wat aanstaat blijft aan te klikken, anders krijg je hem niet meer uit. */
.gids-keuze .ssnf-row.is-zero[aria-pressed="true"], .gids-keuze .ssnf-row.is-zero.is-indeterminate { opacity: 1; pointer-events: auto; }
.is-gids-aanbod .aanbod-filters-groep a[aria-expanded] { cursor: pointer; }
/* De chevron draait niet (ronde 34) en schuift omhoog, met de letters mee (Dévin 18-10, ronde 38: "de chevrons moeten OMHOOG animeren niet omlaag want de span
   beweegt omhoog"). Papa zet het icoon een kwartslag (rotation-90), waardoor zijn spoor op het scherm omlaag schoof. Hier staat het een kwartslag de andere kant
   op: het spoor schuift omhoog, het pijltje in rust (is-1) is omgedraaid en wijst omlaag, het pijltje dat inschuift wijst omhoog.
   Zolang het blok open is, blijft alleen de chevron geschoven; het knijpen van de achtergrond hoort bij hover, niet bij open (ronde 39), en de letters staan stil (ronde 38: "laat alleen de chevron bewegen en dan
   schuift de actieve filter gewoon"), en een nieuwe keuze laat de knop vloeiend van breedte veranderen (GIDS_KEUZE_SCRIPT). */
.is-gids-aanbod .aanbod-filters-groep a .button-icon.rotation-90 { transform: rotate(-90deg); }
.is-gids-aanbod .aanbod-filters-groep a .button-icon_arrow.is-1 { rotate: 180deg; }
.is-gids-aanbod .aanbod-filters-groep a.is-open .button-icon_track { transform: translate(50%, 0); }
/* Geen letterdraai bij hover (ronde 41): de letters rollen alleen als de tekst in de knop verandert door een keuze (GIDS_KEUZE_SCRIPT, schrijf). */
.is-gids-aanbod .aanbod-filters-groep a[aria-expanded]:hover [data-button-animate-chars] span, .is-gids-aanbod .aanbod-filters-groep a[aria-expanded]:focus-visible [data-button-animate-chars] span { transform: translateY(0) rotate(.001deg); }


/* --- De vragen: kop links, de uitklaplijst rechts (66) --- */
.gids-vragen { padding-top: var(--g4); }
.gids-vragen > .padding-global .is-kop { grid-column: 1 / 5; }
.gids-vragen > .padding-global .is-lijst { grid-column: 6 / 13; }
.gids-vragen .gids-stuk__kop { font-size: 2.8em; }

/* --- Het slot: een korte lijn met een punt, dan kop, één alinea, één knop, en de bronregel klein --- */
.gids-slot { padding: 0; }
/* De tijdlijn eindigt in het slot (Dévins ontwerp van 18-10): de lijn begint op de onderrand van de laatste vraag en loopt naar het oranje bolletje van de footer
   (papa's orange-globe.png, het teken van de pagina waar je bent in de footer-nav). */
.gids-aanloop { display: flex; flex-direction: column; align-items: center; margin-bottom: 2.5em; }
/* Ronde 38 (Dévin: "waarom is deze donkerder dan de q&a lijnen, en waarom begint het oranje bolletje niet precies op het uiteinde ... iets groter"): de lijn in
   de kleur van de lijnen tussen de vragen (66, --kaart-taupe-diep); het bolletje groeit vanaf zijn bovenkant, dus het hangt altijd aan het eind van de lijn. */
.gids-aanloop__lijn { display: block; width: 1px; height: 10em; background-color: var(--kaart-taupe-diep); }
.gids-aanloop__punt { display: block; width: .85em; height: .85em; transform-origin: center top; background: url(/images/stip.svg) center / contain no-repeat; }
.gids-slot__binnen { max-width: 52em; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.gids-slot__binnen .gids-stuk__kop { margin-bottom: .5em; }
.gids-slot__tekst { margin: 0 auto 2em; }
.gids-onder { margin: 3em 0 0; max-width: 34em; font-size: .8em; line-height: 1.5; color: var(--_colors---swatch--black); opacity: .75; }
/* Het colofon als voet van het blad (Dévins ontwerp van 18-10): een balk van rand tot rand onderaan het vlak met een haarlijn erboven, vier kolommen vanaf links,
   en rechts het merk van Mijn dossier (lijnVlak 'kruis') tot in de hoek van het vlak. */
.gids-colofonbalk {
  position: relative; overflow: hidden; margin: var(--g4) calc(-1 * var(--gids-rand)) 0; padding: 1.5em calc(2 * var(--gids-rand)) 1.6em;
  border-top: 1px solid var(--gids-lijn-zacht); border-radius: 0 0 var(--_layout---border-radius--12px) var(--_layout---border-radius--12px); font-size: .8em;
}
.gids-colofon { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 16em)); margin: 0; padding: 0; }
.gids-colofon > div { padding: 0 1.2em; border-left: 1px solid var(--gids-lijn-zacht); }
.gids-colofon > div:first-child { padding-left: 0; border-left: 0; }
.gids-colofon dt { margin: 0 0 .6em; font-size: .85em; letter-spacing: .12em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
.gids-colofon dd { margin: 0; font-size: 1em; line-height: 1.5; color: var(--_colors---swatch--black); }
.gids-colofon a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: var(--gids-lijn-zacht); }
.gids-colofon__noot { position: relative; z-index: 1; max-width: 46em; margin: 1.4em 0 0; font-size: .85em; line-height: 1.5; color: var(--_colors---swatch--grey); }   /* de ingang: de zin van 04 §4.9 als laatste regel van het colofon */
/* Ronde 58 (Dévin 25-10: "info icoontje in colofon is niet verticaal gecentreerd"): de zin begint met een hoofdletter, dus het ⓘ (1em) staat op het midden van de
   hoofdletterhoogte van Inter (,73em), niet op dat van de kleine letters (vertical-align: middle in 55): de onderkant ,14em onder de basislijn. */
.gids-colofon__noot .ssnf-help__ic { vertical-align: -.14em; }
/* Zo breed als de balk links van het arceringsvlak (ronde 54, uitleg in 97); sinds ronde 58 op de ingang én op elk blad. Op de telefoon (geen vlak) de volle breedte. */
.gids-colofonbalk .gids-colofon__noot { max-width: calc(100% - 33.5em); }
@media screen and (max-width: 767px) { .gids-colofonbalk .gids-colofon__noot { max-width: none; } }
.gids-colofon__merk { position: absolute; top: 0; right: 0; bottom: 0; width: 27em; container-type: size; }
.gids-colofon__merk .vl-lijnen__vlak { fill: var(--ssn-surface); }
.gids-colofon__merk .vl-lijnen__l { stroke: var(--gids-lijn-zacht); }   /* zachter dan in het dossier, zoals in Dévins ontwerp */
/* De knoppen van het slot en de vragen (Dévin 18-10, ronde 34: "secundaire knop" en "de oranje box met chevron van de iconische knop"): papa's omlijnde knop
   met het oranje blokje, zoals Meer filters op het aanbod (20: .is-aanbod-cta), op zijn eigen breedte. */
.gids-papier :is(.gids-slot__knop, .gids-vragen__knop) .button-icon { background-color: var(--ssn-accent); color: #FFFFFF; }
.gids-vragen__knop { display: flex; margin-top: 1.75em; }
.gids-vragen__knop .btn-animate-chars { flex-grow: 0; }
/* De knoppen onderin even groot als elke knop op de site (ronde 40: "waarom zijn de twee laatste cta knoppen zo groot, dat is niet consistent"): een siteknop
   heeft de basismaat van de pagina; de tekst van de Gids is 1.25 keer zo groot (op de telefoon 1.1515), dus deze knoppen delen die factor terug. */
.gids-papier :is(.gids-slot, .gids-vragen) .btn-animate-chars { font-size: calc(1em / 1.25); }
@media screen and (max-width: 767px) { .gids-papier :is(.gids-slot, .gids-vragen) .btn-animate-chars { font-size: calc(1em / 1.1515); } }
@media screen and (max-width: 767px) {
  .gids-colofon { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.2em; }
  .gids-colofon__merk { display: none; }
  .gids-colofon > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
.gids-onder a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.gids-onder a:hover { text-decoration-color: var(--_colors---swatch--black); }
.gids-onder a:focus-visible { outline: 2px solid var(--_colors---swatch--black); outline-offset: 2px; }

/* --- Beweging (v6, Dévin 17-10): alles wat uit de tijdlijn groeit schuift mee met de scroll. GIDS_AS_SCRIPT zet --r (0 tot 1) op elk [data-raak] zodra het eind
       van de lijn zijn knoop (of de bovenkant van een band) passeert. Eerst groeit de knoop (de eerste helft), dan de lijnen (de tweede helft); terug
       scrollen spoelt het precies terug: eerst de lijnen, dan de knoop, dan pas de tijdlijn. De balken van de tijdbalk en de verdeling groeien als één stuk.
       Geen overgang: het volgt de scroll beeld voor beeld. Zonder script en bij Minder beweging is --r er niet en staat alles vol. Vakken: omhoog bij is-in. --- */
@media (prefers-reduced-motion: no-preference) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) :is(.gids-hst[data-raak] > .padding-global, .gids-deel[data-raak]) > .gids-knoop { --k: var(--kp, 1); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst[data-raak] .gids-tak,
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst[data-raak] > .padding-global::after { transform: scaleX(clamp(0, calc(var(--r, 1) * 2 - 1), 1)); }
  /* De balken met arcering groeien met een clip, niet met scaleX: anders worden de schuine lijnen tijdens het groeien platgedrukt. */
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-band__lijn { transform: scaleX(clamp(0, calc(var(--r, 1) * 2), 1)); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-band__lijn.is-onder { transform: scaleX(clamp(0, calc(var(--r, 1) * 2 - 1), 1)); }
  /* Het slot (ronde 34): de lijn van de laatste vraag naar het oranje bolletje groeit als de tijdlijn hem raakt, het bolletje komt als laatste. */
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-aanloop[data-raak] .gids-aanloop__lijn { transform-origin: center top; transform: scaleY(clamp(0, calc(var(--r, 1) * 1.25), 1)); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-aanloop[data-raak] .gids-aanloop__punt { scale: clamp(0, calc(var(--r, 1) * 5 - 4), 1); }
  /* De visuals komen één keer, op tijd en zacht (Dévin 18-10, ronde 38: "de visual animaties moeten eenmalig zijn en daarmee ook een smoothere animatie ...
     de 80 jaar freehold tijdlijn moet smooth animeren en niet verdwijnen als je omhoog scrolt"). GIDS_AS_SCRIPT zet .is-getoond zodra de tijdlijn ze half
     heeft geraakt en haalt die klasse nooit weg. De jarenbalk groeit nog om de beurt (ronde 34): elk deel na het vorige, zijn getal en uitleg net erachter. */
  /* De eindstand staat er als inset(0 0 0 0): van een inset naar "none" kan de browser niet tussen-tekenen, dan springt de balk in één keer open. */
  /* Ronde 41 (Dévin: "de 80jaar freehold sluit niet aan op elkaar, dus het beweegt niet als 1 voortgang maar in delen"): één beweging van 1.8s over de hele balk.
     Elk deel krijgt zijn deel van de tijd (--d van --som) en begint waar het vorige ophoudt (--c); het eerste deel versnelt, het laatste remt af, de rest gaat
     gelijkmatig, zodat de naden niet te zien zijn. Getal en uitleg komen als hun deel begint. */
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-jaren__balk i { --e: linear; clip-path: inset(0 0 0 0); transition: clip-path calc(1.8s * var(--d) / var(--som)) var(--e) calc(1.8s * var(--c) / var(--som)); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-jaren__balk i:first-child { --e: cubic-bezier(.5, 0, 1, 1); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-jaren__balk i:last-child { --e: cubic-bezier(0, 0, .5, 1); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak] .gids-jaren__deel { transition: opacity .7s var(--gids-ease) calc(1.8s * var(--c) / var(--som) + .1s), translate .7s var(--gids-ease) calc(1.8s * var(--c) / var(--som) + .1s); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak]:not(.is-getoond) .gids-jaren__balk i { clip-path: inset(0 100% 0 0); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-band[data-raak]:not(.is-getoond) .gids-jaren__deel { opacity: 0; translate: 0 .6em; }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst[data-raak] .gids-verdeling__balk { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--gids-ease) .1s; }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst[data-raak]:not(.is-getoond) .gids-verdeling__balk { clip-path: inset(0 100% 0 0); }
  /* Ronde 60 (Dévin 25-10: "de afbeelding moet geen inkomende animatie hebben"): de foto staat er meteen; alleen de kaders en de vragen schuiven. */
  /* Alleen de vakken die een kaart of beeld zijn schuiven als geheel omhoog (de foto, de kaders, de vragen), zoals papa een kaart als één stuk laat komen.
     Koppen en alinea's komen per regel binnen (GIDS_TEKST_SCRIPT, ronde 37: "ALLE tekst ... in 1 keer infade ... moet slimmer en consistenter uit de site"). */
  html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-stuk .gids-hst__raster > .gids-vak:is(.is-kader, .is-lijst) {
    transition: opacity .8s var(--gids-ease), transform .8s var(--gids-ease);
  }
  html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-stuk:not(.is-in) .gids-hst__raster > .gids-vak:is(.is-kader, .is-lijst) { opacity: 0; transform: translateY(1.5em); }
  html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-stuk .gids-hst__raster > .gids-vak:is(.is-kader, .is-lijst):nth-child(2) { transition-delay: .1s; }
  html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-stuk .gids-hst__raster > .gids-vak:is(.is-kader, .is-lijst):nth-child(n+3) { transition-delay: .2s; }
}
html[data-ssn-motion="reduced"] :is(.gids-as__lijn, .gids-vloer__lijn) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gids-as__lijn, .gids-vloer__lijn { transform: none; }
}

/* --- Onder 992 (de header-breakpoint): geen middenlijn. Alles onder elkaar in de volgorde van het verhaal (de kop eerst, bij 02 de foto vooraan).
       De knoop staat links; alleen 01 en 04 houden een tussenlijn. De banden blijven over de volle breedte. --- */
@media screen and (max-width: 991px) {
  /* De middenlijn loopt hier van de foto tot knoop 01 en groeit mee met de scroll (Dévin 17-10, ook op de telefoon: geen vast stukje meer). */
  .gids-as { z-index: 3; }
  .gids-stuk, .gids-slot, .gids-band { --g4: 4.5em; --g5: 7em; }
  .gids-hst > .padding-global { padding-top: 3em; }
  /* Elk nummer heeft een lijn (Dévin 16-10): de knoop links, de lijn ernaast tot de rand. De lijnen uit de HTML (01, 05, 04, het citaat) wijken daarvoor. */
  .gids-knoop { left: var(--gids-zij); margin: -1.3em 0 0; width: 2.6em; height: 2.6em; }
  .padding-global > .gids-tak.is-links, .is-citaat .is-citaat > .gids-tak, .is-twee > .padding-global .is-tak { display: none; }
  .gids-hst > .padding-global::after { content: ""; position: absolute; z-index: 1; top: 0; left: calc(var(--gids-zij) + 2.6em * .8); right: calc(-1 * var(--gids-rand)); height: 1px; background-color: var(--gids-lijn-zacht); transform-origin: left center; transition: transform 1.2s var(--gids-ease); }
  /* 01 is een middenmoment: de knoop midden onder de foto, de middenlijn van de foto loopt erin, de lijn gaat naar beide kanten. */
  .gids-krant > .gids-as + .gids-hst { position: relative; }
  .gids-krant > .gids-as + .gids-hst > .padding-global > .gids-knoop { left: 50%; margin-left: -1.3em; }
  .gids-krant > .gids-as + .gids-hst > .padding-global::after { left: calc(-1 * var(--gids-rand)); transform-origin: center; }
  /* 02 navy: zo breed als de header (de breedte van de inhoud), met eigen binnenrand. Het citaat in het midden, met een lijn erboven en eronder. */
  .gids-hst.is-citaat > .padding-global { margin: 0; padding: var(--g4) 1.5em; }
  .gids-hst.is-citaat > .padding-global::after { left: calc(1.5em + 2.6em * .8); right: 1.5em; background-color: color-mix(in srgb, var(--ssn-surface) 30%, transparent); }
  .gids-hst.is-citaat > .padding-global > .gids-knoop { left: 1.5em; }
  .gids-citaat { text-align: center; }
  .gids-citaat::before, .gids-citaat::after { content: ""; display: block; width: 1px; height: 3em; margin: 0 auto 1.5em; background-color: color-mix(in srgb, var(--ssn-surface) 40%, transparent); }
  .gids-citaat::after { margin: 1.5em auto 0; }
  .gids-papier .gids-hst.is-citaat p.gids-wij { margin: 1.4em auto 0; text-align: center; }
  /* Contourblokken, zo breed als de header: de tijdbalk en de twee situaties. */
  .gids-band.is-jaren { margin-top: var(--g4); padding: 1.75em 1.5em 2.25em; border: 1px solid var(--gids-lijn-zacht); border-radius: var(--_layout---border-radius--8px); }
  .gids-band.is-jaren .gids-band__lijn { display: none; }
  .gids-hst__raster { grid-template-columns: minmax(0, 1fr); row-gap: 2.6em; }
  .gids-stuk > .padding-global .gids-hst__raster > .gids-vak, .gids-band > .padding-global .gids-hst__raster > .gids-recht, .gids-band > .padding-global .gids-hst__raster > .gids-jaren {
    grid-column: 1 / -1; grid-row: auto; margin-top: 0; padding-top: 0;
  }
  /* Een kader houdt zijn binnenruimte boven (ronde 42, Dévin: "er mist wat onder en boven margins op mobiel"): de regel hierboven zette die op 0, zodat de kop
     van een situatie en het label van een voorbeeld tegen de rand lagen. */
  .gids-stuk > .padding-global .gids-hst__raster > .gids-vak.is-kader { padding-top: 1.9em; }
  .gids-hst__raster > .is-kop { order: -1; }
  .is-citaat > .padding-global .gids-hst__raster > .is-beeld { order: -2; }
  .gids-papier .gids-stuk__kop { font-size: 1.85em; }
  .gids-citaat { padding-left: 0; }
  .gids-stuk .gids-citaat p { font-size: 3.2em; }
  .gids-vak > .gids-tak.is-rechts { left: 0; }
  .gids-jaren__deel b { font-size: 2.1em; }
  .gids-stuk p.gids-jaren__getal { column-gap: .25em; font-size: .9em; }
  .gids-jaren__deel { padding-right: .6em; }
  .gids-jaren__som b { font-size: 4.6em; }
  .gids-aantal__getal b { font-size: 6em; }
}
@media screen and (max-width: 767px) {
  .gids-stuk, .gids-slot { font-size: 1.1515em; }   /* op 390 15 px, zoals voorheen; daarbuiten mee met de site */
  .gids-papier .gids-stuk__kop { font-size: 1.85em; }
  .gids-stuk p.gids-lede { font-size: 1.35em; }
  .gids-recht__term { font-size: 2.6em; }
  .gids-stuk .gids-citaat p { font-size: 2.6em; }
  .gids-twee__kop { font-size: 1.9em; }
  .gids-vragen .gids-stuk__kop { font-size: 2em; }
  .is-gids-aanbod .gids-rail__kop { font-size: 2.6em; }
  /* De foto van rand tot rand, zoals de banden. */
  .gids-hst__beeld { margin: 0 calc(-1 * var(--gids-rand)); }
  .gids-hst__beeld img { border-radius: 0; }
  .gids-papier p.gids-hst__onderschrift { max-width: none; padding: 0 var(--gids-rand); }
  /* In het navy blok is het kader van de foto de rand van het vlak (Dévin 25-10, ronde 61): de haarlijn loopt langs de boven- en zijrand en sluit aan op het bolletje; het onderschrift staat gelijk met de tekst. */
  .gids-hst.is-citaat .gids-hst__beeld { margin: calc(-1 * var(--g4)) -1.5em 0; }
  .gids-hst.is-citaat .gids-hst__kader { padding: .5em; border: 1px solid color-mix(in srgb, var(--ssn-surface) 40%, transparent); border-radius: var(--gids-r); }
  .gids-hst.is-citaat .gids-hst__beeld img, .gids-hst.is-citaat .gids-hst__kader img { border-radius: var(--_layout---border-radius--4px); }
  .gids-papier .gids-hst.is-citaat p.gids-hst__onderschrift { padding: 0 calc(.5em / .95 + 1px); }
  /* Eén ritme op de telefoon (Dévin 18-10, ronde 39: "op mobiel kloppen nog niet alle margins ... maak dit iets gedefinieerder"; gemeten waren de gaten tussen
     de hoofdstukken 89 tot 157 px): elk hoofdstuk, ook het navy, begint 5em boven zijn knoop, en het laatste blok van een hoofdstuk neemt geen eigen ruimte
     meer mee naar onderen. De rechtenband staat dichter op zijn tekst. */
  .gids-krant > .gids-hst, .gids-krant > .gids-hst:has(+ .gids-hst.is-citaat) + .gids-hst.is-citaat { padding-top: 5em; }
  .gids-hst > .gids-band:last-child { padding-bottom: 0; }
  .gids-hst > .gids-band.is-jaren:last-child { padding-bottom: 2.25em; }   /* het kader van de 80 jaar houdt ruimte onder (ronde 42), zoals boven */
  .gids-band.is-rechten { margin-top: 3em; padding-top: 2.5em; }
  /* De drie rechten krijgen lucht en een haarlijn ertussen (ronde 39: "sommige dingen hebben meer tussen lijnen nodig zoals sectie 1 de 3 rechten"). */
  /* Ronde 41 (Dévin: "je zou toch margins checken en netjes maken ook voor mobiel"): de lijn precies in het midden van de ruimte tussen twee rechten (2em boven,
     2em onder). De regel voor de rasters hieronder (991) zette de bovenruimte op 0; deze is specifieker. */
  .gids-band.is-rechten > .padding-global .gids-hst__raster { row-gap: 2em; }
  .gids-band.is-rechten > .padding-global .gids-hst__raster > .gids-recht + .gids-recht { margin-top: 0; padding-top: 2em; border-top: 1px solid var(--gids-lijn-zacht); }
  .is-rechten .gids-recht dt { margin-top: 1.3em; }
}

/* De navy knoop schaalt mee als de tijdlijn hem nadert (Dévin 25-10, ronde 60), zoals de stappen van de ingang: --kp van GIDS_AS_SCRIPT, zonder script 1. */
@media screen and (prefers-reduced-motion: no-preference) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst.is-citaat > .padding-global > .gids-knoop { scale: var(--kp, 1); }
}
/* De knoop van het navy hoofdstuk in het navy (Dévin 17-10: "de 02 rondje moet navy"), met een lichte rand en een licht cijfer. */
.gids-hst.is-citaat > .padding-global > .gids-knoop { --knoop-vlak: var(--_colors---swatch--black); --knoop-rand: color-mix(in srgb, var(--ssn-surface) 40%, transparent); color: color-mix(in srgb, var(--ssn-surface) 70%, transparent); }
/* "Nietig van rechtswege" in het midden, over de volle breedte (Dévin 17-10: "links of in het midden zodat het meer impact maakt"): de middenlijn komt er van
   boven in en gaat eronder verder (het citaat ligt erboven, in het navy van het vlak). Ons standpunt eronder, ook in het midden. */
@media screen and (min-width: 992px) {
  .is-citaat > .padding-global .is-citaat { grid-column: 1 / -1; position: relative; z-index: 3; justify-self: center; padding: 0 var(--g3) var(--g2); background-color: var(--_colors---swatch--black); text-align: center; }
  .is-citaat > .padding-global .is-citaat > .gids-tak { display: none; }
  .is-citaat > .padding-global .gids-citaat { padding-left: 0; }
  .gids-papier .gids-hst.is-citaat p.gids-wij { margin: 1.6em auto 0; }
}

/* --- Het kader om "Nietig van rechtswege" (ronde 32, terug in ronde 37; Dévin 18-10: "breng de kader van Nietig van rechtswege terug, die vond ik toch wel heel
       vet"). De stroken van het tekstvak van Mijn dossier (lijnKader uit lib/lijnvlak.mjs, de lijnen van css/87). Ze komen één keer op als de tijdlijn het
       hoofdstuk raakt en blijven dan staan (de visuals eenmalig, ronde 38). De tweede uitzondering op het maximum van regel 10 (css/LEESMIJ.md). --- */
.gids-lijnkader { --vl-kader-p: 2.6em; position: relative; box-sizing: border-box; padding: calc(var(--vl-kader-p) + 1.4em) calc(var(--vl-kader-p) + 2em); border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px); }
.gids-lijnkader > .gids-citaat { position: relative; z-index: 1; }
/* Op de telefoon smallere stroken en zijruimte, zodat "rechtswege" heel op een regel past (gemeten op 375: het woord 171 px, de ruimte 172 px). */
@media screen and (max-width: 767px) { .gids-lijnkader { --vl-kader-p: 1.4em; padding: calc(var(--vl-kader-p) + 1.4em) var(--vl-kader-p); } }
.gids-hst .vl-kader__lijnen { transition: opacity .9s var(--vl-zacht); }
@media (prefers-reduced-motion: no-preference) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst[data-raak]:not(.is-getoond) .gids-lijnkader .vl-kader__lijnen { opacity: 0; }   /* één keer (ronde 38/39): ze blijven staan als je terug omhoog scrolt */
}

/* --- De arcering: de patroonregel van de site (css/LEESMIJ.md regel 10; Dévin 18-10, zijn ontwerp van de tijdbalk: "niet letterlijk de boxen overnemen ... varieer en
       speel ... maak er een design regel van ... niet OVERAL, gewoon suptiel hier en daar"). De schuine lijnen van Mijn dossier (SPRITE uit lib/lijnvlak.mjs: 1px,
       6,1225 px uit elkaar onder 45 graden) binnen een vorm die er al is. Vol is wat vaststaat; gearceerd is wat kan, onder voorwaarden, of onbekend is. Twee
       mogelijkheden na elkaar lopen in een V tegen elkaar ("\" dan "/"). Kleur per vlak via --gids-arcering. --- */
.gids-arcering { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.gids-arcering svg { overflow: visible; }   /* de stijglijnen hangen aan de onderrand (een binnen-svg op y=100%); papa's normalize knipt die anders af, zoals in 87 */
.gids-arcering use { fill: none; stroke: var(--gids-arcering, var(--_colors---swatch--grey)); stroke-width: 1px; }

/* --- De naad tussen navy en beige (ronde 39 tot 42: een veeg, een zachte rand en een groeiend beige vlak met opacity, alle drie afgekeurd; Dévin 19-10: "die is
       to LELIJK en kappot"). Ronde 46: één harde naad, zonder tussenkleur. Waar beige onder een navy vlak begint (de strook onder de herofoto, het navy
       hoofdstuk), laat het vlak de onderbar niet in één keer los: onder het vlak hangt een navy dek (.gids-waas, hoogte --waas-h uit GIDS_AS_SCRIPT) met onderaan
       dezelfde omgekeerde hoekjes als het vlak (__hoeken). Het echte beige eronder komt zo als een scherpe lijn boven de onderbar op en groeit naar boven tot de
       hele kier beige is; er ligt nooit navy onder beige, en bij hoogte 0 is het gewoon het vlak. Alleen waar de onderbar is (992 en breder) en als beweging mag. --- */
.gids-waas { --waas-r: var(--gids-r); display: none; }
@media screen and (min-width: 992px) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-waas { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; height: var(--waas-h, 0em); pointer-events: none; }
  .gids-ingang__gap .gids-waas { --waas-r: var(--_layout---border-radius--8px); }
  .gids-waas__dek { position: absolute; inset: 0; background-color: var(--_colors---swatch--black); }
  .gids-waas__hoeken { position: absolute; top: 100%; left: 0; right: 0; height: var(--waas-r); background-repeat: no-repeat; background-size: var(--waas-r) var(--waas-r); background-position: left top, right top;
    background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--waas-r) - .5px), var(--_colors---swatch--black) var(--waas-r)), radial-gradient(circle at 0% 100%, transparent calc(var(--waas-r) - .5px), var(--_colors---swatch--black) var(--waas-r)); }
}

/* --- Het kader om de foto in stap 2, getekend door de tijdlijn (Dévin 18-10, ronde 39: "de tijdlijn stopt en dan begint hij de kader van de afbeelding te tekenen
       van precies dat punt waar hij raakt en als hij weer bij elkaar komt onderin moet de tijdlijn precies weer doorgaan"). Twee paden van het punt boven waar de
       middenlijn het kader raakt, links en rechts om de foto heen naar hetzelfde punt onder; GIDS_AS_SCRIPT zet hun vorm en hoe ver ze zijn (stroke-dashoffset).
       Het kader is navy van binnen, dus de lijn loopt erachter. Alleen waar de lijn door het navy vlak loopt (992 en breder); anders de gewone haarlijn. --- */
.gids-kader-lijn { display: none; }
@media screen and (min-width: 992px) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst.is-citaat .gids-hst__kader.is-getekend { position: relative; border-color: transparent; background-color: var(--_colors---swatch--black); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-hst__kader.is-getekend .gids-kader-lijn { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .gids-kader-lijn path { fill: none; stroke: color-mix(in srgb, var(--ssn-surface) 25%, transparent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: var(--kl, 0); }
}

/* Vorige / volgende onder een blad (ronde 59, lib/gids.mjs gidsBurenHtml): papa's stories-balk van de pandpagina (60, .pand-buren), in het navy onder het beige
   vlak. De navy strook erboven is even hoog als die onder de foto (97, .gids-ingang__gap: de paginamarge); die marge geeft het vlak zelf al (de naad eronder),
   dus de balk krijgt geen eigen marge (gemeten: .unlazy/gids-v19/gat.cjs). Een blad dat nog niet geschreven is: gedimd en niet klikbaar, zoals in het megamenu
   (72, ronde 53). */
/* Ronde 61 (Dévin 25-10: "een gap tussen het beige vlak [en de footer]... consistent aan de margin"): onder de balk dezelfde ruimte als erboven, de paginamarge. */
.gids-buren { padding-bottom: calc(2 * var(--_layout---padding-global--page-padding)); }
.gids-buren .pand-buren .is-volgt { opacity: .4; pointer-events: none; cursor: default; }
/* ============================================================================
   GIDS-VORMEN: DE ALGEMENE OPBOUW VAN EEN BLAD MET STAPPEN (Voor bedrijven, 25-10; bouwplan docs/superpowers/plans/2026-10-25-gids-blad-bedrijven.md, taak 3).
   lib/gids.mjs (gidsVormBlokken) zet per stap een vorm neer. Twee vormen bestaan al in 73-gids-blad (twee, tijdlijn) en het navy vlak (citaat) ook; hier staan de twee
   nieuwe: .is-stappen (vier bolletjes op een lijn, de markup van deel II van de ingang, 97) en .is-uitklap (regels die open en dicht gaan in de markup van de vragen
   van 66, met eronder de gearceerde regel van het kantoor daar, css/LEESMIJ.md regel 10).
   Alleen nieuwe selectors (regel 8), alleen tokens en em (regel 9), geen !important. Dit deel staat na 73-gids-blad en vóór 97-gids-ingang: de algemene regels van 97
   (.gids-deel__knopen, .gids-deel__stap, .gids-deel__arcering) gelden ook hier; de regels hieronder zijn specifieker en winnen waar het blad anders is.
   ============================================================================ */

/* --- Stappen: tekst links, kop rechts, daaronder over de volle breedte de vier bolletjes op een lijn --- */
.is-stappen > .padding-global .is-tekst { grid-column: 1 / 6; grid-row: 1; }
.is-stappen > .padding-global .is-kop { grid-column: 8 / 13; grid-row: 1; }
.is-stappen > .padding-global .is-figuur { grid-column: 1 / -1; grid-row: 2; padding-top: var(--g2); }
/* Vier kolommen (97 heeft er vijf, voor de vijf werkwoorden van de ingang); de lijn loopt van het eerste tot het vierde bolletje. */
.gids-hst.is-stappen .gids-deel__knopen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gids-hst.is-stappen .gids-deel__knopen::before { right: calc(25% - 1.28em); }
/* Het bolletje zit boven de lijn en heeft het vlak als achtergrond, dus de lijn loopt erachter (73: .gids-knoop). De titel in de letter van de kop van het citaat. */
.gids-hst.is-stappen .gids-deel__knopen li { font-size: 1em; gap: 1.1em; }
.gids-hst.is-stappen .gids-deel__stap { gap: .5em; }
.gids-hst.is-stappen .gids-deel__stap-titel { font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 1.7em; line-height: 1.05; letter-spacing: -.005em; color: var(--_colors---swatch--black); }
.gids-hst.is-stappen .gids-deel__stap-uitleg { font-size: .9em; line-height: 1.5; }

/* --- Uitklap: kop en tekst links, de regels rechts, met de gearceerde regel van het kantoor daar eronder --- */
.is-uitklap > .padding-global .is-kop { grid-column: 1 / 6; }
.is-uitklap > .padding-global .is-regels { grid-column: 8 / 13; }
.gids-papier .gids-hst.is-uitklap p.gids-deel__daar { display: flex; align-items: center; gap: 1em; max-width: none; margin: 2.2em 0 0; font-size: .9em; line-height: 1.5; color: var(--_colors---swatch--grey); }
.gids-hst.is-uitklap .gids-deel__arcering { flex: none; }

/* --- Het navy vlak als laatste hoofdstuk (Voor bedrijven): geen beige strook van de hoofdstukruimte (73: .gids-krant > .gids-hst:last-child) onder het navy; het vlak sluit
       direct aan op de vragen, zoals de naad onder het navy vlak van Freehold. --- */
.gids-krant > .gids-hst.is-citaat:last-child { padding-bottom: 0; }

/* --- Balans: plus en min (Zakelijk stap 2, Dévin 25-10: "dit is echt ups en downs bespreken"). Kop en inleiding links, de tekst rechts, zoals de tabel van Freehold (73:
       .is-tabel); daaronder de rechten-band (73: .gids-band, .gids-recht__term) met twee kanten in de kolommen naast de middenlijn: links wat de vorm geeft, rechts wat hij
       vraagt. Per punt het plus- of minteken van de vragen (66: .gids-vraag__ic) in de cirkel van een knoop, de titel in de letter van de stappen hierboven en de uitleg
       in de maat en het navy van een cel van de rechten (73: .gids-recht dd), zodat de band even zwaar weegt als de tekst erboven. Geen nummers, geen arcering. --- */
.is-balans > .padding-global .is-kop { grid-column: 1 / 6; }
.is-balans > .padding-global .is-tekst { grid-column: 8 / 12; padding-top: 2.6em; }
.is-balans .gids-balans__kant { grid-column: 1 / 6; }
.is-balans .gids-balans__kant + .gids-balans__kant { grid-column: 8 / 13; }
.gids-balans__lijst { display: grid; row-gap: 2em; margin: 2em 0 0; padding: 0; list-style: none; }
.gids-balans__lijst li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2em; align-items: start; }
.gids-hst.is-balans .gids-balans__teken { width: 2.56em; height: 2.56em; border: 1px solid var(--gids-lijn-zacht); border-radius: 50%; color: var(--_colors---swatch--black); }
.gids-hst.is-balans .gids-deel__stap { gap: .5em; padding-top: .35em; }
.gids-hst.is-balans .gids-deel__stap-titel { font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 1.7em; line-height: 1.05; letter-spacing: -.005em; color: var(--_colors---swatch--black); }
.gids-hst.is-balans .gids-deel__stap-uitleg { max-width: 22em; font-size: 1.05em; line-height: 1.6; color: var(--_colors---swatch--black); hyphens: auto; overflow-wrap: break-word; }

/* --- Aandeel: het aanbod per soort pand (Leasehold stap 1, 26-10, Dévin: "algemene cijfers ... in een custom diagram"). De schikking van Freehold stap 5 (73: .is-label):
       links het aantal groot (.gids-aantal), daaronder per soort een balk (.gids-verdeling__balk, met zijn kleuren per plek, de arcering van is-open en de groei
       van 73) en de legenda met de stippen (.gids-verdeling); rechts kop en tekst. Per soort de naam en de telling in de maat van de legenda van Freehold (73:
       .gids-verdeling li b en span). Geen nieuwe kleur, geen nieuwe lijn. --- */
.is-aandeel > .padding-global .is-beeld { grid-column: 1 / 6; }
.is-aandeel > .padding-global .is-kop { grid-column: 8 / 13; }
/* In de bron staat de tekst vóór de figuur (antwoord eerst, seo-poort); vanaf 992 delen ze de eerste rij, de figuur links. */
@media screen and (min-width: 992px) {
  .is-aandeel > .padding-global .is-beeld, .is-aandeel > .padding-global .is-kop { grid-row: 1; }
}
.gids-papier .gids-aandeel p.gids-visual__titel { margin: 2.6em 0 0; }
.gids-aandeel__soorten { display: grid; row-gap: 1.3em; margin: 1.2em 0 0; padding: 0; list-style: none; }
.gids-stuk p.gids-aandeel__soort { display: flex; align-items: baseline; column-gap: .8em; max-width: none; margin: 0; font-size: 1em; }
.gids-aandeel__soort span { font-size: 1em; line-height: 1.4; color: var(--_colors---swatch--black); }
.gids-aandeel__soort span:first-child { flex: 1 1 auto; }
.gids-aandeel__soort b { font-size: 1.7em; }
.gids-aandeel .gids-verdeling__balk { margin-top: .5em; }
.gids-aandeel .gids-verdeling { display: flex; flex-wrap: wrap; column-gap: 1.6em; margin-top: 1.8em; }

/* --- Uitklap gespiegeld (kant rechts, Leasehold stap 3): de regels links, kop en tekst rechts, zodat de kanten wisselen. Alleen vanaf 992: daaronder is het raster
       één kolom (73) en gelden de regels voor de telefoon hieronder. --- */
@media screen and (min-width: 992px) {
  .is-uitklap.is-rechts > .padding-global .is-kop { grid-column: 8 / 13; grid-row: 1; }
  .is-uitklap.is-rechts > .padding-global .is-regels { grid-column: 1 / 6; grid-row: 1; }
}

/* Tot 991 breed is het raster één kolom (73): de twee kanten onder elkaar, net als de rechten daar. */
@media screen and (max-width: 991px) {
  .is-balans > .padding-global .is-kop, .is-balans > .padding-global .is-tekst, .is-balans .gids-balans__kant, .is-balans .gids-balans__kant + .gids-balans__kant { grid-column: 1 / -1; }
  .gids-band.is-balans .gids-balans__kant + .gids-balans__kant { padding-top: 2em; border-top: 1px solid var(--gids-lijn-zacht); }
}

/* --- Het navy vlak als laatste stap (Zakelijk, Dévin 25-10): zonder onze zin onder het verboden vak heeft het vak geen navy rand eronder, zodat de middenlijn
   direct op de onderkant van het lijnkader begint (73 geeft het vak onderaan --g2 navy voor de zin van Freehold). --- */
/* Een blad aan een kader (Dévin 26-10: "een blad knop ... echt geintergreerd er aan vast met de radius eronder"): de blok van de ingang (97) onderaan in het kader,
   tot op de rand: zijn rand valt op die van het kader (min de padding en de 1px), en de radius van het kader gaat naar de onderkant van de blok. */
.gids-vak.is-kader > .gids-blok.is-vast { margin: 1.75em calc(-1.75em - 1px) calc(-2em - 1px); border-radius: 0 0 var(--_layout---border-radius--4px) var(--_layout---border-radius--4px); }
.gids-vak.is-kader > .gids-blok.is-vast { min-height: 0; padding: .85em .85em .85em 1.75em; border-color: var(--gids-lijn-zacht); }
/* Rustig (Dévin 26-10: "het moet minimaal blijven ... maak het suptiel, intergreer het in de visuals"): de naam op de maat van de kop van het kader, de tekst op
   de lijn van de tekst erboven (dezelfde 1.75em), het vakje kleiner. */
.gids-vak.is-kader > .gids-blok.is-vast .gids-blok__naam { font-size: 1.1em; }
.gids-vak.is-kader > .gids-blok.is-vast .gids-blok__pijl { width: 2.4em; height: 2.4em; }
@media screen and (min-width: 992px) {
  .is-citaat > .padding-global .is-citaat:not(:has(.gids-wij)) { padding-bottom: 0; }
}

/* --- De jarenbalk met twee banen (Wonen, 26-10): de tweede baan staat op de schaal van de eerste (lib/gids.mjs, jarenFiguur met een open eind). Na zijn termijn
       loopt hij gearceerd door tot dezelfde rand, in het grijs van het verste deel van de eerste baan (73): hier staat geen getal, want de wet noemt er geen.
       De 30 op de as staat midden op zijn streepje, niet aan de rand; het woord bij het open stuk staat op de lijn van de woorden ernaast. --- */
.gids-jaren + .gids-jaren { margin-top: 3em; }
.gids-jaren__balk i.is-open { --gids-arcering: var(--_colors---swatch--grey); }
.gids-jaren__deel.is-open { justify-content: flex-end; }
.gids-jaren.is-open .gids-jaren__as li:last-child { transform: translateX(-50%); }
.gids-jaren.is-open .gids-jaren__as li:last-child::before { left: 50%; right: auto; }

/* --- De telefoon: één kolom, eerst kop en tekst, dan de figuur of de regels. De bolletjes onder elkaar op een lijn, zoals op de ingang (97). --- */
@media screen and (max-width: 767px) {
  .is-stappen > .padding-global .is-kop, .is-uitklap > .padding-global .is-kop { grid-row: 1; }
  .is-stappen > .padding-global .is-tekst { grid-row: 2; }
  .is-stappen > .padding-global .is-figuur { grid-row: 3; }
  .is-uitklap > .padding-global .is-regels { grid-row: 2; }
  .is-stappen > .padding-global .is-tekst, .is-stappen > .padding-global .is-kop, .is-stappen > .padding-global .is-figuur,
  .is-uitklap > .padding-global .is-kop, .is-uitklap > .padding-global .is-regels { grid-column: 1 / -1; }
  .gids-hst.is-stappen .gids-deel__knopen { grid-template-columns: minmax(0, 1fr); row-gap: 1.2em; }
  .gids-hst.is-stappen .gids-deel__knopen::before { top: 1.04em; bottom: 1.04em; left: 1.04em; right: auto; width: 1px; height: auto; }
  .gids-hst.is-stappen .gids-deel__knopen li { flex-direction: row; align-items: center; gap: 1em; }
  /* De balans: kop, tekst, dan de twee kanten onder elkaar met een haarlijn ertussen, zoals de drie rechten op de telefoon (73). */
  .is-balans > .padding-global .is-kop { grid-row: 1; }
  .is-balans > .padding-global .is-tekst { grid-row: 2; padding-top: 0; }
  .gids-band.is-balans { margin-top: 3em; padding-top: 2.5em; }
}

/* --- De stapel (Onderzoek, Dévin 27-10: "uitleg rechts van de tijdlijn en de kaarten dan links"; gekozen uit stilstaande beelden: kaart A, telefoon a).
       Kop links, tekst rechts, zoals de tabel. Daaronder links een stapel kaarten die blijft staan (sticky), rechts de uitleg aan de middenlijn. Een kaart is
       een kopie van het kader van Freehold (73: .gids-vak.is-kader): haarlijn, label met een lijn eronder, het vlak van de pagina; daarin de naam in de letter
       van de koppen en een korte zin. GIDS_BLAD_SCRIPT zet per kaart is-actief, is-voor of is-achter. Zonder script: kaart 01 voorop, de rest erachter. --- */
.is-stapel > .padding-global .is-kop { grid-column: 1 / 6; }
.is-stapel > .padding-global .is-tekst { grid-column: 8 / 12; padding-top: 2.6em; }
.gids-stapel { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gids-goot); align-items: start; }
.gids-papier .gids-stapel p.gids-visual__titel { grid-column: 1 / 6; grid-row: 1; }
.gids-stapel__links { grid-column: 1 / 6; grid-row: 2; }
.gids-stapel__tafel { position: relative; aspect-ratio: 16 / 10; }
.gids-stapel__daar { display: flex; align-items: center; gap: .8em; margin: 1.4em 0 0; font-size: .85em; line-height: 1.4; color: var(--_colors---swatch--black); }
/* Een kaart op de stapel. Zonder klasse: per kaart een stap naar rechtsboven, kaart 01 voorop. */
.gids-stapel__tafel .gids-vel { position: absolute; left: 0; right: 6%; top: 8%; height: 82%; z-index: calc(9 - var(--i)); box-sizing: border-box;
  transform: translate(calc(var(--i) * 3%), calc(var(--i) * -4.5%)); transition: transform .8s var(--gids-ease), opacity .6s var(--gids-ease); }
.gids-papier .gids-stapel p.gids-vel__naam { margin: 0; font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 3.4em; line-height: 1; color: var(--_colors---swatch--black); }
.gids-papier .gids-stapel p.gids-vel__zin { margin: .7em 0 0; font-size: 1.2em; font-weight: 500; line-height: 1.4; color: var(--_colors---swatch--black); }
.gids-vel.is-los { display: none; }
html:not([data-ssn-motion="reduced"]) .gids-stapel.is-loopt .gids-stapel__tafel .gids-vel.is-actief { z-index: 10; transform: none; }
html:not([data-ssn-motion="reduced"]) .gids-stapel.is-loopt .gids-stapel__tafel .gids-vel.is-achter { transform: translate(calc((var(--i) - var(--k)) * 3%), calc((var(--i) - var(--k)) * -4.5%)); }
html:not([data-ssn-motion="reduced"]) .gids-stapel.is-loopt .gids-stapel__tafel .gids-vel.is-voor { opacity: 0; transform: translateY(-12%); }
/* Rechts: de uitleg aan de middenlijn. Het merk is rechthoekig (niet de cirkel van een stap); dat van het item voorop is vol. */
.gids-stapel__lijst { grid-column: 7 / 13; grid-row: 2; display: grid; row-gap: 6em; margin: 0; padding: 4em 0 10em; list-style: none; }
.gids-stapel__lijst li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.2em; align-items: start; padding-left: 2.6em; }
.gids-stapel__lijst li > .gids-tak.is-stapel { top: .72em; left: calc(-.5 * var(--gids-goot)); width: calc(.5 * var(--gids-goot) + 2.6em); transform-origin: left center; }
.gids-vel__merk { margin-top: .35em; padding: .3em .55em; border: 1px solid var(--_colors---swatch--black); font-size: .62em; line-height: 1; letter-spacing: .1em; color: var(--_colors---swatch--black); transition: background-color .4s var(--gids-ease), color .4s var(--gids-ease); }
.gids-stapel__lijst li.is-actief .gids-vel__merk { background-color: var(--_colors---swatch--black); color: var(--ssn-surface); }
.gids-hst.is-stapel .gids-deel__stap { gap: .5em; }
.gids-hst.is-stapel .gids-deel__stap-titel { font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400; font-size: 1.7em; line-height: 1.05; color: var(--_colors---swatch--black); }
.gids-hst.is-stapel .gids-deel__stap-uitleg { max-width: 24em; font-size: 1.05em; line-height: 1.6; color: var(--_colors---swatch--black); }
@media screen and (min-width: 992px) {
  .gids-stapel__links { position: sticky; top: 7em; }
}
/* Tot 991 breed (telefoon a): geen stapel. Elke stap draagt zijn eigen kaart boven de uitleg; de naam staat op de kaart. */
@media screen and (max-width: 991px) {
  .is-stapel > .padding-global .is-kop, .is-stapel > .padding-global .is-tekst { grid-column: 1 / -1; padding-top: 0; }
  .gids-stapel { grid-row: auto; grid-template-columns: minmax(0, 1fr); row-gap: 1.6em; }
  .gids-papier .gids-stapel p.gids-visual__titel, .gids-stapel__lijst, .gids-stapel__links { grid-column: 1; }
  .gids-stapel__lijst { grid-row: 2; row-gap: 3.2em; padding: 0; }
  .gids-stapel__links { grid-row: 3; }
  .gids-stapel__tafel { display: none; }
  .gids-stapel__lijst li { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .gids-stapel__lijst li > .gids-tak.is-stapel, .gids-vel__merk, .gids-hst.is-stapel .gids-deel__stap-titel { display: none; }
  .gids-vel.is-los { display: block; margin-bottom: 1.4em; padding: 1.3em 1.3em 1.5em; }
  .gids-papier .gids-stapel .gids-vel.is-los p.gids-vel__naam { font-size: 2.4em; }
  .gids-papier .gids-stapel .gids-vel.is-los p.gids-vel__zin { font-size: 1.05em; }
}

/* --- Drie rollen (Onderzoek): de band van de vergelijking (73: .is-rechten). De derde rol is het kantoor daar en draagt voor zijn naam de arcering van de uitklap
       (97: .gids-deel__arcering), op de maat van de lopende tekst: wat daar gebeurt, is niet van ons (css/LEESMIJ.md regel 10). --- */
.gids-recht.is-daar .gids-recht__term { display: flex; flex-wrap: wrap; align-items: center; column-gap: .25em; }
.gids-recht__term > .gids-deel__arcering { font-size: .33em; }

/* --- Vijf vragen in de vragenrij (Onderzoek): vijf kolommen, zoals deel II van de ingang (97), de lijn tot het vijfde bolletje. --- */
@media screen and (min-width: 768px) {
  /* Alleen op de bladen: de ingang (.gids-deel) zet zijn vijf stappen zelf om en om op de middenlijn (97); deze regel stond daar met meer gewicht overheen en zette ze naast elkaar. */
  .gids-hst.is-stappen:not(.gids-deel) .gids-deel__knopen:has(> li:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gids-hst.is-stappen:not(.gids-deel) .gids-deel__knopen:has(> li:nth-child(5))::before { right: calc(20% - 1.28em); }
}
/* ============================================================
   GIDS · KRANT
   De ingang /nl/guide (spec 2026-10-10-gids-index-design.md, update 11-10; vel en balk: spec 2026-10-12-gids-v4-krant-design.md, unit 2): een beige vel
   in een navy kader, met de gewone header erboven en de gewone footer eronder. Het vel is een kopie van het beige vlak onderaan de homepage (.stories-cta):
   papa's beige, bovenhoeken het 12px-token, onderhoeken 0, zijmarge de page-padding (gelijk met de navbar); de marge boven is ook de page-padding, onder
   de header. Het vel loopt zonder marge door tot de footer. overflow: clip in plaats van hidden, zodat de rubriekbalk (69-gids-rubriekbalk) kan plakken. Binnen het vel geen dozen, geen radius en geen randen: losse lijnen (.gids-lijn) die zich in beeld tekenen zoals papa's
   devider, en verder witruimte. Naambord met twee oren, splash, rubriekbalk, kicker, kop, standfirst, byline, initiaal, "In cijfers", streamer, register, colofon. Voorbeelden: FD (verhaalvormen en infographics),
   The Observer (naambord met oren, splash, standfirst), NYT (kolomlijnen, byline, initiaal), regionale dagbladen zoals het Noordhollands Dagblad
   (kicker boven de kop, genummerd lijstje) en Works That Work (rustige lange tekst).
   Alleen bestaande tokens: --_colors---swatch--beige (papier), --_colors---swatch--black (navy), --kaart-taupe-diep en -licht (75), --ssn-accent alleen
   voor de focusrand. Het kader loopt op elke breedte gelijk met de header (gemeten in verify-gids-v4 --deel=balk).
   ============================================================ */
body[data-gids="krant"], body[data-gids="krant"] .page-wrapper, body[data-gids="krant"] .main-wrapper { background-color: var(--_colors---swatch--black); }
/* Het vel zet zijn tekst op 1.25 keer de basis (--gids-vel-schaal). Papa's radiustoken is .75em en groeit daarmee mee; gedeeld door de schaal is hij
   weer precies de radius van .stories-cta (9px op 1440). */
/* Boven: de hoogte van de grote navbar (4.5em, mobiel 4em) plus twee keer de page-padding (boven de navbar en tussen navbar en vel). */
.gids-kader { --gids-kop: 4.5em; padding: calc(var(--gids-kop) + 2 * var(--_layout---padding-global--page-padding)) var(--_layout---padding-global--page-padding) 0; background: var(--_colors---swatch--black); }
.gids-kader > .gids-krant { --gids-vel-x: clamp(calc(var(--vl-rem) * 1), calc(var(--size-font) * 4.2), calc(var(--vl-rem) * 3.5)); border-radius: calc(var(--_layout---border-radius--12px) / var(--gids-vel-schaal)) calc(var(--_layout---border-radius--12px) / var(--gids-vel-schaal)) 0 0; overflow: clip;
  padding: 0 var(--gids-vel-x) clamp(calc(var(--vl-rem) * 1.5), calc(var(--size-font) * 3.6), calc(var(--vl-rem) * 3)); --gids-vel-schaal: 1.25; font-size: max(calc(var(--gids-vel-schaal) * 1em), calc(var(--vl-rem) * .9375)); background-color: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); }
.gids-krant a { color: inherit; text-decoration: none; }
.gids-krant a:focus-visible { outline: 2px solid var(--ssn-accent); outline-offset: 3px; }
.gids-krant h1, .gids-krant h2, .gids-krant p, .gids-krant ol, .gids-krant ul, .gids-krant figure { margin: 0; }

/* Het naambord: oor, naam, oor. Daaronder een dubbele lijn die vanuit het midden groeit. */
.gids-krant__naambord { display: grid; grid-template-columns: minmax(9em, 1fr) minmax(0, 2.4fr) minmax(9em, 1fr); align-items: center; gap: 1.5em; padding: 1.75em 0 1.25em; }
.gids-krant__oor { display: flex; flex-direction: column; gap: .35em; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; }
.gids-krant__oor.is-rechts { text-align: right; }
.gids-krant .gids-krant__naam { display: flex; flex-direction: column; align-items: stretch; text-align: center; font-weight: 400; font-size: 1em; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.gids-krant__woordmerk { text-transform: none; font-family: var(--_fonts---fonts--heading); font-size: clamp(calc(var(--vl-rem) * 3.2), calc(var(--size-font) * 9.6), calc(var(--vl-rem) * 7.5)); line-height: .9; letter-spacing: -.02em; }
.gids-krant__motto { margin-top: .6em; text-transform: none; letter-spacing: 0; font-family: var(--_fonts---fonts--heading); font-style: italic; font-size: 1.05em; }

/* De splash: de foto over de volle breedte van het vel, met de kleine radius (8px-token, gedeeld door de schaal) en linksboven het kruimelblok (v4 unit 3).
   Een bijschrift alleen als het manifest er een heeft. Het kruimelblok krijgt de basisgrootte terug, zodat het even groot is als in de banner van een blad. */
.gids-krant__splash { margin-top: 1.5em; }
.gids-krant__beeld { position: relative; }
.gids-krant__splash a { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: calc(var(--_layout---border-radius--8px) / var(--gids-vel-schaal)); background: var(--kaart-taupe-licht); }
.gids-krant__beeld .gids-kruimel { position: absolute; top: 2em; left: 3em; margin: 0; font-size: calc(1em / var(--gids-vel-schaal)); }
.gids-krant__splash img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.gids-krant .gids-krant__bijschrift { padding-top: .5em; font-size: .7em; letter-spacing: .04em; text-align: right; }

/* De voorpagina: het hoofdverhaal en rechts een smalle kolom, met witruimte ertussen en geen lijn. */
.gids-krant__voor { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); margin-top: 2.25em; padding-bottom: 1em; }
.gids-krant__lead { padding-right: 3.5em; }
.gids-krant .gids-krant__kicker { margin-bottom: .8em; font-size: .7em; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.gids-krant__zij > .gids-lijn { margin-top: 2.5em; }
.gids-krant .gids-krant__kicker.is-tweede { margin-top: 1.25em; }
.gids-krant__kop { font-family: var(--_fonts---fonts--heading); font-weight: 400; font-size: clamp(calc(var(--vl-rem) * 2), calc(var(--size-font) * 4.32), calc(var(--vl-rem) * 3.4)); line-height: 1.04; letter-spacing: -.01em; text-transform: none; }
.gids-krant .gids-krant__kop.is-klein { font-size: 1.5em; line-height: 1.15; margin-bottom: 1em; }
.gids-krant__kop a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.gids-krant .gids-krant__standfirst { margin-top: .7em; max-width: 34em; font-family: var(--_fonts---fonts--heading); font-size: 1.3em; line-height: 1.35; }
.gids-krant .gids-krant__byline { margin-top: 1.1em; font-size: .72em; letter-spacing: .08em; text-transform: uppercase; }
.gids-krant__kolommen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2em; margin-top: 1.5em; }
.gids-krant__initiaal { font-size: 1.05em; line-height: 1.6; }
.gids-krant__initiaal::first-letter { float: left; font-family: var(--_fonts---fonts--heading); font-size: 4.1em; line-height: .82; padding: .06em .06em 0 0; margin-right: .04em; }
.gids-krant .gids-krant__klein-kop { margin-bottom: .6em; font-size: .7em; letter-spacing: .1em; text-transform: uppercase; }
.gids-krant__inhoud ol, .gids-krant__binnenkort { padding: 0; list-style: none; counter-reset: k; }
.gids-krant__inhoud li, .gids-krant__binnenkort li { counter-increment: k; display: flex; gap: .7em; align-items: baseline; padding: .45em 0; font-size: .95em; line-height: 1.3; }
.gids-krant__inhoud li::before, .gids-krant__binnenkort li::before { content: counter(k); font-family: var(--_fonts---fonts--heading); font-size: 1.35em; min-width: .8em; }
.gids-krant a.gids-krant__verder { display: inline-flex; align-items: center; min-height: 44px; margin-top: .5em; font-size: .75em; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; }
.gids-krant .gids-krant__klein { margin-top: .8em; font-size: .78em; line-height: 1.5; }

/* De grafiek: één balk, de breedte is het aandeel; het getal in het deel, de naam eronder. */
.gids-balk__rij { display: flex; gap: 2px; }
.gids-balk__deel { display: flex; flex-direction: column; justify-content: space-between; flex-basis: 0; min-width: 4.5em; min-height: 7.5em; padding: .6em .6em .5em; box-sizing: border-box; background: var(--kaart-taupe-licht); color: var(--_colors---swatch--black); }
.gids-balk__deel.is-freehold { background: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); }
.gids-balk__deel.is-leasehold { background: var(--kaart-taupe-diep); color: var(--_colors---swatch--black); }
a.gids-balk__deel { transition: opacity .2s; }
a.gids-balk__deel:hover { opacity: .88; }
.gids-balk__getal { font-family: var(--_fonts---fonts--heading); font-size: 1.75em; line-height: 1; }
.gids-balk__naam { font-size: .68em; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }

/* De streamer: één zin in de koptekst, onder een dubbele lijn. Het register volgt zonder lijn ertussen. */
.gids-krant__voor + .gids-lijn { margin-top: 2.5em; }
.gids-krant .gids-krant__streamer { padding: 1.4em 0 1.6em; font-family: var(--_fonts---fonts--heading); font-style: italic; font-size: clamp(calc(var(--vl-rem) * 1.3), calc(var(--size-font) * 2.64), calc(var(--vl-rem) * 2)); line-height: 1.25; text-align: center; max-width: none; }

/* Het register: vijf takken naast elkaar zonder ruimte ertussen, zodat de lijnen boven de takken één lijn vormen die na elkaar tekent.
   De ruimte tussen de kolommen zit rechts in de inhoud; geen kolomlijnen. Een regel per gids met een stippellijn zoals een inhoudsopgave. */
.gids-register { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 0 2.5em; }
.gids-register__tak { scroll-margin-top: calc(var(--vl-rem) * 9); }
.gids-register__tak > :not(.gids-lijn) { padding-right: 1.5em; }
.gids-register__tak:last-child > :not(.gids-lijn) { padding-right: 0; }
.gids-register__tak > .gids-lijn { margin-bottom: 1.25em; }
.gids-register__nr { font-family: var(--_fonts---fonts--heading); font-size: 2.6em; line-height: 1; }
.gids-krant .gids-register__kop { margin: .45em 0 .15em; font-family: var(--_fonts---fonts--heading); font-size: 1.3em; font-weight: 400; line-height: 1.2; text-transform: none; }
.gids-krant .gids-register__vraag { margin-bottom: 1em; font-size: .95em; font-style: italic; }
.gids-register ul { padding: 0; list-style: none; }
.gids-register__regel { display: flex; align-items: baseline; gap: .4em; min-height: 44px; padding: .55em 0; box-sizing: border-box; font-size: 1em; line-height: 1.3; }
.gids-register__stip { flex: 1 1 1em; min-width: 1em; border-bottom: 1px dotted currentColor; transform: translateY(-.25em); opacity: .5; }
.gids-register__stand { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
a.gids-register__regel { font-weight: 500; }
a.gids-register__regel:hover .gids-register__stand { text-decoration: underline; text-underline-offset: .3em; }
.gids-register__regel.is-volgt { opacity: .62; }

.gids-krant__colofon { padding-top: 1.5em; columns: 2 22em; column-gap: 3em; }
.gids-krant .gids-krant__colofon p { font-size: .78em; line-height: 1.55; margin-bottom: .6em; break-inside: avoid; }

/* Tablet: het register in drie kolommen; de voorpagina stapelt onder 992. */
@media screen and (max-width: 1199px) {
  .gids-register { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2em; }
  .gids-register__tak:nth-child(3n) > :not(.gids-lijn) { padding-right: 0; }
}
@media screen and (max-width: 991px) {
  .gids-krant__voor { grid-template-columns: minmax(0, 1fr); }
  .gids-krant__lead { padding-right: 0; padding-bottom: 1em; }
  .gids-krant__zij { padding: 1.5em 0 0; }
}
/* Mobiel: één kolom, het kader blijft (dun, gelijk met de header). De naam boven, de twee oren naast elkaar eronder. */
@media screen and (max-width: 767px) {
  .gids-kader { --gids-kop: 4em; }
  .gids-krant__naambord { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75em 1em; }
  .gids-krant__naam { grid-column: 1 / -1; order: -1; }
  .gids-krant__oor span + span { display: none; }
  .gids-krant__splash a { aspect-ratio: 4 / 3; }
  .gids-krant__beeld .gids-kruimel { top: 1.25em; left: 1.25em; }
  .gids-krant__beeld .gids-kruimel__cel { height: 2.75em; padding: 0 1em; font-size: .85em; }
  .gids-krant__kolommen { grid-template-columns: minmax(0, 1fr); }
  .gids-register { grid-template-columns: minmax(0, 1fr); row-gap: 1.75em; }
  .gids-register__tak > :not(.gids-lijn) { padding-right: 0; }
}
html[data-ssn-motion="reduced"] a.gids-balk__deel { transition: none; }
/* Papa zet spans op één regel (en verbergt figcaption met !important, daarom is het bijschrift een alinea): de oren en de ondertitel lopen gewoon door. */
.gids-krant__oor span, .gids-krant__naam span { white-space: normal; overflow-wrap: break-word; min-width: 0; }

/* De lijn, naar papa's devider: navy op 60%, groeit in 1200 ms met zijn ease als hij in beeld komt (GIDS_LIJN_SCRIPT zet .is-getekend).
   Standaard staat hij er helemaal: alleen als het script de html .gids-lijn-wacht geeft (JavaScript aan, geen Minder beweging) begint hij op nul.
   --i is de volgorde binnen een rij (het register): 120 ms per stap, zodat de vijf stukken als één lijn over de pagina lopen.
   De dubbele lijn is twee keer 1px met 2px papier ertussen, in dezelfde lijnstijl (geen border-style double). */
.gids-lijn { display: block; height: 1px; background: var(--_colors---swatch--black); opacity: .6; transform-origin: left center; transition: transform 1200ms cubic-bezier(.625, .05, 0, 1) calc(var(--i, 0) * 120ms); }
.gids-lijn.is-midden { transform-origin: center; }
.gids-lijn.is-dubbel { height: var(--_sizes---size--4px); box-sizing: border-box; background: transparent; border-top: 1px solid var(--_colors---swatch--black); border-bottom: 1px solid var(--_colors---swatch--black); }
html.gids-lijn-wacht .gids-lijn:not(.is-getekend) { transform: scaleX(0); }
html[data-ssn-motion="reduced"] .gids-lijn { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .gids-lijn { transition: none; } }
/* ============================================================
   KAARTEN OP ELKAAR (telefoon en tablet)
   De wisselkaarten ("Wie regelt jouw koop?" op de homepage, "Welke rechten kun je op Bali hebben?" op de Gids) staan onder 992px onder elkaar. Ze vallen op
   elkaar zoals de stappen van "Zo werkt het": elke kaart blijft bovenaan staan terwijl de volgende er overheen schuift. Dat vastzetten doet GSAP (ScrollTrigger
   pin, in het waaier-script van de homepage in ssn-home.html, dat de Gids overneemt): papa's site draait op ScrollSmoother, daar werkt position: sticky niet.
   Deze CSS doet het andere: de kaarten zijn zo breed als de balk van de header, en onderaan is lucht voor het laatste stuk.
   Dévin 09-10: "voor mobiel header breedte en op elkaar vallen, ook in de homepage". Boven 992px doet de waaier het werk; daar verandert niets.
   ============================================================ */
@media (max-width: 991px) {
  .section_cta-cards .cta-cards-wrap { margin-inline: -1.35em; padding-bottom: 3em; row-gap: 3em; }
}
/* ============================================================================
   GIDS-POORT: het dichte blad en het openvouwen na het inloggen (lib/gids-poort.mjs; Dévin 23-10, tweede ronde: "het beige vlak niet inladen en
   gewoon navy houden met het navy inlog vlak ... dan is het aanmeldvak het einde", "de geblurde tekst moet een lange beige onder fade krijgen",
   "de toggle moet beige achtergrond krijgen", "het beige inhoud vlak een nette groeiende animatie").
   - Het vlak houdt de kop van het blad; daaronder één scherm met stap 01 als vooraf geblurde foto en de echte tijdlijn met knoop 01, met de fade
     van de Lombok-sectie op de homepage naar het navy.
   - In dat scherm gecentreerd: het aanmeldpaneel van het dossier (81, .ssn-inlog) als vak, de beige kaart zoals in het dossier, met rechts in de titelbalk
     het oranje bolletje van de tijdlijn als berichtbadge.
   - De reclameschakelaar = die van de eindvraag van het dossier (92, .vl-schakel), met het navy boxje zoals in stap 4.
   - Het open blad na het inloggen (html.gids-groeit): het papier vouwt open van boven naar beneden, papa's ease, alleen als beweging mag.
   ============================================================================ */
/* --- Het vak van één scherm onder de kop (derde ronde). Het vlak eindigt erop (geen binnenruimte onder) en lost op in het navy met de fade van de
       Lombok-sectie op de homepage: papa's .image-parallax.fade-bottom-custom is linear-gradient(#000 50%, #0000 100%) over die sectie; hier over het vak
       van één scherm, dus dekkend tot een half scherm boven de onderrand. Het masker zit op het vlak zelf, zodat ook het beige erachter oplost. --- */
.cta-wrap.is-gids:has(> .gids-ingang > .gids-poort) { padding-bottom: 0;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / 1) calc(100% - 50svh), rgb(0 0 0 / 0.957) calc(100% - 43.75svh), rgb(0 0 0 / 0.844) calc(100% - 37.5svh), rgb(0 0 0 / 0.684) calc(100% - 31.25svh), rgb(0 0 0 / 0.5) calc(100% - 25.0svh), rgb(0 0 0 / 0.316) calc(100% - 18.75svh), rgb(0 0 0 / 0.156) calc(100% - 12.5svh), rgb(0 0 0 / 0.043) calc(100% - 6.25svh), rgb(0 0 0 / 0) calc(100% - 0svh)); mask-image: linear-gradient(rgb(0 0 0 / 1) calc(100% - 50svh), rgb(0 0 0 / 0.957) calc(100% - 43.75svh), rgb(0 0 0 / 0.844) calc(100% - 37.5svh), rgb(0 0 0 / 0.684) calc(100% - 31.25svh), rgb(0 0 0 / 0.5) calc(100% - 25.0svh), rgb(0 0 0 / 0.316) calc(100% - 18.75svh), rgb(0 0 0 / 0.156) calc(100% - 12.5svh), rgb(0 0 0 / 0.043) calc(100% - 6.25svh), rgb(0 0 0 / 0) calc(100% - 0svh)); }
.section_aanbod.is-gids:has(.gids-poort) .aanbod-sticky-naad { display: none; }
.gids-poort { position: relative; height: 100svh; min-height: 36em; overflow: hidden; pointer-events: none; user-select: none; }
.gids-poort .gids-papier.is-dicht { position: relative; height: 100%; }
.gids-poort .gids-krant { height: 100%; }
/* De foto ligt waar de tekst van stap 01 op het open blad staat: bovenaan het papier, over de breedte van het vlak (zo is hij opgenomen). De knoop en de
   tijdlijn liggen erboven, scherp. De foto komt binnen zoals de vakken van een hoofdstuk (73: .8 s omhoog, op .is-in van GIDS_BLAD_SCRIPT). */
.gids-poort__beeld { position: absolute; z-index: 1; top: 0; left: calc(-1 * var(--_layout---padding-global--page-padding)); right: calc(-1 * var(--_layout---padding-global--page-padding)); }
.gids-poort__beeld img { display: block; width: 100%; height: auto; }
.gids-poort .gids-hst.is-poort > .padding-global { z-index: 3; }
html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-poort .gids-hst .gids-poort__beeld { transition: opacity .8s var(--gids-ease), transform .8s var(--gids-ease) .1s; }
html.gids-blad-wacht:not([data-ssn-motion="reduced"]) .gids-poort .gids-hst:not(.is-in) .gids-poort__beeld { opacity: 0; transform: translateY(1.5em); }
/* Voor een schermlezer: wat er achter het vak staat (het veld zelf is aria-hidden). */
.gids-poort__weg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Het vak, gecentreerd in dat ene scherm: het ligt over het veld (een scherm terug omhoog), buiten het masker, dus het lost niet mee op. De tijdlijn
       eindigt op zijn bovenrand (de lege .gids-vloer). --- */
.gids-poort-vak { position: relative; z-index: 2; height: 100svh; min-height: 36em; margin-top: -100svh; pointer-events: none; }
.gids-poort-vak > .padding-global { height: 100%; }
.gids-poort__midden { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.gids-poort-vak .gids-vloer.is-poort { width: 1px; height: 0; margin: 0; }
.gids-poort__plek { width: min(100%, 32em); pointer-events: auto; font-size: max(var(--_paragraphs---paragraph-regular--font-size), calc(var(--vl-rem) * .6875)); color: var(--_colors---swatch--black); }
/* Zonder script (en tot het paneel er is): de titel en de zin; de knop naar het dossier alleen zonder script of als het paneel niet laadt. */
.gids-poort__plek > .gids-poort__titel, .gids-poort__plek > .gids-poort__tekst, .gids-poort__plek > .gids-poort__terug { margin: 0; padding: 0 1.4em 1.2em; line-height: 1.5; }
.gids-poort__plek > .gids-poort__titel { padding-top: 1.4em; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
html.w-mod-js .gids-poort__plek:not(.is-zonder-paneel) > .gids-poort__terug { display: none; }

/* --- Het paneel als vak: de beige kaart van het dossier (81), alleen niet zwevend (Dévin 23-10, vierde ronde: "het inlog form moet toch gewoon beige").
       (0,4,0) wint van .cta-wrap.vl-paneel.ssn-inlog (81) in elke volgorde. --- */
.gids-poort__plek .cta-wrap.vl-paneel.ssn-inlog { position: static; display: flex; width: 100%; max-width: none; max-height: none; margin: 0; transform: none; opacity: 1; visibility: visible; transition: none; }
.gids-poort__plek .ssn-inlog__inhoud { overflow: visible; }
/* Het oranje bolletje rechts in de titelbalk, als een berichtbadge: het punt onderaan de tijdlijn (73, .gids-aanloop__punt, de oranje globe van het logo). */
.gids-poort__plek .ssn-inlog__kop { padding-right: var(--kaart-in); align-items: center; }
.gids-poort__punt { position: relative; display: block; flex: 0 0 auto; width: .85em; height: .85em; background: url(/images/stip.svg) center / contain no-repeat; }
/* De puls: een ring dijt uit en dooft, als bij een bericht dat wacht (Dévin 25-10); stil bij Minder beweging. */
.gids-poort__punt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ssn-accent) 60%, transparent); opacity: 0; pointer-events: none; }
html:not([data-ssn-motion="reduced"]) .gids-poort__punt::after { animation: gids-poort-puls 2.4s cubic-bezier(.16, 1, .3, 1) 1.2s infinite; }
@keyframes gids-poort-puls { from { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ssn-accent) 60%, transparent); } 70%, to { opacity: 0; box-shadow: 0 0 0 .75em color-mix(in srgb, var(--ssn-accent) 0%, transparent); } }
html:not([data-ssn-motion="reduced"]) .gids-poort__punt { animation: gids-poort-punt .5s cubic-bezier(.16, 1, .3, 1) .4s both; }
@keyframes gids-poort-punt { from { scale: 0; } to { scale: 1; } }

/* De reclameschakelaar onder het e-mailveld staat in css/81-account-inlog.css: één bron voor de popup van het dossier en dit vak. */

/* --- Op de telefoon (Dévin 26-10): de foto van stap 01 zonder zijmarge, het vak zo breed als de header, onderaan het scherm vlak boven Vorige en Volgende
       (dus ook onder afgerond: het zit niet vast aan de rand van het scherm), en de middenlijn loopt van knoop 01 door tot het vak (GIDS_AS_SCRIPT), zonder de
       dwarslijn door 01. --- */
@media screen and (max-width: 991px) {
  .gids-poort { overflow-x: visible; overflow-y: clip; }
  .gids-poort .gids-hst.is-poort > .padding-global::after { display: none; }
}
@media screen and (max-width: 767px) {
  .gids-poort__midden { justify-content: flex-end; padding-bottom: 1.5em; }
  .gids-poort__plek { width: 100%; }
  .gids-poort__plek .cta-wrap.vl-paneel.ssn-inlog { border-radius: var(--_layout---border-radius--12px); }
}

/* --- Het open blad na het inloggen: het papier vouwt open (GIDS_GROEI_IN_SCRIPT zet html.gids-groeit) --- */
@keyframes gids-poort-open { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
html.gids-groeit:not([data-ssn-motion="reduced"]) .gids-papier { animation: gids-poort-open 1.6s cubic-bezier(.625, .05, 0, 1) both; }


/* ============================================================================
   KAART OP DE PANDPAGINA (26-09) — docs/superpowers/specs/2026-09-26-pandpagina-kaart-design.md
   Het vierkant naast de eigenschappen, op de plek van de lijstfoto. Motor: vendor/kaart/kaart.js,
   HTML: lib/kaart.mjs, data: /nl/kaart/ (bouw-kaart.mjs).

   Overgenomen, niet nieuw bedacht: de ronde knop = .popup-button + .popup-bg van de WhatsApp-popup
   (navy-60 + blur(4px), 1px grey, radius 4px); het tagje = het uiterlijk van papa's .cursor (beige
   vlak, navy tekst); de kop = .eyebrow-style (IvyPresto); de maps-link = .btn-animate-chars.
   Eén nieuwe kleur, Dévins keuze van 26-09: taupe voor de wegen. Alleen hier, alleen voor kaarten.
   ============================================================================ */
:root {
  --kaart-taupe-licht: #d8cdbf;   /* straatjes */
  --kaart-taupe: #beb1a1;         /* hoofdwegen en het vliegveld */
  --kaart-taupe-diep: #a89a89;    /* de grote doorgaande wegen */
}

/* Papa's .gallery-group is een flexrij: het blok moet de hele breedte pakken, anders klapt het dicht
   (zijn oude .pand-lijst deed hetzelfde met width: 100%). */
/* Het blok zelf rekent op de letterbasis van de site, net als de header: zelfde token, zelfde basis, dus
   exact dezelfde hoek en rand als de header. Alles ín de kaart schaalt mee met de kaart zelf (350 px op de
   telefoon, 520 op de desktop); browsers zonder container-queries houden de vaste 1rem. De lijnkleur is
   de grijze uit de canon; --pand-lijn bestaat alleen binnen de fotolade. */
.kaart-blok { width: 100%; container-type: inline-size; }
/* Alles ín de kaart rekent op één maat, en die groeit mee met de lettermaat van de hele site (--size-font, dezelfde
   bron als de body en elke knop), zoals alle andere onderdelen (Dévin 27-09). 1,4 × de sitemaat = 16,8 px op 1440,
   precies de maat van vóór deze wijziging; op de telefoon 18 px in plaats van de 12 px die de oude kaartbreedte-maat
   gaf (toen waren knoppen en tekst daar te klein). De maat-tokens schalen mee; --_sizes---size--8px blijft de
   afstand tot de rand, voor alles in de kaart. */
.kaart > :not(.kaart-svg) { font-size: var(--kaart-basis); }
.kaart {
  --kaart-basis: calc(var(--size-font) * 1.4);
  --kaart-fade: .52s;                                /* --duration-base */
  /* Curves en duren uit het designsysteem (tokens.md §10); de statische site kent die variabelen niet. */
  --kaart-ease: cubic-bezier(.76, 0, .24, 1);        /* --ease-ssn */
  --kaart-ease-uit: cubic-bezier(.16, 1, .3, 1);     /* --ease-ssn-out */
  --kaart-micro: .2s;                                /* --duration-micro */
  /* HET VLAK — één kleur voor alles wat op de kaart informatie geeft: de knoppen, 'Bekijk in Maps', het
     vliegveld-tagje, de ⌘-melding en het i-icoon.
     Dévin 29-09: "eigenlijk moet het de twee lagen in 1 zijn, de navy en deze beige samen." Hier stond een beige
     laagje van 10 % bovenop de navy. Over de zee kwam dat uit op #212D3A — precies de #2a2420 die hij noemde — maar
     over het beige land werd datzelfde laagje bijna onzichtbaar. Daar lag een schaduw onder om het te redden, en die
     schaduw wilde hij weg.
     Een navy tint doet het omgekeerde: over de zee blijft hij dezelfde kleur, over het land wordt hij juist donker.
     Eén kleur, beide achtergronden, geen schaduw meer nodig — en één plek om hem te veranderen.
     Gerekend: rgba(42, 36, 32, .82) over de zee (#2a2420) = #2a2420, over het land (#EBE3D8) = #4B515B. Het beige
     icoon haalt daarop 6,3:1 op het land en 10,9:1 op de zee, dus ruim boven de 4,5:1 die tekst nodig heeft. */
  /* Dévin 01-10: de vlakken in de kaart waren inconsistent en mochten transparanter. Eén vlak (.7: het beige blijft 4,5 : 1 op het land) en één inktkleur
     voor alles wat erop staat: icoontjes, tekst, het tagje met de reistijd, het toestel en de lijn. */
  --kaart-vlak: rgba(42, 36, 32, .7);
  --kaart-inkt: var(--ssn-surface);
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--8px);
  background-color: var(--_colors---swatch--black);
  touch-action: pan-y;            /* één vinger scrollt de pagina, twee vingers bedienen de kaart */
  -webkit-user-select: none; user-select: none; cursor: grab;
}
.kaart.is-sleept { cursor: grabbing; }
/* Het omhulsel van de svg is aan elke kant 25 % groter dan het vak (kaart.js: OVER), zodat slepen, knijpen en het wiel het met één
   transform kunnen verschuiven zonder opnieuw te tekenen; het vak knipt (overflow: hidden). will-change: één eigen laag voor de compositor.
   De transform zit op het omhulsel, niet op de svg: op de svg-root laat hij door vector-effect: non-scaling-stroke alle paden opnieuw uitrekenen. */
.kaart-vlak { position: absolute; inset: -25%; width: 150%; height: 150%; will-change: transform; }
.kaart-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s cubic-bezier(.16, 1, .3, 1); }
.kaart.is-geladen .kaart-svg { opacity: 1; }
.kaart-svg path { vector-effect: non-scaling-stroke; }

/* Lagen. De namen komen uit bouw-kaart.mjs: land, kabgrens, hoofdgrof (eilandbeeld), en in de tegels
   desagrens, hoofd en detail. */
.kaart-svg #land path { fill: var(--_colors---swatch--beige); stroke: none; }
.kaart-svg #kabgrens path { fill: none; stroke: var(--_colors---swatch--grey); stroke-width: 1; stroke-dasharray: 3 3; }
.kaart-svg #hoofdgrof path, .kaart-svg #hoofd path { fill: none; stroke: var(--kaart-taupe); stroke-width: 1.4; }
.kaart-svg #hoofd path[data-k="a"] { stroke: var(--kaart-taupe-diep); stroke-width: 2.2; }
/* In hoofdgrof zitten alleen de grote doorgaande wegen (bouw-kaart filtert op klasse a en plakt ze aan elkaar tot
   doorlopende lijnen, zodat er geen gaten vallen). Ze dragen daardoor geen data-k meer: de stijl hoort bij de laag. */
.kaart-svg #hoofdgrof path { stroke: var(--kaart-taupe-diep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kaart-svg #detail path { fill: none; stroke: var(--kaart-taupe-licht); stroke-width: .8; }
.kaart-svg #detail path[data-k="c"] { stroke: var(--kaart-taupe); stroke-width: 1.2; }
.kaart-svg #vliegveld path { fill: var(--kaart-taupe); stroke: none; }
.kaart-svg #baan path { fill: none; stroke: var(--_colors---swatch--black); stroke-width: 1.2; }
/* Van ver: geen straatjes, en op het eilandbeeld de grove wegen dunner. Van dichtbij (tot 48 km in beeld,
   is-detail) andersom, zodat de grove en de fijne versie van dezelfde weg elkaar nooit overlappen. Dit hangt aan de
   zoomdiepte, niet aan de stand: een groot gebied als Tabanan staat in de gebiedsstand maar is te ruim voor straatjes. */
.kaart:not(.is-detail) .kaart-tegels { opacity: 0; }
/* Uitgezoomd geen grenslijnen (Dévin 28-09: "dan lijkt het nog simpeler"): de gestippelde regentschapsgrenzen komen
   pas als de straatjes er zijn, op hetzelfde moment. Van ver zie je dan alleen de kustlijn en de grote wegen. */
.kaart:not(.is-detail) .kaart-svg #kabgrens { display: none; }
.kaart.is-eiland .kaart-svg #hoofdgrof path { stroke-width: 1.1; }
.kaart.is-detail .kaart-svg #hoofdgrof { display: none; }
/* Een stuk straatjes dat bijlaadt komt niet klappend in beeld maar fadet kort in (Dévin 28-09: "geef ze een snelle
   fade ease"). De motor zet een tegel op opacity 0 en laat hem in het volgende frame los. */
.kaart-tegels g[data-tegel] { transition: opacity .3s var(--kaart-ease-uit); }
/* Tijdens een vlucht de fijne straatjes even weg: de browser hoeft ze dan niet bij elke stap opnieuw te tekenen. Bij de
   landing staan ze er meteen (vooraf geladen, kaart.js). */
.kaart.is-vliegt .kaart-tegels #detail { display: none; }
.kaart-tegels { transition: opacity .4s cubic-bezier(.16, 1, .3, 1); }

/* Het gebied van dit pand: oranje omlijnd met een lichte vulling. Geen punt — we kennen de plek niet.
   De golf dijt drie keer uit als de kaart in beeld komt, daarna is het stil (WCAG 2.2.2). */
.kaart-gebied { fill: rgba(156, 91, 56, .13); stroke: var(--ssn-accent); stroke-width: 1.8; }
.kaart-golf { fill: none; stroke: var(--ssn-accent); stroke-width: 1.8; opacity: 0; }
.kaart.is-puls .kaart-golf { animation: kaart-golf 2.6s cubic-bezier(.16, 1, .3, 1) 3; }
@keyframes kaart-golf { 0% { stroke-width: 1.8; opacity: .75; } 100% { stroke-width: 22; opacity: 0; } }

/* Namen: de plaatsen die we verkopen, en de zee. De motor zet ze op hun plek (transform). */
.kaart-laag { position: absolute; inset: 0; pointer-events: none; will-change: transform; }   /* schuift mee met de svg tijdens een gebaar (kaart.js: schuif) */
/* De motor zet de plek in 'translate'; het centreren op dat punt gebeurt hier met transform. Die twee
   stapelen (eerst translate, dan transform), dus ze zitten elkaar niet in de weg. */
/* De zeenaam staat iets bóven zijn punt (Dévin 28-09), zodat hij vrij in het water hangt en niet tegen de kust plakt. */
.kaart-laag > * { position: absolute; top: 0; left: 0; will-change: translate; }
.kaart-naam, .kaart-zee { margin: 0; white-space: nowrap; transform: translate(-50%, -50%);
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1); }
.kaart-naam {
  font-size: var(--_paragraphs---paragraph-xxs--font-size); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(42, 36, 32, .6);
}
.kaart-naam.is-hier { color: var(--_colors---swatch--black); font-weight: 600; }
/* Een lichte rand in de kleur van het land rond elke naam (de 'halo' van gedrukte kaarten): leesbaar boven een weg,
   een grens of de kustlijn, ook als een naam half boven zee valt. */
.kaart-naam, .kaart-zee { z-index: 1; }   /* de plaatsnamen boven het staartje van het vliegveld (Dévin 01-10) */
.kaart-naam { text-shadow: 0 0 .25em var(--_colors---swatch--beige), 0 0 .12em var(--_colors---swatch--beige), 0 0 .06em var(--_colors---swatch--beige); }
/* De zee schaalt met de KAART, niet met de sitetekst: op de telefoon was de naam 3,8 % van de kaartbreedte tegen
   2,2 % op desktop, en dat oogde veel te groot (Dévin 28-09). 2,2cqw houdt hem overal even groot ten opzichte van de
   kaart; de clamp houdt hem leesbaar op een heel kleine kaart en voorkomt reuzenletters op een brede. */
.kaart-zee { transform: translate(-50%, -140%); font-family: var(--_fonts---fonts--alt-heading); font-style: italic; font-size: clamp(8.5px, 2.2cqw, 14px);
  color: rgba(235, 227, 216, .55); letter-spacing: .04em; }
.kaart.is-eiland .kaart-naam:not(.is-hier) { opacity: 0; }
/* Twee namen raken elkaar nooit: de motor (kaart.js) zet is-weg op wie moet wijken (Dévin 27-09). */
.kaart-naam.is-weg, .kaart-zee.is-weg { opacity: 0; }
/* Van ver is het gebied maar een stipje: de naam gaat erboven staan in plaats van eroverheen. */
.kaart.is-eiland .kaart-naam.is-hier { transform: translate(-50%, -190%); }

/* Vliegveld (alleen op het eilandbeeld). Een klein vliegtuigje vliegt van het vliegveld over het krulstaartje
   naar zee en trekt de lijn achter zich aan; waar het landt, verschijnt direct ernaast het tagje met de
   rijtijd (Dévin 27-09). De motor stuurt lijn en toestel op één klok. Het vak van het staartje loopt van het
   vliegveld (rechtsboven) naar het toestel (linksonder); het tagje staat links van het toestel, even hoog.
   --staart-h = .6 × --staart-b: dezelfde verhouding als de viewBox (100 × 60), dus het toestel vervormt niet.
   Het staartje is geografie (het wijst van het vliegveld naar zee): het schaalt met de kaart, niet met de tekst. Daarom
   de kleinste van 6,4em en 18,4 % van de kaartbreedte: op 1440 zijn die gelijk (107 px), op de telefoon wordt het
   korter, zodat het tagje met de grotere sitetekst binnen de kaart blijft (27-09). */
.kaart-vlieg { --staart-b: min(8.6em, 21.5cqw); --staart-h: calc(var(--staart-b) * .38); --toestel-ruimte: 1em; z-index: 0;   /* ónder de plaatsnamen (z-index 1) */
  display: flex; align-items: center; opacity: 0;
  transform: translate(calc(-100% - var(--toestel-ruimte) - var(--staart-b)), calc(var(--staart-h) - 50%));
  transition: opacity .4s var(--kaart-ease-uit); }
.kaart.is-eiland .kaart-vlieg { opacity: 1; }
/* .kaart-vlieg ervoor: papa's normalize zet svg:not(:root) op overflow: hidden en won van .kaart-staart alleen,
   waardoor het geland toestel half werd afgeknipt (het staat precies op de hoek van het vak). */
.kaart-vlieg .kaart-staart { position: absolute; left: calc(100% + var(--toestel-ruimte)); bottom: 50%; width: var(--staart-b); height: var(--staart-h); overflow: visible; }
.kaart-staart__lijn { fill: none; stroke: var(--kaart-inkt); stroke-width: .97; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.kaart-vliegtuig { opacity: 0; transition: opacity .3s var(--kaart-ease-uit); }
.kaart-vliegtuig path { fill: none; stroke: var(--kaart-inkt); stroke-width: 1.27; stroke-linecap: round; stroke-linejoin: round; }
.kaart-vlieg.is-getekend .kaart-vliegtuig { opacity: 1; }
/* Het tagje schuift vanuit het toestel naar zijn plek, rustig uitlopend (--ease-ssn-out).
   Dévin 28-09: als volle beige pil viel het uit de toon ("een imposter stukje"). Nu dezelfde behandeling als alles
   wat op de kaart informatie geeft — de knoppen, 'Bekijk in Maps' en de ⌘-melding: transparant navy met blur, beige
   tekst, en de hoek van de 4px-token op kaartmaat (dezelfde 4,2 px als de knoppen, niet de em van de kleine letter). */
.kaart-vlieg__tag { margin: 0; padding: .45em .8em .5em; line-height: 1.25;
  border-radius: calc(var(--kaart-basis) * .25);
  /* Het gedeelde vlak (--kaart-vlak). Geen schaduw: de kleur draagt zichzelf op zee én op land. */
  background-color: var(--kaart-vlak); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--kaart-inkt);
  /* Geist Mono geprobeerd (Dévin 28-09, de letter van de WhatsApp-popup): op een getal alleen werkt dat, maar deze
     zin heeft vier woorden en mono zet elke letter in een vast vak — 'het vliegveld' viel daardoor uit elkaar. Terug
     naar de gewone sitelettter, die leest hier rustiger. */
  /* Dévin 01-10: "dat berichtje moet toch de Geist Mono worden, net iets meer karakter". Mono is breder, dus iets kleiner gezet; het tagje breekt op woordgrenzen. */
  font-family: var(--_fonts---fonts--geist-mono); font-size: calc(var(--_paragraphs---paragraph-xs--font-size) / 1.45);
  letter-spacing: 0; text-align: center; text-wrap: balance; overflow-wrap: normal;
  /* 'naar het vliegveld' erbij (Dévin 28-09) maakt het tagje langer dan de ruimte links van het toestel op een smalle
     kaart. Het mag daarom afbreken, hooguit zo breed als dat er past; op een brede kaart blijft het op één regel. */
  max-width: min(10em, 27cqw);
  opacity: 0; transform: translateX(.5em); transition: opacity .9s var(--kaart-ease-uit), transform .9s var(--kaart-ease-uit); }
.kaart-vlieg.is-geland .kaart-vlieg__tag { opacity: 1; transform: none; }
/* Papa's GSAP-reveal wikkelt élke tekst in een eigen div op opacity 0 tot zijn scroll-trigger vuurt. De kaart
   valt buiten die triggers: de wikkels geforceerd zichtbaar (zelfde ingreep als bij .ssnf-help--cap). Het
   in- en uitfaden van het tagje doen we zelf, op de p. */
.kaart-vlieg__tag > div {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
.kaart-vlieg__tag { visibility: visible !important; }

/* Knoppen: vierkant, zonder rand, transparant navy met blur (het vlak van de WhatsApp-popup, .popup-bg:
   navy-60 + blur(4px)), hoek 4px (token), beige icoon. Hover: alleen een rand van 45% beige, zoals het
   vierkantje in 'In aanvraag verwerken'. Rechtsboven twee vakjes van 2em (32 px, op een kleine kaart nooit
   onder 24 px: WCAG 2.5.8); rechtsonder 'Bekijk in maps' even hoog, alleen tekst.
   Wisselen vervaagt: het vergrootglas en het verkleinglas liggen op dezelfde plek en lopen in elkaar over, de
   pin komt en gaat ook zacht. [hidden] blijft in de opmaak staan en wordt alleen doorzichtig. */
.kaart-knoppen { position: absolute; top: var(--_sizes---size--8px); right: var(--_sizes---size--8px);
  display: grid; gap: var(--_sizes---size--8px); }
.kaart-knop, .kaart-maps { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; height: 2.25em; margin: 0; padding: 0;
  border: 0; border-radius: var(--_layout---border-radius--4px); cursor: pointer; text-decoration: none;
  /* Het gedeelde vlak (--kaart-vlak), zonder rand in rust. Bij zweven komt er een wittige rand, zoals het altijd
     al deed. De schaduw die hier stond is weg (Dévin 29-09): die was alleen nodig zolang het vlak beige was en
     boven beige land wegviel. Een navy vlak wordt daar juist donker, dus het draagt zichzelf. */
  background-color: var(--kaart-vlak); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--kaart-inkt); }
.kaart-knop::before, .kaart-maps::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid transparent; pointer-events: none; transition: border-color var(--kaart-micro) var(--kaart-ease); }
/* Geen rand in rust: het vlak zelf maakt de knop al zichtbaar, ook boven navy zee (Dévin 28-09; daarvóór stond hier
   altijd een grijze lijn). */
.kaart-knop::before, .kaart-maps::before, .kaart.is-eiland .kaart-knop::before, .kaart.is-eiland .kaart-maps::before { border-color: transparent; }
.kaart-knop:hover::before, .kaart-knop:focus-visible::before,
.kaart-maps:hover::before, .kaart-maps:focus-visible::before,
.kaart.is-eiland .kaart-knop:hover::before, .kaart.is-eiland .kaart-knop:focus-visible::before,
.kaart.is-eiland .kaart-maps:hover::before, .kaart.is-eiland .kaart-maps:focus-visible::before { border-color: rgba(235, 227, 216, .45); }
.kaart-knop:focus-visible, .kaart-maps:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.kaart-knop { width: 2.25em; opacity: 1; visibility: visible;
  transition: opacity var(--kaart-fade) var(--kaart-ease), visibility 0s linear 0s; }
.kaart-knop[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--kaart-fade) var(--kaart-ease), visibility 0s linear var(--kaart-fade); }
.kaart-knop svg { display: block; width: 1.25em; height: 1.25em; }
/* De zoomknop is een wissel: het vakje blijft staan, de twee iconen liggen op elkaar en vervagen in elkaar over,
   met een kleine draai zodat het als één beweging leest. */
.kaart-knop--zoom svg { position: absolute; inset: 0; margin: auto;
  transition: opacity var(--kaart-fade) var(--kaart-ease), transform var(--kaart-fade) var(--kaart-ease); }
.kaart-knop--zoom .is-in { opacity: 0; transform: rotate(-30deg) scale(.85); }
.kaart.is-eiland .kaart-knop--zoom .is-uit { opacity: 0; transform: rotate(30deg) scale(.85); }
.kaart.is-eiland .kaart-knop--zoom .is-in { opacity: 1; transform: none; }
/* Gewone letters (Dévin 27-09), gewicht 500 zoals de siteknoppen. */
.kaart-maps { flex: none; height: 1.5em; padding: 0 var(--_sizes---size--12px); white-space: nowrap; }   /* even hoog als het i-icoon (Dévin 01-10: kleinere padding), 12 px opzij */
/* Dévin 01-10: de tekst was te groot voor de knop: kleiner en dikker, de knop zelf blijft zoals hij was. */
.kaart-maps > span { font-size: calc(var(--_paragraphs---paragraph-xxs--font-size) * .86); font-weight: 650; letter-spacing: .04em;
  line-height: 1; text-transform: uppercase; }   /* hoofdletters, xxs (Dévin 27-09) */

/* Onderaan één rij, even ver van de rand als de knoppen: links het bijschrift, rechts 'Bekijk in Maps',
   onderkanten gelijk (Dévin 27-09). De rij zelf laat slepen door; alleen het bijschrift en de knop vangen de muis. */
.kaart-onderrij { position: absolute; left: var(--_sizes---size--8px); right: var(--_sizes---size--8px); bottom: var(--_sizes---size--8px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; pointer-events: none; }
.kaart-onderrij > * { pointer-events: auto; }

/* De melding bij scrollen zonder ⌘/Ctrl, in het midden van de kaart. Zelfde vlak als de knoppen en het tagje. Gecentreerd met inset + margin: auto in
   plaats van een transform, want een regel van papa zette die transform terug op nul (de melding stond met zijn
   hoek in het midden). Papa's reveal-wikkel om de tekst geforceerd zichtbaar, net als bij het tagje. */
.kaart-hint > div { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.kaart-hint {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; box-sizing: border-box;
  padding: .55em 1.1em; border: 0; border-radius: var(--_layout---border-radius--4px);   /* zelfde vlak als de knoppen */
  background-color: var(--kaart-vlak); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--kaart-inkt);
  /* De melding rekent op de SITEtekst, niet op de kaartmaat: die groeit op een tablet naar 26 px en dan werd de melding
     breder dan de kaart (gemeten 27-09: 102 % op 390 px). Nu hooguit 80 % van de kaart, tekst gecentreerd, en hij mag
     afbreken op twee regels. */
  max-width: 80%; white-space: normal; text-align: center; text-wrap: balance;
  opacity: 0; pointer-events: none; transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}
.kaart.toon-hint .kaart-hint { opacity: 1; }
/* De maat van de gewone sitetekst, niet die van de kaart (1,4 ×). Twee klassen, want '.kaart > :not(.kaart-svg)'
   hierboven is even specifiek en zou anders winnen — daardoor deed een font-size op .kaart-hint alleen niets. */
.kaart .kaart-hint { font-size: var(--size-font);
  /* De hoek is een em-token (.25em): met de kleinere letter zou hij ook kleiner worden. Hier op de kaartmaat
     gerekend, zodat hij precies gelijk blijft aan die van de knoppen. */
  border-radius: calc(var(--kaart-basis) * .25); }
@media (pointer: coarse) { .kaart-hint { display: none; } }

/* Het i-icoon linksonder (Dévin 27-09): dezelfde knop en tooltip als 'Freehold' in de tabel (.pand-tip-btn,
   .pand-tip, werking in pand.js). Het icoon is even groot als dat bij eigendom (15 px op 1440).
   Het zat kaal op de kaart met een navy schaduw eronder, want een beige icoon op beige land valt anders weg. Dévin
   wil die schaduw nergens meer (29-09), en dan is kaal geen optie meer. Daarom hetzelfde vlak als de knoppen en
   'Bekijk in Maps': zelfde hoek, zelfde kleur. Nu draagt het vlak de leesbaarheid en heeft niets op deze kaart nog
   een schaduw nodig.
   Bewust een compact vakje (1,5em, ± 27 px) en geen knop van 38 px zoals de rest: het tagje bij het vliegveld staat op
   geografie, naast het toestel, en kan dus niet mee omhoog. Op de telefoon eindigt het 43 px boven de onderrand; een vak
   van 41 px stak er 8 px in (gemeten 29-09, de kaart-poort viel erover om). Met 27 px blijft er 7,5 px lucht. Voor
   een vinger staat er nog steeds een onzichtbaar vlak van 44 px omheen (hieronder). */
.kaart-tip-btn { -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex: none; align-self: flex-end;
  width: 1.5em; height: 1.5em; margin: 0; padding: 0; line-height: 0;
  border: 0; border-radius: var(--_layout---border-radius--4px); cursor: pointer;
  background-color: var(--kaart-vlak); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: var(--kaart-inkt); }
.kaart-tip-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid transparent; pointer-events: none; transition: border-color var(--kaart-micro) var(--kaart-ease); }
.kaart-tip-btn:hover::before, .kaart-tip-btn:focus-visible::before { border-color: rgba(235, 227, 216, .45); }
.kaart-tip-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.kaart-tip-btn svg { display: block;
  /* even groot als het i-icoon bij eigendom (Dévin 27-09): daar .8333em in een cel van 1,5 × de sitemaat = 15 px op 1440 */
  width: calc(var(--size-font) * 1.5 * .8333); height: calc(var(--size-font) * 1.5 * .8333); }
/* Dezelfde letter als de tip bij eigendom: die komt uit op de sitemaat (12 px op 1440, gemeten 27-09); in de kaart
   rekent alles op de kaartmaat (1,4 × de sitemaat), dus hier de sitemaat zelf. */
.kaart-onderrij .pand-tip { font-size: var(--size-font); }
/* Op een aanraakscherm is het vakje te klein voor een vinger: een onzichtbare rand maakt het 44 px (WCAG 2.5.5),
   zonder dat het icoon groter wordt. Hetzelfde voor 'Bekijk in Maps'. */
@media (pointer: coarse) {
  .kaart-tip-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
  .kaart-maps::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }   /* vingerdoel van 44 px, zonder dat het vakje groter wordt */
}

/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
  html[data-ssn-motion="reduced"] .kaart-golf { animation: none !important; }
  html[data-ssn-motion="reduced"] .kaart-vlieg__tag,
html[data-ssn-motion="reduced"] .kaart-vliegtuig,
html[data-ssn-motion="reduced"] .kaart-knop,
html[data-ssn-motion="reduced"] .kaart-knop[hidden],
html[data-ssn-motion="reduced"] .kaart-knop::before,
html[data-ssn-motion="reduced"] .kaart-knop--zoom svg,
html[data-ssn-motion="reduced"] .kaart-maps::before { transition: none; }


/* Gestapeld (tot 991 px, waar papa de twee kolommen onder elkaar zet): de kaart komt onder de eigenschappen en
   wordt precies zo breed als de header (die is 100vw min twee keer --_layout---padding-global--page-padding).
   Hij blijft vierkant. De kolom is een flex-kolom die in het scherm gecentreerd staat; align-self: center laat
   de bredere kaart aan beide kanten even ver uitsteken, precies tot de rand van de header. */
@media screen and (max-width: 991px) {
  /* De linkerkolom valt uiteen (display: contents), zodat verhaal en kaart los in de kolom staan: eerst het verhaal,
     dan de eigenschappen en de knoppen, dan de kaart (Dévin 27-09). */
  .artwork-info_group > .gallery-group:has(.kaart-blok) { display: contents; }
  .artwork-info_group > .gallery-group > .pand-verhaal { order: 0; }
  .artwork-info_group > .artwork-info { order: 1; }
  .artwork-info_group > .gallery-group > .kaart-blok { order: 2; align-self: center; max-width: none;
    width: calc(100vw - 2 * var(--_layout---padding-global--page-padding)); }
}

/* Desktop: de twee kolommen beginnen bovenaan gelijk (verhaal en eigenschappen). Links rekt de kolom tot de rijhoogte
   en gaat de kaart naar de onderkant; rechts sluiten de knoppen aan op de eigenschappen (zie hieronder). */
@media screen and (min-width: 992px) {
  .artwork-info_group:has(.kaart-blok) { align-items: stretch; }
  .artwork-info_group > .gallery-group:has(.kaart-blok) { align-self: stretch; }
  .artwork-info_group > .gallery-group > .kaart-blok { margin-top: auto; }
  .artwork-info_group:has(.kaart-blok) > .artwork-info { display: flex; flex-direction: column; }
  /* Het zinnetje hoort bij de eigenschappen (Dévin 27-09): het staat direct onder de tabel. De knoppen sluiten er
     direct op aan, op dezelfde afstand als de kleinste afstand tussen verhaal en kaart links (de 72px-token van
     .gallery-group): consistentie (Dévin 27-09, tweede keer). Eerst stonden ze onderaan, gelijk met de kaart; bij
     een kort verhaal en een lange kaart zweefden ze dan ver onder de tekst. */
  .artwork-info_group:has(.kaart-blok) > .artwork-info .ai_text > .pand-knoprij { margin-top: var(--_sizes---size--72px); padding-top: 0; }
  /* papa's omhulsel rond de knoppen (padding-40px) telt anders nog eens mee: de afstand is precies die ene token */
  .artwork-info_group:has(.kaart-blok) > .artwork-info > .padding-top:has(> .ai_text > .pand-knoprij) { padding-top: 0; }
}
/* Gestapeld: tussen kaart en de balk met Vorige/Volgende dezelfde afstand als tussen de knoppen en de kaart (Dévin 01-10: "de vorige en
   volgende knop moet evenver van de kaart als de knoppen erboven"; eerst was het de zijmarge, 13 px tegen 39 erboven op een telefoon). Die
   afstand is papa's rij-afstand van .artwork-info_group: 5em, tot 479 px 3em. Hier dezelfde waarde, op dezelfde breekpunten; de sectie en de
   groep hebben overal dezelfde lettergrootte (gemeten 320 tot 991 px), dus de em's geven dezelfde pixels. */
@media screen and (max-width: 991px) {
  .section_artwork-info .section-padding-160px:has(.kaart-blok) { padding-bottom: 5em; }
}
@media screen and (max-width: 479px) {
  .section_artwork-info .section-padding-160px:has(.kaart-blok) { padding-bottom: 3em; }
}
/* De knoppen onder de tekst naast elkaar: 'Bewaar als referentie' en 'Stel een vraag' (die laatste is de primaire
   siteknop, als 'Mijn dossier' in de header). Op een smal scherm onder elkaar. */
/* Beide knoppen groeien (papa's eigen flex-grow: 1 op .btn-animate-chars), zodat de rij precies zo breed is als de
   tabel erboven; op de telefoon staat elke knop op zijn eigen regel, over de hele breedte. */
.pand-knoprij { display: flex; flex-wrap: wrap; gap: var(--_sizes---size--12px); }

/* Het verhaal (data/pand-verhalen.json): op desktop boven de kaart, in de linkerkolom die onderaan gelijk staat met
   de knoppen. De kolom wordt daarvoor een stapel; de ruimte tussen verhaal en kaart is de rijafstand van de groep. */
.gallery-group:has(> .pand-verhaal) { flex-direction: column; gap: var(--_sizes---size--72px); }   /* Dévin 27-09: de lucht die hij tijdens de oude binnenkomst zag */
.pand-verhaal { margin: 0; align-self: stretch; width: 100%; }   /* anders gecentreerd zolang de regels gesplitst zijn: sprong naar links (27-09) */
/* Het lege omhulsel waar de oude eerste zin stond (Dévin 27-09) neemt geen ruimte meer in: het verhaal staat nu
   scherp boven de eigenschappen. */
.artwork-info > .padding-top:has(> .content-wrap:only-child:empty) { display: none; }
/* Korte alinea's met lucht ertussen, zoals papa's lopende tekst. */
.pand-verhaal p { margin: 0; }
.pand-verhaal p + p { margin-top: .9em; }
/* Kop van het verhaal: de footerkop op één regel, met ruimte tot de tekst eronder. */
.pand-verhaal__titel { margin: 0 0 var(--_sizes---size--24px); }
.pand-verhaal__titel > .heading-s { display: inline; }
.pand-knoprij { flex-wrap: nowrap; }
@media screen and (max-width: 479px) { .pand-knoprij { flex-wrap: wrap; } }
/* Het vaste zinnetje boven de knoppen: het tekstblok van het verhaal, even groot, zachter (de opacity van
   'exacte prijs op aanvraag'), zodat het bij de knoppen hoort en niet bij het verhaal. */
.pand-noot { padding-top: var(--_sizes---size--24px); }   /* in de tabel, onder de laatste lijn */
.pand-noot p { margin: 0; opacity: .7; text-wrap: pretty; }   /* zelfde maat als het verhaal, alleen zachter (Dévin 27-09) */

/* NIET SELECTEERBAAR (Dévin 01-10): de kaarten (foto's, inhoud, de plus-knop), de resultaat-tellers en de plekken waar nog niets staat
   (placeholders van de velden). Het blijven knoppen en links; alleen het blauwe selectievlak en het lange-druk-menu van iOS gaan weg. */
.listing-card, .listing-card *, .listings-bar__count, .listings-count-m, .listings-count-m *, .listings__blader, .listings__blader *,
.listings-bar input::placeholder, .ssnf input::placeholder { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* MIJN DOSSIER-TELLER (Dévin 01-10). Het tweede vak naast het oranje chevron-vak, zoals op de listingkaart (.listing-card__actions): even groot als
   het chevron-vak (2em, vierkant, radius 4px), met .4em ruimte ertussen in plaats van de volle knop-gap. Rust: alleen een rand in de lijnkleur van de
   listing-bar; het getal = het aantal bewaarde panden (window.ssnRefs, build-nl.mjs DOSSIER_SCRIPT) in het cursieve IvyPresto, gecentreerd.
   Bij 0 is er geen vak: het schuift met een fade ACHTER het oranje vak weg en ruimte en plek lopen mee dicht; bij het eerste bewaarde pand komt het er
   op dezelfde manier achter vandaan. De wrapper animeert de ruimte (breedte en marge), het vak zelf de plek en de dekking. Het getal schuift omhoog
   bij elke wijziging (zie het script). */
/* Rand en getal = de rand van de knop in de melding (VERDER, .ssn-toast__act): Dévin 12-10 "zelfde kleur als de verder cta border". */
.navbar-cta, .navmenu_button-item, [data-vl-begin], [data-brug-dossier] { --ssn-knop-lijn: color-mix(in srgb, var(--_colors---swatch--black) 30%, transparent); }
.navbar-cta .button-count, .navmenu_button-item .button-count, [data-vl-begin] .button-count, [data-brug-dossier] .button-count {   /* [data-vl-begin]: de knop in de intro van het dossier, met je top 3 (Dévin 16-10); [data-brug-dossier]: Ga door met je dossier in de brug (Dévin 25-10) */
  flex: 0 0 auto; display: flex; justify-content: flex-end; width: 2em; height: 2em; margin-right: -.6em; position: relative; z-index: 0;   /* de knop-gap is 1em; tussen de twee vakken .4em */
  transition: width .6s cubic-bezier(.16, 1, .3, 1), margin-right .6s cubic-bezier(.16, 1, .3, 1);
}
.navbar-cta .button-count.is-leeg, .navmenu_button-item .button-count.is-leeg, [data-vl-begin] .button-count.is-leeg, [data-brug-dossier] .button-count.is-leeg { width: 0; margin-right: -1em; pointer-events: none; }
.button-count__box {
  flex: 0 0 auto; box-sizing: border-box; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--ssn-knop-lijn); border-radius: var(--_layout---border-radius--4px); color: var(--_colors---swatch--black);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .5s cubic-bezier(.16, 1, .3, 1);
}
.button-count.is-leeg .button-count__box { transform: translateX(calc(100% + .4em)); opacity: 0; }
.navbar-cta .button-icon, .navmenu_button-item .button-icon, [data-vl-begin] .button-icon, [data-brug-dossier] .button-icon { z-index: 1; }   /* het oranje vak ligt boven het teller-vak: het schuift er achter vandaan */
.button-count__n { display: grid; justify-items: center; font-family: var(--_fonts---fonts--paragraph); font-weight: 700; font-size: .8em; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--_colors---swatch--black); }   /* de hoofdletter van de site, vet en klein; rand en getal zoals de VERDER-knop in de melding: lichte rand, navy letter (Dévin 12-10) */
.button-count__n > span { grid-area: 1 / 1; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs */
html[data-ssn-motion="reduced"] .navbar-cta .button-count, html[data-ssn-motion="reduced"] .navmenu_button-item .button-count, html[data-ssn-motion="reduced"] [data-vl-begin] .button-count, html[data-ssn-motion="reduced"] [data-brug-dossier] .button-count, html[data-ssn-motion="reduced"] .button-count__box { transition: none; }
/* ZOEKEN (Dévin 07-10). Op telefoon en tablet staat de pagina vast zolang het zoekveld focus heeft: listings.mjs zet html.is-zoek-lock (alleen op een touchscherm, Dévin 16-10), en de browser
   laat dan geen pan- of zoomgebaar meer toe. De terugzet-reflex bij scroll en de touchmove-blokkade staan in listings.mjs (iOS Safari leest touch-action niet overal). */
html.is-zoek-lock { touch-action: none; overscroll-behavior: none; }

/* DE KORTE LAATSTE PAGINA (Dévin 07-10). Onder 992 px staat het bladeren (vorige en volgende) onder de kaarten, niet in de balk. De baan (.listings__layout) is minstens één scherm hoog,
   dus een laatste pagina met één kaart liet de bladerrij midden in het scherm hangen, tegen die kaart aan. Nu strekt de frame zich over de baan en schuift de bladerrij naar de onderkant;
   tussen de kaarten en de rij blijft altijd minstens G (de grid-gap). Bij een volle pagina is er geen vrije ruimte en verandert er niets: G zat eerst als margin boven de rij, nu als margin
   onder de lijst. Die staat alleen op een lijst die kaarten heeft: zonder resultaten komt er geen hoogte bij (de lege toestand vult het scherm op de pixel, L2 in de hoogte-suite). */
@media (max-width: 991px) {
  .listings__frame { display: flex; flex-direction: column; align-self: stretch; }
  .listings__frame > .listings__grid { flex: 0 0 auto; }
  .listings__frame > .listings__grid:has(.listing-card) { margin-bottom: var(--listings-gap); }
  .listings__frame > .listings__blader:not([hidden]) { margin-top: auto; }
}
/* DYNAMISCHE FILTERLIJST (Dévin 07-10). Een optie zonder resultaten in de huidige selectie verdwijnt, en komt terug zodra er weer resultaten zijn; een sectie waarvan alle opties weg
   zijn verdwijnt mee (listings.mjs zet .is-leeg). Wat aanstaat of een halve selectie heeft (een gebied waarvan maar een deel aanstaat) blijft staan: .is-zero houdt daar zijn gedimde stijl.
   De bed- en badkamerrail en de Freehold/Leasehold-knop blijven gedimd in plaats van weg: een halve rail of halve schakelaar ziet er stuk uit. */
.ssnf:not(.has-filters) .ssnf-row.is-zero:not([aria-pressed="true"]):not(.is-indeterminate) { display: none; }   /* alleen zonder filter: dan is 0 echt dood; met een filter blijft de optie gedimd staan (55-filter-ui.css) */
.ssnf:not(.has-filters) .ssnf-sec.is-leeg { display: none; }
/* Eigendom (Dévin 10-10): een lege subrij onder Freehold (HGB, Hak Pakai, Niet gespecificeerd) is altijd weg, ook als hij aanstaat of er een filter actief is. */
.ssnf-subs .ssnf-row.is-zero { display: none; }
@keyframes ssnf-rij-in { from { opacity: 0; } to { opacity: 1; } }
.ssnf-row { animation: ssnf-rij-in .22s ease-out; }                                           /* een rij die terugkomt verschijnt zacht */
html[data-ssn-motion="reduced"] .ssnf-row { animation: none; }

/* GEBIEDEN ALS PILLEN (Dévin 08-10). Onder de zoekbalk, boven de locatielijst, staan de gebieden van Bali als pillen in dezelfde stijl als Leasehold en Freehold (.ssnf-segbtn). Altijd vier naast elkaar op één regel, even breed. Aan = alle plaatsen van het gebied aan; een deel = een lichtere rand; een gebied zonder resultaten verdwijnt zoals een lege optie. */
.ssnf-gebieden { flex-wrap: nowrap; gap: .35em; margin: .6em 0 .9em; }
.ssnf-gebieden > .ssnf-segbtn { flex: 1 1 auto; min-width: 0; width: auto; padding: .6em .85em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssnf-gebieden > .ssnf-segbtn.is-deel:not([aria-pressed="true"]) { border-color: rgba(235,227,216,.6); }
.ssnf:not(.has-filters) .ssnf-gebieden > .ssnf-segbtn.is-zero:not([aria-pressed="true"]) { display: none; }
/* ─── ACCOUNT · KAART (accounts-spec §6.1, bouwplan taak 14) ─────────────────────────────────────────────
   De kaart is een <div>; de lege link ligt over de hele kaart (z 1), het paneel erboven (z 2) laat klikken door
   (pointer-events none), alleen de bestaande knop [data-listing-save] vangt ze. */
.listing-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.listing-card__link:focus-visible { outline: 2px solid var(--_colors---swatch--beige); outline-offset: calc(calc(var(--vl-rem) * .25) * -1); }
.listing-card__plate { z-index: 2; pointer-events: none; }
.listing-card__save { pointer-events: auto; }
.listing-card__plate.is-kaal-plate { background: none; }
.listing-card__plate.is-kaal-plate::after { display: none; }
.is-kaal-plate .listing-card__head, .is-kaal-plate .listing-card__tags, .is-kaal-plate .listing-card__go { visibility: hidden; }

/* ─── ACCOUNT · TELLER EN VRAAG (accounts-spec §6.1, §6.3; bouwplan taak 16) ─────────────────────────────
   De teller bij MIJN DOSSIER is de teller van Vacatures in de footer (.footer-link__count, .footer-dim). */
/* De knoptekst van MIJN DOSSIER is navy op beige (header én mobiel menu, gemeten 26-09); de <a> zelf is beige, dus niet
   erven: dan staat het getal beige op beige. */
/* De knop zet een gap van 1em tussen zijn kinderen; in de sup (75%, normalize) is dat 1,333em. Die trekken we terug, zodat
   het getal tegen het woord staat zoals Vacatures in de footer (.15em), en de pijl zijn gewone afstand houdt. */
.navbar-cta__count { color: var(--_colors---swatch--black); margin-left: calc(.15em - 1.3333em); }
/* DE SAMENVOEGVRAAG (ssn-account.js vraagSamenvoegen; Dévin 19-10: "beter met primaire en secundaire kleur", "moet deze wel blauw"). Was een navy doos met twee gelijke navy knoppen.
   Nu de beige kaart van de cookievraag (css/92): een <dialog class="cta-wrap vl-paneel"> in het midden, de navy sluier erachter, dezelfde in- en uitgang (de keyframes van 92),
   op de telefoon een blad onderaan. Kop met de titel in hoofdletters (= .ssn-consent__titel), de vraag, en de voet met twee knoppen: hoofdknop navy gevuld, tweede keus met een rand
   (de regels .vl-paneel .btn-animate-chars in 84, de letter-rol van papa). Breedte en letter = het aanmeldpaneel (81). Geen oranje: dit is geen CTA. */
/* De melding (Dévin 24-10): geen modal meer, geen sluier. .is-boven = in het aanmeldpaneel, erboven (de dialog is open en modaal: alleen wat erin hangt is klikbaar);
   .is-onder = vast onderaan, op de plek van het paneel. Bij het verhuizen schuift hij (FLIP in ssn-account.js, .is-zakt) met de ease van het paneel. */
.cta-wrap.vl-paneel.ssn-vraag { --kaart-kop: 4.4em; --kaart-in: 1.4em; padding: 0; height: fit-content; box-sizing: border-box;
  font-size: max(var(--_paragraphs---paragraph-regular--font-size), calc(var(--vl-rem) * .6875)); font-synthesis: none;
  flex-direction: column; align-items: stretch; justify-content: flex-start; border: 1px solid var(--_colors---swatch--grey); color: var(--_colors---swatch--black);
  animation: ssn-inlog-melding .5s cubic-bezier(.32, .72, 0, 1) both; }   /* de keyframes van de meldingen in het paneel (81) en het bolletje van het Gids-vak (75): geen eigen kopie */
.cta-wrap.vl-paneel.ssn-vraag.is-boven { position: absolute; left: -1px; right: -1px; bottom: calc(100% + .75em); width: auto; margin: 0; font-size: 1em; }   /* het paneel heeft al de lettermaat */
.cta-wrap.vl-paneel.ssn-vraag.is-onder { position: fixed; z-index: 2147483000; right: 2em; bottom: 2em; width: min(32em, calc(100% - 3em)); margin: 0; }   /* = de plek van het aanmeldpaneel (81) */
.ssn-vraag.is-zakt { transition: transform .6s cubic-bezier(.32, .72, 0, 1); }
.ssn-vraag.is-sluit { animation: ssn-consent-uit .3s cubic-bezier(.32, .72, 0, 1) both; }
/* Het oranje bolletje van de tijdlijn rechts in de kop: een melding (= .gids-poort__punt, css/75). */
.ssn-vraag__punt { display: block; flex: 0 0 auto; width: .85em; height: .85em; margin-left: auto; background: url(/images/stip.svg) center / contain no-repeat; }
html:not([data-ssn-motion="reduced"]) .ssn-vraag__punt { animation: gids-poort-punt .5s cubic-bezier(.16, 1, .3, 1) .4s both; }
.ssn-vraag :focus-visible:not(.ssn-vraag__titel) { outline: 2px solid var(--_colors---swatch--black); outline-offset: 2px; }   /* = .ssn-inlog: navy op beige, alleen met het toetsenbord. De titel krijgt de focus bij het openen (zoals de kaart) en blijft zonder kader */
.ssn-vraag__kop { display: flex; align-items: center; flex: 0 0 auto; height: var(--kaart-kop); padding: 0 var(--kaart-in); border-bottom: 1px solid var(--_colors---swatch--grey); }
.ssn-vraag__titel { margin: 0; outline: 0; font-family: var(--_fonts---fonts--paragraph); font-size: 1.3em; font-weight: 500; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: inherit; }   /* = .ssn-consent__titel */
.ssn-vraag__tekst { margin: 0; padding: var(--kaart-in); font-family: var(--_fonts---fonts--paragraph); line-height: 1.5; text-wrap: pretty; }   /* geen los woord op de laatste regel */
.ssn-vraag__voet { display: flex; gap: var(--_sizes---size--8px); flex: 0 0 auto; padding: var(--_sizes---size--12px); border-top: 1px solid var(--_colors---swatch--grey); }   /* = .ssn-consent__voet */
.ssn-vraag__knop { flex: 1 1 0; min-width: 0; margin: 0; border: 0; background: none; font: inherit; text-align: center; }   /* = .ssn-consent__knop */
.ssn-vraag__knop [data-button-animate-chars] > span { white-space: pre; transition-delay: calc(var(--i, 0) * .01s); }   /* papa's letter-rol met de stagger van de kaart (94) */
@media (max-width: 767px) {
  .cta-wrap.vl-paneel.ssn-vraag.is-onder { left: 0; right: 0; bottom: calc(.5em + env(safe-area-inset-bottom)); width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }   /* = de kaart op de telefoon (92) */
  .cta-wrap.vl-paneel.ssn-vraag.is-boven { left: -1px; right: -1px; }
}
html[data-ssn-motion="reduced"] .ssn-vraag, html[data-ssn-motion="reduced"] .ssn-vraag.is-zakt { animation: none; transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .ssn-vraag, html:not([data-ssn-motion="full"]) .ssn-vraag.is-zakt { animation: none; transition: none; } }
/* ─── INLOGPANEEL (accounts-spec §4.1, bouwplan taak 17) ─────────────────────────────────────────────────
   Dezelfde kaart als MIJN INSTELLINGEN (92-cookiekaart en 94-instellingen-popup; Dévin 15-10 ronde 15: "moet in dezelfde popup(stijl) als de
   MIJN INSTELLINGEN, voor desktop rechts onder"). Eén <dialog class="cta-wrap vl-paneel"> in de top layer:
   - Vlak: beige (het dossierpaneel, 84), 1 px lijn in de lijnkleur, radius van .cta-wrap (12 px), navy tekst, geen scrim (instellingen heeft er ook geen).
   - Kop: de titel links in hoofdletters, rechts het kruisje in een vierkant vak met een lijn ervoor (draait een kwartslag bij hover). Lijn eronder.
   - Voet: de knop met een lijn erboven; in de eerste stap staat de regel over de voorwaarden klein en gecentreerd eronder (Dévin 16-10). Het kleine werk (nieuwe code, ander adres) staat in de inhoud.
   - Velden (Dévin 16-10: "hetzelfde als de email velden in de laatste stap van het dossier"): papa's .form-field-group, .form-label en .form-input van stap 4, met dezelfde maten, de melding
     eronder (.vl-veldmelding, css/85) en de naam als één veld met drie vakken (.vl-naamveld, css/85). De kleuren zijn omgedraaid: stap 4 is beige op navy, dit paneel navy op beige.
     Dus geen navy vulling, en de focusrand wordt navy (in stap 4 beige, de tekstkleur daar). Papa's goed- en foutteken in het veld zijn er niet: geen poespas bij inloggen.
   - Radius (Dévin 16-10: "gelijk aan het veld en de knop … zelfde als de radius in mijn dossier gegevens stap"): veld, knoppen, naamveld en de zes codevakjes delen --inl-r. Dat is papa's
     --_layout---border-radius--4px (.25em), één keer uitgerekend op de letter van het paneel; die is gelijk aan de letter van het veld in stap 4 (12 px op 1440, 3 px radius).
     Zonder die ene uitrekening telt .25em per element mee met zijn eigen letter (de cijfers in de vakjes zijn groter, het veld op een telefoon 16 px) en lopen de hoeken uiteen.
   - Desktop (≥768): rechtsonder, 32 em breed, 2 em van de rechter- en de onderrand. Komt van onder omhoog en vervaagt in (.5 s), gaat weer weg in .3 s.
   - Telefoon (≤767): een blad over de volle breedte onderaan, bovenhoeken rond; het toetsenbord tilt het op (login-panel.js zet --inl-kb, --inl-vt en --inl-vh uit
     visualViewport, zoals de filterpagina), de pagina erachter beweegt niet (noscroll).
   Specificiteit: .cta-wrap.vl-paneel.ssn-inlog (0,3,0) wint van .cta-wrap (shared-ssn) en .cta-wrap.vl-paneel (84), ongeacht de volgorde. */
@property --inl-kb { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --inl-r { syntax: '<length>'; inherits: true; initial-value: 0px; }   /* geregistreerd: dan wordt .25em hier op het paneel omgerekend naar px en erft elk kind die px */
.ssn-inlog:not([open]) { display: none; }   /* .cta-wrap zet display:flex en wint anders van het dichte dialog-element */
.cta-wrap.vl-paneel.ssn-inlog { --inl-kb: 0px; --inl-vt: 0px; --inl-lift: max(0px, calc(var(--inl-kb) - var(--inl-vt)));   /* wat het toetsenbord het paneel omhoog duwt */
  --inl-r: var(--_layout---border-radius--4px); --kaart-kop: 4.4em; --kaart-duur: .6s; --kaart-ease: cubic-bezier(.16, 1, .3, 1); --kaart-bijzaak: .7; --kaart-in: 1.4em; --inl-ease: cubic-bezier(.32, .72, 0, 1);
  font-size: max(var(--_paragraphs---paragraph-regular--font-size), calc(var(--vl-rem) * .6875)); font-synthesis: none;
  margin: auto 2em calc(2em + var(--inl-lift)) auto; padding: 0; width: min(32em, calc(100% - 3em)); min-width: 0; height: fit-content;   /* het toetsenbord tilt het paneel ook op een tablet op (iPad), niet alleen op een telefoon (17-10) */
  max-height: min(calc(100vh - 2.5em), 56em); max-height: min(calc(100dvh - 2.5em), 56em);   /* = Mijn instellingen (94): onder even ver van de rand als rechts, boven .5em lucht */
  flex-direction: column; align-items: stretch; justify-content: flex-start;
  border: 1px solid var(--_colors---swatch--grey); color: var(--_colors---swatch--black);
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform .3s var(--inl-ease), opacity .3s var(--inl-ease), visibility 0s .3s, --inl-kb .25s cubic-bezier(.38, .7, .125, 1); }   /* de laatste is de curve van het Apple-toetsenbord, zoals --kb op de filterpagina */
.cta-wrap.vl-paneel.ssn-inlog.is-open { transform: none; opacity: 1; visibility: visible;
  transition: transform .5s var(--inl-ease), opacity .5s var(--inl-ease), --inl-kb .25s cubic-bezier(.38, .7, .125, 1); }
.ssn-inlog::backdrop { background: transparent; }
.ssn-inlog { overflow: visible; }   /* de melding Bewaarde huizen (css/80 .is-boven) hangt boven de rand van het paneel; het paneel scrolt zelf binnenin (.ssn-inlog__inhoud) */
.ssn-inlog *, .ssn-inlog *::before, .ssn-inlog *::after { box-sizing: border-box; }
.ssn-inlog :focus-visible { outline: 2px solid var(--_colors---swatch--black); outline-offset: 2px; }
/* De kop: hoogte en lijn van de kaart. De titel staat links, het kruisje rechts in een vierkant vak. */
.ssn-inlog__kop { display: flex; justify-content: space-between; align-items: stretch; flex: 0 0 auto; height: var(--kaart-kop); padding-left: var(--kaart-in); border-bottom: 1px solid var(--_colors---swatch--grey); }   /* de inspringing hier, op de lettergrootte van de kaart: op de titel (1,3 em) wordt ze 5 px te breed */
.ssn-inlog__titel { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; outline: 0;
  font-family: var(--_fonts---fonts--paragraph); font-size: 1.3em; font-weight: 500; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: inherit; }   /* = .ssn-consent__titel */
.ssn-inlog__x { display: grid; flex: 0 0 var(--kaart-kop); width: var(--kaart-kop); place-items: center; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: none; color: inherit; cursor: pointer; }
.ssn-inlog__x svg { width: .9em; height: .9em; display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) { .ssn-inlog__x:hover svg { transform: rotate(90deg); } }
.ssn-inlog__x:focus-visible { outline: 1px solid currentColor; outline-offset: calc(calc(var(--vl-rem) * .25) * -1); }
/* De inhoud scrolt zelf (toetsenbord, kleine schermen); de kop en de voet blijven staan. */
.ssn-inlog__stap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; font-family: var(--_fonts---fonts--paragraph); line-height: 1.4; }
.ssn-inlog__stap[hidden] { display: none; }
.ssn-inlog__inhoud { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: var(--kaart-in); }
.ssn-inlog__inhoud::-webkit-scrollbar { width: 0; height: 0; display: none; }
.ssn-inlog__tekst { margin: 0 0 1.2em; line-height: 1.5; }
.ssn-inlog__tekst strong { font-weight: 600; overflow-wrap: anywhere; }
.ssn-inlog__label { display: block; margin: 0 0 .5em; font-weight: 500; }
.ssn-inlog__label--weg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* de vraag staat als plaatsvervanger in het veld; schermlezers houden het label */
/* De velden van stap 4. Papa's maten blijven (letter, gewicht, binnenruimte, 1 px grijze rand, label met .75em lucht); alleen de kleuren en de hoeken zijn van het paneel.
   Een veld per rij met 1.5em ertussen.  Op aanraking even groot als stap 4 (Dévin 26-10). */
.ssn-inlog__veld + .ssn-inlog__veld { margin-top: 1.5em; }
/* De melding dicht op het veld (Dévin 18-10: "iets dichter op de velden zelf"): papa's groep zet .75em tussen veld en melding, de melding zelf nog .35em. In het paneel blijft er .3em over.
   Ook een dichte melding (hoogte 0) telt zo niet meer als lucht onder het veld. */
.ssn-inlog .form-field + .vl-veldmelding, .ssn-inlog .vl-veldmelding + .vl-veldmelding { margin-top: -.75em; }
.ssn-inlog .vl-melding__p { padding-top: .3em; }
.ssn-inlog .form-input { width: 100%; font-family: inherit; font-size: 1em; background-color: transparent; color: inherit; text-overflow: ellipsis; }   /* = stap 4: wat niet past, krijgt … (Tussenvoeg…) */
/* De randen van stap 4 (Dévin 24-10: "waarom zien de velden er niet zo clean uit als de gegevens stap in mijn dossier"): gemeten was het kader daar grijs en in het paneel navy.
   Nu grijs; in het veld (focus) de tekstkleur, zoals in stap 4. */
.ssn-inlog .form-input:not(.vl-naamdeel), .ssn-inlog .vl-naamveld { border-color: var(--_colors---swatch--grey); }
.ssn-inlog .form-input:not(.vl-naamdeel) { border-radius: var(--inl-r); }
.ssn-inlog .form-input:focus-visible { outline: 0; }
.ssn-inlog .form-input:not(.vl-naamdeel):focus { border-color: var(--_colors---swatch--black); }   /* = stap 4: de rand krijgt de tekstkleur, zonder kader eromheen. De naamvakken niet: daar kleurt het kader, de tussenlijnen blijven grijs */
.ssn-inlog .form-input[readonly] { cursor: default; }   /* het adres in de naamstap: vast en al goed (het goed-teken staat erin), dus gewoon in de tekstkleur, zoals een ingevuld veld in stap 4 */
.ssn-inlog .form-input[readonly]:focus { border-color: var(--_colors---swatch--grey); }
.ssn-inlog .vl-naamveld { border-radius: var(--inl-r); }
.ssn-inlog .vl-naamveld:focus-within { border-color: var(--_colors---swatch--black); }
.ssn-inlog [data-validate].is--error .form-input:not(.vl-naamdeel), .ssn-inlog [data-validate].is--error .vl-naamveld { border-color: var(--ssn-accent); }   /* = stap 4 (css/85, daar alleen in [data-vl-stap="4"]) */
.ssn-inlog__ts { margin: 0; padding: 0; }   /* onder het e-mailveld en onder de links van de codestap (Dévin 18-10); leeg zolang de controle geen tik vraagt */
.ssn-inlog__ts.is-zichtbaar { margin-top: 1.2em; }
/* Meldingen van de server (te vaak, de controle tegen bots): één kleur (de tekstkleur), zonder lijn ervoor. Ze komen met een korte schuif. De meldingen onder een veld zijn die van stap 4 (.vl-veldmelding). */
.ssn-inlog__fout { margin: .9em 0 0; font-weight: 500; line-height: 1.5; }
.ssn-inlog__fout[hidden] { display: none; }
@keyframes ssn-inlog-melding { from { opacity: 0; transform: translateY(-.4em); } to { opacity: 1; transform: translateY(0); } }
.ssn-inlog__fout:not([hidden]) { animation: ssn-inlog-melding .3s var(--inl-ease) both; }
html[data-ssn-motion="reduced"] .ssn-inlog__fout { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .ssn-inlog__fout { animation: none; } }
.ssn-inlog__voet { display: flex; flex-wrap: wrap; gap: var(--_sizes---size--8px); flex: 0 0 auto; padding: var(--_sizes---size--12px); border-top: 1px solid var(--_colors---swatch--grey); }
/* De voorwaarden onder de knop (Dévin 16-10, zoals het inlogscherm van Anthropic): klein, gecentreerd, de link onderstreept. Opent in een nieuw tabblad. */
.ssn-inlog__akkoord { flex: 1 0 100%; margin: .4em 0 .2em; font-size: .9em; line-height: 1.45; text-align: center; text-wrap: balance; opacity: var(--kaart-bijzaak); }
.ssn-inlog__akkoord a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* De knoppen: papa's .btn-animate-chars met de letter-rol, zoals AKKOORD en KEUZE OPSLAAN op de kaart (92 en 94). */
.ssn-inlog__knop { flex: 1 1 0; min-width: 0; margin: 0; border: 0; border-radius: var(--inl-r); background: none; font: inherit; text-align: center; }
.ssn-inlog__knop .btn-animate-chars__bg { border-radius: var(--inl-r); }
.ssn-inlog__knop:disabled { opacity: .5; cursor: default; }
/* BEZIG EN GOED (Dévin 19-10, login-panel.js knopStand). De knop houdt zijn vulling (ook als hij disabled is). De letters rollen omhoog weg met papa's rol (zijn eigen transitie:
   .6 s cubic-bezier(.16, 1, .3, 1), 0,01 s per letter), maar zonder de kopie eronder: zijn tekstschaduw gaat uit, dus er komt niets voor in de plaats. De lader rolt in dezelfde
   .6 s van onder in het midden. Bij "goed" vervaagt de lader en tekent het vinkje van de bewaarknop zich in (.34 s cubic-bezier(.22, 1, .36, 1), 16 eenheden, 1.385 dik). */
.ssn-inlog__knop.is-bezig:disabled, .ssn-inlog__knop.is-goed:disabled { opacity: 1; cursor: default; }   /* geen laadcursor (Dévin 24-10): de Mac toont die ook als hij zelf vastloopt; de lader in de knop zegt al dat het paneel bezig is */
.ssn-inlog .ssn-inlog__knop.is-bezig [data-button-animate-chars] > span { transform: translateY(-1.3em) rotate(.001deg); text-shadow: none; }   /* .ssn-inlog ervoor: papa's eigen regel zet de rol bij zweven of een tik op een telefoon terug op 0 en staat later in de pagina */
.ssn-inlog__knop .ssn-inlog__ic { transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.ssn-inlog__knop.is-bezig .ssn-inlog__ic { transform: translateY(-1.3em); opacity: 0; }   /* het Google-icoon gaat mee omhoog */
.ssn-inlog__status { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; overflow: hidden; pointer-events: none; color: inherit; }
.ssn-inlog__knop:not(.btn-secundair) .ssn-inlog__status { color: var(--_colors---swatch--beige); }
.ssn-inlog__knop.btn-secundair .ssn-inlog__status { color: var(--_colors---swatch--black); }
.ssn-inlog__status > svg { grid-area: 1 / 1; display: block; width: 1.25em; height: 1.25em; overflow: visible; }
.ssn-inlog__lader { transform: translateY(2.6em); opacity: 0; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.ssn-inlog__lader circle { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }   /* 3.6 in een vak van 50 = de 1.385 van het vinkje in zijn vak van 12, bij dezelfde maat */
.ssn-inlog__knop.is-bezig .ssn-inlog__lader { transform: none; opacity: 1; transition-delay: .08s; }
.ssn-inlog__knop.is-bezig .ssn-inlog__lader circle { animation: ssn-inlog-draai 1.1s linear infinite, ssn-inlog-boog 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.ssn-inlog__knop.is-goed .ssn-inlog__lader { opacity: 0; transform: scale(.6); transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes ssn-inlog-draai { to { transform: rotate(360deg); } }
@keyframes ssn-inlog-boog {   /* de boog wordt langer en weer korter terwijl hij doordraait (een omtrek van 2π·20 ≈ 126) */
  from { stroke-dasharray: 1 126; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 80 126; stroke-dashoffset: -22; }
  to { stroke-dasharray: 1 126; stroke-dashoffset: -125; } }
.ssn-inlog__vink path { fill: none; stroke: currentColor; stroke-width: 1.385; stroke-linecap: butt; stroke-linejoin: round; shape-rendering: geometricPrecision;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .34s cubic-bezier(.22, 1, .36, 1) .12s; }
.ssn-inlog__knop.is-goed .ssn-inlog__vink path { stroke-dashoffset: 0; }
html[data-ssn-motion="reduced"] .ssn-inlog__knop [data-button-animate-chars] > span, html[data-ssn-motion="reduced"] .ssn-inlog__lader, html[data-ssn-motion="reduced"] .ssn-inlog__ic { transition: none; }
html[data-ssn-motion="reduced"] .ssn-inlog__knop.is-bezig .ssn-inlog__lader circle { animation: ssn-inlog-draai 1.6s linear infinite; stroke-dasharray: 60 126; }   /* minder beweging: alleen een rustig draaiende boog, die blijft zeggen dat het systeem bezig is */
html[data-ssn-motion="reduced"] .ssn-inlog__vink path { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-ssn-motion="full"]) .ssn-inlog__knop [data-button-animate-chars] > span, html:not([data-ssn-motion="full"]) .ssn-inlog__lader, html:not([data-ssn-motion="full"]) .ssn-inlog__ic { transition: none; }
  html:not([data-ssn-motion="full"]) .ssn-inlog__knop.is-bezig .ssn-inlog__lader circle { animation: ssn-inlog-draai 1.6s linear infinite; stroke-dasharray: 60 126; }
  html:not([data-ssn-motion="full"]) .ssn-inlog__vink path { transition: none; } }
.ssn-inlog .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__text { color: var(--_colors---swatch--beige); }
.ssn-inlog .btn-secundair .btn-animate-chars__text { color: var(--_colors---swatch--black); }
.ssn-inlog .btn-animate-chars.btn-secundair .btn-animate-chars__bg { border-color: var(--_colors---swatch--black); }
.ssn-inlog .btn-animate-chars.btn-secundair .btn-animate-chars__text { color: var(--_colors---swatch--black); }
.ssn-inlog__knop [data-button-animate-chars] > span { white-space: pre; transition-delay: calc(var(--i, 0) * .01s); }
/* Het kleine werk onder het veld: bijzaak, een tint zachter. */
.ssn-inlog__klein { margin: 1em 0 0; font-size: .9em; line-height: 1.45; opacity: var(--kaart-bijzaak); }   /* = .ssn-consent__uitleg */
/* De code uit de mail (Dévin 15-10): zes vakjes in twee groepen van drie, het gat tussen de groepen is groter dan binnen een groep.
   Elk vakje is een veld (lijn, scherpe hoeken); het vakje voor het volgende cijfer krijgt de navy rand van een veld met focus.
   Eén echt veld ligt er doorzichtig overheen: tikken, plakken en de code uit Mail van iOS gaan naar dat veld. Het veld blijft 16 px, anders zoomt iOS in. */
.ssn-inlog__otp { position: relative; display: flex; gap: 1.1em; }
.ssn-inlog__groep { flex: 1 1 0; min-width: 0; display: flex; gap: .45em; }
.ssn-inlog__vak { flex: 1 1 0; min-width: 0; height: 3.6em; display: flex; align-items: center; justify-content: center; border: 1px solid var(--_colors---swatch--grey); border-radius: var(--inl-r);
  font-size: var(--_paragraphs---paragraph-m--font-size); font-variant-numeric: tabular-nums; line-height: 1; }
.ssn-inlog__vak.is-actief { border-color: var(--_colors---swatch--black); }
.ssn-inlog__code { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: max(var(--vl-rem), 1em); letter-spacing: 1em; -webkit-appearance: none; appearance: none; }
.ssn-inlog__code::selection { background: transparent; }
.ssn-inlog .ssn-inlog__code:focus-visible { outline: 0; }   /* het vakje met de rand is de focus; een kader om alle zes leest als een dubbele rand */
/* Nieuwe code (met aftellen) en ander e-mailadres: tekstknoppen onder de code. */
.ssn-inlog__klein--rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1em; }
.ssn-inlog__link { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ssn-inlog__link:disabled { color: var(--_colors---swatch--grey); text-decoration: none; cursor: default; font-variant-numeric: tabular-nums; }
/* Doorgaan met Google (de schakelaar staat in login-panel.js): een knop met rand, dan "of", dan het veld. De tekst in gewone hoofd- en kleine letters (Dévin 16-10: "normal case span"),
   icoon en tekst samen in één rij en op het midden uitgelijnd: de regelhoogte van de tekst is 1, dus zijn vak is zo hoog als de letters en het midden klopt met dat van het icoon. */
.ssn-inlog__sso { display: flex; flex-direction: column; gap: var(--_sizes---size--8px); margin-bottom: 0; }
.ssn-inlog__sso .ssn-inlog__knop { flex: 0 0 auto; width: 100%; }
.ssn-inlog__sso .btn-animate-chars__text { display: inline-flex; align-items: center; text-transform: none; }
.ssn-inlog__sso [data-button-animate-chars] { display: block; line-height: 1; }
.ssn-inlog__ic { display: flex; flex: none; align-items: center; margin-right: .6em; }
.ssn-inlog__ic svg { display: block; }
.ssn-inlog__of { margin: 1em 0; text-align: center; text-transform: uppercase; font-size: .8em; letter-spacing: .05em; opacity: var(--kaart-bijzaak); }
.cta-wrap.vl-paneel.ssn-inlog.is-kb { max-height: calc(var(--inl-vh, 100dvh) - 2.5em); }   /* met toetsenbord hoogstens zo hoog als het zichtbare deel */
html.ssn-inlog-open, html.ssn-inlog-open body { overflow: hidden; overscroll-behavior: none; }   /* noscroll: de pagina erachter beweegt niet (aanraking en wiel op het paneel zelf worden in login-panel.js tegengehouden) */
@media (max-width: 767px) {
  .cta-wrap.vl-paneel.ssn-inlog { margin: auto 0 calc(.5em + env(safe-area-inset-bottom) + var(--inl-lift)); width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }   /* = de kaart op de telefoon (92), plus wat het toetsenbord optilt */
  .cta-wrap.vl-paneel.ssn-inlog.is-kb { margin-bottom: calc(.5em + var(--inl-lift)); max-height: calc(var(--inl-vh, 100dvh) - 1em); }   /* het toetsenbord dekt de thuisbalk; het paneel is hoogstens zo hoog als het zichtbare deel */
}
html[data-ssn-motion="reduced"] .cta-wrap.vl-paneel.ssn-inlog, html[data-ssn-motion="reduced"] .cta-wrap.vl-paneel.ssn-inlog.is-open { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .cta-wrap.vl-paneel.ssn-inlog, html:not([data-ssn-motion="full"]) .cta-wrap.vl-paneel.ssn-inlog.is-open { transform: none; transition: none; } }
/* DE GROTE KOP (Dévin 19-10: "iconisch past bij de website, bijvoorbeeld hele grote font en animatie"; login-panel.js KOP en onthul). Papa's kop van de homepage: .heading-wrapper met
   .heading-s (3,5 em; papa zet hem zelf op 2,5 em op een telefoon) en het tweede stuk in .alt-heading (Ivy Presto cursief), in hoofdletters zoals daar. Op de letter van het paneel, navy.
   Bovenaan de inhoud van elke stap, met de lucht van papa's schaal eronder (24px-stap). Een woord breekt nooit midden in: het langste woord (WACHTWOORD.) past op 390 (proef kop-past). */
.ssn-inlog__groot { margin: 0 0 var(--_sizes---size--24px); color: inherit; text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ssn-inlog__groot > .heading-s { display: block; }

/* --- De nieuwsbriefschakelaar onder het e-mailveld (Dévin 23-10): de AAN|UIT-schakelaar (91) op de beige kaart. Hier alleen de rij: schuif links, de zin ernaast.
       Eén bron voor de popup en het Gids-vak. --- */
.ssn-inlog .ssn-inlog__onder { margin-top: 1.2em; }
.ssn-inlog .vl-schakel { display: flex; align-items: center; gap: .9em; cursor: pointer; }
.ssn-inlog .vl-schakel__in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.ssn-inlog .vl-schakel__t { font-size: .92em; line-height: 1.4; }

/* --- Het zwevende label (Dévin 24-10): "E-mailadres" staat als plaatsvervanger in het veld; in het veld (focus) of met inhoud schuift het klein naar de lijn links boven, met de
       beige achtergrond van de kaart erachter zodat de lijn eronder doorloopt. Het voorbeeldadres verschijnt pas als je in het veld staat. Papa's ease, .3 s. --- */
.ssn-inlog__zweef .form-field { position: relative; }
.ssn-inlog__zweef .ssn-inlog__zweeflabel { position: absolute; left: .75em; top: 50%; margin: 0; padding: 0 .35em; transform: translateY(-50%); transform-origin: left center; pointer-events: none;
  background: transparent; color: var(--_colors---swatch--grey); line-height: 1.2; white-space: nowrap;
  transition: top .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), color .3s, background-color 0s .15s; }
.ssn-inlog__zweef .form-input::placeholder { color: transparent; transition: color .2s; }
.ssn-inlog__zweef .form-input:focus::placeholder { color: var(--_colors---swatch--grey); }
.ssn-inlog__zweef .form-input:focus ~ .ssn-inlog__zweeflabel, .ssn-inlog__zweef .form-input:not(:placeholder-shown) ~ .ssn-inlog__zweeflabel {
  top: 0; transform: translateY(-50%) scale(.8); background: var(--ssn-surface); color: var(--_colors---swatch--black); transition: top .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1), color .3s, background-color 0s; }
.ssn-inlog__zweef.is--error .form-input:not(:focus) ~ .ssn-inlog__zweeflabel { color: var(--ssn-accent); }

/* --- Het goed-teken (= stap 4): papa's .form-field-icon rechts in het veld, zichtbaar als de groep goed is; het vinkje tekent zich in (css/85 .ssn-vink). Navy op beige. --- */
.ssn-inlog .form-field { position: relative; }
.ssn-inlog .form-field-icon.is--success { position: absolute; top: 0; right: 0; bottom: 0; max-height: none; height: auto; display: flex; align-items: center; padding: 0 1em; opacity: 0; pointer-events: none; color: var(--_colors---swatch--black); transition: opacity .2s; }
.ssn-inlog [data-validate].is--success .form-field-icon.is--success { opacity: 1; }
.ssn-inlog .ssn-inlog__zweef.is--success .form-input { padding-right: 2.8em; }

/* --- Google zonder letter-rol (Dévin 24-10): gewone tekst, geen overflow die de g afsnijdt. Bezig: tekst en icoon gaan samen omhoog weg, zoals de letters van de andere knoppen. --- */
.ssn-inlog__plat { display: block; line-height: 1.2; transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s cubic-bezier(.16, 1, .3, 1); }
.ssn-inlog__knop.is-bezig .ssn-inlog__plat { transform: translateY(-1.3em); opacity: 0; }


/* Een verborgen voet (.ssn-inlog__voet is flex) blijft verborgen. */
.ssn-inlog__voet[hidden] { display: none; }
/* Het paneel is smaller dan stap 4: alleen de achternaam houdt rechts ruimte voor het goed-teken; voornaam en tussenvoegsel krijgen links en rechts dezelfde lucht, zodat "Tussenv…" leesbaar blijft. */
.ssn-inlog .vl-naamveld > .vl-naamdeel:not(.vl-naamdeel--achter) { padding-right: .75em; }
.ssn-inlog .vl-naamveld > .vl-naamdeel { padding-left: .75em; }
/* De plaatsvervanger iets kleiner dan de letter in het veld (Dévin 26-10), zodat Voornaam, Tussenv… en Achternaam heel blijven. */
.ssn-inlog .form-input::placeholder { font-size: .9em; }
/* Op aanraking blijft het veld even groot als in stap 4 en op de contactpagina (Dévin 26-10: "zelfde grootte als de email die er anders in zit"): geen eigen 16 px, geen kleinere plaatsvervanger, geen eigen padding. */
/* ─── VRAGENLIJST (vragenlijstspec §3 en §5, bouwplan taak 18) ───────────────────────────────────────────
   Papa's split-frame, uitleg links en vragen rechts. De vragen zijn de filtersecties (ssnf-*), met grotere
   letters: het label klein in hoofdletters, de vraag groot en gewoon. Tikvlakken minstens 44 pixels. */
.vl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.vl-links .vl-uitleg { margin-top: 1.5em; max-width: 28em; }
.vl-uitleg__p { margin: 0 0 1em; font-size: var(--_paragraphs---paragraph-m--font-size); line-height: 1.5; opacity: .85; }
.vl-rechts { padding: calc(var(--vl-rem) * 2) var(--vl-kader) calc(var(--vl-rem) * 6); max-height: 100%; overflow-y: auto; }   /* zijkanten = de afstand van de kop (--vl-kader), in elke stap */
.ssnf--vl { font-size: 1.12em; }
.ssnf--vl .ssnf-sec { border-bottom: 1px solid var(--_colors---swatch--grey); }
.ssnf--vl .ssnf-sec:not(.is-open) > .ssnf-b { display: none; }
.ssnf--vl .ssnf-h { min-height: calc(var(--vl-rem) * 3); }
.vl-antwoord { margin-right: .75em; opacity: .7; text-transform: none; font-size: .9em; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-vraag__t { margin: .25em 0 .9em; font-size: 1.35em; line-height: 1.25; }
.vl-hulp, .vl-info { margin: -.4em 0 .9em; }
.ssnf--vl .ssnf-segbtn, .ssnf--vl .ssnf-row, .ssnf--vl .ssnf-rail__cell { min-height: 44px; }
.ssnf--vl .ssnf-seg > .ssnf-segbtn { flex: 1 1 calc(50% - .25em); }
.vl-rail .ssnf-rail__cell[aria-pressed="true"] { background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); }
.vl-rail + .vl-tegels { margin-top: .5em; }
.vl-schuif input[type="range"] { width: 100%; min-height: 44px; }
.vl-schuif__labels { display: flex; justify-content: space-between; gap: .5em; font-size: .85em; opacity: .75; }
.vl-schuif + .vl-tegels { margin-top: .75em; }
.vl-tekstvak__in { width: 100%; min-height: 8em; resize: vertical; }
.vl-anders { margin-top: .75em; }
.vl-link { background: none; border: 0; padding: .5em 0; min-height: 44px; color: var(--_colors---swatch--beige); font: inherit; text-decoration: underline; cursor: pointer; }
.vl-precies { margin-top: .5em; }
.vl-per { margin-bottom: .75em; }
.vl-acties { display: flex; gap: .5em; justify-content: flex-end; margin-top: 1.5em; flex-wrap: wrap; }
.vl-knop {
  min-height: calc(var(--vl-rem) * 3); padding: 0 1.4em; border: 1px solid var(--_colors---swatch--beige); border-radius: var(--_layout---border-radius--4px);
  background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); font: inherit; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
}
.vl-knop.is-secundair { background: transparent; color: var(--_colors---swatch--beige); }
.vl-velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; }
.vl-veld { margin-bottom: 1em; }
.vl-veld .ssnf-in { width: 100%; min-height: calc(var(--vl-rem) * 3); }
.vl-honing { position: absolute; left: calc(calc(var(--vl-rem) * 624.9375) * -1); width: 1px; height: 1px; overflow: hidden; }
.vl-toestemming { display: flex; gap: .75em; align-items: flex-start; min-height: 44px; cursor: pointer; line-height: 1.4; }
.vl-toestemming input { width: calc(var(--vl-rem) * 1.375); height: calc(var(--vl-rem) * 1.375); margin-top: .1em; flex: 0 0 auto; }
.vl-veldfout { margin: -.5em 0 1em; color: var(--ssn-surface); font-size: .95em; }
.vl-beeld { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-bewaar { margin: 0 0 1.5em; }
/* papa zet display op .f-form-steps-item.is-complete en .f-error-message; zonder !important wint [hidden] via specificiteit */
.f-form-steps-item.is-complete[data-vl-klaar][hidden], .f-error-message[data-vl-fout][hidden] { display: none; }
/* BEGINBEELD VAN PAPA'S ENTREE (12-10): zijn Webflow-interactie a-24 ("custom-formly-animation") zet elke stap op
   schaal .85 en opacity 0 en laat hem dan groeien. Maar die beginstand komt pas als Webflow draait (~50 ms), dus de
   eerste frame toonde de stap op volle maat: groot, klein, groeien, bij elk bezoek. Hier staat dezelfde beginstand
   al in de CSS; Webflow zet daarna zijn eigen inline stijl en neemt het over. Alleen met JS aan (.w-mod-js, door
   Webflow in de head gezet), net als .listing-card.is-wacht in 35-listings-rail-frame.css. */
.w-mod-js .f-form-steps-item[data-vl-stap] { opacity: 0; transform: scale(.85); }
/* Met Minder beweging (de schakelaar, of de computer zonder eigen keuze) speelt papa's entree niet, en dan bleef de stap op zijn beginstand staan: onzichtbaar (gevonden 17-10).
   Dan staat de stap er meteen, zonder groeien. */
/* En na AAN→UIT op dezelfde pagina: IX2 draait dan gefilterd tot de volgende pagina (lib/motion.mjs zet html[data-ssn-ix="stil"]), dus de entree speelt ook dan niet (25-10). */
html[data-ssn-motion="reduced"] .f-form-steps-item[data-vl-stap], html[data-ssn-ix="stil"] .f-form-steps-item[data-vl-stap] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .f-form-steps-item[data-vl-stap] { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .vl-grid { grid-template-columns: 1fr; }
  .vl-links .vl-uitleg { display: none; }
  .vl-rechts { padding: var(--vl-rem) var(--vl-kader) calc(var(--vl-rem) * 7); max-height: none; overflow: visible; }
  .vl-velden2 { grid-template-columns: 1fr; }
}
/* De kop is de balk van de site (Dévin 01-10, vijfde bericht), met alleen het logo en de knoppen, op dezelfde afstand van de randen als op de andere pagina's en in elke stap
   (--vl-kader). In stap 1 op desktop eindigt de balk aan de rand van het vlak (--vl-nav-rechts). Scrolt het vak, dan geldt de stand .is-nav-small van de site. */
.nav:has([data-vl-knoppen]):not(.is-nav-small) { padding-top: var(--vl-kader); padding-left: var(--vl-kader); padding-right: var(--vl-nav-rechts, var(--vl-kader)); }
/* Het account-vak (pictogram) en de taalkeuze (NL) zijn vakken zoals Sluiten (Dévin 02-10): [logo … account | NL | Sluiten]. Sluiten is een vak van de balk, zoals de vakken van de header van de site (NL, WhatsApp): over de volle hoogte, aan het rechtereind, met alleen een lijn links
   (Dévin 01-10, vijfde bericht). De andere kanten zijn de rand van de balk. Geen eigen achtergrond of rand van de knop. */
.nav:has([data-vl-knoppen]) .navbar_col.is-right { padding-right: 0; }
[data-vl-knoppen] { display: flex; align-items: center; align-self: stretch; gap: 0; flex: none; }
[data-vl-knoppen] > .btn-animate-chars { margin: 0; justify-content: center; }
/* Dévin 02-10: op desktop (vanaf 768) is het de beige knop Aanmelden (ingelogd Afmelden), op een telefoon (tot en met 767) het account-vak. Papa's knopstijl zet display:flex op de knoppen en wint dan van [hidden]; .vl-aanmelden[hidden] is specifieker. */
.vl-aanmelden[hidden] { display: none; }
[data-vl-knoppen] > .vl-aanmelden { margin: .5em .5em .5em 0; height: auto; align-self: stretch; }   /* compact: overal .5em tot de rand van de balk en tot de lijn van het volgende vak (Dévin 01-10, negende bericht) */
[data-vl-knoppen] > .vl-aanmelden:focus-visible { outline-color: var(--_colors---swatch--black); }
@media (min-width: 768px) { [data-vl-knoppen] > .navbar-item.vl-account { display: none; } }
@media (max-width: 767px) { [data-vl-knoppen] > .vl-aanmelden { display: none; } }
[data-vl-knoppen] > [data-vl-sluit] { align-self: stretch; height: auto; display: flex; align-items: center; justify-content: center; padding: 0 1.5em; border-left: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: none; }
[data-vl-knoppen] > [data-vl-sluit] .btn-animate-chars__bg { display: none; }
/* Het account-vak: .navbar-item van de site (alleen een lijn links), over de volle hoogte van de balk en vierkant (Dévin 08-10). Uitgelogd opent het account-vak het aanmeldpaneel; ingelogd valt er een lijst uit
   (css hieronder): muis = hover of de knop, aanraking = de knop, toets = focus. De lijst heeft het glas van de balk (.navbar-bg: navy-60 en blur 14). */
[data-vl-knoppen] > .navbar-item { flex: none; height: 100%; aspect-ratio: 1 / 1; position: relative; color: var(--_colors---swatch--beige); }
[data-vl-knoppen] > .navbar-item[hidden] { display: none; }   /* .navbar-item zet display:flex en wint dan van [hidden] */
.vl-account { cursor: pointer; transition: background-color .2s; }
.vl-account:hover, .vl-menu:has(.vl-menu__knop[aria-expanded="true"]) { background-color: color-mix(in srgb, var(--_colors---swatch--beige) 8%, transparent); }
.vl-account__ic { width: 1.75em; height: 1.75em; flex: none; }
.vl-menu__knop { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.vl-menu__lijst { display: none; position: absolute; top: 100%; right: 0; z-index: 10; min-width: 17em; box-sizing: border-box; border: 1px solid var(--_colors---swatch--grey); border-radius: 0 0 var(--_layout---border-radius--8px) var(--_layout---border-radius--8px);
  background-color: var(--_colors---swatch--black-60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-align: left; }
.vl-menu.is-open .vl-menu__lijst { display: block; }   /* toets en aanraking: de knop (Enter, spatie of tik); geen :focus-visible, dan komt de lijst na Escape terug */
@media (hover: hover) and (pointer: fine) { .vl-menu:hover .vl-menu__lijst { display: block; } }
.vl-menu__wie { margin: 0; padding: 1em 1.25em; font-size: .9em; line-height: 1.4; opacity: .75; overflow-wrap: anywhere; }
.vl-menu__wie strong { display: block; font-weight: 500; opacity: 1; }
.vl-menu__item { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 1.1em 1.25em; border: 0; border-top: 1px solid var(--_colors---swatch--grey); background: none; color: inherit; font: inherit; font-size: 1em; text-align: left; text-transform: uppercase; letter-spacing: .01em; cursor: pointer; }
.vl-menu__item:hover { background-color: color-mix(in srgb, var(--_colors---swatch--beige) 8%, transparent); }
.vl-account:focus-visible, .vl-menu__knop:focus-visible, .vl-menu__item:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: calc(calc(var(--vl-rem) * .3125) * -1); }
[data-vl-knoppen] > :focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: calc(calc(var(--vl-rem) * .3125) * -1); }   /* toetsenbord: een dunne ring binnen de knop, geen blauwe standaardring */
/* Telefoon: het logo heeft de maat van de kop van de site (Dévin 08-10: "header en logo verhouding exact gelijk"), op elke breedte. Het logovak mag smaller worden (het logo staat links),
   het vak Sluiten heeft wat minder binnenruimte; gemeten van 320 tot 430: het beeld van het logo is even groot als op /nl/properties. */
@media (max-width: 479px) { [data-vl-knoppen] > [data-vl-sluit] { padding: 0 .9em; } .nav:has([data-vl-knoppen]) .navbar_logo { min-width: 0; } }
/* Stapmotor (bouwplan taak 20). */
.vl-schuif input[type="range"].is-leeg { opacity: .55; }
.is-aanvullen .vl-gegevens { display: none; }
[data-vl-stap] h1[tabindex="-1"]:focus, [data-vl-stap] h2[tabindex="-1"]:focus { outline: none; }
/* De vaste kop is de balk van de site (Dévin 01-10, vijfde bericht): omrand en wazig, met alleen het logo en de knoppen. Scrolt papa's vak, dan krijgt hij de stand
   .is-nav-small van de site (zie kopRand in questionnaire.js); een eigen donkere laag is er niet meer. */
/* Papa's .f-steps-bg (absolute, de donkere rechterhelft) lag over de vragen: alleen de knoppen (zelf positioned) kwamen
   erbovenuit, koppen en vraagteksten niet (gemeten 26-09 met elementFromPoint). De rechterkolom krijgt een eigen laag. */
.vl-rechts { position: relative; z-index: 1; }
[data-vl-stap] .msf-button.is-submit { right: 0; }   /* papa schuift hem op een telefoon .25em naar links (3px): de knop sluit dan niet aan op de zijkanten (--vl-kader) van de rest van de stap */
/* Desktop: de vragen beginnen onder de vaste kop (72px), op de hoogte van de kop links (gemeten 26-09: de eerste sectiekop
   stond op 60px, naast Aanmelden en Sluiten). */
@media (min-width: 992px) { .vl-rechts { padding-top: calc(calc(var(--vl-rem) * 4.5) + calc(var(--vl-rem) * 2)); } }
/* Papa's vinkje in stap 4 (28-09: zijn stappen terug). Zijn aangevinkte stand is het groen van zijn palet, dat bij de
   omkleuring het lichtere navy werd (#2a2420): op de navy pagina onzichtbaar (gemeten 28-09). De stand krijgt het oranje
   vlak van het filtervinkje (.ssnf-cbx), zonder vink; maat, rand en plek blijven van papa. Webflow zet labels vet. */
[data-vl-form] .form_checkbox-icon { position: relative; flex: 0 0 auto; box-sizing: border-box; width: var(--vl-vak); height: var(--vl-vak); margin: 0; border: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: transparent;
  transition: background .24s var(--vl-uit), border-color .24s var(--vl-uit); }   /* vierkant zonder radius, de rand in de lijnkleur; aangevinkt een effen oranje vlak (Dévin 17-10) */
[data-vl-form] .form_checkbox:hover:not(:has(.vl-vinklink:hover)) .form_checkbox-icon:not(.w--redirected-checked) { border-color: var(--_colors---swatch--beige); }   /* op de link "voorwaarden" niet: die gaat naar een andere pagina, niet naar het vinkje (Dévin 17-10) */
[data-vl-form] .form_checkbox-icon.w--redirected-checked { background: var(--ssn-accent); border-color: var(--ssn-accent); }
/* Aangevinkt is het een effen oranje vlak, zonder vinkje erin (Dévin 17-10: "die checkbox is de enige die geen checks moeten hebben maar plain oranje moeten zijn"). */
[data-vl-form] .form_checkbox:has(input:focus-visible) .form_checkbox-icon { outline: 2px solid var(--_colors---swatch--beige); outline-offset: 2px; }
[data-vl-form] .form_checkbox-label { font-weight: 400; line-height: 1.4; }
[data-vl-form] .form_checkbox { display: flex; align-items: center; gap: .9em; margin: 0; padding: 0; }
[data-vl-form] .form_checkbox::before, [data-vl-form] .form_checkbox::after { content: none; }   /* Webflow zet hier lege hulpvakjes (.w-checkbox::before/::after, display: table); in een flex-rij schoven ze het vinkje 10 px in */
/* De puls: het vakje zonder vinkje bij Verstuur licht één keer oranje op en dooft weer uit (questionnaire.js puls) */
@keyframes vl-puls { 0% { border-color: var(--_colors---swatch--grey); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ssn-accent) 55%, transparent); }
  25% { border-color: var(--ssn-accent); background: color-mix(in srgb, var(--ssn-accent) 30%, transparent); }
  100% { border-color: var(--_colors---swatch--grey); background: transparent; box-shadow: 0 0 0 .55em color-mix(in srgb, var(--ssn-accent) 0%, transparent); } }
[data-vl-form] .form_checkbox-icon.is-puls { animation: vl-puls .9s var(--vl-uit) 1; }
html[data-ssn-motion="reduced"] [data-vl-form] .form_checkbox-icon.is-puls { animation: none; border-color: var(--ssn-accent); }

/* ─── MIJN DOSSIER (accounts-spec §7, bouwplan taak 22) ──────────────────────────────────────────────────
   Stap 1, alleen ingelogd, boven het beige vlak. Papa's sectiecontainer van dat vlak, zonder het vlak: de donkere
   pagina loopt door. Een eigen regel over de hele breedte en boven papa's .f-steps-bg, net als het vlak (taak 19).
   Wat je invulde krijgt de rijen van de vragen in stap 2: het label links, je antwoord rechts. */
.f-form-steps-item[data-vl-stap="1"] > .md { flex: 0 0 auto; width: 100%; min-width: 0; align-self: stretch; position: relative; z-index: 1; }
.md__vlak { padding: 0 2em; }   /* dezelfde binnenruimte als .refl__vlak: de tekst begint waar "Je referenties" begint */
.md__wie { margin: 0 0 1.5em; opacity: .85; }
.md__wie .vl-link { min-height: 0; padding: 0; }   /* een link in een zin: WCAG 2.5.8 zondert die uit van de 24px-regel */
.md__aanvraag { display: grid; grid-template-columns: 1fr 1fr; gap: 2em 4em; align-items: start; }
.md__aanvraag[hidden] { display: none; }
.md__stand { margin: 0; }
.md__binnen48 { margin: .75em 0 0; opacity: .85; }
.md__acties { justify-content: flex-start; }
.md__kop { margin: 0; opacity: .7; }
.md__stap { margin: 1.25em 0 0; font-weight: 500; }
.md__dl { margin: 0; }
.md__rij { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5em; padding: .9em 0; }
.md__rij dt { flex: 0 0 auto; }
.md__v { margin: 0; text-align: right; opacity: .85; overflow-wrap: anywhere; }
.md__onder { margin: 1.5em 0 0; }
.md__verwijder { opacity: .7; }
@media (max-width: 991px) { .md__aanvraag { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .md__vlak { padding: 0 1.25em; } }

/* ─── STAP 1: DE INTRO (Dévin, 29-09 t/m 01-10; as-built in docs/5_build/DOSSIER-STAP1-ASBUILT.md) ─────────────────────────
   Pagina navy. Links papa's eigen cel op de primaire navy en vast, rechts het beige vlak van de homepage (.cta-wrap, radius 12px)
   met navy eromheen: overal de standaard afstand van de kop van de site (--vl-kader, 1,5em; telefoon 1em; Dévin 01-10, vijfde bericht), ook voor de balk
   met logo en knoppen, die boven de linkerkant staat en gelijk met de bovenkant van het vlak. Op desktop vult het raster het scherm en scrolt het niet: de linkerkant staat vast, alleen de body van het
   vlak scrolt. Onder 992 staat alles onder elkaar. Alles in em: papa schaalt de body-letter met de breedte. */
@property --vl-open { syntax: '<number>'; inherits: true; initial-value: 0; }   /* Vergelijken: 0 = dicht, 1 = open; de overgang staat op het vlak (.cta-wrap.vl-paneel) */
:root { --vl-vlak: var(--ssn-surface); --vl-ink: var(--_colors---swatch--black); }   /* het vlak is beige (Dévin 01-10, achtste bericht: "ik ga dan toch voor het beige vlak"); alle kleuren hieronder lopen via deze twee, dus een ander thema is één regel */
.cta-wrap.vl-paneel { background-color: var(--vl-vlak); color: var(--vl-ink); }
:root { --vl-rand: var(--_layout---padding-global--page-padding); --vl-lijn: var(--_colors---swatch--grey); --vl-rechts: min(50vw, 80em); }   /* het vlak is nooit breder dan 80em en staat rechts, de linkerkant vult de rest */
/* Eén maat voor alle marges (Dévin 01-10, vijfde bericht: "heel consistent aan de standaard header afstand door alle stappen heen"): de afstand van de kop van de site tot de randen,
   1,5em en op een telefoon 1em. Op body, want daar zet papa de telefoonmaat (op :root is hij altijd 1,5em). De kop, het vlak, de WhatsApp-kaart en de zijkanten van de vragen gebruiken
   allemaal deze maat; de padding in het vlak is er dezelfde (kader = pad). Niet afgerond: dat is letterlijk de afstand van de kop op de andere pagina's. */
body { --vl-kader: var(--_layout---padding-global--page-padding); --vl-pad: var(--vl-kader); }
.f-form-steps-item[data-vl-stap="1"] .f-steps-bg { display: none; }
.container-col-12:has([data-vl-stap]) { max-width: none; }   /* op een groot scherm stond het vlak 200px van de rechterrand (papa's container: 160em, gecentreerd) */
.vl-paneelcel { min-width: 0; }
.cta-wrap.vl-paneel { height: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; width: 100%;
  --vl-vast: 23em; --vl-vast-open: 26em; --vl-rij: 5.5em; --vl-nr: var(--vl-rij); --vl-foto: var(--vl-rij); --vl-eind: var(--vl-rij); --vl-kop: 2.6em;   /* de vakken zijn altijd net zo breed als de rij hoog is */ --vl-r: var(--_layout---border-radius--8px); --vl-ease: cubic-bezier(.76, 0, .24, 1);
  /* De kolommen van het vergelijken, in de volgorde van de beslissing (lib/referentielijst.mjs KOLOMMEN; een test bewaakt dat beide lijsten gelijk zijn). */
  --k-prijs: 13em; --k-eigendom: 8.5em; --k-plaats: 9em; --k-type: 7.5em; --k-slaapkamers: 7.5em; --k-badkamers: 7em; --k-woonoppervlak: 9.5em;
  --k-grond: 6.5em; --k-oplevering: 8.5em; --k-zwembad: 7em; --k-gemeubileerd: 9em;
  --vl-data: calc(var(--k-prijs) + var(--k-eigendom) + var(--k-plaats) + var(--k-type) + var(--k-slaapkamers) + var(--k-badkamers) + var(--k-woonoppervlak) + var(--k-grond) + var(--k-oplevering) + var(--k-zwembad) + var(--k-gemeubileerd));
  /* Eén aandrijving voor Vergelijken (Dévin 01-10, vijfde bericht): --vl-open loopt van 0 naar 1 met één bekende ease (die van de kop van de site). De naam-groep krimpt van "de rest van het
     venster" tot haar eigen breedte, de eigenschappenbox groeit van de prijs tot alle kolommen. De prijs staat altijd links in de box; de andere kolommen komen onder de muur rechts (het
     laatste vak) vandaan, zonder fade. 100cqw is het vaste venster van de tabel (container-type op .vl-tabel__scroll): 100% groeit mee met de rij en laat de prijs wiebelen. */
  --vl-open: 0;
  /* De naam gaat in één rechte lijn van de vulling (dicht: de naam vult de vrije ruimte, minstens --vl-vast) naar --vl-vast-open (open). Geen overschot en dus geen wobble in de breedte (Dévin 02-10). */
  --vl-vulling: max(var(--vl-vast), calc(100cqw - var(--vl-eind) - var(--k-prijs)));
  --vl-naam: calc(var(--vl-vulling) + var(--vl-open) * (var(--vl-vast-open) - var(--vl-vulling)));
  --vl-box: calc(var(--k-prijs) + var(--vl-open) * (var(--vl-data) - var(--k-prijs)));
  transition: --vl-open .7s cubic-bezier(.625, .05, 0, 1) var(--vl-vertraging, 0s); }   /* de ease van de kop van de site; dicht wacht hij op het terugscrollen (referentietabel.js zet --vl-vertraging) */

@media (min-width: 992px) {
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid { grid-column-gap: 0; }
  /* Omgedraaid (Dévin 09-10): het beige vlak links (tot 80em), rechts de intro met de kop, Aanmelden/Sluiten en de WhatsApp-kaart. De volgorde in de pagina blijft intro, vlak (onder 992 staat de intro boven). */
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid { grid-template-columns: minmax(0, var(--vl-rechts)) minmax(0, 1fr); }
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid > .vl-paneelcel { grid-column: 1; grid-row: 1; }
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid > .f-steps-grid_content:not(.vl-paneelcel) { grid-column: 2; grid-row: 1; }
  html[data-vl-stap-nu="1"] .f-form-steps-wrap { overflow: hidden; }   /* het raster past precies; alleen het vlak scrolt */
  .vl-paneelcel { display: flex; align-items: stretch; height: 100%; padding: calc(var(--vl-nav-onder, calc(var(--vl-rem) * 4.5)) + var(--vl-kader)) var(--vl-kader) var(--vl-kader); overflow: hidden; box-sizing: border-box; }
  /* Past de linkerkant niet in een laag venster, dan scrolt hij zelf; de pagina scrolt op desktop nooit. */
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid > .f-steps-grid_content:not(.vl-paneelcel) { max-height: 100%; overflow-y: auto; justify-self: stretch !important; }   /* de linkerkant vult de rest; papa's Webflow-id (#w-node-…) centreert hem op zijn eigen breedte, dus !important */
  /* Dévin 01-10: Aanmelden en Sluiten in de linkerhelft (de vaste balk is er half zo breed; logo links, knoppen rechts op de rand van de tekst)
     en papa's WhatsApp-kaart tegen de rechterkant van die helft, met dezelfde marge onderaan als het vlak. */
  /* De marge is overal gelijk (Dévin 01-10): --vl-kader van de rand tot de balk, het vlak en de WhatsApp-kaart, en --vl-kader tussen balk of kaart en het vlak. */
  /* De kop loopt over de hele pagina (logo links boven het vlak, Aanmelden en Sluiten rechts; Dévin 09-10); het vlak begint eronder en is daardoor iets lager dan het scherm min de kop. */
  .f-form-steps-item[data-vl-stap="1"] .popup-comp { left: auto; right: var(--vl-kader); bottom: var(--vl-kader); }
  /* Het vlak zoals het beige vlak van de brug (58, Dévin 28-10: "in het dossier moet deze stijl ook voortvloeien", met zijn ontwerp erbij): geen kader links en onder, het beige loopt tot
     de linkerrand en de onderrand van het scherm; de marge staat nu binnen in het vlak, zodat de inhoud blijft waar hij stond. Alleen rechtsboven de ronde hoek (de grote radius
     van de site); linksboven de omgekeerde hoek van de brug (een radial-gradient in het beige), zodat het navy erboven zijn ronde hoek op het beige zet. */
  .vl-paneelcel { position: relative; padding-left: 0; padding-bottom: 0; }
  .vl-paneelcel > .cta-wrap.vl-paneel { padding-left: var(--vl-kader); border-radius: 0 var(--_layout---border-radius--12px) 0 0; }
  .vl-paneelcel::before { content: ""; position: absolute; left: 0; top: calc(var(--vl-nav-onder, calc(var(--vl-rem) * 4.5)) + var(--vl-kader) - var(--_layout---border-radius--12px));
    width: var(--_layout---border-radius--12px); height: var(--_layout---border-radius--12px); pointer-events: none;
    background-image: radial-gradient(circle at 100% 0%, transparent calc(var(--_layout---border-radius--12px) - .5px), var(--vl-vlak) var(--_layout---border-radius--12px)); }
}
/* Verticale schermen (≤991, het vlak staat onder de intro; Dévin 01-10, tiende bericht): het beige vlak is terug, met radius. De intro blijft staan (sticky) en "Jouw referenties" schuift er als
   een blad overheen; de intro wordt dan navy en wazig (--vl-bedek, gezet door referentielijst.js). De hoogte van de intro volgt het scherm, met een minimum en een maximum, zodat de kop van
   het vlak altijd net in beeld steekt. De WhatsApp-kaart wordt nooit breder dan de balk (een maximum, geen breedte). Tot 767 loopt het vlak van rand tot rand. */
@media (max-width: 991px) {
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid { --vl-top: 10em; --vl-intro-h: max(calc(var(--vl-rem) * 20), calc(100svh - var(--vl-top))); padding-top: var(--vl-top); }
  .vl-paneelcel { grid-area: 1 / 1; margin-top: var(--vl-intro-h); scroll-margin-top: 7em; position: relative; z-index: 2; padding: 0 var(--vl-kader) calc(var(--vl-kader) * 2); }
  .cta-wrap.vl-paneel { height: auto; }
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid > .f-steps-grid_content:not(.vl-paneelcel) { position: sticky; top: var(--vl-top); z-index: 1; height: var(--vl-intro-h);
    grid-area: 1 / 1; margin-bottom: auto; display: flex; flex-direction: column; justify-content: center; }   /* over de hele grid; een automatische marge onder houdt hem bovenaan (papa's #w-node-regel zet align-self: center en wint van elke klasse); blijven staan doet sticky (Dévin 17-10, avond: "het hapert giganitsch op mijn telefoon"): tot 17-10 schoof een script hem elk beeld terug (--vl-pin), en op een iPhone liep dat een beeld achter op het scrollen; de pagina zelf scrolt (ScrollSmoother staat uit), dus sticky werkt en loopt mee met de scroll van de telefoon zelf */
  /* kop + intro = één scherm, gemeten aan het kleine venster (svh: met de balken van Safari in beeld) en niet aan dvh: dvh verandert terwijl je scrolt (de balken klappen in) en dan sprong het vlak elke keer mee */
  /* Het streepje onderaan het eerste scherm: de naam van het vlak klein erboven, het streepje eronder. Het vlak heeft hetzelfde streepje bovenaan, zodat het één ding lijkt dat omhoog komt. */
  .vl-peek { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(1em, env(safe-area-inset-bottom)); width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; opacity: max(0, calc(1 - var(--vl-bedek, 0) * 4)); }   /* papa's .callout-wrapper uit de kop van een pandpagina; weg zodra het vlak eroverheen schuift */
  .vl-peek .callout-line { display: block; }
  .vl-paneel__greep { display: block; width: 3em; height: calc(var(--vl-rem) * .25); border-radius: calc(var(--vl-rem) * .25); background: var(--vl-ink); opacity: .25; margin: .6em auto 0; flex: 0 0 auto; }
  /* Op een telefoon staat de WhatsApp-kaart onder het vlak, in de pagina, en blijft daar (Dévin 09-10); referentielijst.js verhuist hem naar de cel van het vlak. */
  .f-form-steps-item[data-vl-stap="1"] .vl-paneelcel .popup-comp { position: relative; inset: auto; width: fit-content; max-width: 100%; margin: calc(var(--vl-kader) + 2.5em) 0 0 auto; }   /* de ruimte erboven is voor zijn kruisje */
  .vl-peek:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
  .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid > .f-steps-grid_content:not(.vl-paneelcel)::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
    background-color: var(--_colors---swatch--black); opacity: calc(var(--vl-bedek, 0) * .8); will-change: opacity; }   /* de intro wordt navy onder het vlak; geen blur meer die per beeld opnieuw rekent (die haperde op een telefoon), alleen de dekking, die de telefoon zelf tekent */
  .f-form-steps-item[data-vl-stap="1"] .popup-comp { max-width: calc(100% - 2 * var(--vl-kader)); }
}
@media (max-width: 479px) { .f-form-steps-item[data-vl-stap="1"] > .f-steps-grid { --vl-top: 8em; } }
@media (max-width: 767px) { .vl-paneelcel { padding-left: 0; padding-right: 0; } .f-form-steps-item[data-vl-stap="1"] .vl-paneelcel .popup-comp { width: auto; margin-inline: var(--vl-kader); } }   /* het vlak loopt van rand tot rand, de WhatsApp-kaart eronder niet: hij is zo breed als de balk */   /* mobiel: het vlak loopt van rand tot rand (Dévin 01-10) */
/* Telefoon (≤479, papa's eigen breekpunt; daar is het vlak maar ~25em breed, gemeten 360 t/m 430): rijen van 5em, en nummer, foto en laatste vak zijn altijd vierkant (Dévin 01-10:
   "de min box moet altijd vierkant blijven"). De prijs krijgt geen eigen kolom maar staat onder de titel. Vergelijken bestaat hier wel (Dévin 01-10, zesde bericht): de hele tabel
   scrolt dan zijwaarts, zie het blok "Mobiel: de hele tabel scrolt" hieronder. */
@media (max-width: 479px) {
  .cta-wrap.vl-paneel { --vl-rij: 5em; --vl-vast: 20em; --k-prijs: 0px; }
  .vl-paneel .vl-data > [data-k="prijs"] { display: none; }
  .vl-paneel .vl-titel__ref { display: none; }
  .vl-paneel .vl-titel__prijs { display: flex; }
  .vl-rij::before { display: none; }
  .vl-vast > .vl-kopcel--nr { padding-left: .8em; }
  .vl-titel { padding: 0 .7em; gap: .25em; overflow: hidden; }
  .vl-titel__t { font-size: .9em; flex-shrink: 0; }
  .vl-paneel .vl-rij:not(.vl-rij--kop) .vl-min { border-left-color: color-mix(in srgb, var(--vl-lijn) calc(var(--vl-open) * 100%), transparent); }   /* dicht raakt de lijn van de naam de lijn van dit vak: samen één lijn, geen dubbele */
}

/* Scherpe lijnen (Dévin 01-10: "geen consistente lijnen"): papa's em wordt per schermbreedte een rond getal niet (12,6px op 1512, 8,53px op 1024), dus
   een rij van 5,5em werd 70,3px hoog en de lijnen vielen op wisselende pixels. Alle maten van het raster zijn nu hele pixels (round), zodat elke
   lijn precies één pixel dik is en alle rijen even hoog zijn. Zonder round() (oude browsers) blijven de em-maten staan. */
@supports (width: round(1px, 1px)) {
  .cta-wrap.vl-paneel { --vl-rij: round(5.5em, 1px); --vl-kop: round(2.6em, 1px); --vl-vast: round(23em, 1px); --vl-vast-open: round(26em, 1px);
    --k-prijs: round(13em, 1px); --k-eigendom: round(8.5em, 1px); --k-plaats: round(9em, 1px); --k-type: round(7.5em, 1px); --k-slaapkamers: round(7.5em, 1px);
    --k-badkamers: round(7em, 1px); --k-woonoppervlak: round(9.5em, 1px); --k-grond: round(6.5em, 1px); --k-oplevering: round(8.5em, 1px); --k-zwembad: round(7em, 1px); --k-gemeubileerd: round(9em, 1px);
    /* De naam vult de vrije ruimte van het venster (een gebroken breedte); naar beneden op hele pixels, zodat de lijn aan het eind van de naam en de rij scherp blijven. */
    --vl-vulling: round(down, max(var(--vl-vast), calc(100cqw - var(--vl-eind) - var(--k-prijs))), 1px);
    --vl-naam: calc(var(--vl-vulling) + var(--vl-open) * (var(--vl-vast-open) - var(--vl-vulling))); }
  @media (max-width: 479px) { .cta-wrap.vl-paneel { --vl-rij: round(5em, 1px); --vl-vast: round(20em, 1px); --k-prijs: 0px; } }
}

/* Verticale schermen (≤991, Dévin 02-10, elfde bericht: "de prijs column neemt teveel in, maak schoon voor de vergelijken functie"): hier groeit de em met het scherm (13px op 390, 19px op 991),
   dus de prijskolom werd 285px en na het openen schoof hij nog naar links. De prijs staat nu, net als op een telefoon, onder de titel (altijd in beeld, nooit een kolom die beweegt) en de
   vergelijkkolommen beginnen bij Eigendom. Op een telefoon houdt de naam zijn breedte (hij vult al het venster min het laatste vak; naast hem staat een deel van de eerste kolom);
   op een tablet (480 t/m 991) krimpt de naam bij het openen in één rechte lijn naar 28em: de titel houdt ruimte (de echte titels zijn gemiddeld 26 tekens) en naast de naam staat Eigendom helemaal en Plaats half, het teken dat er meer is. */
@media (max-width: 991px) {
  .cta-wrap.vl-paneel { --k-prijs: 0px; }
  .vl-paneel .vl-data > [data-k="prijs"] { display: none; }
  .vl-paneel .vl-titel__ref { display: none; }
  .vl-paneel .vl-titel__prijs { display: flex; }
  .vl-paneel .vl-rij:not(.vl-rij--kop) .vl-min { border-left-color: color-mix(in srgb, var(--vl-lijn) calc(var(--vl-open) * 100%), transparent); }   /* dicht raakt de lijn van de naam de lijn van dit vak: samen één lijn, geen dubbele */
}
@media (min-width: 480px) and (max-width: 991px) { .cta-wrap.vl-paneel { --vl-vast-open: 28em; } }
@supports (width: round(1px, 1px)) { @media (min-width: 480px) and (max-width: 991px) { .cta-wrap.vl-paneel { --vl-vast-open: round(28em, 1px); } } }
@media (max-width: 479px) { .cta-wrap.vl-paneel { --vl-naam: var(--vl-vulling); } }

@media (min-width: 992px) { .vl-peek, .vl-paneel__greep { display: none; } }

/* Kop van het vlak (Dévin 01-10, vijfde bericht): de titel links, Vergelijken tegenover hem op dezelfde regel, daaronder de uitleg over de volle
   breedte. Eén marge rondom (--vl-pad), dezelfde als de navy rand erbuiten. */
.vl-paneel__kop { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5em; row-gap: .75em; align-items: center; padding: var(--vl-pad) var(--vl-pad) calc(var(--vl-pad) * .5); }
/* Titel (Dévin 09-10): MIJN DOSSIER in het hoofdlettertype (.heading-s), Referenties eronder in Ivypresto cursief (.alt-heading), zoals de kop van de lege staat hieronder (.vl-leeg).
   De maat is 0,7 van heading-s (tot 12-10 ook de kop van de lege staat). */
.vl-paneel__titel { display: flex; flex-direction: column; gap: .5em; margin: 0; min-width: 0; font-size: 1em; font-weight: 400; line-height: 1; color: var(--vl-ink); }   /* 1em: papa's h2 is groot en de maten hieronder rekenen in em */
.vl-paneel__klein { font-family: var(--_fonts---fonts--paragraph); font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .1em; line-height: 1; text-transform: uppercase; opacity: .55; }   /* MIJN DOSSIER: heel klein en iets gedimd (Dévin 09-10) */
.vl-paneel__titel .alt-heading { font-size: calc(var(--_headings---heading-s--font-size) * .8); line-height: 1.02; letter-spacing: -.005em; text-transform: uppercase; }   /* Referenties: Ivypresto cursief, hoofdletters */
.vl-paneel__uitleg { grid-column: 1 / -1; margin: 0; max-width: none; opacity: .75; text-wrap: pretty; }
.vl-paneel__acties { display: flex; justify-content: flex-end; }
.vl-vergelijken { margin: 0; cursor: pointer; flex: 0 0 auto; width: auto; }
.vl-paneel .btn-animate-chars.btn-secundair.vl-vergelijken[aria-pressed="true"] .btn-animate-chars__bg { background-color: var(--vl-ink); border-color: var(--vl-ink); }
.vl-paneel .btn-animate-chars.btn-secundair.vl-vergelijken[aria-pressed="true"] .btn-animate-chars__text { color: var(--vl-vlak); }   /* aan = gevuld */
.vl-vergelijken:focus-visible { outline: 1px solid var(--vl-ink); outline-offset: 3px; }
.vl-paneel__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--vl-pad); padding: var(--vl-pad); }
@media (min-width: 992px) { .vl-paneel__body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; } .vl-paneel__body::-webkit-scrollbar { display: none; } }

/* De tabellen: alleen lijnen, één omtrek met dezelfde radius om alle hoeken. Een tabel is één horizontale scroller (zonder zichtbare
   balk; je sleept of veegt) met de balk en alle rijen erin: rijen delen zo dezelfde scrollLeft. Links blijft de naam-groep staan
   (nummer, foto, titel; vult de ruimte tot de eigenschappen en is bij Vergelijken zijn eigen breedte), rechts het laatste vak. Alle tekst in de tabellen is niet te selecteren. */
.vl-tabel { flex: 0 0 auto; border: 1px solid var(--vl-lijn); border-radius: var(--vl-r); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vl-tabel__scroll { container-type: inline-size; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; }
.vl-tabel__scroll::-webkit-scrollbar { display: none; }
.vl-tabel__scroll:focus-visible { outline: 2px solid var(--vl-ink); outline-offset: -2px; }
/* Elke rij is zo breed als wat erin staat (naam + box + laatste vak, allemaal uit dezelfde aandrijving) en nooit smaller dan het venster: zo rekt een lange cel alleen zijn eigen rij niet op en lopen de kolommen niet scheef (gemeten 29-09). */
.vl-rij { display: flex; width: 100%; min-width: calc(var(--vl-naam) + var(--vl-box) + var(--vl-eind)); height: var(--vl-rij); background-color: var(--vl-vlak); }
.vl-rij[hidden] { display: none; }
/* Lagen (Dévin 01-10, zesde bericht): de landingsplek, de lege plekken en een vliegend doel-vak liggen altijd ONDER de listings. Een listing die schuift (transform) tekende anders onder
   of boven de plek, en de dikke lijn (sticky, z-index 3) tekende dwars over listings heen. Elke rij is een eigen laag; de plekken zijn de laag eronder. */
.vl-rij { position: relative; z-index: 1; }
.vl-rij.is-leeg, .vl-gat, .vl-rij.is-landt { z-index: 0; }
.vl-rij.is-gekozen { z-index: 2; }   /* het actieve huis ligt boven alle andere rijen (Dévin 01-10, zevende bericht); de ring (z-index 3) blijft erboven */
/* De lijn tussen twee rijen telt niet mee in de 5,5em: de vakken (nummer, foto, laatste vak) zijn zo echt vierkant. */
.vl-rij + .vl-rij { border-top: 1px solid var(--vl-lijn); height: calc(var(--vl-rij) + 1px); }
.vl-rij--kop { height: var(--vl-kop); }
/* De naam-groep vult de ruimte tot de eigenschappen (uit) of is er net zo breed als zijn eigen breedte (open); zijn rechterrand is de scheidingslijn, ook als je zijwaarts scrolt. */
.vl-vast { flex: 0 0 var(--vl-naam); width: var(--vl-naam); min-width: 0; box-sizing: border-box; position: sticky; left: 0; z-index: 2; display: flex; align-items: stretch; background-color: inherit; border-right: 1px solid var(--vl-lijn); }   /* de naam vult de ruimte tot de eigenschappen en draagt de scheidingslijn (Dévin 01-10, vijfde bericht); sticky, dus ook gescrold zichtbaar */
.vl-rij--kop .vl-vast { align-items: center; }
.vl-rij--kop .vl-vast, .vl-rij.is-leeg .vl-vast, .vl-gat .vl-vast { border-right-width: 0; }   /* geen lijn in de balk, in lege plekken en in de landingsplek */
/* Een lege plek in de top 3 stopt bij het nummervak; daarna één open vlak. Zo ook de vaste lege plek van Bewaard en de landingsplek. */
.vl-rij.is-leeg .vl-vast, .vl-gat .vl-vast { flex: 0 0 auto; width: auto; }
.vl-open { flex: 1 1 auto; }
/* De eigenschappenbox (Dévin 01-10, vijfde bericht): de prijs staat altijd links in de box en is altijd in beeld; de box groeit van de prijs tot alle kolommen met --vl-open (zie het
   vlak). De andere kolommen hebben geen fade: ze komen onder de muur rechts (het laatste vak) vandaan en worden door de rand van de box en van de tabel afgesneden. Er is geen
   scheidingslijn met de naam op de box: die hoort bij de naam-groep. */
.vl-data { flex: 0 0 var(--vl-box); width: var(--vl-box); margin-left: 0; min-width: 0; overflow: hidden; display: flex; }
.vl-data > * { flex: 0 0 auto; min-width: 0; padding: 0 1em; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: .3em; }
.vl-data > [data-k="prijs"] { width: var(--k-prijs); } .vl-data > [data-k="eigendom"] { width: var(--k-eigendom); } .vl-data > [data-k="plaats"] { width: var(--k-plaats); }
.vl-data > [data-k="type"] { width: var(--k-type); } .vl-data > [data-k="slaapkamers"] { width: var(--k-slaapkamers); } .vl-data > [data-k="badkamers"] { width: var(--k-badkamers); }
.vl-data > [data-k="woonoppervlak"] { width: var(--k-woonoppervlak); } .vl-data > [data-k="grond"] { width: var(--k-grond); } .vl-data > [data-k="oplevering"] { width: var(--k-oplevering); }
.vl-data > [data-k="zwembad"] { width: var(--k-zwembad); } .vl-data > [data-k="gemeubileerd"] { width: var(--k-gemeubileerd); }
/* Dicht zijn de andere kolommen ook voor schermlezers en toetsenbord weg (visibility); open zijn ze er meteen, en ze verdwijnen pas als de box helemaal dicht is. Geen opacity. */
.vl-data > :not([data-k="prijs"]) { visibility: hidden; transition: visibility 0s linear calc(.7s + var(--vl-vertraging, 0s)); }
.vl-paneel.is-vergelijk .vl-data > :not([data-k="prijs"]) { visibility: visible; transition-delay: 0s; }
.vl-paneel.is-vergelijk:not([data-vl-toestand="s1"]) { --vl-open: 1; transition-delay: 0s; }   /* zonder huizen (s1) is er niets te vergelijken */
.vl-paneel[data-vl-toestand="s1"] .vl-paneel__acties { visibility: hidden; }   /* zonder huizen niets om te vergelijken; de plek blijft, zodat de tabel niet verspringt */
.vl-paneel.is-start, .vl-paneel.is-start .vl-data > * { transition: none; }   /* bij het laden geen animatie voor een onthouden stand */
.vl-min { flex: 0 0 var(--vl-eind); width: var(--vl-eind); position: sticky; right: 0; z-index: 2; box-sizing: border-box; display: grid; place-items: center; margin: 0 0 0 auto; padding: 0;
  background-color: inherit; border: 0; border-left: 1px solid var(--vl-lijn); color: inherit; -webkit-appearance: none; appearance: none; }
.vl-min:not(.vl-min--leeg):not(.vl-min--kop) { cursor: pointer; transition: background-color .14s, color .14s, background-image .2s; }
.vl-min:not(.vl-min--leeg):not(.vl-min--kop):hover, .vl-min:not(.vl-min--leeg):not(.vl-min--kop):focus-visible { background-image: linear-gradient(color-mix(in srgb, var(--vl-ink) 7%, transparent), color-mix(in srgb, var(--vl-ink) 7%, transparent)); }
.vl-min:focus-visible { outline: 1px solid currentColor; outline-offset: calc(calc(var(--vl-rem) * .25) * -1); }
.vl-min__ic { display: block; width: calc(.625em * 13 / 8); height: auto; }   /* op de maat van de plus in de andere knoppen (papa's chevron-eenheid) */

/* De balk: klein, hoofdletters, geen lijnen tussen de cellen (ook de tussenlijn en de lijn bij het laatste vak beginnen pas onder
   de balk). Het eerste label staat boven nummer en foto. De vakken blijven 1em; alleen de tekst erin is kleiner, zodat de
   breedtes (in em) precies die van de rijen eronder zijn. */
.vl-kopcel { display: flex; align-items: center; }
.vl-kopcel > span { font-size: .72em; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; opacity: .7; white-space: nowrap; }
.vl-vast > .vl-kopcel--nr { flex: 0 0 calc(var(--vl-nr) + var(--vl-foto)); padding-left: 1.2em; }
.vl-vast > .vl-kopcel--titel { flex: 1 1 auto; padding: 0 1em; }
.vl-data > .vl-kopcel { flex-direction: row; justify-content: flex-start; gap: 0; }
.vl-rij--kop .vl-min { border-left-color: transparent; }

/* Een rij (Dévin 30-09): nummer, foto en laatste vak zijn dezelfde vierkanten (5,5em), gescheiden door lijnen. Het nummer staat
   in Ivypresto, schuin zoals de site het altijd gebruikt (.alt-heading), klein, in het midden van zijn vierkant, zonder animatie; de
   foto vult het zijne; daarna de titel en de gegevens in de taal van de aanbodkaart. */
.vl-nr, .vl-foto { box-sizing: border-box; border-right: 1px solid var(--vl-lijn); }
.vl-nr { flex: 0 0 var(--vl-nr); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.vl-nr > span { font-family: var(--_fonts---fonts--alt-heading); font-style: italic; font-weight: 400; font-size: 1.2em; line-height: 1; font-variant-numeric: lining-nums; }
.vl-rij.is-leeg .vl-nr > span, .vl-gat .vl-nr > span { opacity: .4; }
/* De vakken links zijn knoppen (Dévin 01-10): in Top 3 het nummer (Enter pakt de rij op), in Bewaard de plus (zet het huis in je top 3).
   Een knop, dus de standaardstijl van de browser eraf. */
button.vl-nr { margin: 0; padding: 0; background-color: inherit; border-width: 0 1px 0 0; border-style: solid; border-color: var(--vl-lijn); color: inherit; font: inherit; -webkit-appearance: none; appearance: none; transition: background-color .14s, color .14s, background-image .2s; }
button.vl-nr:hover, button.vl-nr:focus-visible { background-image: linear-gradient(color-mix(in srgb, var(--vl-ink) 7%, transparent), color-mix(in srgb, var(--vl-ink) 7%, transparent)); }
button.vl-nr:focus-visible { outline: 1px solid currentColor; outline-offset: calc(calc(var(--vl-rem) * .25) * -1); }
button.vl-plus { cursor: pointer; }
.vl-foto { flex: 0 0 var(--vl-foto); position: relative; overflow: hidden; }
.vl-foto img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.vl-titel { flex: 1 1 auto; min-width: 0; padding: 0 1em; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .4em; color: inherit; }   /* alleen de titel zelf is de link (Dévin 01-10, vijfde bericht): de rest van de box sleept de rij */
.vl-titel__t { font-family: var(--_headings---heading-m--font); font-size: 1em; font-weight: 400; letter-spacing: .01em; line-height: 1.15; text-transform: uppercase; color: inherit; text-decoration: none;
  display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* één regel, afgehakt met puntjes (Dévin 01-10, negende bericht: sommige titels wrapten en hadden weinig ruimte boven en onder); Vergelijken geeft de naam meer ruimte */
a.vl-titel__t { max-width: 100%; cursor: pointer; }
a.vl-titel__t:hover, a.vl-titel__t:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
a.vl-titel__t:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.vl-titel__ref { max-width: 100%; font-size: .7em; letter-spacing: .05em; text-transform: uppercase; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* altijd het SSN-nummer: de prijs heeft een eigen kolom */
.vl-idr { display: none; }   /* de prijs in IDR (valuta-voorkeur): zie lib/referentielijst.mjs prijsDelen */
.vl-paneel.is-idr .vl-eur { display: none; }
.vl-paneel.is-idr .vl-idr { display: block; }
.vl-titel__prijs { display: none; flex-direction: column; gap: .15em; }   /* alleen op een telefoon (zie boven): daar heeft de prijs geen eigen kolom */
.vl-cel__t { font-size: .875em; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }
.vl-cel__t.vl-idr { white-space: nowrap; text-transform: none; }   /* "Rp 5.700.000.000" op één regel (de exacte SSI-waarde, geen afronding) */
.vl-cel__k { white-space: nowrap; }   /* 'exacte prijs op aanvraag' staat op één regel en kan dus nooit tijdelijk wrappen tijdens het openen of sluiten van Vergelijken (Dévin 01-10, negende bericht) */
.vl-cel__k { font-size: .65em; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; opacity: .55; }
/* Het scrollende vergelijkgedeelte krijgt zachte beige schaduwen aan de randen (Dévin 01-10), links en rechts, per rij zodat geen lijn wordt
   afgesneden. Ze staan vast in beeld (sticky) tussen de naam-groep en het laatste vak; de dekking volgt de scrollstand (--vl-sl en --vl-sr
   op de scroller, gezet door referentietabel.js): aan het begin geen linker, aan het einde geen rechter schaduw. */
.vl-vast { order: 0; } .vl-data { order: 2; } .vl-min { order: 4; }
.vl-rij::before, .vl-rij::after { content: ''; flex: 0 0 1.75em; width: 1.75em; align-self: stretch; position: sticky; z-index: 1; pointer-events: none; }
.vl-rij::before { order: 1; left: var(--vl-naam); margin-right: -1.75em; background: linear-gradient(to right, var(--vl-vlak), color-mix(in srgb, var(--vl-vlak) 0%, transparent)); opacity: var(--vl-sl, 0); }
.vl-rij::after { order: 3; right: var(--vl-eind); margin-left: -1.75em; background: linear-gradient(to left, var(--vl-vlak), color-mix(in srgb, var(--vl-vlak) 0%, transparent)); opacity: var(--vl-sr, 0); }
/* De fade rechts blijft staan zolang Vergelijken opent of sluit (0 < open < 1); daarna volgt hij de scrollstand (aan het eind van de kolommen is er geen fade meer). Dévin 01-10, zesde bericht. */
@supports (width: round(up, 1px, 1px)) { .vl-rij::after { opacity: max(var(--vl-sr, 0), calc(round(up, var(--vl-open), 1) - round(down, var(--vl-open), 1))); } }
.vl-rij.is-leeg::before, .vl-rij.is-leeg::after, .vl-gat::before, .vl-gat::after { display: none; }
/* Cursor: de hele rij is te slepen (de pagina laat het in de tooltip zien), links en knoppen blijven klikbaar, het vergelijkgedeelte sleept zijwaarts. */
.vl-rij[data-vl-rij] { cursor: grab; }
.vl-rij[data-vl-rij] a, .vl-rij[data-vl-rij] button { cursor: pointer; }
.vl-paneel.is-vergelijk .vl-data { cursor: grab; }
html.vl-sleept .cursor[data-vl-cursor] { opacity: 0 !important; }   /* tijdens het slepen van een rij zegt de tooltip niets meer */
.cursor[data-vl-cursor] { background-color: var(--vl-ink); color: var(--vl-vlak); transition: opacity .17s var(--vl-zacht); }   /* navy, want beige op het beige vlak is onzichtbaar; een gewone fade, niet de overshoot van papa */
.cursor[data-vl-cursor].vl-aan { opacity: 1; }
.cursor[data-vl-cursor] .cursor-text { transition: width .45s var(--vl-uit); }
.cursor[data-vl-cursor] .cursor-line { justify-content: flex-start; }   /* links uitgelijnd: de pil groeit naar rechts, dus de tekst blijft staan terwijl hij groeit (Dévin 01-10, zesde bericht) */
/* De tooltip van het vlak rolt bij elk nieuw woord naar boven (het oude woord eruit, het nieuwe van onder erin), met de letter-stagger van de site. Elke wissel is een eigen
   regel (het script maakt en ruimt ze op); .is-direct zet een regel zonder overgang op zijn plek. */
.cursor[data-vl-cursor] .cursor-line.is-in span { transform: translateY(0); }
.cursor[data-vl-cursor] .cursor-line.is-out span { transform: translateY(-100%); }
.cursor[data-vl-cursor] .cursor-line.is-wacht span { transform: translateY(100%); }
.cursor[data-vl-cursor] .cursor-line.is-direct span { transition: none; }
.cursor[data-vl-cursor] .vl-meet { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; font-weight: 500; }   /* de pil groeit en krimpt met het woord (het script zet de breedte) */
html[data-ssn-motion="reduced"] .cursor[data-vl-cursor] { display: block; }   /* informatie, geen versiering: bij minder beweging blijft hij, zonder rol */
html.vl-schuift, html.vl-schuift * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }   /* het vergelijkgedeelte wordt zijwaarts gesleept */

/* Mobiel: de hele tabel scrolt (Dévin 01-10, zesde en negende bericht: "de hele tabel door de rechterkant heen, zodat ze snappen dat er gescrold moet worden" en "hij eindigt waar de radius een
   normale margin van rechts heeft; de linker radius en gap zijn vast, de rechter loopt relatief mee in de scroll"). Tot 767px is er geen vaste naam en geen vast laatste vak: alles scrolt mee.
   De tabel loopt altijd door tot de schermrand; de scroller heeft rechts de marge als padding, dus aan het eind van de scroll staat de rechterkant van de rijen (met zijn lijn en radius) op een
   gewone marge van de rand. De linkerkant is vast: een overlay op de tabel (::before) tekent de linkerlijn en de linkerhoeken, de rijen tekenen hun eigen rechterkant, bovenlijn (balk) en
   onderlijn (laatste rij) met een overlay (::before van de rij). Dicht passen de rijen precies in het venster, dus er ziet niets anders uit. */
@media (max-width: 767px) {
  .vl-vast, .vl-min { position: static; }
  .vl-rij::after { display: none; }
  /* De fade rechts is op deze schermen één laag over de tabel, tegen de schermrand (de tabel loopt tot daar) en binnen zijn eigen kader; hij staat tot je het eind van de rijen ziet. */
  .vl-tabel::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1.75em; z-index: 4; pointer-events: none; opacity: var(--vl-sr, 0);
    background: linear-gradient(to left, var(--vl-vlak), color-mix(in srgb, var(--vl-vlak) 0%, transparent)); }
  @supports (width: round(up, 1px, 1px)) { .vl-tabel::after { opacity: max(var(--vl-sr, 0), calc(round(up, var(--vl-open), 1) - round(down, var(--vl-open), 1))); } }
  .vl-tabel { margin-right: calc(-1 * var(--vl-pad)); border: 0; border-radius: var(--vl-r) 0 0 var(--vl-r); }
  .vl-tabel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--vl-r) + 1px); box-sizing: border-box; border: 1px solid var(--vl-lijn); border-right-width: 0; border-radius: var(--vl-r) 0 0 var(--vl-r); pointer-events: none; z-index: 4; }
  .vl-tabel__scroll { padding-right: var(--vl-pad); }
  .vl-rij::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; margin: 0; flex: none; z-index: 3; opacity: 1; background: none; pointer-events: none;
    box-sizing: border-box; border-right: 1px solid var(--vl-lijn); }
  .vl-rij--kop { border-top-right-radius: var(--vl-r); overflow: hidden; }
  .vl-rij--kop::before { border-top: 1px solid var(--vl-lijn); border-top-right-radius: var(--vl-r); }
  .vl-tabel__scroll > .vl-rij:nth-last-child(1 of :not([hidden]):not(.is-opgepakt)) { border-bottom-right-radius: var(--vl-r); overflow: hidden; }
  .vl-tabel__scroll > .vl-rij:nth-last-child(1 of :not([hidden]):not(.is-opgepakt))::before { border-bottom: 1px solid var(--vl-lijn); border-bottom-right-radius: var(--vl-r); }
  .vl-rij.is-leeg::before, .vl-gat::before { display: block; }
  /* De lege staat heeft geen rij die zijn rechterkant en onderkant tekent: hij sluit zelf, op dezelfde plek als de rijen (een marge van de schermrand) en met dezelfde radius (Dévin 02-10). */
  .vl-leeg { margin-right: var(--vl-pad); border-right: 1px solid var(--vl-lijn); border-bottom: 1px solid var(--vl-lijn); border-bottom-right-radius: var(--vl-r); }
  /* ... en de balk erboven is dan niet de laatste rij: geen ronde onderhoek en geen eigen onderlijn (de lege staat heeft zijn bovenlijn). */
  .vl-tabel:has(> .vl-leeg:not([hidden])) .vl-tabel__scroll > .vl-rij--kop { border-bottom-right-radius: 0; }
  .vl-tabel:has(> .vl-leeg:not([hidden])) .vl-tabel__scroll > .vl-rij--kop::before { border-bottom-width: 0; border-bottom-right-radius: 0; }
}

/* Lege staat van "Bewaard" (alleen in s1; Dévin 12-10: minimaler): de korte regel van .vl-meer hieronder, in de tabel, met de binnenmaat van een rij (--vl-pad). */
.vl-leeg { padding: var(--vl-pad); border-top: 1px solid var(--vl-lijn); }
.vl-leeg[hidden] { display: none; }
/* Geen flits (12-10): heb je al huizen bewaard, dan zet het kopscript <html data-vl-bewaard> (lib/referentielijst.mjs, rijenVroegScript) en verschijnt de lege staat niet eerst; referentielijst-live.js haalt het weg zodra de lijst staat. */
html[data-vl-bewaard] .vl-leeg { display: none; }
/* Op een trage lijn stond stap 1 al voor 60 tot 90 procent in beeld voordat de rijen er waren (gemeten 12-10): de tabellen wachten dan op de lijst
   en komen met de ease van papa's entree binnen. Op een snelle lijn staat de lijst er al voordat de stap zichtbaar wordt. Vangnet na 4 s, mocht het script niet laden. */
.vl-paneel__body { transition: opacity .7s var(--vl-uit); }
html[data-vl-bewaard] .vl-paneel__body { opacity: 0; animation: vl-body-vangnet 0s 4s forwards; }
@keyframes vl-body-vangnet { to { opacity: 1; } }
/* Onder Bewaard in s2 t/m s4 (Dévin 01-10): een korte regel met de aanbodknop rechts. */
.vl-meer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75em 1.5em; }
.vl-meer[hidden] { display: none; }
.vl-meer__t { flex: 1 1 auto; min-width: 0; max-width: 34em; margin: 0; opacity: .75; text-wrap: pretty; }
@media (max-width: 479px) { .vl-meer { flex-direction: column; align-items: flex-start; } }
.vl-meer .btn-animate-chars { flex: 0 0 auto; width: auto; margin: 0; }
.vl-paneel .btn-animate-chars.btn-secundair .btn-animate-chars__bg { border-color: var(--vl-lijn); }   /* Dévin 01-10: de rand in de kleur van de lijnen, niet navy */
.vl-paneel .btn-animate-chars.btn-secundair .btn-animate-chars__text { color: var(--vl-ink); }
.vl-paneel .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__bg { background-color: var(--vl-ink); }
.vl-paneel .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__text { color: var(--vl-vlak); }

/* ─── Slepen, selecteren en de knoppen (Dévin 30-09 en 01-10; as-built §6) ───────────────────────────────────────────────
   De hele rij is te slepen, behalve het vergelijkgedeelte (dat sleept zijwaarts). De rij die je vasthoudt is een kopie (.vl-ghost) die
   de aanwijzer volgt; de landingsplek (.vl-gat) is het nummervak met een navy omtrek, zoals een lege plek. De rij zelf staat
   onzichtbaar op zijn plaats (.is-opgepakt) tot je loslaat. */
.vl-rij[data-vl-rij] { -webkit-touch-callout: none; }
html.vl-sleept, html.vl-sleept * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.vl-rij.is-opgepakt { display: none; }
.vl-rij.is-druk { background-image: linear-gradient(color-mix(in srgb, var(--vl-ink) 6%, transparent), color-mix(in srgb, var(--vl-ink) 6%, transparent)); }   /* een vinger die blijft liggen: je voelt dat de rij zich opmaakt om te slepen */
.vl-rij.is-landt { pointer-events: none; }   /* een rij die nog vliegt: zijn plek blijft een lege plek zolang de kopie onderweg is (Dévin 01-10, vijfde bericht: de tabel eronder mag niet verdwijnen) */
.vl-rij.is-landt .vl-vast { border-right-width: 0; }
.vl-rij.is-landt .vl-vast > :not(.vl-nr), .vl-rij.is-landt .vl-data, .vl-rij.is-landt .vl-min, .vl-rij.is-landt .vl-nr > :not(span) { visibility: hidden; }   /* alleen het vak links blijft, zoals een lege plek */
.vl-rij.is-landt .vl-data > * { visibility: hidden !important; transition: none !important; }   /* bij Vergelijken zetten de kolommen hun eigen visibility: visible; die wint van die van de box (Dévin 01-10: de inhoud hoort in de listing zelf te blijven). Geen overgang: de visibility-overgang van de kolommen wacht .7s en liet ze zo nog zien. */
.vl-rij.is-landt .vl-nr > span { opacity: .4; }
.vl-rij.is-landt::before, .vl-rij.is-landt::after { display: none; }
/* De landingsplek tijdens het slepen (Dévin 01-10, vijfde bericht): een lege plek met aan de linkerkant alleen een dikke navy lijn die groeit; geen omtrek meer. De lijn staat vast aan de
   linkerrand van het venster (sticky), ook als de tabel zijwaarts is geschoven, en groeit met een transform (WAAPI), dus zonder layout of haperen. */
.vl-gat__balk { display: none; }
.vl-gat .vl-gat__balk { display: block; --vl-balk: max(3px, round(.33em, 1px)); flex: 0 0 var(--vl-balk); width: var(--vl-balk); margin-right: calc(-1 * var(--vl-balk)); align-self: stretch; position: sticky; left: 0; z-index: 3;
  background-color: var(--vl-ink); transform-origin: 50% 50%; pointer-events: none; }   /* de groei start het script (referentielijst.js, groeiBalk) zodra de plek in een tabel verschijnt; binnen dezelfde tabel glijdt hij met de rij mee */
.vl-ghost { position: fixed; z-index: 40; box-sizing: border-box; margin: 0; overflow: hidden; pointer-events: none; will-change: transform; transform-origin: 50% 50%;
  border: 1px solid var(--vl-lijn); border-radius: var(--vl-r); background-color: var(--vl-vlak); color: var(--vl-ink);
  box-shadow: 0 0 0 rgba(8, 17, 31, 0); transition: box-shadow .14s; -webkit-user-select: none; user-select: none; }
.vl-ghost.is-getild { box-shadow: 0 .5em 1.4em rgba(8, 17, 31, .16); }
.vl-ghost .vl-tabel__scroll { overflow: hidden; }
/* Selecteren (klik, tik of toets): de gekozen rij heeft een navy lijn rondom (het vak vult zich niet meer: Dévin 01-10); de plekken om naartoe te gaan pulseren één keer. */
/* De selectorrand (een opgepakte rij en de landingsplek) als laag over de hele rij, gezet door het script, vast aan de randen van de tabel. Op de laatste rij
   volgen de onderhoeken de afronding van de tabel, anders knipt zij de rand af. */
.vl-tabel { position: relative; }
.vl-selector { position: absolute; left: 0; right: 0; box-sizing: border-box; border: 1px solid var(--vl-ink); pointer-events: none; z-index: 3; animation: vl-landt-rand .16s var(--vl-uit) both; }
.vl-selector.is-laatste { border-radius: 0 0 calc(var(--vl-r) - 1px) calc(var(--vl-r) - 1px); }
.vl-selector[hidden] { display: none; }
@keyframes vl-landt-rand { from { border-color: transparent; } to { border-color: var(--vl-ink); } }
.vl-rij[data-vl-rij] { cursor: pointer; }   /* de hele listing is te activeren */
.vl-paneel.is-oppakt [data-vl-tabel] .vl-rij:not(.vl-rij--kop) { cursor: pointer; }
.vl-paneel.is-oppakt [data-vl-tabel] .vl-rij:not(.vl-rij--kop):not(.is-gekozen) .vl-nr, .vl-paneel.is-oppakt [data-vl-tabel] .vl-rij:not(.vl-rij--kop):not(.is-gekozen) .vl-foto { cursor: pointer; }
@media (max-width: 991px) { .vl-paneel.is-vergelijk:not(.is-oppakt):not(.is-kies) .vl-rij[data-vl-rij] { cursor: grab; } }   /* verticaal met Vergelijken open sleept de muis de hele tabel zijwaarts (Dévin 02-10) */
/* De pulse laat zien dat een rij een doel is: bij een actief huis en bij kiezen (de plus bij een volle top 3) op beide tabellen. */
.vl-paneel.is-oppakt .vl-rij:not(.vl-rij--kop):not(.is-gekozen), .vl-paneel.is-kies .vl-rij:not(.vl-rij--kop):not(.is-kiest) { animation: vl-puls .6s var(--vl-ease) 1; }
@keyframes vl-puls { 0%, 100% { background-color: var(--vl-vlak); } 35% { background-color: color-mix(in srgb, var(--vl-vlak) 90%, var(--vl-ink)); } }   /* de hele rij kleurt even mee (de vaste vakken erven zijn kleur); een outline viel achter die vakken */
/* Top 3 vol (Dévin 01-10: niet dimmen): alleen de drie kruisvakken worden navy, met een kort bericht (de melding van de site). Sleep je een
   Bewaard-huis over een huis in de top 3, dan wordt het kruisvak van dat huis navy: loslaten wisselt ze om. */
.vl-paneel.is-kies [data-vl-tabel="top3"] .vl-min--kruis, .vl-paneel.is-oppakt.is-vervang [data-vl-tabel="top3"] .vl-rij:not(.is-gekozen) .vl-min--kruis, .vl-rij.is-doel .vl-min--kruis { background-color: var(--vl-ink); color: var(--vl-vlak); }
.vl-paneel.is-kies [data-vl-tabel="top3"] .vl-min--kruis:hover, .vl-paneel.is-kies [data-vl-tabel="top3"] .vl-min--kruis:focus-visible, .vl-paneel.is-vervang [data-vl-tabel="top3"] .vl-min--kruis:hover, .vl-paneel.is-vervang [data-vl-tabel="top3"] .vl-min--kruis:focus-visible { background-image: linear-gradient(color-mix(in srgb, var(--vl-vlak) 16%, transparent), color-mix(in srgb, var(--vl-vlak) 16%, transparent)); }
.vl-paneel.is-kies [data-vl-tabel="top3"] .vl-min--kruis { animation: vl-puls-kruis .6s var(--vl-ease) 1; }
@keyframes vl-puls-kruis { 0%, 100% { opacity: 1; } 35% { opacity: .55; } }
.vl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* was @media (prefers-reduced-motion: reduce): nu de eigen stand, zie lib/prefs.mjs. De selectors zijn zwaarder dan de overgangen hierboven, anders winnen die. */
html[data-ssn-motion="reduced"] .vl-paneel.is-oppakt .vl-rij, html[data-ssn-motion="reduced"] .vl-paneel.is-kies .vl-rij, html[data-ssn-motion="reduced"] .vl-paneel.is-kies [data-vl-tabel="top3"] .vl-min--kruis { animation: none; }
html[data-ssn-motion="reduced"] .cta-wrap.vl-paneel, html[data-ssn-motion="reduced"] .vl-paneel .vl-rij, html[data-ssn-motion="reduced"] .vl-paneel .vl-data > *,
html[data-ssn-motion="reduced"] .vl-paneel .vl-data > :not([data-k="prijs"]), html[data-ssn-motion="reduced"] .vl-paneel .vl-min { transition: none; }

/* Onder in het vlak (Dévin 01-10, negende en tiende bericht): VALUTA met de kleine keuzeschakelaar (91: EUR | IDR, de hele schakelaar is één knop) en de copyright. Passen
   ze naast elkaar, dan staan ze op één rij met ruimte ertussen (copyright links, valuta rechts); anders staat valuta rechts boven de gecentreerde copyright. De lijn boven de strook faadt in zodra
   de body erboven scrolt (op desktop; verticale schermen scrollen de pagina). */
.vl-paneel__voet { flex: 0 0 auto; container-type: inline-size; padding: var(--vl-pad); border-top: 1px solid color-mix(in srgb, var(--vl-lijn) calc(var(--vl-bo, 0) * 100%), transparent); }
.vl-voet__rij { display: flex; flex-direction: column; align-items: stretch; gap: .9em; }
.vl-voet__copy { margin: 0; text-align: center; color: var(--vl-ink); font-size: var(--_paragraphs---paragraph-xs--font-size); }
.vl-voet__copy .vl-dim { opacity: .55; }
.vl-valuta { display: flex; align-items: center; gap: .75em; align-self: flex-end; }
@container (min-width: 26em) { .vl-voet__rij { flex-direction: row-reverse; justify-content: space-between; align-items: center; } .vl-voet__copy { text-align: left; } .vl-valuta { align-self: auto; } }
.vl-valuta__l { font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--vl-ink); }
/* Een schaduw boven in de body, die met het scrollen intrekt: hoe verder gescrold, hoe voller (tot 40px), alleen waar de body zelf scrolt (desktop). */
.vl-schaduw { position: sticky; top: 0; height: 0; margin-bottom: calc(-1 * var(--vl-pad)); z-index: 6; pointer-events: none; }
.vl-schaduw::after { content: ''; position: absolute; left: calc(-1 * var(--vl-pad)); right: calc(-1 * var(--vl-pad)); top: calc(-1 * var(--vl-pad)); height: 2.2em; opacity: var(--vl-bs, 0);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--vl-ink) 16%, transparent), color-mix(in srgb, var(--vl-ink) 0%, transparent)); }

/* Sluiten → Terug in de kop (Dévin 17-10: "het moet een eenparige beweging zijn van breedte van de knop en geen geglitch meer"): de knop krimpt in dezelfde tijd en met dezelfde curve als de letters rollen,
   zonder de wachttijd van .lb-flabel (65-toast.css). Daardoor schuift het nieuwe woord niet eerst links binnen en daarna naar het midden. */
[data-vl-sluit] .lb-flabel { transition-delay: 0s; }
/* ─── STAP 2: ÉÉN VRAAG PER SCHERM (Dévin 28-09; herzien 04-10: één kolom, één sjabloon voor alle vragen) ─────────────────────
   Van boven naar beneden, gecentreerd, op het navy van de pagina: eyebrow (de stapnaam) · kopdoos met de getypte kop · één regel · antwoorden · "Weet ik nog niet".
   De kopdoos heeft een vaste hoogte (de langste kop op deze breedte, gemeten door vraagscherm.js, --vl-kop-h) en lijnt de kop onderaan uit: een kop van één regel en
   een van twee eindigen op dezelfde hoogte (spec stap 2 §5.1, P1). De kop rolt letter voor letter binnen: de bouw van de tooltip (een span per letter met een
   eigen transition-delay), .is-in zet ze op hun plek. De keuzes zijn de tegels van het filter; ze komen na de kop binnen. */
/* Eén taal voor alle bewegingen van de vragenlijst (Dévin 09-10: "alle animaties op rookie level"): binnenkomen remt af (--vl-uit), kleine overgangen zijn zacht (--vl-zacht), grote bewegingen gebruiken de curve van de site (--vl-ease). Geen kale ease of linear. */
/* --vl-zij is de curve van de filterzijbalk op /nl/properties (listings.mjs EASE, --ease-ssn): de plaatsenlijst van V-02 schuift er op desktop precies zo mee in (Dévin 15-10: "dezelfde ease als de filter uitklap"). */
/* DE MAAT VAN HET DOSSIER (Dévin 17-10: "dynamische grote net als de rest van de site, met em en vars van de site, dit moet ook het nieuwe standaard worden").
   Papa's site schaalt met --size-font (Osmo-schaalsysteem: de lettermaat van body groeit met de breedte van het venster, 12 px op 1440). Alles in het dossier dat een vaste maat had
   (rem of px) rekent nu in --vl-rem: een derde groter dan de lettermaat van body, dus op 1440 precies 16 px (het beeld dat Dévin goedkeurde blijft gelijk) en daarbuiten groeit en krimpt
   het mee met de site. Niet in --vl-rem: haarlijnen (1 tot 3 px), het tikvlak van 44 px, blur en mediaregels. Regel en controle: css/LEESMIJ.md, "Maten in het dossier". */
:root { --vl-rem: calc(var(--size-font, 100vw / 120) * 4 / 3); --vl-uit: cubic-bezier(.16, 1, .3, 1); --vl-zacht: cubic-bezier(.4, 0, .2, 1); --vl-ease: cubic-bezier(.625, .05, 0, 1); --vl-zij: cubic-bezier(.76, 0, .24, 1); }
/* De onderdelen van het filter en papa's icoonknop houden hun duur, maar krijgen hier dezelfde curve (alleen binnen de vragenlijst; het aanbod blijft zoals het is). */
.vl-scherm .ssnf-segbtn, .vl-scherm .ssnf-in, .vl-scherm .ssnf-slider, .vl-scherm .ssnf-rng__fill, .vl-scherm .ssnf-rng__h, .vl-scherm .icon-button_element, .f-form-navigation_wrapper .icon-button_element { transition-timing-function: var(--vl-zacht); }
.vl-grid--een { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-bottom: 0; }   /* papa's raster heeft 8em lucht boven en onder; het scherm regelt zijn eigen ruimte (--vl-boven, --vl-onder) */
.vl-vraagcel { min-width: 0; padding: 0 var(--vl-kader); display: flex; justify-content: center; }
/* Alles in beeld (Dévin 09-10: "zo veel mogelijk in het beeld zonder te scrollen"): het scherm is precies zo hoog als het venster (dvh). Boven de kop van de site, onder de balk; daartussen schikt de
   vraag zich: de kop wordt kleiner op een laag venster (vh), de antwoorden vullen en centreren de rest, en het kaartvak krijgt de hoogte die over is (--vk-hoog). */
.vl-scherm { --vl-kop-fs: min(var(--_headings---heading-s--font-size), max(1.5em, 5.6vh));
  --vl-boven: calc(var(--vl-nav-onder, calc(var(--vl-rem) * 4.5)) + clamp(calc(var(--vl-rem) * .5), 2.5vh, calc(var(--vl-rem) * 2))); --vl-onder: calc(var(--vl-knop-onder, calc(var(--vl-rem) * 4.875)) + clamp(calc(var(--vl-rem) * .5), 2vh, calc(var(--vl-rem) * 1.5)));
  box-sizing: border-box; width: 100%; max-width: calc(var(--vl-rem) * 72); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--vl-boven) 0 var(--vl-onder); }
/* De regel boven de kop: papa's eigen .eyebrow-style, net als "Intro" in de intro (Dévin 12-10: "kleiner, net als Intro"), "Wat je zoekt, vraag 1 van 7"; daaronder de getypte vraag */
/* De regel staat in de kopdoos, vlak boven de kop: bij een kop van één regel schuift hij mee omlaag en blijft hij op de afstand van "Intro" (Dévin 12-10: "dichter op"). */
.vl-scherm__eyebrow { margin: 0; }
.vl-scherm__kopdoos { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; row-gap: var(--_sizes---size--16px);   /* zelfde gat als "Intro" boven de kop in stap 1: papa's padding-16px, op dezelfde lettergrootte (Dévin 12-10) */ height: auto; }   /* Dévin 17-10, centreren: de doos is zo hoog als zijn eigen kop. De vaste hoogte van de langste kop (--vl-kop-h, P1) hield bij een kop van één regel een lege regel boven de vraag, en dan stond de vraag niet in het midden */
.vl-scherm__kop { margin: 0; max-width: 14em; font-size: var(--vl-kop-fs); line-height: 1.05; text-wrap: balance; outline: none; }   /* twee regels even lang: geen "JE?" alleen op de tweede regel (390) */
.vl-woord { display: inline-block; white-space: nowrap; }
.vl-scherm__kop .vl-woord > span { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity .4s var(--vl-zacht), transform .6s var(--vl-uit); }
.vl-scherm__kop.is-in .vl-woord > span { opacity: 1; transform: translateY(0); }
/* Eén regel onder de kop: de zin van de eerste vraag, of (voorgevuld) wat we uit je top 3 of van het aanbod haalden. De ruimte is er altijd, zodat de antwoorden niet verspringen. */
.vl-scherm__noot { width: 100%; min-height: 1.6em; margin-top: clamp(.35em, 1.4vh, .9em); display: grid; align-content: start; justify-items: center; }
.vl-scherm__zin { margin: 0; font-size: .95em; line-height: 1.5; opacity: .7; }
.vl-scherm__zin[hidden] { display: none; }
.vl-scherm__antwoorden { width: 100%; flex: 0 1 auto; min-height: 0; margin-top: clamp(calc(var(--vl-rem) * .5), 2vh, calc(var(--vl-rem) * 1.25)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
/* De vraag staat midden in het scherm, tussen de kop van de site en de balk (Dévin 17-10: "de inhoud per stap moet natuurlijk centreren"). Alleen het grote kaartvak (het gebied, V-02)
   vult de ruimte die over is, zoals voorheen (--vk-hoog). Is een vraag hoger dan het scherm, dan groeit het scherm mee (min-height) en scrolt de pagina, er valt niets af. */
.vl-scherm[data-vl-nu="V-02"] .vl-scherm__antwoorden { flex: 1 1 auto; }
@media (max-width: 767px) { .vl-scherm[data-vl-nu="V-01"] .vl-scherm__antwoorden { flex: 1 1 auto; } }   /* op een telefoon zijn de eilanden drie banden die samen de ruimte vullen */
.vl-scherm__keuzes { width: 100%; max-width: calc(var(--vl-rem) * 30); opacity: 0; transform: translateY(calc(var(--vl-rem) * .6));
  transition: opacity .5s var(--vl-zacht) var(--vl-wacht, 0s), transform .8s var(--vl-uit) var(--vl-wacht, 0s); }
/* De antwoorden komen rustig binnen als de kop er bijna staat (Dévin 17-10: "de boxen moeten smooth inkomen na de getypte vraag, want nu flitst het"): vraagscherm.js zet --vl-wacht
   op de tijd van de laatste letter (hoogstens .7 s). Eén korte fade met een kleine schuif omhoog; daarna beweegt er niets meer (16-10: geen hover-beweging). Bij terug naar een vraag
   die je al zag geen wachttijd. */
.vl-scherm__keuzes.is-in { opacity: 1; transform: none; }
html[data-ssn-motion="reduced"] .vl-scherm__keuzes { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vl-scherm__keuzes { transform: none; transition: none; } }
.vl-scherm__keuzes[hidden] { display: none; }
/* De navy fade onderin, dezelfde als onder de kaarten op /nl/properties (.listings__fade, 35-listings-rail-frame.css: 150 px, navy naar transparant, vast aan de onderrand,
   onder de balk), op elk scherm (Dévin 15-10). Alleen zolang er onder de balk nog iets van de vraag staat: vraagscherm.js zet --vl-fade, van 1 naar 0 over de laatste 150 px, net als updateFade. */
.vl-fade { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--vl-rem) * 9.375); z-index: 4; pointer-events: none; opacity: var(--vl-fade, 0);
  background: linear-gradient(to top, var(--_colors---swatch--black), transparent); }
html[data-vl-stap-nu="1"] .vl-fade { display: none; }
/* iPhone-Safari: 4 px hoger, zodat alleen de dock-strook (.ssn-dock) de onderrand raakt; dezelfde regel en dezelfde test als .is-ios-safari .listings__fade, hier zonder script */
@supports (-webkit-touch-callout: none) { @media (max-width: 991px) { .vl-fade { bottom: calc(var(--vl-rem) * .25); } } }
.vl-weetniet-rij { width: 100%; display: flex; justify-content: center; }
.vl-weetniet-rij[hidden] { display: none; }
/* "Weet ik nog niet": gecentreerd, gedimd, geen rand en geen vulling (Dévin 04-10); het is wel een echte knop met een tikvlak van 44 px. */
.vl-weetniet { display: block; min-height: clamp(calc(var(--vl-rem) * 2.25), 5vh, 44px); margin: clamp(calc(var(--vl-rem) * .15), 1vh, calc(var(--vl-rem) * .75)) auto 0; padding: .6em 1.2em; border: 0; background: none; color: inherit; font: inherit; font-size: .9em; letter-spacing: .02em; opacity: .5; cursor: pointer; transition: opacity .2s var(--vl-zacht); }
.vl-weetniet:hover, .vl-weetniet:focus-visible { opacity: .85; }
.vl-weetniet[aria-pressed="true"] { opacity: .9; text-decoration: underline; text-underline-offset: .25em; }
.vl-weetniet:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
@media (max-width: 479px) { .vl-scherm__keuzes { max-width: none; } }

/* Eén regel onder de kop, nooit twee (Dévin 17-10): staat "Dit haalden we uit je favorieten" er, dan wacht "Dit nam je mee van het aanbod". Kies je een ander eiland dan dat van je
   favorieten, dan klopt de eerste niet meer en gaat hij meteen weg (vraagscherm.js nootBij); de melding zelf is een bericht van de site (window.ssnToast). */
.vl-scherm.is-ander-eiland [data-vl-top3-uitleg] { display: none; }
.vl-scherm:not(.is-ander-eiland) [data-vl-top3-uitleg]:not([hidden]) ~ [data-vl-meegenomen] { display: none; }

/* ─── VRAGEN VAN ELKE SOORT (Dévin 08-10: "alle vragen, minimaal en consistent"; de stijl van het filter) ──────────────────────────────────
   Tegels (.ssnf-segbtn van het filter: beige .05, een beige rand bij zweven, beige gevuld als gekozen) in een raster dat zich naar de breedte schikt; één regel uitleg erboven als de vraag
   die heeft; het budget met de tak kopen/huren en "Liever precies?"; een open vraag als tekstvak. */
.vl-scherm__keuzes .vl-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--vl-rem) * 11)), 1fr)); gap: var(--_sizes---size--8px); }   /* één tussenruimte voor elk raster (87) */
.vl-scherm__keuzes .vl-tegels > .ssnf-segbtn { min-height: clamp(calc(var(--vl-rem) * 2.375), 5.6vh, 44px); }
.vl-scherm__hulp, .vl-scherm__keuzes .vl-tekstvak .ssnf-help { margin: 0 0 .9em; font-size: .95em; line-height: 1.5; text-align: center; opacity: .7; }
.vl-scherm__hulp { white-space: normal; }
/* Een vraag die past, scrolt niet (Dévin 17-10, avond: "vraag 3 is nu visueel heel netjes maar toch kan je scrollen terwijl er genoeg ruimte is, dat is alleen maar afleiding"). Papa's stappen zijn minstens
   100vh hoog; in Safari op een telefoon is dat het venster zonder de balken, dus met de balken in beeld was de pagina zo'n 80 px te hoog en kon je altijd scrollen. 100dvh is het venster dat je echt ziet. */
html[data-vl-stap-nu] .f-form-steps-wrap.is---2, html[data-vl-stap-nu] .f-form-steps-item.is-split { min-height: 100dvh; }
/* Stap 4 op een telefoon: de kop ("Waar mogen we je gids naartoe sturen?") liep tot 8 px van de rand, de velden eronder staan in de marge van de pagina (gevonden 17-10, avond): de kop krijgt die marge ook */
@media (max-width: 767px) { [data-vl-stap="4"] .f-steps-header { padding-inline: var(--_layout---padding-global--page-padding); box-sizing: border-box; } }   /* .ssnf-help is nowrap: op een telefoon liep de uitleg bij V-08 buiten beeld (gevonden 17-10, avond) */
.vl-scherm__keuzes .vl-tekstvak .ssnf-help { margin: .6em 0 0; text-align: left; }
.vl-scherm__keuzes .vl-tegels + .vl-scherm__hulp { margin: .75em 0 0; }
.vl-scherm__keuzes .vl-link { display: block; margin: .25em auto 0; }
.vl-scherm__keuzes .vl-precies { text-align: left; }
.vl-scherm__keuzes .vl-tekstvak { text-align: left; }
.vl-scherm__keuzes .vl-tekstvak__in { box-sizing: border-box; }
.vl-scherm__keuzes .vl-anders .ssnf-in { width: 100%; box-sizing: border-box; }

/* Stap 4 (je gegevens) blijft een formulier (Dévin 08-10), maar met dezelfde kop als de vragen: papa's .eyebrow-style zoals "Intro" (12-10) en dezelfde ruimte tot de kop van de site. */
[data-vl-stap="4"] .f-steps-header .eyebrow-style { margin: 0 0 .5em; }
/* De tekst onder de vraag is even breed als de vraag (Dévin 16-10): vraagscherm.js kopBreed() meet de breedste regel van de kop en zet die als max-width op dit vak. */
[data-vl-stap="4"] .f-steps-header > .max-width-448px { margin-inline: auto; }
[data-vl-stap="4"] .f-steps-header > .max-width-448px p { text-wrap: pretty; }   /* niet gebalanceerd: dan worden de regels korter dan het vak en is de tekst toch smaller dan de kop */
[data-vl-stap="4"] .f-steps-wrap { padding-top: calc(calc(var(--vl-rem) * 4.5) + clamp(calc(var(--vl-rem) * 1.5), 8vh, calc(var(--vl-rem) * 5))); padding-bottom: calc(var(--vl-knop-onder, calc(var(--vl-rem) * 4.875)) + calc(var(--vl-rem) * 2)); }
/* Velden onder elkaar (Dévin 15-10; ronde 15: ook voornaam en achternaam, "niet altijd achter elkaar"): elk veld over de hele breedte van papa's raster.
   Op een telefoon is papa's raster één kolom (flex), daar staat alles al onder elkaar. De rijafstand is papa's eigen telefoonmaat (2em). */
[data-vl-stap="4"] .form-grid { grid-row-gap: 1.75em; }   /* Dévin 17-10, "de gaps zijn nog niet professioneel": één ritme, label .5em boven het veld, de melding .5em eronder, 1.75em tot het volgende veld */
[data-vl-stap="4"] .form-field-group > .form-label { margin-bottom: .5em; }
[data-vl-stap="4"] .form-grid > * { grid-column: 1 / -1; }   /* alle velden onder elkaar, ook voornaam en achternaam (Dévin 15-10, ronde 15) */
/* De melding onder een veld (Dévin 15-10, ronde 15: "in dezelfde kleur zonder border ervoor", "schoon en minimaal, schuif animatie"): één kleur, die van het foutteken in het veld
   (--ssn-accent, ook de rand van het veld hieronder), zonder lijn ervoor. Ze schuift open en dicht (rijhoogte 0fr naar 1fr, .3 s) en vervaagt mee. Het adres in "Bedoel je ...?" is een knop. */
.vl-veldmelding { display: grid; grid-template-rows: 0fr; margin: 0; color: var(--ssn-accent); font-weight: 500; line-height: 1.5; opacity: 0; visibility: hidden;
  transition: grid-template-rows .3s var(--vl-uit), opacity .3s var(--vl-uit), visibility 0s .3s; }
.vl-veldmelding.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .3s var(--vl-uit), opacity .3s var(--vl-uit); }
/* Onder de naam staan twee meldingen (voornaam, achternaam). Papa's groep zet .75em (gap) tussen elk kind, ook voor de dichte van de twee: de tekst stond dan een gap lager
   dan onder het e-mailadres (Dévin 26-10). De negatieve marge neemt die gap terug, zoals in de contactpagina (css/98) en het paneel (css/81). */
[data-vl-stap="4"] .vl-veldmelding + .vl-veldmelding { margin-top: -.75em; }
.vl-melding__in { min-height: 0; overflow: hidden; }
.vl-melding__p { margin: 0; padding-top: .5em; }   /* strak onder het veld (Dévin 16-10), in hetzelfde ritme als het label erboven (17-10) */
.vl-veldmelding [hidden] { display: none; }
.vl-voorstel { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.vl-voorstel:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
[data-vl-stap="4"] [data-validate].is--error input, [data-vl-stap="4"] [data-validate].is--error textarea { border-color: var(--ssn-accent); }   /* papa's eigen rood (255, 76, 36) wijkt af van het oranje van het foutteken en de melding */
/* De naam: één veld met drie vakken en rechte tussenlijnen (Dévin 16-10). Het kader en de radius zijn die van papa's .form-input; de vakken zelf hebben geen rand en geen radius,
   alleen een lijn rechts. Focus en fout kleuren het kader. Een lange plaatsvervanger wordt afgekapt met puntjes. */
.vl-naamveld { display: flex; align-items: stretch; box-sizing: border-box; border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px); transition: border-color .2s var(--vl-zacht); }
.vl-naamveld > .vl-naamdeel { flex: 1 1 0; min-width: 0; margin: 0; border: 0; border-right: 1px solid var(--_colors---swatch--grey); border-radius: 0; }
.vl-naamveld > .vl-naamdeel--tussen { flex: 0 0 clamp(5.5em, 22%, 11em); }   /* smal, maar het woord past op een groot scherm; op een telefoon wordt het Tussenv... */
.vl-naamveld > .vl-naamdeel--achter { flex: 1.3 1 0; border-right: 0; padding-right: 3em; }   /* ruimte voor papa's goed- of foutteken */
.vl-naamveld:focus-within { border-color: var(--_colors---swatch--beige); }
[data-vl-stap="4"] [data-validate].is--error .vl-naamveld { border-color: var(--ssn-accent); }
[data-vl-stap="4"] [data-validate].is--error .vl-naamveld > .vl-naamdeel { border-color: var(--_colors---swatch--grey); }   /* de tussenlijnen blijven grijs; alleen het kader kleurt */
[data-vl-stap="4"] [data-validate].is--error .vl-naamveld > .vl-naamdeel--achter { border-right: 0; }
[data-vl-stap="4"] .form-input, [data-vl-stap="4"] .form-input::placeholder { text-overflow: ellipsis; }
/* Het telefoonveld (Dévin 17-10: "een select met alle landen en een search dropdown, en standaard op +31"): het kader van de naam met twee vakken. Links het landnummer, een knop die zich gedraagt als
   een vak van het veld (zelfde letter, hoogte en tussenlijn); rechts het nummer. De lijst eronder is die van de zijbalk van vraag 2 (86-vragenlijst-kaart.css .vk-kiezer): het zoekveld en de rijen van het
   filter, in dezelfde kleine letter, op een navy vlak met de grijze rand en de radius van een veld. Bovenaan de landen van onze klanten, onder een lijn alle landen; zoek je, dan staat er één lijst. */
[data-vl-stap="4"] .vl-telveld { position: relative; }
.vl-telveld > .vl-land { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45em; width: auto; padding-top: 0; padding-bottom: 0; padding-right: 1em; font: inherit; font-weight: 500; color: var(--_colors---swatch--beige); text-align: left; cursor: pointer; }   /* dezelfde letter als het nummer ernaast, dus even hoog als elk ander veld (Dévin 17-10, later); zonder chevron */
.vl-land__iso { opacity: .7; letter-spacing: .04em; }
.vl-land:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: -3px; }
.vl-landen { --vl-lf: var(--_paragraphs---paragraph-xs--font-size); position: absolute; left: -1px; top: calc(100% + .4em); z-index: 20; box-sizing: border-box; width: min(calc(100% + 2px), 24em); padding: .5em;
  background: var(--_colors---swatch--black); border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px); text-align: left; }
.vl-landen.is-boven { top: auto; bottom: calc(100% + .4em); }   /* te weinig ruimte eronder (questionnaire.js landOpen): dan klapt hij naar boven */
.vl-landen[hidden] { display: none; }
.vl-landen .ssnf-search { margin-bottom: .4em; }
.vl-landen .ssnf-in, .vl-landen .ssnf-row__t, .vl-landen .ssnf-row__c, .vl-landen__leeg { font-size: var(--vl-lf); }
.vl-landen .ssnf-sic { left: 0; width: 2.7em; font-size: var(--vl-lf); }   /* het vergrootglas midden in de ruimte links van de tekst, zoals in de zijbalk van vraag 2 */
.vl-landen .ssnf-sic svg { width: 1.2em; height: 1.2em; }
.vl-landen__lijst { max-height: 16em; overscroll-behavior: contain; }
.vl-landen.ssnf--vl .vl-landrij { min-height: 1.9em; padding-inline: .5em; border-radius: var(--_layout---border-radius--4px); transition: background .2s var(--vl-zacht); }
.vl-landrij:hover, .vl-landrij:focus-visible { background: rgba(235, 227, 216, .06); outline: none; }
.vl-landrij[aria-selected="true"] .ssnf-row__t { font-weight: 500; }
.vl-landrij .ssnf-row__c { margin-left: auto; font-variant-numeric: tabular-nums; }
.vl-landen__groep--eerst { margin-bottom: .4em; padding-bottom: .4em; border-bottom: 1px solid var(--_colors---swatch--grey); }
.vl-landen__lijst.is-zoek .vl-landen__groep--eerst { display: none; }
.vl-landrij[hidden], .vl-landen__leeg[hidden] { display: none; }
.vl-landen__leeg { margin: 0; padding: 1em .5em; opacity: .6; }
html[data-ssn-motion="reduced"] .vl-landrij { transition: none; }
/* Twee vinkjes onder elkaar in één groep (Dévin 16-10): de voorwaarden (verplicht) en de nieuwsbrief (niet verplicht), even zichtbaar, met wat lucht ertussen. De link in de eerste is onderstreept. */
[data-vl-stap="4"] .vl-vink-tweede { margin-top: .6em; }   /* de twee dichter op elkaar (Dévin 17-10) */
/* De schakelaar AAN | UIT voor de nieuwsbrief: zijn regels staan in 91-schakelaars.css.
   Hier alleen de rij: schakelaar links, de zin ernaast, net als het vinkje erboven. */
[data-vl-stap="4"] .vl-schakel { display: flex; align-items: center; gap: .9em; cursor: pointer; }
[data-vl-stap="4"] .vl-schakel__in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
[data-vl-stap="4"] .vl-schakel__t { line-height: 1.4; }
[data-vl-stap="4"] .vl-verplicht { opacity: .7; }
/* De zin bij een leeg voorwaardenvakje is er alleen voor een schermlezer: in beeld pulst het vakje (Dévin 17-10, "geen foutmelding") */
[data-vl-stap="4"] .vl-veldmelding[data-vl-veldfout="toestemming"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Eén Verstuur (Dévin 17-10, zijn beeld van 23:00: de knop onder het formulier stond half onder de balk, naast de Verstuur in de balk). De balk heeft hem al, op elk scherm. */
[data-vl-stap="4"] .f-form-steps-item [data-form="submit-btn"], .f-form-steps-item[data-vl-stap="4"] [data-form="submit-btn"] { display: none; }
/* "algemene voorwaarden" is onderstreept (Dévin 17-10, tweede keer). Het vinkje reageert niet mee als je de link aanwijst (82-vragenlijst.css): de link opent een andere pagina. */
[data-vl-stap="4"] .vl-vinklink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }   /* Dévin 17-10: "onderstreep voorwaarden zonder dikgedrukt" */
[data-vl-stap="4"] .vl-vinklink:hover, [data-vl-stap="4"] .vl-vinklink:focus-visible { opacity: .8; }
html[data-ssn-motion="reduced"] .vl-veldmelding, html[data-ssn-motion="reduced"] .vl-veldmelding.is-open { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vl-veldmelding, html:not([data-ssn-motion="full"]) .vl-veldmelding.is-open { transition: none; } }

/* De knoppen in de balk gaan door de vragen (spec §5.1): "Volgende" werkt alleen op een vraag waar je al langs bent geweest; tot dan is hij gedimd en doet hij niets. */
[data-vl-form] [data-form="next-btn"] a.btn-animate-chars[aria-disabled="true"] { opacity: .4; cursor: default; }
/* gedimd, maar niet doorzichtig: de knop ligt op de pagina-kleur, zodat de kaart of een foto er niet doorheen schijnt als de pagina onder de balk door scrolt (gemeten 12-10, 390 breed) */
[data-vl-form] .form-button[data-form="next-btn"] { background: var(--_colors---swatch--black); border-radius: var(--_layout---border-radius--4px); }

/* De ruimte die de kop van de site en de onderbalk innemen, voor de schermen hierboven (--vl-boven, --vl-onder). Kop: marge + balk (72 px op 1440; schaalt met de pagina-marge). Balk onderaan:
   knophoogte + de marge van de pagina eronder, op elk scherm (sinds 12-10 ook de telefoon). */
:root { --vl-nav-onder: calc(var(--_layout---padding-global--page-padding) + 4.5em); --vl-knop-onder: calc(3.5em + var(--_layout---padding-global--page-padding)); }
@media (max-width: 767px) { :root { --vl-knop-onder: calc(3.5em + var(--_layout---padding-global--page-padding) + env(safe-area-inset-bottom)); } }
/* ─── DE BALK ONDERIN (Dévin 08-10) ───────────────────────────────────────────────────────────────────────────────────
   "De stappen moeten full height worden van die balk, met enkel een rechter border, die per stap zijn fill vult van links." Elke stap is een vak van de balk, zoals de vakken van de
   balk op het aanbod en de kop: over de volle hoogte, alleen een lijn rechts. Papa's eigen vulling van de stap (.form-step_btn-bg, die al van links binnenschuift) is de voortgang:
   vraagscherm.js zet --vl-vul (0 tot 1) per stap; een stap die af is, is helemaal gevuld. De tekst wisselt mee van kleur waar de vulling eronder ligt (mix-blend-mode).
   Desktop: [intro | wat je zoekt | je plannen | je gegevens] … [Vorige stap] [Volgende stap]. Telefoon (≤767): [stap | ‹] [Volgende ›], binnen de marge, zie hieronder. */
[data-vl-form] .f-form-navigation { display: flex; align-items: stretch; padding: 0; overflow: visible; }
[data-vl-form] .f-form-navigation_steps { align-self: stretch; margin: 0; }
[data-vl-form] .f-form-navigation_steps-group { align-self: stretch; gap: 0; }
[data-vl-form] .form-step_btn { --vl-vul: 0; position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; height: auto; min-height: 44px; aspect-ratio: auto;
  display: flex; align-items: center; gap: .6em; margin: 0; padding: 0 1.5em; border: 0; border-right: 1px solid var(--_colors---swatch--grey); border-radius: 0;
  background: none; color: var(--_colors---swatch--beige); transform: none; }
[data-vl-form] .form-step_btn:hover, [data-vl-form] .form-step_btn.current:hover { background: none; transform: none; }
/* Eén balk (Dévin 16-10): niet meer een vulling per vak, maar één vlak over de hele groep, van links tot waar je nu bent (vraagscherm.js balkVul zet de schaal). De vakken laten hem door
   (geen eigen isolatie), zodat de tekst erboven met mix-blend-mode nog van kleur wisselt. */
[data-vl-form] .f-form-navigation_steps-group { position: relative; isolation: isolate; }
[data-vl-form] .vl-balkvul { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--_colors---swatch--beige); transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--vl-uit); }
[data-vl-form] .form-step_btn { isolation: auto; will-change: auto; }   /* geen z-index en geen will-change (papa zet transform): die maken van elk vak een eigen laag en dan mengt de tekst niet meer met de balk */
[data-vl-form] .form-step_btn .form-step_btn-bg { display: none; }
/* de lijn tussen twee vakken blijft grijs, ook waar de balk er al langs is: de balk valt erachter (Dévin 17-10: "hij moet niet de lijn veranderen, maar er gewoon achter vallen") */
[data-vl-form] .form-step_btn:not(.is-voor):not(.current) > .steps-icon, [data-vl-form] .form-step_btn:not(.is-voor):not(.current) > .form-step_title { mix-blend-mode: normal; }   /* waar de balk nooit komt, mengt niets: anders worden de navy rondjes zwart */
[data-vl-form] .form-step_btn > .steps-icon, [data-vl-form] .form-step_btn > .form-step_title { mix-blend-mode: difference; }
/* Af = gevinkt: het vinkje staat er ook als dit de stap is waar je nu bent, en de stip (de huidige stap) maakt dan plaats (Dévin 09-10) */
[data-vl-form] .form-step_btn.is-af .steps-icon_complete { transform: scale(1); }
/* het vinkje tekent zich, zoals het vinkje van de kaarten (.vl-kaart__vink): één lijn met pathLength 16 en een gat van 17 (geen stipje in WebKit), klein in het rondje (Dévin 17-10, avond) */
[data-vl-form] .steps-icon_complete { transform: none; transition: none; }
[data-vl-form] .vl-stapvink { display: block; width: .6em; height: .5em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16 17; stroke-dashoffset: 16; transition: stroke-dashoffset .35s var(--vl-uit); }
[data-vl-form] .form-step_btn.is-af .vl-stapvink { stroke-dashoffset: 0; }
[data-vl-form] .form-step_btn.is-af .steps-icon_fill { transform: scale(0); }
/* Een gat (Dévin 22-10: "geen leeg of check cirkeltje [...] maar de uitroep teken in cirkel die je ook krijgt als je een fout hebt in een invulvelt"): je wilde inleveren en in deze stap mist een vraag.
   Papa's foutteken uit de velden van stap 4, in zijn kleur en op het navy van het veld; zijn eigen ring valt samen met de rand van het rondje (die gaat weg). Het komt binnen zoals het vinkje (.steps-icon_complete). */
[data-vl-form] .steps-icon_gat { position: absolute; inset: -1px; display: flex; justify-content: center; align-items: center; color: var(--ssn-accent); transform: scale(0); transition: transform .6s cubic-bezier(.16,1,.3,1); }
[data-vl-form] .vl-stapgat { display: block; flex: none; width: calc(100% * 4 / 3); height: auto; }   /* de ring van het teken (r 9 van 24) is zo groot als het rondje */
[data-vl-form] .form-step_btn.is-gat > .steps-icon { overflow: visible; border-color: transparent; background-color: var(--_colors---swatch--black); mix-blend-mode: normal; }   /* niet mengen met de balk: anders wordt het oranje een andere kleur */
[data-vl-form] .form-step_btn.is-gat .steps-icon_gat { transform: scale(1); }
[data-vl-form] .form-step_btn.is-gat .steps-icon_fill, [data-vl-form] .form-step_btn.is-gat .steps-icon_complete { visibility: hidden; }
html[data-ssn-motion="reduced"] [data-vl-form] .steps-icon_gat { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) [data-vl-form] .steps-icon_gat { transition: none; } }
[data-vl-form] .form-step_btn:not(.current):not(.done) > .form-step_title { opacity: .6; }
[data-vl-form] .form-step_btn.done:hover > .form-step_title { text-decoration: underline; text-underline-offset: .25em; }
[data-vl-form] .f-form-navigation .msf-button.is-prev, [data-vl-form] .f-form-navigation .button-group { align-self: stretch; display: flex; align-items: stretch; }
[data-vl-form] .f-form-navigation .msf-button.is-prev { margin-left: auto; }
[data-vl-form] .f-form-navigation .form-button { display: flex; align-items: stretch; padding: .5em; }
[data-vl-form] .f-form-navigation .form-button > a.btn-animate-chars { margin: 0; }
[data-vl-form] .f-form-navigation .msf-button.is-submit { display: flex; align-items: stretch; padding: .5em; margin: 0; }
.vl-balkstap { display: none; }
[data-vl-form] .f-form-navigation .msf-button.is-submit { left: 0; }   /* papa schuift Verstuur 3 px naar links (left: -.25em): in stap 4 stond de knop dan net anders dan Volgende, op elk scherm (Dévin 17-10, avond: "de gab ... moet altijd vast blijven") */
[data-vl-form] .f-form-navigation_wrapper { --vl-knop: 3.5em; }   /* de hoogte van papa's knop: de balk en alles erin, op elk scherm */   /* de naam met teller van 05-10: de stap zelf staat nu in de balk */
@media (max-width: 1024px) { [data-vl-form] .f-form-navigation_wrapper { --vl-knop: max(3.5em, 44px); } }   /* op een smal scherm (320) werd 3,5em 37 px, op een liggende iPad (1024) 30 px: tot en met 1024 nooit onder het tikvlak van 44 px */
@media (max-width: 1024px) { [data-vl-form] .f-form-navigation a.btn-animate-chars { min-height: 44px; } }

@media (max-width: 767px) {
  /* De balk zoals de filterbalk op /nl/properties (Dévin 12-10): binnen de marge van de pagina, op knophoogte. Links het vak met de stap en de terug-chevron, aan elkaar met één
     gedeelde radius en de glaslaag van die balk (.listings-bar__bg: navy-60 + blur); rechts Volgende als papa's gewone witte knop (tekst en chevron midden, papa's gap van 1em). */
  html[data-vl-stap-nu] .f-form-navigation_wrapper { left: var(--_layout---padding-global--page-padding); right: var(--_layout---padding-global--page-padding);
    bottom: calc(var(--_layout---padding-global--page-padding) + env(safe-area-inset-bottom)); }
  html[data-vl-stap-nu] [data-vl-form] .f-form-navigation { width: 100%; height: var(--vl-knop); gap: 0; padding: 0; border: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  [data-vl-form] .f-form-navigation_steps, [data-vl-form] .f-form-navigation .hide-desktop .msf-button.is-prev { background: var(--_colors---swatch--black-60);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--_colors---swatch--grey); box-sizing: border-box; height: var(--vl-knop); }
  /* Het voortgangsvak is een strook met alle vier de stappen, elk precies zo breed als het vak (Dévin 17-10, avond: "de voortgang moet een scroll functie zijn binnen zijn plaats"): je veegt
     erdoorheen, bij de volgende stap schuift hij erheen en na een actie schiet hij terug naar waar je bent (vraagscherm.js, stapSchuif). Het vak zelf heeft één vaste breedte, in elke stap
     (ronde 15 en 22: "de gab tussen die terug chevron en volgende knop ... moet altijd vast blijven"). De lijn rechts van elke stap is de naad met de chevron. */
  [data-vl-form] .f-form-navigation_steps { --vl-stapb: clamp(8.5em, 40vw, 11em); order: 1; flex: none; width: var(--vl-stapb); min-width: 0; overflow-x: auto; overflow-y: hidden;
    display: block; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-right: 0; border-radius: var(--_layout---border-radius--4px) 0 0 var(--_layout---border-radius--4px); }
  [data-vl-form] .f-form-navigation_steps::-webkit-scrollbar { display: none; }   /* elke stap is zo breed als de binnenkant van het vak (min de 1px rand links) */
  [data-vl-form] .f-form-navigation_steps-group { display: flex; width: max-content; height: 100%; }
  [data-vl-form] .form-step_btn { --vl-stapi: calc(var(--vl-stapb) - 1px); flex: 0 0 var(--vl-stapi); height: 100%; min-height: 0; box-sizing: border-box; width: var(--vl-stapi); max-width: none; padding: 0 .85em; scroll-snap-align: start; scroll-snap-stop: always; }
  [data-vl-form] .form-step_btn > .form-step_title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* de terug-chevron: een vierkant vak, strak tegen de stap (de lijn rechts van de stap is de naad) */
  [data-vl-form] .f-form-navigation .msf-button.is-prev { order: 2; margin: 0; width: auto; height: auto; border-radius: 0; background: none; }
  [data-vl-form] .f-form-navigation .hide-desktop { order: 2; display: flex; }
  [data-vl-form] .f-form-navigation .hide-desktop .msf-button.is-prev { width: var(--vl-knop); min-width: 0; display: grid; place-items: center; border-left: 0;
    border-radius: 0 var(--_layout---border-radius--4px) var(--_layout---border-radius--4px) 0; }
  [data-vl-form] .f-form-navigation .msf-button.is-prev .icon-button, [data-vl-form] .f-form-navigation .msf-button.is-prev .icon-button_element {
    width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; display: grid; place-items: center; }
  /* Volgende: papa's witte knop, vult de rest van de balk */
  [data-vl-form] .f-form-navigation .button-group { order: 3; flex: 1 1 auto; min-width: 0; height: var(--vl-knop); margin-left: .5em; }
  [data-vl-form] .f-form-navigation .form-button, [data-vl-form] .f-form-navigation .msf-button.is-submit { padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; height: var(--vl-knop); align-items: stretch; }
  [data-vl-form] .f-form-navigation .form-button > a.btn-animate-chars, [data-vl-form] .f-form-navigation .msf-button.is-submit > a.btn-animate-chars {
    box-sizing: border-box; width: 100%; height: var(--vl-knop); min-height: 0; margin: 0; }
}
/* ─── DE BALK OP EEN GROOT SCHERM (≥ 768; Dévin 09-10, en 12-10: "voor tablets mag de onderbalk gewoon zelfde als desktop") ──────────────────────────────────────────────────────────────────────────────────────────────
   Geen vak over de volle hoogte meer, maar een rij knoppen op knophoogte met de marge van de pagina: het woord STAPPEN, dan de vier stappen als pillen die tegen elkaar zitten en samen één
   knop met de radius van de knoppen zijn (dezelfde vulling van links), en rechts Vorige stap (papa's secundaire knop) en Volgende stap. Een stap die af is blijft gevuld en gevinkt, ook
   als je terug gaat: de vulling volgt de antwoorden (vraagscherm.js, vul), niet waar je nu bent. Op een telefoon (tot 767) is het een kleinere versie: zie het blok hierboven.
   Papa verbergt Vorige stap tot 991 met een inline script (.hide-tablet-mobile); in deze balk heet hij .vl-vorige (vragenlijst.mjs) en toont hij vanaf 768. De chevron (.hide-desktop) is er alleen op een telefoon. */
.vl-vorige { display: none; }
@media (min-width: 768px) {
  [data-vl-form] .f-form-navigation .hide-desktop { display: none; }
  [data-vl-form] .f-form-navigation { height: var(--vl-knop); gap: .75em; align-items: center; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; box-shadow: none; }
  .vl-balklabel { flex: none; display: flex; align-items: center; height: var(--vl-knop); padding: 0 .25em 0 .5em; font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--_colors---swatch--beige); opacity: .6; }
  [data-vl-form] .f-form-navigation_steps { align-self: center; height: var(--vl-knop); }
  [data-vl-form] .f-form-navigation_steps-group { align-self: center; gap: 0; height: var(--vl-knop); box-sizing: border-box; border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px); overflow: hidden; }
  /* het glas van de header (navy-60 en blur 14 px, zoals .navbar-bg en .listings-bar__bg) onder de stappen en Vorige stap, zodat wat eronder scrolt niet door de balk heen leest (Dévin 16-10) */
  [data-vl-form] .f-form-navigation_steps-group { background-color: var(--_colors---swatch--black-60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  [data-vl-form] .f-form-navigation .vl-vorige > a[data-form="back-btn"] .btn-animate-chars__bg { background-color: var(--_colors---swatch--black-60); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  [data-vl-form] .form-step_btn { height: 100%; min-height: 0; padding: 0 1.4em; }
  [data-vl-form] .form-step_btn:last-child { border-right: 0; }
  [data-vl-form] .f-form-navigation .msf-button.is-prev, [data-vl-form] .f-form-navigation .button-group { align-self: center; height: var(--vl-knop); }
  [data-vl-form] .f-form-navigation .msf-button.is-prev { order: 0; margin-left: auto; width: auto; min-width: 0; border: 0; border-radius: 0; background: none; }   /* papa zet hem tot 991 vooraan (order -1); op een tablet staat hij net als op desktop rechts naast Volgende */
  [data-vl-form] .f-form-navigation .vl-vorige { display: flex; align-items: center; height: var(--vl-knop); }
  [data-vl-form] .f-form-navigation .vl-vorige > a[data-form="back-btn"] { height: var(--vl-knop); min-height: 0; margin: 0; padding: 0 1.5em; }
  [data-vl-form] .f-form-navigation .form-button, [data-vl-form] .f-form-navigation .msf-button.is-submit { padding: 0; height: var(--vl-knop); align-items: center; }
  [data-vl-form] .f-form-navigation .form-button > a.btn-animate-chars, [data-vl-form] .f-form-navigation .msf-button.is-submit > a.btn-animate-chars { height: var(--vl-knop); min-height: 0; }
}
@media (max-width: 767px) { .vl-balklabel { display: none; } }

/* Minder beweging: de algemene regel in 95-minder-beweging.css zet elke overgang van deze stap uit (kop, antwoorden, balk en vulling). */
/* Het goed-teken in een veld (Dévin 19-10: "alle check's moeten de website checks worden"): de lijn van het filtervinkje (.ssnf-cbx__ic, 55-filter-ui.css) in plaats van papa's
   rondje, in papa's eigen vak (.form-field-icon.is--success: zijn plek, zijn kleur, zijn opacity als de groep goed is). Hij tekent zich in met stroke-dashoffset, met dezelfde ease en duur
   als het filtervinkje; uit staat hij op visibility: hidden (geen stipje van de ronde lijnkop, zie 55). Geldt in het dossier en op /nl/contact (lib/vragenlijst.mjs onsVinkje). */
/* DESIGNREGEL (Dévin 26-10: "de check in een cirkeltje, net als de voortgang van het dossier ... zorg dat dit altijd zo is"): een goed-teken is een vinkje in een rondje, de spiegel van het
   foutteken (uitroepteken in een rondje, papa's .form-field-icon.is--error): dezelfde maat (de breedte van het vak), dezelfde ring van 1 en dezelfde 10% vulling, en een lijn van 1,5 zoals het uitroepteken.
   De kleur is die van het vak (currentColor): beige op het navy dossier, navy op het beige paneel, zoals het rondje in de voortgang. Eén markup (lib/vragenlijst.mjs VINK_VELD), getoetst door lib/vinkteken.test.mjs. */
.ssn-vink { display: block; width: 100%; height: auto; overflow: visible; visibility: hidden; transition: visibility 0s .36s; }
[data-validate].is--success .ssn-vink { visibility: visible; transition: visibility 0s; }
.ssn-vink__vlak { fill: currentColor; stroke: currentColor; stroke-width: 1.5; opacity: .1; }
.ssn-vink__ring { fill: none; stroke: currentColor; stroke-width: 1; }
.ssn-vink__lijn { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16;
  transition: stroke-dashoffset .34s cubic-bezier(.22,1,.36,1) .02s; }
[data-validate].is--success .ssn-vink__lijn { stroke-dashoffset: 0; }
html[data-ssn-motion="reduced"] .ssn-vink__lijn { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .ssn-vink__lijn { transition: none; } }

/* Het teken achter het voorwaardenvinkje (Dévin 25-10), in het dossier en op /nl/contact: papa's goed- en foutteken van een veld, hier in de regel achter de zin in plaats van rechts in het veld.
   Beide liggen op dezelfde plek; de stand van de groep (is--success / is--error, papa's eigen regel in de pagina) bepaalt welke je ziet. */
.form_checkbox .vl-vinkteken { display: grid; flex: 0 0 auto; align-items: center; }
.form_checkbox .vl-vinkteken > .form-field-icon { grid-area: 1 / 1; position: static; width: 1.25em; height: 1.25em; max-height: none; padding: 0; transition: opacity .2s; }
/* =====================================================================   VRAGENLIJST-KAART (Dévin 02-10, herzien 04-10)
   De eilandkeuze van de vragenlijst: doosjes met de eilandvorm die groeien tot een groot vlak, met links de knoppen met de gebieden en rechts het eiland. Spec:
   docs/superpowers/specs/2026-10-02-vragenlijst-stap2-vragen-met-kaart.md §5.3 t/m §5.6a. De module is vendor/kaart/keuze-kaart.js (alleen tekenen en bewegen);
   de markup en de antwoorden zijn van de vraagmotor (vendor/ssn-account).
   Dévin 04-10: de doosjes zijn echte navy met een contour, zoals de kaart op de pandpagina (.kaart), en vierkant zoals de listingkaarten met dezelfde tussenruimte (--listings-gap);
   de gebiedsknoppen zijn de filterknoppen (.ssnf-segbtn: beige .05, beige rand bij zweven, beige gevuld als gekozen) maar klein, in een rij die wrapt; een gekozen gebied is één
   vlak zonder lijnen ertussen (svg-filter, 05-10); het grote vlak heeft de wegen en het vliegveld van de pandkaart en zoomt naar wat je koos, met een in- en uitzoomknop rechtsboven. ===================================================================== */
/* De ruimte tussen de doosjes is die van de listingkaarten (Dévin 04-10). Een gewone eigenschap met em rekent in de lettergrootte van wie hem gebruikt (de doosjes: 15,3 px in plaats van 18);
   als lengte geregistreerd wordt hij op .vk uitgerekend en in pixels doorgegeven. */
@property --vk-gat { syntax: '<length>'; inherits: true; initial-value: 1rem; }
.vk { --vk-gat: var(--listings-gap, var(--vl-rem)); --vk-paneel: color-mix(in srgb, var(--_colors---swatch--beige) 5%, var(--_colors---swatch--black)); position: relative; width: 100%; max-width: calc(var(--vl-rem) * 72); margin-inline: auto; }
.vk-doosjes { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: var(--vk-gat); }
.vk-doos { box-sizing: border-box; position: relative; flex: 0 1 clamp(calc(var(--vl-rem) * 12), calc(100dvh - calc(var(--vl-rem) * 30)), calc(var(--vl-rem) * 22)); min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--8px);
  background-color: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); font: inherit; cursor: pointer; overflow: hidden; container-type: size; transition: border-color .2s var(--vl-zacht), opacity .4s var(--vl-zacht); }   /* container-type: het eiland rekent in de maat van zijn eigen blok (cqw, cqh) */
.vk-doos:hover { border-color: rgba(235, 227, 216, .45); }
.vk-doos.is-top3 { border-color: rgba(235, 227, 216, .45); }   /* een huis uit je top 3 ligt op dit eiland: de lichtere rand, zoals hover */
.vk-doos[aria-pressed="true"] { border-color: var(--_colors---swatch--beige); }   /* niet beige gevuld zoals een tegel: het eiland is zelf beige */
.vk-doos:focus-visible, .vk-knop:focus-visible, .vk-zoomknop:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: 2px; }
.vk-gat { flex: none; }   /* houdt de plek van het doosje dat groeit, zodat de andere niet opschuiven */
/* Het eiland staat in een wikkel: alleen de wikkel krijgt de transform van het groeien en van het zoomen, nooit de svg zelf (vector-effect: non-scaling-stroke laat een transform op de root alle paden opnieuw uitleggen). */
.vk-kaartwrap { position: absolute; left: 50%; top: 50%; width: calc(min(84cqw, calc(84cqh * var(--vk-r, 1.6))) * var(--vk-maat, 1)); aspect-ratio: var(--vk-r, 1.6); translate: -50% -50%; transform-origin: 0 0; display: block; pointer-events: none; }   /* precies zo groot als het eiland (breed: de volle breedte, hoog: de volle hoogte), dus het eiland loopt tot de randen van het doosje (Dévin 05-10) */
.vk-kaartwrap svg, .vk-kaart { display: block; width: 100%; height: auto; overflow: visible; }   /* Java loopt door tot buiten de viewBox; het doosje (overflow: hidden) knipt het af */
.vk-doos[data-vk-eiland="jakarta"] { --vk-maat: .72; }   /* Jakarta is veel kleiner dan Bali en Lombok; in een even groot doosje mag het niet groter ogen (Dévin 12-10). Op de telefoon (banden) is het al de kleinste */
.kk-land { fill: var(--_colors---swatch--beige); }
.kk-java { fill: none; stroke: color-mix(in srgb, var(--_colors---swatch--beige) 40%, transparent); stroke-width: 1px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }   /* de rest van Java: alleen de kustlijn, geen eigen kleur en geen straten (Dévin 12-10: "java mag geen andere kleur hebben, dus of outline") */
/* de wegen en het vliegveld van de pandkaart (75-pand-kaart.css: dezelfde taupe-tinten), alleen in het grote vlak: de silhouetten in de doosjes hebben ze niet */
.kk-weg { fill: none; stroke: var(--kaart-taupe-diep); stroke-width: calc(1.1px / var(--vk-z, 1)); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kk-veld { fill: var(--kaart-taupe); stroke: none; }
.kk-baan { fill: none; stroke: var(--_colors---swatch--black); stroke-width: calc(1.2px / var(--vk-z, 1)); vector-effect: non-scaling-stroke; }
.vk-doos__naam { position: absolute; left: .6em; top: .6em; z-index: 1; color: var(--_colors---swatch--beige);
  font-size: var(--_paragraphs---paragraph-xs--font-size); line-height: 1.2; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: opacity .3s var(--vl-zacht); }   /* linksboven op elk apparaat, in hetzelfde vlak als de labels op de pandkaart */
.vk-doos.is-weg { opacity: 0; pointer-events: none; }
/* Dezelfde familie als de kaarten van de andere vragen (Dévin 12-10, "consistente iconen en functie"): onder de naam hoeveel er in het aanbod is, en rechtsboven het vinkje dat oranje
   vult als het eiland gekozen is. Aanwijzen maakt alleen de rand lichter: het eiland groeit niet en de doosjes komen zonder beweging binnen (Dévin 16-10: "de landen niet schalen bij hover", "minder inkomende en hover animaties"). Het vinkje en het aantal zijn papa's .vl-kaart__vink en .vl-kaart__n (87-vragenlijst-beeld.css). */
.vk-doos__naam { display: grid; gap: .3em; justify-items: start; text-align: start; }
.vk-doos__n { font-weight: 400; letter-spacing: .04em; opacity: .7; font-variant-numeric: tabular-nums; }
/* de halo van de pandkaart (75-pand-kaart.css, .kaart-naam), hier als zacht vlak in de kleur van het doosje: de kustlijn van Java loopt bij Jakarta tot de rand en houdt rond het label op
   in plaats van erdoor te lopen; alleen letters omranden was te dun, de lijn bleef tussen de woorden zichtbaar (12-10) */
.vk-doos__naam, .vk-doos .vl-kaart__vink { background-color: var(--_colors---swatch--black); box-shadow: 0 0 .6em .4em var(--_colors---swatch--black); }   /* het vinkje ook: op de tablet liep de oostkust erdoorheen; gekozen wordt het oranje (de regel hieronder wint) */
.vk-doos[aria-pressed="true"] .vl-kaart__vink { background: var(--ssn-accent); border-color: var(--ssn-accent); stroke-dashoffset: 0; }
.vk-doos.is-gekozen .vl-kaart__vink, .vk-doos.is-gekozen .vk-doos__n { opacity: 0; }

/* groot: het gekozen doosje vult het vak; de knoppen liggen er links overheen, het eiland rechts */
.vk.is-groot { display: grid; }
.vk.is-groot > .vk-doosjes, .vk.is-groot > .vk-gebieden { grid-area: 1 / 1; }
.vk.is-groot .vk-doosjes { min-height: clamp(calc(var(--vl-rem) * 18), 100dvh - calc(var(--vl-rem) * 26), calc(var(--vl-rem) * 34)); }
.vk-doos.is-gekozen { position: absolute; inset: 0; z-index: 1; flex: none; width: auto; aspect-ratio: auto; cursor: default; }   /* boven de andere doosjes, ook tijdens het groeien en krimpen; de kaartlaag (.vk-laag, ook 1, later in de bouw) blijft erboven */
/* de rand die met de knip meegroeit (keuze-kaart.js beweeg): alleen tijdens de beweging, daarna is de eigen rand van het doosje weer heel */
.vk-doos__rand { position: absolute; z-index: 1; box-sizing: border-box; border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--8px); pointer-events: none; }
.vk-doos.is-gekozen:hover { border-color: var(--_colors---swatch--grey); }
.vk-doos.is-gekozen[aria-pressed="true"] { border-color: var(--_colors---swatch--grey); }
.vk-doos.is-gekozen .vk-doos__naam { opacity: 0; }
.vk-doos.is-gekozen .vk-kaartwrap { left: auto; right: 4%; top: 50%; width: min(58cqw, calc(86cqh * var(--vk-ratio, 1.6))); translate: 0 -50%; aspect-ratio: var(--vk-ratio, 1.6); }

/* de knoppen met de gebieden liggen linksboven over de kaart; de kaart zelf loopt door onder de knoppen (Dévin 12-10: "de ingezoomde map moet altijd het hele blok kunnen gebruiken").
   Geen eigen vlak eronder: de knoppen hebben zelf een dekkende vulling. Het zoeken en de lijst met plaatsen staan in een navy zijbalk in het kaartblok (.vk-zij, hieronder); de lijst scrolt zoals
   de lijsten in de filterzijbalk (.ssnf-scrollwrap: bovenin en onderin een fade met wat er nog buiten beeld staat). */
.vk-gebieden { text-align: left; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: stretch; gap: .5em; width: min(calc(var(--vl-rem) * 26), 44%); margin: 1px; padding: var(--vk-gat); box-sizing: border-box; min-height: 0; pointer-events: none; }
.vk-gebieden > * { pointer-events: auto; }
.vk.is-groot .vk-gebieden { align-self: stretch; contain: size; }
.vk-pillen { display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; gap: .5em; flex: 0 0 auto; pointer-events: none; }   /* linksboven op elk apparaat, nergens gecentreerd (Dévin 09-10) */
.vk-pillen > * { pointer-events: auto; }
.vk-knop--plaats svg { flex: none; width: 1em; height: 1em; margin-left: .5em; transition: rotate .3s var(--vl-uit); }
.vk-knop--plaats[aria-expanded="true"] { border-color: rgba(235, 227, 216, .45); }
.vk-knop--plaats[aria-expanded="true"] svg { rotate: 180deg; }
.vk-kiezer .ssnf-search { flex: none; }
/* DE ZIJBALK (Dévin 15-10: "een navy vlak dat gewoon een hele sidebar wordt in het kaartblok"; ronde 15: "voor mobiel moet het de map naar beneden schuiven met een scheidingslijn"). Hij staat in de kolom met de pillen
   (lib/vragenlijst.mjs). Telefoon: hij zakt van onder de pillen naar beneden en schuift het eiland mee omlaag (800 ms --vl-ease met 100 ms wachten, zoals het filtermenu in 50-filter-menu-mobiel.css); de onderrand
   is de scheidingslijn. De knop "Ik zoek een bepaalde plaats" opent en sluit hem. Dicht is hij inert (keuze-kaart.js kiezerKlap), dus geen tab en geen schermlezer. */
/* Desktop en tablet (Dévin 17-10, ronde 19: "specifiek zoeken zijbalk moet niet de map aantasten, en hij moet van links in komen sliden als een echte sidebar, en voor desktop moet je niet hoeven scrollen"):
   de zijbalk is een navy paneel dat van links over de kaart schuift, zo hoog als het kaartblok (translateX, 420 ms, de curve van de zijbalk). De pillen blijven waar ze staan, bovenin het paneel; het zoekveld
   met de Reset en de lijst vullen wat eronder over is. De kaart zelf beweegt, zoomt en verandert niet van maat als het paneel opengaat (keuze-kaart.js venster() kent het paneel niet meer). Niets in de kolom
   scrolt: alleen de lijst, binnen het paneel, met de fades van het filter. Het paneel (::before) en de inhoud (.vk-kiezer) schuiven even ver (de kolom knipt), dus ze blijven één vlak. */
.vk-gebieden > .vk-zij { display: block; flex: none; position: relative; overflow: hidden; pointer-events: none; }   /* telefoon: de wikkel knipt, de zijbalk zakt erin onder de pillen vandaan */
.vk-kiezer { --vk-paneel: var(--_colors---swatch--black); position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: .5em;
  pointer-events: auto;
  transform: translateY(-100%); visibility: hidden; transition: transform .42s var(--vl-zij), visibility 0s .42s; }
.vk.is-kiezer .vk-kiezer { transform: none; visibility: visible; transition: transform .42s var(--vl-zij); }
@media (min-width: 768px) {
  .vk.is-groot .vk-gebieden { overflow: hidden; }
  .vk.is-groot .vk-gebieden::before { content: ''; position: absolute; inset: 0; z-index: -1; box-sizing: border-box; pointer-events: none; background-color: var(--_colors---swatch--black);
    border-right: 1px solid var(--listings-line, var(--_colors---swatch--grey)); border-radius: calc(var(--_layout---border-radius--8px) - 1px) 0 0 calc(var(--_layout---border-radius--8px) - 1px);
    transform: translateX(-100%); visibility: hidden; transition: transform .42s var(--vl-zij), visibility 0s .42s; }
  .vk.is-groot.is-kiezer .vk-gebieden { pointer-events: auto; }   /* open vangt het paneel zelf alles op: wat eronder op de kaart ligt, is niet aan te tikken */
  .vk.is-groot.is-kiezer .vk-gebieden::before { transform: none; visibility: visible; transition: transform .42s var(--vl-zij); }
  .vk-gebieden > .vk-zij { flex: 1 1 0; min-height: 0; overflow: visible; }
  .vk-kiezer { height: 100%; grid-template-rows: auto minmax(0, 1fr); transform: translateX(calc(-100% - 2 * var(--vk-gat))); }
  /* open scrolt de kolom (keuze-kaart.js kolomScroll, Dévin 25-10): de knop komt bovenin, de lijst heeft dan de hoogte tot de onderkant; het paneel loopt mee tot onderaan (--vk-kol-h) */
  .vk.is-groot.is-kiezer .vk-gebieden { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .vk.is-groot.is-kiezer .vk-gebieden::-webkit-scrollbar { display: none; }
  .vk.is-groot.is-kiezer .vk-gebieden::before { bottom: auto; height: max(100%, var(--vk-kol-h, 100%)); }
  .vk.is-groot.is-kiezer .vk-gebieden > .vk-zij[style*="height"] { flex: none; }
  .vk-gebieden > .vk-zij { margin-top: .5em; }   /* iets meer lucht tussen de pillen en het zoekveld (Dévin 17-10): samen met de tussenruimte van de kolom een hele em */
}
.vk-kiezer > .ssnf-search { grid-area: 1 / 1; }
.vk-kiezer > .vk-voet { grid-area: 1 / 2; display: flex; }
.vk-kiezer > .vk-voet .ssnf-reset { align-self: stretch; }   /* even hoog als het zoekveld */
/* Het vergrootglas staat midden in de ruimte links van de tekst (Dévin 17-10: "de zoek icon moet beter geplaatst worden"): het rekent in dezelfde lettermaat als het veld, dus zijn vak (2,7em) is precies de
   ruimte die het veld links vrijhoudt (55-filter-ui.css .ssnf-in.is-search). Daarvoor rekende het in de grotere maat van de zijbalk en schoof het tegen de tekst aan. */
.vk-kiezer .ssnf-sic { left: 0; width: 2.7em; font-size: var(--vk-fs); }
.vk-kiezer .ssnf-sic svg { width: 1.2em; height: 1.2em; }
/* Zoekveld en Reset als twee losse velden van dezelfde soort (Dévin 16-10: "zelfde stijl als de zoekbalk, even hoog, zelfde border en radius, maar niet aanvast"): het veld vult zijn vak,
   zodat het vergrootglas in het midden van wat je ziet staat; de Reset krijgt de rand, de radius en de vulling van .ssnf-in (55-filter-ui.css). */
.vk-kiezer > .ssnf-search { display: flex; }
.vk-kiezer > .ssnf-search > .ssnf-in { height: auto; align-self: stretch; }
.vk-kiezer .ssnf-reset { border: 1px solid rgba(118, 107, 96,.5); border-radius: var(--_layout---border-radius--4px); background: var(--_colors---swatch--black); }
.vk-kiezer .ssnf-reset:hover { border-color: rgba(235,227,216,.7); }
/* Eén lettergrootte in het paneel (Dévin 17-10, ronde 19: "reset knop kleiner, icon kleiner, font size consistenter in dat blok"): zoekveld, Reset, rijen, aantallen en de lege tekst zijn even groot, die van de
   rijen (paragraph-xs). De Reset is compacter: dezelfde hoogte als het zoekveld (het raster rekt hem), het pictogram een em. */
.vk-kiezer { --vk-fs: var(--_paragraphs---paragraph-xs--font-size); }
.vk-kiezer .ssnf-reset, .vk-kiezer .ssnf-scrollcount, .vl-scherm .form-input { transition-timing-function: var(--vl-zacht); }   /* 18-10: het filter van het aanbod en papa's velden gebruiken de kale ease; in het dossier één curve (af2:E1) */
.vk .ssnf-row, .vl-scherm .ssnf-row { animation-timing-function: var(--vl-uit); }
.vk-kiezer .ssnf-in, .vk-kiezer .ssnf-reset__t, .vk-kiezer .ssnf-row__t, .vk-kiezer .ssnf-row__c, .vk-kiezer .vk-leeg { font-size: var(--vk-fs); }
.vk-kiezer .ssnf-reset { gap: .34em; padding: .45em .65em; }   /* paragraph-xs is een em van de ouder: de knop houdt zijn eigen maat, de letters en het pictogram rekenen er .75 van (10 px op 1440) */
.vk-kiezer .ssnf-reset > svg { top: 0; width: var(--vk-fs); height: var(--vk-fs); margin: 0; }
.vk-kiezer > .vk-scrollwrap { grid-area: 2 / 1 / 3 / 3; }
.vk-scrollwrap { min-height: 0; height: auto; display: flex; flex-direction: column; }
.vk-lijst { flex: 1 1 0; min-height: 0; max-height: none; overscroll-behavior: contain; }   /* de lijst vult de zijbalk tot de Reset (de filterzijbalk zet 15em) */
.vk-lijst::-webkit-scrollbar { display: none; }
.vk-kiezer .ssnf-scrollcount { background: linear-gradient(color-mix(in srgb, var(--vk-paneel) 0%, transparent), var(--vk-paneel) 78%); border-radius: 0 0 var(--_layout---border-radius--4px) var(--_layout---border-radius--4px); }
.vk-kiezer .ssnf-scrollcount.is-top { background: linear-gradient(var(--vk-paneel) 22%, color-mix(in srgb, var(--vk-paneel) 0%, transparent)); border-radius: 0; }
.vk-rij { padding-inline: .5em; border-radius: var(--_layout---border-radius--4px); transition: background .2s var(--vl-zacht); }
.vk-rij { animation-timing-function: var(--vl-uit); }
/* de rij van de filterzijbalk (55-filter-ui.css: .ssnf-row, 1.9em hoog, het streepje ervoor) zonder kop per gebied: één niveau, dus elk streepje even kort (--d: 0) (Dévin 15-10). De 44px van 82-vragenlijst.css (.ssnf--vl .ssnf-row) geldt voor de antwoordrijen; hier telt de regelafstand van de filter */
.vk-kiezer.ssnf--vl .vk-rij { min-height: 1.9em; }
.vk-rij.is-wijst, .vk-rij:hover { background: rgba(235, 227, 216, .06); }
.vk-rij[hidden], .vk-groep[hidden], .vk-leeg[hidden] { display: none; }
.vk-leeg { margin: 0; padding: 1em .5em; opacity: .6; }
.vk-set { display: contents; }   /* de pillen van één eiland (lib/vragenlijst.mjs kaart()): voor de opmaak bestaat de wikkel niet */
.vk-gebieden[hidden], .vk[hidden], .vk.is-groot[hidden], .vk-doosjes[hidden], .vk-zoom[hidden], .vk-set[hidden], .vk-knop[hidden] { display: none; }   /* ook als een regel hieronder (de telefoon) een eigen display geeft */
.vk-knop { display: inline-flex; align-items: center; min-height: 0; padding: .75em .95em; line-height: 1.2; border: 1px solid transparent; border-radius: var(--_layout---border-radius--4px);
  background: var(--vk-paneel); color: var(--_colors---swatch--beige); font: inherit; font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .01em;
  text-align: left; text-transform: uppercase; cursor: pointer;   /* dezelfde kleur als de filterknop op navy (beige .05), maar dekkend: op een telefoon ligt de kaart eronder */
  transition: background .2s var(--vl-zacht), color .2s var(--vl-zacht), border-color .2s var(--vl-zacht); }
.vk-knop:hover, .vk-knop.is-wijst { border-color: rgba(235, 227, 216, .45); }   /* een beige rand, niet oranje (Dévin 04-10) */
/* gekozen (Dévin 17-10, ronde 19: "wanneer pill geselecteerd geen oranje gloed meer"): een beige vlak met navy letters, verder niets. De gloedlijn van de header-nav (papa's .navlink_globe-item) is weg, in
   de markup en hier. Boven het beige eiland (inzoomen) valt een beige pil weg; de navy haarlijn eromheen houdt hem leesbaar, op het navy vlak is ze onzichtbaar. */
.vk-knop[aria-pressed="true"] { border-color: var(--_colors---swatch--beige); background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); box-shadow: 0 0 0 1px var(--_colors---swatch--black); }
.vk-gebieden:not(.is-in) .vk-knop { opacity: 0; pointer-events: none; }
/* de pillen komen als een stapel binnen: elke pil schuift kort omhoog en verschijnt, 40 ms na de vorige (Dévin 16-10: "niet een letter inkomende animatie maar de pil zelf een stapelende
   animatie"). Daarna beweegt er niets meer: alleen de rand bij aanwijzen en de vulling als hij gekozen is. */
.vk-gebieden.is-in .vk-knop { animation: vk-pil-in .32s var(--vl-uit) backwards; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes vk-pil-in { 0% { opacity: 0; translate: 0 .5em; } }
/* Dévin 24-10: vraag 2 toont vier motiefkaarten in plaats van de zeven gebiedspillen (die blijven verborgen in de pagina); de titel is papa's .eyebrow-style (IvyPresto), de hele tekst staat er altijd (Dévin 25-10: de regel met puntjes werkte minder goed); gekozen = beige vlak. */
.vk-pillen { min-width: 0; }
.vk-motief { width: 100%; min-width: 0; flex-direction: column; align-items: flex-start; gap: .45em; padding: .9em 1em 1em; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vk-motief__titel { font-family: var(--_fonts---fonts--eyebrow); font-size: var(--_paragraphs---paragraph-l--font-size); letter-spacing: -.005em; line-height: 1.1; }
.vk-motief__tekst { display: block; max-width: 100%; font-size: var(--_paragraphs---paragraph-m--font-size); line-height: 1.45; opacity: .72; }
.vk-motief[aria-pressed="true"] .vk-motief__tekst { opacity: .85; }
@media (max-width: 1023px) { .vk .vk-motief { gap: .3em; padding: .75em .85em .8em; } .vk-motief__tekst { font-size: var(--_paragraphs---paragraph-s--font-size); } }
/* de titel van het eiland tussen de naam en het aantal (vraag 1): dezelfde titel-letter, klein; hij vervaagt met de naam als het eiland gekozen is (regel bij .vk-doos.is-gekozen .vk-doos__naam) */
.vk-doos__titel { font-family: var(--_fonts---fonts--eyebrow); font-size: var(--_paragraphs---paragraph-m--font-size); text-transform: none; letter-spacing: -.005em; font-weight: 400; line-height: 1.1; }

/* het gebied oranje: dezelfde kleur en rand als .kaart-gebied op de pandkaart, maar alles wat oranje is, is één vlak met één rand: de paden zijn hier ondoorzichtig en de filter
   (#vk-rand, keuze-kaart.js) maakt van hun gezamenlijke vorm de vulling en de rand. Zo staat er geen grens per dorp en geen rand tussen twee buren.
   Gekozen (.kk-gebieden: hele gebieden en losse plaatsen) wisselt meteen. Aanwijzen (.kk-zweef: één kopie per gebied) is alleen de oranje rand, zonder vulling (filter #vk-rand-lijn, Dévin 17-10: "alleen bij echt selecteren krijg je ook de fill"), en fadet per gebied als één vorm: de opacity zit op de <g> met de filter,
   dus de filter tekent eerst de hele vorm en daarna wordt die vorm lichter of donkerder; geen pad zonder filter, geen zwart, geen naden (Dévin 16-10). */
.kk-gebieden path, .kk-zweef path { fill: #000; stroke: none; }
.kk-gebieden path { fill-opacity: 0; }
.kk-gebieden [data-regio].is-vast path, .kk-gebieden path.is-vast { fill-opacity: 1; }
.kk-gebieden.heeft-vast { filter: url(#vk-rand); }
.kk-zweef { pointer-events: none; }
.kk-zweef > g { filter: url(#vk-rand-lijn); opacity: 0; visibility: hidden; transition: opacity .25s var(--vl-zacht), visibility 0s .25s; }
.kk-zweef > g.is-aan { opacity: 1; visibility: visible; transition: opacity .25s var(--vl-zacht), visibility 0s; }
.kk-zweef path.is-vast { display: none; }   /* al gekozen: staat al in het vaste vlak */
.kk-zweef > g.is-plekzweef path:not(.is-plek) { display: none; }   /* een rij in de lijst wijst alleen haar eigen plaats aan, niet het hele gebied (keuze-kaart.js kiezerKoppel) */

/* in- en uitzoomen rechtsboven in het grote vlak, in de stijl van de knoppen op de pandkaart (75-pand-kaart.css: .kaart-knop); terug naar het hele eiland rechtsonder, met zijn woord (Dévin 15-10, ronde 15).
   .vk-zoom ligt over het hele vlak (rand .5 rem) en vangt zelf niets op, zodat slepen en knijpen op de kaart doorgaan; alleen de knoppen zijn aanklikbaar. */
.vk-zoom { position: absolute; inset: calc(var(--vl-rem) * .5); z-index: 3; display: grid; justify-items: end; align-content: start; gap: calc(var(--vl-rem) * .5); pointer-events: none; }   /* uitzoomen direct onder inzoomen (Dévin 17-10, avond); zonder align-content verdeelde het raster de twee knoppen over de hele hoogte */
.vk-zoom > * { pointer-events: auto; }
.vk-zoom[hidden] { display: none; }
.vk-zoomknop { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; width: calc(var(--vl-rem) * 2.25); height: calc(var(--vl-rem) * 2.25); margin: 0; padding: 0; border: 1px solid transparent;
  border-radius: var(--_layout---border-radius--4px); background-color: rgba(42, 36, 32, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--ssn-surface); cursor: pointer;
  transition: border-color .2s var(--vl-zacht), opacity .2s var(--vl-zacht); }
.vk-zoomknop svg { display: block; width: calc(var(--vl-rem) * 1.25); height: calc(var(--vl-rem) * 1.25); }
.vk-zoomknop:hover, .vk-zoomknop:focus-visible { border-color: rgba(235, 227, 216, .45); }
.vk-zoomknop:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* de kaartlaag: vangt het slepen, knijpen, scrollen en aantikken op; de namen en de aanwijzer liggen erin */
.vk-laag { position: absolute; inset: 0; z-index: 1; touch-action: none; cursor: grab; outline: none; border-radius: var(--_layout---border-radius--8px); -webkit-tap-highlight-color: transparent; }
/* Aanraakscherm (Dévin 17-10, avond): zelf zoomen en slepen staat uit (keuze-kaart.js, AANRAAK), dus ook de zoomknoppen; vegen over de kaart scrolt gewoon de pagina. */
@media (hover: none) and (pointer: coarse) { .vk-laag { touch-action: pan-y; cursor: default; } .vk-zoom, .vk.is-groot > .vk-zoom { display: none; } }
.vk-laag[hidden] { display: none; }
.vk-laag.is-sleept { cursor: grabbing; }
.vk-laag.is-wijst { cursor: pointer; }
.vk-laag:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: calc(calc(var(--vl-rem) * .25) * -1); }
.vk-namen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vk-naam { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; color: var(--_colors---swatch--black); font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 0 3px var(--_colors---swatch--beige), 0 0 calc(var(--vl-rem) * .375) var(--_colors---swatch--beige); transition: opacity .3s var(--vl-zacht); }   /* in en uit fadet (.3 s): een naam begint onzichtbaar (is-weg) en komt pas na het groeien binnen */
.vk-naam--zee { color: var(--_colors---swatch--grey); text-shadow: none; font-style: italic; text-transform: none; letter-spacing: .04em; }
.vk-naam.is-weg { opacity: 0; }
.vk-tip { position: absolute; left: 0; top: 0; z-index: 3; padding: .3em .6em; border-radius: var(--_layout---border-radius--4px); background: var(--_colors---swatch--beige); color: var(--_colors---swatch--black); pointer-events: none; white-space: nowrap;
  font-size: var(--_paragraphs---paragraph-xs--font-size); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.vk-tip[hidden] { display: none; }
/* de straatjes van de pandkaart (dezelfde tegels), pas als je dichtbij komt; de grove hoofdwegen gaan weg zodra de fijne er zijn */
.kk-tegels g[data-tegel] { transition: opacity .3s var(--vl-uit); }
.kk-tegels path { fill: none; vector-effect: non-scaling-stroke; }
.kk-tegels .kk-t-hoofd path { stroke: var(--kaart-taupe); stroke-width: calc(1.3px / var(--vk-z, 1)); }
.kk-tegels .kk-t-hoofd path[data-k="a"] { stroke: var(--kaart-taupe-diep); stroke-width: calc(2px / var(--vk-z, 1)); }
.kk-tegels .kk-t-detail { display: none; }
.vk-doos.is-fijn .kk-tegels .kk-t-detail { display: inline; }
.kk-tegels .kk-t-detail path { stroke: var(--kaart-taupe-licht); stroke-width: calc(.8px / var(--vk-z, 1)); }
.kk-tegels .kk-t-detail path[data-k="c"] { stroke: var(--kaart-taupe); stroke-width: calc(1.2px / var(--vk-z, 1)); }
.vk-doos.is-straat:has(.kk-tegels g) .kk-weg { display: none; }

/* tablet rechtop: een bredere kolom laat twee pillen naast elkaar staan, dus minder rijen en meer ruimte onder de laatste pil voor de zijbalk */
@media (min-width: 768px) and (max-width: 899px) { .vk-gebieden { width: min(calc(var(--vl-rem) * 26), 54%); } }

/* telefoon: de eilanden als drie banden onder elkaar die samen de ruimte vullen die er is (geen scrollen); in het grote vlak staan de gebiedsknoppen linksboven en eronder het eiland, groot genoeg voor wat er over is */
@media (max-width: 767px) {
  .vk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .vk-doosjes { flex: 1 1 0; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .vk-doos { flex: 1 1 0; width: 100%; max-width: none; min-height: calc(var(--vl-rem) * 4.25); max-height: calc(var(--vl-rem) * 12); aspect-ratio: auto; }
  /* nooit over "Weet ik nog niet" heen (Dévin 17-10, avond: "de 'weet ik niet' staat letterlijk in jakarta vlak"): op een laag scherm (390 x 664, Safari met zijn balken) waren drie banden van 5,5 rem hoger dan
     de ruimte en liep Jakarta onder de regel door. Nu zakken de banden tot 4,25 rem, en past het dan nog niet, dan duwt het vak de regel omlaag (min-height auto) in plaats van eroverheen te lopen. */
  .vk:not(.is-groot) { min-height: auto; }
  .vk.is-groot { display: grid; grid-template-rows: auto auto 1fr; --vk-zij-p: 72%; --vk-lijst: calc(var(--vl-rem) * 15); clip-path: inset(-.5em -.5em 0 -.5em); }   /* rij 1 de knoppen, rij 2 het eiland met de zijbalk erbovenop; het eiland dat naar beneden schuift wordt aan de onderkant afgeknipt (de randen eromheen blijven vrij voor de focuslijn) */
  .vk.is-groot > .vk-doosjes { grid-area: 3 / 1; }
  .vk.is-groot .vk-doosjes { min-height: calc(var(--vl-rem) * 10); display: block; }
  /* in het grote vlak tellen de andere doosjes (onzichtbaar) en het gat niet meer mee voor de hoogte: anders veranderde de maat van het vlak op het moment dat ze na het uitfaden hun oude hoogte loslieten (7 px, Dévin 17-10 avond) */
  .vk.is-groot .vk-doosjes > .vk-doos:not(.is-gekozen), .vk.is-groot .vk-doosjes > .vk-gat { position: absolute; left: 0; right: 0; top: 0; }
  .vk-doos.is-gekozen { max-height: none; }
  .vk-doos[data-vk-eiland="jakarta"] { --vk-maat: 1; }
  /* in een lage, brede band valt een gecentreerd eiland over het label (Bali over "354 IN HET AANBOD", 12-10): het eiland staat midden in de ruimte tussen het label en het vinkje
     (het vinkje: .7em van de rand en 1.7em breed, 87-vragenlijst-beeld.css). In em van het doosje, dus het groeit mee met de tekst. */
  .vk-doos:not(.is-gekozen) { --vk-vrij-l: 7.6em; --vk-vrij-r: 3em; }
  .vk-doos:not(.is-gekozen) .vk-kaartwrap { left: calc(var(--vk-vrij-l) + (100cqw - var(--vk-vrij-l) - var(--vk-vrij-r)) / 2); width: calc(min(100cqw - var(--vk-vrij-l) - var(--vk-vrij-r), 84cqh * var(--vk-r, 1.6)) * var(--vk-maat, 1)); }
  .vk-doos.is-gekozen .vk-kaartwrap { left: 50%; right: auto; top: 50%; width: min(calc(100cqw - 2 * var(--vk-gat)), calc((100cqh - 2 * var(--vk-gat)) * var(--vk-ratio, 1.6))); translate: -50% -50%; aspect-ratio: var(--vk-ratio, 1.6); }
  /* de pillen boven het eiland: de wikkel .vk-gebieden valt weg, zodat de pillen (rij 1) en de zijbalk (rij 2, over het eiland) allebei items van het grid van .vk zijn */
  .vk.is-groot > .vk-gebieden:not([hidden]) { display: contents; }
  .vk.is-groot .vk-pillen { grid-area: 1 / 1; padding: 0 0 var(--vk-gat); }
  /* de zijbalk beslaat de bovenste --vk-zij-p van het eiland en zakt van boven naar beneden, zoals het filtermenu op /nl/properties (50-filter-menu-mobiel.css .listings-bar__menu: 800 ms --vl-ease met
     100 ms wachten); het eiland schuift er even ver mee omlaag. De onderrand van de zijbalk is de scheidingslijn tussen de lijst en het eiland. */
  .vk.is-groot .vk-gebieden > .vk-zij { grid-area: 2 / 1; align-self: start; height: 0; margin: 0; border-radius: 0; z-index: 3; transition: height .8s var(--vl-ease) .1s; }
  /* Open duwt de lijst de kaart omlaag (Dévin 17-10, avond: "dan moet hij de map naar beneden duwen terwijl hij eroverheen valt want niet netjes is"): de lijst is een eigen rij tussen de pillen en de kaart die van
     0 tot --vk-lijst groeit, en de kaart houdt zijn maat (keuze-kaart.js kiezerKlap zet zijn hoogte vast), dus het hele vak wordt langer en "Weet ik nog niet" zakt mee. Tot 17-10 lag de lijst over de bovenkant van de kaart. */
  .vk.is-groot.is-kiezer .vk-gebieden > .vk-zij { height: var(--vk-lijst); }
  .vk-scrollwrap { height: auto; }
  /* de lijst is een la: altijd zijn volle hoogte, vast aan de onderkant van zijn rij die groeit, dus de onderrand van de lijst is in elk beeld de bovenkant van de kaart (ronde 22) */
  .vk-kiezer { position: absolute; inset: auto 0 0 0; height: var(--vk-lijst); grid-template-rows: auto minmax(0, 1fr); padding: var(--listings-pad, var(--vl-rem)); background: var(--vk-paneel); border-bottom: 1px solid var(--listings-line, var(--_colors---swatch--grey)); transform: none; transition: visibility 0s .9s; }
  .vk.is-kiezer .vk-kiezer { transform: none; transition: none; }
  .vk.is-groot > .vk-zoom { position: relative; inset: auto; grid-area: 3 / 1; margin: calc(var(--vl-rem) * .5); }   /* in het vlak van het eiland, niet over de pillen */
  .vk-zoom { transition: opacity .2s var(--vl-zacht), visibility 0s; }
  .vk.is-kiezer .vk-zoom { opacity: 0; visibility: hidden; transition: opacity .2s var(--vl-zacht), visibility 0s .2s; }   /* de zijbalk dekt het eiland: de zoomknoppen gaan even weg */
  .vk-knop { padding: .65em .8em; font-size: var(--_paragraphs---paragraph-s--font-size); line-height: 1.2; }   /* 18-10: papa's xs is op 320 maar 8 px; s is de maat van Weet ik nog niet; de 1.2 van de basisregel ging verloren door font: inherit */
  @media (max-width: 359px) { .vk .vk-knop { padding-block: .8em; } }   /* 320: het tikvlak blijft 28 px */
  @media (max-height: 720px) { .vk-knop { padding: .65em .7em; }   /* de hoogte blijft: met de grotere letter houdt dat het tikvlak op 28 px (320 x 568) */ .vk-pillen, .vk-gebieden { gap: .4em; } .vk.is-groot .vk-doosjes { min-height: calc(var(--vl-rem) * 7); } .vk.is-groot { --vk-zij-p: 100%; --vk-lijst: calc(var(--vl-rem) * 12); } }   /* op een laag scherm (375 x 667: het eiland is 176 px) zou 72 % maar één rij laten zien: dan neemt de lijst het hele eiland, dat even ver wegschuift */
}
html[data-ssn-motion="reduced"] .vk-doos, html[data-ssn-motion="reduced"] .vk-knop, html[data-ssn-motion="reduced"] .vk-zoomknop,
html[data-ssn-motion="reduced"] .kk-zweef > g, html[data-ssn-motion="reduced"] .vk-naam { transition: none; }
html[data-ssn-motion="reduced"] .vk-gebieden.is-in .vk-knop { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vk-gebieden.is-in .vk-knop { animation: none; } html:not([data-ssn-motion="full"]) .kk-zweef > g, html:not([data-ssn-motion="full"]) .vk-naam { transition: none; } }
html[data-ssn-motion="reduced"] .vk-kiezer, html[data-ssn-motion="reduced"] .vk.is-kiezer .vk-kiezer, html[data-ssn-motion="reduced"] .vk-zoom, html[data-ssn-motion="reduced"] .vk.is-kiezer .vk-zoom, html[data-ssn-motion="reduced"] .vk-doosjes { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vk-kiezer, html:not([data-ssn-motion="full"]) .vk.is-kiezer .vk-kiezer, html:not([data-ssn-motion="full"]) .vk-zoom, html:not([data-ssn-motion="full"]) .vk.is-kiezer .vk-zoom, html:not([data-ssn-motion="full"]) .vk-doosjes { transition: none; } }
html[data-ssn-motion="reduced"] .vk.is-groot .vk-gebieden::before, html[data-ssn-motion="reduced"] .vk.is-groot.is-kiezer .vk-gebieden::before { transition: none; }   /* het paneel van de zijbalk (ronde 19) staat er meteen */
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vk.is-groot .vk-gebieden::before, html:not([data-ssn-motion="full"]) .vk.is-groot.is-kiezer .vk-gebieden::before { transition: none; } }
/* ─── DE KEUZEKAARTEN VAN HET DOSSIER (Dévin 10-10 "meer visuele vragen", 16-10 "strak, in mijn lijnstijl") ─────────────────────────────────────
   Eén kaart voor elke vraag met antwoorden: volledig navy (--_colors---swatch--black, geen lichtere vulling en geen verloop), een rand van 1px in het grijs van de site, het
   antwoord linksonder, de aanduiding rechtsboven. Rondje = één keuze, vierkantje (zelfde maat, de 4px-radius) = meer keuzes (data-vl-meer op de vraag). Bij zweven licht alleen de
   rand op: geen schaal, geen draai, geen zoom, en geen kaart die binnenkomt (Dévin 16-10: "je moet minder inkomende en hover animaties"). Wat binnenkomt is alleen het beeld in de kaart, één keer
   als het antwoordblok verschijnt (.vl-scherm__keuzes.is-in, gezet door vraagscherm.js) en rustig (Dévin 17-10: "die svg's hadden een inkomende animatie en dat vond ik juist heel vet, breng dat terug",
   "hou het alleen subtiel"): de lijntekeningen tekenen in, de staafjes groeien, de lijnvlakken komen uit hun hoek. Eén tussenruimte voor elk raster
   (--_sizes---size--8px, Dévin: "fix de overige gabs"). Markup: lib/vragenlijst.mjs keuzeKaart(); de lijnen: lib/lijnvlak.mjs. Hoogte per apparaat: --vl-kaart-h. Minder beweging
   (html[data-ssn-motion="reduced"], dat prefs.mjs ook voor de computerinstelling zet) laat alles meteen staan: de regels met beweging hebben allemaal html:not([data-ssn-motion="reduced"]) vooraan. */
.vl-scherm__keuzes:has(.vl-tegels--type, .vl-tegels--bedrag, .vl-tegels--kaart) { max-width: calc(var(--vl-rem) * 62); }
.vl-scherm__keuzes .vl-tegels--type, .vl-scherm__keuzes .vl-tegels--bedrag, .vl-scherm__keuzes .vl-tegels--kaart { gap: var(--_sizes---size--8px); }
.vl-scherm__keuzes .vl-tegels--type, .vl-scherm__keuzes .vl-tegels--bedrag { --vl-kaart-h: clamp(calc(var(--vl-rem) * 8), calc(100dvh - calc(var(--vl-rem) * 32)), calc(var(--vl-rem) * 18)); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.vl-scherm__keuzes .vl-tegels--bedrag { --vl-kaart-h: clamp(calc(var(--vl-rem) * 7.5), calc(100dvh - calc(var(--vl-rem) * 34)), calc(var(--vl-rem) * 15)); }
@media (max-width: 767px) {
  .vl-scherm__keuzes .vl-tegels--type, .vl-scherm__keuzes .vl-tegels--bedrag { grid-template-columns: repeat(2, minmax(0, 1fr)); --vl-kaart-h: clamp(calc(var(--vl-rem) * 5.5), calc((100dvh - calc(var(--vl-rem) * 31)) / 2), calc(var(--vl-rem) * 14)); }
}
.vl-scherm__keuzes .vl-kaart { position: relative; display: block; overflow: hidden; height: var(--vl-kaart-h); min-height: 0; padding: 0; text-align: left; isolation: isolate;
  background: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px);
  transition: border-color .25s var(--vl-zacht); }
.vl-scherm__keuzes .vl-kaart:hover, .vl-scherm__keuzes .vl-kaart:focus-visible { border-color: var(--_colors---swatch--beige); }
.vl-scherm__keuzes .vl-kaart:active { transform: none; }   /* de knop van het filter krimpt bij indrukken (.ssnf-segbtn:active): de kaart niet */
/* een kaart met een huis uit je top 3 krijgt een lichtere rand (Dévin 12-10) */
.vl-scherm__keuzes .vl-kaart.is-top3 { border-color: rgba(235, 227, 216, .45); }
.vl-scherm__keuzes .vl-kaart[aria-pressed="true"] { background: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); border-color: var(--_colors---swatch--beige); box-shadow: inset 0 0 0 1px var(--_colors---swatch--beige); }
.vl-kaart__tekst { position: absolute; left: .95em; right: .95em; bottom: .85em; z-index: 2; display: grid; gap: .25em; }
.vl-kaart__t { font-size: max(var(--_paragraphs---paragraph-s--font-size), 1.1em); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.vl-kaart__n { font-size: max(var(--_paragraphs---paragraph-xs--font-size), .9em); letter-spacing: .04em; opacity: .7; font-variant-numeric: tabular-nums; }
/* de aanduiding rechtsboven: een rondje met een navy vulling (Dévin 16-10: "de rondjes die de checkbox voorstellen in elke box moet navy achtergrond hebben"), oranje met een vinkje
   als de kaart gekozen is, net als het vinkvak van het filter. Bij een vraag met meer antwoorden een vierkantje van dezelfde maat. */
/* de basis is ook die van de doosjes van het eiland (V-01, 86-vragenlijst-kaart.css): die blijft zoals hij was; de kaarten hieronder krijgen de grijze rand en de navy vulling */
.vl-kaart__vink { position: absolute; top: .7em; right: .7em; z-index: 3; box-sizing: border-box; width: 1.7em; height: 1.7em; padding: .38em; border-radius: 50%; border: 1px solid rgba(235, 227, 216, .55); background: rgba(42, 36, 32, .45);
  fill: none; stroke: var(--ssn-surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16 17; stroke-dashoffset: 16; transition: background .25s var(--vl-zacht), border-color .25s var(--vl-zacht), stroke-dashoffset .35s var(--vl-uit); }
.vl-kaart .vl-kaart__vink { border-color: var(--_colors---swatch--grey); background: var(--_colors---swatch--black); }
/* het gat van 17 (niet 16): bij een gat dat precies even lang is als het vinkje begint aan het eind een streepje van lengte nul, en WebKit tekent daar de ronde dop van, een stipje in elk leeg rondje (iPhone, 12-10) */
.vl-scherm__keuzes[data-vl-meer] .vl-kaart .vl-kaart__vink { border-radius: var(--_layout---border-radius--4px); }
.vl-kaart[aria-pressed="true"] .vl-kaart__vink { background: var(--ssn-accent); border-color: var(--ssn-accent); stroke-dashoffset: 0; }   /* gekozen: geen randje om het oranje (Dévin 28-10), zoals de doosjes (86) en de brug (58) */
.vl-kaart__beeld { position: absolute; inset: 0; z-index: 0; background: var(--_colors---swatch--black); }

/* ─── HET LIJNVLAK (kopen of huren V-00, het gebruik V-07, en Je plannen; lib/lijnvlak.mjs) ───
   Dévins ontwerp (16-10, gemeten): 1px grijze lijnen onder 45°, 6,1225 px uit elkaar langs een rij, vanuit een hoek van de kaart. De lijnen lopen gewoon onder de tekst door. */
.vl-lijnsprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vl-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; --vl-dur: 1.4s; }   /* de schuif begint als de kaart er staat (--vl-na na de getypte kop) en loopt in de curve van de site, zodat je hem echt ziet bewegen (Dévin 17-10, avond: "met nadruk op de lijn animaties") */
.vl-lijnen svg { overflow: visible; }
.vl-lijnen__l { fill: none; stroke: var(--_colors---swatch--grey); stroke-width: 1; }
.vl-lijnen__vlak { fill: var(--_colors---swatch--black); stroke: none; }
/* Het lijnvlak komt één keer binnen als het blok verschijnt (Dévin 17-10: "animeer deze patronen een beetje maar zorg dat je nooit uiteindes van de lijnen ziet ... rechte lijnen omhoog,
   diagonale lijnen uit de hoek dat ze op staan, en als er meerdere lijnen op elkaar staan moet dat pakket met de dominante set meebewegen en zelf ook uit zijn hoek groeien. maak dit heel sleek en netjes
   maar hou het minimaal en rustig"). Elke set is een eigen <svg class="vl-lijnen vl-lijnen--SOORT"> (lib/lijnvlak.mjs) en komt binnen met een clip-path waarvan de rand PARALLEL aan zijn lijnen loopt:
   een lijn is er dus helemaal of niet, nooit half, en er is geen moment met een los uiteinde in de kaart (geen stroke-dashoffset). Stijg ("/", hoek linksonder) en daal ("\", hoek linksboven)
   groeien weg van hun hoek, de rechte banden groeien weg van hun rand (onder omhoog, boven omlaag). De maten komen uit de kaart zelf (container-type op het beeld: cqw en cqh), niet uit px.
   Bij KOPEN (kruis) is de stijgset de dominante: de daalset groeit tegelijk, in dezelfde tijd en met dezelfde curve, uit zíjn hoek (linksboven), en het vlak ertussen staat stil (zelfde kleur als
   de kaart). De sprite is 1200 lang (de grootste kaart is 547 × 320) en staat niet in beweging: de dekking van de kaart verandert nooit, alleen de rand van de clip. Een marge van .25em (--_sizes---size--4px) zorgt dat de eerste stijglijn
   er bij de start nog niet doorheen schemert. Per kaart een kleine stagger (--vl-vertr), .85 s, de curve --vl-uit. */
.vl-kaart__beeld--vlak, .vl-kaart__plan { container-type: size; }
.vl-tegels > :nth-child(2) { --vl-vertr: .07s; }
.vl-tegels > :nth-child(3) { --vl-vertr: .14s; }
.vl-tegels > :nth-child(4) { --vl-vertr: .21s; }
.vl-lijnen--stijg { clip-path: polygon(0 0, calc(100cqh + 100cqw) 0, 100cqw 100cqh, 0 100cqh); }
.vl-lijnen--daal { clip-path: polygon(0 0, 100cqw 0, calc(100cqw + 100cqh) 100cqh, 0 100cqh); }   /* de rustpositie is de eindstand van de animatie (zo loopt hij van de ene polygon naar de andere); hij dekt de hele kaart */
/* .vl-lijnen--daal-kruis heeft geen eigen knip (19-10): het vlak achter de stijglijnen dekt de daallijnen af, precies op de eerste stijglijn, ook als die door de hoek van het labelvak loopt (--vl-kruis-x, R112). De oude knip stopte op 1x de hoogte en liet daar een lege driehoek (Dévin 19-10: "waarom missen er dan vaak lijntjes bij de blokken waar de twee richtingen elkaar treffen"). */
.vl-lijnen--onder { clip-path: inset(calc((1 - var(--vl-b, 1)) * 100%) 0 0 0); }   /* de band zelf: het deel van de hoogte vanaf de onderrand, ook zonder beweging */
.vl-lijnen--boven { clip-path: inset(0 0 calc((1 - var(--vl-b, 1)) * 100%) 0); }
/* De lijnen SCHUIVEN binnen vanuit hun hoek (Dévin 17-10, avond: "ik bedoelde een SCHUIF animatie VANUIT de hoek niet naar de hoek, nu groeit hij door de lijnen zichtbaar te maken ... lijnen moeten altijd tegen
   een eindlijn komen, dus alles moet dan mee animeren"). Het vlak van elke set (de clip hierboven) staat stil; de lijnen zelf schuiven loodrecht op hun richting naar hun plek: stijg ("/") vanuit de hoek
   rechtsonder, daal ("\") vanuit de hoek rechtsboven, de rechte banden vanaf hun rand. Elke lijn loopt dus de hele tijd van rand tot rand: er verschijnt nooit een lijn ineens, en er is nooit een los
   uiteinde (de beginpunten liggen buiten de kaart). Bij KOPEN schuift het navy vlak mee met de stijglijnen, zodat de daallijnen altijd tegen de eerste stijglijn stoppen. De afstand is precies tot buiten
   de verste hoek (stijg: deel x breedte / 2 langs elke as, daal: de halve breedte). Het begint pas als de kaarten in beeld komen, dus na de getypte kop (--vl-wacht, vraagscherm.js), niet bij het openen
   van de vraag: daarvoor liep hij onzichtbaar af en zag je hem alleen als je terugging. */
.vl-lijnen { --vl-sa: calc((var(--vl-deel, 1) * 100cqw - var(--vl-kruis-x, 0px) + 100cqh) / 2 + 1px); --vl-da: calc((100cqw + 100cqh) / 2 + 1px); --vl-schuif: var(--vl-zacht); }   /* 18-10: (breedte + hoogte) / 2 langs elke as: dan staat bij de start elke lijn buiten de kaart en schuift het hele patroon vanuit de hoek binnen (Dévin: "niet volledig vanuit de hoek"); de zachte curve: "iets minder agressief" */
.vl-lijnen--stijg .vl-lijnen__l, .vl-lijnen--vlak .vl-lijnen__vlak { transform: translate(var(--vl-kruis-x, 0px), 0); }   /* KOPEN: de eerste stijglijn door de hoek rechtsboven van het labelvak (vraagscherm.js vakMaat) */
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) :is(.vl-lijnen--stijg .vl-lijnen__l, .vl-lijnen--vlak .vl-lijnen__vlak) { transform: translate(calc(var(--vl-kruis-x, 0px) + var(--vl-sa)), var(--vl-sa)); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) :is(.vl-lijnen--daal, .vl-lijnen--daal-kruis) .vl-lijnen__l { transform: translate(var(--vl-da), calc(0px - var(--vl-da))); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) .vl-lijnen--onder { transform: translateY(calc(var(--vl-b, 1) * 100% + 1px)); }   /* 18-10: de band schuift als geheel, met zijn rand (Dévin: "schuift niet als geheel") */
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) .vl-lijnen--boven { transform: translateY(calc(-1 * var(--vl-b, 1) * 100% - 1px)); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in :is(.vl-lijnen--stijg .vl-lijnen__l, .vl-lijnen--vlak .vl-lijnen__vlak) { animation: vl-schuif-stijg var(--vl-dur) var(--vl-schuif) calc(var(--vl-wacht, 0s) + var(--vl-na, .25s) + var(--vl-vertr, 0s)) backwards; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in :is(.vl-lijnen--daal, .vl-lijnen--daal-kruis) .vl-lijnen__l { animation: vl-schuif-daal var(--vl-dur) var(--vl-schuif) calc(var(--vl-wacht, 0s) + var(--vl-na, .25s) + var(--vl-vertr, 0s)) backwards; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .vl-lijnen--onder { animation: vl-schuif-onder var(--vl-dur) var(--vl-schuif) calc(var(--vl-wacht, 0s) + var(--vl-na, .25s) + var(--vl-vertr, 0s)) backwards; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .vl-lijnen--boven { animation: vl-schuif-boven var(--vl-dur) var(--vl-schuif) calc(var(--vl-wacht, 0s) + var(--vl-na, .25s) + var(--vl-vertr, 0s)) backwards; }
@keyframes vl-schuif-stijg { 0% { transform: translate(calc(var(--vl-kruis-x, 0px) + var(--vl-sa)), var(--vl-sa)); } }
@keyframes vl-schuif-daal { 0% { transform: translate(var(--vl-da), calc(0px - var(--vl-da))); } }
@keyframes vl-schuif-onder { 0% { transform: translateY(calc(var(--vl-b, 1) * 100% + 1px)); } }
@keyframes vl-schuif-boven { 0% { transform: translateY(calc(-1 * var(--vl-b, 1) * 100% - 1px)); } }
.vl-scherm__keuzes .vl-tegels--vlak { --vl-kaart-h: clamp(calc(var(--vl-rem) * 8), calc(100dvh - calc(var(--vl-rem) * 32)), calc(var(--vl-rem) * 18)); }
/* de tekst in zijn ontwerp: de naam 1.2em (hoofdletters 9 px hoog op 1440), de regel eronder 1em in hoofdletters */
.vl-kaart--vlak .vl-kaart__tekst { gap: calc((var(--_sizes---size--2px) + var(--_sizes---size--4px)) / 2); }   /* gemeten: tussen de twee regels 8 px, zoals in het ontwerp */
.vl-kaart--vlak .vl-kaart__t { font-size: 1.2em; }
.vl-kaart--vlak .vl-kaart__n { font-size: 1em; text-transform: uppercase; }
/* Het labelvak (Dévin 17-10, zijn ontwerp van KOPEN/HUREN en "Mag het nog in aanbouw zijn?": "de boxxen om de tekst in de boxxen moeten speciaal en goed aanvoelen", "de lijnen moeten altijd matchen
   met de hoeken"): het antwoord staat in een eigen vak in de hoek linksonder. Het vak deelt de linker- en de onderrand met de kaart en heeft zelf alleen een rand boven en rechts, in de kleur van de kaartrand
   (inherit: bij zweven en gekozen gaat hij mee, met dezelfde overgang), zodat zijn lijnen precies op de rand van de kaart aansluiten. Het is navy: het lijnpatroon stopt ertegen. Breedte zoals in zijn
   ontwerp (190 van 485 px, 39 %), en breder als de tekst dat vraagt. De hoek linksonder volgt de ronding van de kaart. Niet op de tekeningen van V-03 (Dévin 17-10, later: "niet overal nodig"). */
.vl-scherm__keuzes :is(.vl-kaart--vlak, .vl-kaart--keuze) > .vl-kaart__tekst { left: 0; right: auto; bottom: 0; box-sizing: border-box; width: max-content; min-width: 39%; max-width: calc(100% - 3em);
  padding: .85em 1.6em .85em .95em; background: var(--_colors---swatch--black); border: 0 solid; border-color: inherit; border-width: 1px 1px 0 0;
  border-radius: 0 var(--_layout---border-radius--4px) 0 calc(var(--_layout---border-radius--4px) - 1px); transition: none; }   /* rechtsboven de radius van de kaart (Dévin 17-10, later) */
/* De lijn van het vak erft de kleur van de kaartrand die zelf overgaat; met een eigen overgang erbovenop liep het vak achter (Dévin 17-10, avond: "de box om de tekst is niet synchroon aan de border").
   Zonder eigen overgang volgt het vak de rand beeld voor beeld. Overal dezelfde letter en ruimte: de naam 1,2 em en de regel eronder 1 em, ook in Je plannen. Wordt het vak breder dan twee derde
   van de kaart, dan loopt het over de hele breedte (vraagscherm.js vakMaat zet .is-vakvol): een smalle strook naast het vak oogt als een fout. */
.vl-scherm__keuzes .vl-kaart.is-vakvol > .vl-kaart__tekst { width: 100%; max-width: none; border-right-width: 0; border-radius: 0 0 calc(var(--_layout---border-radius--4px) - 1px) calc(var(--_layout---border-radius--4px) - 1px); }
/* gekozen blijft de lijn van het vak dun: alleen de kleur gaat mee (Dévin 17-10, later: "de box om de tekst moet niet dik") */
.vl-scherm__keuzes :is(.vl-kaart--vlak, .vl-kaart--keuze)[aria-pressed="true"] { box-shadow: none; }   /* en de kaart zelf ook één lijn, zoals in zijn ontwerp: zo sluiten de lijnen van het vak op de rand aan */
@media (max-width: 767px) {
  /* V-03 op de telefoon (Dévin 17-10, avond: "omdat de lijn kunsten hier lager afgehakt zijn valt de tekst op de afbeeldingen terwijl desktop ze er netjes onder zet, dus voor mobiel moet er een tekst blok
     komen"): de tekst in een navy blok over de hele breedte onderin, met de lijn van de kaart erboven; de tekening stopt ertegen. */
  .vl-scherm__keuzes .vl-kaart--lijn > .vl-kaart__tekst { left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: .85em 1.6em .85em .95em; background: var(--_colors---swatch--black);
    border: 0 solid; border-color: inherit; border-top-width: 1px; border-radius: 0 0 calc(var(--_layout---border-radius--4px) - 1px) calc(var(--_layout---border-radius--4px) - 1px); }
}
/* Gekozen wordt het beeld beige (Dévin 17-10: "de lijn kunsten en svg's ... wanneer actief een beige kleur krijgen"): de lijnen van het lijnvlak, wat eromheen staat in een tekening, de kavel en de
   palen, en de staafjes van het bedrag. Oranje is alleen voor het vinkje. Het rondje of vierkantje houdt zijn rand ("de select cirkels en boxxen moeten hun border houden"): beige, zoals de kaart. */
.vl-lijnen__l { transition: stroke .25s var(--vl-zacht); }
.vl-scherm__keuzes .vl-kaart[aria-pressed="true"] .vl-lijnen__l { stroke: var(--_colors---swatch--beige); }
/* Zweven maakt ook alle lijnen beige, tegelijk en in de tijd van de rand (Dévin 17-10, avond: "de lijnen moeten OOK beige worden bij hover, dus alle lijnen worden tegelijk beige") */
.vl-lijnen__l, .lk .lk-b, .lk .lk-kavel, .vl-bars i { transition: stroke .25s var(--vl-zacht), opacity .25s var(--vl-zacht), background-color .25s var(--vl-zacht); }
@media (hover: hover) and (pointer: fine) {
  .vl-scherm__keuzes .vl-kaart:hover .vl-lijnen__l { stroke: var(--_colors---swatch--beige); }
  .vl-scherm__keuzes .vl-kaart--lijn:hover .lk-b { stroke: var(--_colors---swatch--beige); opacity: .75; }
  .vl-scherm__keuzes .vl-kaart--lijn:hover .lk-kavel { stroke: var(--_colors---swatch--beige); }
  .vl-scherm__keuzes .vl-kaart--bedrag:hover .vl-bars i { background: var(--_colors---swatch--beige); }
  .vl-scherm__keuzes .vl-kaart:not([aria-pressed="true"]):hover .vl-kaart__vink { border-color: var(--_colors---swatch--beige); }   /* 19-10: ook het cirkeltje wordt beige bij zweven, samen met de lijnen en de rand */
}
@media (max-width: 767px) {
  .vl-scherm__keuzes .vl-tegels--vlak { grid-template-columns: repeat(2, minmax(0, 1fr)); --vl-kaart-h: clamp(calc(var(--vl-rem) * 7), calc((100dvh - calc(var(--vl-rem) * 26)) / 1.4), calc(var(--vl-rem) * 16)); }
  /* drie dozen (het gebruik): onder elkaar over de hele breedte */
  .vl-scherm__keuzes .vl-tegels--vlak:has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); --vl-kaart-h: clamp(calc(var(--vl-rem) * 4.5), calc((100dvh - calc(var(--vl-rem) * 27)) / 3), calc(var(--vl-rem) * 8)); }
}

/* ─── HET TYPE (V-03): de lijntekening per soort (Dévin 12-10, lib/lijnkunst.mjs), dezelfde lijntaal als de eilanden van V-01 ───
   lk-a = het pand zelf (beige), lk-b = wat eromheen staat (grijs), lk-c = fijne details. lk-vlak vult een vorm met de kaartkleur, zodat wat erachter staat wegvalt. De tekening is groter
   dan de kaart; de kaart snijdt hem af. Hij staat er meteen, zonder intekenen en zonder zoom. */
.vl-kaart__beeld--lijn { --lk-vlak: var(--_colors---swatch--black); }
.lk { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lk :is(path, rect, circle, polygon) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }   /* pathLength="1" op elke vorm (lijnkunst.mjs): de dash is de hele lijn, zodat hij kan intekenen */
.lk .lk-a { stroke: var(--_colors---swatch--beige); stroke-width: 1.5; opacity: .92; }
.lk .lk-b { stroke: var(--_colors---swatch--grey); stroke-width: 1; opacity: .6; }
.lk .lk-c { stroke: var(--_colors---swatch--beige); stroke-width: .75; opacity: .45; }
.lk .lk-vlak { fill: var(--lk-vlak); }
.lk .lk-kavel { fill: var(--lk-vlak); stroke-dasharray: 7 5; stroke-width: 1.8; }
.lk .lk-paal { fill: var(--_colors---swatch--beige); stroke: none; }
.lk .lk-b { transition: stroke .25s var(--vl-zacht), opacity .25s var(--vl-zacht); }
.vl-kaart--lijn[aria-pressed="true"] .lk-b { stroke: var(--_colors---swatch--beige); opacity: .75; }
.vl-kaart--lijn[aria-pressed="true"] .lk-kavel { stroke: var(--_colors---swatch--beige); }
.vl-kaart--lijn[aria-pressed="true"] .lk-paal { fill: var(--_colors---swatch--beige); }
/* De lijnen tekenen in (zoals vóór 16-10, Dévin 17-10: "dat vond ik juist heel vet, breng dat terug"): het pand eerst, wat eromheen staat .25 s later, de details .5 s; de kavel en de palen
   komen erna zacht op. Eén keer, bij het binnenkomen van het blok; zonder is-in staan de lijnen nog niet getekend, zodat er geen flits is tussen tonen en beginnen. */
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) .lk :is(path, rect, circle, polygon):not(.lk-paal):not(.lk-kavel) { stroke-dashoffset: 1; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) .lk :is(.lk-kavel, .lk-paal) { opacity: 0; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .lk :is(path, rect, circle):not(.lk-paal) { animation: lk-teken 1.6s var(--vl-uit) var(--vl-wacht, 0s) backwards; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .lk .lk-b { animation-delay: calc(var(--vl-wacht, 0s) + .25s); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .lk .lk-c { animation-delay: calc(var(--vl-wacht, 0s) + .5s); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .lk :is(.lk-kavel, .lk-paal) { animation: lk-op .8s var(--vl-zacht) calc(var(--vl-wacht, 0s) + .6s) backwards; }
@keyframes lk-teken { 0% { stroke-dashoffset: 1; } }
@keyframes lk-op { 0% { opacity: 0; } }
/* "Iets anders" groeit naar de lijst Type vastgoed van het filter (Dévin 16-10). De doos is de kaart: de knop bovenin is even hoog als de kaarten ernaast, de lijst eronder
   (de rijen en het vinkvak van het filter, .ssnf-row en .ssnf-cbx in 55-filter-ui.css). Gekozen: de doos is zo hoog als knop en lijst samen; de andere kaarten blijven staan. */
.vl-scherm__keuzes .vl-kaart--anders { height: auto; min-height: var(--vl-kaart-h); border-style: dashed; border-color: rgba(235, 227, 216, .35); }
.vl-scherm__keuzes .vl-kaart--anders:hover, .vl-scherm__keuzes .vl-kaart--anders:has(> .vl-kaart__kop:focus-visible) { border-color: var(--_colors---swatch--beige); }
.vl-scherm__keuzes .vl-kaart--anders:has(> .vl-kaart__kop[aria-pressed="true"]) { border-style: dashed; border-color: var(--_colors---swatch--beige); box-shadow: none; }   /* open blijft de rand gestippeld en enkel (Dévin 17-10, avond) */
/* open is Iets anders zelf geen keuze meer maar het vak met de lijst (Dévin 17-10, avond: "dan moet de iets anders zelf geen select optie zijn maar de lijst met opties erin"): geen rondje in de kop */
.vl-scherm__keuzes .vl-kaart--anders > .vl-kaart__kop[aria-pressed="true"] .vl-kaart__vink { display: none; }
.vl-anders .ssnf-row.is-nul, .vl-anders__groep.is-nul { display: none; }   /* een soort zonder aanbod voor je keuzes staat er niet (Dévin 17-10, avond: "de 0 resultaten weg") */
.vl-scherm__keuzes .vl-kaart--anders > .vl-kaart__kop { position: relative; display: grid; place-items: center; align-content: center; gap: .9em; width: 100%; height: var(--vl-kaart-h); padding: 0; border: 0; border-radius: 0; background: none; color: inherit; text-align: center; }
.vl-scherm__keuzes .vl-kaart--anders > .vl-kaart__kop[aria-pressed="true"] { background: none; color: inherit; box-shadow: none; }
.vl-kaart--anders > .vl-kaart__kop:focus-visible { outline: none; }
/* een plus in dezelfde lijn als de tekeningen ernaast: de vierde kaart hoort bij de familie */
.vl-kaart--anders > .vl-kaart__kop::before { content: ''; width: 2.4em; height: 2.4em; border: 1px dashed rgba(235, 227, 216, .45); border-radius: 50%;
  background: linear-gradient(var(--_colors---swatch--beige), var(--_colors---swatch--beige)) center / 40% 1.5px no-repeat, linear-gradient(var(--_colors---swatch--beige), var(--_colors---swatch--beige)) center / 1.5px 40% no-repeat; opacity: .7; }
.vl-kaart--anders > .vl-kaart__kop .vl-kaart__tekst { position: static; justify-items: center; text-align: center; }
/* gekozen: de kop wordt één regel bovenin (de naam links, de aanduiding rechts, zoals elke kaart), de lijst staat eronder. Op een groot scherm past hij in de hoogte van de kaarten
   ernaast; op de telefoon groeit de doos naar beneden en schuift de pagina mee. */
.vl-scherm__keuzes .vl-kaart--anders > .vl-kaart__kop[aria-pressed="true"] { place-items: stretch; align-content: start; height: auto; padding: .85em 3em .85em .95em; text-align: left; }
.vl-kaart--anders > .vl-kaart__kop[aria-pressed="true"]::before { display: none; }
.vl-kaart--anders > .vl-kaart__kop[aria-pressed="true"] .vl-kaart__tekst { justify-items: start; text-align: left; }
.vl-kaart--anders .vl-anders { display: block; margin: 0; padding: .3em .95em .6em; border-top: 1px solid var(--_colors---swatch--grey); }
.vl-kaart--anders .vl-anders[hidden] { display: none; }
.vl-scherm__keuzes .vl-kaart--anders .vl-anders .ssnf-row { min-height: 2.25em; }   /* de ruimte van het filter (Dévin 17-10, avond: "de lijst gewoon normale gabs"); de 44px van 82-vragenlijst.css gaf een gat van een halve rij tussen elke soort */
/* Wonen of bedrijf, en alleen wat er is (Dévin 17-10: "er zitten ook checkboxxes bij zonder resultaat en dat leidt tot fouten" en "nu kan je particulier als commercieel samen selecteren"). Twee groepen met een
   kopje zoals het filter (.ssnf-fl, de eyebrow van Slaapkamers en Badkamers), de rijen met het streepje van de boom. Een rij zonder aanbod voor jouw keuzes, en elke rij van de andere groep zodra je
   in de ene kiest, is gedimd en niet te kiezen: dezelfde stijl als een optie zonder resultaat in het filter (.ssnf-row.is-zero, 55-filter-ui.css). Niet .is-zero zelf: css/78 haalt die rij weg. */
.vl-anders__groep + .vl-anders__groep { margin-top: .9em; }
.vl-anders__kop { margin: .6em 0 .25em; transition: opacity .25s var(--vl-zacht); }
.vl-anders__groep.is-uit .vl-anders__kop { opacity: .34; }
.vl-anders .ssnf-row { transition: opacity .25s var(--vl-zacht); }
.vl-anders .ssnf-row.is-uit { opacity: .34; pointer-events: none; cursor: default; }
.vl-anders .vl-anders__uitleg { margin: .9em 0 0; text-align: left; font-size: var(--_paragraphs---paragraph-xs--font-size); line-height: 1.5; opacity: .7; white-space: normal; }   /* .ssnf-help is nowrap: in de smalle kolom breekt de regel af */
.vl-anders .vl-anders__leeg { margin-top: .5em; }
.vl-anders .vl-anders__leeg[hidden] { display: none; }
/* Op een telefoon en een tablet staat Iets anders naast Grond in een kolom van 170 tot 190 px: de rijen met hun aantal en vinkvak passen daar niet (Restaurant / café brak af, het vinkvak viel buiten de
   doos). Gekozen krijgt de doos dan de hele rij; vanaf 560 px staan Wonen en Bedrijf naast elkaar, zodat de lijst niet tot onder in beeld doorloopt. Op een laptop past de kolom (243 px op 1440). */
@media (max-width: 1099px) {
  .vl-scherm__keuzes .vl-kaart--anders:has(> .vl-kaart__kop[aria-pressed="true"]) { grid-column: 1 / -1; }
}
@media (min-width: 560px) and (max-width: 1099px) {
  .vl-kaart--anders .vl-anders:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--vl-rem) * 2); align-items: start; }
  .vl-kaart--anders .vl-anders .vl-anders__groep + .vl-anders__groep { margin-top: 0; }
  .vl-kaart--anders .vl-anders .vl-anders__uitleg { grid-column: 1 / -1; }
}

/* ─── HET BEDRAG (V-04): de verdeling van de prijzen in het echte aanbod, per klasse (alle staafjes op dezelfde schaal) ───
   De staafjes zijn die van het prijsfilter op /nl/properties (.ssnf-histo span, 55-filter-ui.css: 1px, de grijze lijn, ronde tip, minstens 3px) en staan op de onderrand van de kaart. */
.vl-kaart--bedrag .vl-kaart__tekst { top: .85em; bottom: auto; right: 3em; }
.vl-bars { position: absolute; left: .95em; right: .95em; bottom: 0; height: 48%; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; }
.vl-bars i { position: relative; flex: 0 0 1px; width: 1px; background: var(--listings-line); min-height: 3px; border-radius: calc(var(--vl-rem) * 6.1875) calc(var(--vl-rem) * 6.1875) 0 0; transform-origin: 50% 100%; }
.vl-kaart--bedrag[aria-pressed="true"] .vl-bars i { background: var(--_colors---swatch--beige); }
/* De staafjes groeien vanaf de onderrand in (Dévin 17-10: "ook hier hadden de lijnen een hoogte groei inkomende animatie, hou het alleen subtiel"): kort, en elk staafje 14 ms na het vorige (24 per
   kaart: samen zo'n 1 s). Ook als je bij Huren van per jaar naar per maand wisselt komen ze weer binnen (questionnaire.js zet daarvoor is-wissel op de tak); een tweede keyframe met een andere naam
   laat de animatie opnieuw beginnen. */
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes:not(.is-in) .vl-bars i { transform: scaleY(0); opacity: 0; }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .vl-bars i { animation: vl-staaf .6s var(--vl-uit) backwards; animation-delay: calc(var(--vl-wacht, 0s) + var(--vl-vertr, 0s) + .1s + var(--i, 0) * 14ms); }
html:not([data-ssn-motion="reduced"]) .vl-scherm__keuzes.is-in .is-wissel .vl-bars i { animation-name: vl-staaf-b; }
@keyframes vl-staaf { 0% { transform: scaleY(0); opacity: 0; } }
@keyframes vl-staaf-b { 0% { transform: scaleY(0); opacity: 0; } }
/* Per jaar of per maand (huren): de kleine keuzeschakelaar (91). Hier alleen de plaats: midden boven de bedragkaarten, met ruimte eronder (Dévin 26-10: "ruimte onder"). */
.vl-scherm__keuzes .vl-per { margin: 0 auto var(--_sizes---size--32px); }

/* "Liever precies?" (Dévin 17-10): precies de sectie Prijs van het filter op /nl/properties (zelfde klassen, zelfde maten), als eigen blok midden onder de kaarten, zo breed als de filterzijbalk:
   gemeten op 1440 is dat 300 px bij een lettermaat van 15 px (20 em), en dat schaalt mee met de site (15 px = .9375 --vl-rem). Het klapt rustig open en dicht, hoogte en dekking, zonder sprong:
   een grid met één rij van 0fr naar 1fr (de inhoud staat in een vak dat zichzelf afknipt), met inert zolang hij dicht is, zodat niets in het blok focus krijgt. */
.vl-scherm__keuzes .vl-link[hidden] { display: none; }   /* "Liever precies?" hoort alleen bij kopen (data-vl-tak): .vl-link zet display:block (85) en liet hem bij huren staan, met een euro-schuif naast bedragen per jaar */
.vl-scherm__keuzes .vl-precies[data-vl-precies] { display: grid; grid-template-rows: 0fr; margin: 0; opacity: 0; visibility: hidden; text-align: left;
  transition: grid-template-rows .6s var(--vl-uit), opacity .3s var(--vl-zacht), visibility 0s .6s; }
.vl-scherm__keuzes .vl-precies[data-vl-precies].is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .6s var(--vl-uit), opacity .5s var(--vl-zacht) .1s, visibility 0s; }
/* open je het blok onderaan, dan scrolt het in beeld (questionnaire.js preciesOpen) boven de balk met de knoppen */
.vl-scherm__keuzes .vl-precies[data-vl-precies] { scroll-margin-bottom: calc(var(--vl-knop-onder, calc(var(--vl-rem) * 4.875)) + var(--vl-rem)); }
.vl-precies__in { min-height: 0; overflow: hidden; }
.vl-precies__blok { width: min(100%, 20em); margin: calc(var(--vl-rem) * .75) auto 0; font-size: calc(var(--vl-rem) * .9375); }
.vl-precies__kop { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding-bottom: .5em; }
html[data-ssn-motion="reduced"] .vl-scherm__keuzes .vl-precies[data-vl-precies] { transition: none; }

/* ─── EEN GETAL (V-12 slaapkamers, V-21 personen): het getal zelf groot in papa's schuine cijfer (.card-number op de homepage), beige (Dévin 16-10: "geen oranje cijfers maar beige") ─── */
.vl-scherm__keuzes .vl-tegels--kaart { grid-template-columns: repeat(var(--vl-n, 3), minmax(0, 1fr)); }
.vl-scherm__keuzes .vl-tegels--cijfer { --vl-kaart-h: clamp(calc(var(--vl-rem) * 6.5), calc(100dvh - calc(var(--vl-rem) * 36)), calc(var(--vl-rem) * 11)); }
.vl-kaart__cijfer { position: absolute; left: .55em; top: .4em; z-index: 1; font-family: var(--_fonts---fonts--alt-heading); color: var(--_colors---swatch--beige); font-style: italic; line-height: 1; font-variant-numeric: tabular-nums; }
.vl-kaart--cijfer .vl-kaart__cijfer { font-size: clamp(calc(var(--vl-rem) * 2.6), calc(var(--vl-kaart-h) * .42), calc(var(--vl-rem) * 4.4)); }

/* ─── JE PLANNEN (stap 3): het antwoord linksonder, geen volgnummer (Dévin 16-10: "niet met cijfers maar ook een soort lijnen structuur of gewoon leeg") ───
   Dévin koos uit drie richtingen de schaal (16-10): de lijnen groeien per antwoord, alleen bij oplopende antwoorden; de andere vragen blijven een lege navy kaart. */
.vl-scherm__keuzes .vl-tegels--keuze { --vl-kaart-h: clamp(calc(var(--vl-rem) * 6.5), calc(100dvh - calc(var(--vl-rem) * 38)), calc(var(--vl-rem) * 9.5)); }
.vl-kaart--keuze .vl-kaart__t { font-size: 1.2em; font-weight: 500; letter-spacing: .02em; text-transform: none; line-height: 1.3; }   /* dezelfde maat als de naam in elk labelvak (Dévin 17-10, avond: "zorg dat de font size en de padding consistent is") */
@media (max-width: 767px) {
  .vl-scherm__keuzes .vl-tegels--cijfer { grid-template-columns: repeat(2, minmax(0, 1fr)); --vl-kaart-h: clamp(calc(var(--vl-rem) * 5), calc((100dvh - calc(var(--vl-rem) * 31)) / 2), calc(var(--vl-rem) * 8)); }
  .vl-scherm__keuzes .vl-tegels--cijfer:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Je plannen op de telefoon (Dévin 17-10, avond: "hier is de font opeens heel klein. en er is geen tekst blok ... misschien kan het als je ze iets hoger maakt"): kaarten over de hele breedte, hoger, met
     hetzelfde labelvak en dezelfde letter als elke andere kaart. Daarvoor was het een rij van 3,75 rem met de tekst in 9,6 px zonder vak. */
  .vl-scherm__keuzes .vl-tegels--keuze { grid-template-columns: minmax(0, 1fr); --vl-kaart-h: calc(var(--vl-rem) * 5.5); }
}
html[data-ssn-motion="reduced"] .vl-scherm__keuzes .vl-kaart, html[data-ssn-motion="reduced"] .vl-kaart__vink, html[data-ssn-motion="reduced"] .vl-anders__kop, html[data-ssn-motion="reduced"] .vl-anders .ssnf-row { transition: none; }

/* ─── HET TEKSTVAK (V-14): een kader met strepen eromheen (Dévin 17-10, zijn ontwerp) ───
   "een veld eromheen, met diezelfde soort strepen, en dit veld heeft een vaste padding van het input veld af dat dus ook meegroeit met de inhoud. en er moet een placeholder komen en de input veld moet
   dezelfde stijl hebben als de rest van de slimme input velden met zo'n check als je het goed gedaan hebt." Het kader (1px grijs, de radius van de kaarten) staat op een vaste afstand (--vl-kader-p,
   34 px op 1440 zoals in zijn beeld) van het tekstvak; het tekstvak is een veld van stap 4 (papa's .form-input, het vinkje komt zodra er tekst staat, questionnaire.js) en groeit met zijn tekst tot een
   maximum, dus het kader groeit mee. De strepen: links vlak, boven drie vakken (\ , / , \), rechts \, onder /, op 45° naden die vanaf de hoeken van het veld lopen (zijn beeld). Alle lijnen zijn
   dezelfde twee roosters (\ en /) als de lijnvlakken van de kaarten (lib/lijnvlak.mjs lijnVeld); ze komen samen met een zachte opkomst binnen, geen sweep: een clip die over twee families loopt snijdt
   altijd de lijnen van één ervan. */
.vl-tekstvak { --vl-kader-p: calc(var(--vl-rem) * 2.125); }
.vl-scherm__keuzes:has(.vl-tekstvak) { max-width: calc(var(--vl-rem) * 34.25); }   /* 30 voor het veld (zoals tot nu toe) en 2 × 2,125 voor het kader eromheen */
.vl-kader { position: relative; box-sizing: border-box; width: calc(var(--vl-rem) * 30 + 2 * var(--vl-kader-p)); max-width: 100%; margin: 0 auto; padding: var(--vl-kader-p);
  border: 1px solid var(--_colors---swatch--grey); border-radius: var(--_layout---border-radius--4px); background: var(--_colors---swatch--black); }
.vl-kader__lijnen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vl-kader__groep { position: relative; }
.vl-lijnen--kader-t1 { clip-path: polygon(16% 0, 46% 0, calc(46% - var(--vl-kader-p)) var(--vl-kader-p), calc(16% + var(--vl-kader-p)) var(--vl-kader-p)); }
.vl-lijnen--kader-t2 { clip-path: polygon(46% 0, 70% 0, calc(70% + var(--vl-kader-p)) var(--vl-kader-p), calc(46% - var(--vl-kader-p)) var(--vl-kader-p)); }
.vl-lijnen--kader-t3 { clip-path: polygon(70% 0, 100% 0, calc(100% - var(--vl-kader-p)) var(--vl-kader-p), calc(70% + var(--vl-kader-p)) var(--vl-kader-p)); }
.vl-lijnen--kader-r { clip-path: polygon(100% 0, 100% 100%, calc(100% - var(--vl-kader-p)) calc(100% - var(--vl-kader-p)), calc(100% - var(--vl-kader-p)) var(--vl-kader-p)); }
.vl-lijnen--kader-b { clip-path: polygon(16% 100%, 100% 100%, calc(100% - var(--vl-kader-p)) calc(100% - var(--vl-kader-p)), calc(16% + var(--vl-kader-p)) calc(100% - var(--vl-kader-p))); }
/* het veld zelf: de stijl van de velden in stap 4 (papa's .form-input: navy, 1px grijs, radius 4px, 1.25em boven en onder, 3.5em rechts voor het vinkje); lettermaat 12 px op 1440 zoals daar */
.vl-scherm__keuzes .vl-kader__in { display: block; width: 100%; min-height: 0; max-height: calc(var(--vl-rem) * 15); resize: none; overflow-y: hidden; font-size: calc(var(--vl-rem) * .75); }
.vl-scherm__keuzes .vl-tekstvak > .ssnf-help { max-width: 100%; margin: .6em auto 0; width: calc(var(--vl-rem) * 30 + 2 * var(--vl-kader-p)); text-align: right; white-space: normal; }   /* .ssnf-help is nowrap: op een telefoon past de regel niet in één stuk */
.vl-scherm__keuzes .vl-kader__in { padding-right: 3.5em; }   /* ruimte voor het vinkje, ook op een telefoon (papa's .form-input zet daar 1em) */
@media (max-width: 767px) { .vl-tekstvak { --vl-kader-p: calc(var(--vl-rem) * 1.5); } }   /* op een telefoon een smallere rand, anders blijft er 290 px voor het veld over */
/* Het kader van V-14 staat stil: het is de achtergrond van het veld, geen kaart die binnenkomt (Dévin 18-10: "het input veld hoeft het niet"). De maat komt uit het kader zelf (container). */
.vl-kader__lijnen { container-type: size; }
/* In het veld, en zolang er tekst staat, wordt het kader beige: de lijnen en de rand, net als een gekozen kaart (Dévin 17-10, avond: "de lijn kunst eromheen moet dan ook beige worden en ze moeten beige
   BLIJVEN als er inhoud in het veld zit"). Het veld zelf krijgt bij focus papa's beige rand. */
.vl-kader { transition: border-color .25s var(--vl-zacht); }
.vl-kader:has(.vl-kader__in:focus), .vl-kader:has(.vl-kader__groep.is--success) { border-color: var(--_colors---swatch--beige); }
.vl-kader:has(.vl-kader__in:focus) .vl-lijnen__l, .vl-kader:has(.vl-kader__groep.is--success) .vl-lijnen__l { stroke: var(--_colors---swatch--beige); }
/* Actief (in het veld, of met inhoud) is alles beige (Dévin 19-10, "professioneel en clean"): het kader met zijn lijnen (hierboven), het binnenste vak en de tellerregel eronder. Boven het maximum is alleen
   het getal oranje, zoals de melding. */
.vl-scherm__keuzes .vl-kader__in { transition: border-color .25s var(--vl-zacht); }
.vl-scherm__keuzes .vl-kader__in:focus, .vl-scherm__keuzes .vl-kader__groep.is--success .vl-kader__in { border-color: var(--_colors---swatch--beige); }
.vl-scherm__keuzes .vl-tekstvak > .ssnf-help { transition: color .25s var(--vl-zacht), opacity .25s var(--vl-zacht); }
.vl-scherm__keuzes .vl-tekstvak:has(.vl-kader__in:focus) > .ssnf-help, .vl-scherm__keuzes .vl-tekstvak:has(.vl-kader__groep.is--success) > .ssnf-help { color: var(--_colors---swatch--beige); opacity: 1; }
.vl-tel.is-teveel { color: var(--ssn-accent); }
/* De woordlimiet (Dévin 19-10: "de woorden die we niet meetellen oranje maken ... in een soort split seconde bouncen die eruit"): questionnaire.js legt een echo over het veld (dezelfde letter, maat en
   rand, de tekst onzichtbaar) waarin alleen het stuk dat te veel is te zien is, in oranje. Zolang je typt staat het er oranje en telt de teller het mee (301, oranje, met de melding); 0,3 s na de laatste toets vervaagt en krimpt het (,4 s), daarna is de echo leeg en staat de teller weer beige op 300. Met Minder beweging alleen vervagen. */
.vl-scherm__keuzes .vl-kader__groep .form-field { position: relative; }
.vl-echo { position: absolute; z-index: 2; box-sizing: border-box; margin: 0; border-style: solid; border-color: transparent; color: transparent; white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; pointer-events: none; }   /* binnen het veld: een groot stuk dat je plakt scrolt daar doorheen (Dévin 19-10: "het moet wel overflow scroll binnen het input veld blijven") */
.vl-echo__in { will-change: transform; transition: none; }
.vl-echo.is-loop { background: var(--_colors---swatch--black); background-clip: padding-box; color: var(--_colors---swatch--beige); font-weight: inherit; }   /* tijdens het scrollen door een groot stuk dekt de echo de tekst eronder en toont zijn eigen: één geheel */
.vl-echo__weg { display: inline-block; color: var(--ssn-accent); background: var(--_colors---swatch--black); opacity: 0; transition: opacity .12s var(--vl-zacht); }
.vl-echo.is-aan .vl-echo__weg { opacity: 1; }
.vl-echo.is-uit .vl-echo__weg { animation: vl-weg .4s var(--vl-zacht) forwards; }
@keyframes vl-weg { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.85); } }   /* vervagen en krimpen, geen sprong (Dévin 19-10) */
html[data-ssn-motion="reduced"] .vl-echo.is-uit .vl-echo__weg { animation: vl-weg-stil .4s linear forwards; }
@media (prefers-reduced-motion: reduce) { html:not([data-ssn-motion="full"]) .vl-echo.is-uit .vl-echo__weg { animation: vl-weg-stil .4s linear forwards; } }
@keyframes vl-weg-stil { 0% { opacity: 1; } 100% { opacity: 0; } }
.vl-scherm__keuzes .vl-tekstvak > [data-vl-teveel] { width: calc(var(--vl-rem) * 30 + 2 * var(--vl-kader-p)); max-width: 100%; margin-inline: auto; }   /* onder de hulpregel, aan dezelfde kant */
.vl-scherm__keuzes .vl-tekstvak > [data-vl-teveel] .vl-melding__p { text-align: right; }
/* Een kaart zonder aanbod voor je eerdere keuzes (Dévin 17-10, vraagscherm.js aanbodBijwerken): gedimd zoals een lege rij in Iets anders, en niet te kiezen. */
.vl-kaart.is-uit { opacity: .34; pointer-events: none; cursor: default; }
/* =====================================================================
   88 · De voorwaarden (/nl/terms): de knop "Printen", de leden en de print-opmaak
   16-10 (Dévin): het concept van de klantvoorwaarden staat op papa's tekstpagina (build-nl.mjs, voorwaardenPagina).
   Artikel 13 belooft de voorwaarden "als bestand dat je kunt opslaan": de knop opent het printvenster (window.print),
   en daar staat alleen de tekst, donker op papier, zonder header, footer, knoppen of lagen van scripts.
   Alles hangt aan html[data-ssn-print-tekst], dat alleen deze pagina draagt.
   ===================================================================== */

/* De titel met rechts de versie en de knop "Printen" (Dévin 19-10 en 25-10): naast elkaar waar het past, anders schuiven versie en knop
   samen onder de titel (flex-wrap). Op tablet en telefoon staat de versie dan links en de knop rechts. Onder artikel 14 dezelfde rij.
   De h1 houdt papa's eigen maat; de rij neemt alleen zijn onderruimte over. */
.voorwaarden-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: var(--_sizes---size--40px);
  row-gap: var(--_sizes---size--40px);   /* onder de titel wat lucht tot versie en knop (Dévin 25-10) */
  margin-bottom: var(--_sizes---size--24px);   /* = papa's onderruimte van de h1 (24px, gemeten 19-10) */
}
.voorwaarden-kop > h1 {
  margin-bottom: 0;
}
.voorwaarden-printen {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: flex-end;
  column-gap: var(--_sizes---size--24px);
}
.legals-wrapper .rich-text-regular .voorwaarden-printen > .voorwaarden-versie {
  margin-bottom: 0;
  opacity: .6;   /* gedimd zoals de nummers (Dévin 25-10) */
}
.voorwaarden-printen > .btn-animate-chars {
  flex: none;
}
.voorwaarden-printen--onder {
  margin-top: var(--_sizes---size--40px);
}
/* Tot 991px (papa's tabletgrens) past de rij niet naast de titel (gemeten 25-10: 768 eronder, 992 ernaast): versie links, knop rechts. */
@media (max-width: 991px) {
  .voorwaarden-printen {
    justify-content: space-between;
  }
}
/* De knop Printen = de knop "Referentie bewaren" van de pandpagina (css/60-pandpagina.css, .pand-save-knop), gekopieerd (Dévin 25-10).
   Zelfde vakje (vlak + rand op één laag), zelfde spoor en zelfde vinkje; alleen staat de printer waar het plusje stond. De stand heet hier
   .is-klaar en niet aria-pressed: printen is een handeling, geen aan/uit. Na het printvenster gaat .is-klaar eraf en schuift de printer
   terug (geen min-streepje). */
.btn-animate-chars.voorwaarden-print-knop { display: inline-flex; -webkit-appearance: none; appearance: none; padding-top: 0; padding-bottom: 0; background: none; border: 0; }
.voorwaarden-print-knop .listing-card__save-ic { width: calc(.625em * 13 / 8); }
.voorwaarden-print-knop .voorwaarden-printer { width: calc(.625em * 13 / 8 * 1.15); }   /* de printer heeft lucht in zijn vak; zo oogt hij even groot als het plusje */
.voorwaarden-print-knop .button-icon_track, .btn-animate-chars.voorwaarden-print-knop:hover .button-icon_track { transform: translate(0, 0); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.voorwaarden-print-knop.is-klaar .button-icon_track, .btn-animate-chars.voorwaarden-print-knop.is-klaar:hover .button-icon_track { transform: translate(50%, 0); }
.voorwaarden-print-knop .button-icon { background-color: transparent; color: var(--ssn-surface); transition: color .6s cubic-bezier(.16, 1, .3, 1); }
.voorwaarden-print-knop .button-icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; background-color: #d4c6b912;
  transition: background-color .6s cubic-bezier(.16, 1, .3, 1), border-color .2s; }
.voorwaarden-print-knop .button-icon_track { position: relative; }   /* boven de laag */
.voorwaarden-print-knop:not(.is-klaar):hover .button-icon::before { border-color: rgba(235, 227, 216, .45); }
.voorwaarden-print-knop.is-klaar .button-icon { color: var(--_colors---swatch--black); }
.voorwaarden-print-knop.is-klaar .button-icon::before { background-color: var(--ssn-surface); }
.voorwaarden-print-knop .listing-card__save-mark path { fill: none; stroke: currentColor; stroke-width: 1.385; stroke-linecap: butt; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .34s cubic-bezier(.22, 1, .36, 1) .12s; }
.voorwaarden-print-knop.is-klaar .listing-card__save-mark path { stroke-dashoffset: 0; }
.voorwaarden-print-knop:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
html[data-ssn-motion="reduced"] .voorwaarden-print-knop .button-icon,
html[data-ssn-motion="reduced"] .voorwaarden-print-knop .button-icon::before,
html[data-ssn-motion="reduced"] .voorwaarden-print-knop .button-icon_track,
html[data-ssn-motion="reduced"] .voorwaarden-print-knop .listing-card__save-mark path { transition: none; }
/* Alle nummers een stap terug (Dévin 25-10: "gedimd net als alle getallen. hou het simpel"): artikel, lid en de stappen van artikel 3.
   Een artikel krijgt wat lucht erboven; geen lijnen. */
.voorwaarden-nr {
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.legals-wrapper .rich-text-regular ol > li::marker {
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.legals-wrapper .rich-text-regular .voorwaarden-art {
  margin-top: var(--_sizes---size--40px);
}
/* De inleidende zin van de privacyverklaring (Dévin 25-10: "die eerste regel moet altijd op 3 regels net als telefoon"). Op de telefoon is hij
   22,4em breed (gemeten op 320, 375 en 414: papa's lettergrootte groeit mee met het scherm) en breekt papa's balans hem in drie regels. Die breedte
   in em geldt nu op elk scherm, zodat hij ook op tablet en desktop in drie regels staat en de lettergrootte hem laat meegroeien. */
.legals-wrapper .rich-text-regular .voorwaarden-intro {
  max-width: 22.4em;
}
/* De leden (1.1, 6.2): het nummer in een vaste kolom, de tekst hangt erachter, zoals in een contract. */
.legals-wrapper .rich-text-regular .voorwaarden-lid {
  display: grid;
  grid-template-columns: 3.25em 1fr;
  text-wrap: pretty;   /* papa's alinea's balanceren (text-wrap: balance); bij lange leden gaf dat halve regels naast een lege rechterkant */
}
/* Artikel 3 is een genummerde lijst. Papa's tekstblok kent alleen de maat van een ul (.rich-text-regular ul); zonder deze regel stond de ol op 12px
   tegen 15px voor de rest. Dezelfde maat als papa's ul; de nummering (01., 02.) is papa's eigen ol-stijl. */
.legals-wrapper .rich-text-regular ol {
  font-size: var(--_paragraphs---paragraph-m--font-size);
}
/* Ook de lijstregels lopen door tot de rand (papa's balance brak stap 4 en 11 halverwege af, gezien op de printproef van 25-10). */
.legals-wrapper .rich-text-regular li {
  text-wrap: pretty;
}
/* Lijsten horen bij het lid erboven: ze springen in tot de tekstkolom van de leden. */
.legals-wrapper .rich-text-regular .voorwaarden-lid + ul,
.legals-wrapper .rich-text-regular .voorwaarden-lid + ol {
  margin-left: 3.25em;
}

/* Kop en voet op elk vel (Dévin 25-10: "de oude pdf indeling was mooier, die had een specifieke footer en heading stijl"). Dat was Safari's eigen
   kop en voet: boven de titel, onder het adres en "Pagina x van y". Die staan nu in de pagina zelf, zodat elke browser hetzelfde vel geeft;
   boven rechts staat de versie in plaats van de printdatum. De teksten zet build-nl.mjs (printMarkering) als variabelen op <html>.
   Een browser die geen paginamarges kent (Safari), print zijn eigen kop en voet zoals vroeger. */
@page tekst {
  size: A4;
  margin: 18mm 18mm 20mm;
  @top-left { content: var(--ssn-print-titel) " · Seven Stones Netherlands"; vertical-align: bottom; padding-bottom: 4mm; }
  @top-right { content: var(--ssn-print-versie); vertical-align: bottom; padding-bottom: 4mm; }
  @bottom-left { content: var(--ssn-print-adres); vertical-align: top; padding-top: 4mm; }
  @bottom-right { content: "Pagina " counter(page) " van " counter(pages); vertical-align: top; padding-top: 4mm; }
}
/* Het lettertype en de dimming van de nummers (60%) erven de margevakken van het vel. */
@page tekst {
  font-family: var(--_fonts---fonts--paragraph);
  font-size: 7.5pt;
  color: color-mix(in srgb, var(--_colors---swatch--black) 60%, transparent);
}

@media print {
  /* Het navy canvas zit op <html>: weg, anders print een browser met "achtergronden" aan navy tekst op navy. */
  html[data-ssn-print-tekst],
  [data-ssn-print-tekst] body {
    color-scheme: light;
    background: none;
    color: var(--_colors---swatch--black);
  }
  /* Alles behalve de tekst: papa's nav, overgang en WhatsApp-laag, de footer, en wat scripts aan de body hangen (meldingen, dock, kaart, paneel). */
  [data-ssn-print-tekst] body > :not(.page-wrapper),
  [data-ssn-print-tekst] .page-wrapper > :not(.main-wrapper),
  [data-ssn-print-tekst] .main-wrapper > :not(.section_hero),
  [data-ssn-print-tekst] .footer-wrapper,
  [data-ssn-print-tekst] .voorwaarden-printen > .btn-animate-chars,
  [data-ssn-print-tekst] .voorwaarden-printen--onder {
    display: none;
  }
  /* Het vel "tekst" (hierboven): de kop en voet met titel, versie, adres en paginanummer. */
  [data-ssn-print-tekst] body {
    page: tekst;
  }
  /* Geen lege laatste pagina (Dévin 25-10): papa's lagen zijn op het scherm vast of minstens een scherm hoog. Op papier is alles gewoon tekst die
     doorloopt en stopt waar de tekst stopt. */
  html[data-ssn-print-tekst],
  [data-ssn-print-tekst] body,
  [data-ssn-print-tekst] .page-wrapper,
  [data-ssn-print-tekst] .main-wrapper,
  [data-ssn-print-tekst] .section_hero,
  [data-ssn-print-tekst] .section_hero * {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    transform: none;
  }
  [data-ssn-print-tekst] .section_hero .section-padding-256px {
    padding-top: 0;
    padding-bottom: 0;
  }
  /* De tekst over de volle breedte van het vel, gelijk met de kop en voet: op het scherm staat hij in papa's smalle kolom (container-col-09,
     75% met een marge links) binnen padding-global. */
  [data-ssn-print-tekst] .section_hero .padding-global,
  [data-ssn-print-tekst] .section_hero .container-col-09 {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: auto;
  }
  [data-ssn-print-tekst] .legals-wrapper > :last-child,
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular > :last-child {
    margin-bottom: 0;
  }
  /* De kop zoals op de oude printversie: de titel, en de versie eronder (op het scherm staat hij naast de knop). */
  [data-ssn-print-tekst] .voorwaarden-kop {
    display: block;
    margin-bottom: 14pt;
  }
  [data-ssn-print-tekst] .voorwaarden-kop > h1 {
    margin: 0 0 6pt;
  }
  [data-ssn-print-tekst] .voorwaarden-kop > .voorwaarden-printen {
    display: block;
  }
  /* Maten op papier in punten (25-10). Papa's lettermaten rekenen met de breedte van het scherm; een A4-kolom is smal, dus de tekst kromp tot
     10px (7,7 pt, gemeten). Papier heeft een vaste maat, dus hier pt, en alleen in print: het scherm houdt papa's maten. */
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular {
    font-size: 10pt;
    line-height: 1.45;
  }
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular :is(p, li, ol, ul) {
    font-size: 10pt;
    line-height: 1.45;
    max-width: none;
    text-wrap: pretty;
  }
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular .voorwaarden-lid {
    margin-bottom: 6pt;
  }
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular :is(ul, ol) {
    margin-top: 0;
    margin-bottom: 6pt;
  }
  [data-ssn-print-tekst] .legals-wrapper .rich-text-regular li {
    margin-bottom: 2pt;
  }
  [data-ssn-print-tekst] .legals-wrapper h1 {
    font-size: 26pt;
    line-height: 1.1;
  }
  [data-ssn-print-tekst] .legals-wrapper h2 {
    font-size: 13pt;
    line-height: 1.25;
    margin: 16pt 0 6pt;
  }
  [data-ssn-print-tekst] .legals-wrapper .voorwaarden-versie {
    font-size: 9pt;
  }
  [data-ssn-print-tekst] .legals-wrapper,
  [data-ssn-print-tekst] .legals-wrapper * {
    color: var(--_colors---swatch--black);
  }
  [data-ssn-print-tekst] .legals-wrapper h2 {
    break-after: avoid;
  }
  [data-ssn-print-tekst] .legals-wrapper li,
  [data-ssn-print-tekst] .legals-wrapper p {
    break-inside: avoid;
  }
}
/* =====
   Over ons (/nl/about, Dévin 27-10): de handtekening "by Dévin Scholtens" bij het blok over de oprichter, in het staande beeld links.
   Desktop: scheef op de hoek rechtsonder, half over de rand van het beeld. Mobiel: in het beeld, linksonder (op 390 valt de hoek buiten het scherm).
   Dezelfde renderer en maat als de footer (shared-ssn.css: .signature-line .footer-signature-mount, 23.7em / 20em, 4065/870), gestart door het script onderaan ssn-about.html.
   Kleur: beige, net als het merkteken in de footer; de achtergrond is navy en het beeld donker.
   ===== */
.over-ons-beeld { position: relative; }
.over-ons-handtekening {
  position: absolute; z-index: 3; margin: 0;
  width: 23.7em; aspect-ratio: 4065 / 870;
  right: -5em; bottom: 2.5em; transform: rotate(-8deg);
  color: var(--_colors---swatch--beige);
}
@media screen and (min-width: 992px) {
  .over-ons-beeld { overflow: visible; }                                   /* de hoek mag over de rand */
  .over-ons-beeld > .aspect-ratio-3-4 { overflow: hidden; border-radius: inherit; }
}
@media screen and (max-width: 991px) {
  .over-ons-handtekening { width: 20em; right: auto; left: 1.25em; bottom: 1.5em; transform: none; }   /* binnen het beeld */
}
/* ============================================================================
   FOOTER-VOORKEUREN: verhuisd (Dévin 08-10)
   VALUTA (EUR | IDR) en MINDER BEWEGING (UIT | AAN) staan niet meer als rij in de footer maar in de hub van de instellingen-popup
   (spec 2026-10-08-instellingen-popup-design.md, css/94-instellingen-popup.css, markup lib/instellingen-hub.mjs). De schakelaar is die van het
   dossier (.vl-valuta in 84-dossier-intro.css), dus er is hier geen eigen opmaak meer. Dit deel is bewust bijna leeg: de baan footer-voorkeuren
   (docs/lanes/footer-voorkeuren.md) bewaakt de stand (lib/prefs.mjs) en de bewegingsmotor (95-minder-beweging.css), niet meer een footerrij.
   ============================================================================ */

/* De drie links onder in de footer (MIJN INSTELLINGEN, PRIVACYBELEID, ALGEMENE VOORWAARDEN) op een telefoon: elk vak is precies zo breed als zijn langste woord, dus een link die naar twee regels
   wikkelt heeft geen leeg stuk meer naast zijn tekst, en de rij verdeelt de ruimte tussen de teksten exact gelijk (Dévin 10-10, iPhone: de gaten waren 24 en 51 punten). Links uitgelijnd, midden, rechts. */
@media (max-width: 767px) {
  .text-link_group { justify-content: space-between; }
  .text-link_group > .callout-text { flex: 0 0 auto; width: min-content; }
  .text-link_group > .callout-text:nth-child(2) { text-align: center; }
  .text-link_group > .callout-text:nth-child(3) { text-align: right; }
}
/* ============================================================================
   SCHAKELAARS: de twee vaste soorten (Dévin 26-10: "de toggles zijn heel inconsistent over de site"; spec
   docs/superpowers/specs/2026-10-26-toggles-vaste-soorten-design.md, regel in de skill ssn-design-system). Eerst letterlijk overgenomen, dan alleen zijn wijzigingen.
   - Soort 1, kiezen (.ssnf-cursel met twee .ssnf-curbtn): groot = Mijn instellingen (.ssn-consent__rij, was 94), klein = elke andere plek, letterlijk dezelfde
     constructie op de hoogte van de AAN|UIT-schuif. Eén vak schuift onder het gekozen woord, dat woord keert om.
   - Soort 2, AAN|UIT (.ssn-consent__schuif in een .ssnf-row): de schuif van de cookiekaart (was 92). Het vakje dekt het woord af dat niet geldt.
     Hover: de randen in de kleur van de woorden. Aan: het vakje solide in die kleur, en de randen blijven zo.
   - Alles schuift met één duur en één ease (Dévin 26-10: "de toggles moeten ALLEMAAL dezelfde schuif animatie hebben"): die van de hub.
   - Kleur per vlak: --wissel-ink (woorden, randen, vak) en --wissel-vlak (het woord op het vak). Navy-vlak: beige; beige-vlak: navy.
   Een andere plek zet voor deze klassen alleen plaatsing (marge, gap) en --wissel-*; lib/schakelaars.test.mjs bewaakt dat.
   ============================================================================ */
body { --wissel-duur: .6s; --wissel-ease: cubic-bezier(.16, 1, .3, 1); --wissel-ink: var(--_colors---swatch--beige); --wissel-vlak: var(--_colors---swatch--black); }
:is(.ssn-consent, .ssn-inlog, .vl-paneel, .gids-keuze) { --wissel-ink: var(--_colors---swatch--black); --wissel-vlak: var(--ssn-surface); }   /* de beige vlakken */
:is(.vl-scherm, .ssnf--rail, .listings-bar__menu-body) { --wissel-ink: var(--_colors---swatch--beige); --wissel-vlak: var(--_colors---swatch--black); }   /* navy binnen een beige vlak */

/* --- Soort 2, AAN|UIT: de schuif van de cookiekaart (92), woorden en vakje in de kleur van het vlak --- */
.ssn-consent__schuif { position: relative; box-sizing: content-box; flex: 0 0 auto; width: 4em; height: 2em; margin-left: auto; border: 1px solid var(--_colors---swatch--grey); overflow: visible; transition: border-color .24s var(--wissel-ease); }
.ssn-consent__schuif::before, .ssn-consent__schuif::after { position: absolute; top: 0; width: 50%; height: 100%; display: grid; place-items: center; font-size: .8em; line-height: 1; color: var(--wissel-ink); pointer-events: none; }
.ssn-consent__schuif::before { content: "AAN"; left: 0; }
.ssn-consent__schuif::after { content: "UIT"; right: 0; }
.ssn-consent .ssn-consent__schuif .ssnf-cbx, .ssn-consent .ssnf-row:hover .ssn-consent__schuif .ssnf-cbx, .ssn-consent .ssnf-row:active .ssn-consent__schuif .ssnf-cbx, .ssn-consent .ssnf-row[aria-pressed] .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row:hover .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row:active .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row[aria-pressed] .ssn-consent__schuif .ssnf-cbx { position: absolute; top: -1px; left: -1px; z-index: 2; box-sizing: border-box; width: calc(50% + 1px); height: calc(100% + 2px); margin: 0; background: var(--wissel-vlak); border-color: var(--_colors---swatch--grey); border-radius: 0; box-shadow: none; transform: translateX(0); transition: transform var(--wissel-duur) var(--wissel-ease), background .24s var(--wissel-ease), border-color .24s var(--wissel-ease); }
.ssn-consent .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx, .ssn-consent .ssnf-row.is-indeterminate .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row.is-indeterminate .ssn-consent__schuif .ssnf-cbx { transform: translateX(100%); }
.ssn-consent .ssnf-row .ssn-consent__schuif .ssnf-cbx__ic, .vl-schakel .ssnf-row .ssn-consent__schuif .ssnf-cbx__ic { display: none; }   /* geen vinkje in het boxje (Dévin 10-10): het boxje en de woorden zeggen het */
.ssn-consent .ssnf-row__c.ssn-consent__stand, .vl-schakel .ssnf-row__c.ssn-consent__stand { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Hover (Dévin 26-10: "als je hovert wordt het van border kleur naar beige of navy"): de rand en het vakje, ook als je boven de zin naast de schuif staat. */
.ssn-consent .ssnf-row:hover .ssn-consent__schuif, .vl-schakel:hover .ssn-consent__schuif,
.ssn-consent .ssnf-row:hover .ssn-consent__schuif .ssnf-cbx, .vl-schakel:hover .ssnf-row .ssn-consent__schuif .ssnf-cbx { border-color: var(--wissel-ink); }
/* Aan ("als je hem aan zet moet de selector de solide kleur worden en alle borders ook dat blijven"). */
.ssn-consent .ssnf-row[aria-pressed="true"] .ssn-consent__schuif, .vl-schakel .ssnf-row[aria-pressed="true"] .ssn-consent__schuif,
.ssn-consent .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx { border-color: var(--wissel-ink); }
.ssn-consent .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx, .vl-schakel .ssnf-row[aria-pressed="true"] .ssn-consent__schuif .ssnf-cbx { background: var(--wissel-ink); }
/* Buiten de cookiekaart (dossier, contact, aanmeldpaneel, mailvoorkeuren, Gids-poort): de maat van de kaart, en het vinkje erboven precies even hoog (92). */
.vl-schakel .ssn-consent__schakel, [data-vl-form] .form_checkbox-icon { font-size: max(var(--_paragraphs---paragraph-regular--font-size), 11px); --kaart-duur: .6s; --kaart-ease: cubic-bezier(.16, 1, .3, 1); --vl-vak: calc(2em - 2px); }   /* het vinkje iets kleiner dan de schakelaar (Dévin 17-10, later: "even groot of iets kleiner"; op 2em plus de randen oogde hij groter) */
.vl-schakel .ssn-consent__schakel { min-height: 0; padding: 0; }
.vl-schakel .ssn-consent__schuif { margin-left: 0; }
.vl-schakel .ssn-consent__schakel:focus-visible { outline: 1px solid var(--wissel-ink); outline-offset: 2px; }

/* --- Soort 1, kiezen, klein: letterlijk de hub hieronder, op de hoogte van de AAN|UIT-schuif (2em plus de randen), lettermaat die van de body (minstens 11px),
       de woorden .8em zoals AAN en UIT. Een helft groeit mee met een lang woord (PER MAAND, WEKELIJKS); beide helften blijven even breed. --- */
.ssnf-cursel { --wissel-vk: calc(2em + 2px); position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(var(--wissel-vk), 1fr)); grid-auto-rows: var(--wissel-vk); flex: 0 0 auto; width: auto; min-width: 0; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; color: var(--wissel-ink); font: inherit; font-size: max(var(--size-font, 100vw / 120), 11px); }
button.ssnf-cursel { cursor: pointer; -webkit-appearance: none; appearance: none; }   /* de hele schakelaar is één knop (role=switch) */
.ssnf-cursel::before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: var(--wissel-vk); background: var(--wissel-ink); transform: translateX(0); transition: transform var(--wissel-duur) var(--wissel-ease); }
.ssnf-cursel:has(.ssnf-curbtn:nth-child(2)[aria-pressed="true"])::before { transform: translateX(100%); }
.ssnf-cursel .ssnf-curbtn { position: relative; z-index: 1; box-sizing: border-box; display: grid; place-items: center; min-height: 0; margin: 0; padding: 0 .6em; line-height: 1; font: inherit; font-size: .8em; text-transform: uppercase; white-space: nowrap; text-decoration: none; border: 1px solid var(--wissel-ink); border-radius: 0; background: transparent; color: var(--wissel-ink); cursor: pointer; transition: color var(--wissel-duur) var(--wissel-ease); }
.ssnf-cursel .ssnf-curbtn[aria-pressed="true"] { background: transparent; color: var(--wissel-vlak); }
.ssnf-cursel .ssnf-curbtn:first-child { border-right: 0; }   /* de scheiding is de linkerrand van de rechter helft */
.ssnf-cursel:focus-visible, .ssnf-cursel .ssnf-curbtn:focus-visible { outline: 1px solid var(--wissel-ink); outline-offset: 2px; }
/* Een vingerdoel op de telefoon (zoals elke knop in de vragenlijst, 82/87): het raakvlak is 44px hoog, het beeld blijft de schuif. */
@media (max-width: 767px) { .ssnf-cursel .ssnf-curbtn::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px); } }

/* --- Soort 1, kiezen, groot: Mijn instellingen (was 94, ongewijzigd). De rechter helft is vierkant (--hub-vk uit .ssn-consent__hubin, 94). --- */
.ssn-consent__rij .vl-valuta__knop { font-size: 1em; display: grid; grid-template-columns: repeat(2, var(--hub-vk)); grid-auto-rows: var(--hub-vk); flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; overflow: visible; }
.ssn-consent__rij .vl-valuta__knop { position: relative; }
.ssn-consent__rij .vl-valuta__knop::before { content: ""; position: absolute; top: 0; left: 0; width: var(--hub-vk); height: var(--hub-vk); background: var(--_colors---swatch--black); transform: translateX(0); transition: transform var(--wissel-duur) var(--wissel-ease); }
.ssn-consent__rij .vl-valuta__knop:has(.ssnf-curbtn:nth-child(2)[aria-pressed="true"])::before { transform: translateX(100%); }
.ssn-consent__rij .ssnf-curbtn { position: relative; z-index: 1; box-sizing: border-box; display: grid; place-items: center; padding: 0; line-height: 1; font-size: var(--_paragraphs---paragraph-regular--font-size); font-weight: 500; letter-spacing: .04em; text-decoration: none; border: 1px solid var(--_colors---swatch--black); border-radius: 0; background: transparent; color: var(--_colors---swatch--black); transition: color var(--wissel-duur) var(--wissel-ease); }
.ssn-consent__rij .ssnf-curbtn[aria-pressed="true"] { background: transparent; color: var(--_colors---swatch--beige); }
.ssn-consent__rij .ssnf-curbtn:first-child { border-right: 0; }   /* de scheiding is de linkerrand van de rechter helft */

html[data-ssn-motion="reduced"] .ssn-consent__schuif, html[data-ssn-motion="reduced"] .ssn-consent__schuif .ssnf-cbx, html[data-ssn-motion="reduced"] .ssnf-cursel::before, html[data-ssn-motion="reduced"] .ssnf-cursel .ssnf-curbtn { transition: none; }
/* ============================================================================
   COOKIEKAART (spec 2026-10-01-cookie-consent-design.md §4.1)
   De kaart is het beige paneel van het dossier (.cta-wrap.vl-paneel). Fills en randen van de knoppen komen uit de bestaande
   regels `.vl-paneel .btn-animate-chars…`; de rijen en vinkvakjes uit de filterpagina (.ssnf-*); de NL-box uit de header.
   Hieronder staat ALLEEN de lay-out en de tekstkleur op beige. Kleuren zijn tokens; de ene uitzondering is het doorschijnende navy van
   de achtergrond (`::backdrop` erft geen eigenschappen), met dezelfde waarde als elders in de CSS van de site. Staat vóór 95-minder-beweging: dat deel blijft bewust laatst. */
.ssn-consent:not([open]) { display: none; }
.cta-wrap.vl-paneel.ssn-consent { margin: auto; padding: 0; --kaart-kop: 4.4em; --kaart-duur: .6s; --kaart-ease: cubic-bezier(.16, 1, .3, 1); --kaart-bijzaak: .7; --kaart-in: 1.4em; /* de afstand van het merkteken (1,6em) tot de bovenkant van de kop (4,4em): (4,4 - 1,6) / 2; ook de marge links en rechts van alle inhoud */ font-size: max(var(--_paragraphs---paragraph-regular--font-size), 11px); border: 1px solid var(--_colors---swatch--grey); color: var(--_colors---swatch--black); width: min(56em, calc(100% - 3em)); max-height: min(calc(100vh - 1em), 60em); max-height: min(calc(100dvh - 1em), 60em); /* altijd .5em lucht boven en onder (Dévin 09-10) */ height: fit-content; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.ssn-consent::backdrop { background: rgba(42, 36, 32, .6); }
.ssn-consent [hidden] { display: none; }
html.ssn-consent-open { overflow: hidden; }   /* alleen bij de eerste vraag; bij Mijn instellingen scrolt de pagina gewoon door (consent.js, Dévin 09-10) */
.ssn-consent__kop { display: flex; justify-content: space-between; align-items: stretch; flex: 0 0 auto; height: var(--kaart-kop); border-bottom: 1px solid var(--_colors---swatch--grey); }
/* Vanuit de footer (modus 'instellingen', consent.js) staat er geen NL-box maar een kruisje met dezelfde maten als dat van het aanmeldpaneel (.ssn-inlog__x, 81-account-inlog: dezelfde kaart). */
.ssn-consent__x { display: none; flex: 0 0 var(--kaart-kop); box-sizing: border-box; width: var(--kaart-kop); place-items: center; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: none; color: inherit; cursor: pointer; }
.ssn-consent__x svg { width: .9em; height: .9em; display: block; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) { .ssn-consent__x:hover svg { transform: rotate(90deg); } }
.ssn-consent__x:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }
.ssn-consent[data-modus="instellingen"] .ssn-consent__nl { display: none; }
.ssn-consent[data-modus="instellingen"] .ssn-consent__x { display: grid; }
.ssn-consent__merk:focus { outline: none; }
.ssn-consent__merk { position: relative; display: flex; align-items: center; gap: var(--_sizes---size--12px); padding: 0 var(--kaart-in); }
.ssn-consent__icoon { flex: 0 0 auto; display: none; }   /* geen merkteken in de kop, in geen enkele weergave: de titel staat op de marge van de inhoud, rustiger (Dévin 09-10); het blijft in de markup, zodat het bewijs per hash gelijk blijft */
.ssn-consent__icoon-o { fill: var(--ssn-accent); }
.ssn-consent__icoon-n { fill: var(--_colors---swatch--black); }
/* De titel in de standaardstijl van de panelen van de site (de titel van het aanmeldpaneel, 81): paragraaflettertype, 1,3em, dikte 500, regelhoogte 1, .03em letterafstand, hoofdletters. */
.ssn-consent__titel { font-family: var(--_fonts---fonts--paragraph); font-size: 1.3em; font-weight: 500; line-height: 1; letter-spacing: .03em; text-transform: uppercase; grid-area: 1 / 1; }
.ssn-consent__nl { position: relative; z-index: 3; width: var(--kaart-kop); border-left: 1px solid var(--_colors---swatch--grey); }
/* De taalkeuze: de box van de header, in beige. Zelfde maat (53 x 53), zelfde rand, en hij valt onder NL, zoals in de header (Dévin 04-10). */
.ssn-consent__nl .localization { width: 100%; height: 100%; }
.ssn-consent__nl .locale-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: pointer; position: relative; z-index: 1; background: var(--ssn-surface); }
.ssn-consent__nl .locale-content { position: absolute; top: 100%; left: -1px; right: auto; width: var(--kaart-kop); height: var(--kaart-kop); z-index: 2; background: var(--ssn-surface); border: 1px solid var(--_colors---swatch--grey); border-top: 0; border-right: 0; }   /* geen eigen rechterrand: de rand van de kaart is er al (anders staat er een dubbele lijn) */
.ssn-consent__nl .locale-content.w--open { animation: ssn-consent-nl .3s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes ssn-consent-nl { from { transform: translateY(-1em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
html[data-ssn-motion="reduced"] .ssn-consent__nl .locale-content.w--open { animation: none; }
.ssn-consent__nl .locale-content:not(.w--open) { display: none; }
/* Papa's link heeft 1,5em opvulling aan beide kanten: in een box van 4,4em blijft 1,4em over voor EN en dan knipt zijn overflow:hidden de N af. */
.ssn-consent__nl .locale-content a { padding: 0; }
.ssn-consent__nl .locale-content .navbar-link_text { overflow: visible; }
/* Geen letter-animatie in dit vakje: papa's script knipt EN later in letters met een tweede regel (text-shadow), en omdat de tekst hier niet afgeknipt wordt (overflow visible, anders valt de N weg) stond er EN twee keer (Dévin, iPhone 10-10). */
.ssn-consent__nl .locale-content [data-button-animate-chars] > span { text-shadow: none; transform: none; transition: none; }
.ssn-consent__nl .locale-content [data-button-animate-chars] { display: inline-block; white-space: nowrap; }
.ssn-consent__nl .locale-content a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--_colors---swatch--black); }
.ssn-consent__nl .locale-content .button-bg { display: none; }
.ssn-consent__nl .locale-content .navbar-link_text { color: var(--_colors---swatch--black); }
.ssn-consent__nl .locale-content a:hover, .ssn-consent__nl .locale-content a:focus-visible { background: rgba(42, 36, 32, .06); }
/* De lijn voor een onderdeel is even dik als het minnetje van de rij erboven (1,3 px, zelfde kleur). */
.ssn-consent .ssnf-lead { height: 1px; position: relative; top: -1px; background: var(--_colors---swatch--grey); }   /* 1px omhoog: het streepje staat dan op het midden van de hoofdletters van het label (gemeten: .8px te laag) */   /* de streepjes voor de onderdelen in de randkleur van de site (Dévin 09-10) */   /* een heel aantal pixels: 1,3 px werd op het ene streepje 2 en op het andere 3 apparaatpixels */
/* De vaste rij: uitklapbaar, zonder schakelaar. */

.ssn-consent__vast-rij { padding: var(--_sizes---size--4px) 0 var(--_sizes---size--8px); }
.ssn-consent__vast-kop { display: flex; align-items: center; gap: var(--_sizes---size--12px); min-height: 2.35em; }
/* De keuze in de kaart (Dévin 10-10): een vak van twee vierkante helften (2em) in de randkleur met beide woorden er altijd in: AAN links, UIT rechts. Het vinkvakje is een beige boxje dat van links (UIT)
   naar rechts (AAN) schuift en het andere woord afdekt: UIT = boxje links over AAN, UIT zichtbaar; AAN = boxje rechts over UIT, AAN zichtbaar (Dévin 16-10). Geen vulling en geen hoverkleur voor het boxje, geen klik-animatie; alleen het vinkje tekent zich. De woorden staan als
   ::before en ::after; het echte statuswoord (data-consent-status) blijft voor schermlezers en de tests, onzichtbaar. Altijd even breed; de rechterrand is die van ALTIJD AAN. */
/* De schakelaar AAN | UIT (de schuif) en zijn kopie in het dossier, contact, aanmeldpaneel en mailvoorkeuren (.vl-schakel): 91-schakelaars.css. */
.ssn-consent__schakel { gap: 0; }
.ssn-consent__item { cursor: default; }   /* een onderdeel is een gewone regel, geen knop: de schakelaar van de groep stuurt het aan */
.ssn-consent__item .ssnf-lead { margin-right: var(--_sizes---size--8px); }
.ssn-consent .ssnf-row__c.ssn-consent__vaststatus { font-size: .8em; margin-left: 0; padding-right: 0; text-align: right; color: var(--_colors---swatch--black); opacity: var(--kaart-bijzaak); }   /* ALTIJD AAN is geen keuze: gedimd, zoals de uitleg */
.ssn-consent__schakel { width: auto; flex: 0 0 auto; }
.ssn-consent__item .ssnf-row__t { flex: 0 1 auto; }
.ssn-consent__vast-intro { margin: var(--_sizes---size--4px) 0 var(--_sizes---size--8px); }
/* Erin en eruit zoals een melding (.ssn-toast): de iOS-curve cubic-bezier(.32, .72, 0, 1), erin 500 ms, eruit 300 ms, in- en uitfaden; de kaart
   komt van onderen (translateY) in plaats van van rechts. Bij sluiten zet consent.js .is-sluit en sluit de dialog na de animatie. Dévin, 1 okt:
   de curve van de melding is veel soepeler dan die van de WhatsApp-popup. */
@keyframes ssn-consent-in { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ssn-consent-uit { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes ssn-consent-sluier { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssn-consent-sluier-uit { from { opacity: 1; } to { opacity: 0; } }
.ssn-consent[open] { animation: ssn-consent-in .5s cubic-bezier(.32, .72, 0, 1) both; }
.ssn-consent[open]::backdrop { animation: ssn-consent-sluier .5s cubic-bezier(.32, .72, 0, 1) both; }
.ssn-consent[open].is-sluit { animation: ssn-consent-uit .3s cubic-bezier(.32, .72, 0, 1) both; }
.ssn-consent[open].is-sluit::backdrop { animation: ssn-consent-sluier-uit .3s cubic-bezier(.32, .72, 0, 1) both; }
html[data-ssn-motion="reduced"] .ssn-consent[open], html[data-ssn-motion="reduced"] .ssn-consent[open]::backdrop { animation: none; }
.ssn-consent__nl .navbar-link_text { color: var(--_colors---swatch--black); }
.ssn-consent__scroll { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.ssn-consent__vak { padding: var(--kaart-in); border-bottom: 1px solid var(--_colors---swatch--grey); }
.ssn-consent__tekst { margin: 0; font-size: var(--_paragraphs---paragraph-regular--font-size); line-height: 1.5; }
.ssn-consent__uitleg { margin: 0; font-size: var(--_paragraphs---paragraph-regular--font-size); line-height: 1.5; }
.ssn-consent__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ssn-consent__open { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.ssn-consent__uitleg { margin: var(--_sizes---size--4px) 0 var(--_sizes---size--8px); opacity: var(--kaart-bijzaak); font-size: .9em; line-height: 1.45; }
.ssn-consent__inhoud > :last-child { margin-bottom: var(--_sizes---size--12px); }
/* Elke groep is een blok met een lijn eronder (Dévin 09-10: zonder de lijnen las de kaart als één drukke vlakte). De laatste groep eindigt op de lijn boven de voet. */
.ssn-consent__groep { border-bottom: 1px solid var(--_colors---swatch--grey); }
.ssn-consent__groep:last-child { border-bottom: 0; }
.ssn-consent__groepkop { display: flex; justify-content: space-between; align-items: center; gap: var(--_sizes---size--16px); padding: 0 var(--kaart-in); }
.ssn-consent__groepkop { cursor: pointer; }
.ssn-consent__uitklap { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; gap: var(--_sizes---size--8px); min-height: 3.2em; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ssn-consent__inhoud { padding: 0 var(--kaart-in); }
.ssn-consent .ssnf-t, .ssn-consent .ssnf-row__t, .ssn-consent .ssnf-row__c { font-size: var(--_paragraphs---paragraph-regular--font-size); }
.ssn-consent .ssnf-t, .ssn-consent .ssnf-row__t, .ssn-consent .ssnf-row__c, .ssn-consent__stand, .ssn-consent__vaststatus { line-height: 1; }   /* één regelhoogte voor labels en standwoorden (1, zoals .ssnf-t): dan staan hun hoofdletters op één midden met het vinkje en het teken */
.ssn-consent .ssnf-t, .ssn-consent .ssnf-row, .ssn-consent .ssnf-row__t, .ssn-consent .ssnf-row.is-child .ssnf-row__t, .ssn-consent .ssnf-row__c, .ssn-consent .ssnf-chev { color: var(--_colors---swatch--black); }
/* Focus zichtbaar voor wie met het toetsenbord werkt (de site toont papa's knoppen anders zonder ring op beige). */
.ssn-consent :focus-visible { outline: 2px solid var(--_colors---swatch--black); outline-offset: 2px; }
.ssn-consent .ssn-consent__merk:focus-visible { outline: none; }   /* de kop krijgt de eerste focus alleen om geen knop voor te trekken */
/* Alle vierkantjes in de kaart zijn hoekig en hebben de randkleur van de site (Dévin 09-10), ook het vinkje; aangevinkt blijft navy. */
.ssn-consent .ssnf-cbx { border-radius: 0; border-color: var(--_colors---swatch--grey); }
/* Aangevinkt: navy op beige. Het oranje van de filterpagina haalt op beige geen 3:1 (2,4:1, WCAG 1.4.11). */
/* Op navy wordt de rand van een leeg vinkje bij hover beige (.ssnf-row:hover). Op beige is dat onzichtbaar: dan navy. Aangevinkt blijft oranje. */
.ssn-consent .ssnf-row[aria-pressed="false"]:not(.is-indeterminate):hover .ssnf-cbx:not(.ssn-consent__schuif .ssnf-cbx) { border-color: var(--_colors---swatch--black); }
.ssn-consent__voet { display: flex; gap: var(--_sizes---size--8px); flex: 0 0 auto; padding: var(--_sizes---size--12px); border-top: 1px solid var(--_colors---swatch--grey); }
.ssn-consent__knop { flex: 1 1 0; min-width: 0; border: 0; background: none; font: inherit; }
.ssn-consent .btn-animate-chars:not(.btn-secundair) .btn-animate-chars__text { color: var(--_colors---swatch--beige); }
.ssn-consent .btn-secundair .btn-animate-chars__text { color: var(--_colors---swatch--black); }
/* Het dossierpaneel (84) geeft de tweede knop een grijze rand; op de cookiekaart blijft hij navy, zoals Dévin hem goedkeurde (1 okt). Even specifiek als regel 84, en later. */
.ssn-consent .btn-animate-chars.btn-secundair .btn-animate-chars__bg { border-color: var(--_colors---swatch--black); }
.ssn-consent .btn-animate-chars.btn-secundair .btn-animate-chars__text { color: var(--_colors---swatch--black); }
@media (max-width: 767px) {
  .cta-wrap.vl-paneel.ssn-consent { margin: auto 0 calc(.5em + env(safe-area-inset-bottom)); width: 100%; max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* Meer informatie: wat eerst op een aparte pagina stond. Blokken met een streepje en een kop, zoals de vaste rij. */
.ssn-consent__blok { padding: var(--_sizes---size--4px) 0 var(--_sizes---size--8px); }
.ssn-consent__bk { display: flex; align-items: center; gap: var(--_sizes---size--12px); min-height: 2.35em; }
.ssn-consent__opslag { margin: 0 0 var(--_sizes---size--8px); font-size: var(--_paragraphs---paragraph-regular--font-size); line-height: 1.5; }
.ssn-consent .ssn-consent__opslag .ssnf-row__t { display: inline; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--_colors---swatch--black); }
.ssn-consent__concept { margin: var(--_sizes---size--4px) 0 var(--_sizes---size--8px); font-weight: 600; opacity: 1; }
.ssn-consent__uitleg a.text-link { color: inherit; text-decoration: underline; }
/* Privacy instellingen op de pagina's zonder footer (dossier en 404, build-nl.mjs: ingangPagina). */
.ssn-consent__ingang { padding: var(--kaart-in) 0 var(--_sizes---size--40px); font-size: var(--_paragraphs---paragraph-regular--font-size); }
html[data-vl-stap-nu] .ssn-consent__ingang { display: none; }   /* in het dossier staat de link in de voet van het beige vlak (stap 1), niet los onderaan de pagina (Dévin 09-10). In stap 2 t/m 4 is het scherm één vast beeld: een link eronder was nooit te bereiken en rekte de pagina 72 px op, waardoor de vaste onderbalk (die in de transform van papa's scrolvlak staat) onder het scherm viel */
/* ============================================================================
   GEEN GOOGLE FONTS (cookiekaart, plan C2)
   Papa's pagina laadde Inter bij Google op (webfont.js). Dat gaat niet meer vóór een keuze. Drie Webflow-regels vroegen Inter:
   de lopende tekst in .rich-text-regular en .rich-text-medium en .text-align-center. Zij nemen nu het lettertype van de rest van de
   pagina over (Basic Grotesque, een eigen bestand), dus er hoeft niets gedownload te worden. Dévin keurt het beeld (pand-proef).
   ========================================================================== */
.rich-text-regular p,
.rich-text-medium p,
.text-align-center { font-family: inherit; }
/* ============================================================================
   INSTELLINGEN-POPUP (spec 2026-10-08-instellingen-popup-design.md)
   Eén kaart (de cookiekaart, 92) met twee weergaven in twee kolommen: de HUB (TAAL, VALUTA, MINDER BEWEGING, PRIVACY INSTELLINGEN) en de
   PRIVACY-weergave (de cookiebanner). Modus `vraag` (eerste bezoek) = alleen de privacy-weergave, groot en in het midden, zoals voorheen.
   Modus `instellingen` (footerlink Mijn instellingen) = 32em breed, rechtsonder in beeld, begint in de hub; PRIVACY INSTELLINGEN schuift de
   privacy-weergave erin met de ease van de filters (420 ms, cubic-bezier(.76, 0, .24, 1)), de hoogte groeit mee (consent.js zet hem op de actieve
   weergave). De schakelaars zijn die van het dossier (.vl-valuta, 84); hier staat alleen lay-out. Alles in em en de tokens van de site.
   ============================================================================ */
.ssn-consent__panen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }   /* clip: een scroll-container die de browser zelf kan verschuiven (focus, scrollIntoView) is er niet: WebKit schoof de kolommen 23 px */
.ssn-consent__spoor { flex: 1 1 auto; min-height: 0; display: flex; }
.ssn-consent__pane { flex: 0 0 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ssn-consent[data-modus="vraag"] .ssn-consent__pane.is-hub { display: none; }

/* Kop: het merkteken blijft altijd staan; alleen de titel wisselt, en hij rolt per letter zoals FILTEREN en RESULTATEN op de mobiele filterknop
   (65-toast: letters .6 s met de ease van de site, stagger .01 s per letter, alleen verticaal geknipt). Hub: de privacy-letters wachten onder
   het vak. Privacy: de hub-letters rollen omhoog weg. Bij het eerste bezoek (modus vraag) is er alleen de privacy-titel. */
.ssn-consent__titels { display: grid; clip-path: inset(0 -100vw); }
.ssn-consent[data-modus="vraag"] .ssn-consent__titel.is-hub { display: none; }
/* De stagger van een knop-hover: .01 s per letter (--i staat in de markup); een spatie blijft een spatie. */
.ssn-consent__titel > span { display: inline-block; white-space: pre; transition-delay: calc(var(--i, 0) * .01s); }
.ssn-consent[data-modus="instellingen"][data-weergave="hub"] .ssn-consent__titel.is-privacy > span { transform: translateY(1.3em); }
.ssn-consent[data-modus="instellingen"][data-weergave="privacy"] .ssn-consent__titel.is-hub > span { transform: translateY(-1.3em) rotate(.001deg); }
/* De hele kop is de weg terug uit de privacy-weergave: een onzichtbare knop over merkteken en titel (aanraakvlak = de kop, 4,4em hoog). */
.ssn-consent__terug { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; visibility: hidden; pointer-events: none; }
.ssn-consent__terug:focus-visible { outline: 1px solid currentColor; outline-offset: -4px; }
.ssn-consent[data-modus="instellingen"][data-weergave="privacy"] .ssn-consent__terug { visibility: visible; pointer-events: auto; }

/* De hub: drie rijen met een schakelaar van twee vierkantjes, zoals de vergroot- en verkleinknoppen in de pand-uitklap (62): hoekig, 1px navy, en maar één
   waarde voor de ruimte: de tussenruimte tussen de rijen is gelijk aan de marge rondom de vierkantjes (--hub-in, .5em, in de uitklap --pand-in). Binnen een
   schakelaar geen ruimte. De rechter helft is precies zo breed als de kruis-box erboven min die marge (4,4em min .5em, en dus vierkant), zodat de scheiding
   tussen de twee helften op één lijn staat met de lijn links van het kruisje; de linker helft is even groot. De rij is het aanraakvlak. De koers staat in de
   rij VALUTA onder het woord. */
.ssn-consent__hubin { --hub-in: .5em; --hub-vk: calc(var(--kaart-kop) - var(--hub-in)); display: flex; flex-direction: column; gap: var(--hub-in); padding: var(--hub-in) var(--hub-in) 0 var(--kaart-in); }
.ssn-consent__rij { display: flex; align-items: center; justify-content: space-between; align-self: auto; width: 100%; gap: var(--_sizes---size--16px); }
.ssn-consent__rij.vl-valuta { margin: 0; }
.ssn-consent__rij .vl-valuta__l { opacity: 1; letter-spacing: inherit; }
.ssn-consent__rijl { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
/* De schakelaar zelf (twee vierkanten, één navy vak dat schuift): 91-schakelaars.css, soort 1 groot. */
.ssn-consent__koers { opacity: var(--kaart-bijzaak); font-size: var(--_paragraphs---paragraph-xs--font-size); line-height: 1.3; }
.ssn-consent__naar { margin: 0 calc(-1 * var(--hub-in)) 0 calc(-1 * var(--kaart-in)); padding: 0 calc((var(--kaart-kop) - 2em) / 2) 0 var(--kaart-in); min-height: 3.7em; width: auto; align-self: stretch; box-sizing: border-box; border: 0; border-top: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ssn-consent__naar:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
/* De letters van PRIVACY INSTELLINGEN rollen bij hover omhoog weg, zoals de tekst van elke knop op de site (papa: .btn-animate-chars [data-button-animate-chars]). */
.ssn-consent__naar [data-button-animate-chars] { overflow: hidden; position: relative; display: inline-block; }
.ssn-consent__naar [data-button-animate-chars] > span { display: inline-block; position: relative; white-space: pre; text-shadow: 0 1.3em currentColor; transform: translateY(0) rotate(.001deg); transition: transform var(--kaart-duur) var(--kaart-ease); transition-delay: calc(var(--i, 0) * .01s); }
@media (hover: hover) and (pointer: fine) { .ssn-consent__naar:hover [data-button-animate-chars] > span { transform: translateY(-1.3em) rotate(.001deg); } }
.ssn-consent__naar:focus-visible [data-button-animate-chars] > span { transform: translateY(-1.3em) rotate(.001deg); }
/* De chevron-box: papa's .button-icon; zijn hover is die van elke knop op de site (het spoor schuift een half vak op, .6 s). */
.ssn-consent__box { flex: 0 0 auto; background-color: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); }   /* navy met beige pijl, en zijn midden staat onder het midden van het kruisje (de kruis-box is 4,4em breed, de box 2em) */
@media (hover: hover) and (pointer: fine) { .ssn-consent__naar:hover .button-icon_track { transform: translate(50%, 0); } }
.ssn-consent__naar:focus-visible .button-icon_track { transform: translate(50%, 0); }
html[data-ssn-motion="reduced"] .ssn-consent__naar:hover .button-icon_track, html[data-ssn-motion="reduced"] .ssn-consent__naar:focus-visible .button-icon_track { transform: translate(0, 0); }
html[data-ssn-motion="reduced"] .ssn-consent__naar:hover [data-button-animate-chars] > span, html[data-ssn-motion="reduced"] .ssn-consent__naar:focus-visible [data-button-animate-chars] > span { transform: translateY(0) rotate(.001deg); }
/* De knoppen van de kaart (AKKOORD, ALLEEN ESSENTIEEL): papa's letter-rol (zijn CSS staat in de pagina) met dezelfde stagger. */
.ssn-consent__knop [data-button-animate-chars] > span { white-space: pre; transition-delay: calc(var(--i, 0) * .01s); }
/* De tekst van een knop die van naam wisselt (consent.js wisselKnop): de oude letters rollen omhoog weg, de nieuwe komen van onderen op, met dezelfde stagger (.01 s per letter) en ease. */
/* Eén doorlopende rol (Dévin 16-10): de oude en de nieuwe tekst liggen op elkaar in één cel; per letter gaat de oude omhoog weg terwijl de nieuwe er direct achteraan van onderen komt, zoals de hover van elke knop. */
.ssn-consent__knop [data-button-animate-chars].is-rol { display: inline-grid; overflow: hidden; vertical-align: top; }
.ssn-consent__knop [data-button-animate-chars].is-rol > .rol-r { grid-area: 1 / 1; justify-self: center; white-space: pre; text-shadow: none; transform: none; }
.ssn-consent__knop [data-button-animate-chars].is-rol > .rol-r > span { display: inline-block; white-space: pre; text-shadow: none; transition: transform var(--kaart-duur) var(--kaart-ease); transition-delay: calc(var(--i, 0) * .01s); }
.ssn-consent__knop [data-button-animate-chars].is-rol > .rol-nieuw > span { transform: translateY(1.4em) rotate(.001deg); }
.ssn-consent__knop [data-button-animate-chars].is-rol.is-gaan > .rol-oud > span { transform: translateY(-1.4em) rotate(.001deg); }
.ssn-consent__knop [data-button-animate-chars].is-rol.is-gaan > .rol-nieuw > span { transform: translateY(0) rotate(.001deg); }
.ssn-consent__hubvoet:empty, .ssn-consent__hubvoet:not(:has(> :not([hidden]))) { display: none; }   /* de vaste plek voor je account: alleen ingelogd (instellingen-hub.mjs) */
/* Ingelogd: je adres links, Afmelden onderstreept rechts (Dévin 26-10). Een rij van de hub, met de kleine grijze tekst van de koers; het adres breekt liever dan dat het de rij oprekt. */
.ssn-consent__wie { margin: calc(-1 * var(--hub-in)) calc(-1 * var(--hub-in)) 0 calc(-1 * var(--kaart-in)); padding: 0 calc((var(--kaart-kop) - 2em) / 2) 0 var(--kaart-in); min-height: 3.7em; width: auto; box-sizing: border-box; border-top: 1px solid var(--_colors---swatch--grey); }   /* = de maat en lijn van .ssn-consent__naar erboven */
.ssn-consent__wie[hidden] { display: none; }
.ssn-consent__wie .ssn-consent__uitleg { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ssn-consent__af { flex: none; min-height: 24px; padding: 0; color: var(--ssn-accent); }   /* oranje (Dévin 27-10); de onderstreping volgt de tekstkleur */

/* Modus instellingen: smal, rechtsonder, schuiven en groeien. Onder 768 px een blad onderaan (92). */
.cta-wrap.vl-paneel.ssn-consent[data-modus="instellingen"] { width: min(32em, calc(100% - 3em)); margin: auto 2em 2em auto; max-height: min(calc(100vh - 2.5em), 56em); max-height: min(calc(100dvh - 2.5em), 56em); }   /* desktop: onder even ver van de rand als rechts (2em, Dévin 10-10), boven .5em lucht */
.ssn-consent[data-modus="instellingen"]::backdrop { background: transparent; }
.ssn-consent[data-modus="instellingen"] .ssn-consent__panen { flex: 0 1 auto; max-height: calc(min(85dvh, 56em) - var(--kaart-kop)); }
/* Hub en privacy liggen op elkaar in één cel. De wissel is een beweging omhoog (Dévin 16-10): naar privacy gaat de hub omhoog weg en komt privacy van onderen op; terug omgekeerd. */
.ssn-consent[data-modus="instellingen"] .ssn-consent__spoor { display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.ssn-consent[data-modus="instellingen"] .ssn-consent__pane { grid-area: 1 / 1; transform: translateY(0); }
.ssn-consent[data-modus="instellingen"][data-weergave="hub"] .ssn-consent__pane.is-privacy { transform: translateY(100%); }
.ssn-consent[data-modus="instellingen"][data-weergave="privacy"] .ssn-consent__pane.is-hub { transform: translateY(-100%); }
.ssn-consent.is-wissel .ssn-consent__panen { transition: height .42s cubic-bezier(.76, 0, .24, 1); }
.ssn-consent.is-wissel .ssn-consent__pane { transition: transform .42s cubic-bezier(.76, 0, .24, 1); }
.ssn-consent.is-wissel .ssn-consent__titel > span { transition-property: transform; transition-duration: var(--kaart-duur); transition-timing-function: var(--kaart-ease); }   /* de rol van FILTEREN en RESULTATEN (65-toast); alleen de losse eigenschappen, de stagger (transition-delay) blijft staan */
html[data-ssn-motion="reduced"] .ssn-consent.is-wissel .ssn-consent__panen, html[data-ssn-motion="reduced"] .ssn-consent.is-wissel .ssn-consent__pane,
html[data-ssn-motion="reduced"] .ssn-consent.is-wissel .ssn-consent__titel > span { transition: none; }
@media (max-width: 767px) {
  .cta-wrap.vl-paneel.ssn-consent[data-modus="instellingen"] { margin: auto 0 calc(.5em + env(safe-area-inset-bottom)); width: 100%; max-width: 100%; }
}
/* ============================================================================
   MINDER BEWEGING (html[data-ssn-motion="reduced"]) — de 19 oude @media (prefers-reduced-motion)-regels hierboven luisteren nu
   naar dezelfde stand (computer-instelling of eigen keuze). Hier de rest. Norm van het project (docs/superpowers/specs/
   2026-06-15-aanbod-pagina-ui-architectuur.md:292): instant snap of ≤150ms crossfade; functie behouden, beweging weg.
   NIET alles op nul: de klok van GSAP en het glad scrollen regelt lib/motion.mjs; scroll-gestuurde onderdelen (pinnen,
   stapelen, de naad van de aanbod-stage) blijven. Hier alleen wat een CSS-overgang is die beweging maakt.
   ============================================================================ */
/* de knoppen van papa: letter-voor-letter, het schuiven van het pijltje en het vlak achter de tekst. Op mobiel bestaan ze al niet. */
html[data-ssn-motion="reduced"] .btn-animate-chars__text span,
html[data-ssn-motion="reduced"] .btn-animate-chars__bg,
html[data-ssn-motion="reduced"] .button-icon_track,
html[data-ssn-motion="reduced"] .button-icon_arrow,
html[data-ssn-motion="reduced"] .icon-btn_bg,
html[data-ssn-motion="reduced"] .icon-btn_track,
html[data-ssn-motion="reduced"] .icon-btn_item { transition: none; }
/* de volgende cursor-etiket op de aanbod-stage (alleen desktop) */
html[data-ssn-motion="reduced"] .cursor { display: none; }

/* ============================================================================
   MINDER BEWEGING, STERKER (Dévin 02-10): ALLE knoppen en animaties, behalve de scrollbeweging (pinnen, stapelen, scrollen zelf) en de
   carrousels. Binnenkomende animaties zijn er meteen, hover en klik bewegen niets.
   ============================================================================ */
/* 1. Elke CSS-overgang is er niet (transition: none) en elke CSS-animatie is meteen klaar (1 ms: de laatste stand blijft, ook met fill-mode forwards; lopende lussen
   stoppen na één ronde). NIET een overgang van 1 ms: gemeten dat dan ScrollTrigger zijn plekken uit de oude stand leest (de browser houdt bij een lopende overgang in
   dezelfde frame de oude waarde vast), waardoor de tekstonthullingen op /nl/home.html nooit starten. De :not(#ssn-m) is geen id die bestaat: hij maakt de selector
   zwaarder dan élke klasse-regel van papa en van ons, zonder !important. Een carrousel (Swiper) zet zijn tempo inline op het element: dat wint van deze regel en blijft
   dus bewegen. GSAP-tweens loopt de klok van lib/motion.mjs (×100) voor. */
html[data-ssn-motion="reduced"] body *:not(#ssn-m),
html[data-ssn-motion="reduced"] body *:not(#ssn-m)::before,
html[data-ssn-motion="reduced"] body *:not(#ssn-m)::after { transition: none; animation-duration: .001s; animation-delay: 0s; animation-iteration-count: 1; scroll-behavior: auto; }

/* 2. Geen hover- en klikbeweging: het rustbeeld blijft staan. Gekleurde randen en vlakken mogen veranderen (dat is de aanwijzing dat het een knop is), maar niets schuift,
   draait of schaalt. Dit is papa's eigen blok voor max-width:991px (daar bestaan ze al niet) en dezelfde regels voor onze eigen knoppen. */
html[data-ssn-motion="reduced"] .btn-animate-chars:hover [data-button-animate-chars] span { transform: translateY(0em) rotate(0.001deg); }
html[data-ssn-motion="reduced"] .btn-animate-chars:hover .btn-animate-chars__bg { inset: 0; }
html[data-ssn-motion="reduced"] .btn-animate-chars:hover .button-icon_track,
html[data-ssn-motion="reduced"] .listing-card:hover .listing-card__go .button-icon_track { transform: translate(0, 0); }
html[data-ssn-motion="reduced"] .btn-animate-chars.is-navlink:not(.w--current):not([aria-current="page"]):hover .navlink_globe-item { transform: translate(0px, 70%); }
html[data-ssn-motion="reduced"] .pand-sheet-arrow:not(:disabled):hover .button-icon_track,
html[data-ssn-motion="reduced"] .pand-sheet-arrow:focus-visible .button-icon_track { transform: translate(0, 0); }
html[data-ssn-motion="reduced"] .aanbod-alle:hover .aanbod-alle-icoon svg,
html[data-ssn-motion="reduced"] .listings-bar.is-search .listings-bar__cell.is-searchtoggle:hover .lb-swap__i.is-b svg,
html[data-ssn-motion="reduced"] .listings-bar__chip .button-icon:hover svg,
html[data-ssn-motion="reduced"] .pand-sheet-close:hover .pand-ic-sluiten,
html[data-ssn-motion="reduced"] .pand-sheet-close:focus-visible .pand-ic-sluiten,
html[data-ssn-motion="reduced"] .ssnf-x:hover svg,
html[data-ssn-motion="reduced"] .ssn-toast__x:hover svg,
html[data-ssn-motion="reduced"] .ssn-inlog__x:hover svg { transform: none; }
html[data-ssn-motion="reduced"] .ssnf-slider:hover .ssnf-rng__h { transform: translate(-50%, -50%); }
html[data-ssn-motion="reduced"] .ssnf-rail__cell:not(.is-na):hover .ssnf-rail__num { transform: none; }
html[data-ssn-motion="reduced"] .ssnf-reset:active, html[data-ssn-motion="reduced"] .ssnf-x:active, html[data-ssn-motion="reduced"] .ssnf-row:active .ssnf-cbx,
html[data-ssn-motion="reduced"] .ssnf-segbtn:active, html[data-ssn-motion="reduced"] .ssnf-sub:active, html[data-ssn-motion="reduced"] .ssnf-pill:active,
html[data-ssn-motion="reduced"] .ssnf-wis:active, html[data-ssn-motion="reduced"] .ssnf-apply:active { transform: none; }
/* ============================================================
   GIDS · DE HEADER OP HET BEIGE PAPIER
   Op een Gids-pagina (body[data-thema="licht"], gezet door build-nl) is de pagina beige; header en footer blijven navy zoals op de rest van de site (spec
   2026-10-10-gids-lat-design.md §2, D1 en D2). Papa's balk is een navy glas op 60% en de menuvakjes hebben een beige waas van 5%: over beige oogt dat grijs (gemeten:
   balk #2a2420, vakjes .is-navlink #162432). Op de Gids ligt er daarom een massieve navy laag in de balk en staan de vakjes zonder waas, zodat de header één solide blok is.
   ============================================================ */
body[data-thema="licht"] { background-color: var(--ssn-surface); }
/* De pseudo-laag staat in .navbar-bg zelf; dat werkt ook op een telefoon, waar Webflow's interactie een eigen kleur als inline stijl zet. */
body[data-thema="licht"] .navbar-bg::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: #2a2420; pointer-events: none; }
body[data-thema="licht"] .nav .is-navlink { background-color: transparent; }
body[data-thema="licht"] .nav .is-navlink:hover { background-color: #DED3C514; }
/* ============================================================================
   GIDS-INGANG (/nl/guide en elk blad, Dévin 15-10, ontwerp 5.webp). lib/gids.mjs (gidsKopHtml) zet de kop in het beige vlak van de homepage:
   section_aanbod.is-gids > .padding-global > .cta-wrap.is-aanbod.is-gids, met de sticky naad (.aanbod-sticky-naad, 20) als broer erachter.
   Gekopieerd, niet nagebouwd:
   - het vlak: 20-aanbod-stage-home, standalone zoals .is-vragenlijst (42): marge P + N + G (35), radius die van de navbar (8px).
   - de naad: 20, hier sticky onderaan het scherm. Twee keer P hoog met een negatieve marge van één P.
   - de rubriekbalk: 69 (cijfer cursief, klein en grijs zoals in het megamenu, span-draai bij hover), hier in het vlak: vijf gelijke cellen met korte scheidingen.
     Onder 992 px scrolt de rij zijwaarts met de fades van de homepage-filters (zoals 69 op de telefoon).
   - de knop: papa's .btn-animate-chars .btn-secundair, de rand in de kleur van de lijnen (zoals 84). Op desktop staat hij tegen de scheiding: rand links, boven en onder, de scheiding
     is zijn rechterkant; hij knijpt dan alleen aan die drie kanten. Los (onder 992) houdt hij papa's eigen knop.
   - de bladen: papa's footer-link (vendor), dezelfde hover-dim (hover-spotlight) en het bolletje bij w--current.
   - het citaat: de eyebrow-letter (IvyPresto), recht en op 400 (de kit heeft rechtop alleen 400; schuin was 300).
   - de cijfers: Basic Grotesque cursief (Dévin 16-10; de kit heeft geen cursieve Grotesque, de browser zet hem schuin), kleiner dan de naam, grijs.
   - "Ontdek dit blad": papa's callout van de homepage-hero (callout-wrapper is-hero, callout-text, callout-line).
   - geen kruimels op de foto (Dévin 16-10): waar je bent zeggen de balk en het megamenu.
   Alle maten in em: de pagina schaalt met de letter van de site (12 px op 1440, papa's sprong op 991). Een maat in em = px op 1440 / 12.
   Zonder oranje: cijfers, telling en datum zijn grijs.
   ============================================================================ */
.section_aanbod.is-gids { margin-top: calc(var(--listings-header-h) + var(--listings-gap)); }   /* = de bovenkant van het grid op /nl/properties (35: P + N + G) */
.section_aanbod.is-gids .cta-wrap.is-aanbod { border-radius: var(--_layout---border-radius--8px); padding: 0 var(--_layout---padding-global--page-padding) var(--_layout---padding-global--page-padding); }
/* overflow: clip in plaats van papa's hidden: het vlak knipt nog op zijn radius, maar wordt geen scroll-doos, zodat iets erin kan plakken (de tijdbalk, 73). */
.section_aanbod.is-gids .cta-wrap.is-aanbod { overflow: clip; }
.gids-ingang { width: 100%; color: var(--_colors---swatch--black); font-family: var(--_fonts---fonts--paragraph); }
:where(.gids-ingang) :is(h1, h2, p, figure) { margin: 0; }
.gids-ingang a { color: inherit; text-decoration: none; }

/* --- Rubriekbalk (69) in het vlak: rand tot rand, niet plakkend, navy op beige, 58 px hoog, korte grijze scheidingen. Geen vaste breedtes (Dévin 17-10, ronde 33):
   elke cel is zo breed als zijn tekst plus een minimum aan beide kanten (1.5em), en wat er over is verdeelt flex gelijk over de vijf, dus de ruimte tussen
   tekst en scheiding is overal even groot. --- */
.cta-wrap.is-gids .gids-rubriekbalk { position: static; margin: 0 calc(-1 * var(--_layout---padding-global--page-padding)); background-color: transparent; color: inherit; }
.cta-wrap.is-gids .gids-rubriekbalk ol { flex-wrap: nowrap; gap: 0; padding: 0; }
.cta-wrap.is-gids .gids-rubriekbalk li { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: 4.8333em; padding: 0 1.5em; }
.cta-wrap.is-gids .gids-rubriekbalk li + li::before {
  content: ""; position: absolute; left: 0; top: 1.25em; bottom: 1.25em; width: 1px;
  background-color: var(--_colors---swatch--grey); opacity: .3;
}
.cta-wrap.is-gids .gids-rubriekbalk__link {
  display: flex; align-items: center; justify-content: center; gap: .7em; width: 100%;
  font-size: 1.1667em; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--_colors---swatch--black);
}
/* Op één regel (Dévins ontwerp van 17-10, ronde 33): de naam navy in gewone letters, het cijfer ervoor cursief en grijs, iets groter dan de naam (1.15em, Dévin 17-10);
   de scheidingen zacht. Het kruimelpad rechtsboven heeft dezelfde letter. */
.cta-wrap.is-gids .gids-rubriekbalk__nr { font-size: 1.15em; color: var(--_colors---swatch--grey); }
@media screen and (min-width: 992px) { .cta-wrap.is-gids .gids-rubriekbalk__nr { font-size: 1em; } }   /* desktop: even groot als de naam (Dévin 18-10, ronde 41) */

/* --- Dikke lijn boven en onder de kop, rand tot rand van het vlak --- */
.gids-ingang__lijn { display: block; height: .25em; margin: 0 calc(-1 * var(--_layout---padding-global--page-padding)); background-color: var(--_colors---swatch--black); }

/* --- De kop: drie kolommen 350 / 704 / 350 over de hele breedte van het vlak. De scheidingen lopen niet tot de lijnen: P vrij boven en onder --- */
.gids-ingang__kop {
  display: grid; grid-template-columns: minmax(0, 350fr) minmax(0, 704fr) minmax(0, 350fr);
  min-height: 19.6667em; margin: 0 calc(-1 * var(--_layout---padding-global--page-padding));
}
.gids-ingang__links, .gids-ingang__midden, .gids-ingang__rechts { position: relative; display: flex; flex-direction: column; min-width: 0; }
.gids-ingang__kop { --gids-kop-lijn: color-mix(in srgb, var(--_colors---swatch--grey) 50%, transparent); }
.gids-ingang__midden::before, .gids-ingang__rechts::before {
  content: ""; position: absolute; left: 0; top: var(--_layout---padding-global--page-padding); bottom: var(--_layout---padding-global--page-padding); width: 1px;
  background-color: var(--_colors---swatch--grey); opacity: .5;
}
.gids-ingang__links { justify-content: space-between; gap: 1.5em; padding: var(--_layout---padding-global--page-padding) 0 4.25em var(--_layout---padding-global--page-padding); }
/* Het citaat en zijn toelichting (ronde 37): alleen de zin tussen de aanhalingstekens in IvyPresto, het openingsteken hangt in de marge (zijn eigen breedte,
   .198em, gemeten), zodat de letters op de lijn van de kolom staan. De toelichting eronder in de letter van de lopende tekst. Zwaarder dan 400 kan niet:
   papa's Typekit-kit levert IvyPresto Headline alleen in 400 en 300 cursief. */
.gids-ingang__tekst { display: flex; flex-direction: column; row-gap: .75em; padding-right: 1.125em; }
.gids-ingang .gids-ingang__citaat {
  font-family: var(--_fonts---fonts--eyebrow); font-style: normal; font-weight: 400;
  font-size: 1.3333em; line-height: 1.375; letter-spacing: normal; text-indent: -.198em;
}
/* Tijdens het binnenkomen staat elke regel in een eigen blok (GIDS_TEKST_SCRIPT); alleen de eerste hangt in de marge. */
.gids-ingang .gids-ingang__citaat > * + * { text-indent: 0; }
.gids-ingang .gids-ingang__toelichting { font-size: 1.0833em; line-height: 1.45; color: var(--_colors---swatch--black); }
.gids-ingang__voet { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.gids-ingang .gids-ingang__telling { font-size: 1.0833em; line-height: 1.2; color: var(--_colors---swatch--grey); }

/* De knop: papa's secundaire knop, met navy tekst op het beige. */
.gids-ingang__knop { flex: none; }
.gids-ingang__knop .btn-animate-chars__text { color: var(--_colors---swatch--black); }
/* De rand in de kleur van de lijnen (Dévin 16-10, "in border kleur"): hetzelfde grijs op de helft als de scheidingen in de kop en de balk. */
.gids-ingang .gids-ingang__knop .btn-animate-chars__bg { border-color: color-mix(in srgb, var(--_colors---swatch--grey) 50%, transparent); }

.gids-ingang__midden { --gids-naam: min(8.5em, 15cqi, calc(175cqi / var(--tekens, 8))); container-type: inline-size; align-items: center; justify-content: center; padding: var(--_layout---padding-global--page-padding); text-align: center; }
.gids-ingang .gids-ingang__naam {
  /* IvyPresto, op dezelfde grootte, met de gewone letterafstand (Dévin 18-10, ronde 37: "verliefd geworden op een IvyPresto titel, zelfde grootte en gewicht,
     alleen normale letter-spacing"). Gewicht 400: het enige rechte gewicht in papa's kit. */
  font-family: var(--_fonts---fonts--eyebrow); font-size: var(--gids-naam); font-weight: 400; line-height: 1; letter-spacing: normal; text-transform: none;
  text-wrap: balance; hyphens: manual; overflow-wrap: normal;
}
.gids-ingang .gids-ingang__onder { margin-top: .5em; font-size: max(.875em, min(1.25em, calc(var(--gids-naam) * .25))); font-weight: 400; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: var(--_colors---swatch--black); text-wrap: balance; }
.gids-ingang__rechts { align-items: flex-end; padding: var(--_layout---padding-global--page-padding) var(--_layout---padding-global--page-padding) 4.25em 0; text-align: right; }
.gids-ingang .gids-ingang__rechts p { font-size: 1.3333em; line-height: 1.2; }
/* Het © staat precies tussen de naam en de datum (Dévin 17-10, ronde 33): automatische marges boven en onder verdelen de ruimte gelijk. De datum is een
   vak van 3.5em (op de hoogte van de knop) met de tekst in het midden; top schuift het © daarom een kwart van (dat vak min de regel van de naam) omlaag,
   zodat het midden van het © op het midden tussen de tekst van de naam en die van de datum ligt. */
.gids-ingang .gids-ingang__rechts .gids-ingang__copy { position: relative; top: calc((3.5em / 1.3333 - 1.2em) / 4); margin: auto 0; }
/* Op een blad staat er geen naam boven (ronde 34): het © ligt tussen de onderkant van het kruimelpad en de tekst van de datum, dus een kwart van het datumvak. */
.gids-ingang .gids-ingang__rechts .gids-kruimel.is-kop ~ .gids-ingang__copy { top: calc(3.5em / 1.3333 / 4); }
/* Het kruimelpad (Dévins ontwerp van 17-10, ronde 33): de cellen van 64 als één kader bovenin de kolom, links vast aan de verticale lijn (die er dwars doorheen
   loopt), rechts de kleine radius. Haarlijn in de kleur van de kolomlijn, geen vulling; elke cel is zijn woord plus gelijk verdeelde ruimte (zoals de stappen). */
.gids-ingang .gids-kruimel.is-kop { display: flex; flex-wrap: nowrap; align-self: stretch; margin: 0; }   /* de ruimte eronder maken de automatische marges van het © (ronde 34) */
/* Een lange bladnaam (ronde 38: "sommige blad titels zijn veel langer ... netjes afgesneden met puntjes"): een cel krimpt tot zijn naam niet meer past en de
   naam eindigt dan op "…"; de volledige naam staat in de title. De langste cel krimpt het meest (flex-shrink naar zijn breedte). */
.gids-kruimel.is-kop .gids-kruimel__cel {
  flex: 1 1 auto; min-width: 0; justify-content: center; height: 3em; padding: 0 1em; font-size: 1.1667em; letter-spacing: 0; text-transform: none;
  background: transparent; border-color: var(--gids-kop-lijn); color: var(--_colors---swatch--black);
}
/* Eén lijn tussen twee cellen (ronde 39: "de tussenlijnen zijn donkerder, zeker omdat ze overlappen"): de lijnkleur is half doorzichtig, dus twee randen over
   elkaar (64 schuift de cel 1px terug) waren dubbel zo donker. Hier heeft de volgende cel geen linkerrand: de rechterrand van de vorige is de lijn. */
.gids-kruimel.is-kop .gids-kruimel__cel + .gids-kruimel__cel { margin-left: 0; border-left-width: 0; }
.gids-kruimel.is-kop .gids-kruimel__cel:first-child { border-radius: 0; }
.gids-kruimel.is-kop .gids-kruimel__cel:last-child { border-radius: 0 var(--_layout---border-radius--4px) var(--_layout---border-radius--4px) 0; }
.gids-kruimel.is-kop a.gids-kruimel__cel:hover { background: transparent; border-color: var(--gids-kop-lijn); }
/* Geen vulling bij hover (ronde 36), wel de span-draai van de site-knoppen: dezelfde regels als de stappen in de balk (69, .gids-rubriekbalk__naam). */
/* De naam: één regel, met "…" als hij niet past. Ruimte boven en onder voor de staarten (de g van Eigendom viel weg onder overflow: hidden; ronde 38), met
   een negatieve marge zodat de cel even hoog blijft; de kopie die bij hover van onder komt staat daarom 1.5em lager (doos 1.2em + 2 x .1em). */
.gids-kruimel__naam { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; padding: .1em 0; margin: -.1em 0; }
.gids-kruimel__naam[data-button-animate-chars] { position: relative; }
.gids-kruimel__naam[data-button-animate-chars] > span { display: inline-block; position: relative; white-space: pre; text-shadow: 0 1.5em currentColor; transform: translateY(0) rotate(.001deg); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) and (pointer: fine) { a.gids-kruimel__cel:hover .gids-kruimel__naam[data-button-animate-chars] > span { transform: translateY(-1.5em) rotate(.001deg); } }
a.gids-kruimel__cel:focus-visible .gids-kruimel__naam[data-button-animate-chars] > span { transform: translateY(-1.5em) rotate(.001deg); }
html[data-ssn-motion="reduced"] .gids-kruimel__naam[data-button-animate-chars] > span { transition: none; transform: translateY(0) rotate(.001deg); }
/* De datum staat onderaan, op dezelfde hoogte als de knop (3.5em van de knop, hier in de letter van de datum). */
.gids-ingang .gids-ingang__rechts .gids-ingang__datum {
  display: flex; align-items: center; min-height: calc(3.5em / 1.0833); margin-top: 0;
  font-size: 1.0833em; color: var(--_colors---swatch--grey);
}
.gids-ingang__datum time { margin-left: .25em; white-space: nowrap; }

/* --- Het beeld: direct onder de lijn, vult het eerste scherm tot de naad, met een lichte navy laag zodat de callout erop leesbaar is --- */
.gids-ingang .gids-ingang__beeld, .gids-ingang .gids-ingang__beeld.is-blad {
  /* Rand tot rand van het vlak, zonder beige zijmarge (Dévin 17-10, ronde 33): dezelfde negatieve marge als de dikke lijn erboven. */
  /* De breedte staat vast: anders rekent aspect-ratio (onder 992) de breedte terug uit de hoogte die het script zet, en houdt de foto rechts op. */
  position: relative; width: calc(100% + 2 * var(--_layout---padding-global--page-padding)); margin: 0 calc(-1 * var(--_layout---padding-global--page-padding)); overflow: hidden; border-radius: 0 0 var(--_layout---border-radius--8px) var(--_layout---border-radius--8px);
  height: max(26em, calc(100svh - var(--listings-header-h) - var(--listings-gap) - 4.8333em - .25em - 19.6667em - 2 * var(--_layout---padding-global--page-padding)));
}
.gids-ingang__beeld img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
/* De laag: het navy van de site (--_colors---swatch--black, #2a2420) op een kwart. */
.gids-ingang__beeld::after { content: ""; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--_colors---swatch--black) 25%, transparent); pointer-events: none; }
/* "Ontdek dit blad": papa's callout van de homepage-hero (callout-wrapper is-hero: onderaan in het midden; callout-text 500, .01em, hoofdletters;
   callout-line 1px grijs, 1.5625em die de onderrand raakt). Hier is hij een link: alleen zo breed als de tekst, en klikbaar. Op de homepage verbergt
   papa hem op de telefoon (hide-mobile); hier staat hij er altijd, zoals in Dévins ontwerp. */
.gids-ingang .gids-ingang__ontdek { z-index: 1; left: 0; right: 0; width: max-content; margin: 0 auto; pointer-events: auto; color: var(--_colors---swatch--beige); }
.gids-ingang__ontdek:focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: .25em; }
/* --- De navy strook onder de foto (Dévin 18-10, ronde 34): P hoog, van rand tot rand van het vlak, met het vaste lijntje erin. Bij het laden ligt hij precies op
   de zichtbare helft van de onderbar (vul in lib/gids-strook.mjs); het lijntje ligt erboven (regel 11: navy boven de balk, beige eronder). De foto ligt boven de
   strook, zodat zijn ronde onderhoeken op navy staan; onder de strook krijgt het beige de omgekeerde hoekjes van de naad. Onder 992 is er geen naad en geen strook. --- */
.gids-ingang .gids-ingang__beeld { z-index: 7; }
.gids-ingang__gap { position: relative; z-index: 6; display: block; height: var(--_layout---padding-global--page-padding); margin: 0 calc(-1 * var(--_layout---padding-global--page-padding)); background-color: var(--_colors---swatch--black); }
.gids-ingang__gap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--_layout---border-radius--8px); background-color: var(--_colors---swatch--black); }
.gids-ingang__gap::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--_layout---border-radius--8px); pointer-events: none;
  background-repeat: no-repeat; background-size: var(--_layout---border-radius--8px) var(--_layout---border-radius--8px); background-position: left top, right top;
  background-image: radial-gradient(circle at 100% 100%, transparent calc(var(--_layout---border-radius--8px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--8px)),
                    radial-gradient(circle at 0% 100%, transparent calc(var(--_layout---border-radius--8px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--8px));
}
/* Het lijntje begint direct onder de foto (Dévin 18-10, ronde 35: "streepje moet zo beginnen (direct onder de afbeelding)"): het lijntje van de callout in
   de foto staat er niet meer (onzichtbaar, zodat "Ontdek dit blad" op zijn plek blijft); het vaste lijntje ligt in de navy strook, boven de onderbar. */
.gids-ingang .gids-ingang__ontdek .callout-line { visibility: hidden; }
/* Iets omlaag (Dévin 18-10, ronde 38: "dit moet iets omlaag net als homepage"): op de homepage loopt het lijntje zichtbaar van de tekst naar de rand; hier is
   het onzichtbaar en hield het toch zijn 1.5625em, zodat de tekst leek te zweven. Op desktop (waar de navy strook het lijntje overneemt) houdt hij alleen
   de ruimte die er thuis tussen tekst en lijntje zit plus .5em. */
@media screen and (min-width: 992px) { .gids-ingang .gids-ingang__ontdek .callout-line { height: .5em; } }
/* Het lijntje loopt door het navy dek van de naad (73, ronde 46), zodat het niet ophoudt waar het dek begint: --waas-h zet GIDS_AS_SCRIPT op de strook. */
.gids-ingang__gap-lijn { position: absolute; z-index: 3; top: 0; bottom: calc(-1 * var(--waas-h, 0em)); left: 50%; width: 1px; margin-left: -.5px; background-color: var(--_colors---swatch--grey); }
@media screen and (max-width: 991px) { .gids-ingang__gap { display: none; } }

/* --- De delen (demo-inhoud): papa's hiw-header, dan de bladen als footer-links --- */
.gids-ingang__deel { padding-top: var(--_sizes---size--80px); scroll-margin-top: 6em; }
.gids-ingang__deel .hiw-header { margin-bottom: var(--_sizes---size--32px); }
.gids-ingang__nr { font-family: var(--_fonts---fonts--paragraph); font-style: italic; color: var(--_colors---swatch--grey); }
.gids-bladen { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid currentColor; padding-top: var(--_sizes---size--24px); }
.gids-bladen .footer-link { margin-left: 0; font-size: 1.5em; }
.cta-wrap.is-gids .gids-bladen .footer-link:hover { color: var(--_colors---swatch--black); }
.gids-bladen .footer-link.is-volgt { opacity: .4; }


/* --- De naad: plakt onderaan het scherm tot het vlak op is. Twee keer P hoog tegen kieren bij lag, de helft hangt onder de schermrand --- */
.section_aanbod.is-gids .aanbod-sticky-naad {
  position: sticky; bottom: calc(-1 * var(--_layout---padding-global--page-padding));
  height: calc(2 * var(--_layout---padding-global--page-padding));
  margin-top: calc(-1 * var(--_layout---padding-global--page-padding));
  will-change: auto;
}
.section_aanbod.is-gids .aanbod-naad-hoek { width: var(--_layout---border-radius--8px); height: var(--_layout---border-radius--8px); }
.section_aanbod.is-gids .aanbod-naad-hoek.is-links {
  background: radial-gradient(circle at 100% 0%, rgba(42, 36, 32, 0) calc(var(--_layout---border-radius--8px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--8px));
}
.section_aanbod.is-gids .aanbod-naad-hoek.is-rechts {
  background: radial-gradient(circle at 0% 0%, rgba(42, 36, 32, 0) calc(var(--_layout---border-radius--8px) - .5px), var(--_colors---swatch--black) var(--_layout---border-radius--8px));
}

/* --- Desktop: de knop staat tegen de scheiding. Rand links, boven en onder; de scheiding is zijn rechterkant. Hij knijpt zoals elke
   site-knop (papa: inset .125em bij hover), maar niet aan de rechterkant. Onder 992 zet papa het knijpen uit; daar is hij een losse knop. --- */
@media screen and (min-width: 992px) {
  .gids-ingang .gids-ingang__voet .gids-ingang__knop .btn-animate-chars__bg {
    border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;
  }
  .gids-ingang .gids-ingang__voet .btn-animate-chars.gids-ingang__knop:hover .btn-animate-chars__bg { inset: .125em 0 .125em .125em; }
  html[data-ssn-motion="reduced"] .gids-ingang .gids-ingang__voet .btn-animate-chars.gids-ingang__knop:hover .btn-animate-chars__bg { inset: 0; }
}
@media screen and (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .gids-ingang .gids-ingang__voet .btn-animate-chars.gids-ingang__knop:hover .btn-animate-chars__bg { inset: 0; }
}

/* --- Onder 992 (de header-breakpoint): sneller verticaal. De naam bovenaan over de hele breedte, daaronder citaat en colofon naast
   elkaar. De rubrieken scrollen zijwaarts met de fades van de homepage-filters (GIDS_FADE_SCRIPT zet .is-scrolled en .is-end). --- */
@media screen and (max-width: 991px) {
  .section_aanbod.is-gids .aanbod-sticky-naad { display: block; }

  .cta-wrap.is-gids .gids-rubriekbalk ol {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    --gids-fade: 1.6em; --fade-l: 0px; --fade-r: var(--gids-fade);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: --fade-l .25s ease, --fade-r .25s ease;
  }
  .cta-wrap.is-gids .gids-rubriekbalk ol.is-scrolled { --fade-l: var(--gids-fade); }
  .cta-wrap.is-gids .gids-rubriekbalk ol.is-end { --fade-r: 0px; }
  .cta-wrap.is-gids .gids-rubriekbalk ol::-webkit-scrollbar { display: none; }
  .cta-wrap.is-gids .gids-rubriekbalk li { flex: 0 0 auto; min-height: 3.5em; padding: 0 var(--_layout---padding-global--page-padding); }

  .gids-ingang__kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
  .gids-ingang__midden { order: -1; grid-column: 1 / -1; padding: var(--_sizes---size--32px) var(--_layout---padding-global--page-padding); }
  /* De scheiding onder de naam: een haarlijn met P vrij aan beide kanten, de lijn tussen links en rechts blijft verticaal. */
  .gids-ingang__midden::before { top: auto; bottom: 0; left: var(--_layout---padding-global--page-padding); right: var(--_layout---padding-global--page-padding); width: auto; height: 1px; }
  .gids-ingang__midden { --gids-naam: min(4.5em, 15cqi, calc(175cqi / var(--tekens, 8))); }
  .gids-ingang__links { padding: var(--_layout---padding-global--page-padding); }
  .gids-ingang__rechts { padding: var(--_layout---padding-global--page-padding); }
  .gids-ingang .gids-kruimel.is-kop { margin-left: calc(-1 * var(--_layout---padding-global--page-padding)); }

  .gids-ingang .gids-ingang__beeld, .gids-ingang .gids-ingang__beeld.is-blad { height: auto; aspect-ratio: 16 / 9; }
}
/* --- Telefoon: één kolom. Naam, citaat met telling en knop, dan het colofon, gescheiden door haarlijnen met P vrij --- */
@media screen and (max-width: 767px) {
  .gids-ingang__kop { grid-template-columns: minmax(0, 1fr); }
  .gids-ingang__midden { --gids-naam: min(4.5em, 18cqi, calc(175cqi / var(--tekens, 8))); }
  .gids-ingang__links { gap: var(--_sizes---size--24px); }
  .gids-ingang__rechts { align-items: flex-start; text-align: left; }
  .gids-ingang__rechts::before { top: 0; bottom: auto; left: var(--_layout---padding-global--page-padding); right: var(--_layout---padding-global--page-padding); width: auto; height: 1px; }
  .gids-ingang .gids-ingang__rechts .gids-ingang__copy, .gids-ingang .gids-ingang__rechts .gids-kruimel.is-kop ~ .gids-ingang__copy { top: 0; margin: 0; }
  .gids-ingang .gids-kruimel.is-kop { margin: 0 0 1.25em; }
  .gids-kruimel.is-kop .gids-kruimel__cel:first-child { border-radius: var(--_layout---border-radius--4px) 0 0 var(--_layout---border-radius--4px); }
  .gids-ingang .gids-ingang__rechts .gids-ingang__datum { min-height: 0; margin-top: .5em; }
  .gids-ingang__deel { padding-top: var(--_sizes---size--56px); }
  /* De stappen in de balk en de slogan onder de naam: één maat, één spatiëring (Dévin 16-10), allebei iets kleiner dan op desktop. */
  .cta-wrap.is-gids .gids-rubriekbalk__link { font-size: 1.0833em; }
  .gids-ingang .gids-ingang__onder { font-size: 1em; letter-spacing: .06em; }
  /* De foto vult het scherm onder de header (Dévin 16-10): scrol je hem tegen de header, dan loopt hij tot de onderrand (100lvh min de header en de
     marge erboven, dezelfde als de bovenkant van het vlak). Nooit lager dan 24em, zodat hij op een lage telefoon geen streep wordt. lvh is het scherm
     zonder balken; staan de balken van de browser er nog, dan valt de onderste strook (100lvh - 100svh) erachter. Daarom staat de callout zoveel hoger
     en loopt zijn lijntje zoveel langer door: de tekst blijft leesbaar boven de balk en het lijntje raakt de onderrand van de foto. */
  .gids-ingang .gids-ingang__beeld, .gids-ingang .gids-ingang__beeld.is-blad { height: max(24em, calc(100lvh - var(--listings-header-h) - var(--listings-gap))); aspect-ratio: auto; }
  .gids-ingang .gids-ingang__ontdek .callout-line { height: calc(1.5625em + 100lvh - 100svh); }
}
/* Telefoon (25): het vlak loopt rand tot rand. Geen navy kader en geen navy naad (Dévin 16-10): de naad zit in de dock van Safari. Zolang het vlak
   over de onderrand ligt, zet lib/dock.mjs de strook die de balk kleurt in het beige van het vlak (.ssn-dock.is-vlak, hieronder); daarna weer navy. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  .section_aanbod.is-gids .aanbod-sticky-naad { display: none; }
}
.ssn-dock.is-vlak { background-color: var(--ssn-surface); }
html[data-ssn-motion="reduced"] .cta-wrap.is-gids .gids-rubriekbalk ol { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cta-wrap.is-gids .gids-rubriekbalk ol { transition: none; }
}

/* De kop van het vlak komt rustig binnen (ronde 51, Dévin 23-10: "alleen de hoofd titel en misschien het citaat ... de citaat hetzelfde als elke vraag in het dossier op de
   getypte manier, en de titel niet schuivend maar de fadein ... 'nietig van rechtswege' alleen nu met inkomende ease"). GIDS_TEKST_SCRIPT zet de letters (.gids-l) en
   daarna .is-in; na afloop staat de gewone tekst er weer. De titel: elke letter van .2 naar vol, zonder verschuiving (73, [data-gids-woord]), met de uitloop van de site.
   Het citaat: een kopie van de getypte kop van een vraag (85-vragenlijst-stap2.css, .vl-scherm__kop): per letter omhoog en zichtbaar.
   Ronde 58 (Dévin 25-10: "de titel moet zelfde inkomende animatie als de cuote"): de titel krijgt dezelfde getypte beweging als het citaat. */
/* Een inline-block erft text-indent: zonder deze nul schoof elke letter van het citaat de hangende inspringing (-.198em) naar links en liepen ze in elkaar. */
.gids-ingang__kop .is-letters :is(.vl-woord, .gids-l) { text-indent: 0; }
.gids-ingang__kop .is-letters .gids-l { display: inline-block; }
.gids-ingang__kop :is(.gids-ingang__naam, .gids-ingang__citaat).is-letters .gids-l { opacity: 0; transform: translateY(.35em); transition: opacity .4s var(--vl-zacht), transform .6s var(--vl-uit); }
.gids-ingang__kop :is(.gids-ingang__naam, .gids-ingang__citaat).is-letters.is-in .gids-l { opacity: 1; transform: translateY(0); }

/* Tot GIDS_TEKST_SCRIPT (lib/gids-strook.mjs) een kop of alinea in regels heeft geknipt, staat hij verborgen, zoals papa's [data-gsap-reveal]. Het script zet de
   klasse alleen als GSAP en SplitText er zijn en beweging mag, zet elke tekst na het knippen zichtbaar, en een vangnet van 3 s haalt de klasse weg als het
   knippen niet lukt. Op de ingang en op elk blad (deze kop staat op allebei). */
html.gids-tekst-wacht [data-gids-regels] { visibility: hidden; }

/* --- De delen van de ingang (ronde 43, Dévin 19-10: "maak de gidspagina met de technieken uit de basis van freehold pagina ... minder lijnen ... alleen waar het
       echt uitmaakt ... de links naar de bladen moeten blokken worden zonder radius met een chevron box ... transparant met een navy chevron ... meer variatie ...
       speel met de tijdlijn en tussen onderdelen"; plan docs/superpowers/specs/2026-10-18-gids-ingang-delen-design.md, ronde 43). Elk deel is een hoofdstuk van
       het blad (73: .gids-hst, .gids-hst__raster, .gids-vak, kop, lede, plaatsregel), met zijn knoop op de middenlijn; geen rand boven een deel en geen lijn tussen
       de bladen. Lijnen alleen waar iets aan de tijdlijn hangt: de middenlijn, de knopen, de takken naar de bladen van III en IV, de stappen van II, het slot. --- */
.gids-papier.is-ingang .gids-deel { scroll-margin-top: 6em; }
.gids-papier.is-ingang .gids-deel > .padding-global > .gids-knoop.is-deel::before { counter-increment: none; content: attr(data-nr); }
.gids-papier.is-ingang .gids-deel .gids-hst__raster { row-gap: var(--g3); }
.gids-papier.is-ingang .gids-deel .gids-stuk__kop { max-width: 15em; }

/* Een blad als blok (ronde 50, Dévin: "de blad knoppen wel een standaard beige achtergrond geven want de tijdlijn mag er niet doorheen": het beige van het vlak, zodat de
   tijdlijn en het kruis achter een blok verdwijnen): een contour (ronde 47, Dévin: "de kleur vlakken waar ze op liggen gewoon een contour"), de naam zoals in het megamenu (72: papa's footer-link,
   hoofdletters, gewicht 400, de letterafstand van heading-s, 1.75em in het menu = 1.4em hier, waar de tekst 1.25 keer zo groot is), de vraag eronder, rechts papa's
   chevron-spoor in het vierkantje van de rail (68: navy rand, transparant). Ronde 49 (Dévin 19-10): de naam staat stil ("dat doen de listings op de properties pagina
   ook niet"). Ronde 51 (Dévin 23-10: "ik vind de vorige chevron box mooier met border, en de bladen knoppen toch geen radius"): het vakje terug, geen ronde hoeken. Hover
   op het hele blok schuift de chevron en maakt de contour navy (de curve van de footer-link); een blad zonder pagina staat gedimd en doet niets. */
.gids-blokken { display: flex; flex-direction: column; gap: .5em; }
.gids-blok { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.2em; min-height: 4.6em; box-sizing: border-box; padding: .9em .9em .9em 1.25em;
  border: 1px solid var(--gids-lijn-zacht); border-radius: 0; background-color: var(--ssn-surface); color: var(--_colors---swatch--black); text-decoration: none;
  transition: border-color .4s cubic-bezier(.625, .05, 0, 1); }
.gids-blok__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: .45em; min-width: 0; }
.gids-blok__naam { font-family: var(--_fonts---fonts--paragraph); font-weight: 400; font-size: 1.4em; line-height: 1.1; letter-spacing: var(--_headings---heading-s--letter-spacing); text-transform: uppercase; }
/* De naam breekt nooit: een blok is één regel naam. Op de telefoon (geen megamenu) is hij kleiner, zodat de langste naam ("Onderhoud en vaste kosten") past. */
.gids-blok__naam { white-space: nowrap; }
@media screen and (max-width: 991px) { .gids-blok__naam { font-size: 1.05em; } }
/* De blokken sluiten aan elkaar (Dévin 19-10, ronde 47: "je kan de subbladen knoppen ook aan elkaar sluiten in sectie 1 en andere secties als dat past"): papa's cellen
   tegen elkaar, zoals het kruimelpad (64): geen tussenruimte, elke rand gedeeld (min 1px, de rij krijgt die 1px terug). In I wordt het één balk van vier cellen, in II
   tot en met IV een stapel; de plekken van V houden elk hun eigen blok onder hun kaart. Bij hover komt het blok naar voren, zodat zijn navy rand rondom te zien is. */
.gids-deel:not(.is-plekken) .gids-hst__raster .gids-blokken { gap: 0; padding: 1px 0 0 1px; }
.gids-deel:not(.is-plekken) .gids-hst__raster .gids-blokken > .gids-blok { margin: -1px 0 0 -1px; }
.gids-deel .gids-hst__raster .gids-blokken > a.gids-blok:is(:hover, :focus-visible) { z-index: 3; }
/* Tussen 768 en 991 (de letter van de site is daar groter) is een rij van vier of drie te krap voor een naam: deel I staat daar in twee kolommen en de plekken van
   deel V onder elkaar, zoals op de telefoon (de lijnen onder de blokken en door de kaarten zijn er pas vanaf 992). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .gids-deel.is-rij .gids-hst__raster .gids-blokken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gids-deel.is-plekken .gids-hst__raster .gids-deel__plekken { grid-template-columns: minmax(0, 1fr); row-gap: 2.4em; }
}
.gids-blok__sub { font-size: .78em; line-height: 1.4; color: var(--_colors---swatch--grey); }
.gids-blok__pijl { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.8em; height: 2.8em; border: 1px solid var(--_colors---swatch--black); background: transparent; color: var(--_colors---swatch--black); }
/* Een blad zonder pagina (ronde 44, Dévin: "moeten de blad knoppen niet een navy span?"): de naam blijft navy; de vraag en het vakje gedimd, en geen hover. */
.gids-blok.is-volgt { cursor: default; }
.gids-blok.is-volgt :is(.gids-blok__sub, .gids-blok__pijl) { opacity: .4; }
.gids-blok:focus-visible { outline: 1px solid var(--_colors---swatch--black); outline-offset: .25em; }
@media (hover: hover) and (pointer: fine) {
  a.gids-blok:hover .gids-blok__pijl .button-icon_track { transform: translate(50%, 0); }
  a.gids-blok:hover { border-color: var(--_colors---swatch--black); }
}
a.gids-blok:focus-visible .gids-blok__pijl .button-icon_track { transform: translate(50%, 0); }

/* De tijdlijn loopt onder de kaarten door (ronde 49, Dévin: "de eilanden moeten de contouren al hebben staan, dan moet de tijdlijn eronder het kruis maken"): de rij
   kaarten ligt boven de middenlijn (73: .gids-as, laag 2 en 3), zoals een knoop (laag 4); in de goten is de lijn te zien, achter een eiland en een blok niet. */
.gids-deel__plekken { z-index: 4; }

/* De indeling per deel, vanaf 768px op het raster van het blad (twaalf kolommen, de middenlijn in de goot tussen 6 en 7). */
@media screen and (min-width: 768px) {
  /* I: kop links, alinea rechts onderaan; de vier bladen als één rij eronder, de middenlijn loopt tussen de middelste twee door. */
  .gids-deel.is-rij .is-kop { grid-column: 1 / 7; grid-row: 1; }
  .gids-deel.is-rij .is-tekst { grid-column: 8 / 13; grid-row: 1; align-self: end; }
  .gids-deel.is-rij .is-bladen { grid-column: 1 / 13; grid-row: 2; }
  .gids-deel.is-rij .gids-blokken { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gids-goot); }
  /* De lijn door de kaarten van V (ronde 44): op halve hoogte, achter de eilanden, groeit vanuit de middenlijn naar beide kanten. Deel I heeft hem niet meer (ronde 49):
     de balk tekent zichzelf vanuit de lijn. */
  .gids-blokken__lijn { position: absolute; z-index: 0; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--gids-lijn-zacht); transform-origin: center; }
  /* II: de bladen links, kop en alinea rechts; de stappen eronder op de lijn. */
  .gids-deel.is-stappen .is-bladen { grid-column: 1 / 7; grid-row: 1 / span 2; padding-right: 3em; }
  .gids-deel.is-stappen .is-kop { grid-column: 8 / 13; grid-row: 1; }
  .gids-deel.is-stappen .is-tekst { grid-column: 8 / 13; grid-row: 2; }
  .gids-deel.is-stappen .is-figuur { grid-column: 1 / 13; grid-row: 3; }
  /* III: kop en alinea links, de bladen rechts van de lijn; IV gespiegeld. Elk blok hangt met een tak aan de middenlijn (ruimte: 3em plus de halve goot). */
  .gids-deel.is-rechts .is-kop { grid-column: 1 / 6; grid-row: 1; }
  .gids-deel.is-rechts .is-tekst { grid-column: 1 / 6; grid-row: 2; }
  .gids-deel.is-rechts .is-bladen { grid-column: 7 / 13; grid-row: 1 / span 2; padding-left: 3em; }
  .gids-deel.is-links .is-bladen { grid-column: 1 / 7; grid-row: 1 / span 2; padding-right: 3em; }
  .gids-deel.is-links .is-kop { grid-column: 8 / 13; grid-row: 1; }
  .gids-deel.is-links .is-tekst { grid-column: 8 / 13; grid-row: 2; }
  /* V: kop links, alinea rechts; de plekken als één rij eronder, elk met zijn blad. */
  .gids-deel.is-plekken .is-kop { grid-column: 1 / 7; grid-row: 1; }
  .gids-deel.is-plekken .is-tekst { grid-column: 8 / 13; grid-row: 1; align-self: end; }
  .gids-deel.is-plekken .is-figuur { grid-column: 1 / 13; grid-row: 2; }
}
/* De takken van III en IV: van de middenlijn naar het blok, op halve hoogte; ze groeien vanuit de lijn als het eind van de tijdlijn het blok haalt (data-raak op
   elk blok, --r van GIDS_AS_SCRIPT; 73: .gids-hst[data-raak] .gids-tak). Onder 992 geen middenlijn, dus geen takken. */
.gids-blok > .gids-tak { top: 50%; width: calc(3em + .5 * var(--gids-goot)); }
.gids-blok > .gids-tak.is-naar-links { right: 100%; transform-origin: left center; }
.gids-blok > .gids-tak.is-naar-rechts { left: 100%; transform-origin: right center; }
@media screen and (max-width: 991px) { .gids-blok > .gids-tak, .gids-blokken__lijn { display: none; } }

/* II Investeren: de vijf stappen als knopen (vol: van ons), met eronder gearceerd wat daar gebeurt. Ronde 47 (Dévin: "waarom heeft die niet de exact zelfde
   animatie en stijl als elk bolletje met zij lijnen en animaties ... heel vet ... levendig"): elke stap is de knoop van het blad (73: de ring die getekend wordt, de
   vulling, het cijfer 01 tot 05 dat met fade, scale en blur binnenkomt), in de stroom van de lijst in plaats van op de rand van een hoofdstuk, met een tak naar zijn
   tekst. Het ingangscript (lib/gids-kaart.mjs) zet --kp en --kn per stap, GIDS_AS_SCRIPT --r en is-getoond (data-raak op elke stap). */
.gids-deel__knopen { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 1.5em; margin: 0; padding: 0; list-style: none; counter-reset: gids-knoop; }
.gids-deel__knopen::before { content: ""; position: absolute; top: 1.28em; left: 1.28em; right: calc(20% - 1.28em); height: 1px; background-color: var(--gids-lijn-zacht); }
.gids-deel__knopen li { position: relative; display: flex; flex-direction: column; gap: .8em; font-size: .95em; line-height: 1.35; }
.gids-deel__knopen .gids-knoop.is-stap { position: relative; top: auto; left: auto; margin: 0; flex: none; }
/* De stap: het werkwoord, met eronder één regel wat er gebeurt (ronde 52), in de letter en het grijs van de vraag onder een blok. */
.gids-deel__stap { display: flex; flex-direction: column; gap: .35em; }
.gids-deel__stap-uitleg { font-size: .82em; line-height: 1.4; color: var(--_colors---swatch--grey); }
.gids-ingang p.gids-deel__daar { display: flex; align-items: center; gap: 1em; margin: 2.2em 0 0; max-width: none; font-size: .9em; color: var(--_colors---swatch--grey); }   /* geen maat van een alinea (73): de regel staat op de lijn */
.gids-deel__arcering { position: relative; flex: none; width: 4.5em; height: 1.2em; border: 1px solid var(--gids-lijn-zacht); border-radius: var(--_layout---border-radius--4px); overflow: hidden; }

/* V Locatie (ronde 44, Dévin: "de map ... zonder blauwe zee, kaart contour en beige eilanden ... kleine oranje stipjes ... als je hovert over zo'n gebied moet er
   een stip groeien en zeggen hoeveel ... geen inzoom functie ... jakarta met contour java"): per plek de kaart zonder kader (lib/gids-kaart.mjs), het eiland in de beige
   van de pandkaart (75) met een dunne contour, Java als lijn zoals in de vragenlijst (86, .kk-java), een oranje stip per pand. GIDS_KAART_SCRIPT laat bij hover de
   grote stip van het dichtstbijzijnde gebied groeien, met een strakke tooltip erboven. Geen eigen chevron (ronde 45: "geen dubbele chevron"): het blok eronder heeft hem. */
.gids-deel__plekken { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gids-goot); margin: 0; padding: 0; list-style: none; container-type: inline-size; }
.gids-deel__plek { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .9em; min-width: 0; }
.gids-kaart { position: relative; display: block; aspect-ratio: 4 / 3; color: var(--_colors---swatch--black); text-decoration: none; }
.gids-kaart__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }   /* absoluut: het vak houdt zijn 4:3, ook voor een hoog eiland */
/* Warm beige (ronde 45, Dévin: "de mappen moeten echt beige zijn, want de grijzige die je nu hebt zit niet in het palet"): de beige van het vlak met een vleug van het
   oranje van het palet, zodat het eiland net donkerder en warm is in plaats van de koele swatch-beige. */
.gids-kaart__land { fill: color-mix(in srgb, var(--ssn-surface) 92%, var(--ssn-accent) 8%); stroke: var(--gids-lijn-zacht); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.gids-kaart__java { fill: none; stroke: var(--gids-lijn-zacht); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* De dichtheid (ronde 48): vlekken in de tint van het land (het merkoranje), vervaagd in elkaar overlopend binnen het eiland. Samen hooguit een warme tint, nooit een
   vol oranje vlak (navy werd grijs op het beige); de grote oranje stip blijft het accent. */
.gids-kaart__dichtheid { opacity: .6; }
.gids-kaart__dichtheid circle { fill: var(--ssn-accent); fill-opacity: .1; }
/* De stip van een gebied (ronde 52, Dévin 24-10: "de locatie puntjes die moeten wel altijd op de map zichtbaar zijn ... ze groeien van niks naar de kleine witte puntjes en zijn
   hoverbaar"; ronde 53, 25-10: "hele kleine WITTE puntjes zonder oranje border ... als hij groeit is hij ook wit aan de buitenkant, het oranje aan de binnenkant moet een
   vette cubic bezier hebben met een delay op het witte er omheen"). Altijd een kleine witte stip; bij hover groeit hij, en daarna (.12 s later) komt de oranje kern op met
   de veer van de filterbalk (55, .ssnf-rail__sel). Bij binnenkomen poppen de stippen op in een golf van links naar rechts (--golf-d en .is-golf uit GIDS_KAART_SCRIPT).
   Ronde 54 (Dévin 25-10: "kleiner en niet letterlijk wit maar het beige van de pagina"): het beige van het vlak, kleiner. */
.gids-kaart__groot { fill: var(--ssn-surface); stroke: none; transform-box: fill-box; transform-origin: center; transform: scale(.26); transition: transform .45s var(--gids-ease); }
.gids-kaart__groot.is-actief { transform: scale(1); transition-delay: 0s; }
.gids-kaart__kern { fill: var(--ssn-accent); pointer-events: none; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .3s var(--gids-ease); }
.gids-kaart__groot.is-actief + .gids-kaart__kern { transform: scale(1); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .12s; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-ssn-motion="reduced"]) .gids-deel__plekken:not(.is-golf) .gids-kaart__groot { transform: scale(0); }
  html:not([data-ssn-motion="reduced"]) .gids-deel__plekken.is-golf:not(.is-golf-klaar) .gids-kaart__groot:not(.is-actief) { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) var(--golf-d, 0s); }
}
.gids-kaart__tip { position: absolute; z-index: 2; left: 0; top: 0; padding: .45em .75em; translate: -50% calc(-100% - .5em); background-color: var(--_colors---swatch--black); color: var(--ssn-surface);
  font-size: .72em; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.gids-kaart.is-tip .gids-kaart__tip { opacity: 1; }
/* De schaalstreep (ronde 45): linksonder, een haarlijn zo lang als 20 km op deze kaart (--schaal: een deel van de breedte, uit lib/gids-kaart.mjs), met kleine
   streepjes aan de uiteinden en de maat erboven, in de letter van de rubriek. Op elke kaart even lang: één schaal. */
.gids-kaart__schaal { position: absolute; left: 0; bottom: 0; width: calc(var(--schaal) * 100%); padding-bottom: .45em; border-bottom: 1px solid var(--gids-lijn); font-size: .62em; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--_colors---swatch--grey); }
.gids-kaart__schaal::before, .gids-kaart__schaal::after { content: ""; position: absolute; bottom: -1px; width: 1px; height: .5em; background-color: var(--gids-lijn); }
.gids-kaart__schaal::before { left: 0; } .gids-kaart__schaal::after { right: 0; }
.gids-ingang p.gids-deel__plaats { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0; max-width: none; }
.gids-deel__plaats b { font-family: var(--_fonts---fonts--eyebrow); font-weight: 400; font-size: 1.6em; line-height: 1; }
.gids-deel__plaats span { font-size: .8em; color: var(--_colors---swatch--grey); font-variant-numeric: tabular-nums; }
/* De lijn dwars door de kaarten (ronde 44: "verbind ze dan ook weer met zo'n groeiende lijn"): op halve hoogte van de kaarten (een kaart is een derde van de rij min
   de goten, 4:3), achter de eilanden, en groeiend vanuit de middenlijn zoals de rij van deel I. */
.gids-blokken__lijn.is-kaarten { z-index: 0; top: calc((100cqi - 2 * var(--gids-goot)) / 3 * .375); }

/* De tijdlijn op de ingang: deel II zet zijn vijf stappen op de lijn zelf (vanaf 992): de koop als tijdlijn, de tekst om en om links en rechts, en als laatste stuk
   de lijn gearceerd: wat bij het kantoor daar gebeurt. Onder 992px loopt de middenlijn van de foto tot knoop I, daarna heeft elke knoop zijn eigen lijn (zoals op
   het blad, 73; ronde 46). */
@media screen and (min-width: 992px) {
  .gids-deel.is-stappen .gids-deel__knopen { grid-template-columns: minmax(0, 1fr); row-gap: 1.4em; }
  .gids-deel.is-stappen .gids-deel__knopen::before { display: none; }
  .gids-deel.is-stappen .gids-deel__knopen li, .gids-deel.is-stappen p.gids-deel__daar { display: grid; grid-template-columns: minmax(0, 1fr) 2.56em minmax(0, 1fr); column-gap: 1.6em; align-items: center; }
  .gids-deel.is-stappen .gids-deel__knopen .gids-knoop.is-stap { grid-column: 2; grid-row: 1; justify-self: center; }
  /* Geen tak meer tussen knoop en tekst (ronde 52, Dévin 24-10: "de stappen moeten ook blijven zonder de tussenlijn"): de tekst staat naast zijn knoop. */
  .gids-deel.is-stappen .gids-deel__knopen li > span:last-child { grid-column: 3; grid-row: 1; }
  .gids-deel.is-stappen .gids-deel__knopen li:nth-child(odd) > span:last-child { grid-column: 1; text-align: right; align-items: flex-end; }
  .gids-deel.is-stappen p.gids-deel__daar { margin-top: 1.4em; }
  .gids-deel.is-stappen .gids-deel__arcering { grid-column: 2; grid-row: 1; justify-self: center; width: 1.1em; height: 4.5em; background-color: var(--ssn-surface); }
  .gids-deel.is-stappen p.gids-deel__daar > span:last-child { grid-column: 3; grid-row: 1; }
}

/* De telefoon (Dévin 19-10: "het lijstje ... goed te bereiken en altijd clean onder elkaar"): één kolom; in elk deel eerst kop en alinea, dan de figuur, dan de
   bladen, en in elk deel dezelfde blokken over de volle breedte. */
@media screen and (max-width: 767px) {
  .gids-deel .gids-hst__raster > .is-kop { order: 1; } .gids-deel .gids-hst__raster > .is-tekst { order: 2; }
  .gids-deel .gids-hst__raster > .is-figuur { order: 3; } .gids-deel .gids-hst__raster > .is-bladen { order: 4; }
  .gids-deel__knopen { grid-template-columns: minmax(0, 1fr); row-gap: 1.2em; }
  .gids-deel__knopen::before { top: 1.04em; bottom: 1.04em; left: 1.04em; right: auto; width: 1px; height: auto; }
  .gids-deel__knopen li { flex-direction: row; align-items: center; gap: 1em; }
  .gids-deel__plekken { grid-template-columns: minmax(0, 1fr); row-gap: 2.4em; }
}

/* De lijn door de kaarten van V groeit mee met de tijdlijn (--r van GIDS_AS_SCRIPT, zoals de lijnen van een band in 73): samen met de middenlijn het kruis. */
@media (prefers-reduced-motion: no-preference) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-blokken__lijn[data-raak] { transform: scaleX(clamp(0, calc(var(--r, 1) * 2), 1)); }
}

/* --- De volgorde van binnenkomen (ronde 47, Dévin: "de inkomende animaties van de hele pagina moeten beter gepland worden"; ronde 49: "luxe is niet alles annimeren,
       alleen snappen hoe design werkt en wat aandacht nodig heeft"). Per deel, eenmalig:
   1. de lijn haalt de knoop en tekent hem (GIDS_AS_SCRIPT);
   2. de kop komt per regel binnen (GIDS_TEKST_SCRIPT, door het ingangscript in lib/gids-kaart.mjs op 60% van het scherm gezet, waar de lijn is); rubriek, inleiding
      en alinea komen als één geheel op, zonder beweging;
   3. de knoppen tekenen zich met de tijdlijn mee (hieronder) en blijven staan als je terugscrolt; hun inhoud komt per cel op, met het gebaar van het cijfer in een knoop;
   4. de stappen van II: ring, cijfer en tekst lopen met de scroll mee, zoals elke knoop op het blad;
   5. de kaarten van V staan er al, met contour en kleur; alleen de lijn erdoor groeit uit de middenlijn en maakt het kruis.
   Zonder script en bij Minder beweging staat alles er meteen. --- */
@media (prefers-reduced-motion: no-preference) {
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel__knopen .gids-knoop.is-stap { --k: var(--kp, 1); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel__knopen .gids-knoop.is-stap::before { opacity: var(--kn, 1); scale: var(--kn, 1); filter: blur(calc((1 - var(--kn, 1)) * .2em)); }
  /* de tekst van een stap komt met zijn cijfer: dezelfde --kn, zonder schaal (tekst schaalt niet) */
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel__knopen li > .gids-deel__stap { opacity: var(--kn, 1); filter: blur(calc((1 - var(--kn, 1)) * .2em)); }

  /* Ronde 62 (Dévin 26-10: "de gids blad knoppen ... die moeten er gewoon zijn"): de knoppen van de ingang tekenen zich niet meer met de tijdlijn; ze staan er meteen. */
}
@media (prefers-reduced-motion: no-preference) {
  /* de pil onder de stappen wordt getekend met de scroll (ronde 53): de clip volgt het eind van de lijn (--ap van het ingangscript), daarna komt de tekst (--apn) */
  html.gids-teken-loopt:not([data-ssn-motion="reduced"]) .gids-deel__daar .gids-deel__arcering { clip-path: inset(-1px -1px calc((1 - var(--ap, 0)) * (100% + 2px) - 1px) -1px); }
  html.gids-teken-loopt:not([data-ssn-motion="reduced"]) .gids-deel__daar > span:last-child { opacity: var(--apn, 0); filter: blur(calc((1 - var(--apn, 0)) * .2em)); }
}

/* --- De cursor-tooltip (ronde 47, Dévin: "de tooltips op de mappen moeten uit de site komen ... de span telkens naar de volgende draait van onderen ... met telkens
   de iconische span animatie en breedte aanpassing"): een kopie van die van Mijn dossier (84, .cursor[data-vl-cursor]): navy op het beige, het oude woord rolt
   omhoog weg en het nieuwe komt van onder, letter voor letter, en de pil groeit of krimpt mee. Alleen met een muis vanaf 992 (37); op een telefoon toont een tik
   op de kaart de vaste tip (.gids-kaart__tip, hierboven). Het script staat in lib/gids-kaart.mjs. --- */
.cursor[data-gids-cursor] { background-color: var(--_colors---swatch--black); color: var(--ssn-surface); transition: opacity .17s var(--vl-zacht); }
.cursor[data-gids-cursor].gids-aan { opacity: 1; }
.cursor[data-gids-cursor] .cursor-text { transition: width .45s var(--vl-uit); }
.cursor[data-gids-cursor] .cursor-line { justify-content: flex-start; }
.cursor[data-gids-cursor] .cursor-line.is-in span { transform: translateY(0); }
.cursor[data-gids-cursor] .cursor-line.is-out span { transform: translateY(-100%); }
.cursor[data-gids-cursor] .cursor-line.is-wacht span { transform: translateY(100%); }
.cursor[data-gids-cursor] .cursor-line.is-weg span { transform: translateY(-200%); transition-duration: .25s; }
/* Op de kaart (ronde 53): geen rol maar een snelle crossfade, zodat snel langs de gebieden gaan rustig blijft */
.cursor[data-gids-cursor] .cursor-line.is-uitvaag span { transform: translateY(0); opacity: 0; transition: opacity .12s var(--vl-zacht); }
.cursor[data-gids-cursor] .cursor-line.is-vaag-start span { transform: translateY(0); opacity: 0; transition: none; }
.cursor[data-gids-cursor] .cursor-line.is-vaag span { transform: translateY(0); opacity: 1; transition: opacity .16s var(--vl-zacht) .04s; }   /* een oudere regel: in één keer doorgeduwd (ronde 52) */
.cursor[data-gids-cursor] .cursor-line.is-direct span { transition: none; }
.cursor[data-gids-cursor] .gids-meet { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; font-weight: 500; }
html[data-ssn-motion="reduced"] .cursor[data-gids-cursor] { display: block; }
/* Met de muis zegt de cursor het; de vaste tip van de kaart is alleen voor een tik. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) { .gids-kaart__tip { display: none; } }

/* --- De stapels van II, III en IV staan tegen de tijdlijn (Dévin 19-10, ronde 47: "of moeten ze dan direct tegen de lijn aan komen"). Vanaf 992 is de lijn de
   binnenrand van de stapel en vervallen de takken; de stapel tekent zich vanuit de lijn (hierboven, ronde 49). --- */
@media screen and (min-width: 992px) {
  .gids-deel.is-rechts .is-bladen { padding-left: 0; }
  .gids-deel:is(.is-links, .is-stappen) .is-bladen { padding-right: 0; }
  /* Ronde 51 (Dévin 23-10: "de lijn die aan de tijdlijn vast zit moet precies onder de tijdlijn vallen niet 1 ernaast"): de middenlijn is 1px breed en staat met zijn
     midden op het midden van de goot; de rand van de stapel moet daarom een halve pixel verder, anders liggen er twee haarlijnen naast elkaar (gemeten: .5px). */
  .gids-deel.is-rechts .gids-hst__raster .gids-blokken { margin-left: calc(-.5 * var(--gids-goot) - .5px); }
  .gids-deel:is(.is-links, .is-stappen) .gids-hst__raster .gids-blokken { margin-right: calc(-.5 * var(--gids-goot) - .5px); }
  .gids-deel:is(.is-rechts, .is-links, .is-stappen) .gids-blok > .gids-tak { display: none; }
}

/* De zin onder het colofon van de ingang op één regel als het past (ronde 54, Dévin 25-10: "moet die zin op 1 regel staan als dat mogelijk is ... maak dit voor alle
   apparaten gewoon heel netjes"): hij mag zo breed als de balk links van het arceringsvlak (73, .gids-colofon__merk: 27em in de letter van de balk = 31,8em in die van de
   zin, plus wat lucht). Op desktop past hij dan op één regel; tussen 768 en 991 breekt hij naast het vlak af in plaats van erdoorheen; op de telefoon (geen vlak) de
   volle breedte. Ronde 58: de zin staat ook op elk blad, dus deze regel geldt nu voor elk colofon (73, bij .gids-colofon__noot). */

/* --- Begin met een plan (Dévin 26-10: "zorg dat de nieuwe bladen indeling ook in de gids pagina verwerkt word"): de strook vóór deel I (lib/gids.mjs planHtml), een kopie
       van de rij van deel I zonder knoop. Op de telefoon blijft I het middenmoment van 73 (de knoop midden onder de foto, de middenlijn loopt erin): die regel geldt
       voor het eerste deel na de lijn, dus ook als de strook ervoor staat. De strook zelf heeft geen knoop en dus ook geen lijn ernaast. --- */
@media screen and (max-width: 991px) {
  .gids-krant > .gids-as + .gids-hst.is-plan > .padding-global::after { display: none; }
  .gids-krant > .gids-as + .gids-hst.is-plan + .gids-hst { position: relative; }
  .gids-krant > .gids-as + .gids-hst.is-plan + .gids-hst > .padding-global > .gids-knoop { left: 50%; margin-left: -1.3em; }
  .gids-krant > .gids-as + .gids-hst.is-plan + .gids-hst > .padding-global::after { left: calc(-1 * var(--gids-rand)); transform-origin: center; }
}

/* --- De vier plannen als trap (Dévin 27-10 en 28-10): vanaf 992px vier blokken die aan elkaar sluiten (de gedeelde rij hierboven). Ze beginnen als hoge trap (elke trede een
       hele rij boven de vorige) en zakken, als je naar beneden scrolt, naar een lage trap (een halve rij per trede), niet plat. De ruimte erboven is alleen die van de lage trap
       (rijen 1 tot 3 van .5fr, de blokken in rij 4 van 1fr); de hoge trap steekt daar bovenuit, in de lege ruimte erboven. --r (0 tot 1) zet het script op de nav (data-trap):
       0 als de onderkant van de rij het scherm binnenkomt, 1 als de rij op het midden van het scherm staat. Terug scrollen spoelt terug; zonder script of bij Minder beweging
       staan ze plat in één rij. Onder 992 staan de plannen onder elkaar. --- */
@media screen and (min-width: 992px) {
  .gids-deel.is-plan .gids-hst__raster .gids-blokken { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: .5fr .5fr .5fr 1fr; }
  .gids-deel.is-plan .gids-blokken > .gids-blok { grid-row: 4; }
  .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(1) { grid-column: 1; }
  .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(2) { grid-column: 2; }
  .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(3) { grid-column: 3; }
  .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(4) { grid-column: 4; }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(2) { transform: translateY(calc(-1 * (100% - 1px) * (1 - .5 * var(--r, 0)))); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(3) { transform: translateY(calc(-2 * (100% - 1px) * (1 - .5 * var(--r, 0)))); }
  html.gids-as-loopt:not([data-ssn-motion="reduced"]) .gids-deel.is-plan .gids-blokken > .gids-blok:nth-child(4) { transform: translateY(calc(-3 * (100% - 1px) * (1 - .5 * var(--r, 0)))); }
  /* Het label staat boven het eerste blok, in rij drie van dezelfde cel; het raakt niets (pointer-events). */
  .gids-deel.is-plan .is-kop { grid-column: 1 / 13; grid-row: 2; align-self: stretch; display: grid; grid-template-rows: .5fr .5fr .5fr 1fr; pointer-events: none; }
  .gids-deel.is-plan .is-kop > .gids-rubriek { grid-row: 3; align-self: end; margin: 0; padding-bottom: .9em; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .gids-deel.is-plan .gids-hst__raster .gids-blokken { grid-template-columns: minmax(0, 1fr); }
  .gids-deel.is-plan .is-bladen { grid-column: 1 / 13; grid-row: 2; }
}
/* =====
   Het contactformulier (/nl/contact, Dévin 19-10)
   De velden zijn die van stap 4 van het dossier (lib/vragenlijst.mjs velden4). De algemene regels (de naam in drie vakken, het landvak, de
   melding onder een veld) staan in 85-vragenlijst-stap2.css en gelden overal; hier alleen de regels die daar op [data-vl-stap="4"] staan,
   gekopieerd voor [data-ct-form]. Spec: docs/superpowers/specs/2026-10-19-contactpagina-design.md.
   ===== */
[data-ct-form] [data-validate].is--error input, [data-ct-form] [data-validate].is--error textarea { border-color: var(--ssn-accent); }   /* = stap 4: het oranje van het foutteken, niet papa's rood */
[data-ct-form] [data-validate].is--error .vl-naamveld { border-color: var(--ssn-accent); }
[data-ct-form] [data-validate].is--error .vl-naamveld > .vl-naamdeel { border-color: var(--_colors---swatch--grey); }   /* de tussenlijnen blijven grijs; alleen het kader kleurt */
[data-ct-form] [data-validate].is--error .vl-naamveld > .vl-naamdeel--achter { border-right: 0; }
[data-ct-form] .form-input, [data-ct-form] .form-input::placeholder { text-overflow: ellipsis; }
[data-ct-form] .vl-telveld { position: relative; }
[data-ct-form] .vl-land { color: var(--_colors---swatch--beige); }
/* De knop terwijl het bericht onderweg is: één klik telt (contact.js), en dat zie je. */
[data-ct-verstuur].is-bezig { opacity: .6; cursor: progress; pointer-events: none; }
/* Het mailadres in het foutblok: onderstreept zoals de link in stap 4 (.vl-vinklink). */
.ct-maillink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Papa's bedank- en foutblok lagen als laag over de hele hero (position: absolute; inset: 0%): het foutblok legde zijn tint over het formulier, zodat
   je niet opnieuw kon versturen, en zijn zin viel weg. Hier staan ze op hun plek in de kolom: het bedankblok waar het formulier stond (contact.js
   verbergt het formulier), het foutblok als papa's oranje strook onder de knop. Zijn eigen kleuren, tint, letter en teken blijven. */
[data-ct-wrap] > .form-notifcation { position: relative; inset: auto; }
[data-ct-wrap] > .w-form-done .form-notifcation_wrapper { padding-top: 4em; padding-bottom: 4em; }
/* De melding onder een veld strak onder het veld, zoals in stap 4 (.5em, de padding van .vl-melding__p): papa's groep zet .75em tussen elk kind
   (gap), en dan kostte ook een dichte melding die ruimte onder elk veld. De negatieve marge neemt die gap terug. */
[data-ct-form] .form-field-group > .vl-veldmelding { margin-top: -.75em; }
/* Na versturen gaat de focus naar de bedankkop (voor een schermlezer); de rand van de browser hoort daar niet bij. */
[data-ct-klaar] [tabindex="-1"]:focus { outline: none; }

/* ── Het voorwaardenvinkje en de reclameschakelaar van het dossier (Dévin 19-10). Gekopieerd uit 82-vragenlijst.css ([data-vl-form]), 85-vragenlijst-stap2.css
   ([data-vl-stap="4"]) en 92-cookiekaart.css (de maat van het vakje), voor [data-ct-form]. Een effen oranje vlak zonder vink (Dévin 17-10). De zin bij een leeg
   vakje is er alleen voor een schermlezer: in beeld pulst het vakje (contact.js puls, = questionnaire.js). ── */
[data-ct-form] .form_checkbox-icon { font-size: max(var(--_paragraphs---paragraph-regular--font-size), 11px); --vl-vak: calc(2em - 2px); position: relative; flex: 0 0 auto; box-sizing: border-box; width: var(--vl-vak); height: var(--vl-vak); margin: 0;
  border: 1px solid var(--_colors---swatch--grey); border-radius: 0; background: transparent; transition: background .24s var(--vl-uit), border-color .24s var(--vl-uit); }
[data-ct-form] .form_checkbox:hover:not(:has(.vl-vinklink:hover)) .form_checkbox-icon:not(.w--redirected-checked) { border-color: var(--_colors---swatch--beige); }
[data-ct-form] .form_checkbox-icon.w--redirected-checked { background: var(--ssn-accent); border-color: var(--ssn-accent); }
[data-ct-form] .form_checkbox:has(input:focus-visible) .form_checkbox-icon { outline: 2px solid var(--_colors---swatch--beige); outline-offset: 2px; }
[data-ct-form] .form_checkbox-label { font-weight: 400; line-height: 1.4; }
[data-ct-form] .form_checkbox { display: flex; align-items: center; gap: .9em; margin: 0; padding: 0; }
[data-ct-form] .form_checkbox::before, [data-ct-form] .form_checkbox::after { content: none; }
[data-ct-form] .form_checkbox-icon.is-puls { animation: vl-puls .9s var(--vl-uit) 1; }
html[data-ssn-motion="reduced"] [data-ct-form] .form_checkbox-icon.is-puls { animation: none; border-color: var(--ssn-accent); }
[data-ct-form] .vl-vink-tweede { margin-top: .6em; }
[data-ct-form] .vl-schakel { display: flex; align-items: center; gap: .9em; cursor: pointer; }
[data-ct-form] .vl-schakel__in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
[data-ct-form] .vl-schakel__t { line-height: 1.4; }
[data-ct-form] .vl-verplicht { opacity: .7; }   /* = stap 4 (css/85): het sterretje gedimd beige, niet papa's oranje */
[data-ct-form] .vl-veldmelding[data-vl-veldfout="toestemming"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[data-ct-form] .vl-vinklink { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
[data-ct-form] .vl-vinklink:hover, [data-ct-form] .vl-vinklink:focus-visible { opacity: .8; }

/* ── Papa's balk met gegevens, zijn eigen dikke balk (Dévin 25-10: "ik wil toch dat je de dikke footer balk terug brengt maar die hetzelfde werkt in onze stijl"; 19-10 was hij
   lager en waren de iconen platte vakken). Hoogte (6em), indeling en de omkaderde iconknoppen zijn weer papa's eigen CSS (shared-ssn.css); onze kleuren komen uit de
   omkleuring en 05-beeld-bescherming.css (het WhatsApp-icoon beige, niet groen). Hier alleen nog: de tekst van mail en adres links (onder) en de hero die meegroeit. ── */
/* Desktop: papa's hero was precies 100vh en zijn balk ligt absoluut onderin. Met de meldingen open wordt het formulier langer en schoof het onder de balk. Nu groeit de
   hero mee, en houdt hij onderin de ruimte van de balk plus de rand vrij. */
@media (min-width: 992px) { .contact-wrapper:has(.contact-specs) { height: auto; min-height: 100vh; padding-bottom: calc(6em + 3em); } }   /* 6em = papa's balk (.cs-col_item) */
/* Het vinkje in het bedankblok: ons geanimeerde vinkje (.ssn-vink, css/85), groter, en het tekent zich in zodra het blok er staat (contact.js zet .is-klaar). */
[data-ct-klaar] .ssn-vink { width: 3em; }
[data-ct-klaar].is-klaar .ssn-vink { visibility: visible; transition: visibility 0s; }
[data-ct-klaar].is-klaar .ssn-vink__lijn { stroke-dashoffset: 0; transition: stroke-dashoffset .34s cubic-bezier(.22,1,.36,1) .2s; }

/* De tekst in de boxen met mail en adres links uitgelijnd (Dévin 24-10: "lijn het adres en e-mailadres in de boxen links uit"): papa's vakken zetten label en tekst in het
   midden van de box. De vakken met een icoon (Chat met ons, Volg ons) blijven zoals ze zijn. */
.contact-specs .cs-col_item:not(.is-horizontal) { align-items: flex-start; text-align: left; }
.contact-specs .cs-col_item:not(.is-horizontal) > * { text-align: left; }
@media (max-width: 991px) { .contact-specs .cs-col_item:not(.is-horizontal) { padding-left: 1.25em; padding-right: 1.25em; } }
/* ============================================================================
   MAILVOORKEUREN (/nl/email-preferences, spec 2026-10-24-uitschrijven-mailvoorkeuren-design.md; markup: lib/mailvoorkeuren.mjs)
   De pagina is de kop van het dossier met daaronder één uitklap in de stijl van de pandpagina (.pand-sheetwrap/.pand-sheet, 62): navy, 1px
   grijze rand, ronde bovenhoeken, komt één keer van onderen omhoog (de pagina-code zet .is-open op .mv-wrap), zonder kruisje. De tekst is papa's
   tekstblok van /nl/privacy en /nl/terms (ronde 2, hieronder), de schakelaar is de navy variant van de Gids-poort (.vl-schakel, 92) en de voet die van
   de cookiekaart (92). Hieronder staat ALLEEN de lay-out daarvan op de navy uitklap, de lettermaat van de status en de
   kleuren in tokens (92 schrijft ze voor beige, onder .ssn-consent). Staat (op verzoek, nummer 99) ná 95-minder-beweging, dat anders bewust laatst staat: de regels hier gelden alleen voor .mv-* en 95 kent die niet, dus de cascade
   van de andere pagina's verandert niet; de ene Minder-beweging-regel voor deze uitklap staat hier zelf. Maten in em (LEESMIJ regel 9). */
body.mv-pagina { background-color: var(--_colors---swatch--black); color: var(--_colors---swatch--beige); }
.mv-sheet { --kaart-in: 1.4em; --kaart-duur: .6s; --kaart-ease: cubic-bezier(.16, 1, .3, 1); --kaart-bijzaak: .7; }
.mv-sheet [hidden] { display: none; }
.mv-sheet :focus-visible { outline: 1px solid var(--_colors---swatch--beige); outline-offset: 2px; }
.mv-sheet .mv-kop:focus { outline: none; }
html[data-ssn-motion="reduced"] .mv-wrap .pand-sheet, html[data-ssn-motion="reduced"] .mv-wrap.is-open .pand-sheet { transition: none; }

/* Ronde 2 (Dévin 24-10: "volle breedte gebruiken van uitklap veld niet zon miniboxje, meer witruimte minder scheidings lijnen, een beetje dezelfde
   font stijl als in de terms en privacy pagina's"). De tekst is papa's tekstblok van /nl/privacy en /nl/terms (.legals-wrapper > .rich-text-regular:
   h1, h2, p met zijn eigen maten), over de hele breedte van de uitklap met de marge van de site (.padding-global). De rijen hebben ruimte in plaats van
   lijnen; alleen de voet houdt de ene lijn van de cookiekaart. */
.mv-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mv-scroll > .padding-global { padding-top: var(--_sizes---size--64px); padding-bottom: var(--_sizes---size--64px); }

/* Ronde 3 (Dévin 24-10: "ziet er nog iets te goedkoop uit. misschien toch iets kleiner en gedefinieerdere margins"): het raster van de site (12 kolommen,
   .container-col-04 / -08 = een derde en twee derde). Links de titel en de intro, die blijven staan als de lijst scrolt; rechts de lijst. Kleinere maten:
   de titel op kopmaat S, de rijnamen op alineamaat L in hoofdletters, de uitleg op M, zoals de alinea's van /nl/privacy. */
.mv-raster { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--_sizes---size--64px); align-items: start; }
.mv-links { position: sticky; top: 0; }
.mv-tekst .rich-text-regular .mv-kop { margin: 0; font-size: var(--_headings---heading-s--font-size); line-height: 1; }
.mv-tekst .rich-text-regular .mv-intro { margin: var(--_sizes---size--24px) 0 0; max-width: 24em; }
.mv-voor { white-space: nowrap; }
.mv-melding { margin-top: var(--_sizes---size--32px); }
.mv-melding p { margin: 0; }
.mv-melding .mv-aanmelden { margin-top: var(--_sizes---size--8px); }
.mv-aanmelden a.text-link { color: inherit; text-decoration: underline; }

.mv-lijst { margin: 0; }
.mv-rij { display: flex; align-items: center; justify-content: space-between; column-gap: var(--_sizes---size--40px); padding: var(--_sizes---size--32px) 0; }
.mv-rij__tekst { flex: 1 1 auto; min-width: 0; }
.mv-tekst .rich-text-regular .mv-rij__naam { margin: 0; font-size: var(--_paragraphs---paragraph-l--font-size); line-height: 1.2; }
.mv-tekst .rich-text-regular .mv-rij__uitleg { margin: var(--_sizes---size--8px) 0 0; max-width: 32em; opacity: var(--kaart-bijzaak); }
.mv-sheet .ssnf-row__c.mv-rij__vast { flex: 0 0 auto; margin-left: 0; padding-right: 0; font-size: .8em; line-height: 1; text-align: right; opacity: var(--kaart-bijzaak); }   /* ALTIJD AAN is geen keuze: gedimd */
.mv-sheet .ssnf-row__c { line-height: 1; }
.mv-schakel { display: flex; align-items: center; flex: 0 0 auto; }

/* De lijst in drie groepen (054, Dévin 24-10): het kleine kopje van Mijn dossier (.vl-paneel__klein, 84) boven elke groep, ruimte ertussen in plaats van lijnen.
   Bij Nieuw aanbod de keuze hoe vaak: de kleine keuzeschakelaar (91) in beige op navy; --vl-ink kleurt het woord HOE VAAK (.vl-valuta__l, 84). */
.mv-groep + .mv-groep { margin-top: var(--_sizes---size--48px); }
.mv-groep__naam { display: block; }
.mv-groep__naam + .mv-rij { padding-top: var(--_sizes---size--16px); }
.mv-ritme { --vl-ink: var(--_colors---swatch--beige); --vl-vlak: var(--_colors---swatch--black); margin-top: var(--_sizes---size--16px); }

/* De voet: de voet van de cookiekaart (92) met zijn ene lijn, de knoppen rechts op hun eigen breedte; de melding na het opslaan staat ervoor. */
.mv-voet { flex: 0 0 auto; align-items: center; justify-content: flex-end; padding-left: var(--_layout---padding-global--page-padding); padding-right: var(--_layout---padding-global--page-padding); }
.mv-voet .ssn-consent__knop { flex: 0 0 auto; min-width: 16em; }
.mv-live { flex: 1 1 auto; margin: 0; font-size: var(--_paragraphs---paragraph-regular--font-size); line-height: 1.4; }
.mv-live:empty { display: block; }
.mv-voet .btn-animate-chars[aria-disabled="true"] { opacity: .6; pointer-events: none; }

/* Telefoon: de knoppen delen de breedte (zoals de cookiekaart), de melding gaat erboven. Twee lange knoppen passen alleen met de kleinere knopletter. */
@media (max-width: 991px) {
  .mv-raster { grid-template-columns: 1fr; }
  .mv-links { position: static; margin-bottom: var(--_sizes---size--48px); }
}
@media (max-width: 767px) {
  .mv-scroll > .padding-global { padding-top: var(--_sizes---size--40px); padding-bottom: var(--_sizes---size--40px); }
  .mv-links { margin-bottom: var(--_sizes---size--32px); }
  .mv-rij { column-gap: var(--_sizes---size--24px); padding: var(--_sizes---size--24px) 0; }
  .mv-voet { flex-wrap: wrap; padding-left: var(--_sizes---size--12px); padding-right: var(--_sizes---size--12px); }
  .mv-voet .ssn-consent__knop { flex: 1 1 0; min-width: 0; }
  .mv-live { flex: 1 0 100%; }
  .mv-live:empty { display: none; }
}
@media (max-width: 479px) {
  .mv-voet .btn-animate-chars { padding-left: .5em; padding-right: .5em; }
  .mv-voet .btn-animate-chars__text { font-size: var(--_sizes---size--12px); letter-spacing: 0; }
}