/* Brasserie Stadspark - warme brasserie-huisstijl: donker hout, amber licht, esdoornblad.
   Type: Fraunces (koppen), Oswald (labels/prijzen), Spectral (lopende tekst). */
:root{
  --nacht:#17110c;      /* warm zwart, uit de interieurfoto's */
  --nacht2:#20180f;
  --hout:#2c2015;
  --goud:#c39a54;       /* amber wandlamp-licht */
  --goud-l:#dcb87b;
  --goud-d:#a87f3c;
  --creme:#f6efe2;
  --creme2:#efe6d3;
  --papier:#faf5ec;
  --park:#4a6242;       /* blad-groen, subtiel */
  --tekst:#2b2118;
  --tekst-l:#6d5f4f;
  --lijn:#e3d7c1;
  --lijn-d:rgba(220,184,123,.22);
  --schaduw:0 24px 60px -28px rgba(23,17,12,.55);
  --f-kop:'Fraunces',Georgia,serif;
  --f-lab:'Oswald',system-ui,sans-serif;
  --f-body:'Spectral',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--f-body);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--f-kop);font-weight:600;line-height:1.12;color:var(--nacht)}
a{color:var(--goud-d);text-decoration:none}
a:hover{color:var(--goud)}
.overslaan{position:absolute;left:-999px;top:0;background:var(--goud);color:var(--nacht);padding:10px 16px;z-index:200}
.overslaan:focus{left:12px;top:12px}

/* labels / eyebrows */
.eyebrow{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.28em;font-size:13px;font-weight:500;color:var(--goud-d);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--goud);opacity:.7}
.eyebrow.mid{justify-content:center}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.12em;font-size:14px;font-weight:500;padding:13px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.knop svg{width:18px;height:18px}
.knop-goud{background:var(--goud);color:var(--nacht);border-color:var(--goud)}
.knop-goud:hover{background:var(--goud-l);border-color:var(--goud-l);color:var(--nacht)}
.knop-lijn{background:transparent;color:var(--creme);border-color:rgba(246,239,226,.4)}
.knop-lijn:hover{border-color:var(--goud);color:var(--goud-l)}
.knop-donker{background:var(--nacht);color:var(--creme);border-color:var(--nacht)}
.knop-donker:hover{background:var(--hout);color:var(--goud-l)}

/* header */
.kop{position:sticky;top:0;z-index:100;background:rgba(23,17,12,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn-d)}
.kop-in{max-width:1200px;margin:0 auto;padding:0 28px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.merk{display:flex;align-items:center}
.merk-logo{height:38px;width:auto}
.hoofdnav{display:flex;align-items:center;gap:30px}
.hoofdnav a{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:var(--creme);font-weight:400}
.hoofdnav a:not(.knop){padding:6px 0;border-bottom:1px solid transparent}
.hoofdnav a:not(.knop):hover{color:var(--goud-l)}
.hoofdnav a.nu{color:var(--goud-l);border-bottom-color:var(--goud)}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--creme);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.62) saturate(1.05)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,12,.55) 0%,rgba(23,17,12,.35) 40%,rgba(23,17,12,.82) 100%)}
.hero-in{position:relative;z-index:2;max-width:820px;padding:60px 28px}
.hero-blad{width:46px;height:46px;color:var(--goud-l);margin:0 auto 22px}
.hero-titel{font-family:var(--f-kop);font-weight:600;font-size:clamp(44px,8vw,86px);color:var(--creme);letter-spacing:.01em;line-height:1.02;text-wrap:balance}
.hero-sub{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.42em;font-size:clamp(12px,2vw,15px);color:var(--goud-l);margin:22px 0 0;font-weight:400}
.hero-tekst{font-size:clamp(18px,2.4vw,21px);color:rgba(246,239,226,.9);margin:26px auto 0;max-width:560px;font-style:italic}
.hero-kn{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-scroll{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;color:var(--goud-l);font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.2em;font-size:11px;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-scroll span{width:1px;height:34px;background:linear-gradient(var(--goud-l),transparent);display:block}

/* secties */
.sec{padding:96px 28px}
.wrap{max-width:1200px;margin:0 auto}
.wrap-smal{max-width:820px;margin:0 auto}
.sec.creme{background:var(--creme)}
.sec.donker{background:var(--nacht);color:var(--creme)}
.sec.donker h1,.sec.donker h2,.sec.donker h3{color:var(--creme)}
.sec.hout{background:var(--hout);color:var(--creme)}
.sec.hout h2,.sec.hout h3{color:var(--creme)}
.sec-kop{text-align:center;max-width:680px;margin:0 auto 56px}
.sec-kop h2{font-size:clamp(30px,4.6vw,46px);margin:16px 0 0;text-wrap:balance}
.sec-kop p{color:var(--tekst-l);font-size:19px;margin:16px 0 0}
.sec.donker .sec-kop p,.sec.hout .sec-kop p{color:rgba(246,239,226,.72)}

/* welkom split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split .beeld{position:relative}
.split .beeld img{border-radius:3px;box-shadow:var(--schaduw);width:100%;height:100%;object-fit:cover}
.split .beeld .kader{position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--goud);border-radius:3px;z-index:-1}
.split h2{font-size:clamp(30px,4.2vw,44px);margin:14px 0 0}
.split p{color:var(--tekst-l);margin:20px 0 0;font-size:18px}
.split .onder{color:var(--tekst);font-family:var(--f-kop);font-style:italic;font-size:22px;margin-top:26px}

/* troeven */
.troeven{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
.troef{text-align:center;padding:12px}
.troef .ic{width:56px;height:56px;margin:0 auto 18px;border:1px solid var(--goud);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--goud-l)}
.troef .ic svg{width:26px;height:26px}
.troef h3{font-size:22px;color:var(--creme)}
.troef p{color:rgba(246,239,226,.7);font-size:16px;margin:10px 0 0}

/* sfeer-tegels */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tegel{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.tegel:hover img{transform:scale(1.05)}
.tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(23,17,12,.85))}
.tegel span{position:relative;z-index:2;color:var(--creme);font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.16em;font-size:16px;padding:20px;font-weight:500}
.tegel.puur::after{display:none}

/* galerij */
.galerij{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.galerij a{border-radius:3px;overflow:hidden;display:block}
.galerij img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:.4s}
.galerij a:hover img{transform:scale(1.06)}
.galerij .groot{grid-column:span 3;grid-row:span 2}
.galerij .groot img{aspect-ratio:auto;height:100%}
.galerij .breed{grid-column:span 3}

/* strook (cta) */
.strook{background:var(--nacht);color:var(--creme);text-align:center;padding:88px 28px;position:relative;overflow:hidden}
.strook-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.28);opacity:.55}
.strook-in{position:relative;z-index:2;max-width:640px;margin:0 auto}
.strook h2{color:var(--creme);font-size:clamp(30px,5vw,48px);margin:16px 0 0}
.strook p{color:rgba(246,239,226,.8);font-size:19px;margin:18px 0 32px}

/* menu */
.menu-kaart{max-width:900px;margin:0 auto}
.menu-groep{margin-bottom:60px}
.menu-groep-kop{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--goud);padding-bottom:12px;margin-bottom:28px;flex-wrap:wrap}
.menu-groep-kop h2{font-size:clamp(26px,4vw,36px)}
.menu-groep-kop .tijd{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--goud-d);margin-left:auto}
.gerecht{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px dotted var(--lijn)}
.gerecht:last-child{border-bottom:0}
.gerecht .g-links{flex:1;min-width:0}
.gerecht .g-naam{font-family:var(--f-kop);font-weight:600;font-size:19px;color:var(--nacht)}
.gerecht .g-om{color:var(--tekst-l);font-size:15.5px;margin-top:2px}
.gerecht .g-prijs{font-family:var(--f-lab);font-size:19px;font-weight:500;color:var(--goud-d);white-space:nowrap;font-variant-numeric:tabular-nums}
.menu-noot{background:var(--creme);border:1px solid var(--lijn);border-radius:4px;padding:22px 26px;margin:0 auto 44px;max-width:900px;color:var(--tekst-l);font-size:15.5px}
.menu-noot strong{color:var(--nacht);font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.1em;font-size:14px}

/* info-kaarten (praktisch/reserveren) */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info-kaart{background:var(--papier);border:1px solid var(--lijn);border-radius:4px;padding:30px}
.sec.donker .info-kaart,.sec.hout .info-kaart{background:rgba(246,239,226,.05);border-color:var(--lijn-d)}
.info-kaart .ic{width:48px;height:48px;color:var(--goud-d);margin-bottom:16px}
.info-kaart .ic svg{width:30px;height:30px}
.info-kaart h3{font-size:22px}
.info-kaart p{margin:10px 0 0;color:var(--tekst-l)}
.sec.donker .info-kaart p{color:rgba(246,239,226,.75)}
.info-kaart a{font-weight:500}

/* uren-tabel */
.uren{list-style:none;padding:0;margin:0}
.uren li{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--lijn)}
.uren li:last-child{border-bottom:0}
.uren .dag{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.uren .u{color:var(--tekst-l)}
.uren li.dicht .u{color:#b0392f}
.uren li.vandaag{color:var(--goud-d);font-weight:500}

/* kaart embed */
.kaart-embed{border-radius:4px;overflow:hidden;border:1px solid var(--lijn);box-shadow:var(--schaduw);line-height:0}
.kaart-embed iframe{width:100%;height:420px;border:0;filter:grayscale(.25) sepia(.12)}

/* reserveer hero */
.mini-hero{position:relative;color:var(--creme);text-align:center;padding:128px 28px 92px;overflow:hidden}
.mini-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.5)}
.mini-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,12,.55),rgba(23,17,12,.8))}
.mini-hero-in{position:relative;z-index:2;max-width:720px;margin:0 auto}
.mini-hero h1{color:var(--creme);font-size:clamp(36px,6vw,60px);margin:16px 0 0}
.mini-hero p{color:rgba(246,239,226,.85);font-size:19px;margin:18px 0 0}

/* prose */
.prose h2{font-size:28px;margin:40px 0 12px}
.prose h3{font-size:20px;margin:28px 0 8px;font-family:var(--f-kop)}
.prose p,.prose li{color:var(--tekst);font-size:17px}
.prose ul{padding-left:22px}
.prose a{text-decoration:underline}

/* footer */
.voet{background:var(--nacht);color:rgba(246,239,226,.72);padding:70px 28px 0}
.voet-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px}
.voet-logo{height:34px;margin-bottom:20px}
.voet-merk p{font-size:16px;max-width:340px;margin:0}
.voet-soc{display:flex;gap:12px;margin-top:22px}
.voet-soc a{width:40px;height:40px;border:1px solid var(--lijn-d);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--goud-l)}
.voet-soc a svg{width:19px;height:19px}
.voet-soc a:hover{background:var(--goud);color:var(--nacht);border-color:var(--goud)}
.voet-kol h4{font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--goud-l);margin-bottom:16px;font-weight:500}
.voet-kol p{margin:0 0 10px}
.voet-kol a{color:rgba(246,239,226,.72)}
.voet-kol a:hover{color:var(--goud-l)}
.voet-kol .dicht{color:#b0655a}
.voet-onder{max-width:1200px;margin:0 auto;border-top:1px solid var(--lijn-d);padding:22px 0;display:flex;justify-content:space-between;gap:16px;font-size:14px;font-family:var(--f-lab);letter-spacing:.04em;text-transform:uppercase}
.voet-onder a{color:rgba(246,239,226,.6)}

/* mobiele onderbalk */
.botnav{display:none}

/* cookiebanner */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--nacht);border-top:1px solid var(--goud);box-shadow:0 -18px 40px -20px rgba(0,0,0,.6)}
.cookie-in{max-width:1100px;margin:0 auto;padding:18px 28px;display:flex;align-items:center;gap:24px}
.cookie p{color:rgba(246,239,226,.82);font-size:14.5px;margin:0}
.cookie a{color:var(--goud-l);text-decoration:underline}
.cookie-kn{flex:0 0 auto}

@media(max-width:960px){
  .split{grid-template-columns:1fr;gap:38px}
  .split .beeld .kader{inset:12px -10px -10px 12px}
  .troeven{grid-template-columns:repeat(2,1fr)}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .galerij{grid-template-columns:repeat(2,1fr)}
  .galerij .groot,.galerij .breed{grid-column:span 2;grid-row:auto}
  .info-grid{grid-template-columns:1fr}
  .voet-in{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:760px){
  .hoofdnav{display:none}
  .kop-in{height:64px;justify-content:center}
  .merk-logo{height:32px}
  body{padding-bottom:70px}
  .sec{padding:62px 22px}
  .strook{padding:64px 22px}
  .mini-hero{padding:96px 22px 68px}
  .hero{min-height:80vh}
  .voet{padding-top:54px}
  .voet-in{grid-template-columns:1fr;gap:30px}
  .voet-onder{flex-direction:column;text-align:center;gap:8px}
  /* onderbalk */
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--nacht);border-top:1px solid var(--lijn-d);padding:6px 4px env(safe-area-inset-bottom)}
  .botnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;color:rgba(246,239,226,.6);font-family:var(--f-lab);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
  .botnav a svg{width:22px;height:22px}
  .botnav a.nu{color:var(--goud-l)}
  .cookie-in{flex-direction:column;align-items:stretch;gap:14px;padding:16px 22px}
  .menu-groep-kop .tijd{margin-left:0;flex-basis:100%}
}
@media(max-width:440px){
  .troeven{grid-template-columns:1fr}
  .tegels{grid-template-columns:1fr}
  .hero-kn{flex-direction:column}
  .hero-kn .knop{width:100%;justify-content:center}
}