/* Veluwse Wijnimport, versie 7, 4 september 2026.

   Mobiel eerst: alles hieronder is de opmaak voor een telefoon. Wat er bij
   een breder scherm verandert, staat achter @media (min-width: ...), en dat
   is alleen indeling: kolommen naast elkaar, grotere koppen, meer ruimte.

   Eén letter (Hanken Grotesk), één accentkleur (het wijnrood uit het logo),
   wit met een warm lichtgrijs, en één donker vlak voor het festival. Geen
   decoratie. Hiërarchie komt uit grootte, gewicht en witruimte.

   De opbouw is die van een wijnhuis: verhaal, wijnen, beleving, bezoek. De
   warmte komt uit de foto's, de mensen en het lichtgrijs, niet uit kleur. */

:root {
  --wit: #FFFFFF;
  --grijs: #F5F1EC;
  --lijn: #E6E1DB;
  --tekst: #1F1B1B;
  --stil: #6F6A66;
  --wijn: #520015;
  --wijn-diep: #36000E;
  --letter: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --breed: 76rem;
  --rand: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font-family: var(--letter);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--wijn); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(82,0,21,.35); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: var(--wijn); }
:focus-visible { outline: 2px solid var(--wijn); outline-offset: 3px; }

.omhulsel { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }
.tekstkolom { max-width: 36rem; }
.tekstkolom p:last-child { margin-bottom: 0; }
.nadruk { font-weight: 500; color: var(--wijn); }

/* Het enige kleine label: zinsopmaak, geen kapitalen, geen lijn. */
.label { font-size: .9rem; font-weight: 500; color: var(--stil); margin: 0 0 .8rem; }
.donker .label { color: rgba(255,255,255,.6); }

h1, .kop1 { font-size: 2.2rem; }
h2, .kop2 { font-size: 1.7rem; margin-bottom: 1rem; }
.kop-licht { font-weight: 300; letter-spacing: -.02em; }

/* Koppelingen die verder leiden: tekst met een dunne lijn, geen knop. */
.verder { display: inline-block; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--wijn); padding-bottom: .1em; margin-top: .5rem; }
.verder:hover { border-bottom-width: 2px; }
.verder + .verder { margin-left: 1.5rem; }

.blok { padding: 3.25rem 0; }
.blok.grijs { background: var(--grijs); }
.blok.donker, .donker { background: var(--wijn-diep); color: #fff; }
.donker a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.donker a:hover { text-decoration-color: #fff; }
.donker .verder { border-bottom-color: #fff; }

/* Foto's. Alle foto's zijn door dezelfde beeldgang gegaan (beeld.py), zodat
   kiekjes van verschillende dagen als één serie ogen. In de pagina's krijgt
   elke foto een vaste verhouding: staand 4:5, liggend 3:2, breed 2:1. Het
   brandpunt voor het bijsnijden staat per foto in --focus. De strook onder de
   kop is de uitzondering: daar staat elke foto in zijn eigen verhouding. */
.foto { margin: 0; }
.foto img { width: 100%; border-radius: 6px; background: var(--grijs); box-shadow: inset 0 0 0 1px rgba(31,27,27,.06); object-fit: cover; object-position: var(--focus, 50% 50%); }
.foto.staand img { aspect-ratio: 4 / 5; }
.foto.liggend img { aspect-ratio: 3 / 2; }
.foto.breed img { aspect-ratio: 2 / 1; }
.foto figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--lijn); font-size: .82rem; color: var(--stil); }
.foto figcaption span:last-child { white-space: nowrap; }
.donker .foto figcaption { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.6); }

/* ---------------------------------------------------- conceptbalk (proef) */
.conceptbalk { background: var(--tekst); color: rgba(255,255,255,.8); font-size: .8rem; font-weight: 500; text-align: center; padding: .45rem 1rem; }

/* --------------------------------------------------------------- kopregel */
.kopregel { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lijn); }
.kopregel .omhulsel { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0 0; }
.merk { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tekst); }
.merk img { width: 36px; }
.merk span { font-weight: 500; font-size: 1rem; white-space: nowrap; }
.kopregel nav { margin-inline: calc(-1 * var(--rand)); }
.kopregel nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: .5rem var(--rand) 0; overflow-x: auto; scrollbar-width: none; }
.kopregel nav ul::-webkit-scrollbar { display: none; }
.kopregel nav a { display: block; padding: .3rem 0 .75rem; font-size: .95rem; font-weight: 500; color: var(--stil); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s; }
.kopregel nav a:hover { color: var(--wijn); }
.kopregel nav a[aria-current="page"] { color: var(--tekst); border-bottom-color: var(--wijn); }
.lay-out-lead .kopregel nav { display: none; }
.lay-out-lead .kopregel .omhulsel { padding-bottom: .7rem; }

/* -------------------------------------------------------------------- kop */
.hoofd { padding: 3rem 0 2rem; }
.hoofd h1 { font-size: clamp(2.6rem, 11vw, 3.4rem); font-weight: 300; line-height: 1.02; letter-spacing: -.025em; margin-bottom: 1.5rem; }
.hoofd h1 span { display: block; color: var(--wijn); }
.hoofd .inleiding { font-size: 1.1rem; color: var(--stil); max-width: 28rem; margin-bottom: 1.25rem; }

/* Strook foto's op gelijke hoogte, eigen breedte, niets bijgesneden. */
.strook { overflow: hidden; padding: .5rem 0 0; }
.strook ul { list-style: none; margin: 0; padding: 0 var(--rand); display: flex; gap: .5rem; height: 200px; overflow-x: auto; scrollbar-width: none; }
.strook ul::-webkit-scrollbar { display: none; }
.strook li { flex: none; height: 100%; }
.strook img { height: 100%; width: auto; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(31,27,27,.06); }

/* -------------------------------------------------------------- paginakop */
.paginakop { padding: 3rem 0 2rem; }
.paginakop h1 { font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 300; letter-spacing: -.02em; margin-bottom: 1rem; }
.paginakop .inleiding { font-size: 1.1rem; color: var(--stil); max-width: 36rem; }
.paginakop .foto { margin-top: 2rem; }

/* ---------------------------------------------------------------- inleiding */
.inleiding-blok .groot { font-size: 1.35rem; font-weight: 300; line-height: 1.4; letter-spacing: -.01em; max-width: 34ch; margin-bottom: 1.2em; }
.inleiding-blok .groot:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ teasers */
.teaser { display: grid; gap: 1.75rem; }
.teaser .foto { order: -1; }
.teaser h2 { font-size: 1.9rem; }

/* De huizen op de voorpagina: een lijst met naam, land en aantal. */
.huizenlijst { list-style: none; margin: 1.5rem 0 1.5rem; padding: 0; border-top: 1px solid var(--lijn); }
.huizenlijst a { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--tekst); transition: padding-left .2s; }
.huizenlijst a:hover { padding-left: .4rem; color: var(--wijn); }
.huizenlijst .naam { font-weight: 500; }
.huizenlijst .land { color: var(--stil); font-size: .9rem; }
.huizenlijst .aantal { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--stil); font-size: .9rem; }

/* ------------------------------------------------------------------- kurk */
.kurk .datum { font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; margin: 0 0 .4rem; }
.kurk h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: 1.25rem; }
.kurk .tekstkolom { color: rgba(255,255,255,.82); }
.kurk dl { margin: 1.5rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; }
.kurk dt { color: rgba(255,255,255,.6); font-size: .9rem; font-weight: 500; padding-top: .15em; }
.kurk dd { margin: 0; }

/* -------------------------------------------------------------- wijnkaart */
.wijnkaart .huis { padding: 2rem 0; border-top: 1px solid var(--lijn); }
.wijnkaart .huis h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: .2rem; }
.wijnkaart .land { font-size: .9rem; color: var(--stil); margin: 0 0 1rem; }
.wijnen { list-style: none; margin: 0; padding: 0; }
.wijnen li { display: flex; gap: .9rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--lijn); }
.wijnen .nummer { flex: none; width: 1.6rem; font-size: .85rem; font-weight: 500; color: var(--stil); font-variant-numeric: tabular-nums; }
.wijnen .naam { flex: 1; }
/* Een onderscheiding staat als korte regel onder de naam, in het wijnrood. Geen goud, geen icoon. */
.wijnen .onderscheiding { display: block; font-size: .8rem; font-weight: 500; line-height: 1.4; margin-top: .15rem; color: var(--wijn); }
.wijnen .onderscheiding a { text-decoration-color: rgba(82,0,21,.35); }
.wijnkaart .telling { font-size: .9rem; font-weight: 500; color: var(--stil); margin: 0 0 .5rem; }

/* --------------------------------------------------------------- contact */
.contact { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.contact li { border-top: 1px solid var(--lijn); }
.contact li:last-child { border-bottom: 1px solid var(--lijn); }
.contact a { display: block; padding: 1rem 0; font-size: 1.5rem; font-weight: 300; letter-spacing: -.015em; text-decoration: none; color: var(--wijn); transition: padding-left .25s; }
.contact a:hover { padding-left: .4rem; }
.contact small { display: block; font-size: .85rem; color: var(--stil); font-weight: 400; }
.voorbehoud { font-size: .85rem; color: var(--stil); margin: 1.25rem 0 0; }

/* Twee kolommen: op mobiel onder elkaar met ruimte ertussen. */
.twee > .foto, .twee > .contact, .twee > .inschrijven { margin-top: 1.5rem; }

/* ------------------------------------------------------------ nieuwsbrief */
.inschrijven label { display: block; font-size: .9rem; font-weight: 500; color: var(--stil); margin-bottom: .5rem; }
.inschrijven .rij { display: flex; flex-direction: column; gap: .6rem; }
.inschrijven input { font: inherit; padding: .85rem 1rem; border: 1px solid var(--lijn); border-radius: 4px; background: var(--wit); color: var(--tekst); min-width: 0; width: 100%; }
.inschrijven input:focus { outline: 2px solid var(--wijn); outline-offset: 1px; border-color: var(--wijn); }
.inschrijven button { font: inherit; font-weight: 500; padding: .85rem 1.4rem; border: 0; border-radius: 4px; background: var(--wijn); color: #fff; cursor: pointer; transition: background .2s; }
.inschrijven button:hover { background: var(--wijn-diep); }
.inschrijven .voorbehoud { margin-top: .9rem; }
.inschrijven .vinkje { display: flex; gap: .6rem; align-items: baseline; font-size: .95rem; margin-top: .9rem; color: var(--tekst); }
.inschrijven .vinkje input { flex: 0 0 auto; width: auto; margin: 0; accent-color: var(--wijn); }
.inschrijven .contact { margin-top: 0; }

/* -------------------------------------------------------------- belofte */
.belofte { list-style: none; margin: 0; padding: 0; }
.belofte li { font-size: clamp(1.6rem, 6.5vw, 2.4rem); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; color: var(--wijn); }

/* ------------------------------------------------------------- leestekst */
.leestekst { max-width: 38rem; }
.leestekst h2 { font-size: 1.25rem; font-weight: 500; margin: 2.2rem 0 .6rem; }
.leestekst h2:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- nieuws */
.berichten { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.berichten a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--lijn); text-decoration: none; color: var(--tekst); }
.berichten .label { display: block; margin-bottom: .1rem; }
.berichten .titel { display: block; font-size: 1.2rem; }
.berichten a:hover .titel { color: var(--wijn); }
.bericht { max-width: 38rem; }
.bericht .terug { margin-top: 2.5rem; }
.bericht h1 { margin-bottom: 1.5rem; }
.bericht h2 { font-size: 1.35rem; margin-top: 2rem; }

/* --------------------------------------------------------------- voettekst */
.voet { background: var(--wijn-diep); color: rgba(255,255,255,.75); padding: 3rem 0 1.5rem; font-size: .95rem; }
.voet .kolommen { display: grid; gap: 1.75rem; }
.voet img { width: 56px; margin-bottom: 1rem; }
.voet h2 { font-size: .9rem; font-weight: 500; color: #fff; margin-bottom: .5rem; }
.voet p { margin-bottom: .4rem; }
.voet a { color: #fff; text-decoration-color: rgba(255,255,255,.3); }
.voet a:hover { text-decoration-color: #fff; }
.voetregel { display: flex; flex-direction: column; gap: .3rem; margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .8rem; color: rgba(255,255,255,.5); }
.lay-out-lead .voet .kolommen { display: none; }
.lay-out-lead .voetregel { margin-top: 0; border-top: 0; padding-top: 0; }

/* =========================================================== breder scherm */
@media (min-width: 52rem) {
  :root { --rand: 2rem; }
  body { font-size: 17px; }
  h1, .kop1 { font-size: 2.8rem; }
  h2, .kop2 { font-size: 2.1rem; }
  .blok { padding: 5.5rem 0; }

  .kopregel .omhulsel { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0; height: 4.25rem; }
  .kopregel nav { margin: 0; }
  .kopregel nav ul { gap: 1.75rem; padding: 0; overflow: visible; }
  .kopregel nav a { padding: .3rem 0; }
  .kopregel nav a[aria-current="page"] { border-bottom-color: var(--wijn); }
  .lay-out-lead .kopregel .omhulsel { padding-bottom: 0; }

  .hoofd { padding: 5.5rem 0 3.5rem; }
  .hoofd .omhulsel { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
  .hoofd h1 { font-size: clamp(3.4rem, 6vw, 5.6rem); max-width: 12ch; margin-bottom: 0; }
  .hoofd .inleiding { font-size: 1.15rem; }
  .strook { padding-top: 1.5rem; }
  .strook ul { height: clamp(240px, 22vw, 340px); gap: .75rem; padding: 0 max(var(--rand), calc((100vw - var(--breed)) / 2)); }

  .paginakop { padding: 5rem 0 3rem; }
  .paginakop .omhulsel { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
  .paginakop h1 { font-size: clamp(3rem, 5vw, 4.4rem); }
  .paginakop .foto { margin-top: 0; }

  .inleiding-blok .omhulsel { display: grid; grid-template-columns: 3fr 9fr; gap: 3rem; }
  .inleiding-blok .groot { font-size: 1.65rem; }

  .teaser { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: center; }
  .teaser .foto { order: 0; }
  .teaser.omgekeerd .foto { order: 2; }
  .teaser h2 { font-size: 2.3rem; }
  .teaser .foto.staand { max-width: 24rem; justify-self: center; }
  .paginakop .foto.staand { max-width: 20rem; justify-self: end; }

  .kurk .omhulsel { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: end; }
  .kurk .datum { font-size: clamp(3rem, 5vw, 4.6rem); }
  .kurk dl { margin-top: 0; }

  .wijnkaart .huis { display: grid; grid-template-columns: 3fr 9fr; gap: 3rem; padding: 2.5rem 0; align-items: start; }
  .wijnkaart .huisinfo { position: sticky; top: 5.5rem; }
  .wijnen { columns: 2; column-gap: 3rem; }
  .wijnen li { break-inside: avoid; }

  .twee { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; }
  .twee.gelijk { grid-template-columns: 1fr 1fr; }
  .contact, .twee > .foto, .twee > .contact { margin-top: 0; }
  .inschrijven .rij { flex-direction: row; }
  .inschrijven input { flex: 1; }
  .twee > .inschrijven { margin-top: 0; }
  .contact a { font-size: 1.9rem; }

  .voet { padding: 4rem 0 2rem; }
  .voet .kolommen { grid-template-columns: 4fr 3fr 2fr 3fr; gap: 2.5rem; }
  .voetregel { flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, .contact a, .huizenlijst a { transition: none; }
}