/* ============================================================
   Atelier Bergen — verhuur in Bergen (NH)
   Voormalig schildersatelier van Gerrit van Blaaderen
   Stijlrichting: ingetogen luxe (naar Rosewood Residences)
   Warm ivoor · inkt · bosgroen accent · editoriale serif
   ============================================================ */

:root {
  --ivoor: #f6f2ea;
  --papier: #efe9dd;
  --wit: #fdfbf7;
  --inkt: #211f1b;
  --grijs: #6b665c;
  --zacht: #8f897c;
  --hairline: #ddd6c8;
  --groen: #3c5142;      /* bosgroen accent */
  --groen-licht: #a9b8a5;
  --zand: #c9b79a;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-serif: "EB Garamond", Georgia, serif;
  --font-sans: "Jost", system-ui, -apple-system, sans-serif;

  --marge: clamp(20px, 5.5vw, 96px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.62;
  color: var(--inkt);
  background: var(--ivoor);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Herbruikbare bouwstenen ---------- */

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--groen);
}

.eyebrow--licht { color: var(--groen-licht); }

.streep {
  width: 34px;
  height: 1px;
  background: var(--groen);
  margin: 22px 0;
}

.streep--midden { margin-inline: auto; }
.streep--licht { background: var(--groen-licht); }

/* Fotokader: zachte achtergrond zolang de foto laadt; de img vult het kader */
.beeld {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(0,0,0,0.12)),
    var(--tint, linear-gradient(160deg, #8a9a86 0%, #5f7060 45%, #3f4f44 100%));
}
.beeld[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  background: rgba(20,24,20,0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  padding: 5px 11px;
}
.beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tint-bos    { --tint: linear-gradient(160deg, #7f9079 0%, #55684f 55%, #38402f 100%); }
.tint-riet   { --tint: linear-gradient(160deg, #cbb184 0%, #a98f5f 55%, #7c6640 100%); }
.tint-binnen { --tint: linear-gradient(160deg, #e6ddcb 0%, #cdbfa4 55%, #a99a7c 100%); }
.tint-tuin   { --tint: linear-gradient(160deg, #96a97f 0%, #6f8757 55%, #47583a 100%); }
.tint-terras { --tint: linear-gradient(160deg, #d8cdb6 0%, #b3a488 55%, #8a7a5c 100%); }
.tint-vide   { --tint: linear-gradient(160deg, #c7ac82 0%, #9b7f57 55%, #6d573a 100%); }

/* ---------- Kop ---------- */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--marge);
  color: var(--wit);
  transition: background-color 500ms var(--ease), color 500ms var(--ease),
              padding 500ms var(--ease), box-shadow 500ms var(--ease);
}

.kop.is-vast {
  background: rgba(246, 242, 234, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  color: var(--inkt);
  padding: 14px var(--marge);
  box-shadow: 0 1px 0 var(--hairline);
}

.kop__merk {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.kop__merk span { font-weight: 300; opacity: 0.75; }

.kop__nav {
  display: flex;
  gap: 34px;
  list-style: none;
}
.kop__nav a {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: opacity 250ms var(--ease), border-color 250ms var(--ease);
}
.kop__nav a:hover { opacity: 1; border-bottom-color: currentColor; }

.kop__rechts {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kop__sociaal {
  display: inline-flex;
  align-items: center;
  color: currentColor;
  opacity: 0.85;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.kop__sociaal:hover { opacity: 1; transform: translateY(-1px); }
.ig-icoon { display: block; }

.kop__cta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 22px;
  border: 1px solid currentColor;
  transition: background-color 250ms var(--ease), color 250ms var(--ease);
}
.kop.is-vast .kop__cta:hover { background: var(--inkt); color: var(--ivoor); }
.kop:not(.is-vast) .kop__cta:hover { background: var(--wit); color: var(--inkt); }

.kop__burger { display: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: clamp(620px, 88svh, 900px);
  display: grid;
  align-items: end;
  /* bovenmarge houdt de tekst vrij van de vaste menubalk */
  padding: clamp(104px, 13vh, 148px) var(--marge) clamp(44px, 6vw, 84px);
  color: var(--wit);
  overflow: hidden;
}
.hero__beeld {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20,26,20,0.42) 0%, rgba(20,26,20,0.18) 40%, rgba(20,26,20,0.62) 100%),
    linear-gradient(150deg, #7c8d76 0%, #4d6050 48%, #2c3628 100%);
}
.hero__beeld > img,
.hero__beeld > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,26,20,0.42) 0%, rgba(20,26,20,0.14) 40%, rgba(20,26,20,0.6) 100%);
}

.hero__inhoud { position: relative; max-width: 900px; }
.hero__titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(46px, 8.4vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.01em;
}
.hero__titel em {
  display: block;
  font-style: italic;
  font-weight: 300;
  font-size: 0.42em;
  letter-spacing: 0.01em;
  margin-top: 0.35em;
  color: #eef0e8;
}
.hero__sub {
  margin-top: 28px;
  max-width: 46ch;
  font-size: clamp(19px, 2.1vw, 23px);
  color: #ece9df;
  text-shadow: 0 1px 20px rgba(0,0,0,0.35);
}
.hero__acties {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.hero__waardering {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e7e4da;
}
.hero__waardering b { color: var(--wit); font-weight: 500; }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 38px;
  cursor: pointer;
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.knop--vol {
  background: var(--wit);
  color: var(--inkt);
  border: 1px solid var(--wit);
}
.knop--vol:hover { background: transparent; color: var(--wit); }
.knop--donker {
  background: var(--groen);
  color: var(--ivoor);
  border: 1px solid var(--groen);
}
.knop--donker:hover { background: transparent; color: var(--groen); }
.knop--lijn {
  background: transparent;
  color: var(--inkt);
  border: 1px solid var(--inkt);
}
.knop--lijn:hover { background: var(--inkt); color: var(--ivoor); }

/* ---------- Sectie-basis ---------- */

.sectie { padding: clamp(40px, 5vw, 72px) var(--marge); }
.sectie--papier { background: var(--papier); }
.sectie--donker { background: #20261f; color: #ece9df; }

.sectiekop { max-width: 720px; }
.sectiekop--midden { margin-inline: auto; text-align: center; }
.sectie-titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.sectie-titel em { font-style: italic; color: var(--groen); }
.sectie--donker .sectie-titel em { color: var(--groen-licht); }

.lead {
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.5;
  color: var(--grijs);
  max-width: 60ch;
}
.sectie--donker .lead { color: #cfccc0; }

/* ---------- Intro / verhaal ---------- */

.intro { text-align: center; }
.intro .sectiekop { margin-inline: auto; }
.intro__tekst {
  margin: 28px auto 0;
  max-width: 62ch;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.58;
  color: var(--grijs);
}
.intro__tekst em { color: var(--inkt); font-style: italic; }
.intro__signatuur {
  margin-top: 40px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--groen);
}

/* ---------- Modulaire beeld+tekst blokken ---------- */

.blok {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  max-width: 1320px;
  margin-inline: auto;
}
.blok + .blok { margin-top: clamp(48px, 7vw, 96px); }
.blok--omgekeerd .blok__media { order: 2; }

.blok__media {
  position: relative;
  aspect-ratio: 4 / 3;
}
.blok--breed .blok__media { aspect-ratio: 5 / 4; }
.blok__media .beeld { position: absolute; inset: 0; }

.blok__tekst { max-width: 480px }
.blok--omgekeerd .blok__tekst { justify-self: end; }
.blok__titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.06;
  margin-bottom: 4px;
}
.blok__tekst p {
  color: var(--grijs);
  margin-top: 18px;
}

/* ---------- Feiten-strip ---------- */

.feiten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  max-width: 1320px;
  margin: clamp(48px, 7vw, 88px) auto 0;
}
.feiten > div {
  padding: 40px 24px;
  text-align: center;
}
.feiten > div + div { border-left: 1px solid var(--hairline); }
.feiten dt {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zacht);
  margin-bottom: 12px;
}
.feiten dd {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1;
  font-weight: 500;
}
.feiten dd span { font-size: 0.5em; color: var(--grijs); }

/* ---------- Galerij ---------- */

.galerij .sectiekop { margin-bottom: clamp(48px, 7vw, 88px); }

.galerij__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(180px, 24vw, 340px);
  gap: clamp(14px, 2vw, 28px);
  max-width: 1320px;
  margin-inline: auto;
}
.galerij__item {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.galerij__item--hoog { grid-row: span 2; }
.galerij__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--ease);
}
.galerij__item:hover img { transform: scale(1.035); }

.galerij__item--logo { background: #f4f1e7; }
.galerij__item--logo img { object-fit: contain; padding: clamp(10px, 1.4vw, 20px); }
.galerij__item--logo:hover img { transform: none; }


/* ---------- Voorzieningen ---------- */

.voorz__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.voorz__cel {
  background: var(--ivoor);
  padding: 30px 28px;
}
.voorz__cel h3 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--groen);
  margin-bottom: 14px;
}
.voorz__cel ul { list-style: none; }
.voorz__cel li {
  font-size: 18px;
  color: var(--grijs);
  padding: 5px 0;
}
.voorz__cel li::before {
  content: "—";
  color: var(--zand);
  margin-right: 12px;
}

/* ---------- Omgeving ---------- */

.omgeving__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
  margin-top: 60px;
}
.omgeving__kaart {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 26px;
}
.omgeving__kaart .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--groen-licht);
}
.omgeving__kaart h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  margin: 10px 0 12px;
}
.omgeving__kaart p { color: #c4c1b6; font-size: 18px; }
.omgeving__afstand {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--groen-licht);
}

/* ---------- Recensies ---------- */

.recensies { text-align: center; }
.recensies__cijfer {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 120px);
  line-height: 1;
  font-weight: 500;
}
.recensies__cijfer span { font-size: 0.28em; color: var(--zand); vertical-align: super; }
.recensies__meta {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zacht);
  margin-top: 10px;
}
.recensies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-top: 64px;
  text-align: left;
}
.citaat {
  background: var(--wit);
  border: 1px solid var(--hairline);
  padding: 36px 32px;
}
.citaat p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.42;
}
.citaat footer {
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zacht);
}

/* ---------- Praktisch ---------- */

.praktisch__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
}
.praktisch__lijst { list-style: none; }
.praktisch__lijst li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
}
.praktisch__lijst dt,
.praktisch__lijst .k {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--groen);
}
.praktisch__lijst .v { color: var(--grijs); }
.notitie {
  background: var(--papier);
  border: 1px solid var(--hairline);
  padding: 32px;
}
.notitie h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin-bottom: 14px;
}
.notitie ul { list-style: none; margin-top: 10px; }
.notitie li { color: var(--grijs); padding: 6px 0; }
.notitie li b { color: var(--inkt); font-weight: 500; }

/* ---------- Reserveren ---------- */

.reserveren {
  position: relative;
  text-align: center;
  color: var(--wit);
  overflow: hidden;
}
.reserveren__beeld {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #6f8069 0%, #45564a 50%, #232b20 100%);
}
.reserveren__beeld > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reserveren__beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,24,18,0.55), rgba(18,24,18,0.72));
}
.reserveren__inhoud { position: relative; max-width: 1120px; margin-inline: auto; }
.reserveren__titel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 1;
  margin-bottom: 22px;
}
.reserveren__tekst {
  font-size: clamp(19px, 2.2vw, 23px);
  color: #e9e6dc;
  max-width: 58ch;
  margin: 0 auto 40px;
}
.reserveren__widget {
  width: min(100%, 1040px);
  min-height: 260px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  background: var(--wit);
  color: var(--inkt);
  text-align: left;
}
.reserveren__widget iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}
.reserveren__alternatief {
  margin-top: 24px;
  color: #e9e6dc;
  font-size: 16px;
}
.reserveren__alternatief a {
  color: var(--wit);
  text-underline-offset: 4px;
}

/* ---------- Voet ---------- */

.voet {
  background: #191d18;
  color: #a7a89c;
  padding: 72px var(--marge) 40px;
}
.voet__boven {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.voet__merk {
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--wit);
}
.voet__merk span { display: block; font-family: var(--font-display); font-size: 22px; letter-spacing: 0; text-transform: none; font-style: italic; color: var(--groen-licht); margin-top: 8px; }
.voet__kol h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zacht);
  margin-bottom: 14px;
}
.voet__kol p, .voet__kol a { font-size: 17px; color: #c2c3b8; text-decoration: none; display: block; padding: 3px 0; }
.voet__kol a:hover { color: var(--wit); }
.voet__onder {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--zacht);
}

/* ---------- Reveal-animaties ---------- */

.heeft-js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.heeft-js .reveal.zichtbaar { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; }
.hero :focus-visible, .reserveren :focus-visible, .sectie--donker :focus-visible { outline-color: var(--groen-licht); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .heeft-js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 1ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .voorz__grid { grid-template-columns: repeat(2, 1fr); }
  .omgeving__grid { grid-template-columns: 1fr; }
  .recensies__grid { grid-template-columns: 1fr; }
  .praktisch__grid { grid-template-columns: 1fr; }
  .feiten { grid-template-columns: repeat(2, 1fr); }
  .feiten > div:nth-child(3) { border-left: none; }
  .feiten > div:nth-child(odd) { border-left: none; }
  .feiten > div:nth-child(even) { border-left: 1px solid var(--hairline); }
  .feiten > div:nth-child(3), .feiten > div:nth-child(4) { border-top: 1px solid var(--hairline); }
}

@media (max-width: 760px) {
  .kop__nav { display: none; }
  .kop__burger {
    display: inline-flex;
    background: none;
    border: none;
    color: currentColor;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .kop__cta { display: none; }
  .blok { grid-template-columns: 1fr; gap: 32px; }
  .blok--omgekeerd .blok__media { order: 0; }
  .blok__tekst, .blok--omgekeerd .blok__tekst { max-width: none; justify-self: stretch; }
  .voorz__grid { grid-template-columns: 1fr; }
  .praktisch__lijst li { grid-template-columns: 1fr; gap: 4px; }
  .galerij__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 32vw, 260px); }
}

.kop__talen{display:flex;align-items:center;gap:3px;margin-left:2px}.kop__taal{display:grid;place-items:center;width:31px;height:31px;border:1px solid transparent;border-radius:50%;font-family:var(--font-sans);font-size:16px;line-height:1;text-decoration:none;color:currentColor;filter:saturate(.82);transition:background .2s ease,border-color .2s ease,transform .2s ease}.kop__taal:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}.kop.is-vast .kop__taal:hover{background:rgba(60,81,66,.08)}.kop__taal[aria-current="page"]{border-color:currentColor}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.kernfeiten{display:flex;justify-content:center;padding:19px var(--marge);background:var(--papier);border-bottom:1px solid var(--hairline);color:var(--groen);font-family:var(--font-sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.kernfeiten span{padding:0 24px;white-space:nowrap}.kernfeiten span+span{border-left:1px solid var(--hairline)}
.galerij__item{display:block;width:100%;margin:0;padding:0;border:0;background:transparent;cursor:zoom-in}.galerij__item:nth-child(n+8){display:none}.galerij__item:focus-visible{outline:3px solid var(--groen);outline-offset:4px}
.galerij__actie{display:flex;justify-content:center;margin-top:38px}.knop--inkt{border:1px solid var(--inkt);background:var(--inkt);color:var(--wit)}.knop--inkt:hover{background:transparent;color:var(--inkt)}
.lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:clamp(18px,3vw,42px);border:0;background:#11140f;color:var(--wit)}.lightbox::backdrop{background:rgba(7,9,7,.94)}.lightbox[open]{display:grid;grid-template-columns:minmax(52px,1fr) minmax(0,1120px) minmax(52px,1fr);align-items:center}.lightbox__beeld{grid-column:2;margin:0;display:grid;gap:14px;justify-items:center}.lightbox__beeld img{max-width:100%;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}.lightbox__beeld figcaption{width:100%;display:flex;justify-content:space-between;gap:24px;color:#d8d6cd;font-family:var(--font-sans);font-size:12px}.lightbox__sluit,.lightbox__vorige,.lightbox__volgende{border:1px solid rgba(255,255,255,.35);background:#11140f;color:var(--wit);font:500 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:48px}.lightbox__sluit{position:fixed;top:20px;right:20px;padding:0 18px}.lightbox__vorige{grid-column:1;grid-row:1;padding:0 14px}.lightbox__volgende{grid-column:3;grid-row:1;padding:0 14px}
.omgeving__intro{margin-top:24px}.ligging{margin:clamp(48px,7vw,82px) 0;padding:clamp(24px,4vw,46px);border-block:1px solid rgba(255,255,255,.18)}.ligging svg{display:block;width:100%;height:auto}.ligging__route{fill:none;stroke:rgba(244,241,231,.45);stroke-width:2;stroke-dasharray:6 9}.ligging__punt{fill:#c6b987;stroke:#29342c;stroke-width:4}.ligging__punt--atelier{fill:#f4f1e7}.ligging text{fill:#f4f1e7;font-family:var(--font-display);font-size:24px}.ligging text.ligging__klein{fill:#bfc4bc;font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.ligging figcaption{margin-top:14px;color:#aeb5ac;font:400 11px var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.faq__lijst{max-width:880px;margin:clamp(48px,7vw,82px) auto 0;border-top:1px solid var(--hairline)}.faq details{border-bottom:1px solid var(--hairline)}.faq summary{position:relative;padding:24px 52px 24px 0;list-style:none;cursor:pointer;font:500 clamp(22px,3vw,30px)/1.2 var(--font-display)}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";position:absolute;top:22px;right:4px;font:300 24px var(--font-sans)}.faq details[open] summary::after{content:"–"}.faq details p{max-width:70ch;padding:0 52px 26px 0;color:var(--grijs)}
.reserveren__betaling{max-width:680px;margin:22px auto 0;padding:14px 18px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);color:#e9e6dc;font-size:15px;line-height:1.6}
.reserveren__kanalen{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;margin-top:24px;color:#e9e6dc;font-size:15px}.reserveren__kanalen>span{flex-basis:100%;margin-bottom:2px}.reserveren__kanalen .boekingskanaal{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:var(--wit);text-decoration:none;background:rgba(255,255,255,.055);transition:background .2s ease,border-color .2s ease,transform .2s ease}.reserveren__kanalen .boekingskanaal:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42);transform:translateY(-1px)}.boekingskanaal img{display:block;width:22px;height:22px}.voet__kol .voet__boekingslink{display:flex;align-items:center;gap:8px}.voet__boekingslink img{width:16px;height:16px;flex:0 0 16px}.mobiel-boeken{display:none}::selection{background:#c6b987;color:#191d18}
@media(max-width:1000px){.kernfeiten{flex-wrap:wrap;row-gap:13px}.kernfeiten span{padding:0 15px}}
@media(max-width:760px){body{padding-bottom:68px}.kop__talen{margin-left:auto}.kop__taal{width:29px;height:29px;font-size:15px}.kernfeiten{justify-content:flex-start;gap:9px 0;padding-block:16px}.kernfeiten span{width:50%;padding:0 12px;white-space:normal;text-align:center}.kernfeiten span+span{border-left:0}.kernfeiten span:nth-child(even){border-left:1px solid var(--hairline)}.galerij__item:nth-child(n+5){display:none}.lightbox[open]{grid-template-columns:1fr 1fr;grid-template-rows:1fr 54px;gap:12px;padding:70px 16px 16px}.lightbox__beeld{grid-column:1/-1;grid-row:1}.lightbox__beeld img{max-height:calc(100dvh - 175px)}.lightbox__vorige{grid-column:1;grid-row:2}.lightbox__volgende{grid-column:2;grid-row:2}.ligging{margin-inline:calc(var(--marge)*-1);padding-inline:var(--marge);overflow-x:auto}.ligging svg{min-width:680px}.faq details p{padding-right:0}.mobiel-boeken{position:fixed;z-index:50;left:12px;right:12px;bottom:10px;display:flex;min-height:48px;align-items:center;justify-content:center;background:var(--groen);color:var(--wit);border:1px solid rgba(255,255,255,.25);font:500 11px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 30px rgba(20,28,22,.22)}}