/* ==========================================================================
   KOP Genk — stijlblad (rustige, warme koffiehuis-look)
   Crème en espresso, een elegante serif voor de koppen, ronde kaarten,
   veel witruimte en zacht zonlicht in de foto's.
   ========================================================================== */

:root{
  /* palet: Espresso Brown, Coffee Bean, Beige, Cream, White.
     De site is bewust donker voor rustig kijkcomfort; elke strook heeft een
     eigen tint zodat de secties duidelijk van elkaar te onderscheiden zijn. */
  --espresso:#4B3832;
  --espresso-diep:#3D2D28;
  --espresso-nacht:#2F231F;
  --coffee:#6F4E37;
  --beige:#DCC7AA;
  --cream:#F5E6CA;
  --white:#FFFDF7;

  /* basis: tekst in crème op espresso */
  --paper:var(--espresso);
  --paper-hi:var(--coffee);
  --surface:#5A443A;
  --ink:var(--cream);
  --ink-2:var(--beige);
  --ink-3:#BFA88C;
  --rule:#7C6152;
  --rule-soft:#654D42;

  /* accent: warm beige */
  --copper:#E6C69A;
  --copper-hi:var(--cream);

  /* donkerste vlakken: de kaart, de voet */
  --wood:var(--espresso-nacht);
  --wood-2:var(--espresso-diep);
  --on-wood:var(--white);
  --rule-wood:#56423A;

  /* status */
  --open:#8CC09A;
  --closed:#E39A86;
  --warn:#E2B866;

  --shadow:rgba(0,0,0,.45);

  --display:"Nunito","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;

  --maxw:1160px;
  --gutter:24px;
  --r:22px;      /* grote ronding: kaarten, foto's */
  --r-sm:14px;

  /* hoogte van de kopregel: gebruikt door de sticky kaartbalk en ankers */
  --hdr-h:92px;
}

/* --------------------------------------------------------------- basis -- */
*{box-sizing:border-box}
/* het hidden-attribuut moet altijd winnen van eigen display-regels */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--display); font-weight:600; line-height:1.15;
  letter-spacing:0; text-wrap:balance; margin:0;
}
h3,h4{line-height:1.25; letter-spacing:0; font-weight:600}
h1 em,h2 em{font-style:normal; color:var(--copper)}
p{margin:0; text-wrap:pretty}
a{color:inherit}
/* height:auto is nodig: de width/height in de HTML gelden anders als vaste
   maat, waardoor het logo en de foto's op hun volle pixelhoogte staan. */
img{display:block; max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--copper); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--espresso-nacht); padding:12px 18px; font-weight:600;
}
.skip:focus{left:8px; top:8px}

.eyebrow{
  font-family:var(--body); font-size:.7rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); margin:0;
}
.lede{font-size:1.06rem; color:var(--ink-2); margin-top:18px; max-width:54ch; line-height:1.7}
.center{text-align:center}

/* alle foto's krijgen dezelfde warme, zachte afwerking */
.hero-img,.duo-img,.strip img,.fcard img,.hero-photo img{
  filter:saturate(.94) sepia(.1) contrast(1.02) brightness(1.01);
}

/* -------------------------------------------------------------- knoppen -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  background:var(--ink); color:var(--espresso-nacht);
  font-family:var(--body); font-weight:500; font-size:.88rem; letter-spacing:.01em;
  padding:14px 26px; border-radius:999px; border:1px solid var(--ink);
  white-space:nowrap; transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{background:var(--copper); border-color:var(--copper); transform:translateY(-1px)}
.btn::after{content:"→"; font-size:1em; transition:transform .2s ease}
.btn:hover::after{transform:translateX(3px)}
.btn.no-arrow::after,.hdr .btn::after{content:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--ink-3)}
.btn-ghost:hover{background:var(--ink); color:var(--espresso-nacht); border-color:var(--ink)}
.btn-sm{padding:10px 20px; font-size:.84rem}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* -------------------------------------------------------------- kopregel -- */
.hdr{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in srgb,var(--espresso-nacht) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);
}
.hdr-in{display:flex; align-items:center; gap:28px; padding-block:12px; min-height:0}

/* tekstlogo: KOP met GENK klein eronder */
.brand{
  display:flex; flex-direction:column; align-items:center; text-decoration:none;
  line-height:1; flex:0 0 auto; color:var(--ink);
}
.brand b{font-family:var(--display); font-weight:600; font-size:1.55rem; letter-spacing:.34em; margin-right:-.34em}
.brand small{font-size:.54rem; letter-spacing:.42em; margin-right:-.42em; margin-top:5px; color:var(--ink-2); font-weight:500; text-transform:uppercase}

.mark{
  display:block; width:84px; flex:0 0 auto;
  background:var(--cream); border-radius:12px; padding:4px 6px;
}

.hdr .btn{line-height:1.2; background:var(--surface); color:var(--ink); border-color:transparent;
  box-shadow:0 4px 18px -8px var(--shadow)}
.hdr .btn:hover{background:var(--ink); color:var(--espresso-nacht)}
.nav{display:flex; gap:34px; margin-left:auto; margin-right:auto; flex-wrap:wrap}
.nav a{
  font-size:.86rem; font-weight:400; letter-spacing:.01em;
  text-decoration:none; color:var(--ink-2); padding-block:4px;
  border-bottom:1px solid transparent; transition:color .2s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
@media(max-width:620px){
  :root{--hdr-h:116px}
  .hdr-in{flex-wrap:wrap; gap:6px 12px; padding-block:12px 8px}
  .brand b{font-size:1.3rem}
  .hdr .btn{padding:8px 16px; font-size:.8rem; margin-left:auto}
  .nav{
    order:3; width:100%; margin:0; gap:22px; justify-content:center;
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-top:4px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{font-size:.82rem; white-space:nowrap}
}

/* ------------------------------------------------------------------ hero -- */
.hero{padding:10px var(--gutter) 0}
.hero-box{
  position:relative; max-width:var(--maxw); margin-inline:auto;
  border-radius:calc(var(--r) + 8px); overflow:hidden; isolation:isolate;
  min-height:clamp(460px,64vh,580px);
  display:flex; align-items:center;
  background:var(--paper-hi);
}
.hero-photo{position:absolute; inset:0; z-index:-2}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:70% 50%}
/* zacht crème-verloop van links naar rechts, zoals in het voorbeeld */
.hero-box::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    var(--paper) 0%, color-mix(in srgb,var(--paper) 94%,transparent) 36%,
    color-mix(in srgb,var(--paper) 55%,transparent) 56%, transparent 80%);
}
.hero-copy{padding:clamp(28px,4.5vw,56px); max-width:700px}
.hero-copy h1{font-size:clamp(2.5rem,5.6vw,4.2rem); margin-top:14px}
.hero-copy .lede{max-width:44ch; color:var(--ink)}
.hero-copy .btn-row{margin-top:22px}
@media(max-width:760px){
  .hero{padding-inline:12px}
  .hero-box{align-items:flex-end; min-height:560px; border-radius:var(--r)}
  .hero-photo img{object-position:68% 50%}
  .hero-box::before{
    background:linear-gradient(180deg, transparent 0%, color-mix(in srgb,var(--paper) 55%,transparent) 28%,
      var(--paper) 62%);
  }
  .hero-copy{padding:28px 22px 30px}
}

.hero-facts{
  display:flex; gap:clamp(14px,2.2vw,30px); flex-wrap:wrap; margin-top:26px; padding-top:0;
}
.hero-facts > div{white-space:nowrap; border-left:1px solid var(--ink-3); padding-left:14px}
.hero-facts b{display:block; font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:0; line-height:1.2}
.hero-facts span{font-size:.78rem; color:var(--ink-2)}

.hero-img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 62%; border-radius:var(--r)}
@media(max-width:720px){.hero-img{aspect-ratio:4/3}}

.pagekop{padding-block:clamp(28px,4vw,52px) 0}
.pagekop h1{font-size:clamp(2.2rem,5vw,3.6rem); margin-top:10px}
.pagekop .lede{max-width:52ch}

/* --------------------------------------------------------- statuskaartje -- */
.status-card{
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r);
  box-shadow:0 24px 50px -30px var(--shadow);
  padding:26px 30px 24px;
}
.status-card.overlap{margin-top:-52px; position:relative; z-index:5}
@media(max-width:720px){
  .status-card{padding:20px}
  .status-card.overlap{margin-top:-30px}
}
.status-top{display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap}
.status-top > div:first-of-type{flex:1 1 240px; min-width:0}
.dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:.8em;
  background:var(--open); box-shadow:0 0 0 5px color-mix(in srgb,var(--open) 20%,transparent);
}
.dot.is-shut{background:var(--closed); box-shadow:0 0 0 5px color-mix(in srgb,var(--closed) 20%,transparent)}
.dot.is-warn{background:var(--warn); box-shadow:0 0 0 5px color-mix(in srgb,var(--warn) 20%,transparent)}
.status-line{font-family:var(--display); font-size:clamp(1.5rem,3.6vw,2.1rem); font-weight:600; letter-spacing:0; line-height:1.2}
.status-sub{color:var(--ink-2); font-size:.95rem; margin-top:4px}
.status-side{margin-left:auto; text-align:right}
.status-side .lbl{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.status-side .val{font-family:var(--display); font-weight:600; font-size:1.05rem}
@media(max-width:720px){.status-side{margin-left:0; text-align:left; width:100%}}

.notice{
  margin-top:20px; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--copper) 9%,transparent);
  padding:15px 18px;
}
.notice .tag{
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--copper); display:block; margin-bottom:3px;
}
.notice p{font-size:.98rem}
.notice + .notice{margin-top:10px}

/* --------------------------------------------------------------- secties -- */
section{padding-block:clamp(32px,5vw,60px)}
.sec-head{max-width:60ch; margin-bottom:clamp(18px,2.6vw,30px)}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.8rem); margin-top:10px}
/* stroken: elke sectie een eigen tint, met een fijne lijn ertussen */
main > section + section:not(.band-licht){border-top:1px solid rgba(255,253,247,.05)}
.band-diep{background:var(--espresso-diep); --surface:#523D34; --rule-soft:#58443A}
.band-soft{background:var(--coffee); --surface:var(--espresso); --rule:#937259; --rule-soft:#86664F;
  --ink-2:#E6D4BA; --ink-3:#CDB698}
.band-line{border-top:1px solid var(--rule-soft)}
/* één lichte strook als rustpunt, in Beige met espresso tekst */
.band-licht{background:var(--beige); color:var(--espresso);
  --ink:var(--espresso); --ink-2:var(--coffee); --rule:#B59C7C; --rule-soft:#C4AD8E}

.sec-head.split{
  max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; flex-wrap:wrap;
}
.sec-head.split > div{max-width:46ch}
.sec-head.split .lede{margin-top:10px; font-size:.98rem}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center}
.duo.flip{grid-template-columns:1fr 1fr}
@media(max-width:820px){
  .duo,.duo.flip{grid-template-columns:1fr}
  .duo.flip > *:first-child{order:2}
}
.duo h2{font-size:clamp(1.9rem,4vw,2.8rem); margin-top:10px}
.duo .btn-row{margin-top:20px}
.duo-img{border-radius:var(--r); aspect-ratio:4/5; object-fit:cover; width:100%;
  box-shadow:0 30px 60px -36px var(--shadow)}
.duo-img.wide{aspect-ratio:4/3}
.claim{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:1.5rem; color:var(--copper); margin-top:26px; letter-spacing:0;
}

/* ------------------------------------------------------- fotokaartjes -- */
.fgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:980px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{gap:10px}}
.fcard{
  position:relative; display:block; text-decoration:none; color:var(--white);
  border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; isolation:isolate;
  box-shadow:0 24px 44px -30px var(--shadow);
  transition:transform .35s ease, box-shadow .35s ease;
}
.fcard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s ease}
.fcard::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(47,35,31,0) 38%, rgba(47,35,31,.82) 100%);
}
.fcard:hover{transform:translateY(-4px); box-shadow:0 34px 54px -30px var(--shadow)}
.fcard:hover img{transform:scale(1.05)}
.fcard-in{position:absolute; left:0; right:0; bottom:0; padding:20px 20px 20px}
.fcard small{display:block; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; opacity:.85; margin-bottom:6px}
.fcard h3{font-size:1.35rem; color:var(--white)}
.fcard p{font-size:.84rem; opacity:.88; margin-top:4px; line-height:1.45}
.fcard .plus{
  position:absolute; right:16px; bottom:16px; width:38px; height:38px; border-radius:50%;
  background:var(--cream); color:var(--espresso); display:grid; place-items:center; font-size:1.25rem; line-height:1;
  transition:transform .3s ease;
}
.fcard:hover .plus{transform:rotate(90deg)}
.fcard-in{padding-right:64px}

/* ------------------------------------------------------------- formules -- */
.formules{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:900px){.formules{grid-template-columns:1fr}}
.formule{
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--r);
  padding:26px 24px 24px; display:flex; flex-direction:column; gap:10px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.formule:hover{transform:translateY(-3px); box-shadow:0 28px 50px -34px var(--shadow)}
.formule.is-top{background:var(--wood); color:var(--on-wood); border-color:color-mix(in srgb,var(--copper) 45%,transparent)}
.formule.is-top .prijs{color:var(--copper-hi)}
.formule.is-top ul{color:color-mix(in srgb,var(--on-wood) 82%,transparent)}
.formule.is-top li::marker{color:var(--copper-hi)}
.formule.is-top .prijs small{color:color-mix(in srgb,var(--on-wood) 60%,transparent)}
.formule .naam{font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:0}
.formule .prijs{
  font-family:var(--display); font-size:3rem; font-weight:600; color:var(--copper);
  font-variant-numeric:lining-nums tabular-nums; line-height:1; letter-spacing:0;
  padding-bottom:18px; border-bottom:1px solid var(--rule-soft);
}
.formule.is-top .prijs{border-bottom-color:var(--rule-wood)}
.formule .prijs small{font-size:.82rem; font-weight:400; color:var(--ink-3); font-family:var(--body); letter-spacing:0}
.formule ul{margin:0; padding-left:1.1em; color:var(--ink-2); font-size:.95rem;
  display:flex; flex-direction:column; gap:7px}
.formule li::marker{color:var(--copper)}
.badge{
  align-self:flex-start; font-size:.62rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; background:var(--copper-hi); color:var(--wood);
  padding:5px 12px; border-radius:999px;
}

/* ------------------------------------------------------- kaart op hout -- */
.hout{background:var(--wood); color:var(--on-wood)}
.hout .eyebrow{color:var(--copper-hi)}
.hout h1,.hout h2{color:var(--on-wood)}
.hout .lede{color:color-mix(in srgb,var(--on-wood) 80%,transparent)}
.hout .btn{background:var(--on-wood); color:var(--wood); border-color:var(--on-wood)}
.hout .btn:hover{background:var(--copper-hi); border-color:var(--copper-hi); color:var(--wood)}
.hout .btn-ghost{background:transparent; color:var(--on-wood); border-color:var(--rule-wood)}
.hout .btn-ghost:hover{background:var(--on-wood); color:var(--wood); border-color:var(--on-wood)}
.hout .duo-img{box-shadow:none}

/* de kaartpagina: espresso, met de kopregel erboven in dezelfde kleur */
main.hout{padding-bottom:clamp(24px,3vw,40px)}

.kaart-nav{
  position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr-h)); z-index:30;
  background:color-mix(in srgb,var(--wood) 92%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-wood);
  padding-block:12px; margin-bottom:20px; margin-top:20px;
}
.kaart-nav ul{
  list-style:none; margin:0; padding:0; display:flex; gap:8px;
  overflow-x:auto; scrollbar-width:none;
}
.kaart-nav ul::-webkit-scrollbar{display:none}
.kaart-nav a{
  display:block; white-space:nowrap; text-decoration:none;
  font-size:.82rem; font-weight:400;
  color:color-mix(in srgb,var(--on-wood) 80%,transparent);
  border:1px solid var(--rule-wood); border-radius:999px; padding:8px 18px;
  transition:all .2s ease;
}
.kaart-nav a:hover{color:var(--wood); background:var(--on-wood); border-color:var(--on-wood)}

.kaart-deel{padding-block:44px 8px; scroll-margin-top:calc(var(--hdr-h) + 70px)}
.kaart-deel:nth-of-type(even){
  background:var(--espresso-diep);
  box-shadow:0 0 0 100vmax var(--espresso-diep); clip-path:inset(0 -100vmax);
}
/* fotostrook per rubriek op de kaart: naast elkaar, op gsm zijwaarts vegen */
.kaart-beelden{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px;
  margin:6px 0 30px;
}
.kaart-beelden img{
  width:100%; height:clamp(170px,20vw,250px); object-fit:cover; border-radius:var(--r-sm);
  filter:saturate(.94) sepia(.1) contrast(1.02) brightness(1.01);
  box-shadow:0 18px 36px -24px rgba(0,0,0,.6);
}
@media(max-width:720px){
  .kaart-beelden{
    grid-auto-columns:72%; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
  .kaart-beelden::-webkit-scrollbar{display:none}
  .kaart-beelden img{height:200px; scroll-snap-align:start}
}
.kaart-deel > h2{
  font-size:clamp(2rem,4.4vw,3rem); margin-bottom:8px;
}
.kaart-deel > .deel-note{
  font-size:.92rem; font-style:italic; margin-bottom:22px;
  color:color-mix(in srgb,var(--on-wood) 70%,transparent);
}
.groepen{columns:2; column-gap:72px; margin-top:26px}
@media(max-width:820px){.groepen{columns:1}}
.groep{break-inside:avoid; margin-bottom:44px}
/* kaartdeel met vaste kolommen en een foto in de lege ruimte */
.groepen.met-foto{columns:auto; display:grid; grid-template-columns:1fr 1fr; column-gap:72px; align-items:start}
@media(max-width:820px){.groepen.met-foto{grid-template-columns:1fr}}
.kaart-foto{margin:8px 0 44px}
.kaart-foto img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 88%; border-radius:var(--r);
  filter:saturate(.94) sepia(.1) contrast(1.02) brightness(1.01);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
@media(max-width:820px){.kaart-foto img{aspect-ratio:4/3}}
.groep h3{
  font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-hi); font-family:var(--body);
  border-bottom:1px solid var(--rule-wood); padding-bottom:10px; margin-bottom:14px;
}
.groep .note{
  font-size:.84rem; font-style:italic; margin-bottom:10px;
  color:color-mix(in srgb,var(--on-wood) 68%,transparent);
}
.mitem{padding-block:8px}
.mrow{display:flex; align-items:baseline; gap:8px}
.mrow .nm{flex:0 1 auto}
.mrow .dots{flex:1 1 auto; min-width:14px; border-bottom:1px dotted var(--rule-wood); transform:translateY(-.28em)}
.mrow .pr{flex:0 0 auto; font-variant-numeric:tabular-nums; display:flex; gap:10px; font-family:var(--display); font-size:1.02rem}
.mrow .pr b{font-weight:450; display:inline-block; min-width:3.1em; text-align:right}
/* lege prijskolom (bv. geen prijs per stuk): onzichtbare spatie houdt de regel recht */
.mrow .pr b:empty::before{content:"\00a0"}
.mitem .sub{
  font-size:.88rem; line-height:1.55; margin-top:2px; max-width:46ch;
  color:color-mix(in srgb,var(--on-wood) 66%,transparent);
}
.kolomkop{
  display:flex; gap:10px; justify-content:flex-end; margin-bottom:4px;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb,var(--on-wood) 62%,transparent);
}
.kolomkop span{display:inline-block; min-width:3.1em; text-align:right}

/* ----------------------------------------------------------- beeldstrook -- */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.strip img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r)}
.strip img:nth-child(2){margin-top:36px}
@media(max-width:720px){
  .strip{grid-template-columns:1fr 1fr; gap:10px}
  .strip img:nth-child(2){margin-top:0}
  .strip img:last-child{grid-column:span 2; aspect-ratio:16/9}
}

/* -------------------------------------------------------------- praktisch -- */
.prak{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px)}
@media(max-width:820px){.prak{grid-template-columns:1fr}}
.prak h2{font-size:1.9rem!important}
.uren{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.uren th,.uren td{text-align:left; padding:14px 0; border-bottom:1px solid var(--rule-soft); font-weight:400}
.uren th{font-weight:500; font-size:.98rem}
.uren td{text-align:right; color:var(--ink-2)}
.uren tr.vandaag th,.uren tr.vandaag td{color:var(--copper); font-weight:600}
.uren tr.dicht td{color:var(--closed)}
.keuken{margin-top:18px; font-size:.93rem; color:var(--ink-2); font-style:italic}

.contact{margin:0}
.contact dt{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-top:24px;
}
.contact dt:first-child{margin-top:0}
.contact dd{margin:4px 0 0; font-family:var(--display); font-size:1.25rem; font-weight:600}
.contact dd a{text-decoration:none; border-bottom:1px solid var(--rule)}
.contact dd a:hover{color:var(--copper); border-bottom-color:var(--copper)}

.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){.info-grid{grid-template-columns:1fr}}
.info{
  background:var(--surface); border:1px solid var(--rule-soft);
  border-radius:var(--r); padding:28px 28px 26px;
}
.band-soft .info{background:var(--paper)}
.info h3{font-size:1.25rem; margin-bottom:8px}
.info p{font-size:.95rem; color:var(--ink-2)}

/* ------------------------------------------------------------------ cta -- */
.cta{padding-block:clamp(28px,4vw,56px)}
.cta .wrap{
  background:var(--coffee); border:1px solid color-mix(in srgb,var(--beige) 22%,transparent); color:var(--on-wood); border-radius:calc(var(--r) + 8px);
  max-width:calc(var(--maxw) - 2*var(--gutter) + 2*var(--gutter));
  text-align:center; padding:clamp(32px,4.5vw,56px) clamp(22px,4vw,48px);
  margin-inline:auto; width:calc(100% - 2*var(--gutter)); position:relative; overflow:hidden;
}
.cta h2{font-size:clamp(2.1rem,5vw,3.6rem); color:var(--on-wood)}
.cta .lede{margin-inline:auto; max-width:46ch; color:color-mix(in srgb,var(--on-wood) 78%,transparent)}
.cta .btn-row{justify-content:center; margin-top:22px}
.cta .btn{background:var(--on-wood); color:var(--wood); border-color:var(--on-wood)}
.cta .btn:hover{background:var(--copper-hi); border-color:var(--copper-hi)}
.cta .btn-ghost{background:transparent; color:var(--on-wood); border-color:var(--rule-wood)}
.cta .btn-ghost:hover{background:var(--on-wood); color:var(--wood); border-color:var(--on-wood)}
.cta .eyebrow{color:var(--copper-hi); margin-bottom:16px}

/* ---------------------------------------------------------- waarden-strook -- */
.waarden{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.waarden > div{padding:6px 24px; border-left:1px solid var(--rule)}
.waarden > div:first-child{border-left:0; padding-left:0}
.waarden b{display:block; font-family:var(--display); font-weight:600; font-size:1.12rem; letter-spacing:0; margin-bottom:2px}
.waarden span{font-size:.85rem; color:var(--ink-2); line-height:1.5; display:block}
@media(max-width:900px){
  .waarden{grid-template-columns:1fr 1fr; row-gap:26px}
  .waarden > div:nth-child(3){border-left:0; padding-left:0}
}
@media(max-width:480px){
  .waarden{grid-template-columns:1fr}
  .waarden > div{border-left:0; padding-left:0}
}
.waarden-sec{padding-block:clamp(24px,3vw,36px); border-block:1px solid var(--rule-soft)}

/* -------------------------------------------------------------- voettekst -- */
footer{background:var(--wood); color:var(--on-wood); padding-block:44px 24px; margin-top:0;
  border-top:1px solid color-mix(in srgb,var(--beige) 18%,transparent)}
.ft{display:flex; gap:40px 32px; flex-wrap:wrap; align-items:flex-start}
.ft > div{flex:1 1 200px}
.ft .mark{margin-bottom:18px; width:96px}
.ft .brand{align-items:flex-start; color:var(--on-wood); margin-bottom:18px}
.ft .brand small{color:color-mix(in srgb,var(--on-wood) 65%,transparent)}
.ft h4{
  font-family:var(--body); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--copper-hi); margin-bottom:16px;
}
.ft p,.ft li{font-size:.92rem; color:color-mix(in srgb,var(--on-wood) 80%,transparent)}
.ft ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ft a{color:var(--on-wood); text-decoration:none; border-bottom:1px solid transparent}
.ft a:hover{border-bottom-color:var(--copper-hi); color:var(--copper-hi)}
.ft-bot{
  margin-top:32px; padding-top:18px; border-top:1px solid var(--rule-wood);
  font-size:.8rem; color:color-mix(in srgb,var(--on-wood) 60%,transparent);
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between;
}

/* ------------------------------------------------------------------- 404 -- */
.leeg{min-height:40vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start}

/* ----------------------------------------------------------------- print -- */
@media print{
  .hdr,.kaart-nav,footer,.btn,.demo-btn,.demo{display:none!important}
  body,.hout{background:#fff!important; color:#000!important}
  .hout h1,.hout h2,.groep h3,.mitem .sub,.mrow .dots{color:#000!important; border-color:#999!important}
  .groepen{columns:2}
  section{padding-block:12px}
}

@media(max-width:620px){
  .hero-facts > div{white-space:normal}
  .hero-copy .btn{padding:12px 20px}
}

/* logo: subtiel in kop en voet */
.brand img{display:block; height:60px; width:auto}
.ft .brand img{height:130px}

/* zachte, warme achtergrond achter de paginakop */
.backdrop{
  background:
    radial-gradient(60% 90% at 88% 8%, color-mix(in srgb,var(--surface) 70%,transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 100%);
  padding-bottom:24px;
}

/* logo als stille terugkerende handtekening */
.pagekop{position:relative}
.pagekop::after{
  content:""; position:absolute; right:var(--gutter); top:clamp(24px,4vw,56px);
  width:clamp(130px,17vw,220px); aspect-ratio:900/782;
  background:url(../img/kop-logo-licht.png) center/contain no-repeat; opacity:.12; pointer-events:none;
}
.hout .pagekop::after{background-image:url(../img/kop-logo-licht.png); opacity:.16}
.pagekop > *{position:relative; z-index:1}
@media(min-width:900px){.pagekop h1,.pagekop .lede{max-width:calc(100% - 260px)}}
.logo-stempel{display:block; width:clamp(150px,22vw,240px); height:auto; margin:0 auto 28px}
.logo-break{padding-block:clamp(20px,3vw,36px); text-align:center}
.logo-break img{width:clamp(150px,20vw,220px); height:auto; margin-inline:auto; display:block}
.logo-break p{margin:18px auto 0; color:var(--ink-3); letter-spacing:.04em}
.cta .logo-stempel{width:clamp(130px,18vw,200px); margin-bottom:22px}
.leeg .logo-stempel{margin:0 0 24px}
@media(max-width:620px){
  .brand img{height:56px}
  .pagekop::after{width:120px; opacity:.1}
}

/* ontbijtpagina: foto's in de kijker */
.hero-ontbijt{min-height:clamp(480px,66vh,600px)}
.hero-ontbijt .hero-photo img{object-position:75% 50%}
.formule .foto{
  display:block; width:calc(100% + 48px); margin:-26px -24px 8px; max-width:none;
  aspect-ratio:16/11; object-fit:cover; border-radius:var(--r) var(--r) 0 0;
}
.formule.is-top .foto{object-position:50% 40%}
.formule{overflow:hidden}
@media(max-width:760px){.hero-ontbijt .hero-photo img{object-position:75% 50%}}

.hero-logo{
  position:absolute; z-index:1; right:clamp(24px,19%,230px); top:clamp(20px,7%,48px);
  width:clamp(150px,18vw,220px); height:auto; padding:20px 24px 18px; box-sizing:border-box;
  background:color-mix(in srgb,var(--surface) 80%,transparent); border-radius:var(--r);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 18px 40px -22px var(--shadow);
}
@media(max-width:760px){.hero-logo{right:16px; top:16px; width:96px; padding:8px 10px 6px; border-radius:var(--r-sm)}}

/* kaartpagina: grote fotokop, zelfde opbouw als de ontbijtpagina */
.hero-kaart{min-height:clamp(440px,60vh,560px)}
.hero-kaart .hero-photo img{object-position:72% 50%}
/* het verloop over de foto loopt uit in de donkere kleur van de kaartpagina */
.hout .hero-box{--paper:var(--wood); background:var(--wood)}
.hout .hero-copy .lede{color:color-mix(in srgb,var(--on-wood) 88%,transparent)}
#hoofd:focus{outline:none}

/* knop "terug naar boven" */
.naar-boven{
  position:fixed; z-index:50;
  right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:var(--cream); color:var(--espresso-nacht);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.naar-boven.zichtbaar{opacity:1; visibility:visible; transform:none}
.naar-boven:hover{background:var(--beige); transform:translateY(-2px)}
.naar-boven:active{transform:scale(.94)}
.naar-boven:focus-visible{outline:3px solid var(--cream); outline-offset:3px}
@media print{.naar-boven{display:none!important}}

/* praktisch: fotokop met de gestapelde kopjes (gespiegeld, stapel rechts) */
.hero-praktisch{min-height:clamp(440px,60vh,560px)}
.hero-praktisch .hero-photo img{object-position:70% 60%}
@media(max-width:760px){.hero-praktisch .hero-photo img{object-position:80% 50%}}
@media(max-width:760px){.hero-praktisch .hero-copy{padding-bottom:60px}}

/* praktisch: pillen met wat je moet weten (honden, rolstoel, wifi, terras, reserveren) */
.pillen{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.pillen li{display:flex}
.pil{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px 10px 14px; border-radius:999px;
  background:var(--surface); color:var(--ink);
  border:1px solid color-mix(in srgb,var(--beige) 28%,transparent);
  font-size:.92rem; font-weight:600; line-height:1.2; text-decoration:none;
}
.pil svg{flex:0 0 auto; color:var(--copper)}
.pil-link{background:var(--cream); color:var(--espresso-nacht); border-color:var(--cream);
  transition:background .2s ease, transform .2s ease}
.pil-link svg{color:var(--coffee)}
.pil-link:hover{background:var(--beige); transform:translateY(-1px)}
@media(max-width:620px){
  .pillen{gap:8px}
  .pil{font-size:.86rem; padding:9px 14px 9px 11px}
}

/* ---- gsm-verbeteringen (controle 17 oktober) ---- */
@media(max-width:760px){
  /* sterker verloop over de foto, zodat het kleine woordje en de titel leesbaar blijven */
  .hero-box::before{
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--paper) 45%,transparent) 0%,
      color-mix(in srgb,var(--paper) 78%,transparent) 26%,
      color-mix(in srgb,var(--paper) 92%,transparent) 48%,
      var(--paper) 66%);
  }
  .hero-copy{text-shadow:0 1px 14px rgba(0,0,0,.35); padding-bottom:56px}
  .hero-copy .btn{text-shadow:none}
  .hero-copy .eyebrow{color:var(--cream); opacity:.9}
}
@media(max-width:560px){
  /* fotokaartjes op de startpagina: kortere tekst zodat niets afgesneden wordt */
  .fcard-in{padding:14px 12px; padding-right:44px}
  .fcard small{font-size:.56rem; letter-spacing:.16em; margin-bottom:4px}
  .fcard h3{font-size:1.02rem; line-height:1.2; hyphens:auto}
  .fcard p{display:none}
  .fcard .plus{width:28px; height:28px; right:10px; bottom:12px; font-size:1rem}
}
@media(max-width:560px){
  .fcard-in{padding-right:12px}
  .fcard .plus{top:10px; bottom:auto; right:10px}
}

/* kaart: groep zonder tussentitel, op desktop gelijk met de buurkolom */
@media(min-width:821px){.groep.zonder-titel{padding-top:39px}}