/* ==========================================================================
   Fotostudio Dize (verzonnen fotograaf in Sneek) · voorbeeld van NorthByte
   Typografie: Source Serif 4 (koppen en tekst, licht gewicht en cursief) en
   IBM Plex Mono (labels, nummers en de camerawaarden onder de foto's).
   Kleuren: donkere galerij (nacht), warm papier en amber van het gouden uur.
   Vormtaal: de zoeker van een camera (hoeken, scherpstelvak, belichting),
   genummerde foto's als op een contactafdruk, rustige donkere vlakken.
   Beweging: alleen transform en opacity. Alles uit bij reduced motion.
   ========================================================================== */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/source-serif-4-var-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(fonts/source-serif-4-var-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2"); }

:root {
  --nacht: #121110;
  --nacht-2: #1b1917;
  --nacht-3: #262320;
  --papier: #f2ede4;
  --papier-2: #e8e1d5;
  --licht: #efe8dc;
  --grijs: #a39b90;
  --grijs-donker: #5f574d;
  --inkt: #1a1714;
  --amber: #e9a649;
  --amber-zacht: #f3c98a;
  --amber-donker: #8a5617;
  --lijn-d: rgba(239, 232, 220, .16);
  --lijn-l: rgba(26, 23, 20, .14);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --zacht: cubic-bezier(.22, 1, .36, 1);
  --rand: 16px;
  --vb-scroll-top: 76px;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --rand: 32px; } }

html { background: var(--nacht); }
body { background: var(--nacht); color: var(--licht); font: 400 17px/1.65 var(--serif); font-optical-sizing: auto; }
::selection { background: var(--amber); color: var(--inkt); }

.rand { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--rand); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.04; letter-spacing: -.018em; }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); }
h1 em, h2 em { font-style: italic; font-weight: 300; color: var(--amber); }

.mono { font-family: var(--mono); font-weight: 400; letter-spacing: .02em; }
.label {
  display: inline-block; margin-bottom: 18px; font: 400 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.label::before { content: ""; display: inline-block; width: 22px; height: 1px; margin-right: 10px; vertical-align: middle; background: currentColor; }

/* ----- Knoppen ----- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 2px; border: 1px solid var(--amber);
  background: var(--amber); color: var(--inkt); font: 600 16px/1 var(--serif); letter-spacing: .005em; text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--zacht);
}
.knop:hover { background: var(--amber-zacht); border-color: var(--amber-zacht); transform: translate3d(0, -2px, 0); }
.knop:active { transform: none; }
.knop-lijn { background: transparent; color: var(--licht); border-color: rgba(239, 232, 220, .5); }
.knop-lijn:hover { background: var(--licht); border-color: var(--licht); color: var(--inkt); }
.knop-klein { min-height: 42px; padding: 0 18px; font-size: 15px; }
.knop-breed { width: 100%; }

/* ----- Kop ----- */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(18, 17, 16, .94); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kop.is-gescrold { border-bottom-color: var(--lijn-d); }
.kop-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; color: var(--licht); }
.logo-icoon { width: 32px; height: 32px; flex: none; }
.logo-tekst { display: flex; flex-direction: column; }
.logo-tekst b { font: italic 400 30px/.95 var(--serif); letter-spacing: -.01em; }
.logo-tekst small { margin-top: 4px; font: 400 10px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--grijs); }

.menu { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.menu a { text-decoration: none; position: relative; padding: 4px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--zacht); }
.menu a:hover::after { transform: scaleX(1); }
.menu-tel { font-family: var(--mono); font-size: 14px; color: var(--grijs); }

.menu-knop { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; position: relative; }
.menu-knop i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--licht); transition: transform .35s var(--zacht); }
.menu-knop i:first-of-type { top: 18px; }
.menu-knop i:last-of-type { top: 25px; }
.menu-knop[aria-expanded="true"] i:first-of-type { transform: translate3d(0, 3.5px, 0) rotate(45deg); }
.menu-knop[aria-expanded="true"] i:last-of-type { transform: translate3d(0, -3.5px, 0) rotate(-45deg); }

@media (max-width: 1060px) { .menu-tel { display: none; } }
@media (max-width: 899px) {
  .kop-in { height: 62px; gap: 8px; }
  .logo-icoon { width: 28px; height: 28px; }
  .logo-tekst b { font-size: 26px; }
  .kop-knop { min-height: 38px; padding: 0 13px; font-size: 14px; white-space: nowrap; }
  .logo { gap: 9px; min-width: 0; }
  .logo-tekst small { font-size: 9.5px; letter-spacing: .12em; white-space: nowrap; }
  .js .menu-knop { display: block; }
  .js .menu {
    position: fixed; left: 0; right: 0; top: 62px; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--rand) 26px; background: var(--nacht); border-bottom: 1px solid var(--lijn-d);
    transform: translate3d(0, -8px, 0); opacity: 0; visibility: hidden;
    transition: transform .35s var(--zacht), opacity .25s, visibility 0s linear .35s;
  }
  .js .menu.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--zacht), opacity .25s, visibility 0s; }
  .js .menu a { padding: 14px 0; border-bottom: 1px solid var(--lijn-d); font: 300 26px/1.2 var(--serif); }
  .js .menu a::after { display: none; }
  .js .menu .menu-tel { display: block; font: 400 15px/1.2 var(--mono); border-bottom: 0; padding-top: 18px; color: var(--amber); }
  html:not(.js) .kop-in { flex-wrap: wrap; height: auto; padding: 12px 0; }
  html:not(.js) .menu { order: 3; width: 100%; flex-wrap: wrap; gap: 6px 18px; }
}
@media (max-width: 370px) { .kop-knop { display: none; } }

/* ----- Hero ----- */
.hero { position: relative; display: grid; min-height: min(88svh, 900px); overflow: hidden; background: var(--nacht); }
.hero > * { grid-area: 1 / 1; }
.hero-beeld { position: relative; display: block; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-beeld::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 17, 16, .8) 0%, rgba(18, 17, 16, .55) 34%, rgba(18, 17, 16, 0) 62%),
    linear-gradient(180deg, rgba(18, 17, 16, .5) 0%, rgba(18, 17, 16, 0) 24%, rgba(18, 17, 16, 0) 46%, rgba(18, 17, 16, .78) 82%, var(--nacht) 100%);
}
.hero-tekst { position: relative; z-index: 2; align-self: end; padding-bottom: clamp(40px, 6vw, 76px); }
.hero h1 { max-width: 13ch; font-size: clamp(2.75rem, 7.4vw, 6.4rem); line-height: .98; letter-spacing: -.03em; }
.hero h1 em { font-weight: 300; }
.hero-sub { max-width: 34rem; margin-top: 20px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: #ddd5c8; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.label-licht { color: var(--amber-zacht); }
.gouden-uur { display: flex; align-items: flex-start; gap: 10px; max-width: 34rem; margin-top: 26px; font: 400 13px/1.55 var(--mono); color: #cfc6b8; }
.gouden-uur svg { flex: none; width: 22px; height: 22px; margin-top: -2px; fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; }
.gouden-uur b { color: var(--amber-zacht); font-weight: 400; }

/* De zoeker: hoeken, scherpstelvak en camerawaarden. Puur decoratie. */
.zoeker { position: relative; z-index: 1; pointer-events: none; margin: clamp(14px, 2.4vw, 30px); }
.hoek { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(239, 232, 220, .7); }
.hoek-lb { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.hoek-rb { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.hoek-lo { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hoek-ro { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.zoeker-scherp { position: absolute; left: 59%; top: 39%; width: 64px; height: 50px; margin: -25px 0 0 -32px; border: 1.5px solid rgba(233, 166, 73, .85); }
.zoeker-scherp::before, .zoeker-scherp::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(233, 166, 73, .85); }
.zoeker-scherp::before { width: 8px; height: 1.5px; margin: -.75px 0 0 -4px; }
.zoeker-scherp::after { width: 1.5px; height: 8px; margin: -4px 0 0 -.75px; }
.zoeker-data { position: absolute; right: 38px; top: 6px; display: flex; gap: 18px; font: 400 12px/1 var(--mono); letter-spacing: .06em; color: rgba(239, 232, 220, .85); }
@media (max-width: 759px) {
  .hero { min-height: 0; }
  .hero-beeld img { height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
  .hero-beeld::after { background: linear-gradient(180deg, rgba(18, 17, 16, .45) 0%, rgba(18, 17, 16, 0) 22%, rgba(18, 17, 16, 0) 52%, var(--nacht) 100%); }
  .hero > .zoeker { grid-area: 1 / 1; align-self: start; height: calc(min(125vw, 78svh) - 34vw - 48px); margin: 12px; }
  .zoeker-data { right: 32px; gap: 12px; font-size: 10.5px; }
  .zoeker-data span:nth-child(4) { display: none; }
  .zoeker-scherp { left: 61%; top: 66%; width: 48px; height: 38px; margin: -19px 0 0 -24px; }
  .hero-tekst { grid-area: auto; margin-top: -34vw; padding-bottom: 40px; }
  .hero-knoppen .knop { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero-beeld img { animation: belicht 1.8s var(--zacht) both; }
  .js .hero-tekst > * { animation: op 1s var(--zacht) both; }
  .js .hero-tekst > :nth-child(2) { animation-delay: .1s; }
  .js .hero-tekst > :nth-child(3) { animation-delay: .2s; }
  .js .hero-tekst > :nth-child(4) { animation-delay: .28s; }
  .js .hero-tekst > :nth-child(5) { animation-delay: .36s; }
  .js .zoeker { animation: zoeker 1.2s .3s var(--zacht) both; }
}
@keyframes belicht { from { opacity: 0; transform: scale(1.06); } }
@keyframes op { from { opacity: 0; transform: translate3d(0, 20px, 0); } }
@keyframes zoeker { from { opacity: 0; transform: scale(1.03); } }

/* ----- Intro ----- */
.intro { padding: clamp(56px, 8vw, 110px) 0 clamp(24px, 4vw, 40px); }
.intro-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.intro-zin { font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.3; font-weight: 300; letter-spacing: -.01em; }
.intro-zin .label { display: block; }
.intro-lijst { border-top: 1px solid var(--lijn-d); }
.intro-lijst a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 16px 0;
  border-bottom: 1px solid var(--lijn-d); text-decoration: none; font-size: 24px; font-weight: 300; line-height: 1.2;
}
.intro-lijst .mono { font-size: 12px; color: var(--amber); }
.intro-lijst small { grid-column: 2; font: 400 12.5px/1.4 var(--mono); color: var(--grijs); letter-spacing: .02em; }
.intro-lijst a:hover { color: var(--amber-zacht); }

/* ----- Secties ----- */
.sectie { padding: clamp(64px, 9vw, 128px) 0; }
.sectie-kop { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.sectie-sub { margin-top: 16px; max-width: 36rem; font-size: 18px; color: var(--grijs); }

/* ----- Portfolio ----- */
.portfolio { padding-top: clamp(40px, 6vw, 72px); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--lijn-d); background: transparent; font: 400 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .25s, color .25s, border-color .25s;
}
.filter span { font-size: 11px; color: var(--grijs); }
.filter:hover { border-color: rgba(239, 232, 220, .5); }
.filter[aria-pressed="true"] { background: var(--licht); border-color: var(--licht); color: var(--inkt); }
.filter[aria-pressed="true"] span { color: var(--grijs-donker); }
html:not(.js) .filters { display: none; }

.galerij { columns: 2; column-gap: 10px; }
@media (min-width: 900px) { .galerij { columns: 3; column-gap: 18px; } }
.foto { break-inside: avoid; margin-bottom: 18px; }
@media (min-width: 900px) { .foto { margin-bottom: 30px; } }
.foto-link { position: relative; display: block; overflow: hidden; background: var(--nacht-3); }
.foto-link img { width: 100%; transition: transform .8s var(--zacht), opacity .4s; }
.foto-link::after {
  content: "Bekijk"; position: absolute; left: 12px; bottom: 12px; padding: 7px 10px; background: rgba(18, 17, 16, .82);
  font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--licht);
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .3s, transform .4s var(--zacht);
}
@media (hover: hover) {
  .foto-link:hover img { transform: scale(1.035); }
  .foto-link:hover::after, .foto-link:focus-visible::after { opacity: 1; transform: none; }
}
.foto-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.foto-link.is-weg { visibility: hidden; }
.foto-tekst { margin-top: 9px; font-size: 14.5px; line-height: 1.4; color: #cfc6b8; }
.foto-tekst .mono { margin-right: 6px; font-size: 11px; color: var(--amber); }
@media (max-width: 599px) { .foto-tekst { font-size: 13px; } }

/* Filteren met FLIP (naar E155) */
.foto.is-uit { opacity: 0; transform: scale(.96); transition: opacity .2s, transform .2s; }
.foto.is-nieuw { opacity: 0; transform: translate3d(0, 16px, 0); }
.foto.is-flip { transition: transform .5s var(--zacht), opacity .4s; }

/* ----- Lightbox (naar E156) ----- */
.lb { position: fixed; inset: 0; z-index: 9500; visibility: hidden; touch-action: none; color: var(--licht); }
.lb.is-actief { visibility: visible; }
.lb-achter { position: absolute; inset: 0; background: #0b0a09; opacity: 0; }
.lb.is-open .lb-achter { opacity: .97; }
.lb-img { position: absolute; left: 0; top: 0; display: block; object-fit: cover; transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; background: var(--nacht-3); }
.lb-tekst { position: absolute; left: 16px; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; opacity: 0; }
.lb-titel { font-size: 17px; line-height: 1.4; }
.lb-meta { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--grijs); }
.lb.is-open .lb-tekst { opacity: 1; }
.lb-knop {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(239, 232, 220, .35); background: rgba(18, 17, 16, .6); color: var(--licht); opacity: 0;
}
.lb-knop:hover { border-color: var(--amber); color: var(--amber); }
.lb.is-open .lb-knop { opacity: 1; }
.lb-knop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-sluit { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-vorige, .lb-volgende { top: 50%; margin-top: -24px; }
.lb-vorige { left: 14px; }
.lb-volgende { right: 14px; }
.lb-teller { position: absolute; left: 18px; top: max(26px, calc(env(safe-area-inset-top) + 12px)); font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--grijs); opacity: 0; }
.lb.is-open .lb-teller { opacity: 1; }
@media (max-width: 699px) { .lb-vorige, .lb-volgende { top: auto; bottom: max(84px, calc(env(safe-area-inset-bottom) + 70px)); margin-top: 0; } }
html.lb-open, html.lb-open body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lb-achter, .lb-tekst, .lb-knop, .lb-teller { transition: opacity .35s ease; }
  .lb-img.is-anim { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .25s ease; }
  .lb-img.is-snel { transition: transform .22s ease-in, opacity .22s ease-in; }
}

/* ----- Werkwijze ----- */
.werkwijze { background: var(--nacht-2); }
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: stap; }
.stappen li { padding-top: 20px; border-top: 1px solid var(--lijn-d); }
.stap-nr { display: block; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--amber); }
.stappen h3 { margin: 18px 0 10px; font-size: 27px; }
.stappen p { color: var(--grijs); font-size: 16.5px; }
@media (max-width: 959px) { .stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .stappen { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* ----- Pakketten ----- */
.pakketten { background: var(--papier); color: var(--inkt); color-scheme: light; }
.pakketten .label { color: var(--amber-donker); }
.pakketten h2 em { color: var(--amber-donker); }
.pakketten .sectie-sub { color: var(--grijs-donker); }
.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 30px; border: 1px solid var(--lijn-l); border-radius: 999px; background: var(--papier-2); }
.tabs button {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--grijs-donker);
  font: 500 16px/1 var(--serif); transition: background-color .25s, color .25s;
}
.tabs button[aria-selected="true"] { background: var(--inkt); color: var(--papier); }
.tabs button:focus-visible { outline: 2px solid var(--amber-donker); outline-offset: 2px; }
.groep + .groep { margin-top: 48px; }
@media (max-width: 599px) {
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tabs[hidden] { display: none; }
  .tabs button { padding: 0 8px; font-size: 15px; }
  .tab-extra { display: none; }
}
.groep-titel { margin-bottom: 18px; font-size: 30px; }
.js .tabs:not([hidden]) ~ .groep { margin-top: 0; }
.js .tabs:not([hidden]) ~ .groep .groep-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.groep.is-wissel .pakket { animation: op .5s var(--zacht) both; }
.groep.is-wissel .pakket:nth-child(2) { animation-delay: .06s; }
.groep.is-wissel .pakket:nth-child(3) { animation-delay: .12s; }

.pakket-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pakket { position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; background: #fbf8f3; border: 1px solid var(--lijn-l); }
.pakket-uren { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs-donker); }
.pakket h4 { margin-top: 12px; font-size: 32px; }
.pakket-prijs { margin-top: 10px; font: 300 44px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.pakket-prijs small { font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--grijs-donker); }
.pakket-punten { margin: 22px 0 26px; padding-top: 18px; border-top: 1px solid var(--lijn-l); flex: 1; }
.pakket-punten li { position: relative; padding: 5px 0 5px 22px; font-size: 16px; line-height: 1.45; }
.pakket-punten li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--amber-donker); }
.pakket .knop { width: 100%; }
.pakket .knop-lijn { color: var(--inkt); border-color: rgba(26, 23, 20, .4); }
.pakket .knop-lijn:hover { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.pakket-uit { background: var(--inkt); color: var(--licht); border-color: var(--inkt); }
.pakket-uit .pakket-uren, .pakket-uit .pakket-prijs small { color: var(--grijs); }
.pakket-uit .pakket-punten { border-top-color: var(--lijn-d); }
.pakket-uit .pakket-punten li::before { border-color: var(--amber); }
.pakket-vlag { position: absolute; right: 0; top: 0; padding: 7px 12px; background: var(--amber); color: var(--inkt); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 899px) {
  .pakket-lijst { grid-template-columns: minmax(0, 1fr); }
  .pakket { padding: 26px 22px 22px; }
}

/* ----- Beschikbaarheid en aanvraag ----- */
.agenda-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.geen-js { max-width: 30rem; padding: 18px 20px; border: 1px solid var(--lijn-d); color: #cfc6b8; }
.js .geen-js { display: none; }

.kalender { padding: 22px; background: var(--nacht-2); border: 1px solid var(--lijn-d); }
.kal-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kal-maand { font: 300 28px/1 var(--serif); text-transform: lowercase; }
.kal-pijl { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--lijn-d); border-radius: 50%; background: transparent; }
.kal-pijl:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.kal-pijl:disabled { opacity: .3; cursor: default; }
.kal-pijl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kal-dagen, .kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-dagen span { padding: 4px 0 8px; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); }
.kal-raster.is-nieuw { animation: op .45s var(--zacht); }
.dag {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; padding: 0; border: 1px solid transparent;
  background: transparent; font: 400 15px/1 var(--mono); color: var(--licht); transition: background-color .2s, border-color .2s, color .2s;
}
.dag::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.dag-leeg { pointer-events: none; }
.dag[data-st="vrij"] { background: rgba(233, 166, 73, .1); }
.dag[data-st="vrij"]::after { background: var(--amber); }
.dag[data-st="optie"] { background: repeating-linear-gradient(135deg, rgba(239, 232, 220, .07) 0 4px, transparent 4px 8px); }
.dag[data-st="optie"]::after { border: 1px solid var(--amber); }
.dag[data-st="bezet"] { color: #6f685f; text-decoration: line-through; text-decoration-color: rgba(239, 232, 220, .35); }
.dag[data-st="dicht"], .dag[data-st="voorbij"] { color: #4f4a44; }
.dag:hover:not(:disabled) { border-color: rgba(239, 232, 220, .5); }
.dag:disabled { cursor: default; }
.dag.is-vandaag { border-color: var(--lijn-d); }
.dag[aria-pressed="true"] { background: var(--amber); color: var(--inkt); border-color: var(--amber); text-decoration: none; }
.dag[aria-pressed="true"]::after { background: var(--inkt); border-color: var(--inkt); }
.kal-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lijn-d); font-size: 12px; color: var(--grijs); }
.kal-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.st { display: inline-block; width: 14px; height: 14px; }
.st-vrij { background: rgba(233, 166, 73, .35); border: 1px solid var(--amber); }
.st-optie { border: 1px solid var(--amber); background: repeating-linear-gradient(135deg, rgba(239, 232, 220, .3) 0 2px, transparent 2px 4px); }
.st-bezet { border: 1px solid #6f685f; }
.st-dicht { background: var(--nacht-3); }

.kal-keuze { margin-top: 18px; padding: 18px 18px 20px; background: var(--nacht); border-left: 2px solid var(--amber); min-height: 96px; }
.kal-keuze-leeg { color: var(--grijs); font-size: 16px; }
.keuze-datum { font: 300 26px/1.15 var(--serif); }
.keuze-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.keuze-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.keuze-status.is-bezet i { background: #6f685f; }
.keuze-status.is-optie i { background: transparent; border: 1px solid var(--amber); }
.keuze-licht { display: flex; gap: 10px; margin-top: 12px; font-size: 15.5px; color: #cfc6b8; }
.keuze-licht svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-linecap: round; }
.keuze-licht b { color: var(--amber-zacht); font-weight: 500; }
.keuze-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.keuze-knoppen .knop { min-height: 44px; font-size: 15px; }
.keuze-alt { margin-top: 12px; font-size: 15px; color: #cfc6b8; }
.keuze-alt-lijst { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.keuze-alt-lijst button { min-height: 40px; padding: 0 14px; border: 1px solid var(--lijn-d); border-radius: 999px; background: transparent; font: 400 13px/1 var(--mono); }
.keuze-alt-lijst button:hover { border-color: var(--amber); color: var(--amber); }
.keuze-pakket { margin-top: 10px; font: 400 12px/1.4 var(--mono); color: var(--grijs); letter-spacing: .03em; }

/* Aanvraagformulier op papier */
.aanvraag { padding: clamp(24px, 3vw, 38px); background: var(--papier); color: var(--inkt); color-scheme: light; }
.aanvraag-titel { font-size: 34px; }
.aanvraag-sub { margin: 6px 0 22px; color: var(--grijs-donker); font-size: 16px; }
.veld { display: grid; gap: 6px; margin-bottom: 16px; }
.veld label, .extras legend { font: 400 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs-donker); }
.veld .opt { text-transform: none; letter-spacing: .02em; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(26, 23, 20, .28); border-radius: 2px; background: #fbf8f3;
  font: 400 17px/1.3 var(--serif); color: var(--inkt); transition: border-color .2s;
}
.veld textarea { resize: vertical; min-height: 92px; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--inkt); box-shadow: inset 0 0 0 1px var(--inkt); }
.veld-rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.veld.is-gevuld input, .veld.is-gevuld select { border-color: var(--amber-donker); background: #fff7ea; }
.extras { margin: 2px 0 18px; }
.extras legend { margin-bottom: 8px; }
.vink { display: block; margin-top: 6px; cursor: pointer; }
.vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vink span { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 14px; border: 1px solid rgba(26, 23, 20, .2); background: #fbf8f3; font-size: 16px; }
.vink span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(26, 23, 20, .5); background: #fff center / 12px no-repeat; }
.vink b { margin-left: auto; font: 400 13px/1 var(--mono); color: var(--grijs-donker); }
.vink input:checked + span { border-color: var(--inkt); }
.vink input:checked + span::before { background-color: var(--inkt); border-color: var(--inkt); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2ede4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.vink input:focus-visible + span { outline: 2px solid var(--inkt); outline-offset: 2px; }
.totaal { margin: 4px 0 18px; padding: 16px 0 0; border-top: 1px dashed rgba(26, 23, 20, .3); }
.totaal-regels { font: 400 12.5px/1.6 var(--mono); color: var(--grijs-donker); }
.totaal-som { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; }
.totaal-som span { font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grijs-donker); }
.totaal-som b { font: 300 40px/1 var(--serif); letter-spacing: -.02em; color: var(--inkt); }
.totaal-som b.is-hup { animation: hup .45s var(--zacht); }
@keyframes hup { from { opacity: .3; transform: translate3d(0, 8px, 0); } }
.aanvraag .knop { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.aanvraag .knop:hover { background: var(--amber-donker); border-color: var(--amber-donker); }
.aanvraag-noot { margin-top: 14px; font-size: 15px; color: var(--grijs-donker); }
.aanvraag-noot a { font-family: var(--mono); font-size: 14px; }
@media (max-width: 959px) { .agenda-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
  .kalender { padding: 16px 12px; margin: 0 calc(var(--rand) * -.5); }
  .kal-dagen, .kal-raster { gap: 3px; }
  .dag { font-size: 14px; min-height: 0; }
  .veld-rij { grid-template-columns: minmax(0, 1fr); }
  .aanvraag { padding: 24px 18px; }
}

/* ----- Over mij ----- */
.over { background: var(--papier); color: var(--inkt); color-scheme: light; }
.over .label { color: var(--amber-donker); }
.over h2 em { color: var(--amber-donker); }
.over-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.over-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.over-beeld figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs-donker); }
.over-tekst > p:not(.label) { margin-top: 18px; max-width: 36rem; font-size: 18.5px; color: #3d3730; }
.over-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--lijn-l); }
.over-feiten dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-donker); }
.over-feiten dd { margin: 6px 0 0; font-size: 16px; line-height: 1.4; }
@media (max-width: 859px) {
  .over-in { grid-template-columns: minmax(0, 1fr); }
  .over-beeld { max-width: 440px; }
  .over-feiten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .over-feiten div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .over-feiten dd { margin: 0; }
}

/* ----- Reviews ----- */
.reviews { background: var(--nacht-2); }
.reviews-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(30px, 4vw, 52px); }
.score { font: 400 13px/1.4 var(--mono); color: var(--grijs); letter-spacing: .04em; }
.score b { font: 300 34px/1 var(--serif); color: var(--amber); margin-right: 6px; vertical-align: -4px; }
.score span { padding: 3px 8px; border: 1px solid var(--lijn-d); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.review-lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.review { padding-top: 22px; border-top: 1px solid var(--lijn-d); }
.review blockquote p { font: italic 300 23px/1.4 var(--serif); letter-spacing: -.005em; }
.review blockquote p::before { content: "\201C"; display: block; height: 30px; font: italic 400 64px/1 var(--serif); color: var(--amber); }
.review-wie { margin-top: 18px; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grijs); }
@media (max-width: 859px) { .review-lijst { grid-template-columns: minmax(0, 1fr); } .review blockquote p { font-size: 21px; } }

/* ----- Vragen ----- */
.vragen { background: var(--papier); color: var(--inkt); color-scheme: light; }
.vragen .label { color: var(--amber-donker); }
.vragen h2 em { color: var(--amber-donker); }
.vragen-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.vraag-lijst { border-top: 1px solid var(--lijn-l); }
.vraag-lijst details { border-bottom: 1px solid var(--lijn-l); }
.vraag-lijst summary {
  position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font: 400 21px/1.3 var(--serif);
}
.vraag-lijst summary::-webkit-details-marker { display: none; }
.vraag-lijst summary::before, .vraag-lijst summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1.5px; background: var(--inkt); transition: transform .35s var(--zacht); }
.vraag-lijst summary::after { transform: rotate(90deg); }
.vraag-lijst details[open] summary::after { transform: rotate(0deg); }
.vraag-lijst details p { padding: 0 0 22px; max-width: 40rem; color: #3d3730; font-size: 17px; }
@media (max-width: 859px) { .vragen-in { grid-template-columns: minmax(0, 1fr); } .vragen .sectie-kop { margin-bottom: 0; } }

/* ----- Voet ----- */
.voet { padding: clamp(56px, 7vw, 88px) 0 calc(var(--nb-balk-h, 56px) + 26px); background: var(--nacht); border-top: 1px solid var(--lijn-d); }
.voet-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.logo-voet { margin: 0 0 14px; }
.voet-tekst { max-width: 22rem; color: var(--grijs); font-size: 16px; }
.voet .voet-kop { margin-bottom: 10px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.voet p { font-size: 16px; }
.voet a { text-decoration-color: rgba(239, 232, 220, .35); text-underline-offset: 3px; }
.voet a:hover { color: var(--amber-zacht); }
.voet-klein { margin-top: 6px; color: var(--grijs); font-size: 14.5px !important; }
.voet-sociaal { margin-top: 10px; color: var(--grijs); }
.voet-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--lijn-d); }
.voet-onder p { font: 400 12px/1.6 var(--mono) !important; color: var(--grijs); letter-spacing: .02em; }
@media (max-width: 959px) { .voet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 559px) { .voet-in { grid-template-columns: minmax(0, 1fr); } }

/* ----- Zwevende knop (mobiel) ----- */
.zwevend {
  position: fixed; left: 50%; bottom: calc(var(--nb-balk-h, 0px) + 14px); z-index: 60;
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 26px; border-radius: 2px;
  background: var(--amber); color: var(--inkt); font: 600 16px/1 var(--serif); text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(18, 17, 16, .5);
  transform: translate3d(-50%, 150%, 0); opacity: 0; pointer-events: none;
  transition: transform .45s var(--zacht), opacity .3s;
}
.zwevend.is-zichtbaar { transform: translate3d(-50%, 0, 0); opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .zwevend { display: none; } }
html:not(.js) .zwevend { display: none; }

@media (max-width: 759px) {
  .intro-in { grid-template-columns: minmax(0, 1fr); }
  h2 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
}