/* ============================================================
   alegria.css — Feestlocatie Alegria
   De vormgeving van de oude site (WordPress met Bricks), opnieuw geschreven
   met onze eigen klassen. Maten zijn gemeten op de oude site (1440 en 390
   pixels breed). Kleuren, letters en de breedte komen uit brand.css.

   Opbouw van dit bestand, van algemeen naar bijzonder:
     1. Basis            6. Fotoraster        11. Reviews
     2. Knoppen          7. Rijen             12. Voet en aanvraag
     3. Kop van de site  8. Vragen en info    13. Vaste knop, naar boven
     4. Megamenu         9. Centrale secties  14. Menu op de telefoon
     5. Held            10. Galerij           15. Lightbox, datumkiezer
                                              16. Binnenkomen
   Breakpoint: 767px (zoals de oude site). Mobiel staat bij elk onderdeel.
   ============================================================ */


/* ── 1. Basis ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
    margin: 0; background: var(--bg, #2e3732); color: var(--body, #c2a671);
    font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--ink, #c2a671); line-height: 1.3; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand, #c2a671); outline-offset: 3px; }
.icoon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icoon__vol { fill: currentColor; stroke: none; }
.icoon__uit { fill: var(--bg, #2e3732); stroke: none; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10002; padding: 8px 14px; background: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
.skip-link:focus { top: 16px; }


/* ── 2. Knoppen ──
   De pijlknop: een gouden vierkant met een pijl, daarnaast het label in een
   lijn. Bij hover loopt het label vol goud (van links). */
.pijlknop { display: inline-flex; align-items: stretch; min-height: 45px; color: var(--brand, #c2a671); }
.pijlknop__vak { display: grid; place-items: center; width: 51px; flex: none; background: var(--brand, #c2a671); color: var(--bg, #2e3732); font-size: 20px; }
.pijlknop__label {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center;
    padding: 0 27px; border: 1px solid var(--brand, #c2a671); border-left: 0; background: var(--bg, #2e3732);
    font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.7; transition: color var(--duur, .3s);
}
.pijlknop__label::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brand, #c2a671);
    transform: scaleX(0); transform-origin: left; transition: transform var(--duur, .3s) var(--curve, ease);
}
.pijlknop:hover .pijlknop__label, .pijlknop:focus-visible .pijlknop__label { color: var(--bg, #2e3732); }
.pijlknop:hover .pijlknop__label::before, .pijlknop:focus-visible .pijlknop__label::before { transform: scaleX(1); }
.pijlknop--groot { width: 300px; min-height: 55px; }
.pijlknop--groot .pijlknop__vak { width: 53px; }
.pijlknop--groot .pijlknop__label { flex: 1; }
.pijlknop--breed { width: 100%; }
.pijlknop--breed .pijlknop__label { flex: 1; }

/* Tekstlink: vet, onderlijnd, met een pijltje dat opschuift. */
.tekstlink { display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: .5px; line-height: 1.7; color: var(--brand, #c2a671); }
.tekstlink__label { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tekstlink .icoon { width: 16px; height: 16px; transition: transform var(--duur, .3s); }
.tekstlink:hover .icoon { transform: translateX(4px); }

/* Lijnknop (verstuur): een rand, tekst en pijl. */
.knop-lijn {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer;
    background: none; border: 1px solid var(--brand, #c2a671); color: var(--brand, #c2a671);
    font-family: var(--font-body); font-size: 16px; letter-spacing: .5px; line-height: 1.15; transition: background-color var(--duur, .3s), color var(--duur, .3s);
}
.knop-lijn:hover { background: var(--brand, #c2a671); color: var(--bg, #2e3732); }


/* ── 3. Kop van de site ── */
.kop { position: sticky; top: 0; z-index: 998; background: var(--bg, #2e3732); }
.topbalk { border-bottom: 1px solid var(--brand, #c2a671); }
/* Zoals de oude site: de avatars eindigen in het midden, sterren en
   cijfers beginnen er. */
.topbalk__reviews { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; width: min(var(--breedte, 1100px), 100%); height: 40px; margin: 0 auto; color: var(--brand, #c2a671); }
.topbalk__avatars { display: flex; justify-content: flex-end; }
.topbalk__avatars li { flex: none; width: 40px; }
.topbalk__avatars li + li { margin-left: -30px; }
/* Zoals op de oude site (.hover-review): elke foto groeit apart tot 120%,
   met dezelfde trage overgang. De PNG's hebben veel lege rand, vandaar de
   sterke overlap. */
.topbalk__avatars img {
    width: 40px; height: 40px; max-width: none; border-radius: 50%;
    transition: transform 1s cubic-bezier(.215, .61, .355, 1);
}
.topbalk__avatars li:hover img { transform: scale(1.2); }
.topbalk__score { display: flex; align-items: center; gap: 10px; }
.topbalk .topbalk__sterren svg { width: 26px; height: 26px; margin: 0 -1px; }
.topbalk__cijfers { font-size: 13px; line-height: 1; opacity: .9; white-space: nowrap; }
.topbalk__reviews:hover .topbalk__cijfers { text-decoration: underline; text-underline-offset: 3px; }

.hoofdmenu { display: flex; justify-content: center; padding: 10px 20px 20px; }
.hoofdmenu__lijst { display: flex; align-items: center; gap: 30px; }
.hoofdmenu__item { display: flex; align-items: center; }
.hoofdmenu__link {
    font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.7; text-transform: uppercase; color: var(--brand, #c2a671);
    background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--duur, .3s);
}
.hoofdmenu__link:hover { background-size: 100% 1px; }
.hoofdmenu__open { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; padding: 0; background: none; border: 0; color: var(--brand, #c2a671); cursor: pointer; font-size: 16px; }
.hoofdmenu__open .icoon { transition: transform var(--duur, .3s); }
.hoofdmenu__item--mega.is-open .hoofdmenu__open .icoon { transform: rotate(180deg); }
.mobielmenu__open { display: none; }

/* Kruimelpad */
.kruimelbalk, .kruimelpad { width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: 26px var(--rand, 20px) 0; }
.kruimelpad__lijst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.kruimelpad__item { display: inline-flex; align-items: center; gap: 12px; }
.kruimelpad__item + .kruimelpad__item::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.kruimelpad__link { opacity: .72; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; padding-bottom: 2px; transition: opacity var(--duur, .3s), background-size var(--duur, .3s); }
.kruimelpad__link:hover { opacity: 1; background-size: 100% 1px; }
.kruimelbalk .kruimelpad { padding: 0; }


/* ── 4. Megamenu ── */
.megamenu {
    --tegel: clamp(170px, calc((76vh - 170px) / 2), 250px);
    position: fixed; left: 0; right: 0; top: var(--kop-onder, 102px); z-index: 999;
    background: var(--bg-soft, #1b221e); border-block: 1px solid var(--line, rgba(194, 166, 113, .35));
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s;
}
.hoofdmenu__item--mega.is-open .megamenu { opacity: 1; visibility: visible; transform: none; }
.megamenu__binnen { width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: clamp(36px, 6vh, 64px) var(--rand, 20px); display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 56px; align-items: center; }
.megamenu__label { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.megamenu__titel { margin-bottom: 26px; font-family: var(--font-head); font-size: 36px; font-weight: 700; line-height: 1.2; }
.megamenu__alles { padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.megamenu__alles .tekstlink__label { text-decoration: none; }
.megamenu__tegels { display: grid; grid-template-columns: repeat(3, var(--tegel)); gap: 16px; }
.megamenu__tegel {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    width: var(--tegel); aspect-ratio: 1; padding: 20px; border: 1px solid var(--line, rgba(194, 166, 113, .35)); color: var(--brand, #c2a671);
    transition: background-color var(--duur, .3s), color var(--duur, .3s);
}
.megamenu__tegel::before { content: ""; position: absolute; right: -14px; bottom: -22px; width: 62%; aspect-ratio: 1; background: url('../images/static/alegria-a.png') center / contain no-repeat; opacity: .05; pointer-events: none; transition: opacity var(--duur, .3s); }
.megamenu__vraag { font-size: 14px; line-height: 1.4; font-style: italic; opacity: .8; }
.megamenu__naam { font-family: var(--font-head); font-size: clamp(16px, calc(var(--tegel) / 11.5), 24px); font-weight: 700; line-height: 1.15; }
.megamenu__pijl { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line, rgba(194, 166, 113, .5)); font-size: 14px; transition: transform var(--duur, .3s), border-color var(--duur, .3s); }
.megamenu__tegel:hover, .megamenu__tegel:focus-visible { background: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
.megamenu__tegel:hover::before, .megamenu__tegel:focus-visible::before { opacity: .12; }
.megamenu__tegel:hover .megamenu__pijl, .megamenu__tegel:focus-visible .megamenu__pijl { border-color: currentColor; transform: translateX(3px); }
@media (max-width: 1000px) { .megamenu__binnen { grid-template-columns: 1fr; gap: 28px; } }


/* ── 5. Held ── */
.held__titel { font-size: 40px; line-height: 1.25; }
.held__reviews { margin-top: 26px; }

/* Homepagina: tekst links, luchtfoto rechts, het kenmerk onderaan links. */
.held--home { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.held--home .held__tekst { align-self: center; max-width: 575px; margin: 0 0 56px 73px; padding: 20px; }
.held--home .held__kenmerk {
    position: absolute; left: 0; bottom: 0; padding: 10px 20px; background: var(--brand, #c2a671); color: var(--bg, #2e3732);
    font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.7; letter-spacing: .5px;
}
.held--home .held__foto img { width: 100%; height: 720px; object-fit: cover; }

/* Gelegenheid: foto tot aan de rand links, tekst rechts. */
.held__rij { display: grid; grid-template-columns: 710px 1fr; align-items: center; min-height: 700px; margin-top: 10px; }
.held--foto .held__foto img { width: 710px; height: 500px; object-fit: cover; }
.held--foto .held__tekst { padding: 20px; }
.held--foto .held__rij { background: url('../images/static/alegria-a.png') no-repeat 90% 10px / 350px; }
.held--foto .held__titel { max-width: 690px; }
.held--foto .held__intro { max-width: 500px; }
.held__knop { margin-top: 20px; }

/* Zonder foto: gecentreerd (mogelijkheden, over). */
.held--tekst { width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: 40px; text-align: center; }
.held--mogelijkheden { padding-block: 80px; }
.held--tekst .held__intro { max-width: 1060px; margin-inline: auto; }

@media (max-width: 767px) {
    .held__titel { font-size: 32px; line-height: 1.25; }
    .held--home { display: flex; flex-direction: column; min-height: 0; padding: 50px 0 0; }
    .held--home .held__tekst { max-width: none; margin: 0; padding: 20px; }
    .held--home .held__kenmerk { position: static; align-self: flex-start; margin: 30px 0 50px; }
    .held--home .held__foto img { height: 500px; }
    .held__rij { display: flex; flex-direction: column-reverse; min-height: 0; padding: 50px 0; }
    .held--foto .held__foto img { width: 100%; height: 500px; }
    .held--tekst { padding: 40px 20px 20px; }
}


/* ── 6. Fotoraster ──
   Drie kolommen, rijen van 300 pixels, met per pagina een vaste indeling
   (welke foto groot is). Op de telefoon rijen van 150, 250 en 150. */
.fotoraster-sectie { padding: 20px; }
.fotoraster {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 20px;
    width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: 0 20px;
}
.fotoraster__item, .fotoraster__link { display: block; overflow: hidden; }
.fotoraster__link { height: 100%; cursor: zoom-in; }
.fotoraster__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curve, ease); }
.fotoraster__link:hover img { transform: scale(1.05); }
.fotoraster--mozaiek .fotoraster__item:nth-child(5) { grid-area: 2 / 2 / 4 / 4; }
.fotoraster--drie .fotoraster__item:nth-child(2) { grid-area: 1 / 2 / 3 / 4; }
.fotoraster--vijf .fotoraster__item:nth-child(1) { grid-row: 1 / 3; }
.fotoraster--vijf .fotoraster__item:nth-child(4) { grid-area: 2 / 2 / 4 / 4; }
.fotoraster--zes .fotoraster__item:nth-child(3) { grid-area: 2 / 1 / 4 / 3; }
.fotoraster--zeven { grid-template-columns: 1.5fr 1fr 2.31fr; grid-template-rows: 300px 450px 300px; }
.fotoraster--zeven .fotoraster__item:nth-child(5) { grid-area: 2 / 2 / 3 / 4; }
.fotoraster--zeven .fotoraster__item:nth-child(6) { grid-area: 3 / 2 / 4 / 4; }
@media (max-width: 767px) {
    .fotoraster { grid-template-rows: 150px 250px 150px; grid-auto-rows: 150px; }
    .fotoraster--zeven { grid-template-rows: 150px 250px 150px; }
    /* Drie foto's vullen maar twee rijen; een vaste derde rij liet 170px
       leegte onder het raster. */
    .fotoraster--drie { grid-template-rows: 200px 200px; }
}


/* ── 7. Rijen: tekst naast foto's ──
   Smal: twee helften van 530 pixels binnen de breedte. Breed: de foto loopt
   tot aan de rand van het scherm (710 pixels), de tekst ernaast. */
.rijen { padding: 20px; }
.rij { display: flex; align-items: center; justify-content: center; min-height: 700px; }
.rij--media-eerst { flex-direction: row-reverse; }
/* De grote A achter sommige rijen, op de plek waar de oude site hem had. */
.rij[class*="rij--merk-"] { background: url('../images/static/alegria-a.png') no-repeat 10% 10px / 350px; }
.rij--merk-rechts { background-position: 90% 10px; }
.rij--merk-links-onder { background-position: 10% 340px; }
.rij__tekstkant { padding: 20px; }
.rij__kop { font-size: 32px; line-height: 1.3; }
.rij__tekst { max-width: 490px; }
.rij__tekst p + p, .rij__tekst p + ul { margin-top: 1em; }
.rij__knop { margin-top: 20px; }
.rij--smal .rij__tekstkant, .rij--smal .rij__mediakant { width: 530px; }
.rij--breed { justify-content: flex-start; margin-inline: -20px; }
.rij--breed .rij__mediakant { width: 710px; flex: none; }
.rij--breed .rij__tekstkant { width: 730px; }
.rij--breed .rij__tekst { max-width: 500px; }
.rij__media--een .rij__foto { width: 100%; height: 420px; object-fit: cover; }
/* Over en mogelijkheden: in de smalle rijen een staande foto. */
.rij__media--staand .rij__foto { width: 500px; height: 690px; object-fit: cover; }
.rij--breed .rij__foto { width: 100%; height: 500px; object-fit: cover; }
.rij__media--twee { display: flex; align-items: center; gap: 20px; }
.rij--tekst-eerst .rij__media--twee { flex-direction: row-reverse; }
.rij__media--twee .rij__foto { height: 420px; width: 265px; object-fit: cover; }
.rij__media--twee .rij__foto + .rij__foto { height: 380px; width: 244px; }
.rij__media--drie { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; gap: 20px; }
.rij__media--drie .rij__foto { width: 100%; height: 100%; object-fit: cover; }
.rij__media--drie .rij__foto:first-child { grid-row: 1 / 3; }
.rij__media--kaart { display: flex; justify-content: center; }
.rij__kaart { width: 335px; height: auto; }
.rij__video { display: block; width: 530px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: pointer; }

/* Opsomming met een gouden bolletje (lijsten op Over en jubileum). */
.opsomming { margin-top: 10px; }
.opsomming li { position: relative; padding-left: 18px; }
.opsomming li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bg, #2e3732), inset 0 0 0 5px currentColor; }

@media (max-width: 767px) {
    /* Meer lucht tussen de secties dan op de oude site (50px stond te krap,
       06-10-2026); de maat staat als --ruimte-mobiel in brand.css. */
    .rij, .rij--media-eerst { flex-direction: column; gap: 30px; min-height: 0; padding: var(--ruimte-mobiel, 60px) 0; }
    .rij[class*="rij--merk-"], .held--foto .held__rij { background-size: 200px; }
    .rij--breed { margin-inline: -20px; }
    .rij__tekstkant, .rij--smal .rij__tekstkant, .rij--breed .rij__tekstkant { width: 100%; }
    .rij__mediakant, .rij--smal .rij__mediakant, .rij--breed .rij__mediakant { width: 100%; display: flex; justify-content: center; }
    .rij__kop { font-size: 26px; }
    /* Op de telefoon gebruikt een foto altijd de volle breedte; twee foto's
       delen ze. */
    .rij__media { width: 100%; }
    .rij__media--een .rij__foto, .rij__media--staand .rij__foto, .rij--breed .rij__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
    .rij__media--staand .rij__foto { aspect-ratio: 5 / 6; }
    .rij__media--twee { gap: 10px; }
    .rij__media--twee .rij__foto, .rij__media--twee .rij__foto + .rij__foto { flex: 1 1 0; min-width: 0; width: auto; height: 320px; }
    .rij__media--twee .rij__foto + .rij__foto { height: 290px; }
    .rij__video { width: 100%; }
    .rij__media--kaart .rij__kaart { width: 100%; max-width: 335px; }
}


/* ── 8. Vragen en informatie ──
   Vraag en antwoord staan even ver van de rand (24 pixels). Een vierkant met
   een plus wordt een min, zoals het vierkant van de knoppen. */
.vragen-sectie, .info { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 740px; padding: 40px; text-align: center; }
.vragen-sectie__kop, .info__kop { font-size: 32px; line-height: 1.3; max-width: 900px; }
.vragen { width: min(650px, 100%); border-top: 1px solid var(--line, rgba(194, 166, 113, .35)); text-align: left; }
.vragen__item { border-bottom: 1px solid var(--line, rgba(194, 166, 113, .35)); transition: background-color var(--duur, .3s); }
.vragen__item[open] { background: rgba(16, 24, 20, .35); }
.vragen__vraag { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; cursor: pointer; list-style: none; }
.vragen__vraag::-webkit-details-marker { display: none; }
.vragen__vraagtekst { font-size: 20px; line-height: 1.4; }
.vragen__plus {
    flex: none; width: 36px; height: 36px; border: 1px solid var(--brand, #c2a671);
    background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
    transition: transform .35s, background-color var(--duur, .3s);
}
.vragen__item[open] .vragen__plus {
    transform: rotate(180deg); background-color: var(--brand, #c2a671);
    background-image: linear-gradient(var(--bg-dark, #101814), var(--bg-dark, #101814)); background-size: 14px 1.5px; background-position: center;
}
.vragen__antwoord { padding: 0 84px 26px 24px; line-height: 1.75; }
.info__tekst { max-width: 1060px; margin-top: 10px; }
.info__tekst ul { margin-top: 1em; }
@media (max-width: 767px) {
    .vragen-sectie, .info { min-height: 0; padding: calc(var(--ruimte-mobiel, 60px) + 10px) 20px; }
    .vragen-sectie__kop, .info__kop { font-size: 26px; }
    .vragen__vraag { padding: 20px 16px; }
    .vragen__vraagtekst { font-size: 18px; }
    .vragen__antwoord { padding: 0 16px 24px; }
}


/* ── 9. Centrale secties ──
   Gecentreerd, met de grote A van het logo onderaan in de hoek. */
.centraal {
    display: flex; align-items: center; justify-content: center; min-height: 810px; padding: 20px;
    background: url('../images/static/alegria-a.png') no-repeat 0 100% / 350px;
}
.centraal--merk-rechts { background-position: 100% 100%; }
.centraal__binnen { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(var(--breedte, 1100px), 100%); text-align: center; }
.centraal__kop { font-size: 32px; line-height: 1.3; }
.centraal__tekst { margin-top: -20px; }
.gelegenheden { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; gap: 20px 50px; margin-top: 21px; }
.troeven { display: flex; flex-direction: column; align-items: center; }
.troeven li { display: flex; }
@media (max-width: 767px) {
    .centraal { min-height: 0; padding: calc(var(--ruimte-mobiel, 60px) + 10px) 20px; background-size: 200px; }
    .centraal__kop { font-size: 26px; }
    .gelegenheden { grid-template-columns: 1fr; gap: 20px; }
    .gelegenheden .pijlknop--groot { width: 100%; }
}


/* ── 10. Galerij, sitemap, juridisch ── */
.galerij-sectie { padding: 20px; }
.galerij { --kolommen: 4; --tussen: 20px; width: min(var(--breedte, 1100px), 100%); margin: 0 auto; columns: var(--kolommen); column-gap: var(--tussen); }
.galerij__item { break-inside: avoid; margin-bottom: var(--tussen); }
.galerij__link { display: block; overflow: hidden; cursor: zoom-in; }
.galerij__link img { width: 100%; transition: transform .8s var(--curve, ease); }
.galerij__link:hover img { transform: scale(1.04); }
/* Met JavaScript: kolommen van links naar rechts, de kortste eerst. */
.galerij.is-gelegd { display: flex; align-items: flex-start; gap: var(--tussen); columns: auto; }
.galerij__kolom { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) { .galerij { --kolommen: 2; --tussen: 10px; } }

.sitemap { width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: 60px 20px 100px; }
.sitemap__titel { font-size: 40px; margin-bottom: 20px; }
.sitemap__lijst a { text-decoration: underline; text-underline-offset: 4px; }

.juridisch { width: min(860px, 100%); margin: 0 auto; padding: 40px 20px 100px; }
.juridisch h1 { font-size: 40px; margin-bottom: 8px; }
.juridisch h2 { font-size: 28px; margin: 32px 0 10px; }
.juridisch h3, .juridisch h4 { font-size: 20px; margin: 22px 0 6px; }
.juridisch p, .juridisch li { margin-bottom: 10px; }
.juridisch ul { padding-left: 20px; list-style: disc; }
.juridisch table { width: 100%; border-collapse: collapse; }
.juridisch th, .juridisch td { padding: 6px 10px; border: 1px solid var(--line, rgba(194, 166, 113, .35)); text-align: left; }
.juridisch a { text-decoration: underline; }


/* ── 11. Reviews ── */
.sterren { position: relative; display: inline-block; line-height: 0; white-space: nowrap; vertical-align: middle; }
.sterren svg { width: 16px; height: 16px; margin-right: 1px; }
.sterren__leeg svg { fill: rgba(194, 166, 113, .28); }
.sterren__vol { position: absolute; inset: 0 auto 0 0; width: var(--vul, 94%); overflow: hidden; }
.sterren__vol svg { fill: var(--ster, #ffc107); }

.reviewbadge { display: inline-flex; align-items: center; gap: 12px; color: var(--brand, #c2a671); font-size: 14px; line-height: 1.3; }
.reviewbadge__g { width: 30px; height: 30px; padding: 5px; flex: none; background: #fff; border-radius: 50%; }
.reviewbadge__tekst { display: grid; gap: 6px; justify-items: start; }
.reviewbadge:hover .reviewbadge__regel { text-decoration: underline; text-underline-offset: 4px; }
.reviewbadge--kaart { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line, rgba(194, 166, 113, .25)); font-size: 13px; opacity: .9; }
.reviewbadge--kaart .reviewbadge__g { width: 24px; height: 24px; padding: 4px; }
.reviewbadge--kaart .reviewbadge__tekst { justify-items: center; }
.reviewbadge--kaart .sterren svg { width: 13px; height: 13px; }

.reviews { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 130px) 20px; }
.reviews__binnen { position: relative; width: min(var(--breedte, 1100px), 100%); margin: 0 auto; display: grid; justify-items: center; gap: 48px; text-align: center; }
.reviews.heeft-reviews .reviews__binnen { grid-template-columns: minmax(280px, 360px) 1fr; justify-items: stretch; column-gap: 64px; text-align: left; }
.reviews__label { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.reviews__kop { margin-bottom: 26px; font-size: 32px; }
.reviews__score { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reviews.heeft-reviews .reviews__score { align-items: flex-start; }
.reviews__cijfer { font-family: var(--font-head); font-size: 72px; font-weight: 700; line-height: 1; }
.reviews__sterren svg { width: 24px; height: 24px; }
.reviews__aantal { margin-top: 10px; }
.reviews__knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; margin-top: 30px; }
.reviews.heeft-reviews .reviews__knoppen { justify-content: flex-start; }
.reviews__schrijf { font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.reviews__lijst:empty { display: none; }
.reviews__lijst { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; min-width: 0; }
.reviews__lijst::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line, rgba(194, 166, 113, .45)); }
.review__tekst { font-size: 15px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.review__kop { display: flex; align-items: center; gap: 14px; }
.review__foto { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.review__naam { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.2; }
.review__wanneer { font-size: 13px; opacity: .7; }
.review__link { margin-top: auto; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
    .reviews.heeft-reviews .reviews__binnen { grid-template-columns: 1fr; text-align: center; }
    .reviews.heeft-reviews .reviews__score { align-items: center; }
    .reviews.heeft-reviews .reviews__knoppen { justify-content: center; }
    .reviews__lijst { grid-auto-columns: 86%; }
    .review { text-align: left; }
    .reviews__kop { font-size: 26px; }
}


/* ── 12. Voet en aanvraag ──
   De contactkaart (donkerst) schuift 50 pixels over het formulier. */
.aanvraag { display: flex; align-items: center; justify-content: center; min-height: 900px; margin-top: 20px; padding: 20px; }
.aanvraag__binnen { display: flex; align-items: center; width: min(var(--breedte, 1100px), 100%); }
.aanvraag__kaart {
    position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    flex: none; width: 330px; min-height: 495px; margin-right: -50px; padding: 40px 20px; background: var(--bg-dark, #101814); text-align: center;
}
.aanvraag__kop, .aanvraag__titel { font-size: 30px; line-height: 1.35; }
.gegevens a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sociaal { display: flex; justify-content: center; gap: 10px; font-size: 30px; }
.sociaal a { display: grid; transition: transform var(--duur, .3s); }
.sociaal a:hover { transform: translateY(-2px); }
.aanvraag__formulier { flex: 0 1 770px; padding: 80px 100px; background: var(--bg-soft, #1b221e); }
.aanvraag__titel { margin-bottom: 50px; text-align: center; }
.formulier__veld { position: relative; margin-bottom: 20px; }
.formulier__label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; letter-spacing: .4px; line-height: 1.7; }
.formulier__invoer {
    width: 100%; height: 41px; padding: 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--brand, #c2a671); border-radius: 0;
    color: var(--brand, #c2a671); font: 16px/40px var(--font-body); color-scheme: dark; transition: border-color .1s;
}
.formulier__invoer:focus { outline: none; box-shadow: none; border-bottom-width: 2px; }
.formulier__invoer--lang { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.formulier__veld--lokaas { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__onder { display: flex; justify-content: flex-end; }
.formulier__melding { width: 100%; margin-top: 16px; padding: 12px 16px; border: 1px solid currentColor; }
.formulier__melding--fout { color: #f0a58f; }
.formulier__melding--ok { color: #b9d7a8; }

.voet__kolommen { display: flex; align-items: flex-start; width: min(var(--breedte, 1100px), 100%); margin: 0 auto; padding: 50px 0 0; text-align: center; }
.voet__merk { display: flex; align-items: center; justify-content: center; width: 209px; align-self: stretch; }
.voet__logo { width: 195px; height: auto; }
.voet__kolom { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.voet__kolom:nth-child(2) { flex: 0 0 275px; }
.voet__kolom:nth-child(3) { flex: 0 0 242px; }
.voet__kop { font-size: 30px; line-height: 1.35; }
.voet__lijst a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet__onder { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; width: min(var(--breedte, 1100px), 100%); min-height: 40px; margin: 30px auto 0; padding-bottom: 10px; }
.voet__juridisch { text-align: center; }
.voet__maker { text-align: right; }
.voet__onder a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cms-lock-link { display: inline-flex; margin-left: 8px; vertical-align: middle; opacity: .75; }
.cms-lock-link:hover { opacity: 1; }
@media (max-width: 767px) {
    .aanvraag { min-height: 0; padding: calc(var(--ruimte-mobiel, 60px) + 10px) 20px; }
    .aanvraag__binnen { flex-direction: column; }
    .aanvraag__kaart { width: 100%; min-height: 0; margin: 0; padding: 50px 20px; }
    .aanvraag__formulier { width: 100%; padding: 50px 20px; }
    .voet__kolommen { flex-direction: column; align-items: center; gap: 30px; padding: 50px 20px 0; }
    .voet__kolom, .voet__kolom:nth-child(2), .voet__kolom:nth-child(3) { flex: none; }
    .voet__onder { grid-template-columns: 1fr; gap: 6px; padding: 0 20px 100px; text-align: center; }
    .voet__maker { text-align: center; }
}


/* ── 13. Vaste knop "Check je datum" en naar boven ── */
.vaste-knop {
    position: fixed; right: 24px; bottom: 24px; z-index: 998; display: inline-flex; align-items: stretch; height: 54px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .38); transform: translateY(150%); opacity: 0; transition: transform .4s var(--curve, ease), opacity .4s;
}
.vaste-knop.is-zichtbaar { transform: none; opacity: 1; }
.vaste-knop__vak { display: grid; place-items: center; width: 54px; background: var(--bg, #2e3732); border: 1px solid var(--brand, #c2a671); color: var(--brand, #c2a671); font-size: 22px; }
.vaste-knop__label { display: flex; align-items: center; padding: 0 24px; background: var(--brand, #c2a671); color: var(--bg-dark, #101814); font-family: var(--font-head); font-size: 19px; font-weight: 700; letter-spacing: .02em; transition: background-color var(--duur, .3s); }
.vaste-knop:hover .vaste-knop__label, .vaste-knop:focus-visible .vaste-knop__label { background: var(--accent, #d4bb8a); }
.naar-boven {
    position: fixed; right: 24px; bottom: 92px; z-index: 997; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    background: var(--bg, #2e3732); border: 1px solid var(--brand, #c2a671); color: var(--brand, #c2a671); font-size: 18px; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity var(--duur, .3s), visibility var(--duur, .3s);
}
.naar-boven.is-zichtbaar { opacity: 1; visibility: visible; }
@media (max-width: 767px) {
    .vaste-knop { left: 16px; right: 16px; bottom: 16px; height: 52px; }
    .vaste-knop__label { flex: 1; justify-content: center; }
    .naar-boven { right: 16px; bottom: 82px; }
}


/* ── 14. Menu op de telefoon ── */
.mobielmenu { display: none; }
@media (max-width: 767px) {
    .hoofdmenu { padding: 10px 20px 14px; }
    .hoofdmenu__lijst { display: none; }
    .mobielmenu__open {
        display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: none; border: 0; cursor: pointer;
        color: var(--brand, #c2a671); font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .mobielmenu__lijnen { display: grid; gap: 5px; width: 22px; }
    .mobielmenu__lijnen span { height: 1.5px; background: currentColor; }
    .mobielmenu__lijnen span:nth-child(2) { width: 70%; }
    .topbalk__label { display: none; }
    .mobielmenu {
        position: fixed; inset: 0; z-index: 10001; display: flex; flex-direction: column; overflow-y: auto;
        background: var(--bg, #2e3732); opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s;
    }
    .mobielmenu[hidden] { display: none; }
    /* De lijst staat in het midden van het scherm; kop en knop eromheen. */
    .mobielmenu__nav { margin-block: auto; }
    .mobielmenu.is-open { opacity: 1; transform: none; }
    .mobielmenu__kop { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line, rgba(194, 166, 113, .25)); }
    .mobielmenu__merk { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
    .mobielmenu__sluit { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 1px solid var(--line, rgba(194, 166, 113, .5)); cursor: pointer; font-size: 18px; }
    .mobielmenu__nav { padding: 8px 20px 0; }
    .mobielmenu__item { border-bottom: 1px solid var(--line, rgba(194, 166, 113, .2)); }
    .mobielmenu__link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; background: none; border: 0; text-align: left; cursor: pointer; font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.2; }
    .mobielmenu__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
    .mobielmenu__uitklap .icoon { font-size: 22px; transition: transform var(--duur, .3s); }
    .mobielmenu__uitklap[aria-expanded="true"] .icoon { transform: rotate(180deg); }
    .mobielmenu__mogelijkheden { padding-bottom: 20px; }
    .mobielmenu__mogelijkheden .tekstlink { margin-top: 16px; padding: 0; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
    .mobielmenu__mogelijkheden .tekstlink__label { text-decoration: none; }
    .mobielmenu__tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mobielmenu__tegel { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 1; padding: 14px; border: 1px solid var(--line, rgba(194, 166, 113, .35)); transition: background-color .25s, color .25s; }
    .mobielmenu__tegel:active, .mobielmenu__tegel:focus-visible { background: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
    .mobielmenu__vraag { font-size: 12px; line-height: 1.35; font-style: italic; opacity: .8; }
    .mobielmenu__naam { font-family: var(--font-head); font-size: 18px; font-weight: 700; line-height: 1.15; }
    .mobielmenu__voet { padding: 28px 20px 32px; }
    body.menu-open { overflow: hidden; }
}


/* ── 15. Lightbox en datumkiezer ── */
.lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 48px 72px; background: rgba(16, 24, 20, .96); }
.lightbox[hidden] { display: none; }
.lightbox__foto { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__knop { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: none; border: 1px solid var(--line, rgba(194, 166, 113, .5)); color: var(--brand, #c2a671); font-size: 22px; cursor: pointer; }
.lightbox__sluit { top: 12px; right: 12px; }
.lightbox__vorige { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__volgende { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .lightbox { padding: 72px 8px; } }

.formulier__datum {
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a671' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") right 4px center / 20px no-repeat;
}
.formulier__datum::placeholder { color: var(--muted, rgba(194, 166, 113, .5)); }
.datumkiezer {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 316px; max-width: calc(100vw - 32px); padding: 18px;
    background: var(--bg-dark, #101814); border: 1px solid var(--line, rgba(194, 166, 113, .55)); box-shadow: var(--shadow);
}
.datumkiezer[hidden] { display: none; }
.datumkiezer__kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.datumkiezer__maand { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: capitalize; }
.datumkiezer__pijl { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 1px solid var(--line, rgba(194, 166, 113, .55)); cursor: pointer; font-size: 16px; transition: background-color .2s, color .2s; }
.datumkiezer__pijl:hover:not(:disabled) { background: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
.datumkiezer__pijl:disabled { opacity: .3; cursor: default; }
.datumkiezer__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.datumkiezer__wd { padding-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; opacity: .6; }
.datumkiezer__dag { display: grid; place-items: center; aspect-ratio: 1; padding: 0; background: none; border: 1px solid transparent; font-size: 14px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.datumkiezer__dag:hover:not(:disabled) { border-color: var(--line, rgba(194, 166, 113, .6)); }
.datumkiezer__dag.is-vandaag { border-color: var(--line, rgba(194, 166, 113, .45)); }
.datumkiezer__dag.is-weekend:not(:disabled) { color: #e3cfa3; }
.datumkiezer__dag[aria-pressed="true"] { background: var(--brand, #c2a671); color: var(--bg-dark, #101814); font-weight: 700; }
.datumkiezer__dag:disabled { opacity: .25; cursor: default; }
.datumkiezer__voet { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, rgba(194, 166, 113, .2)); }
.datumkiezer__maand { padding: 4px 8px; background: none; border: 1px solid transparent; cursor: pointer; }
.datumkiezer__maand:hover { border-color: var(--line, rgba(194, 166, 113, .45)); }
.datumkiezer__maanden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.datumkiezer__maandknop { padding: 12px 0; background: none; border: 1px solid var(--line, rgba(194, 166, 113, .3)); font-size: 14px; text-transform: capitalize; cursor: pointer; transition: background-color .2s, color .2s; }
.datumkiezer__maandknop:hover:not(:disabled), .datumkiezer__maandknop[aria-pressed="true"] { background: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
.datumkiezer__maandknop:disabled { opacity: .25; cursor: default; }
.datumkiezer__actie { padding: 4px 0; background: none; border: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }


/* ── 16. Binnenkomen ──
   Zoals op de oude site: tekst en foto's schuiven zacht binnen vanaf hun
   kant. Zonder JavaScript of met minder beweging staat alles er meteen.
   Een foto die nog moet binnenschuiven, staat 40px naast zijn plaats; op
   de telefoon steekt hij dan buiten het scherm en schuift de pagina opzij.
   clip (geen hidden) knipt dat af zonder de sticky kop te breken. */
.inhoud { overflow-x: clip; }
.js-actief [data-anim] { opacity: 0; transition: opacity 1s var(--curve, ease), transform 1s var(--curve, ease); }
.js-actief [data-anim="links"] { transform: translateX(-40px); }
.js-actief [data-anim="rechts"] { transform: translateX(40px); }
.js-actief [data-anim="op"] { transform: translateY(30px); }
.js-actief [data-anim].is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-actief [data-anim] { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ── 404 ──
   Dezelfde tekstheld als op Mogelijkheden, met twee knoppen eronder. De
   minimumhoogte houdt de voet uit het eerste scherm, zodat de pagina niet
   als een losse strook tekst boven het formulier hangt. */
.held--404 { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; padding-block: 80px; }
.held__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 36px; }

/* ── 17. Cookiebanner ──
   cookie-consent.js (template) zet zijn eigen stijl in de head, ná deze
   file; vandaar body ervoor. Klein en links onderaan, in groen en goud,
   zodat de banner de pagina niet afdekt. Weigeren en Accepteren blijven
   even groot (zo hoort het voor toestemming). Rechts staan op de telefoon
   de vaste knop en de knop naar boven, dus daar neemt hij de volle breedte. */
body .gx-cookie {
    left: 20px; right: auto; bottom: 20px; max-width: 340px; margin: 0; gap: 12px; padding: 16px 18px;
    background: var(--bg-dark, #101814); color: var(--brand, #c2a671); border: 1px solid var(--line, rgba(194, 166, 113, .35));
    border-radius: 0; box-shadow: var(--shadow, 0 20px 44px rgba(0, 0, 0, .4)); font-size: 12.5px; line-height: 1.55;
}
body .gx-cookie__tekst { flex: 1 1 100%; color: var(--brand, #c2a671); opacity: .9; }
body .gx-cookie__tekst a { color: var(--brand, #c2a671); }
body .gx-cookie__knoppen { width: 100%; margin: 0; }
body .gx-cookie__knop { flex: 1 1 0; padding: 7px 12px; border-radius: 0; border-color: var(--brand, #c2a671); color: var(--brand, #c2a671); font-size: 12.5px; }
body .gx-cookie__knop.is-accepteren { background: var(--brand, #c2a671); border-color: var(--brand, #c2a671); color: var(--bg-dark, #101814); }
@media (max-width: 767px) {
    body .gx-cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; z-index: 10000; gap: 10px; padding: 12px 14px; font-size: 12px; line-height: 1.5; }
    body .gx-cookie__knop { padding: 6px 10px; font-size: 12px; }
}

/* ── 18. Verder lezen ──
   Links onder een tekst naar een verwante pagina of onderwerp. Ze staan
   onder elkaar en schuiven met de tekst mee in, zonder eigen kader. */
.rij__verder { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }
.rij__verder .tekstlink { padding: 0; }