:root {
  --black:#0a0804;--deep:#110e08;--bark:#1e1608;
  --gold:#c8973a;--gold-lt:#e8b86d;
  --orange:#e8621a;--orange-lt:#f0894a;
  --cream:#faf2e2;--rust:#8b3a1a;
  --text:#e8d9bc;--muted:#b8a882;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',sans-serif;
  --font-jp:'Noto Serif JP',serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px}
body{background:var(--black);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}

nav.top-nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.4rem;background:rgba(10,8,4,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,151,58,.18);box-shadow:0 4px 16px rgba(0,0,0,.45)}
.nav-logo-img img{height:36px;width:auto;display:block}
.nav-hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:8px;z-index:201}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:var(--gold);transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;background:rgba(10,8,4,.97);z-index:199;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem;transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.18,1)}
.drawer.open{transform:translateX(0)}
.drawer a{font-family:var(--font-display);font-size:2.4rem;color:var(--cream);text-decoration:none;transition:color .2s}
.drawer a:hover{color:var(--gold)}
.drawer-sub{font-size:.75rem;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;margin-top:1rem}

.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6rem 1.4rem 6rem;position:relative;overflow:hidden}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,4,.85) 0%,rgba(10,8,4,.25) 35%,rgba(10,8,4,0) 70%);pointer-events:none}
.hero-content{position:relative;z-index:2;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:visible}
#logo-hero{width:clamp(200px,56vw,340px);aspect-ratio:1/1;margin:0 auto 1rem;filter:drop-shadow(0 10px 18px rgba(0,0,0,.75));flex-shrink:0}
.hero-jp{font-family:var(--font-jp);font-size:1rem;color:var(--muted);letter-spacing:.3em;margin-bottom:1.5rem}
.hero-desc{font-size:.9rem;line-height:1.75;color:#fff;font-weight:500;max-width:400px;margin:0 auto 2rem;text-shadow:0 1px 2px #000,0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.9)}
/* Zachte donkere gloed alleen achter het tekstblok, zodat de foto zelf licht blijft */
.hero-content{isolation:isolate}
.hero-content::before{content:'';position:absolute;left:50%;top:-15%;transform:translateX(-50%);width:220%;height:140%;background:radial-gradient(ellipse at center,rgba(10,8,4,.6) 0%,rgba(10,8,4,.35) 35%,rgba(10,8,4,0) 68%);z-index:-1;pointer-events:none}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.8rem;border-radius:2px;font-family:var(--font-body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:none;transition:all .25s;font-weight:500}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{background:var(--gold-lt)}
.btn-outline{background:rgba(0,0,0,.3);border:1px solid rgba(200,151,58,.5);color:var(--gold-lt)}
.btn-outline:hover{border-color:var(--gold);background:rgba(200,151,58,.08)}


section.content-section{padding:5rem 1.4rem;position:relative;overflow:hidden}
section.cs::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
section.cs > *{position:relative;z-index:2}
.section-label{font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--orange);margin-bottom:1.2rem;font-weight:500}
.section-h2{font-family:var(--font-display);font-size:2.1rem;color:var(--cream);margin-bottom:1.5rem;line-height:1.2}

.about{padding:5rem 1.4rem;position:relative;overflow:hidden;background-image:url('https://images.unsplash.com/photo-1596040033229-a9821ebd058d?w=1200&q=80');background-size:cover;background-position:center 18%}
.about::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(17,14,8,.68)}
.about p:not(.section-label){font-size:.9rem;line-height:1.9;color:var(--text);margin-bottom:1.1rem;text-shadow:0 1px 2px #000,0 2px 6px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.8)}
.about .section-h2{text-shadow:0 1px 2px #000,0 2px 8px rgba(0,0,0,.9)}

.menu-section{padding:5rem 1.4rem;position:relative;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,rgba(194,106,47,.28) 0%,rgba(194,106,47,0) 55%),radial-gradient(ellipse at 90% 100%,rgba(139,58,26,.30) 0%,rgba(139,58,26,0) 50%),#140f09}
.menu-tabs{display:flex;flex-wrap:wrap;margin-bottom:2rem;border-bottom:1px solid rgba(200,151,58,.2);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:5}
.menu-tabs::-webkit-scrollbar{display:none}
.tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:.8rem 1.2rem;font-family:var(--font-body);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;white-space:nowrap;margin-bottom:-1px;transition:color .2s,border-color .2s;position:relative;z-index:5}
.tab-btn.active{color:var(--orange);border-bottom-color:var(--orange)}
.menu-content{display:none;position:relative;z-index:3}
.menu-content.active{display:block}
.menu-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1.3rem 0;border-bottom:1px solid rgba(194,106,47,.22);gap:1rem}
.menu-item:last-child{border-bottom:none}
.menu-item-info h4{font-family:var(--font-display);font-size:1.05rem;color:var(--cream);font-weight:400;margin-bottom:.3rem}
.menu-item-info p{font-size:.78rem;color:var(--text);line-height:1.6}
.menu-item-badge{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(232,98,26,.14);color:var(--orange-lt);padding:.2rem .5rem;border-radius:1px;white-space:nowrap;margin-top:.2rem;display:inline-block}
.menu-price{font-family:var(--font-display);font-size:1.1rem;color:var(--gold-lt);white-space:nowrap;flex-shrink:0}
.menu-note{font-size:.7rem;color:var(--muted);margin-top:2rem;line-height:1.6}

.booking{padding:5rem 1.4rem;position:relative;overflow:hidden;background-size:cover;background-position:center}
.booking::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(17,14,8,.45)}
.booking-card > p{font-size:.95rem;color:var(--cream);margin-bottom:2rem;line-height:1.7}
.form-group{margin-bottom:1.3rem}
.form-group label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:.5rem;font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;background:#fbf6ec;border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:.95rem 1rem;font-family:var(--font-body);font-size:1rem;color:#1a1408;outline:none;transition:border-color .2s;-webkit-appearance:none;color-scheme:dark}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(232,98,26,.3)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#7a6e5c}
.form-group select option{background:#fff;color:#1a1408}
.form-group textarea{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.telrij{display:flex;gap:.6rem}
.telrij select{width:auto;flex:none;max-width:6.2rem;padding-left:.8rem;padding-right:.6rem}
.telrij input{flex:1;min-width:0}
.form-submit{width:100%;padding:1.1rem;margin-top:1rem;font-size:.8rem}
input[type="date"]::-webkit-calendar-picker-indicator{display:none}   /* eigen kalenderknop ernaast */
.booking-confirm{display:none;text-align:center;padding:3rem 0}
.booking-confirm .confirm-icon{font-size:2.5rem;margin-bottom:1rem}
.booking-confirm h3{font-family:var(--font-display);font-size:1.6rem;color:var(--cream);margin-bottom:.6rem}
.booking-confirm p{font-size:.88rem;color:var(--text);line-height:1.7}

.info{padding:5rem 1.4rem;position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 10%,rgba(194,106,47,.26) 0%,rgba(194,106,47,0) 55%),radial-gradient(ellipse at 10% 90%,rgba(139,58,26,.26) 0%,rgba(139,58,26,0) 50%),#0f0b06}
.info-grid{display:grid;gap:2.5rem}
.info-block{margin-bottom:2rem}
.info-block h4{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);margin-bottom:.8rem;font-weight:600}
.info-block p,.info-block a{font-size:.88rem;line-height:1.9;color:var(--text);display:block;text-decoration:none}
.info-block a:hover{color:var(--gold)}
.hours-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid rgba(194,106,47,.22);font-size:.85rem}
.hours-row:last-child{border:none}
.hours-row .day{color:var(--cream)}
.hours-row .time{color:var(--muted)}
.map-box{margin-top:2rem;text-align:center}
.map-frame{display:block;width:100%;height:280px;border:0;border-radius:4px;margin-bottom:.2rem;filter:saturate(.8) brightness(.95)}
@media (min-width:760px){.map-frame{height:340px}}
.map-box p{font-size:.82rem;color:var(--text);line-height:1.7}
.map-box a{display:inline-block;margin-top:1rem;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(232,98,26,.35);padding-bottom:.1rem}
.map-box a:hover{border-color:var(--orange)}


footer{background:linear-gradient(to bottom,#0a0804,#160d06);border-top:1px solid rgba(194,106,47,.4);padding:2.5rem 1.4rem calc(6rem + var(--safe-bottom));text-align:center}
footer img{height:36px;width:auto;margin:0 auto .75rem;display:block;opacity:.8}
footer p{font-size:.72rem;color:var(--muted);letter-spacing:.08em;line-height:2.2}
footer p a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(184,168,130,.35)}
footer p a:hover{color:var(--gold)}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:150;background:rgba(10,8,4,.96);backdrop-filter:blur(16px);border-top:1px solid rgba(200,151,58,.12);display:flex;justify-content:space-around;padding:.8rem .5rem calc(.8rem + var(--safe-bottom))}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-decoration:none;cursor:pointer;background:none;border:none;min-width:56px}
.bn-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.bn-icon svg{width:24px;height:24px;stroke:var(--muted);fill:none;transition:stroke .2s}.bn-item.active .bn-icon svg{stroke:var(--orange)}
.bn-icon svg{stroke:var(--muted);transition:stroke .2s}
.bn-item.active .bn-icon svg{stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(200,151,58,.4))}
.bn-label{font-family:var(--font-body);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.bn-item.active .bn-label{color:var(--gold)}


.about > *,.menu-section > *,.booking > *,.info > *{position:relative;z-index:2}

@media(min-width:768px){
  .bottom-nav{display:none}
  footer{padding-bottom:2.5rem}
  nav.top-nav{padding:1.5rem 3rem}
  section.cs{padding:6rem 3rem}
  .info-grid{grid-template-columns:1fr 1fr}
  #logo-hero{width:min(44vw,340px)}
}

/* Hero logo is now a div with background-image — no WP image filter interference */

/* ── Taalswitcher (toegevoegd bij Flask-overzet) ── */
.nav-right{display:flex;align-items:center;gap:.5rem;z-index:201}
.lang-switch{display:flex;gap:.1rem;align-items:center}
.lang-link{font-family:var(--font-body);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-decoration:none;padding:.2rem .28rem;transition:color .2s}
.lang-link:hover{color:var(--gold-lt)}
.lang-link.active{color:var(--gold);font-weight:500}

/* ── Desktop: inhoud centreren met leesbare max-breedte ──
   (achtergrondfoto's blijven volledige breedte; alleen de inhoud wordt smaller)
   Vervangt de niet-werkende .cs-regel uit het originele thema. */
@media(min-width:900px){
  section.content-section{
    padding-left:calc((100% - 760px)/2);
    padding-right:calc((100% - 760px)/2);
  }
  /* Info heeft twee kolommen — die mag wat breder */
  section.info{
    padding-left:calc((100% - 940px)/2);
    padding-right:calc((100% - 940px)/2);
  }
  /* Bovenbalk: logo + taal/menu niet tegen de schermranden plakken */
  nav.top-nav{
    padding-left:max(3rem, calc((100% - 1200px)/2));
    padding-right:max(3rem, calc((100% - 1200px)/2));
  }
}

/* Reserveringsformulier: meldingen + honeypot (gekoppeld aan het bord, 2026-09-07) */
.form-msg{font-size:.85rem;line-height:1.6;color:var(--orange-lt);border:1px solid rgba(232,98,26,.35);background:rgba(232,98,26,.08);padding:.8rem 1rem;margin:0 0 1rem}
.form-msg a{color:var(--cream);text-decoration:underline}
/* melding over dag/tijd/aantal direct onder die velden (02-10) */
#booking-msg-dag{margin-top:-.4rem}
/* Volle kwartieren (27-09): regel onder het tijdveld + gedempte, niet-kiesbare rijen/opties */
.form-hint{font-size:.85rem;line-height:1.6;color:var(--cream);opacity:.85;margin:-.4rem 0 1rem}
.form-hint[hidden]{display:none}
.tijdwiel-rij.vol{color:#b3a894;font-style:italic;cursor:default;pointer-events:none}
.tijdwiel-rij.vol.actief{color:#b3a894;font-weight:400;font-size:1.15rem}
.hp-veld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-submit[disabled]{opacity:.5;pointer-events:none}
/* Donkere topbar (26-09): goud als accent, geen schaduwen op logo/links */
nav.top-nav .lang-link{color:rgba(250,242,226,.6)}
nav.top-nav .lang-link:hover{color:var(--cream)}
nav.top-nav .lang-link.active{color:var(--gold)}
nav.top-nav .nav-hamburger span{background:var(--gold)}
/* Menukaart: intro en maat onder de prijs */
.menu-intro{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-lt);margin:-.6rem 0 1rem}
.menu-price{text-align:right}
.menu-price small{display:block;font-family:var(--font-body);font-size:.7rem;color:var(--muted);margin-top:.15rem}

/* Verhaal: op mobiel eerst twee alinea's, rest achter 'Lees verder' (2026-09-26) */
.about-toggle{display:none;background:none;border:0;padding:.2rem 0;margin:-.2rem 0 1rem;font-family:var(--font-body);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;border-bottom:1px solid rgba(200,151,58,.5)}
.about-more{display:none}
.about-more.open{display:block}
.about-toggle{display:inline-block}

/* Reserveren: glazen tegel over de koperfoto, lichte velden met donkere letters (2026-09-26) */
.booking-card{position:relative;z-index:2;background:rgba(17,14,8,.62);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(250,242,226,.22);border-radius:14px;padding:1.6rem 1.2rem 1.4rem;box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}
@supports not (backdrop-filter:blur(1px)){.booking-card{background:rgba(17,14,8,.86)}}
@media (min-width:760px){.booking-card{padding:2.4rem 2.4rem 2rem}}

/* Het team: cirkels met filmpje, afspeeldriehoek op de onderrand (2026-09-26) */
.team-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem .9rem;margin:1.2rem auto 3.2rem;max-width:380px}
.team-lid{margin:0;text-align:center;width:80px}
.team-knop{position:relative;display:block;width:80px;height:80px;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.team-video{display:block;width:80px;height:80px;border-radius:50%;object-fit:cover;background:#1a1408;border:2px solid rgba(217,138,74,.8);box-shadow:0 8px 22px rgba(0,0,0,.6)}
.team-knop.speelt .team-video{border-color:var(--orange)}
.team-play{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.team-play::after{content:'';position:absolute;left:10px;top:7px;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #0a0804}
.team-knop.speelt .team-play{display:none}
.team-video{margin:0 auto}
.team-lid figcaption{margin-top:.9rem;font-size:.8rem;letter-spacing:.06em;color:var(--cream)}
@media (min-width:760px){
  .team-row{gap:2rem 2.6rem;max-width:640px}
  .team-lid,.team-knop,.team-video{width:120px}
  .team-knop,.team-video{height:120px}
}

/* Footer: kleine iconen Facebook / Instagram / WhatsApp / telefoon (2026-09-26) */
.footer-icons{display:flex;justify-content:center;gap:1.4rem;margin:.4rem 0 1rem}
.footer-icons a{color:var(--muted);display:inline-flex;transition:color .2s}
.footer-icons a:hover{color:var(--gold)}
.footer-icons svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Reserveren: datum met kalenderknop + tijdwiel (2026-09-26) */
.datum-rij{display:flex;gap:.5rem;align-items:stretch}
.datum-rij input{flex:1;min-width:0}
.kalender-knop{flex:0 0 3.2rem;border:1px solid rgba(0,0,0,.25);border-radius:4px;background:#fbf6ec;color:#1a1408;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.kalender-knop svg{width:22px;height:22px}
.kalender-knop:hover,.kalender-knop:focus{border-color:var(--orange);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(232,98,26,.3)}
.tijdwiel{position:relative;height:calc(5 * 2.6rem);background:#fbf6ec;border:1px solid rgba(0,0,0,.25);border-radius:4px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 70%,transparent 100%)}
.tijdwiel[hidden]{display:none}
.tijdwiel:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,98,26,.3)}
.tijdwiel-lijst{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;padding:calc(2 * 2.6rem) 0}
.tijdwiel-lijst::-webkit-scrollbar{display:none}
.tijdwiel-rij{height:2.6rem;line-height:2.6rem;text-align:center;font-family:var(--font-body);font-size:1.15rem;color:#7a6e5c;scroll-snap-align:center;cursor:pointer;user-select:none;transition:color .15s,transform .15s}
.tijdwiel-rij.actief{color:#1a1408;font-weight:600;font-size:1.35rem}
.tijdwiel-focus{position:absolute;left:.6rem;right:.6rem;top:calc(2 * 2.6rem);height:2.6rem;border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);pointer-events:none}
.tijd-veld{width:100%;background:#fbf6ec;border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:.95rem 1rem;font-family:var(--font-body);font-size:1rem;color:#1a1408;text-align:left;cursor:pointer}
.tijd-veld[hidden]{display:none}
.tijd-veld:disabled{color:#7a6e5c;cursor:default}
.tijd-veld:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(232,98,26,.3)}
.tijd-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.tijd-overlay[hidden]{display:none}
.tijd-blad{width:100%;max-width:420px;background:#1a1408;border-radius:16px 16px 0 0;padding:1rem 1.2rem calc(1.2rem + var(--safe-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.6)}
.tijd-blad-kop{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin:0 0 .6rem;font-weight:600}
.tijd-blad .tijdwiel{margin:0}
.tijd-klaar{width:100%;margin-top:1rem;padding:1rem}

/* Opruimronde 2026-09-26: geen dividers meer, dunne lijn tussen secties; hero rechts rustiger op breed scherm */
section.content-section + section.content-section{border-top:1px solid rgba(194,106,47,.45)}
@media (min-width:900px){
  .hero-overlay{background:linear-gradient(to right,rgba(10,8,4,0) 45%,rgba(10,8,4,.5) 100%),linear-gradient(to top,rgba(10,8,4,.85) 0%,rgba(10,8,4,.25) 35%,rgba(10,8,4,0) 70%)}
}

/* Backlight (26-09, Pieter: "een sterke backlight OF een warme achtergrond, niet allebei, anders geen diepte").
   Achtergrond diep donker; per plek één gerichte lichtbron in de fotokleur (#b54c10, gemeten in de hero-muur). */
body{background:#0a0804}
.menu-section{background:#0d0906}
.info{background:#0a0804}
section.content-section + section.content-section{border-top:1px solid rgba(224,110,40,.55)}
/* lichtbron: smalle, felle band vanaf de naad die snel uitdooft */
/* elke sectie een eigen lichtval, zodat het geen herhaling wordt */
.about::after,.menu-section::after,.booking::after,.info::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.about::after{background:radial-gradient(ellipse 55% 30% at 100% 0%,rgba(224,110,40,.40) 0%,rgba(181,76,16,.12) 50%,rgba(120,45,10,0) 100%)}          /* verhaal: van rechtsboven */
.menu-section::after{background:radial-gradient(ellipse 45% 70% at 0% 40%,rgba(224,110,40,.34) 0%,rgba(181,76,16,.10) 50%,rgba(120,45,10,0) 100%)}   /* menu: van links, halverwege */
.booking::after{background:radial-gradient(ellipse 80% 35% at 50% 100%,rgba(224,110,40,.40) 0%,rgba(181,76,16,.14) 45%,rgba(120,45,10,0) 100%)}     /* reserveren: van onderaf */
.info::after{background:radial-gradient(ellipse 50% 60% at 100% 30%,rgba(224,110,40,.32) 0%,rgba(181,76,16,.10) 50%,rgba(120,45,10,0) 100%),radial-gradient(ellipse 60% 25% at 50% 0%,rgba(224,110,40,.22) 0%,rgba(120,45,10,0) 100%)}  /* info: van rechts + zacht van boven */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;z-index:1;pointer-events:none;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(224,110,40,.35),rgba(120,45,10,0))}
footer{position:relative;border-top:1px solid rgba(224,110,40,.55);background:#0a0804}
footer::after{content:'';position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none;background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(224,110,40,.55) 0%,rgba(181,76,16,.2) 45%,rgba(120,45,10,0) 100%)}
footer > *{position:relative;z-index:1}
.bottom-nav{border-top:1px solid rgba(224,110,40,.45)}
nav.top-nav{border-bottom:1px solid rgba(224,110,40,.45);box-shadow:0 4px 18px rgba(0,0,0,.5)}
.btn-gold{background:#b54c10;color:#faf2e2}
.btn-gold:hover{background:#d9611a;color:#faf2e2}
.btn-outline{border-color:rgba(224,110,40,.6);color:#e0782e}
.btn-outline:hover{border-color:#e0782e;background:rgba(181,76,16,.14)}
.section-label,.tab-btn.active,.map-box a{color:#d9611a}
.tab-btn.active{border-bottom-color:#d9611a}
.menu-price,.menu-intro{color:#e0782e}
.about-toggle{color:#e0782e;border-bottom-color:rgba(224,110,40,.6)}
.team-play{background:#b54c10}
.team-play::after{border-left-color:#faf2e2}
.info-block a:hover,.footer-icons a:hover{color:#e0782e}
.booking-card{border:1px solid rgba(224,110,40,.4);box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(224,110,40,.3)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.kalender-knop:hover,.kalender-knop:focus,.tijd-veld:focus{border-color:#b54c10;box-shadow:0 0 0 3px rgba(181,76,16,.35)}
.bn-item.active .bn-icon svg{stroke:#e0782e;filter:drop-shadow(0 0 6px rgba(181,76,16,.55))}
.bn-item.active .bn-label{color:#e0782e}
nav.top-nav .lang-link:hover,.drawer a:hover,.tab-btn:hover{color:#e0782e}
.lang-link.active,nav.top-nav .lang-link.active{color:#e0782e}
.hero-sub{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#e0782e;margin:-1.2rem auto 2rem;text-shadow:0 1px 2px #000,0 2px 6px rgba(0,0,0,.9)}

/* Sfeer: drie ronde foto's, nonchalant verspringend, eigen lichtval van linksonder (26-09) */
.sfeer{padding:3.2rem 1rem;background:#0b0805}
.sfeer::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 100% 50%,rgba(224,110,40,.36) 0%,rgba(181,76,16,.10) 50%,rgba(120,45,10,0) 100%)}  /* sfeer: van rechts */
.sfeer-rij{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:.6rem;max-width:960px;margin:0 auto}
.sfeer-knop{width:31%;max-width:250px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.sfeer-foto{display:block;width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:2px solid rgba(224,110,40,.7);box-shadow:0 14px 34px rgba(0,0,0,.65);transition:transform .2s}
.sfeer-knop:hover .sfeer-foto,.sfeer-knop:focus-visible .sfeer-foto{transform:scale(1.04)}
.sfeer-knop:nth-child(1){transform:translateY(14px) rotate(-3deg)}
.sfeer-knop:nth-child(2){transform:translateY(-16px) rotate(2deg);width:36%;max-width:290px}
.sfeer-knop:nth-child(3){transform:translateY(10px) rotate(3deg)}
/* lichtbak: foto groot over de pagina */
.lichtbak{position:fixed;inset:0;z-index:500;background:rgba(6,4,2,.94);display:flex;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
.lichtbak[hidden]{display:none}
.lichtbak img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.8);border:1px solid rgba(224,110,40,.35)}
.lichtbak-sluit{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:1rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(224,110,40,.6);background:rgba(10,8,4,.8);color:#e0782e;font-size:1.2rem;cursor:pointer}
@media (min-width:760px){.sfeer{padding:4.5rem 3rem}.sfeer-rij{gap:2rem}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* vinkje "houd me op de hoogte" onder het e-mailveld (30-09): eigen checkbox,
   want de formulierstijl haalt de browser-look weg (appearance:none) en maakt elk
   input 100% breed; standaard aangevinkt op verzoek van Pieter */
.form-group label.form-check{display:flex;align-items:flex-start;gap:.7rem;margin-top:.75rem;font-size:.86rem;line-height:1.5;color:var(--muted);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.form-group .form-check input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;flex:none;padding:0;margin:.1rem 0 0;border:1px solid rgba(0,0,0,.25);border-radius:4px;background:#fbf6ec;position:relative;cursor:pointer;color-scheme:light}
.form-group .form-check input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.form-group .form-check input[type=checkbox]:checked::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #241703;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.form-group .form-check input[type=checkbox]:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,98,26,.25)}

/* verhaal boven de menukaart (30-09); NIET .menu-intro, dat zijn de kopjes per tabblad */
.menu-verhaal{max-width:640px;margin:0 0 2.4rem}
.menu-verhaal p{font-size:.95rem;line-height:1.85;color:var(--text);margin-bottom:1rem;text-transform:none;letter-spacing:0}
.menu-verhaal p:last-child{margin-bottom:0}
/* Menukaart: tussenkopjes en compacte regels (koffie & thee, dranken; 04-10) */
.menu-kop{font-family:var(--font-body);font-size:.8rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#e0782e;margin:2.2rem 0 .3rem;padding-bottom:.5rem;border-bottom:1px solid rgba(194,106,47,.4)}
.menu-kop:first-child{margin-top:0}
.menu-groep .menu-item{padding:.6rem 0;align-items:baseline}
.menu-groep .menu-item-info h4{margin-bottom:0;font-size:1rem}
.menu-groep .menu-price{font-size:1rem}

/* Reviews (09-10): Reevuu-widget tussen menu en reserveren; effen zwart, zonder lichtval (keuze Pieter). */
.reviews{background:#000;text-align:center}
.reviews .section-label,.reviews .section-h2,.reviews #reevuu-widget{position:relative;z-index:2}
.reviews #reevuu-widget{max-width:880px;margin:0 auto}
/* Menukaart (LIVE 09-10-2026, na drie beoordelaars en Pieters correctieronde).
   Los ivoren vel op de donkere achtergrond, dubbele lijst met hoekornamenten (kaart-hoek.png uit de
   PDF), per gang kop + ondertitel + ruitje, DM Sans-namen met stippellijn naar de prijs, schildpad
   (kaart-schildpad-*.webp, sepia uit hero-wand.jpg) dat uit twee hoeken schuin naar binnen wegloopt. */
section.menu-kaart{background:#0b0805;padding:2.2rem 1rem;text-align:center}
.menu-kaart::after{background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(224,110,40,.18) 0%,rgba(120,45,10,0) 70%)}
.menu-kaart .kaart-vel{position:relative;z-index:2;max-width:980px;margin:0 auto;background:radial-gradient(ellipse 68% 60% at 50% 46%,#fffdf8 0%,#fbf6ec 45%,#f3eadb 100%);color:#111;padding:4.2rem 3.8rem 3.6rem;border-radius:2px;
  box-shadow:0 2px 0 rgba(255,235,200,.06),0 30px 70px -20px rgba(0,0,0,.8),0 10px 24px rgba(0,0,0,.55)}
.menu-kaart .kaart-vel::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:2px;mix-blend-mode:multiply;background:
  url('/static/images/kaart-schildpad-rb.webp') no-repeat right 0 top 0 / 640px auto,
  url('/static/images/kaart-schildpad-lo.webp') no-repeat left 0 bottom 0 / 640px auto}
.menu-kaart .kaart-vel::after{content:'';position:absolute;inset:30px;z-index:1;pointer-events:none;border:1px solid rgba(160,130,85,.55)}
.menu-kaart .kaart-vel > *{position:relative;z-index:2}
.menu-kaart .kaart-hoek{position:absolute;z-index:3;width:92px;height:90px;background:url('/static/images/kaart-hoek.png') no-repeat;background-size:contain;pointer-events:none}
.menu-kaart .kaart-hoek.lb{top:30px;left:30px}
.menu-kaart .kaart-hoek.rb{top:30px;right:30px;transform:scaleX(-1)}
.menu-kaart .kaart-hoek.lo{bottom:30px;left:30px;transform:scaleY(-1)}
.menu-kaart .kaart-hoek.ro{bottom:30px;right:30px;transform:scale(-1,-1)}
.menu-kaart .section-h2{color:#111;font-weight:600;margin-bottom:.35rem}
.menu-kaart .section-label{color:#111;letter-spacing:.3em;margin-bottom:.7rem}
.menu-kaart .kaart-ruit{display:block;position:relative;width:180px;height:9px;margin:0 auto 2rem}
.menu-kaart .kaart-ruit::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,transparent,#b89a6c 20%,#b89a6c 80%,transparent)}
.menu-kaart .kaart-ruit::after{content:'';position:absolute;left:50%;top:0;width:9px;height:9px;background:#b89a6c;transform:translateX(-50%) rotate(45deg)}
.menu-kaart .menu-verhaal{margin:0 auto 2.4rem;max-width:560px}
.menu-kaart .menu-verhaal p{color:#222;font-size:.92rem}
/* tabbalk: één rij, scrollbaar; op telefoon plakkend onder de bovenbalk */
.menu-kaart .menu-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;border-bottom:1px solid rgba(184,154,108,.5);margin:0 auto 2.4rem;padding:0 .5rem}
.menu-kaart .tab-btn{flex:0 0 auto;scroll-snap-align:center;color:#6b5a40;padding:.8rem .9rem}
/* gecentreerd als de rij past, scrollbaar als hij niet past (auto-marges op eerste en laatste) */
.menu-kaart .tab-btn:first-child{margin-left:auto}
.menu-kaart .tab-btn:last-child{margin-right:auto}
.menu-kaart .tab-btn.active,.menu-kaart .tab-btn:hover{color:#111;border-bottom-color:#8a6d3b}
.menu-kaart .menu-content{text-align:left;max-width:640px;margin:0 auto}
.menu-kaart .kaart-gang{font-family:var(--font-display);font-weight:600;font-size:1.7rem;color:#111;text-align:center;margin:0 0 .25rem;line-height:1.2}
.menu-kaart .menu-intro{text-align:center;color:#111;letter-spacing:.22em;font-size:.72rem;margin:0 0 .6rem}
.menu-kaart .menu-content .kaart-ruit{margin-bottom:1.4rem}
.menu-kaart .menu-content > .kaart-ruit:nth-of-type(1){margin-top:.2rem}
/* gerecht: naam, stippellijn, prijs op één regel; omschrijving eronder */
.menu-kaart .menu-item{display:grid;grid-template-columns:auto 1fr auto;column-gap:.45rem;align-items:baseline;padding:.75rem 0;border-bottom:none}
.menu-kaart .menu-item h4{grid-column:1;grid-row:1;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:#111;margin:0}
.menu-kaart .kaart-stippel{grid-column:2;grid-row:1;display:block;min-width:2rem;height:2px;background:radial-gradient(circle,#333 .6px,transparent .75px) 0 100% / 4px 2px repeat-x;transform:translateY(-3px)}
.menu-kaart .menu-price{grid-column:3;grid-row:1;font-family:var(--font-body);font-weight:600;font-size:.95rem;color:#111;text-align:right}
.menu-kaart .menu-price small{color:#6b5a40;font-weight:400}
.menu-kaart .menu-item p{grid-column:1 / -1;grid-row:2;color:#222;font-size:.9rem;line-height:1.45;margin-top:.05rem}
.menu-kaart .menu-item-badge{display:inline-block;background:none;border:1px solid #111;color:#111;font-size:.58rem;letter-spacing:.12em;padding:.05rem .35rem;margin-left:.3rem;vertical-align:baseline;position:relative;top:-1px}
/* groepen (dranken, koffie): kop in kapitalen met lijntje; op desktop twee kolommen */
.menu-kaart .kaart-groep{break-inside:avoid;margin-bottom:1.2rem}
.menu-kaart .kaart-groep summary{list-style:none;cursor:default}
.menu-kaart .kaart-groep summary::-webkit-details-marker{display:none}
.menu-kaart .menu-kop{text-align:center;color:#111;font-weight:600;letter-spacing:.18em;font-size:.72rem;border-bottom:none;margin:.6rem 0 .2rem;padding-bottom:0}
.menu-kaart .menu-kop::after{content:'';display:block;width:120px;height:1px;margin:.45rem auto 0;background:linear-gradient(90deg,transparent,#b89a6c 20%,#b89a6c 80%,transparent)}
.menu-kaart .menu-groep .menu-item{padding:.3rem 0}
.menu-kaart .menu-groep .menu-item h4{font-weight:500}
.menu-kaart .menu-note{text-align:center;color:#6b5a40;max-width:560px;margin:2.4rem auto 0}
@media(min-width:760px){
  .menu-kaart .menu-content.heeft-groepen{max-width:760px}
  .menu-kaart .kaart-groepen{columns:2;column-gap:3rem}
}
@media(max-width:640px){
  section.menu-kaart{padding:1.4rem .5rem}
  .menu-kaart .kaart-vel{border-radius:0;padding:3.4rem 1.8rem 3rem;box-shadow:0 -14px 30px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.5)}
  .menu-kaart .kaart-vel::before{background-size:420px auto,0 0}
  .menu-kaart .kaart-vel::after{inset:18px}
  .menu-kaart .kaart-hoek{width:56px;height:55px}
  .menu-kaart .kaart-hoek.lb,.menu-kaart .kaart-hoek.rb{top:18px}
  .menu-kaart .kaart-hoek.lb,.menu-kaart .kaart-hoek.lo{left:18px}
  .menu-kaart .kaart-hoek.rb,.menu-kaart .kaart-hoek.ro{right:18px}
  .menu-kaart .kaart-hoek.lo,.menu-kaart .kaart-hoek.ro{bottom:18px}
  .menu-kaart .menu-verhaal p{font-size:1rem}
  .menu-kaart .menu-tabs{position:sticky;top:60px;z-index:5;background:#f8f1e4;margin-left:-1.8rem;margin-right:-1.8rem;padding:0 1.2rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .menu-kaart .tab-btn{font-size:.85rem}
  .menu-kaart .menu-item h4,.menu-kaart .menu-price{font-size:1rem}
  .menu-kaart .menu-item p{font-size:.95rem}
  /* inklapbare groepen: alleen de kop is tikbaar, met een klein driehoekje */
  .menu-kaart .kaart-groep summary{cursor:pointer}
  .menu-kaart .kaart-groep summary.menu-kop::before{content:'▾';display:inline-block;margin-right:.4rem;font-size:.8rem;transition:transform .2s}
  .menu-kaart .kaart-groep:not([open]) summary.menu-kop::before{transform:rotate(-90deg)}
}
/* Tekstmaten (09-10, Pieter): één maat voor alle lopende DM Sans-tekst op de hele pagina, 15 px / 1,7;
   kleine tekst 12 px. (':root body' houdt dezelfde specificiteit als de vroegere tijdelijke body-klasse.) */
:root body .hero-desc,:root body .about p:not(.section-label),:root body .menu-verhaal p,
:root body .menu-kaart .menu-item p,:root body .booking-card > p,:root body .info-block p,
:root body .hours-row{font-size:15px;line-height:1.7}
:root body .booking-card > p{font-weight:400}
:root body .menu-kaart .menu-item h4,:root body .menu-kaart .menu-price{font-size:15px}
:root body .menu-note,:root body footer p,:root body .form-group label,:root body .info-block h4,
:root body .menu-price small{font-size:12px}
:root body footer p{line-height:1.9}
/* Tekstmaten, vervolg: vier vaste maten voor ALLE tekst (Pieter 09-10): lopend 15, velden 16, knoppen/tabs 13, klein 12. */
:root body .booking-card > p.section-label{font-size:12px}
:root body .booking p,:root body .info a,:root body .booking-confirm p{font-size:15px;line-height:1.7}
:root body .info-block p[style]{font-size:12px !important}
/* invoervelden: 16 px, niet lager, anders zoomt Safari op iPhone bij elk veld in */
:root body .booking input,:root body .booking select,:root body .booking option,:root body .booking textarea,
:root body .booking .tijd-veld,:root body .booking .kalender-knop{font-size:16px;font-family:var(--font-body)}
/* knoppen, tabbladen, 'Lees verder' */
:root body .btn,:root body .tab-btn,:root body .about-toggle,:root body .menu-kaart .tab-btn{font-size:13px}
:root body figcaption{font-size:13px}
/* kleine kapitalen en kleine tekst */
:root body .section-label,:root body .hero-sub,:root body .menu-intro,:root body .menu-kop,:root body .lang-link,
:root body .drawer-sub,:root body .tijd-blad-kop,:root body .map-box a,:root body .menu-kaart .menu-intro{font-size:12px}
:root body .menu-item-badge{font-size:10px}
:root body .bn-label{font-size:10px}
/* Tekstkleuren (09-10, na twee beoordelaars): vier tinten op donker, drie op de ivoren kaart.
   kop = cream #faf2e2 · lopend = text #e8d9bc · stil = #d9c9a8 (was #b8a882, te zwak op de gloed) ·
   accent = #d9611a (één oranje; op de hero-foto de lichtere #e0782e). Nergens zuiver wit. */
:root body{--muted:#d9c9a8}
:root body .hero-desc{color:var(--text);font-weight:400;text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.5)}
:root body .about p:not(.section-label){text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.5)}
:root body .about .section-h2{text-shadow:0 1px 2px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.5)}
:root body .booking-card > p:not(.section-label){color:var(--text)}
:root body .booking-card > p.section-label{color:#d9611a}
:root body nav.top-nav .lang-link{color:var(--muted);opacity:1}
:root body nav.top-nav .lang-link.active,:root body .bn-item.active,:root body .bn-item.active .bn-label,
:root body .about-toggle,:root body .tab-btn.active{color:#d9611a}
:root body .bn-item:not(.active) .bn-label{color:var(--muted)}
:root body footer p a:hover,:root body .info-block a:hover,:root body .footer-icons a:hover{color:#d9611a}
/* footer: koperen gloed de helft zwakker, de tekst stond er met contrast onder 2 op */
:root body footer::after{background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(224,110,40,.28) 0%,rgba(181,76,16,.10) 45%,rgba(120,45,10,0) 100%)}
/* Naad tussen hero en verhaal (09-10, Pieter): een smalle spleet van 14 px, bijna zwart, waar beide
   panelen een schaduw in werpen en een vleugje koperlicht doorheen komt; de panelen krijgen een dun
   verlicht randje (snijkant) zodat je de diepte in kijkt. */
.naad{position:relative;height:14px;background:#020100;z-index:4}
.naad::before{content:'';position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.9) 100%),
  radial-gradient(ellipse 45% 160% at 50% 50%,rgba(224,110,40,.22) 0%,rgba(224,110,40,0) 70%)}
.naad::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,225,190,.16) 30%,rgba(255,225,190,.16) 70%,transparent)}
.hero{box-shadow:0 10px 24px rgba(0,0,0,.85)}
.hero + .naad + .about{box-shadow:0 -10px 24px rgba(0,0,0,.85)}
.hero + .naad + .about::before{box-shadow:inset 0 1px 0 rgba(255,225,190,.14)}