/* Terugvallettertypen: even breed als het echte, zodat er niets verspringt
   terwijl fatfrank en Satoshi nog onderweg zijn. Waarden gemeten met
   canvas-metrics; zie MIGRATIE.md. */
@font-face {
  font-family: "fatfrank terugval";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 102.4%;
  ascent-override: 92.77%;
  descent-override: 22.46%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Satoshi terugval";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto");
  font-weight: 400;
  size-adjust: 97.99%;
  ascent-override: 103.07%;
  descent-override: 24.49%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Satoshi terugval";
  src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Roboto");
  font-weight: 700;
  size-adjust: 97.57%;
  ascent-override: 103.52%;
  descent-override: 24.60%;
  line-gap-override: 0%;
}
:root{
  --color6: #f5813d;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../../fonts/Satoshi-Light.woff') format('woff'),
       url('../../fonts/Satoshi-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi';
  src: url('../../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../../fonts/Satoshi-Regular.woff') format('woff'),
       url('../../fonts/Satoshi-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}



@font-face {
  font-family: 'Satoshi';
  src: url('../../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../../fonts/Satoshi-Medium.woff') format('woff'),
       url('../../fonts/Satoshi-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}



@font-face {
  font-family: 'Satoshi';
  src: url('../../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../../fonts/Satoshi-Bold.woff') format('woff'),
       url('../../fonts/Satoshi-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}




@font-face {
  font-family: 'Satoshi';
  src: url('../../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../../fonts/Satoshi-Black.woff') format('woff'),
       url('../../fonts/Satoshi-Black.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: normal;
}


body {
   font-family: 'Satoshi';
   font-weight: 400;
   font-size: 16px;
}
footer {
  background: var(--color1);
}
.gform_wrapper form .gform_body .gform_fields .gfield > :is(label, legend) {
  color: var(--color2);
  font-family: "fatfrank", "fatfrank terugval", sans-serif;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.the-seasons {
  font-family: "fatfrank", "fatfrank terugval", sans-serif;
font-weight: 400;
line-height: 1;
text-transform: none;
letter-spacing: 0px;
}

h3, .h3{
  font-size: 32px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select{
  border-radius: 10px;
}
.gform_wrapper form .gform_body .gform_fields .gfield:is(.gfield--type-radio, .gfield--type-checkbox) :is(.gfield_radio, .gfield_checkbox) .gchoice input:checked + label:before,
.gform_wrapper form .gform_body .gform_fields .gfield.gfield--type-consent .ginput_container_consent input:checked + label:before{
  background-color: var(--color5);
}

.btn{
  color: var(--color2);
  background-color: var(--color1);
  padding: 20px 67.5px 20px 30px;
  font-family: "Satoshi", "Satoshi terugval", sans-serif;
}
.btn::after{
  background: var(--color3);
}
.btn.btn--tertiary{
  color: var(--color2);
}
.btn.btn--tertiary::after{
  background-color: var(--color6);
}
.btn.btn--outline{
  color: var(--color5);
}


header nav.navbar .navbar-brand img{
  width: 50%;
  height: auto;
}
header nav.navbar .navbar-nav > .nav-item {
.nav-link{
  color: var(--color5);
  font-weight: bold;
}
.nav-link:hover{
  color: var(--color1);
}
 .nav-link::before{
  background-color: var(--color1);
  color: var(--color1);
}
.nav-link[aria-current="page"] {
  color: var(--color1);
}
}
header nav.navbar .navbar-nav> .nav-item:hover > .nav-link,
header nav.navbar .navbar-nav > .nav-item.current-menu-item > .nav-link {
   color: var(--color1);
}
article.article img{
  border-radius: 10px;
}
article.article.article--background:not([data-background="color3"]):not(:has(.article-content--background)) {
  color: var(--color5);
}

/* style.css zet de koppen in een artikel altijd op --color2 (crème). Dat klopt
   alleen als de band erachter donker is; ligt er een crème of lichte band, dan
   valt de kop weg — op de homepage stond "Heerlijk vrij wonen" crème op crème.
   Zelfde voorwaarde als de regel hierboven, zodat kop en tekst samen oplopen. */
article.article.article--background:not([data-background="color3"]):not([data-background="color4"]):not(:has(.article-content--background))
  .article-content:not(.article-content--background) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color5);
}
article.article.article--background:not(:has(.article-content--background))[data-background="color1"]:after{
  background: var(--color2);
}
/* De groene band achter de eerste twee blokken op /locatie/ kwam van één
   ::after op het eerste blok, met hoogte 270%. Die maat was afgestemd op de
   opvultekst die daar stond; met de echte tekst van OVT loopt de band 60 à 80
   pixels te kort en valt de laatste zin als lichte tekst op wit. Nu schildert
   elk blok zijn eigen stuk, met overlap in de tussenruimte, zodat de lengte
   van de tekst niet meer uitmaakt. */
.page-id-18 article.article.article--background:not(:has(.article-content--background)):after {
  height: calc(100% + var(--huge) * 2);
}

.page-id-18 article.article:not(.article--background) {
  position: relative;
}

.page-id-18 article.article:not(.article--background):after {
  content: '';
  position: absolute;
  top: calc(var(--huge) * -2);
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -2;
  background: var(--color3);
  pointer-events: none;
}
article.article .article-sidebar {

  .article-sidebar__content {
    border-radius: 10px;
    background-color: var(--color3);
  }
  .article-sidebar__content p{
    margin-bottom: 0px;
  }
   .btn{
    margin-top: 30px;
  }
  .article-sidebar__footer{
    padding-top: 10px;
  }
}
article.article .article-content ul li{
  text-transform: none;
  font-weight: bold;
}
article.article .article-content ul li::before{
color: var(--color6);
}
article.article .article-content.article-content--background:before {
  border-radius: 10px;
  /* background: var(--color2); */
}
article.article .article-content.article-content--info {
    background: var(--color3);
    color: #FFFFFF;
    padding: var(--mediumlarge);
    border-radius: 10px;
}
article.article .article-content.article-content--info :is(h1, h2, h3, h4, h5, h6) {
color: #FFFFFF;
}
article.article .article-content.article-content--background{
  /* color: var(--color5); */
}
.page-id-22{
  section.downloads .downloads-header.downloads-header--background::before{
    background-color: var(--color2);
  }
  section.downloads .downloads-header.downloads-header--background{
    color: var(--color3);
  }
  section.downloads .download .download-content :is(h4, h5, h6, .h4, .h5, .h6){
    min-height: 100px;
    font-family: "Satoshi", "Satoshi terugval", sans-serif;
    font-weight: 600;
    line-height: 1.5;
  }
}

.page-id-24 article.article .container .faq-header::before{
    content: '';
    position: absolute;
    top: calc(var(--largehuge) * -1);
    right: 0;
    width: 200vw;
    left: -100vw;
    z-index: -2;
    pointer-events: none;
    height: calc(160% + var(--largehuge));
    background: var(--color2);
}

.page-id-24{ 
  article.article .article-content.article-content--background[data-background="color3"]{
  color: var(--color2);
}
article.article .container .faq-header{
  position: relative;
  margin-bottom: var(--mediumlarge);
  min-height: 200px;
  color: var(--color3);
}
  article.article .article-content.article-content--background[data-background="color3"]:before{
  border-radius: 10px;
  }
}
.page-id-16 article.article .article-content:not(.article-content--background) :is(h3, h4, h5, h6, p){
  color: var(--color5);
}
.page-id-18 article.article .article-content:not(.article-content--background) :is(h3, h4, h5, h6, p){
  color: var(--color2);
}
.page-id-144 article.article, .page-id-26 article.article{
  color: var(--color2);
}
section.header {
    .header-image {
      border-radius: 10px;
    }
    .header-action{
      text-align: left;
    }
   .header-action .header-action__block p:nth-child(1){
    font-family: "Satoshi", "Satoshi terugval", sans-serif;
    font-weight: 400;
    }
    .header-action .header-action__block{
      border-radius: 10px;
      margin-bottom: 10px;
      .header-action-btn{
        margin-top: 30px;
      }
    }
}
section.form .form-content{
  color: var(--color2);
}
 section.form .btn{
  margin-top: 15px ;
}
section.cards{
  color: var(--color2);

  .slick-prev::after, .slick-next::before{
    background: var(--color6);
}
.cards-header ul.cards-header__filters li label{
  border-radius: var(--border-radius);
}
.slick-prev, .slick-next{
  background: var(--color5);
}

.card:hover .card-image img{
  transform: scale(1.1);
}
.card {

    .card-image{
        border-radius: 10px 10px 0px 0px;
    }
    .card-content{
      border-radius: 0px 0px 10px 10px;
      background: var(--color2);
      color: var(--color5);
      display: flex;
      flex-direction: column;
      /* padding-bottom: var(--huge); */

      .incard-footer{
        margin-top: auto;
        inline-size: fit-content;
      }
      .card-content__icons{
        padding-bottom: 50px;
      }
      .card-content__icons li:before{
        background-color: var(--color6);
      }
      .card-btn{
        inline-size: fit-content;
        margin-top: auto;
      }

    }
    .card-footer{
      padding-top: 15px;
    }
}
}
.page-id-10{

}
section.downloads{
  color: var(--color2);

  .download-content{
  border-radius: 10px;
}
  .download-footer{
    padding-top: 30px;
    place-self: center;
  }
}

section.partners {
padding-bottom: 60px;
.partners-header .partners-header__logo {
  width: 100%;
  max-width: 250px;
  height: auto;
}
.partner .h6{
  font-size: 24px;
}
}
section.gallery img{
  border-radius: 10px;
}
.page-id-10 section.blocks .blocks-header.blocks-header--background:before{
  background-color: var(--color2);
}
section.blocks 
.blocks-header{
  .header-text{
    color: var(--color3);
  }
}
.block{
.block-content{
  border-radius: 0px 10px 10px 0px;
  display: flex;
  flex-direction: column;
}
.block-content--btn{
  margin-top: auto;
  padding-top: 30px;
}
.block-gallery .block-gallery__image img, .block-image img{
  border-radius: 10px 0px 0px 10px;
}
.block-footer{
  padding-top: 10px;
}
}

/* Het thema zet nergens een achtergrond op de pagina zelf. Staat de browser op
   donker, dan wordt het doek zwart en valt alles weg wat tussen de gekleurde
   banden door loopt. Deze site is licht, dus dat leggen we vast.
   Alleen op html: de gekleurde banden van het thema zijn :before-lagen op
   z-index -2, en een achtergrond op body zou daar overheen liggen. */
html {
  background: #ffffff;
}

/* Eén afbeelding is geen carrousel: dan hoort er ook geen bolletje onder. */
.block-gallery .slick-dots:has(li:only-child) {
  display: none;
}

/* Downloads, Veelgestelde vragen en Contact: een echt topmenu. Klein, op een
   eigen regel boven het hoofdmenu en even breed, met een dunne lijn ertussen;
   de Inschrijven-knop staat rechts naast die twee regels. Op een telefoon of
   tablet staan ze in het uitklapmenu, onder de hoofdpagina's. */
header .navbar-service {
  margin: 0;
  padding: 0;
  list-style: none;
}

header .navbar-service li {
  margin: 0;
  padding: 0;
}

header .navbar-service li::before {
  content: none;
}

header .navbar-service a {
  color: var(--color5);
  text-decoration: none;
  text-underline-offset: 4px;
}

header .navbar-service a:hover,
header .navbar-service a:focus-visible,
header .navbar-service a[aria-current="page"] {
  color: var(--color3);
  text-decoration: underline;
}

@media (min-width: 993px) {
  /* Het thema geeft het logo een vak van 240px dat het maar half vult. Dat
     vak mag niet meekrimpen (dan wordt het logo kleiner) en ook geen lege
     ruimte vasthouden. */
  header nav.navbar .navbar-brand {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin-right: 40px;
  }

  header nav.navbar .navbar-brand img {
    width: 120px;
  }

  /* Twee regels links (topmenu, hoofdmenu), de knop rechts ernaast.
     Bootstrap zet hier display:flex !important, dus een specifiekere
     selector. De volgorde in de HTML blijft hoofdmenu, topmenu, knop: zo
     klopt het uitklapmenu op mobiel vanzelf. */
  header nav.navbar.navbar-expand-md .navbar-collapse {
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-areas:
      "service actions"
      "menu actions";
    justify-content: end;
    align-items: center;
    column-gap: 36px;
  }

  header nav.navbar .navbar-nav {
    grid-area: menu;
    justify-self: end;
    margin: 0;
  }

  header nav.navbar .navbar-nav > .nav-item > .nav-link {
    margin-top: 12px;
    margin-bottom: 4px;
  }

  header .navbar-service {
    grid-area: service;
    display: flex;
    justify-content: flex-end;
    gap: 22px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(64, 110, 86, 0.18);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
  }

  header .navbar-service a {
    position: relative;
    display: inline-block;
  }

  header .navbar-service a:hover,
  header .navbar-service a:focus-visible,
  header .navbar-service a[aria-current="page"] {
    color: var(--color1);
    text-decoration: none;
  }

  /* De huidige pagina: een groen stukje op de lijn eronder. */
  header .navbar-service a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: var(--color1);
  }

  header .navbar-actions {
    grid-area: actions;
    margin-left: 0;
  }
}

/* Het thema maakt het hoofdmenu smaller naarmate het scherm smaller wordt;
   het topmenu en de ruimte naar de knop lopen mee. */
@media (min-width: 993px) and (max-width: 1400px) {
  header nav.navbar.navbar-expand-md .navbar-collapse {
    column-gap: 28px;
  }

  header .navbar-service {
    gap: 18px;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  header nav.navbar.navbar-expand-md .navbar-collapse {
    column-gap: 20px;
  }

  header .navbar-service {
    gap: 14px;
    font-size: 13px;
  }
}

@media (min-width: 993px) and (max-width: 1100px) {
  header nav.navbar .navbar-brand {
    margin-right: 24px;
  }

  header nav.navbar .navbar-brand img {
    width: 100px;
  }
}

@media (max-width: 992px) {
  header .navbar-service {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(64, 110, 86, 0.2);
  }

  header .navbar-service a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 700;
  }
}

/* De kop van de woningzoeker: alleen de titel op de crème band, en de
   kavelkaart er direct onder over de volle breedte. */
section.minihero {
  background: var(--color2);
  padding: 48px 0 40px;
}

section.minihero h1 {
  margin: 0;
  color: var(--color3);
}

@media (max-width: 767px) {
  section.minihero {
    padding: 30px 0 24px;
  }
}

/* Na de kavelkaart over de volle breedte begint de groene band van het
   aanbod pas onder de kaart, zoals het thema dat na zijn eigen section.map
   doet; anders trekt de negatieve marge de filters tegen de kaart aan. */
.kavelkaart-sectie + section.cards:has(.cards-header--background):not(:first-child) {
  margin-top: 0;
}

/* De filtergroepen naast elkaar, met het aantal eronder. */
section.cards .cards-header #filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 40px;
}

section.cards .cards-header #filter .objects-sidebar__filter .h5 {
  margin-bottom: 12px;
}

section.cards .cards-header #filter .cards-header__count {
  flex-basis: 100%;
  margin: 0;
}

/* Kerncijfers bovenaan een woning- of kavelpagina: oppervlakte, kamers en
   prijs als witte pillen, zodat ze boven de foto uitspringen in plaats van
   als klein wit tekstje erin op te gaan. */
section.header .header-content .header-content__kenmerken {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

section.header .header-content .header-content__kenmerken li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 11px 20px;
  border-radius: var(--border-radius);
  background: #ffffff;
  color: var(--color3);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

section.header .header-content .header-content__kenmerken li::before {
  content: none;
}

section.header .header-content .header-content__kenmerken li span {
  color: var(--color5);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* De beschikbaarheid als laatste pil, met een stip in de statuskleur. Geen
   gekleurde knop meer: de enige knop in de kop is wat je hier kunt doen. */
section.header .header-content .header-content__kenmerken li.is-status {
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

section.header .header-content .header-content__kenmerken li.is-status::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color);
}

section.header .header-content .header-content__actie {
  margin-top: 22px;
}

@media (max-width: 767px) {
  section.header .header-content .header-content__kenmerken {
    gap: 8px;
    margin-top: 16px;
  }

  section.header .header-content .header-content__kenmerken li {
    padding: 9px 15px;
    font-size: 16px;
  }

  section.header .header-content .header-content__kenmerken li span {
    font-size: 11px;
  }

  section.header .header-content .header-content__kenmerken li.is-status {
    font-size: 14px;
  }

  section.header .header-content .header-content__actie {
    margin-top: 16px;
  }
}

/* Statuslabels: het thema zet de tekst altijd wit. De site neemt de kleuren
   van het platform over, en daar hoort bij sommige statussen donkere tekst bij
   (--tekst, zie statusStijl in src/lib/kaarten.ts). */
.card .card-image .availability,
section.objects .object .object-content .object-content__status {
  color: var(--tekst, #ffffff);
}

/* Het label als pil in de kaart, naast de oppervlakte: de realisatievorm
   ("Zelfbouw"), of het woningtype als de titel dat nog niet noemt. */
.card .card-content .card-content__icons li.kaartlabel {
  padding: 0 12px;
  border-radius: var(--border-radius);
  background: #ffffff;
  color: var(--color5);
  font-size: 14px;
  font-weight: 700;
  line-height: 27px;
}

.card .card-content .card-content__icons li.kaartlabel::before {
  content: none;
}

/* Partnerblok en footer liggen op het lichtgroen (--color1). Wit en crème
   haalden daarop 2,1 à 2,4:1 en lazen moeizaam; donkergroen, de kleur van het
   logo in datzelfde blok, haalt 5,3:1. */
section.partners,
section.partners :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
section.partners a,
footer,
footer a {
  color: var(--color3);
}

section.partners .partner ul li a::before {
  background: var(--color3);
}

section.partners a:hover,
section.partners a:focus-visible,
footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ruimte tussen de partners. Het thema zet die op 0 met
   `[class*='col']:last-child .partner`, en de buitenste kolom is ook een
   last-child; op een telefoon plakte "Website" daardoor tegen de kop van de
   volgende partner. */
section.partners .row .row {
  margin-bottom: -40px;
}

section.partners .row .row > [class*='col'] > .partner {
  margin-bottom: 40px;
}

/* De 404-kop stond lichtgroen op wit (2,3:1). */
.error404 article.article .article-content h1 {
  color: var(--color3);
}

/* Kavelpagina: waar de kavel ligt, naast de tekst. */
.kavel-ligging {
  margin: 0;
}

.kavel-ligging img {
  display: block;
  width: 100%;
  height: auto;
}

.kavel-ligging figcaption {
  margin-top: 12px;
}

/* ── Animaties (29 sep 2026) ───────────────────────────────────────────────
   Een intro bij het laden (alleen CSS) en bij het scrollen
   (src/scripts/animaties.ts zet data-onthul). Alles beweegt alleen verticaal,
   schalen gebeurt alleen binnen een vak dat zelf afsnijdt: niets steekt
   buiten de pagina, ook niet in de box waarmee de browser rekent.
   Kaders met een decoratieve band of kaartachtergrond animeren nooit zelf,
   alleen hun inhoud. Niets hiervan bij prefers-reduced-motion of in print. */

:root {
  --ens-uit: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ens-omhoog {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@keyframes ens-kader {
  from {
    clip-path: inset(2.5% 1.5% round 10px);
  }
  to {
    clip-path: inset(0 round 10px);
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Hero: het kader gaat open, daarna komen tekst en blok. Het beeld zelf zoomt
     al langzaam in en uit (zoomin in style.css). "backwards": na afloop laat de
     animatie los, dus de hover-stijlen van het thema blijven van hem. */
  section.header .header-image {
    animation: ens-kader 1.4s var(--ens-uit);
  }

  section.header .header-content > * {
    animation: ens-omhoog 1s var(--ens-uit) 0.25s backwards;
  }

  section.header .header-content > :nth-child(2) {
    animation-delay: 0.37s;
  }

  section.header .header-content > :nth-child(n + 3) {
    animation-delay: 0.49s;
  }

  section.header .header-action {
    animation: ens-omhoog 1s var(--ens-uit) 0.6s backwards;
  }

  /* De koppen bovenaan de pagina's zonder hero. */
  section.minihero h1,
  .faq-header > *,
  .downloads-header [class*="col-"] > *,
  section.intro .intro-content > * {
    animation: ens-omhoog 1s var(--ens-uit) 0.15s backwards;
  }

  .faq-header > :nth-child(2),
  .downloads-header [class*="col-"] > :nth-child(2) {
    animation-delay: 0.27s;
  }

  /* Bij het scrollen: tekst en blokken schuiven een klein stukje omhoog. */
  [data-onthul="omhoog"] {
    transition:
      opacity 0.8s ease-out,
      translate 1s var(--ens-uit);
    transition-delay: var(--onthul-vertraging, 0s);
  }

  [data-onthul="omhoog"]:not(.is-onthuld) {
    opacity: 0;
    translate: 0 24px;
  }

  /* Een beeld in een tekstblok: het kader gaat open en schuift een stukje
     mee omhoog. Bewust geen schaal: dat vak snijdt niet af (de kleurband
     erachter moet eruit steken), dus een groter beeld zou de pagina
     verbreden. Een clip-path verandert de afmetingen niet. */
  [data-onthul="masker"] {
    clip-path: inset(0 round var(--onthul-radius, 0px));
    transition:
      opacity 0.7s ease-out,
      translate 1.3s var(--ens-uit),
      clip-path 1.3s var(--ens-uit);
    transition-delay: var(--onthul-vertraging, 0s);
  }

  [data-onthul="masker"]:not(.is-onthuld) {
    opacity: 0;
    translate: 0 16px;
    clip-path: inset(7% round var(--onthul-radius, 0px));
  }

  /* Galerij: het vak snijdt zelf af (overflow: hidden), dus daar zoomt het
     beeld uit. */
  [data-onthul="zoom"] {
    transition:
      opacity 0.8s ease-out,
      scale 1.5s var(--ens-uit);
    transition-delay: var(--onthul-vertraging, 0s);
  }

  [data-onthul="zoom"]:not(.is-onthuld) {
    opacity: 0;
    scale: 1.12;
  }
}

/* Het thema laat het hero-beeld eindeloos in- en uitzoomen; niet voor wie
   minder beweging wil. */
@media (prefers-reduced-motion: reduce) {
  section.header .header-image > img {
    animation: none;
  }
}

/* Galerij: bij de hover-zoom van het thema werden de hoeken even vierkant,
   omdat het vak zelf recht afsneed. */
section.gallery .gallery-grid .gallery-grid__item {
  border-radius: 10px;
  isolation: isolate;
}

/* Feedback Marc (1 okt 2026): de lichte vulling die het thema pas bij hover
   geeft (.btn:before, rgb(0 0 0 / 5%)), staat bij de outline-knoppen nu
   altijd aan — "Bekijk op de kavelkaart", het kavelpaspoort. Bij hover komt
   de cirkel van het thema er nog overheen. */
.btn.btn--outline{
  background-color: rgb(0 0 0 / 5%);
}

/* Homepage: onder de hero één doorlopend crèmekleurig vlak (Erwin, 5 okt
   2026). De crème komt van losse banden per blok (::after op z-index -2), en
   waar die net niet aansluiten — op een breed scherm onder de planning, op
   een telefoon tussen de blokken — scheen het wit van html erdoor. Daarom een
   crèmekleurige ondergrond onder alle banden (z-index -3), met wit alleen
   achter de hero, zodat de bovenkant van de pagina hetzelfde blijft. */
.home main {
  position: relative;
}

.home main::before,
.home main > section.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.home main::before {
  background: var(--color2);
}

/* De hero springt in; het wit loopt door tot de randen van het scherm
   (main knipt horizontaal af). */
.home main > section.header::before {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: #ffffff;
}

/* Weekoverleg 8 okt 2026: een knop die naar het platform gaat (Nieuwbouwers
   Noordoostpolder: interesse tonen, inschrijven, inloggen) krijgt vooraan het
   beeldmerk in een wit rondje. Op het adres, zodat elke knop het vanzelf krijgt. */
a.btn[href^="https://noordoostpolder.nieuwbouwers.nl"] {
  padding-left: 60px;
  background-image: url(/media/2026/10/nieuwbouwers-icoon-rond.svg);
  background-repeat: no-repeat;
  background-position: 16px 50%;
  background-size: 32px 32px;
}

/* De kaartuitsnede op een kavelpagina is een tekening: alleen de
   contractstukken tellen. */
.kavel-ligging__kaart {
  position: relative;
}

.kaart-indicatief {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--color3);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: help;
}

.kaart-indicatief__uitleg {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color3);
  color: #ffffff;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}

.kaart-indicatief:hover .kaart-indicatief__uitleg,
.kaart-indicatief:focus .kaart-indicatief__uitleg {
  opacity: 1;
  visibility: visible;
}

/* "18 kavels" in het inschrijfblok op de homepage extra uitgelicht. */
section.header .header-action .header-action__block .header-action__uitlicht {
  display: inline-block;
  background: var(--color1);
  color: var(--color2);
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: inherit;
  padding: 0.15em 0.5em;
  margin-left: 0.15em;
  border-radius: 6px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Telefoon: het inschrijfblok rechtsboven in de hero mag niet breder worden
   dan het scherm. Het thema zet de regels op nowrap, en met het uitgelichte
   "18 kavels" erachter liep de eerste regel links uit beeld. Nu staat het
   label op een eigen regel: Start inschrijving / 18 kavels / 23 oktober. */
@media (max-width: 767px) {
  section.header .header-action .header-action__block p {
    white-space: normal;
  }

  section.header .header-action .header-action__block p:nth-child(1) {
    letter-spacing: 2.5px;
  }

  section.header .header-action .header-action__block .header-action__uitlicht {
    display: table;
    margin: 8px 0 6px;
  }
}

/* Inloopbijeenkomst onder de datum in het inschrijfblok: een klein linkje
   met een dunne lijn erboven, zodat het bij het blok hoort maar de datum
   niet overstemt (feedback Marc, 13 okt 2026). */
section.header .header-action .header-action__block .header-action__event {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  border-top-color: rgb(64 110 86 / 25%);
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

section.header .header-action .header-action__block .header-action__event::after {
  content: "→";
  transition: transform .2s;
}

section.header .header-action .header-action__block .header-action__event:hover,
section.header .header-action .header-action__block .header-action__event:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

section.header .header-action .header-action__block .header-action__event:hover::after {
  transform: translateX(3px);
}