/* Vin JoLi Wijnhuis
   Kleuren en letters volgen 04_Identiteit/HUISSTIJL-SPECIFICATIE.md.
   De drie merkkleuren zijn gemeten uit het aangeleverde logobestand. */

@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
/* De twee bestanden met -ext in de naam zijn op 7 september 2026 teruggebracht tot de
   vierenvijftig letters met een accent of haakje die in Sloveense, Kroatische, Tsjechische,
   Poolse, Hongaarse en Roemeense namen voorkomen. Samen scheelde dat 66 KB, en die 66 KB
   werden opgehaald voor precies twee tekens: de c en de s met een haakje in "Penec-a Rebula"
   en "Goris-ka Brda" op Onze wijnen. De unicode-range hieronder is bewust ongewijzigd
   gelaten, want hij bepaalt wanneer de browser het bestand ophaalt. Komt er ooit een naam
   met een letter die er niet in zit, dan valt alleen die letter terug op de systeemletter;
   de rest van de tekst blijft goed. Moet er een letter bij, snijd de bestanden dan
   opnieuw uit met die letter erbij, en begin daarbij altijd bij de volledige bestanden in
   Backup/2026-09-07_vinjoli-site-voor-snelheid-en-toegankelijkheid/fonts/ en niet bij deze.
   Hoe dat gaat staat in 07_Oplevering/TECHNIEK-CONTROLE.md onder ronde 7. */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
  --bordeaux:    #690B2D;
  --bordeaux-op: #4D031E;
  --goud:        #CEA965;
  --nacht:       #2A1A20;
  --strogeel:    #F2E8D0;
  --papier:      #FAF7F2;
  --inkt:        #241C1E;
  --inkt-zacht:  #5A4C50;

  /* Het teken van WhatsApp, als masker zodat het de kleur van de knop aanneemt. */
  --wa-teken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.478-8.413'/%3E%3C/svg%3E");

  --kop: 'Cinzel', Georgia, serif;
  --tekst: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --breed: 68rem;
  --lucht: clamp(3rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--tekst);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.1875rem);
  line-height: 1.7;
  color: var(--inkt);
  background: var(--papier);
  -webkit-text-size-adjust: 100%;
}

/* Een lang samengesteld woord in een kop past op een smal scherm niet op een regel.
   "openingsweekend" was op 320 pixels 312 pixels breed in een vak van 273, en duwde
   de hele startpagina 23 pixels naar rechts. De toegankelijkheidsrichtlijn verlangt
   onder eis 1.4.10 dat een pagina op 320 pixels niet in twee richtingen hoeft te
   schuiven. break-word grijpt alleen in wanneer een woord in zijn eentje niet op een
   regel past; op 390, 768 en 1200 pixels is nagemeten dat er geen beeldpunt verandert.
   (7 september 2026) */
h1, h2, h3, h4 { font-family: var(--kop); font-weight: 600; line-height: 1.15; margin: 0 0 .6em;
                 overflow-wrap: break-word; hyphens: none; }
/* Het zachte afbreekteken in "Ons ope-nings-week-end" op de startpagina mag alleen meedoen
   op de smalste schermen. Zonder deze grens brak de browser het woord ook op 390 pixels af,
   waar het gewoon past, en dan verandert de kop zonder reden. hyphens: none hierboven zet
   het teken uit, hyphens: manual hieronder zet het weer aan. (7 september 2026)
   Die kop is op 17 oktober 2026 met het openingsweekend van de site gehaald; er staat nu
   geen zacht afbreekteken meer in. De regel blijft staan voor een volgende lange kop. */
@media (max-width: 22rem) { h1, h2, h3, h4 { hyphens: manual; } }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 3.2vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 1.6vw, 1.75rem); }
h4 { font-size: 1.2rem; }
/* 40rem is bij 19 pixels ongeveer 66 tekens per regel. Bewust in rem en niet
   in ch: de eenheid ch meet de breedte van het cijfer nul, en dat is in
   Montserrat veel breder dan een gemiddelde kleine letter, waardoor 62ch in de
   praktijk op negentig tekens uitkwam. */
p { margin: 0 0 1.1em; max-width: 40rem; }

a { color: var(--bordeaux); text-underline-offset: .18em; }
a:hover { color: var(--bordeaux-op); }

.skip {
  position: absolute; left: -9999px;
  background: var(--nacht); color: #fff; padding: .8rem 1.2rem;
}

/* Tekst die alleen een voorleesprogramma hoort. Gebruikt achter de vijfendertig links die
   in een nieuw tabblad openen: wie meekijkt ziet de sprong gebeuren, wie luistert
   merkt hem pas achteraf. Geen display:none en geen visibility:hidden, want dan haalt
   een voorleesprogramma de tekst ook weg. (7 september 2026) */
.enkel-voorlezer {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; }
.skip:focus-visible { outline-color: var(--goud); }

/* Goud haalt op de lichte vlakken maar 2,07 op 1 tegen gebroken wit, te weinig om
   een focusring te zien. Bordeaux haalt daar 11,65. Op de donkere vlakken is het
   omgekeerd, dus daar blijft goud staan. */
:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
.donker :focus-visible, .hero :focus-visible, .kop :focus-visible, .voet :focus-visible,
.lint :focus-visible { outline-color: var(--goud); }

/* ---------- lint ---------- */

/* Een smalle balk bovenaan de pagina voor een tijdelijke aankondiging. Het lint over het
   openingsweekend van 26 en 27 september is er op 17 oktober 2026 uitgehaald; dezelfde dag
   kwam het lint over de wijnproeverij van zaterdag 7 november erop, op alle zeven pagina's.
   Haal dat na 7 november weg, maar laat deze opmaak staan voor een volgende aankondiging. */

.lint {
  background: var(--bordeaux); color: var(--strogeel);
  text-align: center; padding: .7rem 1.2rem; font-size: .95rem;
}
.lint p { margin: 0; max-width: none; }
.lint a { color: var(--strogeel); }

/* ---------- kop en menu ---------- */

/* De kop deelt dezelfde container als alle secties, zodat het logo op één lijn
   staat met de tekst in de hero en met alles daaronder. */
.kop { background: var(--nacht); padding: 1.2rem 0; }
.kop .binnen {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
}
.merk { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.merk img { width: auto; height: 62px; }
/* De naam en het woord Wijnhuis staan onder elkaar gecentreerd. De letterruimte
   van .3em achter de laatste letter van WIJNHUIS duwt dat woord optisch naar
   links, en text-indent zet die halve stap terug. */
.merk-tekst { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.merk-naam {
  /* Bewust Montserrat en niet Cinzel: Cinzel tekent kleine letters als kleinkapitalen,
     waardoor de twee hoofdletters van JoLi onzichtbaar worden. Zie de huisstijl. */
  font-family: var(--tekst); font-weight: 500;
  font-size: 1.65rem; color: var(--goud); letter-spacing: .01em;
}
.merk-onder {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .3em;
  color: var(--strogeel); margin-top: .35rem; font-weight: 300;
  text-indent: .3em;
}
.kop nav ul { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.kop nav a {
  display: inline-block;
  color: var(--strogeel); text-decoration: none;
  font-size: .95rem; letter-spacing: .04em;
  border-bottom: 1px solid transparent;
  /* Verticale ruimte zodat elke menulink met een vinger te raken is: het
     raakvlak wordt zo 48 pixels hoog, ruim boven de ondergrens van 44. */
  padding: .7rem 0;
}
.kop nav a:hover { color: var(--goud); border-bottom-color: var(--goud); }
.kop nav a[aria-current="page"] { color: var(--goud); border-bottom-color: var(--goud); }

/* Op telefoon en tablet staat het menu onder het logo, gecentreerd. Geen
   uitklapmenu: vijf items passen en een hamburger kost JavaScript. De omslag
   ligt op 55rem en niet lager, want tussen 832 en 870 pixels past de kop nog
   niet echt op één regel en viel hij half uit elkaar. */
@media (max-width: 54.99rem) {
  .kop .binnen { justify-content: center; text-align: center; }
  .kop nav { width: 100%; }
  .kop nav ul { justify-content: center; gap: .1rem 1.1rem; }
}

/* ---------- secties ---------- */

.binnen { max-width: var(--breed); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.binnen.smal { max-width: 44rem; }
section { padding: var(--lucht) 0; }
.licht { background: var(--papier); }
.licht.rand { background: var(--strogeel); }
.donker { background: var(--nacht); color: var(--strogeel); }
.donker h2, .donker h3 { color: var(--goud); }
/* Een knop is ook een <a>, dus deze regel won het van de kleur van de knop
   zelf: een gouden knop kreeg gouden tekst en was daardoor leeg. Vandaar de
   uitzondering, zodat een knop in een donker vlak zijn eigen kleur houdt.
   (12 augustus 2026) */
.donker a:not(.knop) { color: var(--goud); }
.midden { text-align: center; }
.midden p { margin-left: auto; margin-right: auto; }
/* Een alinea die zelf .midden draagt, kreeg wel gecentreerde tekst maar bleef
   door de maximale regelbreedte van 40rem links in het vlak hangen. De regel
   hierboven werkt namelijk alleen op een alinea binnen een gecentreerd blok,
   niet op de alinea zelf. (12 augustus 2026) */
p.midden { margin-inline: auto; }
/* In een gecentreerd blok gaan ook de knoppenrij, het formulier en de knop
   eronder in het midden staan. De invulvelden en hun labels blijven links, want
   gecentreerde labels boven een veld zijn slechter te lezen. */
.midden .knoppen { justify-content: center; }
.midden .formulier.breed { margin-inline: auto; }
.midden .formulier > button { display: block; margin-inline: auto; }
.drie.midden { text-align: center; }
.onder-kop { color: var(--inkt-zacht); font-size: .95rem; }
.groot { font-size: clamp(1.3rem, 2vw, 1.6rem); font-family: var(--kop); color: var(--goud); }
.klein { font-size: .9rem; color: var(--inkt-zacht); }
/* Zacht grijs op nacht haalt maar 1,9 op 1. Elk donker vlak, ook de voet en
   de paginakop, krijgt daarom de lichte variant. */
.donker .klein, .donker .onder-kop, .voet .klein, .voet .onder-kop,
.hero .klein, .paginakop .klein { color: #c2b3b6; }

/* de gouden haarlijn uit het logo, als scheiding tussen secties */
.sierlijn {
  border: 0; height: 2px; margin: 0;
  background: linear-gradient(90deg, transparent, var(--goud) 20%, var(--goud) 80%, transparent);
}

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--nacht), var(--bordeaux-op));
  color: var(--strogeel);
  padding: var(--lucht) 0;
}
.hero .binnen {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
.hero h1 { color: var(--goud); }
.hero .leid { font-size: clamp(1.15rem, 1.3vw, 1.3rem); }
@media (min-width: 62rem) {
  .hero .binnen { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- knoppen ---------- */

.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; max-width: none; }
/* Op een smalle telefoon staan twee knoppen naast elkaar geknepen. Onder elkaar
   over de volle breedte is daar leesbaarder en makkelijker te raken. */
@media (max-width: 26rem) {
  .knoppen { flex-direction: column; align-items: stretch; }
  .knoppen .knop { text-align: center; }
}
/* Twee knoppen naast elkaar staan scheef zodra de ene tekst langer is dan de
   andere. Met deze klasse delen ze de rij gelijk. Bewust een klasse die je zelf
   opzet en geen regel voor elke knoppenrij: een rij van drie moet niet
   uitgerekt worden, en de maximale breedte houdt twee knoppen in een breed vlak
   binnen de perken. (12 augustus 2026) */
.knoppen.gelijk { max-width: 42rem; }
.knoppen.gelijk .knop { flex: 1 1 0; text-align: center; padding-inline: .9rem; }
.midden .knoppen.gelijk { margin-inline: auto; }

.knop {
  display: inline-block; padding: .85rem 1.6rem;
  font-size: 1rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; border: 2px solid transparent; border-radius: 2px;
}
.knop-vol  { background: var(--bordeaux); color: #fff; }
.knop-vol:hover  { background: var(--bordeaux-op); color: #fff; }
.knop-goud { background: var(--goud); color: var(--inkt); }
.knop-goud:hover { background: #dcbc80; color: var(--inkt); }
/* De lijnknop is standaard bordeaux, want goud haalt op gebroken wit maar
   2,07 op 1 en is dan nauwelijks te lezen. Goud komt alleen terug op de
   donkere vlakken, waar het omgekeerd is. Deze kant op geschreven omdat een
   nieuw licht blok anders per ongeluk de gouden variant erft. */
.knop-lijn { border-color: var(--bordeaux); color: var(--bordeaux); background: transparent; }
.knop-lijn:hover { background: var(--bordeaux); color: #fff; }
.donker .knop-lijn, .hero .knop-lijn, .paginakop .knop-lijn, .voet .knop-lijn {
  border-color: var(--goud); color: var(--goud);
}
.donker .knop-lijn:hover, .hero .knop-lijn:hover, .paginakop .knop-lijn:hover,
.voet .knop-lijn:hover { background: var(--goud); color: var(--inkt); }

/* Elke knop die naar het WhatsApp-nummer gaat, draagt het teken van WhatsApp.
   Zo is meteen te zien dat er een appje verstuurd wordt en niet een mail. Het
   teken staat als masker in de kleur van de knop, dus het loopt vanzelf mee met
   de gouden, de volle en de lijnvariant, en het kost geen extra bestand. */
.knop-wa { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }
.knop-wa::before {
  content: ""; flex: 0 0 auto; width: 1.15em; height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--wa-teken) center / contain no-repeat;
          mask: var(--wa-teken) center / contain no-repeat;
}
/* Kent de browser geen masker, dan zou er een gevuld blokje blijven staan.
   Dan verdwijnt het teken en blijft alleen de tekst van de knop over. */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .knop-wa::before { display: none; }
}

/* ---------- roosters ---------- */

.twee { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56rem) {
  .twee { grid-template-columns: 1fr 1fr; }
  .twee.omgekeerd > *:first-child { order: 2; }
}
/* Twee tekstkolommen naast elkaar horen op dezelfde regel te beginnen. Het
   verticaal centreren is bedoeld voor tekst naast een foto. */
.twee.boven { align-items: start; }

/* Drie kolommen in drie stappen. Op een tablet in staande stand (768 pixels)
   worden drie kolommen zo smal dat er twee woorden per regel passen; daar staan
   er dus twee naast elkaar en gaat de derde over de volle breedte. */
.drie { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .drie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .drie > :last-child:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 62rem) { .drie { grid-template-columns: repeat(3, 1fr); } }

/* Kaarten: tekst gecentreerd, en de knop van alle drie op dezelfde hoogte.
   De kaarten zijn even hoog omdat het rooster ze uitrekt; de tussenruimte
   groeit mee zodat de knoppen onderaan uitlijnen. */
.kaarten article {
  background: var(--papier); padding: 1.8rem;
  border-top: 3px solid var(--goud);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.kaarten h3 { margin-bottom: .4em; }
.kaarten p { font-size: 1rem; margin-left: auto; margin-right: auto; flex: 1 1 auto; }
.kaarten .knop { margin-top: auto; align-self: center; }

.deze-maand { font-size: 1.05rem; }

/* ---------- formulier ---------- */

.formulier { max-width: 34rem; margin: 1.5rem auto 0; text-align: left; }
/* Binnen een gecentreerd blok blijft de noot onder het formulier op dezelfde
   lijn als het formulier zelf, in plaats van als losse gecentreerde regel. */
.midden .formulier + .ph-noot { max-width: 34rem; margin-inline: auto; text-align: left; }
.formulier label { display: block; font-size: .9rem; margin-bottom: .4rem; }
.veldrij { display: flex; flex-wrap: wrap; gap: .6rem; }
.formulier input {
  flex: 1 1 15rem; padding: .8rem 1rem; font: inherit; font-size: 1rem;
  border: 2px solid var(--bordeaux); border-radius: 2px;
  background: #fff; color: var(--inkt);
}
.formulier button { flex: 0 0 auto; cursor: pointer; font-family: inherit; }
/* Een gouden rand haalt op gebroken wit maar 2,07 op 1, te weinig om de rand
   van een invoerveld te zien. Op de donkere vlakken is goud juist nodig, want
   daar valt bordeaux weg. */
.donker .formulier input, .donker .veld input,
.donker .veld textarea { border-color: var(--goud); }

/* ---------- praktisch en voet ---------- */

.praktisch { background: var(--papier); border-top: 2px solid var(--goud); }
.adres { font-family: var(--kop); font-size: 1.3rem; }
.praktisch h3 { margin-top: 2rem; }

.voet { background: var(--nacht); color: var(--strogeel); padding: var(--lucht) 0 2rem; }
.voet .merk-naam { font-size: 1.5rem; margin: 0; }
.voet .merk-onder { display: block; margin: .3rem 0 1.2rem; }
.voet a:not(.knop) { color: var(--goud); }
.voet .twee { align-items: start; }

/* De voettekst in vier vlakken, naar het voorbeeld van de site van Yvonne
   Engelen: merk en adres, contact, waar je heen kunt, en wat je verder moet
   weten. Met auto-fit vouwen ze vanzelf naar twee en daarna naar één kolom,
   zonder een eigen regel per schermbreedte. (12 augustus 2026) */
.voet-vlakken {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.voet-vlakken p { margin: 0 0 .5em; font-size: .95rem; max-width: 24rem; }
/* De kopjes staan in het lettertype van de koppen en in goud, zodat de vier
   vlakken meteen als vier vlakken te lezen zijn. */
.voet-kop {
  font-family: var(--kop); font-weight: 600; font-size: 1.05rem;
  color: var(--goud); letter-spacing: .04em; margin-bottom: .8em !important;
}
/* Zacht grijs op nacht haalt te weinig contrast; dit is dezelfde lichte tint
   als bij .klein en .onder-kop op een donker vlak. */
.voet-zacht { color: #c2b3b6; }
/* De twee vlakken met losse links eronder. Een regel tekst is ongeveer twintig
   pixels hoog en dat is te klein om met een duim betrouwbaar te raken; de maat
   die daarvoor staat is vierenveertig. Met ruimte boven en onder de link groeit
   het raakvlak mee, en de marge onder de alinea gaat er navenant af zodat de
   voettekst niet uit elkaar valt. Gemeten op 12 augustus 2026: acht links per
   pagina zaten op twintig pixels hoog. */
.voet-lijst p { margin-bottom: 0; }
.voet-lijst p a { display: inline-block; padding: .6rem 0; }
.voet-onder {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
}
.voet-onder p { margin: 0; font-size: .9rem; color: #c2b3b6; max-width: none; }
/* De educatieve boodschap die het alcoholconvenant voorschrijft. Cursief, in de geest van
   wat dat convenant voor druk en beeld vraagt, en even groot als de regel erboven zodat hij
   leesbaar blijft en niet als kleine lettertjes wegvalt. (16 september 2026) */
.voet-onder .voet-alcohol { margin-top: .5rem; font-style: italic; color: #d6c8ca; }

/* ---------- plaatshouders: bewust zichtbaar nep ---------- */

.plaatshouder {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #ddd6cf, #ddd6cf 12px, #d3ccc4 12px, #d3ccc4 24px);
  color: #55504b; font-size: .9rem; letter-spacing: .05em;
  border: 2px dashed #a89f96;
}
.plaatshouder.vierkant { aspect-ratio: 1 / 1; }
.plaatshouder.kaart { aspect-ratio: 3 / 2; }
.plaatshouder.fles { aspect-ratio: 2 / 3; }
/* Zolang tekst en beeld nog onder elkaar staan, wordt een vierkant of staand
   vlak over de volle breedte zo hoog dat het de tekst uit beeld duwt. Op een
   tablet in staande stand is dat twee derde van het scherm aan één foto. */
@media (max-width: 55.99rem) { .plaatshouder.vierkant { aspect-ratio: 3 / 2; } }
@media (max-width: 43.99rem) { .plaatshouder.fles { aspect-ratio: 3 / 2; } }
.plaatshouder span { padding: 1rem; line-height: 1.5; }

/* ---------- foto's ---------- */

/* Een foto neemt de plek en de verhouding over van de plaatshouder die er
   stond. object-fit zorgt dat een beeld het kader vult zonder uit te rekken;
   de uitsnede zelf is al bij het klaarzetten gemaakt, dus dit vangt alleen het
   verschil op tussen de kaderverhouding op een breed en op een smal scherm. */
.beeld {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 2px;
}
.beeld.vierkant { aspect-ratio: 1 / 1; }
.beeld.kaart { aspect-ratio: 3 / 2; }
/* Drie flessen naast elkaar passen niet in een liggend kader: dan snijd je ze doormidden,
   net als een losse fles hierboven. Dit beeld blijft daarom op elke schermbreedte vierkant,
   en dus juist NIET .vierkant, want die klasse wordt hieronder op een smal scherm 3 op 2. */
.beeld.flessen { aspect-ratio: 1 / 1; }
/* Zelfde omslagpunt als bij de plaatshouder hierboven, en om dezelfde reden:
   een vierkant beeld over de volle breedte duwt op een staande tablet de tekst
   uit beeld. */
@media (max-width: 55.99rem) { .beeld.vierkant { aspect-ratio: 3 / 2; } }
/* De wijn van de maand is een losse staande fles, en die vult zijn foto van boven
   tot onder. In een vierkant kader viel de dop er bovenaan af en de bodem onderaan,
   want de foto is 3 op 4 en er past geen vierkant in dat de hele fles bevat. Dit
   kader blijft daarom staand op elke schermbreedte, en dus met opzet niet .vierkant:
   die klasse wordt onder 56rem 3 op 2 en dan is de fles op een telefoon alsnog
   doormidden. De breedte is begrensd, anders maakt een staande foto over de volle
   kolom de sectie twee keer zo hoog als de tekst ernaast. (16 september 2026) */
.beeld.staand {
  aspect-ratio: 3 / 4;
  max-width: 24rem; margin-inline: auto;
}
/* Staat de foto naast de tekst, dan schuift hij tegen de rechterrand van de
   kolom aan, zodat hij op één lijn staat met de hero erboven en de andere
   foto's eronder. Staan tekst en beeld onder elkaar, dan blijft hij gewoon
   gecentreerd; tegen de rechterrand van een volle kolom ziet dat er scheef uit. */
@media (min-width: 56rem) { .beeld.staand { margin-inline: auto 0; } }

/* Een fles wordt niet liggend gesneden, want dan snijd je de fles zelf doormidden.
   In plaats daarvan blijft hij staand en houden we hem smal, zodat hij ook op een
   telefoon naast de tekst past in plaats van het scherm te vullen. */
.beeld.fles {
  aspect-ratio: 2 / 3; object-fit: contain;
  max-width: 12rem; background: var(--papier);
}

/* De twee oude winkelfoto's op Over ons staan naast elkaar met een bijschrift
   eronder. Onder de 34rem passen twee foto's naast elkaar niet meer. */
.historie {
  margin: 2.4rem 0; display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .historie { grid-template-columns: 1fr 1fr; } }
.historie figcaption {
  grid-column: 1 / -1; margin: 0;
  font-size: .9rem; font-style: italic; color: var(--inkt-zacht);
}

.ph {
  background: #ffe9a8; color: #6b4e00;
  padding: .1em .45em; border: 1px dashed #b08900; font-size: .95em;
}
.donker .ph { background: #4a3a12; color: #ffdf8a; border-color: #8a6d1f; }
.ph-blok { margin: 0; padding: 1.5rem; border: 2px dashed #8a6d1f; }
.ph-blok p { margin: 0; }
.ph-noot { font-style: italic; }

/* ---------- kop van een binnenpagina ---------- */

/* Lager dan de hero van de home, zodat de home de enige pagina blijft die
   met een heel scherm begint. */
.paginakop {
  background: linear-gradient(160deg, var(--nacht), var(--bordeaux-op));
  color: var(--strogeel);
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.paginakop h1 { color: var(--goud); font-size: clamp(2.1rem, 4vw, 3.25rem); }
.paginakop .leid { font-size: clamp(1.1rem, 1.2vw, 1.25rem); margin-bottom: 0; }
.paginakop .knoppen { margin-top: 1.6rem; }

/* ---------- genummerde stappen ---------- */

.stap {
  display: grid; grid-template-columns: auto 1fr;
  gap: .4rem 1.2rem; align-items: start;
  padding: 2rem 0;
  border-top: 1px solid rgba(105, 11, 45, .18);
}
.stap:first-of-type { border-top: 0; padding-top: .5rem; }
.stap-nr {
  font-family: var(--kop); font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1;
  color: var(--bordeaux); grid-row: span 2;
}
.donker .stap { border-top-color: rgba(206, 169, 101, .28); }
.donker .stap-nr { color: var(--goud); }
.stap h3 { margin-bottom: .4em; align-self: center; }
.stap .stap-tekst > :last-child { margin-bottom: 0; }
/* Zelfde breedte als de tekst erboven, anders steekt het kader er ver naast uit. */
.stap .kader { max-width: 40rem; }
.stap .knoppen { margin-top: 1.2rem; }
/* In "Vier manieren om te proeven" staan vier knoppen onder elkaar in dezelfde
   kolom, en die kregen elk de breedte van hun eigen tekst. Zo stonden ze te
   schuiven. Eén maat voor alle vier maakt de kolom recht; de min zorgt dat een
   smalle telefoon er niet door wordt uitgeduwd. (12 augustus 2026) */
.stap .knoppen .knop { min-width: min(18rem, 100%); text-align: center; }
/* Onder 30rem staat het cijfer boven de kop in plaats van ernaast, anders
   blijft er voor de kop een kolom van een paar woorden breed over. */
@media (max-width: 30rem) {
  .stap { grid-template-columns: 1fr; gap: .2rem; }
  .stap-nr { grid-row: auto; }
}

/* ---------- kader met een losse uitnodiging ---------- */

.kader {
  border: 2px solid var(--goud); border-radius: 2px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--papier);
}
.kader > :last-child { margin-bottom: 0; }
.kader h4 { margin-bottom: .3em; }
.kader .formulier { margin-top: .8rem; }

/* ---------- wijnen ---------- */

.wijn {
  display: grid; gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr; align-items: start;
  padding: 2.2rem 0; border-top: 1px solid rgba(105, 11, 45, .18);
}
.wijn:first-of-type { border-top: 0; }
.wijn h3 { margin-bottom: .2em; }
.wijn .streek {
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inkt-zacht); margin-bottom: 1em;
}
.wijn > :last-child { margin-bottom: 0; }
@media (min-width: 44rem) { .wijn { grid-template-columns: 12rem 1fr; } }

/* ---------- lang leesstuk ---------- */

.verhaal { max-width: 40rem; margin: 0 auto; }
.verhaal p { max-width: none; }
.verhaal h2 { margin-top: 2.2em; }
.verhaal h2:first-child { margin-top: 0; }
/* Een citaat staat bewust niet in Cinzel: die letter tekent kleine letters als
   kleinkapitalen, waardoor "Ik zat daar thuis" als een kopregel gaat schreeuwen
   in plaats van als iemand die iets zegt. */
.verhaal blockquote {
  margin: 2rem 0; padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--goud);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 500;
  line-height: 1.5; color: var(--bordeaux);
}
.verhaal blockquote p { margin: 0; }
.verhaal .ondertekening { font-family: var(--kop); font-size: 1.15rem; }

/* ---------- contactgegevens ---------- */

.gegevens { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.gegevens li { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .9rem 0; border-top: 1px solid rgba(105, 11, 45, .18); }
.gegevens li:first-child { border-top: 0; }
.gegevens .label { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-zacht); }
.gegevens .waarde { font-size: 1.05rem; }
/* Bellen en appen zijn hier de hoofdactie, dus die links krijgen een raakvlak
   van 44 pixels in plaats van de 20 die een tekstregel vanzelf hoog is. */
.gegevens .waarde a { display: inline-block; padding: .55rem 0; }
@media (min-width: 34rem) { .gegevens li { grid-template-columns: 9rem 1fr; gap: 1rem; align-items: baseline; } }

/* ---------- formulier met meerdere velden ---------- */

.veld { margin-bottom: 1.1rem; }
.veld label { display: block; font-size: .9rem; margin-bottom: .35rem; }
.veld input, .veld textarea {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1rem;
  border: 2px solid var(--bordeaux); border-radius: 2px;
  background: #fff; color: var(--inkt);
}
.veld textarea { min-height: 7rem; resize: vertical; }
.formulier.breed { max-width: 40rem; margin-left: 0; margin-right: 0; }
.velden-twee { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .velden-twee { grid-template-columns: 1fr 1fr; } }

/* ---------- afdruk ---------- */

@media print {
  .lint, .kop nav, .knoppen, .knop, .formulier { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}