/* ==========================================================================
   Club de Vin, huisstijl Onyx & Brass.
   Handgeschreven, geen build-stap. Mobile first.
   ========================================================================== */

/* --- Lettertypes, zelf gehost (AVG) ------------------------------------- */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Dit bestand is 38 kB en wordt op elke pagina van de site gehaald, ook op een
   pagina zonder cursieve kop. Nagemeten op 22-10-2026 met tools/gewichttest.mjs:
   een tekstpagina is 167 kB en dit is daar 38 van, bijna een kwart. De oorzaak
   staat in de voet, want daar staat Club <em>de</em> Vin, en voor die twee
   letters haalt de browser het hele bestand op.

   Het blokkeert niets, want font-display staat op swap, dus het kost alleen
   data. Het is op te lossen door een eigen bestandje te maken met alleen die
   twee letters erin en dat met unicode-range ervoor te zetten. Daar is een
   subsetter voor nodig (pyftsubset met brotli) en die staat niet op deze
   machine. Het logo cursief af laten is de andere kant op en dat is een
   ontwerpkeuze, dus die blijft bij Jasper. */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/mulish-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Onyx & Brass, zoals in de opdracht */
  --background: #17140f;
  --surface: #221e17;
  --line: #3a3328;
  --primary: #c9a24b;
  --accent: #9a8f74;
  --foreground: #f2ede2;
  --primary-on-light: #8a6a24;
  --wine: #7a1f2b;

  /* Betekenisvolle namen. Een licht vlak zet deze opnieuw, de rest van de
     stylesheet hoeft daar niets van te weten. */
  --vlak: var(--background);
  --vlak-kaart: var(--surface);
  --vlak-diep: #110e0a;
  /* De balk onderin staat op een donkere pagina en moet er los van blijven.
     Hij was donkerder dan de pagina zelf, en dat scheelde zo weinig dat hij
     op een telefoon in de avond wegviel, zeker in de ronde hoeken van het
     scherm. Nu is hij juist iets lichter, met een rand die je ziet. */
  --vlak-balk: #241f18;
  --rand-balk: #4b4234;
  --inkt: var(--foreground);
  --inkt-zacht: var(--accent);
  --goud: var(--primary);
  --rand: var(--line);
  --rand-veld: #6b6250;
  --inkt-op-goud: var(--background);


  /* Kleurlabels per wijnstijl, hier de varianten voor het donkere canvas.
     --wine zelf is op donker veel te donker (1,8:1), vandaar een lichtere rood. */
  --stijl-bubbel: #d9b86a;
  --stijl-wit: #e3d9b0;
  --stijl-rose: #d99a9a;
  --stijl-rood: #cf6b76;
  --stijl-zoet: #c08130;

  --letter-kop: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --letter-tekst: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ronding: 14px;
  /* De ruimte binnen een kaart. Staat hier als variabele omdat het kopbeeld
     op een thema-kaart er met een negatieve marge precies overheen moet. */
  --kaart-ruimte: clamp(1.25rem, 3vw, 1.75rem);
  --ronding-klein: 8px;
  --pil: 999px;
  --bak-breed: 70rem;
  --bak-smal: 46rem;
  --rand-ruimte: 1.25rem;
}

/* Lichte vlakken: boodschappenlijst, print, kookmodus. */
.op-licht {
  --vlak: #f2ede2;
  --vlak-kaart: #fbf8f1;
  --vlak-diep: #e9e2d2;
  --vlak-balk: #e9e2d2;
  --rand-balk: #c9bea4;
  --inkt: #17140f;
  --inkt-zacht: #5f5646;
  --goud: #7a5c1e;
  --rand: #d9d0bd;
  --rand-veld: #837960;
  --inkt-op-goud: #f2ede2;

  --stijl-bubbel: #7a5c1e;
  --stijl-wit: #635b40;
  --stijl-rose: #9d4b56;
  --stijl-rood: #7a1f2b;
  --stijl-zoet: #8a5a16;
}

/* --- Basis --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* De kop blijft staan tijdens het scrollen, dus een sprong naar een anker
     landt eronder. Deze ruimte is wat de browser boven het doel vrijhoudt.
     Ruim genomen, want de kop is 77 pixels hoog op een telefoon en 88 op een
     laptop, en een kop die er precies tegenaan staat leest alsof het doel het
     begin van de pagina niet is. Nagemeten op 24-10-2026. */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--letter-tekst);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--letter-kop);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--inkt);
}

h1 { font-size: clamp(2rem, 7vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--goud);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration: none; }

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

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

hr {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 2.5rem 0;
}
/* Een streep binnen een kaart, tussen twee stukken van hetzelfde formulier.
   Die mag dichter op de tekst staan dan een streep tussen twee hoofdstukken. */
hr.scheiding { margin: 1.5rem 0; }

/* Het hidden-attribuut moet altijd winnen.
   Zonder deze regel verliest hidden van elke klasse die zelf een display zet,
   en dat doen .knop en de meeste blokken hier. Een knop met hidden erop stond
   dan gewoon in beeld en deed niets: de deelknop op de gastheerpagina, de
   printknop in de afdrukbalk en de vier toevoegknoppen in het beheer. */
[hidden] {
  display: none !important;
}

.verborgen-behalve-voorlezer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--background);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--ronding-klein) 0;
}
.overslaan:focus {
  left: 0;
}

/* --- Opmaakhulpjes ------------------------------------------------------- */

.bak {
  width: 100%;
  max-width: var(--bak-breed);
  margin-inline: auto;
  padding-inline: var(--rand-ruimte);
}
.bak--smal { max-width: var(--bak-smal); }

/* Een kaart die smal blijft in een brede bak. Onder een tabel staan de
   formulieren: die hoeven niet zeventig rem breed te zijn, maar ze horen wel
   aan dezelfde kantlijn te beginnen als de tabel erboven. Een smalle bak onder
   een brede zet ze in het midden, en dan lijkt het of er iets scheef staat. */
.kaart--smal { max-width: var(--bak-smal); }

.vlak {
  background: var(--vlak);
  color: var(--inkt);
}

.sectie { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.sectie--krap { padding-block: clamp(1.75rem, 4vw, 2.75rem); }

/* Een krappe kop met een gewone sectie eronder telt twee keer ruimte op. Op een
   wijnpagina, een wijnhuis en een stijlpagina staat de kop in een krappe sectie
   en de inhoud in een gewone, en dan zat er op 1280 pixels 116 pixels niets
   tussen de naam en de eerste kaart. Bij een wijn waar we weinig van weten is
   dat ook letterlijk niets, want dan staat er geen proefnotitie onder de naam.
   Nagemeten op 22-10-2026.

   Alleen de bovenkant van de tweede, want de krappe sectie heeft zijn eigen
   ruimte al. Zo blijft het samen ongeveer één gewone sectie. */
.sectie--krap + .sectie { padding-top: clamp(0.75rem, 2vw, 1.75rem); }

.label {
  font-family: var(--letter-tekst);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0 0 0.75rem;
  display: block;
}

.leeswijdte { max-width: 38em; }

.zacht { color: var(--inkt-zacht); }
.klein { font-size: 0.9rem; }

/* --- Woordmerk en logo --------------------------------------------------- */

.woordmerk {
  display: block;
  font-family: var(--letter-kop);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--inkt);
  margin: 0;
  white-space: nowrap;
}
/* "de" is een tussenwoordje en moet dat ook zijn. In goud en op bijna de volle
   grootte trok het juist alle aandacht, terwijl de naam om Club en Vin draait.
   Daarom kleiner en in de zachte inkt: de cursief blijft, de nadruk gaat weg. */
.woordmerk em {
  font-style: italic;
  color: var(--inkt-zacht);
  font-size: 0.6em;
  font-weight: 400;
  padding-inline: 0.12em;
  vertical-align: 0.06em;
}

.tagline {
  display: block;
  font-family: var(--letter-tekst);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0.4rem 0 0;
}

/* Liggend: beeldmerk links, woordmerk en tagline rechts. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
}
.merk__beeld {
  width: 34px;
  flex: 0 0 auto;
  color: var(--goud);
}
.merk__beeld svg { display: block; width: 100%; height: auto; }
.merk .woordmerk { font-size: 1.5rem; }
.merk .tagline { margin-top: 0.15rem; }

@media (min-width: 40em) {
  .merk__beeld { width: 42px; }
  .merk .woordmerk { font-size: 1.85rem; }
}

/* Staand: beeldmerk, woordmerk, rank, tagline. */
.merk-staand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}
.merk-staand__beeld {
  width: clamp(92px, 18vw, 132px);
  color: var(--goud);
  margin-bottom: 1.25rem;
}
.merk-staand .woordmerk {
  font-size: clamp(2.4rem, 9vw, 4rem);
}
.merk-staand__rank {
  width: clamp(190px, 42vw, 290px);
  color: var(--goud);
  margin: 0.4rem 0 0.1rem;
}
.merk-staand .tagline { font-size: 0.7rem; }

/* De wijnrank als rustige scheiding tussen rondes. */
.rank-scheiding {
  display: flex;
  justify-content: center;
  color: var(--goud);
  opacity: 0.7;
  margin-block: clamp(2rem, 5vw, 3rem);
}
.rank-scheiding svg { width: clamp(160px, 34vw, 240px); }

/* --- Kop en navigatie ---------------------------------------------------- */

/* De kop blijft staan tijdens het scrollen.

   Op een lange pagina, en dat zijn ze hier bijna allemaal, was de weg terug
   naar de rest van de site helemaal bovenaan. Op een telefoon staat daar de
   balk onderin voor, maar op een laptop moest je scrollen om bij het menu te
   komen.

   De achtergrond staat er al, en die is hier geen detail: zonder dekkende
   achtergrond schuift de tekst van de pagina er dwars doorheen.

   z-index 45, dus boven de inhoud en onder de balk onderin. Die balk is 50 en
   het paneel dat eruit klapt zit daarbinnen, dus dat blijft erboven. De
   leeftijdspoort staat op 1000 en dekt alles af. */
.kop {
  position: sticky;
  top: 0;
  z-index: 45;
  border-bottom: 1px solid var(--line);
  background: var(--background);
}
.kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1rem;
}
.kop__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3vw, 1.75rem);
  flex-wrap: wrap;
  /* Op een breed scherm staat het menu al rechts, want de kop staat op
     space-between. Op een telefoon zakt het naar een eigen regel, en dan is het
     de enige op die regel en begint het weer links. Deze marge houdt het aan de
     rechterkant, onder het rondje, in plaats van eronderuit te lopen. */
  margin-left: auto;
  justify-content: flex-end;
}
.kop__nav a {
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.kop__nav a:hover,
.kop__nav a[aria-current='page'] {
  color: var(--primary);
}
/* Een knop in de kop is geen menulink: niet in kapitalen en niet gespatieerd. */
.kop__nav a.knop {
  letter-spacing: 0.06em;
  color: var(--goud);
}
.kop__nav a.knop:hover { color: var(--inkt-op-goud); }

/* Op een telefoon staan deze twee links in de balk onderin, en is de kop één
   regel met het merk links en het inloggen of je rondje rechts. Zo stonden ze
   er twee keer, en zakte het menu naar een eigen regel die de kop van 88 naar
   137 pixels bracht, en op een scherm van 320 zelfs naar 211. */
@media (max-width: 55.99em) {
  .kop__nav > a:not(.knop) { display: none; }
}

/* En onder de 36em gaat ook de tagline uit de kop. Het merk met tagline is
   340 pixels breed; met de knop ernaast past dat niet op een telefoon, en dan
   zakt de knop alsnog naar een tweede regel. De zin staat onderaan elke pagina
   nog een keer, dus hij is nergens weg. */
@media (max-width: 35.99em) {
  /* Ook in het beheer: daar staat hetzelfde merk met hetzelfde rondje ernaast,
     en daar zakte het rondje op een telefoon net zo goed naar een eigen regel.
     De kop was daar 142 pixels op een scherm van 320. */
  .kop .tagline,
  .beheer-kop .tagline { display: none; }

  /* Op een scherm van 320 scheelde het nog negen pixels of het merk en de knop
     pasten naast elkaar, en voor die negen pixels zakte de knop naar een eigen
     regel en werd de kop twee keer zo hoog. Vandaar een krappere tussenruimte
     en een iets smallere knop. */
  .kop__binnen,
  .beheer-kop__binnen { gap: 0.6rem; }
  .kop__nav a.knop { padding-inline: 0.9rem; }
}

/* --- Voet ---------------------------------------------------------------- */

.voet {
  border-top: 1px solid var(--line);
  background: var(--vlak-diep);
  color: var(--accent);
  padding-block: 2.5rem;
  margin-top: 4rem;
  font-size: 0.88rem;
}
.voet a { color: var(--accent); }
.voet a:hover { color: var(--primary); }
/* Het merk links, daarnaast drie kolommen met links. Een raster met een vast
   aantal kolommen per stap en geen auto-fit: met auto-fit stond er op een
   telefoon één kolom onder elkaar en werd de voet 875 pixels hoog, meer dan
   een heel scherm. Twee naast elkaar houdt hem op ruim vierhonderd.
   Het merk staat op zijn eigen regel zolang er minder dan vier kolommen zijn;
   anders staat hij in een kolom die half zo breed is als zijn woordmerk. */
.voet__rijen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}
.voet__merk { grid-column: 1 / -1; }

@media (min-width: 42em) {
  .voet__rijen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60em) {
  /* Het merk krijgt meer ruimte dan een kolom met drie links. */
  .voet__rijen { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .voet__merk { grid-column: auto; }
  /* Ingelogd komt er een kolom bij, voor je eigen wijnen en je account. Deze
     regel moet ná de regel hierboven staan: twee klassen van gelijke
     specificiteit, dus de laatste wint. */
  .voet__rijen--vier { grid-template-columns: 1.3fr repeat(4, 1fr); }
}
.voet__kolom h3 {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin: 0 0 0.6rem;
}
/* Onder elkaar en niet achter elkaar: binnen een kolom is het een lijstje, en
   een lijstje lees je van boven naar beneden. */
.voet__links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.voet__matig {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  font-size: 0.82rem;
}
.voet__achttien {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: var(--pil);
  font-weight: 800;
  font-size: 0.72rem;
  flex: 0 0 auto;
}

/* --- Knoppen ------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.6rem 1.5rem;
  border-radius: var(--pil);
  border: 1.5px solid var(--goud);
  background: transparent;
  color: var(--goud);
  font-family: var(--letter-tekst);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.knop:hover {
  background: var(--goud);
  color: var(--inkt-op-goud);
}
.knop--hoofd {
  background: var(--goud);
  color: var(--inkt-op-goud);
}
.knop--hoofd:hover {
  background: transparent;
  color: var(--goud);
}
.knop--stil {
  border-color: var(--rand-veld);
  color: var(--inkt);
}
.knop--stil:hover {
  background: var(--rand-veld);
  color: var(--vlak);
}
.knop--klein {
  min-height: 2.3rem;
  padding: 0.35rem 1rem;
  font-size: 0.74rem;
}
.knop--breed { width: 100%; }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
/* Een formulier met één knop telt mee als die knop. Anders staat een knop die
   in een eigen formulier zit op zijn eigen regel, en dan lijken drie knoppen
   twee groepen. */
.knoprij > form { margin: 0; }

/* --- Pillen -------------------------------------------------------------- */

.pil {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.8rem;
  border-radius: var(--pil);
  border: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  /* Niet op nowrap. Een pil krijgt zijn tekst uit de database, en één lange
     waarde duwde zo de hele pagina breder dan het scherm. Korte pillen passen
     toch wel op één regel; alleen een pil die echt niet past breekt nu af. */
  max-width: 100%;
}
/* Een pil met een wijnstijl erin breekt niet af. De uitleg hierboven gaat over
   pillen die hun tekst uit de database krijgen en dus lang kunnen zijn; een
   wijnstijl is een van vijf vaste woorden en nooit langer dan "Bubbels". In een
   smalle kolom werd "Zoet" anders "ZO" met "ET" eronder, en dan staat er een
   rondje met twee lettergrepen in plaats van een label. */
.pil[data-stijl] { white-space: nowrap; }

.pil--vol {
  background: var(--goud);
  border-color: var(--goud);
  color: var(--inkt-op-goud);
}

.pil[data-stijl='bubbel'] { color: var(--stijl-bubbel); }
.pil[data-stijl='wit']    { color: var(--stijl-wit); }
.pil[data-stijl='rose']   { color: var(--stijl-rose); }
.pil[data-stijl='rood']   { color: var(--stijl-rood); }
.pil[data-stijl='zoet']   { color: var(--stijl-zoet); }

.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Kaarten ------------------------------------------------------------- */

.kaart {
  background: var(--vlak-kaart);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  padding: var(--kaart-ruimte);
}

.raster {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
/* Zonder min-width: 0 rekt een kind dat niet kan afbreken de hele kolom op,
   en dan krijgt de pagina op een telefoon een horizontale schuifbalk. */
.raster > * { min-width: 0; }
@media (min-width: 46em) {
  .raster--drie { grid-template-columns: repeat(3, 1fr); }
  .raster--twee { grid-template-columns: repeat(2, 1fr); }
  /* Een raster dat de breedte opmaakt met wat erin staat.

     raster--drie zet altijd drie kolommen neer, ook als er één kaart is. Op de
     voorpagina stond daardoor één thema-avond op een derde van de bak met twee
     lege kolommen ernaast, en dat leest als een pagina waar iets is weggevallen.

     auto-fit laat de lege sporen inklappen, met de tussenruimte en al. Eén
     kaart pakt dan de volle breedte, twee doen het samen en drie verdelen het
     in drieën. De ondergrens van 14rem is zo gekozen dat er bij 46em precies
     drie naast elkaar passen en bij de bak van 70rem geen vierde bij komt. */
  .raster--vullend { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

  /* Vier kaarten in drie kolommen laat er één alleen op een tweede regel
     achter, en dat leest als een vergissing.

     De regel hierboven zegt dat er bij de brede bak geen vierde kolom bij komt
     en dat klopt niet meer: de bak is daar ruim duizend pixels en met een
     ondergrens van 14rem passen er vier. Op 25-10-2026 gemeten over het blok
     "Van ons" op de voorpagina, dat er vier heeft:

       320 tot 500   elk op een eigen regel, dat is gewoon stapelen
       640           2 plus 2
       768 en 900    3 plus 1, een kaart alleen
       1024 en meer  4 naast elkaar

     Alleen die middenband is fout. Met precies vier kaarten worden het daar
     twee kolommen, dus 2 plus 2. De selector telt de kinderen: wel een vierde
     en geen vijfde. Bij drie of vijf verandert er niets, want daar valt geen
     kaart alleen. */
  @media (min-width: 46em) and (max-width: 63.9em) {
    .raster--vullend:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

/* Het kruimelpad bovenaan een pagina die ergens onder hangt.

   Wie hier binnenkomt komt vaak van een zoekmachine en valt dus midden in de
   site. Onderaan staat al een rij knoppen terug, maar dat is pas aan het eind.

   Klein en rustig, want het is geen inhoud maar een wegwijzer. Op een
   aanraakscherm krijgt elke stap wel de hoogte van een knop: het zijn links en
   je moet ze kunnen raken. */
.kruimels {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.kruimels ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.45rem;
}
.kruimels a { color: var(--accent); }
.kruimels a:hover { color: var(--primary); }
.kruimels__hier { color: var(--inkt-zacht); }
.kruimels__pijl { color: var(--inkt-zacht); }
@media (pointer: coarse) {
  .kruimels a,
  .kruimels__hier {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Wie er aan de beurt is om gastheer te zijn, onder de agenda van een club.

   Net als de leeslijst, maar zonder streep tussen de regels: dit is één rijtje
   namen op volgorde en geen lijst losse stukken. De nummering zit in de
   volgorde zelf en hoeft er niet bij te staan. */
.beurtlijst {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.beurtlijst li + li { margin-top: 0.6rem; }
.beurtlijst p { margin: 0.1rem 0 0; }

/* Het verticale ovaal uit het beeldmerk als beeldkader. */
.ovaal {
  aspect-ratio: 176 / 236;
  border: 1.5px solid var(--rand);
  border-radius: 50% / 37%;
  background: var(--vlak-kaart);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--goud);
}
.ovaal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ovaal__wacht {
  width: 44%;
  opacity: 0.45;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 10vw, 6rem) clamp(2.5rem, 7vw, 4.5rem);
  text-align: center;
}
.hero__moment {
  margin-top: 2.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}
.hero__titel {
  margin: 0.6rem 0 0.75rem;
}
/* De introzin onder een kop.

   `margin-inline: auto` stond hier tot 24-10-2026 en dat was fout op elke
   pagina behalve de voorpagina. In een linkse kolom centreert die regel een
   blok van 34em binnen een kolom van 46em, en dan begint de zin ruim vier em
   naar rechts terwijl de kop erboven links staat. Op de wijnlijst, de
   wijnhuizen, de stijlen, de bronnen, het zoekscherm, wat drink je erbij, een
   avond, een wijnhuis en een wijn stond hij dus scheef.

   Alleen in .hero hoort hij gecentreerd, want dat vlak staat zelf op
   text-align: center. */
.hero__intro {
  max-width: 34em;
  color: var(--accent);
  font-size: 1.05rem;
}
.hero .hero__intro { margin-inline: auto; }
.hero .knoprij {
  justify-content: center;
  margin-top: 2rem;
}

/* --- Een vlak met een foto erachter ------------------------------------- */

/* Dit begon als de hero op de voorpagina en staat hier los, want de wijnlijst
   gebruikt hem nu ook. Twee keer dezelfde gradient in dit bestand is één keer
   te veel: dan wordt er één aangepast en loopt de andere er stil op achter.

   De sluier is geen smaakkwestie maar een rekensom. Gouden letters op een foto
   met lichte plekken vallen weg. Hoeveel er overheen moet is nagemeten op de
   echte foto's, per tekstregel, door het samengestelde pixel uit te rekenen.
   Zie de getallen in de commits van 25-10-2026.

   Hij loopt naar beneden donkerder en eindigt in de achtergrondkleur zelf,
   zodat de foto overgaat in de pagina eronder in plaats van dat er een rand
   ontstaat. */
.metbeeld {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Hoe dicht de sluier is, bovenaan en halverwege.

     Dit staat als variabele en niet als vaste waarde, want hoeveel er overheen
     moet hangt af van de foto. Bij `proosten` zitten de lichte plekken in het
     midden, bij `flessen` zit er een gouden capsule precies achter de
     labelregel en moest er meer overheen. Zonder deze twee regels zou de
     gradient twee keer in dit bestand staan en loopt er op een dag één achter.

     Ze staan hier en niet alleen bij de gebruikers, want een var() zonder
     definitie laat de hele regel wegvallen en dan is er geen sluier meer. */
  --sluier-boven: 0.84;
  --sluier-midden: 0.90;
}
.metbeeld .foto--achter {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  border-radius: 0;
}
.metbeeld .foto--achter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.metbeeld::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(23, 20, 15, var(--sluier-boven)) 0%,
    rgba(23, 20, 15, var(--sluier-midden)) 45%,
    rgba(23, 20, 15, 0.97) 85%,
    var(--background) 100%
  );
}
.metbeeld > .bak { position: relative; }

/* --- De hero met een foto erachter -------------------------------------- */

/* De voorpagina opende met tekst op een egale achtergrond. De foto staat
   erachter en niet erboven, zodat de hoogte op een telefoon niet verdubbelt.

   De sluier is geen smaakkwestie maar een rekensom. De gouden letters zijn
   #c9a24b en de lichtste plek in deze foto is een lamp in de onscherpte. Zonder
   sluier staat gouden tekst daar op bijna dezelfde helderheid en valt hij weg.
   Hoeveel er precies overheen moet is nagemeten op de echte foto, zie de
   waarden hieronder.

   Hij loopt van boven naar beneden donkerder en eindigt in de achtergrondkleur
   zelf. Daarmee gaat de foto over in de pagina eronder in plaats van dat er een
   rand ontstaat. */
.hero--beeld {
  padding-block: clamp(4rem, 12vw, 7.5rem) clamp(3rem, 8vw, 5.5rem);
}
.hero--beeld .foto--achter img {
  /* Het gezelschap staat in de onderste helft van deze foto. Met de standaard
     uitsnede valt dat op een smal scherm buiten beeld en houd je lampen over. */
  object-position: 50% 62%;
}
.hero--beeld .hero__inhoud { position: relative; }

/* De uitgelichte avond, als eigen kaart onder de hero.

   Hij stond in de hero zelf en nam daar de plek in van wat de site is. Als
   kaart heeft hij een rand en een eigen vlak, zodat hij als aanbod leest en
   niet als vervolg op de kop erboven. */
.uitgelicht {
  text-align: center;
  background: var(--vlak-kaart);
}
.uitgelicht .seizoenmerk { align-self: center; }
.uitgelicht .knoprij { justify-content: center; }
.uitgelicht h2 { margin: 0.2rem 0 0.4rem; }

/* De link naar /over onder het verhaal op de voorpagina. Wat eronder staat is
   de samenvatting, en die pagina is het hele verhaal. */
.waarom__verder { margin-top: 1.5rem; }

/* --- Wanneer een avond aan de beurt is ---------------------------------- */

/* Een klein merkje op een kaart in het overzicht. Het staat er alleen bij een
   moment dat een seizoen draagt; zie Cdv\Seizoen.

   Gedempt als het buiten zijn seizoen valt en goud als het nu aan de beurt is.
   Dat tweede trekt de aandacht naar precies de kaarten die in deze maand
   bovenaan staan, zonder dat er een tweede zin bij hoeft. */
.seizoenmerk {
  align-self: flex-start;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--pil);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.seizoenmerk--nu {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- De band boven de wijnlijst ----------------------------------------- */

/* Dezelfde constructie als de hero, maar met de tekst links in plaats van
   gecentreerd, want de rest van deze pagina staat ook links.

   De flessen liggen in de onderste tweederde van die foto. Met de standaard
   uitsnede houd je op een breed scherm vooral donkere lucht over. */
.wijnband {
  padding-block: clamp(3rem, 9vw, 5rem) clamp(2.5rem, 7vw, 4rem);
  /* Dichter dan de hero, want er zit een gouden capsule in deze foto precies
     achter de labelregel. Nagemeten op 390 pixels, 25-10-2026:

       0,84 / 0,90  label 3,94   te laag, de eis is 4,5
       0,90 / 0,94  label 4,57   haalt het, maar met zeven honderdsten lucht
       0,93 / 0,96  label 4,95   dit staat er
       0,95 / 0,97  label 5,18   en dan is de foto bijna weg

     De derde dus. Tien procent lucht boven de eis, en de flessen zijn nog
     steeds te zien. */
  --sluier-boven: 0.93;
  --sluier-midden: 0.96;
}
.wijnband .foto--achter img { object-position: 50% 58%; }
.wijnband .hero__intro {
  color: color-mix(in srgb, var(--foreground) 78%, var(--accent));
}

/* De introzin is op een egale achtergrond gedempt, en dat werkt daar. Op deze
   foto niet: nagemeten op 390 pixels kwam hij uit op 4,21 tegen 1, en de eis
   voor gewone tekst is 4,5. Niet de sluier verder dichtdraaien, want dan is de
   foto weg; de zin zelf lichter, en dan staat hij er ook gewoon beter op. */
.hero--beeld .hero__intro {
  color: color-mix(in srgb, var(--foreground) 78%, var(--accent));
}

/* --- Zo werkt het -------------------------------------------------------- */

/* De drie stappen onder "Zo werkt het". Het icoon staat naast de kop op
   dezelfde regel, daaronder de uitleg. Links uitgelijnd: met een icoon ervoor
   krijg je over de drie kaarten één rechte lijn, en gecentreerd zou de uitleg
   scheef onder een rij hangen die zelf niet in het midden begint. */
.stap-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stap-kaart__kop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.stap-kaart__icoon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--goud);
}
.stap-kaart__icoon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.stap-kaart h3 {
  margin: 0;
  /* De kop mag niet afbreken: dan staat het icoon naast twee regels en
     verspringen de drie kaarten in hoogte. Het krapst is het rond 768 px, waar
     het raster al drie kolommen heeft maar het scherm nog smal is. Daar past
     de langste kop met deze maat met ruimte over; op een breed scherm groeit
     hij mee naar 1,15rem. */
  font-size: clamp(1rem, 0.62rem + 0.78vw, 1.15rem);
  line-height: 1.2;
  /* Geen nowrap. Dat zou de kop de kaart uit duwen zodra er ooit een langere
     tekst in komt, en dan krijgt de pagina een horizontale schuifbalk. Breken
     is lelijker, maar het blijft binnen de kaart. */
  min-width: 0;
}
.stap-kaart p {
  margin: 0;
}

/* --- Thema-kaarten ------------------------------------------------------- */

.thema-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.thema-kaart:hover { border-color: var(--primary); }
/* Een kaart zonder bestemming, op het overzicht van de wijnstijlen. Die staat
   er voor een stijl waar nog niets van op de site staat: hem weglaten zou de
   lijst compleet laten lijken terwijl er een ontbreekt. Hij is geen link, dus
   hij hoort ook niet op te lichten als je erover gaat. */
.thema-kaart--leeg { opacity: 0.6; }
/* Het moment is een hele zin en geen kort label, dus geen pil maar gewoon
   kapitalen. Een pil van drie regels leest niet. */
.thema-kaart__moment {
  color: var(--primary);
  margin-bottom: 0.25rem;
}
/* Maar kapitalen met letterspatie lezen ook niet als er een hele zin in staat,
   en op het overzicht van de avonden staat daar bij drie van de vier een zin
   van zestig tekens. Gemeten op 27-10-2026 liep dat blok van 19 tot 95 pixels
   en duwde het de titel tot 120 pixels omlaag, waardoor er in een rij kaarten
   niets meer uitlijnde.

   Deze variant is dezelfde regel in gewone tekst, stil, en hooguit twee
   regels. Hij staat los van .thema-kaart__moment, want op de voorpagina en bij
   de artikelen staat daar wel een kort woord in en daar hoort de kapitaal. */
.thema-kaart__moment--zin {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Altijd twee regels hoog, ook met een korte zin erin. Anders staat de titel
     van die ene kaart twintig pixels hoger dan de rest en lijkt de rij scheef.
     Een leeg moment krijgt helemaal geen element, zie het sjabloon, dus dit
     reserveert nooit ruimte voor niets. */
  min-height: 2.3rem;
}
.thema-kaart h2,
.thema-kaart h3 { margin: 0; font-size: clamp(1.15rem, 3vw, 1.4rem); }
.thema-kaart__meta {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--accent);
  font-size: 0.85rem;
}
/* Alleen de eerste duwt zichzelf naar beneden. Stonden ze allebei op auto, dan
   verdeelde flexbox de vrije ruimte eerlijk over die twee marges en zweefde de
   regel "Voor 8 gasten" op elke kaart op een andere hoogte. De laatste regel
   lijnde wel uit, dus het zag eruit als rommel en niet als een fout. */
.thema-kaart__meta ~ .thema-kaart__meta { margin-top: 0; }

/* --- Gasten-schuif ------------------------------------------------------- */

.schuif {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--vlak-diep);
  border-block: 1px solid var(--line);
}
.schuif__binnen {
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 0.9rem;
}
.schuif__tekst {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}
.schuif__getal {
  font-family: var(--letter-kop);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary);
  min-width: 1.6em;
  text-align: right;
}
.schuif__regelaar {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.schuif__flessen {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--accent);
}
.schuif__flessen strong { color: var(--foreground); font-weight: 700; }

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.5rem;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--rand-veld);
  border-radius: 2px;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.69rem;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--background);
}
input[type='range']::-moz-range-track {
  height: 2px;
  background: var(--rand-veld);
  border-radius: 2px;
}
input[type='range']::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--background);
}

/* --- Rondes -------------------------------------------------------------- */

/* De schuif blijft bovenin plakken, dus ankers moeten daar onder uitkomen. */
.ronde,
section[id],
[id^='ronde-'] {
  scroll-margin-top: 5.5rem;
}
.ronde__teller {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.ronde__kop h2 { margin-bottom: 0.75rem; }
.ronde__kop .pillen { margin-bottom: 1.5rem; }

.ronde__raster {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52em) {
  .ronde__raster { grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 1fr); }
}

.wijnblok { display: flex; gap: 1.1rem; align-items: flex-start; }
.wijnblok__icoon { flex: 0 0 auto; width: 46px; }
.wijnblok__icoon svg { display: block; width: 100%; height: auto; }
.wijnblok h3 { margin-bottom: 0.35rem; }

/* De flessuggestie hoort bij de wijnstijl maar moet er duidelijk onder staan:
   de stijl is de afspraak, de fles is maar een voorbeeld. Vandaar het streepje
   ervoor in plaats van een eigen kaartje, dat zou te veel gewicht geven. */
.suggestie {
  margin: 0.6rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--goud);
  font-size: 0.92rem;
}
.suggestie__label {
  display: block;
  font-family: var(--letter-tekst);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 0.15rem;
}
.suggestie__naam { font-style: italic; }

/* Balk boven een conceptavond. Opvallend genoeg om niet te vergeten dat het
   nog niet publiek is, rustig genoeg om de pagina te kunnen beoordelen. */
.voorbeeldbalk {
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--goud);
  border-radius: 0.5rem;
  font-size: 0.92rem;
}
.voorbeeldbalk strong { color: var(--goud); }

.feitenlijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.feitenlijst > li {
  display: grid;
  gap: 0.1rem;
}
.feitenlijst dt,
.feitenlijst .feit__naam {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.feitenlijst dd,
.feitenlijst .feit__waarde {
  margin: 0;
  color: var(--inkt);
}

.gerecht {
  border-left: 2px solid var(--rand);
  padding-left: 1rem;
  margin-block: 1.25rem;
}

/* --- Mini-taste ---------------------------------------------------------- */

.taste { margin-top: 1.25rem; }
.taste__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
.taste__kop h4 {
  font-family: var(--letter-kop);
  font-size: 1.25rem;
  margin: 0;
}
.taste__raster {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 42em) {
  .taste__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.ingredienten {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ingredienten li {
  display: flex;
  gap: 0.6rem;
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.95rem;
}
.ingredienten li:last-child { border-bottom: 0; }
.hoeveelheid {
  flex: 0 0 5.5rem;
  color: var(--goud);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stap;
  display: grid;
  gap: 0.85rem;
}
.stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.75rem;
  align-items: start;
}
.stappen li::before {
  content: counter(stap);
  font-family: var(--letter-kop);
  color: var(--goud);
  font-size: 1rem;
  line-height: 1.6;
  text-align: right;
}
.stap__moment {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* --- Verhaal ------------------------------------------------------------- */

.verhaal {
  margin-top: 1.5rem;
  border-top: 1px solid var(--rand);
  padding-top: 1.25rem;
}

/* De verhaaltekst staat op leeswijdte, zo'n 73 tekens per regel, en dat moet
   zo blijven: breder leest slechter. Maar die kolom stond links in een blok
   van 1080 px, met bijna 500 px leegte rechts, terwijl de wijnrank eronder wel
   gecentreerd staat. Daardoor leek het een fout in plaats van een keuze.
   Nu staat het hele verhaalblok als één kolom in het midden. */
@media (min-width: 60em) {
  .verhaal {
    max-width: 38em;
    margin-inline: auto;
  }
  .verhaal .leeswijdte {
    max-width: none;
  }
}
.verhaal h4 {
  font-family: var(--letter-kop);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--goud);
  margin-bottom: 0.5rem;
}
.verhaal__bron {
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  margin-top: 0.75rem;
}
.verhaal--wacht {
  color: var(--inkt-zacht);
  font-size: 0.9rem;
  font-style: italic;
}

/* --- Boodschappen en draaiboek ------------------------------------------- */

/* Kolommen in plaats van een raster: de afdelingen verschillen sterk in
   lengte en vullen zo de breedte zonder grote gaten. */
.afdelingen {
  columns: 1;
  column-gap: 2.5rem;
}
@media (min-width: 42em) {
  .afdelingen { columns: 2; }
}
@media (min-width: 68em) {
  .afdelingen { columns: 3; }
}
.afdeling {
  break-inside: avoid;
  margin-bottom: 1.75rem;
}
.afdeling h3 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--letter-tekst);
  color: var(--goud);
  border-bottom: 1px solid var(--rand);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
}

/* Wat na het draaiboek komt krijgt lucht. De kaart met de muziektip stond er
   strak tegenaan, want een lijst heeft hier geen ondermarge en een kaart geen
   bovenmarge. Dezelfde maat als de regel "alles wat na een kaart komt" verderop
   in dit bestand. */
.draaiboek + * { margin-top: 1.5rem; }

.draaiboek {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
/* Het stipje dat hier stond is een vinkje geworden. Twee rondjes naast elkaar,
   een decoratief en een om aan te vinken, is er een te veel; en het vinkje zegt
   ook iets. Zonder javascript werkt het gewoon, het onthoudt alleen niets. */
.draaiboek__regel {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 1rem;
  align-items: start;
  margin: 0;
  cursor: pointer;
}
.draaiboek__vink {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.2rem 0 0;
  accent-color: var(--primary);
}
/* Wat gedaan is blijft staan maar valt naar achteren, net als in de
   boodschappenlijst. Weghalen zou je het overzicht kosten van wat er al was. */
.draaiboek__inhoud { display: block; min-width: 0; }
.draaiboek__regel--af { color: var(--inkt-zacht); }
.draaiboek__regel--af .draaiboek__wanneer { text-decoration: line-through; }
.draaiboek__wanneer {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
  margin-bottom: 0.1rem;
}

/* --- Ankers / tabbalk ---------------------------------------------------- */

/* De sprongen naar de stukken van een avond, met de deelknop erbij.
 *
 * Eén regel. Hiervoor stonden de zes sprongen in een rij die omsloeg en stond
 * de deelknop eronder, en dat las als een balk die niet paste. Op een telefoon
 * werden het drie of vier regels.
 *
 * Past hij niet, dan schuift hij zijwaarts. Dat is beter dan omslaan, want de
 * balk houdt zijn hoogte en de pagina eronder blijft waar hij stond. De
 * schuifbalk zelf blijft weg; op een aanraakscherm veeg je, en op een muis zie
 * je dat er meer is doordat een icoon half uit beeld loopt.
 */
.ankerbalk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 1rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Zodat de rand van een knop die net aan het begin of het eind staat niet
     tegen de rand van het scherm plakt. */
  scroll-padding-inline: 0.5rem;
}
.ankerbalk::-webkit-scrollbar { display: none; }

.ankers {
  display: flex;
  gap: 0.5rem;
}

/* Eén sprong: een icoon in een pil. Vierenveertig bij vierenveertig, want
   daar moet een duim op kunnen. */
.anker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
}
.anker .beheer-icoon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}
.anker:hover,
.anker:focus-visible {
  background: var(--primary);
  color: var(--inkt-op-goud);
}

/* Het woord staat in de pagina maar niet in beeld.
 *
 * Gemeten en niet gegokt: met de zeven woorden erbij is deze balk elfhonderd
 * pixels breed, en de bak waarin hij staat wordt nooit breder dan duizend-
 * tachtig. Op geen enkel scherm past hij dus met woorden op één regel.
 *
 * Het woord blijft wel in de html staan, dus een schermlezer leest het gewoon
 * voor. De muis krijgt het via title. Een icoon zonder naam is een raadsel, en
 * dat willen we nergens.
 */
.anker__woord {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Op een telefoon staan de pillen dichter op elkaar. Zo passen de zeven er
   vanaf een scherm van driehonderdvijfenzeventig op één regel, en dat is de
   maat van de meeste telefoons.
 *
 * Daaronder lukt het niet meer. Zeven keer vierenveertig is driehonderdacht, en
 * kleiner mogen ze niet worden want daar moet een duim op kunnen. Op zulke
 * schermen slaat de balk om naar twee korte regels.
 *
 * Omslaan en niet schuiven, met opzet. Een vak dat schuift maakt in Chromium
 * de hele pagina breder dan het scherm, en dan rekt de balk onderin mee. Twee
 * korte regels op de allerkleinste telefoon is het kleinste kwaad. */
@media (max-width: 30em) {
  .ankerbalk,
  .ankers { gap: 0.25rem; }
}
@media (max-width: 23em) {
  .ankerbalk,
  .ankers { flex-wrap: wrap; }
}

/* De knop om een avond te delen, met de melding ernaast. Hij staat onder de
   rij met sprongen en niet erin: springen naar een stuk van de pagina is iets
   anders dan de avond doorsturen. De melding staat ernaast en niet eronder,
   anders springt de pagina een regel op het moment dat je erop drukt. */
.deelrij {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 1rem;
}
.deelrij p { margin: 0; }
/* In de ankerbalk staat de deelknop naast de sprongen. De ruimte onder die rij
   hoort dan bij de balk en niet bij de knop, anders staat hij een paar pixels
   hoger dan de rest. */
.ankerbalk .deelrij { padding-bottom: 0; }
/* Onder een artikel staat hij gecentreerd, net als de twee knoppen erboven. */
.deelrij--midden { justify-content: center; }

/* De regel boven de titel van een stuk: links de soort en de datum, rechts de
   deelknop. Die knop stond onderaan, en wie hem zoekt omdat de titel iemand
   aangaat moest eerst langs het hele stuk. Hij neemt hier geen regel in, want
   hij staat naast iets dat er toch al stond. */
.artikelkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}
/* De ruimte onder een deelrij hoort bij de knop als hij een pagina afsluit.
   Hier staat hij in een regel met een label ernaast, en dan duwt die ruimte de
   twee uit elkaar. */
.deelrij--kop { padding-bottom: 0; }

/* --- Formulieren --------------------------------------------------------- */

.veld { margin-bottom: 1.1rem; }
.veld > label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-bottom: 0.35rem;
}
.veld__hulp {
  font-size: 0.82rem;
  color: var(--inkt-zacht);
  margin-top: 0.3rem;
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='date'],
input[type='url'],
select,
textarea {
  /* Blok en niet inline-block. Een veld op inline-block mag zich in Safari
     naar zijn eigen inhoud voegen, en dan staat een keuzelijst met korte
     opties smaller dan het datumveld erboven terwijl allebei op 100 procent
     staan. In Chromium zie je dat verschil niet, dus het valt pas op een
     telefoon op. */
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  min-height: 2.9rem;
  background: var(--vlak);
  color: var(--inkt);
  border: 1px solid var(--rand-veld);
  border-radius: var(--ronding-klein);
  font-family: var(--letter-tekst);
  font-size: 1rem;
  line-height: 1.4;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

/* Een bestandsveld zag eruit als een stuk browser dat per ongeluk op de pagina
   stond: een wit knopje met "Bestand kiezen" en daarnaast grijze tekst, naast
   velden die wel bij de site horen. Het hoort dezelfde doos te zijn als de
   andere velden, met het knopje erin als een kleine knop.

   ::file-selector-button werkt in alle browsers die deze site aanhoudt. Lukt
   het ergens niet, dan staat er het gewone knopje van de browser in een doos
   die wel klopt, en dat is nog steeds beter dan hiervoor. */
input[type='file'] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  min-height: 2.9rem;
  background: var(--vlak);
  color: var(--inkt-zacht);
  border: 1px solid var(--rand-veld);
  border-radius: var(--ronding-klein);
  font-family: var(--letter-tekst);
  font-size: 0.92rem;
  line-height: 1.6;
}
input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.35rem 0.9rem;
  background: transparent;
  color: var(--goud);
  border: 1px solid var(--goud);
  border-radius: 999px;
  font-family: var(--letter-tekst);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
input[type='file']:hover::file-selector-button,
input[type='file']:focus-visible::file-selector-button {
  background: var(--goud);
  color: var(--inkt-op-goud);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

input::placeholder,
textarea::placeholder { color: var(--inkt-zacht); opacity: 0.8; }

/* Een datumveld tekent zichzelf in Safari als een eigen bedieningselement met
   een minimumbreedte die groter kan zijn dan het vak waar hij in staat. Dan
   steekt hij buiten de kaart uit terwijl de velden eronder keurig binnen de
   rand blijven. Met de eigen tekening eraf is het weer een gewoon veld dat
   zich aan width en box-sizing houdt. De datumkiezer blijft gewoon werken;
   alleen het uiterlijk komt nu van ons. */
input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
}
/* Het kalendertje aan de rechterkant van Chrome valt met appearance: none weg.
   Terugzetten, anders zie je niet dat het een datumveld is. */
input[type='date']::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
  filter: invert(0.75);
}

/* Het vinkje is zelf een label in een .veld, maar de toestemmingstekst is
   lopende tekst en geen veldnaam in kapitalen. */
.veld > label.vink,
.vink {
  display: grid;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--inkt);
  margin-bottom: 0;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  align-items: start;
  line-height: 1.5;
}
.vink input[type='checkbox'],
.vink input[type='radio'] {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.1rem 0 0;
  /* Ook voor keuzerondjes, anders staan die in het blauw van de browser
     naast een vinkje in de kleur van de site. */
  accent-color: var(--primary);
}

/* Twee keuzerondjes onder elkaar horen bij elkaar te staan, niet met de
   ruimte van twee losse velden ertussen. */
.vink + .vink {
  margin-top: 0.5rem;
}

.honingpot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.velden-twee {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 34em) {
  .velden-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bericht {
  border: 1px solid var(--rand);
  border-left: 3px solid var(--goud);
  border-radius: var(--ronding-klein);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  background: var(--vlak-kaart);
}
.bericht--fout { border-left-color: var(--stijl-rood); }

.fouten {
  margin: 0;
  padding-left: 1.1rem;
}

/* --- 18+-poort ----------------------------------------------------------- */

.poort {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--rand-ruimte);
  text-align: center;
  background: var(--background);
}
.poort__binnen { max-width: 30rem; }
.poort .merk-staand { margin-bottom: 2.25rem; }
.poort h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.poort .knoprij { justify-content: center; margin-top: 1.75rem; }
/* Een regel onder het formulier, zoals "Wachtwoord vergeten?". Een alinea heeft
   alleen een marge ónder zich, en als laatste kind haalt de pagina die ook nog
   weg. Zonder deze regel plakt zo'n link dus tegen de inlogknop aan. */
.poort form + p { margin-top: 1.25rem; }

.poort__klein {
  margin-top: 2.25rem;
  font-size: 0.82rem;
  color: var(--accent);
}

/* --- Kookmodus ----------------------------------------------------------- */

.koken {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vlak);
  color: var(--inkt);
}
.koken__kop {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  padding-block: 0.75rem;
}
.koken__kopbinnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.koken__voortgang {
  height: 3px;
  background: var(--rand);
}
.koken__voortgang span {
  display: block;
  height: 100%;
  background: var(--goud);
  transition: width 0.2s ease;
}
.koken__inhoud {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  padding-block: clamp(1.5rem, 6vw, 3rem);
}
.koken__moment {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--goud);
}
.koken__taste {
  font-family: var(--letter-kop);
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  margin: 0.4rem 0 1.25rem;
}
.koken__tekst {
  font-size: clamp(1.3rem, 5.5vw, 2rem);
  line-height: 1.45;
  font-weight: 300;
}
.koken__voet {
  position: sticky;
  bottom: 0;
  background: var(--vlak);
  border-top: 1px solid var(--rand);
  padding-block: 0.9rem;
}
.koken__voetbinnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.koken__teller {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.koken .knop { min-height: 3.2rem; }

/* Op een scherm van 320 px passen Vorige, de teller en Volgende niet naast
   elkaar: samen 336 px in een vak van 316. Krimpen helpt niet, want een knop
   kan niet smaller dan zijn eigen woord plus de padding. Dus hier minder
   padding en een kleinere tussenruimte. De hoogte blijft, want daar tik je op. */
@media (max-width: 22.5em) {
  .koken__voetbinnen { gap: 0.5rem; }
  .koken__voet .knop { padding-inline: 1rem; }
}
.koken__wakker {
  font-size: 0.78rem;
  color: var(--inkt-zacht);
}

/* --- Printkeuze ---------------------------------------------------------- */

.printkeuze {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
/* minmax(0, 1fr) en niet 1fr. Een kolom van 1fr mag niet smaller worden dan
   zijn inhoud, en de knop "Open de boodschappenlijst" breekt niet af. Daardoor
   waren de vier kaarten 236, 264, 276 en 358 breed en liep de pagina dertien
   pixels buiten het scherm: op een laptop scrolde de hele printpagina opzij.
   Met minmax(0, ...) zijn de kolommen echt gelijk, en mag het label van een
   knop hieronder over twee regels. */
@media (min-width: 46em) {
  .printkeuze { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .printkeuze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.printkeuze .kaart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.printkeuze .knop {
  white-space: normal;
  text-wrap: balance;
}
.printkeuze .knop { margin-top: auto; }

/* --- Beheer -------------------------------------------------------------- */

.beheer-kop {
  border-bottom: 1px solid var(--line);
  padding-block: 0.9rem;
  background: var(--vlak-diep);
}
.beheer-kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Het beheermenu, in twee regels.

   Het was één rij met twaalf namen erin, en die rij paste op geen enkel scherm.
   Nagemeten op een venster van 1440: 1339 pixels nodig, 1336 beschikbaar. Dat
   was al twee keer smaller gemaakt en kocht allebei de keren ruimte voor
   precies één onderdeel erbij.

   Nu staan er vijf groepen bovenin, en de groep waar je in zit zet zijn
   onderdelen eronder. De bovenste regel verandert niet meer van breedte als er
   een scherm bij komt, want dat komt in een groep terecht. */
.beheer-nav {
  display: flex;
  flex-direction: column;
  /* Kleiner dan de 0.6rem die hier stond, want de links van allebei de regels
     hebben er zelf ruimte omheen gekregen, voor het streepje boven en de
     vulling onder. */
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.beheer-nav__groepen,
.beheer-nav__onder {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.beheer-nav a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.beheer-nav__kort { display: none; }
.beheer-nav a:hover,
.beheer-nav a.aan,
.beheer-nav a[aria-current='page'] { color: var(--primary); }

/* De groep waar je in zit krijgt een streepje onder zich, zoals een tabblad.

   Daar stond eerst een lijn tussen de twee regels, over de hele breedte. Die
   scheidde ze wel, maar hij zei niet bij welke groep de regel eronder hoort, en
   met de lijn onder de kop erbij waren het twee strepen onder elkaar in een kop
   van honderdvijftig pixels. Een streepje onder alleen de actieve groep doet
   allebei: het scheidt de twee regels en het wijst aan waar de onderste regel
   vandaan komt.

   Onder de link en niet onder de tekst, dus het telbolletje valt eronder. Dat
   is met opzet, want het bolletje hoort bij die groep. */
.beheer-nav__groepen a {
  position: relative;
  padding-bottom: 0.5rem;
}
.beheer-nav__groepen a.aan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--goud);
}

/* De tweede regel is de regel waar je in werkt, dus hij is rustiger dan de
   groepen erboven: kleiner, minder spatiëring, geen hoofdletters. Zo zie je in
   één oogopslag welke van de twee de indeling is en welke de inhoud.

   Waar je bent krijgt hier een zachte vulling en geen streepje. Dat is met
   opzet een ander merkteken dan op de regel erboven, want het zijn twee
   verschillende vragen. Het streepje zegt in welke groep je zit, de vulling
   zegt op welk scherm je staat. Waren ze hetzelfde, dan stonden er twee
   dezelfde merktekens boven elkaar en moest je lezen welke waarvan was.

   Elke link krijgt dezelfde ruimte eromheen en niet alleen de actieve, anders
   schuift de rij op zodra je ergens anders heen gaat. De rij zelf schuift die
   ruimte weer terug, zodat de eerste naam nog steeds onder de eerste groep
   hierboven begint. */
.beheer-nav__onder {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  gap: 0.35rem;
  margin-left: -0.7rem;
}
.beheer-nav__onder a {
  color: var(--inkt-zacht);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.beheer-nav__onder a:hover { color: var(--primary); }
.beheer-nav__onder a:hover:not([aria-current='page']) {
  background: color-mix(in srgb, var(--inkt-zacht) 12%, transparent);
}
.beheer-nav__onder a[aria-current='page'] {
  color: var(--primary);
  background: color-mix(in srgb, var(--goud) 14%, transparent);
}

/* Onder de 75em neemt de balk onderin het over. Twee menu's tegelijk is
   verwarrend, en in de kop paste het toch al niet: op een telefoon braken zes
   items over drie regels, en op 900 breed zakten de negen van nu naar twee
   regels. De kop was daar 226 pixels hoog, een kwart van het scherm; met de
   balk eronder is hij 74. */
@media (max-width: 74.99em) {
  .beheer-nav { display: none; }
}

/* Daarboven staat het menu er wel, en dan paste het met zijn negen items nooit
   naast het logo. Het zakte dus naar een eigen regel, en het rondje van je
   account zakte daar weer onder: drie regels kop, honderdvijfentachtig pixels,
   voordat er iets van het scherm zelf begon. Het menu krijgt nu zijn eigen
   regel toegewezen en het rondje gaat naar boven, naast het logo. Dat scheelt
   een regel zonder dat er iets uit de kop hoeft. */
@media (min-width: 75em) {
  .beheer-kop__binnen .profielmenu { order: 2; }
  .beheer-nav {
    order: 3;
    flex: 1 0 100%;
  }
}

/* De beheerkant is een werkscherm met tabellen en mag breder zijn dan een
   leespagina. Dat kwam erbij toen het menu niet meer paste; het menu staat
   inmiddels in groepen, maar de tabellen hebben de breedte nog steeds nodig. */
.beheer-kop .bak,
.beheer-inhoud .bak { max-width: 86rem; }

/* De korte namen uit de balk onderin stonden hier ook, voor schermen waarop de
   lange namen niet pasten. Vijf groepsnamen passen overal, dus dat is niet
   meer nodig. Ze blijven in het sjabloon staan voor de balk onderin. */
@media (max-width: 85.99em) {
  .beheer-nav__groepen { gap: 1rem; }
}

/* --- Profielmenu rechtsboven --------------------------------------------- */

/* Een <details>, zodat het ook opengaat zonder javascript. Het scriptje doet
   alleen het dichtklappen bij een klik ernaast. */
.profielmenu {
  position: relative;
  margin-left: auto;
}
.profielmenu > summary {
  list-style: none;
  cursor: pointer;
  display: block;
  /* line-height 0, anders zet de regelhoogte een streepje ruimte onder het
     rondje en staat het niet meer op het midden van de balk. */
  line-height: 0;
  border-radius: var(--pil);
}
.profielmenu > summary::-webkit-details-marker { display: none; }
.profielmenu > summary::marker { content: ''; }
.profielmenu > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.profielpaneel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  z-index: 60;
  min-width: 16rem;
  padding: 0.5rem;
  background: var(--vlak-kaart);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}
.profielpaneel__kop {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 0.4rem;
}
.profielpaneel__kop strong,
.profielpaneel__kop small { display: block; }
.profielpaneel__kop small {
  color: var(--inkt-zacht);
  font-size: 0.8rem;
  /* Een lang e-mailadres mag het paneel niet breder maken dan het scherm. */
  overflow-wrap: anywhere;
}
.profielpaneel form { margin: 0; }
/* :not(.knop), want in het clubpaneel staat één echte knop. Zonder die
   uitzondering trekken deze regels hem plat tot een menuregel: geen rand, geen
   rondje, links uitgelijnd. */
.profielpaneel a:not(.knop),
.profielpaneel .menuknop {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem;
  border: 0;
  border-radius: var(--ronding-klein);
  background: none;
  color: var(--inkt);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.profielpaneel a:not(.knop):hover,
.profielpaneel .menuknop:hover { background: var(--vlak-diep); }
.profielpaneel .beheer-icoon { color: var(--goud); }

/* --- Het rondje met een foto of initialen -------------------------------- */

.avatar {
  display: grid;
  place-items: center;
  border-radius: var(--pil);
  object-fit: cover;
  background: var(--vlak-diep);
  border: 1px solid var(--rand);
  /* Een rondje mag nooit platgedrukt worden door de flex ernaast. */
  flex: none;
}
.avatar--letters {
  background: var(--goud);
  color: var(--inkt-op-goud);
  font-family: var(--letter-kop);
  font-weight: 700;
  letter-spacing: 0.02em;
  border-color: transparent;
}
.avatar--klein { width: 2.25rem; height: 2.25rem; font-size: 0.85rem; }
.avatar--groot { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.avatar--xl { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; }

/* Een foto in het rondje. De span is het rondje, de img vult hem helemaal:
   zo hoeft het scriptje alleen een img erin te hangen en verandert er verder
   niets aan de maten. */
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* --- De balk boven een clubpagina ----------------------------------------- */

/* Dezelfde vorm als de beheerbalk, maar dan voor een club. Wie je bent staat
   op dit toestel; er zijn geen accounts in een club. */
.clubbalk {
  border-bottom: 1px solid var(--rand);
  background: var(--vlak-diep);
}
.clubbalk__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}
.clubbalk__links {
  display: flex;
  align-items: center;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  min-width: 0;
}
/* Geen streep onder het logo: de tekst eronder hoort bij het beeldmerk en een
   onderstreepte slagzin leest als een link die het niet is. */
.clubbalk__logo { display: inline-flex; align-items: center; text-decoration: none; }
/* De clubnaam staat naast het logo en is de weg terug naar de clubpagina. Op
   een telefoon valt hij onder het logo in plaats van het weg te duwen. */
.clubbalk__naam {
  font-family: var(--letter-kop);
  font-size: 1.05rem;
  color: var(--inkt);
  text-decoration: none;
  border-left: 1px solid var(--rand);
  padding-left: 1.25rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.clubbalk__naam:hover,
.clubbalk__naam:focus-visible { color: var(--primary); }
@media (max-width: 34em) {
  .clubbalk__naam { border-left: 0; padding-left: 0; width: 100%; }
  /* De slagzin breekt op een smal scherm over twee regels en maakt de balk
     anderhalf keer zo hoog. Het beeldmerk en het woordmerk zeggen genoeg. */
  .clubbalk .tagline { display: none; }
}

/* De links naar de rest van de site, onderin het paneel. */
.profielpaneel__links {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rand);
}

/* Het paneel van een club is een formulier en geen rijtje links, dus het mag
   wat breder en heeft lucht tussen de velden nodig. */
.profielpaneel--ruim {
  min-width: min(20rem, calc(100vw - 2rem));
  padding: 1rem;
}
.profielpaneel--ruim .veld + .veld { margin-top: 0.75rem; }
.profielpaneel--ruim .knoprij { margin-top: 1rem; }
.profielpaneel--ruim .profielpaneel__links p { margin: 0 0 0.75rem; }
.profielpaneel--ruim .profielpaneel__links .knop { margin-bottom: 0.25rem; }

/* Wie je bent op dit toestel: het rondje, je naam, en de foto eronder. */
.mijnkaart {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.25rem 0.1rem 1rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: 1rem;
}
.mijnkaart__wie { min-width: 0; }
.mijnkaart__wie strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.mijnkaart__wie small {
  display: block;
  color: var(--inkt-zacht);
  font-size: 0.8rem;
}
/* Twee stille knopjes onder je naam. Het bestandskiezertje van de browser zelf
   staat hier verborgen; deze label is wat je ziet en wat je aanklikt. */
.mijnkaart__foto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.85rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}
/* Het veld is weggeklipt, dus een focusrand erop ziet niemand. Hij hoort op de
   label die ernaast staat, anders is dit met het toetsenbord een blinde knop. */
.mijnkaart__foto input:focus-visible + label {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Een vaste regel, ook als er niets staat: anders springt het paneel omhoog
   zodra er een melding verschijnt en zie je de knop verspringen onder je
   vinger. */
.mijnkaart__melding {
  min-height: 1.4rem;
  margin: 0.5rem 0 0;
}

.beheer-icoon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

/* --- De balk onderin ------------------------------------------------------ */

/* Onderin, waar je duim is. Fixed en niet sticky: sticky laat hem meeschuiven
   tot de onderkant van de pagina en dan staat hij er juist niet als je hem
   nodig hebt. */
.onderbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  background: var(--vlak-balk);
  border-top: 1px solid var(--rand-balk);
  /* Een schaduw naar boven, zodat de balk op de pagina ligt in plaats van
     erin op te gaan. Op een telefoon in het donker is dat het verschil
     tussen een balk en een strook tekst onderaan. */
  box-shadow: 0 -0.5rem 1.25rem rgb(0 0 0 / 35%);
  /* De strook onder de balk op een telefoon zonder knop. Zonder dit valt het
     laatste stukje van de knoppen achter de veegbalk van het toestel. Met een
     ondergrens, want zet je de site als app op je beginscherm, dan loopt de
     pagina tot de onderrand van het glas en plakken de woorden tegen de rand. */
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
  /* En aan de zijkanten, want de hoeken van een telefoonscherm zijn rond. De
     buitenste twee knoppen stonden daar met hun woord in de bocht. */
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
}
.onderbalk a {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.15rem 0.45rem;
  color: var(--inkt-zacht);
  text-decoration: none;
  text-align: center;
}
.onderbalk a[aria-current='page'] { color: var(--primary); }
.onderbalk a[aria-current='page'] .beheer-icoon { color: var(--primary); }
.onderbalk .beheer-icoon { width: 1.35rem; height: 1.35rem; }
.onderbalk__icoon {
  position: relative;
  display: block;
  line-height: 0;
}
.onderbalk__naam {
  /* Geen kapitalen hier, anders dan in de balk bovenin. Kapitalen met spatiëring
     zijn een derde breder, en op een scherm van 320 is er per knop maar achtenveertig
     pixels. "Interesse" liep er dan overheen. Afbreken mag niet: dan worden de
     knoppen ongelijk hoog en springt de balk. */
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
/* Het getal zweeft op de hoek van het icoon in plaats van ernaast, want naast
   past het niet in een knop van vijftig pixels. */
.telbol--zwevend {
  position: absolute;
  top: -0.35rem;
  left: calc(50% + 0.25rem);
  margin: 0;
}

/* De balk ligt over de pagina heen, dus de pagina moet onderaan plaatsmaken.
   Anders staat de laatste knop van een formulier eronder. */
body.heeft-onderbalk { padding-bottom: 4.75rem; }

/*
   Als de site als app op het beginscherm staat.

   Dan is er geen adresbalk en geen rand van de browser, en loopt de pagina
   door tot het glas. De woorden onder de knoppen kwamen daardoor vlak boven
   de onderrand uit te komen, en in de ronde hoeken van het scherm liep de
   balk er aan weerszijden uit. Een telefoon die zijn eigen strook meldt
   krijgt die; de rest krijgt deze ondergrens.
*/
@media (display-mode: standalone), (display-mode: fullscreen) {
  .onderbalk { padding-bottom: max(0.8rem, env(safe-area-inset-bottom, 0px)); }
  body.heeft-onderbalk { padding-bottom: 5.1rem; }
}

/* Het paneel achter "Meer". Het klapt omhoog vanaf de balk, want naar beneden
   is daar het scherm op. Hoogstens tweederde hoog: daarboven dekt een menu de
   pagina af en weet je niet meer waar je was. */
.onderbalk__meer { position: relative; flex: 1; min-width: 0; }
.onderbalk__meer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.15rem 0.45rem;
  min-height: 2.9rem;
  justify-content: center;
  color: var(--inkt-zacht);
  text-align: center;
}
.onderbalk__meer > summary::-webkit-details-marker { display: none; }
.onderbalk__meer > summary::marker { content: ''; }
.onderbalk__meer[open] > summary,
.onderbalk__meer > summary[aria-current] { color: var(--primary); }
.onderbalk__meer[open] > summary .beheer-icoon,
.onderbalk__meer > summary[aria-current] .beheer-icoon { color: var(--primary); }

.onderbalk__paneel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  /* Niet tegen de rand van het scherm aan: op een telefoon staat daar de
     duimrand van het toestel zelf. */
  right: 0.4rem;
  z-index: 60;
  min-width: max(12rem, 48vw);
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  background: var(--vlak-kaart);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  box-shadow: 0 -0.75rem 2rem rgb(0 0 0 / 45%);
}
/* In het paneel staat het woord naast het icoon en niet eronder. In de balk
   zelf moet het eronder, want daar is per knop zestig pixels breed; hier is er
   een hele regel. Let op: .onderbalk a hierboven zet flex-direction, flex en
   text-align, en die drie moeten hier dus terug, anders blijven ze staan. Met
   kolommen werd elke regel achtenzeventig pixels hoog en paste het paneel niet
   meer op een klein scherm. */
.onderbalk__paneel a {
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--ronding-klein);
  color: var(--inkt);
  text-decoration: none;
  font-size: 0.95rem;
  min-height: 2.75rem;
}
.onderbalk__paneel a:hover { background: var(--vlak-diep); }
.onderbalk__paneel a[aria-current='page'] { color: var(--primary); }
.onderbalk__paneel .beheer-icoon { color: var(--goud); }
.onderbalk__paneel .telbol { margin-left: auto; }

@media (min-width: 56em) {
  .onderbalk { display: none; }
  body.heeft-onderbalk { padding-bottom: 0; }

  /* De balk van een club is geen noodoplossing voor een smal scherm: hij ís de
     navigatie van die pagina. Op een breed scherm blijft hij dus staan, maar
     niet als streep over de volle breedte. Dan wordt het een losse pil die
     midden onder de pagina zweeft. */
  .onderbalk--altijd {
    display: flex;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 1rem;
    width: min(30rem, calc(100% - 2rem));
    border: 1px solid var(--rand);
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.25rem -0.9rem rgba(0, 0, 0, 0.6);
  }
  body.heeft-onderbalk--altijd { padding-bottom: 6rem; }

  /* De beheerbalk blijft langer staan dan 56em. Tussen daar en 75em past het
     menu bovenin niet op één regel: op 900 breed zakt het naar twee regels en
     wordt de kop 226 pixels hoog, een kwart van het scherm. Met de balk eronder
     blijft de kop 74. */
  .onderbalk--beheer { display: flex; }
  body.heeft-onderbalk--beheer { padding-bottom: 4.25rem; }
}

@media (min-width: 75em) {
  .onderbalk--beheer { display: none; }
  body.heeft-onderbalk--beheer { padding-bottom: 0; }
}

/* Waar je nu bent. Het scriptje zet dit terwijl je scrollt; zonder javascript
   staat er niets opgelicht en werken de sprongen gewoon. */
.onderbalk a[aria-current] { color: var(--primary); }
.onderbalk a[aria-current] .beheer-icoon { color: var(--primary); }

/* Een tikdoel van 44 pixels, ook als het woord eronder klein is. Met alleen de
   padding was de knop 41 hoog en miste je hem net op een telefoon.
   Alleen de knoppen in de balk zelf (>a), niet de regels in het paneel achter
   "Meer". Die staan naast elkaar en niet gecentreerd, en deze regel staat
   verderop in het bestand dan die van het paneel, dus zonder > won hij. */
.onderbalk > a { min-height: 2.9rem; justify-content: center; }
.onderbalk a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -3px;
  border-radius: 0.6rem;
}

/* Deze twee regels lijken dubbelop met print.css, en dat zijn ze niet.
   print.css wordt geladen door de layouts donker, kaal en print, maar niet door
   de layout van het beheer. Daar is dit dus het enige wat er op papier
   weggehaald wordt. Haal het niet weg omdat het elders ook staat. */
@media print {
  .onderbalk,
  .profielmenu { display: none !important; }
}

/* --- Tikken met een vinger ------------------------------------------------ */

/* Een vingertop is een stuk grover dan een muisaanwijzer. Op een toestel zonder
   muis is alles waar je op tikt daarom minstens vierenveertig pixels hoog. Dat
   is geen smaakkwestie: een knop van zevenentwintig pixels mis je echt, en dan
   druk je op de knop ernaast.
   Alleen bij pointer: coarse, want met een muis zou dit de dichte tabellen in
   het beheer onnodig uit elkaar trekken.
   Links midden in een lopende zin blijven zoals ze zijn. Die uit elkaar trekken
   maakt de regelafstand rommelig, en zo'n link lees je eerder dan dat je hem
   aantikt. */
@media (pointer: coarse) {
  .kop__nav a,
  .voet__links a,
  /* De naam van een club op Mijn clubs. Dat is de link waarvoor je dat scherm
     opent, en hij was tweeëndertig pixels hoog omdat een kop zo hoog is als
     zijn regel. Nagemeten met schermtest op 390 breed. */
  .clublijst h2 a,
  /* De titel van een regel in een leeslijst. Dat is de link waarvoor die lijst
     bestaat, en hij was twintig pixels hoog omdat een link om vette tekst niet
     meer is dan die tekst. Nagemeten op 23-10-2026 op 768 breed, op de pagina
     van een wijn bij "meer rood op onze lijst". Hetzelfde geldt voor de
     wegwijzers op de voorpagina, want die delen de opmaak. */
  .leeslijst > li > a,
  .wegwijzers > li > a,
  .clubbalk__naam {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* De ruimte tussen de links in de voet mag hier weg: de regel hierboven maakt
     er blokken van vierenveertig pixels van, en die staan al los genoeg. Met de
     gap erbij werd de voet op een telefoon honderd pixels langer zonder dat het
     er rustiger van werd. Met een muis is een link maar twintig pixels hoog en
     is die gap wél nodig, dus hij staat hier en niet bij .voet__links zelf. */
  .voet__links { gap: 0; }
  .knop--klein,
  .momentknop,
  .menuknop,
  .profielpaneel a { min-height: 2.75rem; }

  /* Een lijst waarin elke regel helemaal uit een link bestaat. Die regels
     waren achttien pixels hoog op het scherm van een beeld, bij "waar hij
     staat". */
  .bestemmingen a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Een kop die een link is, is een bestemming en geen zin. In de agenda van
     een club en in de tijdlijn van wat jullie deden waren die tweeentwintig en
     vijfentwintig pixels hoog. Ruimte boven en onder een inline-link telt niet
     mee voor de regelhoogte, dus het tikvlak wordt vierenveertig pixels zonder
     dat de kaart langer wordt. */
  .clubtijdlijn__titel a { padding-block: 0.7rem; }

  /* De link in de stickerregel onder een fles. De knop ernaast is een
     .knoplink en heeft verderop zijn eigen regel. */
  .stickerregel a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Een alinea die helemaal uit één link bestaat is geen lopende tekst maar
     een bestemming: "Wachtwoord vergeten" onder het inlogformulier, het
     e-mailadres op de contactkaart. Die waren achttien en twintig pixels hoog.
     Een link midden in een zin blijft met rust: die hoef je niet als knop te
     kunnen raken, en hem oprekken zou de regelafstand uit elkaar trekken. */
  p > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* De tabellen in het beheer hadden deze behandeling nooit gehad, terwijl de
     publieke kant hem al jaren heeft. Op een telefoon waren de sorteerkoppen
     veertien pixels hoog en de pijltjes om een avond te verplaatsen
     zevenendertig. Die pijltjes zijn precies waar je het verkeerde raakt en
     de verkeerde avond verschuift.

     Alleen deze vier, en niet "elke link in een tabel": een tabelrij die
     overal vierenveertig pixels hoog wordt is geen lijst meer maar een trap,
     en dan zie je er drie op een scherm. */
  thead th a,
  .lijst__titel,
  /* Een cel die helemaal uit één link bestaat is net als zo'n alinea een
     bestemming: de titel van een artikel, het e-mailadres van een account.
     Twee lijsten gebruiken daar .lijst__titel voor en twee niet, en die laatste
     waren negentien pixels hoog. */
  td > a:only-child,
  /* In je kast en je archief staat onder die link soms een notitie, dus hij is
     niet het enige kind van de cel en viel buiten de regel hierboven. Hij is
     wel het enige wat je aantikt in die rij, naast de knopjes rechts. */
  .lijst--kast td > a,
  .lijst--archief td > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .status--wacht {
    min-height: 2.75rem;
  }

  /* Het regeltje in de boodschappenlijst. Dit wordt afgestreept in een winkel,
     met een mandje aan je arm en een telefoon in één hand. Dertig pixels is dan
     te weinig, ook al is het hele regeltje het klikgebied. */
  .boodschap {
    min-height: 2.75rem;
    align-content: center;
  }

  /* Een knop die eruitziet als een link, en een uitklapper. Allebei net te laag
     om zeker te raken. Veertig stond hier eerst, en dat is vier minder dan
     overal elders op de site; een halve knop verschil zonder reden. */
  .knoplink { min-height: 2.75rem; }
  details > summary { min-height: 2.75rem; }

  /* Het rondje rechtsboven blijft even groot; het is het tikgebied eromheen dat
     groter wordt. Een min-height zou het rondje uit het midden van de balk
     duwen, want dit is het enige element in die kolom.
     De sitekop heeft hier zijn eigen regel voor; die staat verderop, bij de
     regel die hem anders zou overschrijven. */
  .profielmenu > summary {
    min-height: 0;
    padding: 0.25rem;
    margin: -0.25rem;
  }

  /* De inhoudsopgave boven de privacyverklaring en de voorwaarden. Dat is een
     menu, geen lopende tekst: acht regels van negentien pixels onder elkaar
     tikt niet. */
  .inhoudsopgave a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
  .inhoudsopgave li { margin-bottom: 0; }
}

/* Een pijl die nergens heen kan. Zonder dit ziet hij er net zo uit als de
   andere en klik je er tien keer op zonder dat er iets gebeurt. */
.rijknoppen .knop[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Knoppen achter elkaar in een tabelrij. Elk formulier is een blok, dus zonder
   deze regel staan Bewerken, Kopiëren en Weghalen onder elkaar en wordt de rij
   drie keer zo hoog. */
.rijknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.rijknoppen form { margin: 0; }

/* --- Icoonknoppen in een tabelrij ----------------------------------------- */

.rijacties {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Niet afbreken: drie icoontjes onder elkaar maken de rij drie keer zo hoog,
     en de tabel schuift zelf als het niet past. */
  flex-wrap: nowrap;
}
.rijacties form { margin: 0; }

.rijactie {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--pil);
  background: none;
  color: var(--accent);
  cursor: pointer;
}
/* Op een aanraakscherm groter. Deze regel moet hier staan en niet bij de
   andere tikdoelen hierboven: .rijactie zet daar een eigen width en height
   neer, en die staat verderop in het bestand, dus daar verloor hij van. Dat
   is de derde keer dat die val toeslaat; vandaar deze opmerking.

   Het gaat hier om de pijltjes waarmee je een avond een plek omhoog of omlaag
   schuift. Zevenendertig pixels is precies klein genoeg om de verkeerde te
   raken, en dan verschuift de verkeerde avond. */
@media (pointer: coarse) {
  .rijactie {
    width: 2.75rem;
    height: 2.75rem;
  }
}

.rijactie:hover {
  color: var(--primary);
  border-color: var(--rand);
}
/* Een icoonknop heeft geen tekst om op te focussen, dus de ring moet duidelijk
   zijn: met toetsenbord is dit het enige wat zegt waar je bent. */
.rijactie:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.rijactie .beheer-icoon { width: 1.15rem; height: 1.15rem; }

/* Weghalen wordt pas rood als je erboven hangt. Altijd rood zou het de
   opvallendste knop van de rij maken, en dat is precies verkeerd om. */
.rijactie--weg:hover { color: var(--stijl-rood); }

/* De avond starten is het enige knopje in een rij dat iets begint in plaats
   van iets bijwerkt, en het is maar bij één rij tegelijk te doen. Daarom staat
   hij in de kleur van een knop en de rest niet. */
.rijactie--hoofd {
  color: var(--goud);
  border-color: var(--goud);
}
.rijactie--hoofd:hover {
  background: var(--goud);
  color: var(--inkt-op-goud);
}

/* Alles op één regel. De tabel schuift zelf binnen .tabel-omhulsel als het
   niet past, en dat is beter dan een rij die twee keer zo hoog wordt omdat de
   derde knop eronder valt. */
.rijknoppen--eenregel {
  flex-wrap: nowrap;
  gap: 0.9rem;
  white-space: nowrap;
}

/* --- De profielpagina ----------------------------------------------------- */

.profielkaart__kop {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rand);
}
.profielkaart__naam {
  font-family: var(--letter-kop);
  font-size: 1.3rem;
  margin: 0.15rem 0 0.1rem;
}
.profielkaart__fotoweg { margin-top: 0.75rem; }

/* position: relative is hier geen opmaak maar een hek. Een element met
   position: absolute zoekt zijn houvast bij de dichtstbijzijnde ouder die zelf
   gepositioneerd is. Zonder deze regel is dat de pagina, en dan ontsnapt zo'n
   element uit het schuifvenster en duwt het de hele pagina breder dan het
   scherm. Dat gebeurde met de verborgen kop "Bewerken" in de rondelijst. */
.tabel-omhulsel {
  overflow-x: auto;
  position: relative;
}
table.lijst {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.lijst th,
table.lijst td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rand);
  /* Midden en niet boven. In de lijst met thema-avonden is de eerste kolom
     twee regels hoog en de rest één, en dan hing alles aan de bovenkant van
     de rij in plaats van er netjes tegenover te staan. */
  vertical-align: middle;
}
table.lijst th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  white-space: nowrap;
}

/* --- Ritme in het beheer -------------------------------------------------- */

/* Een kop had geen ruimte boven zich en een tabel of kaartenrij geen ruimte
   eronder. Dan plakt het eind van het ene blok tegen de kop van het volgende:
   op het overzicht stond "Laatste veertien dagen" op nul pixels van de tabel
   erboven. Hier staat die afstand één keer, voor alle beheerpagina's. */
/* Alleen de koppen die een stuk van de pagina aankondigen. Dit stond op élke
   h2 in het beheer, dus ook op de kop ín een kaart, en dan begint elke review
   met achtenveertig pixels lucht boven de naam. */
.beheer-inhoud > .bak > h2 {
  /* Kleiner dan op de site, net als de h1 hierboven. Zesendertig pixels voor
     "Avonden die nu lopen" is een kop die groter is dan de tabel eronder. */
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.beheer-inhoud > .bak > h2:first-child,
.beheer-inhoud h1 + h2 {
  margin-top: 1.5rem;
}
/* Een kop in een kaart is een opschrift boven een blok, geen hoofdstuktitel.
   Op zesendertig pixels leest een naam in een reviewkaart als de kop van de
   pagina, terwijl de kop van de pagina erboven staat. */
.beheer-inhoud .kaart h2 {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
/* In het beheer is de kop een naambordje, geen omslag. Op de site mag een h1
   drieënvijftig pixels hoog zijn, want daar begint het verhaal ermee. Hier
   staat eronder een lijst waar je aan wil werken, en elke pixel kop is een
   pixel die die lijst naar beneden duwt. Op een scherm van negenhonderd hoog
   begon de tabel op achthonderdvijftig, dus je zag geen enkele regel zonder
   te scrollen. */
.beheer-inhoud h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.1rem);
  margin-bottom: 0.75rem;
}
/* De regel onder de kop legt uit wat dit scherm doet. Dat lees je één keer en
   daarna nooit meer, dus hij mag klein. */
.beheer-inhoud h1 + p {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.beheer-inhoud .kerngetallen,
.beheer-inhoud .tabel-omhulsel,
.beheer-inhoud .knoprij {
  margin-bottom: 1.75rem;
}
/* Ook ruimte bóven de knoprij. Hij komt direct na de laatste kaart van een
   formulier, en zonder deze regel plakken Opslaan en Bekijk op de site tegen
   de onderrand van die kaart. */
.beheer-inhoud .knoprij {
  margin-top: 1.75rem;
}
/* Behalve een knoprij die in een regel meeloopt, zoals de knoppen naast de
   telling boven de verhalenlijst. Die zou met die twee marges de regel van
   achtentwintig pixels naar honderd duwen. Deze regel staat hier en niet bij
   de andere knopregels, want hij moet ná de twee hierboven komen om ze te
   kunnen overrulen. Zie de regel over marges in de beheerinhoud. */
.beheer-inhoud .knoprij--strak {
  margin-top: 0;
  margin-bottom: 0;
}
.beheer-inhoud .kerngetallen + .bericht {
  margin-top: 0.5rem;
}

/* Tabelregels mogen ademen: in de rondelijst staat per regel een knop, en die
   duwt de regelhoogte toch al op. */
.beheer-inhoud table.lijst th,
.beheer-inhoud table.lijst td {
  padding: 0.85rem 0.9rem;
}
.beheer-inhoud table.lijst th:first-child,
.beheer-inhoud table.lijst td:first-child {
  padding-left: 0;
}
.beheer-inhoud table.lijst th:last-child,
.beheer-inhoud table.lijst td:last-child {
  padding-right: 0;
}

/* Alle kerngetallen even hoog, met het getal op dezelfde lijn. Zonder deze
   regel zakt "Kookmodus gestart" een regel verder dan "Aanmeldingen" omdat het
   label afbreekt. */
.beheer-inhoud .kerngetallen .kaart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
}

/* Stand van zaken in een lijst. Een gekleurde stip met rustige tekst, geen
   gekleurde pil: acht rondes achter elkaar met een rode pil lezen als acht
   fouten, terwijl het gewoon de stand is. Op een detailpagina mag het wel
   opvallen, daar staat het merkje. */
/* Afstrepen in de boodschappenlijst. Het hele regeltje is het klikgebied, want
   in een winkel met een telefoon in je hand mik je niet op een vierkantje van
   een halve centimeter. */
.boodschap {
  display: grid;
  grid-template-columns: 1.15rem auto 1fr;
  gap: 0.6rem;
  align-items: baseline;
  cursor: pointer;
  padding-block: 0.15rem;
  /* Het regeltje eromheen is een flexrij, en daarin werd dit label precies zo
     breed als zijn tekst. Bij "Bieslook" was het klikgebied dus zes centimeter
     smaller dan de regel die je ziet, en tikte je ernaast. */
  flex: 1;
  min-width: 0;
}
.boodschap__vink {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--primary);
  align-self: start;
  transform: translateY(0.15em);
}
.boodschap--af {
  color: var(--inkt-zacht);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--inkt-zacht) 60%, transparent);
}
.boodschap--af .hoeveelheid { color: inherit; }

/* Een knop die eruitziet als een link, voor iets kleins in een alinea. */
.knoplink {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--goud);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Weghalen hoort niet net zo hard te roepen als kopiëren: het is de knop die
   je het minst nodig hebt en die het meest kapot kan maken.

   Deze regel stond tweehonderd regels hoger, bij de rijknoppen. Hij weegt even
   zwaar als .knoplink hierboven, dus won die laatste en bleef elke stille knop
   gewoon goud. Pas toen er een stille knop naast een gewone kwam te staan viel
   op dat ze er hetzelfde uitzagen. Hij hoort hier, na de regel die hij
   overschrijft. */
.knoplink--stil {
  color: var(--inkt-zacht);
  text-decoration-color: var(--rand);
}
.knoplink--stil:hover { color: var(--inkt); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  color: var(--inkt-zacht);
}
.status__stip {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}
.status--wacht .status__stip { background: var(--stijl-rood); }
.status--goed .status__stip { background: var(--stijl-bubbel); }
/* Niet goed en niet fout: iets waar de site geen uitspraak over kan doen. Een
   rood stipje zou daar een probleem van maken dat het niet is. */
.status--weten .status__stip {
  background: transparent;
  border: 1px solid var(--inkt-zacht);
}
/* Het lijstje "wat ligt er nog" boven een avond. Twee kolommen: het stipje in
   een vaste smalle kolom, zodat de regels eronder uitlijnen ook als een punt
   twee regels uitleg heeft. */
.gereedlijst {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.gereedlijst__regel {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.4rem 0;
}
.gereedlijst__regel + .gereedlijst__regel { border-top: 1px solid var(--rand); }
/* Flex blijven: .status__stip is een span zonder eigen display, dus zijn
   breedte en hoogte tellen alleen als hij een flex-item is. Op display:block
   verdwijnt het stipje zonder foutmelding. */
.gereedlijst__regel .status { display: flex; justify-content: center; padding-top: 0.5rem; }

/* De laatste meldingen uit het logboek, op de controlepagina. Rustig houden:
   dit zijn meldingen die er al zijn, geen alarm dat nu afgaat. Een rood blok
   per regel zou van een logboek een brand maken. */
.meldingen {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.meldingen > li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rand);
}
.meldingen > li:first-child { border-top: 0; }
.meldingen > li > p { margin: 0.1rem 0; }
/* De tekst van een fout breekt niet op spaties, want er staat een pad in dat
   langer is dan de kolom. Zonder dit schuift het hele scherm zijwaarts. */
.meldingen > li > p:not(.label) { overflow-wrap: anywhere; }
.meldingen summary {
  cursor: pointer;
  color: var(--inkt-zacht);
  font-size: 0.85rem;
}
.spoor {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--inkt-zacht);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* Een status die ook een link is: hij hoort rustig te blijven staan tussen de
   andere, en pas op te lichten als je erheen gaat. */
a.status { color: inherit; text-decoration: none; }
a.status:hover,
a.status:focus-visible { color: var(--primary); text-decoration: underline; }

/* De rondelijst: nummer smal en rustig, de titel krijgt de ruimte. */
.lijst--rondes .lijst__nummer {
  width: 2.5rem;
  color: var(--inkt-zacht);
  font-variant-numeric: tabular-nums;
}
.lijst--rondes .lijst__titel {
  font-weight: 700;
  color: var(--inkt);
  text-decoration-color: color-mix(in srgb, var(--goud) 55%, transparent);
  text-underline-offset: 0.2em;
}
.lijst--rondes .lijst__titel:hover,
.lijst--rondes .lijst__titel:focus-visible {
  color: var(--goud);
}
.lijst--rondes .lijst__actie {
  text-align: right;
  white-space: nowrap;
}

/* Regel onder de titel met de stand van deze pagina. */
.paginastand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.8rem;
  margin: -0.75rem 0 1.75rem;
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.merkje {
  display: inline-block;
  /* De tekst in een merkje staat in de template, niet in de database, dus die
     kan niet opeens langer worden. Afbreken mag hier dus uit: in de rondelijst
     werd elke regel anders twee regels hoog. Loopt de tabel daardoor te breed
     op een telefoon, dan schuift hij binnen .tabel-omhulsel. */
  white-space: nowrap;
  padding: 0.1rem 0.6rem;
  border-radius: var(--pil);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.merkje--goed { color: var(--stijl-bubbel); }
.merkje--wacht { color: var(--stijl-rood); }

/* In een tabel staat een merkje naast een knop, en dan moeten ze even hoog
   zijn. Alleen daar: in een kop staat het merkje naast tekst en zou een pil
   van 2,3 rem er juist uit springen. */
table.lijst .merkje {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding-block: 0;
}

.kerngetallen {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kerngetal__waarde {
  font-family: var(--letter-kop);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--primary);
  display: block;
}
.kerngetal__naam {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  hyphens: auto;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Minder beweging ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Lijniconen per wijnstijl -------------------------------------------- */

.wijnicoon {
  display: block;
  width: 100%;
  --stijl-kleur: var(--goud);
}
.wijnicoon svg { display: block; width: 100%; height: auto; }
.wijnicoon[data-stijl='bubbel'] { --stijl-kleur: var(--stijl-bubbel); }
.wijnicoon[data-stijl='wit']    { --stijl-kleur: var(--stijl-wit); }
.wijnicoon[data-stijl='rose']   { --stijl-kleur: var(--stijl-rose); }
.wijnicoon[data-stijl='rood']   { --stijl-kleur: var(--stijl-rood); }
.wijnicoon[data-stijl='zoet']   { --stijl-kleur: var(--stijl-zoet); }

.voet .woordmerk { font-size: 1.35rem; color: var(--foreground); }
/* Geen eigen kleur voor het tussenwoordje hier. Deze regel zette "de" in de
   voet terug op goud, terwijl hij boven aan de pagina juist zacht moest staan,
   en dan verschilt het merk per plek op dezelfde pagina. */
.voet .klein { margin-top: 0.25rem; color: var(--accent); }

.koken__nodig {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
  max-width: 28rem;
}
.koken__taste .zacht {
  font-family: var(--letter-tekst);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.koken__voet .knop[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* De vorige- en volgende-knoppen doen alleen iets met JavaScript. */
.koken:not([data-koken-actief]) .koken__voetbinnen,
.koken:not([data-koken-actief]) .koken__voortgang {
  display: none;
}
.koken:not([data-koken-actief]) .koken__stap + .koken__stap {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rand);
}

.koken__voetbinnen .koken__teller {
  white-space: nowrap;
  text-align: center;
  flex: 0 0 auto;
}
.koken__voetbinnen .knop { flex: 0 1 auto; }

/* --- Springen binnen een lang formulier ----------------------------------- */

/* Het bewerkscherm van een ronde is vijfenvijftighonderd pixels lang. Dat komt
   niet door de opmaak maar door de inhoud, dus de enige winst zit in sneller
   bij het juiste stuk komen. Gewone ankerlinks, geen tabbladen: een tabblad
   zou een half ingevuld formulier verstoppen, en dan sla je op zonder te zien
   wat er in de andere tabbladen stond. */
.springrij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rand);
  font-size: 0.85rem;
}
/* Op een aanraakscherm hoort een link van vijftien pixels hoog niet thuis, en
   deze rij is bedoeld om aan te tikken. */
@media (pointer: coarse) {
  .springrij a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Een veld dat pas verschijnt als een vinkje aanstaat. Een klasse en niet het
   hidden-attribuut, want hidden verliest van elke display-regel die er later
   nog overheen komt. */
.is-weg { display: none; }

/* Wie er nog moet betalen. Namen naast elkaar met het bedrag erachter, elk
   een filter. Een opsomming in een zin zou net zo goed lezen, maar dan kun je
   er niet op klikken zonder dat het een zin vol links wordt. */
.openrij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}
.openrij a {
  text-decoration: none;
  border-bottom: 1px solid var(--rand);
}
.openrij a:hover { color: var(--primary); border-bottom-color: currentColor; }
.openrij strong { font-variant-numeric: tabular-nums; }

/* De foto van een fles in de ranglijst van een avond. Klein en links, zodat de
   lijst een ranglijst blijft: het cijfer rechts is waar je naar kijkt. */
.ranglijst__foto {
  flex: 0 0 auto;
  line-height: 0;
  border-radius: var(--rond, 10px);
  overflow: hidden;
}
.ranglijst__foto img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  display: block;
}
/* Een lege plek met dezelfde maat, zodat de namen onder elkaar blijven staan
   als niet elke fles een foto heeft. Zonder rand: een rij streepjesvakjes
   trekt de aandacht naar wat er niet is, en dit is een ranglijst. */
.ranglijst__foto--leeg {
  width: 3rem;
  height: 3rem;
}
.ranglijst--metfoto .ranglijst__rij {
  grid-template-columns: 1.5rem auto 1fr auto;
}
/* De regel om er een foto bij te zetten hoort bij de regel erboven, dus geen
   nummer en geen eigen streep. */
.ranglijst__erbij {
  list-style: none;
  padding: 0 0 0.5rem;
}
.ranglijst__erbij .vouwregel { border-top: 0; }
.ranglijst__erbij .vouwregel > summary { padding: 0.3rem 0; font-size: 0.82rem; }
/* Staat er nog geen flesnaam bij een ronde, dan is die regel een vraag die
   openstaat en geen knop om iets bij te werken. In de accentkleur, zodat je
   op een avond van vorig jaar meteen ziet waar nog iets in te vullen valt. */
.ranglijst__erbij .vouwregel--vraag > summary { color: var(--goud, var(--primary)); }

/* De losse cijfers onder een wijn, als de club die bewaart. Het cijfer vooraan
   in een vast vakje, zodat de namen onder elkaar beginnen en je de rij kunt
   lezen zonder te zoeken. */
.cijferlijst {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cijferlijst li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.cijferlijst__score {
  flex: 0 0 auto;
  min-width: 1.4rem;
  font-weight: 700;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}

/* --- Wat een club gedronken heeft ----------------------------------------- */

/* Een ranglijst van flessen, als tabel. Dit waren blokken per avond met de
   avond als kop erboven, en dat leest als een logboek: je scrolt erdoorheen
   in plaats van dat je vergelijkt. Naast elkaar in kolommen zie je in één
   oogopslag welke fles het won en op welke avond dat was.

   Dezelfde vorm als de andere lijsten op de site, dus ook hier een bodem
   onder de tabel. Zonder die bodem knijpt een telefoon de percentages tot
   kolommen van twintig pixels en wordt één rij duizend pixels hoog. */
.lijst--wijnen { table-layout: fixed; width: 100%; min-width: 27rem; }
/* Alles in procenten en samen honderd. Met een vaste maat voor de smalle
   kolommen verdeelt de browser wat er overblijft over alle kolommen, en dan
   schuift het cijfer alsnog buiten beeld op een telefoon. */
.lijst--wijnen .kol-plek { width: 6%; }
.lijst--wijnen .kol-kiekje { width: 11%; }
.lijst--wijnen .kol-wat { width: 31%; }
.lijst--wijnen .kol-cijfer { width: 14%; }
.lijst--wijnen .kol-avond { width: 38%; }
/* Een flesnaam komt uit de database en kan één woord van honderd tekens zijn. */
.lijst--wijnen td { overflow-wrap: anywhere; vertical-align: top; }

/* Het nummer van de plek. Tabulaire cijfers, zodat 9 en 10 even breed staan en
   de kolom niet verspringt. */
.wijnlijst__plek {
  font-variant-numeric: tabular-nums;
  color: var(--goud);
  font-weight: 700;
}
.wijnlijst__cijfer {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wijnlijst__cijfer strong { font-size: 1.1rem; }

/* De foto van de fles. Klein en links, zodat de ranglijst een ranglijst
   blijft: het cijfer rechts is nog steeds waar je naar kijkt. */
.wijnlijst__foto {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--rond, 10px);
  background: var(--vlak-diep);
  overflow: hidden;
}
.wijnlijst__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Een leeg vakje op dezelfde plek, zodat de namen niet gaan verspringen zodra
   er bij één fles wel een foto staat. Heel licht, want het is ruimte en geen
   mededeling. Een foto zet je erbij op de avond zelf. */
.wijnlijst__foto--leeg { background: none; border: 1px solid var(--rand); opacity: 0.35; }

/* Op een telefoon schuift deze tabel, en dan hoort het cijfer er nog net op te
   staan. Zonder dit viel hij er voor veertig pixels af: je zag de plek en de
   naam en moest schuiven voor het getal waarvoor je kwam. Smallere kolommen en
   krappere cellen, en dan past plek, wijn en cijfer binnen beeld. */
@media (max-width: 34em) {
  .lijst--wijnen th,
  .lijst--wijnen td { padding-inline: 0.5rem; }
  .wijnlijst__foto { width: 2.6rem; height: 2.6rem; }
}

/* --- Een uitnodiging die nog openstaat ------------------------------------ */

/* Stond op een eigen scherm in een kaart in een kaart. Nu is het een blok
   onder de ledenlijst, met een streep ertussen zodra er meer dan één staat. */
.openuitnodiging { padding-block: 0.9rem; }
.openuitnodiging + .openuitnodiging { border-top: 1px solid var(--rand); }
.openuitnodiging .clublink { margin-block: 0.35rem; }

/* --- De kop van een lijst, met de knop ernaast ---------------------------- */

/* De knop om er iets bij te zetten stond onder de kop en duwde de zoekbalk
   naar beneden. Hij hoort bij die kop, dus staat hij er nu naast, rechts en
   op dezelfde hoogte. Op een telefoon zakt hij er vanzelf onder, want daar
   past hij niet naast een kop van drie woorden. */
.lijstkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* Lucht eronder. Zonder deze regel plakt het label van het eerste zoekveld
     tegen de kop aan, en op een breed scherm staat "Wanneer" pal onder de
     knop. Een kop en een formulier zijn twee dingen, en de kop staat naast een
     knop die net zo hoog is als twee regels tekst. Achtentwintig pixels bleek
     daar te weinig voor: het las nog steeds als één blok. */
  margin-bottom: 2.5rem;
}
.lijstkop > h1,
.lijstkop > h2 { margin: 0; }

/* En hetzelfde als er een zin tussen staat. Die zin hoort bij de kop, dus hij
   schuift ernaartoe en de ruimte komt eronder. Anders staat het label van het
   eerste zoekveld twee keer zo dicht op de tekst als op een scherm zonder die
   zin, en dat zie je meteen. */
.lijstkop + p {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

/* Een icoon in een knop is zo groot als de letter ernaast en niet zo groot
   als in de balk onderin. */
.knop .beheer-icoon { width: 1rem; height: 1rem; }
.knop--klein .beheer-icoon { width: 0.9rem; height: 0.9rem; }

/* --- Een kaart met dingen die je zelden doet ------------------------------ */

/* Onder een lijst stonden drie of vier ingeklapte kaarten onder elkaar, elk
   met een kop zo groot als die van de pagina zelf. Vier blokken waarvan je er
   één per maand opendoet, en samen namen ze meer scherm in dan de lijst
   waarvoor je kwam.

   Nu is het één kaart met regels erin. Een regel is een knop: klein, vet, met
   een driehoekje, en pas als je hem opendoet staat er een formulier. */
.meerkaart > .label { display: block; margin-bottom: 0.25rem; }
.vouwregel { border-top: 1px solid var(--rand); }
.vouwregel > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.vouwregel > summary::-webkit-details-marker { display: none; }
.vouwregel > summary::marker { content: ''; }
.vouwregel > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.42rem solid var(--goud);
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.vouwregel[open] > summary::before { transform: rotate(90deg); }
.vouwregel[open] { padding-bottom: 1.1rem; }
.vouwregel > summary:hover,
.vouwregel > summary:focus-visible { color: var(--goud); }

/* Een formulier onder een lijst is even breed als de lijst, maar de velden
   erin niet: een invoerveld van zeventig rem leest als een snelweg. */
.kaart--formulier .veld,
.kaart--formulier .veldrij,
.kaart--formulier .zoekbalk { max-width: 34rem; }
.vouwregel .veld { max-width: 34rem; }

/* --- De tabel van je kast en je archief ----------------------------------- */

/* Vaste kolommen, met een bodem eronder. Zonder die bodem knijpt een telefoon
   de percentages tot kolommen van twintig pixels en wordt één rij duizend
   pixels hoog. Met een min-width schuift de tabel zijwaarts, net als de
   lijsten in het beheer. */
.lijst--kast,
.lijst--archief { table-layout: fixed; width: 100%; min-width: 42rem; }
.lijst--kast .kol-wat,
.lijst--archief .kol-wat { width: 28%; }
.lijst--kast .kol-stijl,
.lijst--archief .kol-stijl { width: 12%; }
.lijst--kast .kol-aantal { width: 10%; }
.lijst--kast .kol-waar,
.lijst--archief .kol-waar { width: 16%; }
.lijst--kast .kol-datum,
.lijst--archief .kol-datum { width: 12%; }
.lijst--archief .kol-cijfer { width: 8%; }
.lijst--archief .kol-moment { width: 14%; }
.lijst--kast .kol-acties { width: 7.5rem; }
.lijst--archief .kol-acties { width: 5.5rem; }
/* Een notitie komt uit de database en kan één woord van honderd tekens zijn. */
.lijst--kast td,
.lijst--archief td { overflow-wrap: anywhere; }

/* Buiten het beheer hebben deze tabellen dezelfde lucht nodig als daarbinnen.
   De regels in .beheer-inhoud raken deze pagina's niet, want die staan niet
   in dat blok. */
.lijst--kast th,
.lijst--kast td,
.lijst--archief th,
.lijst--archief td { padding: 0.85rem 0.9rem; }
.lijst--kast th:first-child,
.lijst--kast td:first-child,
.lijst--archief th:first-child,
.lijst--archief td:first-child { padding-left: 0; }
.lijst--kast th:last-child,
.lijst--kast td:last-child,
.lijst--archief th:last-child,
.lijst--archief td:last-child { padding-right: 0; }

/* --- Herhaalbare rijen in het beheer ------------------------------------- */

.bewerkrij {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--rand);
}
.bewerkrij:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

@media (min-width: 44em) {
  .bewerkrij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bewerkrij--ingredient { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bewerkrij--stap { grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr); }
  /* Drie velden sinds er een winkeladres bij kan. Dat adres is het langste
     van de drie, want een partnerlink van bol draagt een hele sliert mee, dus
     het krijgt de meeste ruimte. Het vinkje blijft smal. */
  .bewerkrij--wijn {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(6rem, 1fr);
  }
}

/* Op een breed scherm past zo'n rij op één regel, en dan hoeven de labels maar
   één keer. Dat geldt voor alle herhaalbare rijen, want in elke rij staat
   hetzelfde soort veld. Het voorbeeld hieronder is het ergste geval.

   Zo stond het er eerst: zes velden in twee rijen van drie, elk met zijn eigen
   label erboven, en dat acht keer onder elkaar. "Naam Hoeveel Eenheid Afdeling
   Notitie" stond dus acht keer op het scherm en één ronde was zestienhonderd
   pixels ingrediënten. Nu staan ze als kolomkoppen boven de eerste regel en
   zijn ze daaronder alleen nog voor een voorlezer.

   De knop maakt een nieuwe rij door de laatste te klonen, dus zo'n kloon is
   nooit de eerste en krijgt vanzelf de verborgen variant.

   De laatste kolom heeft een vaste maat en geen auto. Met auto is hij in de
   eerste regel zo breed als "Schaalt mee" en daaronder zo breed als een
   vinkje, en dan staan de kolommen van de eerste regel een stuk naar links ten
   opzichte van de rest. */
@media (min-width: 70em) {
  .bewerkrij--ingredient {
    grid-template-columns:
      minmax(0, 2fr) minmax(4rem, 0.7fr) minmax(4rem, 0.8fr)
      minmax(0, 1.2fr) minmax(0, 1.7fr) 8.5rem;
    align-items: end;
  }
  .bewerkrij:not(:first-child) > .veld > label:not(.vink),
  .bewerkrij:not(:first-child) > .veld > .vink > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* Het vinkje staat zonder zijn tekst niet meer vanzelf op de goede hoogte. */
  .bewerkrij--ingredient > .veld > .vink { margin-bottom: 0.75rem; }
}

/* Alleen kaarten onder elkaar in een beheerformulier. Zonder die > raakt
   deze regel ook kaarten naast elkaar in een raster, en dan zakken de tweede
   en derde twintig pixels omlaag. */
form > .kaart + .kaart { margin-top: 1.25rem; }
/* En buiten een formulier. Op de wijnpagina staan Hoe hij smaakt en Over deze
   fles sinds 27-10-2026 in twee kaarten onder elkaar, en zonder deze regel
   plakken ze tegen elkaar en lijken ze één blok met twee koppen. */
.bak > .kaart + .kaart { margin-top: 1.25rem; }
/* De kop van een stuk. Op de clubschermen is dat sinds kort een h1, want de
   naam van de club staat er niet meer boven; even groot als een h2 blijven ze
   wel, anders schreeuwt het kasboekje. */
.kaart h1,
.kaart h2 { margin-top: 0; }
.kaart h1 { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
.kaart h2 .merkje { vertical-align: middle; margin-left: 0.5rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--vlak);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

table.lijst form { margin: 0; }

/* --- 18+-poort als overlay ----------------------------------------------- */

.poort--overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background: var(--background);
}
.poort__vraag {
  font-family: var(--letter-kop);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  margin-bottom: 0.5rem;
}

/* Zolang de poort openstaat schuift de pagina eronder niet mee. */
body.poort-open {
  overflow: hidden;
}

/* inert haalt de pagina uit de toetsenbordvolgorde; dit maakt zichtbaar dat
   er niets te klikken valt voor wie de vraag nog niet beantwoord heeft. */
[inert] {
  user-select: none;
}

/* --- Gast-modus ---------------------------------------------------------- */

.code-veld {
  font-family: var(--letter-kop);
  font-size: 2rem;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  padding-block: 0.75rem;
}

.avondcode { text-align: center; }
.avondcode__code {
  font-family: var(--letter-kop);
  font-size: clamp(3rem, 16vw, 5rem);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin: 0.25rem 0 0.5rem;
  /* De spatiëring duwt het blok anders uit het midden. */
  text-indent: 0.12em;
}
/* Geen kapitalen meer: hier staat sinds kort een heel adres met de code erin,
   en een url in hoofdletters is een url die mensen verkeerd overtikken. Precies
   dezelfde fout als eerder met /CLUB/ in plaats van /club/. */

/* --- Stemmen ------------------------------------------------------------- */

.stemkaart { margin-bottom: 1.25rem; scroll-margin-top: 1.5rem; }
.stemkaart__titel { font-size: clamp(1.3rem, 4vw, 1.6rem); margin-bottom: 0.5rem; }

/* Een ronde die je al beoordeeld hebt: ingeklapt, met je cijfer in de regel.
   De driehoek van de browser gaat eraf, want de regel is al een knop. */
.stemkaart--klaar > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  cursor: pointer;
  list-style: none;
}
.stemkaart--klaar > summary::-webkit-details-marker { display: none; }
.stemkaart--klaar > summary::marker { content: ''; }
.stemkaart--klaar > summary .stemkaart__titel {
  font-family: var(--letter-kop);
  font-size: 1.15rem;
  margin: 0;
  flex: 1 1 10rem;
}
.stemkaart--klaar > summary .ronde__teller { margin: 0; flex: 0 0 100%; }
.stemkaart__jij {
  font-size: 0.85rem;
  color: var(--goud);
  white-space: nowrap;
}
.stemkaart__jij strong { font-size: 1.15rem; }
/* Dicht hoeft de rest niet mee te doen; open staat alles er weer. */
.stemkaart--klaar:not([open]) > .pillen,
.stemkaart--klaar:not([open]) > p { display: none; }
.stemkaart--klaar[open] > summary { margin-bottom: 0.75rem; }

.stemrij {
  border: 0;
  margin: 1rem 0 0.5rem;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.stemrij legend { padding: 0; }
.stemrij[disabled] { opacity: 0.5; }

.stemknop { flex: 1 1 3rem; }
.stemknop input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.stemknop span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1.5px solid var(--rand-veld);
  border-radius: var(--ronding-klein);
  font-family: var(--letter-kop);
  font-size: 1.25rem;
  color: var(--inkt);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.stemknop input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}
.stemknop input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.stemknop span:hover { border-color: var(--primary); }

/* --- De stand bij de gastheer -------------------------------------------- */

.stand {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.stand__rij {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
}
.stand > li:last-child { border-bottom: 0; padding-bottom: 0; }

.stand__kop {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.85rem;
  align-items: start;
}
.stand__nummer {
  font-family: var(--letter-kop);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--accent);
}
.stand__label { margin: 0 0 0.35rem; font-size: 1.1rem; }
.stand__cijfer { margin: 0; text-align: right; }
.stand__cijfer strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 500;
}
/* Hetzelfde cijfer, maar los en niet in een rij van de stand. Links, want er
   staat geen kolom naast om tegenaan te lijnen. Dit is het cijfer voor de
   avond zelf: wat de gasten van de avond vonden, los van de wijn. */
.stand__cijfer--los,
.avondcijfer,
.stemkaart__uitslag {
  margin: 0 0 1.25rem;
  text-align: left;
}
.stand__cijfer--los strong,
.avondcijfer strong,
.stemkaart__uitslag strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 500;
}

/* De kaart met de vraag over de avond zelf staat onder de rondes en hoort er
   zichtbaar niet bij: het is geen zesde ronde maar een andere vraag. Daarom
   een streep erboven en wat meer lucht. */
.stemkaart--avond {
  margin-top: 2rem;
  border-top: 2px solid var(--goud, var(--rand));
}

.stand__balk {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin-top: 0.85rem;
  overflow: hidden;
}
.stand__balk span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width 0.4s ease;
}

.stand__notities {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.stand__notities li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.6rem;
  align-items: start;
}
.stand__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--rand);
  border-radius: 50%;
  font-size: 0.78rem;
  color: var(--accent);
}

.stemkaart__voet {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* --- Foto's -------------------------------------------------------------- */

.foto {
  margin: 0;
  border-radius: var(--ronding);
  overflow: hidden;
  background: var(--vlak-kaart);
  border: 1px solid var(--rand);
}
.foto img {
  display: block;
  width: 100%;
  height: auto;
}

/* Een brede band, voor een foto die vooral sfeer moet maken. */
.foto--band {
  border-radius: 0;
  border-inline: 0;
}
.foto--band img {
  aspect-ratio: 21 / 6;
  object-fit: cover;
}

/* Binnen een kaart loopt de foto tot aan de rand door. */
.foto--inkaart {
  border: 0;
  border-radius: var(--ronding-klein);
  margin-bottom: 1.1rem;
}
.foto--inkaart img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Het kopbeeld van een thema-kaart loopt tot aan de rand van de kaart door,
   met bovenin dezelfde ronding als de kaart zelf. Een pixel eraf, anders kijk
   je door de hoek van de foto langs de rand heen. De ruimte eronder komt van
   de flex-gap van de kaart, dus hier geen marge onderaan.

   Dit hoort hier en niet bij .thema-kaart hierboven: .foto staat verderop in
   dit bestand en zet marge, rand en ronding terug zolang het even zwaar weegt
   en later komt. */
.thema-kaart__beeld {
  margin: calc(var(--kaart-ruimte) * -1);
  margin-bottom: 0;
  border: 0;
  border-radius: calc(var(--ronding) - 1px) calc(var(--ronding) - 1px) 0 0;
}
.thema-kaart__beeld img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Met een kaart over de volle breedte van de bak wordt zestien bij negen
     zeshonderd pixels hoog, en dan is de foto het hele blok. De verhouding
     geldt tot deze hoogte en daarna snijdt hij bij. Op een kaart van een derde
     komt hij hier niet aan. */
  max-height: 22rem;
  transition: opacity 0.15s ease;
}
.thema-kaart:hover .thema-kaart__beeld img { opacity: 0.9; }

/* Een kaart die op een telefoon op zijn kant gaat.

   Op de voorpagina kregen de stukken om te lezen dezelfde kaart als de avonden,
   met een omslagfoto erboven. Op een breed scherm staan die drie naast elkaar
   en is dat precies goed. Op een telefoon staan ze onder elkaar, en dan werd
   het blok Lezen dertienhonderd pixels hoog: langer dan het blok met de avonden
   erboven, terwijl dat het eigenlijke aanbod is. Het bijzaak-blok werd het
   grootste van de pagina.

   Hier gaat de kaart daarom op zijn kant: de foto als duimnagel links, de tekst
   ernaast. Blijft een omslagfoto, wordt een lijst die je kunt scannen, en de
   avonden houden hun plek als het grootste blok. */
@media (max-width: 45.99em) {
  .raster--opzij .thema-kaart {
    display: grid;
    /* De duimnagel groeit mee met het scherm. Vast op 6.5rem hield hij op een
       telefoon van 320 breed honderdvierentwintig van de tweehonderdachtentachtig
       pixels bezet, en dan brak de titel ernaast in zes regels. */
    grid-template-columns: clamp(4.5rem, 22vw, 6.5rem) 1fr;
    /* Drie rijen met de hand, en niet automatisch. De foto spant 1 / -1, en
       die -1 wijst naar de laatste lijn van het raster dat hier staat. Zonder
       deze regel staan er nul rijen, wijst -1 dus naar lijn 2, en bleef de
       foto een strookje van drieënveertig pixels bovenin. De derde rij is 1fr
       en klapt in als er geen samenvatting is. */
    grid-template-rows: auto auto 1fr;
    gap: 0.15rem 0.9rem;
    align-items: start;
  }
  .raster--opzij .thema-kaart__beeld {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    /* Links, boven en onder tot de rand van de kaart, rechts niet. */
    margin: calc(var(--kaart-ruimte) * -1) 0
            calc(var(--kaart-ruimte) * -1) calc(var(--kaart-ruimte) * -1);
    border-radius: calc(var(--ronding) - 1px) 0 0 calc(var(--ronding) - 1px);
    height: 100%;
  }
  .raster--opzij .thema-kaart__beeld img {
    /* De verhouding laat los: de hoogte komt van de tekst ernaast. */
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }
  .raster--opzij .thema-kaart > :not(.thema-kaart__beeld) { grid-column: 2; }
}

.sectie-beeld { margin-top: 1.75rem; }

/* De omslagfoto boven een wijnhuis.

   Deze klasse stond nergens in dit bestand, dus die foto kwam binnen op zijn
   eigen verhouding, zonder ronding, en zonder dat de pagina wist hoe hoog hij
   zou worden. Met drie huizen van 2,48 tegen 1, 1,5 tegen 1 en 16 tegen 9 gaf
   dat drie verschillende pagina's.

   Zestien bij negen met object-fit cover, dezelfde verhouding als een kaartje
   in een overzicht. Daarmee staat de hoogte vast voordat de foto binnen is,
   dus de tekst eronder springt niet weg, en zien de drie huizen er hetzelfde
   uit. */
.foto__beeld {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ronding);
}
.leeswijdte .foto { margin-block: 1.5rem; }

/* --- Wijnclub ------------------------------------------------------------ */

/* Het smaakprofiel gebruikt dezelfde rijen als de stand van een avond, maar
   zonder het rondenummer ervoor. Met de kolommen van .stand__kop belandt de
   naam van de wijnstijl dan in een vak van 2rem en breekt hij per letter af. */
.stand--smaak .stand__kop { grid-template-columns: 1fr auto; }


/* De clubcode is langer dan een avondcode, zes tekens tegen vier. Op een
   telefoon van 320 px loopt hij op 16vw van het kaartje af, vandaar een eigen
   maat in plaats van die van .avondcode__code. */
.club-code .avondcode__code { font-size: clamp(2.2rem, 11vw, 3.4rem); }

/* De url van de club staat er voluit onder om door te sturen, en die breekt
   niet op een spatie want die zit er niet in. */
.clubtijdlijn__rij {
  padding: 1rem 0 1rem 1.25rem;
  border-left: 2px solid var(--rand);
  position: relative;
}
.clubtijdlijn__rij + .clubtijdlijn__rij { padding-top: 1.25rem; }
/* Het stipje op de lijn. Met currentColor zodat het de tekstkleur volgt. */
.clubtijdlijn__rij::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 1.45rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.clubtijdlijn__datum {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.clubtijdlijn__titel {
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  margin: 0.15rem 0 0.35rem;
}
.clubtijdlijn__titel a { color: inherit; }
.clubtijdlijn__winnaar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
}

/* Opheffen zit achter een <details>, zodat je er niet per ongeluk op drukt. */
details > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.35rem 0;
}
details[open] > summary { margin-bottom: 0.6rem; }

/* --- Reviews -------------------------------------------------------------- */

.reviewlijst {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.reviewlijst__rij {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}
.reviewlijst > li:first-child { border-top: 0; padding-top: 0; }

.reviewlijst__kop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}
/* Het cijfer in een rondje, zodat je bij het scrollen de score ziet zonder
   te lezen. Vaste maat, anders wordt het een ovaal bij een cijfer van 1. */
.reviewlijst__cijfer {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--primary);
  color: var(--primary);
  font-family: var(--letter-kop);
  font-size: 1.05rem;
}

/* Een lijst met foutmeldingen in een bericht. Zonder bolletjes, want bij één
   fout ziet één bolletje eruit als een vergissing. */
.lijst-kaal { list-style: none; margin: 0; padding: 0; }
.lijst-kaal li + li { margin-top: 0.35rem; }

/* Het aantal reviews dat op goedkeuring wacht, in het beheermenu. */
.telbol {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 0.7rem;
  background: var(--primary);
  color: var(--inkt-op-goud);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

/* Het cijfer op een kaart in het overzicht. Alleen als er al iemand iets
   geschreven heeft; een kaart met "nog geen beoordelingen" erop verkoopt niets. */
.thema-kaart__cijfer {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--primary);
}
.thema-kaart__cijfer strong { font-family: var(--letter-kop); font-size: 1.05rem; }

/* De clublink staat voluit onder de code. Niet in hoofdletters zoals het
   label eronder bij een avond: dit is een url die mensen overtikken, en met
   /CLUB/ in plaats van /club/ kwamen ze op een foutpagina. */
.clublink {
  font-size: 0.9rem;
  color: var(--accent);
  overflow-wrap: anywhere;
  margin: 0 0 0.75rem;
  /* Eén tik selecteert de hele regel op een telefoon. */
  user-select: all;
}
/* Een rij knoppen in het midden sluit een pagina af, en die stond met nul
   pixels tegen de tekst erboven. Op een leespagina liep de laatste regel van
   het laatste stuk zo tegen de knoppen aan, en dan lijkt het of ze erop
   gevallen zijn. Nagemeten op 23-10-2026, op 390 en op 900.

   Alleen als er iets boven staat, vandaar de *. Staat zo'n rij als eerste in
   een kaart, dan hoort die ruimte bij de kaart en niet bij de knoppen. */
.knoprij--midden { justify-content: center; }
* + .knoprij--midden { margin-top: 2.75rem; }

/* En de deelknop eronder hoort bij diezelfde rij. Hij staat in een eigen rij
   omdat hij pas verschijnt als het scriptje draait, maar met nul ertussen
   lazen twee knoppen boven en één eronder als een scheve driehoek in plaats
   van als één rij die afbreekt. Dezelfde afstand als tussen de knoppen
   onderling. */
.knoprij--midden + .deelrij--midden { margin-top: 0.75rem; }

/* --- De regel waarop je iets doet ---------------------------------------- */

/* Een veld met de knoppen ernaast, op één regel. Voor een kaart waarin je één
   ding afhandelt, zoals een review goedkeuren met een notitie erbij. Het veld
   rekt mee, de knoppen houden hun maat, en op een smal scherm zakken ze
   eronder. */
.doenregel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.doenregel .veld {
  flex: 1 1 16rem;
  margin-bottom: 0;
}
/* De knoppen lijnen uit met de onderkant van het veld, en dat veld heeft een
   label boven zich. Zonder deze regel hangen ze een label hoger. */
.doenregel .knop { margin-bottom: 0; }

/* --- De stand van zaken boven een beheerlijst ----------------------------- */

/* Eén regel die zegt wat er te doen is, met de knop ernaast die je daarheen
   brengt. Dit zat eerst in een kaart met de knop eronder. Dat kostte
   tweehonderd pixels voor één zin, en op een scherm van negenhonderd hoog
   duwde dat de lijst zelf helemaal uit beeld.

   Op een smal scherm zakt de knop onder de tekst, want naast een zin van drie
   regels past hij niet. */
.standregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rand);
}
.standregel p {
  margin: 0;
  max-width: 52em;
}

/* --- Zoeken en filteren op het overzicht --------------------------------- */

/* Eén regel op een breed scherm, onder elkaar op een telefoon. De knop lijnt
   onderaan uit met de velden ernaast, want die hebben een label erboven.

   Dit was een grid met vier vaste kolommen. Dat ging stuk zodra er een filter
   bij kwam: de verhalenlijst heeft er vijf, en dan zakte de knop naar een
   eigen regel en werd hij over de volle breedte uitgerekt. Zo stond de minst
   belangrijke knop van het scherm er als grootste op. Met flexbox telt hij
   zichzelf, hoeveel velden er ook staan. */
.zoekbalk {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
/* Het zoekveld krijgt twee keer zoveel ruimte als een keuzelijst, want daar
   typ je een halve zin in en in de rest staat één woord. */
.zoekbalk .veld {
  flex: 1 1 9rem;
  margin-bottom: 1rem;
}
/* :first-of-type en niet :first-child. In een paar van deze formulieren staan
   verborgen velden vooraan die de sortering meenemen, en dan is het zoekveld
   niet meer het eerste kind en kreeg het de breedte van een keuzelijst. */
.zoekbalk .veld:first-of-type { flex: 2 1 14rem; }
/* De knop telt zijn eigen breedte. Dit stond er als .zoekbalk__knop, en dat is
   één klasse minder specifiek dan .zoekbalk .veld erboven, dus de knop werd
   alsnog uitgerekt als een filterveld. Precies het gedrag dat de uitleg boven
   dit blok beschrijft als opgelost. */
.zoekbalk .veld.zoekbalk__knop { flex: 0 0 auto; }

/* Eén bron bij alle aangevinkte verhalen, onder de verhalenlijst in het beheer.

   Dezelfde rij als een zoekbalk, met de knop die zijn eigen breedte houdt. De
   regel met uitleg staat met opzet buiten die rij: een hulpregel binnen een rij
   die op de onderkant uitlijnt duwt het veld ernaast omhoog. */
.bulkbron { margin-top: 1.25rem; }
.bulkbron__velden {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: end;
}
.bulkbron__velden .veld {
  flex: 1 1 14rem;
  margin-bottom: 1rem;
}
.bulkbron__velden .veld.bulkbron__knop { flex: 0 0 auto; }
.bulkbron .veld__hulp { margin-top: 0; }

/* Op een telefoon stond elk filter op een eigen regel. Bij de agenda zijn dat
   er vijf, en dan staat de lijst waarvoor je kwam vijfhonderd pixels lager.
   Twee naast elkaar past prima: in een keuzelijst staat één woord. Het
   zoekveld en de knop houden hun eigen regel, want daar typ je in en daar tik
   je op. */
@media (max-width: 34em) {
  .zoekbalk { gap: 0 0.75rem; }
  .zoekbalk .veld {
    flex: 1 1 6.5rem;
    margin-bottom: 0.75rem;
  }
  .zoekbalk .veld:first-of-type { flex: 1 1 100%; }
  .zoekbalk .veld.zoekbalk__knop { flex: 1 1 100%; }
  .zoekbalk__knop .knop { width: 100%; }
}

/* --- De moment-kiezer ---------------------------------------------------- */

/* Je begint niet bij de fles maar bij het moment. Daarom staan deze knoppen
   bovenaan het overzicht, vóór het zoekveld. Gewone links, dus je kunt een
   moment doorsturen en de terugknop doet wat je verwacht. */
.momentkiezer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.momentknop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rand);
  border-radius: var(--pil);
  color: var(--inkt);
  text-decoration: none;
  font-size: 0.85rem;
}
.momentknop:hover,
.momentknop:focus-visible { border-color: var(--goud); color: var(--goud); }
.momentknop--aan {
  border-color: var(--goud);
  background: var(--goud);
  color: var(--inkt-op-goud);
}
.momentknop--aan .zacht { color: inherit; opacity: 0.75; }

/* Op een telefoon loopt een formulier in een kaart als één kolom: drie velden
   over de volle breedte en daaronder een knop die net zo breed is. Een knop die
   op een derde van de breedte eindigt hangt daar los onder. */
@media (max-width: 40em) {
  .kaart > form > .knop,
  .kaart > form > button.knop { width: 100%; }
}

/* --- Inhoudsopgave bij een lange pagina ---------------------------------- */

/* De privacyverklaring en de voorwaarden zijn lang en mensen komen er met één
   vraag. Twee kolommen op een breed scherm, één op een telefoon. */
.inhoudsopgave {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: var(--hoek);
}
.inhoudsopgave ul {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  columns: 1;
  font-size: 0.95rem;
}
@media (min-width: 40em) {
  .inhoudsopgave ul { columns: 2; column-gap: 2rem; }
}
.inhoudsopgave li { break-inside: avoid; margin-bottom: 0.4rem; }

/* Het profielmenu in de sitekop staat tussen de navigatielinks, dus het moet
   zich als zo'n link gedragen: niet onderstrepen en niet in hoofdletters. */
.kop__nav .profielmenu > summary { padding: 0; }
/* En op een aanraakscherm toch weer een tikgebied van vierenveertig pixels.
   Deze regel moet hier staan en niet bij de andere tikdoelen hierboven: de
   regel erboven weegt zwaarder dan één klasse, dus daar verloor hij van. */
@media (pointer: coarse) {
  .kop__nav .profielmenu > summary { padding: 0.25rem; margin: -0.25rem; }
}
.kop__nav .profielpaneel a,
.kop__nav .profielpaneel .menuknop {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.95rem;
}

/* Een afslag onder een knop: hoort er niet bij, staat er wel naast. Een
   streepje erboven zodat het niet als bijschrift bij de knop leest. */
.afslag {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

/* Een tekstvak dat meegroeit mag niet springen tijdens het typen. */
textarea[data-groeit] {
  overflow: hidden;
  resize: none;
}

/* "Waar je aan begint" boven de rondes: een rijtje feiten, geen opsomming met
   bolletjes. Op een breed scherm naast elkaar, op een telefoon onder elkaar. */
.waaraan { margin-bottom: 2rem; }
.waaraan__lijst {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 2rem;
}
@media (min-width: 46em) {
  .waaraan__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.waaraan__lijst li {
  position: relative;
  padding-left: 1.1rem;
}
/* Een streepje in de messingkleur in plaats van een bolletje: hetzelfde
   handschrift als de rest van de site. */
.waaraan__lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5rem;
  height: 1px;
  background: var(--primary);
}

/* Een kaart heeft geen marge onder zich: in een raster regelt de gap de ruimte,
   en daar zou een marge bovenop komen. Staan kaarten gewoon onder elkaar in een
   kolom, dan plakken ze tegen elkaar. Dus de ruimte hier, bij wat erop volgt,
   en in een raster weer weg.

   Dit kwam twee keer terug: eerst een kop vlak onder een kaart, later twee
   kaarten op elkaar en een knoprij die tegen een kaart aan zat. Daarom nu bij
   de wortel en niet per pagina. */
/* Wat er ook op een kaart volgt, het krijgt ruimte. Eerst stond hier een rij
   gevallen: kaart na kaart, een knoprij, een kop. Dat bleef lekken: op het
   inlogscherm stond "wachtwoord vergeten" als gewone alinea tegen de onderrand
   van de kaart aan, en daar was geen regel voor. Eén ster is hier eerlijker
   dan een lijst die je elke keer moet aanvullen als er iets nieuws onder een
   kaart komt. */
.kaart + * { margin-top: 1.5rem; }

/* En een kaart ná een formulier. Die regel hierboven kijkt naar het vorige
   broertje, en dat is op het nakijkscherm het formulier met de bron erin en
   niet de kaart daarbinnen. De kaart met de weg naar de ronde plakte daardoor
   tegen de knoppenrij aan. Niet "* + .kaart", want dan krijgen kaarten naast
   elkaar in een raster ook een marge en zakken de tweede en derde omlaag. */
form + .kaart { margin-top: 1.5rem; }

/* Twee bakken onder elkaar krijgen dezelfde ruimte als twee kaarten.

   Die regel hierboven kijkt naar het vorige broertje, en dat werkt alleen
   binnen één bak. Op de ledenlijst staan er twee: de lijst zelf, en daaronder
   een bak die met het formulier "Een lid erbij" begint. Staat dat formulier
   dicht, en dat is bijna altijd, dan is de kaart Uitnodigen het eerste kind
   van die tweede bak en kreeg hij dus niets. Hij plakte tegen de lijst aan,
   terwijl de kaart eronder wel netjes losstond. */
.bak + .bak { margin-top: 1.5rem; }
.kaart + h2,
.kaart + h3 { margin-top: 2rem; }
.lijst-kaal + .knoprij { margin-top: 1.5rem; }

/* In een raster of een rij doet de gap het werk, en zou deze marge er bovenop
   komen. */
.raster > .kaart + *,
.kerngetallen > .kaart + *,
.printkeuze > .kaart + *,
.beeldbewerk > .kaart + *,
.lijst-kaal > .kaart + * { margin-top: 0; }

/* Een kop waar je met een link naartoe springt mag niet tegen de bovenrand
   van het scherm plakken. */
.inhoudsopgave + div h2,
[id] > h2,
h2[id] { scroll-margin-top: 1.5rem; }

/* --- De beeldbibliotheek in het beheer ----------------------------------- */

.beeldrij {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 40em) {
  .beeldrij { grid-template-columns: 160px 1fr; }
}
.beeldrij__voorbeeld {
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: var(--hoek);
  display: block;
}
.beeldrij__inhoud > form + form { margin-top: 0.5rem; }

/* Een bestandsveld krijgt niet de opmaak van een tekstveld: dat levert in
   elke browser iets anders op. Wel de rand eromheen, zodat het niet los in
   het formulier hangt.

   Behalve een veld dat met opzet weggeklipt is, zoals in het clubpaneel: daar
   is de label de knop die je ziet. Zonder die uitzondering wint deze regel van
   .verborgen-behalve-voorlezer (een element plus een attribuut weegt zwaarder
   dan één klasse) en stond het veld daar alsnog 318 pixels breed te zijn, met
   een onzichtbare inhoud. */
input[type='file']:not(.verborgen-behalve-voorlezer) {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rand-veld);
  border-radius: var(--hoek);
  background: var(--vlak);
  color: var(--inkt);
  font-size: 0.92rem;
}

/* --- Mee naar de winkel --------------------------------------------------- */

/* Drie regels die zeggen in welke hoek je moet zoeken, met de reden eronder.
   Geen tabel, want dit zijn geen getallen om te vergelijken maar drie dingen
   om te onthouden. Het soort staat erboven in kleine letters, zoals het label
   op een kaart, en wat je zoekt eronder in het groot. */
.advieslijst {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.advies {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--goud, var(--primary));
}
.advies__soort {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--inkt-zacht);
}
.advies__wat {
  font-family: var(--letter-kop);
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 500;
}
/* De knoppen onder een aanrader. Knoplinks en geen knoppen, want dit zijn
   vervolgstapjes en niet de hoofdhandeling van dit scherm.

   Naast elkaar, want het zijn twee antwoorden op dezelfde vraag: heb je hem al
   of wil je hem nog. Onder elkaar lazen ze als twee losse dingen, met het gat
   van een tikgebied ertussen. */
.advies__knop { margin-top: 0.3rem; }
.advies__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.5rem;
  margin-top: 0.3rem;
}
.advies__knoppen form { margin: 0; }

/* De knop bij een punt op "hoe staat de site ervoor", zoals het draaien van de
   migraties. Hij hoort bij de regel erboven en niet bij het punt eronder. */
.punt__knop { display: block; margin-top: 0.5rem; }

/* Een rij in het lijstje waarmee je de gaten in de wijnlijst vult. De naam
   erboven en de twee velden eronder, met een streepje tussen de wijnen zodat
   je ziet waar de ene ophoudt. */
.gatrij { padding-top: 0.9rem; border-top: 1px solid var(--rand); }
.gatrij:first-of-type { border-top: 0; padding-top: 0; }
.gatrij__naam { margin: 0 0 0.3rem; }

/* --- Doorbladeren naar de avond ervoor of erna ---------------------------- */

/* Twee vakken naast elkaar, de vorige links en de volgende rechts. Een grid
   met twee gelijke kolommen en geen flexbox, want zonder buur aan één kant
   moet de andere op zijn eigen helft blijven staan in plaats van op te
   schuiven. Op een telefoon onder elkaar, en dan valt het lege vak weg. */
.buuravonden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0 1.5rem;
}
.buuravond {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rond, 10px);
  text-decoration: none;
  color: inherit;
  /* Een tikdoel op een aanraakscherm, en genoeg hoogte voor drie regels. */
  min-height: 44px;
}
.buuravond:hover { border-color: var(--goud, var(--primary)); }
/* De tweede knop gaat de andere kant op, dus die lijnt rechts uit. */
.buuravond--verder { text-align: right; }
.buuravond--leeg { border: 0; padding: 0; min-height: 0; }
.buuravond__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--inkt-zacht);
}
.buuravond__naam { font-weight: 600; }

@media (max-width: 34em) {
  .buuravonden { grid-template-columns: 1fr; }
  .buuravond--verder { text-align: left; }
  .buuravond--leeg { display: none; }
}

/* --- De agenda van een club ---------------------------------------------- */

/* Dit was een lijst met kaarten eronder. Vanaf een stuk of acht avonden ben je
   daarin aan het scrollen in plaats van aan het kijken, dus het is een tabel
   geworden met wat geweest is erbij. */
.lijst--agenda { table-layout: fixed; width: 100%; min-width: 45rem; }
/* Met de kolom voor het cijfer van de avond erbij past hij niet meer in die
   breedte, en dan knijpt de kolom met de naam van de avond dicht. */
.lijst--agenda-metcijfer { min-width: 51.5rem; }
/* Een club die geen gastheer of geen aanmeldingen bijhoudt mist een kolom of
   twee, en hoeft dan ook niet zo breed te zijn. */
.lijst--agenda-kaal { min-width: 33.5rem; }
.lijst--agenda .kol-vink { width: 2.5rem; }
/* De datum is een kalenderblaadje van drie rem breed en niet meer een regel
   tekst, dus deze kolom mag krapper. Wat eraf gaat komt bij de naam van de
   avond terecht, en daar werd het nodig gemist. */
.lijst--agenda .kol-wanneer { width: 6rem; }
.lijst--agenda .kol-gastheer { width: 9rem; }
.lijst--agenda .kol-mensen { width: 6.5rem; }
.lijst--agenda .kol-avondcijfer { width: 6.5rem; }
.lijst--agenda .kol-acties { width: 7.5rem; }
.lijst--agenda th,
.lijst--agenda td { padding: 0.85rem 0.9rem; vertical-align: top; }
.lijst--agenda td { overflow-wrap: anywhere; }
.lijst--agenda th:first-child,
.lijst--agenda td:first-child { padding-left: 0; }
.lijst--agenda th:last-child,
.lijst--agenda td:last-child { padding-right: 0; }
.lijst--agenda p { margin: 0.2rem 0 0; }

/* De datum met de dag van de week eronder. Een club spreekt in dagen: het is
   de eerste donderdag, niet de twaalfde. */
.agenda__wanneer strong { display: block; white-space: nowrap; }
.agenda__wanneer .klein {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Het aantal mensen: een getal dat verandert, geen kop. Cijfers van gelijke
   breedte, anders staan ze per rij te dansen. */
.agenda__mensen {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.agenda__mensen strong { display: block; }
/* Het woord eronder is uitleg bij het getal, geen getal. Niet afbreken: over
   twee regels wordt "waren er" tot "waren" en "er". */
.agenda__mensen .klein {
  color: var(--inkt-zacht);
  white-space: nowrap;
}

/* Het cijfer dat de gasten de avond als geheel gaven. Dezelfde vorm als het
   aantal mensen ernaast, want het is hetzelfde soort kolom: een getal met een
   woord eronder. Wel in de accentkleur, want dit is een oordeel en geen
   telling. */
.agenda__avondcijfer {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.agenda__avondcijfer strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 500;
}
.agenda__avondcijfer .klein {
  color: var(--inkt-zacht);
  white-space: nowrap;
}

/* Een avond die geweest is valt naar achteren, maar de links erin blijven
   leesbaar. Met opacity op de rij zou de hele rij vervagen, link en al. */
.lijst__rij--geweest td { color: var(--inkt-zacht); }

/* Een bedrag dat nog moet komen telt niet mee in het saldo, en dat hoort je
   ook op te vallen als je niet leest wat er in het pilletje staat. Geen eigen
   kleur voor de hele rij: dan lijkt hij uitgezet, en hij is juist het enige
   waar nog iets mee moet. Alleen het bedrag staat zachter, zonder plus of min,
   want het is nog geen bij of af. Deze regel kan hier staan omdat de algemene
   tabelregel geen kleur zet. Zou dat wel zo zijn, dan moest er table.lijst
   voor. */
.lijst__rij--open .kas__bedrag { color: var(--inkt-zacht); }

.kol-vink { text-align: left; }
.kol-vink input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
}

/* De regel met de eerstvolgende avond op "mijn clubs". Hij mag opvallen
   tussen de rest van de kaart, want dat is waarvoor je kijkt. */
.clubregel {
  margin: 0.25rem 0 0.35rem;
  color: var(--inkt);
}
.clubregel strong { white-space: nowrap; }

/* Het balkje bij een cijfer. Als svg, want een style-attribuut haalt de CSP
   niet en dan stond er een balk van nul. */
.meter {
  display: block;
  width: 100%;
  height: 0.4rem;
  margin-top: 0.6rem;
  overflow: visible;
}
.meter__spoor { fill: var(--line); }
.meter__vol { fill: var(--primary); }
.meter__vol[data-stijl='bubbel'] { fill: var(--stijl-bubbel); }
.meter__vol[data-stijl='wit']    { fill: var(--stijl-wit); }
.meter__vol[data-stijl='rose']   { fill: var(--stijl-rose); }
.meter__vol[data-stijl='rood']   { fill: var(--stijl-rood); }
.meter__vol[data-stijl='zoet']   { fill: var(--stijl-zoet); }

/* Het kasboekje. Het bedrag staat vóór de naam: op een telefoon schuift deze
   tabel, en dan hoort het geld binnen beeld te blijven en de naam eraf te
   vallen. Dat is de kolom waarvoor je het boekje opent. */
.lijst--kas { table-layout: fixed; width: 100%; min-width: 42rem; }
/* Zonder de kolom Wie hoeft het boekje niet zo breed te zijn. */
.lijst--kas-kaal { min-width: 32rem; }
.lijst--kas .kol-wanneer { width: 6.5rem; }
.lijst--kas .kol-bedrag { width: 7rem; }
.lijst--kas .kol-wie { width: 10rem; }
.lijst--kas .kol-acties { width: 6rem; }
.lijst--kas th,
.lijst--kas td { padding: 0.85rem 0.9rem; vertical-align: top; }
.lijst--kas td { overflow-wrap: anywhere; }
.lijst--kas th:first-child,
.lijst--kas td:first-child { padding-left: 0; }
.lijst--kas th:last-child,
.lijst--kas td:last-child { padding-right: 0; }

/* De namenlijst van een club, met wat je over een lid weet. */
.lijst--namen { table-layout: fixed; width: 100%; min-width: 46rem; }
/* Een club zonder accounts mist twee kolommen, en hoeft dus ook niet zo breed
   te zijn. Dat scheelt op een telefoon een heel stuk zijwaarts schuiven. */
.lijst--namen-kaal { min-width: 30rem; }
.lijst--namen .kol-vink { width: 2.5rem; }
.lijst--namen .kol-rol { width: 7rem; }
.lijst--namen .kol-account { width: 13rem; }
.lijst--namen .kol-laatst { width: 7.5rem; }
.lijst--namen .kol-beurten { width: 6rem; }
.lijst--namen .kol-acties { width: 7.5rem; }
.lijst--namen th,
.lijst--namen td { padding: 0.85rem 0.9rem; vertical-align: top; }
.lijst--namen td { overflow-wrap: anywhere; }
.lijst--namen th:first-child,
.lijst--namen td:first-child { padding-left: 0; }
.lijst--namen th:last-child,
.lijst--namen td:last-child { padding-right: 0; }
.lijst--namen .pil { margin-top: 0.25rem; }

/* De streep waar vandaag ligt, tussen wat geweest is en wat komt. Klein en in
   goud: het is een wegwijzer en geen avond.

   Met table.lijst ervoor, want "table.lijst td" hierboven is specifieker dan
   ".lijst__vandaag td" en zet anders gewoon zijn eigen rand en ruimte terug.
   Dat is dezelfde val als bij de kolombreedtes: een latere regel wint niet
   vanzelf van een specifiekere. */
table.lijst tr.lijst__vandaag td {
  border-bottom: 1px solid var(--goud);
  padding: 0.45rem 0.75rem 0.25rem;
}
table.lijst tr.lijst__vandaag span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud);
}

/* De balk onder een lijst: wat je met een paar aangevinkte rijen tegelijk
   doet, met links de telling die het scriptje bijhoudt. */
.bulkbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.bulkbalk p { margin: 0; }

/* De avond die bij het smaakprofiel past. Heet smaakhint en niet suggestie:
   die naam was al van de flessuggestie onder een wijnstijl, en die heeft zijn
   eigen opmaak met een streepje ervoor. Twee dingen met dezelfde klassenaam
   betekent dat je de ene verandert door aan de andere te werken. */
/* Geen streep en geen ruimte erboven. Die hoorden bij de tijd dat dit blok
   onderaan de profielkaart stond, met iets erboven om van te scheiden. Het
   staat nu in zijn eigen kaart, en die heeft zelf al een rand en ruimte. Wat
   overbleef was een lege strook met een streep die niets scheidde. */
.smaakhint {
  margin-top: 0;
}
.smaakhint__titel {
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  margin: 0.2rem 0 0.4rem;
}
.smaakhint__titel a { color: var(--inkt); }

/* Tekst en foto naast elkaar. Zonder align-items: start rekt de figure mee met
   de hoogte van de tekstkolom, en dan staat er een leeg vlak onder de foto. */
.clubblok { align-items: start; }
.clubblok .foto { margin-bottom: 0; }
/* Onder elkaar staat de knop midden onder de tekst; naast elkaar hoort hij
   links onder de alinea's te beginnen, zoals de tekst erboven. */
.clubblok .knoprij { justify-content: center; }
@media (min-width: 46em) {
  .clubblok .knoprij { justify-content: flex-start; }
}

/* --- Een review op de voorpagina ------------------------------------------ */

.quote {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.5rem);
  background: var(--vlak-kaart);
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.quote blockquote {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: 1.05rem;
  line-height: 1.5;
}
.quote figcaption {
  margin-top: auto;
  color: var(--inkt-zacht);
  font-size: 0.85rem;
}

/* Stippen in plaats van sterren: sterren staan op elke site en zeggen daardoor
   niets meer, en een ster in goud op goud is bovendien slecht te zien. */
.quote__cijfer {
  display: flex;
  gap: 0.3rem;
  margin: 0;
}
.quote__stip {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--pil);
  border: 1px solid var(--primary);
}
.quote__stip--vol { background: var(--primary); }

/* --- De uitslag bij de gasten --------------------------------------------- */

.uitslag__winnaar { margin: 0.25rem 0 0.6rem; }
.uitslag__cijfer { margin: 0.6rem 0 1rem; }
.uitslag__cijfer strong {
  font-family: var(--letter-kop);
  font-size: 1.6rem;
  color: var(--primary);
}
.uitslag__rij {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rand);
}
.uitslag__rij li {
  display: grid;
  /* Het nummer vast, de naam wat er over is, het cijfer rechts. Zo staan de
     cijfers onder elkaar en lees je de rij als een ranglijst. */
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rand);
}
.uitslag__plek { color: var(--inkt-zacht); font-size: 0.85rem; }
.uitslag__naam { min-width: 0; }
.uitslag__getal {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.uitslag__rij li:first-child .uitslag__naam { font-weight: 700; }

/* --- De ranglijst van een avond uit het clubarchief ------------------------ */

/* Niet .uitslag__ hergebruiken: dat is de uitslag in de gast-modus, waar
   .uitslag__rij de ol is en hier de li zou zijn. Twee betekenissen voor één
   naam en je verandert het ene scherm terwijl je naar het andere kijkt. */
.ranglijst {
  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
  border-top: 1px solid var(--rand);
}
.ranglijst__rij {
  display: grid;
  /* Nummer vast, de naam met de balk wat er over is, het cijfer rechts. */
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rand);
}
.ranglijst__plek {
  margin: 0;
  color: var(--inkt-zacht);
  font-size: 0.85rem;
}
.ranglijst__midden { min-width: 0; }
.ranglijst__naam { margin: 0 0 0.4rem; }
.ranglijst__naam .pil { margin-left: 0.4rem; }
.ranglijst__balk {
  display: block;
  width: 100%;
  height: 0.4rem;
}
.ranglijst__balk-leeg { fill: var(--vlak-diep); }
.ranglijst__balk-vol { fill: var(--primary); }
.ranglijst__cijfer {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ranglijst__cijfer strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.4rem;
  color: var(--primary);
}
.ranglijst__rij:first-child .ranglijst__naam strong { font-weight: 700; }

/* --- Een staafdiagram in de pagina zelf ----------------------------------- */

/* preserveAspectRatio staat op none, dus de staven rekken mee met de breedte
   van de kaart. Dat mag hier: het gaat om de vorm van de reeks, niet om de
   exacte breedte van één staaf. */
.staafjes {
  display: block;
  width: 100%;
  height: 7rem;
  color: var(--primary);
  margin: 0.5rem 0 0.4rem;
}
.staafjes__as {
  display: flex;
  justify-content: space-between;
  color: var(--inkt-zacht);
  font-size: 0.75rem;
  margin: 0 0 1rem;
}

.cijfers summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
}
.cijfers[open] summary { margin-bottom: 0.75rem; }

.conversie {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* --- Lijsten met vinkjes en een duim -------------------------------------- */

.lijst__vink { width: 2.25rem; }
/* In een tabelcel staat er geen tekst naast het vinkje, dus geen raster van
   twee kolommen met een gat ernaast. */
.lijst__vink .vink {
  display: block;
  margin: 0;
}
/* Een vinkje dat uitstaat hoort er te staan en niet te schreeuwen. Zonder dit
   zet de browser er een lichtgrijs blok neer dat op een donkere pagina harder
   roept dan de vinkjes die je wél kunt aanzetten. */
.lijst__vink input[disabled] {
  /* Ver naar achteren. De browser tekent een uitgezet vinkje in een lichtgrijs
     dat op een donkere pagina harder roept dan de vinkjes die je wél kunt
     aanzetten, en dan kijk je naar precies de verkeerde regels. */
  opacity: 0.18;
  cursor: not-allowed;
}
.lijst__duim {
  display: block;
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--ronding-klein);
  background: var(--vlak-diep);
}
/* De naamkolom mag de breedte pakken die er is; de rest is kort en vast. */
.lijst--beeld td:nth-child(3) { min-width: 14rem; }

/* De verhalenlijst heeft twee kolommen met lopende tekst. Een cel rekt mee met
   zijn inhoud, dus zonder een maat erop wordt de tabel breder dan het scherm
   en schuiven de kolommen waar je voor komt (bron en status) eruit. max-width
   op een td doet niets in een tabel die zichzelf opmeet; op een blok erbinnen
   wel. Vandaar het laagje eromheen. */
/* Vaste kolommen, met een bodem eronder. Zonder die bodem knijpt een telefoon
   de percentages tot kolommen van twintig pixels en wordt één rij duizend
   pixels hoog. Met een min-width schuift de tabel zijwaarts, net als de
   beeldbibliotheek en de avondenlijst. */
.lijst--verhalen { table-layout: fixed; width: 100%; min-width: 44rem; }
.lijst--verhalen .kol-vink { width: 2.5rem; }
/* De avondkolom stond op 22% en brak "Feestdagen aan tafel, ronde 4" na de
   komma af, met het cijfer alleen op de tweede regel. Dat zijn twee regels
   voor vier woorden, in élke rij. */
.lijst--verhalen .kol-avond { width: 26%; }
.lijst--verhalen .kol-verhaal { width: 38%; }
.lijst--verhalen .kol-bron { width: 13%; }
.lijst--verhalen .kol-status { width: 15%; }
.lijst--verhalen .kol-acties { width: 5.5rem; }
/* Een bron-url is één woord van honderd tekens. Zonder dit duwt hij zijn kolom
   open, ook met table-layout: fixed, en loopt hij over de rand heen. */
.lijst--verhalen td { overflow-wrap: anywhere; }

/* Het rondenummer hoort bij het woord ervoor. Zonder dit staat "ronde" aan het
   eind van de ene regel en het cijfer alleen op de volgende. */
.lijst--verhalen .plek__ronde { white-space: nowrap; }

/* De notitie bij een verhaal komt uit de database en kan een hele zin zijn.
   Een .status past hier dus niet: die staat op nowrap, en dan duwt één lange
   notitie de tabel breder dan het scherm. Hetzelfde stipje, wel afbreekbaar. */
.nakijken {
  margin: 0.35rem 0 0;
  color: var(--inkt-zacht);
}
.nakijken::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--stijl-rood);
  margin-right: 0.45rem;
  vertical-align: 0.1em;
}

.bladeren {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

/* Een kolomkop waarop je kunt sorteren. De pijl zit in de tekst, dus hier
   alleen de kleur van wat actief is. */
table.lijst th a { color: inherit; text-decoration: none; }
table.lijst th a:hover { color: var(--primary); }
table.lijst th a[aria-current] { color: var(--primary); }

/* --- Eén foto bewerken ---------------------------------------------------- */

.beeldbewerk {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.25rem;
}
@media (min-width: 52em) {
  .beeldbewerk { grid-template-columns: 1fr 1.2fr; align-items: start; }
}
.beeldbewerk__voorbeeld {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ronding-klein);
  margin-bottom: 1rem;
}

/* De regel op een themapagina die naar je eigen club wijst. Hij komt met
   javascript te voorschijn en alleen als dit toestel een club kent, dus hij
   mag geen ruimte innemen als hij er niet is. */
.clubaanbod {
  margin: 1.25rem 0 0;
  color: var(--inkt-zacht);
  font-size: 0.92rem;
}
.clubaanbod[hidden] { display: none; }

/* De voetregel van de kookmodus: de mededeling over het scherm links, de knop
   om opnieuw te beginnen rechts. */
.koken__onder {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Springen binnen de clubpagina ---------------------------------------- */

/* De vijf stukken van een club stonden hier als een rij pillen boven aan de
   pagina. Dat werkte alleen zolang je bovenaan stond: zodra je bij de kas was
   moest je helemaal terug omhoog om naar de namen te gaan. Ze staan nu in de
   balk onderin, die altijd meekijkt. */

/* Bij het springen moet de kop niet tegen de bovenrand plakken. */
section[id] { scroll-margin-top: 1.25rem; }

/* De meldknop onder een reactie. Stil en klein: hij hoort er te zijn, maar hij
   hoort niet de eerste knop te zijn die je ziet onder wat iemand geschreven
   heeft. */
.melden { margin-top: 0.75rem; }
.melden > summary {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
  font-weight: 400;
}
.melden > summary:hover { color: var(--inkt); }
.melden form { margin-top: 0.75rem; }

/* Het kiekje bij een clubavond. Geen vaste verhouding: wat iemand uit zijn
   telefoon haalt is staand of liggend, en bijsnijden kost nou juist het stuk
   waar het om ging. Wel een bovengrens in de hoogte, anders vult één staande
   foto het hele scherm. */
.clubkiekje {
  margin: 0 0 1rem;
}
.clubkiekje img {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: var(--ronding);
  border: 1px solid var(--rand);
}

/* Waarvoor mensen een avond gaven, boven de reviews. Hetzelfde rijtje pillen
   als de namenlijst, want het is hetzelfde gebaar: een korte opsomming die je
   in één oogopslag leest. */
.momentbalk {
  list-style: none;
  margin: 0.5rem 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.momentbalk li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--pil);
  font-size: 0.92rem;
}

/* Je eigen regel in de namenlijst aanpassen. Een uitklapper, want het is iets
   wat je één keer doet en daarna nooit meer. */
.eigennaam { margin-top: 1rem; }
.eigennaam form { margin-top: 0.75rem; }

/* De namen van een club voor wie ze niet mag bijwerken. Hetzelfde rijtje dat
   anders in het tekstvak staat, maar dan om te lezen. */
.namenlijst {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.namenlijst li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--pil);
  font-size: 0.92rem;
}
/* Jouw eigen naam licht op, net als in de lijst met wie er komt. */
.namenlijst li.is-mij {
  border-color: var(--goud);
  color: var(--goud);
}

/* --- Wie neemt wat mee ---------------------------------------------------- */

.meenemen { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.meenemen__rij {
  display: grid;
  /* Wat krijgt de ruimte, wie staat ernaast, en de knop blijft rechts hangen.
     Op een telefoon kan dat niet naast elkaar, dus daar wordt het één kolom. */
  grid-template-columns: 1fr;
  gap: 0.15rem 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--rand);
}
.meenemen__rij:first-child { border-top: 0; }
@media (min-width: 30em) {
  .meenemen__rij {
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
  }
}
.meenemen__wie { color: var(--primary); font-size: 0.9rem; }
/* Een regel zonder naam is juist de regel die opvalt moet worden: daar is nog
   niets voor afgesproken. */
.meenemen__wie--leeg { color: var(--inkt-zacht); font-style: italic; }
.meenemen__rij form { margin: 0; }

.meenemen__formulier {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 34em) {
  .meenemen__formulier { grid-template-columns: 1.6fr 1fr auto; }
}
.meenemen__formulier .veld { margin-bottom: 1rem; }
.meenemen__knop .knop { width: 100%; }

/* --- Wie komt er --------------------------------------------------------- */

.wiekomt__telling { margin: 0.25rem 0 1rem; }
.wiekomt { list-style: none; margin: 0; padding: 0; }
.wiekomt__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--rand);
}
.wiekomt__rij:first-child { border-top: 0; }
/* Jouw eigen regel. Een streepje in de messingkleur ernaast, geen vlak eromheen:
   met acht namen onder elkaar hoef je alleen te weten welke van jou is. */
/* Een kaart binnen een kaart. Een donkerder vlak zonder rand: twee randen om
   elkaar heen maakt er een doos van. */
.kaart--inkaart {
  background: var(--vlak-diep);
  border: 0;
  margin-top: 1rem;
}

/* "Jij hebt nog niet gezegd of je komt": een zin die alleen voor jou bedoeld
   is, dus hij mag opvallen zonder te schreeuwen. */
.agenda__jij {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--primary);
}

.wiekomt__rij.is-mij {
  box-shadow: inset 2px 0 0 var(--primary);
  padding-left: 0.65rem;
}
.wiekomt__naam { min-width: 0; }
/* Wie niet kan blijft staan, maar hoeft niet net zo hard te roepen als de
   rest. Weghalen is erger: dan lijkt het of hij nog niet geantwoord heeft. */
.wiekomt__naam--niet { color: var(--inkt-zacht); }
.wiekomt__merk {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.wiekomt__merk--niet { color: var(--inkt-zacht); }
.wiekomt__knoppen {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  flex: none;
}

/* --- De uitnodiging voor één avond --------------------------------------- */

/* Deze pagina is één bericht, geen werkblad: de datum staat bovenaan en groot,
   want dat is waar de lezer op kijkt. */
.uitnodiging__beeld { margin-bottom: 1.5rem; }
.uitnodiging__datum {
  color: var(--primary);
  font-family: var(--letter-kop);
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  margin: 0 0 0.25rem;
}
.uitnodiging__titel { margin-top: 0; }
/* Een lijst met een woord ervoor. Op de uitnodiging van een clubavond, en op
   de pagina van een wijn onder Over deze fles. Dezelfde vorm, want het is
   hetzelfde ding: een handvol feiten met een kort woord dat zegt wat het is. */
.uitnodiging__regels,
.fleslijst {
  margin: 1.75rem 0;
  display: grid;
  gap: 1rem;
}
/* Op de wijnpagina staat deze lijst boven aan een kaart, waar de kop er al
   ruimte boven geeft, en onder de lijst volgt nog een link. */
.fleslijst { margin: 1.25rem 0; }
.uitnodiging__regels dt,
.fleslijst dt {
  color: var(--inkt-zacht);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.uitnodiging__regels dd,
.fleslijst dd { margin: 0; }
/* De zinnen die onder een waarde horen, zoals hoe je hem schenkt. */
.fleslijst dd p { margin-top: 0.35rem; }

/* Bedragen in het kasboekje: rechts uitlijnen en met cijfers van gelijke
   breedte, anders staan de centen onder elkaar te dansen. */
.kas__bedrag {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kas__bedrag--in { color: var(--stijl-bubbel); }
/* De datum staat kort in de tabel en mag dus niet alsnog afbreken. */
.kas__datum { white-space: nowrap; }

/* Het verhaal bij een fles. De eerste alinea iets groter: dit is een tekst om
   voor te lezen aan tafel, niet om te scannen. */
.flesverhaal > p:first-child { font-size: 1.15rem; }
.flesverhaal > p:last-child { margin-bottom: 0; }

/* De regel onder een fles die een sticker heeft. Geen details-element zoals
   .melden hierboven: er valt niets uit te klappen, er staat al wat er staat. */
.stickerregel {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.stickerregel p { margin: 0; color: var(--inkt-zacht); }
.stickerregel form { margin: 0; }

/* --- Een verhaal nakijken -------------------------------------------------- */

/* De kop met de teller ernaast: hoeveel er nog liggen is hier het enige getal
   dat telt, dus het staat naast de titel en niet ergens onderin. */
.nakijkkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.nakijkkop h1 { margin-bottom: 0; }
.nakijkkop p { margin: 0; }

/* Het blok met wat er na te kijken valt. Dit is waarom je op dit scherm bent,
   dus het mag eruit springen tussen de andere kaarten. */
.kaart--letop {
  border-left: 3px solid var(--primary);
}

/* --- Een QR-code op het scherm -------------------------------------------- */

/* Staat waar iemand anders een code moet overnemen: bij een avond en bij een
   club. Op een witte ondergrond met wat lucht eromheen, want een camera heeft
   wit nodig om te zien waar de code ophoudt. Die stilterand zit al in de svg;
   de witte achtergrond hier is voor het geval de code op een donkere kaart
   staat, zoals overal op deze site. */
.qrblok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
}
.qrblok__code {
  display: block;
  width: min(11rem, 60vw);
  background: #fff;
  border-radius: var(--ronding-klein);
  line-height: 0;
}
.qrblok__code .qr {
  display: block;
  width: 100%;
  height: auto;
}
.qrblok__uitleg {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

/* "Of tik deze code in": de weg terug voor wie niet kan scannen. Klein, want
   het is de uitwijk en niet de bedoeling. */
.avondcode__ofwel {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  color: var(--inkt-zacht);
}

/* --- Het slot van het verhaal op /over ------------------------------------ */

/* Apart gezet met een haarlijn boven en onder. Dat is het zetwerk-gebaar voor
   "dit staat op zichzelf", zonder aanhalingstekens: die zouden een spreker
   suggereren die er niet is. De tekst is van de site zelf.

   Midden op de regel, want het zijn drie korte regels die als een opsomming
   onder elkaar horen te staan; links uitgelijnd zou de derde regel er los bij
   bungelen. */
.manifest {
  margin: 2.5rem 0;
  padding: 2rem 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  text-align: center;
}
.manifest__voor {
  font-family: var(--letter-kop);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  line-height: 1.7;
  color: var(--inkt);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lucht tussen de drie regels.

   Ze beginnen alle drie met "Voor wie", en die herhaling is wat ze bij elkaar
   houdt. Zonder tussenruimte plakken ze tot één blok en zie je dat niet meer.
   Met ruimte leest het als drie beweringen, en dat is wat het is. */
.manifest__voor li + li { margin-top: 0.55em; }

/* Onder de 480 pixels past de langste regel er niet meer op. Dan is midden op
   de regel geen keuze meer maar een ongeluk: je ziet een halve zin eronder
   hangen. Links uitgelijnd leest het weer als een opsomming.

   Hier stond ook een hangende inspringing, zodat een vervolgregel onder de
   eerste insprong. Dat werkt alleen als er iets in die inspringing staat,
   zoals een opsomteken. Er staat niets, dus zag je een regel die om geen
   reden naar rechts schoof en las het als een fout. De tussenruimte hierboven
   doet dat werk nu wel: een regel die er strak onder staat hoort bij de regel
   erboven, een regel na een gat is een nieuwe.

   Boven de 480 passen alle drie de regels op één regel, nagemeten. */
@media (max-width: 29.99em) {
  .manifest { text-align: left; }
}
.manifest__slot {
  font-family: var(--letter-kop);
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.3;
  color: var(--primary);
  margin: 1.25rem 0 0;
}

/* De telefoonkant op de printpagina. Een accentrand links, zodat hij niet
   leest als een vijfde ding om te printen maar als het alternatief ernaast. */
.printkeuze__telefoon {
  border-left: 3px solid var(--primary);
  max-width: 42rem;
}

/* Het slot van de kookmodus. Zelfde maat als een stap, zodat het voelt als de
   laatste bladzijde en niet als iets dat erbij geplakt is. */
.koken__slot {
  padding-block: 1.5rem 2rem;
}
.koken__slot h2 {
  margin-bottom: 0.75rem;
}

/* --- De 18+-poort op een kort scherm -------------------------------------- */

/* Dit is het eerste scherm dat iedere bezoeker ziet, en op een telefoon van
   568 pixels hoog was de poort er 734: je moest scrollen om de knop te vinden.
   Het staande merk nam daar 307 van, bijna de helft.

   Op de hoogte en niet op de breedte, want dat is waar het misging: een brede
   telefoon in liggende stand heeft hetzelfde probleem. Het merkblok krimpt,
   de rank gaat eruit (die is versiering) en de witruimte eromheen wordt
   krapper. De vraag en de twee knoppen blijven precies zoals ze waren. */
@media (max-height: 44em) {
  .poort .merk-staand { margin-bottom: 1.25rem; }
  .poort .merk-staand__beeld {
    width: clamp(56px, 13vh, 92px);
    margin-bottom: 0.5rem;
  }
  .poort .merk-staand .woordmerk { font-size: clamp(1.8rem, 6vh, 2.6rem); }
  .poort .merk-staand__rank { display: none; }
  .poort .knoprij { margin-top: 1.25rem; }
  .poort__klein { margin-top: 1.25rem; }
}

/* Nog korter dan 608 pixels: dan moet ook de tagline eruit en wordt het merk
   zo klein als het kan zonder onherkenbaar te worden. Op 320 bij 568 past de
   poort daarmee op het scherm, en dat is het kleinste scherm dat er nog
   rondloopt. */
@media (max-height: 38em) {
  .poort .merk-staand__beeld { width: clamp(44px, 10vh, 64px); }
  .poort .merk-staand .woordmerk { font-size: clamp(1.5rem, 5vh, 2rem); }
  .poort .merk-staand .tagline { display: none; }
  .poort .merk-staand { margin-bottom: 1rem; }
}

/* Het merk midden in het verhaal op /over, op de plek waar de naam voor het
   eerst valt. Lucht erboven en eronder, zodat het leest als een pauze in de
   tekst en niet als een plaatje dat tussen twee alinea's geschoven is. */
.overmerk {
  margin: 2.5rem 0 1.25rem;
}
/* De losse gouden regel onder het merk is weer gewone tekst in de alinea
   erboven geworden; .overmerk__regel bestaat daarom niet meer. Wat blijft is
   de lucht onder het merk. */
.overmerk { margin-bottom: 2.5rem; }

/* --- De druiven die zich verbinden ---------------------------------------- */

/* Het beeldmerk is al een tros: vijftien druiven met elf lijntjes ertussen,
   in een glas. Dat hoeft dus niet getekend te worden, alleen te ontstaan. De
   lijntjes trekken zichzelf en de druiven komen er één voor één bij.
   Het glas blijft staan; dat hoort er al te zijn als je begint te kijken.

   De klasse --speel wordt door merk-animatie.js gezet zodra het merk in beeld
   komt. Zonder javascript gebeurt er niets en staat het logo er gewoon, want
   alle regels hieronder hangen aan die klasse. En dankzij "backwards" is de
   begintoestand pas van kracht zodra de animatie bestaat: zo flikkert er niets
   tussen het laden en het starten. */

.merk-animatie--speel circle,
.merk-animatie--speel line {
  /* Nodig om een svg-vorm om zijn eigen midden te schalen in plaats van om de
     linkerbovenhoek van de hele tekening. */
  transform-box: fill-box;
  transform-origin: center;
}

.merk-animatie--speel circle {
  animation: druifErbij 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
}
.merk-animatie--speel line {
  stroke-dasharray: 1;
  animation: rankTrekt 0.4s ease-out backwards;
}

@keyframes druifErbij {
  from { opacity: 0; transform: scale(0.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rankTrekt {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* De volgorde. De druiven staan in de tekening van boven naar beneden en van
   links naar rechts, dus nth-of-type volgt vanzelf de vorm van de tros. De
   lijntjes lopen een halve tel achter: eerst twee druiven, dan het streepje
   ertussen. */
.merk-animatie--speel circle:nth-of-type(1) { animation-delay: 0s; }
.merk-animatie--speel circle:nth-of-type(2) { animation-delay: 0.07s; }
.merk-animatie--speel circle:nth-of-type(3) { animation-delay: 0.14s; }
.merk-animatie--speel circle:nth-of-type(4) { animation-delay: 0.21s; }
.merk-animatie--speel circle:nth-of-type(5) { animation-delay: 0.28s; }
.merk-animatie--speel circle:nth-of-type(6) { animation-delay: 0.35s; }
.merk-animatie--speel circle:nth-of-type(7) { animation-delay: 0.42s; }
.merk-animatie--speel circle:nth-of-type(8) { animation-delay: 0.49s; }
.merk-animatie--speel circle:nth-of-type(9) { animation-delay: 0.56s; }
.merk-animatie--speel circle:nth-of-type(10) { animation-delay: 0.63s; }
.merk-animatie--speel circle:nth-of-type(11) { animation-delay: 0.70s; }
.merk-animatie--speel circle:nth-of-type(12) { animation-delay: 0.77s; }
.merk-animatie--speel circle:nth-of-type(13) { animation-delay: 0.84s; }
.merk-animatie--speel circle:nth-of-type(14) { animation-delay: 0.91s; }
.merk-animatie--speel circle:nth-of-type(15) { animation-delay: 0.98s; }

.merk-animatie--speel line:nth-of-type(1) { animation-delay: 0.20s; }
.merk-animatie--speel line:nth-of-type(2) { animation-delay: 0.27s; }
.merk-animatie--speel line:nth-of-type(3) { animation-delay: 0.34s; }
.merk-animatie--speel line:nth-of-type(4) { animation-delay: 0.41s; }
.merk-animatie--speel line:nth-of-type(5) { animation-delay: 0.48s; }
.merk-animatie--speel line:nth-of-type(6) { animation-delay: 0.55s; }
.merk-animatie--speel line:nth-of-type(7) { animation-delay: 0.62s; }
.merk-animatie--speel line:nth-of-type(8) { animation-delay: 0.69s; }
.merk-animatie--speel line:nth-of-type(9) { animation-delay: 0.76s; }
.merk-animatie--speel line:nth-of-type(10) { animation-delay: 0.83s; }
.merk-animatie--speel line:nth-of-type(11) { animation-delay: 0.90s; }

/* Wie in zijn systeem heeft gezet dat hij geen beweging wil, krijgt die niet.
   Het merk staat er dan gewoon, en dat is precies goed: deze animatie vertelt
   niets wat er niet al staat. */
@media (prefers-reduced-motion: reduce) {
  .merk-animatie--speel circle,
  .merk-animatie--speel line {
    animation: none;
  }
}

/* --- De rondes van een eigen avond -----------------------------------------

   Twaalf keer drie velden onder elkaar, en dat wordt een lange sliert waarin
   je niet ziet waar de ene ronde ophoudt en de volgende begint. Vandaar een
   streep en een nummer per regel.

   Op een breed scherm staan "wat" en "welke soort" naast elkaar, want die zijn
   kort. De notitie krijgt de volle breedte eronder. Op een telefoon staat alles
   onder elkaar, zoals elk ander formulier op de site. */
.rondevelden {
  margin: 0;
  padding-left: 1.75rem;
}
.rondevelden__regel {
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}
.rondevelden__regel + .rondevelden__regel { margin-top: 1rem; }
.rondevelden__regel::marker { color: var(--inkt-zacht); }
.rondevelden .veld:last-child { margin-bottom: 0; }

@media (min-width: 40rem) {
  /* Het raster zit op de bak binnenin en niet op de regel zelf. Een li met
     display:grid is geen list-item meer, en dan valt zijn nummer weg zonder
     dat er verder iets misgaat. */
  .rondevelden__velden {
    display: grid;
    grid-template-columns: 1fr 10rem;
    gap: 0 1rem;
  }
  /* De notitie over beide kolommen. :last-child en niet een eigen klasse: er
     staan precies drie velden in een regel, en de derde is de notitie. */
  .rondevelden__velden .veld:last-child { grid-column: 1 / -1; }
}

/* Wat er op een eigen avond van een club geschonken wordt, op de uitnodiging.
   Het nummer van de ronde komt van de lijst zelf, want de volgorde ís het
   nummer. De pil met de wijnstijl staat achter de naam op dezelfde regel. */
.eigenrondes {
  margin: 0;
  padding-left: 1.5rem;
}
.eigenrondes li + li { margin-top: 0.9rem; }
.eigenrondes ::marker,
.eigenrondes li::marker { color: var(--inkt-zacht); }
.eigenrondes strong { margin-right: 0.4rem; }
.eigenrondes p { margin: 0.25rem 0 0; }


/* --- Een rij velden in een formulier -------------------------------------

   Dit stond op .zoekbalk, en dat is een filterbalk. Die lijnt met opzet op de
   ónderkant uit, want er staat een knop op dezelfde regel en die hoort naast
   de velden te staan en niet erboven.

   In een formulier pakt dat verkeerd uit. Een veld met een hulpregel eronder is
   hoger dan een veld zonder, en bij uitlijnen op de onderkant duwt die
   hulpregel het invoervak omhoog. Dan staat het ene vak hoger dan het andere en
   staan de labels op twee hoogtes. Op het scherm van de wijnlijst stond de rij
   wijnhuis, wijnstijl en jaargang daardoor schots en scheef.

   Hier lijnt alles op de bovenkant uit, zodat labels en vakken op één lijn
   staan en de hulpregel eronder hangt. En gelijke kolommen in plaats van een
   eerste veld dat dubbel zo breed is, want dat is iets van een zoekbalk waar
   het zoekveld een halve zin moet kunnen tonen. */
.veldrij {
  display: grid;
  gap: 0 1rem;
  align-items: start;
  margin-bottom: 0.5rem;
}
.veldrij .veld { margin-bottom: 1rem; }

/* Naast elkaar zodra er ruimte voor is, en daaronder alles op een eigen regel.
   De grens is de breedte die een formulier in een kaart toch al heeft. De 8rem
   is de smalste kolom die er nog uitziet als een veld: in zo'n formulier van
   34rem passen er drie naast elkaar, en dat is het meeste dat er in deze rijen
   staat. */
@media (min-width: 34rem) {
  .veldrij { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
}

/* De regel onder de kop van een beheerscherm liep tot 38em en de kaarten en
   tabellen eronder tot de rand van de pagina. Dan hangt die ene alinea links in
   een scherm dat verder de hele breedte gebruikt, en lijkt hij ergens tussen te
   zijn gevallen. In het beheer volgt hij dus de breedte van de rest; de
   leeswijdte blijft wat hij is op de site zelf, waar hij om echte lopende tekst
   gaat. */
.beheer-inhoud > .bak > .leeswijdte,
.beheer-inhoud > .bak > p.leeswijdte { max-width: none; }

/* Een fles uit je eigen kast afboeken na de avond: de naam links, de knop
   rechts. Op een telefoon onder elkaar, want naast elkaar wordt de naam dan
   twee letters breed. */
.afboekrij { padding-block: 0.6rem; border-top: 1px solid var(--rand); }
.afboekrij:first-child { border-top: 0; }
.afboekrij strong { display: block; }

@media (min-width: 30rem) {
  .afboekrij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* --- Knoppen op een smal scherm ------------------------------------------

   De regel die Jasper gaf: passen twee knoppen naast elkaar, dan naast
   elkaar. Passen ze niet, dan onder elkaar maar wel even breed. Ongelijke
   knoppen onder elkaar lezen als een rommeltje.

   Flexbox doet precies dat als je de knoppen laat groeien én laat omslaan.
   Passen ze samen op een regel, dan delen ze die. Past het niet, dan valt er
   een naar de volgende regel en wordt elke regel door zijn enige knop gevuld.
   Er is dus geen tweede regel nodig voor het geval "ze passen niet".

   Een knop in een eigen formulier telt mee als die knop, want een formulier is
   hier alleen de verpakking om een POST te kunnen doen. */
@media (max-width: 40rem) {
  .knoprij > .knop,
  .knoprij > .knoplink,
  .knoprij > form { flex: 1 1 auto; }
  .knoprij > form { display: flex; }
  .knoprij > form > .knop { flex: 1 1 auto; }
  /* Tekst midden in de knop, ook als hij breder wordt dan zijn label. */
  .knoprij > .knop,
  .knoprij > form > .knop { justify-content: center; text-align: center; }
}

/* --- Lijsten op een telefoon ---------------------------------------------

   Elke lijst op deze site is een tabel met een vaste minimumbreedte in een
   vakje dat zijwaarts schuift. Op een breed scherm is dat precies goed. Op een
   telefoon zie je de helft, en juist de kolom die ertoe doet valt eraf: de naam
   van de avond, de wijn, het lid. Dat schuiven ziet bijna niemand, want er
   staat geen schuifbalk in beeld en de rest van de pagina scrolt gewoon naar
   beneden.

   Hieronder wordt elke rij een blokje. De koppenrij valt weg, want die slaat
   nergens meer op, en de cellen komen onder elkaar in de volgorde waarin ze in
   de tabel staan. Het vinkje blijft links staan, want dat hoort bij de rij als
   geheel.

   `table.lijst` is één punt specifieker dan `.lijst--agenda` en die soort, dus
   de minimumbreedtes gaan hier vanzelf uit zonder !important.

   Geen labels voor de cellen. In deze lijsten zegt de inhoud het zelf: "8
   cijfers", "Ronde: Krachtig rood", "Alleen een naam". Een cel die leeg is valt
   weg in plaats van een lege regel te laten. */
@media (max-width: 40rem) {
  .tabel-omhulsel { overflow-x: visible; }

  table.lijst {
    display: block;
    min-width: 0;
    table-layout: auto;
  }
  table.lijst thead { display: none; }
  table.lijst tbody { display: block; }

  table.lijst tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.75rem;
    align-items: start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--rand);
  }
  table.lijst tbody tr:first-child { border-top: 0; }

  table.lijst tbody td {
    display: block;
    grid-column: 2;
    padding: 0;
    border: 0;
    width: auto;
  }
  /* Een lege cel is op een telefoon een lege regel. Die hoort er niet. */
  table.lijst tbody td:empty { display: none; }

  /* Het vinkje hoort bij de hele rij en staat dus links, naast de eerste
     regel ervan. */
  table.lijst tbody td.kol-vink {
    grid-column: 1;
    grid-row: 1;
    width: auto;
  }

  /* Een regel die over de hele breedte loopt, zoals "Vandaag" in de agenda of
     een lijst die leeg is. */
  table.lijst tbody td[colspan] { grid-column: 1 / -1; }

  /* De knopjes per rij onderaan, met wat lucht ertussen en de rij erboven. */
  table.lijst tbody .rijacties { margin-top: 0.5rem; }
}

/* De keuzelijst met de knop ernaast onder een lijst, voor wat je met een paar
   aangevinkte rijen tegelijk doet. De knop staat op de onderrand van de
   keuzelijst uitgelijnd, niet op die van het label erboven. Op een smal scherm
   onder elkaar, allebei over de volle breedte. */
.bulkbalk__doen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.bulkbalk__doen .veld {
  flex: 1 1 14rem;
  margin-bottom: 0;
  min-width: 0;
}
.bulkbalk__doen .knop { flex: 0 0 auto; }

@media (max-width: 30rem) {
  .bulkbalk__doen .veld,
  .bulkbalk__doen .knop { flex: 1 1 100%; }
  .bulkbalk__doen .knop { justify-content: center; }
}

/* Wat een club tot nu toe het hoogst waardeerde, naast de avond die ze aan het
   samenstellen zijn. Een rij regels met de wijnstijl, het cijfer en of hij er
   in zit, met een streep erboven zodat hij losstaat van de rondes erboven. */
.smaaknaast {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}
.smaaknaast__rij {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
}
.smaaknaast__rij li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.35rem;
}
.smaaknaast__rij strong { font-variant-numeric: tabular-nums; }
.smaaknaast p:last-child { margin-top: 0.75rem; }

/* De voorpagina op een telefoon.

   In de hero stond het staande merk voluit: beeldmerk, woordmerk, rank en
   tagline, samen 289 van de 844 pixels die een telefoon hoog is. Daar vlak
   boven staat de kop van de site met precies datzelfde beeldmerk en datzelfde
   woordmerk. Wie de pagina opende zag het merk dus twee keer voordat hij las
   welke avond er klaarstaat.

   Wat blijft staan is de tagline, want die staat op een telefoon nergens
   anders. De rank gaat ook weg: die staat als scheiding tussen de hero en "Zo
   werkt het" nog een keer, en met een korte hero zie je die twee nu tegelijk.
   Op een breed scherm verandert er niets, want daar is de ruimte er wel en
   opent de pagina zoals hij bedoeld is. */
@media (max-width: 40rem) {
  .hero .merk-staand__beeld,
  .hero .merk-staand__rank,
  .hero .merk-staand .woordmerk { display: none; }
  /* Die ruimte hoorde bij een merk van 289 pixels. */
  .hero .hero__moment { margin-top: 1.75rem; }
}

/* Een formulierveld dat alleen voor een schermlezer bestaat.

   .verborgen-behalve-voorlezer zet width op 1px, maar verderop staat
   input[type='file'] met width 100%. Die twee wegen even zwaar, een element
   plus een attribuut tegen een element plus een klasse, en dan wint de laatste
   in het bestand. Het verborgen bestandsveld voor je foto werd daardoor 390
   pixels breed, absoluut geplaatst naast de pagina, en elke clubpagina schoof
   op een telefoon zijwaarts mee.

   Daarom staat dit hier onderaan en niet bij de klasse zelf: zo wint hij op
   volgorde én op gewicht, ook van een veldregel die er later bij komt. */
input.verborgen-behalve-voorlezer,
select.verborgen-behalve-voorlezer,
textarea.verborgen-behalve-voorlezer {
  width: 1px;
  min-width: 0;
  max-width: 1px;
  height: 1px;
}

/* Een tabelrij op een telefoon.

   Een tabel stapelt daar tot losse regels onder elkaar, want de kop verdwijnt.
   Bij je eigen wijnen las dat als "4", "Thuis", "Feestdagen" en "10 okt" onder
   elkaar, zonder dat erbij stond wat het was, en één wijn kostte 262 pixels.

   Een cel met data-kop krijgt die naam ervoor en de cellen gaan twee naast
   elkaar. Dat scheelt de helft van de regels en leest beter, want elke waarde
   draagt nu zijn eigen kopje. De naam van de regel en de knoppenrij houden de
   hele breedte. Een lege cel blijft weg, want een kopje boven niets is erger
   dan geen kopje. */
@media (max-width: 40rem) {
  table.lijst tbody tr:has(td[data-kop]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1rem;
    padding: 0.8rem 0;
  }
  table.lijst tbody tr:has(td[data-kop]) > td { grid-column: auto; }

  /* Een status mag hier afbreken. Op een brede tabel staat "4 nog te doen" op
     één regel, want anders komt de stip los van zijn tekst te staan, en daar
     staat white-space: nowrap voor. In een cel van een halve rij past dat niet.
     Nagemeten op 22-10-2026: op 320 pixels duwde dat de lijst met avonden naar
     352 pixels, en dan schuift het hele scherm zijwaarts.

     De stip blijft wel bij de tekst staan, want die is een eigen flex-item en
     het blok eromheen breekt niet. Alleen de woorden erbinnen breken. */
  table.lijst tbody tr:has(td[data-kop]) .status { white-space: normal; }
  table.lijst tbody tr:has(td[data-kop]) > td:not([data-kop]) { grid-column: 1 / -1; }
  /* Behalve het vinkje. Dat hangt links naast de rij, zie hieronder. */
  table.lijst tbody tr:has(td[data-kop]) > td.kol-vink,
  table.lijst tbody tr:has(td[data-kop]) > td.lijst__vink { grid-column: auto; }

  /* Twee naast elkaar werkt alleen bij korte waarden. In de lijst met verhalen
     staan er zinnen in de cellen, en dan kost een halve kolom meer regels dan
     hij bespaart: "Feestdagen aan tafel, ronde 4" werd daar drie regels. Een
     tabel met zulke cellen krijgt deze klasse en houdt de hele breedte, met
     het kopje ervoor op dezelfde regel. */
  table.lijst--breed tbody tr:has(td[data-kop]) > td[data-kop] { grid-column: 1 / -1; }

  /* Staat er een vinkje voor de rij, dan hangt dat links naast de rij en doet
     het niet mee in het raster. In een eigen kolom zou het de halve breedte
     opeisen, en een kolom die de hele rij hoog is maakt er twintig lege
     regels onder. Links ernaast, en de rij schuift op. */
  table.lijst tbody tr:has(td[data-kop]):has(td.kol-vink),
  table.lijst tbody tr:has(td[data-kop]):has(td.lijst__vink) {
    position: relative;
    padding-left: 2.1rem;
  }
  table.lijst tbody tr:has(td[data-kop]) > td.kol-vink,
  table.lijst tbody tr:has(td[data-kop]) > td.lijst__vink {
    /* Eerst de plek in het raster weghalen. Een cel met een plek in het
       raster rekent left en top vanaf dat vakje, en dan staat het vinkje
       alsnog midden in de tekst. Zonder plek rekent hij vanaf de rij zelf. */
    grid-column: auto;
    grid-row: auto;
    position: absolute;
    left: 0;
    top: 0.8rem;
  }

  table.lijst tbody td[data-kop] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
  }
  table.lijst tbody td[data-kop]::before {
    content: attr(data-kop);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--inkt-zacht);
  }
  /* Staat ná de regels hierboven, anders wint display op de lege cel. */
  table.lijst tbody td[data-kop]:empty { display: none; }

  /* De regel met de naam erop houdt zijn eigen ruimte klein. Een alinea in een
     tabelcel heeft hier geen marge nodig, de rij heeft al een gat. */
  table.lijst tbody td > p { margin: 0.1rem 0 0; }

  /* De datum met de weekdag erachter op één regel. Onder elkaar is het twee
     regels voor vier tekens. */
  table.lijst tbody td.agenda__wanneer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
  }
}

/* Het kruisje in de hoek van je eigen foto.

   Dit was een link "Weghalen" naast de knop "Foto wijzigen". Twee woorden naast
   elkaar die allebei over dezelfde foto gaan lezen als één rijtje knoppen, en
   dan weet je niet meer welke bij welke hoort. In de hoek van de foto zelf is
   er geen twijfel over waar het kruisje over gaat.

   De knop zelf is 44 bij 44, want dat is wat een duim nodig heeft. Het rondje
   dat je ziet is het bolletje erbinnen, en dat is kleiner. */
.mijnkaart__rondje {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: none;
}
.fotoweg {
  position: absolute;
  top: -0.9rem;
  right: -0.9rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--inkt);
}
.fotoweg span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--pil);
  border: 1px solid var(--rand);
  background: var(--background);
  font-size: 1.05rem;
  line-height: 1;
}
.fotoweg:hover span,
.fotoweg:focus-visible span {
  border-color: var(--goud);
  color: var(--goud);
}

/* De twee stukken om te lezen op de voorpagina. Een lijstje met een titel en
   een regel eronder, zonder foto. Met foto's erbij is dit blok zwaarder dan de
   rest van de pagina bij elkaar, en het gaat hier om de kop. */
/* De wegwijzers op de voorpagina zien eruit als een leeslijst en delen daarom
   de opmaak, maar ze hebben een eigen klasse. Aan leeslijst hangt de belofte
   "hier staan de stukken om te lezen", en de smoketest kijkt daarop. */
.leeslijst,
.wegwijzers {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Alleen de regels van de lijst zelf, vandaar de >. Zonder dat kreeg ook een
   lijstje binnen een regel een streep tussen zijn items, en dan staan er twee
   soorten scheiding door elkaar en weet je niet meer waar de ene regel ophoudt.
   Dat gebeurde op /bronnen, waar de verhalen onder een bron een eigen lijstje
   zijn. */
.leeslijst > li + li,
.wegwijzers > li + li {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}
.leeslijst strong,
.wegwijzers strong {
  font-family: var(--letter-kop);
  font-size: 1.1rem;
  line-height: 1.3;
}
.leeslijst p,
.wegwijzers p { margin-top: 0.2rem; }
/* Een formulier in zo'n regel is de knop die een wijn op je verlanglijst zet.
   Hij hoort bij de wijn erboven en niet bij de wijn eronder, dus hij staat er
   dichter op dan de streep die de twee scheidt. */
.leeslijst form { margin: 0.5rem 0 0; }
/* En wat er na de lijst komt staat los van de laatste regel erin. Zonder deze
   regel plakte de zin over onze eigen lijst tegen de knop van de laatste wijn
   aan en leek hij erbij te horen. */
.leeslijst + p { margin-top: 1.25rem; }
/* De verhalen onder een bron, op /bronnen. Een lijst in een lijst, dus zonder
   bolletje en met een lijn aan de zijkant in plaats van eromheen: anders staan
   er twee soorten kaders door elkaar. */
.bronverhalen {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--rand);
}
.bronverhalen li + li { margin-top: 0.35rem; }

/* En een kop na zo'n lijst staat los van de laatste regel. Koppen hebben op
   deze site geen marge bovenaan, want ze staan bijna overal bovenin een kaart.
   Op de pagina van een wijnstijl staan drie lijsten onder elkaar met een kop
   ertussen, en daar plakte de kop tegen de laatste regel van de lijst erboven
   aan. Deze regel weegt zwaarder dan de algemene kopregel, dus hij wint ook
   als hij hogerop in dit bestand zou staan. */
.leeslijst + h2,
.wegwijzers + h2 { margin-top: 2.5rem; }
/* En een kaart erna om dezelfde reden. Op /bronnen plakte het blok over wat wij
   zelf schreven tegen de laatste bron aan en leek het erbij te horen. */
.leeslijst + .kaart,
.wegwijzers + .kaart { margin-top: 1.75rem; }

/* Je eigen wijnen als kaartjes.

   Op een telefoon stapelt een tabel tot losse regels onder elkaar, en dan zie
   je niet meer waar de ene wijn ophoudt en de volgende begint. Een lijn ertussen
   helpt maar half. Dit maakt er echte kaartjes van, met de naam en het
   stijllabel bovenaan en de eigenschappen eronder als een tabelletje, kopje
   links en waarde ernaast.

   Alleen op een telefoon. Op een breed scherm is het een tabel met een kop die
   je kunt aanklikken om te sorteren, en dat is daar beter. */
@media (max-width: 40rem) {
  /* Elke regel hieronder draagt :has(td[data-kop]) mee, net als de algemene
     stapelregels verderop. Zonder dat weegt hij lichter en zet die algemene
     regel grid-column alsnog terug op auto. Dat was precies wat er misging:
     het stijllabel kwam naast de naam terecht die de hele rij al in beslag
     nam, dus maakte het raster er een derde kolom bij en viel het kaartje in
     drie kolommen uiteen met de waarden onder hun kopjes. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0 0.75rem;
    border: 1px solid var(--rand);
    border-radius: var(--ronding);
    background: var(--vlak-diep);
    padding: 0.9rem 1rem;
    margin-top: 0.75rem;
  }
  table.lijst--kaartjes tbody tr:has(td[data-kop]):first-child {
    margin-top: 0;
    border-top: 1px solid var(--rand);
  }

  /* Alles onder elkaar over de hele breedte. Twee eigenschappen naast elkaar
     leest op een kaartje niet, want dan staat de waarde van links naast het
     kopje van rechts en lijkt het één regel. De tweede kolom is er alleen
     voor het stijllabel, hieronder. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td { grid-column: 1 / -1; }

  /* En dan de eigenschappen als een tabelletje. Het kopje staat links in een
     kolom van vaste breedte, de waarde ernaast, zodat de waarden van alle
     regels onder elkaar uitlijnen in plaats van ieder achter hun eigen kopje
     aan te schuiven.

     De kolom is zo breed als het kopje dat erin staat, met 4rem als bodem.
     Alle korte kopjes komen daarmee op diezelfde 4rem uit en lijnen dus uit,
     en een lang kopje als "Waar gezien" op de verlanglijst krijgt wat het
     nodig heeft in plaats van over zijn eigen waarde heen te lopen. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td[data-kop] {
    display: grid;
    grid-template-columns: minmax(4rem, max-content) minmax(0, 1fr);
    gap: 0 0.75rem;
    align-items: baseline;
    padding: 0.15rem 0;
  }
  /* Staat ná de regel hierboven, anders wint display op de lege cel. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td[data-kop]:empty { display: none; }

  /* De naam bovenaan links. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td:first-child {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 0.45rem;
  }

  /* Het stijllabel ernaast, rechtsboven op de hoogte van de naam. Het krijgt
     een eigen kolom ter breedte van de pil zelf, want een afgemeten stuk
     padding naast de naam is of te krap voor "Bubbels" of te ruim voor "Wit".
     Het kopje "stijl" hoeft er niet bij, de pil zegt het zelf. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td[data-kop='Stijl'] {
    display: block;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    padding: 0;
  }
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td[data-kop='Stijl']::before { content: none; }

  /* De knoppenrij onderaan het kaartje, met een streepje erboven zodat hij bij
     het kaartje hoort en niet bij de wijn eronder. */
  table.lijst--kaartjes tbody tr:has(td[data-kop]) > td:last-child {
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rand);
  }
}

/* --- Sterren -------------------------------------------------------------- */

/* Een cijfer als sterren, met halve sterren erbij.

   De halve ster is een tweede ster bovenop de eerste, afgeknipt op de helft.
   Met background-clip op de tekst zou de letter zelf de kleurovergang dragen,
   en dat valt uit elkaar zodra een lettertype de ster net iets anders tekent. */
.sterren {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  white-space: nowrap;
}
.ster {
  font-size: 1.05em;
  line-height: 1;
  color: var(--rand);
}
.ster--vol { color: var(--goud); }
.ster--half {
  position: relative;
  color: var(--rand);
}
.ster--half::before {
  content: '\2605';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--goud);
}
.sterren__getal {
  margin-left: 0.4em;
  font-variant-numeric: tabular-nums;
  color: var(--inkt);
}

/* En een cijfer geven. Tien halve sterren als keuzerondjes, zonder javascript.

   De rij staat omgekeerd in de html, hoogste eerst, en wordt met row-reverse
   weer goed getekend. Daardoor staan alle lagere halven ná de aangevinkte in
   de html, en kleurt "input:checked ~ label" precies die mee. Zet je ze in de
   gewone volgorde, dan heb je javascript nodig of een selector die niet
   bestaat. */
.sterrenkies {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}
.sterrenkies input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sterrenkies label {
  position: relative;
  width: 0.62em;
  height: 1.4em;
  overflow: hidden;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1.4em;
}
.sterrenkies label::before {
  content: '\2605';
  position: absolute;
  top: 0;
  width: 1.24em;
  text-align: center;
  color: var(--rand);
}
.sterrenkies label.half::before { left: 0; }
.sterrenkies label.heel::before { right: 0; }

/* De aangevinkte en alles links ervan. Plus hetzelfde bij aanwijzen, zodat je
   ziet wat je gaat kiezen voordat je klikt. */
.sterrenkies input:checked ~ label::before,
.sterrenkies label:hover::before,
.sterrenkies label:hover ~ label::before { color: var(--goud); }
.sterrenkies input:focus-visible + label::before { outline: 2px solid var(--goud); }

/* Een veld dat een fieldset is, zoals de sterrenrij. Een browser tekent daar
   standaard een rand omheen met een inkeping voor de legend, en dat past bij
   geen enkel ander veld op deze site. De legend krijgt dezelfde opmaak als een
   gewoon label. */
fieldset.veld {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-inline-size: 0;
}
fieldset.veld > legend {
  padding: 0;
  margin-bottom: 0.35rem;
}

.sterrenrij {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.sterrenrij .veld__hulp { margin: 0; }

/* De herkomst onder de naam van een wijn, met het vlaggetje ervoor. Zoals je
   het op een etiket zoekt: de druif, de streek en het land. */
.herkomst {
  margin-top: 0.15rem;
  color: var(--inkt-zacht);
}
/* Er staat een spatie achter de vlag in het sjabloon, maar die valt binnen
   het brede vakje van het emoji weg en dan leest het als een woord. */
.herkomst__vlag {
  font-size: 1.05em;
  margin-right: 0.25em;
}

/* De foto bij een wijn. Groter dan een rondje, want dit is een etiket en geen
   gezicht, en met een rechte hoek in plaats van rond. */
.wijnfoto {
  display: inline-block;
  max-width: 10rem;
}
.wijnfoto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
}

/* En het duimnagel-formaat op een kaartje in de lijst. */
.wijnduim {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  object-fit: cover;
  flex: none;
}

/* De naam met de duimnagel ernaast, als één link. */
.wijnrij {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Een scan. De foto is het hele punt, dus die staat bovenaan en groot. */
.scankaart__beeld {
  display: block;
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: var(--ronding-klein);
  border: 1px solid var(--rand);
  margin-bottom: 0.9rem;
}
/* De drie plekken waar een scan heen kan, naast elkaar. */
.scankaart__weg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
}
.scankaart__weg form { display: contents; }

/* --- Je wijnavonturen ------------------------------------------------------ */

/* Je wijnjaar als tijdlijn.

   Een lijst zegt wat je dronk, deze zegt wanneer. Daarom staat de dag links in
   een eigen kolom: dan leest de linkerrand als een kalender en hoef je de datum
   niet in elke regel terug te zoeken.

   De streep ertussen is een rand op de dagkolom en geen apart element, zodat
   hij vanzelf meegroeit met wat ernaast staat. */
.jaarkiezer {
  margin: -0.5rem 0 1.5rem;
}
.jaarkiezer .label { display: block; margin-bottom: 0.5rem; }
.jaarkiezer__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tijdlijn__maand {
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.tijdlijn__maand:first-of-type { margin-top: 1rem; }

.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tijdlijn__punt {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 0.9rem;
}
.tijdlijn__dag { padding-bottom: 1.25rem; }
.tijdlijn__wat { padding-bottom: 1.25rem; }
.tijdlijn__wat > p { margin: 0.2rem 0 0; }
.tijdlijn__wat > p:first-child { margin-top: 0; }

.tijdlijn__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}
.tijdlijn__soort { margin-top: 0.1rem; }

/* Een fles die je in huis haalde is er een van een andere soort dan een wijn
   die je dronk. Het verschil zit in het blaadje, dat daar de gedimde kant
   gebruikt, en verder in de regel eronder die zegt wat er gebeurde. Een tweede
   merkje erbij zou elke regel twee dingen laten zeggen. */

/* De eerste keren. Dit is het enige op die pagina dat nergens anders staat, en
   het is ook het enige dat per regel verschilt, dus het mag opvallen.

   Een eigen klasse en niet .merkje: daar staat white-space: nowrap op omdat de
   tekst erin uit de template komt. Hier staat er een druivennaam in die iemand
   zelf intikte, en die moet kunnen afbreken. */
.eerstekeren {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
}
.eerstekeer {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--stijl-bubbel);
  border-radius: var(--pil);
  color: var(--stijl-bubbel);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Je jaar in het kort. Drie getallen naast elkaar, en op een telefoon onder
   elkaar zodra ze niet meer passen. */
.jaarcijfers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.jaarcijfers li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.jaarcijfers strong {
  font-size: 1.6rem;
  line-height: 1;
}

@media (max-width: 30rem) {
  .tijdlijn__punt { grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 0.7rem; }
}

/* --- Het kalenderblaadje ---------------------------------------------------- */

/* Een datum als blaadje van een scheurkalender: de dag van de week boven het
   getal, de maand eronder.

   De datum stond als "28 sep MA" op één regel, en dan is hij het eerste van
   vijf stukjes tekst op een rij. Als blok is hij het ankerpunt: je oog valt
   eerst op het getal en leest daarna pas wat er die dag was.

   Het is bewust geen plaatje van een kalenderblaadje met een omgekrulde hoek.
   Dat is een tekening van een ding, en wat je nodig hebt is de datum zelf. */
/* De breedte van een blaadje met een maand erin, op één plek. De kolom waar
   hij op een telefoon in staat gebruikt dezelfde maat, want die twee horen
   gelijk op te lopen. */
:root { --blaadje-breed: 3.9rem; }

.kalenderblad {
  display: inline-block;
  min-width: 3rem;
  padding: 0.3rem 0.4rem 0.35rem;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  background: var(--vlak-diep);
  text-align: center;
  line-height: 1.1;
}
.kalenderblad__dag,
.kalenderblad__maand {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud);
}
.kalenderblad__maand { color: var(--inkt-zacht); letter-spacing: 0.08em; }

/* Een blaadje met een maand erin krijgt een vaste breedte, zodat ze onder
   elkaar in één lijn staan. Zonder die breedte is een blaadje met "mrt 2027"
   bijna de helft breder dan een met "sep", en dan staat de hele kolom te
   schuiven van rij tot rij.

   De maat is die van het breedste dat erin past, dus een maand van drie letters
   met een jaartal erachter. Het jaar staat er kleiner in, want het hoort bij de
   maand en niet naast het getal.

   Blaadjes zonder maand, zoals in de tijdlijn bij je wijnavonturen, blijven
   smal. Daar staat de maand als kop boven de lijst. */
.kalenderblad--metmaand { width: var(--blaadje-breed); }
.kalenderblad__jaar {
  font-size: 0.82em;
  letter-spacing: 0.02em;
}
.kalenderblad__getal {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  /* Cijfers van gelijke breedte, anders staat de 11 smaller dan de 28 en
     dansen de blaadjes onder elkaar. */
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

/* Een avond die geweest is. De rij eromheen is al gedimd; het blaadje mag daar
   niet bovenuit springen met een gouden weekdag. */
.kalenderblad--geweest .kalenderblad__dag { color: var(--inkt-zacht); }

/* Op een telefoon stapelt de agenda tot een kaartje, en dan hoort het blaadje
   links te staan met alles ernaast. Dat is dezelfde vorm als de tijdlijn bij
   je wijnavonturen, en dat is met opzet: het is dezelfde vraag, namelijk wat er
   wanneer was.

   De regels dragen :has(td[data-kop]) mee omdat de algemene stapelregels dat
   ook doen. Zonder dat wegen ze lichter en zet die regel grid-column weer op
   auto, waarna de cellen naast elkaar in het raster vallen. */
@media (max-width: 40rem) {
  table.lijst.lijst--agenda tbody tr:has(td[data-kop]) {
    grid-template-columns: var(--blaadje-breed) minmax(0, 1fr);
    gap: 0.35rem 0.9rem;
  }
  /* Het vinkje blijft erbuiten. Dat hangt absoluut links naast de rij, en een
     cel met een plek in het raster rekent zijn left en top vanaf dat vakje: hij
     sprong daardoor bovenop de titel. */
  table.lijst.lijst--agenda tbody tr:has(td[data-kop])
      > td:not(.agenda__wanneer):not(.kol-vink):not(.lijst__vink) {
    grid-column: 2;
  }
  table.lijst.lijst--agenda tbody tr:has(td[data-kop]) > td.agenda__wanneer {
    /* Alleen in de eerste rij. Een cel die alle rijen hoog is zou het blaadje
       midden naast de tekst zetten, en met span over een vast aantal rijen
       gok je hoeveel kolommen er aan staan. */
    grid-column: 1;
    grid-row: 1;
    display: block;
    align-self: start;
  }
  /* De rij met "Vandaag" loopt over de hele breedte en kent geen kopjes, dus
     die valt buiten de regels hierboven. */
  table.lijst.lijst--agenda tbody tr.lijst__vandaag > td { grid-column: 1 / -1; }

  /* Het vinkje bóven het blaadje in plaats van ernaast.

     Algemeen hangt een vinkje links naast de rij, in een eigen rand van
     2,1rem. Dat werkt in een lijst waar de rij uit regels tekst bestaat. In de
     agenda staat er al een kolom links, het kalenderblaadje, en dan kost dat
     vinkje een tweede kolom voor één teken breed. Op een telefoon van 390
     pixels is dat ruim vijf procent van de breedte, en die gaat af van de kant
     waar de titel en de notitie staan.

     Dus terug die rand, het vinkje linksboven in de rij, en het blaadje
     eronder. Ze delen daarmee dezelfde kolom. Het vinkje blijft absoluut
     staan: in het raster zou het een eigen rij opeisen, en dan zakt het
     blaadje weg tot naast de tweede cel in plaats van naast de titel.

     De ruimte eronder komt van padding op het blaadje en niet van top op het
     vinkje, want dan weet de rij hoe hoog hij moet zijn. */
  table.lijst.lijst--agenda tbody tr:has(td[data-kop]):has(td.kol-vink) {
    padding-left: 0;
  }
  table.lijst.lijst--agenda tbody tr:has(td[data-kop]) > td.kol-vink {
    top: 0;
  }
  table.lijst.lijst--agenda tbody tr:has(td[data-kop]):has(td.kol-vink)
      > td.agenda__wanneer {
    padding-top: 1.7rem;
  }
}

/* De flessen onder een wijnstijl, elk met een knop om hem op je verlanglijst
   te zetten. Ze stonden achter elkaar met een komma ertussen; met een knop
   erbij is dat geen rij woorden meer maar een lijst met regels. */
.suggestie__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
}
.suggestie__lijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  margin-top: 0.3rem;
}
.suggestie__lijst li:first-child { margin-top: 0; }
.suggestie__lijst form { margin: 0; }

/* De winkel naast een fles, en de melding eronder.

   De link krijgt geen knopvorm. Naast hem staat al een echte knop om de fles
   op je verlanglijst te zetten, en twee knoppen naast elkaar waarvan er een
   de site uit stuurt leest als een keuze tussen gelijke dingen. Dat is het
   niet: de stijl is wat telt en de fles is een houvast.

   De melding staat eronder en niet achter elke link. Eén keer per blok is
   genoeg om te weten waar je aan toe bent, en bij elke regel is het ruis. */
.suggestie__winkel {
  font-size: 0.86rem;
  white-space: nowrap;
}
/* De melding staat niet kleiner dan de rest van dit blok. Hij begon op
   0.78rem en dat is 12,5 pixels, de kleinste tekst van de pagina. Een melding
   die er moet staan hoort niet het fijnste drukwerk te zijn, want dan is hij
   formeel aanwezig en praktisch weg. Gedempt van kleur mag wel, want het is
   een bijzin en geen kop. */
.suggestie__melding {
  margin: 0.5rem 0 0;
  color: var(--inkt-zacht);
}

/* Dezelfde twee op een wijnpagina. Daar staat de link onder de prijs en is het
   een knop, want daar is het een handeling en niet een regel in een lijstje.
   De melding eronder leest hetzelfde als bij een fles op een avond, want het
   is dezelfde zin uit Cdv\Winkel. */
/* --- Wat je nodig hebt voor een wijnavond --------------------------------- */

/* De lijst op /spullen. Een lijst en geen raster met kaarten, want kaarten met
   een knop erin lezen als een winkel en deze pagina is dat niet. Elke regel is
   een naam, waarom je het wil, en pas daarna waar je het haalt.

   De regels staan los van elkaar met een lijn ertussen in plaats van in een
   kader. Dat leest als een opsomming die iemand heeft opgeschreven. */
.spullen {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.spul {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rand);
}
.spul:first-child {
  padding-top: 0;
  border-top: 0;
}
.spul__naam {
  margin: 0;
  font-weight: 600;
}
/* De wijnstijl als merkje achter de naam. Hij staat er alleen als er een
   gekozen is, want leeg betekent "voor elke wijn" en dat is de normale
   stand. */
.spul__stijl {
  margin-left: 0.5rem;
  font-family: var(--letter-tekst);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goud);
  white-space: nowrap;
}
.spul__waarom {
  margin: 0.25rem 0 0;
  color: var(--inkt-zacht);
}
.spul__winkel {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}

/* De verwijzing onder het praktisch-blok op een avond. Los van de feitenlijst
   eronder, want het is geen feit over deze ronde maar een pad naar iets
   anders. */
.feitenlijst__voet {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
}

.winkellink { margin: 0.6rem 0 0; }
.winkellink__melding {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

/* --- Zoeken over je vier lijsten -------------------------------------------- */

/* Een regel in de zoekuitslag. Het duimpje links, de rest ernaast, zoals in de
   tijdlijn en in de agenda. Staat er geen foto, dan schuift de tekst gewoon op
   en blijft er geen lege kolom staan. */
.vondsten {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.vondst {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--rand);
}
.vondst:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vondst__wat { min-width: 0; flex: 1; }
.vondst__wat > p { margin: 0.15rem 0 0; }
.vondst__wat > p:first-child { margin-top: 0; }
.vondst__wat > p:empty { display: none; }
.vondst__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}
.vondst .wijnduim { flex: none; }

/* De kop van een lijst in de uitslag, met het aantal erachter. Dezelfde rij als
   elders, maar hier mag de kop niet de hele breedte opeisen. */
.kaart > .lijstkop { margin-bottom: 0; }

/* --- Het vel voor in de winkel --------------------------------------------- */

/* In een winkel heb je één hand vrij en kijk je van een halve meter. Dus de
   naam groot, één knop per regel, en genoeg ruimte ertussen om er met een duim
   langs te gaan zonder de verkeerde te raken.

   Geen tabel en geen kaartjes. Dit is geen lijst die je doorzoekt maar een lijst
   die je afloopt, en dan is een streep tussen de regels genoeg. */
.winkel__kop {
  margin: 1.75rem 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
}
.winkel {
  list-style: none;
  margin: 0;
  padding: 0;
}
.winkel__regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rand);
}
.winkel__wat {
  min-width: 0;
  /* Hij mag krimpen tot waar de knop ernaast past, en daarna breken de regels
     eronder in plaats van dat de knop van het scherm af schuift. */
  flex: 1 1 11rem;
}
.winkel__wat > p { margin: 0.1rem 0 0; }
.winkel__wat > p:first-child { margin-top: 0; }
.winkel__naam {
  font-family: var(--letter-kop);
  font-size: 1.15rem;
  line-height: 1.25;
}
.winkel__regel form { margin: 0; flex: none; }
.winkel__knop { white-space: nowrap; }

/* Op een heel smal scherm gaat de knop eronder en over de volle breedte. Naast
   de naam blijft er dan zo weinig over dat elke wijn drie regels wordt, en een
   knop die je met een duim moet raken terwijl je een mandje vasthoudt mag best
   groot zijn. */
@media (max-width: 24rem) {
  .winkel__regel form { flex: 1 1 100%; }
  .winkel__knop { width: 100%; }
}

/* --- De wijnlijst ----------------------------------------------------------- */

/* Een rooster van kaartjes. Een tabel zou hier niet werken: een wijn heeft een
   naam van soms tachtig tekens en een smaakregel eronder, en dat past niet in
   een kolom. Naast elkaar leest het als een schap.

   De kaartjes schalen mee met auto-fill, dus op een telefoon is het er één en
   op een breed scherm drie of vier, zonder dat er een breedte in het sjabloon
   staat die je bij elke wijziging moet bijstellen. */
.wijnrooster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
}
/* Een kaartje dat opvalt in plaats van wegzakt.

   Dit stond op `--vlak-diep`, en dat is #110e0a terwijl de pagina #17140f is.
   De kaartjes waren dus donkerder dan de achtergrond en zakten weg: je zag
   vijftien blokjes tekst en geen vijftien kaarten. `--vlak-kaart` is #221e17
   en ligt een stap boven de pagina, en dat is precies waar die kleur voor in
   het palet staat.

   De schaduw doet het werk dat een rand niet kan. Een rand tekent een lijn om
   iets heen, een schaduw tilt het op, en dat tweede is wat een lijst met
   kaarten nodig heeft om als kaarten te lezen. */
.wijnkaart {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  background: var(--vlak-kaart);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Een kleur per wijnstijl op de kaart.

   De vijf stijlkleuren staan al in het palet en worden gebruikt in de pil, in
   het flesicoontje en in de smaakmeter. Op de kaart zelf stonden ze nog niet,
   en dan is een lijst met wijnen vijftien keer hetzelfde bruine blokje.

   Heel licht, zeven procent over de kaartkleur. Dat is genoeg om een rij
   kaarten uit elkaar te houden en te weinig om als vlak te gaan opvallen. De
   rand mag sterker, want die is dun en doet het meeste werk.

   Ze zeggen ook iets. Wie op deze lijst zoekt, zoekt meestal op stijl, en dan
   is kleur sneller dan lezen. */
.wijnkaart[data-stijl='bubbel'] { --kaartkleur: var(--stijl-bubbel); }
.wijnkaart[data-stijl='wit']    { --kaartkleur: var(--stijl-wit); }
.wijnkaart[data-stijl='rose']   { --kaartkleur: var(--stijl-rose); }
.wijnkaart[data-stijl='rood']   { --kaartkleur: var(--stijl-rood); }
.wijnkaart[data-stijl='zoet']   { --kaartkleur: var(--stijl-zoet); }

/* De kleur zit in de rand en niet in het vlak, en dat is nagemeten.

   Een tint over de achtergrond leek het mooist, maar de gedempte tekst op een
   kaart staat op 5,18 tegen 1 en heeft dus weinig lucht. Gemeten op
   25-10-2026 met zeven procent kleur erover:

     rood   4,77   haalt het nog
     wit    4,39   te laag, de eis is 4,5

   Wit is de lichtste van de vijf stijlkleuren en tilt de achtergrond dus het
   meest op. Minder kleur maakt het verschil onzichtbaar en de tekst lichter
   maken zou de hele lijst oplichten voor een randje kleur. Dus zit de kleur in
   de rand, waar hij niets achter tekst legt.

   De bovenrand is dikker. Een lijn van één pixel in een gedempte kleur zie je
   niet van een meter afstand, drie pixels bovenlangs wel, en dat is waar je
   oog een rij kaarten afgaat.

   Alleen een kaart die een stijl heeft. Een wijn zonder stijl houdt de gewone
   rand, want een var() zonder waarde laat de hele regel wegvallen. */
.wijnkaart[data-stijl]:not([data-stijl='']) {
  border-color: color-mix(in srgb, var(--kaartkleur) 45%, var(--rand));
  border-top-width: 3px;
  border-top-color: var(--kaartkleur);
}

/* Alleen bij een muis. Op een telefoon blijft een hover-stand hangen nadat je
   getikt hebt, en dan staat er één kaartje opgetild tussen de rest. */
@media (hover: hover) {
  .wijnkaart:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.26);
  }
}

/* Wie liever geen beweging ziet, krijgt alleen de rand. */
@media (prefers-reduced-motion: reduce) {
  .wijnkaart { transition: none; }
  .wijnkaart:hover { transform: none; }
}
.wijnkaart > p { margin: 0; }

/* Waar wij hem schonken hangt onderaan de kaart. De kaartjes in een rij zijn
   even hoog, en een wijn waar we weinig van weten vulde dat niet. Dan stond die
   regel halverwege te zweven met daaronder niets. Nu staan de voeten van een
   rij op dezelfde hoogte en leest de leegte als ruimte. */
.wijnkaart__voet { margin-top: auto; padding-top: 0.6rem; }

/* De foto van een fles. Een fles is staand, dus de brede uitsnede van
   foto--inkaart past er niet bij: daar wordt een fles een strook etiket. Vier
   op drie laat de fles heel en houdt de kaartjes even hoog. */
.wijnkaart__foto { margin-bottom: 0.7rem; }
.wijnkaart__foto img { aspect-ratio: 4 / 3; }

/* De blokken op een wijnpagina, twee kolommen op een breed scherm.

   Links de fles (hoe hij smaakt, over deze fles), rechts de mensen (wat leden
   proefden, wat jij erover schreef). Die twee zijn allebei vier balkjes met
   dezelfde namen en een rij proefwoorden; onder elkaar lijken ze twee keer
   hetzelfde, naast elkaar is het verschil juist het punt.

   De knik ligt op 60em en niet lager. Daaronder wordt een kolom smaller dan
   dertig rem en breken de namen van de assen over twee regels. */
.wijnblokken {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 60em) {
  .wijnblokken {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
  /* Eén kolom als er rechts niets te laten valt. Bij een wijn waar nog niemand
     iets over schreef, bekeken door iemand die niet is ingelogd, zou de
     linkerkant anders halveren met een leeg vlak ernaast. */
  .wijnblokken--een { grid-template-columns: minmax(0, 1fr); }
}
/* De kaarten binnen een kolom houden onderling dezelfde afstand als de
   kolommen. De algemene regel hiervoor kijkt naar .bak als ouder en die staat
   hier een niveau hoger. */
.wijnblokken__kolom > .kaart + .kaart { margin-top: 1.25rem; }

/* De beschrijving van een wijn met de fles ernaast.

   De foto stond onder de tekst, 22rem breed in een kolom van 46rem. Dan staat
   er een halve kolom niets naast en moet je langs de fles scrollen voordat het
   verhaal begint. Jasper vroeg hierom op 27-10-2026, en daarna of de fles naast
   de eerste alinea kon in plaats van naast de naam. De naam loopt daarom over
   de volle breedte door en dit rooster begint pas bij de beschrijving.

   De knik ligt op 46em en niet hoger. Daaronder is de kolom smaller dan de bak
   zelf en zou de fles een strookje van zeven rem worden. */
.wijnhero {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 46em) {
  .wijnhero {
    /* De tekstkolom op de leesbreedte en niet op 1fr. Met 1fr rekt die kolom
       tot aan de rand van de bak terwijl de alinea zelf op 34em blijft staan,
       en dan zweeft de fles tweehonderd pixels verderop in zijn eentje rechts.
       Jasper wilde hem naast de alinea. justify-content houdt het paar links,
       bij de titel erboven. */
    /* fit-content en niet minmax(0, 36em). Een rooster blaast een kolom met
       een groeigrens op tot die grens zodra er ruimte over is, dus bij een wijn
       zonder beschrijving bleef er een lege kolom van 36em staan en zweefde de
       fles alsnog in zijn eentje rechts. fit-content stopt bij wat erin staat. */
    grid-template-columns: fit-content(36em) 18rem;
    justify-content: start;
    gap: 2.5rem;
    align-items: start;
  }
}
/* De figure van partials/foto heeft zijn eigen marge. In een rooster komt die
   bovenop de gap en staat de fles lager dan de naam ernaast. */
.wijnhero__beeld {
  margin: 0;
}

/* --- Wat wij bij een wijn aten ------------------------------------------- */

/* Een rij hapjes onder elkaar in een rooster, met een ronde foto erboven. Rond
   omdat een gerecht op een bord staat, en omdat het verschil maakt met de
   rechthoekige foto's die de rest van de site heeft. Zo zie je in één oogopslag
   dat dit een ander soort blok is.

   auto-fill en niet auto-fit. Met auto-fit rekken drie hapjes zich uit over de
   hele breedte en worden de foto's zo groot als het blok, en dan is een hapje
   opeens belangrijker dan de fles waar de pagina over gaat. */
.hapjesrij {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
}
.hapjesrij > li + li {
  margin-top: 0.9rem;
}
/* Met foto's naast elkaar in een rooster, zonder foto's onder elkaar. Zie het
   sjabloon: een rij lege rondjes is geen opmaak maar een rij gaten. */
.hapjesrij--rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.5rem 1.1rem;
}
.hapjesrij--rooster > li {
  text-align: center;
}
.hapjesrij--rooster > li + li {
  margin-top: 0;
}
.hapje {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hapje:hover .hapje__naam,
.hapje:focus-visible .hapje__naam {
  text-decoration: underline;
}
.hapje .foto,
.hapje__leeg {
  display: block;
  width: 100%;
  max-width: 8rem;
  margin: 0 auto 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.hapje .foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Een hapje zonder foto in een rooster waar er wel zijn. De kleur van de
   wijnstijl, zacht, zodat de rij zijn lijn houdt zonder te doen alsof er een
   plaatje is. color-mix en niet een vaste kleur, want dan staat elke stijl er
   met zijn eigen kleur. */
.hapje__leeg {
  border: 1px solid var(--rand);
  background: var(--vlak-kaart);
}
.hapje__leeg[data-stijl='bubbel'] { background: color-mix(in srgb, var(--stijl-bubbel) 16%, var(--vlak-kaart)); }
.hapje__leeg[data-stijl='wit']    { background: color-mix(in srgb, var(--stijl-wit) 16%, var(--vlak-kaart)); }
.hapje__leeg[data-stijl='rose']   { background: color-mix(in srgb, var(--stijl-rose) 16%, var(--vlak-kaart)); }
.hapje__leeg[data-stijl='rood']   { background: color-mix(in srgb, var(--stijl-rood) 16%, var(--vlak-kaart)); }
.hapje__leeg[data-stijl='zoet']   { background: color-mix(in srgb, var(--stijl-zoet) 16%, var(--vlak-kaart)); }
.hapje__naam {
  font-family: var(--letter-kop);
  font-size: 0.98rem;
  line-height: 1.3;
  /* Een hapjesnaam is een halve zin. In een smalle kolom breekt die anders op
     een rare plek, en met balance verdeelt de browser de regels zelf. */
  text-wrap: balance;
}
.hapjesrij p {
  margin-top: 0.2rem;
}
/* De link naar de volle lijst eronder. Zonder deze regel plakt hij aan de
   laatste regel van het laatste hapje vast, en dan leest hij als een zin die
   bij dat ene hapje hoort. */
.hapjesrij + p {
  margin-top: 1.2rem;
}
.wijnkaart__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}
.wijnkaart__kop strong {
  font-family: var(--letter-kop);
  font-size: 1.05rem;
  line-height: 1.3;
}
/* De knop onderaan, los van de tekst erboven. margin-top: auto duwt hem naar
   de onderkant, zodat hij in elk kaartje op dezelfde hoogte staat ook als de
   ene wijn een smaakregel heeft en de andere niet. */
.wijnkaart form { margin: 0.6rem 0 0; }
.wijnkaart form:last-child { margin-top: auto; padding-top: 0.6rem; }

/* De kop van de pagina van één wijn. De pil en de herkomst naast elkaar, want
   samen zeggen ze wat voor wijn het is. Breekt het af, dan gaat de herkomst
   onder de pil en niet andersom. */
.wijnkop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  /* Ook ruimte eronder. Stond er niet, en bij een wijn zonder prijs plakte de
     beschrijving dan tegen de druiven aan: de prijsregel bracht die ruimte mee
     en bij een lege prijs viel die weg. In de smalle kolom van de nieuwe kop
     breken de pil en de herkomst bovendien over twee regels, en dan valt het
     helemaal op. */
  margin: 0.6rem 0 0.9rem;
}

/* --- Een pagina uit blokken ---------------------------------------------- */

/* Wat hier staat is de hele opmaak die een blok kan krijgen. De beheerder
   kiest wát er staat en in welke volgorde, en dit bepaalt hoe het eruitziet.
   Dat is de afspraak waar het blokkensysteem op rust: geen vrije html in de
   database, dus ook geen pagina die over twee jaar scheef staat omdat er ooit
   opmaak uit Word in geplakt is. */

/* Een kop binnen een verhaal, dus kleiner dan de h2 van een hele sectie. */
.blok__kop {
  margin-top: 2.4rem;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}
* + .blok__kop { margin-top: 2.4rem; }

:root {
  /* Hoeveel een brede foto aan weerszijden buiten de leeskolom steekt. */
  --breed-uit: 3.5rem;
}

.blok__beeld {
  margin: 1.8rem 0;
}
/* Een brede foto loopt buiten de leeskolom door. Dat is het enige stukje
   opmaak dat de beheerder zelf in de hand heeft, en het is genoeg: breed leest
   als een nieuw hoofdstuk, smal hoort bij de tekst eromheen.

   calc met een negatieve marge en niet 100vw, want 100vw telt de schuifbalk
   mee en dan schuift de hele pagina zijwaarts. Binnen de bak blijven is hier
   genoeg: die is al smaller dan het scherm. */
@media (min-width: 52em) {
  .blok__beeld--breed {
    margin-left: calc(var(--breed-uit) * -1);
    margin-right: calc(var(--breed-uit) * -1);
    max-width: none;
    width: auto;
  }
}

.foto figcaption {
  margin-top: 0.5rem;
  color: var(--inkt-zacht);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Een citaat. Een streep aan de zijkant en niet een kader, want dit staat
   middenin een verhaal en een kader knipt dat verhaal in tweeën. */
.citaat {
  margin: 2rem 0;
  padding-left: clamp(1rem, 3vw, 1.6rem);
  border-left: 3px solid var(--goud);
}
.citaat blockquote {
  margin: 0;
  font-family: var(--letter-kop);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.5;
}
.citaat blockquote p { margin: 0; }
.citaat blockquote p + p { margin-top: 0.6rem; }
.citaat figcaption {
  margin-top: 0.7rem;
  color: var(--inkt-zacht);
  font-size: 0.9rem;
}

/* De weetjes. Een dl en geen tabel, want het zijn geen rijen en kolommen maar
   woorden met een feit erachter. Op een smal scherm onder elkaar, want twee
   kolommen van elk acht tekens leest niemand. */
.weetjes {
  margin: 1.8rem 0 0;
  padding: 0;
}
.weetjes__regel {
  padding: 0.7rem 0;
  border-top: 1px solid var(--rand);
}
.weetjes__regel:last-child { border-bottom: 1px solid var(--rand); }
.weetjes dt {
  color: var(--inkt-zacht);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.weetjes dd {
  margin: 0.15rem 0 0;
}
@media (min-width: 40em) {
  .weetjes__regel {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.4rem 1.2rem;
    align-items: baseline;
  }
  .weetjes dd { margin-top: 0; }
}

.blok__knop {
  margin-top: 1.8rem;
}

/* Het kaartje naar een video die ergens anders staat. Hij speelt hier niet,
   zie partials/blokken.php: een ingesloten speler haalt een stuk van een ander
   bedrijf de pagina in, en dat staat de Content-Security-Policy niet toe. */
.videokaart {
  display: block;
  margin: 1.8rem 0;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--vlak-kaart);
}
.videokaart:hover { border-color: var(--goud); }
.videokaart__beeld { margin: 0; }
.videokaart__beeld img { display: block; width: 100%; height: auto; }
.videokaart__tekst {
  display: block;
  padding: clamp(0.9rem, 2.5vw, 1.2rem);
}
.videokaart__tekst strong {
  display: block;
  font-family: var(--letter-kop);
  font-size: 1.1rem;
}
.videokaart__tekst .zacht { display: block; margin-top: 0.3rem; }

/* --- De blokken in het beheer -------------------------------------------- */

.blokje {
  margin-top: 1.4rem;
  padding: 1rem clamp(0.9rem, 2.5vw, 1.2rem) 0.4rem;
  border: 1px solid var(--rand);
  border-radius: var(--ronding);
}
.blokje__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
}
.blokje__kop .label { margin: 0; }
/* De drie knoppen staan in drie losse formulieren, want een formulier in een
   formulier bestaat niet in html. Die formulieren zijn blokelementen, dus
   zonder deze regel staan omhoog, omlaag en weg onder elkaar. */
.blokje__knoppen {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
}
.blokje__knoppen form { margin: 0; }
.blokje__voorbeeld {
  margin: 0.8rem 0 0;
}
.blokje__voorbeeld img {
  display: block;
  max-width: 14rem;
  height: auto;
  border-radius: var(--ronding-klein);
}
.blokje__erbij {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rand);
}

/* De andere jaargangen van dezelfde wijn, boven aan zijn pagina. Een regel en
   geen lijst, want het zijn jaartallen en die zijn kort. Staat er maar een,
   dan is het een los jaartal en dat leest ook goed. */
.jaargangen {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}
.jaargangen a {
  color: var(--goud);
}

/* --- Wat je proeft in een wijn ------------------------------------------- */

/* De schuifbalkjes. Geen input[type=range], met opzet. Een range geeft je een
   waarde die je nooit precies kunt raken, hij heeft altijd een stand ook als je
   er niets over wil zeggen, en zonder javascript is nergens te zien wat er
   staat. Dit zijn vijf radio's die eruitzien als een balkje met knopjes.

   Het radiobolletje zelf staat buiten beeld, net als bij de sterrenrij, en het
   label is wat je ziet en aanklikt. */
.schuif {
  border: 0;
  margin: 0 0 1.1rem;
  padding: 0;
  min-inline-size: 0;
}
.schuif__kop {
  padding: 0;
  font-size: 0.9rem;
}
.schuif__kop .zacht {
  display: block;
  font-weight: 400;
}
.schuif__rij {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.schuif__eind {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}
.schuif__punten {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
}
/* De lijn waar de knopjes op staan. Een laagje erachter, want een border op de
   rij zelf zou door de knopjes heen lopen. */
.schuif__punten::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--rand);
}
.schuif__punten input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.schuif__punten label {
  position: relative;
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  border: 2px solid var(--rand);
  border-radius: 50%;
  background: var(--vlak);
  cursor: pointer;
}
.schuif__punten label:hover { border-color: var(--goud); }
.schuif__punten input:checked + label {
  border-color: var(--goud);
  background: var(--goud);
}
.schuif__punten input:focus-visible + label { outline: 2px solid var(--goud); outline-offset: 2px; }

/* De proefwoorden om aan te vinken. Twee kolommen zodra het past, want twaalf
   hokjes onder elkaar is een lange lap. */
.proefwoorden {
  display: grid;
  gap: 0.5rem 1rem;
  margin-top: 0.6rem;
}
@media (min-width: 38em) {
  .proefwoorden { grid-template-columns: 1fr 1fr; }
}
.proefwoord {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.proefwoord strong {
  display: block;
  font-family: var(--letter-tekst);
  font-size: 0.95rem;
  font-weight: 600;
}
.proefwoord .zacht { display: block; }

/* Een keuzerondje met een regel uitleg eronder, zoals bij wie iets mag zien. */
.vink--uitleg {
  align-items: flex-start;
  margin-bottom: 0.7rem;
}
.vink--uitleg .zacht { display: block; margin-top: 0.1rem; }

/* --- Wat onze leden van een wijn vonden ---------------------------------- */

.proefcijfer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
  margin-top: 1rem;
}

/* De schuifbalkjes zoals ze op de pagina van een wijn staan. Hier kun je er
   niets aan verschuiven, het is een weergave van een gemiddelde. */
.smaakbalken {
  margin: 1.4rem 0 0;
  padding: 0;
}
.smaakbalk {
  margin-top: 0.9rem;
}
.smaakbalk dt {
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}
.smaakbalk dd {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.25rem 0 0;
}
.smaakbalk__beeld {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: 0.85rem;
  /* overflow zichtbaar, want de stip steekt aan de uiteinden buiten de
     viewBox. Zonder dit wordt de stip bij stand 1 en 5 half afgesneden. */
  overflow: visible;
}
.smaakbalk__lijn { fill: var(--rand); }
.smaakbalk__stip { fill: var(--goud); }
.smaakbalk dd .zacht { flex: 0 0 auto; }

/* De proefwoorden zoals ze onder een wijn staan, met hun teller. */
.proefwoordenrij {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.proefwoordenrij > li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rand);
}
.proefwoordenrij > li:last-child { border-bottom: 1px solid var(--rand); }
.proefwoordenrij strong {
  font-family: var(--letter-kop);
  font-size: 1.05rem;
}
.proefwoordenrij .zacht { display: block; margin-top: 0.1rem; }

/* Wat leden erbij schreven. */
.recensies {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.recensie + .recensie {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rand);
}
.recensie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 0 0 0.3rem;
}
.recensie__kop strong { font-family: var(--letter-kop); font-size: 1.05rem; }
.recensie p { margin: 0.3rem 0 0; }

/* Een kop heeft op deze site geen marge aan de bovenkant. De ruimte eronder
   komt dus van wat ervoor staat, en deze drie lijsten hadden die niet. Dan
   plakt "Wat zij schreven" aan het laatste proefwoord vast en lijkt het erbij
   te horen. */
.smaakbalken,
.proefwoordenrij,
.recensies {
  margin-bottom: 2rem;
}

/* Een pil die alleen een omstandigheid aangeeft en geen wijnstijl. Stiller dan
   de gewone, want hij staat naast een naam en moet die naam niet overstemmen. */
.pil--stil {
  padding: 0.15rem 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  border-color: var(--rand);
}

/* De balk met de melding over wat je net deed, bovenaan de pagina.

   Hij staat buiten de sectie eronder, en die sectie heeft zijn eigen ruimte
   aan de bovenkant. Twee keer ruimte achter elkaar gaf honderdzeventig pixels
   niets tussen de melding en de kop waar hij over gaat, en dan lijkt het of er
   iets ontbreekt. */
.flitsbak {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.flitsbak .bericht {
  margin-bottom: 0;
}
.flitsbak + .sectie,
.flitsbak + .sectie--krap {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
}

/* Een icoon in een knoplink. De knoplink is tekst met een streep eronder, dus
   zonder deze regel staat het icoon op de regel en loopt de streep eronderdoor.
   inline-flex zet ze naast elkaar met het icoon op de hoogte van de letters. */
.knoplink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-align: left;
}
.knoplink .beheer-icoon {
  /* De streep onder de tekst hoort niet onder het icoon door te lopen. */
  text-decoration: none;
}

/* Het cijfer van onze leden op het kaartje van een wijn. De sterren en het
   aantal leden op één regel, want twee regels voor een cijfer is te veel op een
   kaart die verder uit vier korte regels bestaat. */
.wijnkaart__cijfer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin-top: 0.5rem;
}

/* --- De iconen bij de proefwoorden --------------------------------------- */

/* Twaalf groepen onder elkaar, en je hoort in één oogopslag te zien welke
   welke is. Een vorm alleen is daar te weinig voor op die maat, dus elke groep
   heeft een eigen kleur. Ze zijn allemaal gedempt genoeg voor het donkere vlak
   en ze staan alleen in dit ene onderdeel, dus ze botsen nergens met het goud
   van de site.

   Het rondje eromheen is diezelfde kleur op zestien procent. Dat geeft de rij
   rust en het laat de lijn zelf de kleur dragen. */
.proeficoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--proef-kleur, var(--goud));
  background: color-mix(in srgb, var(--proef-kleur, var(--goud)) 16%, transparent);
}
.proeficoon svg {
  display: block;
  width: 64%;
  height: 64%;
}

.proeficoon[data-woord='boomfruit']  { --proef-kleur: #bcd18b; }
.proeficoon[data-woord='citrus']     { --proef-kleur: #e8c44c; }
.proeficoon[data-woord='tropisch']   { --proef-kleur: #e2954a; }
.proeficoon[data-woord='roodfruit']  { --proef-kleur: #d76a74; }
.proeficoon[data-woord='zwartfruit'] { --proef-kleur: #9a81cc; }
.proeficoon[data-woord='gedroogd']   { --proef-kleur: #b4826a; }
.proeficoon[data-woord='bloemig']    { --proef-kleur: #e0a2c3; }
.proeficoon[data-woord='kruidig']    { --proef-kleur: #cf8347; }
.proeficoon[data-woord='vegetaal']   { --proef-kleur: #86a86a; }
.proeficoon[data-woord='eikenhout']  { --proef-kleur: #a97a46; }
.proeficoon[data-woord='gistig']     { --proef-kleur: #d9c79c; }
.proeficoon[data-woord='aards']      { --proef-kleur: #a39a8c; }

/* De regel in de lijst onder een wijn wordt een rij met het icoon ervoor. */
.proefwoordenrij > li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* En in het formulier staat het icoon tussen het vinkje en de woorden, zodat
   je het hokje herkent voordat je de tekst leest. */
.proefwoord .proeficoon {
  width: 2rem;
  height: 2rem;
}

/* De prijs bij een wijn, als die erbij staat. Het bedrag en de dag waarop we
   hem zagen op één regel, want twee regels voor een prijs is te veel op een
   kaart die verder uit vier korte regels bestaat. */
.wijnprijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-top: 0.5rem;
}
.wijnprijs strong {
  font-family: var(--letter-tekst);
  font-size: 1.05rem;
  color: var(--inkt);
}

/* Een antwoord van de quiz in het beheer: het bolletje voor "dit is het goede"
   en het tekstveld ernaast op één regel. Dezelfde maten als .vink, want het is
   hetzelfde bolletje, maar .vink zelf is voor een label met tekst erachter en
   zet een letterdikte die je niet in een invoerveld wil. */
.quizrij {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* De antwoorden van een quizvraag op het scherm van de gastheer. Een lijst en
   geen raster, want de tekst van een antwoord mag gewoon over twee regels. */
.quizantwoorden {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
.quizantwoorden li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.3rem;
  border-top: 1px solid var(--rand);
}
.quizantwoorden li:last-child { border-bottom: 1px solid var(--rand); }
.quizantwoorden li.is-goed { background: var(--zacht-vlak, rgba(0, 0, 0, 0.04)); }
.quizantwoorden strong { font-family: var(--letter-kop); }
.quizantwoorden .zacht { grid-column: 2; }

/* De knoppen op de telefoon van een gast. Groot, want er wordt met een duim op
   getikt terwijl iemand een glas in zijn andere hand heeft. */
.quizknoppen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin: 1rem 0;
}
.quizknoppen button {
  min-height: 3.5rem;
  font-size: 1.1rem;
}
.quizknoppen button[disabled] { opacity: 0.55; }
@media (max-width: 22rem) {
  .quizknoppen { grid-template-columns: 1fr; }
}

/* --- Een inklapbaar blok in het beheer ----------------------------------- */

/* Het scherm van een thema-avond was op 27-10-2026 bijna veertienduizend
   pixels hoog, ruim vijftien schermen, met 222 invoervelden erop. Alles stond
   altijd open. Nu is elk blok een regel die je openklikt.

   Eigen klasse en niet .vouwregel. Die laatste is een rij in een lijst met een
   streep erboven; dit is een kaart met een kop erin, en die twee willen andere
   marges. */
/* Lucht boven een inklapbaar blok.
   De blokken op het scherm van een avond staan deels in een formulier en deels
   erbuiten, en de bestaande regel `form > .kaart + .kaart` dekt alleen dat
   eerste geval. Toen Rondes van een losse h2 een details werd, verloor hij ook
   de marge van `.beheer-inhoud > .bak > h2` en plakte hij tegen het draaiboek.
   De schermmeting zag dat als twee kaarten met nul pixels ertussen, op alle
   vijf de breedtes. */
.kaart.vouwblok { margin-top: 1.25rem; }

.vouwblok > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  margin: -0.2rem 0;
}
.vouwblok > summary::-webkit-details-marker { display: none; }
.vouwblok > summary::marker { content: ''; }
.vouwblok > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.42rem solid var(--primary);
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
}
.vouwblok[open] > summary::before { transform: rotate(90deg); }
.vouwblok > summary h2,
.vouwblok > summary h3 { margin: 0; }
/* Wat er in dat blok zit, als het dicht is. Een aantal of een samenvatting,
   zodat je niet hoeft te openen om te weten of er iets in staat. */
.vouwblok__telling {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.vouwblok[open] > summary { margin-bottom: 1rem; }
/* Een vraag van de quiz als regel. Dichter op elkaar dan een blok, want het
   zijn er acht onder elkaar. */
.vouwblok--regel {
  border-top: 1px solid var(--rand);
  padding: 0.3rem 0;
}
.vouwblok--regel > summary { font-size: 0.95rem; }
.vouwblok--regel:last-of-type { border-bottom: 1px solid var(--rand); }