/* Loef & Lij - demo "jouw site, maar af"
   Referentie: Webflow "Savoria" (Geniusflow) - screenshots in
   leads/loefenlij/bewijs/referentie-savoria/. Compositie gevolgd: donker doek,
   gesplitste serif-koppen met italic-woorden, handschrift-bijschriften,
   cijfer-rij, foto-waaier, signature-kaarten, groot merkwoord.
   Kleuren = HUN merk: nachtzwart + baksteenrood + warm creme (site/logo). */

@font-face{font-family:"Spectral";src:url("../fonts/spectral.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Spectral";src:url("../fonts/spectral-italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Mulish";src:url("../fonts/mulish.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/caveat.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --nacht:#14171A;
  --paneel:#1D2125;
  --lijn:rgba(237,228,212,.16);
  --creme:#EDE4D4;
  --creme-dof:#B9B0A0;
  --rood:#B8463A;
  --rood-licht:#D0685C;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hand:"Caveat","Bradley Hand",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.7;color:var(--creme);background:var(--nacht)}
img{display:block;max-width:100%;height:auto}
a{color:var(--creme)}

.kader{max-width:1180px;margin:0 auto;padding:0 22px}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;color:var(--creme)}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-bottom:20px}
h3{font-size:1.3rem}
h1 em,h2 em,h3 em{font-style:italic;color:var(--rood-licht)}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}
.handregel{font-family:var(--hand);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--creme-dof);font-weight:500}

/* ---------- knoppen ---------- */
.knop{display:inline-block;background:var(--rood);color:#fff;border:1.5px solid var(--rood);
  font-family:var(--sans);font-size:.88rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 28px;text-decoration:none;border-radius:3px;cursor:pointer;transition:background .2s,color .2s}
.knop:hover{background:#9A382E;border-color:#9A382E}
.knop--omtrek{background:transparent;color:var(--creme);border-color:rgba(237,228,212,.5)}
.knop--omtrek:hover{background:var(--creme);color:var(--nacht);border-color:var(--creme)}

/* ---------- header ---------- */
.sitekop{position:sticky;top:0;z-index:60;background:rgba(20,23,26,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lijn)}
.sitekop .kader{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.merk{display:flex;flex-direction:column;text-decoration:none;line-height:1}
.merk__naam{font-family:var(--serif);font-size:1.55rem;letter-spacing:.04em;color:var(--creme)}
.merk__naam span{color:var(--rood-licht);font-style:italic}
.merk__sub{font-family:var(--hand);font-size:.95rem;color:var(--creme-dof);margin-top:3px}
.hoofdnav{display:flex;align-items:center;gap:24px}
.hoofdnav a{font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--creme);text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.hoofdnav a:hover,.hoofdnav a[aria-current="page"]{color:var(--rood-licht);border-bottom-color:var(--rood-licht)}
.hoofdnav .knop{padding:11px 20px}
.hoofdnav .knop:hover{color:#fff}
.navknop{display:none;background:none;border:1.5px solid var(--creme);border-radius:3px;color:var(--creme);
  font-size:1.3rem;line-height:1;padding:7px 12px;cursor:pointer}

/* ---------- hero (gesplitste kop om beeld, zoals Savoria) ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.hero__beeld{position:absolute;inset:0;z-index:-1}
.hero__beeld img{width:100%;height:100%;object-fit:cover}
.hero__beeld::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,23,26,.92) 0%,rgba(20,23,26,.45) 50%,rgba(20,23,26,.55) 100%)}
.hero .kader{width:100%;padding-top:70px;padding-bottom:40px}
.hero h1{display:flex;flex-direction:column;gap:6px}
.hero h1 .r1{text-align:left}
.hero h1 .r2{text-align:right}
.hero .handregel{display:block;text-align:center;margin:10px 0}
.hero__onder{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:44px;flex-wrap:wrap}
.hero__sub{max-width:460px;color:rgba(237,228,212,.92);font-size:1.06rem}
.hero__acties{display:flex;gap:12px;flex-wrap:wrap}
.statusregel{display:inline-flex;align-items:center;gap:8px;font-size:.93rem;color:var(--creme-dof);flex-wrap:wrap;margin-top:16px}
.statusregel .bol{width:9px;height:9px;border-radius:50%;background:#777;display:inline-block}
.pil--open .bol{background:#4FBF7E}
.pil--dicht .bol{background:#D96557}
.statusregel .ster{color:#D9A441}

/* ---------- secties ---------- */
.sectie{padding:96px 0}
.sectie--paneel{background:var(--paneel)}
.overlijn{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--rood-licht);margin-bottom:14px}

/* cijfer-rij (Savoria: 20+ / 150+ / 05) */
.cijfers{display:flex;gap:54px;flex-wrap:wrap;margin-top:34px}
.cijfers div{min-width:120px}
.cijfers .getal{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--creme)}
.cijfers .label{font-size:.95rem;color:var(--creme-dof);margin-top:6px}

/* foto-waaier (overlappend) */
.waaier{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:center;min-height:440px}
.waaier figure{overflow:hidden;border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.waaier img{width:100%;height:100%;object-fit:cover}
.waaier__links{grid-column:1/6;grid-row:1;transform:rotate(-2.5deg);z-index:1;aspect-ratio:3/4}
.waaier__midden{grid-column:4/10;grid-row:1;z-index:2;aspect-ratio:4/5}
.waaier__rechts{grid-column:9/13;grid-row:1;transform:rotate(2.5deg);z-index:1;aspect-ratio:3/4}

.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.tweeluik__foto img{border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.4)}

/* signature-kaarten */
.sign{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.sign figure{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/4}
.sign img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sign figure:hover img{transform:scale(1.05)}
.sign figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;
  background:linear-gradient(to top,rgba(20,23,26,.92),transparent);
  font-family:var(--serif);font-size:1.08rem;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sign .prijs{color:var(--rood-licht);font-family:var(--sans);font-size:.95rem;font-weight:700;white-space:nowrap}

/* merkwoord-band */
.merkwoord{text-align:center;padding:90px 0 70px}
.merkwoord .woord{font-family:var(--serif);font-size:clamp(3.2rem,11vw,8.5rem);letter-spacing:.06em;line-height:1;color:var(--creme)}
.merkwoord .woord span{color:var(--rood-licht);font-style:italic}
.merkwoord .handregel{margin-top:10px}

/* agenda-rijen */
.eventrij{display:grid;grid-template-columns:170px 1fr auto;gap:26px;align-items:center;
  padding:26px 0;border-top:1px solid var(--lijn)}
.eventrij:last-of-type{border-bottom:1px solid var(--lijn)}
.eventrij__wanneer{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--rood-licht)}
.eventrij h3{font-size:1.25rem;margin-bottom:4px}
.eventrij p{color:var(--creme-dof);font-size:.98rem;margin:0}

/* ---------- paginakop ---------- */
.pagkop{padding:110px 0 30px;text-align:center}
.pagkop h1{font-size:clamp(2.4rem,5.6vw,4rem)}
.pagkop .handregel{margin-top:8px}
.pagkop p.sub{max-width:580px;margin:14px auto 0;color:var(--creme-dof);font-size:1.06rem}
.pagkop .statusregel{justify-content:center;width:100%}

/* ---------- menukaart (hun eigen ll-markup, nieuwe taal) ---------- */
.ll-menu{max-width:780px;margin:0 auto;padding:0 22px 60px}
.ll-menu-nav{position:sticky;top:74px;z-index:40;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  background:var(--nacht);padding:14px 0;border-bottom:1px solid var(--lijn);margin-bottom:26px}
.ll-menu-nav a{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--creme);border:1px solid rgba(237,228,212,.3);border-radius:999px;padding:7px 14px;transition:all .2s}
.ll-menu-nav a:hover{border-color:var(--rood-licht);color:var(--rood-licht)}
.ll-section{padding-top:30px}
.ll-section h2{text-align:center;font-size:2rem;margin-bottom:6px}
.ll-section h2::after{content:"";display:block;width:54px;border-top:2px solid var(--rood);margin:12px auto 14px}
.ll-intro{text-align:center;color:var(--creme-dof);font-size:.95rem;margin-bottom:18px}
.ll-item{padding:16px 0;border-bottom:1px solid var(--lijn)}
.ll-item-head{display:flex;align-items:baseline;gap:12px}
.ll-item-name{font-family:var(--serif);font-size:1.12rem;flex:1}
.ll-price{color:var(--rood-licht);font-weight:700;font-size:.98rem;white-space:nowrap}
.ll-description{font-size:.93rem;color:var(--creme-dof);margin:3px 0 0}
.ll-wine{font-family:var(--serif);font-style:italic;font-size:.93rem;color:#C9A96A;margin:4px 0 0}
.ll-wine::before{content:"Wijnsuggestie \00B7  ";font-size:.8rem;letter-spacing:.04em;color:var(--creme-dof)}
.verborgen{display:none!important}
.kaartzoek{display:flex;justify-content:center;margin:26px 0 6px}
.kaartzoek input{font-family:var(--sans);font-size:1rem;padding:11px 18px;min-width:300px;
  border:1px solid rgba(237,228,212,.35);border-radius:999px;background:var(--paneel);color:var(--creme)}
.kaartzoek input::placeholder{color:var(--creme-dof)}
.kaartzoek input:focus{outline:2px solid var(--rood-licht)}
.pdfregel{text-align:center;margin:10px 0 0;font-size:.9rem;color:var(--creme-dof)}
.pdfregel a{color:var(--rood-licht)}

/* ---------- galerij ---------- */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.raster figure{overflow:hidden;border-radius:4px}
.raster img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .5s}
.raster figure:hover img{transform:scale(1.04)}

/* ---------- footer ---------- */
.voet{border-top:1px solid var(--lijn);padding:70px 0 0;font-size:.96rem}
.voet a{color:var(--creme)}
.voet__kolommen{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:46px;padding-bottom:50px}
.voet__merk{font-family:var(--serif);font-size:1.7rem;color:var(--creme)}
.voet__merk span{color:var(--rood-licht);font-style:italic}
.voet__merk small{display:block;font-family:var(--hand);font-size:1rem;color:var(--creme-dof);margin-top:6px}
.voet h3{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);margin-bottom:14px}
.uren{border-collapse:collapse;width:100%;max-width:280px}
.uren td{padding:4px 0;color:var(--creme-dof)}
.uren td:last-child{text-align:right}
.uren tr.vandaag td{color:var(--creme);font-weight:700}
.voet__onder{border-top:1px solid var(--lijn);padding:18px 0;font-size:.85rem;color:var(--creme-dof)}

/* ---------- belbalk mobiel ---------- */
.belbalk{display:none}
body:has(.att-cb.att-cb--in) .belbalk{display:none!important}

/* ---------- scroll-reveal ---------- */
.anim{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.anim.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .tweeluik{grid-template-columns:1fr;gap:38px}
  .sign{grid-template-columns:1fr 1fr}
  .raster{grid-template-columns:1fr 1fr}
  .waaier{min-height:0;grid-template-columns:1fr 1fr;gap:16px}
  .waaier__links{grid-column:1/2;grid-row:auto;transform:rotate(-2deg)}
  .waaier__midden{grid-column:1/3;grid-row:auto}
  .waaier__rechts{grid-column:2/3;grid-row:1;transform:rotate(2deg)}
  .cijfers{gap:30px}
}
@media (max-width:760px){
  .navknop{display:block}
  .hoofdnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paneel);
    flex-direction:column;align-items:stretch;padding:16px 22px 22px;gap:4px;border-bottom:1px solid var(--lijn);
    box-shadow:0 18px 30px rgba(0,0,0,.4)}
  .hoofdnav.open{display:flex}
  .hoofdnav a{padding:12px 0;border-bottom:1px solid var(--lijn)}
  .hoofdnav .knop{margin-top:10px;text-align:center}
  .sectie{padding:62px 0}
  .hero{min-height:78vh}
  .hero h1 .r1,.hero h1 .r2{text-align:left}
  .sign{grid-template-columns:1fr}
  .raster{grid-template-columns:1fr}
  .eventrij{grid-template-columns:1fr;gap:8px}
  .voet__kolommen{grid-template-columns:1fr;gap:34px}
  .kaartzoek input{min-width:0;width:100%}
  .ll-menu-nav{top:0}
  .belbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50}
  .belbalk a{flex:1;text-align:center;padding:15px 8px calc(15px + env(safe-area-inset-bottom,0px));
    font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
  .belbalk a:first-child{background:var(--rood);color:#fff}
  .belbalk a:last-child{background:var(--paneel);color:var(--creme)}
  body{padding-bottom:54px}
}