/* Tijdelijke schone entrypoint voor de stapsgewijze NY-CSS-audit.
   De import blijft alleen zolang de blokken één voor één worden gemigreerd. */
@import url('/assets/css/custom/site.css');  /* BEWUST zonder `layer()`: zie de kop van dat bestand. */

/* Dit BESTAND staat in `@layer site`: de cascade-lagen leggen de rangorde vast
   (`@layer framework, site, theme, type, item` — later wint), en opmaak die een redacteur in
   het CMS zet hoort boven de stylesheets van de site te staan.

   `site.css` hierboven staat er bewust BUITEN, en dat is een andere keuze met een andere reden:
   dat bestand is de plek voor de uitzonderingen die wél over het CMS heen moeten. Zie de kop
   daar. Wat je hier neerzet is gewoon site-CSS en hoort dus in de laag. */
@layer site {
/* Lange links in CMS-tekst mogen op elk teken afbreken, zodat privacy- en
   informatiepagina's op smalle schermen niet horizontaal uitlopen. */
.prose a{overflow-wrap:anywhere}

/* De fotogalerij krijgt een rustige achtergrond achter de kaarten. */
.layer--cards:has(.ds-media_album_category-title) > .layer__bg{
  background-color:var(--theme-color-8)
}

/* De CTA-indicator op fotokaarten is een vierkante pijlknop. */
.card__cta{width:34px;height:34px;border-radius:0;box-sizing:border-box}

/* NY-header: de framework-module levert state en responsive gedrag; deze site-laag
   bepaalt alleen de maatvoering en uitlijning van de CMS-header. */
.site-header__inner {
  width: 100%;
  box-sizing: border-box;
  max-width: var(--maxw, 1200px);
  margin-inline: auto;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-header__main { width: 100%; }
.site-header__main > .site-header__inner { min-height: 92px; }
.site-logo { display: block; flex: 0 0 auto; line-height: 0; padding-block: 8px; }
.site-logo__img {
  display: block;
  width: clamp(150px, 19vw, 250px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.site-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 0;
  margin-left: auto;
}
.site-nav { display: flex; align-items: center; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  display: block;
  color: var(--theme-color-1, var(--ink, #1e2a3a));
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.site-nav__link:hover { text-decoration: none; }
.site-nav__ctas--main,
.site-nav__ctas--mobile,
.site-nav__ctas--top { display: flex; align-items: center; gap: 8px; }
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .4rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  min-width: max-content;
}
.site-nav__cta:hover { text-decoration: none; }
.site-nav__cta-text { white-space: nowrap; }
.site-header__utility .site-header__inner { min-height: 36px; }

/* CTA-labels blijven op normale smalle schermen op één regel; op zeer smalle
   schermen mag een lang label wel afbreken om buiten beeld vallen te voorkomen. */
.btn .button--text,
.cms-cta .button--text { white-space: nowrap; }
@media (max-width: 380px) {
  .btn .button--text,
  .cms-cta .button--text { white-space: normal; }
}
@media (max-width: 767px) {
  .site-header__inner,
  .site-header__main > .site-header__inner { min-height: 72px; }
  .site-header__tools { gap: 14px; }
  .site-logo { padding-left: 0; }
  .site-logo__img { width: clamp(145px, 48vw, 210px); }
  .layer--usps[data-type="1"][data-view="inline"] .usps__title { font-size: 15px; }
  .site-nav__ctas--main { display: none; }
  .site-nav__list { gap: 0; }
  .site-header--two-row .site-header__utility .site-header__contact { display: none; }
  .site-header--two-row .site-header__utility .site-header__inner {
    flex-wrap: nowrap;
    justify-content: flex-end;
    overflow: hidden;
  }
  .site-header--two-row .site-header__utility .site-nav__ctas--top {
    flex-wrap: nowrap;
    min-width: max-content;
  }
}

/* De framework-weergave bepaalt de uitlijning van USP's; alleen de horizontale
   binnenruimte blijft site-specifiek. */
.layer--usps[data-type="1"][data-view="inline"] .layer__inner {
  padding-inline: 1rem;
}

/* In het mobiele zijmenu staat de hoofd-CTA los van de twee taalkeuzes.
   De volgorde komt uit de CMS-positie: eerst de hoofdknop, daarna de talen. */
.site-drawer .site-nav__ctas--sidemenu {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  justify-content: center;
  column-gap: .5em;
  row-gap: .75rem;
}
.site-drawer .site-nav__ctas--sidemenu .site-nav__cta:first-child {
  grid-column: 1 / -1;
  width: auto;
  justify-self: center;
}
.site-drawer .site-nav__ctas--sidemenu .site-nav__cta:nth-child(n+2) {
  width: auto;
  min-width: 0;
  width: 42px !important;
  padding-inline: .5rem !important;
  gap: .25rem !important;
  justify-content: center;
}
.site-drawer .site-nav__ctas--sidemenu .site-nav__cta:nth-child(2) { grid-column: 2; }
.site-drawer .site-nav__ctas--sidemenu .site-nav__cta:nth-child(3) { grid-column: 3; }

/* NY-header: menu-label, sluit/open-icoon en taalvlaggen vormen samen
   één site-specifieke navigatievariant; menu-inhoud en typografie blijven CMS-gestuurd. */
.site-header__menu-toggle,
.site-header .sidemenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 1001px) {
  .site-header .sidemenu-trigger { width: auto; }
}
.site-header__menu-label { letter-spacing: .04em; }
.site-header .sidemenu-trigger > svg,
.site-header .sidemenu-trigger > .site-header__menu-icon { flex: 0 0 24px; }
.site-header__menu-icon { display: block; width: 24px; height: 24px; }
.site-header__menu-toggle .site-header__menu-icon--close,
.site-header .sidemenu-trigger .site-header__menu-icon--close { display: none; }
.site-header__menu-toggle.is-active .site-header__menu-icon--open { display: none; }
.site-header__menu-toggle.is-active .site-header__menu-icon--close { display: block; }
.site-header__util .cms-cta--icon-only {
  --bg: transparent;
  --fg: currentColor;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}
.site-header__util .cms-cta--icon-only:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.site-header__topbar .site-header__util { gap: 5px; }
.site-header__topbar .site-header__contact { padding-left: 0; padding-right: 0; }
.site-header__topbar .site-header__contact + .cms-cta--icon-only { margin-left: 10px; }
.site-header__topbar .cms-cta--icon-only + .cms-cta--icon-only { margin-left: 0; }

/* De bibliotheekrand wordt alleen geactiveerd door de CMS-klasse op design_media. */
.module-col__media.library-edge-bottom-right {
  --library-edge-cut: clamp(28px, 3.5vw, 72px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--library-edge-cut)), calc(100% - var(--library-edge-cut)) 100%, 0 100%);
}

/* NY-uitzonderingen voor de titelvorm en de kaartenknoppenrij. De inhoudelijke
   titel- en knopwaarden blijven uit CMS/design slots komen. */
.hero-title-frame { display: inline-block; }
.layer--cards .layer__foot { text-align: center }

/* Kleine informatiekaarten binnen kolommen: afwijkende icoonmaat, kaartvulling
   en gelijke hoogtes zijn NY-specifiek; kleurwaarden blijven CMS-gestuurd. */
.layer__col .layer--cards > .layer__sc > .layer__inner {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
.layer__col .layer--cards.cards-feature .layer__cards-grid {
  gap: 38px 40px;
  grid-auto-rows: 1fr;
}
.layer__col .layer--cards.cards-feature .card {
  background: var(--theme-color-7);
  clip-path: none;
}
.layer__col .layer--cards.cards-feature .card__inner { display: block }
.layer__col .layer--cards.cards-feature .card__media {
  position: static;
  aspect-ratio: auto;
  width: 64px;
  height: 64px;
  margin: 27px 0 15px 19px;
  overflow: visible;
}
.layer__col .layer--cards.cards-feature .card__media img {
  position: static;
  width: 64px;
  height: 64px;
  object-fit: contain;
  transition: none;
}
.layer__col .layer--cards.cards-feature .card:hover .card__media img { transform: none }
.layer__col .layer--cards.cards-feature .card__body { padding: 0 19px 6px }
.layer__col .layer--cards.cards-feature .card__title {
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.layer--cards.cards-feature .card__title { margin-bottom: 17px }

/* Titel en pijl vormen samen één kaartvoet. De algemene kaart-CTA staat absoluut onderin,
   maar bij deze fotokoppelingen hoort de pijl naast de titel op dezelfde middenlijn te staan. */
#main-content:has(.ds-media_album_category-title) .layer--cards .card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#main-content:has(.ds-media_album_category-title) .layer--cards .card__title {
  margin: 0;
  padding-right: 0;
}
#main-content:has(.ds-media_album_category-title) .layer--cards .card__cta {
  position: static;
  flex: 0 0 34px;
}

/* Pakketkaarten: de chamfer is een bewuste NY-vorm; de prijs gebruikt het
   eigen CMS-slot, niet de kleur van de omliggende sectietagline. */
.layer--cards.cards-price .card,
.layer--cards.cards-feature .card {
  --card-cut: clamp(28px, 4.5vw, 56px);
  clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
}
.layer--cards.cards-price .card__subtitle {
  color: var(--theme-color-7);
}

/* Footerindeling voor NY: logo en socials delen de bovenrij; daaronder volgen
   contact en linkkolommen. De breedte sluit aan op de overige lagen. */
@media (min-width: 48.0625rem) {
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) {
    display: block;
  }
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__row--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6, 2.5rem);
  }
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__row--main {
    display: flex;
  }
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__col--links {
    display: flex;
  }
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(1),
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(2),
  .site-footer__inner:has(.site-footer__row--top + .site-footer__row--main) .site-footer__links-col:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

.site-footer__inner,
.site-footer__credit-inner {
  width: 90%;
  max-width: var(--maxw);
  padding-inline: 0;
}

/* Contactformulier: kleur, rand, radius en padding komen uit de CMS-opmaak; deze
   regels houden de custom-select en tekstvelden metrisch gelijk. De select viel
   alleen op HOOGTE terug: line-height 1.15 (=19.55px) maakte de box ~8px lager dan
   de tekstvelden. `inherit` laat 'm de form-line-height (28.05px) erven -> hoogte
   54px, gelijk aan de .form-field__control-tekstvelden. */
form[data-component="form"] .form-field > .select-display{
  padding:1px .5rem;
  line-height:inherit;
  --form-radius:0;
}

/* Formulierkaart en velden volgen op deze contactpagina dezelfde maatvoering als
   de omliggende kolom en de overige tekstvelden. */
#main-content:has(.contact-form-wrap) .contact-form-wrap{height:100%}
.contact-form-wrap .form-field__control,
.contact-form-wrap .form-field__control::placeholder{font-family:var(--font-body)!important}

/* Micro-interacties: kleur en basisvorm komen uit het CMS, deze regels voegen alleen
   een korte rustige reactie toe bij hover en indrukken. */
.btn,
.ds-button,
.site-header__cta,
.site-nav__cta,
.sidemenu-trigger,
.carousel__button{
  transition:transform var(--dur-fast, .16s) var(--ease-out, ease),
    box-shadow var(--dur-fast, .16s) var(--ease-out, ease),
    /* Kleur hoorde er ook bij. De hover-kleuren komen uit het CMS (29 regels op deze site,
       `.ds-button:hover` en per item `.cms-cta--<hash>:hover`) en klapten hard om terwijl de
       beweging wél vloeiend was. Het framework doet dit sinds 1.58.x in `base.css`, maar deze
       regel staat in `@layer site` en wint daarvan — dus hier ook. */
    background-color var(--dur-fast, .16s) var(--ease-out, ease),
    color var(--dur-fast, .16s) var(--ease-out, ease),
    border-color var(--dur-fast, .16s) var(--ease-out, ease);
}
.ds-button .button--text{
  transition:color var(--dur-fast, .16s) var(--ease-out, ease);
}
@media (prefers-reduced-motion:reduce){
  .btn,
  .ds-button,
  .site-header__cta,
  .site-nav__cta,
  .sidemenu-trigger,
  .carousel__button{transition:none}
  .ds-button .button--text{transition:none}
}
.btn:not(.btn--ghost-light):hover,
.site-header__cta:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.14);
}
.btn:active,
.site-header__cta:active,
.sidemenu-trigger:active,
.carousel__button:active{
  transform:translateY(1px) scale(.98);
}

/* De fotogalerij blijft op brede schermen vier kolommen, maar vier smalle kolommen
   naast elkaar maken op een telefoon hoge fotostroken. Twee kolommen houden de beelden
   herkenbaar en laten de bestaande 4:3-fotoverhouding intact. */
@media (max-width: 767px) {
  .sfeer .carousel--static[data-layout-cols] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sfeer .carousel--static .carousel__slide {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }
  .sfeer .carousel--static .carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.site-nav__link::after{
  transition:right var(--dur-fast, .16s) var(--ease-out, ease);
}
.site-header__contact,
.site-header__lang a,
.sidemenu__link{
  transition:color var(--dur-fast, .16s) var(--ease-out, ease),
    opacity var(--dur-fast, .16s) var(--ease-out, ease),
    transform var(--dur-fast, .16s) var(--ease-out, ease);
}
@media (prefers-reduced-motion: reduce){
  .btn,
  .site-header__cta,
  .sidemenu-trigger,
  .carousel__button,
  .site-nav__link::after,
  .site-header__contact,
  .site-header__lang a,
  .sidemenu__link{
    transition:none;
  }
}

/* --- Designer-tweaks (#40, namens Age) — opmaakcorrecties die niet via een
   CMS-design-slot konden; inhoud, tekst en kleur blijven CMS-gestuurd. --- */

@media (max-width: 620px) {
  .site-footer__menu { gap: 10px 20px; }
}

/* P6: meer ruimte tussen de linkkolommen; kolommen niet laten uitrekken. */
.site-footer__col--links { gap: 48px; }
.site-footer__col--links .site-footer__links-col { flex: 0 0 auto; }

/* P7: topbalk-util sluit rechts strak af. */
.site-header__topbar .site-header__util { padding-right: 0; }

/* P2: taalvlaggen (icon-only CTA's) op 18px; de inline-maat wordt met een
   author-!important overruled. Alleen icon-only; de telefoon-CTA blijft ongemoeid. */
.site-header__topbar .cms-cta--icon-only .button--icon { width: 18px !important; height: 18px !important; }

/* P3: telefoonnummer in de topbalk op 15px. */
.site-header__topbar .site-header__contact:not(.cms-cta--icon-only) .button--text { font-size: 15px !important; }

/* P8: iets ruimere tussenafstand in het hoofdmenu op desktop; mobiel blijft compact. */
@media (min-width: 1001px) {
  .site-nav__list { gap: 22.5px; }
}

/* P11: iets meer verticale ruimte tussen samengestelde blokken (rijen blijven 0.4rem). */
.composite { gap: 1.1rem; }


/* Voordeelpakketten (laag 399): reveal uit; voorkomt wit lijntje tijdens scroll op donkere sectie */
.has-motion #layer-399.layer,
.has-motion #layer-434.layer,
.has-motion #layer-607.layer { opacity: 1; transform: none; transition: none; }

/* Footer social-iconen: full-icon SVG (met eigen cirkel) vol laten vullen; framework-cap width/height:1em opheffen */
.site-footer__social-icon, .site-footer__socials img { width: 100%; height: 100%; }

/* reCAPTCHA-badge: z-index herstellen zodat de badge niet achter formulier-velden valt */
.grecaptcha-badge { z-index: 2147483647; }

/* Footer mobiel: lege (spatie-)titel van de 2e link-kolom verbergen, zodat de links netjes onder elkaar vallen */
@media (max-width: 48rem) {
  .site-footer__links-col + .site-footer__links-col .site-footer__col-title { display: none; }
  /* ...en kolom 2 aansluiten op kolom 1 (flex row-gap van 48px terugbrengen tot normale link-afstand) */
  .site-footer__links-col + .site-footer__links-col { margin-top: -38px; }
}

/* Zijmenu: de icoon-only taal-vlag-CTA's (EN/DE) erven de onder-divider van de menu-CTA's; die krult door border-radius:999px als een boogje onder de vlag. Alleen op de vlaggen weghalen (blauwe knop + tekstlinks houden hun divider). */
.site-nav__ctas--sidemenu .site-nav__cta:has(.site-nav__cta-text:empty) { border-bottom: 0; }
}