@font-face { font-family: Fraunces; src: url(../fonts/fraunces-400.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Fraunces; src: url(../fonts/fraunces-400-italic.woff2) format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: Albert; src: url(../fonts/albert-sans-400-700.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --creme: #f6f1e7; --zand: #ece2cf; --zand-2: #e2d5bd; --bos: #1e2b23; --bos-2: #2c3d32; --mos: #55684d; --goud: #b39555; --goud-l: #d1c68d;
  --inkt: #20251f; --tekst: #4a4f46; --muted: #7b7d72; --lijn: rgba(30,43,35,.14);
  --rand: clamp(20px, 4.4vw, 64px); --max: 1300px; --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 17.5px/1.7 Albert, system-ui, sans-serif; color: var(--tekst); background: var(--creme); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 400; color: var(--inkt); margin: 0; line-height: 1.02; letter-spacing: -.02em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--mos); }
p { margin: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.label { font: 600 12.5px/1.3 Albert, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--goud); display: inline-flex; align-items: center; gap: 12px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 600 16px/1 Albert, sans-serif; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), background-color .25s; white-space: nowrap; }
.knop-bos { background: var(--bos); color: var(--creme); }
.knop-bos:hover { background: #0f1912; transform: translateY(-2px); }
.knop-lijn { border: 1.5px solid var(--lijn); color: var(--inkt); background: transparent; }
.knop-lijn:hover { border-color: var(--bos); }
.knop svg { width: 18px; height: 18px; }
:focus-visible { outline: 3px solid var(--goud); outline-offset: 3px; }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: var(--creme); transition: box-shadow .3s; }
.kop.scroll { box-shadow: 0 1px 0 var(--lijn), 0 14px 30px -26px rgba(30,43,35,.5); }
.kop .wrap { display: flex; align-items: center; gap: 28px; height: 86px; }
.logo img { width: 150px; }
.menu { display: flex; gap: 6px; margin-left: auto; }
.menu a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--inkt); padding: 10px 14px; border-radius: 999px; transition: background-color .2s; }
.menu a:hover { background: rgba(30,43,35,.07); }
.kop .knop { min-height: 46px; padding: 0 20px; font-size: 15px; }
.menu-knop { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bos); color: var(--creme); align-items: center; justify-content: center; cursor: pointer; }
.menu-knop svg { width: 22px; height: 22px; }

/* ---------- held ---------- */
.held { padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 7vw, 100px); overflow-x: clip; }
.held .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.held h1 { font-size: clamp(56px, 7.6vw, 122px); line-height: .95; letter-spacing: -.035em; margin-top: 20px; }
.held .lead { margin-top: 26px; font-size: clamp(17.5px, 1.4vw, 20px); max-width: 33em; }
.boeken { margin-top: 34px; background: #fff; border-radius: 26px; padding: 10px; box-shadow: 0 2px 6px rgba(30,43,35,.05), 0 30px 60px -36px rgba(30,43,35,.45); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .72fr) auto; gap: 4px; align-items: stretch; }
.boeken label { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-radius: 18px; transition: background-color .2s; cursor: pointer; min-width: 0; }
.boeken label:hover, .boeken label:focus-within { background: var(--creme); }
.boeken span { font: 700 11px/1.2 Albert, sans-serif; letter-spacing: .1em; white-space: nowrap; text-transform: uppercase; color: var(--muted); }
.boeken input, .boeken select { border: 0; background: transparent; font: 600 15px/1.3 Albert, sans-serif; color: var(--inkt); padding: 4px 0 0; width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; outline: none; }
.boeken button { border-radius: 18px; min-height: 64px; }
.boeken input[type="date"] { font-size: 14.5px; letter-spacing: -.01em; }
.boeken input[type="date"]::-webkit-calendar-picker-indicator { margin: 0 0 0 2px; padding: 0; width: 13px; opacity: .55; cursor: pointer; }
.boeken-onder { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 16px; font-size: 15px; color: var(--muted); }
.boeken-kop { display: none; }
.boeken .veld { position: relative; }
.boeken .ico { display: none; }
.boeken .ph { display: none; font: 600 15px/1.3 Albert, sans-serif; font-style: normal; color: var(--mos); pointer-events: none; }
.boeken input[type="date"] { min-height: 22px; }
.boeken-onder span { display: inline-flex; align-items: center; gap: 6px; }
.boeken-onder svg { width: 15px; height: 15px; color: var(--mos); flex: none; }
@media (max-width: 680px) {
  .boeken { grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; border-radius: 24px; }
  .boeken-kop { display: block; grid-column: 1 / -1; font: 400 22px/1.1 Fraunces, serif; color: var(--inkt); padding: 2px 4px 4px; }
  .boeken .veld { background: var(--creme); border: 1.5px solid var(--zand-2); border-radius: 16px; padding: 12px 12px 12px 42px; min-height: 68px; }
  .boeken .veld:focus-within { border-color: var(--mos); }
  .boeken .ico { display: block; position: absolute; left: 13px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--mos); }
  .boeken input, .boeken select { font-size: 16px; }
  .boeken .veld.leeg input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; }
  .boeken .veld.leeg .ph { display: block; padding-top: 4px; }
  .boeken button { min-height: 58px; font-size: 16px; }
  .boeken-onder { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.boeken-onder a { color: var(--inkt); font-weight: 600; }
.boeken-onder b { color: var(--inkt); }
.held-beeld { position: relative; }
.boog { position: relative; border-radius: 999px 999px 28px 28px; overflow: hidden; aspect-ratio: 4 / 4.9; box-shadow: 0 40px 80px -46px rgba(30,43,35,.6); background: #dfe3d6; isolation: isolate; }
.boog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity 1.6s ease, transform 7s linear; }
.boog img.actief { opacity: 1; transform: scale(1.1); z-index: 1; }
.held-beeld .rond { position: absolute; left: -9%; bottom: 9%; width: 42%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--creme); box-shadow: 0 24px 50px -24px rgba(30,43,35,.55); }
.held-beeld .rond img { width: 100%; height: 100%; object-fit: cover; }
.held-beeld .open { position: absolute; right: -4%; top: 12%; background: var(--bos); color: var(--creme); border-radius: 20px; padding: 16px 20px; font-size: 14px; line-height: 1.35; box-shadow: 0 20px 40px -20px rgba(30,43,35,.7); }
.held-beeld .open b { display: block; font: italic 500 22px/1.1 Fraunces, serif; color: var(--goud-l); margin-bottom: 4px; }

/* ---------- band ---------- */
.band { background: var(--bos); color: var(--creme); overflow: hidden; padding: 18px 0; }
.band ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 36px; width: max-content; animation: band 40s linear infinite; font: italic 400 22px/1 Fraunces, serif; }
.band li { display: flex; align-items: center; gap: 36px; white-space: nowrap; }
.band li::after { content: "✦"; font-style: normal; font-size: 14px; color: var(--goud-l); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- kamers ---------- */
.kamers { padding: clamp(80px, 10vw, 140px) 0; }
.kopblok { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.kopblok h2 { font-size: clamp(44px, 5.4vw, 84px); margin-top: 16px; }
.kamer-rij { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.kamer { background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -40px rgba(30,43,35,.45); display: flex; flex-direction: column; }
.kamer .fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 10; padding: 8px 8px 0; }
.kamer .fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; }
.kamer .fotos img:first-child { grid-row: span 2; }
.kamer .tekst { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.kamer h3 { font-size: clamp(32px, 3vw, 42px); }
.kamer .tekst > p { margin-top: 10px; }
.kenmerken { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kenmerken li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: var(--creme); font-size: 14.5px; font-weight: 600; color: var(--inkt); }
.kenmerken svg { width: 16px; height: 16px; color: var(--mos); }
.prijsrij { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 26px; }
.prijs b { display: block; font: 500 44px/1 Fraunces, serif; color: var(--inkt); letter-spacing: -.02em; }
.prijs span { font-size: 14px; color: var(--muted); }

/* ---------- gastheer en gastvrouw ---------- */
.gasten { background: var(--bos); color: #cfd6cd; padding: clamp(80px, 10vw, 140px) 0; position: relative; overflow: hidden; }
.gasten .huis { position: absolute; right: -60px; bottom: -40px; width: 620px; opacity: .08; pointer-events: none; }
.gasten .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.gasten h2 { color: var(--creme); font-size: clamp(44px, 5.4vw, 84px); margin: 18px 0 24px; }
.gasten h2 em { color: var(--goud-l); }
.gasten p + p { margin-top: 14px; }
.gasten .knop-lijn { color: var(--creme); border-color: rgba(246,241,231,.3); margin-top: 28px; }
.gasten .knop-lijn:hover { border-color: var(--creme); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo figure { margin: 0; }
.duo figure:nth-child(2) { margin-top: 70px; }
.duo .portret { border-radius: 999px 999px 24px 24px; overflow: hidden; aspect-ratio: 3 / 4.1; background: #0c0e0c; }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.duo figcaption { margin-top: 14px; }
.duo figcaption b { display: block; font: 500 22px/1.2 Fraunces, serif; color: var(--creme); }
.duo figcaption span { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--goud-l); }

/* ---------- theetuin ---------- */
.theetuin { padding: clamp(80px, 10vw, 140px) 0; background: var(--zand); }
.theetuin .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.collage { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.collage img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }
.collage .c1 { grid-row: span 2; aspect-ratio: 3 / 4.4; border-radius: 999px 999px 24px 24px; }
.collage .c2, .collage .c3 { aspect-ratio: 1; }
.theetuin h2 { font-size: clamp(44px, 5.4vw, 84px); margin: 18px 0 22px; }
.uren { display: inline-flex; gap: 12px; align-items: center; margin-top: 22px; padding: 12px 18px; border-radius: 16px; background: var(--creme); font-weight: 600; color: var(--inkt); }
.uren svg { width: 20px; height: 20px; color: var(--mos); }
.kaartje { margin-top: 28px; border-top: 1px solid var(--lijn); }
.regel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--lijn); }
.regel b { font: 500 21px/1.2 Fraunces, serif; color: var(--inkt); }
.regel .p { font: 600 16px/1.2 Albert, sans-serif; color: var(--inkt); white-space: nowrap; }
.regel small { grid-column: 1 / -1; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* ---------- omgeving ---------- */
.omgeving { padding: clamp(80px, 10vw, 140px) 0; }
.omgeving .wrap > .kopblok { margin-bottom: 40px; }
.omg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.kaart-illus { background: #f6f1e7; border-radius: 30px; padding: 0; overflow: hidden; position: relative; min-height: 340px; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -40px rgba(30,43,35,.45); display: flex; flex-direction: column; justify-content: center; }
.kaart-illus svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kaart-illus p { position: absolute; left: 24px; bottom: 16px; font-size: 13px; color: var(--muted); }
.kaart-illus { display: flex; flex-direction: column; }
.kaart-illus svg { position: relative; inset: auto; height: auto; flex: 1; min-height: 300px; }
.kaart-illus .kaart-noot { position: absolute; left: 22px; top: 16px; bottom: auto; font-size: 12.5px; color: var(--muted); }
.poi { cursor: pointer; outline: none; }
.poi text { transition: fill .25s; }
.poi:hover text, .poi:focus-visible text, .poi.actief text:first-of-type { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.poi .ring { transform-box: fill-box; transform-origin: center; animation: kaartpuls 2.4s ease-out infinite; }
@keyframes kaartpuls { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.route { animation: mieren 1.6s linear infinite; }
@keyframes mieren { to { stroke-dashoffset: -18; } }
.hert-kop { transform-box: fill-box; transform-origin: 0% 100%; animation: grazen 6s ease-in-out infinite; }
@keyframes grazen { 0%, 55%, 100% { transform: rotate(0); } 65%, 90% { transform: rotate(38deg) translate(-1px, 3px); } }
.boom .blad { transform-box: fill-box; transform-origin: 50% 100%; animation: wiegen 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes wiegen { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.boom .blad.schud { animation: schud .75s ease-out; }
@keyframes schud { 0% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
.hert { transition: transform 1.4s cubic-bezier(.3,.1,.25,1); cursor: pointer; }
.hert-spring { transform-box: fill-box; }
.hert.rent .hert-spring { animation: hop .28s ease-in-out 5; }
@keyframes hop { 50% { transform: translateY(-5px); } }
.hert-in { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .25s; }
.hert.links .hert-in { transform: scaleX(-1); }
.wolk { animation: drijf var(--t) linear infinite; animation-delay: var(--v); }
@keyframes drijf { from { transform: translateX(-60px); } to { transform: translateX(580px); } }
.vogels { animation: vlieg 24s linear infinite; animation-delay: -5s; }
@keyframes vlieg { 0% { transform: translate(-40px, 10px); } 100% { transform: translate(560px, -50px); } }
.vleugel { transform-box: fill-box; transform-origin: 50% 100%; animation: klap .45s ease-in-out infinite alternate; }
@keyframes klap { to { transform: scaleY(.25); } }
.pad { transition: opacity .4s; }
@media (prefers-reduced-motion: reduce) { .boom .blad, .wolk, .vogels, .vleugel { animation: none; } .hert { transition: none; } }
.kaart-info { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0 14px 14px; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 10px 24px -16px rgba(30,43,35,.45); }
.kaart-info b { display: block; font: 400 20px/1.15 Fraunces, serif; color: var(--inkt); }
.kaart-info span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--tekst); max-width: 44ch; }
.kaart-info .knop { min-height: 46px; padding: 0 18px; font-size: 14.5px; flex: none; }
@media (prefers-reduced-motion: reduce) { .poi .ring, .route, .hert-kop { animation: none; } }
.feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feit { background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 24px 50px -40px rgba(30,43,35,.45); }
.feit b { display: block; font: 400 clamp(36px, 3.4vw, 50px)/1 Fraunces, serif; color: var(--inkt); letter-spacing: -.02em; }
.feit span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; }
.feit.foto { padding: 0; overflow: hidden; position: relative; min-height: 220px; }
.feit.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feit.breed { grid-column: span 2; }
.dieren { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dieren span { padding: 7px 13px; border-radius: 999px; background: var(--creme); font-size: 14px; font-weight: 600; color: var(--inkt); }

/* ---------- groepen ---------- */
.groepen { background: var(--bos-2); color: #d3dacf; padding: clamp(80px, 10vw, 140px) 0; }
.groepen .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.groepen h2 { color: var(--creme); font-size: clamp(44px, 5.4vw, 84px); margin: 18px 0 22px; }
.groepen h2 em { color: var(--goud-l); }
.gelegenheden { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.gelegenheden li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(246,241,231,.14); color: var(--creme); font-weight: 600; }
.gelegenheden li::before { content: "✦"; color: var(--goud-l); font-size: 12px; }
.groepen .knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.groepen .knop-bos { background: var(--goud-l); color: var(--bos); }
.groepen .knop-bos:hover { background: #e2d8a6; }
.groepen .knop-lijn { color: var(--creme); border-color: rgba(246,241,231,.3); }
.groep-beeld { position: relative; }
.groep-beeld img { border-radius: 30px; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.groep-beeld .vanaf { position: absolute; left: -16px; bottom: 26px; background: var(--creme); color: var(--inkt); padding: 16px 20px; border-radius: 18px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); font-size: 14px; }
.groep-beeld .vanaf b { display: block; font: 500 30px/1 Fraunces, serif; }

/* ---------- vragen ---------- */
.vragen { padding: clamp(80px, 10vw, 140px) 0; }
.vragen .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.vragen h2 { font-size: clamp(42px, 4.8vw, 72px); margin: 18px 0 20px; }
.vragen details { border-bottom: 1px solid var(--lijn); }
.vragen summary { list-style: none; cursor: pointer; padding: 22px 50px 22px 0; position: relative; font: 500 clamp(20px, 1.7vw, 23px)/1.3 Fraunces, serif; color: var(--inkt); }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--zand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2b23' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { padding: 0 50px 24px 0; }

/* ---------- contact ---------- */
.contact { background: var(--zand); padding: clamp(80px, 10vw, 140px) 0; text-align: center; position: relative; overflow: hidden; }
.contact .huis { width: min(380px, 70vw); margin: 0 auto 28px; }
.contact h2 { font-size: clamp(52px, 7vw, 110px); }
.contact .lead { max-width: 32em; margin: 22px auto 0; font-size: 19px; }
.contact .knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.contact .gegevens { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 44px; font-size: 16px; }
.contact .gegevens a, .contact .gegevens span { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--inkt); }
.contact .gegevens svg { width: 19px; height: 19px; color: var(--mos); }

.voet { background: var(--bos); color: #aab5a8; font-size: 14.5px; }
.voet .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; padding-block: 30px 112px; }
.voet img { width: 130px; }
.voet a { color: var(--creme); }

.pil { position: fixed; z-index: 80; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--bos); color: var(--creme); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); font: 400 14px/1.3 Albert, sans-serif; max-width: calc(calc(100vw / var(--z)) - 24px); }
.pil b { font-weight: 700; }
.pil a { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--goud-l); color: var(--bos); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pil button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(246,241,231,.14); color: var(--creme); cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.pil.weg { display: none; }

.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .menu, .kop .knop { display: none; }
  .menu-knop { display: inline-flex; }
  .kop.open .menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--creme); padding: 6px var(--rand) 24px; box-shadow: 0 24px 40px -24px rgba(30,43,35,.4); }
  .kop.open .menu a { padding: 15px 4px; font-size: 18px; border-bottom: 1px solid var(--lijn); border-radius: 0; }
  .held .wrap, .kopblok, .kamer-rij, .gasten .wrap, .theetuin .wrap, .omg-grid, .groepen .wrap, .vragen .wrap { grid-template-columns: minmax(0, 1fr); }
  .held-beeld { max-width: 560px; margin-inline: auto; width: 100%; }
  .boeken { grid-template-columns: 1fr 1fr; }
  .boeken button { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .kop .wrap { height: 72px; } .logo img { width: 120px; }
  .held h1 { font-size: clamp(50px, 14.5vw, 70px); }
  .held-beeld { order: -1; margin-bottom: 8px; }
  .boog { aspect-ratio: 4 / 3.3; }
  .held-beeld .rond { bottom: -6%; width: 30%; border-width: 6px; }
  .held-beeld .rond { left: -2%; width: 38%; }
  .held-beeld .open { right: 0; top: 6%; padding: 12px 14px; font-size: 13px; }
  .held-beeld .open b { font-size: 18px; }
  .kamer .tekst { padding: 22px 20px 24px; }
  .kamer .fotos { aspect-ratio: 4 / 3.4; }
  .duo figure:nth-child(2) { margin-top: 40px; }
  .feiten { grid-template-columns: 1fr; }
  .feit.breed { grid-column: auto; }
  .gelegenheden { grid-template-columns: 1fr; }
  .groep-beeld .vanaf { left: 10px; }
  .contact .gegevens { flex-direction: column; align-items: center; }
  .pil { font-size: 13px; gap: 10px; padding-left: 14px; }
  .pil .lang { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .band ul { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- brede schermen: de hele opmaak groeit evenredig mee ---------- */
:root { --z: 1; }
@media (min-width: 1700px) { :root { --z: 1.12; } }
@media (min-width: 1900px) { :root { --z: 1.25; } }
@media (min-width: 2200px) { :root { --z: 1.42; } }
@media (min-width: 2500px) { :root { --z: 1.6; } }
@media (min-width: 3000px) { :root { --z: 1.9; } }
body { zoom: var(--z); }

/* ---------- akkoord geven vanuit het voorbeeld ---------- */
.pil a.ak-knop { background: #fff; color: #15102f; }
.ak { border: 0; padding: 0; border-radius: 26px; width: min(520px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; background: #fff; color: #1d1b26; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.ak::backdrop { background: rgba(12,10,24,.6); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.ak-in { position: relative; padding: 30px 28px 24px; }
.ak-sluit { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f0f4; color: #1d1b26; font-size: 20px; line-height: 1; cursor: pointer; }
.ak-oog { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6d6a7a; }
.ak h2 { margin: 8px 0 0; font: 700 26px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; color: #15102f; }
.ak-prijs { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.ak-prijs b { font-size: 40px; line-height: 1; letter-spacing: -.02em; color: #15102f; }
.ak-prijs span { color: #6d6a7a; font-size: 15px; }
.ak ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.ak li { position: relative; padding-left: 30px; font-size: 15.5px; }
.ak li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--ak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ak li small { display: block; color: #6d6a7a; font-size: 13.5px; }
.ak label { display: block; margin-top: 20px; font-size: 13px; font-weight: 700; color: #4a4757; }
.ak-opt { font-weight: 400; color: #8a8796; }
.ak textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #dcdae3; font: inherit; color: #1d1b26; background: #fff; box-sizing: border-box; resize: vertical; min-height: 84px; }
.ak textarea:focus { outline: none; border-color: var(--ak); }
.ak input { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid #dcdae3; font: inherit; color: #1d1b26; background: #fff; box-sizing: border-box; }
.ak input:focus { outline: none; border-color: var(--ak); }
.ak-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ak-knoppen a { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.ak-mail { background: var(--ak); color: var(--ak-tekst); }
.ak-wa { border: 1.5px solid #dcdae3; color: #1d1b26; }
.ak-noot { margin-top: 14px; font-size: 13px; color: #6d6a7a; }

/* ---------- theekaart met tabjes ---------- */
.theekaart { margin-top: 26px; }
.tabjes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(30,43,35,.08); }
.tabjes button { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font: 600 14.5px/1 Albert, sans-serif; color: var(--inkt); cursor: pointer; transition: background-color .25s, color .25s; }
.tabjes button[aria-selected="true"] { background: var(--bos); color: var(--creme); }
.theekaart .kaartje { margin-top: 14px; }
.kaart-noot { margin-top: 12px; font-size: 14px; color: var(--muted); }
/* ---------- huiswijn ---------- */
.huiswijn { margin-top: clamp(50px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px 60px; align-items: center; padding-top: clamp(40px, 5vw, 60px); background: linear-gradient(var(--lijn), var(--lijn)) center top / calc(100% - 2 * var(--rand)) 1px no-repeat; }
.theetuin .huiswijn { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hw-kop h3 { font-size: clamp(34px, 3.4vw, 52px); margin: 14px 0 12px; }
.hw-kop h3 em, .routes h3 em, .lunch h2 em { font-style: italic; color: var(--mos); }
.wijnen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wijnen li { background: var(--creme); border-radius: 22px; padding: 18px 12px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(30,43,35,.05), 0 20px 40px -30px rgba(30,43,35,.45); transition: transform .35s var(--ease); }
.wijnen li:hover { transform: translateY(-4px) rotate(-1deg); }
.fles { width: 26px; height: 52px; color: var(--k); margin-bottom: 8px; filter: drop-shadow(0 6px 6px rgba(30,43,35,.2)); }
.fles svg { width: 100%; height: 100%; }
.wijnen b { font: 500 17px/1.15 Fraunces, serif; color: var(--inkt); }
.wijnen small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.wijnen em { margin-top: auto; padding-top: 8px; font: 600 15px/1 Albert, sans-serif; font-style: normal; color: var(--inkt); }
.hw-noot { grid-column: 2; margin-top: -8px; font-size: 14px; color: var(--muted); }
.hw-noot a { color: var(--inkt); }
/* ---------- routes ---------- */
.routes { margin-top: clamp(40px, 5vw, 64px); background: #fff; border-radius: 30px; padding: clamp(24px, 3vw, 40px); box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -40px rgba(30,43,35,.45); }
.routes-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 30px; }
.routes h3 { font-size: clamp(30px, 3vw, 44px); }
.routes-kop p { max-width: 34em; color: var(--muted); }
.routes-tabs { margin-top: 20px; flex-wrap: wrap; border-radius: 22px; }
.route-lijst { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.route { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 20px; background: var(--creme); animation: routein .5s var(--ease) both; }
.route[hidden] { display: none; }
@keyframes routein { from { opacity: 0; transform: translateY(10px); } }
.route:nth-child(3n+2) { animation-delay: .06s; } .route:nth-child(3n) { animation-delay: .12s; }
.route .km { font: 400 34px/1 Fraunces, serif; color: var(--bos); }
.route .km small { display: block; margin-top: 4px; font: 600 11px/1 Albert, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.route h4 { margin: 0; font: 500 19px/1.2 Fraunces, serif; color: var(--inkt); }
.route p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lengte { display: block; height: 4px; margin-top: 12px; border-radius: 99px; background: rgba(30,43,35,.1); overflow: hidden; }
.lengte i { display: block; height: 100%; width: var(--l); border-radius: inherit; background: linear-gradient(90deg, var(--mos), var(--goud)); }
/* ---------- lunchbox ---------- */
.lunch { padding: clamp(80px, 10vw, 140px) 0; }
.lunch .kopblok h2 { font-size: clamp(40px, 5vw, 78px); }
.lunchform { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.boxen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.box { position: relative; background: #fff; border-radius: 26px; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 24px 50px -40px rgba(30,43,35,.45); border: 2px solid transparent; transition: border-color .25s, transform .25s var(--ease); }
.box.gekozen { border-color: var(--mos); }
.box-naam { font: 600 12px/1 Albert, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--goud); }
.box b { font: 400 24px/1.15 Fraunces, serif; color: var(--inkt); margin-top: 6px; }
.box small { font-size: 14px; color: var(--muted); line-height: 1.45; }
.box-prijs { margin-top: 10px; font: 600 20px/1 Albert, sans-serif; color: var(--inkt); }
.stepper { margin-top: 14px; display: inline-flex; align-items: center; align-self: flex-start; border: 1.5px solid var(--lijn); border-radius: 999px; }
.stepper button { width: 42px; height: 42px; border: 0; background: transparent; font: 500 22px/1 Albert, sans-serif; color: var(--inkt); cursor: pointer; border-radius: 50%; }
.stepper button:hover { background: var(--creme); }
.stepper output { min-width: 28px; text-align: center; font: 600 17px/1 Albert, sans-serif; }
.bestel { position: sticky; top: 100px; background: var(--bos); color: #d3dacf; border-radius: 28px; padding: clamp(22px, 2.6vw, 32px); }
.bestel-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bestel-velden .breed { grid-column: 1 / -1; }
.bestel-velden label { display: flex; flex-direction: column; gap: 6px; }
.bestel-velden span { font: 600 11.5px/1 Albert, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-l); }
.bestel-velden input, .bestel-velden select { border: 1px solid rgba(246,241,231,.2); background: rgba(246,241,231,.06); color: var(--creme); border-radius: 14px; padding: 12px 14px; font: 500 16px/1.3 Albert, sans-serif; min-height: 48px; width: 100%; appearance: none; -webkit-appearance: none; color-scheme: dark; }
.bestel-velden input::placeholder { color: rgba(246,241,231,.45); }
.totaal { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(246,241,231,.15); }
.totaal span { font: 600 12px/1 Albert, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-l); }
.totaal b { font: 400 40px/1 Fraunces, serif; color: var(--creme); }
.totaal small { width: 100%; font-size: 14px; color: rgba(246,241,231,.6); }
.bestel .knop-bos { width: 100%; margin-top: 16px; background: var(--goud-l); color: var(--bos); }
.bestel-noot { margin-top: 12px; font-size: 13.5px; color: rgba(246,241,231,.6); }
.bestel-noot a { color: var(--creme); }
@media (max-width: 1080px) { .huiswijn, .theetuin .huiswijn, .lunchform { grid-template-columns: minmax(0, 1fr); } .hw-noot { grid-column: 1; } .wijnen { grid-template-columns: repeat(3, minmax(0, 1fr)); } .route-lijst { grid-template-columns: 1fr 1fr; } .bestel { position: static; } }
@media (max-width: 680px) { .wijnen { grid-template-columns: 1fr 1fr; } .route-lijst, .boxen { grid-template-columns: minmax(0, 1fr); } .route { grid-template-columns: 58px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .route { animation: none; } }

/* =================== meerdere pagina's =================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
.menu a[aria-current="page"] { background: var(--bos); color: var(--creme); }
.menu a[aria-current="page"]:hover { background: var(--bos); }

/* ---------- paginakop ---------- */
.pk { padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 7vw, 100px); overflow-x: clip; }
.pk .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.kruimel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.kruimel a { color: var(--inkt); text-decoration: none; font-weight: 600; }
.kruimel a:hover { text-decoration: underline; }
.pk h1 { font-size: clamp(50px, 6.6vw, 108px); line-height: .96; letter-spacing: -.035em; margin-top: 18px; }
.pk .lead { margin-top: 24px; font-size: clamp(17.5px, 1.4vw, 20px); max-width: 34em; }
.pk-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pk-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--inkt); box-shadow: 0 10px 24px -18px rgba(30,43,35,.5); }
.pk-chips svg { width: 17px; height: 17px; color: var(--mos); }
.pk .knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pk-beeld { position: relative; }
.pk .boog { aspect-ratio: 4 / 4.5; }
/* veelgestelde vragen: linkerkolom blijft staan tijdens het scrollen (desktop) */
@media (min-width: 1081px) { .vragen .wrap { align-items: start; } .vragen .wrap > div:first-child { position: sticky; top: 120px; } }
/* telefoonnummers nooit over twee regels */
a[href^="tel:"] { white-space: nowrap; }
/* geen zoom op de grote foto's: opschalen maakt ze zacht; alleen een zachte overvloeiing */
.boog img { transform: none; transition: opacity 1.6s ease; }
.boog img.actief { transform: none; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.pk-beeld .rond { position: absolute; left: -8%; bottom: 8%; width: 36%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--creme); box-shadow: 0 24px 50px -24px rgba(30,43,35,.55); }
.pk-beeld .rond img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; right: -4%; top: 10%; display: flex; align-items: center; gap: 14px; background: var(--bos); color: var(--creme); border-radius: 22px; padding: 14px 18px; font-size: 14px; line-height: 1.35; box-shadow: 0 20px 40px -20px rgba(30,43,35,.7); max-width: 330px; }
.badge b { display: block; font: italic 500 21px/1.1 Fraunces, serif; color: var(--goud-l); margin-bottom: 2px; white-space: nowrap; }
.badge .bi { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(209,198,141,.14); display: grid; place-items: center; color: var(--goud-l); }
.badge .bi svg { width: 24px; height: 24px; }
.badge.onder { top: auto; bottom: 9%; right: auto; left: -7%; }
.pk-beeld .rond.rond-rechts { left: auto; right: -6%; bottom: auto; top: 6%; }
@media (max-width: 680px) { .pk-beeld .rond.rond-rechts { right: -1%; top: 4%; } }
.p-contact .pk .boog img { object-position: 50% 30%; }

/* micro: klok met draaiende wijzers */
.klokje { width: 30px; height: 30px; }
.klokje .uur { transform-origin: 12px 12px; animation: draai 12s linear infinite; }
.klokje .min { transform-origin: 12px 12px; animation: draai 2s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
/* micro: dampend kopje */
.kopje { width: 34px; height: 34px; overflow: visible; }
.kopje .stoom { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; opacity: 0; animation: stoom 3s ease-in-out infinite; }
.kopje .stoom:nth-of-type(2) { animation-delay: .9s; } .kopje .stoom:nth-of-type(3) { animation-delay: 1.8s; }
@keyframes stoom { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-7px); } }
/* micro: kompas */
.kompasje svg { animation: zoek 7s ease-in-out infinite; }
@keyframes zoek { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }
/* micro: telefoon */
.belletje svg { animation: tring 4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes tring { 0%, 80%, 100% { transform: rotate(0); } 83% { transform: rotate(-14deg); } 86% { transform: rotate(12deg); } 89% { transform: rotate(-10deg); } 92% { transform: rotate(6deg); } }
/* micro: fietsje dat heen en weer rijdt */
.fietsje { overflow: hidden; }
.fietsje svg { animation: trap 3.2s ease-in-out infinite; }
@keyframes trap { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
/* micro: twinkel */
.twinkel svg { animation: twinkel 2.6s ease-in-out infinite; }
@keyframes twinkel { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.15) rotate(8deg); } }

/* ---------- live status theetuin ---------- */
.tt-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tt-live i { width: 8px; height: 8px; border-radius: 50%; background: #c9b27a; flex: none; }
.tt-live.tt-open i { background: #6bbf73; box-shadow: 0 0 0 0 rgba(107,191,115,.6); animation: puls 2s ease-out infinite; }
.tt-live.tt-dicht i { background: #c98a6b; }
.tt-badge b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c9b27a; margin-right: 9px; vertical-align: .12em; }
.tt-badge.tt-open b::before { background: #6bbf73; animation: puls 2s ease-out infinite; }
.tt-badge.tt-dicht b::before { background: #c98a6b; }
.tt-badge span[data-tt-tekst] { display: block; }
@keyframes puls { 70%, 100% { box-shadow: 0 0 0 9px rgba(107,191,115,0); } }

/* ---------- vallende blaadjes in de opening ---------- */
.held { position: relative; }
.blaadjes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.held .wrap { position: relative; z-index: 1; }
.blaadjes i { position: absolute; top: -50px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.25); opacity: 0; animation: val var(--d) linear infinite; animation-delay: var(--v); perspective: 120px; }
.blaadjes i svg { display: block; width: 100%; height: 100%; animation: wieg var(--w) ease-in-out infinite alternate; filter: drop-shadow(0 6px 6px rgba(30,43,35,.12)); }
@keyframes val { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .8; } 85% { opacity: .7; } 100% { transform: translateY(calc(100vh / var(--z, 1))); opacity: 0; } }
@keyframes wieg { 0% { transform: translateX(-30px) rotate(-40deg) rotateY(0deg); } 50% { transform: translateX(0) rotate(5deg) rotateY(55deg); } 100% { transform: translateX(30px) rotate(50deg) rotateY(10deg); } }

/* ---------- welkom ---------- */
.welkom { padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 70px); }
.welkom .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.welkom h2 { font-size: clamp(42px, 5vw, 78px); margin: 16px 0 22px; }
.welkom p + p { margin-top: 14px; }
.cijfers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.cijfer { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; background: #fff; border-radius: 24px; padding: 22px 26px; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 24px 50px -40px rgba(30,43,35,.45); }
.cijfer b { font: 400 54px/1 Fraunces, serif; color: var(--bos); letter-spacing: -.02em; }
.cijfer b small { font-size: 22px; margin-left: 4px; }
.cijfer span { font-size: 16px; line-height: 1.45; }

/* ---------- ontdek-tegels ---------- */
.ontdek { padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 10vw, 140px); }
.tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 20vw, 290px); gap: 14px; }
.tegel { position: relative; overflow: hidden; border-radius: 28px; text-decoration: none; color: var(--creme); isolation: isolate; }
.tegel.groot { grid-column: span 2; grid-row: span 2; }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.tegel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,28,23,0) 30%, rgba(20,28,23,.82)); }
.tegel:hover img { transform: scale(1.07); }
.tegel .tg { position: absolute; left: 22px; right: 22px; bottom: 20px; }
.tegel small { display: inline-block; padding: 6px 11px; border-radius: 999px; background: rgba(246,241,231,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.tegel h3 { color: var(--creme); font-size: clamp(26px, 2.2vw, 36px); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tegel.groot h3 { font-size: clamp(36px, 3.6vw, 56px); }
.tegel h3 svg { width: 26px; height: 26px; flex: none; transition: transform .4s var(--ease); }
.tegel:hover h3 svg { transform: translateX(6px); }

/* ---------- algemeen: sectie met kop ---------- */
.blok { padding: clamp(70px, 9vw, 130px) 0; }
.blok.zand { background: var(--zand); }
.blok.bos { background: var(--bos); color: #cfd6cd; }
.blok.bos h2, .blok.bos h3 { color: var(--creme); }
.blok.bos h2 em { color: var(--goud-l); }
.blok h2 { font-size: clamp(40px, 4.8vw, 74px); }
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.twee p + p { margin-top: 14px; }
.twee h2 { margin: 16px 0 22px; }
.foto-rond { border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -46px rgba(30,43,35,.6); }
.foto-rond img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- drie kamers naast elkaar ---------- */
@media (min-width: 1081px) { .kamer-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .kamer .tekst { padding: 24px 24px 26px; } .kamer h3 { font-size: clamp(30px, 2.5vw, 38px); } .prijs b { font-size: 38px; } }

/* ---------- huiskamerrestaurant: foto met inzet ---------- */
.foto-duo { position: relative; }
.foto-duo .foto-rond a { display: block; }
.foto-duo .inzet { position: absolute; right: -4%; bottom: -9%; width: 34%; border-radius: 22px; overflow: hidden; border: 6px solid var(--creme); box-shadow: 0 24px 50px -24px rgba(30,43,35,.6); transition: transform .5s var(--ease); }
.foto-duo .inzet:hover { transform: rotate(-2deg) scale(1.03); }
.foto-duo .inzet img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 680px) { .foto-duo .inzet { right: 2%; bottom: -12%; width: 36%; border-width: 4px; } .foto-duo { margin-bottom: 30px; } }

/* ---------- faciliteiten ---------- */
.fac { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fac li { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; font-weight: 600; color: var(--inkt); font-size: 15.5px; line-height: 1.3; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 18px 40px -34px rgba(30,43,35,.5); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.fac.in li { opacity: 1; transform: none; }
.fac li span.ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--creme); display: grid; place-items: center; color: var(--mos); transition: background-color .3s, color .3s, transform .3s var(--ease); }
.fac li:hover span.ic { background: var(--bos); color: var(--goud-l); transform: rotate(-6deg); }
.fac svg { width: 22px; height: 22px; }
.notitie { margin-top: 22px; display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 22px; background: var(--zand); }
.notitie svg { flex: none; width: 24px; height: 24px; color: var(--goud); margin-top: 3px; }
.notitie b { color: var(--inkt); }

/* ---------- verblijf: tijdlijn ---------- */
.dag { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.dag::before { content: ""; position: absolute; left: 6%; right: 6%; top: 38px; height: 2px; background: repeating-linear-gradient(90deg, var(--goud) 0 6px, transparent 6px 12px); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease); }
.dag.in::before { transform: scaleX(1); }
.moment { position: relative; text-align: center; padding: 0 10px; }
.moment .tijd { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: var(--bos); color: var(--goud-l); font: 500 19px/1 Fraunces, serif; box-shadow: 0 0 0 8px var(--creme); }
.moment .tijd svg { width: 32px; height: 32px; }
.moment h3 { font-size: 26px; margin-top: 16px; }
.moment p { margin-top: 6px; font-size: 15.5px; }
.regels { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px; }
.regels li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--lijn); font-size: 15.5px; }
.regels svg { flex: none; width: 21px; height: 21px; color: var(--mos); margin-top: 2px; }
.regels b { color: var(--inkt); }

/* ---------- in de buurt ---------- */
.buurt { list-style: none; margin: 0; padding: 0; }
.buurt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 0; border-top: 1px solid rgba(246,241,231,.12); }
.buurt li b { color: var(--creme); font-weight: 600; }
.buurt li em { font-style: normal; color: var(--goud-l); font-weight: 700; }
.buurt .lijntje { grid-column: 1 / -1; height: 3px; border-radius: 9px; background: rgba(246,241,231,.1); overflow: hidden; }
.buurt .lijntje i { display: block; height: 100%; width: var(--l); background: linear-gradient(90deg, var(--goud-l), var(--goud)); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.buurt.in .lijntje i { transform: scaleX(1); }
.buurt-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.buurt-extra span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(246,241,231,.08); color: var(--creme); font-size: 14.5px; }
.buurt-extra svg { width: 17px; height: 17px; color: var(--goud-l); }

/* ---------- reserveren-blok ---------- */
.reserveer { background: #fff; border-radius: 34px; padding: clamp(26px, 4vw, 54px); box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 40px 80px -50px rgba(30,43,35,.5); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.reserveer h2 { font-size: clamp(36px, 4vw, 60px); margin: 14px 0 14px; }
.reserveer .boeken { margin-top: 0; background: var(--creme); box-shadow: none; grid-template-columns: 1fr 1fr; gap: 8px; }
.reserveer .boeken label { background: #fff; }
.reserveer .boeken button { grid-column: 1 / -1; }

/* ---------- theetuin ---------- */
.dieren-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.dier { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 10px 20px; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 18px 40px -34px rgba(30,43,35,.5); font: inherit; color: inherit; cursor: pointer; transition: background-color .4s, transform .4s var(--ease); overflow: hidden; }
.dier:hover { transform: translateY(-3px); }
.dier:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }
.dier .duim { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--lijn); transition: box-shadow .4s, transform .5s var(--ease); }
.dier .duim img { width: 100%; height: 100%; object-fit: cover; }
.dier:hover .duim { transform: scale(1.06) rotate(-3deg); }
.dier[aria-selected="true"] { background: var(--bos); }
.dier[aria-selected="true"] b { color: var(--creme); }
.dier[aria-selected="true"] .duim { box-shadow: 0 0 0 3px var(--bos), 0 0 0 5px var(--goud-l); }
.dier::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 9px; height: 2px; border-radius: 2px; background: var(--goud-l); transform: scaleX(0); transform-origin: left; }
.dier.loopt::after { animation: vol 5s linear forwards; }
@keyframes vol { to { transform: scaleX(1); } }
.dieren-foto { position: relative; aspect-ratio: 4 / 3.4; }
.dieren-foto img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.dieren-foto img.actief { opacity: 1; transform: none; }
@keyframes hup { 40% { transform: translateY(-6px) rotate(-6deg); } }
.dier b { display: block; margin-top: 12px; font: 500 18px/1.2 Fraunces, serif; color: var(--inkt); transition: color .4s; }
.menukaart { background: #fff; border-radius: 34px; padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 40px 80px -50px rgba(30,43,35,.5); }
.menukaart-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 30px; margin-bottom: 22px; }
.menukaart-kop h2 { font-size: clamp(38px, 4.4vw, 66px); margin-top: 12px; }
.menukaart .tabjes { position: sticky; top: 98px; z-index: 4; display: flex; flex-wrap: nowrap; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; background: rgba(255,255,255,.94); box-shadow: inset 0 0 0 1px var(--lijn), 0 12px 26px -20px rgba(30,43,35,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.menukaart .tabjes::-webkit-scrollbar { display: none; }
.menukaart .tabjes button { flex: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.menukaart .tabjes button svg { width: 18px; height: 18px; color: var(--mos); transition: color .25s; }
.menukaart .tabjes button[aria-selected="true"] svg { color: var(--goud-l); }
.mk-intro { max-width: 30em; font-size: 16px; }
.mk-foto { grid-column: 1 / -1; margin: 18px 0 6px; border-radius: 20px; overflow: hidden; height: clamp(170px, 17vw, 250px); }
.mk-foto img { width: 100%; height: 100%; object-fit: cover; animation: mk-zoom 1.2s var(--ease); }
@keyframes mk-zoom { from { transform: scale(1.06); opacity: .4; } }
.mk-label { display: inline-block; margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: var(--zand); color: var(--goud); font: 700 10.5px/1 Albert, sans-serif; letter-spacing: .08em; text-transform: uppercase; vertical-align: .3em; white-space: nowrap; }
@media (max-width: 680px) { .menukaart .tabjes { top: 80px; width: auto; margin-inline: -6px; border-radius: 999px; } .menukaart .tabjes button { padding: 10px 14px; } .mk-foto { height: auto; aspect-ratio: 16 / 8; border-radius: 16px; } .menukaart { padding-inline: 18px; } }
.menukaart [role="tabpanel"] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; border-top: 1px solid var(--lijn); animation: paneel .5s var(--ease); }
.menukaart [role="tabpanel"][hidden] { display: none; }
@keyframes paneel { from { opacity: 0; transform: translateY(10px); } }
.menukaart .kaartje { margin-top: 0; border-top: 0; }
.menukaart [role="tabpanel"] { border-top: 0; }
.menukaart .kaart-noot { grid-column: 1 / -1; }
.lokaal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.lokaal article { background: rgba(246,241,231,.06); border: 1px solid rgba(246,241,231,.12); border-radius: 26px; padding: 26px; }
.lokaal .ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(209,198,141,.14); color: var(--goud-l); }
.lokaal .ic svg { width: 28px; height: 28px; }
.lokaal h3 { font-size: 26px; margin: 16px 0 8px; }
.lokaal p { font-size: 15.5px; }
.blok .huiswijn { margin-top: 0; padding-top: 0; background: none; }
.koffieroute { position: relative; background: var(--creme); border-radius: 30px; padding: 10px; box-shadow: 0 40px 80px -46px rgba(30,43,35,.5); }
.koffieroute svg { display: block; width: 100%; height: auto; }
.koffieroute .lijn-pad { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.6s var(--ease) .3s; }
.koffieroute.in .lijn-pad { stroke-dashoffset: 0; }
.koffieroute .boon { offset-path: path("M144.8 265.7C138.8 268.8 120.1 279.7 108.7 284.1C97.3 288.6 81.1 300.1 76.4 292.4C71.6 284.7 79.9 256 79.9 238C79.9 220 77.4 198.5 76.4 184.6C75.3 170.6 66.6 165.2 73.4 154.5C80.3 143.7 102.3 132.4 117.5 120C132.6 107.6 148.3 84.9 164.5 80.1C180.6 75.4 199.7 87.1 214.4 91.3C229.1 95.5 241.3 105.4 252.5 105.4C263.8 105.4 273.4 92.9 281.9 91.3C290.5 89.8 298.1 91.2 303.9 96.2C309.8 101.2 312.5 113.8 317.2 121.4C321.8 129 325 144.3 331.8 141.8C338.7 139.4 349.9 118.4 358.3 106.9C366.6 95.4 373.9 73.7 381.8 72.9C389.6 72 398.4 93.9 405.3 102C412.1 110.1 417.5 117.4 422.9 121.4C428.3 125.5 435.1 125.5 437.6 126.3"); offset-distance: 0%; opacity: 0; }
.koffieroute.in .boon { animation: reis 9s ease-in-out 2.4s infinite; }
@keyframes reis { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.koffieroute .stip { transform-box: fill-box; transform-origin: center; }
.koffieroute.in .stip { animation: stip 2.4s ease-out infinite; }

/* ---------- groepen ---------- */
.aanbod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.aanbod article { position: relative; background: #fff; border-radius: 28px; padding: 0; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -44px rgba(30,43,35,.5); transition: transform .4s var(--ease); overflow: hidden; }
.aanbod article:hover { transform: translateY(-6px); }
.aanbod-foto { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.aanbod-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.aanbod article:hover .aanbod-foto img { transform: scale(1.06); }
.aanbod-tekst { position: relative; padding: 0 28px 30px; }
.aanbod .ic { position: relative; display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: #fff; color: var(--mos); margin-top: -30px; box-shadow: 0 12px 24px -12px rgba(30,43,35,.45); }
.aanbod .ic svg { width: 28px; height: 28px; }
.aanbod article:hover .ic svg { animation: hup .6s var(--ease); }
.aanbod h3 { font-size: 30px; margin: 14px 0 12px; }
.aanbod ul { list-style: none; margin: 0; padding: 0; }
.aanbod li { padding: 10px 0; border-top: 1px solid var(--lijn); font-size: 15.5px; }
.aanbod li small { display: block; color: var(--muted); font-size: 13.5px; }
.fotostrook { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: 36px; }
.fotostrook img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; aspect-ratio: 4 / 3; transition: transform .8s var(--ease); }
.fotostrook figure { margin: 0; overflow: hidden; border-radius: 24px; }
.fotostrook figure:hover img { transform: scale(1.05); }
.aanvraag { background: var(--bos); color: #d3dacf; border-radius: 34px; padding: clamp(26px, 4vw, 54px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 60px); }
.aanvraag h2 { color: var(--creme); font-size: clamp(36px, 4vw, 60px); margin: 14px 0 16px; }
.aanvraag h2 em { color: var(--goud-l); }
.aanvraag blockquote { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--goud-l); font: italic 400 20px/1.45 Fraunces, serif; color: var(--creme); }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulier .breed { grid-column: 1 / -1; }
.formulier label { display: flex; flex-direction: column; gap: 6px; }
.formulier span { font: 600 11.5px/1 Albert, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-l); }
.formulier input, .formulier select, .formulier textarea { border: 1px solid rgba(246,241,231,.2); background: rgba(246,241,231,.06); color: var(--creme); border-radius: 14px; padding: 12px 14px; font: 500 16px/1.4 Albert, sans-serif; min-height: 48px; width: 100%; appearance: none; -webkit-appearance: none; color-scheme: dark; }
.formulier textarea { resize: vertical; min-height: 96px; }
.formulier input::placeholder, .formulier textarea::placeholder { color: rgba(246,241,231,.45); }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: none; border-color: var(--goud-l); }
.formulier .knop { grid-column: 1 / -1; background: var(--goud-l); color: var(--bos); margin-top: 6px; }
.formulier .noot { grid-column: 1 / -1; font-size: 13.5px; color: rgba(246,241,231,.6); }
.formulier.licht span { color: var(--goud); }
.formulier.licht input, .formulier.licht select, .formulier.licht textarea { border-color: var(--lijn); background: var(--creme); color: var(--inkt); color-scheme: light; }
.formulier.licht input::placeholder, .formulier.licht textarea::placeholder { color: #9a9b90; }
.formulier.licht input:focus, .formulier.licht select:focus, .formulier.licht textarea:focus { border-color: var(--mos); }
.formulier.licht .knop { background: var(--bos); color: var(--creme); }
.formulier.licht .noot { color: var(--muted); }

/* ---------- catering: stappen ---------- */
.bestel-velden textarea { border: 1px solid rgba(246,241,231,.2); background: rgba(246,241,231,.06); color: var(--creme); border-radius: 14px; padding: 12px 14px; font: 500 15.5px/1.4 Albert, sans-serif; min-height: 70px; width: 100%; resize: vertical; color-scheme: dark; }
.bestel-velden textarea::placeholder { color: rgba(246,241,231,.45); }
.bestel-velden textarea:focus { outline: none; border-color: var(--goud-l); }
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; counter-reset: stap; }
.stappen::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: var(--lijn); }
.stappen::after { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 2px; background: var(--mos); transform: scaleX(0); transform-origin: left; transition: transform 2s var(--ease) .2s; }
.stappen.in::after { transform: scaleX(1); }
.stappen li { position: relative; z-index: 1; }
.stappen li::before { counter-increment: stap; content: counter(stap); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--bos); color: var(--goud-l); font: 400 26px/1 Fraunces, serif; box-shadow: 0 0 0 8px var(--creme); transform: scale(.6); opacity: 0; transition: transform .6s var(--ease), opacity .6s; transition-delay: calc(.2s + var(--i) * .45s); }
.stappen.in li::before { transform: none; opacity: 1; }
.stappen h3 { font-size: 24px; margin-top: 18px; }
.stappen p { margin-top: 6px; font-size: 15.5px; }

/* ---------- omgeving ---------- */
.parkfeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.parkfeiten div { border-top: 2px solid var(--goud); padding-top: 14px; }
.parkfeiten b { display: block; font: 400 40px/1 Fraunces, serif; color: var(--inkt); }
.parkfeiten span { font-size: 15px; }
.fiets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.lus { position: relative; border-radius: 26px; padding: 26px; background: #fff; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -44px rgba(30,43,35,.5); overflow: hidden; }
.lus .kleur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lus .kleur i { width: 14px; height: 14px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 20%, transparent); }
.lus b.km { display: block; margin-top: 14px; font: 400 52px/1 Fraunces, serif; color: var(--inkt); }
.lus b.km small { font-size: 20px; margin-left: 4px; }
.lus h3 { font-size: 26px; margin: 8px 0 8px; }
.lus p { font-size: 15.5px; }
.lus svg.lusje { position: absolute; right: -10px; top: -10px; width: 120px; height: 120px; opacity: .14; color: var(--k); }
.lus svg.lusje path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2.4s var(--ease); }
.lus.in svg.lusje path, .fiets-grid.in svg.lusje path { stroke-dashoffset: 0; }
.linklijst { list-style: none; margin: 0; padding: 0; }
.linklijst li { border-top: 1px solid var(--lijn); }
.linklijst a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; text-decoration: none; font-weight: 600; color: var(--inkt); }
.linklijst a svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.linklijst a:hover svg { transform: translateX(5px); }
.wandelfotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wandelfotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; aspect-ratio: 4 / 3; }

/* ---------- contact ---------- */
.contactgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.kaartjes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 24px; background: #fff; text-decoration: none; color: var(--tekst); box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 24px 50px -40px rgba(30,43,35,.45); transition: transform .35s var(--ease); }
a.ck:hover { transform: translateY(-4px); }
.ck .ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--creme); color: var(--mos); margin-bottom: 6px; }
.ck .ic svg { width: 22px; height: 22px; }
.ck b { font: 500 19px/1.25 Fraunces, serif; color: var(--inkt); }
.ck span { font-size: 15px; }
.ck.breed { grid-column: 1 / -1; }
.formkaart { background: #fff; border-radius: 30px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 40px 80px -50px rgba(30,43,35,.5); }
.formkaart h2 { font-size: clamp(32px, 3.4vw, 50px); margin: 10px 0 20px; }

/* ---------- cta onderaan ---------- */
.cta { background: var(--zand); padding: clamp(80px, 10vw, 130px) 0; text-align: center; overflow: hidden; }
.cta .huis { width: min(340px, 64vw); margin: 0 auto 26px; }
.cta h2 { font-size: clamp(46px, 6vw, 96px); }
.cta .lead { max-width: 32em; margin: 20px auto 0; font-size: 19px; }
.cta .knoppen { justify-content: center; margin-top: 32px; }

/* ---------- tekstpagina ---------- */
.tekstpagina { padding: clamp(30px, 4vw, 60px) 0 clamp(80px, 10vw, 130px); }
.tekstpagina .wrap { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: clamp(30px, 5vw, 80px); justify-content: center; }
.tekstpagina h1 { font-size: clamp(44px, 5vw, 76px); margin: 14px 0 10px; }
.tekstpagina .versie { color: var(--muted); font-size: 15px; }
.inhoud-nav { position: sticky; top: 110px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.inhoud-nav b { font: 700 12px/1 Albert, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--goud); margin-bottom: 10px; }
.inhoud-nav a { text-decoration: none; color: var(--tekst); padding: 6px 10px; border-radius: 10px; }
.inhoud-nav a:hover { background: #fff; color: var(--inkt); }
.artikel h2 { font-size: clamp(26px, 2.4vw, 34px); margin: 40px 0 12px; scroll-margin-top: 110px; }
.artikel ul { padding-left: 20px; } .artikel li { margin: 4px 0; }
.artikel p + p { margin-top: 12px; }

/* ---------- uitgebreide footer ---------- */
.voet .voet-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding-block: clamp(56px, 7vw, 90px) 40px; align-items: start; justify-content: initial; }
.voet-merk img { width: 150px; }
.voet-merk p { margin-top: 16px; max-width: 30em; }
.voet .sociaal { display: flex; gap: 10px; margin-top: 20px; }
.voet .sociaal a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(246,241,231,.25); display: grid; place-items: center; color: var(--creme); text-decoration: none; transition: background-color .25s, border-color .25s; }
.voet .sociaal a:hover { background: rgba(209,198,141,.15); border-color: var(--goud-l); }
.voet .sociaal svg { width: 19px; height: 19px; }
.voet .sociaal .booking { font: 800 16px/1 Albert, sans-serif; }
.voet-kol { display: flex; flex-direction: column; gap: 9px; }
.voet-kol b { font: 700 12px/1.3 Albert, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--goud-l); margin-bottom: 6px; }
.voet-kol a { color: var(--creme); text-decoration: none; }
.voet-kol a:hover { color: var(--goud-l); }
.voet-onder { border-top: 1px solid rgba(246,241,231,.1); }
.voet-onder .wrap { display: flex; flex-wrap: wrap; gap: 10px 30px; justify-content: space-between; padding-block: 22px 110px; font-size: 14px; }

/* ---------- fotoalbum (groepen) ---------- */
.album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(160px, 15vw, 220px)); grid-template-areas: "a b b c" "a d e c" "f f e c"; gap: 12px; }
.album a { position: relative; display: block; overflow: hidden; border-radius: 22px; background: var(--zand); }
.album img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.album a:hover img { transform: scale(1.06); }
.album a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,23,0) 55%, rgba(20,28,23,.5)); opacity: 0; transition: opacity .4s; }
.album a:hover::after { opacity: 1; }
.album .a1 { grid-area: a; } .album .a2 { grid-area: b; } .album .a3 { grid-area: c; } .album .a4 { grid-area: d; } .album .a5 { grid-area: e; } .album .a6 { grid-area: f; }
.vergroot { position: absolute; right: 12px; bottom: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: rgba(246,241,231,.92); color: var(--bos); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .4s var(--ease); }
.vergroot svg { width: 18px; height: 18px; }
a:hover > .vergroot, a:focus-visible > .vergroot { opacity: 1; transform: none; }
@media (hover: none) { .vergroot { opacity: 1; transform: none; width: 34px; height: 34px; } }

/* ---------- kamerfoto's openen groot ---------- */
.kamer .fotos a { position: relative; display: block; overflow: hidden; border-radius: 22px; }
.kamer .fotos a:first-child { grid-row: span 2; }
.kamer .fotos a img { transition: transform 1s var(--ease); }
.kamer .fotos a:hover img { transform: scale(1.05); }
.kamer .fotos a[hidden] { display: none; }
.lb-aantal { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(20,28,23,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--creme); font-size: 13px; font-weight: 600; }
.lb-aantal svg { width: 16px; height: 16px; }

/* ---------- lightbox ---------- */
.lb { border: 0; padding: 0; margin: 0; background: transparent; width: calc(100vw / var(--z)); height: calc(100dvh / var(--z)); max-width: none; max-height: none; color: var(--creme); }
.lb::backdrop { background: rgba(12,17,14,.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lb[open] { display: grid; place-items: center; animation: lb-in .35s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
html:has(.lb[open]) { overflow: hidden; }
.lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 70px 80px; }
.lb img { display: block; max-width: min(calc(100vw / var(--z) - 160px), 1200px); max-height: calc(100dvh / var(--z) - 190px); width: auto; height: auto; border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); opacity: 0; transform: scale(.97); transition: opacity .35s, transform .5s var(--ease); }
.lb img.in { opacity: 1; transform: none; }
.lb figcaption { display: flex; gap: 16px; align-items: baseline; font: italic 400 19px/1.35 Fraunces, serif; text-align: center; }
.lb .lb-teller { font: 600 12.5px/1 Albert, sans-serif; letter-spacing: .12em; color: var(--goud-l); font-style: normal; }
.lb-knop { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(246,241,231,.2); background: rgba(246,241,231,.08); color: var(--creme); display: grid; place-items: center; cursor: pointer; transition: background-color .25s; }
.lb-knop:hover { background: rgba(246,241,231,.2); }
.lb-knop svg { width: 22px; height: 22px; }
.lb-dicht { top: 20px; right: 20px; }
.lb-vorige { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-volgende { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 680px) {
  .album { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 150px); grid-template-areas: "b b" "a c" "a c" "e c" "e d" "f f"; gap: 8px; }
  .album a { border-radius: 18px; }
  .lb figure { padding: 70px 12px 90px; }
  .lb img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 210px); border-radius: 14px; }
  .lb figcaption { flex-direction: column; align-items: center; gap: 8px; font-size: 17px; padding-inline: 10px; }
  .lb-vorige, .lb-volgende { top: auto; bottom: 22px; transform: none; }
  .lb-vorige { left: calc(50% - 64px); } .lb-volgende { right: calc(50% - 64px); }
}

/* ---------- rustiger: vertrouwensstrook, compacte koppen, compacte zwevende knop ---------- */
.vertrouw { background: #fff; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vertrouw .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 18px; }
.vt-score { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tekst); font-size: 14.5px; }
.vt-score b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 12px 12px 4px; background: var(--bos); color: var(--goud-l); font: 400 20px/1 Fraunces, serif; }
.vt-score strong { color: var(--inkt); font: italic 500 18px/1.1 Fraunces, serif; }
.vt-score:hover strong { text-decoration: underline; }
.held-oordeel { display: flex; align-items: center; gap: 14px; width: fit-content; margin: 22px auto 0; padding: 10px 22px 10px 10px; border-radius: 18px; background: #fff; box-shadow: 0 14px 34px -18px rgba(31,42,34,.35); text-decoration: none; color: var(--tekst); font-size: 14px; }
.held-oordeel b { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px 12px 12px 4px; background: var(--bos); color: var(--goud-l); font: 400 21px/1 Fraunces, serif; }
.held-oordeel span { display: flex; flex-direction: column; line-height: 1.25; }
.held-oordeel strong { color: var(--inkt); font: italic 500 19px/1.15 Fraunces, serif; }
.held-oordeel small { font-size: 13px; color: var(--muted); }
.held-oordeel em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--bos); padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--lijn); }
.held-oordeel:hover em { text-decoration: underline; }
@media (max-width: 680px) { .held-oordeel { margin-top: 16px; gap: 10px; padding: 8px 14px 8px 8px; } .held-oordeel b { width: 40px; height: 40px; font-size: 18px; } .held-oordeel strong { font-size: 17px; } .held-oordeel small { font-size: 12px; } .held-oordeel em { display: none; } }
.vt { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--tekst); }
.vt svg { width: 19px; height: 19px; color: var(--mos); }
.boeken-bevestiging { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--inkt); }
@media (min-width: 681px) {
  .held .boeken { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .held .boeken .veld.datum { grid-column: span 3; }
  .held .boeken .veld:not(.datum) { grid-column: span 3; }
  .held .boeken button { grid-column: 1 / -1; min-height: 56px; }
}
.tegels.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 24vw, 340px); }
@media (max-width: 1080px) { .tegels.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tegels.vier { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } .vertrouw .wrap { justify-content: flex-start; gap: 12px; } }
.gb-drie { margin-top: clamp(36px, 4vw, 56px); }
.gb-alle { margin-top: 22px; text-align: center; }
.gb-alle a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--inkt); text-decoration: none; }
.gb-alle svg { width: 18px; height: 18px; color: var(--goud); }
main .wrap h2 { font-size: clamp(34px, 3.7vw, 56px); }
main .cta h2 { font-size: clamp(40px, 4.6vw, 72px); }
.rk:not(.form-open) { width: auto; }
.rk:not(.form-open) .rk-kaart { padding: 7px; border-radius: 999px; }
.rk:not(.form-open) .rk-kop { display: none; }
.rk:not(.form-open) .rk-rij { margin-top: 0; }

/* ---------- wat u kunt verwachten (home) ---------- */
.verwacht { padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 7vw, 100px); }
.pijlers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pijler { display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -44px rgba(30,43,35,.5); transition: transform .4s var(--ease); }
.pijler:hover { transform: translateY(-5px); }
.pijler figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.pijler figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pijler:hover figure img { transform: scale(1.06); }
.pt { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.pt .nr { font: 700 12px/1 Albert, sans-serif; letter-spacing: .16em; color: var(--goud); }
.pt h3 { font-size: 25px; margin: 9px 0 8px; }
.pt p { font-size: 15px; }
.pt blockquote { flex: 1; margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--goud-l); font: italic 400 16px/1.45 Fraunces, serif; color: var(--inkt); }
.pt cite { display: block; margin-top: 6px; font: 500 12.5px/1.3 Albert, sans-serif; font-style: normal; color: var(--muted); }
.pt .pijler-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: 14.5px; color: var(--inkt); text-decoration: none; }
.pt .pijler-link svg { width: 17px; height: 17px; color: var(--goud); transition: transform .3s var(--ease); }
.pt .pijler-link:hover svg { transform: translateX(4px); }
/* ---------- drie kamers op home ---------- */
.kamerstrook { padding: clamp(64px, 7vw, 100px) 0 clamp(70px, 8vw, 110px); }
.ks-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ks { display: flex; flex-direction: column; background: #fff; border-radius: 26px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 28px 60px -44px rgba(30,43,35,.5); transition: transform .4s var(--ease); }
.ks:hover { transform: translateY(-5px); }
.ks figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; }
.ks img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.ks:hover img { transform: scale(1.06); }
.ks > div { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ks h3 { font-size: 29px; }
.ks p { margin-top: 6px; font-size: 15px; }
.ks-feit { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ks-feit li { padding: 6px 10px; border-radius: 999px; background: var(--creme); font-size: 13px; font-weight: 600; color: var(--inkt); }
.ks-prijs { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--muted); }
.ks-prijs b { font: 500 32px/1 Fraunces, serif; color: var(--inkt); margin-right: 6px; }
.ks-prijs svg { align-self: center; width: 22px; height: 22px; color: var(--goud); transition: transform .3s var(--ease); }
.ks:hover .ks-prijs svg { transform: translateX(5px); }
.ks-onder { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--muted); }
/* ---------- ontbijt en reserveren (overnachten) ---------- */
.ontbijt-quotes { display: grid; gap: 10px; margin-top: 22px; }
.ontbijt-quotes blockquote { margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--zand); font: italic 400 17px/1.45 Fraunces, serif; color: var(--inkt); }
.ontbijt-quotes cite { display: block; margin-top: 4px; font: 500 12.5px/1.3 Albert, sans-serif; font-style: normal; color: var(--muted); }
.rsv-stappen { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: rs; }
.rsv-stappen li { position: relative; padding-left: 44px; font-size: 15px; line-height: 1.5; counter-increment: rs; }
.rsv-stappen li::before { content: counter(rs); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bos); color: var(--goud-l); font: 400 15px/1 Fraunces, serif; }
.rsv-stappen b { display: block; color: var(--inkt); }
@media (max-width: 1080px) {
  .pijlers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-rij { grid-template-columns: minmax(0, 1fr); }
  .ks { flex-direction: row; } .ks figure { flex: 0 0 40%; aspect-ratio: auto; }
}
@media (max-width: 680px) {
  .pijlers { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--rand) * -1); padding: 4px var(--rand) 16px; scrollbar-width: none; }
  .pijlers::-webkit-scrollbar { display: none; }
  .pijler { flex: 0 0 84%; scroll-snap-align: center; }
  .pijlers { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; gap: 26px; }
  .ks { flex-direction: column; } .ks figure { flex: none; aspect-ratio: 16 / 9; }
}

/* ---------- gastenboek: score en beoordelingen ---------- */
.gastenboek { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); overflow: hidden; }
.gb-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: clamp(36px, 6vw, 90px); align-items: center; }
.gb-kop h2 { font-size: clamp(42px, 5vw, 78px); margin: 16px 0 20px; }
.gb-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.gb-links a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: #fff; color: var(--inkt); text-decoration: none; font-weight: 700; font-size: 15px; box-shadow: 0 10px 24px -18px rgba(30,43,35,.55); transition: transform .3s var(--ease); }
.gb-links a:hover { transform: translateY(-2px); }
.gb-links svg { width: 17px; height: 17px; }
.gb-score { background: var(--bos); color: #cfd6cd; border-radius: 30px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 40px 80px -46px rgba(30,43,35,.8); }
.gb-top { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; margin-bottom: 20px; border-bottom: 1px solid rgba(246,241,231,.12); }
.gb-negen { flex: none; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 26px 26px 26px 6px; background: var(--goud-l); color: var(--bos); font: 400 46px/1 Fraunces, serif; letter-spacing: -.02em; }
.gb-top strong { display: block; font: italic 500 30px/1.1 Fraunces, serif; color: var(--creme); }
.gb-top span { display: block; margin-top: 6px; font-size: 14.5px; }
.gb-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.gb-balken li { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 14.5px; }
.gb-balken b { color: var(--creme); font-weight: 700; }
.gb-balken i { grid-column: 1 / -1; height: 5px; border-radius: 9px; background: rgba(246,241,231,.1); overflow: hidden; }
.gb-balken i::after { content: ""; display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--goud), var(--goud-l)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); transition-delay: calc(var(--n) * 90ms + .25s); }
.gb-score.in .gb-balken i::after { transform: scaleX(1); }
.gb-host { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(246,241,231,.12); font-size: 14.5px; }
.gb-host img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.gb-host b { color: var(--goud-l); }
/* eenvoudiger: alleen totaalcijfer, aantal en bron */
.gb-kort { display: block; align-self: end; text-decoration: none; padding: 26px 30px; transition: transform .3s var(--ease); }
.gb-kort:hover { transform: translateY(-3px); }
.gb-kort .gb-top { padding-bottom: 18px; margin-bottom: 16px; }
.gb-kort .gb-negen { width: 78px; height: 78px; font-size: 38px; }
.gb-kort .gb-top strong { font-size: 27px; }
.gb-bronlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--goud-l); }
.gb-bronlink svg { width: 17px; height: 17px; transition: transform .3s var(--ease); }
.gb-kort:hover .gb-bronlink svg { transform: translateX(4px); }
/* LunchBox-kaartjes: klein productbeeld rechts */
.box { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-content: start; }
.box > :not(.box-beeld) { grid-column: 1; }
.box .stepper { justify-self: start; }
.box-beeld { grid-column: 2; grid-row: 1 / span 5; align-self: center; width: clamp(96px, 30%, 128px); height: auto; margin-right: -6px; pointer-events: none; transition: transform .4s var(--ease); }
.box:hover .box-beeld, .box.gekozen .box-beeld { transform: scale(1.05) rotate(-2deg); }
.gb-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
/* pijlers: rustig en zonder foto, zodat de kamers de blikvanger blijven */
.pijlers { gap: clamp(20px, 3vw, 44px); }
.pijler { background: none; border-radius: 0; box-shadow: none; overflow: visible; border-top: 1px solid rgba(30,43,35,.16); }
.pijler:hover { transform: none; }
.pijler .pt { padding: 22px 0 0; }
.pijler .pt h3 { font-size: 24px; }
/* kamers: grotere foto's */
@media (min-width: 1081px) { .ks figure { aspect-ratio: 4 / 3.3; } .ks h3 { font-size: 31px; } }
/* hero-titel altijd op twee regels */
@media (min-width: 681px) { .held h1 { font-size: clamp(56px, 7.2vw, 96px); } }
.gb-rijen { display: grid; gap: 16px; margin-top: clamp(44px, 5vw, 70px); }
.gb-rij { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.gb-spoor { display: flex; gap: 16px; width: max-content; padding: 6px 0 14px; animation: gb-loop var(--duur, 90s) linear infinite; }
.gb-rij.terug .gb-spoor { animation-direction: reverse; }
.gb-rij:hover .gb-spoor, .gb-rij:focus-within .gb-spoor { animation-play-state: paused; }
@keyframes gb-loop { to { transform: translateX(calc(-50% - 8px)); } }
.gb-kaart { margin: 0; flex: none; width: 360px; display: flex; flex-direction: column; background: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 2px 6px rgba(30,43,35,.04), 0 22px 44px -36px rgba(30,43,35,.55); transition: transform .4s var(--ease), box-shadow .4s; }
.gb-kaart:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 2px 6px rgba(30,43,35,.05), 0 30px 54px -34px rgba(30,43,35,.6); }
.gb-merk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gb-bron { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font: 800 15px/1 Albert, sans-serif; }
.gb-b { background: #003580; color: #fff; }
.gb-g { background: #fff; color: #4285f4; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--lijn); font-weight: 800; }
.gb-tien { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 8px; border-radius: 9px 9px 9px 3px; background: var(--bos); color: var(--goud-l); font: 700 14px/1 Albert, sans-serif; }
.gb-sterren { color: #e3a83b; letter-spacing: 2px; font-size: 15px; }
.gb-kaart h3 { font: 500 21px/1.25 Fraunces, serif; color: var(--inkt); margin-bottom: 8px; }
.gb-kaart blockquote { margin: 0; flex: 1; }
.gb-kaart blockquote p { font-size: 15.5px; line-height: 1.6; color: var(--tekst); }
.gb-kaart figcaption { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.gb-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; font: 700 15px/1 Albert, sans-serif; }
.gb-kaart figcaption b { display: block; color: var(--inkt); font-size: 15px; }
.gb-kaart figcaption small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.gb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gb-grid .gb-kaart { width: auto; }
.gb-mini { display: flex; align-items: center; gap: 14px; }
.gb-mini .gb-negen { width: 64px; height: 64px; font-size: 30px; border-radius: 18px 18px 18px 5px; }
.gb-mini strong { display: block; font: italic 500 22px/1.1 Fraunces, serif; color: var(--inkt); }
.gb-mini span { font-size: 14.5px; }
.citaat { margin: 24px 0 0; padding: 18px 20px; border-radius: 20px; background: var(--zand); }
.citaat p { font: italic 400 18px/1.5 Fraunces, serif; color: var(--inkt); }
.citaat footer { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.held-score { position: absolute; z-index: 3; right: -5%; bottom: 8%; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; background: #fff; text-decoration: none; color: var(--tekst); font-size: 14px; box-shadow: 0 22px 44px -22px rgba(30,43,35,.6); transition: transform .35s var(--ease); }
.held-score:hover { transform: translateY(-3px); }
.held-score > span { display: flex; flex-direction: column; line-height: 1.25; }
.held-score small { font-size: 12.5px; color: var(--muted); }
.held-score b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 12px 12px 4px; background: var(--bos); color: var(--goud-l); font: 400 20px/1 Fraunces, serif; }
.held-score strong { color: var(--inkt); font: italic 500 18px/1.15 Fraunces, serif; }
@media (max-width: 680px) { .held-score { right: 3%; bottom: 5%; padding: 6px 12px 6px 6px; gap: 8px; border-radius: 14px; } .held-score .hs-lang { display: none; } .held-score b { width: 36px; height: 36px; font-size: 17px; } .held-score strong { font-size: 15px; } .held-score small { font-size: 11px; } }
.held-score:hover strong { text-decoration: underline; }
@media (max-width: 1080px) { .gb-kop { grid-template-columns: minmax(0, 1fr); } .gb-score { max-width: 560px; } .gb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .gb-negen { width: 76px; height: 76px; font-size: 38px; } .gb-top strong { font-size: 25px; } .gb-kaart { width: 300px; padding: 20px; } }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .gb-spoor { align-items: flex-start; }
  .gb-rij { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .gb-rij::-webkit-scrollbar { display: none; }
  .gb-spoor { animation: none; padding-inline: var(--rand); }
  .gb-spoor > [aria-hidden="true"] { display: none; }
  .gb-kaart { scroll-snap-align: center; }
}

/* ---------- zwevende reserveerkaart ---------- */
.rk { position: fixed; z-index: 70; right: 24px; bottom: 24px; width: 344px; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .35s, transform .5s var(--ease), visibility 0s .5s, bottom .45s var(--ease); }
.rk.form-open { z-index: 90; }
.rk.zichtbaar { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .5s var(--ease), visibility 0s, bottom .45s var(--ease); }
html.menu-open .rk, html:has(.lb[open]) .rk { opacity: 0; visibility: hidden; }
.rk-kaart { background: #fff; border-radius: 26px; padding: 18px 16px 14px 18px; border: 1px solid rgba(30,43,35,.07); box-shadow: 0 2px 6px rgba(30,43,35,.06), 0 30px 60px -24px rgba(30,43,35,.5); }
.rk-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rk-kop b { display: block; font: 500 20px/1.2 Fraunces, serif; color: var(--inkt); }
.rk-sub { display: block; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--tekst); }
.rk-sub strong { color: var(--inkt); }
.rk-min { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: #fff; color: var(--inkt); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.rk-min:hover { background: var(--creme); }
.rk svg { width: 19px; height: 19px; }
.rk-min svg { width: 15px; height: 15px; }
.rk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rk-form[hidden] { display: none; }
.rk.form-open .rk-kaart { max-height: calc(100vh - 110px); overflow-y: auto; }
.rk.form-open .rk-form { animation: rk-in .45s var(--ease); }
@keyframes rk-in { from { opacity: 0; transform: translateY(8px); } }
.rk-form label { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-radius: 14px; background: var(--creme); }
.rk-form label span { font: 700 10.5px/1 Albert, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.rk-form input, .rk-form select { width: 100%; min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--inkt); font: 600 15px/1.3 Albert, sans-serif; -webkit-appearance: none; appearance: none; }
.rk-form input:focus, .rk-form select:focus { outline: none; }
.rk-form label:focus-within { box-shadow: inset 0 0 0 1.5px var(--mos); }
.rk-form label.breed { grid-column: 1 / -1; }
a.rk-knop { text-decoration: none; }
.rk-noot { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.rk-rij { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.rk-foto { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--goud-l); }
.rk-knop { position: relative; overflow: hidden; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--bos); color: var(--creme); font: 700 15.5px/1 Albert, sans-serif; cursor: pointer; }
.rk-knop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(209,198,141,.38) 50%, transparent 70%); transform: translateX(-120%); animation: rk-glans 6s ease-in-out 2.5s infinite; }
@keyframes rk-glans { 0%, 72% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.rk-knop svg { color: var(--goud-l); }
.rk-knop span { white-space: nowrap; }
.rk-rond { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.rk-rond:hover { background: var(--creme); }
.rk-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.rk-open { position: absolute; right: 0; bottom: 0; display: none; place-items: center; width: 62px; height: 62px; border: 0; border-radius: 50%; background: var(--bos); color: var(--goud-l); box-shadow: 0 0 0 3px #f6f1e7, 0 0 0 4.5px rgba(179,149,85,.7), 0 20px 40px -14px rgba(0,0,0,.55); cursor: pointer; transition: transform .3s var(--ease); }
.rk-open:hover { transform: scale(1.06); }
.rk-open svg { width: 26px; height: 26px; }
.rk.ingeklapt .rk-kaart { display: none; }
.rk.ingeklapt .rk-open { display: grid; animation: rk-in .4s var(--ease); }
@media (max-width: 1499px) { html:not(.zonder-pil) .rk { bottom: 88px; } }
@media (max-width: 680px) {
  .rk, html:not(.zonder-pil) .rk { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; }
  .rk.ingeklapt .rk-kaart { display: block; } .rk.ingeklapt .rk-open { display: none; }
  .rk-kaart { padding: 7px; border-radius: 30px; transition: padding .45s var(--ease), border-radius .45s var(--ease); }
  .rk-kop { max-height: 0; opacity: 0; overflow: hidden; padding: 0 4px 0 6px; transition: max-height .5s var(--ease), opacity .3s; }
  .rk-kop b { font-size: 18.5px; } .rk-sub { font-size: 13.5px; }
  .rk-rij { margin-top: 0; transition: margin-top .45s var(--ease); }
  .rk-foto { width: 44px; height: 44px; cursor: pointer; }
  .rk-knop { min-height: 46px; } .rk-rond { width: 46px; height: 46px; }
  .rk.uitgeklapt, .rk.form-open { z-index: 90; }
  .rk.uitgeklapt .rk-kaart, .rk.form-open .rk-kaart { padding: 14px 8px 8px; border-radius: 24px; }
  .rk.uitgeklapt .rk-kop, .rk.form-open .rk-kop { max-height: 150px; opacity: 1; }
  .rk.uitgeklapt .rk-rij, .rk.form-open .rk-rij { margin-top: 12px; }
  .rk.form-open .rk-kaart { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; }
  .rk.form-open .rk-sub { display: none; }
  .rk.form-open .rk-form { margin-top: 10px; gap: 6px; }
  .rk.form-open .rk-form label { padding: 7px 10px; }
  .rk.form-open .rk-noot { font-size: 12px; }
  .rk.form-open .rk-rij { margin-top: 10px; }
  html.rk-zichtbaar .pil { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px); }
}
/* iPhone Duo opengeklapt en liggend: de camera zit in de hoek rechtsonder, dus de reserveerbalk blijft daar weg */
@media (orientation: landscape) and (max-height: 720px) and (pointer: coarse) {
  .rk, html:not(.zonder-pil) .rk { left: auto; width: auto; right: calc(env(safe-area-inset-right, 0px) + 86px); bottom: 12px; }
  html:not(.zonder-pil) .pil { left: 40%; }
}
/* brede 'telefoons' (iPhone Duo opengeklapt en staand, kleine tablets): de reserveerbalk compact rechtsonder in plaats van over de volle breedte */
@media (min-width: 481px) and (max-width: 680px) {
  .rk, html:not(.zonder-pil) .rk { left: auto; right: 14px; width: auto; }
  .rk.uitgeklapt, .rk.form-open { width: min(380px, calc(100vw - 28px)); }
  .rk:not(.uitgeklapt):not(.form-open) .rk-knop { flex: none; padding: 0 26px; }
  .pil { transition: bottom .45s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .rk-knop::after { animation: none; } }

/* ---------- mobiel menu: foto, uitleg en snelknoppen ---------- */
.mobiel { display: none; }
.menu-knop path { transition: transform .4s var(--ease); transform-box: view-box; transform-origin: 12px 12px; }
.kop.open .menu-knop .l1 { transform: rotate(45deg) translateY(4px); }
.kop.open .menu-knop .l2 { transform: rotate(-45deg) translateY(-4px); }
@media (max-width: 1080px) {
  .kop.open .menu { display: none; }
  .mobiel { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 86px); height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; background: var(--creme); padding: 4px var(--rand) 34px; border-top: 1px solid var(--lijn); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
  .kop.open .mobiel { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--ease); }
  html.menu-open { overflow: hidden; }
  html.menu-open .pil { display: none; }
  .mm-nav { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; }
  .mm-item { border-bottom: 1px solid rgba(179,149,85,.24); opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .55s var(--ease); }
  .kop.open .mm-item { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 80ms); }
  .mm-link { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 14px; align-items: center; padding: 15px 2px 14px; text-decoration: none; color: var(--inkt); }
  .mm-link b { display: block; font: 400 28px/1.08 Fraunces, serif; letter-spacing: -.01em; color: var(--inkt); transition: color .25s; }
  .mm-link small { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.35; color: var(--muted); letter-spacing: .01em; }
  .mm-link small .tt-live { font-weight: 600; color: var(--tekst); }
  .mm-link > svg { width: 20px; height: 20px; color: var(--goud); transition: transform .35s var(--ease); }
  .mm-link:active > svg { transform: translateX(5px); }
  .mm-link:active b { color: var(--mos); }
  .mm-link[aria-current="page"] b { font-style: italic; color: var(--mos); }
  .mm-link[aria-current="page"] b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); margin-left: 9px; vertical-align: .32em; }
  .mm-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 15px; }
  .mm-chips a { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(179,149,85,.45); color: var(--inkt); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1; transition: background-color .2s, color .2s, border-color .2s; }
  .mm-chips a b { color: var(--goud); font-weight: 700; }
  .mm-chips a:active { background: var(--bos); border-color: var(--bos); color: var(--creme); }
  .mm-chips a:active b { color: var(--goud-l); }
  .kop .mobiel .knop.mm-cta { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 16px 34px -14px rgba(30,43,35,.65); display: flex; justify-content: center; width: 100%; max-width: 640px; margin: 20px auto 0; min-height: 54px; font-size: 16.5px; }
  .mm-snel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: 10px auto 0; }
  .mm-snel a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; border: 1px solid rgba(179,149,85,.35); background: transparent; color: var(--inkt); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; transition: background-color .2s; }
  .mm-snel a:active { background: rgba(179,149,85,.12); }
  .mm-snel svg { width: 21px; height: 21px; color: var(--goud); }
  .mobiel::after { content: ""; display: block; width: min(230px, 62%); aspect-ratio: 900 / 407; margin: 30px auto 6px; background: url(../img/huis-goud.webp) center / contain no-repeat; opacity: .75; }
  .mm-onder { max-width: 640px; margin: 18px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); }
  .mm-onder a { color: var(--inkt); }
}
@media (max-width: 680px) { .mobiel { height: calc(100vh - 72px); height: calc(100dvh - 72px); } }
@media (prefers-reduced-motion: reduce) { .mobiel, .mm-item, .menu-knop path { transition: none !important; } }
html { scroll-padding-top: 100px; }
@media (max-width: 680px) { html { scroll-padding-top: 84px; } }

@media (max-width: 1080px) {
  .pk .wrap, .welkom .wrap, .twee, .reserveer, .aanvraag, .contactgrid { grid-template-columns: minmax(0, 1fr); }
  .pk-beeld { max-width: 560px; margin-inline: auto; width: 100%; }
  .tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
  .tegel.groot { grid-column: span 2; grid-row: span 1; }
  .fac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regels, .aanbod, .lokaal, .fiets-grid { grid-template-columns: minmax(0, 1fr); }
  .stappen { grid-template-columns: 1fr 1fr; gap: 30px 14px; } .stappen::before, .stappen::after { display: none; }
  .voet .voet-grid { grid-template-columns: 1fr 1fr; }
  .tekstpagina .wrap { grid-template-columns: minmax(0, 1fr); } .inhoud-nav { display: none; }
  .menukaart [role="tabpanel"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .pk h1 { font-size: clamp(46px, 12.5vw, 64px); }
  .pk-beeld { order: -1; margin-bottom: 8px; } .pk .boog { aspect-ratio: 4 / 3.3; }
  .pk-beeld .rond { left: -2%; bottom: -6%; width: 30%; border-width: 6px; }
  .badge { right: 0; top: 6%; padding: 10px 12px; font-size: 12.5px; max-width: 220px; gap: 10px; } .badge b { font-size: 17px; white-space: normal; } .badge .bi { width: 38px; height: 38px; }
  .tegels { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } .tegel.groot { grid-column: auto; grid-row: auto; }
  .cijfer { grid-template-columns: 92px minmax(0, 1fr); padding: 18px; } .cijfer b { font-size: 42px; }
  .fac { grid-template-columns: minmax(0, 1fr); }
  .dag { grid-template-columns: minmax(0, 1fr); gap: 26px; } .dag::before { display: none; }
  .dieren-rij { gap: 8px; } .dier { padding: 14px 6px 18px; } .dier .duim { width: 52px; height: 52px; } .dier b { font-size: 15px; }
  .stappen { grid-template-columns: minmax(0, 1fr); }
  .formulier { grid-template-columns: minmax(0, 1fr); }
  .kaartjes { grid-template-columns: minmax(0, 1fr); }
  .fotostrook { grid-template-columns: 1fr 1fr; } .fotostrook figure:first-child { grid-column: 1 / -1; }
  .parkfeiten { grid-template-columns: minmax(0, 1fr); }
  .voet .voet-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 20px; }
  .voet-merk, .voet .voet-kol:nth-child(3) { grid-column: 1 / -1; }
  .voet .voet-kol:nth-child(3) { order: 3; }
  .badge.onder { left: 3%; bottom: 5%; }
  .stappen li::before { transition-delay: calc(.1s + var(--i) * .15s); }
  .bestel-velden textarea { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk .boog img.actief, .klokje .uur, .klokje .min, .kopje .stoom, .kompasje svg, .belletje svg, .fietsje svg, .twinkel svg, .blaadjes, .tt-live.tt-open i, .tt-badge.tt-open b::before { animation: none !important; }
  .blaadjes { display: none; }
  .fac li, .stappen li::before { opacity: 1; transform: none; transition: none; }
  .dag::before, .stappen::after, .buurt .lijntje i { transform: none; transition: none; }
  .koffieroute .lijn-pad { stroke-dashoffset: 0; transition: none; } .koffieroute .boon { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- vouwtelefoon (iPhone Duo e.d.): opengeklapt staat de reservering op het tweede scherm ---------- */
.duo { display: none; }
.duo-in { min-height: 100%; display: grid; align-content: start; gap: 14px; padding: 22px 18px 28px; }
.duo-in { position: relative; }
.duo-sluit { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--lijn); background: #fff; color: var(--inkt); display: grid; place-items: center; cursor: pointer; }
.duo-sluit svg { width: 18px; height: 18px; }
.duo-sluit:hover { border-color: var(--bos); }
.duo-label { font: 700 11px/1 Albert, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); }
.duo-kop { font: 400 26px/1.1 Fraunces, serif; color: var(--inkt); margin: -4px 0 0; }
.duo-score { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.duo-score b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px 11px 11px 3px; background: var(--bos); color: var(--goud-l); font: 400 17px/1 Fraunces, serif; }
.duo-score span { display: flex; flex-direction: column; line-height: 1.3; }
.duo-score strong { font: italic 500 15px/1.2 Fraunces, serif; color: var(--inkt); }
.duo-kamers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.duo-kamer { width: 100%; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 16px; background: #fff; border: 1.5px solid transparent; text-align: left; cursor: pointer; box-shadow: 0 1px 2px rgba(30,43,35,.06); font: inherit; color: var(--tekst); transition: border-color .2s, box-shadow .3s; }
.duo-kamer img { width: 50px; height: 50px; border-radius: 11px; object-fit: cover; }
.duo-kamer b { display: block; font-size: 14px; color: var(--inkt); }
.duo-kamer small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duo-kamer em { font: 500 15px/1 Fraunces, serif; font-style: normal; color: var(--inkt); white-space: nowrap; }
.duo-kamer.gekozen { border-color: var(--bos); box-shadow: 0 12px 26px -16px rgba(30,43,35,.55); }
.duo-form { display: grid; gap: 8px; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 2px 6px rgba(30,43,35,.05), 0 24px 48px -30px rgba(30,43,35,.45); }
.duo-data { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo-form label { display: grid; gap: 4px; padding: 9px 10px; border-radius: 12px; background: var(--creme); min-width: 0; }
.duo-form label span { font: 700 10px/1 Albert, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.duo-form input, .duo-form select { border: 0; background: transparent; font: 600 13.5px/1.3 Albert, sans-serif; color: var(--inkt); padding: 0; width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; }
.duo-form button { width: 100%; min-height: 50px; border-radius: 14px; }
.duo-data label { position: relative; }
.duo-data input { min-height: 20px; }
.duo-ph { position: absolute; left: 10px; bottom: 9px; font: 600 13.5px/1.3 Albert, sans-serif; font-style: normal; color: var(--mos); pointer-events: none; }
.duo-data label:not(.leeg) .duo-ph { display: none; }
.duo-data label.leeg input { color: transparent; }
.duo-klein { font-size: 11.5px; line-height: 1.45; color: var(--muted); padding: 0 4px 2px; }
.duo-contact { display: flex; gap: 8px; }
.duo-contact a { flex: 1; text-align: center; padding: 11px 10px; border-radius: 999px; border: 1.5px solid var(--lijn); color: var(--inkt); text-decoration: none; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.duo-contact a:hover { border-color: var(--bos); }
/* opengeklapt en liggend (gemeten op de iPhone Duo: 951 x 543, de vouw loopt verticaal): eerst de hele site; na 'Reserveer' 50/50, links de site en rechts de reservering */
@media (min-width: 880px) and (max-width: 1000px) and (min-aspect-ratio: 13/10) and (max-aspect-ratio: 2/1) and (max-height: 720px), (horizontal-viewport-segments: 2) {
  :root { --duo-r: calc(50vw - 9px); --duo-vouw: 18px; }
  body { transition: margin-right .5s var(--ease); }
  .duo { display: block; position: fixed; z-index: 75; top: 0; right: 0; bottom: 0; width: var(--duo-r); overflow-y: auto; overscroll-behavior: contain; background: var(--creme); box-shadow: -24px 0 48px -32px rgba(30,43,35,.5); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
  html.duo-open body { margin-right: calc(var(--duo-r) + var(--duo-vouw)); overflow-x: clip; }
  html.duo-open .duo { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
  html.duo-open body::after { content: ""; position: fixed; z-index: 74; top: 0; bottom: 0; right: var(--duo-r); width: var(--duo-vouw); background: linear-gradient(90deg, rgba(30,43,35,.08), rgba(30,43,35,.02) 45%, rgba(30,43,35,.02) 55%, rgba(30,43,35,.08)); pointer-events: none; }
  html.duo-open .rk { display: none !important; }
  html.duo-open .pil { left: calc((100vw - var(--duo-r) - var(--duo-vouw)) / 2); }
}
/* opengeklapt en staand (gemeten op de iPhone Duo: 669 x 825, de vouw loopt horizontaal): eerst de hele site; na 'Reserveer' boven de site en onder de reservering */
@media (min-width: 600px) and (max-width: 720px) and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 9/10), (vertical-viewport-segments: 2) {
  :root { --duo-o: calc(50vh - 9px); --duo-vouw: 18px; }
  .duo { display: block; position: fixed; z-index: 75; left: 0; right: 0; bottom: 0; height: var(--duo-o); overflow-y: auto; background: var(--creme); box-shadow: 0 -24px 48px -32px rgba(30,43,35,.5); transform: translateY(105%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
  html.duo-open body { margin-bottom: calc(var(--duo-o) + var(--duo-vouw)); }
  html.duo-open .duo { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
  html.duo-open body::after { content: ""; position: fixed; z-index: 74; left: 0; right: 0; bottom: var(--duo-o); height: var(--duo-vouw); background: linear-gradient(180deg, rgba(30,43,35,.08), rgba(30,43,35,.02) 45%, rgba(30,43,35,.02) 55%, rgba(30,43,35,.08)); pointer-events: none; }
  .duo-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto 1fr; column-gap: 18px; row-gap: 8px; padding: 16px 22px; align-content: start; }
  .duo-label { grid-column: 1; } .duo-kop { grid-column: 1; font-size: 22px; } .duo-score { grid-column: 1; }
  .duo-kamers { grid-column: 1; grid-row: 4; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .duo-kamer { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 4px; padding: 8px 6px; }
  .duo-kamer img { width: 100%; height: 44px; } .duo-kamer small { display: none; }
  .duo-form { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .duo-contact { display: none; }
  html.duo-open .rk { display: none !important; }
  html.duo-open .pil { bottom: calc(var(--duo-o) + var(--duo-vouw) + 12px); }
}
/* echte segmenten (Chrome op Android-vouwtelefoons): exact de maten van de schermen gebruiken */
@supports (width: env(viewport-segment-width 0 0)) {
  @media (horizontal-viewport-segments: 2) { :root { --duo-r: env(viewport-segment-width 1 0); --duo-vouw: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); } }
  @media (vertical-viewport-segments: 2) { :root { --duo-o: env(viewport-segment-height 0 1); --duo-vouw: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0)); } }
}