/* De Klub, website v0.2
   Tokens komen uit het design system "De Klub Huisstijl". Pas waarden daar aan en neem ze hier over. */

/* Instrument Sans (SIL Open Font License, zie fonts/InstrumentSans-OFL.txt): variabel in gewicht (400 tot 700) en breedte (75 tot 100).
   Latijn plus een aanvulling voor tekens als ő en ł in wijnnamen; de browser laadt die alleen als hij nodig is. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Italic-Variable.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Ext-Variable.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Ext-Italic-Variable.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens: gemaakt door designsystem/maak_tokens.py uit designsystem/tokens.json, niet met de hand aanpassen ---------- */
:root {
  /* primitieven: grondstof, alleen gebruiken in rollen */
  --white: #ffffff;
  --neutral-25: #fffcf9;
  --neutral-50: #f6f3ec;
  --neutral-100: #f1ece2;
  --neutral-200: #e4dfd1;
  --neutral-300: #cdc7bd;
  --neutral-400: #bfb7ac;
  --neutral-500: #8f8483;
  --neutral-600: #736563;
  --neutral-700: #6a5b57;
  --neutral-800: #503f3e;
  --neutral-900: #3d302f;
  --yellow-200: #e9d69e;
  --yellow-400: #d2aa6d;
  --copper-100: #efe0d2;
  --copper-300: #bca798;
  --copper-500: #a16d52;
  --copper-600: #9d5d23;
  --copper-700: #86501e;
  --blue-100: #e6e9ef;
  --blue-700: #44516b;
  --green-100: #e3efe6;
  --green-600: #3c7a4e;
  --green-700: #2f6640;
  --amber-100: #fcf2de;
  --amber-600: #b8740f;
  --amber-700: #8a560a;
  --red-100: #f6e3df;
  --red-200: #f4c7bf;
  --red-700: #863732;
  --red-800: #6e2c28;
  --black: #000000;
  --brown-a3: rgba(80, 63, 62, 0.03);
  --brown-a12: rgba(80, 63, 62, 0.12);
  --brown-a18: rgba(80, 63, 62, 0.18);
  --brown-a20: rgba(80, 63, 62, 0.2);
  --brown-a40: rgba(80, 63, 62, 0.4);
  --brown-a94: rgba(80, 63, 62, 0.94);
  --light-a14: rgba(255, 252, 249, 0.14);
  --light-a15: rgba(255, 252, 249, 0.15);
  --light-a26: rgba(255, 252, 249, 0.26);
  --light-a35: rgba(255, 252, 249, 0.35);
  --light-a50: rgba(255, 252, 249, 0.5);
  --light-a94: rgba(255, 252, 249, 0.94);
  --dark-a50: rgba(40, 32, 32, 0.5);
  --dark-a88: rgba(30, 26, 26, 0.88);
  --amber-a35: rgba(184, 116, 15, 0.35);
  --red-a30: rgba(134, 55, 50, 0.3);
  --blue-a20: rgba(68, 81, 107, 0.2);
  --blue-a25: rgba(68, 81, 107, 0.25);
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-round: 999px;
  /* rollen, thema site */
  --bg-canvas: var(--neutral-200);
  --bg-surface: var(--neutral-25);
  --bg-hover: var(--neutral-100);
  --bg-subtle: var(--brown-a3);
  --bg-sunken: var(--neutral-100);
  --bg-badge: var(--yellow-200);
  --bg-section-light: var(--yellow-200);
  --bg-section-warm: var(--yellow-400);
  --bg-inverse: var(--blue-700);
  --bg-inverse-warm: var(--neutral-800);
  --bg-on-inverse: var(--light-a14);
  --bg-on-inverse-hover: var(--light-a26);
  --bg-on-inverse-solid: var(--neutral-25);
  --bg-on-photo: var(--light-a94);
  --bg-inverse-on-photo: var(--brown-a94);
  --bg-overlay: var(--dark-a50);
  --bg-overlay-photo: var(--dark-a88);
  --bg-overlay-light: var(--brown-a40);
  --bg-primary: var(--copper-600);
  --bg-primary-hover: var(--neutral-800);
  --bg-primary-tint: var(--neutral-100);
  --text-default: var(--neutral-800);
  --text-secondary: var(--neutral-700);
  --text-on-inverse: var(--neutral-25);
  --text-secondary-on-inverse: var(--neutral-400);
  --text-secondary-on-inverse-warm: var(--neutral-400);
  --text-on-primary: var(--white);
  --text-on-status: var(--white);
  --text-on-photo: var(--white);
  --text-accent: var(--copper-700);
  --text-link: var(--blue-700);
  --border-default: var(--brown-a12);
  --border-strong: var(--brown-a18);
  --border-link: var(--brown-a40);
  --border-link-on-inverse: var(--light-a35);
  --border-field: var(--neutral-700);
  --divider-on-inverse: var(--light-a15);
  --border-on-inverse: var(--light-a50);
  --border-focus: var(--copper-600);
  --border-focus-on-inverse: var(--yellow-400);
  --border-focus-inner: var(--white);
  --focus-glow: var(--brown-a20);
  --accent: var(--copper-500);
  --highlight: var(--yellow-400);
  --bg-success: var(--green-600);
  --bg-success-tint: var(--green-100);
  --text-success: var(--green-700);
  --icon-success: var(--green-600);
  --border-success: var(--green-600);
  --bg-warning: var(--amber-600);
  --bg-warning-tint: var(--amber-100);
  --text-warning: var(--amber-700);
  --icon-warning: var(--amber-600);
  --border-warning: var(--amber-a35);
  --border-warning-strong: var(--amber-600);
  --bg-error: var(--red-700);
  --bg-error-tint: var(--red-100);
  --text-error: var(--red-700);
  --icon-error: var(--red-700);
  --border-error: var(--red-a30);
  --border-error-strong: var(--red-700);
  --bg-info: var(--blue-700);
  --bg-info-tint: var(--blue-100);
  --text-info: var(--blue-700);
  --icon-info: var(--blue-700);
  --border-info: var(--blue-a25);
  --bg-error-hover: var(--red-800);
  --text-error-on-inverse: var(--red-200);
  --bg-info-track: var(--blue-a20);
  --space-section: clamp(48px, 7vw, 80px);
  --space-page-margin: clamp(32px, 10vw, 144px);
  --space-gutter: clamp(16px, 1.5vw, 20px);
  --space-card: var(--space-32);
  --space-cell-y: var(--space-12);
  --space-cell-x: var(--space-16);
  --space-cell-y-compact: var(--space-4);
  --space-cell-x-compact: var(--space-12);
  --radius-surface: var(--radius-2);
  --radius-button: var(--radius-22);
  --radius-badge: var(--radius-2);
  --radius-pill: var(--radius-round);
  --shadow-float: 0 2px 10px rgba(80, 63, 62, 0.25);
  --shadow-header: 0 6px 18px rgba(80, 63, 62, 0.1);
  --shadow-dialog: 0 24px 56px -12px rgba(40, 32, 32, 0.3), 0 8px 20px -6px rgba(40, 32, 32, 0.14);
  --shadow-card-lift: 0 16px 50px rgba(40, 32, 32, 0.35);
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-segment: 0 1px 2px rgba(80, 63, 62, 0.18);
  /* componenten */
  --nav-bg: var(--neutral-800);
  --nav-text: var(--neutral-25);
  --nav-item-bg-hover: var(--light-a14);
  --nav-item-bg-active: var(--light-a26);
  --nav-badge-bg: var(--yellow-400);
  --nav-badge-text: var(--neutral-800);
  --chart-actual: var(--neutral-800);
  --chart-forecast: var(--copper-600);
  --chart-limit: var(--neutral-500);
  --chart-band: var(--copper-100);
  --chart-shortfall: var(--red-700);
  --chart-shortfall-area: var(--red-200);
  --chart-ok: var(--green-600);
  --chart-warning: var(--amber-600);
  --chart-grid: var(--brown-a12);
  --chart-baseline: var(--brown-a18);
  --tt-black: #000000;
  --tt-yellow: #ffff00;
  --tt-red: #ff0000;
  --tt-green: #00ff00;
  --tt-cyan: #00ffff;
  --tt-white: #ffffff;
  /* maten, beweging, raster, tabel */
  --font-size-body: 16px;
  --size-field: 44px;
  --size-button: 40px;
  --size-nav: 56px;
  --size-switch: 26px;
  --size-badge-text: 14px;
  --size-content: 1140px;
  --size-text: 34em;
  --size-text-admin: 72ch;
  --duration-fast: 0.12s;
  --duration-base: 0.2s;
  --duration-calm: 0.3s;
  --easing: cubic-bezier(0.2, 0, 0, 1);
  --grid-columns: 12;
  --grid-columns-phone: 4;
  --font-numeric-table: tabular-nums;
  --table-line-height: 24px;
  --font-heading: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-teletext: "Bedstead", ui-monospace, monospace;
}
/* ---------- einde tokens ---------- */
/* op een telefoon een stapje smaller (20 oktober 2026): 31 in plaats van 39 px op een iPhone, iets meer ruimte voor de inhoud */
@media (max-width: 600px) { :root { --space-page-margin: 32px; } } /* 8px raster (23 oktober 2026, Wubbo): was 10vw min 8, dus 31 px op een iPhone */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: clamp(17px, 0.1vw + 16.6px, 18px);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
/* links in de tekstkleur met een zachte streep, net als in de voet; vol bij aanwijzen (20 oktober 2026). Geen blauw meer:
   dat maakte blokken met meerdere links onrustig. */
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color .15s ease; }
a:hover, a:focus-visible { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--border-focus-inner); } /* dubbele ring zoals in het beheer: werkt op beige, lichtgeel en wit */
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; } /* een deel waar een tab naartoe schuift (js/klub.js) krijgt geen ring */
.donker :focus-visible, .voet :focus-visible { outline-color: var(--border-focus-on-inverse); box-shadow: none; } /* op blauw en bruin werkt zandgeel */

.skip {
  position: absolute; left: var(--space-16); top: -64px; z-index: 20;
  background: var(--text-default); color: var(--text-on-inverse); padding: var(--space-8) var(--space-16); border-radius: var(--radius-surface);
  font-family: var(--font-heading); font-weight: 600;
}
.skip:focus { top: var(--space-16); }

/* opbouw */
.rand { padding-inline: var(--space-page-margin); }
.binnen { max-width: var(--size-content); margin-inline: auto; }
.sectie { padding-block: var(--space-section); }
.lichtgeel { background: var(--bg-section-light); }
/* 12 nov 2026: op lichtgeel een lijn in een donkerdere tint van hetzelfde geel (toon op toon); koper vond Wubbo niets */
.lichtgeel { --border-default: #d3bc7f; --border-strong: #c7ad6b; }
.lichtgeel .menuvel { --border-default: var(--brown-a12); --border-strong: var(--brown-a18); } /* het witte menuvel houdt zijn eigen lijnen (12 nov 2026, Wubbo) */
.donker { background: var(--bg-inverse); color: var(--text-on-inverse); }
/* zachte tekst in donkere secties: op Pruisisch blauw lichter (4,7:1), op Indisch bruin #bfb7ac (5,0:1); alles wat de zachte
   kleur gebruikt, past zich daar vanzelf aan (22 oktober 2026) */
.donker { --text-secondary-on-inverse: var(--neutral-300); --text-secondary: var(--text-secondary-on-inverse); }
.donker.bruin { --text-secondary-on-inverse: var(--neutral-400); }
.donker a { color: var(--text-on-inverse); }

/* typografie: koppen 650, een tikje zwaarder dan labels en knoppen (600) (20 oktober 2026) */
h1, h2, h3, h4 { font-family: var(--font-heading); color: inherit; margin: 0; text-wrap: balance; }
.display {
  font-size: clamp(44px, 5.2vw + 20px, 76px); line-height: 1; font-weight: 650;
  letter-spacing: -0.025em;
}
.kop-1 { font-size: clamp(36px, 1.6vw + 30px, 48px); line-height: 1.05; font-weight: 650; letter-spacing: -0.025em; }
.kop-2 { font-size: clamp(28px, 1vw + 24px, 36px); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }
.kop-3 { font-size: clamp(22px, 0.5vw + 20px, 26px); line-height: 1.2; font-weight: 650; }
.kop-4 { font-size: 20px; line-height: 1.3; font-weight: 600; } /* op 20px is 650 niet te onderscheiden van 600: alles op deze maat 600 (22 oktober 2026, consistentiescan) */
/* Nergens kapitalen (22 oktober 2026, Wubbo; canvas Kaarten met meer rust, ronde 2). Twee soorten labels:
   - een regel boven een grote kop (Menukaart, Menu tot en met ..., Lunch en diner met een groep): 18px Regular in de zachte kleur;
   - een label dat een blok kopt (gangnamen, Prijzen, groepen op de kaart): 20px Semibold in de tekstkleur, net groter dan de tekst eronder.
   Alleen Indisch bruin en de zachte kleur: geen blauw of koper meer in labels. */
.label { font-family: var(--font-heading); font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--text-secondary); margin: 0; } /* Medium: net iets steviger dan een onderschrift (3 november 2026, Wubbo) */
.donker .label { color: var(--text-secondary-on-inverse); }
.gang .label, .prijzen > .label, .plaat-tekst .label, .menu-meer > .label, .kaartgroep > .label {
  font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text-default);
}
.kaartgroep > .label { margin-bottom: var(--space-8); }
/* bijschrift onder een foto: de gang in Semibold, (v) in de zachte kleur */
/* onderschriften onder de foto's: gewone tekst, niet vet (23 oktober 2026, Wubbo; was 16px Semibold).
   Even groot als de lopende tekst (body), niet groter: was clamp(17px, 1.4vw, 19px), dus 19 tegen 18 px op een breed scherm (23 oktober 2026, Wubbo) */
.strook figcaption.label, .galerij figcaption { font-family: var(--font-body); font-size: clamp(17px, 0.1vw + 16.6px, 18px); line-height: 1.4; font-weight: 400; color: var(--text-secondary); } /* bijschrift onder een foto: zacht en een maat kleiner dan de tekst, ook in het archief (3 november 2026, Wubbo) */
.strook figcaption .v, .galerij figcaption .v { margin-left: var(--space-4); }
.intro { font-size: clamp(19px, 0.3vw + 18px, 21px); line-height: 1.55; }
.klein { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.donker .klein { color: var(--text-on-inverse); }
/* lopende tekst: regelafstand 1,7 en hoogstens ongeveer 70 tekens per regel (34em; ch is de breedte van een 0 en liet in
   Instrument Sans tot 90 tekens toe), met wat meer lucht tussen alinea's (22 oktober 2026, ronde 3) */
.tekst { max-width: 34em; line-height: 1.7; }
.tekst > * + * { margin-top: var(--space-24); } /* 8px raster: was 1.4em (23,8 px) */
p { margin: 0; }

/* knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: var(--space-12) var(--space-24); border-radius: var(--radius-button);
  font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  background: var(--bg-primary); color: var(--text-on-primary); border: 2px solid var(--bg-primary);
  transition: background-color .15s ease, color .15s ease;
}
.knop:hover { background: var(--bg-primary-hover); border-color: var(--bg-primary-hover); }
.knop.rustig { background: transparent; color: var(--text-default); border-color: var(--text-default); }
.knop.rustig:hover { background: var(--text-default); color: var(--bg-canvas); }
.donker .knop { background: var(--bg-canvas); color: var(--text-default); border-color: var(--bg-canvas); }
.donker .knop:hover { background: var(--bg-surface); border-color: var(--bg-surface); }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--space-16); }

/* kop van de pagina */
.kop {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-strong);
}
.kop .binnen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); min-height: 72px; }
.kop .logo img { height: 36px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav a:not(.knop) {
  font-family: var(--font-heading); font-size: 18px; font-weight: 500;
  color: var(--text-default); text-decoration: none; padding-block: var(--space-8); border-bottom: 2px solid transparent;
}
.nav a { white-space: nowrap; }
.nav a:not(.knop):hover { border-bottom-color: var(--text-default); }
.nav a:not(.knop)[aria-current="page"] { border-bottom-color: var(--text-default); } /* niet bij het cadeautje aan Reserveren op de pagina Cadeaubon (24 oktober 2026) */
.nav .knop { min-height: 44px; padding: var(--space-8) var(--space-20); }

.mobielmenu { display: none; }
/* tablet (600 tot 1199 breed): de knop Reserveren in de kop naast de menuknop, zodat je ook op een iPad altijd kunt reserveren
   zonder het menu te openen (review 21 oktober 2026); op een telefoon doet de zwevende knop dat */
.kop .kop-reserveer { display: none; }
@media (min-width: 600px) and (max-width: 1199px) {
  .kop .kop-reserveer { display: inline-flex; margin-left: auto; }
  .kop-reserveer .knop, a.kop-reserveer { min-height: 44px; padding: var(--space-8) var(--space-20); }
}
/* Reserveren met het cadeau-icoontje er vast aan (23 oktober 2026): één knop in twee delen, gescheiden door een dun licht lijntje */
.knop-splits { display: inline-flex; align-items: stretch; }
.knop-splits > .knop:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.knop-splits > .knop-cadeau {
  justify-content: center; align-items: center; border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left: 1px solid var(--border-link-on-inverse); /* dunne scheiding in de gesplitste knop */
}
.knop-splits > .knop-cadeau svg { display: block; flex: none; }
/* tooltip die meteen verschijnt bij aanwijzen of toetsenbordfocus (23 oktober 2026, Wubbo); de tooltip van de browser kwam
   pas na een seconde. Rechts uitgelijnd met de knop, zodat hij ook in het uitklapmenu niet buiten beeld valt. Voor knoppen met
   alleen een icoon: het cadeautje aan Reserveren en Teletekst in de kop. --tip-pijl zet het pijltje onder het midden van de knop. */
.met-tip { position: relative; }
.met-tip::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-surface); background: var(--text-default); color: var(--bg-canvas);
  font-family: var(--font-heading); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap;
  opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
.met-tip::before {
  content: ""; position: absolute; top: calc(100% + var(--space-4)); right: var(--tip-pijl, calc(50% - 5px)); z-index: 40; border: 5px solid transparent;
  border-top: 0; border-bottom-color: var(--text-default); opacity: 0; transition: opacity .12s ease; pointer-events: none;
}
@media (hover: hover) {
  .met-tip:hover::after, .met-tip:focus-visible::after { opacity: 1; transform: none; }
  .met-tip:hover::before, .met-tip:focus-visible::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .met-tip::after, .met-tip::before { transition: none; } }
/* Teletekst in de kop (23 oktober 2026, optie 1 van Wubbo): alleen het zwarte blokje met de vier kleuren, zodat Reserveren
   de grootste en enige gekleurde knop blijft; het woord komt als tooltip. Even hoog als Reserveren en er rechts tegenaan uitgelijnd.
   Zonder muis (aanraakscherm) staat het woord er wel, want dan is er geen tooltip. Het uitklapmenu heeft altijd het woord. */
.mobielmenu .tt-nav::after, .mobielmenu .tt-nav::before { display: none; }
@media (hover: hover) {
  .kop .nav .tt-nav { padding: 0 var(--space-12); }
  /* de tooltip van Teletekst zelf in Teletekst: zwart met geel, in Bedstead (23 oktober 2026, Wubbo; bewuste uitzondering op de huisstijl) */
  .kop .nav .tt-nav::after { background: var(--tt-black); color: var(--tt-yellow); font-family: var(--font-teletext); font-weight: 400; font-size: 15px; line-height: 1; padding: var(--space-8) var(--space-12); border-radius: 0; }
  .kop .nav .tt-nav::before { border-bottom-color: var(--tt-black); }
  .kop .nav .tt-nav .tt-woord { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.nav .knop-splits > .knop-cadeau, .kop-reserveer > .knop-cadeau, .mobielmenu .knop-splits > .knop-cadeau { padding-inline: var(--space-12) var(--space-16); }
.kop.reserveer-elders :is(.nav > .knop-splits, .kop-reserveer) > .knop-cadeau { padding-inline: var(--space-12); }
/* het mobiele menu (hamburger) tot 1200 breed: daaronder past de kop met logo, vier links, Teletekst en Reserveren niet op één regel */
@media (max-width: 1199px) {
  .nav { display: none; }
  .mobielmenu { display: block; }
  .mobielmenu summary {
    list-style: none; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 17px;
    padding: var(--space-8) var(--space-16); border: 2px solid var(--text-default); border-radius: var(--radius-button);
  }
  .mobielmenu summary::-webkit-details-marker { display: none; }
  .mobielmenu[open] summary { background: var(--text-default); color: var(--bg-canvas); }
  .mobielmenu nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg-canvas); border-bottom: 1px solid var(--border-strong);
    padding: var(--space-16) var(--space-page-margin) var(--space-32);
    display: grid; gap: var(--space-8);
  }
  .mobielmenu nav a:not(.knop) {
    font-family: var(--font-heading); font-size: 24px; font-weight: 600; color: var(--text-default);
    text-decoration: none; padding-block: var(--space-8);
  }
  .mobielmenu nav > .knop, .mobielmenu nav > .knop-splits { margin-top: var(--space-16); justify-self: start; }
  .mobielmenu nav a:not(.knop)[aria-current="page"] { justify-self: start; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; } /* waar je bent (23 oktober 2026) */
  /* open menu: dezelfde zachte laag in Indisch bruin als bij het reserveerpaneel, zodat het menu loskomt van de beige pagina.
     De kop met het menu gaat erboven, ook boven de zwevende reserveerknop; tikken op de laag sluit het menu (js/klub.js). */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 20;
    background: var(--bg-overlay-light); opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body:has(.mobielmenu[open])::after { opacity: 1; pointer-events: auto; cursor: pointer; }
  body:has(.mobielmenu[open]) .kop { z-index: 30; }
}
@media (prefers-reduced-motion: reduce) { body::after { transition: none; } }

/* home: opening */
.opening .binnen {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.opening .tekstblok { display: grid; gap: var(--space-24); }
.opening figure { margin: 0; }
.opening figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: clamp(6px, .6vw, 10px) solid var(--bg-section-warm); }
.opening .display { max-width: 11ch; }
.opening .intro { max-width: 42ch; }
.opening .intro { font-size: clamp(19px, 0.3vw + 18px, 22px); } /* welkomsttekst van de home een tikkie groter dan de andere intro's: 22px vanaf ongeveer 1340px breed, op de telefoon gelijk aan de intro (24 oktober 2026, Wubbo, canvas Menu groter op mobiel; 24px voelde te lomp) */
/* opening van de home: logo, intro, knoppen en tijden even breed als het logo, de knoppen even breed naast elkaar en
   de dagen in een eigen kolom (22 oktober 2026, canvas Homepage alles op 480px, akkoord Wubbo; dezelfde avond iets breder: 520px) */
.opening { --opening-breedte: clamp(240px, 30vw + 120px, 520px); } /* even breed als het logo, op elke schermbreedte */
.opening .intro, .opening .knoppen, .opening .feiten { max-width: var(--opening-breedte); }
@media (max-width: 820px) { /* telefoon en tablet: het grote logo staat in de kop, de rest gebruikt de volle breedte */
  .opening .knoppen, .opening .feiten { max-width: none; }
  .opening .intro { max-width: 42ch; }
}
/* breed scherm: de foto (met rand) precies zo hoog als het tekstblok, van de bovenkant van het logo tot de onderkant van de
   laatste regel openingstijden (22 oktober 2026, Wubbo). Smaller dan 1200px blijft de foto 4:5, anders wordt hij te smal. */
@media (min-width: 1200px) {
  .opening .binnen { align-items: stretch; }
  .opening .tekstblok { align-content: start; }
  .opening figure { position: relative; min-height: 100%; }
  .opening figure img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; box-sizing: border-box; }
  .opening .feiten { margin-bottom: -7px; } /* uitzondering op de schaal: tot de basislijn van de laatste regel: de cijfers staan dan precies op de onderkant van de foto */
  .opening .feiten > div:last-child { padding-bottom: 0; }
}
/* breed scherm: de opening vult het hele scherm onder de kop, zoals de kop van Cadeaubon; het geel van het menu begint pas
   na scrollen. Inhoud in het midden. Alleen op een scherm dat hoog genoeg is (3 november 2026, Wubbo). */
@media (min-width: 1200px) and (min-height: 700px) {
  .opening { min-height: calc(100svh - 73px); display: grid; align-content: center; } /* 73px: de hoogte van de vaste kop */
  .opening .binnen { width: 100%; } /* in het grid kreeg .binnen door zijn auto-marges de breedte van zijn inhoud (1088 in plaats van 1140) en stond de opening 26px naar binnen ten opzichte van de kop; nu staat het logo precies onder Menukaart (6 november 2026) */
}
.opening .knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opening .knoppen .knop { justify-content: center; text-align: center; white-space: nowrap; padding-inline: var(--space-16); }
@media (min-width: 601px) and (max-width: 1100px) { .opening .knoppen { display: flex; } .opening .knoppen .knop { padding-inline: var(--space-24); } } /* te smal voor twee even brede knoppen */
/* de dagen in een eigen kolom, overal waar openingstijden staan (22 oktober 2026, Wubbo: ook Langskomen en Kom langs) */
.feiten dt .naam { display: inline-block; min-width: 76px; }
.feiten dt .dagen { margin-left: var(--space-12); } /* plus de spatie ervoor: 16px, zoals in het ontwerp */
.feiten {
  /* openingstijden als rijen, zoals de kaarten: naam en dagen links, de tijd rechts, een lichte lijn ertussen; alles 18px,
     het verschil zit in gewicht en kleur (22 oktober 2026, ronde 3: nergens kleine letters). Past ook in een smalle kolom. */
  display: grid; max-width: 460px; margin: var(--space-8) 0 var(--space-16); /* onderkant op de schaal: de browser gaf een dl 1em (17 of 18 px) */
}
.feiten > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); padding-block: var(--space-12); border-top: 1px solid var(--border-default); }
.donker .feiten > div { border-top-color: var(--divider-on-inverse); }
.feiten dt { font-family: var(--font-heading); font-size: 18px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.feiten dt .dagen { font-weight: 400; color: var(--text-secondary); }
.feiten dd { margin: 0; font-size: 18px; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.feiten dd br { display: none; }
@media (max-width: 820px) {
  .opening .binnen { grid-template-columns: minmax(0, 1fr); }
  .opening figure { order: -1; margin-inline: calc(var(--space-page-margin) * -1); }
  .opening figure img { aspect-ratio: 16 / 10; border: 0; }
  /* het grote logo en de regel eronder boven de foto, de rest eronder */
  .opening .binnen { gap: var(--space-24); }
  .opening .tekstblok:has(.logo-groot) { display: contents; }
  .opening .logo-groot, .opening .logo-groot + .label { order: -2; }
}

/* menukaart */
.menu-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 860px) { .menu-raster { grid-template-columns: minmax(0, 1fr); } }
.sectiekop { display: grid; gap: var(--space-16); margin-bottom: var(--space-48); }
/* kop van het maandmenu: label met periode, titel, en de uitleg als lopende tekst met wat meer lucht */
#diner .sectiekop .uitleg { margin-top: var(--space-8); max-width: 56ch; font-size: clamp(19px, 0.3vw + 18px, 21px); } /* even groot als de intro, ook op desktop (24 oktober 2026, Wubbo, canvas Menu groter op mobiel) */
/* een zin onder de kop van een andere kaart (Lunch & à la carte): wanneer je ervan bestelt (21 oktober 2026) */
.kaart .sectiekop .uitleg { max-width: 56ch; }
.gangen { display: grid; gap: var(--space-24); margin: 0; padding: 0; list-style: none; }
.gang { display: grid; gap: var(--space-8); padding-top: var(--space-16); border-top: 1px solid var(--border-default); } /* subtiel, gelijk aan de kaartlijsten (20 oktober 2026) */
.gang ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.gerecht { line-height: 1.5; }
/* rechte streep tussen de ingrediënten: lichter dan de tekst, zodat de gerechten zelf voorgaan */
.streep { color: color-mix(in srgb, currentColor 35%, transparent); }
.v { font-weight: 400; color: var(--text-secondary); white-space: nowrap; } /* (v) rustig in de zachte kleur (22 oktober 2026) */
.vis-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* het menu op een witte kaart; de prijzen los en rustig op het geel ernaast (prijzen subtiel, nooit groot) */
.menuvel { background: var(--bg-surface); padding: clamp(24px, 3.5vw, 48px); } /* zonder koperen rand (22 oktober 2026) */
.menuvel .gang:first-child { border-top: 0; padding-top: 0; }
.prijzen { padding-top: clamp(24px, 3.5vw, 48px); display: grid; gap: var(--space-16); }
.prijzen > .label { margin-bottom: 0; }
.prijs { display: grid; gap: var(--space-4); padding-bottom: var(--space-16); border-bottom: 1px solid var(--border-default); }
.prijs .klein, .prijzen > .klein { font-size: 17px; } /* de regels onder een menu in één maat (22 oktober 2026) */
.prijs .klein { padding-right: 4.5em; } /* een lange toelichting (Klub Kompleet) breekt vóór de kolom met de bedragen (3 november 2026, Wubbo) */
.prijs:last-of-type { border-bottom: 0; padding-bottom: 0; }
.prijs .regel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.prijs h3 { font-size: 18px; font-weight: 600; }
.bedrag { font-family: var(--font-body); font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.wijn { color: var(--text-secondary); font-size: 17px; line-height: 1.5; font-variant-numeric: tabular-nums lining-nums; }

/* over */
.over .binnen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.over figure { margin: 0; }
.over figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.over .tekstblok { display: grid; gap: var(--space-24); position: relative; }
@media (max-width: 820px) {
  .over .binnen { grid-template-columns: minmax(0, 1fr); }
}
/* desktop: de foto staand en precies zo hoog als de tekst ernaast (22 oktober 2026, ronde 4); uitsnede op Lisa en Jasper aan tafel (6 november 2026) */
@media (min-width: 821px) {
  .over .binnen { align-items: stretch; }
  .over figure { position: relative; min-height: 100%; }
  .over figure img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 60% 50%; }
}

/* bezoek */
.bezoek .binnen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-48) clamp(24px, 4vw, 64px); }
.bezoek .sectiekop { grid-column: 1 / -1; margin-bottom: 0; }
.blok { display: grid; gap: var(--space-16); align-content: start; }
/* Langskomen rustiger (22 oktober 2026, ronde 4): kolomkoppen klein en zacht in plaats van groot en vet, toelichting zacht */
.blok-kop { margin: 0; font-family: var(--font-heading); font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--text-secondary); }
.blok .zacht, .donker .blok .klein.zacht { color: var(--text-secondary); }
/* openingstijden onder Langskomen en op Kom langs: dezelfde blokken als in de opening van de home (review W4) */
.feiten-tijden { margin-top: 0; }
.plek { margin-top: calc(var(--space-8) * -1); } /* de plek in de stad direct onder het adres (review Z7) */
address { font-style: normal; }
@media (max-width: 900px) { .bezoek .binnen { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) and (max-width: 1199px) { .bezoek .binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* drie kolommen waren te smal: de openingstijden liepen in het adres (22 oktober 2026) */

/* menupagina */
.paginakop { padding-block: var(--space-section) var(--space-48); }
.paginakop .binnen { display: grid; gap: var(--space-24); }
.tabs {
  position: sticky; top: 72px; z-index: 5; background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-strong);
}
.tabs ul { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: clamp(16px, 3vw, 40px); max-width: var(--size-content); overflow-x: auto; }
.tabs a {
  display: block; padding: var(--space-12) 0 var(--space-8); line-height: 24px; font-family: var(--font-heading); font-size: 18px; font-weight: 500; /* 12 + 24 + 8 + rand 3 (23 oktober 2026, schaal) */ /* even groot als het hoofdmenu: plek en kleur geven de rangorde (20 oktober 2026) */ color: var(--text-default); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap;
}
@media (hover: hover) { .tabs a:hover { border-bottom-color: var(--text-default); } } /* op een telefoon blijft :hover na een tik hangen; dan zag je twee lijnen */ /* lijn in Indisch bruin voor de rust (12 nov 2026, Wubbo) */
.tabs a.actief { border-bottom-color: var(--text-default); } /* de actieve tab houdt zijn lijn (12 nov 2026, Wubbo) */
/* op de menupagina staan kop (73px) en tabbalk (57px) vast: een tab springt precies tot onder de balk */
html:has([data-tabs]) { scroll-padding-top: 116px; } /* kop 72 + tabs 48, min 4 px zodat afronding nooit een streepje van het deel erboven laat zien: een tab springt precies tot de rand van zijn deel, niets van het deel erboven in beeld (12 nov 2026, Wubbo); de sectie heeft zelf genoeg lucht */
.kaart { scroll-margin-top: 0; }
.leeg {
  border: 1px dashed var(--text-default); padding: var(--space-32); display: grid; gap: var(--space-8); max-width: 65ch;
}

/* contactpagina */
.contact-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-items: start; gap: var(--space-48) clamp(32px, 5vw, 80px); }
.contact-raster figure { margin: 0; grid-row: span 2; }
.contact-raster figure { align-self: start; }
.contact-raster img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
@media (max-width: 820px) { .contact-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .contact-raster figure { grid-row: auto; } .contact-raster img { aspect-ratio: 4 / 3; } }

/* voet */
.voet { background: var(--bg-inverse-warm); color: var(--text-on-inverse); padding-block: var(--space-80) var(--space-32); }
.voet a { color: var(--text-on-inverse); }
.voet .binnen { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-32); }
.voet .logo img { height: 40px; width: auto; }
.voet .voet-regel { margin-top: var(--space-16); font-size: 16px; line-height: 1.5; color: var(--text-secondary-on-inverse); max-width: 28ch; } /* korte regel onder het logo (review 21 oktober 2026, K1) */
.voet h2 { font-size: 16px; line-height: 1.3; font-weight: 400; color: var(--text-secondary-on-inverse); margin-bottom: var(--space-8); } /* zonder kapitalen (22 oktober 2026) */
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.voet .onder { grid-column: 1 / -1; padding-top: var(--space-32); margin-top: var(--space-24); border-top: 1px solid var(--divider-on-inverse); font-size: 16px; }
@media (max-width: 820px) { .voet .binnen { grid-template-columns: 1fr 1fr; } .voet .logo { grid-column: 1 / -1; } }

/* reserveren, zwevend op mobiel */
.zwevend {
  display: none;
}
@media (max-width: 760px) {
  .zwevend {
    display: inline-flex; position: fixed; z-index: 15;
    right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-pill); box-shadow: var(--shadow-float);
    /* verschijnen en verdwijnen allebei zacht: omhoog en iets groter erin, omlaag en iets kleiner eruit (21 oktober 2026) */
  }
  .knop.zwevend { transition: opacity .35s ease, transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s, background-color .2s ease, border-color .2s ease; } /* .knop.zwevend: anders wint de overgang van gewone knoppen verderop */
  .knop.zwevend.weg { opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; visibility: hidden;
    transition: opacity .3s ease, transform .35s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .35s; }
  .voet { padding-bottom: var(--space-96); }
  /* 23 oktober 2026: de extra 72 px onder de prijzen en de laatste contactregel is weg; er staat altijd nog iets onder,
     en de voet heeft al ruimte voor de zwevende knop. Dat gaf 120 px gat op mobiel. */
  /* open uitklapmenu: de zwevende knop weg, Reserveren staat dan al in het menu (23 oktober 2026) */
  body:has(.mobielmenu[open]) .knop.zwevend { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* geen overgangen tijdens het laden: anders flitst bijvoorbeeld de onderrand in de navigatie heel even blauw
   (de overgang start vanuit de standaard linkkleur). klub.js zet 'klaar' op html na de eerste tekening. */
html:not(.klaar) *, html:not(.klaar) *::before, html:not(.klaar) *::after { transition: none !important; }
@media print { .kop, .tabs, .zwevend, .voet { display: none; } body { background: #fff; } /* papier */ }

.naschrift { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-48); }
/* pictogram voor links die in een nieuw venster openen: een lijn, geen emoji */
.icoon-uit { display: inline-block; width: .9em; height: .9em; margin-left: var(--space-4); vertical-align: -0.05em; flex: none; }

/* archief en galerij (de kaartjes van het archief staan verderop, bij "eerdere menu's als kaartjes") */
/* archiefmenu zonder foto's: lichtgeel vlak met klein het logo, even groot als de foto's ernaast */
/* zonder foto's de eend van Joost Stokhof als silhouet, zoals naast de kaarten (3 november 2026, Wubbo, canvas Lege archiefmenu's, variant D) */
.archief-leeg {
  display: grid; align-items: end; justify-items: center; aspect-ratio: 1; padding: var(--space-16); position: relative;
  background: var(--bg-section-light);
}
.archief-leeg::after {
  content: ""; position: absolute; inset: 18%; background: var(--text-default); opacity: .85;
  -webkit-mask: url("../img/eend-links.svg") no-repeat center / contain; mask: url("../img/eend-links.svg") no-repeat center / contain;
}
.archief-leeg .klein { color: var(--text-secondary); }
.galerij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-24) var(--space-gutter); align-items: start; }
/* een foto houdt in de galerij zijn eigen verhouding: vierkant blijft vierkant (afspraak met Saskia Lelieveld), staand blijft staand */
.galerij img { width: 100%; height: auto; }
.galerij figure { margin: 0; display: grid; gap: var(--space-8); }
.paginakop .label a { color: inherit; }

/* gerechten met een eigen foto (vlees en vega elk hun foto) */
.gerechten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-16); }
.gerecht.met-foto { display: grid; grid-template-columns: clamp(88px, 11vw, 144px) minmax(0, 1fr); gap: var(--space-24); align-items: center; }
.gerecht.met-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gangen.met-fotos .gerecht:not(.met-foto) { padding-left: calc(clamp(88px, 11vw, 144px) + var(--space-24)); } /* de breedte van de foto ernaast plus de goot */

/* strook met vierkante foto's, binnen de breedte van de inhoud: vier per rij op desktop */
html { overflow-x: clip; }
.strook { margin-bottom: var(--space-48); }
.strook ul {
  list-style: none; margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) 0; padding: var(--space-8) var(--space-8) var(--space-8);
  scroll-padding-inline: var(--space-8);
  display: flex; gap: var(--space-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.strook ul::-webkit-scrollbar { display: none; }
.strook li { flex: 0 0 calc((100% - 3 * var(--space-gutter)) / 4); scroll-snap-align: start; }
@media (max-width: 900px) { .strook li { flex-basis: calc((100% - 2 * var(--space-gutter)) / 3); } }
@media (max-width: 600px) { .strook li { flex-basis: 72%; } }
.strook figure { margin: 0; display: grid; gap: var(--space-8); }
.strook img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.strook-knoppen { display: flex; justify-content: flex-end; gap: var(--space-8); margin-top: var(--space-16); }
/* bladerknoppen: dunne cirkel met een getekende pijlpunt (een leesteken stond nooit precies in het midden) */
.strook-knop {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
}
.strook-knop svg, .groot-knop svg { display: block; }
.strook-knop:hover { background: var(--text-default); color: var(--bg-canvas); border-color: var(--text-default); }
.donker .strook-knop:hover { background: var(--bg-surface); color: var(--bg-inverse); border-color: var(--bg-surface); }
@media (max-width: 760px) { .strook-knoppen { display: none; } }

/* menupagina: donkere kop en tabs */
.paginakop.donker { padding-bottom: var(--space-48); }
.paginakop.donker .label { color: var(--text-secondary-on-inverse); }
.tabs.donker { background: var(--bg-inverse); border-bottom: 0; }
.tabs.donker a { color: var(--text-on-inverse); }
.tabs.donker a.actief { border-bottom-color: var(--highlight); }
@media (hover: hover) { .tabs.donker a:hover { border-bottom-color: var(--highlight); } }
/* tabs die niet passen: tot de schermrand doorlopen, met een vervaging en pijltje aan de kant waar meer staat */
.tabs-meer { display: none; }
@media (max-width: 760px) {
  .tabs.rand { padding-inline: 0; }
  .tabs ul { padding-inline: var(--space-page-margin); scroll-padding-inline: var(--space-page-margin); scrollbar-width: none; overscroll-behavior-x: contain; }
  .tabs ul::-webkit-scrollbar { display: none; }
  .tabs-meer {
    display: flex; align-items: center; position: absolute; top: 0; bottom: var(--space-4); width: 56px;
    color: var(--text-on-inverse); pointer-events: none; opacity: 0; transition: opacity .2s ease;
  }
  .tabs-meer.rechts { right: 0; justify-content: flex-end; padding-right: var(--space-8); background: linear-gradient(to right, transparent, var(--bg-inverse) 60%); }
  .tabs-meer.links { left: 0; justify-content: flex-start; padding-left: var(--space-8); background: linear-gradient(to left, transparent, var(--bg-inverse) 60%); }
  .tabs.meer-rechts .tabs-meer.rechts, .tabs.meer-links .tabs-meer.links { opacity: 1; }
}
.tijd { white-space: nowrap; }

/* menukaart: kop met foto, verwant aan de opening van de homepagina maar op blauw, liggend en met een zandgele rand */
.kopfoto .binnen { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kopfoto .tekstblok { display: grid; gap: var(--space-24); }
/* een bovenkop hoort bij de kop eronder: overal 8 px ertussen, op elk scherm (3 november 2026, Wubbo: "de labels staan te ver van de titels") */
:is(.paginakop .binnen, .tekstblok) > .label + :is(.display, .kop-1, .kop-2, .kop-3) { margin-top: calc(var(--space-8) - var(--space-24)); }
.sectiekop > .label + :is(.display, .kop-1, .kop-2, .kop-3) { margin-top: calc(var(--space-8) - var(--space-16)); }
.kopfoto .intro { max-width: 44ch; }
.kopfoto figure { margin: 0; }
.kopfoto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; border: clamp(6px, .6vw, 10px) solid var(--bg-section-warm); } /* overal zandgeel, ook op blauw (22 oktober 2026, Wubbo) */
@media (max-width: 820px) {
  .kopfoto { padding-top: 0; } /* de foto sluit aan op de kop, zoals op de homepage; geen lege kleurband erboven (review 21 oktober 2026) */
  .kopfoto .binnen { grid-template-columns: minmax(0, 1fr); }
  .kopfoto figure { order: -1; margin-inline: calc(var(--space-page-margin) * -1); }
  .kopfoto img { aspect-ratio: 16 / 9; border: 0; }
}
.gang .label .toelichting { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: var(--text-secondary); margin-left: var(--space-8); }

/* Lijstrand (21 oktober 2026, besluit Wubbo): alleen om de grote foto in de kop van een pagina (.opening op de homepage,
   .kopfoto op menukaart, Over De Klub en Groepen). Alle andere foto's op de site staan zonder rand. */

/* ---------- beweging: rustig en kort, en uit voor wie minder beweging wil ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .verschijnt { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  .verschijnt.in-beeld { opacity: 1; transform: none; }
  /* een blok dat nog moet verschijnen, wacht op zijn foto en komt er in één beweging mee binnen: geen tweede vervaging van de foto (3 november 2026) */
  .verschijnt:not(.in-beeld) img.zacht { transition: none; }
  /* gerechten en wijnen op de kaarten verschijnen onderin beeld kleiner en korter dan grote blokken (22 oktober 2026) */
  .kaartlijst .item.verschijnt { transform: translateY(10px); transition-duration: .6s; }

  /* openingsfoto en paginakop komen bij het laden zacht binnen */
  @keyframes binnenkomen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes vervagen { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
  .opening .tekstblok > *, .paginakop:not(.kopfoto) .binnen > *, .kopfoto .tekstblok > * { animation: binnenkomen .7s cubic-bezier(.2, .7, .2, 1) both; }
  .opening .tekstblok > :nth-child(2), .paginakop .binnen > :nth-child(2), .kopfoto .tekstblok > :nth-child(2) { animation-delay: .06s; }
  .opening .tekstblok > :nth-child(3), .paginakop .binnen > :nth-child(3), .kopfoto .tekstblok > :nth-child(3) { animation-delay: .12s; }
  .opening .tekstblok > :nth-child(4) { animation-delay: .18s; }
  .opening .tekstblok > :nth-child(5) { animation-delay: .24s; }
  .opening figure img, .kopfoto figure img { animation: vervagen 1.1s cubic-bezier(.2, .7, .2, 1) both; }

  /* foto's in de rij en het archief tillen licht op */
  .groot[open] { animation: vervagen .25s ease both; }

  /* onderstrepingen in menu en tabs groeien mee */
  .nav a:not(.knop), .tabs a { transition: border-color .2s ease, color .2s ease; }

  /* knoppen voelen aan */
  .knop { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; }
  .knop:active, .strook-knop:active { transform: scale(.97); }
  .strook-knop { transition: background-color .2s ease, color .2s ease, transform .15s ease; }

  /* mobiel menu schuift open */
  .mobielmenu[open] nav { animation: binnenkomen .25s ease both; }

  /* kop krijgt schaduw na scrollen */
  .kop { transition: box-shadow .25s ease; }
}

.kop.gescrold { box-shadow: var(--shadow-header); }

/* Foto's zacht (22 oktober 2026, zie het script in de kop): zolang een foto laadt is hij onzichtbaar, met een rustig vlak
   in een tint van de tekstkleur op zijn plek; daarna vloeit hij in. De kopfoto wacht met zijn inkomanimatie tot hij er is. */
img.laadt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { img.zacht { transition: opacity .5s ease; } }
:is(.opening, .kopfoto) figure:has(img.zacht), .plaat-fotos:has(img.zacht), .vergroot:has(> img.zacht), .buur-beeld:has(> img.zacht) {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* met een onderschrift (Groepen) alleen het vlak van de foto zelf, niet achter het onderschrift (3 november 2026, Wubbo).
   11 november 2026: de regel hierboven woog zwaarder (:is() telt als klasse, plus :has(img.zacht)), dus stond het vlak toch
   achter het onderschrift; nu met :has(img.zacht) erbij, zodat deze regel wint. */
.kopfoto figure:has(figcaption):has(img.zacht) { background: none; }
.kopfoto figure:has(figcaption) .lijst:has(img.laadt) { background: color-mix(in srgb, currentColor 8%, transparent); }
:is(.opening, .kopfoto) figure img.laadt { animation-play-state: paused; }

/* foto's zijn klikbaar om groot te bekijken */
.vergroot { display: block; cursor: zoom-in; }
.vergroot:focus-visible { outline-offset: 4px; }
.strook-knop:disabled { opacity: .3; cursor: default; }
.strook-knop:disabled:hover { background: transparent; color: inherit; border-color: currentColor; }
.strook-knoppen[hidden] { display: none; }

dialog.groot { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.groot::backdrop { background: var(--bg-overlay-photo); }
dialog.groot figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: var(--space-16); padding: var(--space-64) var(--space-72); }
dialog.groot img { max-width: min(100%, 86vh); max-height: calc(100vh - 160px); object-fit: contain; border: clamp(4px, .5vw, 8px) solid var(--bg-canvas); }
dialog.groot figcaption { color: var(--text-on-inverse); font-size: 16px; text-align: center; max-width: 60ch; }
.groot-knop {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: var(--radius-pill);
  border: 1.5px solid var(--text-on-inverse); background: transparent; color: var(--text-on-inverse); cursor: pointer;
}
.groot-knop:hover { background: var(--bg-surface); color: var(--text-default); }
.groot-knop.sluit { top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; }
.groot-knop.vorige { left: 16px; top: 50%; transform: translateY(-50%); }
.groot-knop.volgende { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  dialog.groot figure { padding: var(--space-64) var(--space-12) var(--space-96); }
  .groot-knop.vorige, .groot-knop.volgende { top: auto; bottom: 24px; transform: none; }
  .groot-knop.vorige { left: calc(50% - 56px); } .groot-knop.volgende { right: calc(50% - 56px); }
}

/* lunch & a la carte en wijnkaart: rustige lijst, prijzen klein */
.kaartgroepen { display: grid; gap: var(--space-32); max-width: 760px; }
/* soort wijn als echte tussenkop: groter dan de wijnnamen, kleiner dan de titel van de kaart */
.kaartgroep > .kop-2 { margin: 0 0 var(--space-16); }
/* wijnkaart: glas en fles in twee vaste kolommen van 56px, de icoontjes glas en fles erboven naast de soort (22 oktober 2026) */
.kaartgroep-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-16); margin: 0 0 var(--space-16); }
.kaartgroep-kop .kop-2 { margin: 0; }
.glas-fles, .kaartlijst .wijnprijs { display: grid; grid-template-columns: 56px 56px; justify-items: end; }
.glas-fles { color: var(--text-secondary); line-height: 1; padding-bottom: var(--space-2); }
.glas-fles svg { display: block; }
.kaartlijst .prijs-klein.wijnprijs { gap: 0; align-content: start; }
.kaartgroepen:has(> .kaartgroep > .kop-2), .kaartgroepen:has(.kaartgroep-kop), .kaartgroepen.kaartkolommen { gap: var(--space-48); } /* kaartkolommen: op mobiel onder elkaar, Borrel kreeg 32 px (23 oktober 2026) */
/* wijnkaart per land binnen een soort (23 oktober 2026): zachte regel, zoals de regel boven een kop */
/* 23 oktober 2026, Wubbo: de zachte regel was te subtiel, bij het scannen las je eroverheen. Nu de blokkop van de huisstijl
   (20px Semibold in de tekstkleur, zoals de gangnamen) met een lijn eronder in de tekstkleur en meer lucht erboven. */
.kaartland { font-family: var(--font-heading); font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text-default);
  margin: var(--space-64) 0 0; padding-bottom: var(--space-8); border-bottom: 1px solid var(--border-link); }
.kaartgroep-kop + .kaartland, .kop-2 + .kaartland { margin-top: var(--space-24); } /* 23 oktober 2026, Wubbo: iets meer lucht tussen soort en land, zoals tussen land en eerste wijn */
.kaartland + .kaartlijst > .item:first-child { border-top: 0; }
.kaartlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24); }
.kaartlijst .klein { font-size: 17px; } /* omschrijvingen groter en zacht: rustiger dan klein (22 oktober 2026, ronde 2) */
.kaartlijst .item { padding-top: var(--space-24); border-top: 1px solid var(--border-default); } /* lichter (22 oktober 2026): de kleur van de tekst geeft nu de rangorde */
/* de prijs in een eigen kolom rechts, glas en fles onder elkaar, met lucht tot de naam (22 oktober 2026, ronde 3) */
.kaartlijst .item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 40px); row-gap: 0; align-items: baseline; }
.kaartlijst .regel { display: contents; }
.kaartlijst .item > :not(.regel) { grid-column: 1; margin: var(--space-4) 0 0; line-height: 1.55; } /* afstand met marge, niet met row-gap: lege rijen naast de prijs tellen dan niet mee */
.kaartlijst .naam { grid-column: 1; line-height: 1.45; }
.kaartlijst .prijs-klein { grid-column: 2; grid-row: 1 / span 4; display: grid; gap: var(--space-4); justify-items: end; align-content: start; line-height: 1.45; }
/* telefoon: de prijs alleen naast de naam, de omschrijving over de hele breedte (22 oktober 2026, Wubbo op de iPhone) */
@media (max-width: 640px) {
  .kaartlijst .prijs-klein { grid-row: 1; }
  .kaartlijst .item > :not(.regel) { grid-column: 1 / -1; }
}
.kaartlijst .naam { font-weight: 600; }
.kaartlijst .naam .klein { font-weight: 400; } /* inhoud (375 ml) niet vet: alleen de naam is vet (22 oktober 2026) */
.prijs-klein { font-size: 17px; font-weight: 400; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.kaartlijst .zacht { color: var(--text-secondary); font-style: italic; } /* alleen tijdens lunch, toeslagen */
.archief-gangen { margin-bottom: var(--space-section); max-width: 760px; }

/* alleen in de lokale versie: plek voor een foto die nog gekoppeld moet worden */
.foto-open { aspect-ratio: 1; display: grid; place-items: center; text-align: center; border: 2px dashed var(--accent); background: rgba(255, 252, 249, 0.5); /* half doorzichtig gebroken wit op de foto erachter */ color: var(--text-accent); font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.3; }

/* bladeren tussen eerdere menu's: ouder links, nieuwer rechts, de vaste uitgangen in het midden */
.archief-blader { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-16); margin-top: var(--space-32); }
.archief-blader > :first-child { justify-self: start; }
.archief-blader > :last-child { justify-self: end; }
.blader-midden { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16); }
.blader-knop { gap: var(--space-8); }
.blader-knop[rel="prev"] { padding-left: var(--space-16); }
.blader-knop[rel="next"] { padding-right: var(--space-16); }
.blader-pijl { display: inline-flex; flex: none; }
@media (max-width: 760px) {
  .archief-blader { grid-template-columns: 1fr 1fr; align-items: stretch; gap: var(--space-12); }
  .archief-blader > :is(*, :first-child, :last-child) { justify-self: stretch; }
  .archief-blader .knop { width: 100%; padding-inline: var(--space-12); text-wrap: balance; text-align: center; }
  .blader-midden { grid-column: 1 / -1; grid-row: 2; display: grid; justify-content: stretch; gap: var(--space-16); }
}

/* voet: adres als link naar de routebeschrijving, maker van de site rechts onderin */
.voet address { font-style: normal; }
.voet .route { display: inline-block; margin-top: var(--space-8); white-space: nowrap; }
.voet .onder { display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }

/* Reserveren: het paneel van Zenchef kunnen we niet stylen. Zodat het beige paneel loskomt van de beige grond: een zachte laag in Indisch bruin over de pagina zolang het paneel
   open is (Zenchef geeft het venster dan een klasse met "opened"). Een schaduw om het venster werkte niet in Safari. */
.reserveer-laag { position: fixed; inset: 0; z-index: 2147483000; background: var(--bg-overlay-light); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
body:has(iframe[src*="bookings.zenchef.com"][class*="opened"]) .reserveer-laag { opacity: 1; pointer-events: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .reserveer-laag { transition: none; } }
/* op een telefoon staat het paneel van Zenchef rechts uitgelijnd (links meer ruimte dan rechts, gezien door Wubbo op zijn
   iPhone, 23 oktober 2026). Zolang het open is: midden in beeld, met de breedte die Zenchef zelf kiest. Alleen bij open,
   want dicht schuift Zenchef het paneel zelf uit beeld. */
@media (max-width: 767px) {
  iframe[src*="bookings.zenchef.com"][class*="opened"] { left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ---------- pagina's Over De Klub en Groepen ---------- */
/* kop met foto, zelfde opbouw als home en menukaart; Over op lichtgeel, Groepen op Indisch bruin met een staande foto */
.kopfoto.lichtgeel img { border-color: var(--bg-section-warm); }
.bruin { background: var(--bg-inverse-warm); }
.kopfoto.bruin .binnen { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.kopfoto.bruin img { aspect-ratio: 4 / 5; object-position: center 40%; border-color: var(--bg-section-warm); }
.kopfoto .intro p { margin: 0; }
@media (max-width: 820px) { .kopfoto.bruin .binnen { grid-template-columns: minmax(0, 1fr); } .kopfoto.bruin img { aspect-ratio: 4 / 3; object-position: center 22%; } } /* deur en het bordje Privé in beeld (review 21 oktober 2026) */

/* lopende tekst in een leesbare kolom, met de laatste korte alinea groot als slotzin */
.verhaal .tekst { display: grid; gap: var(--space-24); max-width: 34em; }
.verhaal .tekst p { margin: 0; }
.slotzin {
  margin: var(--space-72) 0 0; max-width: 26ch; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(26px, 2.4vw + 12px, 40px); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-default); /* tekstkleur, geen koper (22 oktober 2026) */
}

/* Over De Klub: de eend uit de huisstijl rechts naast het verhaal, als stil silhouet in een tint net donkerder
   dan de beige grond (20 oktober 2026). Alleen als er naast de tekstkolom ruimte is. */
.verhaal-illustratie { display: none; }
@media (min-width: 1000px) {
  .verhaal .binnen:has(> .verhaal-illustratie) { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); }
  .verhaal .binnen:has(> .verhaal-illustratie) > :not(.verhaal-illustratie) { grid-column: 1; }
  .verhaal-illustratie {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
    width: calc(100% + var(--space-page-margin)); max-width: 680px; margin-right: calc(-1 * var(--space-page-margin)); aspect-ratio: 171 / 160;
    background: color-mix(in srgb, var(--bg-canvas), var(--text-default) 9%);
    -webkit-mask: url("../img/eend-links.svg") no-repeat center / contain; mask: url("../img/eend-links.svg") no-repeat center / contain;
  }
}

/* het team: groepsfoto breed, portretten als staande fotostrook */
.teamfoto { margin: 0 0 var(--space-32); }
.teamfoto img { display: block; width: 100%; height: auto; }
.strook.team img { aspect-ratio: 3 / 4; }
.slotblok { display: grid; gap: var(--space-24); justify-items: start; }

/* groepen: drie sfeerbeelden van de kelder */
.fotodrie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gutter); }
.fotodrie figure { margin: 0; }
.fotodrie img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 700px) { .fotodrie { grid-template-columns: minmax(0, 1fr); } .fotodrie figure:not(:first-child) { display: none; } }

/* contact: goed om te weten */
.weetjes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-48) clamp(32px, 5vw, 72px); }
.weetje { display: grid; gap: var(--space-8); align-content: start; }
.weetje p { margin: 0; }

/* getekend icoon in plaats van een emoji in teksten uit het beheer */
.icoon { display: inline-block; vertical-align: -0.25em; margin-right: var(--space-8); color: var(--text-accent); }
.icoon svg { display: block; width: 1.25em; height: 1.25em; }

/* cadeaubon: een smalle, rustige band op home, onder Langskomen */
.cadeau { padding-block: var(--space-48); border-bottom: 1px solid var(--border-default); } /* 48 boven en onder: de regel staat in het midden tussen de foto's erboven en het einde van de sectie (Wubbo, 28 oktober 2026) */ /* alle inhoudslijnen 12 procent; alleen de vaste kop en de tabs 18, die lopen over foto's (22 oktober 2026) */
.cadeau .binnen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-32); }
.cadeau .kop-4 { margin: 0; }

/* pagina Cadeaubon (24 oktober 2026, canvas Cadeaubonnen De Klub, richting A gekozen door Wubbo). De bonnen staan als een kaart,
   zoals de prijzen op de menukaart: naam Semibold, omschrijving en prijzen Regular in de tweede maat. Elke prijs is een link
   naar die bon bij Zenchef; de kolommen (voor wie, bedrag, pijltje) zijn vast, zodat alle bedragen onder elkaar staan. */
.cadeaukop img { aspect-ratio: 3 / 4; object-position: center; }
.cadeaubonnen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-gutter); align-items: start; }
.cadeaubonnen > .cadeau-zij { grid-column: 1 / span 4; }
.cadeaubonnen > :last-child { grid-column: 6 / span 7; }
.cadeau-zij h2 { margin: 0; }
.cadeau-zij .uitleg { margin: var(--space-16) 0 0; font-size: var(--maat-intro, 19px); line-height: 1.7; max-width: 22em; } /* uitleg onder een sectiekop: intro op desktop; op de telefoon zet .tekst hem op de maat van de lopende tekst (25 oktober 2026) */
.bonnen > .item:first-child { border-top: 0; padding-top: 0; } /* geen lijn boven de eerste bon (12 nov 2026, Wubbo) */
.bonnen .item > p { max-width: 28em; }
.bonnen .prijs-klein { gap: 0; justify-items: stretch; }
.bonprijs { display: grid; grid-template-columns: 6.5em 4.5em 16px; column-gap: var(--space-8); align-items: baseline; min-height: 32px; color: var(--text-secondary); text-decoration: none; }
.bonprijs:only-child { grid-template-columns: auto auto 16px; justify-content: end; }
.bonprijs .bedrag { justify-self: end; font-size: inherit; color: var(--text-default); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--border-link); }
.bonprijs:hover .bedrag, .bonprijs:focus-visible .bedrag { text-decoration-color: currentColor; }
.bonprijs .icoon-uit { align-self: center; color: var(--text-default); }
.cadeau-zenchef { margin: var(--space-32) 0 0; color: var(--text-secondary); font-size: var(--maat-tweede, 17px); max-width: 30em; }
.cadeau-weten-kop { margin: 0 0 var(--space-32); }
.cadeau-weetjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.cadeau-weetjes > div { padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
.cadeau-weetjes h3 { margin: 0 0 var(--space-8); display: flex; align-items: center; gap: var(--space-8); } /* lijnicoon links van de kop, zoals Goed om te weten op contact (12 nov 2026) */
.cadeau-weetjes p { margin: 0; line-height: 1.7; }
@media (max-width: 820px) {
  .cadeaukop img { aspect-ratio: 16 / 9; object-position: center 60%; }
  .cadeaubonnen { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); }
  .cadeaubonnen > .cadeau-zij, .cadeaubonnen > :last-child { grid-column: 1; }
  .cadeau-weetjes { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
}
/* telefoon: naam, omschrijving, dan de prijzen als regels over de volle breedte, elk een tikdoel van 48 px */
@media (max-width: 640px) {
  .bonnen .item { grid-template-columns: minmax(0, 1fr); }
  .bonnen .naam { grid-row: 1; }
  .bonnen .item > p { grid-row: 2; }
  .bonnen .prijs-klein { grid-column: 1 / -1; grid-row: 3; margin-top: var(--space-12); white-space: normal; }
  .bonprijs, .bonprijs:only-child { grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; min-height: 48px; }
  /* geen lijntjes tussen de prijsregels: alleen de lijn tussen de bonnen (24 oktober 2026, Wubbo: te veel lijntjes) */
}

/* illustratie van Joost Stokhof naast lunch en wijn: groot, vast bovenaan naast de kaart en loopt rechts van de pagina af.
   Onder 1200 breed (tablet en mobiel) staat de vogel groot boven de kop, ook rechts van de pagina af. */
.illustratie { margin: 0; }
/* telefoon en tablet (20 oktober 2026): de vogels zijn stille silhouetten en staan achter de kaart, elk op een open plek,
   rechts en deels over de rand van het scherm:
   - de eend (Lunch & à la carte) precies op de overgang van de vorige sectie naar deze, half in het lichtgeel erboven;
   - de haan (Wijnkaart) in het lege vlak naast de korte kop Wijnkaart, tot aan Wit;
   - de kalkoen (Rood) op de overgang van de witte naar de rode wijnen, in de witruimte boven de kop Rood. */
@media (max-width: 1199px) {
  .kaart:has(> .binnen > .illustratie), .kaart:has(.illustratie-groep) { overflow-x: clip; }
  .kaart > .binnen:has(> .illustratie), .kaartgroep:has(> .illustratie-groep) { position: relative; }
  .kaart > .binnen:has(> .illustratie) > :not(.illustratie), .kaartgroep:has(> .illustratie-groep) > :not(.illustratie-groep) { position: relative; z-index: 1; }
  .kaart > .binnen > .illustratie, .kaartgroep > .illustratie-groep {
    display: block; position: absolute; top: 0; right: calc(-1 * var(--space-page-margin)); margin: 0; pointer-events: none; z-index: 0;
  }
  .illustratie img, .illustratie-groep img { height: clamp(230px, 40vw + 80px, 400px); width: auto; max-width: none; display: block; }
  .vogel-eend { top: calc(-1 * var(--space-section)) !important; transform: translate(22%, -64%); } /* zoveel mogelijk in het lege deel rond de overgang */
  .vogel-haan { transform: translate(8%, -34%); } /* iets kleiner en hoger: past in het vlak naast Wijnkaart, tot aan Wit */
  .vogel-haan img { height: clamp(190px, 26vw + 90px, 300px); }
  .vogel-kalkoen { transform: translate(22%, -50%); }
}
@media (min-width: 1200px) {
  .kaart:has(> .binnen > .illustratie) { overflow-x: clip; }
  .kaart > .binnen:has(> .illustratie) { display: grid; grid-template-columns: minmax(0, 760px) minmax(22vw, 1fr); column-gap: clamp(40px, 6vw, 96px); }
  .kaart > .binnen:has(> .illustratie) > .sectiekop { grid-column: 1; grid-row: 1; }
  .kaart > .binnen:has(> .illustratie) > :not(.sectiekop):not(.illustratie) { grid-column: 1; grid-row: 2; }
  .illustratie { display: block; grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .illustratie img { height: clamp(450px, 41vw, 767px); width: auto; max-width: none; transform: translateX(-20px); } /* zelfde hoogte voor eend en haan */
}
/* tweede vogel naast een groep (de kalkoen bij de rode wijnen): alleen op desktop, in dezelfde kolom als de haan, op de hoogte van de groepkop */
.illustratie-groep { display: none; margin: 0; }
@media (min-width: 1200px) {
  .kaartgroep:has(> .illustratie-groep) { position: relative; }
  .illustratie-groep { display: block; position: absolute; top: 0; left: calc(100% + clamp(40px, 6vw, 96px)); pointer-events: none; }
  .illustratie-groep img { height: clamp(450px, 41vw, 767px); width: auto; max-width: none; transform: translateX(-20px); }
}

/* makers samen rechts in de voet: illustraties en website */
.voet .makers { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-32); }

/* ingang naar De Klub op Teletekst: een zwart blokje met gele letters in de vaste kop (weer sinds 23 oktober 2026) */
@font-face { font-family: "Bedstead"; src: url("../teletekst/fonts/bedstead.woff2") format("woff2"); font-display: swap; }
/* Teletekst is een knipoog, Reserveren blijft de hoofdzaak. 20 oktober 2026: in rust zonder zwart vlak, in de tekstkleur.
   23 oktober 2026 (wens van Lisa): ook in rust in de kleuren van Teletekst, geel op zwart, iets kleiner dan Reserveren.
   Bij aanwijzen schuift het knopje op. */
.nav a.tt-nav, .tt-nav {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-16) 0; border: 0; border-radius: var(--radius-button); /* rond zoals de andere knoppen (6 november 2026, Wubbo) */
  background: var(--tt-black); color: var(--tt-yellow); text-decoration: none; font: 15px/1 var(--font-teletext); letter-spacing: 0;
  transition: background-color .15s ease, color .15s ease;
}
.nav a.tt-nav:hover, .tt-nav:hover, .tt-nav:focus-visible { background: var(--tt-black); color: var(--tt-yellow); border: 0; }
.nav a.tt-nav { align-self: center; height: 44px; min-width: var(--kop-icoonknop); justify-content: center; } /* precies zo hoog als de knop Reserveren ernaast (44 px; stretch gaf 47; 6 november 2026) */
/* het losse cadeautje (zolang Reserveren in de opening in beeld is) even breed als Teletekst, en die twee dichter bij elkaar:
   16 px in plaats van de gewone ruimte tussen de links (6 november 2026, Wubbo) */
.kop { --kop-icoonknop: 60px; }
.kop .nav > .tt-nav + .knop-splits { margin-left: calc(var(--space-16) - clamp(16px, 2.2vw, 32px)); }
.kop.reserveer-elders :is(.nav > .knop-splits, .kop-reserveer) > .knop-cadeau { min-width: var(--kop-icoonknop); }

/* Teletekst als schakelaar: zet de pagina waar je bent om. Sinds 23 oktober 2026 (gekozen door Wubbo, variant D) de vier
   gekleurde knoppen van de afstandsbediening (rood, groen, geel, cyaan) voor het woord. Bij aanwijzen springen ze een voor een op,
   alsof je erop drukt. */
.tt-nav { gap: var(--space-8); }
.tt-schakel { display: inline-flex; gap: var(--space-4); flex: none; }
.tt-schakel i { display: block; width: 6px; height: 14px; }
.tt-schakel i:nth-child(1) { background: var(--tt-red); } .tt-schakel i:nth-child(2) { background: var(--tt-green); }
.tt-schakel i:nth-child(3) { background: var(--tt-yellow); } .tt-schakel i:nth-child(4) { background: var(--tt-cyan); }
.tt-nav:hover .tt-schakel i, .tt-nav:focus-visible .tt-schakel i { animation: tt-druk .5s ease both; }
.tt-nav:hover .tt-schakel i:nth-child(2), .tt-nav:focus-visible .tt-schakel i:nth-child(2) { animation-delay: .07s; }
.tt-nav:hover .tt-schakel i:nth-child(3), .tt-nav:focus-visible .tt-schakel i:nth-child(3) { animation-delay: .14s; }
.tt-nav:hover .tt-schakel i:nth-child(4), .tt-nav:focus-visible .tt-schakel i:nth-child(4) { animation-delay: .21s; }
@keyframes tt-druk { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tt-nav:hover .tt-schakel i, .tt-nav:focus-visible .tt-schakel i { animation: none; } }

/* openingsblok op home: op een smal scherm de dagen kort ("Di t/m zo"), zodat Keuken open op één regel blijft;
   schermlezers horen altijd de lange versie */
.open-kort { display: none; }
@media (max-width: 560px) {
  .open-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .open-kort { display: inline; }
}

/* kop op telefoon en tablet: het logo wordt nooit platgedrukt; Teletekst staat daar in het uitklapmenu (zie verderop) */
.kop .logo { flex: none; line-height: 0; }
@media (max-width: 1199px) {
  .kop .binnen { gap: var(--space-12); }
  .kop .logo img { height: 30px; }
}

/* homepage: één logo (20 oktober 2026), zie js/klub.js.
   Breed scherm: bovenaan staat het logo groot in de opening en staan de menulinks links in de kop (Teletekst en
   Reserveren rechts). Zodra je scrolt, schuift het logo omhoog naar zijn plek in de kop en schuiven de links naar
   rechts. Het grote logo in de opening is dan een onzichtbare plaatshouder; wat je ziet is steeds het logo uit de kop.
   Smal scherm en zonder JavaScript: groot logo in de opening, het kleine logo in de kop verschijnt pas na scrollen. */
.logo-groot { margin: 0; line-height: 0; }
.logo-groot img { width: var(--opening-breedte, clamp(240px, 30vw + 120px, 520px)); height: auto; } /* even breed als het blok eronder */
.opening .logo-groot + .label { margin-top: 0; } /* iets meer lucht tussen logo en regel eronder (20 oktober 2026) */
.opening .label { font-weight: 400; } /* onder het grote logo blijft de regel Regular: meer contrast met het logo, rustiger (3 november 2026, Wubbo) */
.kop[data-logo-later] .logo { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.kop[data-logo-later].logo-zichtbaar .logo { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .kop[data-logo-later] .logo, .kop[data-logo-later].logo-zichtbaar .logo { transition: none; } }

/* kop op brede schermen, op alle pagina's (20 oktober 2026): de menulinks direct naast het logo,
   Teletekst en Reserveren rechts. Op de homepage schuiven de links zo maar een klein stukje opzij. */
@media (min-width: 1200px) {
  .kop .binnen { gap: clamp(32px, 3vw, 48px); }
  .kop .nav { flex: 1; }
  .kop .nav .tt-nav { margin-left: auto; }
}
/* De vier menulinks (6 november 2026, voorstel D2 van het canvas Navigatie in de kop, keuze Wubbo). Bovenaan de home staan ze
   links op de inhoudsrand, als regel precies boven het grote logo (de kop en de opening delen .binnen), 22px met 40 ertussen
   in een kop van 88. Zodra het logo naar de kop gaat, schuiven ze op dezelfde curve op tot direct naast het logo (de breedte
   van het logo plus de gewone ruimte in de kop) en naar de gewone maten (18px, 32, kop 72): --logo-p uit js/klub.js. In het
   midden stonden ze even (dezelfde avond), maar dat was uit balans; naast het logo hoort het, zoals op de andere pagina's,
   waar het logo al in de kop staat en de links alleen krimpen over de eerste 160px scrollen (--nav-p). Alleen breed scherm. */
html { --nav-p: 0; --logo-p: 0; --kop-pos: 1; --kop-maat: var(--nav-p); }
html:has(.kop.logo-morph) { --kop-pos: var(--logo-p); --kop-maat: var(--logo-p); }
/* breed scherm zonder morph (6 november 2026): zolang het grote logo in beeld is, staan de links op de inhoudsrand en is de kop
   hoog; zodra het kleine logo verschijnt, schikt alles zich in één korte overgang */
html:has(.kop[data-logo-later]:not(.logo-morph):not(.logo-zichtbaar)) { --kop-pos: 0; --kop-maat: 0; }
.kop[data-logo-later]:not(.logo-morph):not(.logo-zichtbaar) { border-bottom-color: transparent; box-shadow: none; }
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .kop[data-logo-later]:not(.logo-morph) .binnen { transition: min-height .3s ease; }
  .kop[data-logo-later]:not(.logo-morph) .nav .nav-midden { transition: left .3s ease, gap .3s ease; }
  .kop[data-logo-later]:not(.logo-morph) .nav .nav-midden a { transition: font-size .3s ease, border-color .2s ease; }
  .kop[data-logo-later]:not(.logo-morph) { transition: box-shadow .3s ease, border-color .3s ease; }
}
.nav-midden { display: contents; } /* in het uitklapmenu en op een smal scherm: alsof de groep er niet is */
@media (min-width: 1200px) {
  .kop .binnen { position: relative; min-height: calc(88px - 16px * var(--kop-maat)); }
  .kop .nav .nav-midden {
    position: absolute; top: 50%; transform: translateY(-50%);
    left: calc(var(--kop-pos) * (var(--kop-logo, 36px) * 140 / 34 + clamp(32px, 3vw, 48px))); /* de plek van het logo in de kop (breedte 140:34 van de hoogte) plus de ruimte van .kop .binnen */
    display: flex; align-items: center; gap: calc(40px - 8px * var(--kop-maat));
  }
  .kop .nav .nav-midden a { font-size: calc(22px - 4px * var(--kop-maat)); }
}
.kop.logo-morph { --kop-logo: 36px; }
@media (max-width: 1199px) { .kop.logo-morph { --kop-logo: 30px; } }
.kop.logo-morph .logo, .kop.logo-morph.logo-zichtbaar .logo { opacity: 1; visibility: visible; transform: none; transition: none; position: relative; width: calc(var(--kop-logo) * 140 / 34); height: var(--kop-logo); }
/* hoogte en positie zet js/klub.js per scrollstap; echte hoogte in plaats van scale, zodat de svg scherp blijft */
.kop.logo-morph .logo img { display: block; position: absolute; top: 0; left: 0; width: auto; max-width: none; height: var(--kop-logo); }
.kop.logo-morph:not(.logo-klein) { border-bottom-color: transparent; box-shadow: none; }
html:has(.kop.logo-morph) .opening .logo-groot img { visibility: hidden; }
html:has(.kop.logo-morph) .opening .tekstblok > .logo-groot { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .kop.logo-morph { transition: box-shadow .3s ease, border-color .3s ease; }
  .kop.logo-morph .nav a:not(.knop):not(.tt-nav) { transition: border-color .2s ease; }
}

/* ---------- overgangen tussen pagina's (20 oktober 2026) ----------
   Met view transitions van de browser zelf (Chrome, Edge, Safari 18.2 en nieuwer; in andere browsers gewoon
   direct, zoals altijd). De kop blijft staan, het logo glijdt naar zijn plek op de nieuwe pagina (op de homepage
   van groot in de opening naar klein in de kop en terug), en de inhoud vervaagt zacht en komt een fractie omhoog. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kop { view-transition-name: kop; }
  .kop .logo img { view-transition-name: logo; }
  /* elke link in de kop een eigen naam, zodat hij naar zijn nieuwe plek glijdt in plaats van dubbel te staan */
  .kop .nav > a:nth-child(1) { view-transition-name: kop-link-1; }
  .kop .nav > a:nth-child(2) { view-transition-name: kop-link-2; }
  .kop .nav > a:nth-child(3) { view-transition-name: kop-link-3; }
  .kop .nav > a:nth-child(4) { view-transition-name: kop-link-4; }
  .kop .nav > a:nth-child(5) { view-transition-name: kop-link-5; }
  .kop .nav > a:nth-child(6) { view-transition-name: kop-link-6; }
  ::view-transition-group(kop-link-1), ::view-transition-group(kop-link-2), ::view-transition-group(kop-link-3),
  ::view-transition-group(kop-link-4), ::view-transition-group(kop-link-5), ::view-transition-group(kop-link-6) {
    animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .35, 1);
  }
  /* de oude pagina blijft gewoon staan en de nieuwe komt er zacht overheen: als ze allebei half doorzichtig zijn,
     schemert de witte achtergrond van de browser erdoor en flikkert de hele pagina */
  /* eerst weg, dan erin (22 oktober 2026): de oude pagina is in 0,16 s weg en de nieuwe komt er een fractie later in, zodat
     je nooit twee koppen door elkaar ziet. Daarachter staat beige (::view-transition hieronder), dus er schemert geen wit door. */
  ::view-transition-old(root) { animation: pagina-uit .16s ease-out both; }
  ::view-transition-new(root) { animation: pagina-in .38s cubic-bezier(0, 0, .2, 1) .08s both; }
  @keyframes pagina-uit { to { opacity: 0; } }
  ::view-transition-group(kop) { animation-duration: .35s; }
  ::view-transition-group(logo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  ::view-transition-old(logo), ::view-transition-new(logo) { height: 100%; }
  @keyframes pagina-in { from { opacity: 0; transform: translateY(10px); } }
  /* kaartje wordt plaat (22 oktober 2026): de foto van het aangeklikte kaartje groeit uit tot dezelfde foto op de nieuwe
     pagina (of krimpt terug). De oude foto blijft de hele weg zichtbaar en de nieuwe komt er pas aan het eind overheen,
     zodat je nooit een leeg vlak ziet als de grote foto nog laadt. Bijsnijden in plaats van uitrekken. */
  ::view-transition-group(menufoto) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  ::view-transition-old(menufoto), ::view-transition-new(menufoto) { height: 100%; object-fit: cover; }
  ::view-transition-old(menufoto) { animation: none; }
  ::view-transition-new(menufoto) { animation: menufoto-in .2s .35s ease both; }
  /* staat de foto op een van de twee pagina's niet in beeld, dan gewoon zacht weg of erbij */
  ::view-transition-old(menufoto):only-child { animation: menufoto-uit .2s ease both; }
  ::view-transition-new(menufoto):only-child { animation: menufoto-in .35s ease both; }
  @keyframes menufoto-in { from { opacity: 0; } }
  /* bladeren naar een ouder of nieuwer menu (22 oktober 2026): de pagina schuift een stukje opzij, als een bladzijde.
     Ouder menu (pijl links): de nieuwe pagina komt van links; nieuwer: van rechts. De kop blijft staan.
     De grond achter de overgang is beige, zodat er bij het overvloeien geen wit doorschemert. */
  ::view-transition { background: var(--bg-canvas); }
  html.blader-ouder::view-transition-old(root) { animation: blader-weg-rechts .45s cubic-bezier(.4, 0, .2, 1) both; }
  html.blader-ouder::view-transition-new(root) { animation: blader-van-links .45s cubic-bezier(.4, 0, .2, 1) both; }
  html.blader-nieuwer::view-transition-old(root) { animation: blader-weg-links .45s cubic-bezier(.4, 0, .2, 1) both; }
  html.blader-nieuwer::view-transition-new(root) { animation: blader-van-rechts .45s cubic-bezier(.4, 0, .2, 1) both; }
  @keyframes blader-weg-rechts { to { opacity: 0; transform: translateX(48px); } }
  @keyframes blader-weg-links { to { opacity: 0; transform: translateX(-48px); } }
  @keyframes blader-van-links { from { opacity: 0; transform: translateX(-48px); } }
  @keyframes blader-van-rechts { from { opacity: 0; transform: translateX(48px); } }

  /* terug van Teletekst (22 oktober 2026): Teletekst dooft uit in het zwart en de site komt er rustig uit op, alles tegelijk
     (ook kop en logo), zoals een tv die van kanaal wisselt, maar zonder harde zap */
  html.van-teletekst::view-transition { background: var(--tt-black); }
  html.van-teletekst::view-transition-old(*) { animation: pagina-uit .22s ease-out both; }
  html.van-teletekst::view-transition-new(*) { animation: tt-site-in .5s cubic-bezier(.2, .7, .2, 1) .16s both; }
  html.van-teletekst::view-transition-group(*) { animation: none; }
  @keyframes tt-site-in { from { opacity: 0; filter: brightness(.6); } }
  @keyframes menufoto-uit { to { opacity: 0; } }
  /* binnengekomen via een overgang: de eigen inkomanimaties van opening en paginakop overslaan, anders komt de inhoud
     na de overgang nog een keer in stukjes binnen (dat voelde als een hapering) */
  .via-overgang .opening .tekstblok > *, .via-overgang .paginakop .binnen > *, .via-overgang .kopfoto .tekstblok > *,
  .via-overgang .opening figure img, .via-overgang .kopfoto figure img { animation: none; }
}

/* telefoon en tablet (20 oktober 2026): in de kop alleen het logo en een lichte hamburger. "Menu" als woord kon gelezen
   worden als de menukaart; voor schermlezers heet de knop nog steeds Menu. Teletekst staat op mobiel in het uitklapmenu. */
@media (max-width: 1199px) {
  .mobielmenu summary {
    display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; margin-right: -10px; /* uitzondering op de schaal: het icoon van 24 px precies op de marge */
  }
  .mobielmenu[open] summary { background: transparent; color: var(--text-default); }
  .hamburger, .hamburger::before, .hamburger::after { display: block; width: 24px; height: 2px; background: currentColor; }
  .hamburger { position: relative; transition: background-color .2s ease; }
  .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; transition: transform .25s ease; }
  .hamburger::before { transform: translateY(-7px); }
  .hamburger::after { transform: translateY(7px); }
  .mobielmenu[open] .hamburger { background: transparent; }
  .mobielmenu[open] .hamburger::before { transform: rotate(45deg); }
  .mobielmenu[open] .hamburger::after { transform: rotate(-45deg); }
  /* in het uitklapmenu precies op de lijn van de links erboven, ook bij aanwijzen: dan alleen het schakelaartje dat opschuift,
     geen zwart vlak dat buiten de lijn steekt */
  .mobielmenu nav a.tt-nav {
    display: inline-flex; justify-self: start; margin: var(--space-16) 0 0; padding: var(--space-2) var(--space-12) 0; min-height: 44px;
    background: var(--tt-black); color: var(--tt-yellow); font: 17px/1 var(--font-teletext);
  }
  .mobielmenu nav a.tt-nav:hover, .mobielmenu nav a.tt-nav:focus-visible { background: var(--tt-black); color: var(--tt-yellow); }
  /* Reserveren onderaan in het uitklapmenu, de plek waar de duim het makkelijkst komt (23 oktober 2026, Wubbo); Teletekst erboven */
  /* tussen Contact, Teletekst en Reserveren dezelfde zichtbare ruimte als tussen de links erboven, ongeveer 44 px van letter tot
     letter of knop (23 oktober 2026, Wubbo); de links hebben 8 px boven en onder, de knoppen niet, vandaar de extra marge.
     Op de schaal: tussen de links 8, voor Teletekst 16, voor Reserveren 32 (zichtbaar 43, 43 en 40 px; precies gelijk kan niet op de schaal) */
  .mobielmenu nav .tt-nav + .knop, .mobielmenu nav .tt-nav + .knop-splits { margin-top: var(--space-32); }
}

/* homepage op mobiel: bovenaan staat het logo groot in de kop zelf, links naast de hamburger en met de bovenkanten
   op één lijn. Bij scrollen krimpt het op zijn plek tot kopmaat (js/klub.js). */
@media (max-width: 820px) {
  html.js:has(.kop[data-logo-later]) .opening { padding-top: 0; }
  html.js:has(.kop[data-logo-later]) .opening .logo-groot { margin-top: -59px; } /* uitzondering op de schaal, uitlijnen:  kop 73 px hoog, logo 14 px van de bovenkant, net als de hamburger */
  html.js:has(.kop[data-logo-later]) .opening .logo-groot img { width: min(calc(100% - 64px), 360px); }
  /* html.js staat er al in de kop van de pagina (bouw.py), vóór de eerste tekening; met .logo-morph (gezet door klub.js onderaan)
     stond het logo eerst 59px lager en sprong het omhoog zodra het script liep (6 november 2026) */
}

/* mobiel menu open of dicht: het logo krimpt of groeit dan in een korte overgang (js/klub.js, logo-overgang) */
@media (prefers-reduced-motion: no-preference) {
  .kop.logo-morph.logo-overgang .logo img { transition: height .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); }
}

/* menukaart: de vogels als stil silhouet, net als de eend op Over De Klub (20 oktober 2026). De afbeelding houdt maat en
   plaats; de tekening zelf schuift buiten beeld en het silhouet komt uit een masker met dezelfde svg (--vorm in de html),
   in Indisch bruin op 9%: zo is het op elke grond net een tint donkerder. */
.illustratie img, .illustratie-groep img {
  object-position: -99999px 0; background: var(--bg-inverse-warm); opacity: .09;
  -webkit-mask: var(--vorm) no-repeat center / contain; mask: var(--vorm) no-repeat center / contain;
}

/* voet rustiger (20 oktober 2026): links houden een streep, maar dun en zacht; vol wit bij aanwijzen.
   Het adres is gewone tekst, alleen Routebeschrijving linkt. De kleine lettertjes onderin een tint lichter. */
.voet a {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: var(--space-4);
  text-decoration-color: var(--border-link-on-inverse); transition: text-decoration-color .15s ease;
}
.voet a:hover, .voet a:focus-visible { text-decoration-color: currentColor; }
.voet .onder { color: var(--text-secondary-on-inverse); }
.voet .onder a { color: var(--text-on-inverse); } /* de namen licht, de rest zacht (22 oktober 2026) */

/* telefoon (20 oktober 2026): knoppen in de inhoud over de hele breedte, makkelijker te raken en rustiger onder elkaar.
   Alleen de zwevende reserveerknop blijft compact: over de hele breedte zou hij de inhoud eronder afdekken. */
@media (max-width: 600px) {
  main .knop { display: flex; width: 100%; }
  main .knoppen { flex-direction: column; width: 100%; justify-self: stretch; align-self: stretch; }
  .opening .knoppen { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .mobielmenu nav > .knop, .mobielmenu nav > .knop-splits { justify-self: stretch; } /* Reserveren in het uitklapmenu ook over de hele breedte */
  .mobielmenu nav .knop-splits > .knop:first-child { flex: 1; justify-content: center; }
}

/* eerdere menu's als kaartjes (20 oktober 2026): gebroken wit, foto bovenaan, titel met pijltje eronder. Op een telefoon
   twee naast elkaar en vierkante foto's, zodat het archief geen eindeloze rij schermvullende foto's meer is. */
.archief { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-gutter); } /* display: grid stond in een regel die op 21 oktober als dubbel werd opgeruimd; teruggezet */
.archief li { min-width: 0; }
.archief li { display: flex; }
.archief a {
  display: flex; flex-direction: column; width: 100%; gap: 0; background: var(--bg-surface); color: var(--text-default); text-decoration: none;
  box-shadow: 0 1px 2px rgba(80, 63, 62, .06); /* bewust: een zweem rand om de archiefkaartjes, geen schaduw */
}
.archief img, .archief-leeg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } /* vierkante tegel: een vierkante foto wordt nooit bijgesneden */
.archief .kop-4 {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8);
  padding: var(--space-16) var(--space-16) var(--space-24); font-size: 18px; line-height: 1.25; text-wrap: balance;
}
.archief .kop-4::after { content: "→"; font-weight: 400; color: var(--text-accent); transition: transform .2s ease; }
.archief a:hover .kop-4 { text-decoration: none; }
.archief a:hover .kop-4::after { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .archief a { transition: transform .2s ease, box-shadow .2s ease; }
  .archief a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--border-default); }
}
@media (max-width: 600px) {
  .archief { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .archief img, .archief-leeg { aspect-ratio: 1; }
  .archief .kop-4 { padding: var(--space-16) 12px; font-size: 16px; }
  .archief-leeg { padding: var(--space-8); }
}

/* titel van een archiefkaartje op één regel; js/klub.js kort hem alleen in als dat nodig is */
.archief .titel { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archief .titel.breekt { white-space: normal; overflow: visible; } /* past ook de kortste vorm niet, dan op twee regels in plaats van afgekapt (23 oktober 2026) */
.archief .kop-4::after { flex: none; } /* het pijltje blijft altijd binnen het kaartje */

/* paginakoppen op een telefoon iets kleiner, zodat "Van maandmenu" (en vergelijkbare koppen) op één regel past en de kop
   op twee regels blijft, ook in Safari dat net breder rendert (20 oktober 2026) */
@media (max-width: 600px) { .display { font-size: min(44px, calc(9.5vw + 1px)); } } /* ruim 5% speling */

/* Groepen: de drie mogelijkheden bovenaan in één oogopslag, met een onderschrift bij de foto (21 oktober 2026) */
.mogelijkheden { list-style: none; margin: 0; padding: 0; display: grid; max-width: 44ch; }
.mogelijkheden li { display: grid; gap: var(--space-2); padding-block: var(--space-16); }
.mogelijkheden li + li { border-top: 1px solid color-mix(in srgb, var(--text-on-inverse) 15%, transparent); } /* alleen lijnen tussen de items, niet erboven en eronder (3 november 2026, Wubbo) */
.mogelijkheden .naam { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.3; }
.mogelijkheden .wat { font-size: 18px; line-height: 1.5; color: var(--text-secondary-on-inverse); } /* rustiger (22 oktober 2026) */
/* het onderschrift hoort bij de foto en mag niet met de kop concurreren, zeker niet op de telefoon waar het boven het label
   staat (21 oktober 2026, Wubbo): kleiner en zachter; gebroken wit op 70 procent haalt op Indisch bruin nog 5,7:1 */
.kopfoto figcaption { margin-top: var(--space-8); font-size: 16px; font-style: italic; line-height: 1.45; color: var(--text-secondary-on-inverse); } /* cursief: een onderschrift leest zo als bijschrift en niet als label (3 november 2026, Wubbo); 16px is de kleinste maat */ /* dezelfde zachte kleur als de omschrijvingen ernaast (22 oktober 2026) */
@media (max-width: 820px) { .kopfoto figcaption { padding-inline: var(--space-page-margin); } }

/* wijnkaart: het wijnhuis net iets anders dan druif, streek en land (21 oktober 2026) */
.wijn-oms .wijn-huis { color: var(--text-default); font-weight: 400; } /* anders door kleur, niet door gewicht (22 oktober 2026) */

/* wijnkaart en lunch & à la carte (zodra er groepen zijn) in twee vaste kolommen zodra de inhoud 760 px of breder is (vanaf 960 px, dus op elke laptop); bouw.py verdeelt de soorten
   zo gelijk mogelijk over links en rechts (gekozen door Wubbo, 21 oktober 2026, review Z8). Vaste kolommen in plaats van CSS columns: die
   lieten in Safari de rechterkolom leeg. De haan en de kalkoen staan dan alleen op tablet staand en telefoon. */
.kaartkolom { display: grid; gap: var(--space-48); }
@media (min-width: 960px) {
  .kaart > .binnen:has(> .illustratie):has(.kaartkolommen) { display: block; }
  .kaart > .binnen:has(.kaartkolommen) .illustratie, .kaartkolommen .illustratie-groep { display: none; }
  .kaartgroepen.kaartkolommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-48) clamp(48px, 5vw, 80px); max-width: none; align-items: start; }
}

/* ---------- een eerder menu in beeld (voorstel 21 oktober 2026) ----------
   Elke gang met foto's is een plaat: de foto groot, de gerechten ernaast, om en om links en rechts.
   Een gang zonder foto blijft een rustige regel. Vierkant blijft vierkant; een staande foto houdt zijn verhouding. */
/* terug-pijl voor de kruimels van een eerder menu (22 oktober 2026): ruim aan te tikken, de pijl zelf op de lijn van de tekst */
.kruimel { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--space-8); }
.kruimel .terug {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: calc(var(--space-12) * -1) 0 calc(var(--space-12) * -1) calc(var(--space-12) * -1); color: var(--text-accent);
  text-decoration: none; border-radius: var(--radius-pill);
}
.kruimel .terug svg { width: 22px; height: 22px; }
@media (hover: hover) { .kruimel .terug:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
  .kruimel .terug svg { transition: transform .2s ease; }
  .kruimel .terug:hover svg { transform: translateX(-3px); }
}
.menu-beeld { gap: 0; margin-bottom: var(--space-80); }
.menu-beeld .gang { gap: 0; padding-block: clamp(32px, 4.5vw, 64px); border-top: 0; } /* nergens een lijn tussen de gangen, ook niet bij eerdere menu's; alleen tussen vlees/vis en vega (12 nov 2026, Wubbo) */
.menu-beeld .gang:first-child { border-top: 0; padding-top: 0; }
.menu-beeld .regel { padding-block: clamp(24px, 2.5vw, 32px); }
.menu-beeld .plaat + .regel, .menu-beeld .regel + .plaat { padding-top: clamp(32px, 4.5vw, 64px); }
.menu-beeld .regel:has(+ .plaat) { padding-bottom: clamp(32px, 4.5vw, 64px); }
.plaat-tekst { display: grid; gap: var(--space-16); align-content: center; min-width: 0; }
.plaat-tekst .gerechten { gap: var(--space-16); }
.plaat .gerecht { font-size: clamp(18px, 1.75vw, 24px); line-height: 1.4; text-wrap: pretty; }
.plaat .gerecht + .gerecht { padding-top: var(--space-16); border-top: 1px solid var(--border-default); }
.regel .gerecht { font-size: clamp(17px, 1.4vw, 19px); }
.plaat-beeld { display: grid; gap: var(--space-gutter); grid-template-columns: minmax(0, 1fr); align-items: start; }
.plaat-beeld figure { margin: 0; }
/* twee foto's op dezelfde plek; de schakelaar eronder wisselt ze met een zachte overgang */
.plaat-fotos { display: grid; }
.plaat-fotos > figure { grid-area: 1 / 1; transition: opacity .45s ease, visibility 0s linear 0s; }
.plaat-fotos > figure.weg { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.wissel { display: flex; gap: var(--space-24); }
.plaat.rechts .wissel { justify-content: flex-end; }
.wissel button {
  font: 400 16px/1 var(--font-heading); color: var(--text-secondary);
  background: none; border: 0; padding: var(--space-8) 0; cursor: pointer; border-bottom: 1.5px solid transparent;
}
.wissel button:hover { color: var(--text-default); }
.wissel button[aria-pressed="true"] { color: var(--text-default); font-weight: 600; border-bottom-color: var(--text-default); }
.wissel button:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.plaat-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } /* altijd vierkant, ook een staande foto (vanuit het midden bijgesneden), zoals de kaartjes (3 november 2026, Wubbo) */ /* geen vergroting op de platen (21 oktober 2026) */

@media (min-width: 761px) {
  .plaat { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-gutter); align-items: center; }
  .plaat > * { grid-row: 1; }
  .plaat .plaat-beeld { grid-column: 1 / span 6; }
  .plaat .plaat-tekst { grid-column: 8 / -1; }
  .plaat.rechts .plaat-beeld { grid-column: 7 / -1; }
  .plaat.rechts .plaat-tekst { grid-column: 1 / span 5; }
  /* een gang zonder foto: label links, gerechten in de kolom van de tekst ernaast */
  .regel .plaat-tekst { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-gutter); align-items: baseline; }
  .regel .plaat-tekst > .label { grid-column: 1 / span 3; }
  .regel .plaat-tekst > .gerechten { grid-column: 4 / -1; max-width: 62ch; }
}
@media (max-width: 760px) {
  .menu-beeld .plaat { gap: var(--space-16); }
  /* 12 nov 2026 (Wubbo: je zag niet goed welke tekst bij welke foto hoort): op de telefoon de naam van de gang
     boven de foto, zodat elke gang met zijn eigen kop begint, en meer ruimte tussen de gangen dan binnen een gang */
  .menu-beeld .plaat .plaat-tekst { display: contents; }
  .menu-beeld .plaat .plaat-tekst > .label { order: -1; }
  .menu-beeld .gang { padding-block: var(--space-40); }
  .menu-beeld .gang:first-child { padding-top: 0; }
}

.menu-meer { display: grid; gap: var(--space-24); margin-bottom: var(--space-80); }

/* bladeren: het oudere en het nieuwere menu als kaartje met hun eerste foto */
.in-beeld-blader { padding-top: var(--space-32); border-top: 1px solid var(--border-default); margin-top: 0; }
.buur { display: flex; align-items: center; gap: var(--space-16); color: inherit; text-decoration: none; min-width: 0; }
.buur.nieuwer { flex-direction: row-reverse; text-align: right; }
.buur-beeld { flex: none; width: 96px; }
.buur-beeld img, .buur-beeld .archief-leeg { display: block; width: 96px; height: 96px; object-fit: cover; }
.buur-tekst { display: grid; gap: var(--space-2); min-width: 0; }
.buur-tekst .label { font-size: 16px; }
.buur-tekst .kop-4 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--border-link); }
.buur:hover .kop-4 { text-decoration-color: currentColor; }
.buur .blader-pijl { color: var(--text-accent); }
@media (prefers-reduced-motion: no-preference) {
  .buur .blader-pijl { transition: transform .2s ease; }
  .buur.ouder:hover .blader-pijl { transform: translateX(-4px); }
  .buur.nieuwer:hover .blader-pijl { transform: translateX(4px); }
}
@media (max-width: 760px) {
  .in-beeld-blader { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buur { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .buur.nieuwer { flex-direction: column; align-items: flex-end; }
  .buur-beeld, .buur-beeld img, .buur-beeld .archief-leeg { width: 100%; height: auto; aspect-ratio: 1; }
  .buur .blader-pijl { display: none; }
}
@media (max-width: 1100px) {
  .in-beeld-blader { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; row-gap: var(--space-32); }
  .in-beeld-blader > .buur-leeg, .in-beeld-blader > .buur { grid-row: 1; }
  .in-beeld-blader .blader-midden { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}
@media (max-width: 760px) {
  .in-beeld-blader .blader-midden { justify-content: stretch; }
  .menu-beeld { margin-bottom: var(--space-32); }
}

/* ---------- maandmenu: Overzicht of Per gang (21 oktober 2026, namen 23 oktober) ---------- */
.weergave-wissel { margin: calc(var(--space-24) * -1) 0 var(--space-32); }
.weergave-wissel button { font-size: 18px; } /* even groot als de tekst erboven (22 oktober 2026) */
/* Weergave ervoor, als het label boven de titel: zelfde maat, gewicht 400, zachte kleur, zonder streep (23 oktober 2026) */
.weergave-label { font: 400 18px/1 var(--font-heading); color: var(--text-secondary); padding: var(--space-8) 0; border-bottom: 1.5px solid transparent; }
/* de keuzes in de gewone tekstkleur, zodat alleen Weergave zacht is, net als de tabs in de balk erboven;
   een lichtere kleur voor het label kan niet, de zachte kleur zit precies op 4,5:1 */
.weergave-wissel button { color: var(--text-default); }
.weergave-wissel button[aria-pressed="false"]:hover { border-bottom-color: var(--border-link); }

.menu-in-beeld .menu-beeld { margin-bottom: var(--space-48); }
.menu-in-beeld .gang { border-top: 0; } /* geen lijn tussen de gangen, alleen tussen vlees/vis en vega (12 nov 2026, Wubbo) */
/* in beeld: de lijst en de fotorij gaan weg, de prijzen blijven eronder staan */
[data-menuweergave="beeld"] .strook, [data-menuweergave="beeld"] .menuvel { display: none; }
[data-menuweergave="beeld"] .menu-raster { grid-template-columns: minmax(0, 1fr); }
[data-menuweergave="beeld"] .menu-raster > * { max-width: 560px; }

/* ---------- mobiele controle (23 oktober 2026) ---------- */
/* hoeken: nooit helemaal hard, minimaal zoals de knop (--hoek, 2 px). Foto's, kaartjes, het menuvel en lege fotovlakken.
   De ronde knoppen houden --hoek-pil; het Teletekst-tooltipje blijft bewust hard. */
main img, dialog.groot img, .menuvel, .archief-leeg, .plaat-fotos, .foto-open, .vergroot { border-radius: var(--radius-surface); }
.logo-groot img, .logo img { border-radius: 0; } /* het logo is geen vlak: de hoek van de letters moet scherp blijven, ook met Ook vlakken (6 november 2026, Wubbo) */
.archief a { border-radius: var(--radius-surface); overflow: hidden; }
.plaat-fotos, .vergroot { overflow: hidden; }

/* fotocredit: alleen nog in de voet (23 oktober 2026, Wubbo), net als de illustraties en de website */

/* wijnkaart en lunch op een telefoon: (bio), (natuurwijn) en (alcoholvrij) altijd op een eigen regel onder de naam,
   in plaats van de ene keer erachter en de andere keer eronder */
@media (max-width: 600px) { .kaartlijst .naam > .klein { display: block; } }

/* voet: dagen en tijd breken alleen tussen elkaar ("Di en wo" / "vanaf 16:00"), nooit midden in een tijd */
.voet .dagen, .voet .tijd { white-space: nowrap; }
.weetje p + p { margin-top: var(--space-8); } /* alinea's in een weetje: 16 px ertussen */

/* lopende tekst op een telefoon even groot als de intro onder de kop (23 oktober 2026, Wubbo): geen kleine letter voor het grote
   blok tekst. Alleen tot 600 px breed; tablet en desktop blijven zoals ze waren. Gerechten, kaarten, prijzen en kleine regels
   (.klein) houden hun eigen maat. */
@media (max-width: 600px) {
  .tekst:not(.intro), .tekst:not(.intro) p { font-size: clamp(19px, 0.3vw + 18px, 21px); }
}

/* het Klubmenu op een telefoon (24 oktober 2026, Wubbo, canvas Menu groter op mobiel, variant D): de gerechten even groot als
   de intro, en het menuvel breder zodat er meer op een regel past. Het vel staat 16 px van de rand (de helft van de marge) met
   16 px binnenruimte, dus de gerechten beginnen precies op de marge, op één lijn met de kop erboven. Tablet en desktop blijven zo. */
@media (max-width: 600px) {
  .menuvel { margin-inline: calc(var(--space-16) - var(--space-page-margin)); padding: var(--space-32) var(--space-16); }
  .menuvel .gerecht { font-size: clamp(19px, 0.3vw + 18px, 21px); }
}

/* lijstrand om de grote kopfoto (23 oktober 2026, Wubbo): buiten en binnen dezelfde hoek van 2 px. Met een rand op de foto zelf
   werd de binnenhoek van de foto hard (binnenhoek = hoek min randdikte), daarom is de lijst nu een eigen vlak om de foto heen.
   Alleen waar de lijst er was: op de telefoon en een smalle tablet (tot 820 px) staat de foto van rand tot rand, zonder lijst. */
.lijst { display: block; padding: var(--space-8); background: var(--bg-section-warm); border-radius: var(--radius-surface); }
.lijst:has(img.laadt) { background: transparent; } /* de lijst komt samen met de foto */
.opening figure img, .kopfoto img { border: 0; }
@media (min-width: 1200px) {
  .opening figure .lijst { position: absolute; inset: 0; }
  .opening figure .lijst img { position: static; width: 100%; height: 100%; }
}
@media (max-width: 820px) { .lijst { padding: 0; background: none; border-radius: 0; } }

/* Letterschaal desktop en tablet (24 oktober 2026, Wubbo, canvas Letterschaal desktop). Een scan van de hele site op 1440 breed
   vond elf maten, onder de koppen vijf tekstmaten binnen 6px, en tekst die op desktop kleiner was dan op de telefoon. Nu vier
   tekstmaten met elk een rol: intro 22, tekst 20, tweede 18 en klein 16 (voet, kleine opmerkingen). De koppen blijven, de
   telefoon (tot 600 px) blijft zoals hij was; daartussen schaalt alles vloeiend mee. */
@media (min-width: 601px) {
  :root {
    --maat-intro: clamp(19px, 0.3vw + 18px, 22px);    /* alles direct onder een kop: intro, uitleg; ook de gerechten per gang */
    --maat-tekst: clamp(18px, 0.25vw + 16.4px, 20px); /* lopende tekst, gerechten, bijschriften; Semibold: gangnamen, kop 4, namen op de kaarten, menuprijzen */
    --maat-tweede: clamp(17px, 0.1vw + 16.6px, 18px); /* omschrijvingen en prijzen op de kaarten, bovenkop, menu, knoppen, schakelaars, tijden en adres */
  }
  main { font-size: var(--maat-tekst); }
  .intro, .sectiekop > .tekst, .sectiekop .uitleg, #diner .sectiekop .uitleg, .opening .intro, .plaat .gerecht { font-size: var(--maat-intro); }
  .regel .gerecht, .prijs h3 { font-size: var(--maat-tekst); }
  .strook figcaption.label, .galerij figcaption { font-size: var(--maat-tweede); }
  .kaartlijst .klein, .kaartlijst .naam .klein, .prijs-klein, .prijs .klein, .prijzen > .klein, .wijn, .bedrag,
  .gang .label .toelichting { font-size: var(--maat-tweede); }
  .knop, .wissel button, .weergave-wissel button, .buur-tekst .label { font-size: 18px; }
  /* informatieblokken (keukentijden, adres, reserveren) in één maat met de rijen van de tijden */
  div.blok:not(.binnen) > address, div.blok:not(.binnen) > .tekst { font-size: var(--maat-tweede); }
}

/* Letterschaal telefoon (24 oktober 2026, Wubbo, canvas Letterschaal, rij 2): dezelfde rollen als op desktop, geen nieuwe maat.
   Gerechten per gang en bijschriften even groot als de gerechten (ongeveer 19px), namen op de kaarten zoals de naam van een
   menu (18px), knoppen en schakelaars 18px zoals op desktop, en tijden, adres en tekst in de informatieblokken in één maat. */
@media (max-width: 600px) {
  .plaat .gerecht { font-size: clamp(19px, 0.3vw + 18px, 21px); }
  .strook figcaption.label, .galerij figcaption { font-size: 18px; }
  .kaartlijst .naam { font-size: 18px; }
  .knop, .wissel button, .weergave-wissel button, .buur-tekst .label { font-size: 18px; }
  div.blok:not(.binnen) > address, div.blok:not(.binnen) > .tekst { font-size: 18px; }
}

/* keukentijden op een heel smalle telefoon (tot 359 px, 24 oktober 2026, Wubbo, canvas Letterschaal rij 3, richting B): een rij als
   'Lunch do t/m zo 12:00 tot 15:00' paste niet en liep 25 px over de rand. Dan de dagen onder de naam; de tijden blijven rechts
   onder elkaar, Keuken open en Maandag blijven op één regel. De letter wordt niet kleiner. */
@media (max-width: 359px) {
  .feiten dt .naam { display: block; min-width: 0; }
  .feiten dt .dagen { display: block; margin-left: 0; }
}

.opening .feiten > div:first-child { border-top: 0; padding-top: 0; } /* geen lijn boven de eerste rij van de keukentijden */

/* Home: binnenkijken (27 oktober 2026, Wubbo, canvas Feedback home, menukaart en locatie): onderaan de pagina, tussen Tijden en locatie en de
   cadeauband, drie foto's, van buiten naar binnen: de gevel, het raam en de bar (de zaal zelf is al de kopfoto). Zonder kop of bijschriften (Lisa: te letterlijk); de kop
   staat er alleen voor schermlezers en de alt-teksten beschrijven wat je ziet, ook voor de vindbaarheid. Zonder lijstrand: die is
   alleen voor de kopfoto. Op de telefoon een rij om doorheen te swipen, zoals de fotostrook bij het menu. */
.binnenkijken { padding-block: var(--space-section) 0; } /* direct onder de opening was het te veel beeld op elkaar, en na Over ons ook nog (Wubbo, 27 oktober 2026); nu helemaal onderaan, in alle versies van de home */
.binnenkijken ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gutter); }
.binnenkijken img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-surface); }
.binnenkijken .sectiekop { margin-bottom: var(--space-32); }
.binnenkijken .panorama { aspect-ratio: 16 / 7; object-position: 50% 65%; margin-bottom: var(--space-gutter); } /* versie A: de hele zaal boven de drie kleine foto's, zonder lijst (die is alleen voor de kopfoto) */
@media (max-width: 820px) { .binnenkijken .panorama { aspect-ratio: 16 / 10; } }
.binnenkijken li:last-child img { object-position: 30% 50%; } /* de bar: de fazant en de flessen in beeld */
.opening img.opening-zaal { object-position: 56% 50%; } /* de zaalfoto, staand uitgesneden op de open keuken */
@media (max-width: 600px) {
  .binnenkijken ul {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--space-page-margin) * -1); padding-inline: var(--space-page-margin); scroll-padding-inline: var(--space-page-margin);
  }
  .binnenkijken ul::-webkit-scrollbar { display: none; }
  .binnenkijken li { flex: 0 0 72%; scroll-snap-align: start; }
}

/* Nooit twee keer Reserveren dicht bij elkaar (27 oktober 2026, Wubbo): in de nieuwe opening staan de knoppen rechtsboven, vlak
   onder Reserveren in de kop. Daarom geldt op brede schermen dezelfde regel als voor de zwevende knop op de telefoon: zolang de
   hoofdknop van de pagina in beeld is, is Reserveren in de kop onzichtbaar (hij houdt zijn plek, zodat Teletekst niet verspringt)
   en komt hij terug zodra je voorbij de opening scrolt (js/klub.js, reserveer-elders). Het cadeautje zit daarom ook aan de
   hoofdknop in de opening, zodat de cadeaubon vanaf het eerste scherm te vinden blijft. */
/* Het cadeautje blijft altijd rechtsboven staan, naast Teletekst; alleen het deel Reserveren klapt dicht zolang de hoofdknop van
   de pagina in beeld is, en groeit er weer aan vast zodra je naar beneden scrolt (Wubbo, 28 oktober 2026). De hoofdknop in de
   opening heeft daarom geen cadeautje meer. Zonder script staat de hele knop er gewoon. */
.kop :is(.nav > .knop-splits, .kop-reserveer) > .knop:first-child { max-width: 320px; overflow: hidden; white-space: nowrap; transition: max-width .4s cubic-bezier(.2, .7, .2, 1), padding .4s cubic-bezier(.2, .7, .2, 1), border-width .4s cubic-bezier(.2, .7, .2, 1), opacity .25s ease .15s, visibility 0s; }
.kop.reserveer-elders :is(.nav > .knop-splits, .kop-reserveer) > .knop:first-child { max-width: 0; padding-inline: 0; border-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: max-width .4s cubic-bezier(.2, .7, .2, 1), padding .4s cubic-bezier(.2, .7, .2, 1), border-width .4s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, visibility 0s linear .4s; }
.kop :is(.nav > .knop-splits, .kop-reserveer) > .knop-cadeau { transition: border-radius .4s cubic-bezier(.2, .7, .2, 1); }
.kop.reserveer-elders :is(.nav > .knop-splits, .kop-reserveer) > .knop-cadeau { border-radius: var(--radius-button); border-left-color: transparent; } /* alleen: een los rondje, zoals de knop */
@media (prefers-reduced-motion: reduce) { .kop :is(.nav > .knop-splits, .kop-reserveer) > .knop, .kop.reserveer-elders :is(.nav > .knop-splits, .kop-reserveer) > .knop { transition: none; } }
.opening .knoppen .knop-splits { display: flex; }
.opening .knoppen .knop-splits > .knop:first-child { flex: 1; }
.opening .knoppen .knop-splits > .knop-cadeau { flex: none; width: auto; padding-inline: var(--space-12); } /* ook op de telefoon: het cadeautje blijft een smal vakje aan de knop */

/* Menukaart op de telefoon: menu eerst (27 oktober 2026, Wubbo en Lisa, canvas Feedback home, menukaart en locatie, voorstel A).
   Op 390 breed stond het eerste gerecht pas onderaan het tweede scherm en de prijzen op het vierde. Nu, alleen tot 600 breed:
   - de kop van de menukaart is alleen label en titel; de foto en de intro vallen weg (de intro nog een keer onderaan zette
     dezelfde alinea twee keer in de pagina, en dat houdt tests/test_bouw.py terecht tegen);
   - bij het Klubmenu na de titel meteen het menu en de prijzen, daarna de foto's en dan de uitleg; de schakelaar Overzicht /
     Per gang valt weg (de foto's staan er al, onder de prijzen);
   - lunch & à la carte en de wijnkaart: kop, meteen de kaart, de uitleg eronder.
   Desktop en tablet blijven zoals ze waren. */
.kop-smal { display: none; } /* de titel en periode van het Klubmenu in de kop: alleen op de telefoon (voorstel A) */
@media (max-width: 600px) {
  /* op de telefoon is de kop van de menukaart de kop van het Klubmenu zelf, op beige, zoals voorstel A: Menukaart, de titel van
     het menu, de periode, dan de tabs en meteen het menu. Van Klubmenu tot borrel, de intro en de foto blijven voor brede schermen. */
  .menukop { padding-top: var(--space-32); padding-bottom: var(--space-24); }
  .menukop figure, .menukop .intro, .menukop .kop-breed { display: none; }
  .kop-smal { display: inline; }
  .menukop .tekstblok { gap: var(--space-16); }
  .menukop .display { font-size: min(44px, calc(9.5vw + 1px)); }
  .menukop.donker { background: var(--bg-canvas); color: var(--text-default); --text-secondary: var(--neutral-700); }
  .menukop.donker .label { color: var(--text-secondary); }
  #diner.sectie { padding-top: var(--space-16); } /* het menuvel dicht onder de tabs, zoals in voorstel A */
  .tabs.donker { --bg-inverse: var(--bg-canvas); background: var(--bg-canvas); border-bottom: 1px solid var(--border-strong); }
  .tabs.donker a { color: var(--text-default); }
  .tabs.donker a.actief { border-bottom-color: var(--text-default); }
  .tabs.donker .tabs-meer { color: var(--text-default); }
  #diner .sectiekop > .label, #diner .sectiekop > h2 { display: none; } /* staat al in de kop */

  #diner > .binnen, .kaart:not(#archief):not(#diner) > .binnen { display: flex; flex-direction: column; }
  #diner .sectiekop, .kaart:not(#archief):not(#diner) .sectiekop { display: contents; }
  #diner .sectiekop > .label { margin-bottom: var(--space-16); }
  #diner .sectiekop > h2, .kaart:not(#archief):not(#diner) .sectiekop > h2 { margin-bottom: var(--space-32); }
  #diner .weergave-wissel, #diner .menu-in-beeld { display: none !important; }
  #diner .menu-raster { order: 1; }
  #diner .strook { order: 2; margin: var(--space-48) 0 0; }
  #diner .sectiekop .uitleg { order: 3; margin-top: var(--space-32); }
  /* wie eerder Per gang koos, krijgt op de telefoon toch het overzicht */
  #diner[data-menuweergave="beeld"] .strook, #diner[data-menuweergave="beeld"] .menuvel { display: block; }
  #diner[data-menuweergave="beeld"] .menu-raster > * { max-width: none; }

  .kaart:not(#archief):not(#diner) .sectiekop .uitleg { order: 9; margin-top: var(--space-32); }
}


/* ---------- Voorbeeld: de doorkijk (branch voorbeeld-doorkijk, 6 november 2026) ----------
   Canvas Home met groot logo, D4 (keuze Wubbo): het logo groot over de hele breedte van de inhoud, met de zaal door de letters
   heen. De foto beweegt langzaam (een Ken Burns-effect: heel traag inzoomen en verschuiven, heen en terug); met Minder beweging
   staat hij stil. Het logo zelf (de img) houdt de maat en de naam voor schermlezers vast en is onzichtbaar; wat je ziet is de
   foto, uitgesneden met het logo als masker. Daaronder de regel als h1 en de keukentijden als één rij, alles in het midden. */
.opening-doorkijk .binnen { display: block; }
.opening-doorkijk .tekstblok, .opening-doorkijk .tekstblok:has(.logo-groot) { display: grid; justify-items: center; text-align: center; gap: var(--space-32); }
.opening-doorkijk .logo-groot { position: relative; width: 100%; }
.opening-doorkijk .logo-groot img, html.js:has(.kop[data-logo-later]) .opening-doorkijk .logo-groot img { display: block; width: 100%; height: auto; opacity: 0; }
.logo-doorkijk .doorkijk {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%; mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%;
}
.logo-doorkijk .doorkijk > span {
  position: absolute; inset: -8%;
  background: var(--text-default) url("../img/de-klub-zaal-doorkijk-1280.webp") no-repeat center 68% / cover;
  /* een eigen, donkerdere versie van de zaalfoto (helderheid 0,7, contrast 1,1): de witte tegels van de keuken vielen anders weg
     tegen het beige. Eerst deed een CSS-filter dat, maar een filter op het bewegende vlak liet Chrome elk beeldje opnieuw tekenen */
}
@media (min-width: 821px) { .logo-doorkijk .doorkijk > span { background-image: url("../img/de-klub-zaal-doorkijk-2560.webp"); } }
/* 22:26 (Wubbo): het Ken Burns-effect schokte in Chrome. Het masker staat nu op een eigen laag (will-change), zodat de browser de
   foto erin op de grafische kaart verschuift in plaats van per beeldje masker en foto opnieuw te tekenen */
.logo-doorkijk .doorkijk { will-change: transform; transform: translateZ(0); }
@media (prefers-reduced-motion: no-preference) {
  .logo-doorkijk .doorkijk > span { animation: doorkijk 24s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes doorkijk {
  from { transform: scale(1) translate3d(-3%, 1%, 0); }
  to { transform: scale(1.08) translate3d(3%, -2%, 0); }
}
.opening-doorkijk h1.label { font-size: var(--maat-intro, 22px); line-height: 1.4; }
.opening-doorkijk .logo-groot + .label { margin-top: calc(var(--space-8) * -1); } /* de regel hoort bij het logo: iets dichter erop dan de tijden eronder */
/* op de telefoon staat het logo hier gewoon in de opening, niet in de kop (js/klub.js: geen morph met de doorkijk) */
html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk { padding-top: var(--space-32); }
html.js:has(.kop[data-logo-later]) .opening-doorkijk .logo-groot { margin-top: 0; }

/* keukentijden als één rij: per blok de naam en de dagen, de tijd eronder in de maat van de intro, een lichte lijn ertussen */
.tijdenrij-blok { display: grid; justify-items: center; gap: var(--space-16); width: 100%; }
.tijdenrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 960px; margin: 0; }
.tijdenrij > div { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4) var(--space-16); border-left: 1px solid var(--border-default); }
.tijdenrij > div:first-child { border-left: 0; }
.tijdenrij dt { font-family: var(--font-heading); font-size: 18px; line-height: 1.4; color: var(--text-secondary); white-space: nowrap; }
.tijdenrij dt .naam { font-weight: 600; color: var(--text-default); }
.tijdenrij dt .dagen { margin-left: var(--space-4); }
.tijdenrij dd { margin: 0; font-size: var(--maat-intro, 22px); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tijdenrij-dicht { margin: 0; font-size: 18px; line-height: 1.4; color: var(--text-secondary); }
@media (max-width: 820px) {
  .tijdenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tijdenrij > div { padding-block: var(--space-12); }
  .tijdenrij > div:nth-child(odd) { border-left: 0; }
  .tijdenrij > div:nth-child(n+3) { border-top: 1px solid var(--border-default); }
  .tijdenrij dd { font-size: 20px; }
}
.opening-doorkijk .knoppen { justify-content: center; }

/* Voorbeeld-doorkijk, tweede stap (6 november 2026, 21:34, Wubbo): rustiger.
   1. Knoppen Rond (de boog van de U in KLUB), vlakken en foto's recht: gekozen door Wubbo op 6 november 2026 (22:16); de
      schakelaar met keuzes voor Lisa (knoppen-proef) is weg.
   2. Ook op een breed scherm een hamburger voor de vier pagina's: in de kop alleen het logo (op home pas na scrollen), Teletekst,
      Reserveren (op home met alleen het cadeautje zolang de knop in de opening in beeld is) en de menuknop. Het uitklapmenu is
      hetzelfde als op de telefoon, zonder Teletekst en Reserveren (die staan al in de kop). */
html:root { --radius-button: 22px; }
html:root .kop { --radius-button: 20px; }
.knop.zwevend { border-radius: 22px; }
@media (min-width: 1200px) {
  .kop .nav .nav-midden { display: none; }
  .kop .binnen { position: static; }
  .mobielmenu { display: block; }
  .mobielmenu summary {
    list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
    color: var(--text-default);
  }
  .mobielmenu summary::-webkit-details-marker { display: none; }
  .hamburger, .hamburger::before, .hamburger::after { display: block; width: 24px; height: 2px; background: currentColor; }
  .hamburger { position: relative; transition: background-color .2s ease; }
  .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; transition: transform .25s ease; }
  .hamburger::before { transform: translateY(-7px); }
  .hamburger::after { transform: translateY(7px); }
  .mobielmenu[open] .hamburger { background: transparent; }
  .mobielmenu[open] .hamburger::before { transform: rotate(45deg); }
  .mobielmenu[open] .hamburger::after { transform: rotate(-45deg); }
  .mobielmenu nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg-canvas); border-bottom: 1px solid var(--border-strong);
    padding: var(--space-24) max(var(--space-page-margin), calc((100% - var(--size-content)) / 2)) var(--space-48); /* de links op de inhoudsrand, onder het logo */
    display: grid; justify-items: start; gap: var(--space-8);
  }
  .mobielmenu nav a:not(.knop) {
    font-family: var(--font-heading); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-default);
    text-decoration: none; padding-block: var(--space-4); border-bottom: 2px solid transparent;
  }
  .mobielmenu nav a:not(.knop):hover { border-bottom-color: var(--text-default); }
  .mobielmenu nav a:not(.knop)[aria-current="page"] { border-bottom-color: var(--text-default); }
  .mobielmenu nav .tt-nav, .mobielmenu nav > .knop, .mobielmenu nav > .knop-splits { display: none; }
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 20;
    background: var(--bg-overlay-light); opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  body:has(.mobielmenu[open])::after { opacity: 1; pointer-events: auto; cursor: pointer; }
  body:has(.mobielmenu[open]) .kop { z-index: 30; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) { .mobielmenu[open] nav { animation: binnenkomen .25s ease both; } }

/* 21:38 (Wubbo): de menuknop links in de kop, op elke breedte; het logo staat ernaast. De tijden staan weer in de opening, als
   laatste, met wat meer ruimte erboven dan tussen de andere delen. */
.kop .mobielmenu { order: -1; }
.kop .mobielmenu summary { margin-right: 0; margin-left: -10px; } /* uitzondering op de schaal: het icoon van 24 px precies op de marge */
.opening-doorkijk .knoppen + .tijdenrij-blok { margin-top: var(--space-24); }
/* 21:41 (Wubbo): de keukentijden als link naar Tijden en locatie verderop in plaats van de rij; scheelt een hoop tekst */
.tijdenlink { margin: var(--space-8) 0 0; font-size: 18px; line-height: 1.4; }
.tijdenlink a { color: var(--text-default); text-decoration: underline; text-decoration-color: var(--border-link); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tijdenlink a:hover { text-decoration-color: currentColor; }
#tijden { scroll-margin-top: 72px; } /* onder de vaste kop */
/* 21:48 (Wubbo): de kop van de menukaart in de kleur van de home, niet blauw; rustiger. Op elke breedte dezelfde keuze als op de
   telefoon al gold (menukaart voorstel A): beige met de gewone tekstkleur, de tabs op beige met een lijn eronder en de actieve tab
   onderstreept in de tekstkleur. De zandgele lijst om de foto blijft. */
.menukop.donker { background: var(--bg-canvas); color: var(--text-default); --text-secondary: var(--neutral-700); }
.menukop.donker .label { color: var(--text-secondary); }
.tabs.donker { --bg-inverse: var(--bg-canvas); background: var(--bg-canvas); border-bottom: 1px solid var(--border-strong); }
.tabs.donker a { color: var(--text-default); }
.tabs.donker a.actief { border-bottom-color: var(--text-default); }
@media (hover: hover) { .tabs.donker a:hover { border-bottom-color: var(--text-default); } }
.tabs.donker .tabs-meer { color: var(--text-default); }
/* 21:51 (Wubbo): ook Groepen en Over De Klub met een kop in de kleur van de home. In bouw.py hebben die koppen de klasse beige
   (Groepen niet meer donker); bruin en lichtgeel blijven alleen voor de opbouw (de staande foto op Groepen). De knop Mail ons is
   een rustige knop: koper blijft voor Reserveren. */
.paginakop.kopfoto.beige { background: var(--bg-canvas); color: var(--text-default); }
.kopfoto.beige figcaption, .kopfoto.beige .mogelijkheden .wat { color: var(--text-secondary); }
.kopfoto.beige .mogelijkheden li + li { border-top-color: var(--border-default); }
/* 21:53 (Wubbo): de opening komt bij binnenkomst langzamer binnen. Eerst het logo, zacht en een fractie groter beginnend (1,8 s),
   daarna een voor een de regel, de knoppen en de link. Kom je via een pagina-overgang terug op de home, dan staat alles er
   meteen (zoals overal, .via-overgang); met Minder beweging ook. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.via-overgang) .opening-doorkijk .tekstblok > * { animation-duration: 1.2s; }
  html:not(.via-overgang) .opening-doorkijk .tekstblok > .logo-groot { animation: doorkijk-in 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.via-overgang) .opening-doorkijk .tekstblok > :nth-child(2) { animation-delay: .6s; }
  html:not(.via-overgang) .opening-doorkijk .tekstblok > :nth-child(3) { animation-delay: .9s; }
  html:not(.via-overgang) .opening-doorkijk .tekstblok > :nth-child(4) { animation-delay: 1.2s; }
}
@keyframes doorkijk-in { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
/* 21:59 (Wubbo): op Groepen en Over De Klub de beige kop, daaronder het verhaal in lichtgeel (bouw.py). De eend naast het verhaal
   staat dan op lichtgeel: een tint net donkerder dan die grond, zoals hij op beige stond. */
@media (min-width: 1000px) {
  .verhaal.lichtgeel .verhaal-illustratie { background: color-mix(in srgb, var(--bg-section-light), var(--text-default) 9%); }
}
/* 22:08 (Wubbo): het logo weer op de inhoudsbreedte (de grotere versies van 22:01 en 22:05 zijn teruggedraaid: kleiner was beter,
   en dan staan menuknop en logo vanzelf op één lijn).
   Het menu flikkerde bij openen en sluiten. Twee oorzaken: de laag over de pagina (z-index 20) lag boven de kop (10) en de kop
   ging pas tijdens het open zijn naar 30; bij sluiten sprong de kop meteen terug onder de laag die nog aan het vervagen was, dus
   werd de kop even grijs. En het uitklappaneel vervaagde als geheel, zodat de pagina eronder door de links heen te zien was.
   Nu ligt de laag altijd onder de kop (9) en staat het paneel er meteen dicht; alleen de links komen zacht binnen. Geldt op
   elke breedte, ook op de telefoon. */
body::after { z-index: 9; }
.mobielmenu[open] nav { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .mobielmenu[open] nav > * { animation: binnenkomen .25s ease both; }
  .mobielmenu[open] nav > :nth-child(2) { animation-delay: .03s; }
  .mobielmenu[open] nav > :nth-child(3) { animation-delay: .06s; }
  .mobielmenu[open] nav > :nth-child(4) { animation-delay: .09s; }
}
/* 22:10 (Wubbo): de schaduw onder de kop (na scrollen) viel kort over het uitklapmenu heen. Zolang het menu open is geen schaduw
   en geen lijn onder de kop: kop en paneel zijn dan één vlak. Zonder overgang, zodat er bij openen niets nagloeit. */
body:has(.mobielmenu[open]) .kop { box-shadow: none; border-bottom-color: transparent; transition: none; }
/* 22:13 (Wubbo): het menu ging net te snel. Links komen in .45 s binnen, 60 ms na elkaar; het kruisje en de laag over de pagina
   in .35 s. */
@media (prefers-reduced-motion: no-preference) {
  .mobielmenu[open] nav > * { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  .mobielmenu[open] nav > :nth-child(2) { animation-delay: .06s; }
  .mobielmenu[open] nav > :nth-child(3) { animation-delay: .12s; }
  .mobielmenu[open] nav > :nth-child(4) { animation-delay: .18s; }
  .mobielmenu[open] nav > :nth-child(5) { animation-delay: .24s; }
  .mobielmenu[open] nav > :nth-child(6) { animation-delay: .3s; }
  .hamburger { transition-duration: .3s; }
  .hamburger::before, .hamburger::after { transition-duration: .35s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); }
  body::after { transition-duration: .35s; }
}
/* 22:14 (Wubbo): menuknop en logo dichter bij elkaar. De knop is 44 px breed met een icoon van 24; de rechterkant van de knop valt
   nu op het icoon (-10 px), en de ruimte tot het logo is 24 px op een breed scherm en 16 px daaronder (zichtbaar, van streepje
   tot letter). */
.kop .mobielmenu summary { margin-right: -10px; } /* uitzondering op de schaal, uitlijnen: de lege rand van de knop rechts van het icoon */
.kop .mobielmenu { margin-right: var(--space-4); } /* 12 (de ruimte in de kop onder 1200) + 4 = 16 */
@media (min-width: 1200px) { .kop .mobielmenu { margin-right: calc(var(--space-24) - clamp(32px, 3vw, 48px)); } }
/* 22:19 (Wubbo): de intro (Elk seizoen een nieuw menu ...) weer in de opening, onder de regel: in de tekstkleur, dicht onder de regel */
.opening-doorkijk .intro { max-width: 46ch; margin: calc(var(--space-16) - var(--space-32)) 0 0; }
/* 22:27 (Wubbo): de intro een slag groter dan de regel erboven, voor de rangorde: op een breed scherm 28 px, op de telefoon ongeveer 21 */
.opening-doorkijk .intro { font-size: clamp(20px, 0.6vw + 19px, 28px); line-height: 1.4; max-width: 34ch; text-wrap: balance; }

/* ---------- Home op de telefoon: de doorkijk als band (7 november 2026, Wubbo, canvas Home met groot logo, 2b) ----------
   Op een telefoon is het logo op de inhoudsbreedte zo smal (80 px hoog) dat je weinig van de zaal door de letters ziet. Daar
   staat het logo daarom klein in de kop, naast de menuknop, en loopt eronder het logo twee keer zo breed als het scherm als een
   band langzaam en eindeloos naar links (zoals bij Nar), met de zaal door de letters. De band is versiering (aria-hidden); het
   logo in de kop draagt de naam. Alleen verschuiven op een eigen laag, geen filter, zodat het ook op een iPhone soepel loopt;
   stil met Minder beweging en zodra de band uit beeld is (js/klub.js, .stil). Daaronder de regel klein (16 px, zachte kleur)
   en de intro als hoofdtekst. */
.doorkijk-band { display: none; }
@media (max-width: 600px) {
  .opening-doorkijk { --band-logo: 210vw; --band-ruimte: 20vw; }
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk { padding-top: var(--space-16); }
  .opening-doorkijk .logo-groot { display: none; } /* het kleine logo in de kop verschijnt dan meteen (js/klub.js: groot logo niet in beeld) */
  .doorkijk-band { display: block; overflow: hidden; margin: 0 calc(var(--space-page-margin) * -1) var(--space-32); }
  .band-spoor { display: flex; width: max-content; padding-left: var(--space-page-margin); will-change: transform; }
  .band-spoor > span {
    flex: none; width: var(--band-logo); aspect-ratio: 165 / 40; margin-right: var(--band-ruimte);
    background: var(--text-default) url("../img/de-klub-zaal-doorkijk-1280.webp") no-repeat center 68% / cover;
    -webkit-mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%; mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%;
  }
  .opening-doorkijk h1.label { font-size: 16px; line-height: 1.45; color: var(--text-secondary); }
  .opening-doorkijk .intro { margin-top: calc(var(--space-8) - var(--space-32)); }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .band-spoor { animation: band 30s linear infinite; }
  .doorkijk-band { animation: vervagen 1.4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * (var(--band-logo) + var(--band-ruimte))), 0, 0); } }
.doorkijk-band.stil .band-spoor, .logo-doorkijk.stil .doorkijk > span { animation-play-state: paused; }
/* het logo in de kop direct naast de menuknop, ook op de telefoon (daar staat er rechts niets; met space-between schoof het logo
   naar rechts). Op tablet duwt Reserveren zich met margin-left: auto naar rechts, op desktop de nav met flex: 1 */
.kop .binnen { justify-content: flex-start; }
/* 7 november 2026 (Wubbo): helemaal bovenaan geen lijn onder de kop. Nu de koppen van de pagina's beige zijn, lopen kop en pagina
   daar in elkaar over; de lijn (en de schaduw) komen pas na scrollen (js/klub.js, .gescrold). Zonder JavaScript blijft de lijn. */
html.js .kop:not(.gescrold) { border-bottom-color: transparent; }
@media (prefers-reduced-motion: no-preference) { html.js .kop { transition: box-shadow .25s ease, border-color .25s ease; } }
/* 7 november 2026 (Wubbo): op de telefoon de menuknop weer rechts, het logo links op de marge; vanaf tablet blijft hij links */
@media (max-width: 600px) {
  .kop .mobielmenu { order: 0; margin-left: auto; margin-right: 0; }
  .kop .mobielmenu summary { margin-left: 0; margin-right: -10px; } /* uitzondering op de schaal: het icoon van 24 px precies op de marge */
}
/* 7 november 2026 (Wubbo): de tooltip van Teletekst viel weg achter het open uitklapmenu (het paneel staat later in de pagina en
   tekende eroverheen). De knoppen rechts in de kop liggen nu een laag hoger dan het paneel. */
.kop .nav { position: relative; z-index: 2; }
/* 7 november 2026 (Wubbo): de band voelde statisch, het hele logo schoof als één plaatje. Nu beweegt de zaal achter de letters ook,
   heel langzaam heen en weer en iets in en uit (16 s), los van de band: dat geeft diepte. Beide logo's in de band bewegen precies
   gelijk, dus waar de band opnieuw begint, is de wissel onzichtbaar. Het masker staat op een eigen laag, zodat de foto erin op de
   grafische kaart beweegt. */
@media (max-width: 600px) {
  .band-spoor > span { position: relative; overflow: hidden; background: none; will-change: transform; transform: translateZ(0); }
  .band-spoor > span > span {
    position: absolute; inset: -10%;
    background: var(--text-default) url("../img/de-klub-zaal-doorkijk-1280.webp") no-repeat center 68% / cover;
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .band-spoor > span > span { animation: band-diepte 16s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes band-diepte {
  from { transform: translate3d(-6%, 1%, 0) scale(1.04); }
  to { transform: translate3d(6%, -2%, 0) scale(1.12); }
}
.doorkijk-band.stil .band-spoor > span > span { animation-play-state: paused; }

/* 7 november 2026 (Wubbo): de kop op de home ging bij scrollen in twee stappen (eerst kleiner zonder lijn, later de lijn erbij).
   Nu is de kop altijd even hoog (72 px; de 88 px bovenaan was voor de menulinks, die achter de menuknop zitten), en komen lijn en
   schaduw op elke pagina tegelijk zodra je scrolt. Op de home verschijnt het kleine logo daarna zacht zodra het grote uit beeld is. */
@media (min-width: 1200px) { .kop .binnen { min-height: 72px; } }
html.js .kop[data-logo-later].gescrold { border-bottom-color: var(--border-strong); box-shadow: var(--shadow-header); }

/* Goed om te weten op contact, rustiger (7 november 2026, Wubbo, canvas Home met groot logo, Goed om te weten B): een kleinere kop,
   drie kolommen met elk een dunne lijn erboven en een dun lijnicoon, de kop van het blok in 20 px, en per blok alleen de eerste
   alinea (de kern) in de tekstkleur; de rest zacht. Alles 18 px met wat meer regelafstand. Op de telefoon onder elkaar. */
.weetjes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-48) var(--space-64); }
.weetje { gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--border-default); }
/* icoon links naast de kop (7 november 2026); de tekst eronder begint gewoon links, onder het icoon */
.weetje .kop-4 { display: flex; align-items: center; gap: var(--space-8); margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: 0; }
.weetje-icoon { flex: none; display: block; color: var(--text-default); }
.weetje p.tekst { font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.weetje h3 + p.tekst { color: var(--text-default); }
.weetje p + p { margin-top: 0; }
/* lijnen boven de weetjes alleen als ze onder elkaar staan (telefoon); naast elkaar zijn ze niet nodig (12 nov 2026, Wubbo) */
@media (min-width: 830px) {
  .weetje { padding-top: 0; border-top: 0; }
}
@media (min-width: 821px) {
  .cadeau-weetjes > div { padding-top: 0; border-top: 0; }
}
.weetje-link { margin: var(--space-4) 0 0; font-size: 18px; }

/* ---------- De andere taal rechtsboven in de kop (11 november 2026, Wubbo, zoals op wubbosiegers.nl) ----------
   Op de Nederlandse site alleen EN, op de Engelse alleen NL: een tekstlink in de stijl van de menulinks (Medium, in de tekstkleur
   van de kop, bij hover een streep in de accentkleur), 18 px zoals de menulinks in hun gewone maat. Altijd zichtbaar, als laatste
   rechts in de kop; op de telefoon vlak voor de menuknop. 44 px hoog en breed, zodat hij ook met een duim te raken is. Was tot 11 november NL EN naast elkaar, de taal van de pagina onderstreept. */
.taalkeuze {
  display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px;
  font-family: var(--font-heading); font-size: 18px; font-weight: 500; line-height: 1; color: var(--text-default);
  text-decoration: underline 2px transparent; text-underline-offset: 8px;
}
.taalkeuze:hover { color: var(--text-default); text-decoration-color: var(--accent); }
@media (min-width: 1200px) { .kop .taalkeuze { margin-left: calc(var(--space-16) - clamp(32px, 3vw, 48px)); } } /* 16 px na Reserveren */
@media (max-width: 600px) {
  .kop .taalkeuze { margin-left: auto; }
  .kop .taalkeuze + .mobielmenu { margin-left: var(--space-8); }
}

/* Home omgekeerd (7 november 2026, Wubbo koos G1b op het canvas Home met groot logo). Eerst keek je door de letters naar de zaal;
   nu vult de zaal de hele opening en beweegt langzaam, en staat het logo erop in beige, net iets doorschijnend: de zaal schemert
   wazig door de letters (matglas, backdrop-filter). Een donkere waas houdt de witte tekst leesbaar. De kop ligt bovenaan
   doorzichtig op de foto, met witte iconen; zodra het grote logo uit beeld is, krijgt hij zijn beige vlak en het kleine logo terug.
   De regel staat 48 px onder het logo (op de telefoon 64), met de intro er dicht onder. De band op de telefoon is daarmee weg. */
.opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .55) 0%, rgb(40 30 29 / .42) 25%, rgb(40 30 29 / .66) 48%, rgb(40 30 29 / .82) 100%); }
html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal, .opening.opening-doorkijk.opening-zaal {
  position: relative; overflow: hidden; display: grid; align-content: center;
  min-height: 100svh; box-sizing: border-box; margin-top: -73px; /* onder de kop door: 72 px plus de lijn */
  padding-top: calc(73px + var(--space-48)); padding-bottom: var(--space-64);
  background: var(--bg-inverse-warm); color: var(--text-on-photo);
}
.opening-zaal .zaal { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.opening-zaal .zaal > span {
  position: absolute; inset: -5%;
  background: var(--bg-inverse-warm) url("../img/de-klub-zaal-overzicht-1280.webp") no-repeat center 60% / cover;
}
@media (min-width: 821px) { .opening-zaal .zaal > span { background-image: url("../img/de-klub-zaal-overzicht-2560.webp"); } }
.opening-zaal .zaal::after { content: ""; position: absolute; inset: 0; background: var(--zaal-waas); }
@media (prefers-reduced-motion: no-preference) {
  .opening-zaal .zaal > span { animation: zaal 24s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes zaal { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.5%, -1%, 0); } }
.opening-zaal.stil .zaal > span { animation-play-state: paused; }
.opening-zaal .binnen { position: relative; z-index: 1; }
/* het logo: beige op 55 %, met de zaal wazig erachter; zonder backdrop-filter gewoon beige */
.logo-mat .mat {
  position: absolute; inset: 0;
  background: rgb(228 223 209 / .55); /* beige van het logo, voor de helft doorzichtig */
  -webkit-backdrop-filter: blur(10px) saturate(1.3) brightness(1.05); backdrop-filter: blur(10px) saturate(1.3) brightness(1.05);
  -webkit-mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%; mask: url("../img/de-klub-logo-bruin.svg") no-repeat center / 100% 100%;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .logo-mat .mat { background: var(--bg-canvas); } }
/* de binnenkomst van het logo op het matglas zelf: doorzichtigheid op de alinea eromheen zou het glas tijdens het binnenkomen uitzetten */
@media (prefers-reduced-motion: no-preference) {
  html:not(.via-overgang) .opening-zaal .tekstblok > .logo-groot { animation: none; }
  html:not(.via-overgang) .opening-zaal .logo-mat .mat { animation: doorkijk-in 1.8s cubic-bezier(.2, .7, .2, 1) both; }
}
.opening-zaal .logo-groot + .label { margin-top: var(--space-16); } /* 32 + 16 = 48 px onder het logo */
.opening-zaal h1.label { color: rgb(255 252 249 / .88); } /* wit op de foto, iets zachter */
.opening-zaal .intro { color: var(--text-on-photo); }
.opening-zaal .knop.rustig { color: var(--text-on-photo); border-color: var(--text-on-photo); }
.opening-zaal .knop.rustig:hover { background: var(--text-on-photo); color: var(--text-default); }
.opening-zaal .tijdenlink a { color: var(--text-on-photo); text-decoration-color: rgb(255 252 249 / .6); } /* wit op de foto, iets zachter */
.opening-zaal .tijdenlink a:hover { text-decoration-color: currentColor; }
.opening-zaal :focus-visible { outline-color: var(--text-on-photo); }
/* de kop doorzichtig op de foto, tot het grote logo uit beeld is (js/klub.js zet dan .logo-zichtbaar) of het menu opengaat */
html.js:has(.opening-zaal) .kop[data-logo-later] { transition: background-color .25s ease; }
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) {
  background: transparent; border-bottom-color: transparent; box-shadow: none; color: var(--text-on-photo);
}
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .mobielmenu summary,
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze { color: var(--text-on-photo); } /* EN beige op de foto, net als de menuknop */
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze:focus-visible { outline-color: var(--text-on-photo); }
@media (max-width: 600px) {
  .opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .50) 0%, rgb(40 30 29 / .40) 25%, rgb(40 30 29 / .66) 42%, rgb(40 30 29 / .88) 100%); }
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal, .opening.opening-doorkijk.opening-zaal { padding-top: calc(73px + var(--space-32)); padding-bottom: var(--space-48); }
  .opening-zaal .zaal > span { background-position: 56% 50%; }
  .opening-zaal .logo-groot { display: block; }
  .opening-zaal .logo-groot + .label { margin-top: var(--space-32); } /* 32 + 32 = 64 px */
  .opening-zaal h1.label { color: rgb(255 252 249 / .88); } /* wit op de foto, iets zachter */
}
/* 7 november 2026 (Wubbo, zo rustig mogelijk): geen lijn meer tussen de kop Keukentijden en de eerste rij; alleen nog lijnen tussen
   de rijen. Zo staan de drie blokken (Keukentijden, Adres, Reserveren) gelijk: kop, dan meteen de inhoud. Op de home en op contact. */
.feiten-tijden > div:first-child { border-top: 0; padding-top: 0; }
/* 17:14 (Wubbo): de regel onder het logo was op de foto slecht leesbaar, zeker op de telefoon (wit op de lichte keukenwand).
   De waas is rond de tekst donkerder, de regel staat in vol wit en regel en intro krijgen een zachte donkere gloed. */
.opening-zaal h1.label, .opening-zaal .intro { text-shadow: 0 1px 2px rgb(40 30 29 / .45), 0 0 24px rgb(40 30 29 / .5); } /* zachte gloed in de kleur van de waas */
.opening-zaal h1.label { color: var(--text-on-photo); font-weight: 500; }
@media (max-width: 600px) { .opening-zaal h1.label { color: var(--text-on-photo); } }
/* kiezertje linksonder op de home: Zaal (/) of Doorkijk (/doorkijk), om samen te kiezen (bouw.py home_keuze). De versie waar je bent
   is gevuld, de andere is een link; 44 px hoog om te tikken. */
.homekeuze {
  position: fixed; left: var(--space-16); bottom: var(--space-16); z-index: 8; display: flex; gap: var(--space-4); padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-button); box-shadow: var(--shadow-header);
}
.homekeuze > * {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-16); border-radius: var(--radius-button);
  font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; color: var(--text-default);
}
.homekeuze [aria-current] { background: var(--text-default); color: var(--text-on-inverse); }
.homekeuze a:hover { background: var(--bg-hover); }
/* versie Beige (/beige, G1): het logo gewoon in beige op de zaal, zonder matglas */
.opening-beige .logo-mat .mat { background: var(--bg-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 600px) { .homekeuze { bottom: var(--space-80); } } /* boven de zwevende knop Reserveer een tafel */
/* 17:22 (Wubbo): een vierde versie met het logo zandgeel (/zandgeel), en parallax: de zaal schuift bij het scrollen langzamer mee
   dan de tekst (js/klub.js zet de verschuiving op .zaal; de sectie knipt hem af) */
.opening-zand .logo-mat .mat { background: var(--bg-section-warm); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-motion: no-preference) { .opening-zaal .zaal { will-change: transform; } }
@media (max-width: 600px) { .homekeuze > * { padding: 0 var(--space-12); font-size: 14px; } }
/* 17:25 (Wubbo): ook een versie met het logo lichtgeel (/lichtgeel), de kleur van Nu op het menu en Tijden en locatie */
/* met vijf versies past het kiezertje op de telefoon net over de hele breedte */
@media (max-width: 600px) {
  .homekeuze { right: var(--space-16); justify-content: space-between; gap: 0; }
  .homekeuze > * { padding: 0 var(--space-8); font-size: 13px; }
}
@media (max-width: 380px) { .homekeuze > * { padding: 0 var(--space-4); } }
/* 17:42 (Wubbo): Zandgeel staat nu op /. De regel hoort bij het logo: dicht eronder (16 px, op de telefoon 12), de intro en de
   rest staan er wat verder vanaf (40 px, op de telefoon 32). De regel krijgt de kleur van het logo. Op de telefoon staat het
   kiezertje bovenaan in de opening, onder de kop, en scrolt mee weg: onderin zat het over de knoppen. */
.opening-zaal .logo-groot + .label { margin-top: calc(var(--space-16) - var(--space-32)); }
.opening-zaal .intro { margin-top: var(--space-8); } /* 32 + 8 = 40 px onder de regel */
.opening-zaal h1.label { color: var(--bg-canvas); }
.opening-zand h1.label { color: var(--bg-section-warm); }
@media (max-width: 600px) {
  .opening-zaal .logo-groot + .label { margin-top: calc(var(--space-12) - var(--space-32)); }
  .opening-zaal .intro { margin-top: 0; }
  .opening-zaal h1.label { color: var(--bg-canvas); }
  .opening-zand h1.label { color: var(--bg-section-warm); }
  .homekeuze { position: absolute; top: calc(73px + var(--space-8)); bottom: auto; box-shadow: none; }
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal { padding-top: calc(73px + var(--space-80)); }
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk:not(.opening-zaal) { padding-top: var(--space-64); }
}
/* 17:48 (Wubbo): Matglas is een losse schakelaar voor elke kleur (js/klub.js zet html.matglas); erbij koperbruin en indisch bruin.
   Elke versie zet --logo-kleur; het logo is die kleur, met matglas aan voor de helft doorzichtig met de zaal wazig erachter.
   De regel onder het logo heeft dezelfde kleur, behalve waar dat niet leesbaar is (koperbruin: de donkere tekstversie van koper). */
.opening-zaal { --logo-kleur: var(--bg-canvas); }
.opening-zand { --logo-kleur: var(--bg-section-warm); }
.opening-lichtgeel { --logo-kleur: var(--bg-section-light); }
.opening-koper { --logo-kleur: var(--copper-500); --regel-kleur: var(--copper-100); } /* 17:57 (Wubbo): dezelfde donkere waas als de andere kleuren, de regel in een lichte tint van koper */
.opening-zaal .logo-mat .mat { background: var(--logo-kleur); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.matglas .opening-zaal .logo-mat .mat {
  background: color-mix(in srgb, var(--logo-kleur) 55%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.3) brightness(1.05); backdrop-filter: blur(10px) saturate(1.3) brightness(1.05);
}
.opening-zaal h1.label { color: var(--regel-kleur, var(--logo-kleur)); }
/* de schakelaar in het kiezertje: een klein schuifje, gevuld als matglas aan staat */
.homekeuze .matglas-knop {
  gap: var(--space-8); border: 0; background: none; cursor: pointer; font-family: inherit;
  margin-left: var(--space-4); border-left: 1px solid var(--border-default); border-radius: 0; padding-left: var(--space-12);
}
.matglas-knop .schuif { position: relative; width: 28px; height: 16px; border-radius: 8px; background: var(--border-strong); transition: background-color .2s ease; }
.matglas-knop .schuif::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-surface); transition: transform .2s ease; }
.matglas-knop[aria-pressed="true"] .schuif { background: var(--text-default); }
.matglas-knop[aria-pressed="true"] .schuif::after { transform: translateX(12px); }
.homekeuze .matglas-knop:hover { background: none; }
@media (max-width: 600px) {
  .homekeuze { flex-wrap: wrap; justify-content: center; row-gap: 0; }
  .homekeuze .matglas-knop { margin-left: 0; border-left: 0; }
}
/* de regel onder het logo moet ook in de kleur van het logo goed leesbaar blijven (minstens 4,5:1): de waas is rond de regel iets
   dichter, op de donkere en op de lichte versies */
.opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .55) 0%, rgb(40 30 29 / .52) 25%, rgb(40 30 29 / .74) 50%, rgb(40 30 29 / .84) 100%); } /* donkere waas */
@media (max-width: 600px) {
  .opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .55) 0%, rgb(40 30 29 / .62) 25%, rgb(40 30 29 / .74) 45%, rgb(40 30 29 / .88) 100%); } /* donkere waas */
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal { padding-top: calc(73px + var(--space-128)); }
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk:not(.opening-zaal) { padding-top: var(--space-96); }
}
/* 18:02 (Wubbo): met matglas aan werden de letters veel donkerder. De zaal achter het glas wordt nu per kleur opgelicht
   (--glas-licht), zodat de letters even licht aanvoelen als zonder matglas (nagemeten: 0,95 tot 1,0 van de helderheid) */
.opening-zaal { --glas-licht: 3.2; }
.opening-zand { --glas-licht: 2.4; }
.opening-lichtgeel { --glas-licht: 3; }
.opening-koper { --glas-licht: 1.5; }
html.matglas .opening-zaal .logo-mat .mat {
  background: color-mix(in srgb, var(--logo-kleur) 60%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2) brightness(var(--glas-licht)); backdrop-filter: blur(10px) saturate(1.2) brightness(var(--glas-licht));
}
html.matglas .opening-koper .logo-mat .mat { background: color-mix(in srgb, var(--logo-kleur) 65%, transparent); }
/* 18:07 (Wubbo): koperbruin twee keer: Koperbruin (#a16d52, zoals de huisstijl het noemt) en Koperbruin donker (#9d5d23, de kleur van
   de knoppen). Allebei met de regel in een lichte koperkleur. */
.opening-koperdonker { --logo-kleur: var(--bg-primary); }
/* 18:08 (Wubbo): Goud, het logo zoals het in bladgoud op het raam van De Klub staat (foto raam-1280). Bladgoud is niet één kleur:
   diep oker, warm goud en felle lichte banen naast elkaar, schuin over de letters, met bovenin wat meer licht en onderin wat
   schaduw. De kleuren komen uit de foto. Een zachte glans trekt af en toe langzaam over de letters, zoals licht op het raam.
   Met matglas aan is het goud voor een deel doorzichtig, met de zaal wazig erachter. */
.opening-goud {
  --goud-diep: #9c6c07; --goud-oker: #c48a08; --goud: #e2a90c; --goud-fel: #f3bd1c; /* bladgoud, uit de foto van het raam */
  --logo-kleur: var(--goud);
  --regel-kleur: var(--goud-fel);
  --glas-licht: 2.2;
  --goud-blad: linear-gradient(180deg, rgb(255 236 160 / .28) 0%, rgb(255 236 160 / 0) 38%, rgb(70 45 0 / 0) 62%, rgb(70 45 0 / .28) 100%),
    /* scherpe vlakken zoals in echt bladgoud: hier en daar een lichte of donkere baan met harde randen */
    linear-gradient(97deg, rgb(255 228 130 / 0) 0 17%, rgb(255 228 130 / .3) 17% 21%, rgb(255 228 130 / 0) 21% 43%, rgb(90 55 0 / .22) 43% 47%,
      rgb(90 55 0 / 0) 47% 66%, rgb(255 228 130 / .26) 66% 69%, rgb(255 228 130 / 0) 69% 88%, rgb(90 55 0 / .2) 88% 92%, rgb(90 55 0 / 0) 92%),
    linear-gradient(104deg, var(--goud-oker) 0%, var(--goud) 12%, var(--goud-oker) 24%, var(--goud-fel) 36%, var(--goud) 48%,
      var(--goud-fel) 58%, var(--goud-oker) 70%, var(--goud) 84%, var(--goud-diep) 100%);
}
.opening-goud .logo-mat .mat { background: var(--goud-blad); overflow: hidden; }
.opening-goud .logo-mat .mat::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, rgb(255 246 210 / 0) 35%, rgb(255 246 210 / .55) 50%, rgb(255 246 210 / 0) 65%); /* glans */
}
@media (prefers-reduced-motion: no-preference) {
  .opening-goud .logo-mat .mat::after { animation: goud-glans 9s ease-in-out 2s 1 both; } /* 18:14 (Wubbo): de glans maar één keer, bij binnenkomst */
}
@keyframes goud-glans { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
html.matglas .opening-goud .logo-mat .mat {
  background: linear-gradient(180deg, rgb(255 236 160 / .22) 0%, rgb(255 236 160 / 0) 38%, rgb(70 45 0 / 0) 62%, rgb(70 45 0 / .2) 100%), /* licht boven, schaduw onder */
    linear-gradient(104deg, color-mix(in srgb, var(--goud-oker) 62%, transparent) 0%, color-mix(in srgb, var(--goud) 62%, transparent) 12%,
      color-mix(in srgb, var(--goud-oker) 62%, transparent) 24%, color-mix(in srgb, var(--goud-fel) 62%, transparent) 36%,
      color-mix(in srgb, var(--goud) 62%, transparent) 48%, color-mix(in srgb, var(--goud-fel) 62%, transparent) 58%,
      color-mix(in srgb, var(--goud-oker) 62%, transparent) 70%, color-mix(in srgb, var(--goud) 62%, transparent) 84%,
      color-mix(in srgb, var(--goud-diep) 62%, transparent) 100%);
}
/* 18:18 (Wubbo): de Doorkijk met dezelfde ruimtes als de andere versies: de regel dicht onder het logo (16 px, op de telefoon 12 onder
   de band), de intro en de rest verder (40 px, telefoon 32) */
.opening-doorkijk:not(.opening-zaal) .logo-groot + .label { margin-top: calc(var(--space-16) - var(--space-32)); }
.opening-doorkijk:not(.opening-zaal) .intro { margin-top: var(--space-8); }
@media (max-width: 600px) {
  .opening-doorkijk:not(.opening-zaal) .doorkijk-band { margin-bottom: var(--space-12); }
  .opening-doorkijk:not(.opening-zaal) .logo-groot + .label { margin-top: 0; } /* het logo is hier verborgen, de band staat erboven */
  .opening-doorkijk:not(.opening-zaal) .intro { margin-top: 0; }
}
/* 20:31 (Wubbo): de intro op desktop op twee regels, in alle versies (text-wrap: balance verdeelt de woorden gelijk) */
@media (min-width: 1024px) { .opening-doorkijk .intro { max-width: 62ch; } }

/* De regel onder het grote logo precies even breed als het logo (7 november 2026, Wubbo), op een breed scherm; js/klub.js zet de
   lettermaat en de ruimte erboven en voegt dan .op-maat toe. Zonder JavaScript blijft de regel zoals hij was. */
@media (min-width: 1000px) {
  .opening .logo-groot + h1.label.op-maat { white-space: nowrap; line-height: 1; letter-spacing: 0; max-width: none; }
}
/* 21:11 (Wubbo): de zaalfoto is erg druk. In het kiezertje kun je nu ook het beeld kiezen (js/klub.js zet html[data-beeld]):
   Gele wand (de wand met de fazant, iemand loopt wazig voorbij), Hoge ramen (de zaal met de ramen), Zonlicht (tafels met strepen
   zonlicht), Privé hoek (de hoek van de private dining) en Raam (een tafel aan het raam met de letters). Foto's uit de WordPress-site
   en het fotoarchief; de nieuwe beelden van Saskia Lelieveld komen erbij als ze er zijn. */
html[data-beeld="wand"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-gele-wand-1280.webp"); background-position: 62% 40%; }
html[data-beeld="hoek"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-prive-hoek-1280.webp"); background-position: center 45%; }
@media (min-width: 821px) {
  html[data-beeld="wand"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-gele-wand-groot.webp"); background-position: center 40%; }
  html[data-beeld="hoek"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-prive-hoek-groot.webp"); }
}
.homekeuze .beeld-keuze {
  display: inline-flex; align-items: center; gap: var(--space-8); margin-left: var(--space-4); padding-left: var(--space-12);
  border-left: 1px solid var(--border-default); border-radius: 0;
}
.homekeuze .beeld-keuze[hidden] { display: none; }
.beeld-keuze select {
  font: inherit; color: var(--text-default); background: var(--bg-hover); border: 0; border-radius: var(--radius-button);
  min-height: 32px; padding: 0 var(--space-8); cursor: pointer;
}
@media (max-width: 600px) { .homekeuze .beeld-keuze { margin-left: 0; border-left: 0; padding-left: var(--space-8); } }
@media (max-width: 600px) {
  /* het kiezertje is met de beeldkeuze drie rijen hoog */
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal { padding-top: calc(73px + var(--space-128) + var(--space-40)); }
}
/* Gele wand is lichter: daar een iets dichtere waas, zodat de regel minstens 4,5:1 haalt (nagemeten) */
html[data-beeld="wand"] .opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .58) 0%, rgb(40 30 29 / .64) 25%, rgb(40 30 29 / .78) 50%, rgb(40 30 29 / .86) 100%); } /* donkere waas */
@media (max-width: 600px) { html[data-beeld="wand"] .opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .6) 0%, rgb(40 30 29 / .7) 25%, rgb(40 30 29 / .8) 45%, rgb(40 30 29 / .88) 100%); } } /* donkere waas */

/* 21:21 (Wubbo): Hoge ramen is zijn favoriet en nu het standaardbeeld; de oude zaalfoto (met de keuken) blijft te kiezen als Zaal.
   Zonlicht en Raam zijn weg. */
.opening-zaal .zaal > span { background-image: url("../img/de-klub-hoge-ramen-1280.webp"); background-position: center 55%; }
html[data-beeld="zaal"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-zaal-overzicht-1280.webp"); background-position: 56% 50%; }
@media (min-width: 821px) {
  .opening-zaal .zaal > span { background-image: url("../img/de-klub-hoge-ramen-groot.webp"); }
  html[data-beeld="zaal"] .opening-zaal .zaal > span { background-image: url("../img/de-klub-zaal-overzicht-2560.webp"); background-position: center 60%; }
}
/* 21:26 (Wubbo): de intro op de foto net zachter, beige in plaats van wit */
.opening-zaal .intro { color: var(--bg-canvas); }
/* 21:29 (Wubbo): op de telefoon (tot 1000 px) staat de regel over twee regels precies onder het logo, van de D tot de B; js/klub.js
   splitst de tekst, zet de maat en de letterafstand en voegt .op-maat-twee toe */
.opening .logo-groot + h1.label.op-maat-twee { max-width: none; text-align: left; line-height: 1.15; white-space: nowrap; }
.opening h1.label.op-maat-twee > span { display: block; }
/* 21:38 (Wubbo): op de foto is de knop Reserveer een tafel zandgeel met donkere tekst (4,6:1), net als het logo: nog meer rust in de
   opening. Bekijk het menu is beige omlijnd, zoals de intro. Alleen hier op de donkere foto; op de beige pagina's, in de kop en de
   zwevende knop blijft reserveren koper. */
.opening-zaal .knop:not(.rustig) { background: var(--bg-section-warm); border-color: var(--bg-section-warm); color: var(--text-default); }
.opening-zaal .knop:not(.rustig):hover { background: var(--bg-section-light); border-color: var(--bg-section-light); }
.opening-zaal .knop.rustig { color: var(--bg-canvas); border-color: var(--bg-canvas); }
.opening-zaal .knop.rustig:hover { background: var(--bg-canvas); color: var(--text-default); }
/* 21:38 (Wubbo): de cadeaubon in de kop hoort er ook bij: zolang de kop doorzichtig op de foto ligt, is hij zandgeel met een donker
   icoon. Zodra de kop zijn beige vlak terugkrijgt, wordt hij weer koper, net als Reserveren ernaast. */
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .knop {
  background: var(--bg-section-warm); border-color: var(--bg-section-warm); color: var(--text-default);
}
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .knop:hover {
  background: var(--bg-section-light); border-color: var(--bg-section-light);
}

/* 8 november 2026 (Wubbo, M4 op het canvas): op de telefoon een stap terug. Het logo staat niet meer op de foto maar klein in de kop
   (het grote logo is verborgen, dus de kop krijgt meteen zijn beige vlak en het kleine logo). Daaronder de foto met de hoge ramen
   zonder waas, van rand tot rand, en dan op beige de regel klein, de intro, de knoppen (koper, op papier) en de link naar de
   keukentijden. De foto vult alleen de ruimte die overblijft (de opening is precies een scherm hoog, de foto rekt mee, minstens
   180 px), zodat beide knoppen op gangbare telefoons zonder scrollen in beeld zijn. Desktop verandert niet. */
@media (max-width: 600px) {
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal.rand,
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal.rand,
  .opening.opening-doorkijk.opening-zaal.rand {
    display: flex; flex-direction: column; margin-top: 0; padding: 0; min-height: calc(100svh - 73px);
    background: var(--bg-canvas); color: var(--text-default); overflow: visible;
  }
  .opening-zaal .zaal { position: relative; inset: auto; flex: 1 1 auto; min-height: 180px; margin: 0 calc(var(--space-page-margin) * -1); transform: none !important; }
  .opening-zaal.rand .zaal { margin: 0; }
  .opening-zaal .zaal::after { display: none; }
  .opening-zaal .zaal > span { inset: 0; }
  .opening-zaal .binnen { padding: var(--space-24) var(--space-page-margin) var(--space-24); }
  .opening-zaal .tekstblok, .opening-zaal .tekstblok:has(.logo-groot) { gap: var(--space-16); }
  .opening-zaal .logo-groot { display: none; }
  .opening-zaal .logo-groot + .label, .opening-zaal h1.label { margin-top: 0; font-size: 16px; line-height: 1.45; color: var(--text-secondary); text-shadow: none; text-wrap: balance; }
  .opening-zaal .intro { margin-top: 0; color: var(--text-default); text-shadow: none; }
  .opening-zaal .knoppen { margin-top: var(--space-8); }
  .opening-zaal .knop:not(.rustig) { background: var(--bg-primary); border-color: var(--bg-primary); color: var(--text-on-primary); }
  .opening-zaal .knop:not(.rustig):hover { background: var(--bg-primary-hover); border-color: var(--bg-primary-hover); }
  .opening-zaal .knop.rustig { color: var(--text-default); border-color: var(--text-default); }
  .opening-zaal .knop.rustig:hover { background: var(--text-default); color: var(--bg-canvas); }
  .opening-zaal .tijdenlink a { color: var(--text-default); text-decoration-color: var(--border-link); }
  .opening-zaal :focus-visible { outline-color: var(--border-focus); }
  /* de kop is op de telefoon nooit doorzichtig: hij staat boven de foto, niet erop */
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) { background: var(--bg-canvas); color: var(--text-default); }
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .mobielmenu summary,
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze { color: var(--text-default); }
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze:focus-visible { outline-color: var(--border-focus); }
  html.js:has(.opening-zaal) .kop[data-logo-later] .logo { opacity: 1; visibility: visible; transform: none; }
  /* het kiezertje staat op de telefoon onder de opening, zodat het de knoppen niet wegduwt */
  .homekeuze { position: static; margin: var(--space-16); box-shadow: none; }
}
/* kleine telefoons (zoals de iPhone SE, zo'n 550 px zichtbaar): de foto mag lager en de tekst iets compacter, zodat ook Bekijk het
   menu nog in beeld is */
@media (max-width: 600px) and (max-height: 620px) {
  .opening-zaal .zaal { min-height: 120px; }
  .opening-zaal .binnen { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .opening-zaal .tekstblok, .opening-zaal .tekstblok:has(.logo-groot) { gap: var(--space-12); }
  .opening-zaal .intro { font-size: 18px; line-height: 1.4; }
  .opening-zaal .knoppen { margin-top: var(--space-4); }
}
/* 11:38 (Wubbo): van de staande foto bleef weinig over. Keuze: de link Keukentijden en adres mag net onder de vouw en de intro iets
   kleiner, zodat de foto groter wordt (ongeveer vierkant) en beide knoppen toch in beeld blijven. De opening is daarom een scherm
   plus de hoogte van de link; de foto vult de rest. */
@media (max-width: 600px) {
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal.rand,
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal.rand,
  .opening.opening-doorkijk.opening-zaal.rand { min-height: calc(100svh - 73px + var(--space-56)); }
  .opening-zaal .binnen { padding-top: var(--space-20); }
  .opening-zaal .tekstblok, .opening-zaal .tekstblok:has(.logo-groot) { gap: var(--space-12); }
  .opening-zaal .intro { font-size: 19px; line-height: 1.4; }
}
@media (max-width: 600px) and (max-height: 620px) {
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal.rand,
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal.rand,
  .opening.opening-doorkijk.opening-zaal.rand { min-height: calc(100svh - 73px + var(--space-40)); }
  .opening-zaal .intro { font-size: 18px; }
}
/* 11:45 (Wubbo): op de telefoon geen kiezertje; de versies verschillen daar niet (het logo staat niet op de foto) */
@media (max-width: 600px) {
  .homekeuze { display: none; }
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk:not(.opening-zaal).rand { padding-top: var(--space-16); }
}

/* ---------- Voorbeeld: letters die je kunt draaien (branch voorbeeld-draailetters, 9 november 2026, js/draailetters.js) ----------
   Een canvas over het vlakke logo, links en rechts 8 % en boven en onder 6 % groter, zodat een gedraaide letter erbuiten
   past. Het vlakke logo is dan onzichtbaar. Zonder JavaScript, met Minder beweging of met de schakelaar uit verandert er niets. */
.logo-mat .logo-draai { position: absolute; left: -8%; top: -6%; width: 116%; height: 112%; display: block; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .3s ease; }
.logo-mat .logo-draai.klaar { opacity: 1; } /* het logo komt pas op als de pagina geladen is en de browser rust heeft (10 november 2026) */
.logo-mat .logo-draai.vast { cursor: grabbing; }
html.draai-aan .opening-zaal .logo-mat .mat { opacity: 0; animation: none; }
/* Het vlakke logo komt niet eerst even op om daarna te verdwijnen: met JavaScript (en zonder Minder beweging) blijft het meteen
   weg en komen de draaiende letters op zijn plek. Laadt het script om wat voor reden niet, dan verschijnt het vlakke logo na
   twee seconden alsnog (10 november 2026, Wubbo: het logo moet er zo snel mogelijk zijn, zonder knipperen). */
@media (prefers-reduced-motion: no-preference) and (min-width: 601px) {
  html.js:not(.draai-aan) .opening-zaal[data-draai] .logo-mat .mat { opacity: 0; animation: logo-terugval .4s ease 2s forwards; }
}
@keyframes logo-terugval { to { opacity: 1; } }

/* de kiezer voor de momenten, alleen op een voorbeeldadres: rechtsonder, klein, met wat er nu actief is in de knop
   (overgenomen van de branch voorbeeld-momenten) */
.moment-kiezer {
  position: fixed; right: var(--space-16); bottom: var(--space-16); z-index: 40; max-width: calc(100vw - 2 * var(--space-16));
  font-size: 16px; line-height: 1.4; color: var(--text-default); background: var(--bg-surface);
  border: 1px solid var(--border-strong); border-radius: 22px; box-shadow: var(--shadow-header);
}
.moment-kiezer[open] { border-radius: 4px; }
.moment-kiezer summary { list-style: none; cursor: pointer; padding: var(--space-8) var(--space-16); min-height: 44px; display: flex; align-items: center; gap: var(--space-8); }
.moment-kiezer summary::-webkit-details-marker { display: none; }
.moment-kiezer-label { color: var(--text-secondary); }
.moment-kiezer-nu { font-weight: 600; }
.moment-kiezer-opties { display: grid; gap: var(--space-4); padding: 0 var(--space-8) var(--space-12); }
.moment-kiezer-opties button {
  font: inherit; text-align: left; cursor: pointer; min-height: 40px; padding: var(--space-8) var(--space-12);
  color: var(--text-default); background: transparent; border: 0; border-radius: 4px;
}
.moment-kiezer-opties button:hover { background: var(--bg-hover); }
.moment-kiezer-opties button[aria-pressed="true"] { background: var(--bg-canvas); font-weight: 600; }
.moment-kiezer-opties p { margin: var(--space-8) var(--space-12) 0; font-size: 16px; color: var(--text-secondary); max-width: 26ch; }
@media (max-width: 600px) { .moment-kiezer { bottom: var(--space-80); } } /* boven de zwevende knop */

/* ---------- Voorbeeld: de telefoon met de regel in de foto en alleen de K (branch voorbeeld-telefoon-k, 10 november 2026) ----------
   Wubbo koos op het canvas Home met groot logo voor E: de regel onder het logo staat op de telefoon onderin de foto, in zandgeel
   op een donkere waas, zoals op desktop; intro, knoppen en de link blijven op beige eronder. De waas hangt aan de regel zelf
   (::before) en loopt van onderen op tot net boven de tekst, zodat hij op elke telefoon even groot is, hoe hoog de foto ook is.
   De regel staat los van de rest (absoluut), dus hij kost geen hoogte: de foto blijft even groot als bij M4.
   Daarbij zijn eigen idee: in de foto alleen de K van het logo, als zacht geraamte van glas, die een stukje meedraait met
   scrollen (js/draailetters.js); zo kunnen ook de momenten (lampjes, sneeuw, champagne) op de telefoon. Desktop verandert niet. */
.k-houder { display: none; }
@media (max-width: 600px) {
  .opening-zaal .tekstblok .logo-groot + h1.label, .opening-zaal .tekstblok h1.label {
    position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; margin: 0;
    padding: 0 var(--space-page-margin) var(--space-24);
    font-size: 26px; line-height: 1.2; font-weight: 500; text-align: center; text-wrap: balance;
    color: var(--bg-section-warm); /* zandgeel, de kleur van het logo op desktop */
    text-shadow: 0 1px 2px rgb(40 30 29 / .4);
  }
  .opening-zaal .tekstblok h1.label::before {
    content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; top: calc(var(--space-64) * -1);
    background: linear-gradient(0deg, rgb(40 30 29 / .78) 0%, rgb(40 30 29 / .62) 45%, rgb(40 30 29 / 0) 100%);
  }
  .opening-zaal .binnen { padding-top: var(--space-24); }
  /* de plek van de K: midden in de foto, boven de regel; de tekening zoekt zelf de grootte die past (js/draailetters.js) */
  .opening-zaal .k-houder { display: block; position: absolute; left: 0; right: 0; top: var(--space-16); bottom: 132px; pointer-events: none; }
  .opening-zaal .k-houder .logo-draai { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; cursor: auto; pointer-events: none; }
}
@media (max-width: 600px) {
  .opening-zaal .k-houder .logo-draai { opacity: 0; transition: opacity .4s ease; }
  .opening-zaal .k-houder .logo-draai.klaar { opacity: 1; }
}
/* het kiezertje voor de momenten (alleen op een voorbeeldadres) staat op de telefoon gewoon onder de opening, niet op de knoppen */
@media (max-width: 600px) { .moment-kiezer { position: relative; right: auto; bottom: auto; display: block; width: fit-content; margin: var(--space-16) auto 0; } }
/* kleine telefoons (zoals de iPhone SE): de foto is daar laag, dus de regel iets kleiner en geen K (die zou er piepklein boven hangen) */
@media (max-width: 600px) and (max-height: 620px) {
  .opening-zaal .tekstblok .logo-groot + h1.label, .opening-zaal .tekstblok h1.label { font-size: 22px; padding-bottom: var(--space-16); }
  .opening-zaal .k-houder { display: none; }
}
/* voorbeeld-telefoon-vol, 10 november 2026, avond (Wubbo): in deze versie staat de regel weer onderin de foto (de regel bovenin, zoals
   op voorbeeld-telefoon-k, is hier teruggedraaid). Het logo zoekt zijn plek tussen de bovenkant van de foto en de regel
   (js/draailetters.js, maten); de plek beslaat daarom de hele foto. */
@media (max-width: 600px) { .opening-zaal .k-houder { top: 0; bottom: 0; } }
/* voorbeeld-telefoon-vol (10 november 2026, Wubbo): het hele logo staat op de telefoon geel in de foto, dus het kleine logo in de kop
   pas als dat uit beeld is (klub.js zet .logo-zichtbaar). Met Minder beweging wordt er niets in de foto getekend en blijft het
   kleine logo gewoon staan. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html.js:has(.opening-zaal .k-houder) .kop[data-logo-later]:not(.logo-zichtbaar) .logo { opacity: 0; visibility: hidden; transform: translateY(-6px); }
}
/* voorbeeld-telefoon-vol, 10 november 2026, avond (Wubbo): ook in de kop de foto, zoals op desktop. De opening schuift op de telefoon
   onder de kop door (de foto begint bovenaan het scherm), de kop is doorzichtig met witte iconen tot het logo in de foto uit beeld is
   en wordt dan beige. Bovenin de foto een zachte waas, zodat de witte iconen ook op de lichte ramen leesbaar blijven. */
@media (max-width: 600px) {
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal.rand,
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal.rand,
  .opening.opening-doorkijk.opening-zaal.rand { margin-top: -73px; min-height: calc(100svh + var(--space-56)); }
  .opening-zaal .zaal::before {
    content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 160px; pointer-events: none;
    background: linear-gradient(180deg, rgb(40 30 29 / .6) 0%, rgb(40 30 29 / .3) 50%, rgb(40 30 29 / 0) 100%);
  }
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) { background: transparent; color: var(--text-on-photo); }
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .mobielmenu summary,
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze { color: var(--text-on-photo); }
  html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):not(:has(.mobielmenu[open])) .taalkeuze:focus-visible { outline-color: var(--text-on-photo); }
}
@media (max-width: 600px) and (max-height: 620px) {
  html.js:has(.kop[data-logo-later]):has(.homekeuze) .opening.opening-doorkijk.opening-zaal.rand,
  html.js:has(.kop[data-logo-later]) .opening.opening-doorkijk.opening-zaal.rand,
  .opening.opening-doorkijk.opening-zaal.rand { min-height: calc(100svh + var(--space-40)); }
}
/* voorbeeld-telefoon-vol, 10 november 2026, avond (Wubbo: de foto voelde lichter dan op desktop): op de telefoon dezelfde waas over de
   hele foto als op desktop, in plaats van de twee losse wazen bovenin en achter de regel. Het logo in de foto ligt erboven. */
@media (max-width: 600px) {
  .opening-zaal { --zaal-waas: linear-gradient(180deg, rgb(40 30 29 / .55) 0%, rgb(40 30 29 / .52) 25%, rgb(40 30 29 / .74) 50%, rgb(40 30 29 / .84) 100%); }
  .opening-zaal .zaal::after { display: block; z-index: 1; }
  .opening-zaal .zaal::before { display: none; }
  .opening-zaal .tekstblok h1.label::before { display: none; }
  .opening-zaal .k-houder { z-index: 2; }
}
/* voorbeeld-telefoon-vol: de letters zijn op de telefoon zijwaarts te draaien; omhoog en omlaag vegen blijft scrollen */
@media (max-width: 600px) { .opening-zaal .k-houder .logo-draai { pointer-events: auto; touch-action: pan-y; } }

/* ---------- Het uitklapmenu vouwt open (voorbeeld, 10 november 2026, avond, Wubbo: de kop flikkerde even als balk en het menu
   stond er ineens; het moet naar beneden uitvouwen) ----------
   Het paneel begint nu bovenaan de kop (top 0, achter de knoppen in de kop) en vouwt in één beweging van boven naar beneden open:
   kop en menu zijn één vlak dat uitrolt. Ligt de kop doorzichtig op de foto, dan blijft hij doorzichtig en rolt het beige paneel
   eroverheen, in plaats van dat de kop eerst in één keer beige wordt (dat was het flikkeren). De iconen in de kop kleuren zacht
   mee. Dichtgaan vouwt dezelfde weg terug (js/klub.js, sluitMenu). Met Minder beweging gaat het meteen open en dicht. */
.mobielmenu nav { top: 0; z-index: -1; padding-top: calc(73px + var(--space-16)); }
@media (min-width: 1200px) { .mobielmenu nav { padding-top: calc(73px + var(--space-24)); } }
html.js:has(.opening-zaal) .kop[data-logo-later]:not(.logo-zichtbaar):has(.mobielmenu[open]) { background: transparent; border-bottom-color: transparent; }
.kop .mobielmenu summary, .kop .taalkeuze { transition: color .3s ease, text-decoration-color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes uitvouwen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes invouwen { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
  .mobielmenu[open] nav { animation: uitvouwen .45s cubic-bezier(.2, .7, .2, 1) both; }
  .mobielmenu.sluit[open] nav { animation: invouwen .3s cubic-bezier(.4, 0, .6, 1) both; }
  .mobielmenu.sluit[open] nav > * { animation: none; }
}
@media (max-width: 600px) { .moment-kiezer { z-index: auto; } } /* het kiezertje (alleen op een voorbeeldadres) niet boven het open menu */

/* ---------- Het uitklapmenu als vel dat naar beneden schuift (10 november 2026, avond; Wubbo vond het uitvouwen nog niet super en
   vroeg Claude zelf de beste oplossing te bedenken) ----------
   Het afdekken van boven naar beneden (clip-path) voelde als een gordijn dat over de pagina werd getrokken, en de links kwamen
   er daarna nog eens los binnen: twee bewegingen door elkaar. Nu is het één ding: een beige vel, met kop en links eraan vast,
   schuift van boven het scherm naar beneden en ligt met een zachte schaduw op de pagina. Zo voelt het als iets dat uitklapt
   en dat je weer kunt wegschuiven. De inhoud van het vel komt net na het vel zacht op (anders schuiven de links door de knoppen
   in de kop heen). Het kleine logo staat in de kop zolang het menu open is, ook als de kop op de foto lag: het vel is beige,
   dus het logo hoort erbij en houdt het herkenbaar. Dicht gaat sneller dan open (0,24 tegen 0,38 s), zoals bij een vel dat je
   wegschuift. Met Minder beweging gaat alles meteen. */
.mobielmenu nav { box-shadow: 0 16px 32px rgb(40 30 29 / .14); }
html.js .kop[data-logo-later]:has(.mobielmenu[open]) .logo,
html.js:has(.opening-zaal .k-houder) .kop[data-logo-later]:not(.logo-zichtbaar):has(.mobielmenu[open]) .logo {
  opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease .1s, transform .3s ease .1s, visibility 0s;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes menu-in { from { transform: translateY(-100%); } to { transform: none; } }
  @keyframes menu-uit { from { transform: none; } to { transform: translateY(-100%); } }
  @keyframes menu-inhoud { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .mobielmenu[open] nav { animation: menu-in .38s cubic-bezier(.2, .8, .2, 1) both; }
  .mobielmenu.sluit[open] nav { animation: menu-uit .24s cubic-bezier(.5, 0, .9, .4) both; }
  .mobielmenu[open] nav > :nth-child(n) { animation: menu-inhoud .3s ease both; animation-delay: .14s; }
  /* bij dichtgaan is de inhoud al weg voor het vel omhoog schuift, anders schuiven de links onder het logo door */
  @keyframes menu-inhoud-uit { to { opacity: 0; } }
  .mobielmenu.sluit[open] nav > :nth-child(n) { animation: menu-inhoud-uit .1s ease both; animation-delay: 0s; }
  .kop .mobielmenu summary, .kop .taalkeuze { transition-duration: .38s; }
}
/* voorbeeld-telefoon-vol, 10 november 2026, avond (Wubbo): logo en regel als geheel iets hoger in de foto; het logo volgt de regel
   (js/draailetters.js, maten) */
@media (max-width: 600px) {
  .opening-zaal .tekstblok .logo-groot + h1.label, .opening-zaal .tekstblok h1.label { padding-bottom: var(--space-48); }
}
@media (max-width: 600px) and (max-height: 620px) {
  .opening-zaal .tekstblok .logo-groot + h1.label, .opening-zaal .tekstblok h1.label { padding-bottom: var(--space-32); }
}