/* ═══════════════════════════════════════════════════════════════════════
   Wijnen Vroman — interactieve wijnlijst
   ═══════════════════════════════════════════════════════════════════════ */

/* De huisletters staan in /lettertypes.css — zie gereedschap/haal-lettertypes.mjs */

:root{
  --wijn:#6B1220;          --wijn-diep:#4A0B15;      --wijn-licht:#8E2233;
  --goud:#B08D57;          --goud-licht:#D8BC8A;
  --room:#FAF5EA;          --room-diep:#F2EAD8;      --papier:#FFFDF8;
  --inkt:#26211C;          --inkt-zacht:#6E6357;     --lijn:#E2D7C1;
  --schaduw:0 1px 2px rgba(74,11,21,.05), 0 8px 24px -12px rgba(74,11,21,.18);
  --schaduw-op:0 2px 6px rgba(74,11,21,.08), 0 22px 48px -20px rgba(74,11,21,.32);
  --display:'Cinzel', Georgia, 'Times New Roman', serif;
  --tekst:'Cormorant', Georgia, 'Times New Roman', serif;
  --ui:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --breed:1180px;
  --balk-h:66px;
  --rond:3px;
  --soepel:.32s cubic-bezier(.22,.61,.36,1);
}

:root{ --voet:#4A0B15; --voet-inkt:#EFE1CA; --voet-titel:#FBF3E4; }

/* De site is er één van crème en bordeaux en staat altijd in dat licht.
   color-scheme houdt de browser ervan af om op een donker besturingssysteem
   zelf velden, keuzelijsten en schuifbalken te verduisteren. */
:root{ color-scheme:light; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--balk-h) + 12px); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--room); color:var(--inkt);
  font-family:var(--tekst); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* Cormorant zet standaard mediëvalcijfers; prijzen en jaartallen lezen beter met gewone. */
  font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1;
}
img{ max-width:100%; display:block; }
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

.overslaan{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--wijn); color:#fff;
  padding:12px 20px; font-family:var(--ui); font-size:14px;
}
.overslaan:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--goud); outline-offset:3px; border-radius:2px; }

/* ─────────────────────────────── typografie ───────────────────────────── */
.afdeling{ max-width:var(--breed); margin:0 auto; padding:0 24px; text-align:center; }
.afdeling__kop{
  font-family:var(--ui); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--goud); margin:0 0 14px;
}
.afdeling__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(28px,4.4vw,44px);
  letter-spacing:.06em; margin:0 0 18px; color:var(--inkt);
}
.afdeling__lead{
  max-width:58ch; margin:0 auto; color:var(--inkt-zacht); font-size:19px;
}

/* ══════════════════════════════════ HERO ══════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:96px 24px 120px;
  overflow:hidden; isolation:isolate;
}
.hero__beeld{
  position:absolute; inset:0; background-size:cover; background-position:center 38%;
  z-index:-2; animation:beeldIn 1.4s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes beeldIn{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:none; } }
/* Warme, donkere sluier over de omslagfoto. Zwaar genoeg om het logo en de
   tekst leesbaar te houden op élke foto, ook een lichte zomerfoto. */
.hero__sluier{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(115% 85% at 50% 40%, rgba(74,11,21,.34) 0%, rgba(48,10,17,.66) 52%, rgba(22,6,10,.9) 100%),
    linear-gradient(180deg, rgba(22,6,10,.6), rgba(22,6,10,.44) 38%, rgba(22,6,10,.92));
}
/* Het officiële logo wordt als masker geladen, zodat het elke kleur kan aannemen. */
.logomerk{
  display:block; background-color:currentColor;
  -webkit-mask:var(--logo) no-repeat center / contain;
          mask:var(--logo) no-repeat center / contain;
}
.merk{ margin:0; }
.merk__logo{
  --logo:url('/assets/lockup.svg');
  display:block; background-color:#F4EAD6;
  -webkit-mask:var(--logo) no-repeat center / contain;
          mask:var(--logo) no-repeat center / contain;
  width:min(370px, 76vw); aspect-ratio:122.35 / 78.85; margin:0 auto;
  opacity:0; animation:opkomst 1s .15s forwards;
}
@keyframes opkomst{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.hero__intro{
  max-width:52ch; margin:34px auto 0; color:#EADFCB; font-size:clamp(17px,2vw,21px);
  opacity:0; animation:opkomst .9s .55s forwards;
}
.hero__acties{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;
  opacity:0; animation:opkomst .9s .7s forwards;
}
.hero__cijfers{
  display:flex; gap:clamp(24px,6vw,64px); justify-content:center; flex-wrap:wrap;
  margin:56px 0 0; padding:0; opacity:0; animation:opkomst .9s .85s forwards;
}
.hero__cijfers div{ text-align:center; }
.hero__cijfers dt{
  font-family:var(--display); font-size:clamp(24px,3.4vw,34px); color:#F6EEDD; letter-spacing:.04em;
}
.hero__cijfers dd{
  margin:6px 0 0; font-family:var(--ui); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--goud-licht);
}
.hero__pijl{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(var(--goud-licht), transparent);
  opacity:.7;
}
.hero__pijl span{
  position:absolute; top:0; left:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--goud-licht); animation:zak 2.4s ease-in-out infinite;
}
@keyframes zak{ 0%,100%{ transform:translateY(0); opacity:1; } 60%{ transform:translateY(46px); opacity:0; } }

/* ─────────────────────────────── knoppen ──────────────────────────────── */
.knop{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 30px; border-radius:var(--rond); border:1px solid transparent;
  text-decoration:none; transition:all var(--soepel); background:none;
}
.knop--gevuld{ background:var(--wijn); color:#FDF9F0; border-color:var(--wijn); }
.knop--gevuld:hover{ background:var(--wijn-diep); border-color:var(--wijn-diep); transform:translateY(-1px); }
.knop--rand{ border-color:rgba(216,188,138,.55); color:#F1E6D2; }
.knop--rand:hover{ background:rgba(246,238,221,.1); border-color:var(--goud-licht); }
.knop--tekst{
  padding:10px 4px; border-bottom:1px solid var(--lijn); color:var(--inkt-zacht); border-radius:0;
}
.knop--tekst:hover{ color:var(--wijn); border-color:var(--wijn); }
main .knop--rand, .paneel .knop--rand{ border-color:var(--lijn); color:var(--inkt); }
main .knop--rand:hover, .paneel .knop--rand:hover{ border-color:var(--wijn); color:var(--wijn); }

/* ════════════════════════════════ BALK ════════════════════════════════ */
.balk{
  position:sticky; top:0; z-index:60; background:var(--papier);
  border-bottom:1px solid var(--lijn); box-shadow:0 1px 0 rgba(74,11,21,.03);
}
.balk__binnen{
  max-width:var(--breed); margin:0 auto; padding:0 24px; height:var(--balk-h);
  display:flex; align-items:center; gap:14px;
}
.balk__merk{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--wijn); flex:none;
}
.balk__teken{
  display:block; width:24px; aspect-ratio:35.96 / 46; flex:none; background-color:currentColor;
  -webkit-mask:url('/assets/merk.svg') no-repeat center / contain;
          mask:url('/assets/merk.svg') no-repeat center / contain;
}
.balk__merk span{
  font-family:var(--display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
/* Het woordmerk in de balk vervalt op elke breedte — zie onderaan dit blad. */

.zoek{ position:relative; flex:1 1 210px; min-width:0; max-width:380px; }
.zoek__icoon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  color:var(--inkt-zacht); pointer-events:none;
}
.zoek input{
  width:100%; padding:10px 40px 10px 38px; border:1px solid var(--lijn); border-radius:var(--rond);
  background:var(--room); font-family:var(--ui); font-size:13.5px; transition:border-color var(--soepel);
}
.zoek input::placeholder{ color:var(--inkt-zacht); }
.zoek input:focus{ border-color:var(--goud); outline:none; }
.zoek__kbd{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-family:var(--ui); font-size:11px; color:var(--inkt-zacht);
  border:1px solid var(--lijn); border-radius:3px; padding:1px 6px; pointer-events:none;
}
.zoek input:focus ~ .zoek__kbd{ opacity:0; }

.soorten{ display:flex; gap:2px; flex:none; }
.soorten button{
  border:none; background:none; cursor:pointer; padding:9px 13px; border-radius:var(--rond);
  font-family:var(--ui); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-zacht); transition:all var(--soepel); white-space:nowrap;
}
.soorten button:hover{ color:var(--wijn); background:var(--room-diep); }
.soorten button.is-actief{ color:var(--wijn); background:var(--room-diep); font-weight:600; }
@media (max-width:900px){ .soorten{ display:none; } }

.balk__knop{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; flex:none;
  border:1px solid var(--lijn); background:none; border-radius:var(--rond); padding:9px 14px;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  transition:all var(--soepel);
}
.balk__knop svg{ width:16px; height:16px; }
.balk__knop:hover{ border-color:var(--goud); color:var(--wijn); }
.balk__knop em{
  font-style:normal; background:var(--wijn); color:#fff; border-radius:20px;
  min-width:19px; height:19px; display:grid; place-items:center; font-size:10.5px; padding:0 5px;
}
.balk__knop--offerte em{ background:var(--goud); }
.balk__knop--offerte em:not([hidden]){ background:var(--wijn); }
.balk__knop--icoon{ padding:9px 10px; }
@media (max-width:760px){ .balk__knop span{ display:none; } }

.filters{ border-top:1px solid var(--lijn); background:var(--room-diep); }
.filters__binnen{
  max-width:var(--breed); margin:0 auto; padding:22px 24px 24px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:18px 22px; align-items:end;
}
.veld{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.veld__label{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--inkt-zacht);
}
.veld__label em{ font-style:normal; color:var(--wijn); letter-spacing:.04em; }
.veld select, .veld input[type=text]{
  padding:9px 11px; border:1px solid var(--lijn); border-radius:var(--rond);
  background:var(--papier); font-family:var(--ui); font-size:13.5px;
}
.schuif{ position:relative; height:26px; }
.schuif input{
  position:absolute; inset:0; width:100%; margin:0; background:none; pointer-events:none;
  -webkit-appearance:none; appearance:none; height:26px;
}
.schuif input::-webkit-slider-runnable-track{ height:2px; background:var(--lijn); }
.schuif input::-moz-range-track{ height:2px; background:var(--lijn); }
.schuif input::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:15px; height:15px; border-radius:50%;
  background:var(--wijn); border:2px solid var(--papier); margin-top:-6.5px; cursor:pointer;
}
.schuif input::-moz-range-thumb{
  pointer-events:auto; width:15px; height:15px; border-radius:50%;
  background:var(--wijn); border:2px solid var(--papier); cursor:pointer;
}
.filters__schakel{
  grid-column:1/-1; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding-top:6px; border-top:1px solid var(--lijn);
}
.vink{ display:inline-flex; align-items:center; gap:9px; font-family:var(--ui); font-size:13px; cursor:pointer; }
.vink input{ accent-color:var(--wijn); width:15px; height:15px; }
.weergave{ display:flex; gap:2px; margin-left:auto; }
.weergave button{
  width:34px; height:32px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--lijn); background:var(--papier); color:var(--inkt-zacht);
  border-radius:var(--rond); transition:all var(--soepel);
}
.weergave button svg{ width:16px; height:16px; }
.weergave button.is-actief{ color:var(--wijn); border-color:var(--goud); background:var(--room); }

/* ═══════════════════════════════ WIJNLIJST ════════════════════════════ */
main{ max-width:var(--breed); margin:0 auto; padding:44px 24px 90px; }
.resultaat{
  font-family:var(--ui); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--inkt-zacht); margin-bottom:30px; text-align:center;
}
/* De btw-vermelding moet opvallen zonder de lijst te overstemmen. */
.resultaat b{
  font-weight:600; color:var(--wijn); margin-left:14px; padding-left:14px;
  border-left:1px solid var(--lijn);
}
.sectie__aantal b{ font-weight:600; color:var(--wijn); }
@media (max-width:520px){
  .resultaat b{ display:block; margin:8px 0 0; padding:0; border:none; }
}
.leeg{ text-align:center; color:var(--inkt-zacht); padding:70px 0; }
.leeg strong{ display:block; font-family:var(--display); font-size:22px; color:var(--inkt); margin-bottom:8px; }

.sectie{ margin-bottom:78px; scroll-margin-top:calc(var(--balk-h) + 20px); }
.sectie__kop{
  display:flex; align-items:baseline; gap:18px; margin-bottom:8px;
  padding-bottom:12px; border-bottom:1px solid var(--wijn);
}
.sectie__titel{
  font-family:var(--display); font-weight:600; font-size:clamp(20px,2.8vw,28px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--wijn); margin:0;
}
.sectie__aantal{
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-zacht); margin-left:auto; white-space:nowrap;
}
.sectie__lead{ font-style:italic; color:var(--inkt-zacht); margin:14px 0 34px; font-size:18px; }

/* snelkoppelingen naar de streken binnen een afdeling */
.inhoud{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 0 38px;
  padding:16px 18px; background:var(--room-diep); border-radius:var(--rond);
}
.inhoud a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:var(--ui); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inkt-zacht); padding:6px 12px; border-radius:20px;
  border:1px solid transparent; transition:all var(--soepel); background:var(--papier);
}
.inhoud a:hover{ color:var(--wijn); border-color:var(--goud); }
.inhoud em{ font-style:normal; color:var(--goud); font-size:10.5px; }

.groep{ margin-bottom:44px; scroll-margin-top:calc(var(--balk-h) + 20px); }
.groep__kop{
  display:flex; align-items:center; gap:14px; margin:0 0 4px; cursor:pointer;
  background:none; border:none; padding:0; width:100%; text-align:left;
}
.groep__naam{
  font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--wijn); margin:0;
}
.groep__streep{ flex:1; height:1px; background:var(--goud); opacity:.5; }
.groep__meer{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--goud); white-space:nowrap; opacity:0; transition:opacity var(--soepel);
}
.groep__kop:hover .groep__meer{ opacity:1; }
.groep__land{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-zacht);
}

/* ── kaartweergave ── */
.raster{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:16px; margin-top:20px;
}
.kaartje{
  position:relative; display:flex; flex-direction:column; gap:9px; padding:20px 20px 18px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  cursor:pointer; text-align:left; transition:transform var(--soepel), box-shadow var(--soepel), border-color var(--soepel);
  box-shadow:var(--schaduw);
}
.kaartje:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-op); border-color:var(--goud); }
.kaartje::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--wijn);
  opacity:0; transition:opacity var(--soepel); border-radius:var(--rond) 0 0 var(--rond);
}
.kaartje:hover::before{ opacity:1; }
.kaartje__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.kaartje__naam{
  font-family:var(--tekst); font-weight:500; font-size:19px; line-height:1.3; margin:0; color:var(--inkt);
}
.kaartje__jaar{ color:var(--inkt-zacht); font-weight:400; }
.kaartje__prijs{
  font-family:var(--tekst); font-weight:700; font-size:19px; color:var(--wijn); white-space:nowrap;
}
.kaartje__prijs small{ font-size:13px; font-weight:400; color:var(--inkt-zacht); display:block; text-align:right; }
.kaartje__meta{
  font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-zacht); margin:0;
}
.kaartje__druiven{ display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:4px; }
.chip{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.06em; padding:3px 9px;
  border:1px solid var(--lijn); border-radius:20px; color:var(--inkt-zacht); white-space:nowrap;
}
.kaartje__ster{
  position:absolute; top:14px; right:14px; width:16px; height:16px; color:var(--goud);
  fill:var(--goud); stroke:none;
}
.kaartje.is-top .kaartje__top{ padding-right:22px; }
.kaartje__toevoegen{
  position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--lijn); background:var(--room); color:var(--inkt-zacht);
  display:grid; place-items:center; cursor:pointer; opacity:0; transition:all var(--soepel);
}
.kaartje:hover .kaartje__toevoegen, .kaartje__toevoegen:focus-visible{ opacity:1; }
.kaartje__toevoegen:hover{ border-color:var(--wijn); color:var(--wijn); background:var(--papier); }
.kaartje__toevoegen svg{ width:15px; height:15px; }
.kaartje__toevoegen.is-gekozen{ opacity:1; background:var(--wijn); color:#fff; border-color:var(--wijn); }

/* ── prijslijstweergave (zoals de gedrukte lijst) ── */
.prijslijst{ margin-top:14px; }
.regel{
  display:flex; align-items:baseline; gap:6px; width:100%; padding:9px 0; cursor:pointer;
  background:none; border:none; border-bottom:1px dotted var(--lijn); text-align:left;
  transition:background var(--soepel);
}
.regel:hover{ background:color-mix(in srgb, var(--goud) 8%, transparent); }
.regel__naam{ font-size:19px; color:var(--inkt); }
.regel__naam em{ font-style:normal; color:var(--inkt-zacht); }
.regel__stip{
  flex:1; min-width:24px; align-self:flex-end; margin-bottom:5px;
  border-bottom:1px dotted var(--lijn);
}
.regel__prijs{ font-weight:700; color:var(--wijn); white-space:nowrap; font-size:18px; }
.regel__ster{ width:12px; height:12px; color:var(--goud); fill:var(--goud); stroke:none; flex:none; }

.voetnoot{
  max-width:60ch; margin:28px auto 0; text-align:center; font-style:italic;
  color:var(--inkt-zacht); font-size:17px; padding-top:20px;
  border-top:1px solid var(--lijn);
}

/* ══════════════════════════════ STREKEN ═══════════════════════════════ */
.streken{ background:var(--room-diep); border-top:1px solid var(--lijn); padding:84px 0 90px; }
.kaartblok{ max-width:var(--breed); margin:44px auto 0; padding:0 24px; }
.kaart{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:14px; box-shadow:var(--schaduw); overflow:hidden;
}
.kaart > svg{ width:100%; height:auto; display:block; }
.kaart .land{
  fill:var(--room-diep); stroke:var(--lijn); stroke-width:.4; vector-effect:non-scaling-stroke;
  transition:fill var(--soepel);
}
.kaart .land.is-wijnland{
  fill:color-mix(in srgb, var(--wijn) 30%, var(--room-diep));
  stroke:color-mix(in srgb, var(--wijn) 45%, transparent);
}
.kaart .speld{ cursor:pointer; }
.kaart .speld circle{
  fill:var(--wijn); stroke:var(--papier); stroke-width:1.2; vector-effect:non-scaling-stroke;
  transition:fill var(--soepel);
}
.kaart .speld:hover circle, .kaart .speld:focus-visible circle{ fill:var(--goud); }
.kaart .leider{ stroke:var(--goud); stroke-width:.8; vector-effect:non-scaling-stroke; opacity:.6; fill:none; }
.kaart .speld text{
  font-family:var(--ui); fill:var(--inkt-zacht); stroke:none;
  letter-spacing:.05em; text-transform:uppercase; pointer-events:none;
}
.kaart .speld:hover text{ fill:var(--wijn); }
.kaart__fout{ text-align:center; color:var(--inkt-zacht); padding:60px 0; font-style:italic; }

.kaart__knoppen{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:16px;
}
.kaart__knoppen button{
  border:1px solid var(--lijn); background:var(--papier); cursor:pointer; border-radius:20px;
  padding:7px 15px; font-family:var(--ui); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--inkt-zacht); transition:all var(--soepel);
}
.kaart__knoppen button:hover{ color:var(--wijn); border-color:var(--goud); }
.kaart__knoppen button.is-actief{
  color:var(--papier); background:var(--wijn); border-color:var(--wijn); font-weight:600;
}
.kaart__legende{
  font-family:var(--ui); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--inkt-zacht); text-align:center; margin-top:14px;
}

.streekraster{
  max-width:var(--breed); margin:44px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(272px,1fr)); gap:16px;
}
.streekkaart{
  position:relative; overflow:hidden; border-radius:var(--rond); border:1px solid var(--lijn);
  background:var(--papier); cursor:pointer; text-align:left; padding:0;
  transition:transform var(--soepel), box-shadow var(--soepel); box-shadow:var(--schaduw);
}
.streekkaart:hover{ transform:translateY(-3px); box-shadow:var(--schaduw-op); }
.streekkaart__beeld{
  height:132px; position:relative; overflow:hidden; background:var(--room-diep);
}
/* De foto wordt pas opgehaald wanneer de kaart in beeld komt. */
.streekkaart__beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
.streekkaart__beeld--leeg{
  background:linear-gradient(150deg, color-mix(in srgb, var(--wijn) 60%, var(--room-diep)), var(--wijn-diep));
}
.streekkaart__beeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,11,21,.05), rgba(74,11,21,.55));
}
.streekkaart__land{
  position:absolute; left:14px; bottom:11px; z-index:1; color:#F3E8D4;
  font-family:var(--ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.streekkaart__lijf{ padding:16px 18px 18px; }
.streekkaart__naam{
  font-family:var(--display); font-size:19px; letter-spacing:.06em; color:var(--wijn); margin:0 0 6px;
}
.streekkaart__onder{ font-style:italic; color:var(--inkt-zacht); font-size:16.5px; margin:0 0 12px; line-height:1.45; }
.streekkaart__telt{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--goud);
}

/* ═══════════════════════════════ PANEEL ═══════════════════════════════ */
.paneel{ position:fixed; inset:0; z-index:120; }
.paneel__achter{
  position:absolute; inset:0; background:rgba(30,8,12,.55); backdrop-filter:blur(3px);
  animation:vervaag .28s ease;
}
@keyframes vervaag{ from{ opacity:0; } }
.paneel__blad{
  position:absolute; right:0; top:0; bottom:0; width:min(620px, 100%);
  background:var(--papier); overflow-y:auto; overscroll-behavior:contain;
  box-shadow:-24px 0 64px -32px rgba(30,8,12,.7); animation:schuifin .34s cubic-bezier(.22,.61,.36,1);
}
.paneel--breed .paneel__blad{ width:min(800px, 100%); }
@keyframes schuifin{ from{ transform:translateX(28px); opacity:0; } }
.paneel__sluit{
  position:sticky; top:16px; float:right; margin:16px 16px 0 0; z-index:2;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--lijn);
  background:var(--papier); color:var(--inkt-zacht); cursor:pointer;
  display:grid; place-items:center; transition:all var(--soepel);
}
.paneel__sluit:hover{ color:var(--wijn); border-color:var(--wijn); }
.paneel__sluit svg{ width:17px; height:17px; }
.paneel__inhoud{ padding:40px clamp(24px,5vw,52px) 60px; }
.paneel__kop{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--goud); margin:0 0 12px;
}
.paneel__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(25px,4vw,34px);
  letter-spacing:.03em; line-height:1.22; margin:0 0 6px; color:var(--inkt);
}
.paneel__onder{ font-style:italic; color:var(--inkt-zacht); margin:0 0 26px; font-size:18px; }

.prijsblok{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);
  margin-bottom:30px;
}
.prijsblok__prijs{ font-family:var(--display); font-size:32px; color:var(--wijn); letter-spacing:.02em; }
.prijsblok__eenheid{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--inkt-zacht);
}
.prijsblok .knop{ margin-left:auto; }

.blok{ margin-bottom:32px; }
.blok__kop{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--lijn);
}
.blok p{ margin:0 0 12px; }
.blok p:last-child{ margin-bottom:0; }

.feiten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px 24px; margin:0; }
.feiten div{ min-width:0; }
.feiten dt{
  font-family:var(--ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--inkt-zacht); margin-bottom:5px;
}
.feiten dd{ margin:0; font-size:17.5px; line-height:1.45; }

.balken{ display:grid; gap:11px; }
.balkje{ display:grid; grid-template-columns:88px 1fr; align-items:center; gap:14px; }
.balkje__naam{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--inkt-zacht);
}
.balkje__spoor{ display:block; height:5px; background:var(--room-diep); border-radius:4px; overflow:hidden; }
.balkje__vul{
  display:block; height:100%; background:linear-gradient(90deg, var(--goud), var(--wijn)); border-radius:4px;
  transform-origin:left; animation:vullen .6s cubic-bezier(.22,.61,.36,1);
}
@keyframes vullen{ from{ transform:scaleX(0); } }

.gerechten{ display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:0; }
.gerechten li{
  font-family:var(--ui); font-size:12px; padding:6px 13px; border-radius:20px;
  background:var(--room-diep); color:var(--inkt);
}

.streekknop{
  display:flex; align-items:center; gap:16px; width:100%; padding:16px 18px; cursor:pointer;
  background:var(--room-diep); border:1px solid var(--lijn); border-radius:var(--rond);
  text-align:left; transition:all var(--soepel);
}
.streekknop:hover{ border-color:var(--goud); background:var(--room); }
.streekknop__tekst{ flex:1; min-width:0; }
.streekknop__naam{ font-family:var(--display); font-size:18px; color:var(--wijn); letter-spacing:.04em; }
.streekknop__onder{ font-style:italic; color:var(--inkt-zacht); font-size:16px; }
.streekknop svg{ width:18px; height:18px; color:var(--goud); flex:none; }

.verwant{ display:grid; gap:2px; }
.verwant button{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline; width:100%;
  padding:10px 0; background:none; border:none; border-bottom:1px dotted var(--lijn);
  cursor:pointer; text-align:left; font-size:17.5px; transition:color var(--soepel);
}
.verwant button:hover{ color:var(--wijn); }
.verwant strong{ font-weight:500; }
.verwant span{ color:var(--wijn); font-weight:700; white-space:nowrap; }

.streekbeeld{
  height:200px; margin:-40px clamp(-52px,-5vw,-24px) 34px; background-size:cover; background-position:center;
  position:relative;
}
.streekbeeld::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(74,11,21,.1), var(--papier));
}
.wistjedat{
  padding:20px 22px; background:color-mix(in srgb, var(--goud) 11%, transparent);
  border-left:2px solid var(--goud); border-radius:0 var(--rond) var(--rond) 0;
}
.wistjedat strong{
  display:block; font-family:var(--ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud); margin-bottom:8px;
}
.wistjedat p{ margin:0; font-style:italic; }

/* ─────────────────────────────── offerte ──────────────────────────────── */
.paneel__blad--zijde{ width:min(480px,100%); }
.offerte{ padding:40px clamp(24px,5vw,44px) 50px; }
.offerteregel{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:14px 0; border-bottom:1px dotted var(--lijn);
}
.offerteregel__naam{ font-size:17.5px; line-height:1.35; min-width:0; }
.offerteregel__naam small{ display:block; font-family:var(--ui); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--inkt-zacht); margin-top:3px; }
.aantal{ display:flex; align-items:center; border:1px solid var(--lijn); border-radius:var(--rond); }
.aantal button{
  width:28px; height:28px; border:none; background:none; cursor:pointer; color:var(--inkt-zacht);
  font-family:var(--ui); font-size:15px; line-height:1;
}
.aantal button:hover{ color:var(--wijn); }
.aantal span{ min-width:26px; text-align:center; font-family:var(--ui); font-size:13px; }
.offerteregel__prijs{ font-weight:700; color:var(--wijn); white-space:nowrap; min-width:74px; text-align:right; }
.offerte__totaal{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:20px 0; margin-top:6px; border-top:1px solid var(--wijn); font-family:var(--display);
}
.offerte__totaal span:first-child{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.offerte__totaal span:last-child{ font-size:27px; color:var(--wijn); }
.offerte__acties{ display:grid; gap:10px; margin-top:12px; }
.offerte__acties .knop{ justify-content:center; }
.offerte__voet{ font-size:15.5px; font-style:italic; color:var(--inkt-zacht); margin-top:22px; }

/* ── bestelformulier ── */
.bestelform{ display:grid; gap:14px; margin-top:4px; }
.bestelform__kop{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--goud); margin:0 0 2px; padding-bottom:8px; border-bottom:1px solid var(--lijn);
}
.bestelform__rij{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .bestelform__rij{ grid-template-columns:1fr; } }
.bestelform input, .bestelform textarea{
  width:100%; padding:10px 12px; border:1px solid var(--lijn); border-radius:var(--rond);
  background:var(--room); font-family:var(--ui); font-size:14px;
}
.bestelform textarea{ font-family:var(--tekst); font-size:17px; resize:vertical; line-height:1.5; }
.bestelform input:focus, .bestelform textarea:focus{ outline:none; border-color:var(--goud); }
.bestelform__fout{
  margin:0; color:#B3261E; font-family:var(--ui); font-size:13px;
  background:rgba(179,38,30,.08); padding:10px 13px; border-radius:var(--rond);
}
.lokaas{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.bestelklaar{ text-align:center; padding:30px 0 10px; }
.bestelklaar svg{
  width:46px; height:46px; margin:0 auto 18px; color:var(--goud);
  stroke-width:1.8; display:block;
}
.bestelklaar h3{
  font-family:var(--display); font-weight:400; font-size:25px; letter-spacing:.03em;
  margin:0 0 12px; color:var(--inkt);
}
.bestelklaar p{ color:var(--inkt-zacht); margin:0 0 26px; }
.offerte__leeg{ text-align:center; color:var(--inkt-zacht); padding:40px 0; font-style:italic; }

/* ─────────────────────────────── melding ─────────────────────────────── */
.melding{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:200;
  background:var(--wijn); color:#FDF9F0; padding:12px 24px; border-radius:var(--rond);
  font-family:var(--ui); font-size:12.5px; letter-spacing:.08em;
  opacity:0; pointer-events:none; transition:all var(--soepel); box-shadow:var(--schaduw-op);
}
.melding.is-zichtbaar{ opacity:1; transform:translate(-50%, 0); }

/* ════════════════════════════════ VOET ════════════════════════════════ */
.voet{ background:var(--voet); color:var(--voet-inkt); padding:78px 24px 44px; text-align:center; }
.voet__binnen{ max-width:560px; margin:0 auto; }
.voet__naam{ margin:0; }
.voet__logo{
  display:block; width:min(286px, 70vw); aspect-ratio:122.35 / 78.85; margin:0 auto;
  background-color:var(--voet-titel);
  -webkit-mask:url('/assets/lockup.svg') no-repeat center / contain;
          mask:url('/assets/lockup.svg') no-repeat center / contain;
}
.voet__lijn{ height:1px; background:rgba(216,188,138,.35); margin:30px auto; max-width:340px; }
.voet__namen{ font-size:19px; line-height:2; margin:0 0 26px; }
.voet__kop{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#C9A876; margin:0 0 12px;
}
.voet__contact{ display:grid; gap:7px; margin:0; font-size:19px; }
.voet__contact a{ color:#FBF3E4; text-decoration:none; transition:color var(--soepel); }
.voet__contact a:hover{ color:var(--goud-licht); }
.voet__btw{ font-family:var(--ui); font-size:11.5px; color:#B2977A; margin:14px 0 0; letter-spacing:.06em; }
.voet__klein{ font-size:15.5px; color:#C6B49A; margin:0 0 6px; font-style:italic; }
.voet__bijgewerkt{ font-family:var(--ui); font-size:11px; font-style:normal; letter-spacing:.12em;
  text-transform:uppercase; color:#8E7A63; margin-top:16px; }
.voet__beheer{
  display:inline-block; margin-top:20px; font-family:var(--ui); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:#8E7A63; text-decoration:none;
}
.voet__beheer:hover{ color:var(--goud-licht); }

/* ═══════════════════════════════ AFDRUK ═══════════════════════════════ */
@media print{
  :root{ --room:#fff; --papier:#fff; --inkt:#000; --lijn:#bbb; }
  .hero, .balk, .streken, .paneel, .melding, .overslaan, .kaartje__toevoegen,
  .voet__beheer, .hero__pijl{ display:none !important; }
  body{ font-size:11pt; background:#fff; }
  main{ padding:0; max-width:none; }
  .sectie{ margin-bottom:24pt; page-break-inside:auto; }
  .raster{ grid-template-columns:1fr 1fr; gap:6pt; }
  .kaartje{ box-shadow:none; break-inside:avoid; padding:8pt; }
  .regel{ padding:3pt 0; }
  .voet{ background:#fff; color:#000; padding:20pt 0; }
  .voet__naam, .voet__contact a{ color:#000; }
}

/* ═══════════════════════════════ MOBIEL ═══════════════════════════════ */
@media (max-width:640px){
  body{ font-size:18px; }
  .paneel__inhoud{ padding:32px 22px 48px; }
  .paneel__blad{ width:100%; top:6vh; border-radius:12px 12px 0 0; }
  .prijsblok{ flex-direction:column; align-items:flex-start; gap:10px; }
  .prijsblok .knop{ margin-left:0; width:100%; justify-content:center; }
  .raster{ grid-template-columns:1fr; }
  .balkje{ grid-template-columns:76px 1fr; }
  .hero{ min-height:92svh; }
}

/* ═══════════════════════════════ CATALOGUS ═════════════════════════════
   De pagina waar de bezoeker de prijslijst als PDF inkijkt (/catalogus).
   ══════════════════════════════════════════════════════════════════════ */
.balk__vul{ flex:1; }
.balk__knop.is-actief{ border-color:var(--goud); color:var(--wijn); background:var(--room-diep); }
.voet__link{ color:inherit; }

.lichaam--catalogus{ background:var(--room); }

.cat{ max-width:var(--breed); margin:0 auto; padding:58px 24px 78px; }
.cat .afdeling{ padding:0; }

.cat__acties{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  margin:30px 0 14px;
}

.cat__stand{
  text-align:center; margin:0 0 26px; font-family:var(--ui); font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--inkt-zacht);
}

/* het kader met de PDF — A4 is 1 : 1,414, plus wat lucht voor de werkbalk */
.cat__blad{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  box-shadow:var(--schaduw-op); overflow:hidden;
  height:min(1180px, 88vh);
}
.cat__blad iframe{ display:block; width:100%; height:100%; border:0; background:var(--room-diep); }

/* op telefoons: geen half werkend kader maar één duidelijke kaart */
.cat__kaart{
  max-width:420px; margin:0 auto; text-align:center; padding:44px 30px 38px;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  box-shadow:var(--schaduw);
}
.cat__merk{
  display:block; width:52px; aspect-ratio:35.96 / 46; margin:0 auto 20px;
  background-color:var(--wijn);
  -webkit-mask:url('/assets/merk.svg') no-repeat center / contain;
          mask:url('/assets/merk.svg') no-repeat center / contain;
}
.cat__kaarttitel{
  font-family:var(--display); font-size:19px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wijn); margin:0 0 6px;
}
.cat__kaartregel{
  font-family:var(--ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--inkt-zacht); margin:0 0 24px; min-height:1em;
}

.cat__klein{
  max-width:640px; margin:30px auto 0; text-align:center;
  font-size:15px; line-height:1.6; color:var(--inkt-zacht);
}
.cat__klein strong{ color:var(--wijn); font-weight:600; }
.cat__klein a{ color:var(--wijn); }

@media (max-width:640px){
  .cat{ padding:40px 18px 60px; }
  .cat__acties{ flex-direction:column; align-items:stretch; }
  .cat__acties .knop{ justify-content:center; }
}

/* ── de balk kreeg er met de Catalogus een onderdeel bij ──
   Bij 1180 px inhoudsbreedte vroegen de knoppen samen meer ruimte dan er is,
   waardoor het zoekveld tot een streepje werd samengedrukt. Het woordmerk in
   de balk vervalt daarom: het schildje blijft staan en verwijst naar boven,
   en de volledige naam staat toch groot in de kop er vlak boven. */
.balk__binnen{ gap:11px; }
.balk__merk span:not(.balk__teken){ display:none; }
.balk__teken{ width:26px; }
.soorten button{ padding:9px 10px; }
.zoek{ flex:1 1 200px; }

/* ════════════════════════════════ WIJNADVIES ═══════════════════════════
   De sectie waar de bezoeker een gerecht intypt en wij er wijn bij zoeken.
   ══════════════════════════════════════════════════════════════════════ */
.advies{
  background:var(--room-diep); border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn);
  padding:78px 24px 84px;
}

.advies__vraag{
  max-width:680px; margin:34px auto 0; display:flex; gap:12px; align-items:stretch;
}
.advies__veld{
  flex:1; position:relative; display:flex; align-items:center;
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  transition:border-color var(--soepel);
}
.advies__veld:focus-within{ border-color:var(--goud); }
.advies__veld svg{
  width:19px; height:19px; margin:0 0 0 15px; color:var(--goud); flex:none;
}
.advies__veld input{
  flex:1; min-width:0; border:none; background:none; padding:15px 16px 15px 12px;
  font-family:var(--tekst); font-size:18px; color:var(--inkt);
}
.advies__veld input:focus{ outline:none; }
.advies__veld input::placeholder{ color:var(--inkt-zacht); font-style:italic; }
.advies__vraag .knop{ flex:none; }

.advies__voorbeelden{
  max-width:680px; margin:16px auto 0; display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
}
.advies__voorbeeld{
  border:1px solid var(--lijn); background:var(--papier); color:var(--inkt-zacht);
  border-radius:20px; padding:6px 14px; cursor:pointer;
  font-family:var(--ui); font-size:12px; letter-spacing:.04em;
  transition:all var(--soepel);
}
.advies__voorbeeld:hover{ border-color:var(--goud); color:var(--wijn); }

/* ── de uitslag ── */
.advies__uitslag{ max-width:var(--breed); margin:0 auto; }
.advies__uitslag:not(:empty){ margin-top:44px; }

.advies__kop{
  text-align:center; margin:0 0 6px; font-size:19px; color:var(--inkt-zacht);
}
.advies__kop strong{ color:var(--wijn); font-weight:600; }

.advies__nota{
  max-width:640px; margin:0 auto 22px; text-align:center; font-style:italic;
  font-size:16px; color:var(--inkt-zacht);
}

.advies__raster{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:18px; margin-top:24px;
}
.advies__kaart{ display:flex; flex-direction:column; }
.advies__kaart .kaartje{ height:auto; }

.advies__waarom{
  border:1px solid var(--lijn); border-top:none; border-radius:0 0 var(--rond) var(--rond);
  background:var(--papier); padding:13px 16px 15px; margin-top:-1px;
}
.advies__waarom p{
  margin:8px 0 0; font-size:15.5px; line-height:1.5; color:var(--inkt-zacht);
}

.advies__sterkte{ display:inline-flex; gap:4px; vertical-align:middle; }
.advies__bol{
  width:7px; height:7px; border-radius:50%; background:var(--lijn); display:block;
}
.advies__bol.is-aan{ background:var(--goud); }

.advies__merk{
  margin-left:10px; font-family:var(--ui); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--wijn); border:1px solid var(--lijn); border-radius:20px; padding:2px 9px;
}

.advies__leeg, .advies__voet{
  max-width:680px; margin:0 auto; text-align:center; color:var(--inkt-zacht); font-size:16px;
}
.advies__leeg strong{ display:block; color:var(--wijn); font-weight:600; margin-bottom:4px; }
.advies__voet{
  margin-top:30px; font-size:14px; line-height:1.6;
}
.advies__voet span{
  color:var(--inkt); font-style:italic;
}
.advies__voet span:not(:last-of-type)::after{ content:', '; color:var(--inkt-zacht); font-style:normal; }

@media (max-width:640px){
  .advies{ padding:56px 18px 62px; }
  .advies__vraag{ flex-direction:column; }
  .advies__vraag .knop{ justify-content:center; }
  .advies__raster{ grid-template-columns:1fr; }
}
/* kaart en motivering even hoog, zodat de rij netjes uitlijnt */
.advies__kaart .kaartje{ flex:1; }

/* ═══════════════════════════════ MENUBALK ══════════════════════════════
   De vaste kop van de site. Op de wijnlijst blijft de filterbalk eronder
   plakken bij het scrollen; op de andere pagina's plakt deze kop zelf,
   want daar is hij de enige navigatie.
   ══════════════════════════════════════════════════════════════════════ */
.menu{
  background:var(--papier); border-bottom:1px solid var(--lijn); position:relative; z-index:70;
}
body:not([data-pagina="wijnlijst"]) .menu{ position:sticky; top:0; }

.menu__binnen{
  max-width:var(--breed); margin:0 auto; padding:0 24px; height:58px;
  display:flex; align-items:center; gap:14px;
}
.menu__merk{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--wijn); flex:none; }
.menu__teken{
  display:block; width:24px; aspect-ratio:35.96 / 46; flex:none; background-color:currentColor;
  -webkit-mask:url('/assets/merk.svg') no-repeat center / contain;
          mask:url('/assets/merk.svg') no-repeat center / contain;
}
.menu__naam{
  font-family:var(--display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
.menu__vul{ flex:1; }

.menu__gang{ display:flex; gap:2px; flex:none; margin-left:10px; }
.menu__gang a{
  display:block; padding:9px 13px; border-radius:var(--rond); text-decoration:none;
  font-family:var(--ui); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--inkt-zacht); white-space:nowrap; transition:all var(--soepel);
}
.menu__gang a:hover{ color:var(--wijn); background:var(--room-diep); }
.menu__gang a.is-hier{ color:var(--wijn); font-weight:600; background:var(--room-diep); }

@media (max-width:1080px){ .menu__naam{ display:none; } }
@media (max-width:860px){
  .menu__binnen{ height:auto; padding:9px 16px; flex-wrap:wrap; }
  .menu__gang{ order:3; width:100%; margin:4px -4px 2px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .menu__gang::-webkit-scrollbar{ display:none; }
  .menu__vul{ flex:1; }
}

/* op de wijnlijst hangt de filterbalk onder de menubalk */
body[data-pagina="wijnlijst"] .balk{ top:0; }

/* ════════════════════════════ BEELDBAND ════════════════════════════════ */
.band{ position:relative; height:clamp(160px, 26vw, 300px); overflow:hidden; }
.band__beeld{ position:absolute; inset:0; background-size:cover; background-position:center 60%; }
.band__sluier{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,6,10,.34), rgba(22,6,10,.12) 45%, var(--room));
}

/* ════════════════════════════ OVER ONS ═════════════════════════════════ */
.verhaal{ max-width:var(--breed); margin:0 auto; padding:58px 24px 90px; }
.verhaal .afdeling{ padding:0; }

.verhaal__tekst{
  max-width:680px; margin:46px auto 0; font-size:19px; line-height:1.72;
}
.verhaal__tekst h2{
  font-family:var(--display); font-weight:400; font-size:23px; color:var(--wijn);
  letter-spacing:.03em; margin:44px 0 12px;
}
.verhaal__tekst h2:first-child{ margin-top:0; }
.verhaal__tekst p{ margin:0 0 18px; }
.verhaal__tekst strong{ color:var(--wijn); font-weight:600; }
.verhaal__tekst em{ font-style:italic; }

.zuilen{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:20px;
  max-width:880px; margin:56px auto 0;
}
.zuil{
  background:var(--papier); border:1px solid var(--lijn); border-radius:var(--rond);
  padding:24px 24px 22px; box-shadow:var(--schaduw);
}
.zuil h3{
  font-family:var(--ui); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--wijn); margin:0 0 10px;
}
.zuil p{ margin:0; font-size:16.5px; line-height:1.6; color:var(--inkt-zacht); }

.verhaal__slot{ text-align:center; margin-top:62px; }
.verhaal__namen{
  font-family:var(--display); font-size:15px; letter-spacing:.1em; color:var(--inkt); margin:0;
}
.verhaal__slotzin{ font-style:italic; font-size:19px; color:var(--wijn); margin:12px 0 26px; }
.verhaal__acties{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════ de losse pagina's van foodpairing en streken ══════════ */
.advies--pagina{ background:var(--room); border-top:none; padding-top:58px; }
.streken--pagina{ padding-top:58px; }

.advies__uitleg{
  max-width:680px; margin:64px auto 0; padding-top:34px; border-top:1px solid var(--lijn);
  font-size:17px; line-height:1.68; color:var(--inkt-zacht);
}
.advies__uitleg h2{
  font-family:var(--display); font-weight:400; font-size:21px; color:var(--wijn);
  letter-spacing:.03em; margin:0 0 14px;
}
.advies__uitleg p{ margin:0 0 15px; }
.advies__uitleg-slot{ color:var(--inkt); }
.advies__uitleg a{ color:var(--wijn); }

@media (max-width:640px){
  .verhaal{ padding:40px 18px 64px; }
  .verhaal__tekst{ font-size:18px; }
  .zuilen{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERZIENING VAN DE OPMAAK

   De site leunde op een bekend stramien: gecentreerde titels, een strook met
   cijfers, kapitaaltjeslabels boven elke sectie en kaartjes met schaduwranden.
   Dat is nergens fout, maar het is ook van niemand.

   Hieronder wordt dat vervangen door de vormtaal van de gedrukte prijslijst
   die wij zelf maken: links uitgelijnd, gouden haarlijnen, stippellijnen die
   naam en prijs verbinden, geen dozen en geen schaduwen. Papier, geen paneel.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── sectiekoppen: van gecentreerd naar links, met een haarlijn ── */
.afdeling{ text-align:left; }
.afdeling__kop{
  font-size:10.5px; letter-spacing:.2em; color:var(--goud);
  margin:0 0 10px; padding-bottom:9px; border-bottom:1px solid var(--lijn);
}
.afdeling__titel{
  font-size:clamp(32px, 5.2vw, 52px); letter-spacing:.04em; margin:0 0 16px;
}
.afdeling__lead{ margin:0; max-width:54ch; font-size:19.5px; }

/* geen schaduwen meer op de vlakken die als papier moeten lezen */
.zuil, .cat__blad, .cat__kaart{ box-shadow:none; }

/* ── paginakop van de wijnlijst ── */
.bladkop{ background:var(--room); padding:54px 0 34px; }
.bladkop__binnen{ max-width:var(--breed); margin:0 auto; padding:0 24px; }
.bladkop__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(32px, 5.2vw, 52px);
  letter-spacing:.04em; margin:0 0 14px; color:var(--inkt);
}
.bladkop__lead{ margin:0; max-width:54ch; color:var(--inkt-zacht); font-size:19.5px; }

/* ═══════════════════════════ STARTPAGINA ═══════════════════════════════ */
/* ── de opening: beeld, merk, één regel. Geen knoppen, geen cijferstrook. ── */
.opening{
  position:relative; height:clamp(380px, 68vh, 640px); display:grid; place-items:center;
  overflow:hidden; isolation:isolate;
}
.opening__beeld{
  position:absolute; inset:0; background-size:cover; background-position:center 55%;
  background-image:url('/assets/img/cover.jpg');
}
.opening__sluier{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(74,11,21,.30) 0%, rgba(40,8,14,.62) 55%, rgba(18,5,8,.9) 100%),
    linear-gradient(180deg, rgba(18,5,8,.5), rgba(18,5,8,.35) 40%, rgba(18,5,8,.85));
}
.opening__inhoud{ position:relative; text-align:center; padding:0 24px; }
.opening__merk{
  display:block; width:min(390px, 76vw); aspect-ratio:122.35 / 78.85; margin:0 auto;
  background-color:#F2E5CD;
  -webkit-mask:url('/assets/lockup.svg') no-repeat center / contain;
          mask:url('/assets/lockup.svg') no-repeat center / contain;
}
.opening__sinds{
  margin:26px 0 0; font-family:var(--ui); font-size:11.5px; letter-spacing:.24em;
  text-transform:uppercase; color:#D8BC8A;
}

/* ── inleiding: smalle zijkolom, brede tekstkolom ── */
.inleiding{ background:var(--room); padding:72px 0 64px; }
.inleiding__binnen{
  max-width:var(--breed); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(120px, 190px) minmax(0, 1fr); gap:0 46px;
}
.inleiding__zij{
  margin:6px 0 0; font-family:var(--ui); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--goud);
}
.inleiding__tekst{ max-width:62ch; }
.inleiding__tekst p{ margin:0 0 18px; font-size:22px; line-height:1.6; }
.inleiding__tekst p:last-child{ margin-bottom:0; }
.inleiding__door{ font-size:17px !important; }
.inleiding__door a{
  color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn);
  padding-bottom:2px; transition:border-color var(--soepel);
}
.inleiding__door a:hover{ border-color:var(--wijn); }

/* ── wegwijs: een inhoudsopgave met stippellijnen, zoals in de catalogus ── */
.wegwijs{ background:var(--room-diep); border-top:1px solid var(--lijn); padding:26px 0 34px; }
.wegwijs__lijst{
  max-width:var(--breed); margin:0 auto; padding:0 24px; list-style:none;
}
.wegwijs__lijst a{
  display:flex; align-items:baseline; gap:14px; padding:17px 0;
  border-bottom:1px solid var(--lijn); text-decoration:none; color:var(--inkt);
  transition:color var(--soepel);
}
.wegwijs__lijst li:last-child a{ border-bottom:none; }
.wegwijs__lijst a:hover{ color:var(--wijn); }
.wegwijs__nr{
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--goud);
  flex:none; width:26px;
}
.wegwijs__naam{
  font-family:var(--display); font-size:clamp(19px, 2.4vw, 25px); letter-spacing:.03em;
  flex:none;
}
.wegwijs__stip{
  flex:1; min-width:16px; align-self:flex-end; margin-bottom:7px;
  border-bottom:1px dotted rgba(176,141,87,.5);
}
.wegwijs__bij{
  flex:none; font-size:16px; color:var(--inkt-zacht); font-style:italic; text-align:right;
}

/* ── aanraders als regels, niet als kaartjes ── */
.uitgelicht{ background:var(--room); padding:72px 0; }
.uitgelicht__binnen{ max-width:var(--breed); margin:0 auto; padding:0 24px; }
.uitgelicht__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(24px, 3.2vw, 32px);
  letter-spacing:.04em; margin:0 0 6px; color:var(--inkt);
}
.uitgelicht__lijst{ border-top:1px solid var(--goud); margin-top:18px; }
.uitgelicht__regel{
  width:100%; display:flex; align-items:baseline; gap:12px; padding:13px 0;
  background:none; border:none; border-bottom:1px dotted var(--lijn); cursor:pointer;
  text-align:left; font-family:inherit; color:var(--inkt); transition:color var(--soepel);
}
.uitgelicht__regel:hover{ color:var(--wijn); }
.uitgelicht__naam{ font-size:19px; flex:none; }
.uitgelicht__naam em{ font-style:normal; color:var(--inkt-zacht); }
.uitgelicht__streek{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-zacht); flex:none;
}
.uitgelicht__stip{
  flex:1; min-width:16px; align-self:flex-end; margin-bottom:5px;
  border-bottom:1px dotted rgba(176,141,87,.45);
}
.uitgelicht__prijs{ font-size:18px; font-weight:700; color:var(--wijn); flex:none; }
.uitgelicht__door{ margin:22px 0 0; font-size:16px; }
.uitgelicht__door a{ color:var(--wijn); text-decoration:none; }
.uitgelicht__door a:hover{ text-decoration:underline; }

/* ── dienst: drie regels onder elkaar, gescheiden door haarlijnen ── */
.dienst{ background:var(--room-diep); border-top:1px solid var(--lijn); padding:58px 0 64px; }
.dienst__binnen{ max-width:var(--breed); margin:0 auto; padding:0 24px; }
.dienst__regel{
  display:grid; grid-template-columns:minmax(120px, 230px) minmax(0, 1fr); gap:6px 46px;
  padding:22px 0; border-bottom:1px solid var(--lijn);
}
.dienst__regel:last-child{ border-bottom:none; }
.dienst__regel h3{
  margin:0; font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.03em;
  color:var(--wijn);
}
.dienst__regel p{ margin:0; color:var(--inkt-zacht); font-size:18px; line-height:1.6; max-width:60ch; }

/* ── over ons: van kaartjes naar dezelfde regelopbouw ── */
.zuilen{ display:block; max-width:var(--breed); margin:52px auto 0; }
.zuil{
  display:grid; grid-template-columns:minmax(120px, 250px) minmax(0, 1fr); gap:6px 46px;
  background:none; border:none; border-bottom:1px solid var(--lijn); border-radius:0;
  padding:22px 0;
}
.zuil:first-child{ border-top:1px solid var(--lijn); }
.zuil h3{
  font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.03em;
  text-transform:none; color:var(--wijn); margin:0;
}
.zuil p{ font-size:18px; max-width:60ch; }

/* ── foodpairing: van pillen naar gewone doorklikjes ── */
.advies__voorbeelden{
  max-width:680px; margin:14px auto 0; gap:0 4px; justify-content:flex-start;
}
.advies__voorbeeld{
  border:none; background:none; border-radius:0; padding:4px 0;
  color:var(--inkt-zacht); font-size:13px; letter-spacing:.02em; text-transform:none;
  border-bottom:1px solid transparent;
}
.advies__voorbeeld:not(:last-child)::after{ content:"\00b7"; margin:0 4px 0 8px; color:var(--lijn); }
.advies__voorbeeld:hover{ color:var(--wijn); border-bottom-color:var(--goud); }
.advies__kop, .advies__voet, .advies__leeg, .advies__nota{ text-align:left; margin-left:0; }
.advies__waarom{ box-shadow:none; }

@media (max-width:760px){
  .inleiding__binnen, .dienst__regel, .zuil{ grid-template-columns:1fr; gap:8px; }
  .inleiding__zij{ margin-bottom:14px; }
  .inleiding__tekst p{ font-size:20px; }
  .wegwijs__lijst a{ flex-wrap:wrap; gap:6px 12px; }
  .wegwijs__stip{ display:none; }
  .wegwijs__bij{ width:100%; text-align:left; padding-left:40px; }
  .uitgelicht__regel{ flex-wrap:wrap; }
  .uitgelicht__streek{ order:3; width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VAKWERK — de afwerking

   Wat een opmaak goedkoop doet lijken zit zelden in de grote lijnen; het zit
   in de afwerking. Drie dingen deden dat hier:

   1. Pillen. Ronde omrande labeltjes voor druiven en streken lezen als
      knopjes uit een formulier, niet als een wijnkaart. Ze zijn vervangen
      door gezette tekst — cursief, gescheiden door punten.
   2. Zwevende kaartjes met een randje en een schaduwtje op een beige vlak.
      Ze worden nu wit papier met een scherpe hoek en ruime marges, en ze
      staan even hoog naast elkaar.
   3. Een gekleurde waas over de openingsfoto. Die maakte van een scherpe
      foto een vlek. Nu een neutrale verdonkering, onderaan zwaarder, zodat
      de foto foto blijft.

   Verder: één maatladder voor de witruimte, meer contrast in de tekst, en
   overal dezelfde linkermarge zodat er één lijn door de site loopt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ruim-xl:104px;   /* tussen twee afdelingen */
  --ruim-l:64px;
  --ruim-m:34px;
  --ruim-s:18px;
  --inkt-zacht:#5E5449;        /* was #6E6357 — te bleek op crème */
  --lijn:#DCCFB6;              /* was #E2D7C1 — haarlijnen mochten zien */
}
/* ─────────────────────────── de menubalk ──────────────────────────────── */
/* Geen beige doos rond het actieve item, maar een gouden onderstreping. */
.menu{ border-bottom:1px solid var(--lijn); }
.menu__binnen{ height:64px; gap:10px; }
.menu__gang a{
  padding:22px 14px; border-radius:0; letter-spacing:.13em; font-size:11px;
  border-bottom:2px solid transparent; background:none;
}
.menu__gang a:hover{ background:none; color:var(--wijn); }
.menu__gang a.is-hier{
  background:none; color:var(--wijn); font-weight:600; border-bottom-color:var(--goud);
}
/* de twee knoppen rechts: geen omrande dozen meer */
.menu .balk__knop{
  border:none; background:none; padding:9px 10px; color:var(--inkt-zacht);
}
.menu .balk__knop:hover{ color:var(--wijn); }
.menu__vul{ border-right:1px solid var(--lijn); margin-right:4px; }

/* ─────────────────────────── de opening ───────────────────────────────── */
/* Neutrale verdonkering in plaats van een wijnrode waas, en het merk op de
   onderste derde links — dezelfde lijn als alle tekst eronder. */
.opening{ height:clamp(440px, 78vh, 760px); place-items:end start; }
.opening__beeld{ background-position:center 48%; }
.opening__sluier{
  background:linear-gradient(180deg,
    rgba(12,6,8,.34) 0%, rgba(12,6,8,.16) 30%, rgba(12,6,8,.30) 62%, rgba(12,6,8,.82) 100%);
}
.opening__inhoud{
  width:100%; max-width:var(--breed); margin:0 auto; padding:0 24px var(--ruim-l);
  text-align:left;
}
.opening__merk{ margin:0 0 20px; width:min(340px, 66vw); background-color:#F6EEDE; }
.opening__sinds{
  margin:0; font-size:12.5px; letter-spacing:.18em; color:#EADCC2;
  padding-top:16px; border-top:1px solid rgba(216,188,138,.42); display:inline-block;
}

/* ───────────────────────── vaste maatladder ───────────────────────────── */
.inleiding{ padding:var(--ruim-xl) 0 var(--ruim-l); }
.wegwijs{ padding:var(--ruim-m) 0 var(--ruim-l); }
.uitgelicht{ padding:var(--ruim-xl) 0; }
.dienst{ padding:var(--ruim-l) 0 var(--ruim-xl); }
.verhaal{ padding:var(--ruim-xl) 24px calc(var(--ruim-xl) + 10px); }
.advies--pagina, .streken--pagina, .cat{ padding-top:var(--ruim-xl); }
.bladkop{ padding:var(--ruim-xl) 0 var(--ruim-m); }

/* de labelkolom stond te ver van zijn tekst */
.inleiding__binnen{ grid-template-columns:minmax(110px, 150px) minmax(0, 1fr); gap:0 40px; }
.dienst__regel, .zuil{ grid-template-columns:minmax(110px, 200px) minmax(0, 1fr); gap:8px 40px; }
.inleiding__zij{ margin-top:11px; }

/* ─────────────────────── de wijnkaartjes ──────────────────────────────── */
/* Wit papier, scherpe hoeken, ruime marges, en alle kaartjes even hoog. */
.raster{ gap:20px; }
.kaartje{
  gap:0; padding:26px 26px 24px; border-radius:0; box-shadow:none; min-height:186px;
  border:1px solid var(--lijn); background:#FFFDF8; height:100%;
  transition:border-color var(--soepel), background var(--soepel);
}
.kaartje:hover{ transform:none; box-shadow:none; border-color:var(--goud); background:#fff; }
.kaartje::before{ display:none; }
.kaartje__top{ align-items:baseline; gap:18px; margin-bottom:9px; }
.kaartje__naam{ font-size:21px; line-height:1.24; font-weight:500; }
.kaartje__jaar{ font-size:17px; }
.kaartje__prijs{ font-size:19px; letter-spacing:.01em; }
.kaartje__meta{
  font-size:10.5px; letter-spacing:.14em; color:var(--inkt-zacht); margin:0 0 3px;
}
/* de producent stond als losse regel met een eigen stijl; nu één geheel */
.kaartje__meta + .kaartje__meta{
  font-family:var(--tekst) !important; font-size:15.5px !important; letter-spacing:0 !important;
  text-transform:none !important; font-style:italic; margin:0;
}
/* druiven: gezette tekst in plaats van pillen */
.kaartje__druiven{
  display:block; margin-top:auto; padding-top:13px; border-top:1px solid var(--lijn);
  font-family:var(--tekst); font-size:15px; font-style:italic; color:var(--inkt-zacht);
}
.kaartje__druiven .chip{
  border:none; border-radius:0; padding:0; font-family:inherit; font-size:inherit;
  letter-spacing:0; color:inherit;
}
.kaartje__druiven .chip + .chip::before{ content:' · '; color:var(--goud); }
.kaartje__ster{ top:18px; right:18px; }
.kaartje.is-top .kaartje__top{ padding-right:26px; }
.kaartje__toevoegen{ right:18px; bottom:18px; border-radius:0; background:#fff; }

/* ──────────────────── de streeksnelkoppelingen ────────────────────────── */
/* Was een blok pillen in een beige kader; nu een gezette regel met links. */
.inhoud{
  display:block; background:none; padding:0; border-top:1px solid var(--lijn);
  border-bottom:1px solid var(--lijn); margin:0 0 var(--ruim-m);
  padding:14px 0; line-height:2.1;
}
.inhoud a{
  display:inline; background:none; border:none; border-radius:0; padding:0;
  margin-right:20px; font-family:var(--tekst); font-size:16.5px; letter-spacing:0;
  text-transform:none; color:var(--inkt); border-bottom:1px solid transparent;
  white-space:nowrap;
}
.inhoud a:hover{ color:var(--wijn); border-bottom-color:var(--goud); }
.inhoud em{ font-size:12px; color:var(--goud); margin-left:3px; vertical-align:super; }

/* ──────────────────────── sectiekoppen ────────────────────────────────── */
.sectie{ margin-bottom:var(--ruim-xl); }
.sectie__kop{ border-bottom:1px solid var(--goud); padding-bottom:12px; }
.groep__kop{ padding-top:var(--ruim-s); }

/* ───────────────────────── foodpairing ────────────────────────────────── */
.advies__veld{ border-radius:0; }
.advies__veld input{ font-size:19px; }
.advies__vraag .knop{ border-radius:0; }
.advies__kaart .kaartje{ border-bottom:none; }
.advies__waarom{ border-radius:0; background:#FFFDF8; }

/* ───────────────────────── knoppen ────────────────────────────────────── */
/* Scherpe hoeken passen bij het papier; ronde hoeken bij een app. */
.knop, .balk__knop, .zoek input, .veld select, .veld input,
.cat__blad, .cat__kaart, .zuil, .stand{ border-radius:0; }
.knop{ letter-spacing:.16em; font-size:12px; padding:15px 32px; }

/* ─────────────────────────── zo bestelt u ─────────────────────────────── */
/* Drie genummerde stappen, in dezelfde opbouw als de inhoudsopgave: een
   cijfer in de smalle kolom, de uitleg in de brede. */
.bestelwijze{ background:var(--room); padding:var(--ruim-l) 0 var(--ruim-xl); }
.bestelwijze__binnen{ max-width:var(--breed); margin:0 auto; padding:0 24px; }
.bestelwijze__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(24px, 3.2vw, 32px);
  letter-spacing:.04em; margin:0 0 6px; color:var(--inkt);
}
.bestelwijze__stappen{
  list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--goud);
}
.bestelwijze__stappen li{
  display:grid; grid-template-columns:56px minmax(0, 1fr); gap:0 24px;
  padding:26px 0; border-bottom:1px solid var(--lijn);
}
.bestelwijze__nr{
  font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--goud); padding-top:5px;
}
.bestelwijze__stappen h3{
  margin:0 0 6px; font-family:var(--display); font-weight:400; font-size:20px;
  letter-spacing:.03em; color:var(--wijn);
}
.bestelwijze__stappen p{
  margin:0; font-size:18px; line-height:1.62; color:var(--inkt-zacht); max-width:64ch;
}
.bestelwijze__stappen em{ font-style:normal; color:var(--inkt); }
.bestelwijze__stappen a, .bestelwijze__slot a{
  color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn);
}
.bestelwijze__stappen a:hover, .bestelwijze__slot a:hover{ border-bottom-color:var(--wijn); }
.bestelwijze__slot{ margin:26px 0 0; font-size:18px; color:var(--inkt-zacht); }

/* de lege selectie legt nu uit hoe het werkt */
.offerte__leeg{ text-align:left; padding:6px 0 10px; }
.offerte__leeg p{ margin:0 0 13px; font-size:17px; line-height:1.6; color:var(--inkt-zacht); }
.offerte__leeg strong{ color:var(--wijn); font-weight:600; font-size:18px; }
.offerte__leeg a{ color:var(--wijn); }

@media (max-width:760px){
  .bestelwijze__stappen li{ grid-template-columns:38px minmax(0, 1fr); gap:0 14px; }
  .bestelwijze__stappen p{ font-size:17px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STARTPAGINA — opbouw naar het voorbeeld van een klassieke wijnhandelssite

   Beeld en praktische gegevens naast elkaar bovenaan, daaronder een rij
   tegels, dan afwisselende beeld-tekstblokken. Kleuren, letters en lijnen
   blijven die van Wijnen Vroman.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── beeld + gegevenskaart ── */
.kop{ background:var(--room); padding:36px 0 0; }
.kop__binnen{
  max-width:var(--breed); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(300px, .95fr); gap:24px;
  align-items:stretch;
}
.kop__beeld{
  background:var(--room-diep) center/cover no-repeat;
  min-height:clamp(300px, 42vw, 470px);
}
.kop__kaart{
  background:var(--room-diep); border:1px solid var(--lijn);
  padding:36px 34px 32px; display:flex; flex-direction:column;
}
.kop__naam{
  font-family:var(--display); font-weight:400; font-size:clamp(26px, 3vw, 34px);
  letter-spacing:.05em; margin:0; color:var(--wijn);
}
.kop__leus{
  margin:6px 0 0; font-style:italic; font-size:18px; color:var(--inkt-zacht);
  padding-bottom:20px; border-bottom:1px solid var(--lijn);
}
.kop__gegevens{ margin:20px 0 0; display:grid; gap:11px; }
.kop__gegevens div{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; align-items:baseline; }
.kop__gegevens dt{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inkt-zacht);
}
.kop__gegevens dd{ margin:0; font-size:17px; color:var(--inkt); }
.kop__gegevens a{ color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn); }
.kop__gegevens a:hover{ border-bottom-color:var(--wijn); }
.kop__nota{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--lijn);
  font-size:16.5px; line-height:1.55; color:var(--inkt-zacht);
}
.kop__knoppen{ margin-top:auto; padding-top:24px; display:grid; gap:9px; }
.kop__knoppen .knop{ justify-content:center; padding:14px 18px; }

/* ── de vier tegels ── */
.tegels{
  max-width:var(--breed); margin:24px auto 0; padding:0 24px;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px;
}
.tegel{
  display:block; text-decoration:none; color:inherit; border:1px solid var(--lijn);
  background:var(--papier); overflow:hidden; transition:border-color var(--soepel);
}
.tegel:hover{ border-color:var(--goud); }
.tegel__beeld{
  display:block; height:200px; background:var(--room-diep) center/cover no-repeat;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.tegel:hover .tegel__beeld{ transform:scale(1.04); }
.tegel__onder{ display:block; padding:16px 18px 18px; }
.tegel__titel{
  display:block; font-family:var(--display); font-size:18px; letter-spacing:.03em; color:var(--wijn);
}
.tegel__bij{
  display:block; margin-top:4px; font-size:15.5px; color:var(--inkt-zacht); font-style:italic;
}

/* ── flessen in de kijker ── */
.kijker{ background:var(--room); padding:var(--ruim-xl) 0 var(--ruim-l); }
.kijker__binnen{ max-width:var(--breed); margin:0 auto; padding:0 24px; }
.kijker__titel{
  font-family:var(--display); font-weight:400; font-size:clamp(24px, 3.2vw, 32px);
  letter-spacing:.04em; margin:0; color:var(--inkt);
}
.kijker__lead{ margin:6px 0 0; color:var(--inkt-zacht); font-size:18px; }
.kijker__raster{
  margin-top:30px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px;
}
.kijker__fles{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
  background:var(--papier); border:1px solid var(--lijn); padding:0 20px 24px;
  cursor:pointer; font-family:inherit; color:inherit; transition:border-color var(--soepel);
}
.kijker__fles:hover{ border-color:var(--goud); }
.kijker__beeld{ display:block; width:100%; background:#fff; padding:4px 0 14px; }
.kijker__beeld img{ display:block; width:100%; height:auto; }
.kijker__soort{
  font-family:var(--ui); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--goud); margin-top:16px;
}
.kijker__naam{ font-size:18.5px; line-height:1.3; margin-top:7px; color:var(--inkt); }
.kijker__naam em{ font-style:normal; color:var(--inkt-zacht); }
.kijker__streek{
  font-family:var(--ui); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--inkt-zacht); margin-top:6px;
}
.kijker__prijs{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--lijn); width:100%;
  font-size:19px; font-weight:700; color:var(--wijn);
}
.kijker__door{ margin:28px 0 0; font-size:16px; }
.kijker__door a{ color:var(--wijn); text-decoration:none; }
.kijker__door a:hover{ text-decoration:underline; }

/* ── afwisselende beeld-tekstblokken ── */
.blok{ background:var(--room); padding:0 0 var(--ruim-l); }
.blok__binnen{
  max-width:var(--breed); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:stretch;
}
.blok__beeld{
  background:var(--room-diep) center/cover no-repeat; min-height:clamp(260px, 32vw, 400px);
}
.blok__tekst{
  background:var(--room-diep); border:1px solid var(--lijn); padding:40px 38px 36px;
  display:flex; flex-direction:column; justify-content:center;
}
.blok--om .blok__binnen > .blok__tekst{ order:1; }
.blok--om .blok__binnen > .blok__beeld{ order:2; }
.blok__tekst h2{
  font-family:var(--display); font-weight:400; font-size:clamp(23px, 2.8vw, 30px);
  letter-spacing:.04em; margin:0 0 16px; color:var(--wijn);
}
.blok__tekst p{ margin:0 0 15px; font-size:18px; line-height:1.62; color:var(--inkt-zacht); max-width:56ch; }
.blok__tekst p:last-child{ margin-bottom:0; }
.blok__wanneer{
  font-family:var(--ui) !important; font-size:11px !important; letter-spacing:.2em;
  text-transform:uppercase; color:var(--goud) !important; margin:0 0 10px !important;
}
.blok__door a{ color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn); }
.blok__door a:hover{ border-bottom-color:var(--wijn); }
.blok__acties{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px !important; }

@media (max-width:1000px){
  .tegels, .kijker__raster{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:820px){
  .kop__binnen, .blok__binnen{ grid-template-columns:1fr; }
  .kop__beeld{ min-height:230px; }
  .blok--om .blok__binnen > .blok__tekst{ order:2; }
  .blok--om .blok__binnen > .blok__beeld{ order:1; }
}
@media (max-width:560px){
  .tegels, .kijker__raster{ grid-template-columns:1fr; }
  .kop__kaart, .blok__tekst{ padding:28px 22px 26px; }
}

/* Knop met rand: de lichte variant hoorde bij de oude donkere hero. Op een
   lichte ondergrond moet de tekst donker zijn, anders is de knop leeg. */
.knop--rand{ border-color:var(--lijn); color:var(--inkt); }
.knop--rand:hover{ border-color:var(--wijn); color:var(--wijn); background:none; }
.hero .knop--rand, .opening .knop--rand{ border-color:rgba(216,188,138,.55); color:#F1E6D2; }

/* ── Over ons: het merk in plaats van een foto ──
   Een diep bordeaux vlak met het logo in crème, dezelfde behandeling als de
   voet en als de contactpagina van de gedrukte catalogus. */
.blok__merk{
  background:var(--voet); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; padding:56px 40px; min-height:clamp(260px, 32vw, 400px);
}
.blok__lockup{
  display:block; width:min(300px, 72%); aspect-ratio:122.35 / 78.85;
  background-color:var(--voet-titel);
  -webkit-mask:url('/assets/lockup.svg') no-repeat center / contain;
          mask:url('/assets/lockup.svg') no-repeat center / contain;
}
.blok__sinds{
  font-family:var(--ui); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--goud-licht); padding-top:22px; border-top:1px solid rgba(216,188,138,.35);
}

/* ── de wijnproeverij ── */
.proeverij__punten{
  list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:9px;
}
.proeverij__punten li{
  position:relative; padding-left:24px; font-size:18px; line-height:1.5; color:var(--inkt-zacht);
}
.proeverij__punten li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:1px; background:var(--goud);
}
.proeverij__punten strong{ color:var(--wijn); font-weight:600; }
.proeverij__waar{
  margin:0 0 18px !important; padding:16px 0 0; border-top:1px solid var(--lijn);
  font-size:17px; color:var(--inkt-zacht);
}
.proeverij__waar span{
  display:block; font-family:var(--display); font-size:19px; letter-spacing:.03em;
  color:var(--inkt); margin-bottom:3px;
}
.kop__nota a{ color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn); }
.kop__nota a:hover{ border-bottom-color:var(--wijn); }

/* ── bestellen in het kort, boven de wijnlijst ── */
.bestelkort{
  margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--lijn);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 40px; justify-content:space-between;
}
.bestelkort__stappen{ margin:0; display:flex; flex-wrap:wrap; gap:8px 28px; }
.bestelkort__stappen span{ font-size:17px; color:var(--inkt-zacht); white-space:nowrap; }
.bestelkort__stappen b{
  font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.12em;
  color:var(--goud); margin-right:7px;
}
.bestelkort__bel{ margin:0; font-size:17px; color:var(--inkt-zacht); }
.bestelkort__bel a{ color:var(--wijn); text-decoration:none; border-bottom:1px solid var(--lijn); }
.bestelkort__bel a:hover{ border-bottom-color:var(--wijn); }

@media (max-width:900px){
  .bestelkort{ flex-direction:column; gap:12px; }
  .bestelkort__stappen{ flex-direction:column; gap:6px; }
  .bestelkort__stappen span{ white-space:normal; }
}

/* ── het menu op een telefoon ──
   Zes items naast elkaar passen niet op een smal scherm; horizontaal schuiven
   verbergt de helft. Onder 860 px klapt het menu daarom onder de balk open. */
.menu{ position:relative; }
.menu__klap{ display:none; }

@media (max-width:860px){
  .menu__binnen{ height:60px; flex-wrap:nowrap; padding:0 16px; }
  .menu__klap{ display:inline-flex; }
  .menu__gang{
    position:absolute; left:0; right:0; top:100%; z-index:80;
    display:none; flex-direction:column; gap:0; order:0; width:auto; margin:0;
    padding:6px 0 8px; overflow:visible;
    background:var(--papier); border-bottom:1px solid var(--lijn);
    box-shadow:0 14px 26px -18px rgba(74,11,21,.45);
  }
  .menu__gang.is-open{ display:flex; }
  .menu__gang a{
    padding:14px 20px; border-bottom:none; font-size:12.5px; letter-spacing:.14em;
  }
  .menu__gang a.is-hier{ border-bottom-color:transparent; background:var(--room-diep); }
  .menu__naam{ display:inline; font-size:11.5px; }
}

/* ── beeld en tekst onder elkaar op een telefoon ──
   Naast elkaar zijn het twee panelen met een marge ertussen; onder elkaar
   horen ze één geheel te zijn. Met de marge ertussen zweeft de foto los boven
   het tekstvlak en lijkt er niets uit te lijnen. */
@media (max-width:820px){
  .kop__binnen, .blok__binnen{ gap:0; }
  .kop__kaart, .blok__tekst{ border-top:0; }
  .blok__beeld{ min-height:clamp(200px, 52vw, 300px); }
  .blok__merk{ min-height:0; padding:46px 28px; gap:22px; }
  .blok__lockup{ width:min(260px, 66%); }
}
@media (max-width:560px){
  .blok__merk{ padding:38px 22px; gap:18px; }
}

/* De namen mogen niet middenin afbreken; liever een regel meer. */
.voet__namen span{ white-space:nowrap; }

/* ── de kaart verschuiven en zoomen ──
   touch-action:none houdt de browser van de gebaren af, anders scrolt de
   pagina mee zodra je op een telefoon over de kaart veegt. */
.kaart{ position:relative; }
.kaart > svg{ touch-action:none; cursor:grab; }
.kaart > svg.is-slepen{ cursor:grabbing; }
.kaart__zoom{
  position:absolute; top:22px; right:22px; display:flex; flex-direction:column; gap:5px;
}
.kaart__zoom button{
  width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--lijn); border-radius:8px; background:var(--papier);
  color:var(--inkt-zacht); font-family:var(--ui); font-size:17px; line-height:1;
  box-shadow:var(--schaduw); transition:all var(--soepel);
}
.kaart__zoom button:hover:not(:disabled){ color:var(--wijn); border-color:var(--goud); }
.kaart__zoom button:disabled{ opacity:.35; cursor:default; }
.kaart__zoom button svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }