/* ============================================================
   alegria.css — de look van Vakantiehuis Alegria.

   Huisregels voor deze stylesheet (van de klant, niet onderhandelbaar):
   1. Wit, blauw en rood. Elke kleur in twee tinten, donker op licht van
      dezelfde kleur (brand.css). Rood alleen voor boeken.
   2. Rechthoeken overal: knoppen, kaarten, velden, kalender. Alleen foto's
      krijgen bovenaan een boog, als een luikje (--boog).
   3. Nooit een rand aan één kant. Een rand is altijd rondom.
   4. Geen emoji, geen blauwe browserrand. Iconen zijn lijnen.
   5. Veel witruimte: de inhoud ademt, de tekst blijft smal.

   Hover: knoppen vullen zich van links (brand.css), links krijgen een lijn
   die onder de tekst getekend wordt, rechthoeken komen iets omhoog, foto's
   zoomen zacht in binnen hun boog.
   ============================================================ */

/* clip, geen hidden: het menu staat buiten beeld klaar (translateX) en mag
   de pagina niet breder maken, terwijl sticky elementen blijven werken. */
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body { background: var(--bg, #fff); overflow-x: clip; font-size: 1.05rem; counter-reset: sectie; }
body.is-vast { overflow: hidden; }

.container, .site-header__inner {
    width: 100%; max-width: calc(var(--breedte, 1240px) + 2 * var(--marge, 5vw)); margin-inline: auto; padding-inline: var(--marge, 5vw);
}
/* main.css van de template zet op .container ook 2rem boven en onder. */
.container { padding-block: 0; }

.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--blauw, #1c3150); padding: .7rem 1.1rem; z-index: 200; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Bouwstenen ── */

/* Label met sectienummer (01, 02, ...), geteld in CSS zodat een nieuwe
   sectie vanzelf het juiste nummer krijgt. */
.label {
    display: inline-flex; align-items: baseline; gap: .9rem; font-family: var(--font-body, sans-serif);
    font-size: .74rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
    color: var(--muted, rgba(28, 49, 80, .62)); margin-bottom: 1.6rem;
}
.sectie .label::before {
    counter-increment: sectie; content: counter(sectie, decimal-leading-zero);
    font-family: var(--font-head, serif); font-size: 1.05rem; letter-spacing: 0; color: var(--blauw, #1c3150);
}
.kop { font-size: clamp(2.3rem, 1.5rem + 2.5vw, 3.9rem); color: var(--blauw, #1c3150); margin-bottom: 1.6rem; text-wrap: balance; }
.inleiding { font-size: 1.12rem; max-width: 36em; }
.tekst p { margin-bottom: 1.2rem; max-width: 34em; }
.sectie { padding: clamp(4.5rem, 2.5rem + 6vw, 8.5rem) 0; position: relative; }

/* Kop van een sectie: titel links, uitleg of actie rechts. Op een smal
   scherm onder elkaar. Elke sectie leest zo op dezelfde manier. */
/* De kop krijgt alle breedte die de bediening rechts (pijlen, een knop)
   overlaat, zoals bij de indeling. Met twee even brede kolommen brak een
   kop als "Wat kost een verblijf" onnodig over drie regels. */
.sectie__kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.sectie__kop .kop { margin: 0; }
.sectie__kop > .btn { justify-self: end; }
@media (max-width: 767px) { .sectie__kop { grid-template-columns: 1fr; } .sectie__kop > .btn { justify-self: start; } }
.sectie--licht { background: var(--blauw-licht, #e9eff5); }

/* Tekstlink: een lijn die zich onder de tekst tekent. Geen rand, een
   achtergrond die van 0 naar volle breedte groeit. */
.lijnlink, .buurt__lijst a, .site-footer__links a, .contact__gegevens a, .omg-modal__bron a, .boek__noot a, .buurt__noot a {
    color: inherit; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size .45s cubic-bezier(.7, 0, .2, 1);
    padding-bottom: 2px;
}
.lijnlink:hover, .buurt__lijst a:hover, .site-footer__links a:hover, .site-footer__onder a:hover, .site-footer__onder a:focus-visible, .contact__gegevens a:hover, .omg-modal__bron a:hover, .boek__noot a:hover, .buurt__noot a:hover { background-size: 100% 1px; }
.boek__noot a, .buurt__noot a, .omg-modal__bron a { background-size: 100% 1px; }
.boek__noot a:hover, .buurt__noot a:hover, .omg-modal__bron a:hover { background-size: 0 1px; background-position: right bottom; }

/* Rechthoek die bij hover iets omhoog komt. */
.kaart-hover { transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, border-color .4s; }
.kaart-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blauw, #1c3150); }

/* ── Foto's: luikjes ── */
.beeld { border-radius: var(--boog); overflow: hidden; display: block; background: var(--blauw-licht, #e9eff5); position: relative; }
.beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
a:hover .beeld img, button:hover .beeld img, .beeld:hover img, .kaart-hover:hover .beeld img { transform: scale(1.05); }

/* Lijntekeningen: altijd decor, nooit inhoud. */
.lijn { position: absolute; pointer-events: none; color: var(--blauw, #1c3150); opacity: .28; }
.lijn svg { width: 100%; height: auto; display: block; }

/* ── Header ──
   Over de hero transparant met witte tekst; na het scrollen wit met blur en
   marine tekst. Op een breed scherm staan de onderdelen van de pagina in de
   kop, met een lijn onder het onderdeel dat in beeld is. Smaller: het menu. */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 96px; color: #fff;
    /* main.css van de template geeft elke <header> wit en een onderrand. */
    background: transparent; border: 0;
    transition: background .8s ease-in-out, height 1s ease, color .6s, box-shadow .8s;
}
.site-header.is-vast {
    height: 76px; color: var(--blauw, #1c3150); background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.site-header__lijn { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .8s; pointer-events: none; color: var(--blauw, #1c3150); }
.site-header__lijn svg { position: absolute; bottom: -8px; left: 0; width: 100%; min-width: 1100px; height: auto; opacity: .035; }
.site-header.is-vast .site-header__lijn { opacity: 1; }
.site-header__inner {
    position: relative; height: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center;
}
.hoofdnav { justify-self: center; }
.hoofdnav ul { display: flex; gap: clamp(1rem, .2rem + 1.4vw, 2rem); list-style: none; }
.hoofdnav a {
    color: inherit; text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    padding: .4rem 0; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size .45s cubic-bezier(.7, 0, .2, 1), opacity .3s; opacity: .85;
}
.hoofdnav a:hover, .hoofdnav a[aria-current] { background-size: 100% 1px; opacity: 1; }
@media (max-width: 1179px) { .hoofdnav { display: none; } }
@media (min-width: 1180px) { .menu-knop { display: none; } }
.taal { display: flex; gap: .7rem; list-style: none; font-size: .85rem; color: inherit; letter-spacing: .14em; }
.taal li + li::before { content: '/'; margin-right: .7rem; opacity: .4; }
.taal a { color: inherit; text-decoration: none; opacity: .6; transition: opacity .3s; }
.taal a:hover, .taal a[aria-current] { opacity: 1; }
.logo { display: inline-flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.logo svg { width: 42px; height: 42px; transition: width 1s, height 1s; }
.logo__naam { font-family: var(--font-head, serif); font-size: 1.35rem; letter-spacing: .28em; font-weight: 400; }
.site-header.is-vast .logo svg { width: 34px; height: 34px; }
/* Altijd in de laatste kolom: is de navigatie verborgen (tablet, telefoon),
   dan schuiven de knoppen anders een kolom op en eindigen ze voor de rand. */
.site-header__acties { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: 1.2rem; }
.site-header__acties .btn { padding: .8rem 1.5rem; }
.site-header.is-vast .btn-light { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); border-color: var(--blauw, #1c3150); }
.site-header.is-vast .btn-light:hover, .site-header.is-vast .btn-light:focus-visible { background: transparent; color: var(--blauw, #1c3150); border-color: var(--blauw, #1c3150); }
.menu-knop { width: 46px; height: 46px; background: transparent; border: 1px solid currentColor; cursor: pointer; position: relative; color: inherit; }
.menu-knop span { position: absolute; left: 13px; right: 13px; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.7, 0, .2, 1); }
.menu-knop span:nth-child(1) { top: 18px; }
.menu-knop span:nth-child(2) { top: 26px; transform-origin: right; }
.menu-knop:hover span:nth-child(2) { transform: scaleX(.55); }

@media (max-width: 767px) {
    .site-header { height: 78px; }
    .site-header .taal { display: none; }
    .logo__naam { font-size: 1.1rem; letter-spacing: .2em; }
    .site-header__acties { gap: .6rem; }
    .site-header__acties .btn { padding: .7rem 1rem; letter-spacing: .08em; font-size: .72rem; }
}

/* ── Menu (volledig scherm, marine) ── */
.menu {
    position: fixed; inset: 0; z-index: 100; background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5);
    display: flex; flex-direction: column; justify-content: center; padding: 7rem var(--rand, 5vw) 3rem; overflow-y: auto;
    clip-path: inset(0 0 0 100%); visibility: hidden;
    transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), visibility 0s .8s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.menu__sluit { position: absolute; top: 1.5rem; right: var(--rand, 5vw); width: 46px; height: 46px; background: none; border: 1px solid var(--blauw-licht, #e9eff5); cursor: pointer; }
.menu__sluit::before, .menu__sluit::after { content: ''; position: absolute; left: 12px; right: 12px; top: 22px; height: 1px; background: var(--blauw-licht, #e9eff5); transform: rotate(45deg); transition: transform .4s; }
.menu__sluit::after { transform: rotate(-45deg); }
.menu__sluit:hover::before { transform: rotate(135deg); }
.menu__sluit:hover::after { transform: rotate(45deg); }
.menu__lijst { list-style: none; margin-bottom: 3rem; counter-reset: menu; }
.menu__lijst li { counter-increment: menu; overflow: hidden; }
.menu__lijst a {
    display: inline-flex; align-items: baseline; gap: 1.2rem; font-family: var(--font-head, serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
    color: var(--blauw-licht, #e9eff5); text-decoration: none; padding: .15rem 0; transform: translateY(110%);
    transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}
.menu__lijst a::before { content: counter(menu, decimal-leading-zero); font-family: var(--font-body, sans-serif); font-size: .8rem; letter-spacing: .1em; opacity: .5; }
.menu.is-open .menu__lijst a { transform: none; }
.menu.is-open .menu__lijst li:nth-child(2) a { transition-delay: .05s; }
.menu.is-open .menu__lijst li:nth-child(3) a { transition-delay: .1s; }
.menu.is-open .menu__lijst li:nth-child(4) a { transition-delay: .15s; }
.menu.is-open .menu__lijst li:nth-child(5) a { transition-delay: .2s; }
.menu.is-open .menu__lijst li:nth-child(6) a { transition-delay: .25s; }
.menu.is-open .menu__lijst li:nth-child(7) a { transition-delay: .3s; }
.menu__lijst:hover a { opacity: .45; }
.menu__lijst a:hover { opacity: 1; }
.menu .taal { margin-bottom: 1.4rem; }
.menu__contact { font-size: 1.05rem; line-height: 2; opacity: .85; }
.menu__contact a { color: inherit; text-decoration: none; }
.menu__lijnen { position: absolute; right: 0; bottom: 0; width: min(760px, 90vw); color: var(--blauw-licht, #e9eff5); opacity: .12; pointer-events: none; }

/* ── Boekingswidget ── */
.boek { background: #fff; color: var(--ink, #1c3150); box-shadow: 0 40px 80px -30px rgba(10, 20, 35, .55); position: relative; }
.boek__kop { background: var(--rood-licht, #f7e6e2); padding: 1.3rem 1.7rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.boek__kop h2 { font-size: 1.55rem; color: var(--rood, #9d3326); }
.boek__stap { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rood, #9d3326); white-space: nowrap; }
.boek__lijf { padding: 1.6rem 1.7rem 1.7rem; }
.boek__veld { display: block; margin-bottom: 1.1rem; }
.boek__veld > span { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin-bottom: .5rem; }
.boek__veld input, .boek__veld textarea { width: 100%; }
.boek__veld textarea { min-height: 96px; resize: vertical; }
.boek__data { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; padding: 0; }
.boek__datum { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--line, rgba(28, 49, 80, .14)); transition: border-color .25s; }
.boek__data:hover .boek__datum, .boek__data[aria-expanded="true"] .boek__datum { border-color: var(--blauw, #1c3150); }
.boek__datum small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); }
.boek__datum strong { font-weight: 500; font-size: 1rem; color: var(--blauw, #1c3150); }
.boek__datum strong.is-leeg { color: var(--muted, rgba(28, 49, 80, .62)); font-weight: 400; }
.boek__rij { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.boek__knop { width: 100%; margin-top: .4rem; }
.boek__noot { font-size: .84rem; color: var(--muted, rgba(28, 49, 80, .62)); margin-top: 1.1rem; line-height: 1.6; }
.boek__regel { font-size: .84rem; color: var(--rood, #9d3326); background: var(--rood-licht, #f7e6e2); padding: .8rem 1rem; margin: .2rem 0 1rem; line-height: 1.55; }
.boek__terug { background: none; border: 0; font: inherit; font-size: .88rem; color: var(--blauw, #1c3150); cursor: pointer; padding: 0 0 2px; margin-bottom: 1.1rem; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; transition: background-size .45s cubic-bezier(.7, 0, .2, 1); }
.boek__terug:hover { background-size: 0 1px; background-position: right bottom; }
.boek__samenvatting { background: var(--blauw-licht, #e9eff5); color: var(--blauw, #1c3150); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1.1rem; }
.boek__status { font-size: .92rem; margin-top: .8rem; }
.boek__status.is-fout { color: var(--rood, #9d3326); }
.boek__klaar { text-align: center; padding: 1rem 0 .4rem; }
.boek__klaar h3 { font-size: 1.9rem; color: var(--blauw, #1c3150); margin-bottom: .6rem; }
/* Honingpot tegen spam: bestaat voor bots, nooit zichtbaar voor mensen. */
.honing { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ── Eigen dropdown ──
   Geen native select: de lijst van de browser laat zich niet stylen. Een
   knop met een lijst eronder; het toetsenbord werkt (alegria.js). */
.keuze { position: relative; }
.keuze__knop {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .9rem 1rem; font: inherit; font-size: 1rem; font-weight: 400; color: var(--blauw, #1c3150); text-align: left;
    background: #fff; border: 1px solid var(--line, rgba(28, 49, 80, .14)); border-radius: 0; cursor: pointer; transition: border-color .25s;
}
.keuze__knop:hover, .keuze__knop[aria-expanded="true"] { border-color: var(--blauw, #1c3150); }
.keuze__knop svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.7, 0, .2, 1); flex: none; }
.keuze__knop[aria-expanded="true"] svg { transform: rotate(180deg); }
.keuze__lijst {
    position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 6; list-style: none; margin: 0; padding: .4rem;
    background: #fff; border: 1px solid var(--blauw, #1c3150); box-shadow: var(--shadow);
    max-height: 272px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
}
.keuze__lijst li { padding: .65rem .9rem; cursor: pointer; font-size: .95rem; color: var(--blauw, #1c3150); transition: background .2s, padding-left .25s; }
.keuze__lijst li:hover, .keuze__lijst li.is-actief { background: var(--blauw-licht, #e9eff5); padding-left: 1.2rem; }
.keuze__lijst li[aria-selected="true"] { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }

/* ── Kalender ── */
.kal-pop { position: fixed; z-index: 95; width: 360px; background: #fff; box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--blauw, #1c3150); }
.kal__kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.kal__titel { font-family: var(--font-head, serif); font-size: 1.25rem; color: var(--blauw, #1c3150); margin-bottom: .5rem; text-transform: capitalize; }
.kal__kop .kal__titel { margin: 0; }
.kal__nav { width: 38px; height: 38px; border: 1px solid var(--line, rgba(28, 49, 80, .14)); background: #fff; cursor: pointer; color: var(--blauw, #1c3150); font-size: 1.1rem; transition: border-color .3s, background .3s, color .3s; }
.kal__nav:hover:not(:disabled) { background: var(--blauw, #1c3150); border-color: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.kal__nav:disabled { opacity: .25; cursor: default; }
.kal__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.kal__dagnaam { font-size: .68rem; text-align: center; color: var(--muted, rgba(28, 49, 80, .62)); padding: .3rem 0; letter-spacing: .1em; text-transform: uppercase; }
.kal__dag {
    aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 0; background: #fff; font: inherit; font-size: .88rem; cursor: pointer;
    color: var(--blauw, #1c3150); transition: background .2s, color .2s, border-color .2s; position: relative;
}
.kal__dag:hover:not(:disabled) { border-color: var(--blauw, #1c3150); }
.kal__dag:disabled { cursor: default; color: rgba(28, 49, 80, .25); }
.kal__dag.is-bezet, .kal__dag.is-bezet:disabled { background: var(--rood-licht, #f7e6e2); color: var(--rood, #9d3326); text-decoration: line-through; }
/* Wisseldag als half vakje, schuin gedeeld: links boven de gasten die om 10
   uur vertrekken, rechts onder de gasten die vanaf 17 uur aankomen. */
.kal__dag.is-half-vertrek { background: linear-gradient(135deg, var(--rood-licht, #f7e6e2) 50%, #fff 50%); }
.kal__dag.is-half-aankomst, .kal__dag.is-half-aankomst:disabled { background: linear-gradient(135deg, #fff 50%, var(--rood-licht, #f7e6e2) 50%); }
.legende i.is-half { background: linear-gradient(135deg, var(--rood-licht, #f7e6e2) 50%, #fff 50%); }
.kal__dag.is-tussen { background: var(--blauw-licht, #e9eff5); }
.kal__dag.is-start, .kal__dag.is-eind { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); font-weight: 500; }
.kal__dag.is-vandaag::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 3px; height: 3px; margin-left: -1.5px; background: currentColor; }
.kal__leeg { aspect-ratio: 1 / 1; }
.kal__hint { font-size: .82rem; color: var(--muted, rgba(28, 49, 80, .62)); margin-top: .8rem; }
.kal__acties { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .9rem; }
.kal__acties button { font: inherit; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: .65rem 1.1rem; cursor: pointer; border: 1px solid var(--blauw, #1c3150); background: #fff; color: var(--blauw, #1c3150); transition: background .3s, color .3s; }
.kal__acties button:hover, .kal__acties .kal__ok { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.kal__acties .kal__ok:hover { background: #fff; color: var(--blauw, #1c3150); }
.legende { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .85rem; color: var(--muted, rgba(28, 49, 80, .62)); margin-top: 1.6rem; }
.legende span { display: inline-flex; align-items: center; gap: .55rem; }
.legende i { width: 14px; height: 14px; display: inline-block; background: #fff; border: 1px solid var(--line, rgba(28, 49, 80, .14)); }
.legende i.is-bezet { background: var(--rood-licht, #f7e6e2); border-color: var(--rood-licht, #f7e6e2); }
.legende i.is-gekozen { background: var(--blauw, #1c3150); border-color: var(--blauw, #1c3150); }

/* ── Zwevende boekbalk + vensters ── */
.boekbalk {
    position: fixed; right: 2rem; bottom: 0; z-index: 40; width: 320px;
    background: var(--rood, #9d3326); color: var(--rood-licht, #f7e6e2); border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.4rem;
    font: inherit; font-size: .9rem; font-weight: 500; text-align: left; line-height: 1.35;
    transform: translateY(110%); transition: transform .6s cubic-bezier(.2, .7, .2, 1), padding-bottom .4s;
}
.boekbalk:hover { padding-bottom: 1.6rem; }
.boekbalk.is-zichtbaar { transform: none; }
.boekbalk__plus { font-size: 1.6rem; font-weight: 300; line-height: 1; transition: transform .4s; }
.boekbalk:hover .boekbalk__plus { transform: rotate(90deg); }
@media (max-width: 767px) { .boekbalk { left: 0; right: 0; width: auto; } }

.venster { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.venster[hidden] { display: none !important; }
.venster__achter { position: absolute; inset: 0; background: rgba(28, 49, 80, .55); opacity: 0; transition: opacity .5s; }
.venster.is-open .venster__achter { opacity: 1; }
.venster__paneel { position: relative; width: min(470px, 100%); max-height: calc(100vh - 2.4rem); overflow-y: auto; opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.venster.is-open .venster__paneel { opacity: 1; transform: none; }
.venster__sluit {
    position: absolute; top: .9rem; right: .9rem; z-index: 3; width: 40px; height: 40px;
    border: 1px solid currentColor; background: #fff; cursor: pointer; font-size: 1.3rem; color: var(--blauw, #1c3150); transition: background .3s, color .3s;
}
.venster__sluit:hover { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.venster .boek { box-shadow: none; }
.venster .boek__kop { padding-right: 4rem; }
.venster .venster__sluit { color: var(--rood, #9d3326); }
.venster .venster__sluit:hover { background: var(--rood, #9d3326); color: var(--rood-licht, #f7e6e2); }
.venster--breed .venster__paneel { width: min(1000px, 100%); background: #fff; }
.venster--breed .venster__sluit { color: var(--blauw, #1c3150); }
.venster--breed .venster__sluit:hover { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }

/* ── Band met drie links, net onder de hero ── */
.band { background: var(--blauw, #1c3150); }
.band__lijst { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 4vw, 4rem); padding-inline: var(--rand, 5vw); }
.band__lijst a {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.4rem 0;
    color: var(--blauw-licht, #e9eff5); text-decoration: none; font-family: var(--font-head, serif); font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem);
    isolation: isolate; overflow: hidden; transition: color .5s cubic-bezier(.7, 0, .2, 1);
}
.band__lijst a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blauw-licht, #e9eff5); transform: translateY(101%); transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.band__lijst a:hover { color: var(--blauw, #1c3150); }
.band__lijst a:hover::before { transform: none; }
.band__lijst b { font-weight: 400; }
.band__lijst a span { font-family: var(--font-body, sans-serif); transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.band__lijst a:hover span { transform: translateX(8px); }
@media (max-width: 767px) { .band__lijst { grid-template-columns: 1fr; } .band__lijst a { padding: 1.5rem 0; } }

/* ── Intro ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.split__beeld { aspect-ratio: 4 / 5; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; } .split__beeld { aspect-ratio: 4 / 4.4; max-width: 520px; } }
.intro .lijn { width: min(460px, 60vw); left: 0; bottom: 2rem; }
.snel-antwoord { background: var(--blauw-licht, #e9eff5); padding: 1.4rem 1.6rem; margin: 2.2rem 0 2.6rem; font-size: 1rem; color: var(--blauw, #1c3150); max-width: 34em; }
.snel-antwoord:empty { display: none; }

/* ── In het kort: troeven als slider ──
   Twee kaarten precies in de breedte van de inhoud, de derde steekt rechts
   in de marge uit: zo zie je dat er meer is. De lijst begint op de lijn van
   de inhoud (padding --rand) en loopt tot de schermrand. Slepen met de muis,
   swipen, pijlknoppen en toetsenbord: alegria.js. */
.troeven { --troef-gap: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.troeven__lijst {
    list-style: none; display: flex; gap: var(--troef-gap); overflow-x: auto; overscroll-behavior-x: contain;
    /* Geen scroll-snap: je schuift vrij en de lijst blijft waar je loslaat. */
    scroll-padding-inline: var(--rand, 5vw); padding: .5rem var(--rand, 5vw) 1.2rem;
    scrollbar-width: none; cursor: grab;
}
.troeven__lijst::-webkit-scrollbar { display: none; }
.troeven__lijst:focus-visible { outline: 1px solid var(--blauw, #1c3150); outline-offset: -1px; }
.troeven__lijst.is-slepen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.troeven__lijst.is-slepen .troef { pointer-events: none; }
/* Open kolommen, geen kaart: illustratie, getal, label en tekst ademen in
   de lichtblauwe sectie. Bij hover beweegt alleen de illustratie. */
.troef {
    flex: 0 0 calc((min(100vw, var(--breedte, 1240px) + 2 * var(--marge, 5vw)) - 2 * var(--marge, 5vw) - var(--troef-gap)) / 2);
    padding: 1rem 0;
}
/* De tekeningen zijn getekend op 96 eenheden met fijn detail. Onder 84 px
   loopt dat detail dicht, dus kleiner worden ze nergens. */
.troef__beeld { width: clamp(84px, 3vw + 64px, 112px); color: var(--blauw, #1c3150); margin-bottom: 1.8rem; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.troef__beeld svg { width: 100%; height: auto; display: block; }
.troef:hover .troef__beeld { transform: translateY(-4px); }
.troef__waarde { font-family: var(--font-head, serif); font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem); line-height: 1; color: var(--blauw, #1c3150); }
.troef__titel { font-family: var(--font-body, sans-serif); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin: .8rem 0 1rem; }
.troef__tekst { color: var(--body, rgba(28, 49, 80, .86)); max-width: 28em; }
@media (max-width: 767px) {
    .troef { flex-basis: 78%; }
    .troef__beeld { width: 84px; margin-bottom: 1.2rem; }
}

/* Bediening: hint, teller en pijlknoppen rechts naast de titel. */
.schuif-bediening { display: flex; align-items: center; gap: .6rem; justify-self: end; }
.schuif-bediening__hint { font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin-right: 1rem; }
.schuif-bediening__teller { font-size: .9rem; color: var(--muted, rgba(28, 49, 80, .62)); margin-right: .8rem; font-variant-numeric: tabular-nums; }
.schuif-bediening__teller b { font-family: var(--font-head, serif); font-weight: 400; font-size: 1.3rem; color: var(--blauw, #1c3150); }
.schuif-knop {
    width: 52px; height: 52px; border: 1px solid var(--blauw, #1c3150); background: transparent; color: var(--blauw, #1c3150);
    font-size: 1.1rem; cursor: pointer; transition: background .3s, color .3s, opacity .3s;
}
.schuif-knop:hover:not(:disabled) { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.schuif-knop:disabled { opacity: .25; cursor: default; }
@media (max-width: 767px) {
    .schuif-bediening { justify-self: stretch; }
    .schuif-bediening__hint { margin-right: auto; }
    .schuif-knop { width: 44px; height: 44px; }
}

/* Voortgang: een volle balk die meeloopt met het schuiven. */
.schuif-voortgang { position: relative; height: 2px; background: var(--line, rgba(28, 49, 80, .14)); margin-top: 1.4rem; overflow: hidden; }
.schuif-voortgang i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--blauw, #1c3150); transition: left .2s linear; }

/* De huisregel: vast onderaan, altijd zichtbaar. */
.troef-regel { display: flex; align-items: center; gap: 1.4rem; margin-top: clamp(2.4rem, 1.5rem + 2vw, 3.5rem); background: var(--rood-licht, #f7e6e2); color: var(--rood, #9d3326); padding: 1.3rem 1.6rem; }
.troef-regel__beeld { width: 56px; flex: none; }
.troef-regel__beeld svg { width: 100%; height: auto; display: block; }
/* De streep door de glazen: een brede lijn in de kleur van het vlak maakt
   haar vrij, zodat de glazen er niet doorheen lopen. */
.troef-regel__beeld .knip { stroke: var(--rood-licht, #f7e6e2); }
.troef-regel p { margin: 0; }
.troef-regel strong { display: block; font-family: var(--font-head, serif); font-weight: 400; font-size: 1.35rem; margin-bottom: .15rem; }

/* ── Galerij ──
   Vijf foto's in een raster: één grote, vier kleinere. De rest zit in de
   lightbox. Op een telefoon een vast raster: één brede foto en vier kleine
   eronder. Een veegbare rij was het eerst, maar de foto's vulden bijna het
   scherm en klikten per foto vast, zodat elke licht schuine veeg naar
   beneden ook een foto opzij schoof. Bladeren doe je in de lightbox. */
.galerij__raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 18px; height: clamp(420px, 40vw, 620px); }
.galerij__item { position: relative; margin: 0; min-height: 0; }
.galerij__item:first-child { grid-row: 1 / 3; }
.galerij__item.is-extra { display: none; }
.galerij__item button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.galerij__item button:focus-visible { outline: 1px solid var(--blauw, #1c3150); outline-offset: 5px; }
.galerij__item .beeld { height: 100%; }
.galerij__item img { height: 100%; }
/* De bijschriften leest de lightbox en een schermlezer; in het raster niet. */
.galerij__item figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
    .galerij__raster { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; gap: 10px; }
    .galerij__item { grid-row: auto; aspect-ratio: 1 / 1; }
    .galerij__item:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(255, 255, 255, .98); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .7s; }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none !important; }
.lightbox figure { max-width: 90vw; max-height: 88vh; text-align: center; }
.lightbox img { max-width: 84vw; max-height: 78vh; width: auto; height: auto; border-radius: var(--boog); }
.lightbox figcaption { color: var(--muted, rgba(28, 49, 80, .62)); margin-top: 1rem; font-size: .95rem; }
.lightbox button { position: absolute; background: #fff; border: 1px solid var(--blauw, #1c3150); color: var(--blauw, #1c3150); width: 52px; height: 52px; cursor: pointer; font-size: 1.4rem; transition: background .3s, color .3s; }
.lightbox button:hover { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.lightbox__vorige { left: 2rem; top: 50%; margin-top: -26px; }
.lightbox__volgende { right: 2rem; top: 50%; margin-top: -26px; }
.lightbox__sluit { right: 2rem; top: 2rem; }
.lightbox__teller { position: absolute; left: 2rem; top: 2.4rem; color: var(--blauw, #1c3150); font-size: .82rem; letter-spacing: .24em; }
@media (max-width: 767px) { .lightbox__vorige { left: .6rem; } .lightbox__volgende { right: .6rem; } .lightbox button { width: 44px; height: 44px; } }

/* ── Indeling en tekening ── */
.indeling__raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; margin-top: 4rem; }
/* minmax(0, 1fr), geen 1fr: anders rekt de fotoreeks (foto's van 1000 px)
   de kolom breder dan het scherm. */
@media (max-width: 1023px) {
    .indeling__raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .plan { position: static; width: 100%; max-width: 340px; margin-inline: auto; }
}
.plan { position: sticky; top: 120px; }
.plan svg { width: 100%; height: auto; color: var(--blauw, #1c3150); }
/* Het huis is een keuzeknop in drie lagen. De gevel is wit, zoals het huis
   zelf: op het lichtblauw van de sectie zie je zo meteen wat bij het huis
   hoort. Wijs je een laag aan, dan kleurt ze lichtblauw; de gekozen laag is
   marine, net als de gekozen tab ernaast. In een marine laag worden de
   lijnen en de luiken lichtblauw, anders verdwijnen ze in het vlak. */
.plan__laag { cursor: pointer; }
.plan__laag .plan__vlak { fill: #fff; transition: fill .45s; }
.plan__laag:hover .plan__vlak, .plan__laag:focus-visible .plan__vlak { fill: var(--blauw-licht, #e9eff5); }
.plan__laag.is-actief .plan__vlak { fill: var(--blauw, #1c3150); }
.plan__laag .plan__gevel { transition: stroke .45s; }
.plan__laag.is-actief .plan__gevel { stroke: var(--blauw-licht, #e9eff5); }
.plan__laag .plan__luik { fill: var(--blauw, #1c3150); transition: fill .45s; }
.plan__laag.is-actief .plan__luik { fill: var(--blauw-licht, #e9eff5); }
/* De naam van de laag staat naast het huis. De gekozen laag is voluit
   marine en iets vetter, de andere twee staan terug. */
.plan__laag text { font-family: var(--font-body, sans-serif); letter-spacing: .14em; fill: var(--blauw, #1c3150); opacity: .6; transition: opacity .45s; }
.plan__laag .plan__wijs, .plan__laag .plan__punt { opacity: .45; transition: opacity .45s; }
.plan__laag .plan__punt { fill: var(--blauw, #1c3150); }
.plan__laag:hover text, .plan__laag:focus-visible text, .plan__laag.is-actief text,
.plan__laag:hover .plan__wijs, .plan__laag:focus-visible .plan__wijs, .plan__laag.is-actief .plan__wijs,
.plan__laag:hover .plan__punt, .plan__laag:focus-visible .plan__punt, .plan__laag.is-actief .plan__punt { opacity: 1; }
.plan__laag.is-actief text { font-weight: 500; }
.plan__laag:focus-visible { outline: none; }
.plan__omtrek { pointer-events: none; }
.plan__omtrek .plan__wit { fill: #fff; }
.verdiepingen__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--blauw, #1c3150); margin-bottom: 2.2rem; }
.verdiepingen__tabs button {
    background: #fff; border: 0; padding: .95rem .6rem; cursor: pointer; font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blauw, #1c3150); transition: background .35s, color .35s;
}
.verdiepingen__tabs button + button { box-shadow: -1px 0 0 var(--blauw, #1c3150); }
.verdiepingen__tabs button:hover { background: var(--blauw-licht, #e9eff5); }
.verdiepingen__tabs button[aria-selected="true"] { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.verdieping { animation: verschijn .6s ease; }
@keyframes verschijn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Fotoreeks per verdieping: één foto per keer, vegen/slepen, pijlen en
   teller (de gewone slider uit alegria.js). Hier wel per foto vastklikken:
   een halve foto in beeld heeft geen zin. */
.fotoreeks { margin-bottom: 2rem; }
.fotoreeks__lijst {
    list-style: none; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; cursor: grab;
}
.fotoreeks__lijst::-webkit-scrollbar { display: none; }
.fotoreeks__lijst.is-slepen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fotoreeks__lijst.is-slepen button { pointer-events: none; }
.fotoreeks__item { flex: 0 0 100%; scroll-snap-align: start; }
.fotoreeks__item figure { margin: 0; }
.fotoreeks__item button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.fotoreeks__item button:focus-visible { outline: 1px solid var(--blauw, #1c3150); outline-offset: 4px; }
.fotoreeks__item .beeld { aspect-ratio: 16 / 11; }
.fotoreeks__item figcaption { font-size: .88rem; color: var(--muted, rgba(28, 49, 80, .62)); padding-top: .8rem; }
.fotoreeks__bediening { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: -2.2rem; position: relative; pointer-events: none; }
.fotoreeks__bediening > * { pointer-events: auto; }
.fotoreeks__bediening .schuif-bediening__teller { margin-right: .6rem; }
.fotoreeks__bediening .schuif-knop { width: 44px; height: 44px; }
.ruimtes { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 1px 0 0 1px; }
.ruimtes li { padding: 1.05rem 1.2rem; background: #fff; transition: background .35s; }
.ruimtes li:hover { background: var(--blauw-licht, #e9eff5); }
.ruimtes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ruimtes strong { font-weight: 500; color: var(--blauw, #1c3150); display: block; }
.ruimtes small { color: var(--muted, rgba(28, 49, 80, .62)); font-size: .9rem; }
@media (max-width: 600px) { .verdiepingen__tabs button { font-size: .64rem; letter-spacing: .06em; } }

/* ── Voorzieningen ── */
.voorz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 2rem clamp(3rem, 7vw, 7rem); align-items: start; margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.voorz__kop { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); color: var(--blauw, #1c3150); margin-bottom: .8rem; }
.voorz__lijst { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 1px 0 0 1px; }
.voorz__lijst li { background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.6rem 1.3rem 1.7rem; font-size: .95rem; color: var(--blauw, #1c3150); line-height: 1.45; transition: background .35s; }
.voorz__lijst li:hover { background: var(--blauw-licht, #e9eff5); }
.voorz__lijst li > svg { width: 30px; height: 30px; color: var(--blauw, #1c3150); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.voorz__lijst li:hover > svg { transform: translateY(-4px); }
@media (max-width: 1023px) { .voorz { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .voorz__lijst { grid-template-columns: 1fr 1fr; } }

/* ── Omgeving: slider zoals de troeven ──
   Drie kaarten in de breedte van de inhoud, de vierde steekt uit; tablet
   twee, telefoon één en een stuk van de volgende. Vrij schuiven, slepen,
   pijlknoppen en teller (alegria.js). */
.omgeving { --omg-gap: clamp(1.4rem, 1rem + 1.5vw, 2.4rem); --omg-n: 3; }
.omg-lijst {
    list-style: none; display: flex; gap: var(--omg-gap); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-padding-inline: var(--rand, 5vw); padding: .5rem var(--rand, 5vw) 1.2rem; scrollbar-width: none; cursor: grab;
}
.omg-lijst::-webkit-scrollbar { display: none; }
.omg-lijst:focus-visible { outline: 1px solid var(--blauw, #1c3150); outline-offset: -1px; }
.omg-lijst.is-slepen { cursor: grabbing; user-select: none; }
.omg-lijst.is-slepen .omg-rij { pointer-events: none; }
.omg-lijst img { -webkit-user-drag: none; }
.omg-rij {
    flex: 0 0 calc((min(100vw, var(--breedte, 1240px) + 2 * var(--marge, 5vw)) - 2 * var(--marge, 5vw) - (var(--omg-n) - 1) * var(--omg-gap)) / var(--omg-n));
    display: flex; flex-direction: column; cursor: pointer;
}
.omg-rij .beeld { aspect-ratio: 4 / 3; margin-bottom: 1.2rem; }
.omg-rij > div:not(.beeld):not([data-omg-meer]) { flex: 1; }
.omg-rij h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); color: var(--blauw, #1c3150); margin-bottom: .45rem; }
.omg-rij p { font-size: .96rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.omg-rij__afstand { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin-bottom: .5rem; display: block; }
.rond-knop {
    align-self: flex-start; margin-top: 1rem; display: inline-flex; align-items: center; gap: .7rem; padding: .5rem 0 3px;
    border: 0; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px; color: var(--blauw, #1c3150);
    font: inherit; font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
    transition: gap .45s cubic-bezier(.7, 0, .2, 1);
}
.omg-rij:hover .rond-knop { gap: 1.2rem; }
.omg-rij__lijn { background: #fff; color: var(--blauw, #1c3150); display: flex; align-items: center; justify-content: center; }
.omg-rij__lijn svg { width: 22%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.omg-rij:hover .omg-rij__lijn svg { transform: scale(1.12); }
@media (max-width: 1023px) { .omgeving { --omg-n: 2; } .omgeving .sectie__kop { grid-template-columns: 1fr; } .omgeving .schuif-bediening { justify-self: stretch; } .omgeving .schuif-bediening__teller { margin-right: auto; } }
@media (max-width: 767px) { .omg-rij { flex-basis: 80%; } }
.omg-modal { display: grid; grid-template-columns: 1fr 1fr; }
.omg-modal .beeld { border-radius: 0; min-height: 360px; margin: 0; }
.omg-modal .omg-rij__lijn svg { width: 26%; }
.omg-modal__tekst { padding: 3.4rem 2.8rem; }
.omg-modal__tekst h2 { font-size: 2.3rem; color: var(--blauw, #1c3150); margin-bottom: 1.1rem; }
.omg-modal__tekst p { margin-bottom: 1rem; }
.omg-modal__bron { font-size: .85rem; color: var(--muted, rgba(28, 49, 80, .62)); }
@media (max-width: 767px) { .omg-modal { grid-template-columns: 1fr; } .omg-modal .beeld { min-height: 220px; } }

/* ── Eten en winkelen ── */
.buurt { position: relative; overflow: hidden; }
.tabs__knoppen { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--blauw, #1c3150); margin-bottom: 1.8rem; max-width: 100%; }
.tabs__knoppen button {
    background: transparent; border: 0; padding: .95rem 1.4rem; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: var(--blauw, #1c3150); display: inline-flex; gap: .6rem; align-items: baseline; transition: background .35s, color .35s;
}
.tabs__knoppen button + button { box-shadow: -1px 0 0 var(--blauw, #1c3150); }
.tabs__knoppen button:hover { background: rgba(28, 49, 80, .06); }
.tabs__knoppen button[aria-selected="true"] { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.tabs__knoppen small { font-size: .7rem; opacity: .7; letter-spacing: 0; }
.buurt__lijst { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 1px 0 0 1px; animation: verschijn .5s ease; }
.buurt__lijst li { padding: 1.2rem 1.3rem; background: #fff; transition: background .35s; }
.buurt__lijst li:hover { background: var(--blauw-licht, #e9eff5); }
.buurt__lijst strong { font-weight: 500; color: var(--blauw, #1c3150); }
.buurt__lijst small { display: block; color: var(--muted, rgba(28, 49, 80, .62)); font-size: .88rem; line-height: 1.5; margin-top: .25rem; }
.buurt__noot { margin-top: 2.2rem; font-size: .95rem; }
.buurt .lijn { right: 0; top: 3rem; width: min(420px, 50vw); }
@media (max-width: 1023px) { .buurt__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .buurt__lijst { grid-template-columns: 1fr; }
    .tabs__knoppen { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; width: 100%; }
    .tabs__knoppen button { padding: .9rem .6rem; font-size: .66rem; letter-spacing: .08em; justify-content: center; }
}

/* ── Gastenboek ── */
.gastenboek { overflow: hidden; }
.gastenboek .lijn { right: 0; bottom: 0; width: min(900px, 95vw); }
.gastenboek__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; }
.gastenboek p { max-width: 32em; }
.gastenboek__beelden { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gastenboek__beelden .beeld { aspect-ratio: 3 / 4; }
.gastenboek__beelden figure:nth-child(2) { margin-top: 4rem; }
@media (max-width: 1023px) { .gastenboek__raster { grid-template-columns: 1fr; } }

/* ── Prijzen ──
   Twee tabbladen, per periode een open regel: klein licht icoon, naam,
   prijs groot. Geen tegels, geen kaders. */
.prijzen__tijd svg { width: 18px; height: 18px; flex: none; margin-top: .3rem; opacity: .55; }
.prijzen__tabs .tabs__knoppen { margin-bottom: 2.4rem; }
.prijzen__tijd { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--muted, rgba(28, 49, 80, .62)); margin-bottom: 2.4rem; }
.prijzen__lijst { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2.8rem 3rem; animation: verschijn .5s ease; }
.prijs { display: flex; flex-direction: column; gap: .5rem; }
.prijs__icoon { width: 22px; height: 22px; color: var(--blauw, #1c3150); opacity: .4; margin-bottom: .4rem; transition: opacity .3s; }
.prijs__icoon svg { width: 100%; height: 100%; display: block; }
.prijs:hover .prijs__icoon { opacity: .8; }
.prijs__periode { font-size: .96rem; color: var(--body, rgba(28, 49, 80, .86)); line-height: 1.4; }
/* Prijzen op één lijn, ook als een periodenaam over twee regels loopt. */
.prijs__bedrag { margin-top: auto; padding-top: .3rem; font-family: var(--font-head, serif); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1; color: var(--blauw, #1c3150); }
.prijzen__andere { max-width: 46em; margin-top: clamp(2.8rem, 2rem + 2vw, 4rem); font-size: .95rem; color: var(--muted, rgba(28, 49, 80, .62)); }
.prijzen__actie { margin-top: 1.6rem; }
/* Telefoon: elke prijs op een eigen regel. Icoon en periode links, prijs
   rechts. */
@media (max-width: 600px) {
    .prijzen__lijst { grid-template-columns: 1fr; gap: 1.6rem; }
    .prijs { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: .9rem; align-items: center; }
    .prijs__icoon { margin: 0; }
    .prijs__bedrag { margin: 0; padding: 0; font-size: 1.7rem; }
}

/* ── Beschikbaarheid ── */
.beschikbaar__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.beschikbaar__kaart { background: #fff; border: 1px solid var(--line, rgba(28, 49, 80, .14)); padding: 2rem; }
.beschikbaar__maanden { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.beschikbaar__nav { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: 1rem; }
@media (max-width: 1023px) { .beschikbaar__raster { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .beschikbaar__maanden { grid-template-columns: 1fr; } .beschikbaar__kaart { padding: 1.2rem; } }

/* ── FAQ ── */
.faq-lijst { max-width: 880px; margin: 4rem auto 0; display: grid; gap: 0; padding: 1px 0 0 1px; }
.faq-lijst details { background: #fff; transition: background .35s; }
.faq-lijst details[open] { background: var(--blauw-licht, #e9eff5); }
.faq-lijst summary {
    list-style: none; cursor: pointer; padding: 1.5rem 5rem 1.5rem 1.8rem; position: relative;
    font-family: var(--font-head, serif); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); color: var(--blauw, #1c3150);
    transition: padding-left .4s cubic-bezier(.2, .7, .2, 1);
}
.faq-lijst summary:hover { padding-left: 2.3rem; }
.faq-lijst summary::-webkit-details-marker { display: none; }
.faq-lijst summary::before, .faq-lijst summary::after {
    content: ''; position: absolute; right: 1.8rem; top: 50%; width: 16px; height: 1px; background: var(--blauw, #1c3150);
    transition: transform .4s cubic-bezier(.7, 0, .2, 1);
}
.faq-lijst summary::after { transform: rotate(90deg); }
.faq-lijst details[open] summary::after { transform: rotate(0deg); }
.faq-lijst details p { padding: 0 1.8rem 1.7rem; max-width: 46em; }

/* ── Contact ── */
.contact__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: stretch; }
.contact__gegevens { list-style: none; margin: 1.8rem 0 2.4rem; display: grid; gap: .8rem; }
.contact__gegevens li { display: flex; gap: 1rem; align-items: center; color: var(--blauw, #1c3150); }
.contact__gegevens svg { width: 20px; height: 20px; color: var(--blauw, #1c3150); flex: none; }
.contact__knoppen { display: flex; flex-wrap: wrap; gap: 1rem; }
.kaart { min-height: 420px; border-radius: var(--boog); }
.kaart iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; filter: grayscale(.6) contrast(.95); }
@media (max-width: 1023px) { .contact__raster { grid-template-columns: 1fr; } }

/* ── Footer (marine) ── */
.site-footer { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); padding: 0 0 2.4rem; position: relative; }
.site-footer__lijn { color: var(--blauw, #1c3150); background: #fff; opacity: 1; }
.site-footer__lijn svg { width: 100%; height: auto; display: block; opacity: .25; }
.site-footer__raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; padding: 5rem 0 4rem; }
.site-footer h2 { font-size: 1.9rem; color: var(--blauw-licht, #e9eff5); margin-bottom: 1.4rem; }
.site-footer__links { list-style: none; display: grid; gap: .6rem; }
.site-footer__links a { color: var(--blauw-licht, #e9eff5); font-family: var(--font-head, serif); font-size: 1.1rem; }
.site-footer .contact__gegevens li, .site-footer .contact__gegevens svg { color: var(--blauw-licht, #e9eff5); }
.site-footer .contact__gegevens { margin: 0; }
.site-footer__merk { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; color: var(--blauw-licht, #e9eff5); }
.site-footer__merk .logo { flex-direction: column; gap: .6rem; }
.site-footer__merk .logo svg { width: 78px; height: 78px; }
.site-footer__merk .logo__naam { font-size: 1.1rem; }
.sociaal { display: flex; gap: .6rem; }
.sociaal a { color: var(--blauw-licht, #e9eff5); width: 44px; height: 44px; border: 1px solid rgba(233, 239, 245, .5); display: inline-flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.sociaal a:hover { background: var(--blauw-licht, #e9eff5); color: var(--blauw, #1c3150); }
.sociaal svg { width: 20px; height: 20px; }
.site-footer__onder { border: 1px solid rgba(233, 239, 245, .25); padding: 1.1rem 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; font-size: .8rem; opacity: .85; }
.site-footer__onder a { color: inherit; }
.site-footer__onder .cms-lock-link { display: inline-flex; vertical-align: middle; margin-left: .4rem; opacity: .6; }
.site-footer__onder .cms-lock-link:hover { opacity: 1; }
@media (max-width: 1023px) { .site-footer__raster { grid-template-columns: 1fr 1fr; } .site-footer__merk { align-items: flex-start; } }
@media (max-width: 767px) { .site-footer__raster { grid-template-columns: 1fr; } .site-footer { padding-bottom: 5.5rem; } }

/* ── Tekstpagina's (contact, privacy, cookies) ── */
.pagina-kop { background: var(--blauw-licht, #e9eff5); padding: 11rem 0 5rem; position: relative; overflow: hidden; }
.pagina-kop h1 { color: var(--blauw, #1c3150); font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); }
.pagina-kop .lijn { right: 0; bottom: 0; width: min(900px, 95vw); }
.pagina-inhoud { padding: 5rem 0 7rem; }
.pagina-inhoud .container > * { max-width: 780px; }
.pagina-inhoud h2 { font-size: 1.8rem; color: var(--blauw, #1c3150); margin: 2.6rem 0 .8rem; }
.pagina-inhoud h3 { font-size: 1.3rem; margin: 1.6rem 0 .6rem; }
.pagina-inhoud p, .pagina-inhoud li { margin-bottom: .8rem; }
.pagina-inhoud ul { padding-left: 1.2rem; }

/* ── Onthullen bij scrollen ──
   Alleen als JS draait (html.js), zodat zonder JS alles zichtbaar blijft.
   Foto's openen als een luikje: een masker schuift van onder naar boven. */
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal--links { transform: translateX(-40px); }
.js .reveal--rechts { transform: translateX(40px); }
.js .reveal--groei { transform: none; clip-path: inset(100% 0 0 0); transition: opacity .4s, clip-path 1.4s cubic-bezier(.7, 0, .2, 1); }
.js .reveal.is-zichtbaar { opacity: 1; transform: none; }
/* Alleen het luikje-effect clipt; op andere elementen zou de clip-path ook
   een uitklappende kalender afknippen. */
.js .reveal--groei.is-zichtbaar { clip-path: inset(0 0 0 0); }
.js .reveal[data-vertraging="1"] { transition-delay: .12s; }
.js .reveal[data-vertraging="2"] { transition-delay: .24s; }
.js .reveal[data-vertraging="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .js .reveal { opacity: 1; transform: none; clip-path: none; }
}

/* ── Telefoon: de boekbalk onderaan mag niets van de footer verbergen. ── */
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* ── Cellen ──
   Rasters (buurt, vragen)
   krijgen per cel een volledige rand; de randen overlappen elkaar een pixel,
   zodat ze als één lijn ogen. Anders dan met een gekleurde achtergrond achter
   de cellen blijft een lege plek in de laatste rij gewoon wit. */
.buurt__lijst li, .faq-lijst details {
    border: 1px solid var(--line, rgba(28, 49, 80, .14)); margin: -1px 0 0 -1px;
}
@media (max-width: 600px) { .ruimtes { grid-template-columns: 1fr 1fr; } .ruimtes li { padding: .9rem 1rem; } .ruimtes small { font-size: .82rem; } }
@media (max-width: 767px) { .split__beeld { aspect-ratio: 4 / 3; } }

/* Op een lichtblauwe sectie is een lichtblauw vlak onzichtbaar: dan wit. */
.sectie--licht .inbegrepen, .sectie--licht .snel-antwoord { background: #fff; }
/* Label en waarde in het personenvak breken nooit over twee regels. */
.keuze__vak small, .keuze__vak strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Lagen ──
   Menu 100, kalender 95, lightbox 80, vensters 70, kop 50, boekbalk 40.
   De kalender hangt aan <body> (boeken.js), dus geen sectie kan hem
   afknippen of bedekken. */

/* ── Kalender: voorvertoning ──
   Aankomst gekozen: de dagen tot waar de muis staat, kleuren alvast mee. */
.kal__dag.is-voorbeeld { background: var(--blauw-licht, #e9eff5); }
.kal__dag.is-voorbeeld-eind { background: var(--blauw-licht, #e9eff5); border-color: var(--blauw, #1c3150); }


/* ── Stap 2: de aanvraag (sectie Beschikbaarheid) ── */
.aanvraag { margin-top: clamp(3rem, 2rem + 3vw, 5rem); background: #fff; border: 1px solid var(--line, rgba(28, 49, 80, .14)); padding: clamp(1.5rem, 1rem + 2vw, 2.6rem); scroll-margin-top: 100px; }
.aanvraag__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.2rem; }
.aanvraag__kop h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); color: var(--blauw, #1c3150); }
.aanvraag__kop .boek__stap { color: var(--rood, #9d3326); }
.aanvraag__samenvatting { background: var(--blauw-licht, #e9eff5); color: var(--blauw, #1c3150); padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.aanvraag__samenvatting.is-gekozen { font-weight: 500; }
.aanvraag__velden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.aanvraag__velden input, .aanvraag__velden textarea { width: 100%; }
.aanvraag__velden .boek__veld { margin: 0; }
.aanvraag__bericht { grid-column: 1 / -1; }
.aanvraag__bericht textarea { min-height: 110px; resize: vertical; }
.aanvraag .boek__regel { margin: 1.2rem 0 0; }
.aanvraag__onder { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.aanvraag__onder .boek__status { margin: 0; }
.aanvraag .boek__klaar { text-align: left; }
@media (max-width: 1023px) { .aanvraag__velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .aanvraag__velden { grid-template-columns: 1fr; } .aanvraag__onder .btn { width: 100%; } }

/* ── Na het versturen: wat er nu gebeurt ──
   Op de plaats van het formulier een genummerde rij stappen. Rechthoeken zoals
   overal (vaste regel van de klant): de verstuurde aanvraag is een vol marine
   vakje met een vinkje, de volgende stap een marine kader met het rode label
   van de boekingsstappen ("Stap 2 van 2"), de rest een lichte rand. Een dunne
   lijn verbindt de vakjes. */
.vervolg__kop:focus { outline: none; }
.vervolg__intro { margin-bottom: 1.8rem; }
.vervolg__stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.vervolg__stap { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.vervolg__stap:not(:last-child)::after { content: ""; position: absolute; left: 1.3rem; top: 2.6rem; bottom: -1.6rem; width: 1px; background: var(--line, rgba(28, 49, 80, .14)); }
.vervolg__teken { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--line, rgba(28, 49, 80, .14)); background: #fff; color: var(--blauw, #1c3150); font-family: var(--font-head); font-size: 1.15rem; line-height: 1; }
.vervolg__teken svg { width: 1.2rem; height: 1.2rem; }
.vervolg__stap--klaar .vervolg__teken { background: var(--blauw, #1c3150); border-color: var(--blauw, #1c3150); color: #fff; }
.vervolg__stap--volgende .vervolg__teken { border-color: var(--blauw, #1c3150); }
.vervolg__inhoud { padding-top: .25rem; }
.vervolg__label { display: block; margin-bottom: .3rem; white-space: normal; }
.vervolg__titel { font-size: 1.3rem; color: var(--blauw, #1c3150); }
.vervolg__tekst { margin-top: .35rem; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Kleinste telefoons (tot 400 px) ──
   Logo, Reserveer en menu passen samen op één regel. */
@media (max-width: 400px) {
    .logo { gap: .55rem; }
    .logo svg { width: 30px; height: 30px; }
    .logo__naam { font-size: .95rem; letter-spacing: .16em; }
    .site-header__acties { gap: .45rem; }
    .site-header__acties .btn { padding: .6rem .75rem; letter-spacing: .06em; }
    .menu-knop { width: 42px; height: 42px; }
    .menu-knop span { left: 11px; right: 11px; }
    .menu-knop span:nth-child(1) { top: 16px; }
    .menu-knop span:nth-child(2) { top: 24px; }
}
@media (max-width: 370px) {
    .logo__naam { font-size: .88rem; letter-spacing: .1em; }
    .site-header__acties .btn { padding: .55rem .6rem; font-size: .66rem; }
    .menu-knop { width: 40px; height: 40px; }
}
/* Teller en hint nooit over twee regels; onder 1024 px de bediening onder
   de titel, over de volle breedte. */
.schuif-bediening__teller, .schuif-bediening__hint { white-space: nowrap; }
@media (max-width: 1023px) {
    .kort .sectie__kop { grid-template-columns: 1fr; }
    .kort .schuif-bediening { justify-self: stretch; }
    .kort .schuif-bediening__hint { margin-right: auto; }
}
@media (max-width: 1023px) { .kort .schuif-bediening__teller { margin-right: auto; } }

/* Focus die na een muisklik stil terugkomt (alegria.js, zachteFocus): geen
   kader. Met het toetsenbord verschijnt het wel. */
.geen-ring:focus, .geen-ring:focus-visible { outline: none; }

/* ── Indeling: open, niet opgehoopt ──
   Kamers en voorzieningen zonder vakjes of randen: tekst en iconen met
   witruimte ertussen, zoals de troeven. */
.ruimtes { gap: 1.4rem 2.5rem; padding: 0; margin-top: .4rem; }
.ruimtes li { padding: 0; background: none; }
.ruimtes li:hover { background: none; }
.ruimtes li:last-child:nth-child(odd) { grid-column: auto; }
.ruimtes strong { font-weight: 500; }
.voorz__lijst { gap: 2.4rem 2rem; padding: 0; }
.voorz__lijst li { padding: 0; background: none; gap: .9rem; }
.voorz__lijst li:hover { background: none; }

/* ── Fotoreeks: twee foto's naast elkaar ──
   De meeste foto's staan rechtop. Volgende schuift één foto op: de tweede
   komt op de eerste plaats. Op de telefoon één foto, maar hoger. */
.fotoreeks { --foto-gap: 16px; }
.fotoreeks__lijst { gap: var(--foto-gap); }
.fotoreeks__item { flex: 0 0 calc((100% - var(--foto-gap)) / 2); }
.fotoreeks__item .beeld { aspect-ratio: 3 / 4; }
.fotoreeks__bediening { margin-top: 1.2rem; }
@media (max-width: 767px) {
    .fotoreeks__item { flex-basis: 100%; }
    .fotoreeks__item .beeld { aspect-ratio: 4 / 5; }
}

/* ── De tekening van het huis ──
   Desktop: blijft naast de foto's staan terwijl je scrolt. Tablet en
   telefoon: klein en gewoon mee in de stroom, niet vast. (Deze regels staan
   bewust na de gewone .plan-regel: anders wint die en blijft het huisje
   plakken.) De namen van de lagen staan in de tekening: onder 320 px
   breed worden ze te klein om te lezen. */
@media (max-width: 1023px) { .plan { position: static; max-width: 360px; margin-inline: auto; } }
@media (max-width: 767px) { .plan { max-width: 320px; } .indeling__raster { gap: 2rem; } }

/* ── Tabs van de verdiepingen: doorzichtig op het lichtblauw ── */
.verdiepingen__tabs button { background: transparent; }
.verdiepingen__tabs button:hover { background: rgba(28, 49, 80, .06); }
.verdiepingen__tabs button[aria-selected="true"] { background: var(--blauw, #1c3150); }

/* ── Op deze verdieping ──
   Een label, de samenvatting in de titelletter, en per ruimte een lijnicoon:
   in één oogopslag zie je wat er is. */
.ruimtes__kop { margin: .6rem 0 1.6rem; }
.ruimtes__label { display: block; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin-bottom: .5rem; }
.ruimtes__samenvatting { font-family: var(--font-head, serif); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; color: var(--blauw, #1c3150); }
/* De iconen zijn getekend op 48 eenheden. Op 46 px blijft het detail
   (kussens, panelen, druppels) leesbaar; de tekst staat in het midden van
   het icoon, met één of met twee regels. */
.ruimtes li { display: flex; align-items: center; gap: 1.1rem; }
.ruimtes__icoon { flex: none; width: 46px; height: 46px; color: var(--blauw, #1c3150); }
.ruimtes__icoon svg { width: 100%; height: 100%; display: block; }
.ruimtes li strong { display: block; line-height: 1.3; }
.ruimtes li small { display: block; line-height: 1.4; margin-top: .15rem; }
@media (max-width: 600px) { .ruimtes { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; } .ruimtes__icoon { width: 38px; height: 38px; } .ruimtes li { gap: .8rem; } }

.fotoreeks__item img { -webkit-user-drag: none; user-select: none; }

/* ── Oproep: leg je verblijf vast ──
   Marine band over de volle breedte, gecentreerd, met de kustlijntekening
   (golven, strandcabines, meeuwen, zeilboot, zon) onderaan in lichtblauw.
   Geen .sectie: telt niet mee in de nummering. */
.cta { position: relative; overflow: hidden; background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); padding: clamp(5rem, 3rem + 6vw, 8.5rem) 0 clamp(7rem, 5rem + 7vw, 11rem); text-align: center; }
.cta__lijn { position: absolute; left: 0; right: 0; bottom: -4px; color: var(--blauw-licht, #e9eff5); opacity: .35; pointer-events: none; }
.cta__lijn svg { width: 100%; min-width: 900px; height: auto; display: block; margin: 0 auto; }
.cta__inhoud { position: relative; display: flex; flex-direction: column; align-items: center; }
.cta__label { font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; opacity: .8; margin-bottom: 1.4rem; }
.cta__kop { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.2rem); color: #fff; text-wrap: balance; margin-bottom: 1.3rem; }
.cta__tekst { max-width: 34em; font-size: 1.08rem; color: var(--blauw-licht, #e9eff5); opacity: .9; margin-bottom: 2.4rem; }
@media (max-width: 767px) { .cta__lijn svg { min-width: 700px; margin-left: -120px; } }

/* Zon, zee en strand achter de kop van de fotosectie. */
.galerij { overflow: hidden; }
.galerij__lijn { top: clamp(2rem, 1rem + 3vw, 4.5rem); right: var(--rand, 5vw); width: min(460px, 42vw); }
.galerij .container { position: relative; }
@media (max-width: 767px) { .galerij__lijn { width: 70vw; top: 1.5rem; right: -10vw; } }

/* ── Beschikbaarheid: vier maanden, compacter ──
   Twee boven, twee onder. De legende staat onder de kalender. Op een
   telefoon twee maanden onder elkaar: vier naast elkaar geeft vakjes die te
   klein zijn voor een vinger. */
.beschikbaar__maanden { grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.beschikbaar__maanden .kal__titel { font-size: 1.05rem; margin-bottom: .3rem; }
.beschikbaar__maanden .kal__raster { gap: 2px; }
.beschikbaar__maanden .kal__dag { font-size: .8rem; }
.beschikbaar__maanden .kal__dagnaam { font-size: .62rem; padding: .15rem 0; }
.beschikbaar__kaart .legende { margin-top: 1.4rem; }
.beschikbaar__actie { margin-top: 2rem; }
@media (max-width: 600px) {
    .beschikbaar__maanden { grid-template-columns: 1fr; }
    .beschikbaar__maanden .kal:nth-child(n+3) { display: none; }
    .beschikbaar__maanden .kal__dag { font-size: .88rem; }
}

/* Knop "Selecteer jouw data": gedimd tot er data zijn; hiernaast/hieronder. */
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
/* Gedimd: geen hover. De tekst blijft zoals hij is. */
.btn-boek[aria-disabled="true"]:hover { background: var(--rood, #9d3326); color: var(--rood-licht, #f7e6e2); border-color: var(--rood, #9d3326); }
.alleen-smal { display: none; }
@media (max-width: 1023px) { .alleen-breed { display: none; } .alleen-smal { display: inline; } }

/* Aanvraag: alle velden even hoog, ook de dropdown voor personen. */
.aanvraag__velden input, .aanvraag__velden .keuze__knop { height: 54px; }
.aanvraag__velden .keuze__knop { padding-block: 0; }

.sectie__kop .kop + .inleiding { margin-top: 1.2rem; }

/* ── Omgeving: reistijden ──
   Onder elke kaart drie kleine kolommen: te voet, met de fiets, met de auto.
   Het icoon zegt welke; de naam staat er voor schermlezers bij, verborgen.
   Geen lijn erboven (nooit een rand aan één kant), alleen witruimte. */
/* Twee tot vier reiswijzen, links tegen elkaar aan: valt er een weg (te voet
   boven drie uur, de auto onder anderhalve km), dan schuiven de rest aan in
   plaats van een gat te laten. Op een smalle kaart lopen ze over twee rijen. */
.omg-reis { list-style: none; display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; margin: 1.2rem 0 0; padding: 0; }
.omg-reis li { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; }
.omg-reis__ico { grid-row: span 2; width: 1.25rem; color: var(--blauw, #1c3150); }
.omg-reis__ico svg { width: 100%; height: auto; display: block; }
.omg-reis b { font-weight: 500; font-size: .9rem; line-height: 1.25; color: var(--blauw, #1c3150); white-space: nowrap; }
.omg-reis small { font-size: .76rem; line-height: 1.3; color: var(--muted, rgba(28, 49, 80, .62)); white-space: nowrap; }
.omg-reis__wijze { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.omg-modal .omg-reis { margin: 0 0 1.6rem; max-width: 26rem; }
/* De reistijden staan op elke kaart op dezelfde hoogte, hoe lang de tekst
   erboven ook is: de tekstkolom rekt op, de rij zakt naar onder. */
.omg-rij > div:not(.beeld):not([data-omg-meer]) { display: flex; flex-direction: column; }
.omg-rij > div:not(.beeld):not([data-omg-meer]) .omg-reis { margin-top: auto; padding-top: 1.2rem; }

/* ── Omgeving: merkje voor groepsactiviteiten ──
   Een witte rechthoek linksonder op het beeld, met een rand rondom. Staat
   buiten het beeld zelf, zodat de boog bovenaan het niet afsnijdt. */
.omg-rij__beeld { position: relative; }
.omg-rij__groep {
    position: absolute; left: 1rem; bottom: 2.2rem; z-index: 1;
    background: #fff; color: var(--blauw, #1c3150); border: 1px solid var(--blauw, #1c3150);
    padding: .45rem .8rem; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
}

/* ── Omgeving: foto en titel openen het venster ──
   De titel krijgt dezelfde groeiende lijn als elke link, de foto zoomt
   zacht in binnen haar luikje. Zo zie je dat ze klikbaar zijn. */
.omg-rij .beeld, .omg-rij h3 { cursor: pointer; }
.omg-rij h3 {
    background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
    transition: background-size .45s cubic-bezier(.7, 0, .2, 1); align-self: flex-start; padding-bottom: 2px;
}
.omg-rij h3:hover, .omg-rij .beeld:hover ~ div h3 { background-size: 100% 1px; }
.omg-rij .beeld { overflow: hidden; }
.omg-rij .beeld img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.omg-rij .beeld:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .omg-rij .beeld img { transition: none; } .omg-rij .beeld:hover img { transform: none; } }

/* ── In de buurt (sectie 08) ──
   Drie tabbladen met een klein icoon, daaronder rijen zonder kaders: de naam
   links, de looptijd rechts. Bij hover schuift een lichtblauw vlak van links
   in en schuift de pijl mee, dezelfde beweging als de knoppen. Geen lijnen
   tussen de rijen (nooit een rand aan één kant), alleen witruimte. */
.buurt-tabs__knoppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--blauw, #1c3150); margin: 0 0 2.6rem; max-width: 46rem; }
.buurt-tabs__knoppen button {
    display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1.05rem 1rem;
    background: transparent; border: 0; color: var(--blauw, #1c3150); cursor: pointer;
    font: inherit; font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
    transition: background .35s, color .35s;
}
.buurt-tabs__knoppen button + button { box-shadow: -1px 0 0 var(--blauw, #1c3150); }
.buurt-tabs__knoppen button:hover { background: rgba(28, 49, 80, .06); }
.buurt-tabs__knoppen button[aria-selected="true"] { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.buurt-tab__ico { width: 1.35rem; flex: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.buurt-tab__ico svg { width: 100%; height: auto; display: block; }
.buurt-tabs__knoppen button:hover .buurt-tab__ico { transform: rotate(-8deg) scale(1.1); }

.buurt-paneel { animation: verschijn .5s ease; }
/* Van dichtbij naar ver, per kolom: de dichtste bovenaan links, de tweede
   eronder, dan de rechterkolom. --rijen (de helft, naar boven afgerond) zet
   de bouw op de lijst; op een telefoon is het gewoon een kolom. */
.buurt-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rijen, 3), auto); grid-auto-flow: column; column-gap: 3rem; row-gap: .3rem; }
.buurt-rij {
    position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.4rem;
    padding: 1.1rem 1.2rem; margin: 0 -1.2rem; text-decoration: none; color: inherit;
}
.buurt-rij::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blauw-licht, #e9eff5);
    transform: scaleX(0); transform-origin: right center; transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
.buurt-rij:hover::before, .buurt-rij:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.sectie--licht .buurt-rij::before { background: #fff; }
.buurt-rij__tekst { flex: 1; min-width: 0; }
.buurt-rij strong { display: block; font-family: var(--font-head, Georgia, serif); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); color: var(--blauw, #1c3150); line-height: 1.2; }
.buurt-rij small { display: block; margin-top: .25rem; font-size: .9rem; line-height: 1.45; color: var(--muted, rgba(28, 49, 80, .62)); }
.buurt-rij__tijden { display: flex; gap: 1.1rem; flex: none; }
.buurt-rij__tijd { display: grid; grid-template-columns: auto auto; column-gap: .5rem; align-items: center; text-align: left; flex: none; }
.buurt-rij__ico { grid-row: span 2; width: 1.25rem; color: var(--blauw, #1c3150); }
.buurt-rij__ico svg { width: 100%; height: auto; display: block; }
.buurt-rij__tijd b { font-weight: 500; font-size: .92rem; color: var(--blauw, #1c3150); line-height: 1.2; white-space: nowrap; }
.buurt-rij__tijd small { margin: 0; font-size: .74rem; line-height: 1.2; white-space: nowrap; }
.buurt-rij__pijl { flex: none; color: var(--blauw, #1c3150); transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.buurt-rij:hover .buurt-rij__pijl { transform: translate(3px, -3px); }

/* Boodschappen en markten: de lijst links, de weekstrook rechts. */
.buurt-paneel--markt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
.buurt-paneel--markt .buurt-lijst { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.buurt-week h3 { font-size: .72rem; font-family: var(--font-body, sans-serif); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); margin: 1.1rem 0 1rem; }
.buurt-week__dagen { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.buurt-week__dagen li {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-left: -1px;
    border: 1px solid var(--line, rgba(28, 49, 80, .14)); font-size: .78rem; font-weight: 500; letter-spacing: .08em; color: var(--muted, rgba(28, 49, 80, .62));
}
.buurt-week__dagen li.is-markt { background: var(--blauw, #1c3150); border-color: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); position: relative; z-index: 1; }
.buurt-week__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.buurt-week__lijst li { display: flex; gap: 1rem; align-items: baseline; }
.buurt-week__dag { flex: none; width: 2.6rem; font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--blauw, #1c3150); }
.buurt-week__lijst strong { display: block; font-weight: 500; color: var(--blauw, #1c3150); }
.buurt-week__lijst small { display: block; font-size: .88rem; color: var(--muted, rgba(28, 49, 80, .62)); }

@media (max-width: 1023px) {
    .buurt-lijst, .buurt-paneel--markt { grid-template-columns: 1fr; }
    .buurt-lijst { grid-template-rows: none; grid-auto-flow: row; }
    .buurt-week { margin-top: 2rem; }
}
@media (max-width: 600px) {
    .buurt-tabs__knoppen button { flex-direction: column; gap: .45rem; padding: .9rem .4rem; font-size: .6rem; letter-spacing: .08em; text-align: center; }
    .buurt-rij { gap: 1rem; padding: 1rem .9rem; margin: 0 -.9rem; }
    .buurt-rij__pijl { display: none; }
}
@media (prefers-reduced-motion: reduce) { .buurt-rij::before, .buurt-tab__ico, .buurt-rij__pijl { transition: none; } }
.buurt-tabs__knoppen { max-width: 56rem; }
.buurt-week__dagen { max-width: 26rem; }
.buurt-week .buurt__noot { margin-top: 1.8rem; font-size: .9rem; }

/* ── Vragen: links uitgelijnd zoals elke andere sectie ── */
.faq-lijst { margin: 4rem 0 0; }

/* Een foto die bovenaan belangrijk is, blijft daar in beeld bij het bijsnijden. */
.beeld--boven img { object-position: 50% 12%; }
.gastenboek__raster p + p { margin-top: 1rem; }

/* ── Keuzelijst: één kolom ──
   Twee kolommen lazen als een raster; één rij per aantal leest als een lijst. */
.keuze__lijst { grid-template-columns: 1fr; max-height: 300px; }

/* ── Samenvatting van de aanvraag: data links, tarief rechts ──
   Het tarief komt uit de prijzen op de pagina (boeken.js). Op een telefoon
   schuift het onder de data. */
.aanvraag__samenvatting.is-gekozen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 2rem; }
.aanvraag__tarief { display: inline-flex; align-items: baseline; gap: .7rem; font-weight: 500; }
.aanvraag__tarief small { font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }

/* ── Verplichte velden ──
   Een rood sterretje (rood hoort bij boeken) achter het label, en onderaan
   één regel die zegt wat het betekent. */
.verplicht { font-style: normal; color: var(--rood, #9d3326); margin-left: .25em; }
.aanvraag__verplicht { margin: .9rem 0 0; font-size: .82rem; color: var(--muted, rgba(28, 49, 80, .62)); }
.aanvraag__verplicht .verplicht { margin: 0 .35em 0 0; }

/* De keuzelijst hangt los aan <body> (alegria.js): vaste plek, boven alles
   behalve het menu, net als de kalender (z-index 95). */
.keuze__lijst--los { position: fixed; right: auto; z-index: 96; }

/* Link onder een antwoord in de vragen (bv. naar Feestlocatie Alegria). */
.faq-lijst .faq__link { padding: 0 1.8rem 1.7rem; margin-top: -.6rem; color: var(--blauw, #1c3150); font-weight: 400; }

/* ============================================================
   ── Beweging: rust en eenheid (september 2026) ──
   Op vraag van de klant: minder beweging, minder verschil. Dit blok staat
   bewust als laatste en trekt alles gelijk. Wat nog beweegt:
     1. Knoppen (.btn): van vol naar lijn (of lijn naar vol). --duur-kort
     2. Tekstlinks: geen lijn, de tekst wordt vetter.        --duur-kort
     3. Knoppen zonder tekst, tabs, cellen, rijen, velden: alleen kleur of
        rand, zacht.                                          --duur-kort
     4. Wat opengaat (vraag, keuzelijst): plus wordt min, pijl draait.
                                                              --duur-kort
     5. Binnenkomen: elke sectie op dezelfde manier, 16 px omhoog en in.
                                                              --duur × 1,5
   Wat niet meer beweegt: foto's zoomen niet, iconen liften, draaien of
   groeien niet, tekst springt niet in, pijlen schuiven niet, de balk groeit
   niet. Eén curve (--curve) en twee duren, uit brand.css.
   ============================================================ */

/* 1. Knoppen: van vol naar lijn, in brand.css. De kop-knop volgt. */

/* 2. Tekstlinks: geen lijn, de tekst wordt vetter. Een echte wissel van
   gewicht maakt de tekst breder, zodat de rest van de regel opschuift, en
   Gilda Display bestaat maar in één dikte. Daarom een fijne omlijning in de
   tekstkleur (text-stroke): de letters worden dikker, de breedte blijft.
   Het actieve menu-item (aria-current) blijft vet staan. */
.lijnlink, .buurt__lijst a, .site-footer__links a, .site-footer__onder a, .contact__gegevens a, .omg-modal__bron a, .boek__noot a, .buurt__noot a, .boek__terug, .rond-knop,
.hoofdnav a, .omg-rij h3 {
    background: none; padding-bottom: 0; text-decoration: none;
    -webkit-text-stroke: 0 currentColor;
    transition: -webkit-text-stroke-width var(--duur-kort, .3s) var(--curve, ease), opacity var(--duur-kort, .3s) var(--curve, ease);
}
.lijnlink:hover, .buurt__lijst a:hover, .site-footer__links a:hover, .site-footer__onder a:hover, .contact__gegevens a:hover, .omg-modal__bron a:hover, .boek__noot a:hover, .buurt__noot a:hover, .boek__terug:hover, .omg-rij:hover .rond-knop,
.lijnlink:focus-visible, .site-footer__links a:focus-visible, .site-footer__onder a:focus-visible, .contact__gegevens a:focus-visible, .omg-modal__bron a:focus-visible, .boek__noot a:focus-visible, .rond-knop:focus-visible,
.hoofdnav a:hover, .hoofdnav a:focus-visible, .hoofdnav a[aria-current], .omg-rij h3:hover, .omg-rij .beeld:hover ~ div h3 {
    background: none; text-decoration: none; -webkit-text-stroke-width: .045em;
}
.omg-rij:hover .rond-knop { gap: .7rem; }

/* 3. Alleen kleur of rand, zacht en overal even snel. Tabs krijgen bij
   hover lichtblauw uit het palet, niet meer marine op 6 %. */
.schuif-knop, .kal__nav, .venster__sluit, .lightbox button, .sociaal a, .kal__acties button,
.tabs__knoppen button, .verdiepingen__tabs button, .buurt-tabs__knoppen button,
.faq-lijst details, .keuze__knop, .keuze__lijst li, .boek__datum, .kal__dag, .plan__laag .plan__vlak, .plan__laag .plan__gevel, .plan__laag .plan__luik, .plan__laag text, .plan__laag .plan__wijs, .plan__laag .plan__punt,
.taal a, .prijs__icoon, .site-header__lijn {
    transition-duration: var(--duur-kort, .3s);
    transition-timing-function: var(--curve, ease);
}
.tabs__knoppen button:hover, .verdiepingen__tabs button:hover, .buurt-tabs__knoppen button:hover { background: var(--blauw-licht, #e9eff5); }
.tabs__knoppen button[aria-selected="true"]:hover, .verdiepingen__tabs button[aria-selected="true"]:hover, .buurt-tabs__knoppen button[aria-selected="true"]:hover { background: var(--blauw, #1c3150); }
.venster .venster__sluit:hover { background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); }
.keuze__lijst li { transition-property: background, color; }
.keuze__lijst li:hover, .keuze__lijst li.is-actief { padding-left: .9rem; }
.prijs:hover .prijs__icoon { opacity: .4; }
.menu__lijst:hover a { opacity: 1; }
.menu-knop:hover span:nth-child(2) { transform: none; }
.menu__sluit:hover::before { transform: rotate(45deg); }
.menu__sluit:hover::after { transform: rotate(-45deg); }

/* Rijen in de buurt: het vlak kleurt zacht in, zonder in te schuiven, en
   de pijl blijft staan. */
.buurt-rij::before { transform: none; opacity: 0; transition: opacity var(--duur-kort, .3s) var(--curve, ease); }
.buurt-rij:hover::before, .buurt-rij:focus-visible::before { transform: none; opacity: 1; }
.buurt-rij:hover .buurt-rij__pijl { transform: none; }

/* 4. Wat opengaat: plus wordt min, pijl draait. Zelfde tempo. De vraag
   springt niet meer in. */
.faq-lijst summary { transition: none; }
.faq-lijst summary:hover { padding-left: 1.8rem; }
.faq-lijst summary::before, .faq-lijst summary::after, .keuze__knop svg { transition: transform var(--duur-kort, .3s) var(--curve, ease); }

/* Geen zoom, geen lift, geen draai, geen groei. */
.beeld img, .omg-rij .beeld img { transition: none; }
a:hover .beeld img, button:hover .beeld img, .beeld:hover img, .kaart-hover:hover .beeld img, .omg-rij .beeld:hover img { transform: none; }
.kaart-hover { transition: border-color var(--duur-kort, .3s) var(--curve, ease); }
.kaart-hover:hover { transform: none; box-shadow: none; }
.troef:hover .troef__beeld, .voorz__lijst li:hover > svg, .omg-rij:hover .omg-rij__lijn svg, .buurt-tabs__knoppen button:hover .buurt-tab__ico { transform: none; }
.boekbalk { transition: transform var(--duur, .6s) var(--curve, ease); }
.boekbalk:hover { padding-bottom: 1.15rem; }
.boekbalk:hover .boekbalk__plus { transform: none; }

/* 5. Binnenkomen: één beweging voor alles. Van links, van rechts, het
   gordijn en de vertragingen vallen weg. */
.js .reveal, .js .reveal--links, .js .reveal--rechts, .js .reveal--groei {
    opacity: 0; transform: translateY(16px); clip-path: none;
    transition: opacity calc(var(--duur, .6s) * 1.5) var(--curve, ease), transform calc(var(--duur, .6s) * 1.5) var(--curve, ease);
}
.js .reveal.is-zichtbaar { opacity: 1; transform: none; }
.js .reveal[data-vertraging] { transition-delay: 0s; }

/* Tabpanelen, vensters, lightbox en menu: dezelfde zachte fade. */
@keyframes verschijn { from { opacity: 0; } to { opacity: 1; } }
.verdieping, .buurt__lijst, .prijzen__lijst, .buurt-paneel { animation: verschijn var(--duur-kort, .3s) var(--curve, ease); }
.venster__achter { transition: opacity var(--duur, .6s) var(--curve, ease); }
.venster__paneel { transform: translateY(16px); transition: opacity var(--duur, .6s) var(--curve, ease), transform var(--duur, .6s) var(--curve, ease); }
.lightbox { transition: opacity var(--duur, .6s) var(--curve, ease); }
.menu { transition: clip-path var(--duur, .6s) var(--curve, ease), visibility 0s var(--duur, .6s); }
.menu.is-open { transition: clip-path var(--duur, .6s) var(--curve, ease); }
.menu__lijst a { transition: transform var(--duur, .6s) var(--curve, ease), opacity var(--duur-kort, .3s) var(--curve, ease); }
.menu.is-open .menu__lijst li a { transition-delay: 0s; }

/* Na versturen: "Bedankt!" komt zacht binnen in plaats van te springen. */
.boek__klaar:not([hidden]) { animation: verschijn var(--duur, .6s) var(--curve, ease); }
.menu__lijst a { transform: none; opacity: 0; transition: opacity var(--duur, .6s) var(--curve, ease); }
.menu.is-open .menu__lijst a { opacity: 1; }

/* De kop bij het scrollen: dezelfde duur als de rest. */
.site-header { transition: background var(--duur, .6s) var(--curve, ease), height var(--duur, .6s) var(--curve, ease), color var(--duur, .6s) var(--curve, ease), box-shadow var(--duur, .6s) var(--curve, ease); }
.site-header__lijn { transition: opacity var(--duur, .6s) var(--curve, ease); }
.logo svg { transition: width var(--duur, .6s) var(--curve, ease), height var(--duur, .6s) var(--curve, ease); }

/* Versturen zonder data: de samenvatting kleurt rood op lichtrood (rood
   hoort bij boeken), tot de gast data kiest. */
.aanvraag__samenvatting.is-fout { background: var(--rood-licht, #f7e6e2); color: var(--rood, #9d3326); transition: background var(--duur-kort, .3s) var(--curve, ease), color var(--duur-kort, .3s) var(--curve, ease); }

/* Schoolvakantie in de kalender: een fijne stippellijn rondom de dag (nooit
   aan één kant), dezelfde in de legende. Lichtblauw blijft voor je keuze. */
.kal__dag.is-vakantie { border: 1px dashed rgba(28, 49, 80, .4); }
.kal__dag.is-vakantie:disabled { border-color: rgba(28, 49, 80, .2); }
.kal__dag.is-vakantie.is-start, .kal__dag.is-vakantie.is-eind { border-style: solid; border-color: var(--blauw, #1c3150); }
.legende i.is-vakantie { border: 1px dashed rgba(28, 49, 80, .5); }

/* ── Zwevende balk: een link naar sectie 06 ──
   Hij doet wat elke volle knop doet (regel 1, van vol naar lijn): het rode
   vlak valt weg, de rand en de tekst blijven rood. Hij zweeft boven de
   inhoud, dus het vlak wordt wit in plaats van doorzichtig. */
.boekbalk {
    text-decoration: none; border: 1px solid var(--rood, #9d3326);
    transition: transform var(--duur, .6s) var(--curve, ease), background-color var(--duur-kort, .3s) var(--curve, ease), color var(--duur-kort, .3s) var(--curve, ease);
}
.boekbalk:hover, .boekbalk:focus-visible { background: #fff; color: var(--rood, #9d3326); }

/* ── Aantal personen in de hero: het label in het vak ──
   Zelfde opbouw als aankomst en vertrek: klein label bovenaan, de waarde
   eronder, dezelfde binnenruimte. Zo zijn de drie vakken even hoog. Het
   label boven het vak is dan dubbel en blijft alleen voor schermlezers. */
.keuze__vak { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.keuze__vak small { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, rgba(28, 49, 80, .62)); }
.keuze__vak strong { font-weight: 500; font-size: 1rem; color: var(--blauw, #1c3150); }

/* ── Gekozen data in de aanvraag: een knop terug naar de kalender ──
   Ziet eruit als de tekst eromheen. Zoals elke tekstlink wordt de tekst bij
   hover vetter, zonder lijn. */
.aanvraag__data { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: -webkit-text-stroke-width var(--duur-kort, .3s) var(--curve, ease); }
.aanvraag__data:hover, .aanvraag__data:focus-visible { -webkit-text-stroke-width: .045em; }

/* ============================================================
   ── Binnenkomen: drie bewegingen uit het onderwerp, en verder stilte ──
   (30-09-2026, vervangt regel 5 hierboven.) De fade van onder naar boven op
   elke sectie is het handschrift van elke AI-site; die is weg. Wat beweegt,
   komt uit het huis en de zee, en beweegt maar op één plek per sectie:
     a. De foto's       een foto verschijnt zacht uit de kleur van de pagina,
                        zonder vorm of richting; in een raster een voor een
                        (keuze C van de klant, 30-09-2026; het luikje, een
                        foto die van onder naar boven opengaat, was optie A
                        en bleef een twijfelgeval)
     b. De lijn tekent  de lijntekeningen (kust, huis, vuurtoren, zee) tekenen
        zich            zichzelf zodra je erbij komt
     c. De stroming     kaarten in een rij komen een voor een binnen, van
                        links naar rechts, als een golf over de rij
   De hero doet niet mee: de eerste indruk moet er meteen staan, zonder te
   wachten op een animatie (een nevel op de titel is geprobeerd en geschrapt,
   te traag voor de klant).
   Stil: de hero, alle tekst, koppen, formulieren, de kalender, de vragen, de
   tabs, het contact en de voettekst. De .reveal zelf doet niets meer; alleen de
   soort erop beweegt. Tempo: --duur × 1,5 (0,9 s), de tekening 1,8 s.
   De soort staat altijd op een ouder van de foto, nooit op de foto zelf.
   Voor een fade maakt dat niet uit, maar voor het luikje was het nodig: een
   element met clip-path snijdt ook zijn eigen zichtbaarheid weg, en de
   kijker (IntersectionObserver) ziet het dan nooit binnenkomen.
   ============================================================ */
.js .reveal, .js .reveal--links, .js .reveal--rechts, .js .reveal--groei { opacity: 1; transform: none; clip-path: none; transition: none; }

/* a. De foto's: zachte fade */
.js .reveal--foto .beeld { opacity: 0; transition: opacity calc(var(--duur, .6s) * 1.5) var(--curve, ease); }
.js .reveal--foto.is-zichtbaar .beeld { opacity: 1; }
.js .galerij__raster.reveal--foto .galerij__item:nth-child(2) .beeld { transition-delay: .12s; }
.js .galerij__raster.reveal--foto .galerij__item:nth-child(3) .beeld { transition-delay: .24s; }
.js .galerij__raster.reveal--foto .galerij__item:nth-child(4) .beeld { transition-delay: .36s; }
.js .galerij__raster.reveal--foto .galerij__item:nth-child(5) .beeld { transition-delay: .48s; }
.js .verdiepingen.reveal--foto .fotoreeks__item:nth-child(2) .beeld { transition-delay: .15s; }
.js .verdiepingen.reveal--foto .fotoreeks__item:nth-child(3) .beeld { transition-delay: .3s; }
.js .gastenboek__beelden figure:nth-child(2).reveal--foto .beeld { transition-delay: .18s; }

/* b. De lijn tekent zich (pathLength="1" komt uit alegria.js) */
.js .reveal--lijn svg :is(path, circle, line, polyline, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--curve, ease); }
.js .reveal--lijn.is-zichtbaar svg :is(path, circle, line, polyline, ellipse) { stroke-dashoffset: 0; }

/* Zichtbaar tekenen. Op 14 % dekking zag niemand een tekening zich tekenen.
   Tijdens het tekenen staat een decoratieve tekening daarom vol (.6, de
   kust op de band .8); daarna (is-getekend, uit alegria.js) zakt ze zacht
   terug naar haar rusttint, die ook iets sterker is dan vroeger (.28). De
   tekening begint zodra een kwart ervan in beeld is (eigen kijker in
   alegria.js) en is na anderhalve seconde klaar: trager, en je was er al
   voorbij gescrold. */
.js .lijn.reveal--lijn { opacity: .28; transition: opacity var(--duur, .6s) var(--curve, ease) .3s; }
.js .cta__lijn.reveal--lijn { opacity: .35; transition: opacity var(--duur, .6s) var(--curve, ease) .3s; }
.js .lijn.reveal--lijn.is-zichtbaar:not(.is-getekend) { opacity: .75; }
.js .cta__lijn.reveal--lijn.is-zichtbaar:not(.is-getekend) { opacity: .9; }

/* Het huis: eerst tekenen de lijnen zich, dan komen de vlakken (de luiken,
   de gekozen laag) en de namen van de lagen erbij. */
.js .plan.reveal--lijn :is(.plan__vlak, .plan__wit, .plan__luik, text) { opacity: 0; transition: opacity calc(var(--duur, .6s) * 1.5) var(--curve, ease) .45s, fill var(--duur-kort, .3s) var(--curve, ease); }
.js .plan.reveal--lijn.is-zichtbaar :is(.plan__vlak, .plan__wit, .plan__luik, text) { opacity: 1; }

/* c. De stroming */
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li) { opacity: 0; transform: translateX(-14px); transition: opacity calc(var(--duur, .6s) * 1.5) var(--curve, ease), transform calc(var(--duur, .6s) * 1.5) var(--curve, ease); }
.js .reveal--stroom.is-zichtbaar :is(.troef, .omg-rij, .prijs, .buurt-lijst > li) { opacity: 1; transform: none; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(2) { transition-delay: .09s; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(3) { transition-delay: .18s; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(4) { transition-delay: .27s; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(5) { transition-delay: .36s; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(6) { transition-delay: .45s; }
.js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li):nth-child(n+7) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
    .js .reveal--foto .beeld { opacity: 1; transition: none; }
    .js .reveal--lijn svg :is(path, circle, line, polyline, ellipse) { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
    .js .reveal--stroom :is(.troef, .omg-rij, .prijs, .buurt-lijst > li) { opacity: 1; transform: none; transition: none; }
    .js .plan.reveal--lijn :is(.plan__vlak, .plan__wit, .plan__luik, text) { opacity: 1; transition: none; }
}

/* ── Reserveer even hoog als de menuknop ──
   Zodra het menu een knop wordt (onder 1180 px), staan Reserveer en de
   menuknop naast elkaar. Met padding kwam de knop op een andere hoogte uit
   dan het vierkant van het menu; nu krijgt hij dezelfde vaste hoogte, per
   schermbreedte mee met de menuknop (46, 42 en 40 px). */
@media (max-width: 1179px) {
    .site-header__acties .btn { height: 46px; padding-block: 0; box-sizing: border-box; }
}
@media (max-width: 400px) {
    .site-header__acties .btn { height: 42px; }
}
@media (max-width: 370px) {
    .site-header__acties .btn { height: 40px; }
}

/* ── Knop bij de kalender ──
   De knop is een eigen cel in het raster. Op desktop staat hij onder de
   tekst, links naast de kalender. Smaller staat de kalender onder de tekst,
   twee maanden hoog; stond de knop boven de kalender, dan was hij uit beeld
   net als je in de tweede maand je vertrekdag koos. Daar komt hij dus onder
   de kalender, over de volle breedte. */
.beschikbaar__raster { grid-template-areas: "tekst kaart" "actie kaart"; grid-template-rows: auto 1fr; row-gap: 0; }
.beschikbaar__raster > :first-child { grid-area: tekst; }
.beschikbaar__kaart { grid-area: kaart; }
.beschikbaar__actie { grid-area: actie; align-self: start; }
@media (max-width: 1023px) {
    .beschikbaar__raster { grid-template-areas: "tekst" "kaart" "actie"; grid-template-rows: none; row-gap: 0; }
    .beschikbaar__kaart { margin-top: 2rem; }
    .beschikbaar__actie { margin-top: 1.2rem; }
    .beschikbaar__actie .btn { width: 100%; justify-content: center; }
}

/* ── Website van een plek in de omgeving ──
   Een lijnknop onder de tekst, met het domein ernaast in klein grijs: je
   ziet waar je heen gaat voor je tikt. Op een telefoon komt het domein onder
   de knop. */
.omg-modal__site { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: 1.8rem 0 1.4rem; }
.omg-modal__domein { font-size: .85rem; color: var(--muted, rgba(28, 49, 80, .62)); }
@media (max-width: 600px) { .omg-modal__site { flex-direction: column; align-items: stretch; } .omg-modal__site .btn { justify-content: center; } .omg-modal__domein { text-align: center; } }

/* ── Ritme op de telefoon: meer lucht, overal dezelfde stappen ──
   Op een telefoon stond alles te dicht op elkaar: 72 px tussen de secties,
   koppen vlak op hun tekst, en details (een afstand, een looptijd, een
   bijschrift) tegen tekst die er niet bij hoort. Dat prikkelde. Hier één
   ritme met vier stappen, van groot naar klein:
   - tussen secties: 6,5rem boven en onder;
   - tussen de kop van een sectie en de inhoud: 3,4rem;
   - tussen blokken binnen een sectie: 2,6 tot 3,2rem;
   - tussen een titel en zijn eigen tekst: 0,8 tot 2rem, zodat wat bij
     elkaar hoort ook samen blijft en wat er niet bij hoort ver genoeg weg staat.
   Alleen voor de telefoon; tablet en desktop hadden al genoeg ruimte. */
@media (max-width: 767px) {
    /* Secties */
    .sectie { padding: 6.5rem 0; }
    .cta { padding: 6.5rem 0 8.5rem; }

    /* Label, kop, inleiding */
    .label { margin-bottom: 1.8rem; }
    .kop { margin-bottom: 2rem; line-height: 1.12; }
    .sectie__kop { row-gap: 2rem; margin-bottom: 3.4rem; }
    .sectie__kop .kop + .inleiding, .sectie__kop .kop + p { margin-top: 1.6rem; }
    .tekst p { margin-bottom: 1.5rem; }
    .tekst .btn { margin-top: 1rem; }
    .split { gap: 3.6rem; }

    /* In het kort */
    .troef__beeld { margin-bottom: 1.6rem; }
    .troef__waarde { margin-top: .2rem; }
    .troef__titel { margin: 1rem 0 1.2rem; }
    .troef-regel { margin-top: 3.2rem; padding: 1.6rem 1.4rem; align-items: flex-start; }
    .troef-regel strong { margin-bottom: .6rem; }

    /* Indeling */
    .verdiepingen__tabs { margin-bottom: 2.8rem; }
    .fotoreeks { margin-bottom: 2.8rem; }
    .fotoreeks__item figcaption { padding-top: 1rem; }
    .fotoreeks__bediening { margin-top: 1.2rem; justify-content: space-between; }
    .ruimtes__kop { margin: 2.4rem 0 2rem; }
    .ruimtes__label { margin-bottom: .8rem; }
    .ruimtes { gap: 1.9rem 1.4rem; }
    .voorz { margin-top: 5rem; gap: 2rem; }
    .voorz__kop { margin-bottom: 1.2rem; }

    /* Oproep in marine */
    .cta__label { margin-bottom: 1.8rem; }
    .cta__kop { margin-bottom: 1.8rem; }
    .cta__tekst { margin-bottom: 2.8rem; }

    /* Prijzen */
    .prijzen__tabs .tabs__knoppen { margin-bottom: 2.8rem; }
    .prijzen__tijd { margin-bottom: 2.8rem; }
    .prijzen__lijst { gap: 2.2rem; }
    .prijzen__andere { margin-top: 3.4rem; }
    .prijzen__actie { margin-top: 2.2rem; }

    /* Beschikbaarheid en aanvraag */
    .beschikbaar__kaart { margin-top: 2.8rem; }
    .beschikbaar__actie { margin-top: 1.6rem; }
    .aanvraag { margin-top: 4rem; }
    .aanvraag__kop { margin-bottom: 1.6rem; }
    .aanvraag__samenvatting { margin-bottom: 2rem; }
    .aanvraag__velden { gap: 1.4rem; }

    /* Omgeving */
    .omg-rij .beeld { margin-bottom: 1.5rem; }
    .omg-rij__afstand { margin-bottom: .8rem; }
    .omg-rij h3 { margin-bottom: .8rem; }
    .omg-rij > div:not(.beeld):not([data-omg-meer]) .omg-reis { padding-top: 1.6rem; }
    .omg-rij .rond-knop { margin-top: 1.6rem; }
    .omg-modal__tekst h2 { margin-bottom: 1.4rem; }
    .omg-modal .omg-reis { margin-bottom: 2rem; }
    .omg-modal__tekst p { margin-bottom: 1.3rem; }

    /* In de buurt */
    .buurt-tabs__knoppen { margin-bottom: 2.6rem; }
    .buurt-lijst { row-gap: .6rem; }
    .buurt-rij { padding-block: 1.3rem; }
    .buurt-rij small { margin-top: .45rem; }
    .buurt__noot { margin-top: 2.8rem; }
    .buurt-week h3 { margin: 2.4rem 0 1.2rem; }
    .buurt-week__dagen { margin-bottom: 2rem; }
    .buurt-week__lijst { gap: 1.4rem; }

    /* Gastenboek */
    .gastenboek__raster { gap: 3.6rem; }
    .gastenboek__raster p + p { margin-top: 1.4rem; }

    /* Vragen */
    .faq-lijst { margin-top: 3.4rem; }
    .faq-lijst details p { padding-bottom: 2rem; }

    /* Contact */
    .contact__raster { gap: 4rem; }
    .contact__gegevens { margin: 2.4rem 0 3rem; gap: 1.1rem; }

    /* Voettekst */
    .site-footer__raster { padding: 5rem 0 4rem; gap: 3.6rem; }
    .site-footer h2 { margin-bottom: 1.6rem; }
    .site-footer__links { gap: .9rem; }
    .site-footer .contact__gegevens { gap: 1.1rem; }
    .site-footer__merk { gap: 1.6rem; }
}


/* ============================================================
   Hero: de zee, het huis en "Wij komen met" (oktober 2026)

   De vorige hero (titel in het midden op een donkere video, een witte kaart
   eronder) vond de klant een sjabloon. Deze is in zeven proefversies
   gegroeid. Wat er staat en waarom:
   - de video van de zee over het hele scherm, de titel groot linksboven;
   - het huis zelf in drie luiken (gevel, living, slaapkamer): niemand
     boekt voor hij het huis gezien heeft. Een klik opent alle foto's;
   - de reservatie als zin in de vorm van een formulier: "Wij komen met 14
     personen, van … tot …". Open op het beeld, zonder wit kader;
   - geen kerncijfers en geen scrollteken meer: rust. De cijfers staan in
     "In het kort".
   De wortel heet .held (de klassen van de oude .hero zijn weg). De hero
   beweegt niet bij het binnenkomen. Het formulier is dezelfde #boek als
   vroeger, met dezelfde data-attributen: boeken.js merkt geen verschil, en
   in het boekingsvenster is het weer een gewoon wit formulier (alle regels
   hieronder gelden alleen binnen .held).
   ============================================================ */
.held {
    position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--blauw, #1c3150); color: var(--blauw-licht, #e9eff5); padding-top: 96px;
}
.held__beeld { position: absolute; inset: 0; overflow: hidden; }
.held__beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.held__beeld::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(28, 49, 80, .74) 0%, rgba(28, 49, 80, .5) 30%, rgba(28, 49, 80, .44) 58%, rgba(28, 49, 80, .82) 100%);
}
.held__in { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding-top: clamp(.5rem, 2.5vh, 2rem); }
.held__label { font-size: .74rem; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase; opacity: .92; margin-bottom: clamp(1.5rem, 3.6vh, 2.2rem); }
.held__label span + span::before { content: '/'; margin: 0 .9rem; opacity: .5; }
/* De titel is zo groot als het scherm toelaat: begrensd in de breedte (vw)
   en in de hoogte (vh), zodat het formulier op een laag scherm in beeld blijft. */
.held h1 { color: #fff; font-size: min(clamp(2.5rem, .2rem + 6vw, 7.6rem), 10vh); line-height: .99; letter-spacing: -.02em; max-width: 12.6em; text-wrap: balance; text-shadow: 0 2px 40px rgba(10, 20, 35, .35); }
.held__onder { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: end; margin-top: clamp(1.2rem, 3vh, 3rem); }
.held__actie { align-self: end; padding-bottom: clamp(2.6rem, 7vh, 4.6rem); }

/* ── De titel staat in het midden van de vrije ruimte ──
   De titel hing bovenaan en de onderste rij (formulier en luiken) nam de rest
   in. Dat zag er gecentreerd uit zolang de titel drie regels telde. Toen de
   klant hem via de assistent inkortte tot twee regels (oktober 2026), stond
   er 23 px boven en 133 px onder: de titel zakte visueel naar boven. Nu krijgt
   de onderste rij zijn eigen hoogte en staat de kop in het midden van wat
   overblijft, hoeveel regels hij ook telt. Alleen vanaf 1024 px: op tablet en
   telefoon staat alles onder elkaar en is er geen ruimte om te verdelen. */
@media (min-width: 1024px) {
    .held__in { display: grid; grid-template-rows: 1fr auto; }
    .held__kop { align-self: center; }
    .held__onder { flex: none; }
}

/* ── Het huis in drie luiken ──
   Verschillend van hoogte, zoals gevels aan de dijk, en op de onderrand
   van de hero. Elke foto is een knop die de lightbox opent. */
.held__huis { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.held__luiken { --b: clamp(150px, 14.2vw, 236px); --h: clamp(230px, 38vh, 390px); display: flex; align-items: flex-end; gap: 16px; }
.luik { display: block; padding: 0; border: 0; overflow: hidden; background: var(--blauw-licht, #e9eff5); cursor: zoom-in; width: var(--b); height: var(--h); border-radius: 50% 50% 0 0 / calc(var(--b) / 2) calc(var(--b) / 2) 0 0; }
.luik img { width: 100%; height: 100%; object-fit: cover; display: block; }
.luik:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.held__luiken .luik:nth-child(1) { height: calc(var(--h) * 1.12); }
.held__luiken .luik:nth-child(2) { height: calc(var(--h) * .9); }
.held__luiken .luik:nth-child(3) { height: calc(var(--h) * 1.02); }
.held__alle { background: none; border: 0; padding: .3rem 0; font: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: inherit; cursor: pointer; white-space: nowrap; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width var(--duur-kort, .3s) var(--curve, ease); }
.held__alle:hover, .held__alle:focus-visible { -webkit-text-stroke-width: .045em; }

/* ── "Wij komen met": de zin als formulier ──
   Drie vakken die aan elkaar sluiten (personen over de volle breedte,
   daaronder aankomst en vertrek naast elkaar) en de knop eronder, even
   breed. In elk vak staat het woord van de zin klein boven de keuze: "Wij
   komen met" boven "14 personen", "van" en "tot" boven de data. De vakken
   overlappen elkaar één pixel, zodat er nergens een dubbele lijn staat. Een
   waas achter de vakken houdt ze leesbaar boven golven en wolken. */
.held .zin { --zin-kleur: #fff; --zin-lijn: rgba(255, 255, 255, .6); --zin-zacht: rgba(255, 255, 255, .82); --zin-vul: rgba(28, 49, 80, .5); background: none; box-shadow: none; color: var(--zin-kleur); }
.held .zin .boek__kop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; }
.held .zin .boek__lijf { padding: 0; }
.held .zin .boek__veld { margin: 0; }
.held .zin__rij { width: min(100%, 27rem); }
.held .zin__zin { font-family: var(--font-head, serif); font-size: clamp(1.2rem, .95rem + .45vw, 1.45rem); line-height: 1.2; color: var(--zin-kleur); }
.held .zin .keuze__knop {
    display: flex; width: 100%; min-height: 0; justify-content: space-between; align-items: center; gap: .8rem; padding: .85rem 1.15rem .95rem;
    font-family: var(--font-head, serif); font-size: 1em; line-height: 1.2; color: var(--zin-kleur);
    border: 1px solid var(--zin-lijn); background: rgba(28, 49, 80, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.held .zin .keuze__vak, .held .zin__paar { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; }
.held .zin .keuze__vak small, .held .zin__woord { font-family: var(--font-head, serif); font-size: .95rem; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--zin-zacht); }
.held .zin .keuze__vak strong { font-family: var(--font-head, serif); font-weight: 400; font-size: 1em; line-height: 1.2; color: var(--zin-kleur); white-space: nowrap; }
.held .zin .boek__data { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; margin-top: -1px; color: inherit; }
.held .zin__paar { position: relative; padding: .85rem 1.15rem .95rem; border: 1px solid var(--zin-lijn); background: rgba(28, 49, 80, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.held .zin__paar + .zin__paar { margin-left: -1px; }
.held .zin .boek__datum, .held .zin .boek__data:hover .boek__datum, .held .zin .boek__data[aria-expanded="true"] .boek__datum { display: block; max-width: 100%; padding: 0; border: 0; background: none; }
.held .zin .boek__datum small { display: none; }
.held .zin .boek__datum strong { display: block; font-family: var(--font-head, serif); font-weight: 400; font-size: 1em; line-height: 1.2; color: var(--zin-kleur); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.held .zin .boek__datum strong.is-leeg { color: var(--zin-zacht); }
.held .zin .keuze__knop:hover, .held .zin .keuze__knop[aria-expanded="true"],
.held .zin .boek__data:hover .zin__paar, .held .zin .boek__data[aria-expanded="true"] .zin__paar { position: relative; z-index: 1; border-color: var(--zin-kleur); background: var(--zin-vul); }
/* De knop is lichtrood met rode tekst: rood blijft de kleur van boeken,
   maar vol rood is op dit donkere beeld te donker om op te vallen. Hij is
   altijd vol, ook zonder data: dan opent hij de kalender. */
.held .zin .boek__knop { width: 100%; margin: -1px 0 0; min-height: 3.7rem; background: var(--rood-licht, #f7e6e2); color: var(--rood, #9d3326); border-color: var(--rood-licht, #f7e6e2); }
.held .zin .boek__knop:hover, .held .zin .boek__knop:focus-visible { background: transparent; color: var(--rood-licht, #f7e6e2); border-color: var(--rood-licht, #f7e6e2); }
/* De opschriften boven de vakken zijn er voor schermlezers; de vakken
   benoemen zichzelf. In het boekingsvenster is het een gewoon formulier:
   daar vallen de woorden van de zin weg en tonen de data hun eigen opschrift. */
.zin #boek-data-label, .zin #keuze-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.venster .zin__woord { display: none; }

@media (max-width: 1023px) {
    /* Onder elkaar: titel, het huis, het formulier. De video stopt onder de
       luiken en loopt over in marine; over de hele hero was hij een hoge,
       sterk ingezoomde strook. alegria.js meet waar de luiken eindigen
       (--beeld-h); de 76 % is de schatting voor het script draait. */
    .held__beeld { bottom: auto; height: var(--beeld-h, 76%); }
    .held__beeld::after { background: linear-gradient(180deg, rgba(28, 49, 80, .74) 0%, rgba(28, 49, 80, .46) 38%, rgba(28, 49, 80, .6) 72%, var(--blauw, #1c3150) 100%); }
    .held__in { padding-top: 2.3rem; }
    .held__onder { display: flex; flex-direction: column-reverse; align-items: stretch; margin-top: 2rem; }
    .held__actie { align-self: stretch; padding-top: 1.5rem; padding-bottom: 3.6rem; }
    .held__huis { align-items: stretch; flex-direction: column-reverse; gap: .7rem; }
    .held__alle { align-self: flex-end; font-size: .64rem; }
    /* De foto's krijgen het eerste scherm: drie luiken over de volle
       breedte, een kleine kwart van het scherm hoog. Het formulier begint
       onderaan dat scherm en mag er deels onder vallen: je ziet "Wij komen
       met" en de data, genoeg om te weten dat je hier boekt. Zo oogt de
       hero rustiger (vraag van de klant). Er valt niets te vegen: tikken
       opent de foto's, scrollen blijft scrollen. */
    .held__luiken { --h: clamp(140px, 23svh, 230px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .luik { width: 100%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
    .held .zin .keuze__knop, .held .zin__paar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 767px) {
    .held { padding-top: 78px; }
    .held__label { font-size: .66rem; letter-spacing: .16em; margin-bottom: 1.6rem; }
    .held__label span + span::before { margin: 0 .55rem; }
    .held h1 { font-size: clamp(2.1rem, .9rem + 5.6vw, 3.6rem); line-height: 1.06; }
    .held .zin__rij { width: 100%; }
    .held .zin__zin { font-size: 1.2rem; }
    .held .zin__paar { padding-inline: .9rem; }
}
/* Korte telefoons (tot 740 px hoog): alles iets compacter. */
@media (max-width: 767px) and (max-height: 740px) {
    .held__label { margin-bottom: 1.1rem; }
    .held__in { padding-top: 1.4rem; }
    .held__onder { margin-top: 1.5rem; }
    .held__luiken { --h: 21svh; }
    .held__actie { padding-top: 1.1rem; }
}


/* ============================================================
   Rust op desktop (proef, 06-10-2026)
   Naar het voorbeeld van een rustige site die de klant aanwees: veel meer
   lucht tussen de onderdelen, minder op één scherm, en beeld dat de ruimte
   niet vult maar erin staat. Vier bewuste keuzes:
   1. Tussen twee secties ongeveer een half scherm leegte. Wie scrolt, rust
      even uit voor het volgende onderwerp.
   2. Koppen kleiner en met meer adem tot de inhoud: de witruimte draagt de
      hiërarchie, niet de lettergrootte.
   3. Tekst in smalle kolommen: korte regels lezen rustiger.
   4. Rasters met bredere voegen: foto's en kaarten raken elkaar niet bijna.
   Alleen vanaf 1024 px; op tablet en telefoon geldt "Ritme op de telefoon".
   ============================================================ */
@media (min-width: 1024px) {
    /* 1. Leegte tussen de secties */
    .sectie { padding: clamp(9rem, 4rem + 9vw, 15rem) 0; }
    .cta { padding: clamp(10rem, 5rem + 9vw, 16rem) 0 clamp(12rem, 7rem + 10vw, 18rem); }

    /* 2. Koppen kleiner, meer adem */
    .kop { font-size: clamp(2rem, 1.3rem + 1.8vw, 3.1rem); margin-bottom: 2.4rem; }
    .label { margin-bottom: 2.2rem; }
    .sectie__kop { margin-bottom: clamp(4.5rem, 3rem + 3vw, 7rem); }

    /* 3. Smalle tekstkolommen */
    .tekst p, .inleiding, .gastenboek p { max-width: 30em; }
    .tekst p { margin-bottom: 1.5rem; }

    /* 4. Bredere voegen en beeld dat in de ruimte staat */
    .split { gap: clamp(6rem, 12vw, 14rem); }
    .split__beeld { max-width: 460px; justify-self: end; }
    .galerij__raster { gap: 28px; }
    .gastenboek__raster, .contact__raster { gap: clamp(6rem, 11vw, 12rem); }
    .beschikbaar__raster { column-gap: clamp(5rem, 9vw, 10rem); }
    .prijzen__lijst { gap: 3.6rem 4rem; }
    .faq-lijst { margin-top: 6rem; }
    .verdiepingen__tabs { margin-bottom: 3.4rem; }
    .ruimtes__kop { margin: 3.6rem 0 2.4rem; }
}