/* Header, variant 6 (gekozen door Mischa 2026-09-03), geladen ná de Webflow-stijlen.
   De foto is een band bovenaan en de tekst staat in een witte kaart die er half
   overheen valt. Daardoor staat de kop niet meer op de foto en is contrast geen
   discussie meer; de scrim uit de vorige ronde is vervallen.

   De lichtblauwe waas over de foto (--overlay, #c5fcff80) is eraf. Die waste het licht
   uit de foto én maakte de tekst erboven juist slechter leesbaar. */

.header_top.header-2 {
  background-image: none;
  background-color: var(--old-lace);
  /* Ruimte voor de overhangende kaart plus lucht tot de streep eronder. */
  padding-bottom: 92px;
}

.header_grid.header,
.header_grid.header-ademweekend {
  /* flex-end zet de kaart onderaan de band, zodat hij er met de translate hieronder
     half overheen valt. Wordt de kaart hoger dan de band (lange kop op een telefoon),
     dan groeit de band gewoon mee; hij kan er dus niet bovenuit steken. */
  display: flex;
  align-items: flex-end;
  padding: 0;
  min-height: 300px;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
.header_grid.header { background-image: url('/images/static/vlieland_retraite_1.avif'); }
.header_grid.header-ademweekend { background-image: url('/images/static/IMG_1719.avif'); }
/* De oorspronkelijke stijlen wisselden deze pagina vanaf 1280px om naar de algemene
   duinfoto. Dat is precies wat we hier oplossen, dus die wissel is eruit. */
@media (max-width: 640px) {
  .header_grid.header,
  .header_grid.header-ademweekend { min-height: 210px; }
  .header_top.header-2 { padding-bottom: 72px; }
}

/* De kaart hangt onder de foto uit; .header_top.header-2 reserveert daar ruimte voor. */
.header_top.header-2 .container-small {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.header_top.header-2 .padding-section-large { padding: 0; }
.header_top.header-2 .text-align-center {
  background: #fff;
  border-radius: 1rem;
  padding: 28px 34px 30px;
  max-width: 36rem;
  margin: 0;
  text-align: left;
  transform: translateY(58px);
  box-shadow: 0 1px 2px rgba(1, 42, 63, .06), 0 18px 44px -24px rgba(1, 42, 63, .5);
}
@media (max-width: 640px) {
  .header_top.header-2 .text-align-center {
    padding: 22px 20px 24px;
    transform: translateY(44px);
  }
}

/* De kop stond wit op de foto; in de kaart is hij diepzee, zonder schaduw of scrim. */
.header_top.header-2 .text-color-white.groen {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--astronaut-blue);
  text-shadow: none;
}
.header_top.header-2 .margin-bottom.margin-small { margin-bottom: 0 !important; }

/* De verdeling per pagina is er op verzoek van Mischa weer uit: overal de duinfoto.
   Staat in commit 0d2a00a als hij ooit terug moet; `data-pad` op de body blijft staan,
   zodat dat zo weer aan te zetten is. */

/* Lichte waas over de foto. De oude (#c5fcff80, halftransparant lichtblauw) waste het
   licht helemaal weg; dit is een kwart daarvan en houdt de kleuren heel. */
.header_grid.header::after,
.header_grid.header-ademweekend::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(197, 252, 255, 0.16);
  pointer-events: none;
}
.header_grid.header,
.header_grid.header-ademweekend { position: relative; }
.header_top.header-2 .container-small { position: relative; z-index: 2; }

/* De olijfgroene streep van 1px onder de header (Webflow `.line`) knipte de pagina
   doormidden, juist waar de kaart overheen valt. */
.header_top.header-2 + .line { display: none; }