/* ============================================================
   Hof te Rhode hoofdstylesheet
   Merkpalet: brons & diep zwart domineren, neutralen ondersteunen,
   salie spaarzaam. Vervangt de Tailwind-CDN uit het prototype.
   ============================================================ */

:root {
  --bg:        #F4EEE4;  /* ivoor */
  --bg-alt:    #E7DECF;  /* crème */
  --paper:     #FBF8F0;  /* licht ivoor (kaartoppervlak) */
  --ink:       #2B2521;  /* espresso */
  --ink-soft:  #5A5247;
  /* #7A6F60 haalde 4,26:1 op ivoor en 3,69:1 op crème, te weinig voor de kleine tekst
     waar deze kleur voor dient (o.a. élk formulierlabel op 11 px). #6B6052 komt uit de
     merkrichtlijnen en haalt 5,32 / 4,60 / 5,79 op ivoor, crème en paper. */
  --ink-mute:  #6B6052;
  --wine:      #23201B;  /* onyx-espresso, donkere panelen & primaire knop */
  --wine-deep: #100E0B;  /* bijna zwart, footer */
  --salie:     #6F7359;  /* accentkleur (merkrichtlijnen: spaarzaam gebruiken) */
  /* Salie als tekstkleur haalde op klein formaat geen AA: 4,26:1 op ivoor en 3,69:1 op
     crème. Deze 12 % donkerdere variant haalt 5,23 en 4,53 en is bedoeld voor kleine
     tekst op lichte vlakken. --salie zelf blijft de merkkleur voor vlakken, randen,
     iconen en grote cursieve koppen, waar 3:1 volstaat en die drempel gehaald wordt. */
  --salie-ink: #61654E;
  --salie-soft:#9DA383;  /* licht salie, accent op donker */
  --brons:     #C7B59B;
  --line:      #D8CDB8;
  --line-soft: #E7DDCB;
  --dark-green:#141710;  /* reviews / donkere secties */
  --cream-txt: #E9DFCB;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --font-label: 'Jost', sans-serif;

  --track-wide: 0.18em;
  --track-widest: 0.28em;
  --container: 1400px;
  --radius: 8px;
  /* Zachte uitloop voor hover- en gloedovergangen. Stond nog niet in :root,
     waardoor var(--ease) ongeldig was en de transities die hem gebruiken
     (photo-card__more, b2b-banner) helemaal niet liepen. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset & basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line-soft); }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }
input, textarea, select { font: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wine); color: var(--paper); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Focusring: 1 px salie haalde op donkere panelen maar 3,30:1 en was bovendien erg dun.
   Nu 2 px, plus een lichte buitenrand via box-shadow zodat de ring zichtbaar blijft op
   zowel ivoor als espresso — op één van de twee valt altijd één van beide kleuren weg. */
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--salie-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(251, 248, 240, 0.55);
}
/* Op donkere secties de kleuren omdraaien: lichte ring met donkere halo */
.section--dark :is(input, textarea, select):focus,
.section--dark :is(button, a):focus-visible,
.section--darkgreen :is(button, a):focus-visible,
.hero-dark :is(button, a):focus-visible,
.site-footer :is(button, a):focus-visible {
  outline-color: var(--paper);
  box-shadow: 0 0 0 4px rgba(12, 11, 10, 0.55);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #E9DFCB; }
::-webkit-scrollbar-thumb { background: var(--salie); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
/* Smallere kolom voor lopende tekst; vervangt de inline max-width-attributen. */
.container--narrow { max-width: 1100px; }
@media (min-width: 1024px) { .container { padding-inline: 2.5rem; } }

/* ---------- Typografie ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
h1, h2, h3, .h-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; }
em.it, .footer__wordmark em, h1 em, h2 em {
  font-family: var(--font-display); font-style: italic; font-weight: 300; color: var(--salie);
}
/* Elke eyebrow krijgt een streepje erachter, zoals in de hero. Via ::after in
   plaats van losse <span class="rule">-elementen, zodat het overal geldt zonder
   markup. currentColor laat de streep meelopen met de variant: --salie-ink op
   licht, --salie-soft op donker, --brons op de donkere panelen. */
.eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--salie-ink);
  display: inline-block;
}
/* De streep is inline-block, niet een flex-item: bij een eyebrow die over twee
   regels breekt (mobiel, "Idyllische feestlocatie in Diest") loopt hij dan mee
   met de laatste regel in plaats van los naast het tekstblok te blijven staan. */
.eyebrow::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 2.5rem; height: 1px; margin-left: 0.9rem;
  background: currentColor; opacity: 0.5;
}
/* Staat de tekst gecentreerd, dan hoort er ook een streep vóór, anders staat
   het blok optisch uit het midden. Alleen in de vlakken die echt centreren. */
.section-title--center .eyebrow::before,
.cta-block .eyebrow::before,
.kort-band__intro .eyebrow::before,
.reviews .eyebrow::before,
.vintro .eyebrow::before,
.hero-dark__eyebrow:not(.hero-dark__eyebrow--links) .eyebrow::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 2.5rem; height: 1px; margin-right: 0.9rem;
  background: currentColor; opacity: 0.5;
}
/* align-self is nodig op de homepage: daar staat de herokolom op
   align-items:center, waardoor de <p> anders krimpt en gecentreerd blijft. */
.hero-dark__eyebrow--links { justify-content: flex-start !important; align-self: flex-start; }
/* De hero-inhoud staat gecentreerd; zonder dit zou de streep die op smalle
   schermen naar de tweede regel wikkelt alsnog gecentreerd uitkomen. */
.hero-dark__eyebrow--links .eyebrow { text-align: left; }
.eyebrow--light { color: var(--salie-soft); }
.eyebrow--brons { color: var(--brons); }
.lead { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.label { font-family: var(--font-label); }

.section-title h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--wine); margin-top: 1rem; }
.section-title .lead { margin-top: 1.25rem; max-width: 42rem; }
.section-title--center { text-align: center; }
.section-title--center .lead { margin-inline: auto; }

/* ---------- Knoppen ---------- */
.btn {
  font-family: var(--font-label);
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.75rem 1.5rem;
  letter-spacing: 0.06em;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  border: 1px solid transparent;
  text-align: center; justify-content: center;
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 0.95rem 2rem; font-size: 0.95rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.8rem; }
.btn--primary { background: var(--wine); color: var(--paper); }
.btn--primary:hover { background: var(--wine-deep); }
.btn--salie { background: var(--salie); color: var(--paper); }
.btn--salie:hover { background: #5d614b; }
.btn--salieline { border-color: var(--salie-soft); color: var(--paper); background: rgba(20,23,16,0.25); }
.btn--salieline:hover { background: rgba(157,163,131,0.2); }
.btn--secondary { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--secondary:hover { border-color: var(--salie); color: var(--salie); }
.btn--light { background: var(--paper); color: var(--wine); }

/* ---------- Header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  background: transparent;
}
.topbar { border-bottom: 1px solid var(--line-soft); display: none; }
@media (min-width: 1024px) { .topbar { display: block; } }
.topbar__inner {
  display: flex; justify-content: flex-end; gap: 1.5rem; height: 2.25rem; align-items: center;
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase;
  color: #4A3A2E;
}
.topbar__inner a:hover, .header__nav a:hover { color: var(--salie); }
/* Tapdoelen: de links waren 18 px hoog, de icoonknoppen 16x16 en 14x14. WCAG 2.2 vraagt
   minimaal 24x24. De balk is 36 px hoog, dus dit past zonder de vormgeving te wijzigen. */
.topbar__inner a, .topbar__inner button { display: inline-flex; align-items: center; min-height: 24px; }
.topbar__inner .topbar__icon { min-width: 24px; justify-content: center; }
/* z-index 1: de headerbalk blijft boven het fullscreen mobiele menu (z-index 0) */
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 5rem; position: relative; z-index: 1; }
.header__logo img { height: 3rem; width: auto; }
@media (min-width: 1024px) { .header__logo img { height: 3.5rem; } }
.header__nav {
  display: none; position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-label); font-size: 0.875rem; color: #4A3A2E;
}
@media (min-width: 1024px) { .header__nav { display: flex; gap: 0.25rem; } }
.header__nav a { padding: 0.5rem 1rem; white-space: nowrap; position: relative; transition: color 0.3s; }
.header__nav a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--wine); font-weight: 600; }
.header__nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 0.25rem; height: 1px; background: var(--salie);
}
/* ---------- Feesten-submenu, desktop ---------- */
/* De groep is de hoverzone. Openen kan via hover, via focus-within (toetsenbord, ook
   zonder JS) en via .is-open die de knop zet. Sluiten regelt main.js. */
.header__navgroup { position: relative; display: none; align-items: center; }
@media (min-width: 1024px) { .header__navgroup { display: inline-flex; } }
/* De negatieve marge haalt de padding van de navigatielink weg, zodat het
   pijltje tegen het woord staat; het raakvlak blijft 24 x 32 px. */
.header__subtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 2rem; margin-left: -0.9rem; color: inherit;
}
.header__subtoggle svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
html:not(.js) .header__navgroup:hover .header__subtoggle svg,
html:not(.js) .header__navgroup:focus-within .header__subtoggle svg,
.header__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.header__submenu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 15rem; padding: 0.5rem 0;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(43,37,33,0.28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s;
}
/* Zonder JS opent het paneel puur op hover en focus, zodat het toetsenbord er ook dan bij
   kan. Met JS is .is-open de enige bron: main.js zet die op hover, focus en klik. Anders
   zou :focus-within het paneel openhouden zodra de knop focus heeft en kon Escape het
   nooit visueel sluiten. */
html:not(.js) .header__navgroup:hover .header__submenu,
html:not(.js) .header__navgroup:focus-within .header__submenu,
.header__navgroup.is-open .header__submenu {
  opacity: 1; visibility: visible; transform: none;
}
.header__submenu a {
  padding: 0.5rem 1.125rem; white-space: nowrap; color: #4A3A2E;
  transition: background 0.2s, color 0.2s;
}
.header__submenu a:hover { background: var(--bg-alt); color: var(--wine); }
.header__submenu a[aria-current="page"] { color: var(--wine); font-weight: 600; }
/* Op de donkere hero staat de balk licht, het paneel zelf blijft een lichte kaart. */
.has-dark-hero .header__subtoggle { color: rgba(250,246,238,0.75); }
@media (prefers-reduced-motion: reduce) {
  .header__submenu, .header__subtoggle svg { transition: none; }
}

.header__actions { display: flex; align-items: center; gap: 0.5rem; }
.header__cta { display: none; }
@media (min-width: 640px) { .header__cta { display: inline-flex; } }
.header__burger {
  position: relative; display: inline-flex; width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center; color: var(--ink);
}
@media (min-width: 1024px) { .header__burger { display: none; } }
/* Beide iconen liggen op elkaar en wisselen met een kwartslag: geen sprong in de balk. */
.header__burger svg {
  position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__burger-close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
.header__burger[aria-expanded="true"] .header__burger-open { opacity: 0; transform: rotate(90deg) scale(0.7); }
.header__burger[aria-expanded="true"] .header__burger-close { opacity: 1; transform: none; }
/* Fullscreen overlay binnen de header (z-index 40): valt onder .header__inner,
   zodat logo en sluitknop zichtbaar blijven. Body-scroll lockt via .nav-open. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 0;
  background: var(--bg-alt); -webkit-backdrop-filter: none; backdrop-filter: none;
  font-family: var(--font-label);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav .container {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100%; padding-block: 6.5rem 1.5rem;
}
.mobile-nav a { padding: 0.75rem 0; font-size: 1.375rem; color: #4A3A2E; }
.mobile-nav a.btn { margin-top: 1.5rem; font-size: 0.875rem; color: var(--paper); }
/* --line-soft valt op de crème achtergrond bijna weg (#E7DDCB op #E7DECF); --line geeft
   een lijn die je net ziet zonder de rust in het menu te breken. */
.mobile-nav hr { margin: 1rem 0; border-color: var(--line); }
@media (min-width: 1024px) { .mobile-nav { display: none; } }
body.nav-open { overflow: hidden; }

/* Openingsanimatie: het vlak doezelt in, daarna komen de regels één per één op.
   Alleen met JS, want zonder JS staat het menu er meteen (via [hidden]-fallback). */
html.js .mobile-nav { opacity: 0; transition: opacity 0.3s ease; }
html.js .mobile-nav.is-open { opacity: 1; transition-duration: 0.4s; }
html.js .mobile-nav .container > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
html.js .mobile-nav.is-open .container > * {
  opacity: 1; transform: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hoofdlinks op 40 ms interval, de kleinere regels daarna wat dichter op elkaar. */
html.js .mobile-nav.is-open .container > *:nth-child(1)  { transition-delay: 0.08s; }
html.js .mobile-nav.is-open .container > *:nth-child(2)  { transition-delay: 0.12s; }
html.js .mobile-nav.is-open .container > *:nth-child(3)  { transition-delay: 0.16s; }
html.js .mobile-nav.is-open .container > *:nth-child(4)  { transition-delay: 0.20s; }
html.js .mobile-nav.is-open .container > *:nth-child(5)  { transition-delay: 0.24s; }
html.js .mobile-nav.is-open .container > *:nth-child(6)  { transition-delay: 0.27s; }
html.js .mobile-nav.is-open .container > *:nth-child(7)  { transition-delay: 0.30s; }
html.js .mobile-nav.is-open .container > *:nth-child(8)  { transition-delay: 0.33s; }
html.js .mobile-nav.is-open .container > *:nth-child(9)  { transition-delay: 0.36s; }
html.js .mobile-nav.is-open .container > *:nth-child(10) { transition-delay: 0.39s; }
html.js .mobile-nav.is-open .container > *:nth-child(11) { transition-delay: 0.42s; }
html.js .mobile-nav.is-open .container > *:nth-child(n+12) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  html.js .mobile-nav, html.js .mobile-nav .container > *,
  .header__burger svg {
    transition: none !important;
  }
  html.js .mobile-nav.is-open, html.js .mobile-nav.is-open .container > * {
    opacity: 1; transform: none; transition-delay: 0s !important;
  }
}

/* Vaste header: hij staat in de flow in plaats van absoluut over de hero, met
   een eigen achtergrond. Gebruikt op de evenementdetailpagina's. */
.header-vast .site-header { position: sticky; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.header-vast .hero-dark--detail,
.header-vast .hero-dark--detail .hero-dark__inner { min-height: 68vh; }
/* De sticky header zou een aangeklikt anker afdekken. */
.header-vast [id] { scroll-margin-top: 8rem; }

/* Donkere hero: lichte header-tekst over de video */
.has-dark-hero .site-header { color: var(--paper); }
.has-dark-hero .topbar { border-color: rgba(251,248,240,0.15); }
.has-dark-hero .topbar__inner, .has-dark-hero .header__nav, .has-dark-hero .header__burger { color: rgba(250,246,238,0.75); }
.has-dark-hero .header__nav a[aria-current="page"] { color: #FAF6EE; }
.has-dark-hero .header__logo img { filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
.has-dark-hero .mobile-nav { background: #101410; }
.has-dark-hero .mobile-nav a { color: rgba(250,246,238,0.85); }
/* Op het bijna-zwarte vlak zou de crème lijn hard oplichten: ivoor op 12 % volstaat. */
.has-dark-hero .mobile-nav hr { border-color: rgba(250,246,238,0.12); }

/* ---------- Hero (home & detail) ---------- */
.hero-dark {
  position: relative; overflow: hidden; min-height: 100vh;
  display: flex; flex-direction: column; color: var(--paper);
}
.hero-dark--detail { min-height: 88vh; }
/* scale hoort in de basisregel, niet alleen in de parallax-JS: zonder JS of bij
   reduced motion toonde de hero anders een andere uitsnede dan bedoeld. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.16); }
/* Pauzeknop voor de achtergrondvideo (WCAG 2.2.2). Wordt door main.js toegevoegd en
   bestaat dus alleen wanneer de video echt speelt. Bewust discreet, rechtsonder. */
.hero-video__toggle {
  position: absolute; bottom: 1.25rem; right: 1.25rem; z-index: 6;
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(251, 248, 240, 0.45); border-radius: 999px;
  background: rgba(12, 11, 10, 0.45); color: var(--paper);
  transition: background 0.3s, border-color 0.3s;
}
.hero-video__toggle:hover { background: rgba(12, 11, 10, 0.7); border-color: var(--paper); }
.hero-dark__shade { position: absolute; inset: 0; z-index: 1;
  /* Zachte donkere kern achter de titel + cinematische verloop (zoals het prototype) */
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(4,9,6,0.28) 0%, rgba(4,9,6,0.10) 50%, transparent 74%),
    linear-gradient(180deg, rgba(8,16,11,0.66) 0%, rgba(8,16,11,0.30) 28%, rgba(8,16,11,0.52) 62%, rgba(4,9,6,0.96) 100%);
}
.hero-dark--detail .hero-dark__shade {
  background: linear-gradient(180deg, rgba(10,20,13,0.60) 0%, rgba(10,20,13,0.28) 42%, rgba(4,9,6,0.92) 100%);
}
.hero-dark__inner {
  position: relative; z-index: 10; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding-top: 8rem; padding-bottom: 3.5rem; min-height: 100vh; text-align: center;
}
.hero-dark--detail .hero-dark__inner { justify-content: flex-end; align-items: flex-start; text-align: left; min-height: 88vh; padding-bottom: 4rem; }
/* Dit element is tegelijk .container (margin-inline:auto) én flex-item van .hero-dark,
   waardoor de auto-marges het tot de inhoudsbreedte laten krimpen en als geheel
   centreren — de tekst stond dus links uitgelijnd bínnen een gecentreerde kolom,
   niet tegen de rand. Marge en max-breedte hier uitschakelen laat de kolom de volle
   breedte vullen, zodat de padding echt de afstand tot de linkerrand bepaalt. */
@media (min-width: 1024px) {
  .hero-dark--detail .hero-dark__inner {
    margin-inline: 0; max-width: none;
    /* Padding gelijk aan de marge van de gecentreerde container, zodat de titel
       exact uitlijnt met het logo in de header en met de rest van de pagina.
       De max() vangt smallere schermen op, waar de berekening negatief wordt. */
    padding-inline: max(2.5rem, calc((100% - var(--container)) / 2 + 2.5rem));
  }
  .hero-dark--detail .hero-dark__inner > div { max-width: 52rem; }
}
.hero-dark__eyebrow { display: flex; align-items: center; gap: 1rem; justify-content: center; }
.hero-dark h1 {
  margin-top: 1.75rem; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 350;
  line-height: 0.98; color: var(--paper);
}
.hero-dark--detail h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); max-width: 56rem; }
.hero-dark h1 em { color: var(--salie-soft); font-weight: 400; }
.hero-dark .lead { color: var(--cream-txt); margin-top: 2rem; max-width: 36rem; }
.hero-dark__ctas { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.hero-dark--detail .hero-dark__ctas { justify-content: flex-start; }
.hero-dark__meta {
  width: 100%; padding-top: 1.75rem; border-top: 1px solid rgba(251,248,240,0.15);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem;
}
@media (min-width: 768px) { .hero-dark__meta { grid-template-columns: repeat(4, 1fr); } }
/* Mobiel: twee kolommen, links uitgelijnd; op desktop blijven de vier items gecentreerd. */
.hero-dark__meta div { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 0.75rem; font-size: 0.875rem; font-weight: 300; }
@media (min-width: 768px) { .hero-dark__meta div { justify-content: center; text-align: center; } }
.hero-dark__meta svg { color: var(--salie-soft); flex-shrink: 0; }

/* Lichte hero voor categoriepagina's */
.hero-cat { background: var(--bg-alt); padding: 9rem 0 5rem; }
.hero-cat h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 350; letter-spacing: -0.03em; line-height: 0.98; color: var(--wine); margin-top: 1.25rem; }
.hero-cat .lead { margin-top: 1.75rem; max-width: 42rem; }

/* ---------- Secties ---------- */
.section { padding-block: 5rem; }
.section--lg { padding-block: 6rem; }
.section--xl { padding-block: 8rem; }
@media (min-width: 1024px) { .section { padding-block: 6rem; } .section--lg { padding-block: 8rem; } .section--xl { padding-block: 10rem; } }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--wine-deep); color: var(--bg); }
.section--darkgreen { background: var(--dark-green); color: var(--cream-txt); }

/* ---------- Stats ---------- */
.stats { display: grid; gap: 2rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 4rem; } }
.stat { text-align: center; }
@media (min-width: 768px) {
  .stat { text-align: left; }
  .stat + .stat { border-left: 1px solid var(--line); padding-left: 3rem; }
}
.stat__num { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 350; line-height: 0.9; letter-spacing: -0.02em; color: var(--wine); font-variant-numeric: tabular-nums; }
.stat__lbl { font-family: var(--font-label); font-size: 0.875rem; text-transform: uppercase; letter-spacing: var(--track-wide); margin-top: 1rem; font-weight: 500; }
.stat__sub { font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--track-wide); margin-top: 0.25rem; color: var(--ink-mute); }

/* ---------- Fotokaarten (gelegenheden / b2b / afhaal) ---------- */
.card-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.photo-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; overflow: hidden; border-radius: var(--radius); color: var(--paper); isolation: isolate;
  transition: box-shadow 0.6s var(--ease);
}
.photo-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease-out; z-index: -2; }
/* De beeldpijplijn wikkelt elke <img> in een <picture> voor de WebP-bron. De <img> staat
   absoluut en valt dus uit de flow, maar de wrapper zelf niet: die werd een derde
   flex-item in .photo-card, en justify-content: space-between gaf hem een deel van de
   vrije ruimte. Daardoor zakte het label van 28 px naar 107 px, tot bijna een kwart van
   de kaarthoogte (18 kaarten op 4 pagina's).
   display: contents op de <picture> lost dit níet op: een <source> is geen display:none
   maar display:block, dus dan worden de bronnen zelf de flex-items en blijft het
   verschuiven. De wrapper moet net als de <img> uit de flow. */
.photo-card picture { position: absolute; inset: 0; z-index: -2; }
.photo-card:hover .photo-card__img { transform: scale(1.06); }

/* ---------- Betoverende gloed bij hover ----------
   Drie lagen die samen de sprookjestuin oproepen:
     1. een warme halo rond de kaart, plus een lichte lift;
     2. een gloed die vanuit de onderrand opkomt, alsof de kaart van
        binnenuit wordt verlicht;
     3. zes lichtjes die traag omhoog zweven, in hetzelfde warme geel als
        de dwaallichtjes in de verhaalsectie (rgba(255,238,188)).
   De gloed ligt op z-index 0: boven het donkere verloop (dat op -1 staat)
   maar onder de tekst, zodat het contrast van titel en zin niet verandert. */
.photo-card:hover {
  box-shadow:
    0 0 0 1px rgba(199,181,155,0.30),
    0 24px 60px -20px rgba(93,74,45,0.55),
    0 0 46px -8px rgba(255,214,150,0.28);
}
.photo-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  transition: opacity 0.75s var(--ease);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, rgba(255,238,188,0.95) 0%, rgba(255,238,188,0) 62%),
    radial-gradient(circle, rgba(255,238,188,0.80) 0%, rgba(255,238,188,0) 62%),
    radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(255,244,214,0) 62%),
    radial-gradient(circle, rgba(255,238,188,0.70) 0%, rgba(255,238,188,0) 62%),
    radial-gradient(circle, rgba(255,238,188,0.90) 0%, rgba(255,238,188,0) 62%),
    radial-gradient(circle, rgba(255,244,214,0.75) 0%, rgba(255,244,214,0) 62%),
    radial-gradient(150% 72% at 50% 106%, rgba(255,214,150,0.26) 0%, rgba(255,214,150,0) 60%);
  background-size: 5px 5px, 4px 4px, 6px 6px, 3px 3px, 5px 5px, 4px 4px, 100% 100%;
  background-position: 17% 90%, 34% 80%, 53% 94%, 69% 76%, 85% 88%, 44% 70%, 50% 100%;
}
.photo-card:hover::before {
  opacity: 1;
  animation: gloedZweef 9s linear infinite;
}
/* De gloed hoort bij de feesten. Kaarten die een dienst aanbieden, blijven
   erbuiten: bedrijfscatering op /business/ en traiteur, catering en
   feestdagen op /afhaal-catering/. Zij houden wel de beeldzoom.
   content: none zorgt dat de gloedlaag daar niet eens wordt aangemaakt. */
.photo-card--zonder-gloed::before { content: none; }
.photo-card--zonder-gloed:hover { box-shadow: none; }

@keyframes gloedZweef {
  from { background-position: 17% 92%, 34% 84%, 53% 96%, 69% 80%, 85% 90%, 44% 74%, 50% 100%; }
  to   { background-position: 13% 30%, 39% 22%, 49% 34%, 74% 16%, 80% 28%, 40% 10%, 50% 100%; }
}
/* Zonder bewegingsvoorkeur blijft de gloed staan, alleen het zweven stopt. */
@media (prefers-reduced-motion: reduce) {
  .photo-card:hover::before { animation: none; }
  .photo-card:hover .photo-card__img { transform: none; }
}
/* De kaart draagt onderaan een titel, één korte zin en de CTA. Het verloop is
   daarop afgestemd: nauwelijks iets bovenaan (daar staat niets meer sinds icoon
   en pijl weg zijn), en vanaf 38 % oplopend tot 0,94 onderaan.
   Nagerekend tegen het slechtste geval, een volledig witte foto:
     44 % (bovenrand titel, tweeregelig)  0,51 →  3,2:1   drempel 3:1 (38 px)
     72 % (de korte zin)                  0,83 →  9,5:1   drempel 4,5:1
     81 % (Ontdek meer, --brons)          0,86 →  5,7:1   drempel 4,5:1
   --salie-soft haalde op die laatste positie maar 4,33:1, vandaar --brons. */
.photo-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(34,24,19,0.10) 0%,
    rgba(34,24,19,0.02) 18%,
    rgba(34,24,19,0.38) 38%,
    rgba(34,24,19,0.76) 56%,
    rgba(34,24,19,0.94) 100%);
}
.photo-card__body { padding: 1.75rem; position: relative; }
@media (min-width: 1024px) { .photo-card__body { padding: 2rem; } }
.photo-card h2, .photo-card h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; color: var(--paper); }
.photo-card p { margin-top: 0.7rem; font-size: 1rem; line-height: 1.5; color: var(--cream-txt); }
.photo-card__more {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--brons); transition: gap 0.3s var(--ease);
}
.photo-card:hover .photo-card__more { gap: 0.85rem; }

/* Homepage-gelegenheden: iets hoger dan de kaarten op /feesten/. */
.photo-card--cat { min-height: 460px; }
.photo-card--cat h3 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }

.img-label {
  position: absolute; bottom: 0.9rem; left: 1rem; right: 1rem; z-index: 2;
  font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.img-wrap { position: relative; }
.link-underline {
  font-family: var(--font-label); font-size: 0.875rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
  opacity: 0.8; transition: opacity 0.3s; padding: 0.5rem 1rem;
}
.link-underline:hover { opacity: 1; }

/* ---------- Reviews (donker + sterren) ---------- */
.reviews { position: relative; overflow: hidden; text-align: center; }
.reviews > .container { position: relative; z-index: 3; }
.reviews .stars { color: var(--brons); letter-spacing: 4px; font-size: 16px; }
.reviews__score { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); margin-top: 1rem; color: var(--cream-txt); }
.reviews__source { font-family: var(--font-label); text-transform: uppercase; font-size: 13px; letter-spacing: var(--track-wide); color: var(--brons); }
.reviews__grid { display: grid; gap: 1.75rem; margin-top: 3rem; text-align: left; }
@media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
.rev-card { border: 1px solid rgba(233,226,214,0.16); padding: 2rem 1.75rem; border-radius: var(--radius); transition: 0.4s; height: 100%; }
.rev-card:hover { border-color: var(--salie-soft); transform: translateY(-4px); }
.rev-card blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.42; }
.rev-card footer { font-family: var(--font-label); margin-top: 1.25rem; font-size: 0.75rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--salie-soft); }

/* ---------- Fireflies (zwevende lichtjes, uit het prototype) ---------- */
.fireflies { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.firefly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,238,188,.95), rgba(255,206,120,0) 70%);
  opacity: 0; will-change: transform, opacity;
}
.firefly-bright {
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 42%, rgba(255,255,255,0) 72%);
  box-shadow: 0 0 6px 1px rgba(255,255,255,.30);
}
@keyframes drift { from { transform: translate(0,0); } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes twinkle { 0%,100% { opacity: 0; } 25% { opacity: .95; } 55% { opacity: .35; } 80% { opacity: .7; } }
@keyframes twinkleBright { 0%,100% { opacity: 0; } 24% { opacity: .78; } 55% { opacity: .32; } 80% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .firefly { animation: none !important; } }

/* ---------- Verhaal: scrollytelling (3 hoofdstukken) ----------
   Basis = statisch gestapeld (zonder JS én bij reduced motion).
   Met JS krijgt de sectie de sticky scroll-gedreven variant. */
.verhaal { position: relative; background: var(--dark-green); color: var(--cream-txt); }
.vstage { position: relative; padding: 5.5rem 0; overflow: hidden; }
/* De scènes waren CSS-achtergronden en omzeilden daarmee srcset; nu een <img> met
   object-fit, zodat ze wel een responsive variant krijgen. De achtergrondkleur blijft
   als opvulling zolang het beeld nog niet binnen is. */
.vscene { position: absolute; inset: 0; background: #3B4A39; opacity: 0; }
.vscene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vscene[data-i="0"] { opacity: 0.35; }
.vveil { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at 50% 45%, rgba(20,24,19,.26), rgba(13,16,12,.85)); }
.verhaal .fireflies { z-index: 3; }
.vintro { position: absolute; top: 3rem; left: 0; right: 0; text-align: center; z-index: 5; display: none; }
.vbeat {
  position: relative; z-index: 4; text-align: center; padding: 0 1.75rem;
  color: var(--cream-txt); margin: 3.4rem auto; max-width: 45rem;
}
.vno { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; color: var(--brons); }
.vbeat h2 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8.5vw, 110px);
  color: #FBFAF6; margin: 4px 0 18px; line-height: 0.92; letter-spacing: -0.01em;
}
.vbeat p {
  font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.5vw, 30px);
  color: rgba(251,250,246,.92); max-width: 40rem; margin: 0 auto; line-height: 1.4;
}
.vbeat .btn { font-style: normal; }
.vprog, .vcue { display: none; }

html.js .verhaal:not(.vstatic) { height: 360vh; }
html.js .verhaal:not(.vstatic) .vstage { position: sticky; top: 0; height: 100vh; padding: 0; }
html.js .verhaal:not(.vstatic) .vscene { opacity: 0; transform: scale(1.05); will-change: opacity, transform; }
html.js .verhaal:not(.vstatic) .vscene[data-i="0"] { opacity: 1; }
html.js .verhaal:not(.vstatic) .vintro { display: block; }
html.js .verhaal:not(.vstatic) .vbeat {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  margin: 0; max-width: none; opacity: 0; will-change: opacity, transform;
}
html.js .verhaal:not(.vstatic) .vprog {
  display: flex; position: absolute; right: 2.4rem; top: 50%; transform: translateY(-50%);
  z-index: 5; flex-direction: column; gap: 15px;
}
html.js .verhaal:not(.vstatic) .vdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--salie-soft); transition: 0.45s; }
html.js .verhaal:not(.vstatic) .vdot.on { background: var(--salie-soft); transform: scale(1.35); box-shadow: 0 0 14px rgba(157,163,131,.85); }
html.js .verhaal:not(.vstatic) .vcue {
  display: block; position: absolute; bottom: 2rem; left: 0; right: 0; text-align: center; z-index: 5;
  font-family: var(--font-label); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(233,226,214,.72);
}
@media (max-width: 900px) {
  html.js .verhaal:not(.vstatic) { height: 320vh; }
  html.js .verhaal:not(.vstatic) .vprog { right: 1rem; }
  .vbeat h2 { font-size: clamp(40px, 12vw, 72px); }
}

/* ---------- Uitgelicht evenement ---------- */
.feature-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .feature-split { grid-template-columns: 1fr 1fr; } }
.feature-split h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -0.025em; line-height: 1.05; color: #F2EBDD; }
.feature-split h2 em { color: var(--salie-soft); }
.feature-split .lead { color: rgba(244,238,228,0.9); max-width: 34rem; }
.feature-facts { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 28rem; padding-block: 1.25rem; border-top: 1px solid rgba(157,163,131,0.2); border-bottom: 1px solid rgba(157,163,131,0.2); }
.feature-facts dt { font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--track-wide); opacity: 0.6; }
.feature-facts dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.25rem; }
.photo-frame { position: relative; }
.photo-frame::before {
  content: ''; position: absolute; inset: -8px; border: 1px solid rgba(176,112,51,0.3);
  transform: translate(8px, 8px); pointer-events: none; transition: transform 0.4s;
}
.photo-frame:hover::before { transform: translate(12px, 12px); }
.img-wrap { overflow: hidden; border-radius: var(--radius); }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.img-wrap:hover img { transform: scale(1.06); }

/* ---------- Detailpagina gelegenheid ---------- */
.geo-answer { padding: 1.75rem 2rem; background: var(--bg-alt); border-left: 2px solid var(--salie); }
.geo-answer .eyebrow { margin-bottom: 0.75rem; }
.geo-answer p { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.55; font-weight: 350; }

/* "In het kort" op /feesten/: zelfde inhoud als een geo-answer, maar als
   belevingsblok in de stijl van de donkere verhaalsectie. Bewust zonder
   dwaallichtjes: het blok moet leesbaar zijn, niet bewegen. */
.kort-blok {
  position: relative; overflow: hidden;
  padding: 3rem 2rem;
  background: var(--wine); color: var(--bg);
}
@media (min-width: 768px) { .kort-blok { padding: 4rem 4.5rem; } }
.kort-blok .eyebrow { position: relative; }
.kort-blok__tekst {
  position: relative; margin-top: 1.25rem; max-width: 46rem;
  font-family: var(--font-display); font-weight: 350;
  font-size: 1.35rem; line-height: 1.6;
}
@media (min-width: 768px) { .kort-blok__tekst { font-size: 1.5rem; } }
.kort-blok__feiten {
  position: relative; margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(199, 181, 155, 0.28);
  display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .kort-blok__feiten { grid-template-columns: repeat(4, 1fr); } }
.kort-blok__feit strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 2rem; line-height: 1.1; color: var(--brons);
}
.kort-blok__feit span {
  display: block; margin-top: 0.35rem;
  font-family: var(--font-label); font-size: 10px;
  letter-spacing: var(--track-widest); text-transform: uppercase;
  color: var(--bg); opacity: 0.75;
}

/* Business/B2B als eigen blok onder het gelegenhedengrid, op /feesten/ en op de
   homepage. Op het salie-vlak haalt --brons (#C7B59B) maar 2,46:1 en --cream-txt
   3,72:1, allebei te weinig voor tekst van 11-12 px; --paper haalt 4,63:1. Ook het
   icoon gaat naar --paper, want 2,46 blijft onder de 3:1 die voor niet-tekstuele
   elementen geldt. Daarom staat álle tekst in dit blok op --paper. */
.b2b-banner {
  margin-top: 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 2.25rem 2rem;
  background: var(--salie); color: var(--paper);
  text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
@media (min-width: 900px) {
  .b2b-banner { flex-direction: row; align-items: center; gap: 2.5rem; padding: 2.5rem 3rem; }
}
.b2b-banner:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 24, 19, 0.25); }
.b2b-banner__head { display: flex; align-items: center; gap: 0.75rem; color: var(--paper); }
.b2b-banner__head .eyebrow { color: var(--paper); margin: 0; }
.b2b-banner__body { flex: 1; }
.b2b-banner__body h2 { font-size: 1.6rem; color: var(--paper); }
.b2b-banner__body p { margin-top: 0.5rem; max-width: 34rem; font-size: 0.95rem; line-height: 1.6; color: var(--paper); }
.b2b-banner__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-label); font-size: 11px;
  letter-spacing: var(--track-widest); text-transform: uppercase; white-space: nowrap;
}
.b2b-banner__arrow { display: inline-flex; transition: transform 0.35s var(--ease); }
.b2b-banner:hover .b2b-banner__arrow { transform: translate(3px, -3px); }
.detail-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: 7fr 5fr; } }
.detail-intro { margin-top: 2.5rem; display: grid; gap: 1.25rem; font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.sidebar { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 2rem; } }
.panel { padding: 1.75rem; background: var(--paper); border: 1px solid var(--line); }
.panel--dark { background: var(--wine); color: var(--bg); border: 0; }
.check-list { margin-top: 1rem; display: grid; gap: 0.75rem; }
.check-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.panel--dark .check-list li, .panel--dark a { color: var(--bg); }
.check-list svg { flex-shrink: 0; margin-top: 0.2rem; color: var(--salie); }
.panel--dark svg { color: var(--salie-soft); }
.panel--dark a { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.9rem; }
.panel--dark a:hover { color: var(--salie-soft); }
.panel__foot { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(157,163,131,0.25); font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: #D4C5A8; }

.usp-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .usp-grid { grid-template-columns: repeat(4, 1fr); } }
.usp { padding: 1.75rem; background: var(--bg); border: 1px solid var(--line); height: 100%; }
.section--alt .usp { background: var(--bg); }
/* Op de ivoren achtergrond hebben de kaarten juist het lichtere vlak nodig. */
.section:not(.section--alt) .usp { background: var(--paper); }
.usp__icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(111,115,89,0.1); color: var(--salie); margin-bottom: 1rem; }
.usp h3 { font-size: 1.25rem; }
.usp p { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }

.formule-grid { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 1024px) { .formule-grid { grid-template-columns: repeat(3, 1fr); } }
.formule { padding: 2rem; background: var(--paper); border: 1px solid var(--line); height: 100%; }
.formule--featured { background: var(--wine); color: var(--bg); border: 0; }
.formule h3 { font-size: clamp(1.5rem, 2vw, 1.85rem); }
.formule__price { font-family: var(--font-label); margin-top: 0.5rem; font-size: 0.875rem; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--salie-ink); }
.formule--featured .formule__price { color: var(--salie-soft); }
.formule .check-list { margin-top: 1.5rem; }
.formule--featured .check-list li { color: var(--bg-alt); }
.formule--featured .check-list svg { color: var(--salie-soft); }

/* ---------- FAQ (native details) ---------- */
.faq { max-width: 900px; margin-inline: auto; }
.faq__list { margin-top: 3rem; display: grid; gap: 1px; background: var(--line); }
.faq__list details { background: var(--bg); }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.15rem;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ''; width: 10px; height: 10px; flex-shrink: 0;
  border-right: 1.5px solid var(--salie); border-bottom: 1.5px solid var(--salie);
  transform: rotate(45deg); transition: transform 0.3s;
}
.faq__list details[open] summary::after { transform: rotate(225deg); }
.faq__list details p { padding: 0 1.5rem 1.5rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- CTA-blok ---------- */
.cta-block { padding: 2.5rem 1.5rem; background: var(--wine-deep); color: var(--bg); text-align: center; }
@media (min-width: 1024px) { .cta-block { padding: 4rem; } }
.cta-block h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--bg); margin-top: 1rem; }
.cta-block p { margin: 1.25rem auto 0; max-width: 36rem; font-weight: 300; opacity: 0.9; }
.cta-block__btns { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
/* ---------- Brochure-popup ---------- */
.brochure-modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(92vw, 34rem); width: 100%;
  margin: auto;
}
.brochure-modal::backdrop { background: rgba(16, 14, 11, 0.62); backdrop-filter: blur(3px); }
.brochure-modal__inner {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  padding: 2.5rem 2rem 2rem; display: grid; gap: 1.1rem;
}
@media (min-width: 640px) { .brochure-modal__inner { padding: 3rem 2.75rem 2.5rem; } }
.brochure-modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute); transition: color 0.3s;
}
.brochure-modal__close:hover { color: var(--wine); }
.brochure-modal__titel { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--wine); }
.brochure-modal__tekst { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.brochure-modal__submit { width: 100%; }
.brochure-modal__error { font-size: 0.85rem; color: #8a3030; }
.brochure-modal__privacy { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-mute); text-align: center; }


.others-grid { display: grid; gap: 0.75rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.others-grid a { display: block; padding: 1rem; background: var(--paper); border: 1px solid var(--line); transition: border-color 0.3s; }
.others-grid a:hover { border-color: var(--salie); }
.others-grid a svg { color: var(--salie); }
.others-grid .t { display: block; font-family: var(--font-display); font-size: 1.15rem; margin-top: 0.5rem; }

/* ---------- Feestpagina's: zalen, diensten, hero-features ---------- */
.hero-dark__note { margin-top: 1.5rem; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--salie-soft); }

/* Faciliteitenblokjes (zalen, tuin, kamers, parking) */
.zalen { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
@media (min-width: 720px) { .zalen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .zalen { grid-template-columns: repeat(3, 1fr); } }

.diensten-grid { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 768px) { .diensten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .diensten-grid { grid-template-columns: repeat(3, 1fr); } }
.dienst { padding: 1.75rem; background: var(--bg); border: 1px solid var(--line); height: 100%; }
.dienst h3 { font-size: 1.3rem; }
.dienst > p { margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); }
.dienst__partners { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
.dienst__partners a { color: var(--salie-ink); border-bottom: 1px solid var(--line); }
.dienst__partners a:hover { border-color: var(--salie); }
.dienst__partners span { color: var(--ink-mute); }

/* ---------- Werkwijze-tijdlijn ---------- */
.timeline { position: relative; margin-top: 4rem; max-width: 56rem; margin-inline: auto; list-style: none; padding: 0; }
.timeline::before { content: ''; position: absolute; left: 1.75rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
@media (min-width: 768px) { .timeline::before { left: 50%; } }
.timeline__step { position: relative; padding-bottom: 3.5rem; padding-left: 5rem; }
.timeline__step:last-child { padding-bottom: 0; }
@media (min-width: 768px) {
  .timeline__step { padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .timeline__step:nth-child(odd) .timeline__content { grid-column: 1; text-align: right; justify-self: end; }
  .timeline__step:nth-child(even) .timeline__content { grid-column: 2; }
  .timeline__step:nth-child(odd) .check-list li { flex-direction: row-reverse; text-align: right; }
}
.timeline__node {
  position: absolute; left: 1.75rem; top: 0; transform: translateX(-50%);
  width: 3.4rem; height: 3.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; background: var(--paper);
  border: 1px solid var(--line); color: var(--ink-mute); z-index: 2; transition: 0.5s;
}
/* Het cijfer lijnt uit op de h3 van de stap, niet op het midden van het hele
   blok: bij een lange tekst hing het anders halverwege de alinea. De offset
   centreert de cirkel op de eerste regel van de titel. */
@media (min-width: 768px) { .timeline__node { left: 50%; top: 0; transform: translate(-50%, -10px); } }
.timeline__step.in-view .timeline__node { background: var(--salie); border-color: var(--salie); color: var(--paper); box-shadow: 0 0 0 7px rgba(111,115,89,0.12); }
.timeline__content { max-width: 26rem; display: inline-block; text-align: left; }
.timeline__content h3 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); }
.timeline__content > p { margin-top: 0.75rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; }
.timeline__content .check-list { margin-top: 1.25rem; }
.timeline__content .check-list li { font-size: 0.875rem; }

/* ---------- Tijdlijn met voortgangslijn (over ons + hoe we werken) ---------- */
/* De lijn groeit mee met de scroll; hoogte komt via --tl-progress uit main.js */
.timeline--progress::after {
  content: ''; position: absolute; left: 1.75rem; top: 0; width: 2px;
  transform: translateX(-0.5px);
  height: var(--tl-progress, 0%); background: var(--salie); z-index: 1;
}
@media (min-width: 768px) { .timeline--progress::after { left: 50%; } }
@media (prefers-reduced-motion: reduce) { .timeline--progress::after { display: none; } }
.timeline--historie .timeline__node {
  width: auto; min-width: 3.4rem; height: 2.5rem; padding: 0 1rem;
  border-radius: 999px; font-size: 1.1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.timeline--historie .timeline__step { padding-left: 6rem; }
@media (min-width: 768px) {
  .timeline--historie .timeline__step { padding-left: 0; column-gap: 6.5rem; }
  /* Het jaartal stond verticaal gecentreerd op de hele stap, waardoor het bij
     een lange tekst ergens halverwege de alinea hing. Het lijnt nu uit op de
     h3: de pil staat op de eerste regel van de titel. */
  .timeline--historie .timeline__node { top: 0; transform: translate(-50%, -4px); }
}
.timeline--historie .timeline__content > p { font-size: 0.95rem; }
.timeline__slot {
  margin-top: 4rem; text-align: center;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem); color: var(--salie);
}

/* ---------- Evenementen ---------- */
.event-hero { display: grid; background: var(--wine); color: var(--bg); overflow: hidden; border-radius: var(--radius); }
@media (min-width: 1024px) { .event-hero { grid-template-columns: 7fr 5fr; } }
.event-hero__media { position: relative; min-height: 320px; }
.event-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-hero__badge { position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2; padding: 0.4rem 0.75rem; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; background: var(--salie); color: var(--paper); }
.event-hero__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .event-hero__body { padding: 3rem; } }
.event-meta { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--salie-soft); }
.event-hero__body h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: 1rem; color: var(--bg); }
.event-hero__body > p { margin-top: 1.25rem; font-weight: 300; line-height: 1.6; opacity: 0.92; }
.event-prog { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.event-prog li { display: flex; gap: 0.75rem; opacity: 0.92; }
.event-prog .n { font-family: var(--font-display); color: var(--salie-soft); }
.event-hero__foot { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.price { font-family: var(--font-display); font-size: 1.5rem; }
.price small { font-family: var(--font-label); font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-wide); opacity: 0.7; }

/* De hele rij is een link; hoger dan voorheen zodat het beeld meer ruimte krijgt. */
.event-row {
  display: grid; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.event-row:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -24px rgba(43, 37, 33, 0.4); }
.event-row__cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--salie-ink);
}
.event-row:hover .event-row__cta { color: var(--wine); }
@media (min-width: 768px) { .event-row { grid-template-columns: 5fr 7fr; } }
.event-row--full { opacity: 0.7; }
.event-row__media { position: relative; min-height: 300px; }
.event-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-row__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: 0.4rem 0.75rem; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; background: var(--wine); color: var(--bg); }
.event-row__body { padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .event-row__body { padding: 2.25rem; } }
.event-row__body .event-meta { color: var(--salie-ink); }
.event-row__body h3 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); margin-top: 0.75rem; }
.event-row__body > p { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 36rem; }
.event-row__foot { margin-top: 1.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-family: var(--font-label); font-size: 0.75rem; color: var(--ink-mute); }
.event-row__foot .price { color: var(--wine); font-size: 1.15rem; }
.events-list { display: grid; gap: 1.5rem; margin-top: 2.5rem; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 3rem; }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .img-wrap { height: 11rem; }
@media (min-width: 1024px) { .gallery .img-wrap { height: 15rem; } }

/* ---------- Formulieren ---------- */
.form-panel { padding: 2rem; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 1.25rem; }
.form-field label { display: block; font-family: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-wide); margin-bottom: 0.5rem; color: var(--ink-mute); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 0.75rem 1rem; font-size: 0.9rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
}
.form-grid-2 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } }
.form-success { padding: 2rem; background: var(--paper); border: 1px solid var(--line); display: none; }
.form-success.is-visible { display: flex; gap: 1rem; align-items: flex-start; }
.form-success svg { color: var(--salie); flex-shrink: 0; margin-top: 0.25rem; }
.form-success .t { font-family: var(--font-display); font-size: 1.25rem; }
.form-success p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }

/* Admin-demo: paneltitels waren h1 (vijf op één pagina) en droegen hun
   grootte in een inline style. Nu h2 met een eigen klasse. */
.admin__paneltitel { font-size: 2.2rem; }

/* Brochure-gate: de downloadknop met de uitleg eronder, op /brochure/. */
.brochure-gate { margin-top: 3rem; display: grid; gap: 1rem; justify-items: start; }
.brochure-gate .wizard-note { max-width: 60ch; }

/* ---------- Contact / vacatures ---------- */
.contact-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.contact-list li, .contact-list a { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--ink-soft); }
.contact-list svg { color: var(--salie); flex-shrink: 0; margin-top: 0.25rem; }
.contact-list a:hover { color: var(--wine); }

.job { padding: 1.75rem 2rem; background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .job { flex-direction: row; align-items: center; } }
.job__body { flex: 1; }
.job__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.job__head h2 { font-size: 1.5rem; }
.job__tag { font-family: var(--font-label); font-size: 10px; text-transform: uppercase; letter-spacing: var(--track-wide); padding: 0.25rem 0.5rem; background: var(--bg-alt); color: var(--salie-ink); border: 1px solid var(--line); }
.job p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }
.job__loc { margin-top: 0.5rem; font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--ink-mute); }

/* Uitgebreide vacaturekaart: de knop staat onder de tekst in plaats van
   ernaast, want de kaart bevat nu ook een uitklapbare omschrijving. */
.job-lijst { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .job--full { flex-direction: column; align-items: stretch; } }
.job__details { border-top: 1px solid var(--line); padding-top: 1rem; }
.job__details summary {
  cursor: pointer; list-style: none; font-family: var(--font-label); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--salie-ink);
  display: flex; align-items: center; gap: 0.5rem; min-height: 24px;
}
.job__details summary::-webkit-details-marker { display: none; }
.job__details summary::after {
  content: ''; width: 7px; height: 7px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 0.25s;
}
.job__details[open] summary::after { transform: rotate(225deg); }
.job__uitleg { padding-top: 1rem; }
.job__uitleg > p { margin-top: 0; }
.job__kolommen { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .job__kolommen { grid-template-columns: repeat(3, 1fr); } }
.job__kolom h3 {
  font-family: var(--font-label); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: var(--track-wide); color: var(--ink-mute); margin-bottom: 0.75rem;
}
.job__kolom ul { display: grid; gap: 0.6rem; }
.job__kolom li { display: flex; gap: 0.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.job__kolom svg { color: var(--salie); flex-shrink: 0; margin-top: 0.25rem; }

/* Kruimelband bovenaan pagina's zonder hero. De header staat absoluut en is
   transparant; op de webshop-productpagina's viel hij daardoor samen met de
   pagina-achtergrond. Deze band in crème geeft hem een eigen vlak, net als de
   hero-band dat op de andere pagina's doet. */
.kruimelband { background: var(--bg-alt); padding: 8rem 0 1.25rem; }
.kruimelband .breadcrumb { margin-bottom: 0; }
.kruimelband .breadcrumb [aria-current] { color: var(--ink); }

/* ---------- Contentpagina's (SEO) ---------- */
.breadcrumb {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.5rem;
}
.breadcrumb a:hover { color: var(--salie); }
.breadcrumb--light { color: rgba(233,223,203,0.55); margin-bottom: 2rem; }
.breadcrumb--light a:hover { color: var(--salie-soft); }
.text-link {
  font-family: var(--font-label); font-size: 0.8rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--salie);
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.3s;
}
.text-link:hover { border-color: var(--salie-ink); }
.detail-intro h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); color: var(--wine); margin-top: 1.5rem; }
.detail-intro h2:first-child { margin-top: 0; }
.sidebar .img-wrap img { aspect-ratio: 4 / 3; }

/* ---------- Footer ---------- */
.site-footer { background: var(--wine-deep); color: var(--cream-txt); }
.footer__grid { display: grid; gap: 2.5rem; padding-block: 4rem 3rem; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.2fr 1.3fr; gap: 3rem; padding-block: 5rem 3.5rem; } }
.footer__wordmark { font-family: var(--font-display); font-size: 2rem; color: #FBFAF6; }
.footer__wordmark em { font-style: italic; font-weight: 300; color: var(--salie-soft); }
.footer__desc { margin-top: 1rem; font-size: 0.95rem; font-weight: 300; line-height: 1.6; color: rgba(233,223,203,0.75); max-width: 22rem; }
.footer__cta { margin-top: 1.5rem; }
.footer__title {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--brons); margin-bottom: 1.1rem;
}
.footer__col ul { display: grid; gap: 0.55rem; }
.footer__col a, .footer__col li { font-size: 0.9rem; font-weight: 300; color: rgba(233,223,203,0.82); line-height: 1.5; }
.footer__col a { transition: color 0.3s; }
.footer__col a:hover { color: var(--salie-soft); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid rgba(233,223,203,0.14);
  font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.04em;
  color: rgba(233,223,203,0.55);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a:hover { color: var(--salie-soft); }
.footer__legal em { font-style: normal; color: var(--salie-soft); }

/* ---------- Sfeerband onder de hero (feest-detailpagina's) ---------- */
.sfeer-band { padding-block: 3.5rem; }
.sfeer-band__grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .sfeer-band__grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; }
  /* De buitenste twee staan iets lager, zodat de reeks niet als een strak blok leest */
  .sfeer-shot:first-child, .sfeer-shot:last-child { margin-top: 2rem; }
}
.sfeer-shot { margin: 0; overflow: hidden; border-radius: var(--radius); }
.sfeer-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 3 / 4; transition: transform 0.9s ease;
}
.sfeer-shot:hover img { transform: scale(1.04); }

/* ---------- Ceremoniesectie met fotogalerij (trouwfeest) ---------- */
.ceremonie-head { max-width: 46rem; }
.ceremonie-gallery {
  margin-top: 3rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .ceremonie-gallery { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.ceremonie-shot { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ceremonie-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 3 / 4; transition: transform 0.9s ease;
}
.ceremonie-shot:hover img { transform: scale(1.05); }
/* De tweede en vierde foto staan iets verschoven, zodat de reeks leeft */
@media (min-width: 900px) {
  .ceremonie-shot:nth-child(2n) { transform: translateY(2.25rem); }
  .ceremonie-gallery { align-items: start; padding-bottom: 2.25rem; }
}
.ceremonie-foot { margin-top: 3rem; max-width: 42rem; }

/* ---------- Brochureblok (herbruikbaar, home + detailpagina's) ---------- */
.brochure-card {
  max-width: 1000px; margin-inline: auto;
  display: grid; gap: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 768px) { .brochure-card { grid-template-columns: 5fr 7fr; } }
.brochure-card__media { position: relative; min-height: 220px; }
.brochure-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brochure-card__body { padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) { .brochure-card__body { padding: 2.5rem; justify-content: center; } }
.brochure-card__body h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--wine); margin-top: 0.75rem; }
.brochure-card__body > p { margin-top: 0.75rem; color: var(--ink-soft); }
.brochure-card__list { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.brochure-card__list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); }
.brochure-card__list svg { color: var(--salie); flex: none; }
.brochure-card__btns { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Juridische pagina's (voorwaarden, privacy, cookies, disclaimer) ---------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--wine); margin-top: 2.75rem; }
.legal h3 { font-size: 1.1rem; color: var(--wine); margin-top: 1.75rem; }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.1rem; list-style: disc; }
.legal li { margin-top: 0.5rem; }
.legal a { color: var(--salie-ink); border-bottom: 1px solid var(--line); transition: border-color 0.3s; }
.legal a:hover { border-color: var(--salie); }
.legal__contact address { font-style: normal; margin-top: 0.75rem; line-height: 1.7; }
.legal__meta { margin-top: 3rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Header: icoonknoppen & mandje-teller ---------- */
.header__iconbtn {
  position: relative; display: inline-flex; width: 2.5rem; height: 2.5rem;
  align-items: center; justify-content: center; color: inherit; transition: color 0.3s;
}
.header__iconbtn:hover { color: var(--salie); }
.header__iconbtn--mob { display: none; }
@media (max-width: 1023px) { .header__iconbtn--mob { display: inline-flex; } }
.topbar__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; transition: color 0.3s; }
.topbar__icon:hover { color: var(--salie); }
.cart-badge {
  position: absolute; top: -0.35rem; right: -0.5rem; min-width: 1rem; height: 1rem;
  padding: 0 0.22rem; border-radius: 999px; background: var(--salie); color: var(--paper);
  font-family: var(--font-label); font-size: 9px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
.header__iconbtn .cart-badge { top: 0.15rem; right: 0.05rem; min-width: 1.15rem; height: 1.15rem; font-size: 10px; }
.has-dark-hero .header__iconbtn:hover, .has-dark-hero .topbar__icon:hover { color: var(--salie-soft); }
.mobile-nav__sub { font-size: 0.875rem !important; padding: 0.6rem 0 !important; }

/* ---------- Feesten-submenu, mobiel ---------- */
/* De groep is één kind van .mobile-nav .container, zodat bestaande regels die op de
   directe kinderen mikken blijven kloppen. Zonder JS staat het submenu open (net als
   .reveal), met JS klapt main.js het dicht bij het initialiseren. */
.mobile-nav__grouphead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.mobile-nav__grouphead > a { flex: 1 1 auto; }
.mobile-nav__subtoggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; color: inherit;
}
.mobile-nav__subtoggle svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mobile-nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav__submenu {
  display: flex; flex-direction: column;
  padding-left: 1.125rem;
}
.mobile-nav__subitem { font-size: 1rem !important; padding: 0.5rem 0 !important; }
/* main.js zet bij het openen de exacte hoogte in max-height. Een vaste cap (voorheen
   24rem) animeerde het onzichtbare stuk tussen cap en echte hoogte mee: het einde van
   de opening werd afgeknepen en het sluiten kreeg een dode aanloop. De lichte drift
   omhoog sluit aan bij de rest van het menu. */
html.js .mobile-nav__submenu {
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-8px);
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .mobile-nav__submenu.is-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .mobile-nav__submenu, .mobile-nav__subtoggle svg { transition: none; }
}
.mobile-nav__admin {
  display: block; margin-top: 0.75rem; font-family: var(--font-label); font-size: 11px;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute) !important;
}
.has-dark-hero .mobile-nav__admin { color: rgba(250,246,238,0.6) !important; }

/* ---------- Placeholder-visuals (webshopproducten, admin) ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--c1, #3D1A1F), var(--c2, #6F7359));
}
.ph::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.16), transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(0,0,0,0.22), transparent 60%);
}
.ph--herb::before {
  content: ''; position: absolute; inset: 12%; border: 1px solid rgba(251,248,240,0.28);
  border-radius: 50% 50% 8px 8px / 62% 62% 8px 8px; z-index: 1;
}
.ph--card { height: 20rem; }
.ph--lg { height: 30rem; }
.ph--sm { height: 7rem; }
.ph--mini { width: 3.2rem; height: 3.2rem; flex-shrink: 0; display: inline-block; }
.ph__label {
  position: absolute; bottom: 0.9rem; left: 1rem; z-index: 2;
  font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: rgba(251,248,240,0.85);
}
.ph__tag {
  position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: 0.3rem 0.6rem;
  font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide);
  text-transform: uppercase; background: var(--paper); color: var(--wine);
}
.ph-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.75rem; }

/* ---------- Webshop ---------- */
/* Filter links uitgelijnd, met label ervoor. */
.shop-filterbalk { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.shop-filterbalk__label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--ink-mute);
}
.shop-filter { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-alt); border: 1px solid var(--line); }
.shop-filter button {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-wide);
  text-transform: uppercase; padding: 0.55rem 1rem; color: var(--ink-soft); transition: 0.25s;
}
.shop-filter button.is-active { background: var(--wine); color: var(--bg); }
.shop-grid { display: grid; gap: 2rem; }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card { display: block; }
.shop-card .ph { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.shop-card:hover .ph { transform: translateY(-4px); }
.shop-card__body { margin-top: 1.1rem; }
.shop-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 0.35rem; }
.shop-card__row h2, .shop-card__row h3 { font-size: 1.5rem; transition: color 0.3s; }
.shop-card:hover .shop-card__row h2, .shop-card:hover .shop-card__row h3 { color: var(--salie); }
.shop-card__price { font-family: var(--font-display); font-size: 1.2rem; color: var(--wine); white-space: nowrap; }
.shop-card__body > p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.shop-card[hidden] { display: none; }

.product-grid { display: grid; gap: 3rem; margin-top: 1rem; }
@media (min-width: 1024px) { .product-grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.product-info__title { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--wine); margin-top: 0.75rem; }
.product-info__price { font-family: var(--font-display); font-size: 2rem; color: var(--wine); margin-top: 0.75rem; }
.form-label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.6rem;
}
.variant-list { display: grid; gap: 0.5rem; }
.variant-list button {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.1rem; font-size: 0.95rem; text-align: left;
  background: var(--paper); border: 1px solid var(--line); transition: 0.25s;
}
.variant-list button:hover { border-color: var(--salie); }
.variant-list button.is-active { background: var(--wine); color: var(--bg); border-color: var(--wine); }
.variant-list button.is-active::after { content: '✓'; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper); }
.qty-stepper button { width: 3rem; height: 3rem; font-size: 1.2rem; color: var(--ink); transition: background 0.2s; }
.qty-stepper button:hover { background: var(--bg-alt); }
.qty-stepper [data-qty-value] { width: 3rem; text-align: center; font-family: var(--font-display); font-size: 1.2rem; }
.product-info__meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.product-info__meta p { margin-top: 0.5rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Winkelmandje (drawer) ---------- */
.cart-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.cart-overlay[hidden] { display: none; }
.cart-overlay__scrim { position: absolute; inset: 0; background: rgba(16,14,11,0.5); }
.cart-drawer {
  position: relative; width: min(28rem, 100%); height: 100%; background: var(--bg);
  display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,0.2);
  animation: cart-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cart-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.cart-drawer__count { font-family: var(--font-display); font-size: 1.25rem; margin-top: 0.15rem; }
.cart-drawer__close { color: var(--ink-mute); } .cart-drawer__close:hover { color: var(--ink); }
.cart-drawer__body { flex: 1; overflow-y: auto; }
.cart-empty { padding: 4rem 2rem; text-align: center; color: var(--ink-soft); display: grid; gap: 1rem; justify-items: center; }
.cart-item { display: flex; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line-soft); }
.cart-item .ph { width: 4.5rem; height: 4.5rem; flex-shrink: 0; }
.cart-item__body { flex: 1; }
.cart-item__title { font-family: var(--font-display); font-size: 1.1rem; }
.cart-item__variant { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.15rem; }
.cart-item__row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
.cart-item__row .qty-stepper button { width: 1.9rem; height: 1.9rem; font-size: 0.95rem; }
.cart-item__row .qty-stepper [data-qty-value] { width: 1.9rem; font-size: 0.95rem; }
.cart-item__price { font-family: var(--font-display); color: var(--wine); }
.cart-item__remove { margin-left: auto; color: var(--ink-mute); font-size: 0.8rem; }
.cart-item__remove:hover { color: var(--wine); }
.cart-drawer__foot { border-top: 1px solid var(--line); padding: 1.5rem; background: var(--paper); }
.cart-lines { display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.cart-lines div { display: flex; justify-content: space-between; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.cart-total strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--wine); }
.cart-paymethods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.9rem; }
.cart-paymethods span { font-size: 0.75rem; text-align: center; padding: 0.7rem 0.25rem; background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); }
.cart-done { padding: 3rem 2rem; text-align: center; display: grid; gap: 0.75rem; justify-items: center; }

/* ---------- Wizards (offerte & event-inschrijving) ---------- */
/* Stepper als bolletjes met een lijn ertussen. De span blijft het element dat
   main.js aan- en uitzet; de lijn zit in ::before op alle behalve de eerste. */
.stepper { display: flex; align-items: center; }
.stepper span {
  flex: 1; display: flex; align-items: center; height: 0.85rem;
}
.stepper span::after {
  content: ''; flex: none; margin-left: auto;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  border: 1px solid var(--salie); background: var(--bg);
  transition: background 0.4s, border-color 0.4s;
}
.stepper span:first-child { flex: none; }
.stepper span:not(:first-child)::before {
  content: ''; flex: 1; height: 1px; background: #E0D5C2;
  transition: background 0.4s;
}
.stepper span.is-active::after { background: var(--salie); }
.stepper span.is-active:not(:first-child)::before { background: var(--salie); }

/* Genummerde stappenlijst in de zijkolom van /offerte/ */
.verder-lijst { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.verder-lijst li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.verder-lijst__no {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--salie); color: var(--salie-ink);
  font-family: var(--font-label); font-size: 10px;
}
.stepper-labels { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 0.6rem; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); }
.stepper-labels span:nth-child(2) { text-align: center; }
.stepper-labels span:last-child { text-align: right; }
.stepper-labels .is-active { color: var(--salie-ink); }
.wizard-step { margin-top: 2rem; }
.wizard-title { font-size: clamp(1.5rem, 2.5vw, 1.9rem); margin-bottom: 1.25rem; }
.wizard-note { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.75rem; }
.wizard-error { font-size: 0.85rem; color: var(--wine); margin-top: 0.5rem; font-weight: 500; }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; }
.form-check input[type="checkbox"] { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--salie); flex: none; }
.form-check label { font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); }
.form-check a { color: var(--salie-ink); border-bottom: 1px solid var(--line); }
.wizard-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--bg); border: 1px solid var(--line); }
.wizard-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); margin-bottom: 1.25rem; }
.wizard-total strong { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; color: var(--wine); }
.wizard-btns { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.wizard-btns .btn { flex: 1; justify-content: center; }
.wizard-btns--end { justify-content: flex-end; }
.wizard-btns--end .btn { flex: 0 1 auto; }
.type-grid { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .type-grid { grid-template-columns: 1fr 1fr; } }
.type-grid button { text-align: left; padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); transition: 0.25s; }
.type-grid button:hover { border-color: var(--salie); }
.type-grid button.is-active { background: var(--wine); border-color: var(--wine); }
.type-grid .t { display: block; font-family: var(--font-display); font-size: 1.25rem; }
.type-grid .p { display: block; margin-top: 0.25rem; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); }
.type-grid button.is-active .t { color: var(--bg); }
.type-grid button.is-active .p { color: var(--salie-soft); }
.allergy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.allergy-grid button { text-align: left; padding: 0.6rem 0.8rem; font-size: 0.9rem; background: var(--bg); border: 1px solid var(--line); color: var(--ink-soft); transition: 0.2s; }
.allergy-grid button:hover { border-color: var(--salie); }
.allergy-grid button.is-active { background: var(--wine); color: var(--bg); border-color: var(--wine); }
.allergy-grid button.is-active::before { content: '✓ '; }
.wizard-done { text-align: center; }
.wizard-done__check { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--salie); color: var(--paper); display: flex; align-items: center; justify-content: center; }
.wizard-summary { margin: 1.5rem 0 0; padding: 1.25rem; background: var(--bg); border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.wizard-summary dt { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); }
.wizard-summary dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--wine); overflow-wrap: anywhere; }
.event-wizard__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; }
.event-wizard__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--wine); }
.event-wizard__price small { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); }
.event-prog--detail li { border-bottom: 1px solid var(--line-soft); padding: 0.75rem 0; display: flex; gap: 1rem; }

/* Minder witruimte richting het volgende blok (winkel -> brochure) */
.section--strak-onder { padding-bottom: 2rem; }

/* Groene variant van het offerteblok, voor de overzichtspagina's.
   Op --salie haalt --paper 4,63:1; alle tekst hier staat dus op --paper. */
.cta-block--salie { background: var(--salie); color: var(--paper); }
/* Volle breedte: het blok loopt van rand tot rand, de inhoud blijft gecentreerd
   op leesbare breedte. */
.offerte-cta { padding-inline: 0; }
.cta-block--vol { border-radius: 0; padding-inline: 1.5rem; }
.cta-block--vol > * { max-width: 62rem; margin-inline: auto; }
.cta-block--salie h2, .cta-block--salie p, .cta-block--salie .eyebrow { color: var(--paper); }

/* ---------- Kernfeiten tussen de omschrijvingstekst ---------- */
/* Elk feit in een eigen vakje. De rijen worden even hoog doordat de grid-items
   standaard stretchen, ook als de ene waarde over twee regels loopt. */
.feit-items {
  list-style: none; margin: 2rem 0; padding: 0;
  display: grid; gap: 0.75rem;
}
@media (min-width: 560px) { .feit-items { grid-template-columns: repeat(2, 1fr); } }
.feit-items li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.3rem;
  align-content: start;
  padding: 1.15rem 1.25rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.feit-items svg { grid-row: span 2; margin-top: 0.1rem; color: var(--salie); }
.feit-items__label {
  font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--salie-ink);
}
.feit-items__waarde { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }

/* ---------- Teamblok op /over-ons/ ----------
   Filmisch vlak met beeld, waas en dwaallichtjes, direct onder de hero. */
/* Teamblok: beeld links, tekst rechts, op het salievlak. Het beeld stond
   eerder als achtergrond over de volle breedte met een waas erover, waardoor
   het grotendeels wegviel; nu staat het in de kolom en blijft het volledig
   zichtbaar (geen crop, eigen verhouding). Bewust zonder dwaallichtjes en
   zonder reveal: dit blok staat direct onder de hero en hoeft niet nog eens
   te bewegen. */
.team-blok { padding-block: 6rem; background: var(--salie); color: var(--paper); }
.team-blok__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .team-blok__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.team-blok__media img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.team-blok__inhoud { max-width: 46rem; }
.team-blok__inhoud h2 { margin-top: 1.25rem; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; }
/* Op het salievlak haalt --salie-soft maar 1,87:1; de eyebrow en het cursieve
   woord krijgen daarom de lichte tinten. */
.team-blok__inhoud h2 em { color: var(--cream-txt); }
.team-blok__inhoud .eyebrow { color: var(--paper); }
.team-blok__inhoud .eyebrow::before,
.team-blok__inhoud .eyebrow::after { background: var(--cream-txt); }
.team-blok__inhoud .lead { margin-top: 1.5rem; color: var(--paper); }

/* Contactpagina: formulier 70 %, infoblok 30 %. */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 3fr; align-items: start; } }

/* ---------- Contactkaart in de zijkolom ---------- */
.contact-kaart {
  padding: 2rem; background: var(--wine); color: var(--bg); border: 0;
}
.contact-kaart__titel { margin-top: 0.6rem; font-size: 1.5rem; color: var(--paper); }
.contact-kaart__lijst { margin-top: 1.5rem; font-style: normal; display: grid; gap: 1rem; }
.contact-kaart__lijst p { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; }
/* Het icoon centreert op de eerste tekstregel: (regelhoogte - icoongrootte) / 2. */
.contact-kaart__lijst svg { color: var(--salie-soft); flex: none; margin-top: 0.25rem; }
/* .panel--dark a maakt van elke link een eigen rij met marge erboven. Dat is
   bedoeld voor losstaande links in een donker paneel; hier staat de link
   ín een regel naast een icoon en duwde die marge hem 12 px omlaag. */
.contact-kaart__lijst a { display: inline; margin-top: 0; gap: 0; }
.contact-kaart__lijst a { color: var(--bg); text-decoration: none; border-bottom: 1px solid rgba(251,248,240,0.3); }
.contact-kaart__lijst a:hover { border-bottom-color: var(--paper); }
.contact-kaart__lijst strong { color: var(--paper); font-weight: 500; }
.contact-kaart__acties { margin-top: 1.75rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
/* --brons haalt op --wine 7,1:1; --salie-soft bleef daar onder de 4,5 voor 12 px. */
.contact-kaart__acties .text-link { color: var(--brons); }
.contact-kaart__foot {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(251,248,240,0.18);
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--brons);
}
.contact-kaart__foot svg { flex: none; }

/* ---------- "In het kort"-band ---------- */
.kort-band { background: var(--bg-alt); padding-block: 4.5rem; }
.kort-band__intro { max-width: 54rem; margin-inline: auto; text-align: center; }
.kort-band__intro h2 { margin-top: 0.9rem; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
/* Het GEO-antwoord blijft één doorlopende alinea, groter gezet zodat het als
   samenvatting leest en niet als voetnoot. */
.kort-band__antwoord {
  margin-top: 1.5rem; font-family: var(--font-display); font-weight: 350;
  font-size: 1.2rem; line-height: 1.65; color: var(--ink-soft);
}
@media (min-width: 768px) { .kort-band__antwoord { font-size: 1.3rem; } }

/* ---------- Aanpak-strip: "Onze aanpak in het kort", compact onder de hero ---------- */
.aanpak-strip { background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); padding-block: 1.5rem; }
/* Gecentreerd: de strip draagt alleen de vier titels en staat los onder de hero. */
.aanpak-strip .container { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.aanpak-strip__label { margin: 0; white-space: nowrap; }
.aanpak-strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; }
.aanpak-strip__items li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); }
.aanpak-strip__items svg { color: var(--salie); flex: none; }
@media (max-width: 700px) { .aanpak-strip__items { display: grid; grid-template-columns: 1fr 1fr; } }

/* ---------- Faciliteiten: elk item over de volle breedte ----------
   Beeld en tekst naast elkaar, om en om gespiegeld, met bullets en
   capaciteiten. Gedeeld door de trouwfeest- en gelegenheidpagina's. */
.fac-rijen { display: grid; gap: 2.5rem; margin-top: 3rem; }
.fac-rij { display: grid; gap: 0; align-items: stretch; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) {
  .fac-rij { grid-template-columns: 1fr 1fr; }
  .fac-rij--spiegel .fac-rij__media { order: 2; }
}
.fac-rij__media { overflow: hidden; }
.fac-rij__media img {
  width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block;
  transition: transform 0.9s var(--ease);
}
@media (min-width: 900px) { .fac-rij__media img { min-height: 420px; } }
.fac-rij:hover .fac-rij__media img { transform: scale(1.04); }
.fac-rij__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .fac-rij__body { padding: 3rem; } }
.fac-rij__body h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.fac-rij__sfeer {
  margin-top: 0.7rem; font-family: var(--font-display); font-style: italic;
  font-size: 1.2rem; line-height: 1.4; color: var(--salie-ink);
}
.fac-rij__tekst { margin-top: 1rem; font-size: 0.98rem; line-height: 1.7; color: var(--ink-soft); }
.fac-rij__punten { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.fac-rij__punten li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink); }
.fac-rij__punten svg { color: var(--salie); flex: none; margin-top: 0.2rem; }
.fac-rij__caps {
  list-style: none; margin: 1.75rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1.75rem;
}
.fac-rij__caps li { display: flex; align-items: baseline; gap: 0.5rem; }
.fac-rij__caps strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--wine); }
.fac-rij__caps span { font-size: 0.78rem; line-height: 1.35; color: var(--ink-mute); max-width: 11rem; }
.fac-extra-titel { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* Faciliteitenkaarten in de "In het kort"-band: drie kolommen op desktop, twee
   op tablet, één op mobiel. Klein gehouden: beeld, naam, sfeerzin en hoogstens
   twee capaciteiten, zodat de acht ruimtes samen één overzicht vormen. */
.fac-kaarten { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .fac-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .fac-kaarten { grid-template-columns: repeat(3, 1fr); } }
.fac-kaart {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.fac-kaart__media { overflow: hidden; aspect-ratio: 3 / 2; }
.fac-kaart__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.fac-kaart:hover .fac-kaart__media img { transform: scale(1.04); }
.fac-kaart__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.fac-kaart__body h3 { font-size: 1.35rem; }
.fac-kaart__tekst { font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.fac-kaart__punten { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.fac-kaart__punten li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; line-height: 1.4; color: var(--ink); }
.fac-kaart__punten svg { color: var(--salie); flex: none; margin-top: 0.2rem; }
.fac-kaarten__cta { margin-top: 2.5rem; display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
/* Klikbare variant van de faciliteitenkaart, gebruikt op /de-locatie/. */
.fac-kaart--link { text-decoration: none; color: inherit; transition: border-color 0.4s, transform 0.4s; }
.fac-kaart--link:hover { border-color: var(--salie); transform: translateY(-3px); }
.fac-kaart__meer {
  margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--salie-ink);
}
.fac-kaart--link:hover .fac-kaart__meer { color: var(--wine); }

/* Seizoensmenu's op /traiteur/: vier kaarten met beeld, periode en status. */
.menu-kaarten { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .menu-kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .menu-kaarten { grid-template-columns: repeat(4, 1fr); } }
.menu-kaart {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.menu-kaart__media { aspect-ratio: 4 / 3; overflow: hidden; }
.menu-kaart__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.menu-kaart:hover .menu-kaart__media img { transform: scale(1.04); }
.menu-kaart__body { padding: 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.menu-kaart__periode {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-label); font-size: 0.7rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-mute);
}
.menu-kaart__periode svg { color: var(--salie); flex: none; }
.menu-kaart__body h3 { font-size: 1.3rem; }
.menu-kaart__tekst { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.menu-kaart__status {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-family: var(--font-label); font-size: 0.7rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--salie-ink);
}
.menu-kaarten__voet { margin-top: 2.5rem; display: grid; gap: 1rem; justify-items: start; }
.menu-kaarten__voet p { font-size: 0.9rem; color: var(--ink-mute); max-width: 46rem; }

/* Referentielogo's op het zakelijke gedeelte. Neutraal grijs zodat zeventien
   huisstijlen naast elkaar geen kermis worden; op hover komt de eigen kleur
   terug. */
.klanten__titel { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.klanten-logos {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; align-items: center;
}
@media (min-width: 600px) { .klanten-logos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .klanten-logos { grid-template-columns: repeat(6, 1fr); } }
.klanten-logos li { display: flex; align-items: center; justify-content: center; }
.klanten-logos img {
  max-width: 100%; max-height: 44px; width: auto; height: auto;
  filter: grayscale(1); opacity: 0.65; transition: filter 0.3s, opacity 0.3s;
}
.klanten-logos img:hover { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .klanten-logos img { transition: none; } }

/* 360-rondgang op /de-locatie/: één groot beeld dat naar de externe viewer
   linkt. Geen ingesloten iframe: dat zou scripts van my360.be op elke
   paginaweergave laden, ook bij bezoekers die de rondgang nooit openen. */
.rondgang {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  color: var(--paper); text-decoration: none; min-height: 22rem;
}
.rondgang img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; display: block; transition: transform 0.8s ease; }
.rondgang:hover img { transform: scale(1.03); }
.rondgang__waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,13,0.15) 0%, rgba(8,16,11,0.78) 100%); }
.rondgang__inhoud { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem; display: grid; gap: 0.5rem; justify-items: start; }
@media (min-width: 768px) { .rondgang__inhoud { padding: 3rem; } }
.rondgang__titel { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.2; }
.rondgang__knop {
  margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; padding: 0.7rem 1.4rem; border: 1px solid rgba(251,248,240,0.6);
}
.rondgang:hover .rondgang__knop { background: var(--paper); color: var(--wine); border-color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .rondgang img { transition: none; } }

/* ---------- Ruimtepagina's onder /de-locatie/ ---------- */
/* Beeld eerst: de hero toont de ruimte over de volle breedte met de naam erop,
   zodat je meteen voelt hoe ze aanvoelt. */
.ruimte-hero { position: relative; overflow: hidden; min-height: 62vh; display: flex; align-items: flex-end; color: var(--paper); }
.ruimte-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ruimte-hero__waas {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,20,13,0.62) 0%, rgba(10,20,13,0.28) 38%, rgba(6,12,8,0.82) 100%);
}
.ruimte-hero__inner { position: relative; z-index: 2; padding-block: 9rem 4rem; text-align: left; }
.ruimte-hero h1 { margin-top: 0.9rem; font-size: clamp(2.4rem, 6vw, 4rem); }
.ruimte-hero .lead { margin-top: 1rem; max-width: 44rem; margin-inline: 0; color: var(--cream-txt); }
.breadcrumb--licht { margin-bottom: 1.75rem; color: var(--cream-txt); }
.breadcrumb--licht a { color: var(--cream-txt); }
.breadcrumb--licht a:hover { color: var(--paper); }

.ruimte-intro { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .ruimte-intro { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.ruimte-intro .detail-intro { margin-top: 0; }
.ruimte-punten { margin: 0; }
@media (min-width: 560px) { .ruimte-punten { grid-template-columns: 1fr; } }

/* Aantal gasten per opstelling, onder de omschrijving. */
.gasten-lijst { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.gasten-lijst dl { margin-top: 1rem; display: grid; }
.gasten-lijst dl > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft);
}
.gasten-lijst dl > div:last-child { border-bottom: 0; }
.gasten-lijst dt { font-size: 0.95rem; color: var(--ink-soft); }
.gasten-lijst dd {
  margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1;
  color: var(--wine); white-space: nowrap;
}

/* Galerij: twee grote beelden, dan een raster met de rest. */
.ruimte-galerij__groot { display: grid; gap: 1rem; }
@media (min-width: 768px) { .ruimte-galerij__groot { grid-template-columns: repeat(2, 1fr); } }
.ruimte-galerij__raster { margin-top: 1rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .ruimte-galerij__raster { grid-template-columns: repeat(3, 1fr); } }
.ruimte-shot { margin: 0; overflow: hidden; border-radius: var(--radius); }
.ruimte-shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ruimte-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 2; transition: transform 0.7s ease; }
.ruimte-shot--groot img { aspect-ratio: 4 / 3; }
.ruimte-shot:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ruimte-shot img { transition: none; } }

.ruimte-onder { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 900px) { .ruimte-onder { grid-template-columns: 7fr 5fr; gap: 4rem; } }

/* Capaciteitentabel. Scrollt apart op smalle schermen, zodat de pagina zelf
   niet horizontaal meeschuift. */
.caps-tabel { margin-top: 3rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.caps-tabel table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.caps-tabel th, .caps-tabel td { padding: 0.9rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.caps-tabel thead th {
  font-family: var(--font-label); font-size: 0.72rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--ink-mute); background: var(--bg-alt);
}
.caps-tabel tbody th { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--wine); border-right: 1px solid var(--line); }
.caps-tabel td:last-child { font-family: var(--font-display); font-size: 1.15rem; color: var(--wine); white-space: nowrap; }
.caps-tabel tbody tr:last-child th, .caps-tabel tbody tr:last-child td { border-bottom: 0; }
.caps-tabel__note { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-mute); }

.fac-kaarten__note { font-size: 0.85rem; color: var(--ink-mute); }

/* ---------- Sfeerband: klikbare foto's + "Bekijk alle foto's" ---------- */
.sfeer-shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sfeer-band__all { margin-top: 1.5rem; text-align: center; }
.sfeer-band__all .text-link { font-size: 0.8rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
}
.lightbox::backdrop { background: rgba(16, 14, 11, 0.92); }
.lightbox figure { margin: 0; max-width: min(88vw, 1100px); text-align: center; }
.lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius); }
.lightbox figcaption { margin-top: 0.9rem; display: flex; gap: 1rem; justify-content: center; color: var(--cream-txt); font-size: 0.85rem; }
.lightbox__teller { font-family: var(--font-label); letter-spacing: var(--track-wide); }
.lightbox__sluit {
  position: fixed; top: 1.25rem; right: 1.5rem;
  font-size: 2rem; line-height: 1; color: var(--paper); background: none; border: 0; cursor: pointer;
}
.lightbox__pijl {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(251,248,240,0.4); background: rgba(16,14,11,0.4);
  color: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.lightbox__pijl:hover { background: rgba(16,14,11,0.75); border-color: var(--paper); }
@media (max-width: 640px) {
  .lightbox { flex-direction: column; }
  .lightbox__pijl { position: fixed; bottom: 1.25rem; }
  .lightbox__pijl--vorige { left: 1.5rem; }
  .lightbox__pijl--volgende { right: 1.5rem; }
}

/* ---------- Ceremonie: cinematisch droomblok (trouwfeest) ---------- */
.ceremonie-droom { position: relative; overflow: hidden; padding-block: 5.5rem; }
.ceremonie-droom .fireflies { position: absolute; inset: 0; pointer-events: none; }
.ceremonie-droom__head { position: relative; max-width: 52rem; margin-inline: auto; text-align: center; }
.ceremonie-droom__head h2 { margin-top: 1.5rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; }
.ceremonie-droom__head h2 em { color: var(--salie-soft); }
.ceremonie-droom__head .lead { margin-top: 1.5rem; color: var(--cream-txt); }
.ceremonie-droom .ceremonie-gallery { position: relative; }
.ceremonie-droom__foot { position: relative; max-width: 44rem; margin: 3rem auto 0; text-align: center; }
.ceremonie-droom__tekst { font-family: var(--font-display); font-weight: 350; font-size: 1.3rem; line-height: 1.6; color: var(--cream-txt); }
.ceremonie-droom__foot .flex-btns { justify-content: center; margin-top: 2rem; }
.ceremonie-shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* ---------- Eerstvolgend evenement op de homepage ---------- */
/* Staat volledig onder de hero: geen negatieve marge, dus geen overlap.
   Saliegroen in plaats van paper, zodat de kaart uitspringt tegen de ivoren
   achtergrond. Contrast op --salie: --paper haalt 4,63:1 (zie de notitie bij
   het B2B-blok), dus alle tekst hier staat op --paper. */
.volgend-event-sectie { padding-block: 4rem 0; }
.volgend-event {
  display: grid; align-items: stretch;
  background: var(--salie); border: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(43, 37, 33, 0.5);
  text-decoration: none; color: var(--paper);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
@media (min-width: 768px) { .volgend-event { grid-template-columns: 5fr 7fr; } }
.volgend-event:hover { transform: translateY(-3px); box-shadow: 0 26px 56px -24px rgba(43, 37, 33, 0.5); }
.volgend-event__media { overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .volgend-event__media { aspect-ratio: auto; } }
.volgend-event__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; }
.volgend-event:hover .volgend-event__media img { transform: scale(1.04); }
.volgend-event__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; }
@media (min-width: 768px) { .volgend-event__body { padding: 3rem; } }
.volgend-event .eyebrow { color: var(--paper); opacity: 0.85; }
.volgend-event__titel {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.15; color: var(--paper);
}
.volgend-event__meta {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.78rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--paper); opacity: 0.9;
}
.volgend-event__teaser { font-size: 0.98rem; line-height: 1.65; color: var(--paper); }
.volgend-event__cta {
  margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-label); font-size: 0.75rem; letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--paper);
  padding-bottom: 0.35rem; border-bottom: 1px solid rgba(251, 248, 240, 0.45); align-self: flex-start;
}
.volgend-event:hover .volgend-event__cta { border-bottom-color: var(--paper); }

/* ---------- Evenement-detailpagina ----------
   De hero gebruikt hetzelfde donkere sjabloon als de feestpagina's, maar met
   een stilstaand beeld in plaats van de achtergrondvideo. */
.hero-event__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; transform: scale(1.06);
}
/* Eigen verloop, want de eventbeelden lopen van donker (Chef's Table) tot zeer
   licht (de besneeuwde tuin van de truffelavond, gemiddeld rgb 234,238,247).
   Met het standaardverloop van hero-dark--detail haalde het logo daar 2,72:1 en
   de titel 3,17:1. Gemeten tegen dat lichtste beeld geeft dit verloop:
     0 %  (logo en navigatie)  0,82 → 5,4:1  drempel 4,5
     45 % (titel en teaser)    0,57 → 4,8:1  drempel 4,5
   Op smalle schermen staat de tekst hoger; daar vervalt de teaser (zie onder). */
.hero-event .hero-dark__shade {
  background: linear-gradient(180deg,
    rgba(10,20,13,0.82) 0%,
    rgba(10,20,13,0.48) 14%,
    rgba(10,20,13,0.44) 34%,
    rgba(8,16,11,0.78) 62%,
    rgba(4,9,6,0.95) 100%);
}
/* Onder 768 px is het tekstblok zo hoog dat het in het lichte deel van het
   verloop terechtkomt. De teaser vervalt daar: hij staat even verderop
   opnieuw, als intro bij het inschrijfblok. */
@media (max-width: 767px) {
  .hero-event .lead { display: none; }
  .hero-event__facts { gap: 1.25rem 2rem; margin-top: 1.75rem; }
  .hero-event__facts strong { font-size: 1.15rem; }
}
.hero-event .fireflies { z-index: 2; }
/* Kerngegevens onder de intro: waar, prijs, plaatsen */
.hero-event__facts {
  margin-top: 2.25rem; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 2.5rem;
}
.hero-event__facts li { display: grid; gap: 0.3rem; }
/* --salie-soft haalde op het lichtste eventbeeld maar 3,02:1, te weinig voor
   tekst van 10 px; --cream-txt haalt daar 6,0:1. */
.hero-event__facts span {
  font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-widest);
  text-transform: uppercase; color: var(--cream-txt);
}
.hero-event__facts strong {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--paper);
}

/* Het programma als tijdlijn: een verticale lijn met genummerde momenten,
   in dezelfde opbouw als de werkwijze-tijdlijn op /feesten/. */
.event-timeline { list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.event-timeline::before {
  content: ''; position: absolute; left: 1.4rem; top: 0.9rem; bottom: 0.9rem;
  width: 1px; background: linear-gradient(180deg, var(--salie) 0%, var(--line) 100%);
}
.event-timeline__step {
  position: relative; display: flex; align-items: flex-start; gap: 1.5rem;
  padding: 1.1rem 0;
}
.event-timeline__no {
  flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt); border: 1px solid var(--salie);
  font-family: var(--font-display); font-size: 0.95rem; color: var(--salie-ink);
  position: relative; z-index: 1;
}
.event-timeline__tekst {
  padding-top: 0.55rem; font-size: 1.125rem; line-height: 1.55;
  color: var(--ink-soft); font-weight: 300;
}

/* Praktische gegevens naast het inschrijfpaneel */
/* Verloop en inschrijving naast elkaar: het formulier blijft in beeld terwijl
   je het programma leest. Op mobiel stapelt het, formulier onderaan. */
.detail-grid--event { align-items: start; }
@media (min-width: 1024px) {
  .detail-grid--event { grid-template-columns: 7fr 5fr; gap: 4rem; }
  /* Alleen naast de tekst blijft het formulier meelopen; gestapeld staat het
     toch als laatste blok. */
  .detail-grid--event .sidebar { position: sticky; top: 8rem; }
}

/* Praktische gegevens in de vakjes van .feit-items, zoals de kernfeiten op de
   feestpagina's. */
.event-praktisch { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.event-praktisch .feit-items { margin-bottom: 0; }
@media (max-width: 560px) { .event-praktisch { grid-template-columns: 1fr; } }
.event-prog--detail .n { color: var(--salie); }
/* Offertewizard: ruimer verticaal ritme tussen de velden */
.offerte-wizard .form-grid-2 { row-gap: 1.75rem; column-gap: 1.25rem; }
.offerte-wizard .wizard-step > .form-grid-2,
.offerte-wizard .wizard-step > .form-field { margin-top: 1.75rem; }
.offerte-wizard .form-field input, .offerte-wizard .form-field textarea, .offerte-wizard .form-field select,
.event-wizard .form-field input, .event-wizard .form-field textarea, .event-wizard .form-field select { background: var(--bg); }
.event-wizard .form-field { margin-bottom: 0.9rem; }
.event-wizard .form-field label { display: block; font-family: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: var(--track-wide); margin-bottom: 0.4rem; color: var(--ink-mute); }
.event-wizard .form-field input, .event-wizard .form-field select, .event-wizard .form-field textarea { width: 100%; padding: 0.7rem 0.9rem; font-size: 0.9rem; border: 1px solid var(--line); color: var(--ink); }

/* ---------- Account ---------- */
.account-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .account-grid { grid-template-columns: 3fr 9fr; } }
.account-user { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.account-user__avatar { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--wine); color: var(--bg); font-family: var(--font-display); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.account-user__name { font-family: var(--font-display); font-size: 1.2rem; }
.account-user__sub { font-family: var(--font-label); font-size: 0.7rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); margin-top: 0.15rem; }
.account-tabs { display: grid; gap: 2px; margin-bottom: 1.5rem; }
.account-tabs button {
  text-align: left; padding: 0.8rem 1rem; font-family: var(--font-label); font-size: 0.85rem;
  color: var(--ink-soft); transition: 0.2s; border: 1px solid transparent;
}
.account-tabs button:hover { background: var(--bg-alt); }
.account-tabs button.is-active { background: var(--wine); color: var(--bg); }
.account-list { display: grid; gap: 0.9rem; }
.account-order { display: grid; gap: 0.75rem; padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); }
@media (min-width: 768px) { .account-order { grid-template-columns: 2fr 1.5fr 4fr 1fr 1.5fr; align-items: center; } }
.account-order .ref { font-family: var(--font-display); color: var(--wine); }
.account-order .typ { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--salie-ink); display: block; }
.account-order .prijs { font-family: var(--font-display); font-size: 1.15rem; color: var(--wine); }
.account-order .status { justify-self: start; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; padding: 0.3rem 0.6rem; background: rgba(111,115,89,0.15); color: var(--salie-ink); }
@media (min-width: 768px) { .account-order .status { justify-self: end; } }
.acc-key { display: inline-block; min-width: 5rem; font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); margin-right: 0.5rem; }
.account-empty { padding: 2.5rem; text-align: center; background: var(--paper); border: 1px dashed var(--line); color: var(--ink-mute); font-size: 0.95rem; }

/* ---------- Admin (demo) ---------- */
.admin-mode .site-header, .admin-mode .site-footer, .admin-mode .skip-link { display: none; }
.admin-mode main { padding: 0; }
.admin { min-height: 100vh; background: var(--bg-alt); }
.admin__topbar { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.5rem; background: var(--wine-deep); color: var(--cream-txt); }
.admin__hint { font-size: 0.8rem; opacity: 0.6; }
.admin__close { margin-left: auto; font-family: var(--font-label); font-size: 11px; letter-spacing: var(--track-wide); text-transform: uppercase; opacity: 0.7; }
.admin__close:hover { opacity: 1; }
.admin__layout { display: grid; min-height: calc(100vh - 3.4rem); }
@media (min-width: 1024px) { .admin__layout { grid-template-columns: 15rem 1fr; } }
.admin__side { padding: 1.5rem; background: var(--bg); border-right: 1px solid var(--line); }
.admin__main { padding: 1.5rem; }
@media (min-width: 1024px) { .admin__main { padding: 2.5rem; } }
.admin-stats { display: grid; gap: 1rem; }
@media (min-width: 900px) { .admin-stats { grid-template-columns: repeat(4, 1fr); } }
.admin-stat__num { font-family: var(--font-display); font-size: 2.6rem; color: var(--wine); margin-top: 0.5rem; line-height: 1; }
.admin-cols { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .admin-cols { grid-template-columns: 2fr 1fr; } .admin-cols .panel[style] { grid-column: auto !important; } .admin-cols > .panel:first-child { grid-column: 1; } }
.admin-week { display: flex; gap: 0.75rem; align-items: flex-end; height: 11rem; padding-top: 1rem; }
.admin-week__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; height: 100%; }
.admin-week__bar { width: 100%; background: var(--wine); min-height: 4px; }
.admin-week__bar.is-today { background: var(--salie); }
.admin-week__num { font-size: 0.75rem; color: var(--ink-soft); }
.admin-week__day { font-family: var(--font-label); font-size: 0.65rem; text-transform: uppercase; color: var(--ink-mute); }
.admin-todos { display: grid; gap: 0.6rem; }
.admin-todos label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.admin-lead { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.admin-tag { display: inline-block; font-family: var(--font-label); font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; padding: 0.2rem 0.5rem; background: var(--bg-alt); color: var(--wine); }
.admin-tag--warn { background: rgba(199,181,155,0.3); color: #8a6d3b; }
.admin-badge { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; padding: 0.3rem 0.6rem; background: rgba(111,115,89,0.15); color: var(--salie-ink); }
.admin-tagfilter { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.admin-tagfilter button { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; padding: 0.45rem 0.8rem; background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); transition: 0.2s; }
.admin-tagfilter button:hover { border-color: var(--salie); }
.admin-tagfilter button.is-active { background: var(--wine); color: var(--bg); border-color: var(--wine); }
.admin-table { background: var(--paper); border: 1px solid var(--line); }
.admin-table__head { font-family: var(--font-label); font-size: 9px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-mute); background: var(--bg-alt); }
.admin-crm { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1100px) { .admin-crm { grid-template-columns: 3fr 2fr; } }
.admin-crm__detail[hidden] { display: none; }
.admin-crm__row { display: grid; grid-template-columns: 2fr 2fr 1.5fr 1fr; gap: 0.75rem; width: 100%; text-align: left; padding: 0.9rem 1.1rem; font-size: 0.85rem; border-bottom: 1px solid var(--line-soft); align-items: center; }
button.admin-crm__row:hover { background: var(--bg); }
button.admin-crm__row.is-active { background: var(--bg); }
.admin-crm__row small { color: var(--ink-mute); }
.admin-prod__row { display: grid; grid-template-columns: 4rem 4fr 1.5fr 1.5fr 1.5fr; gap: 0.75rem; padding: 0.9rem 1.1rem; font-size: 0.85rem; border-bottom: 1px solid var(--line-soft); align-items: center; }
.admin-prod__row small { color: var(--ink-mute); }
.admin-events { display: grid; gap: 1rem; }
@media (min-width: 900px) { .admin-events { grid-template-columns: 1fr 1fr; } }
.admin-event { display: flex; gap: 1.25rem; align-items: center; }
.admin-order__row { display: grid; grid-template-columns: 3rem 1fr 2fr 3fr 2fr 1fr; gap: 0.75rem; padding: 0.9rem 1.1rem; font-size: 0.85rem; border-bottom: 1px solid var(--line-soft); align-items: center; }
.admin-order__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--salie); }
[data-tab-panel][hidden] { display: none; }

/* ---------- Fade-up bij paginalading (hero) ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.fade-up--d1 { animation-delay: 0.1s; }
.fade-up--d2 { animation-delay: 0.25s; }
.fade-up--d3 { animation-delay: 0.4s; }
.fade-up--d4 { animation-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none; }
}

/* ---------- Reveal-animaties ---------- */
/* Alleen verbergen wanneer JS actief is: zonder JS blijft alle content zichtbaar */
html.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
html.js .reveal.in-view { opacity: 1; transform: none; }
/* De kaarten dragen zowel .photo-card als .reveal. De regel hierboven wint qua
   specificiteit en zou de box-shadow van de hovergloed laten inspringen; daarom
   hier dezelfde lijst, aangevuld met box-shadow. */
html.js .photo-card.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), box-shadow 0.6s var(--ease); }
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .photo-card__img, .img-wrap img { transition: none; }
}

/* ---------- Diverse ---------- */
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-8 { margin-top: 4rem; }
.split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 5fr 7fr; } }
.two-thirds { max-width: 40rem; }
.flex-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 2rem; margin-bottom: 3rem; }
.text-center { text-align: center; }