/* Mayfair, frisse look (ronde 3, 6-10-2026). Laag bovenop stijl.css, zelfde tokens.
   Identiteit blijft: goud op donkergroen, marmer, Bodoni-koppen, Jost, het logo.
   Wat verandert: één ritme, een sterkere voorpagina (de week, Tipsy Thursday, reserveren),
   echte zaalbeelden, een kaart die op de telefoon leest, consequente knoppen. */

:root{
  --ritme:clamp(3.6rem,2rem + 4vw,6.4rem);
  --goud-donker:#6b5220;            /* goud op crème: 6,6:1 (was #8a6d2b, 4,16:1) */
  --kader:1px solid var(--lijn);
}

/* ── één verticaal ritme ─────────────────────────────────────────────── */
.sectie{padding-block:var(--ritme)}
.sectie.omhulsel + .sectie.omhulsel{padding-top:0}
.sectiekop{margin-bottom:2.4rem}
h2{font-size:clamp(2rem,1.1rem + 2.8vw,3.2rem)}

/* ── knoppen en links: overal hetzelfde ──────────────────────────────── */
.knop{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.knop:focus-visible,.knop--rand:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.tekst a:not(.knop),.verhaal p a,.faq details p a{color:var(--goud-licht);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ── voorpagina: gesplitste hero, beeld zonder tekst erover ─────────────── */
.hero--split{min-height:0;display:block;overflow:visible}
.hero--split::after{display:none}
.hero--split .hero__inhoud{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,1rem + 4vw,5rem);
  align-items:center;padding:clamp(2.6rem,1.6rem + 3vw,4.6rem) 0 clamp(1rem,.5rem + 2vw,2.4rem)}
.hero--split h1{font-size:clamp(2.7rem,1.2rem + 4.6vw,5.4rem)}
.hero__figuur{margin:0;position:relative;border:var(--kader);border-radius:3px;overflow:hidden;aspect-ratio:4/5;max-height:78svh}
.hero__figuur img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__figuur figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem .9rem;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--creme);background:linear-gradient(0deg,rgba(9,22,15,.9),transparent)}
.infolijn{margin:2rem 0 0;padding:1.1rem 0 0;border-top:var(--kader);display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  font-size:.9rem;color:var(--creme-zacht);list-style:none}
.infolijn li{display:flex;gap:.5rem;align-items:baseline}
.infolijn b{font-weight:400;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.infolijn a{color:var(--creme);text-decoration:none;border-bottom:1px solid var(--lijn)}

/* ── de week: woensdag tot zaterdag, donderdag in de hoofdrol ───────────── */
.week{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;align-items:stretch}
.week__uitgelicht{display:grid;grid-template-rows:auto 1fr;border:var(--kader);border-radius:3px;overflow:hidden;background:rgba(15,36,24,.55);
  text-decoration:none;color:inherit;transition:border-color .25s}
.week__uitgelicht:hover{border-color:var(--goud)}
.week__uitgelicht img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:center 4%}
.week__tekst{padding:1.6rem 1.6rem 1.8rem;display:grid;gap:.5rem;align-content:start}
.week__dag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud)}
.week__naam{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1.05;color:var(--creme)}
.week__tekst p{margin:0;color:var(--creme-zacht)}
.week__meer{margin-top:.6rem;color:var(--goud-licht);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase}
.week__lijst{display:grid;gap:14px;grid-template-rows:repeat(3,1fr)}
.week__rij{display:flex;justify-content:space-between;align-items:center;gap:1rem 1.6rem;padding:1.3rem 1.5rem;
  border:var(--kader);border-radius:3px;background:rgba(15,36,24,.45)}
.week__rij .week__naam{display:block;font-size:clamp(1.5rem,1.1rem + 1vw,2rem)}
.week__rij p{margin:.3rem 0 0;color:var(--creme-zacht);font-size:.92rem}
.week__tijd{flex:none;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--goud);white-space:nowrap}
.week__noot{margin:1.4rem 0 0;color:var(--creme-zacht);font-size:.92rem}

/* ── serves compacter, echte cocktailbeelden ───────────────────────────── */
.serve{min-height:0}
.serve__prijs span{font-size:.6rem}
.fotorij{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.fotorij--drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.fotorij figure{margin:0;border:var(--kader);border-radius:3px;overflow:hidden}
.fotorij img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.fotorij figure:hover img{transform:scale(1.04)}

/* ── kaart op de voorpagina: kort, met een duidelijke weg naar de volledige kaart */
.kaartkort{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(23,32,26,.14);border-bottom:1px solid rgba(23,32,26,.14)}
.kaartkort div{padding:1.4rem 1.2rem;border-left:1px solid rgba(23,32,26,.14)}
.kaartkort div:first-child{border-left:0}
.kaartkort dt{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud-donker)}
.kaartkort dd{margin:.4rem 0 0;font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:1.5rem;color:#17201a;line-height:1.15}
.kaartkort small{display:block;font-family:Jost,sans-serif;font-size:.84rem;color:rgba(23,32,26,.72);margin-top:.3rem}

/* ── kaartpagina: leesbaar op de telefoon, sprongnavigatie ─────────────── */
.licht .label,.kaart__groep h3 span,.regel__prijs{color:var(--goud-donker)}
.regel__fles{color:rgba(23,32,26,.74)}
.regel__sub{color:rgba(23,32,26,.76)}
.licht h2 em{color:var(--goud-donker)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kaartnav{position:sticky;top:72px;z-index:20;background:var(--creme);border-bottom:1px solid rgba(23,32,26,.12);margin:0 0 2rem}
.kaartnav ul{list-style:none;margin:0;padding:.5rem 0;display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none}
.kaartnav ul::-webkit-scrollbar{display:none}
.kaartnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid rgba(23,32,26,.18);border-radius:999px;
  color:#17201a;text-decoration:none;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.kaartnav a:hover,.kaartnav a:focus-visible{border-color:var(--goud-donker);color:var(--goud-donker)}
.kaart__groep{scroll-margin-top:140px}

/* ── reserveren: één vaste band boven de voet, op elke pagina ──────────── */
.reserveer{padding-block:var(--ritme) 0}
.reserveer__kader{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem 3rem;align-items:center;
  padding:clamp(1.8rem,1rem + 3vw,3.2rem);border:1px solid var(--goud);border-radius:3px;background:rgba(9,22,15,.82)}
.reserveer h2{font-size:clamp(1.9rem,1.1rem + 2.4vw,2.9rem)}
.reserveer p{margin:.8rem 0 0;color:var(--creme-zacht)}
.reserveer .knoppen{margin-top:0;justify-content:flex-end}
.sectie + .reserveer{padding-top:0}

/* ── galerij: nieuwe eigen beelden in hetzelfde raster ─────────────────── */
.galerij figure figcaption{position:absolute;inset:auto 0 0 0}

/* ── telefoon ────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .hero--split .hero__inhoud{grid-template-columns:1fr;padding-top:2.2rem}
  .hero__figuur{max-height:none}
  .week{grid-template-columns:1fr}
  .week__lijst{grid-template-rows:none}
  .fotorij{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fotorij--drie figure:first-child{grid-column:span 2}
  .fotorij--drie figure:first-child img{aspect-ratio:4/3}
  .kaartkort{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kaartkort div:nth-child(3){border-left:0}
  .kaartkort div:nth-child(n+3){border-top:1px solid rgba(23,32,26,.14)}
  .reserveer__kader{grid-template-columns:1fr}
  .reserveer .knoppen{justify-content:flex-start}
  .kaartnav{top:72px}
}
@media (max-width:760px){
  .serves{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .serve{padding:1.1rem}
  .serve:last-child:nth-child(odd){grid-column:span 2}
  .reserveer .knop{flex:1 1 30%}
  .week__rij{padding:1.1rem 1.1rem;flex-wrap:wrap}
  .serve h3{font-size:1.12rem}
  .serve p{font-size:.8rem}
  .regel{padding:.72rem 0}
  .regel__naam{font-size:1rem}
  .kaart{gap:2.4rem}
}
@media (prefers-reduced-motion:reduce){
  .fotorij img,.week__uitgelicht{transition:none}
}

/* ══ Ronde 4 (6-10-2026): wauw-hero, vier avonden, lichter ritme ══════════════════ */
/* beeldvullende hero met trage zoom; het verloop houdt de tekst op ≥ 4,5:1 */
.hero--vol{position:relative;display:flex;align-items:flex-end;min-height:560px;height:calc(100svh - 72px);max-height:1000px;overflow:hidden;isolation:isolate}
.hero--vol .hero__beeld{position:absolute;inset:0;z-index:-2}
.hero--vol .hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:55% 42%;transform-origin:60% 40%;animation:mf-zoom 22s ease-in-out infinite alternate}
@keyframes mf-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero--vol::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,22,15,.92) 0%,rgba(9,22,15,.72) 38%,rgba(9,22,15,.12) 72%),
             linear-gradient(0deg,rgba(9,22,15,.95) 0%,rgba(9,22,15,.35) 40%,transparent 62%)}
.hero--vol .hero__inhoud{display:block;padding:0 0 clamp(2.4rem,1.6rem + 3vw,4.4rem)}
.hero--vol h1{font-size:clamp(3rem,1.4rem + 4.6vw,5.8rem);max-width:12ch}
.hero--vol .hero__lead{max-width:42ch;color:var(--creme)}
.hero__week{margin:1.6rem 0 0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud-licht)}
.knop--licht{background:transparent;color:var(--creme);border:1px solid rgba(244,236,224,.55)}
.knop--licht:hover{border-color:var(--goud);color:var(--goud)}
.vanavond{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;padding:.55rem 1rem;border:1px solid var(--lijn);border-radius:999px;
  background:rgba(9,22,15,.7);font-size:.78rem;letter-spacing:.08em;color:var(--creme)}
.vanavond a{color:var(--creme);text-decoration:none}
.vanavond a:hover{color:var(--goud)}
.vanavond__punt{width:8px;height:8px;border-radius:50%;background:var(--goud);box-shadow:0 0 0 0 rgba(212,175,95,.6);animation:mf-puls 2.4s ease-out infinite}
@keyframes mf-puls{to{box-shadow:0 0 0 10px rgba(212,175,95,0)}}

/* vier avonden */
.nachten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nacht{display:grid;grid-template-rows:auto 1fr;border:var(--kader);border-radius:3px;overflow:hidden;background:rgba(15,36,24,.55);color:inherit;text-decoration:none;
  transition:border-color .25s,transform .25s}
.nacht:hover,.nacht:focus-visible{border-color:var(--goud);transform:translateY(-4px)}
.nacht--top{border-color:var(--goud)}
.nacht__beeld{display:block;aspect-ratio:4/5;overflow:hidden;background:#000}
.nacht__beeld img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.nacht:hover .nacht__beeld img{transform:scale(1.04)}
.nacht__tekst{display:grid;gap:.45rem;align-content:start;padding:1.2rem 1.2rem 1.4rem}
.nacht__dag{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud)}
.nacht__naam{font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.05;color:var(--creme)}
.nacht__uitleg{font-size:.9rem;color:var(--creme-zacht);line-height:1.55}
.nacht__uur{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--goud-licht)}
.nacht__meer{margin-top:.3rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--creme);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--goud)}

/* lichte secties: volle breedte creme zonder de opmaak te breken */
.sectie--licht{background:var(--creme);box-shadow:0 0 0 100vmax var(--creme);clip-path:inset(0 -100vmax);color:#17201a}
.sectie.omhulsel.sectie--licht + .sectie.omhulsel:not(.sectie--licht),
.sectie.omhulsel:not(.sectie--licht) + .sectie.omhulsel.sectie--licht{padding-top:var(--ritme)}
.sectie--licht h2,.sectie--licht h3:not(.tekst h3),.sectie--licht .week__naam{color:#17201a}
.sectie--licht em{color:var(--goud-donker)}
.sectie--licht .label,.sectie--licht .tekst h3,.sectie--licht .duo h3,.sectie--licht dt{color:var(--goud-donker)}
.sectie--licht p,.sectie--licht li,.sectie--licht .verhaal p,.sectie--licht .tekst p,.sectie--licht .tekst li,.sectie--licht .duo p,
.sectie--licht .sectiekop p,.sectie--licht dd{color:rgba(23,32,26,.82)}
.sectie--licht .lijst b,.sectie--licht .stappen b,.sectie--licht b{color:#17201a}
.sectie--licht a:not(.knop){color:#4f3c14;text-decoration-color:var(--goud-donker)}
.sectie--licht .knop--rand{color:#17201a;border-color:rgba(23,32,26,.35)}
.sectie--licht .knop--rand:hover{color:var(--goud-donker);border-color:var(--goud-donker)}
.sectie--licht .troeven li::before{background:var(--goud-donker)}
.sectie--licht .gegevens a{border-bottom-color:rgba(23,32,26,.3)}
.sectie--licht .verhaal__beeld,.sectie--licht .bites__beeld{border-color:rgba(23,32,26,.15)}
.sectie--licht.faq details{background:#fbf7f0;border-color:rgba(23,32,26,.16)}
.sectie--licht.faq summary{color:#17201a}
.sectie--licht.faq summary::after{color:var(--goud-donker)}
.sectie--licht.faq details p{color:rgba(23,32,26,.82)}

/* korte kaart op de home, nu op donker */
.kaart-donker .kaartkort{border-color:var(--lijn)}
.kaart-donker .kaartkort div{border-color:var(--lijn)}
.kaart-donker .kaartkort dt{color:var(--goud)}
.kaart-donker .kaartkort dd{color:var(--creme)}
.kaart-donker .kaartkort small{color:var(--creme-zacht)}

/* vaste reserveerknop op de telefoon */
.vast-reserveer{display:none}
@media (max-width:980px){
  .vast-reserveer{display:flex;gap:8px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;
    padding:8px;border:1px solid var(--lijn);border-radius:4px;background:#09160f;transition:transform .3s,opacity .3s}
  .vast-reserveer .knop{flex:1}
  .vast-reserveer--weg,html.menu-open .vast-reserveer{transform:translateY(140%);opacity:0;pointer-events:none}
  body{padding-bottom:84px}
  .nachten{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,78vw);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;margin-right:calc(-4vw);scrollbar-width:thin}
  .nacht{scroll-snap-align:start}
  .hero--vol{height:calc(100svh - 72px);min-height:600px}
  .hero--vol .hero__beeld img{object-position:38% 50%}
  .hero--vol::after{background:linear-gradient(0deg,rgba(9,22,15,.96) 0%,rgba(9,22,15,.8) 42%,rgba(9,22,15,.25) 72%,rgba(9,22,15,.35) 100%)}
}
@media (min-width:761px) and (max-width:1100px){
  .nachten{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;overflow:visible;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .hero--vol .hero__beeld img,.vanavond__punt{animation:none}
  .nacht,.nacht__beeld img{transition:none}
}

/* ── Ronde 5 (6-10-2026): shoot-hero met trage crossfade, weekpagina, woordmerken ── */
.hero__beeld--dia .hero__dia{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease-in-out}
.hero__beeld--dia .hero__dia--aan{opacity:1}
.hero__beeld--dia .hero__dia img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero__beeld--dia .hero__dia:nth-child(1) img{object-position:62% 55%}
@media (max-width:760px){.hero--vol .hero__beeld--dia img{object-position:50% 40%}}
.nacht__beeld--naam{position:relative}
.nacht__woord{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem 1rem;text-align:center;font-family:var(--kop,"Bodoni Moda",serif);font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);line-height:1.05;color:#f4ecd8;letter-spacing:.02em;
  background:linear-gradient(0deg,rgba(9,22,15,.9),rgba(9,22,15,0));pointer-events:none}
.week-intro{padding-bottom:1rem}
.weeknav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:1.6rem 0 0}
.weeknav a{display:inline-block;padding:.6rem 1rem;border:1px solid rgba(212,175,95,.5);border-radius:999px;text-decoration:none;color:inherit;font-size:.95rem}
.weeknav a:hover,.weeknav a:focus-visible{background:rgba(212,175,95,.15)}
.nacht-sectie{scroll-margin-top:90px}
.nacht-art{position:relative}
.week-video{margin-top:1rem;max-width:320px}
.nacht-video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:4px;background:#000}
@media (prefers-reduced-motion:reduce){.hero__beeld--dia .hero__dia{transition:none}.nacht-video{display:none}}
.nacht-art--tipsy{display:grid;gap:1rem;align-content:start}
.nacht-art__band img{display:block;width:100%;height:auto;border-radius:4px}
.nacht-art--tipsy .week-video{margin:0 auto;width:min(320px,70%)}

/* ── Ronde 6 (6-10-2026): hero past altijd onder de menubalk, helder beeld rechts; vier gelijke avondbeelden ── */
.hero--r6{height:auto;max-height:none;min-height:calc(100svh - 79px);align-items:center;background:#09160f}
.hero--r6 .hero__inhoud{padding:clamp(1.4rem,5vh,4rem) 0}
.hero--r6 h1{font-size:clamp(2.3rem,min(3.9vw,8vh),4.8rem);max-width:13ch}
.hero--r6 .hero__beeld--r6 img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;animation:none}
@media (min-width:761px){
  .hero--r6 .hero__beeld--r6{left:30%}
  .hero--r6::after{background:linear-gradient(90deg,#09160f 0%,#09160f 30%,rgba(9,22,15,.86) 40%,rgba(9,22,15,.5) 49%,rgba(9,22,15,0) 62%)}
}
@media (min-width:761px) and (max-height:820px){.hero--r6 .hero__week{display:none}}
@media (min-width:761px) and (max-height:640px){
  .hero--r6 .hero__lead{display:none}
  .hero--r6 h1{max-width:16ch}
  .hero--r6 .vanavond{margin-bottom:.8rem}
}
@media (max-width:760px){
  .hero--r6{align-items:flex-end;min-height:calc(100svh - 76px)}
  .hero--r6 .hero__beeld--r6{bottom:auto;height:60%}
  .hero--r6 .hero__beeld--r6 img{object-position:50% 58%}
  .hero--r6::after{background:linear-gradient(0deg,#09160f 0%,#09160f 40%,rgba(9,22,15,.88) 50%,rgba(9,22,15,.3) 62%,rgba(9,22,15,0) 74%)}
  .hero--r6 h1{font-size:clamp(1.9rem,8.6vw,2.6rem);max-width:none}
  .hero--r6 h1 br{display:none}
  .hero--r6 .hero__week{display:none}
}
@media (max-width:760px) and (max-height:740px){.hero--r6 .hero__lead{display:none}}
@media (min-width:761px){.hero--r6 .hero__lead{max-width:34ch}}

.avond{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#0b1a12;isolation:isolate;container-type:inline-size}
.avond picture{position:absolute;inset:0}
.avond .avond__foto{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.avond::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(9,22,15,.92) 0%,rgba(9,22,15,.6) 28%,rgba(9,22,15,0) 55%)}
.avond__merk{position:absolute;z-index:2;left:8%;right:8%;bottom:9%;display:flex;align-items:flex-end;justify-content:center}
.nacht__beeld .avond__merk img,.avond__merk img{height:auto;max-width:100%;object-fit:contain;transform:none!important;transition:none}
.nacht__beeld .avond__logo--sacro,.avond__logo--sacro{width:78%}
.nacht__beeld .avond__logo--tipsy,.avond__logo--tipsy{width:84%}
.nacht__beeld .avond__logo--dreamers,.avond__logo--dreamers{width:70%}
.avond__woord{font-family:"Bodoni Moda",serif;font-weight:400;color:#f4ecd8;font-size:9.6cqw;line-height:1;text-align:center;letter-spacing:.01em;white-space:nowrap}
.avond__woord i{font-style:italic;color:var(--goud-licht,#e2c27f)}
.nacht:hover .avond__foto{transform:scale(1.04)}
.nacht-art--r6{border:1px solid var(--lijn);border-radius:3px;overflow:hidden;align-self:start}
@media (prefers-reduced-motion:reduce){.avond .avond__foto{transition:none}}

/* Ronde 6b (6-10-2026): lange woorden in koppen netjes afbreken op de telefoon.
   "Cocktailworkshop" liep op 360 en 390 px buiten beeld. Werkt via lang="nl-BE" of lang="en". */
h1,h2,h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
/* Engelse koppen niet afbreken: "ultimate" werd op 768 px "ulti-mate". Nederlandse lange woorden wel. */
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3{-webkit-hyphens:manual;hyphens:manual}
/* Tablet staand (600-1023 px breed, hoger dan breed): de hero-titel schaalde met de breedte mee en werd te klein. */
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  .hero__inhoud{max-width:36rem}
  .hero__inhoud h1{font-size:clamp(2.8rem,7.4vw,4rem);line-height:1.02}
}
@media (min-width:600px) and (max-width:1023px) and (orientation:portrait){
  html body .hero .hero__beeld img{object-position:22% 50%}
}

/* ── Ronde 7 (6-10-2026): voet per taal, op de telefoon in twee kolommen ── */
.voet__rooster--r7{grid-template-columns:1.25fr repeat(4,minmax(0,.8fr)) auto;gap:2rem}
.voet__zin{margin:0;max-width:30ch;color:var(--creme-zacht);font-size:.9rem}
@media (max-width:1180px){
  .voet__rooster--r7{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:2.2rem}
  .voet__rooster--r7 .voet__merk{grid-column:1/-1}
  .voet__rooster--r7 .gevel{display:none}
}
@media (max-width:760px){
  .voet__rooster--r7{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.2rem;row-gap:1.6rem;padding-bottom:1.6rem}
  .voet__rooster--r7 .voet__merk{display:flex;align-items:center;gap:1rem}
  .voet__rooster--r7 .voet__merk img.merk{margin:0;flex:none}
  .voet__rooster--r7 .voet__zin{font-size:.85rem}
  .voet__rooster--r7 .voet__kop{margin-bottom:.2rem}
  .voet__rooster--r7 ul{gap:0;font-size:.88rem}
  .voet__rooster--r7 li{min-height:44px;display:flex;align-items:center;overflow-wrap:anywhere}
  .voet__rooster--r7 li a{display:flex;align-items:center;min-height:44px;width:100%}
  .voet__onder{flex-direction:column;align-items:flex-start;gap:.3rem}
  .voet__kol--bezoek,.voet__kol--contact{grid-column:1/-1}
  .voet__kol--bezoek{order:1}.voet__kol--avonden{order:2}.voet__kol--paginas{order:3}.voet__kol--contact{order:4}
  .voet__kol--bezoek ul,.voet__kol--contact ul{display:flex;flex-wrap:wrap;column-gap:1.4rem}
  .voet__kol--bezoek li,.voet__kol--contact li{width:auto}
  .voet__kol--bezoek li a,.voet__kol--contact li a{width:auto}
}