/* Dam Dranken – website (oktober 2026)
   Richting "Zeekaart en kelderboek": grote foto's van zee, wad en vaten; etiketten als helden;
   Caslon voor koppen en verhalen, Franklin voor bediening, stencilcijfers alleen voor vatgegevens.
   Eén vaste huisstijl (geen licht/donker-wissel): donkere zeevlakken wisselen af met wadgrijs.
   Lijnen altijd 1 px, nergens verdikte randen of gekleurde zijstrepen. */

/* Lettertypen staan op de eigen server (fonts/, latin, SIL OFL): geen verbinding met Google nodig. */
@font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/libre-franklin-latin-wght-normal.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: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-text-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/libre-caslon-text-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Libre Caslon Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/libre-caslon-display-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/big-shoulders-stencil-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/big-shoulders-stencil-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Big Shoulders Stencil'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/big-shoulders-stencil-latin-700-normal.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --zee: #10212c;      /* diepe zee, donkere vlakken */
  --zee-2: #172f3e;    /* verhoogd op zee */
  --zee-lijn: #2b4554; /* haarlijn op zee */
  --wad: #e8eae4;      /* wadgrijs, lichte grond */
  --wad-2: #f3f4f0;    /* licht vlak */
  --wad-3: #dcdfd6;    /* plank onder etiketten */
  --lijn: #c9cec4;     /* haarlijn op wad */
  --inkt: #15212a;     /* tekst op licht */
  --inkt-2: #46525b;
  --inkt-3: #5f6a72;
  --schuim: #eef1ec;   /* tekst op zee */
  --schuim-2: #b3bfc4;
  --amber: #d98a2b;    /* actie op zee, whiskykleur */
  --amber-inkt: #8f520e; /* actie en links op licht */
  --kraft: #a38d6c;
  --rood: #be1e2d;     /* alleen het logo */
  --ok: #2f7a4e; --let: #a25c08; --uit: #8a8f93;

  --f-display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --f-tekst: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --f-ui: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --f-stencil: 'Big Shoulders Stencil', 'Libre Franklin', 'Arial Narrow', sans-serif;

  --maat: 1240px;
  --goot: clamp(16px, 4vw, 48px);
  --r: 2px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wad); color: var(--inkt); font: 16px/1.6 var(--f-ui); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-inkt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--inkt); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
.wrap { max-width: var(--maat); margin: 0 auto; padding-inline: var(--goot); }
.tekst { font-family: var(--f-tekst); font-size: 18px; line-height: 1.72; max-width: 62ch; }
.tekst p { margin: 0 0 1em; }
.klein { font-size: 13.5px; color: var(--inkt-3); }
.num { font-variant-numeric: tabular-nums; }
.stencil { font-family: var(--f-stencil); font-weight: 600; letter-spacing: .02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Kop ---------- */
.kop { position: relative; z-index: 20; color: var(--schuim); background: var(--zee); }
.kop.over { position: absolute; inset: 0 0 auto 0; background: transparent; }
.kop .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.logo { display: block; width: 92px; color: #fff; flex: none; }
.logo svg { width: 100%; height: auto; display: block; overflow: visible; }
/* Het logo blijft wit: de algemene a:hover (inktkleur) maakte het onzichtbaar op de donkere kop */
a.logo { transition: opacity .15s; }
a.logo:hover, a.logo:focus-visible { color: #fff; opacity: .82; }
@media (prefers-reduced-motion: reduce) { a.logo { transition: none; } }
.nav { display: flex; gap: 4px 26px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a.on { border-bottom-color: currentColor; }
.kop-zoek { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: inherit; background: none; cursor: pointer; flex: none; }
.kop-menu { display: none; }
.kop svg.i { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .nav { display: none; }
  .kop-menu { display: grid; margin-left: auto; width: 44px; height: 44px; place-items: center; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: inherit; }
  .kop .wrap { min-height: 68px; gap: 12px; }
  .logo { width: 74px; }
}

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r); font: 600 15px/1 var(--f-ui); text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.knop.vol { background: var(--amber); color: #1a1206; }
.knop.vol:hover { background: #e79a3d; color: #1a1206; }
.knop.lijn { border-color: currentColor; color: inherit; background: transparent; }
.knop.lijn:hover { background: rgba(255,255,255,.08); }
.op-licht .knop.vol { background: var(--inkt); color: var(--wad-2); }
.op-licht .knop.vol:hover { background: #24333f; color: var(--wad-2); }
.verder { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; color: var(--amber-inkt); }
.op-zee .verder { color: var(--amber); }

/* ---------- Held ---------- */
.held { position: relative; color: #fff; background: var(--zee); overflow: hidden; }
.held > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,30,.55) 0, rgba(10,22,30,0) 26%, rgba(10,22,30,0) 48%, rgba(10,22,30,.78) 100%); }
.held .wrap { position: relative; z-index: 2; min-height: clamp(560px, 82vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 140px 56px; }
.held h1 { font-size: clamp(52px, 8.4vw, 116px); line-height: .95; max-width: 11ch; }
.held p.lead { font-family: var(--f-tekst); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; max-width: 46ch; margin: 22px 0 30px; color: #e9efee; }
.held .acties { display: flex; flex-wrap: wrap; gap: 12px; }
.bijschrift { position: absolute; right: var(--goot); bottom: 22px; z-index: 2; font-size: 12.5px; color: rgba(255,255,255,.78); max-width: 34ch; text-align: right; }
@media (max-width: 700px) { .bijschrift { display: none; } .held .wrap { padding-block: 120px 40px; } }

/* paginakop met foto (lager) */
.paginakop { position: relative; color: #fff; background: var(--zee); overflow: hidden; }
.paginakop > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.paginakop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,30,.78) 0, rgba(10,22,30,.42) 52%, rgba(10,22,30,.08) 100%); }
.paginakop .wrap { position: relative; z-index: 2; padding-block: 72px 56px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }
.paginakop h1 { font-size: clamp(44px, 6vw, 84px); }
.paginakop p { font-family: var(--f-tekst); font-size: 18px; max-width: 54ch; margin: 16px 0 0; color: #e6ecea; }
.kruimel { font-size: 13.5px; color: var(--inkt-3); display: flex; gap: 8px; flex-wrap: wrap; padding-block: 18px; }
.kruimel a { color: inherit; }

/* ---------- Secties ---------- */
.sectie { padding-block: clamp(64px, 9vw, 120px); }
.sectie.zee { background: var(--zee); color: var(--schuim); }
.sectie.licht { background: var(--wad-2); }
.sectie-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 40px; margin-bottom: 40px; }
.sectie-kop h2 { font-size: clamp(36px, 4.6vw, 60px); max-width: 16ch; }
.sectie-kop p { font-family: var(--f-tekst); font-size: 17px; max-width: 44ch; margin: 0; color: var(--inkt-2); }
.zee .sectie-kop p { color: var(--schuim-2); }

/* ---------- Merkenmozaïek ---------- */
.mozaiek { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 10px; }
.merk { position: relative; overflow: hidden; color: #fff; text-decoration: none; border-radius: var(--r); background: var(--zee); }
.merk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.merk:hover img { transform: scale(1.03); }
.merk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,22,0) 45%, rgba(8,16,22,.72) 100%); }
.merk .t { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.merk h3 { font-size: 30px; }
.merk span { display: block; font-size: 14px; color: rgba(255,255,255,.85); margin-top: 4px; }
.m-a { grid-column: span 6; grid-row: span 2; } .m-a h3 { font-size: 44px; }
.m-b { grid-column: span 6; } .m-c { grid-column: span 3; } .m-d { grid-column: span 3; }
.m-e { grid-column: span 4; } .m-f { grid-column: span 4; } .m-g { grid-column: span 4; }
@media (max-width: 900px) { .mozaiek { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } .mozaiek > * { grid-column: span 1 !important; grid-row: span 1 !important; } .m-a { grid-column: span 2 !important; grid-row: span 2 !important; } }

/* ---------- Productkaart ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 36px 20px; }
.fles { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.plank { position: relative; aspect-ratio: 4 / 5; background: var(--wad-3); border-radius: var(--r); display: grid; place-items: center; padding: 22px; overflow: hidden; }
.plank img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; filter: drop-shadow(0 10px 14px rgba(20,30,36,.22)) drop-shadow(0 1px 1px rgba(20,30,36,.18)); transition: transform .35s ease; }
.fles:hover .plank img { transform: translateY(-4px); }
.fles .st { position: absolute; left: 12px; top: 12px; z-index: 2; }
.fles h3 { font-size: 22px; line-height: 1.1; }
.fles .ed { font-size: 14.5px; color: var(--inkt-2); margin-top: -6px; }
.fles .spec { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--inkt-3); border-top: 1px solid var(--lijn); padding-top: 10px; }
.fles .spec b { font: 600 17px/1 var(--f-stencil); color: var(--inkt); letter-spacing: .02em; }
.zee .plank { background: var(--zee-2); }
.zee .fles .ed, .zee .fles .spec { color: var(--schuim-2); }
.zee .fles .spec { border-top-color: var(--zee-lijn); }
.zee .fles .spec b { color: var(--schuim); }

/* status: stip met woord */
.st { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--f-ui); padding: 6px 10px; border-radius: 999px; background: rgba(243,244,240,.92); color: var(--inkt); }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ok)); }
.st.nieuw { --c: var(--amber); } .st.verkrijgbaar { --c: var(--ok); } .st.beperkt { --c: var(--let); } .st.uitverkocht { --c: var(--uit); color: var(--inkt-2); } .st.prive { --c: #6b5b8a; }

/* ---------- Vatkaart ---------- */
.vatkaart { border-top: 1px solid var(--lijn); }
.vatkaart div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lijn); align-items: baseline; }
.vatkaart dt { font-size: 13.5px; color: var(--inkt-3); }
.vatkaart dd { margin: 0; font-size: 15.5px; }
.vatkaart dd.stencil { font-size: 24px; line-height: 1; }
.zee .vatkaart, .zee .vatkaart div { border-color: var(--zee-lijn); }
.zee .vatkaart dt { color: var(--schuim-2); }

/* ---------- Zeekaart ---------- */
.kaart { position: relative; background: #0d1c26; border: 1px solid var(--zee-lijn); border-radius: var(--r); }
.kaart svg { display: block; width: 100%; height: auto; }
.kaart .legenda { font-size: 12.5px; color: var(--schuim-2); padding: 10px 14px; border-top: 1px solid var(--zee-lijn); }

/* ---------- Cijfers in stencil ---------- */
.cijfers { display: flex; flex-wrap: wrap; gap: 28px 48px; margin: 32px 0; }
.cijfers div { display: flex; flex-direction: column; gap: 4px; }
.cijfers b { font: 600 52px/1 var(--f-stencil); color: var(--amber); letter-spacing: .01em; }
.cijfers span { font-size: 14px; color: var(--schuim-2); }

/* ---------- Eilandlijn ---------- */
.eiland { padding: 34px 0 0; }
.eiland .lijn { height: 1px; background: var(--inkt-3); position: relative; margin: 0 6px 52px; }
.eiland .dorp { position: absolute; top: 0; transform: translateX(-50%); font-size: 13px; color: var(--inkt-2); white-space: nowrap; padding-top: 16px; }
.eiland .dorp::before { content: ''; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -5px; border-radius: 50%; background: var(--wad); border: 1px solid var(--inkt-2); }
.eiland .dorp.heeft::before { background: var(--inkt); border-color: var(--inkt); }
.eiland .dorp b { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font: 600 12px/1 var(--f-ui); background: var(--inkt); color: var(--wad-2); border-radius: 999px; min-width: 22px; padding: 5px 6px; text-align: center; }
.eiland .punten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; border-top: 1px solid var(--lijn); padding-top: 16px; }
.eiland .punten h4 { font: 600 13.5px/1.3 var(--f-ui); margin: 0 0 6px; }
.eiland .punten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14.5px; color: var(--inkt-2); }
.eiland .punten li span { display: block; font-size: 12.5px; color: var(--inkt-3); }
.zee .eiland .lijn { background: var(--schuim-2); }
/* ---------- Voet ---------- */
.voet { background: var(--zee); color: var(--schuim-2); font-size: 14.5px; }
.voet .wrap { padding-block: 64px 28px; }
.voet-raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.voet h4 { font: 600 13px/1.2 var(--f-ui); color: var(--schuim); margin: 0 0 14px; letter-spacing: .02em; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voet a { color: var(--schuim-2); text-decoration: none; }
.voet a:hover { color: #fff; }
.voet .logo { width: 110px; margin-bottom: 18px; }
.voet-onder { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; border-top: 1px solid var(--zee-lijn); margin-top: 48px; padding-top: 22px; font-size: 13px; }
.nix { display: inline-flex; align-items: center; gap: 10px; color: var(--schuim); }
.nix b { font: 700 13px/1 var(--f-ui); border: 1px solid currentColor; border-radius: var(--r); padding: 5px 6px; }
@media (max-width: 800px) { .voet-raster { grid-template-columns: 1fr 1fr; } .voet-raster > :first-child { grid-column: 1 / -1; } }

/* ---------- Filters ---------- */
.filterbalk { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(232,234,228,.96); border-bottom: 1px solid var(--lijn); backdrop-filter: saturate(1.2); }
.filterbalk .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 12px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { border: 1px solid transparent; background: none; padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--inkt-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; min-height: 38px; }
.tab:hover { color: var(--inkt); }
.tab.on { border-color: var(--inkt); color: var(--inkt); }
.tab small { font-size: 12px; color: var(--inkt-3); font-variant-numeric: tabular-nums; }
.veld { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--lijn); background: var(--wad-2); border-radius: var(--r); min-height: 40px; padding: 0 12px; font-size: 14.5px; color: var(--inkt-2); }
.veld input, .veld select { border: 0; background: transparent; outline: none; min-width: 0; color: var(--inkt); }
.veld svg.i { width: 16px; height: 16px; color: var(--inkt-3); }
.schakel { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--inkt-2); cursor: pointer; }
.schakel input { appearance: none; width: 36px; height: 22px; border-radius: 999px; background: var(--lijn); position: relative; cursor: pointer; margin: 0; }
.schakel input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.schakel input:checked { background: var(--inkt); }
.schakel input:checked::after { left: 17px; }
.groep-kop { display: flex; align-items: baseline; gap: 12px; margin: 56px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.groep-kop h2 { font-size: 40px; }
.groep-kop span { color: var(--inkt-3); font-size: 14.5px; }

/* ---------- Leeftijdscheck ---------- */
.poort { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8,16,22,.62); backdrop-filter: blur(6px); }
.poort-kaart { width: min(100%, 460px); background: var(--zee); color: var(--schuim); border: 1px solid var(--zee-lijn); border-radius: 4px; padding: 40px 36px 30px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.poort-kaart .logo { width: 118px; margin: 0 auto 26px; }
.poort-kaart h2 { font-size: 40px; }
.poort-kaart p { color: var(--schuim-2); margin: 12px 0 26px; }
.poort-kaart .acties { display: grid; gap: 10px; }
.poort-kaart .knop { justify-content: center; }

/* ---------- Diversen ---------- */
.foto-bijschrift { font-size: 13px; color: var(--inkt-3); margin-top: 10px; max-width: 70ch; }
.zee .foto-bijschrift { color: var(--schuim-2); }
.citaat { font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; text-wrap: balance; margin: 0; }
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .twee { grid-template-columns: 1fr; } }
.lijst-reset { list-style: none; margin: 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--lijn); color: var(--inkt-2); background: var(--wad-2); }
.chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Telefoon ---------- */
@media (max-width: 700px) {
  .filterbalk .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .filterbalk .tab { white-space: nowrap; }
  .filterbalk .veld { flex: 1 1 100%; margin-left: 0 !important; }
  .filterbalk .veld input { width: 100%; }
  .sectie-kop { margin-bottom: 28px; }
  .groep-kop { margin-top: 40px; } .groep-kop h2 { font-size: 32px; }
}
@media (max-width: 560px) {
  .raster { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .fles h3 { font-size: 18px; } .fles .ed { font-size: 13.5px; }
  .plank { padding: 14px; } .plank img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
  .fles .st { left: 8px; top: 8px; font-size: 11.5px; padding: 5px 8px; }
  .fles .spec { font-size: 12.5px; gap: 2px 10px; }
  .fles .spec b { font-size: 15px; }
  .held h1 { font-size: 50px; }
}

.poort .schakel input { background: var(--zee-lijn); }
.poort .schakel input:checked { background: var(--amber); }

/* =====================================================================
   Onderdelen die de echte site toevoegt aan de schetsen
   ===================================================================== */

/* Naar de inhoud */
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; background: var(--amber); color: #1a1206; padding: 10px 16px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }

/* Kop: menu op telefoon */
.kop-menu, .kop-zoek { cursor: pointer; }
@media (max-width: 900px) {
  .kop.menu-open { background: var(--zee); }
  .kop.menu-open .nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 4px var(--goot) 22px; background: var(--zee); border-bottom: 1px solid var(--zee-lijn); }
  .kop.menu-open .nav a { font: 400 26px/1.2 var(--f-display); padding: 12px 0; border-bottom: 1px solid var(--zee-lijn); }
  .kop.menu-open .nav a.on { color: var(--amber); }
  .kop-zoek { margin-left: auto; }
  .kop-menu { margin-left: 0; }
}

/* Zoekpaneel: ligt over de kop */
.zoekpaneel { position: fixed; inset: 0 0 auto 0; z-index: 40; background: var(--zee); color: var(--schuim); border-bottom: 1px solid var(--zee-lijn); padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.zoekpaneel form { display: flex; align-items: center; gap: 10px; min-height: 84px; }
.zoekpaneel input { flex: 1 1 auto; min-width: 0; min-height: 48px; background: var(--zee-2); border: 1px solid var(--zee-lijn); border-radius: var(--r); padding: 0 16px; color: var(--schuim); font-size: 17px; }
.zoekpaneel input::placeholder { color: var(--schuim-2); }
.zoekpaneel input:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }
.zoek-sluit { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--zee-lijn); border-radius: 50%; color: inherit; cursor: pointer; flex: none; }
@media (max-width: 560px) { .zoekpaneel .knop { padding: 0 14px; } .zoekpaneel form { min-height: 68px; } }

/* Eilandlijn op smalle schermen: namen om en om hoger en lager */
@media (max-width: 640px) {
  .eiland .lijn { margin-bottom: 76px; }
  .eiland .dorp { font-size: 12px; }
  .eiland .dorp:nth-child(even) { padding-top: 36px; }
}

/* Leeftijdscheck */
body:has(.poort:not(.statisch)) { overflow: hidden; }
.poort h2, .poort h1 { font-size: 40px; }
.poort.statisch { position: static; min-height: 72vh; background: var(--zee); backdrop-filter: none; padding-block: 64px; }
.poort .nix { color: var(--schuim-2); }

/* Tekstpagina's: privacy, cookies */
.tekstpagina { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 120px); }
.tekstpagina h1 { font-size: clamp(44px, 6vw, 76px); margin-bottom: 28px; }
.tekstpagina .tekst h3 { font: 400 28px/1.15 var(--f-display); margin: 1.6em 0 .4em; }
.tekstpagina .tekst ul { padding-left: 1.2em; margin: 0 0 1em; }
.tekstpagina .tekst li { margin-bottom: .4em; }
.tekstpagina .bijgewerkt { margin-top: 40px; }
.tekst h3, .tekst h4 { font-family: var(--f-display); font-weight: 400; }
.tekst ul, .tekst ol { padding-left: 1.2em; }
.tekst blockquote { font-family: var(--f-display); font-size: 1.4em; line-height: 1.25; margin: 1em 0; }

/* Niet gevonden */
.nietgevonden { position: relative; background: var(--zee); color: var(--schuim); overflow: hidden; }
.nietgevonden > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.nietgevonden::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,30,.86) 0, rgba(10,22,30,.5) 60%, rgba(10,22,30,.2) 100%); }
.nietgevonden .wrap { position: relative; z-index: 2; min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 96px; }
.nietgevonden .code { font: 600 clamp(72px, 12vw, 140px)/.9 var(--f-stencil); color: var(--amber); margin: 0 0 18px; letter-spacing: .02em; }
.nietgevonden h1 { font-size: clamp(40px, 6vw, 76px); max-width: 15ch; }
.nietgevonden .lead { font-family: var(--f-tekst); font-size: 18px; max-width: 50ch; color: var(--schuim-2); margin: 18px 0 30px; }
.zoek-groot { display: flex; gap: 10px; max-width: 620px; }
.zoek-groot input { flex: 1 1 auto; min-width: 0; min-height: 48px; background: var(--zee-2); border: 1px solid var(--zee-lijn); border-radius: var(--r); padding: 0 16px; color: var(--schuim); }
.zoek-groot input::placeholder { color: var(--schuim-2); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; }
.nf-links a { color: var(--schuim); font-weight: 500; }
.nf-links a:hover { color: var(--amber); }

/* Smalle tekstkolom in blokken */
.wrap.smal { max-width: calc(780px + 2 * var(--goot)); }
.blok-titel { font-size: clamp(32px, 4vw, 50px); margin-bottom: 22px; }

/* =====================================================================
   Home
   ===================================================================== */
.zee-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.zee-feature h2 { font-size: clamp(40px, 5vw, 68px); }
.zee-feature .tekst { color: var(--schuim-2); font-size: 17.5px; margin-top: 22px; }
@media (max-width: 960px) { .zee-feature { grid-template-columns: 1fr; } }
.verhaal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.verhaal figure { margin: 0; }
.verhaal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); border-radius: var(--r); }
@media (max-width: 860px) { .verhaal { grid-template-columns: 1fr; } }
.rij4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .rij4 { grid-template-columns: 1fr 1fr; gap: 32px 16px; } }
.koop { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); }
.koop h2 { font-size: clamp(36px, 4.4vw, 56px); }
.elders { columns: 2; column-gap: 32px; font-size: 15px; color: var(--inkt-2); margin-top: 8px; }
.elders li { break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 12px; }
.elders li span:last-child { color: var(--inkt-3); text-align: right; }
@media (max-width: 860px) { .koop { grid-template-columns: 1fr; } .elders { columns: 1; } }

/* =====================================================================
   Assortiment
   ===================================================================== */
.pagina-assortiment .paginakop > img { object-position: 50% 62%; opacity: .7; }
.geen { padding: 48px 0; color: var(--inkt-2); font-family: var(--f-tekst); font-size: 18px; }
.uitleg { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--inkt-2); background: var(--wad-2); border: 1px solid var(--lijn); border-radius: var(--r); padding: 14px 18px; margin-top: 28px; max-width: 760px; }
.uitleg svg { margin-top: 2px; color: var(--inkt); }
.filterbalk .veld select { padding-right: 4px; cursor: pointer; }
.tab { text-decoration: none; }

/* =====================================================================
   Fles
   ===================================================================== */
.product { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-bottom: 96px; }
.product .plank { aspect-ratio: 5 / 6; padding: 48px; }
.product .plank img { inset: 48px; width: calc(100% - 96px); height: calc(100% - 96px); }
.product .plank img.vol { inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.wissel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wissel button { border: 1px solid var(--lijn); background: var(--wad-2); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; color: var(--inkt-2); }
.wissel button.on { border-color: var(--inkt); color: var(--inkt); }
.fles-foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.fles-foto.tekening { object-fit: contain; background: #fff; padding: clamp(14px, 2.4vw, 32px); }
.info .merkje { font-size: 14px; font-weight: 600; color: var(--amber-inkt); text-decoration: none; }
.info .merkje:hover { text-decoration: underline; }
.info h1 { font-size: clamp(42px, 4.8vw, 64px); margin-top: 10px; }
.info .ed { font-family: var(--f-tekst); font-size: 22px; color: var(--inkt-2); margin: 8px 0 18px; }
.info .tekst { font-size: 17px; margin: 22px 0 30px; }
.proefkaart { margin-top: 28px !important; }
.proefkaart dd { font-family: var(--f-tekst); font-size: 16px; line-height: 1.6; }
.koopblok { margin-top: 36px; background: var(--wad-2); border: 1px solid var(--lijn); border-radius: var(--r); }
.koopblok h2 { font-size: 28px; padding: 20px 22px 4px; }
.koopblok > p { margin: 0; padding: 0 22px 14px; font-size: 14.5px; color: var(--inkt-2); }
.koopblok ul { list-style: none; margin: 0; padding: 0; }
.koopblok li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 22px; border-top: 1px solid var(--lijn); }
.koopblok li b { display: block; font-weight: 600; font-size: 15px; }
.koopblok li span { font-size: 13.5px; color: var(--inkt-3); }
.koopblok li a { font-size: 13.5px; font-weight: 600; }
.koopblok .alle { display: block; padding: 14px 22px; border-top: 1px solid var(--lijn); font-weight: 600; font-size: 14.5px; }
.reis { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.reis ol { margin: 0; padding: 0; list-style: none; counter-reset: h; border-top: 1px solid var(--zee-lijn); }
.reis li { counter-increment: h; display: grid; grid-template-columns: 34px 1fr; padding: 9px 0; border-bottom: 1px solid var(--zee-lijn); font-size: 15px; }
.reis li::before { content: counter(h, decimal-leading-zero); font: 600 16px/1.4 var(--f-stencil); color: var(--amber); }
.reis-kort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--f-tekst); font-size: 18px; color: var(--schuim-2); margin: 0; }
.reis-kort svg { color: var(--amber); }
@media (max-width: 900px) { .product, .reis { grid-template-columns: 1fr; } .product .plank { padding: 28px; } .product .plank img { inset: 28px; width: calc(100% - 56px); height: calc(100% - 56px); } }

/* Op het etiket: het verhaal van de zijflappen, letterlijk. Een korte eerste alinea als aanloop in de displayletter. */
.ev { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(28px, 6vw, 96px); align-items: start; }
.ev-kop h2 { font-size: clamp(36px, 4.6vw, 60px); }
.ev-kop > p { font-family: var(--f-tekst); font-size: 17px; color: var(--inkt-2); max-width: 30ch; margin: 14px 0 0; }
.ev-beeld { display: block; width: 100%; max-width: 340px; margin-top: 32px; padding: 14px; background: var(--wad-3); border: 0; border-radius: var(--r); cursor: zoom-in; text-align: left; font: 500 14px/1.3 var(--f-ui); color: var(--inkt-2); }
.ev-beeld img { display: block; width: 100%; height: auto; }
.ev-beeld span { display: block; margin-top: 12px; }
.ev-beeld:hover span { color: var(--amber-inkt); text-decoration: underline; }
.ev-beeld:focus-visible { outline: 2px solid var(--amber-inkt); outline-offset: 3px; }
.ev-tekst { font-family: var(--f-tekst); font-size: 18px; line-height: 1.75; max-width: 62ch; min-width: 0; hyphens: manual; }
.ev-tekst p { margin: 0 0 1em; }
.ev-tekst p.aanloop { font-family: var(--f-display); font-size: clamp(22px, 2.3vw, 28px); line-height: 1.36; margin-bottom: .85em; text-wrap: pretty; }
@media (min-width: 901px) { .ev-kop { position: sticky; top: 32px; } }
.ev-taal { margin-top: 20px; }
.ev-blok + .ev-blok { margin-top: 2.4em; }
.ev-label { font: 600 13.5px/1.4 var(--f-ui); color: var(--inkt-3); margin: 0 0 1em !important; }
.met-taalwissel .ev-label { display: none; }
.met-taalwissel .ev-blok + .ev-blok { margin-top: 0; }
.ev-tekst p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .ev { grid-template-columns: 1fr; } .ev-beeld { max-width: 280px; margin-top: 24px; } }

/* =====================================================================
   Merken (overzicht)
   ===================================================================== */
.merkenlijst { padding-block: 24px 96px; }
.merkrij { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 3.4fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding-block: 40px; border-bottom: 1px solid var(--lijn); }
.merkrij-foto { display: block; border-radius: var(--r); overflow: hidden; background: var(--zee); }
.merkrij-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.merkrij-foto:hover img { transform: scale(1.03); }
.merkrij-tekst .regel { font: 600 16px/1 var(--f-stencil); letter-spacing: .06em; color: var(--amber-inkt); margin: 0 0 12px; }
.merkrij-tekst h2 { font-size: clamp(34px, 3.6vw, 50px); }
.merkrij-tekst h2 a { color: inherit; text-decoration: none; }
.merkrij-tekst h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.merkrij-tekst > p { font-family: var(--f-tekst); font-size: 16.5px; color: var(--inkt-2); margin: 12px 0; max-width: 52ch; }
.merkrij-tekst .klein { font-family: var(--f-ui); font-size: 13.5px; color: var(--inkt-3); margin-bottom: 18px; }
.merkrij-etiketten { display: flex; justify-content: center; align-items: center; background: var(--wad-3); border-radius: var(--r); padding: 22px 14px; aspect-ratio: 1 / 1; overflow: hidden; }
.merkrij-etiketten img { flex: 0 1 auto; min-width: 0; height: 72%; width: auto; max-width: 62%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(20,30,36,.22)); }
.merkrij-etiketten img:only-child { max-width: 92%; height: 64%; }
.merkrij-etiketten img + img { margin-left: -14%; }
.merkrij-etiketten img:nth-child(2) { transform: translateY(-14px); z-index: 1; }
@media (max-width: 900px) { .merkrij { grid-template-columns: 1fr; padding-block: 32px; } .merkrij-etiketten { display: none; } }

/* =====================================================================
   Merkpagina
   ===================================================================== */
.pagina-merk .held > img { object-position: 50% 58%; }
.pagina-merk .held .wrap { min-height: clamp(520px, 74vh, 760px); }
.held .regel { font: 600 22px/1 var(--f-stencil); letter-spacing: .06em; color: var(--amber); margin-bottom: 16px; }
.held-illustratie { background: var(--wad-2); color: var(--inkt); }
.held-illustratie::after { display: none; }
.held-illustratie .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: 0 !important; padding-block: 56px 72px; }
.held-illustratie .regel { color: var(--amber-inkt); }
.held-illustratie .lead { color: var(--inkt-2) !important; }
.held-illustratie figure { margin: 0; }
.held-illustratie figure img { width: 100%; max-height: 560px; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 900px) { .held-illustratie .wrap { grid-template-columns: 1fr; padding-block: 40px 56px; } }
.intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.intro .tekst p:first-child::first-letter { font-family: var(--f-display); float: left; font-size: 74px; line-height: .8; padding: 8px 10px 0 0; }
.intro figure { margin: 0; position: sticky; top: 24px; }
.intro figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.intro.zw figure img { filter: grayscale(1); }
.intro.illustratie figure img { aspect-ratio: auto; object-fit: contain; mix-blend-mode: multiply; }
.proef { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--zee-lijn); border-bottom: 1px solid var(--zee-lijn); }
.proef div { padding: 26px 28px 30px 0; }
.proef div + div { padding-left: 28px; border-left: 1px solid var(--zee-lijn); }
.proef h3 { font-size: 30px; margin-bottom: 10px; color: var(--schuim); }
.proef p { margin: 0; font-family: var(--f-tekst); font-size: 17px; color: var(--schuim-2); }
.tijd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 28px 20px; }
.tijd li { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.tijd .jaar { display: flex; align-items: baseline; gap: 10px; font: 600 40px/1 var(--f-stencil); color: var(--inkt); border-bottom: 1px solid var(--lijn); padding-bottom: 10px; min-width: 0; }
.tijd .jaar small { font: 500 13.5px var(--f-ui); color: var(--inkt-3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.paar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px; }
.paar img { width: 100%; height: clamp(320px, 42vw, 560px); object-fit: cover; border-radius: var(--r); }
.ook { display: flex; gap: 16px; align-items: center; background: var(--wad-2); border: 1px solid var(--lijn); border-radius: var(--r); padding: 18px 22px; max-width: 760px; }
.notitie-sectie { padding-block: 0 clamp(64px, 9vw, 120px); margin-top: calc(-1 * clamp(32px, 5vw, 64px)); }
.notitie-sectie.licht { background: var(--wad-2); }
@media (max-width: 900px) { .intro, .paar { grid-template-columns: 1fr; } .intro figure { position: static; } .proef { grid-template-columns: 1fr; } .proef div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--zee-lijn); } }

/* =====================================================================
   King Cask
   ===================================================================== */
.kc-held { background: var(--zee); color: var(--schuim); }
.kc-held .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: 64px 80px; }
.kc-held .kroon { width: 150px; height: auto; margin-bottom: 30px; }
.kc-held h1 { font-size: clamp(48px, 6vw, 88px); }
.kc-held .tekst { color: var(--schuim-2); margin-top: 20px; font-size: 18px; }
.kc-held figure { margin: 0; }
.kc-held figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.regels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--zee-lijn); margin-top: 32px; }
.regels div { padding: 16px 18px 0 0; font-size: 14.5px; color: var(--schuim-2); }
.regels div + div { padding-left: 18px; border-left: 1px solid var(--zee-lijn); }
.regels b { display: block; color: var(--schuim); font-family: var(--f-display); font-weight: 400; font-size: 22px; margin-bottom: 4px; }
.reeks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); padding-block: 40px; border-top: 1px solid var(--lijn); }
.reeks > div > h3 { font-size: 40px; }
.reeks > div > p { font-family: var(--f-tekst); color: var(--inkt-2); font-size: 16.5px; }
.pagina-king-cask .rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.boek-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.boek-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--wad-2); }
table.boek { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 980px; }
.boek th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--inkt-3); padding: 12px 14px; border-bottom: 1px solid var(--lijn); white-space: nowrap; background: var(--wad-2); position: sticky; top: 0; }
.boek th button { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.boek th button:focus-visible { outline: 2px solid var(--amber); }
.boek th[aria-sort="ascending"], .boek th[aria-sort="descending"] { color: var(--inkt); }
.boek td { padding: 10px 14px; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.boek tr:last-child td { border-bottom: 0; }
.boek tbody tr { cursor: pointer; }
.boek tbody tr:hover td { background: #eceee8; }
.boek td.r, .boek th.r { text-align: right; }
.boek td:first-child { min-width: 250px; }
.boek td:nth-child(5) { min-width: 200px; }
.boek .nm { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.boek .nm img { width: 34px; height: 44px; object-fit: contain; flex: none; }
.boek .nm b { font-family: var(--f-display); font-weight: 400; font-size: 18px; display: block; line-height: 1.1; }
.boek .nm span { font-size: 13px; color: var(--inkt-3); }
.boek .sten { font: 600 18px/1 var(--f-stencil); letter-spacing: .02em; }
.boek .anker { color: var(--amber-inkt); display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.boek .anker svg { width: 15px; height: 15px; }
@media (max-width: 900px) { .kc-held .wrap, .reeks { grid-template-columns: 1fr; } .pagina-king-cask .rij { grid-template-columns: 1fr 1fr; } .regels { grid-template-columns: 1fr; } .regels div + div { padding-left: 0; border-left: 0; } }

/* =====================================================================
   Gerijpt op zee
   ===================================================================== */
.held-zw > img { filter: grayscale(1) contrast(1.05); object-position: 50% 40%; }
.factoren { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.factoren figure { margin: 0 0 18px; height: 150px; display: flex; align-items: flex-end; }
.factoren figure img { max-height: 150px; width: auto; mix-blend-mode: multiply; }
.factoren h3 { font-size: 32px; margin-bottom: 10px; }
.factoren p { font-family: var(--f-tekst); font-size: 16.5px; color: var(--inkt-2); margin: 0; }
.reizen { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 28px; }
.reis-tekst { border: 1px solid var(--zee-lijn); border-radius: var(--r); padding: clamp(24px, 4vw, 48px); min-height: 260px; display: grid; align-content: center; background: #0d1c26; }
.reis-tekst p { font-family: var(--f-tekst); font-size: 18px; color: var(--schuim-2); margin: 0; max-width: 52ch; }
.aanboord h3 { font-size: 26px; margin-bottom: 12px; }
.aanboord ul { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--zee-lijn); }
.aanboord li { padding: 11px 0; border-bottom: 1px solid var(--zee-lijn); display: flex; gap: 10px; align-items: center; }
.aanboord li svg { color: var(--amber); }
.aanboord li a:hover { color: var(--amber) !important; }
.zee .tab { color: var(--schuim-2); }
.zee .tab:hover { color: var(--schuim); }
.zee .tab.on { border-color: var(--schuim); color: var(--schuim); }
.zee .tab small { color: var(--schuim-2); }
.logboek { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.logboek > img { width: 100%; border-radius: var(--r); box-shadow: 0 18px 40px rgba(20,30,36,.22); transform: rotate(-1.5deg); }
.strook { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.strook img { width: 100%; height: 360px; object-fit: cover; border-radius: var(--r); }
@media (max-width: 900px) { .factoren, .reizen, .logboek { grid-template-columns: 1fr; } .strook { grid-template-columns: 1fr; } .strook img { height: 240px; } }

/* =====================================================================
   Waar te koop
   ===================================================================== */
.pagina-waar-te-koop .paginakop > img { object-position: 50% 45%; }
.kaartblok { background: var(--wad-2); border: 1px solid var(--lijn); border-radius: var(--r); padding: 26px 28px 24px; }
.kaartblok h2 { font-size: 34px; }
.kaartblok .vlie { display: flex; gap: 10px; align-items: baseline; border-top: 1px solid var(--lijn); margin-top: 22px; padding-top: 14px; font-size: 14.5px; color: var(--inkt-2); }
.kaartblok .vlie b { font-weight: 600; color: var(--inkt); }
.punten-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 0 32px; }
.punt { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--lijn); align-items: start; }
.punt svg { margin-top: 3px; }
.punt h3 { font-family: var(--f-ui); font-weight: 600; font-size: 16px; line-height: 1.3; }
.punt .w { font-size: 13.5px; color: var(--inkt-3); margin: 2px 0 8px; }
.punt .merken { display: flex; flex-wrap: wrap; gap: 6px; }
.punt a { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.partner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.partner > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.partner .knop { margin-top: 8px; }

/* Veelgestelde vragen: titel links (blijft staan bij scrollen), vragen rechts tussen haarlijnen */
.faq-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-raster .sectie-kop { display: block; margin: 0; position: sticky; top: 32px; }
.faq-raster .sectie-kop h2 { max-width: 11ch; }
.faq-lijst { border-top: 1px solid var(--lijn); }
.faq-item { padding-block: 22px 26px; border-bottom: 1px solid var(--lijn); }
.faq-item h3 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.2; margin-bottom: 10px; }
.faq-item p { font-family: var(--f-tekst); font-size: 16.5px; line-height: 1.7; color: var(--inkt-2); margin: 0; max-width: 64ch; }
@media (max-width: 900px) { .faq-raster { grid-template-columns: minmax(0, 1fr); } .faq-raster .sectie-kop { position: static; } }
@media (max-width: 900px) { .partner { grid-template-columns: 1fr; } .kaartblok { padding: 22px 18px 20px; } }

/* =====================================================================
   Over ons en contact
   ===================================================================== */
.pagina-over-ons .paginakop > img { object-position: 50% 50%; }
.ons { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.portret-foto { margin: 0; }
.portret-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
.motto { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; margin: 28px 0 0; text-wrap: balance; }
.mensen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mensen figure { margin: 0; background: var(--wad-2); border: 1px solid var(--lijn); border-radius: var(--r); overflow: hidden; }
.mensen img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mensen figcaption { padding: 16px 18px 20px; }
.mensen h3 { font-size: 24px; margin-bottom: 6px; }
.mensen p { margin: 0; font-size: 14.5px; color: var(--inkt-2); }
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); }
.contact dl { margin: 24px 0 0; }
.contact dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--zee-lijn); }
.contact dt { color: var(--schuim-2); font-size: 14px; }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.contactformulier { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.contactformulier .vol { grid-column: 1 / -1; }
.contactformulier label { display: grid; gap: 6px; font-size: 14px; color: var(--schuim-2); }
.contactformulier input, .contactformulier select, .contactformulier textarea { background: var(--zee-2); border: 1px solid var(--zee-lijn); border-radius: var(--r); padding: 12px 14px; color: var(--schuim); min-height: 46px; width: 100%; }
.contactformulier textarea { min-height: 150px; resize: vertical; }
.contactformulier input:focus, .contactformulier select:focus, .contactformulier textarea:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: transparent; }
.contactformulier [aria-invalid="true"] { border-color: #e08b70; }
.foutmelding { color: #f0a58f; font-size: 13px; }
.foutmelding:empty { display: none; }
.bedankt { grid-column: 1 / -1; border: 1px solid var(--zee-lijn); border-radius: var(--r); padding: 16px 18px; color: var(--schuim); margin: 0; }
.bedankt.fout { border-color: #e08b70; }
.vleugje { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contactformulier button[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 900px) { .ons, .contact { grid-template-columns: 1fr; } .mensen { grid-template-columns: 1fr; } .contactformulier { grid-template-columns: 1fr; } }

/* Afdrukken: alleen de inhoud */
@media print {
  .kop, .voet, .filterbalk, .poort, .zoekpaneel, .skip { display: none !important; }
  body { background: #fff; }
}
.sectie.zee + .voet, .nietgevonden + .voet, .poort.statisch + .voet { border-top: 1px solid var(--zee-lijn); }
.poort-kaart:focus { outline: none; }

/* Eilandlijn: eerste en laatste dorp binnen de lijn houden */
.eiland .dorp:first-child { transform: none; margin-left: -6px; }
.eiland .dorp:first-child::before { left: 6px; }
.eiland .dorp:first-child b { left: 6px; }
.eiland .dorp:last-child { transform: translateX(-100%); margin-left: 6px; }
.eiland .dorp:last-child::before { left: auto; right: 6px; margin: 0 -5px 0 0; }
.eiland .dorp:last-child b { left: auto; right: 6px; transform: translateX(50%); }

/* Telefoon: mozaïek en tekst over foto's */
@media (max-width: 700px) {
  .merk h3 { font-size: 22px; }
  .merk span { font-size: 12.5px; }
  .merk .t { left: 12px; right: 12px; bottom: 12px; }
  .m-a h3 { font-size: 34px; }
  .held::after { background: linear-gradient(180deg, rgba(10,22,30,.6) 0, rgba(10,22,30,.12) 26%, rgba(10,22,30,.35) 50%, rgba(10,22,30,.88) 100%); }
  .held .wrap { text-shadow: 0 1px 14px rgba(5,12,18,.35); }
  .held-illustratie .wrap { text-shadow: none; }
}