/* De Gaanderij, Leiden. Palet uit hun eigen beeld: olijfgroen houtwerk,
   sage van hun aanschuif-flyer, creme muren, warm hout. */
:root{
  --groen:#3A4A35;
  --groen-donker:#2C3A28;
  --sage:#8FA68C;
  --sage-licht:#D8E0D4;
  --creme:#F4EFE4;
  --creme-donker:#EAE2D0;
  --inkt:#20241E;
  --amber:#A77F3F;
  --wit:#FFFFFF;
  --kop:"DM Serif Display",Georgia,serif;
  --body:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@font-face{font-family:"DM Serif Display";src:url(../fonts/dmserifdisplay.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(../fonts/dmserifdisplay-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/familjengrotesk.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(../fonts/familjengrotesk-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--inkt);background:var(--creme)}
img{display:block;max-width:100%;height:auto}
a{color:var(--groen)}
h1,h2,h3{font-family:var(--kop);font-weight:400;line-height:1.12;margin:0 0 .4em;color:var(--inkt)}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
.kader{width:min(1120px,100% - 48px);margin-inline:auto}
.kader--smal{width:min(760px,100% - 48px);margin-inline:auto}

/* ── Topbalk + navigatie ── */
.topbalk{background:var(--groen-donker);color:var(--sage-licht);font-size:.88rem}
.topbalk .kader{display:flex;justify-content:space-between;gap:16px;padding:7px 0;flex-wrap:wrap}
.topbalk a{color:var(--sage-licht);text-decoration:none}
.topbalk a:hover{color:var(--wit)}
.sitekop{position:sticky;top:0;z-index:50;background:var(--creme);border-bottom:1px solid rgba(32,36,30,.12)}
.sitekop .kader{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.sitekop__logo img{width:206px;height:54px;object-fit:contain}
.hoofdnav{display:flex;align-items:center;gap:26px}
.hoofdnav a{text-decoration:none;color:var(--inkt);font-weight:500;font-size:1rem;letter-spacing:.01em}
.hoofdnav a:hover,.hoofdnav a[aria-current="page"]{color:var(--groen);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.knop{display:inline-block;background:var(--groen);color:var(--wit);text-decoration:none;font-weight:600;
  padding:13px 26px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;line-height:1.2;
  transition:background .18s ease,transform .18s ease}
.knop:hover{background:var(--groen-donker);transform:translateY(-1px)}
.knop--licht{background:var(--creme);color:var(--inkt)}
.knop--licht:hover{background:var(--wit);color:var(--inkt)}
.knop--rand{background:transparent;color:var(--wit);border:1.5px solid rgba(255,255,255,.75)}
.knop--rand:hover{background:rgba(255,255,255,.12)}
.navknop{display:none}
@media (max-width:860px){
  .hoofdnav{position:fixed;inset:0;top:0;background:var(--groen-donker);flex-direction:column;justify-content:center;
    gap:30px;transform:translateX(100%);transition:transform .3s ease;z-index:60}
  .hoofdnav.open{transform:translateX(0)}
  .hoofdnav a{color:var(--creme);font-size:1.5rem;font-family:var(--kop)}
  .hoofdnav .knop{display:none}
  .navknop{display:block;z-index:70;background:none;border:0;cursor:pointer;padding:8px;font-size:1.7rem;line-height:1;color:var(--inkt)}
  .hoofdnav.open ~ .navknop,.navknop.open{color:var(--creme);position:relative}
}

/* ── Hero ── */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:var(--wit);isolation:isolate}
.hero__beeld{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__beeld img{width:100%;height:100%;object-fit:cover}
.hero__beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(32,36,30,.25) 0%,rgba(32,36,30,.2) 40%,rgba(44,58,40,.82) 100%)}
.hero__inhoud{padding:0 0 64px}
.hero h1{color:var(--wit);max-width:13ch}
.hero__sub{font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-licht);margin:0 0 .6em;font-weight:600}
.hero__tekst{max-width:52ch;font-size:1.12rem;color:rgba(255,255,255,.92)}
.hero__acties{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero__pillen{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pil{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(4px);border-radius:999px;padding:8px 16px;font-size:.92rem;font-weight:500;color:var(--wit)}
.pil--open .bol{width:9px;height:9px;border-radius:50%;background:#7FC97F;flex:none}
.pil--dicht .bol{width:9px;height:9px;border-radius:50%;background:#E2A14E;flex:none}
.pil__ster{color:#F5C86E}

/* Kleinere pagina-hero */
.paginakop{background:var(--groen-donker);color:var(--wit);padding:72px 0 56px;text-align:center}
.paginakop h1{color:var(--wit)}
.paginakop p{color:var(--sage-licht);max-width:60ch;margin-inline:auto;font-size:1.08rem}

/* ── Secties ── */
.sectie{padding:84px 0}
.sectie--creme2{background:var(--creme-donker)}
.sectie--groen{background:var(--groen);color:var(--creme)}
.sectie--groen h2,.sectie--groen h3{color:var(--wit)}
.sectie--wit{background:var(--wit)}
.introregel{text-align:center;padding:86px 0}
.introregel p{font-family:var(--kop);font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.35;max-width:26ch;margin:0 auto}
.overlijn{display:block;font-family:var(--body);font-size:.85rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.sectie--groen .overlijn{color:var(--sage)}

.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tweeluik__foto img{border-radius:14px;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.tweeluik{grid-template-columns:1fr;gap:30px}}

.drieluik{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:860px){.drieluik{grid-template-columns:1fr}}
.kaart{background:var(--wit);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 14px rgba(32,36,30,.07);text-decoration:none;color:var(--inkt);transition:transform .2s ease,box-shadow .2s ease}
.kaart:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(32,36,30,.13)}
.kaart img{aspect-ratio:4/3;object-fit:cover;width:100%}
.kaart__tekst{padding:22px 24px 26px}
.kaart__tekst p{margin:0;color:rgba(32,36,30,.72);font-size:.98rem}
.kaart__meer{display:inline-block;margin-top:12px;font-weight:600;color:var(--groen)}

/* Promo-banner (aanschuifdiner) */
.promo{background:var(--sage);color:var(--inkt)}
.promo .kader{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 0;flex-wrap:wrap}
.promo h2{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.promo p{margin:6px 0 0;font-size:1.05rem}
.promo__prijs{font-family:var(--kop);font-size:2.4rem;white-space:nowrap}

/* Reviewbewijs */
.review{text-align:center}
.review__score{font-family:var(--kop);font-size:4rem;line-height:1}
.review__sterren{color:#F5C86E;font-size:1.5rem;letter-spacing:.12em;margin:8px 0 4px}
.review p{color:inherit}

/* ── Menukaart ── */
.menu-nav{position:sticky;top:83px;z-index:40;background:var(--creme);border-bottom:1px solid rgba(32,36,30,.1);padding:12px 0}
.menu-nav .kader{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.menu-nav a{text-decoration:none;font-size:.92rem;font-weight:600;color:var(--inkt);
  border:1px solid rgba(32,36,30,.2);border-radius:999px;padding:7px 15px;transition:all .15s ease}
.menu-nav a:hover{border-color:var(--groen);color:var(--groen)}
.menu-zoek{flex:1 1 200px;min-width:170px;margin-left:auto}
.menu-zoek input{width:100%;padding:9px 16px;border:1px solid rgba(32,36,30,.25);border-radius:999px;
  font-family:var(--body);font-size:.95rem;background:var(--wit);color:var(--inkt)}
.menu-zoek input:focus{outline:2px solid var(--groen);outline-offset:1px}
.menublok{padding:52px 0 10px}
.menublok h2{display:flex;align-items:baseline;gap:16px}
.menublok h2::after{content:"";flex:1;border-bottom:1px solid rgba(32,36,30,.18)}
.gerecht{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px dotted rgba(32,36,30,.16)}
.gerecht__naam{font-weight:600;font-size:1.05rem}
.gerecht__oms{color:rgba(32,36,30,.66);font-size:.95rem;margin-top:2px}
.gerecht__prijs{font-family:var(--kop);font-size:1.15rem;white-space:nowrap;color:var(--groen)}
.gerecht.verborgen{display:none}
.menu-leeg{display:none;color:rgba(32,36,30,.6);padding:20px 0}
.keuzemenu{background:var(--groen);color:var(--creme);border-radius:14px;padding:34px 38px;margin:40px 0 8px;text-align:center}
.keuzemenu h2{color:var(--wit);margin-bottom:4px}
.keuzemenu p{margin:0;font-size:1.1rem}
.keuzemenu strong{color:var(--wit)}

/* ── Groepen ── */
.zaal{background:var(--wit);border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(32,36,30,.07)}
.zaal img{aspect-ratio:16/10;object-fit:cover;width:100%}
.zaal__tekst{padding:24px 26px 28px}
.zaal__specs{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.zaal__specs li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dotted rgba(32,36,30,.16);padding-bottom:8px;font-size:.98rem}
.zaal__specs span:last-child{font-weight:600;white-space:nowrap}
.arrangement{background:var(--wit);border-radius:14px;padding:28px 30px;box-shadow:0 2px 14px rgba(32,36,30,.07)}
.arrangement h3{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.arrangement h3 .prijs{font-size:1.1rem;color:var(--groen);white-space:nowrap}
.arrangement p{color:rgba(32,36,30,.75);font-size:.98rem;margin:0}
.arrangement p + p{margin-top:.5em}
.rooster{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:860px){.rooster{grid-template-columns:1fr}}

/* ── Historie-tijdlijn ── */
.tijdlijn{list-style:none;margin:0;padding:0;position:relative}
.tijdlijn::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--sage)}
.tijdlijn li{position:relative;padding:0 0 36px 38px}
.tijdlijn li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--groen);border:3px solid var(--creme)}
.tijdlijn .jaartal{font-family:var(--kop);font-size:1.5rem;color:var(--groen);display:block;margin-bottom:4px}

/* ── Galerij ── */
.galerij{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.galerij img{border-radius:10px;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.galerij .staand{grid-row:span 2}
.galerij .staand img{aspect-ratio:auto;height:100%}
@media (max-width:700px){.galerij{grid-template-columns:1fr 1fr}}

/* ── Openingstijden ── */
.uren{width:100%;border-collapse:collapse;font-size:.98rem}
.uren td{padding:7px 0;border-bottom:1px dotted rgba(255,255,255,.22)}
.uren td:last-child{text-align:right;white-space:nowrap}
.uren tr.vandaag td{color:var(--wit);font-weight:700}
.sectie--groen .uren td{color:var(--sage-licht)}

/* ── Footer ── */
.voet{background:var(--groen-donker);color:var(--sage-licht);padding:64px 0 0;font-size:.97rem}
.voet h3{color:var(--wit);font-size:1.2rem;margin-bottom:14px}
.voet a{color:var(--sage-licht)}
.voet a:hover{color:var(--wit)}
.voet__kolommen{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px}
@media (max-width:860px){.voet__kolommen{grid-template-columns:1fr}}
.voet__logo{filter:brightness(0) invert(1);opacity:.92;width:190px;height:50px;object-fit:contain}
.voet__onder{border-top:1px solid rgba(255,255,255,.14);margin-top:46px;padding:18px 0;font-size:.88rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:rgba(216,224,212,.75)}
.voet__onder .kader{display:contents}

/* ── Mobiele bel-balk (wijkt voor de att-contactbalk) ── */
.belbalk{display:none}
@media (max-width:700px){
  .belbalk{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:var(--groen);
    box-shadow:0 -4px 18px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom,0)}
  .belbalk a{flex:1;text-align:center;padding:15px 8px;color:var(--wit);text-decoration:none;font-weight:600;font-size:.98rem}
  .belbalk a + a{border-left:1px solid rgba(255,255,255,.25)}
  body{padding-bottom:56px}
}
body:has(.att-cb.att-cb--in) .belbalk{display:none}

/* ── Animaties (subtiel, Cluny-ritme) ── */
@keyframes opkomen{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero__sub,.hero h1,.hero__tekst,.hero__acties,.hero__pillen{animation:opkomen .8s cubic-bezier(.22,.61,.36,1) both}
.hero h1{animation-delay:.12s}
.hero__tekst{animation-delay:.24s}
.hero__acties{animation-delay:.36s}
.hero__pillen{animation-delay:.48s}
.anim{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.anim.zichtbaar{opacity:1;transform:none}
.anim:nth-child(2){transition-delay:.1s}
.anim:nth-child(3){transition-delay:.2s}
.kaart{overflow:hidden}
.kaart img,.galerij figure img,.zaal img,.tweeluik__foto img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.kaart:hover img{transform:scale(1.045)}
.galerij figure{overflow:hidden;border-radius:10px;margin:0}
.galerij figure:hover img{transform:scale(1.045)}
.zaal:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .knop:hover,.kaart:hover{transform:none}
  .hero__sub,.hero h1,.hero__tekst,.hero__acties,.hero__pillen{animation:none}
  .anim{opacity:1;transform:none;transition:none}
  .kaart img,.galerij figure img,.zaal img,.tweeluik__foto img{transition:none}
  .kaart:hover img,.galerij figure:hover img,.zaal:hover img{transform:none}
}