/* dourovallei.com — «etiket van een portfles»
   Bodoni Moda (koppen, cijfers) + Instrument Sans (tekst, UI). Nooit border-left/-top: alleen volledige randen, outlines,
   getinte vlakken, schaduwen en SVG-banden. */

@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/bodoni-moda-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --etiket:#F7F0E4; --etiket-oud:#EADBC3; --etiket-licht:#FBF7EF;
  --inkt:#241A17; --robijn:#6B1526; --robijn-diep:#561020; --vintage:#3A0B14;
  --goud:#C9A24E; --goud-licht:#E3C987; --kurk:#C49A6C; --schist:#4E5560; --rank:#5F6B3A;
  --rivier:#3E5F6B; --rivier-licht:#C9D6D6;
  --serif:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --maat:68ch; --r:14px; --r-klein:8px;
  --schaduw:0 1px 2px rgba(36,26,23,.08),0 10px 30px -12px rgba(58,11,20,.28);
  --terras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='36' viewBox='0 0 240 36'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.1' opacity='.75'%3E%3Cpath d='M0 6c40-6 80 6 120 0s80-6 120 0'/%3E%3Cpath d='M0 14c40-6 80 6 120 0s80-6 120 0'/%3E%3Cpath d='M0 22c40-6 80 6 120 0s80-6 120 0'/%3E%3Cpath d='M0 30c40-6 80 6 120 0s80-6 120 0'/%3E%3C/g%3E%3C/svg%3E");
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--etiket) var(--korrel);color:var(--inkt);font:400 1.125rem/1.62 var(--sans);font-feature-settings:"kern","liga"}
@media (min-width:900px){body{font-size:1.1875rem}}
img{max-width:100%;height:auto;display:block}
a{color:var(--robijn);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--robijn-diep);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--goud);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--vintage);color:#fff;padding:.7rem 1rem;border-radius:8px;z-index:99}
.skip:focus{top:1rem}

/* ---------- typografie ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.12;color:var(--robijn);margin:0 0 .5em;font-optical-sizing:auto;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:700}
h1,h2,h3,h4{overflow-wrap:break-word}
:lang(de) h1,:lang(de) h2,:lang(de) h3{hyphens:auto;-webkit-hyphens:auto}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem);margin-top:2.2em}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem);margin-top:1.6em;color:var(--vintage)}
p{margin:0 0 1.05em}
.kicker{font-family:var(--serif);font-variant:small-caps;letter-spacing:.14em;font-weight:500;font-size:1.02rem;color:var(--robijn);text-transform:lowercase;margin:0 0 .4rem}
.lede{font-size:1.2em;line-height:1.5;color:var(--inkt)}
strong{font-weight:600}
.nums{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.kop{position:sticky;top:0;z-index:40;background:rgba(247,240,228,.94);backdrop-filter:saturate(1.2) blur(8px);box-shadow:0 1px 0 rgba(196,154,108,.45)}
.kop-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:1rem;padding:.55rem 1rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--robijn);min-height:44px}
.logo-cartel{display:grid;place-items:center;padding:.28rem .7rem .32rem;border:1.5px solid var(--robijn);border-radius:10px;outline:1px solid var(--goud);outline-offset:-5px;background:var(--etiket-licht);line-height:.95;text-align:center}
.logo-cartel b{font-family:var(--serif);font-weight:700;font-size:1.02rem;letter-spacing:.2em}
.logo-cartel span{font-family:var(--serif);font-size:.66rem;letter-spacing:.42em;font-weight:500}
.logo-sub{font-size:.78rem;color:var(--schist);max-width:13rem;line-height:1.25;display:none}
@media (min-width:1100px){.logo-sub{display:block}}
.hoofdnav{margin-left:auto;display:flex;align-items:center}
.menu-breed{display:none;list-style:none;margin:0;padding:0;gap:.15rem}
.menu-breed a,.menu a{display:flex;align-items:center;min-height:48px;text-decoration:none;color:var(--inkt);font-weight:500;padding:0 .7rem;border-radius:8px}
.menu-breed a{font-size:.94rem}
.menu-breed a:hover,.menu-breed a[aria-current],.menu a:hover,.menu a[aria-current]{background:var(--etiket-oud);color:var(--robijn)}
.menu>summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:grid;place-items:center;border:1.5px solid var(--robijn);border-radius:999px;padding:0 1rem;font-weight:600;color:var(--robijn);font-size:.95rem}
.menu>summary::-webkit-details-marker{display:none}
.menu ul{list-style:none;margin:0;padding:.5rem 1rem 1.2rem;position:absolute;left:0;right:0;top:100%;background:var(--etiket);box-shadow:0 18px 30px -18px rgba(58,11,20,.4)}
.taal{margin-left:.6rem;font-size:.82rem;font-weight:600;color:var(--schist);border:1px solid var(--kurk);border-radius:999px;padding:.35rem .7rem;min-height:36px;display:inline-flex;align-items:center}
@media (min-width:980px){.menu-breed{display:flex}.menu{display:none}}
/* ---------- kruimelpad ---------- */
.kruimels{max-width:1240px;margin:0 auto;padding:.8rem 1rem 0;font-size:.86rem;color:var(--schist)}
.kruimels ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.kruimels li+li::before{content:"›";margin-right:.5rem;color:var(--kurk)}
.kruimels a{color:var(--schist);display:inline-block;padding:.35rem 0}

/* ---------- hero met etiket ---------- */
.hero{position:relative;isolation:isolate;min-height:clamp(440px,74vh,760px);display:grid;place-items:center;padding:5.5rem 1rem 3rem;overflow:hidden}
.hero-foto{position:absolute;inset:0;z-index:-2}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,10,14,.12) 0%,rgba(36,10,14,.05) 40%,rgba(36,10,14,.55) 100%)}
.etiket{position:relative;max-width:760px;width:100%;text-align:center;background:var(--etiket-licht);border:2px solid var(--robijn);border-radius:22px;outline:1px solid var(--goud);outline-offset:-10px;box-shadow:inset 0 0 0 12px var(--etiket-licht),inset 0 0 0 13px rgba(201,162,78,.55),0 30px 60px -28px rgba(20,4,8,.75);padding:2.3rem 1.4rem 1.9rem}
.etiket .lede{font-size:1.08em;max-width:52ch;margin-inline:auto}
.etiket-orn{display:block;width:120px;height:14px;margin:.2rem auto .9rem;background:var(--terras) center/240px 36px;opacity:.95}
.hero-credit{position:absolute;right:.6rem;bottom:.5rem;font-size:.72rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);max-width:70%;text-align:right}
.hero-credit a{color:#fff}
.hero-actie{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.1rem}
.bijgewerkt{font-size:.82rem;color:var(--schist);margin-top:.9rem}
@media (min-width:760px){.etiket{padding:3rem 3rem 2.3rem}}
@keyframes opkomen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.hero.klein{min-height:clamp(340px,52vh,520px)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.35rem;border-radius:999px;background:var(--robijn);color:var(--etiket-licht);font-weight:600;text-decoration:none;box-shadow:0 6px 18px -8px rgba(107,21,38,.8);transition:transform .15s,background .15s}
.knop:hover{background:var(--robijn-diep);color:#fff;transform:translateY(-1px)}
.knop.goud{background:var(--goud);color:var(--inkt);box-shadow:0 6px 18px -8px rgba(120,90,20,.8)}
.knop.goud:hover{background:var(--goud-licht);color:var(--inkt)}
.knop.lijn{background:transparent;color:var(--robijn);border:1.5px solid var(--robijn);box-shadow:none}
.knop.lijn:hover{background:var(--etiket-oud)}
.knop .pijl{font-family:var(--serif);font-size:1.15em;line-height:1}

/* ---------- layout ---------- */
main{display:block}
.blad{max-width:1240px;margin:0 auto;padding:0 1rem}
.tekst{max-width:var(--maat);margin:0 auto}
.tekst>h2:first-child{margin-top:1.4em}
.breed{max-width:1120px;margin-left:auto;margin-right:auto}
.terrasband{height:36px;background:var(--terras) center/240px 36px repeat-x;margin:3rem auto;max-width:520px;opacity:.9}
.sectie-donker{background:var(--vintage);color:var(--etiket);padding:3rem 0;margin:3rem 0}
.sectie-donker h2{color:var(--goud-licht)}
.sectie-donker a{color:var(--goud-licht)}
.intro-grid{display:grid;gap:1.6rem;margin-top:2.5rem}
@media (min-width:980px){.intro-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start;max-width:1120px;margin-inline:auto}.intro-grid .tekst{margin:0}}

/* ---------- foto's met credit ---------- */
figure{margin:2rem 0}
.foto img{border-radius:var(--r);box-shadow:var(--schaduw);width:100%}
.foto figcaption,.credit{font-size:.8rem;color:var(--schist);margin-top:.5rem;line-height:1.4}
.foto figcaption .bij{display:block;font-size:.9rem;color:var(--inkt);margin-bottom:.15rem}
.credit a,.foto figcaption a{color:var(--schist)}
.foto.breed{max-width:1120px;margin-left:auto;margin-right:auto}
@media (min-width:1000px){
  .tekst .foto.breed{margin-left:calc((var(--maat) - 1000px)/2);margin-right:calc((var(--maat) - 1000px)/2);max-width:none;width:1000px}
  .tekst .foto.rechts{float:right;width:46%;margin:.4rem -12% 1.2rem 1.8rem}
}
.galerij{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin:2rem auto;max-width:1120px}
.galerij figure{margin:0}
.galerij img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-klein)}
.galerij figure:first-child{grid-column:1/-1}
.galerij figure:first-child img{aspect-ratio:16/8}
@media (min-width:900px){.galerij{grid-template-columns:repeat(3,1fr)}.galerij figure:first-child{grid-column:span 2;grid-row:span 2}.galerij figure:first-child img{aspect-ratio:auto;height:100%}}
.clear{clear:both}

/* ---------- reserveerblok + etiketkaart ---------- */
.reserveer{background:var(--etiket-oud);border-radius:26px;padding:1.6rem 1rem 1.4rem;margin:2.2rem auto;max-width:1180px;box-shadow:inset 0 0 0 1px rgba(196,154,108,.6)}
.reserveer-kop{text-align:center;max-width:720px;margin:0 auto 1.3rem}
.reserveer-kop h2{margin:.1rem 0 .3rem}
.reserveer-kop p{margin:0;color:var(--schist);font-size:.95rem}
.kaarten{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tekst .kaarten{grid-template-columns:minmax(0,1fr);max-width:520px;margin:1.6rem auto}
.ekaart{position:relative;display:flex;flex-direction:column;background:var(--etiket-licht);border:1.5px solid var(--robijn);border-radius:18px;outline:1px solid rgba(201,162,78,.8);outline-offset:-7px;overflow:hidden;box-shadow:var(--schaduw)}
.ekaart-band{background:var(--robijn);color:var(--etiket-licht);font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;letter-spacing:.16em;font-size:.9rem;text-align:center;padding:.55rem 1rem}
.ekaart-foto{position:relative}
.ekaart-foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.ekaart-foto .credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:.9rem .7rem .35rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));font-size:.7rem}
.ekaart-foto .credit a{color:#fff}
.zegel{position:absolute;right:.8rem;top:-1.6rem;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#8f2337,#5a0f1d 70%);color:#f4e6d0;font-size:.6rem;font-weight:600;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.12),inset 0 0 0 5px rgba(90,15,29,1),inset 0 0 0 6px rgba(244,230,208,.35);transform:rotate(-8deg);z-index:2}
.ekaart-body{position:relative;padding:1.3rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.ekaart h3{margin:0;font-size:1.22rem;color:var(--vintage);padding-right:4.6rem}
.ekaart dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:.2rem 0;font-size:.94rem}
.ekaart dt{font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;letter-spacing:.08em;color:var(--schist)}
.ekaart dd{margin:0}
.ekaart-prijs{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.4rem;flex-wrap:wrap}
.prijs{font-family:var(--serif);font-weight:900;font-size:2.2rem;color:var(--robijn);line-height:1}
.prijs small{font-family:var(--sans);font-weight:500;font-size:.8rem;color:var(--schist);display:block;letter-spacing:0}
.score{font-size:.86rem;color:var(--schist)}
.score b{color:var(--inkt)}
.ekaart .knop{width:100%;margin-top:.6rem}
.affnoot{font-size:.8rem;color:var(--schist);text-align:center;margin:1rem auto 0;max-width:70ch}

/* ---------- CTA in de tekst ---------- */
.cta-tekst{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;background:var(--etiket-licht);border:1.5px solid var(--goud);border-radius:16px;padding:.95rem 1.1rem;margin:1.6rem 0;box-shadow:0 8px 20px -16px rgba(58,11,20,.6)}
.cta-tekst .vraag{flex:1 1 260px;font-weight:600;color:var(--vintage);margin:0}
.cta-tekst .vraag span{display:block;font-weight:400;font-size:.88rem;color:var(--schist)}
.cta-tekst .knop{flex:0 0 auto}

/* ---------- feitenkaart ---------- */
.feiten{background:var(--etiket-licht);border:1.5px solid var(--kurk);border-radius:20px;padding:1.3rem 1.3rem 1rem;box-shadow:var(--schaduw)}
.feiten h2{font-size:1.25rem;margin:0 0 .7rem;text-align:center;font-variant:small-caps;text-transform:lowercase;letter-spacing:.12em}
.feiten dl{margin:0;display:grid;gap:.75rem}
.feiten dt{font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;letter-spacing:.1em;color:var(--robijn);font-size:.95rem}
.feiten dd{margin:0;font-size:.95rem;line-height:1.45}
@media (min-width:980px){.feiten{position:sticky;top:5.5rem}}

/* ---------- vergelijker ---------- */
.vergelijker{max-width:1180px;margin:2.5rem auto}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.chip{min-height:44px;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--robijn);background:var(--etiket-licht);color:var(--robijn);font:600 .9rem var(--sans);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--robijn);color:var(--etiket-licht)}
.vtabel{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;background:var(--etiket-licht);border-radius:16px;overflow:hidden;box-shadow:var(--schaduw)}
.vtabel th,.vtabel td{padding:.75rem .7rem;text-align:left;vertical-align:top}
.vtabel thead th{background:var(--vintage);color:var(--etiket);font-family:var(--serif);font-weight:500;font-variant:small-caps;text-transform:lowercase;letter-spacing:.08em;position:sticky;top:4rem}
.vtabel tbody tr:nth-child(even){background:var(--etiket-oud)}
.vtabel .ja{color:var(--rank);font-weight:600}
.vtabel .nee{color:var(--schist)}
.vtabel .vp{font-family:var(--serif);font-weight:900;font-size:1.2rem;color:var(--robijn);white-space:nowrap}
.vtabel a.knop{min-height:44px;padding:.5rem .9rem;font-size:.88rem;white-space:nowrap}
.vtabel tr[hidden]{display:none}
.vbron{font-size:.8rem;color:var(--schist);margin-top:.7rem}
@media (max-width:860px){
  .vtabel,.vtabel tbody,.vtabel tr,.vtabel td{display:block;width:100%}
  .vtabel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .vtabel{background:none;box-shadow:none}
  .vtabel tbody tr{background:var(--etiket-licht)!important;border:1.5px solid var(--robijn);border-radius:16px;margin:0 0 .9rem;padding:.4rem 0;box-shadow:var(--schaduw)}
  .vtabel td{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 1rem}
  .vtabel td::before{content:attr(data-l);font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;letter-spacing:.06em;color:var(--schist)}
  .vtabel td:first-child{font-weight:600;font-size:1.02rem;color:var(--vintage);display:block}
  .vtabel td:first-child::before{content:none}
  .vtabel td:last-child::before{content:none}
  .vtabel td:last-child a{width:100%}
}

/* ---------- gewone tabellen ---------- */
.tabel-wrap{overflow-x:auto;margin:1.6rem 0;border-radius:14px;box-shadow:var(--schaduw)}
table.data{width:100%;border-collapse:collapse;background:var(--etiket-licht);font-size:.94rem;min-width:520px}
table.data th{background:var(--etiket-oud);text-align:left;font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;letter-spacing:.06em;font-weight:600;color:var(--vintage)}
table.data th,table.data td{padding:.65rem .8rem;vertical-align:top}
table.data tbody tr:nth-child(even){background:#F3E8D6}

/* ---------- rivierlint ---------- */
.rivierlint{margin:3rem auto;max-width:1180px;background:var(--etiket-licht);border-radius:24px;padding:1.4rem 1rem 1.2rem;box-shadow:inset 0 0 0 1px rgba(196,154,108,.7)}
.rivierlint h2{text-align:center;font-size:1.35rem;margin:0 0 .2rem}
.rivierlint .uitleg{text-align:center;font-size:.86rem;color:var(--schist);margin:0 0 1rem}
.lint{position:relative;list-style:none;margin:0;padding:1.4rem .5rem .4rem;display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory}
.lint::before{content:"";position:absolute;left:0;right:0;top:2.15rem;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16'%3E%3Cpath d='M0 8c20-8 40 8 60 0s40-8 60 0' fill='none' stroke='%233E5F6B' stroke-width='5' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") repeat-x;background-size:120px 16px;min-width:900px}
.lint li{position:relative;flex:1 0 120px;text-align:center;scroll-snap-align:center;padding:0 .3rem}
.lint .stip{display:block;width:22px;height:22px;margin:0 auto .6rem;border-radius:50%;background:var(--etiket-licht);box-shadow:0 0 0 4px var(--rivier),0 2px 6px rgba(0,0,0,.25);position:relative;z-index:1}
.lint a,.lint .hier{display:block;font-family:var(--serif);font-weight:700;font-size:1.02rem;text-decoration:none;color:var(--vintage);padding:.2rem .1rem;min-height:44px}
.lint a:hover{color:var(--robijn);text-decoration:underline}
.lint small{display:block;font-family:var(--sans);font-weight:400;font-size:.78rem;color:var(--schist);line-height:1.3}
.lint li.nu .stip{background:var(--robijn);box-shadow:0 0 0 4px var(--goud),0 2px 6px rgba(0,0,0,.35);transform:scale(1.25)}
.lint li.nu .hier{color:var(--robijn)}
.richting{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;font-size:.9rem;flex-wrap:wrap}
.richting a{display:inline-flex;align-items:center;min-height:44px;gap:.4rem;font-weight:600}

/* ---------- in de buurt / tegels ---------- */
.tegels{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:1.4rem 0}
.tegel{position:relative;display:flex;flex-direction:column;background:var(--etiket-licht);border-radius:16px;overflow:hidden;box-shadow:var(--schaduw);transition:transform .2s}
.tegel-link{display:flex;flex-direction:column;text-decoration:none;color:var(--inkt);flex:1}
.tegel:hover{transform:translateY(-3px)}
.tegel-link:hover .t{text-decoration:underline}
.tegel img{aspect-ratio:3/2;object-fit:cover;width:100%}
.tegel span.t{font-family:var(--serif);font-weight:700;font-size:1.18rem;color:var(--robijn);padding:.8rem 1rem 0}
.tegel span.o{font-size:.9rem;color:var(--schist);padding:.25rem 1rem 1rem;line-height:1.4}
.tegel .credit{padding:0 1rem .8rem;margin:0;font-size:.68rem}
.nabij{max-width:1180px;margin:3rem auto}
.nabij h2{text-align:center}

/* ---------- kaart (svg) ---------- */
.kaartblok{max-width:1120px;margin:2.4rem auto;background:var(--etiket-licht);border-radius:22px;padding:1rem;box-shadow:var(--schaduw)}
.kaartblok svg{width:100%;height:auto;display:block}
.kaartblok .bron{font-size:.75rem;color:var(--schist);margin:.5rem .4rem 0}
.kaartblok svg a text{text-decoration:underline}
.kaartblok svg .plaats circle{fill:var(--etiket-licht);stroke:var(--robijn);stroke-width:3}
.kaartblok svg .plaats.focus circle{fill:var(--robijn);stroke:var(--goud);stroke-width:4}
.kaartblok svg .plaats text{font-family:var(--serif);font-weight:700;font-size:15px;fill:var(--vintage)}
.kaartblok svg .plaats.klein text{font-size:13px;font-weight:500;fill:var(--schist)}
.kaartblok svg .plaats.klein circle{stroke:var(--schist);stroke-width:2}

/* ---------- zoetheidsmeter / stijlenrek / seizoen ---------- */
.zoet{margin:2rem 0;background:var(--etiket-licht);border-radius:18px;padding:1.2rem;box-shadow:var(--schaduw)}
.zoet h3{margin-top:0}
.zoet ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.zoet li{padding:.8rem .4rem;text-align:center;font-size:.8rem;line-height:1.3;color:#fff;border-radius:6px}
.zoet li b{display:block;font-family:var(--serif);font-size:.98rem}
.zoet li:nth-child(1){background:#B88A3A;color:var(--inkt)}
.zoet li:nth-child(2){background:#9C6A2A}
.zoet li:nth-child(3){background:#7E4A22}
.zoet li:nth-child(4){background:#6B1526}
.zoet li:nth-child(5){background:#3A0B14}
@media (max-width:560px){.zoet ol{grid-template-columns:1fr}.zoet li{display:flex;justify-content:space-between;text-align:left}}
.stijlen{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:1.6rem 0}
.stijl{border-radius:16px;padding:1rem;color:#fff;box-shadow:var(--schaduw)}
.stijl h4{color:inherit;margin:0 0 .3rem;font-size:1.15rem}
.stijl p{font-size:.88rem;margin:0;line-height:1.45}
.stijl.ruby{background:linear-gradient(135deg,#7a1428,#4a0a16)}
.stijl.tawny{background:linear-gradient(135deg,#9a5a2a,#6a3818)}
.stijl.white{background:linear-gradient(135deg,#e7d39a,#c8a95a);color:var(--inkt)}
.stijl.doc{background:linear-gradient(135deg,#4a1a2a,#241016)}
.seizoen{margin:2rem 0;overflow-x:auto}
.seizoen table{border-collapse:separate;border-spacing:3px;min-width:720px;width:100%;font-size:.8rem}
.seizoen th{font-family:var(--serif);font-variant:small-caps;text-transform:lowercase;color:var(--schist);font-weight:600;padding:.2rem}
.seizoen td{height:34px;border-radius:5px;background:var(--etiket-oud);padding:0 .4rem;white-space:nowrap;color:#fff;font-weight:600}
.seizoen th[scope=row]{text-align:left;white-space:nowrap;color:var(--inkt);font-family:var(--sans);font-variant:normal;text-transform:none;font-size:.85rem}
.seizoen td.a{background:var(--robijn)}
.seizoen td.b{background:var(--rank)}
.seizoen td.c{background:var(--rivier)}
.seizoen td.d{background:#9C6A2A}

/* ---------- waarschuwing / notitie ---------- */
.let-op{background:#F2E1D3;border:1.5px solid var(--robijn);border-radius:16px;padding:1rem 1.15rem;margin:1.6rem 0}
.let-op strong:first-child{color:var(--robijn)}
.proef{font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.55;background:var(--etiket-oud);border-radius:18px;padding:1.2rem 1.4rem;margin:1.8rem 0;color:var(--vintage)}
.proef::before{content:"proefnotitie";display:block;font-style:normal;font-variant:small-caps;letter-spacing:.14em;font-size:.82rem;color:var(--robijn);margin-bottom:.3rem}

/* ---------- FAQ ---------- */
.faq{margin:2.5rem 0}
.faq details{background:var(--etiket-licht);border-radius:14px;margin:.6rem 0;box-shadow:inset 0 0 0 1px rgba(196,154,108,.7)}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;min-height:48px;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--robijn)}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 1.1rem .9rem}

/* ---------- home ---------- */
.home-pilaren{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:1180px;margin:2rem auto}
.tips{counter-reset:tip;list-style:none;padding:0;margin:1.5rem 0}
.tips>li{counter-increment:tip;position:relative;padding:0 0 0 3.6rem;margin:0 0 1.4rem}
.tips>li::before{content:counter(tip);position:absolute;left:0;top:-.1rem;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:var(--robijn);color:var(--etiket-licht);font-family:var(--serif);font-weight:700;font-size:1.2rem}
.tips h3{margin:0 0 .3rem;font-size:1.25rem}

/* ---------- voet ---------- */
.voet{background:var(--vintage);color:#EFE3D2;margin-top:4rem;padding:3rem 1rem 6rem;font-size:.95rem}
.voet-in{max-width:1180px;margin:0 auto;display:grid;gap:2rem}
@media (min-width:860px){.voet-in{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.voet h2{color:var(--goud);font-size:1.05rem;font-variant:small-caps;text-transform:lowercase;letter-spacing:.14em;margin:0 0 .8rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-flex;align-items:center;min-height:40px;color:#EFE3D2;text-decoration:none}
.voet li a:hover{color:var(--goud-licht);text-decoration:underline}
.voet p{color:#E2D3BF}
.voet a{color:var(--goud-licht)}
.voet .klein{font-size:.82rem;color:#D6C5AE;max-width:1180px;margin:2rem auto 0}
.voet .logo-cartel{background:transparent;border-color:var(--goud);color:var(--goud)}
.matig{font-family:var(--serif);font-style:italic;color:var(--goud-licht)}

/* ---------- sticky bar + sheet ---------- */
.sticky{position:fixed;left:.6rem;right:.6rem;bottom:.6rem;z-index:50;display:flex;align-items:center;gap:.6rem;background:var(--vintage);color:var(--etiket);border-radius:18px;padding:.55rem .55rem .55rem 1rem;box-shadow:0 12px 30px -8px rgba(0,0,0,.55);transform:translateY(140%);transition:transform .3s}
.sticky.toon{transform:none}
.sticky p{margin:0;font-size:.88rem;line-height:1.25;flex:1}
.sticky p b{display:block;font-family:var(--serif);font-size:1rem;color:var(--goud-licht)}
.sticky .knop{min-height:44px;padding:.5rem 1rem;font-size:.9rem}
.sticky .sluit,.sheet .sluit{min-width:44px;min-height:44px;border:0;background:transparent;color:inherit;font-size:1.5rem;cursor:pointer;border-radius:50%}
@media (min-width:980px){.sticky{display:none}}
.sheet-bg{position:fixed;inset:0;background:rgba(36,10,14,.5);z-index:60}
.sheet{position:fixed;z-index:61;left:0;right:0;bottom:0;background:var(--etiket);border-radius:24px 24px 0 0;padding:1.3rem 1.2rem 1.6rem;max-height:88vh;overflow:auto;box-shadow:0 -20px 40px -10px rgba(0,0,0,.4)}
@media (min-width:760px){.sheet{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);width:min(560px,92vw);border-radius:24px;outline:1px solid var(--goud);outline-offset:-8px}}
.sheet h2{margin:.2rem 0 .6rem;font-size:1.5rem}
.sheet .kop-rij{display:flex;justify-content:space-between;align-items:start}
.sheet fieldset{border:0;padding:0;margin:0 0 1rem}
.sheet legend{font-weight:600;margin-bottom:.4rem}
.sheet .opties{display:flex;flex-wrap:wrap;gap:.5rem}
.sheet .uitkomst{background:var(--etiket-licht);border-radius:16px;padding:1rem;box-shadow:inset 0 0 0 1px var(--goud)}

/* ---------- 404 / entree ---------- */
.entree{min-height:100vh;display:grid;place-items:center;padding:2rem 1rem}

@media print{.kop,.sticky,.sheet,.voet{display:none}}
.sheet .chip:focus-within{outline:3px solid var(--goud);outline-offset:2px}

@media (max-width:760px){
  .hero{min-height:auto;padding:1.6rem .8rem 2.6rem}
  .etiket{padding:1.5rem 1.05rem 1.3rem;border-radius:18px}
  .etiket h1{font-size:clamp(1.9rem,8.5vw,2.5rem)}
  .etiket .lede{font-size:1rem;line-height:1.5}
  .etiket .bijgewerkt{font-size:.76rem;margin-top:.6rem}
  .hero-credit{font-size:.66rem}
}

/* ---------- revisie 1: asterisk, fotoblok, pop-up met opties, Leaflet, bredere tabellen ---------- */
.ster{font-size:.7em;margin-left:.15em;vertical-align:super;line-height:0}
.ekaart .knop{min-height:52px;font-size:1.02rem}
.fotos-pagina{margin:3.5rem 0 1rem;font-size:.78rem;color:var(--schist);line-height:1.5}
.fotos-pagina h2{font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--schist);margin:0 0 .4rem;letter-spacing:.02em}
.fotos-pagina ul{margin:0;padding-left:1.1rem}
.fotos-pagina a{color:var(--schist)}
.sheet h2{font-size:clamp(1.4rem,5vw,1.8rem);margin:.2rem 2.4rem .4rem 0}
.sheet .sluit{position:absolute;right:.6rem;top:.6rem;color:var(--inkt)}
.pop-lede{margin:0 0 1rem;color:var(--inkt)}
.pop-opties{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.pop-optie{display:grid;grid-template-columns:88px 1fr;gap:.4rem .9rem;align-items:center;background:var(--etiket-licht);border-radius:16px;padding:.7rem;box-shadow:inset 0 0 0 1px rgba(196,154,108,.7)}
.pop-optie img{width:88px;height:88px;object-fit:cover;border-radius:12px}
.pop-naam{margin:0;font-weight:600;line-height:1.3;color:var(--vintage);font-size:.98rem}
.pop-prijs{margin:.2rem 0 0;font-family:var(--serif);font-weight:900;color:var(--robijn);font-size:1.15rem}
.pop-optie .knop{grid-column:1/-1;width:100%;min-height:50px}
.pop-meer{text-align:center;margin:1rem 0 0;font-size:.92rem}
.sheet{padding-top:1.4rem}
.lkaart{position:relative;height:460px;border-radius:16px;overflow:hidden;background:#E6E0D4}
@media (max-width:760px){.lkaart{height:380px}}
.lkaart-nojs{padding:1rem;margin:0;color:var(--schist)}
.lkaart-hint{position:absolute;z-index:1000;left:50%;bottom:14px;transform:translateX(-50%);min-height:44px;padding:.5rem 1.1rem;border:0;border-radius:999px;background:rgba(58,11,20,.88);color:#fff;font:600 .9rem var(--sans);cursor:pointer;white-space:nowrap}
.lkaart-label{background:rgba(251,247,239,.92);border:1px solid rgba(107,21,38,.35);box-shadow:none;color:var(--vintage);font:700 13px var(--sans);padding:1px 6px}
.lkaart-label::before{display:none}
.kaartlijst{list-style:none;margin:.9rem .2rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .6rem}
.kaartlijst a{display:inline-flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:999px;background:var(--etiket-oud);text-decoration:none;font-weight:600;font-size:.9rem}
.kaartblok{padding:.8rem}
@media (min-width:1000px){.tekst .tabel-wrap{width:min(1000px,calc(100vw - 4rem));margin-left:50%;transform:translateX(-50%)}}
.vtabel a.knop{min-height:48px}
/* knoppen mogen afbreken op smalle schermen */
.knop{white-space:normal;max-width:100%;text-align:center;overflow-wrap:anywhere}
.cta-tekst .knop{flex:1 1 auto}
@media (max-width:560px){.cta-tekst .knop{width:100%}}

/* pop-up: één aanbod */
.sheet.pop-een{padding:0;overflow:hidden auto}
@media (min-width:760px){.sheet.pop-een{width:min(520px,92vw)}}
.pop-beeld{position:relative}
.pop-beeld img{width:100%;height:clamp(180px,32vh,260px);object-fit:cover;display:block}
.pop-een .sluit{position:absolute;right:.6rem;top:.6rem;background:rgba(251,247,239,.92);color:var(--inkt);font-size:1.6rem;line-height:1}
.pop-body{padding:1.1rem 1.25rem 1.3rem;text-align:center}
.pop-een h2{margin:.1rem 0 .4rem}
.pop-een .pop-lede{margin:0 0 .7rem}
.pop-prijsregel{margin:0 0 .9rem;color:var(--schist);font-size:.92rem}
.pop-prijsregel .pop-prijs{font-family:var(--serif);font-weight:900;font-size:1.5rem;color:var(--robijn);margin-right:.3rem}
.pop-knop{display:flex;width:100%;min-height:58px;font-size:1.1rem}
.pop-een .pop-meer{margin:.8rem 0 0;font-size:.9rem}
/* taalkeuze */
.talen{display:flex;gap:.3rem;margin-left:.6rem}
.talen .taal{margin-left:0;text-decoration:none;min-height:40px;min-width:40px;justify-content:center}
.talen .taal[aria-current]{background:var(--robijn);border-color:var(--robijn);color:var(--etiket-licht)}
@media (max-width:420px){.logo-cartel{padding:.25rem .5rem}.talen .taal{min-width:36px;padding:.3rem .5rem}}
/* drie talen in de kop op smalle schermen */
@media (max-width:520px){
  .kop-in{gap:.45rem;padding:.5rem .75rem}
  .menu>summary{padding:0 .75rem;font-size:.9rem}
  .talen{gap:.2rem;margin-left:.2rem}
  .talen .taal{min-width:34px;min-height:36px;padding:.2rem .35rem;font-size:.74rem}
  .logo-cartel b{font-size:.92rem;letter-spacing:.16em}
  .logo-cartel span{font-size:.6rem;letter-spacing:.34em}
}