/* Stijl van de winkel.
 *
 * SJABLOONREGEL: hier staat geen kleur of logo van één winkel. De vier huisstijlkleuren (accent,
 * tekst op de knop, merk en inkt) komen als CSS-variabelen uit de instellingen, via
 * `/assets/huisstijl.css`; alles hieronder rekent daartegen. Wat hier wel staat is de neutrale
 * grondslag: typografie, ruimte, contrast, en per stijl de vorm.
 *
 * DE STIJLEN (O5 S2, D61 b): `data-stijl` op `<html>` kiest een blok `:root[data-stijl="x"]` met
 * de VORMtokens van die stijl (letters, straal, schaduw) en de regels eronder. Zo'n blok zet NOOIT
 * een huisstijlkleur: het weegt zwaarder dan het `:root` van huisstijl.css en zou de kleur van de
 * winkelier anders overschrijven. `tools/stijlpoort.py` eist dat een stijlblok alleen tokens uit
 * het basisblok zet, en dat een letterlijke kleur daarin ook een donkere tegenhanger heeft.
 *
 * Donker en licht allebei uitgewerkt. Een bezoeker die zijn systeem op donker heeft staan krijgt
 * anders zwarte tekst op een zwarte ondergrond, en dat is geen smaakkwestie maar onleesbaar.
 */

:root {
  --grond: #ffffff;
  --grond-zacht: #f5f6f8;
  --rand: #dfe3e8;
  --tekst: #1a1d21;
  --tekst-zacht: #5b6570;
  --fout: #9b1c1c;
  --fout-grond: #fdf2f2;
  --goed: #1a6b3c;
  --goed-grond: #f1f9f4;
  --straal: 8px;
  --breedte: 62rem;
  --accent: #1f4b6e;
  --accent-tekst: #ffffff;
  /* De twee kleuren van O5 (D62 b), uit huisstijl.css; dit zijn alleen de terugvalwaarden. */
  --merk: #4a7394;
  --inkt: #1d2935;
  /* AFGELEIDE TINTEN met color-mix: ze volgen het donkere thema vanzelf, omdat --grond daar verandert. */
  --band: color-mix(in oklab, var(--merk) 9%, var(--grond));
  --accent-donker: color-mix(in oklab, var(--accent) 80%, black);
  /* De accentkleur ALS TEKST. In het lichte thema de kleur zelf (de contrastcontrole eist 4,5 : 1 tegen wit); in het
     donkere thema een lichtere tint, want één accentkleur is als tekst in donker onleesbaar (les van 30-09-2026). De
     stijlen B, C en D zetten in het lichte thema een donkerdere tint, want daar staan links ook op getinte vlakken. */
  --accent-als-tekst: var(--accent);
  --schaduw: none;
  /* De letters. In de basis de systeemletter; een stijl zet zijn eigen (zelf gehost, D63 a). */
  --letter-tekst: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --letter-kop: var(--letter-tekst);
  --letter-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gewicht-kop: 700;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --grond: #15181c;
    --grond-zacht: #1d2126;
    --rand: #333a42;
    --tekst: #e8eaed;
    --tekst-zacht: #a3adb8;
    --fout: #f08a8a;
    --fout-grond: #2a1a1a;
    --goed: #7fd3a3;
    --goed-grond: #16241c;
    --accent-als-tekst: color-mix(in oklab, var(--accent) 55%, white);
  }
}

/* ============================================================ de letters (O5 S2, D63 a)
   Zelf gehost: `font-src 'self'`, geen verzoek naar een andere host. De browser haalt alleen een
   bestand op dat een regel werkelijk gebruikt. Licentie: public/assets/fonts/LICENTIES/. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/roboto-700.woff2') format('woff2');
}
/* De koppen van stijl B (O5 S5): Jost onder de eigen naam "Kop B", een variabel lettertype met de gewichten 400 tot
   700 in één bestand. Omgezet en verkleind met tools/dev/zet_jost_om.py; licentie LICENTIES/jost-OFL.txt (SIL OFL 1.1,
   zonder Reserved Font Name). WOFF en geen WOFF2: dat vraagt brotli, en dat staat niet in het gereedschap. */
@font-face {
  font-family: "Kop B";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/jost-wght.woff') format('woff');
}
/* De vaste-breedteletter van stijl A en C (O5 S8): Roboto Mono onder de eigen naam "Mono AC", variabel van 400 tot 700.
   Omgezet met tools/dev/zet_letters_om.py; licentie LICENTIES/robotomono-OFL.txt (SIL OFL 1.1, zonder Reserved Font
   Name). Ontbreekt het bestand, dan valt de stapel door naar ui-monospace en Consolas. */
@font-face {
  font-family: "Mono AC";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/robotomono-wght.woff') format('woff');
}
/* De koppen van stijl D (O5 S8): Lora, omgezet en verkleind, en daarom onder een ANDERE naam. Lora draagt een Reserved
   Font Name; een gewijzigde versie mag die naam niet dragen, ook niet in de naamtabel of de bestandsnaam. Licentie
   LICENTIES/kopd-OFL.txt (byte voor byte die van Lora). Ontbreekt het bestand, dan valt de stapel door naar Georgia. */
@font-face {
  font-family: "Kop D";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/kopd-wght.woff') format('woff');
}

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font: 16px/1.6 var(--letter-tekst);
  -webkit-text-size-adjust: 100%;
}

/* Zichtbaar zodra hij focus krijgt: wie met het toetsenbord navigeert moet de navigatie kunnen
   overslaan, en wie dat niet doet hoort er geen last van te hebben. */
.overslaan {
  position: absolute;
  left: -9999px;
}
.overslaan:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--accent);
  color: var(--accent-tekst);
  padding: 0.5rem 0.9rem;
  border-radius: var(--straal);
}

/* Het lokveld van het contactformulier (`Commerce\Contact`): buiten beeld voor een mens, en het blok staat op
   aria-hidden zodat een schermlezer het niet voorleest. Bewust geen display:none: sommige bots slaan een veld met
   display:none over, en dan vangt het niets. */
.lokveld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kop {
  border-bottom: 1px solid var(--rand);
  background: var(--grond);
}
.kop-binnen, .voet-binnen, .inhoud {
  max-width: var(--breedte);
  margin: 0 auto;
  padding: 0 16px;
}
.kop-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 60px;
}
.merk { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.merk-naam { font-weight: 650; letter-spacing: -0.01em; font-size: 1.05rem; }

.kop-nav { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* NIET OP DE KNOP (P1g, 29-09-2026). `.kop-nav a` weegt zwaarder dan `.knop` (0,1,1 tegen 0,1,0),
   en gaf de knop "Account maken" in de kop grijze tekst op de accentkleur: 1,6 : 1 in het lichte
   thema, 4,0 : 1 in het donkere, waar 4,5 : 1 de norm is. */
.kop-nav a:not(.knop) { color: var(--tekst-zacht); text-decoration: none; }
.kop-nav a:not(.knop):hover { color: var(--tekst); }
.inline { display: inline; margin: 0; }

/* De beheernavigatie: een smalle balk onder de kop, alleen zichtbaar voor een beheerder.
   Bewust rustig - het is een wegwijzer en geen tweede kopbalk. De actieve pagina wordt met
   aria-current gemarkeerd, dus de stijl hangt aan dat attribuut en niet aan een extra klasse:
   zo kan de markering niet visueel kloppen terwijl een schermlezer niets hoort. */
.beheer-nav { border-bottom: 1px solid var(--rand); background: var(--grond-zacht); }
.beheer-nav-rij { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
                  padding-top: 0.6rem; padding-bottom: 0.6rem; }
.beheer-nav a { color: var(--tekst-zacht); text-decoration: none; font-size: 0.92rem; }
.beheer-nav a:hover { color: var(--tekst); }
.beheer-nav a[aria-current="page"] { color: var(--tekst); font-weight: 600; }

.inhoud { padding-top: 2.5rem; padding-bottom: 3rem; }

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.5rem; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; max-width: 60ch; }
.zacht { color: var(--tekst-zacht); }
.klein { font-size: 0.9rem; }

/* Een formulierkaart. Smal met opzet: een invoerveld van 60 rem is moeilijker te lezen dan een
   van 22, en aanmelden is geen taak waarbij breedte helpt. */
.kaart {
  background: var(--grond-zacht);
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  padding: 1.5rem;
  max-width: 26rem;
}
.kaart-breed { max-width: var(--breedte); }

/* Een beheerscherm in twee kolommen (30-09-2026, eerst op het boekhoudscherm): links wat u
   instelt, rechts de stand. De kaarten nemen de breedte van hun kolom - de 26rem van .kaart is
   voor een los formulier, en een stand met tabellen werd daarin een smalle strook die u moest
   doorscrollen. Onder 52rem één kolom. */
.beheer-raster {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 1.25rem;
  align-items: start;
  max-width: var(--breedte);
  margin-top: 1.25rem;
}
.beheer-kolom { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.beheer-kolom > .kaart { max-width: none; }
@media (max-width: 52rem) {
  .beheer-raster { grid-template-columns: minmax(0, 1fr); }
}
/* Een veld met zijn knop op één regel, onder elkaar als het niet past. */
.veld-rij-knop { align-items: flex-end; }
.veld-rij-knop .veld { margin-bottom: 0; }
/* Het spoor van een aanroep: lange regels breken af in plaats van uit de kaart te steken. */
pre.spoor { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.5rem 0 0; font-size: 0.85rem; }
/* Het oordeel van de leescontrole van de boekhouding (01-10-2026). Het WOORD draagt de betekenis
   en de kleur ondersteunt; "let op" houdt de tekstkleur, want er is geen token voor een derde
   kleur en een kleur die in een van beide thema's niet te lezen is helpt niemand. */
.oordeel { font-weight: 600; white-space: nowrap; }
.oordeel-in_orde { color: var(--goed); }
.oordeel-fout { color: var(--fout); }

label { display: block; font-size: 0.92rem; margin-bottom: 0.3rem; color: var(--tekst-zacht); }
.veld { margin-bottom: 1rem; }
/* `url` staat erbij sinds de videolinks (fase M2): zonder die soort bleef het adresveld een klein
   standaardveld naast volle tekstvelden - alleen op een afdruk te zien, geen enkele meting ving het. */
input[type=text], input[type=email], input[type=password], input[type=url], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--grond);
  color: var(--tekst);
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.knop {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-tekst);
  border: 0;
  border-radius: 6px;
  padding: 0.65rem 1.1rem;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  text-decoration: none;
}
.knop-klein { padding: 0.35rem 0.7rem; font-size: 0.92rem; }
.knop-kaal {
  background: none;
  border: 0;
  color: var(--tekst-zacht);
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.knop-kaal:hover { color: var(--tekst); }
/* Een handeling die iets weghaalt of uitzet (30-09-2026): wel een knop, maar omlijnd in de
   foutkleur in plaats van gevuld in de accentkleur, zodat hij niet als de hoofdhandeling leest.
   Na .knop, want bij gelijke specificiteit beslist de volgorde. */
.knop-gevaar {
  background: transparent;
  color: var(--fout);
  border: 1px solid var(--fout);
}
.knop-gevaar:hover { background: var(--fout-grond); }
/* Een tweede handeling naast of onder de hoofdhandeling (30-09-2026): omlijnd en NEUTRAAL, niet in
   de accentkleur. Die accentkleur is per winkel één waarde voor beide thema's (huisstijl.css); als
   vulling werkt hij altijd (accent-tekst erop), maar als tekstkleur op de donkere achtergrond wordt
   een donkere huisstijl onleesbaar. Tekst- en randkleur hebben een eigen waarde per thema. */
.knop-tweede {
  background: transparent;
  color: var(--tekst);
  border: 1px solid var(--tekst-zacht);
}
.knop-tweede:hover { background: var(--grond); }
.knop-rij { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; flex-wrap: wrap; }

.melding {
  border: 1px solid var(--rand);
  border-radius: var(--straal);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
  max-width: 40rem;
}
.melding-fout { border-color: var(--fout); background: var(--fout-grond); color: var(--fout); }
.melding-goed { border-color: var(--goed); background: var(--goed-grond); color: var(--goed); }
.melding ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
/* Een melding die informeert in plaats van waarschuwt: geen kleur, wel een kader. Voor
   teksten die de bezoeker MOET lezen maar waar niets mis is - zoals de uitleg dat hij zijn
   herroepingsrecht houdt als hij een vinkje niet zet. Een groene of rode melding zou daar
   een oordeel in leggen dat er niet is. */
/* `--vlak` bestond nergens: deze klasse had dus nooit een achtergrond. Gevonden door de
   tokencontrole in tools/stijlpoort.py, niet door ernaar te kijken - een ongedefinieerd
   token valt stil terug op niets en dat ziet eruit als een keuze. */
.melding-zacht { background: var(--grond-zacht); color: var(--tekst); }

/* Een keuzevakje met zijn tekst ernaast in plaats van eronder. De tekst is bij een
   instemmingsvraag vaak twee regels lang, en dan hoort het vakje bovenaan uitgelijnd te
   staan - niet in het midden van een blok tekst. */
.keuze { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.keuze input[type=checkbox] { margin-top: 0.2rem; flex: 0 0 auto; width: 1.05rem;
                              height: 1.05rem; accent-color: var(--accent); }
.keuze span { flex: 1 1 auto; min-width: 0; }

/* Twee velden naast elkaar waar het past (postcode en plaats), onder elkaar op een telefoon. */
.veld-rij { display: flex; gap: 1rem; flex-wrap: wrap; }
.veld-rij .veld { flex: 1 1 10rem; min-width: 0; }

.voet {
  border-top: 1px solid var(--rand);
  color: var(--tekst-zacht);
  font-size: 0.9rem;
  padding: 1.25rem 0;
}
.voet-binnen { display: flex; gap: 1rem; flex-wrap: wrap; }
.voet a { color: inherit; }

dl.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.gegevens dt { color: var(--tekst-zacht); }
dl.gegevens dd { margin: 0; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rand); }
th { color: var(--tekst-zacht); font-weight: 550; }
.getal { text-align: right; font-variant-numeric: tabular-nums; }

/* Bij een smal scherm mag niets zijdelings weglopen; alleen een brede tabel mag zelf schuiven. */
.schuif { overflow-x: auto; }

/* ============================================================ afbeeldingen (besluit D27-A)
   Breedte en hoogte staan als ATTRIBUTEN op elke img, zodat de browser de verhouding kent voordat
   de afbeelding binnen is en de pagina niet springt. Daarom staat hier overal `height: auto`:
   zonder die regel wint het hoogte-attribuut en wordt een geschaalde afbeelding uitgerekt. */
.etalage-beeld { display: block; margin-bottom: 0.75rem; }
.etalage-beeld img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 16rem;
  border: 1px solid var(--rand); border-radius: var(--straal); background: var(--grond-zacht);
}

/* De productpagina: de eerste groot, de rest als een rij kleinere, onder elkaar op een smal scherm. */
.productbeelden { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }
.productbeelden a { display: block; max-width: 100%; }
.productbeelden img {
  display: block; width: auto; height: auto; max-width: 100%;
  border: 1px solid var(--rand); border-radius: var(--straal); background: var(--grond-zacht);
}
.productbeeld-hoofd { flex: 1 1 100%; }
.productbeeld-hoofd img { max-height: 28rem; }
.productbeeld { flex: 0 0 auto; }
.productbeeld img { max-height: 8rem; }

/* Het beheer: per afbeelding een regel met een voorbeeld en het eigen formulier ernaast. */
.beeldlijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.beeldregel {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; max-width: var(--breedte);
  padding: 0.75rem; border: 1px solid var(--rand); border-radius: var(--straal);
}
.beeld-duim {
  display: block; width: auto; height: auto; max-width: 9rem; max-height: 7rem;
  border: 1px solid var(--rand); border-radius: 4px; background: var(--grond-zacht);
}
.beeldformulier { flex: 1 1 18rem; min-width: 0; }
.logo-voorbeeld { margin: 0 0 0.75rem; }
.logo-voorbeeld img { display: block; width: auto; max-width: 100%; }

/* Video's als link (besluit D28-A): een plaatje en een tekst die samen de link zijn, met de host
   eronder. Het afspeelteken is een tekst in de stylesheet en geen plaatje van de videodienst. */
.videolijst { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
.videolink a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.video-plaatje {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 7rem;
  border: 1px solid var(--rand); border-radius: var(--straal); background: var(--grond-zacht);
}
.video-tekst::before { content: "\25B6\00a0"; }
.videolink .klein { display: block; margin-top: 0.2rem; }

/* De juridische teksten (O3): een leesbare regellengte, en het invoerveld in het beheer even breed als de
   kaart. Een regel van 65 tekens leest rustiger dan de volle breedte van een groot scherm. */
.tekstpagina { max-width: 46rem; }
.tekstpagina h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.tekstpagina p { white-space: pre-line; }
.tekstveld {
  width: 100%; min-height: 18rem; padding: 0.6rem 0.7rem; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--grond); color: var(--tekst); font: inherit; line-height: 1.5;
}
.registerveld {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--rand); border-radius: 6px;
  background: var(--grond); color: var(--tekst); font: inherit;
}

/* ============================================================ hulpklassen
   ⚠️ DEZE STAAN BEWUST HELEMAAL ONDERAAN. Ze hebben dezelfde specificiteit als elke andere
   enkele klasse (0,0,1,0), dus bij gelijke specificiteit beslist de VOLGORDE - en dan horen ze
   te winnen, want ze zijn er juist om een uitzondering te maken.

   Ze bestaan omdat de winkel sinds 22-09-2026 `style-src 'self'` stuurt: een `style="..."` in
   een sjabloon wordt dan door de browser GEWEIGERD, en dat gebeurt stil. De 69 attributen die
   er stonden zijn hiernaartoe verhuisd, waarde voor waarde - geen enkele is onderweg
   "opgeruimd", want dat zou een visuele wijziging zijn die niemand heeft gevraagd.

   De naam draagt de waarde (`u-mt-075` is `margin-top: 0.75rem`), zodat wie een klasse toevoegt
   meteen ziet of er al een is die hetzelfde doet. `tools/csppoort.py` weigert een nieuw
   stijlattribuut in een sjabloon. */
.u-mt-0 { margin-top: 0; }
.u-mt-035 { margin: 0.35rem 0 0; }
.u-mt-05 { margin: 0.5rem 0 0; }
.u-mt-06 { margin-top: 0.6rem; }
.u-mt-075 { margin-top: 0.75rem; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-125 { margin-top: 1.25rem; }
.u-mt-15 { margin-top: 1.5rem; }
.u-mb-1 { margin-bottom: 1rem; }
.u-m-0 { margin: 0; }
.u-m-015 { margin: 0.15rem 0; }
.u-m-02 { margin: 0.2rem 0; }
.u-max-6 { max-width: 6rem; }
.u-max-28-rechts { max-width: 28rem; margin-left: auto; }
.u-breed-45 { width: 4.5rem; }
.u-vol { width: 100%; }
.u-midden { text-align: center; }
.u-fout { color: var(--fout); }
.u-breek { word-break: break-all; }
.u-preline { white-space: pre-line; }

/* ⚠️ EEN INLINE STIJL WON VAN ELKE SELECTOR; EEN KLASSE NIET. `.melding ul` is een klasse PLUS
   een element (0,0,1,1) en zou `.u-m-0` (0,0,1,0) overrulen - dan zou de foutenlijst in een
   melding zijn marge terugkrijgen en alles eronder verschuiven. Dit is de enige plek in de
   stylesheet waar dat speelt; gemeten vóór de verbouwing, niet achteraf ontdekt. */
.melding ul.u-m-0 { margin: 0; }

/* De lijst met herstelcodes: monospace, ruim, en zonder opsommingstekens - die codes moeten
   overgetikt kunnen worden. Dit is een onderdeel en geen hulpklasse, dus een eigen naam. */
.codelijst {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

/* ============================================================ uit de sjablonen gehaald
   Deze regels stonden als `<style>`-blok in een sjabloon. Onder `style-src 'self'` worden zulke
   blokken geweigerd - stil, zoals alles wat een CSP tegenhoudt - dus ze horen hier. */

/* De twee partijen op een factuur naast elkaar, onder elkaar op een smal scherm. */
.factuur-partijen { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.factuur-partijen > div { flex: 1 1 12rem; min-width: 0; }

/* Het koppelscherm van de tweede factor. De QR houdt zijn maat: een geschaalde QR-code wordt
   onscherp, en dat is precies wat een scanner niet meer leest. */
.tf-koppel { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; }
.tf-qr { flex: 0 0 auto; }
.tf-qr img { display: block; width: 290px; height: 290px; image-rendering: pixelated;
             border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; }
.tf-handmatig { flex: 1 1 18rem; min-width: 0; }
.tf-geheim { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem;
             letter-spacing: .05em; word-break: break-all; }
@media (max-width: 34rem) {
  .tf-qr img { width: 240px; height: 240px; }
}

/* ============================================================ de winkelstand (D42)
   De balk die een beheerder ziet als de winkel voor bezoekers gesloten is, en de gesloten-pagina zelf.
   De balk is met opzet fel: wie de winkel dichtzet en vergeet, hoort dat op elke pagina te zien. */
.winkel-dicht-balk { background: #9b1c1c; color: #fff; font-weight: 600; }
/* Een vaste donkerrode grond en niet `--fout`: die is in het donkere thema lichtroze, en daar is
   witte tekst op niet te lezen. */
.winkel-dicht-balk .inhoud { padding-block: .55rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
                             align-items: baseline; }
.winkel-dicht-balk a { color: #fff; }
.gesloten { max-width: 36rem; padding-block: 2.5rem; }
.gesloten h1 { font-size: 2rem; margin-bottom: .75rem; }
.gesloten p { margin: 0 0 .75rem; }
.gesloten .eigen-tekst { font-size: 1.15rem; white-space: pre-line; }
/* De keuzerondjes op het winkelstandscherm, op dezelfde maat als het vinkje van `.keuze`. */
.keuze input[type=radio] { margin-top: 0.2rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
fieldset.veld { border: 0; padding: 0; margin-inline: 0; display: grid; gap: .4rem; }
fieldset.veld legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }

/* ============================================================ de betaal-QR (O2, D50)
   Op de bedankpagina. Vaste maat en scherpe randen: een geschaalde, wazige QR leest een bank-app slecht. */
.betaalqr { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.betaalqr img { display: block; width: 180px; height: 180px; image-rendering: pixelated;
                background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; }
.betaalqr p { flex: 1 1 12rem; min-width: 0; }

/* ============================================================ stijl B: Productwinkel (O5 S2)
   Een held met de producten in beeld, kaarten met een soortlabel en een vanaf-prijs, prijskaarten
   met voordelen, een inktvoet. De koppen zijn Jost 500 (zie `Weergave\Stijlen`).
   DE KOPLETTER HEET "Kop B" EN DAT IS EEN EIGEN NAAM, geen lettertype dat ergens geinstalleerd staat. Sinds O5 S5 is
   er een @font-face met die naam (bovenaan, de meegeleverde Jost); ontbreekt het bestand, dan valt de browser door naar
   Roboto. Met de naam "Jost" zou een bezoeker die Jost zelf heeft geinstalleerd een andere versie zien dan de rest. */
:root[data-stijl="b"] {
  --straal: 12px;
  --schaduw: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.06);
  --letter-tekst: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-kop: "Kop B", "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --gewicht-kop: 500;
  /* DE LINKKLEUR VAN B IS DONKERDER DAN DE ACCENTKLEUR (besluit van 07-10-2026, O5 11.10). In B staan links ook op
     getinte vlakken: een kaart op --grond-zacht, een geslaagde melding en het heldvlak in --band. Daarop haalde de
     accentkleur zelf net geen 4,5 : 1 (gemeten 4,25 tot 4,33 met de accentkleur van de mockup); de contrastcontrole
     meet haar alleen tegen wit. WAAROM 82 PROCENT: mengen met zwart in oklab vermenigvuldigt de luminantie met 0,82
     tot de derde (0,55). De lichtste accentkleur die het weergavescherm toelaat (4,5 : 1 tegen wit) haalt daarmee op
     het donkerste lichte vlak dat B kan hebben, het heldvlak bij een zwarte merkkleur, nog 5,28 : 1; zonder zwarte
     merkkleur ruim meer. 88 procent zou net genoeg zijn, zonder marge voor afronding. Dezelfde menging als C en D.
     Afgeleid, zonder letterlijke kleur; in het donkere thema de lichtere tint van de basis (`tests/stijlen_test.php`
     rekent het na). */
  --accent-als-tekst: color-mix(in oklab, var(--accent) 82%, black);
}
@media (prefers-color-scheme: dark) {
  :root[data-stijl="b"]:not([data-thema="licht"]) {
    --schaduw: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    /* Terug naar de tint van de basis. Zonder deze regel wint de donkere menging van het lichte blok hierboven ook in
       donker: dat blok en het donkere blok van de basis wegen even zwaar, en het blok van B staat later. */
    --accent-als-tekst: color-mix(in oklab, var(--accent) 55%, white);
  }
}

h1, h2, h3 { font-family: var(--letter-kop); }
[data-stijl="b"] h1, [data-stijl="b"] h2, [data-stijl="b"] h3 { font-weight: var(--gewicht-kop); }
[data-stijl="b"] h1 { font-size: 2rem; letter-spacing: -0.02em; }
[data-stijl="b"] .kop { position: relative; }
[data-stijl="b"] .merk-naam { font-weight: 700; font-size: 1.15rem; }
/* De accentkleur als TEKST hangt aan --accent-als-tekst: in het lichte thema een donkerdere tint (zie het blok van B
   hierboven), in het donkere thema een lichtere.
   NIET OP .knop-tweede (07-10-2026): die knop is bewust NEUTRAAL (zie .knop-tweede), en "Verder winkelen" in het
   mandje is een a.knop-tweede zonder .knop. Deze regel (0,2,2) won van .knop-tweede (0,1,0): de knop stond in de
   accentkleur met een neutrale rand eromheen, zo gemeten in de browser. EEN LIJST IN :not() EN GEEN TWEEDE :not():
   :not(a, b) weegt als zijn zwaarste argument, dus deze regel blijft (0,2,2), en `[data-stijl] .productkaart h3 a`
   (ook 0,2,2, later) houdt de titel van een productkaart in de tekstkleur. Met twee keer :not() weegt hij (0,3,2) en
   kleuren die titels mee. `tests/stijlen_test.php` rekent de cascade voor deze elementen na. */
[data-stijl="b"] main a:not(.knop, .knop-tweede) { color: var(--accent-als-tekst); }

/* De kop: het mandje en de taalkiezer. */
.kop-mandje { font-weight: 600; }
.taalkiezer { display: inline-flex; gap: 0.4rem; align-items: center; }
.taalkiezer a { font-size: 0.85rem; letter-spacing: 0.04em; }
.taalkiezer a[aria-current="true"] { font-weight: 700; text-decoration: underline; }

/* De voet: in stijl B een inktvlak met witte tekst. Wit op de inktkleur is gegarandeerd 4,5 : 1 (de
   contrastcontrole op /beheer/weergave weigert anders), in beide thema's, want de inkt is één waarde. */
.voet-binnen { justify-content: space-between; align-items: flex-start; }
.voet-winkel { display: flex; flex-direction: column; gap: 0.15rem; }
.voet-links, .voet-talen { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
[data-stijl="b"] .voet { background: var(--inkt); color: #ffffff; border-top: 0; padding: 2rem 0; margin-top: 2rem; }
[data-stijl="b"] .voet a { color: #ffffff; }

/* Het voorbeeld van een beheerder: een inktbalk, zodat hij niet verward wordt met de rode winkelstandbalk. */
.voorbeeld-balk { background: var(--inkt); color: #ffffff; font-size: 0.92rem; }
.voorbeeld-balk .inhoud { padding-block: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
                          align-items: center; justify-content: space-between; }
.voorbeeld-balk a { color: #ffffff; }
.voorbeeld-balk .knop-tweede { color: #ffffff; border-color: #ffffff; }

/* De startpagina. */
.beloftenstrook { list-style: none; margin: -1rem 0 1.25rem; padding: 0.55rem 1rem; display: flex;
                  flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: center; background: var(--band);
                  color: var(--tekst); font-size: 0.9rem; border-radius: var(--straal); }
.beloftenstrook li::before { content: "\2713\00a0"; color: var(--goed); font-weight: 700; }
.held { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 2rem; }
.held-met-beeld { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 48rem) { .held-met-beeld { grid-template-columns: minmax(0, 1fr); } }
[data-stijl="b"] .held { background: var(--band); border-radius: var(--straal); padding: 2rem 1.5rem; }
.held-ondertitel { font-size: 1.15rem; color: var(--tekst-zacht); }
.held-intro { max-width: 52ch; }
.held-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.held-collage a:first-child { grid-row: span 2; }
.held-collage img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--straal);
                    border: 1px solid var(--rand); background: var(--grond); }

/* De etalage: een raster van kaarten, drie, twee of één kolom zonder breekpunten (auto-fill). */
.productraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem;
                 margin: 1rem 0 2rem; }
.productkaart { display: flex; flex-direction: column; background: var(--grond); border: 1px solid var(--rand);
                border-radius: var(--straal); box-shadow: var(--schaduw); overflow: hidden; }
.productkaart-beeld { display: block; background: var(--grond-zacht); border-bottom: 1px solid var(--rand); }
.productkaart-beeld img { display: block; width: 100%; height: auto; max-height: 12rem; object-fit: cover; }
.productkaart-tekst { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem 1.1rem; flex: 1 1 auto; }
.productkaart h3 { margin: 0; font-size: 1.15rem; }
[data-stijl] .productkaart h3 a { color: var(--tekst); text-decoration: none; }
.productkaart p { margin: 0; }
.productkaart-voet { margin-top: auto; padding-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem;
                     align-items: center; justify-content: space-between; }
.soortlabel { align-self: flex-start; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
              text-transform: uppercase; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--band);
              border: 1px solid var(--merk); color: var(--tekst); }
.vanaf { font-weight: 600; font-variant-numeric: tabular-nums; }
.vanaf .klein { font-weight: 400; margin-left: 0.25rem; }

/* De filters, het zoeken en de categorieën van de etalage (O5 S5): een kolom naast het raster op een bureaublad, erboven
   op een telefoon. Geen script; het filter is een gewoon formulier. */
.etalage { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 52rem) { .etalage { grid-template-columns: 15rem minmax(0, 1fr); } }
.etalagefilter fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.etalagefilter legend { font-weight: 600; margin-bottom: 0.4rem; }
.etalagefilter .keuze { margin-bottom: 0.3rem; }
.etalagefilter .keuze .telling { flex: 0 0 auto; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.zoekregel { display: flex; gap: 0.4rem; }
.zoekregel input { flex: 1 1 auto; min-width: 0; }
.categorielinks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.categorie-beschrijving { max-width: 60ch; color: var(--tekst-zacht); }
.etalage-uitslag .productraster { margin-top: 0.5rem; }

/* De productpagina. */
.product-kop { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 52rem) { .product-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.product-samenvatting { font-size: 1.1rem; }
.kenmerken { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.kenmerken li { padding-left: 1.6rem; position: relative; }
.kenmerken li::before { content: "\2713"; position: absolute; left: 0.2rem; color: var(--goed); font-weight: 700; }
.prijskaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem;
                margin: 0.75rem 0 1rem; align-items: stretch; }
.prijskaart { position: relative; display: flex; flex-direction: column; gap: 0.35rem; background: var(--grond);
              border: 1px solid var(--rand); border-radius: var(--straal); padding: 1.25rem 1.1rem;
              box-shadow: var(--schaduw); }
.prijskaart h3 { margin: 0; font-size: 1.1rem; }
.prijskaart p { margin: 0; }
.prijskaart-uitgelicht { border: 2px solid var(--accent); }
/* Het label hangt BOVEN de kaart, zodat de naam en de prijs op dezelfde hoogte blijven als op de kaarten ernaast. */
.prijskaart-label { position: absolute; top: -0.75rem; left: 1rem; font-size: 0.78rem; font-weight: 600;
                    padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); }
.prijskaart-bedrag { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.prijskaart-prijs .klein { margin-left: 0.25rem; }
.prijskaart-ander { display: block; margin-left: 0; }
.prijskaart-termijn { color: var(--tekst-zacht); }
.voordelen { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.95rem; }
.voordelen li { padding-left: 1.4rem; position: relative; }
.voordelen li::before { content: "\2713"; position: absolute; left: 0.1rem; color: var(--goed); font-weight: 700; }
.prijskaart-actie { margin-top: auto; padding-top: 0.5rem; }
.bestelformulier { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bestelformulier label { margin: 0; }
/* Het aantal: dezelfde vorm als de andere invoervelden, in beide thema's (de basisregel noemt geen type number). */
.bestelformulier input[type=number] { width: 4.5rem; padding: 0.45rem 0.5rem; border: 1px solid var(--rand);
                                      border-radius: 6px; background: var(--grond); color: var(--tekst); font: inherit; }
.betaalregel { margin-top: 0.5rem; }

/* Zo werkt bestellen en wat u zeker weet. */
.zo-werkt ol { list-style: none; counter-reset: stap; margin: 0.75rem 0 2rem; padding: 0; display: grid; gap: 1rem;
               grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.zo-werkt li { counter-increment: stap; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem;
               background: var(--grond-zacht); border: 1px solid var(--rand); border-radius: var(--straal); }
.zo-werkt li::before { content: counter(stap); display: inline-grid; place-items: center; width: 2rem; height: 2rem;
                       border-radius: 50%; background: var(--band); border: 1px solid var(--merk); font-weight: 600; }
.zo-werkt li span { color: var(--tekst-zacht); font-size: 0.92rem; }
.zeker ul { margin: 0.5rem 0 1.5rem; padding-left: 1.2rem; }

/* Het weergavescherm in het beheer. */
.stijlkeuzes { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.stijlkeuze { border: 1px solid var(--rand); border-radius: var(--straal); padding: 0.75rem; background: var(--grond); }
.stijlkeuze .stijl-omschrijving { display: block; margin-top: 0.2rem; }
.stijlstaal { display: block; height: 2.2rem; margin-bottom: 0.4rem; border-radius: 6px; border: 1px solid var(--rand);
              background: linear-gradient(90deg, var(--inkt) 0 30%, var(--band) 30% 70%, var(--accent) 70% 100%); }
.stijlstaal-a { background: linear-gradient(180deg, var(--band) 0 45%, var(--grond) 45% 100%); }
.stijlstaal-c { background: linear-gradient(180deg, var(--inkt) 0 25%, var(--grond) 25% 100%); }
.stijlstaal-d { background: linear-gradient(90deg, var(--band) 0 60%, var(--inkt) 60% 100%); }
.kleur-rij { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.kleur-rij input[type=color] { width: 3rem; height: 2.4rem; padding: 0.15rem; border: 1px solid var(--rand);
                                border-radius: 6px; background: var(--grond); }
.kleur-rij .kleur-hex { width: 8rem; }
.voorbeeldknoppen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.talenlijst { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.talenlijst li { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

/* Het mandje (O5 S3, OPEN_WINKEL 4.3): een regel per plan, met aantal, bedrag en verwijderen. Op een telefoon wrapt
   de regel; de afbeelding valt dan weg, want de titel is daar belangrijker dan het plaatje. Geen marge op de
   alinea's in een regel: die zetten de hulpklassen, en een selector als `.mandje-wat p` zou ze overrulen. */
.mandje-lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.mandje-regel { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; padding: 0.9rem 1rem;
                background: var(--grond); border: 1px solid var(--rand); border-radius: var(--straal); }
.mandje-beeld { width: 4.5rem; height: auto; border-radius: 6px; border: 1px solid var(--rand); }
.mandje-wat { flex: 1 1 14rem; min-width: 0; }
.mandje-titel { font-size: 1.05rem; margin: 0 0 0.15rem; }
.mandje-aantal { display: flex; gap: 0.4rem; align-items: center; }
.mandje-aantal input[type=number] { width: 4.5rem; }
.mandje-bedrag { margin: 0; min-width: 6rem; font-weight: 600; text-align: right; white-space: nowrap; }
.mandje-totaalregel { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: 1.1rem;
                      margin: 0 0 0.5rem; }
@media (max-width: 40rem) {
  .mandje-beeld { display: none; }
  .mandje-bedrag { text-align: left; }
}

/* De voortgangsregel van het afrekenen (O5 S4, OPEN_WINKEL 5.1): vijf stappen op een rij, de huidige vet en met een
   streep in de accentkleur. Op een telefoon wrapt de rij. Het nummer komt uit een teller, zodat de lijst zelf alleen
   de namen draagt (en een vertaling alleen die hoeft te vertalen). */
.voortgang ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
                counter-reset: stap; font-size: 0.92rem; }
.voortgang li { counter-increment: stap; color: var(--tekst-zacht); padding-bottom: 0.2rem;
                border-bottom: 2px solid transparent; }
.voortgang li::before { content: counter(stap) ". "; }
.voortgang .voortgang-gedaan { color: var(--tekst); }
.voortgang .voortgang-huidig { color: var(--tekst); font-weight: 650; border-bottom-color: var(--accent); }
/* Stap 2: twee kaarten naast elkaar, op een telefoon onder elkaar. */
.afrekenkeuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
/* Een kaartkop met een link rechts: "Wijzigen" bij elk blok van stap 4. */
.kaart-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; }

/* ============================================================ de stijlen A, C en D (O5 S8, 07-10-2026)
   Zoals stijl B hierboven: per stijl een blok `:root[data-stijl="x"]` met alleen VORMtokens (letters, straal, schaduw,
   breedte), en daaronder regels die ALLEEN onder `[data-stijl="x"]` gelden. Geen enkele regel hieronder raakt stijl B:
   elke selector begint met `[data-stijl="a"]`, `[data-stijl="c"]` of `[data-stijl="d"]`, of noemt een klasse die
   alleen in een blok van die stijl voorkomt (`Weergave\Stijlen::heeft`). `tests/stijlen_test.php` toetst dat.

   KLEUREN. Een stijlblok zet nooit een huisstijlkleur (`tools/stijlpoort.py`); de vier kleuren van de winkelier gelden
   in elke stijl. Wat een ontwerp als eigen tint had (de lichte band, een lijnkleur), is hier afgeleid met color-mix
   van de neutrale tokens, zodat het donkere thema vanzelf meegaat. Tekst op een vlak in de accent-, accent-donker- of
   inktkleur is wit: de contrastcontrole op /beheer/weergave eist 4,5 : 1 tussen wit en accent en tussen wit en inkt, en
   de donkere accenttint ligt daar nog verder onder.

   ⚠️ GEEN MARGES OP ELEMENTEN DIE EEN HULPKLASSE DRAGEN. Deze regels staan na de hulpklassen (`u-mt-0` en verder) en
   zijn specifieker; een `margin` op `h2` of `.kaart` hier zou de hulpklasse in het sjabloon stil overrulen. Koppen
   krijgen daarom alleen een maat, een gewicht en een regelhoogte. */

/* ------------------------------------------------------------ stijl A: Doorlopend
   Een lichte paginagrond, een band in de donkere accenttint met de paginatitel, en de inhoud als één witte kaart die
   over de band valt. Kaarten en plannen met een dunne rand, knoppen met een kleine straal, Roboto overal en de
   vaste-breedteletter voor sleutels en codes. */
:root[data-stijl="a"] {
  --straal: 12px;
  --schaduw: 0 2px 4px rgba(22, 25, 34, 0.06), 0 18px 44px rgba(0, 60, 110, 0.14);
  --breedte: 75rem;
  --letter-tekst: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-kop: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-mono: "Mono AC", ui-monospace, Consolas, monospace;
  --gewicht-kop: 400;
}
@media (prefers-color-scheme: dark) {
  :root[data-stijl="a"]:not([data-thema="licht"]) {
    --schaduw: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.35);
  }
}
[data-stijl="a"] body { background: var(--band); font-size: 0.9375rem; line-height: 1.75; }
[data-stijl="a"] h1, [data-stijl="a"] h2, [data-stijl="a"] h3 { font-weight: var(--gewicht-kop); letter-spacing: 0; }
[data-stijl="a"] h2 { font-size: 1.5rem; line-height: 1.3; }
[data-stijl="a"] h3 { font-size: 1.25rem; line-height: 1.35; }
[data-stijl="a"] .kop { border-bottom: 0; box-shadow: 0 1px 0 var(--rand); position: relative; z-index: 1; }
[data-stijl="a"] .kop-binnen { min-height: 5rem; }
[data-stijl="a"] .merk img { height: 3rem; width: auto; }
[data-stijl="a"] .merk-naam { font-weight: 500; font-size: 1.2rem; }
[data-stijl="a"] .kop-nav { gap: 0.5rem 1.4rem; }
[data-stijl="a"] .kop-nav a:not(.knop) { color: var(--accent-als-tekst); }
/* Met `>`: een anker van tools/mutatieproef_vindbaarheid.py zoekt de kale hoverregel hierboven, en die moet precies
   een keer voorkomen. */
[data-stijl="a"] .kop-nav > a:not(.knop):hover { color: var(--tekst); }
/* Niet op .knop-tweede (07-10-2026): A kleurt die knop hieronder zelf, met hetzelfde token en een rand in dezelfde
   kleur. Die regel hoort de kleur te bepalen en niet deze; anders verandert een a.knop-tweede zonder .knop niet mee
   als iemand haar aanpast. Een lijst in :not(), om dezelfde reden als bij B. */
[data-stijl="a"] main a:not(.knop, .knop-tweede) { color: var(--accent-als-tekst); }
[data-stijl="a"] .productkaart h3 a { color: var(--tekst); }

/* De band en de kaart erover. De band is een leeg vlak (de laag zet hem alleen in A, en niet op een beheerscherm); de
   titel blijft de h1 van de pagina zelf en staat met absolute positie boven de kaart, op de band. Zo is er geen tweede
   kopie van de titel voor een schermlezer. Ruimte: 12,5rem band, de kaart valt er 4rem over, dus 8,5rem blauw waarvan
   1,25rem onder de titel; een titel van twee regels op een bureaublad en drie op een telefoon past daarin. */
[data-stijl="a"] .band { height: 12.5rem; background: var(--accent-donker); }
[data-stijl="a"] .band + main.inhoud {
  position: relative;
  width: min(var(--breedte), calc(100% - 2rem));
  max-width: none;
  margin: -4rem auto 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--grond);
  border-radius: 20px;
  box-shadow: var(--schaduw);
}
[data-stijl="a"] .band + main.inhoud h1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 1.25rem);
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.875rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* Een beheerscherm heeft geen band (de laag zet hem daar niet neer), maar de grond van de pagina blijft --band. Zonder
   eigen grond lag de inhoud daarop, en een link in de accentkleur haalde er geen 4,5 : 1 (gemeten 4,25 : 1 met een
   accentkleur die tegen wit net 4,5 : 1 haalt; `tools/dev/meet_stijlen.py statisch`). Dezelfde witte kaart dus, maar
   onder de beheernavigatie in plaats van over een band. */
[data-stijl="a"] .beheer-nav + main.inhoud {
  width: min(var(--breedte), calc(100% - 2rem));
  max-width: none;
  margin: 2rem auto 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: var(--grond);
  border-radius: 20px;
  box-shadow: var(--schaduw);
}

/* De startpagina: de held als gecentreerde inleiding, de beloften als rij met een vinkvlak, de producten als kaarten
   met een dunne rand (de schaduw hoort bij de grote kaart, niet bij elke kaart erin). */
[data-stijl="a"] .held { justify-items: center; text-align: center; margin-bottom: 2rem; }
[data-stijl="a"] .held-tekst { display: grid; justify-items: center; }
[data-stijl="a"] .held p { margin-inline: auto; }
[data-stijl="a"] .held .knop-rij { justify-content: center; }
.beloften { list-style: none; padding: 0; }
[data-stijl="a"] .beloften { display: grid; gap: 1.25rem 2rem; margin: 0 0 2.5rem;
                             grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
[data-stijl="a"] .beloften li { display: flex; gap: 0.85rem; align-items: center; color: var(--tekst); font-weight: 500; }
[data-stijl="a"] .beloften li::before { content: "\2713"; flex: 0 0 2.75rem; height: 2.75rem; display: grid;
                                        place-items: center; border-radius: 12px; background: var(--band);
                                        color: var(--accent-als-tekst); font-weight: 700; }
[data-stijl="a"] .productraster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2rem; }
[data-stijl="a"] .productkaart { box-shadow: none; border-radius: var(--straal); }
[data-stijl="a"] .productkaart-beeld { margin: 1.25rem 1.25rem 0; border: 0; background: none; }
[data-stijl="a"] .productkaart-beeld img { height: 15.625rem; max-height: none; object-fit: cover; object-position: center top;
                                           border-radius: 14px; box-shadow: 0 0 0 1px var(--rand); }
[data-stijl="a"] .productkaart-tekst { padding: 1.25rem 1.5rem 1.5rem; gap: 0.5rem; }
[data-stijl="a"] .productkaart h3 { font-size: 1.5rem; font-weight: 400; }
[data-stijl="a"] .soortlabel { background: var(--grond-zacht); border-color: var(--rand); border-radius: 4px;
                               text-transform: none; letter-spacing: 0; font-weight: 500; }
[data-stijl="a"] .vanaf { font-size: 1.6rem; font-weight: 400; line-height: 1.2; }
[data-stijl="a"] .vanaf .klein { font-size: 0.8125rem; }

/* De knoppen: een kleine straal, gewicht 500, en de tweede knop in de accentkleur (als tekst de lichtere tint, zodat hij
   in het donkere thema leesbaar blijft). */
[data-stijl="a"] .knop { border-radius: 4px; font-weight: 500; border: 1px solid var(--accent); padding: 0.75rem 1.375rem; }
[data-stijl="a"] .knop-klein { padding: 0.45rem 0.9rem; }
[data-stijl="a"] .knop-tweede { background: var(--grond); color: var(--accent-als-tekst); border-color: var(--accent-als-tekst); }
[data-stijl="a"] .knop-tweede:hover { background: var(--band); }
[data-stijl="a"] .knop-gevaar { background: transparent; color: var(--fout); border-color: var(--fout); }

/* De productpagina: de plannen als kaarten met een dunne rand; het uitgelichte plan met een rand in de accentkleur en
   een label erboven. */
[data-stijl="a"] .prijskaart { box-shadow: none; padding: 1.75rem; gap: 0.6rem; }
[data-stijl="a"] .prijskaart h3 { font-size: 1.5rem; font-weight: 400; }
[data-stijl="a"] .prijskaart-label { border-radius: 4px; top: -0.875rem; }
[data-stijl="a"] .prijskaart-bedrag { font-size: 2.5rem; font-weight: 400; line-height: 1.1; }
[data-stijl="a"] .kenmerken li::before, [data-stijl="a"] .voordelen li::before { color: var(--accent-als-tekst); }

/* Kaarten in de kaart (formulieren, het mandje, de factuur): een licht vlak met de grotere straal. */
[data-stijl="a"] .kaart { background: var(--grond); border-color: var(--rand); border-radius: var(--straal); }
/* Een link in een melding neemt de kleur van de melding over: de accentkleur haalt op een getinte grond (de groene
   melding) geen 4,5 : 1, en de tekstkleur van de melding is daar al op gekozen. Gemeten met tools/dev/meet_stijlen.py. */
[data-stijl="a"] .melding a:not(.knop) { color: inherit; }
[data-stijl="a"] .mandje-regel, [data-stijl="a"] .stijlkeuze { border-radius: var(--straal); }
[data-stijl="a"] input[type=text], [data-stijl="a"] input[type=email], [data-stijl="a"] input[type=password],
[data-stijl="a"] input[type=url], [data-stijl="a"] input[type=search], [data-stijl="a"] select { border-radius: 4px; }
[data-stijl="a"] .codelijst, [data-stijl="a"] .tf-geheim { font-family: var(--letter-mono); }

/* De voortgangsregel: per stap een streep van 3px erboven; gedaan in de goedkleur, de huidige in de accentkleur. */
[data-stijl="a"] .voortgang ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
                                 gap: 0.75rem 1.25rem; }
[data-stijl="a"] .voortgang li { border-bottom: 0; border-top: 3px solid var(--rand); padding: 0.5rem 0 0; }
[data-stijl="a"] .voortgang .voortgang-gedaan { border-top-color: var(--goed); }
[data-stijl="a"] .voortgang .voortgang-huidig { border-top-color: var(--accent); }

/* Zo werkt bestellen: de stappen met een streep erboven en een nummer in een cirkel in de accentkleur. */
[data-stijl="a"] .zo-werkt li { background: none; border: 0; border-top: 2px solid var(--rand); border-radius: 0;
                                padding: 1.25rem 0 0; }
[data-stijl="a"] .zo-werkt li::before { background: var(--accent); color: var(--accent-tekst); border: 0; }

/* De voet: de donkere accenttint met witte tekst, ruim. */
[data-stijl="a"] .voet { background: var(--accent-donker); color: #ffffff; border-top: 0; padding: 3rem 0 2.5rem;
                         margin-top: 4.5rem; font-size: 0.9375rem; }
[data-stijl="a"] .voet a { color: #ffffff; }

/* ------------------------------------------------------------ stijl C: Zakelijk
   Een grijze paginagrond met witte kaarten, een donkere servicebalk boven de kop, het zoekveld in de kop, producten als
   rijen met hun plannen in een tabel, en bedragen en codes in de vaste-breedteletter. Geen schaduw: lijnen dragen de
   vorm. Labels in kleine hoofdletters. */
:root[data-stijl="c"] {
  --straal: 6px;
  --schaduw: none;
  --breedte: 75rem;
  --letter-tekst: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-kop: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-mono: "Mono AC", ui-monospace, Consolas, monospace;
  --gewicht-kop: 500;
  /* DE LINKKLEUR IS DONKERDER DAN DE ACCENTKLEUR. In C staat de inhoud op de GRIJZE grond, en daarop haalt de
     accentkleur net geen 4,5 : 1 meer (de contrastcontrole meet hem tegen wit; een accentkleur die daar net 4,5 : 1
     haalt, gaf op --grond-zacht 4,3 : 1). Afgeleid, dus zonder letterlijke kleur; in het donkere thema de lichtere tint
     van de basis. */
  --accent-als-tekst: color-mix(in oklab, var(--accent) 82%, black);
}
@media (prefers-color-scheme: dark) {
  :root[data-stijl="c"]:not([data-thema="licht"]) {
    --accent-als-tekst: color-mix(in oklab, var(--accent) 55%, white);
  }
}
[data-stijl="c"] body { background: var(--grond-zacht); font-size: 0.875rem; line-height: 1.55; }
[data-stijl="c"] h1, [data-stijl="c"] h2, [data-stijl="c"] h3 { font-weight: var(--gewicht-kop); letter-spacing: 0; }
[data-stijl="c"] h1 { font-size: 1.75rem; line-height: 1.25; }
[data-stijl="c"] h2 { font-size: 1.25rem; line-height: 1.3; }
[data-stijl="c"] h3 { font-size: 1rem; line-height: 1.3; }
/* Niet op .knop-tweede (07-10-2026), zoals bij B: anders wint deze regel (0,2,2) van [data-stijl="c"] .knop-tweede
   (0,2,0) en staat "Verder winkelen" in het mandje in de accentkleur. Een lijst in :not(), dus nog steeds (0,2,2). */
[data-stijl="c"] main a:not(.knop, .knop-tweede) { color: var(--accent-als-tekst); }
[data-stijl="c"] .melding a:not(.knop) { color: inherit; }
[data-stijl="c"] .productkaart h3 a { color: var(--tekst); }
/* Het label van C: klein, in hoofdletters, iets uit elkaar. Voor de veldlabels, de kop van een tabel en een legende. */
[data-stijl="c"] label, [data-stijl="c"] th, [data-stijl="c"] legend, [data-stijl="c"] dl.gegevens dt,
[data-stijl="c"] .soortlabel, [data-stijl="c"] .zoekkop label {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-zacht);
}
[data-stijl="c"] .keuze, [data-stijl="c"] .keuze span { text-transform: none; letter-spacing: 0; font-size: 0.875rem;
                                                        font-weight: 400; }
[data-stijl="c"] .getal, [data-stijl="c"] .vanaf, [data-stijl="c"] .prijskaart-bedrag, [data-stijl="c"] .mandje-bedrag,
[data-stijl="c"] .plantabel-bedrag, [data-stijl="c"] .codelijst, [data-stijl="c"] .tf-geheim {
  font-family: var(--letter-mono); font-variant-numeric: tabular-nums;
}
/* Het bedrag in de vaste-breedteletter, de woorden eromheen niet: een kolomkop en "incl. btw" blijven Roboto. */
[data-stijl="c"] th.getal, [data-stijl="c"] .vanaf .klein { font-family: var(--letter-tekst); }

/* De servicebalk (blok `servicebalk`) met een streep in de merkkleur erboven. */
.servicebalk { background: var(--inkt); color: #ffffff; font-size: 0.8125rem; border-top: 4px solid var(--merk); }
.servicebalk-binnen { max-width: var(--breedte); margin: 0 auto; padding: 0.375rem 16px; min-height: 2.5rem; display: flex;
                      flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 1.5rem; }
.servicebalk-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.25rem; }
.servicebalk a { color: #ffffff; }
.servicebalk .mono { font-family: var(--letter-mono); font-variant-numeric: tabular-nums; }
.btw-aanduiding { background: #ffffff; color: var(--inkt); font-weight: 500; font-size: 0.75rem; line-height: 1.4;
                  padding: 0.25rem 0.625rem; border-radius: 4px; }

/* De kop met het zoekveld (blok `zoekkop`). */
[data-stijl="c"] .kop-binnen { min-height: 0; padding-block: 0.875rem; gap: 0.875rem 2rem; }
[data-stijl="c"] .merk img { height: 3.25rem; width: auto; }
.zoekkop { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.25rem; margin: 0; }
.zoekkop label { margin: 0; }
.zoekkop .zoekregel { gap: 0; }
.zoekkop input[type=search] { flex: 1 1 auto; min-width: 0; height: 2.5rem; padding: 0 0.75rem; font: inherit;
                              border: 1px solid var(--tekst-zacht); border-right: 0; border-radius: 4px 0 0 4px;
                              background: var(--grond); color: var(--tekst); }
.zoekkop .knop { border-radius: 0 4px 4px 0; height: 2.5rem; }
[data-stijl="c"] .kop-nav a:not(.knop) { color: var(--tekst); }
[data-stijl="c"] .kop-mandje { border: 1px solid var(--rand); border-radius: var(--straal); padding: 0.4rem 0.85rem; }

/* De knoppen: rechthoekig met een kleine straal, de tweede knop omlijnd en neutraal. */
[data-stijl="c"] .knop { border-radius: 4px; font-weight: 500; border: 1px solid var(--accent); padding: 0.55rem 1.1rem; }
[data-stijl="c"] .knop-klein { padding: 0.3rem 0.75rem; font-size: 0.8125rem; }
[data-stijl="c"] .knop-tweede { background: var(--grond); color: var(--tekst); border-color: var(--tekst-zacht); }
[data-stijl="c"] .knop-gevaar { background: transparent; color: var(--fout); border-color: var(--fout); }
[data-stijl="c"] input[type=text], [data-stijl="c"] input[type=email], [data-stijl="c"] input[type=password],
[data-stijl="c"] input[type=url], [data-stijl="c"] input[type=search], [data-stijl="c"] select {
  border-radius: 4px; border-color: var(--tekst-zacht);
}

/* Kaarten: wit op de grijze grond, met een lijn. */
[data-stijl="c"] main.inhoud { padding-top: 1.5rem; }
[data-stijl="c"] .kaart, [data-stijl="c"] .etalagefilter, [data-stijl="c"] .mandje-regel, [data-stijl="c"] .prijskaart {
  background: var(--grond); border: 1px solid var(--rand); border-radius: var(--straal); box-shadow: none;
}
[data-stijl="c"] .etalagefilter { padding: 1rem; align-self: start; }
[data-stijl="c"] .held { background: var(--grond); border: 1px solid var(--rand); border-radius: var(--straal);
                         padding: 1.5rem; }
/* De beloften als rij met haarlijnen tussen de cellen (blok `beloften`). */
[data-stijl="c"] .beloften { display: flex; flex-wrap: wrap; gap: 1px; margin: 0 0 1.5rem; background: var(--rand);
                             border: 1px solid var(--rand); border-radius: var(--straal); overflow: hidden; }
[data-stijl="c"] .beloften li { flex: 1 1 13rem; background: var(--grond); padding: 0.75rem 1rem; color: var(--tekst); }
[data-stijl="c"] .beloften li::before { content: "\2713\00a0"; color: var(--accent-als-tekst); font-weight: 700; }

/* De producten als rijen in één kaart (blok `productrijen`): beeld links, tekst met de plannen rechts. */
[data-stijl="c"] .productraster { display: block; background: var(--grond); border: 1px solid var(--rand);
                                  border-radius: var(--straal); overflow: hidden; }
[data-stijl="c"] .productkaart { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; padding: 1.25rem; border: 0;
                                 border-top: 1px solid var(--rand); border-radius: 0; box-shadow: none; overflow: visible; }
[data-stijl="c"] .productkaart:first-child { border-top: 0; }
[data-stijl="c"] .productkaart-beeld { flex: 0 0 10.5rem; align-self: flex-start; border: 1px solid var(--rand);
                                       border-radius: 4px; overflow: hidden; }
[data-stijl="c"] .productkaart-beeld img { height: 6.5625rem; max-height: none; object-fit: cover; object-position: left top; }
[data-stijl="c"] .productkaart-tekst { flex: 1 1 22rem; min-width: 0; padding: 0; gap: 0.6rem; }
[data-stijl="c"] .soortlabel { background: none; border: 0; padding: 0; border-radius: 0; }
.productkaart-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; }
.productcode { font-family: var(--letter-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em;
               color: var(--tekst-zacht); background: var(--grond-zacht); border: 1px solid var(--rand); border-radius: 3px;
               padding: 0.05rem 0.4rem; }
.plantabel-kort { font-size: 0.8125rem; }
.plantabel-kort th, .plantabel-kort td { padding: 0.35rem 0.5rem 0.35rem 0; }
.plantabel-kort .getal { padding-right: 0; }
[data-stijl="c"] .productkaart-voet { padding-top: 0.25rem; }
/* Met de plannen in de tabel is de vanaf-prijs eronder een herhaling; die valt dan weg. */
[data-stijl="c"] .productkaart-tekst:has(.plantabel-kort) .productkaart-voet .vanaf { display: none; }
[data-stijl="c"] .productkaart-tekst:has(.plantabel-kort) .productkaart-voet { justify-content: flex-end; }

/* De etalage: de filterkolom en de uitslag met de keuzelijst om te sorteren erboven (blok `sorteren`). */
.etalage-kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem;
               padding: 0.75rem 1.25rem; margin-bottom: 0.75rem; background: var(--grond); border: 1px solid var(--rand);
               border-radius: var(--straal); }
.etalage-kop p { margin: 0; }
.etalage-sorteer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.etalage-sorteer label { margin: 0; }
.etalage-sorteer select { width: auto; padding: 0.3rem 0.5rem; }
[data-stijl="c"] .etalage-uitslag .productraster { margin-top: 0; }

/* De productpagina: de plannen als tabel in een kaart (blok `plantabel`).
   ⚠️ DE KAART SCHUIFT, ZE KNIPT NIET AF. Het element draagt ook `.schuif`, want de tabel is breder dan een telefoon
   (40rem). Tot 07-10-2026 stond hier `overflow: hidden`: even zwaar als `.schuif` en later, dus die won, en op 375 px
   vielen het aantal en de knop Bestellen onbereikbaar buiten de kaart. Een klant op een telefoon kon in C niet
   bestellen, en geen breedtemeting zag het (afgeknipte inhoud laat de pagina niet schuiven). Met `overflow-x: auto`
   houden de hoeken hun ronding; `tests/stijlen_weergave_test.php` eist dat geen regel een `.schuif` afknipt en
   `tools/dev/stijlmeter.py` meet afgeknipte knoppen en velden in de browser. */
.plantabel-kaart { background: var(--grond); border: 1px solid var(--rand); border-radius: var(--straal); overflow-x: auto;
                   margin: 0.75rem 0 1rem; }
.plantabel { min-width: 40rem; font-size: 0.875rem; }
.plantabel th, .plantabel td { padding: 0.75rem; vertical-align: middle; }
.plantabel thead th, .plantabel thead td { background: var(--grond-zacht); white-space: nowrap; }
.plantabel tbody th { font-weight: 500; color: var(--tekst); text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.plantabel tbody tr:last-child th, .plantabel tbody tr:last-child td { border-bottom: 0; }
.plantabel-label { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; font-weight: 500; padding: 0.05rem 0.5rem;
                   border-radius: 999px; background: var(--accent); color: var(--accent-tekst); }
.plantabel-ander { display: block; font-size: 0.75rem; color: var(--tekst-zacht); }
.plantabel-aantal { width: 4rem; padding: 0.4rem 0.5rem; border: 1px solid var(--tekst-zacht); border-radius: 4px;
                    background: var(--grond); color: var(--tekst); font: inherit; }
.plantabel-formulier { margin: 0; }

/* De factuur als document (blok `factuurdocument`): wit papier met een kleine straal en ruime marge, de dubbele
   zwarte regels onder de kop van de tabel en boven het eindtotaal. Geen schaduw. */
[data-stijl="c"] .factuurdocument { background: var(--grond); border: 1px solid var(--rand); border-radius: 2px;
                                    padding: clamp(1.25rem, 4vw, 2.5rem); }
[data-stijl="c"] .factuurdocument thead th { border-bottom: 2px solid var(--tekst); }
[data-stijl="c"] .factuurdocument .u-max-28-rechts tr:last-child td { border-top: 2px solid var(--tekst); border-bottom: 0; }
[data-stijl="c"] .factuurdocument .factuur-partijen p:first-child { font-size: 0.6875rem; font-weight: 500;
                                                                   letter-spacing: 0.06em; text-transform: uppercase; }

/* De voortgangsregel en Zo werkt bestellen. */
[data-stijl="c"] .voortgang ol { gap: 0.4rem 1.5rem; }
[data-stijl="c"] .voortgang .voortgang-huidig { border-bottom-color: var(--accent); }
[data-stijl="c"] .zo-werkt ol { gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: 4px;
                                overflow: hidden; }
[data-stijl="c"] .zo-werkt li { background: var(--grond); border: 0; border-radius: 0; }
[data-stijl="c"] .zo-werkt li::before { content: counter(stap, decimal-leading-zero); background: none; border: 0;
                                        width: auto; height: auto; place-items: start; font-family: var(--letter-mono);
                                        font-size: 0.75rem; color: var(--tekst-zacht); }

/* De voet: de inktkleur, drie blokken. */
[data-stijl="c"] .voet { background: var(--inkt); color: #ffffff; border-top: 0; padding: 1.75rem 0; margin-top: 2rem;
                         font-size: 0.8125rem; }
[data-stijl="c"] .voet a { color: #ffffff; }

/* ------------------------------------------------------------ stijl D: Merk
   Redactioneel: een held over de volle breedte in de accentkleur met een grote schreefletter, het uitgelichte product als
   spread, daarna de producten als afwisselende rijen met grote beelden. Ronde knoppen, randen als ring, ruim wit. */
:root[data-stijl="d"] {
  --straal: 6px;
  --schaduw: 0 0 0 1px var(--rand), 0 10px 30px rgba(22, 25, 34, 0.06);
  --breedte: 75rem;
  --letter-tekst: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --letter-kop: "Kop D", Georgia, "Times New Roman", serif;
  --gewicht-kop: 400;
  /* DE ACCENTKLEUR ALS TEKST IS DONKERDER, zoals in C: het uitgelichte product staat op --grond-zacht, en daarop haalt
     het bovenlabel in de accentkleur net geen 4,5 : 1 (gemeten 4,3 : 1 met een accentkleur die tegen wit net 4,5 : 1
     haalt). Afgeleid, zonder letterlijke kleur; in het donkere thema de lichtere tint van de basis. */
  --accent-als-tekst: color-mix(in oklab, var(--accent) 82%, black);
}
@media (prefers-color-scheme: dark) {
  :root[data-stijl="d"]:not([data-thema="licht"]) {
    --schaduw: 0 0 0 1px var(--rand), 0 10px 30px rgba(0, 0, 0, 0.35);
    --accent-als-tekst: color-mix(in oklab, var(--accent) 55%, white);
  }
}
[data-stijl="d"] body { line-height: 1.7; }
[data-stijl="d"] h1, [data-stijl="d"] h2, [data-stijl="d"] h3 { font-weight: var(--gewicht-kop); }
[data-stijl="d"] h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.5rem); line-height: 1.12; letter-spacing: -0.01em; }
[data-stijl="d"] h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); line-height: 1.2; letter-spacing: 0; }
[data-stijl="d"] h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 600; }
[data-stijl="d"] main a:not(.knop) { color: var(--accent-als-tekst); }
[data-stijl="d"] .melding a:not(.knop) { color: inherit; }
[data-stijl="d"] .productkaart h3 a, [data-stijl="d"] .uitgelicht h3 a { color: var(--tekst); text-decoration: none; }
[data-stijl="d"] .kop-binnen { min-height: 5rem; }
[data-stijl="d"] .merk img { height: 3.5rem; width: auto; }
[data-stijl="d"] .merk-naam { font-family: var(--letter-kop); font-weight: 600; font-size: 1.35rem; }
[data-stijl="d"] .kop-nav { gap: 0.75rem 1.75rem; }
[data-stijl="d"] .kop-nav a:not(.knop) { color: var(--tekst); }

/* De knoppen: rond, gevuld in de accentkleur; de tweede knop een ring in de accentkleur. */
[data-stijl="d"] .knop { border-radius: 999px; font-weight: 500; padding: 0.75rem 1.75rem; }
[data-stijl="d"] .knop-klein { padding: 0.45rem 1.1rem; }
[data-stijl="d"] .knop-tweede { background: var(--grond); color: var(--accent-als-tekst); border: 0;
                                box-shadow: inset 0 0 0 1.5px var(--accent-als-tekst); }
[data-stijl="d"] .knop-gevaar { background: transparent; color: var(--fout); border: 1px solid var(--fout); }
/* Het soortlabel als bovenlabel in de accentkleur. */
[data-stijl="d"] .soortlabel { background: none; border: 0; padding: 0; border-radius: 0; color: var(--accent-als-tekst);
                               letter-spacing: 0.12em; font-size: 0.75rem; }

/* De redactionele held (blok `held_redactioneel`): over de volle breedte in de accentkleur, zonder dat de pagina
   zijwaarts gaat schuiven. De vlakke kleur buiten de inhoud is een schaduw die met clip-path tot de hoogte van de held
   wordt afgesneden; een schaduw telt niet mee in de breedte van de pagina, een negatieve marge van 50vw wel. */
[data-stijl="d"] .held {
  background: var(--accent);
  color: var(--accent-tekst);
  box-shadow: 0 0 0 100vmax var(--accent);
  clip-path: inset(0 -100vmax);
  margin: -2.5rem 0 0;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.75rem, 6vw, 5.5rem);
  gap: 2rem 4rem;
}
@media (min-width: 52rem) { [data-stijl="d"] .held:has(.held-merk) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
[data-stijl="d"] .held h1, [data-stijl="d"] .held p { color: var(--accent-tekst); }
[data-stijl="d"] .held-intro { font-size: 1.15rem; }
[data-stijl="d"] .held a:not(.knop) { color: var(--accent-tekst); text-underline-offset: 4px; font-weight: 500; }
[data-stijl="d"] .held .knop { background: var(--accent-tekst); color: var(--accent); }
.held-merk { display: flex; justify-content: flex-end; }
.held-merk img { display: block; width: 100%; max-width: 22rem; height: auto; filter: brightness(0) invert(1); }

/* Het uitgelichte product als spread (blok `uitgelicht`): beeld en tekst naast elkaar op een licht vlak. */
.uitgelicht { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem 4rem; margin: 3.5rem 0 4rem;
              padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--grond-zacht); border-radius: var(--straal); }
.uitgelicht-beeld { flex: 1.5 1 26rem; min-width: 0; display: block; }
.uitgelicht-beeld img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 760; object-fit: cover;
                        object-position: top; border-radius: var(--straal); box-shadow: var(--schaduw); }
.uitgelicht-tekst { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
                    gap: 1rem; }
.uitgelicht-tekst h3 { margin: 0; font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1.05; font-weight: 600; }
.uitgelicht-tekst p { margin: 0; }
.uitgelicht-prijs { align-self: stretch; display: flex; flex-wrap: wrap; align-items: flex-end;
                    justify-content: space-between; gap: 1rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rand); }
.uitgelicht-prijs .vanaf { font-family: var(--letter-kop); font-size: 2.25rem; font-weight: 400; line-height: 1.1; }

/* De producten als afwisselende rijen: beeld links en rechts om en om, gescheiden door een lijn. */
[data-stijl="d"] .productraster { display: flex; flex-direction: column; gap: 3.5rem; margin: 1.5rem 0 4rem; }
[data-stijl="d"] .productkaart { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2rem 4rem; border: 0;
                                 border-radius: 0; box-shadow: none; background: none; overflow: visible; }
[data-stijl="d"] .productkaart:nth-child(even) { flex-direction: row-reverse; }
[data-stijl="d"] .productkaart + .productkaart { border-top: 1px solid var(--rand); padding-top: 3.5rem; }
[data-stijl="d"] .productkaart-beeld { flex: 1.2 1 26rem; min-width: 0; border: 0; background: none; }
[data-stijl="d"] .productkaart-beeld img { height: auto; max-height: none; aspect-ratio: 1440 / 760; object-fit: cover;
                                           object-position: top; border-radius: var(--straal); box-shadow: var(--schaduw); }
[data-stijl="d"] .productkaart-tekst { flex: 1 1 20rem; padding: 0; gap: 0.9rem; }
[data-stijl="d"] .productkaart h3 { font-size: clamp(1.75rem, 1.5vw + 1rem, 2.375rem); line-height: 1.1; font-weight: 600; }
[data-stijl="d"] .vanaf { font-family: var(--letter-kop); font-size: 1.75rem; font-weight: 400; }
[data-stijl="d"] .vanaf .klein { font-family: var(--letter-tekst); }

/* De productpagina: de naam groot in de schreefletter, de plannen als kaarten met een ring; het uitgelichte plan met
   een streep van 4px in de accentkleur erboven. */
[data-stijl="d"] .productpagina h1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); line-height: 1.02; font-weight: 600;
                                     letter-spacing: -0.015em; }
[data-stijl="d"] .product-samenvatting { font-family: var(--letter-kop); font-size: 1.35rem; color: var(--tekst); }
[data-stijl="d"] .productbeelden img { border: 0; box-shadow: var(--schaduw); }
[data-stijl="d"] .prijskaart { border: 0; box-shadow: var(--schaduw); padding: 1.5rem 1.6rem; }
[data-stijl="d"] .prijskaart-uitgelicht { border-top: 4px solid var(--accent); }
[data-stijl="d"] .prijskaart h3 { font-size: 1.5rem; font-weight: 600; }
[data-stijl="d"] .prijskaart-bedrag { font-family: var(--letter-kop); font-size: 2.375rem; font-weight: 400; line-height: 1.05; }
[data-stijl="d"] .kenmerken li::before, [data-stijl="d"] .voordelen li::before { color: var(--accent-als-tekst); }

/* Kaarten: wit met een ring in plaats van een lijn; formulieren en het mandje. */
[data-stijl="d"] .kaart, [data-stijl="d"] .mandje-regel { background: var(--grond); border: 0; box-shadow: var(--schaduw); }
[data-stijl="d"] input[type=text], [data-stijl="d"] input[type=email], [data-stijl="d"] input[type=password],
[data-stijl="d"] input[type=url], [data-stijl="d"] input[type=search], [data-stijl="d"] select { border-radius: 4px; }

/* De voortgangsregel: het nummer cursief in de schreefletter. */
[data-stijl="d"] .voortgang li::before { font-family: var(--letter-kop); font-style: italic; color: var(--accent-als-tekst); }

/* Zo werkt bestellen: een vlak in de inktkleur over de volle breedte, met witte tekst. */
[data-stijl="d"] .zo-werkt { background: var(--inkt); color: #ffffff; box-shadow: 0 0 0 100vmax var(--inkt);
                             clip-path: inset(0 -100vmax); padding: clamp(2.5rem, 6vw, 5rem) 0; margin: 2rem 0 0; }
[data-stijl="d"] .zo-werkt h2 { color: #ffffff; }
[data-stijl="d"] .zo-werkt li { background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0;
                                padding: 1.25rem 0 0; }
[data-stijl="d"] .zo-werkt li::before { background: none; border: 0; width: auto; height: auto; place-items: start;
                                        font-family: var(--letter-kop); font-style: italic; font-size: 2.25rem;
                                        font-weight: 400; line-height: 1; color: #ffffff; }
[data-stijl="d"] .zo-werkt li strong { color: #ffffff; }
[data-stijl="d"] .zo-werkt li span { color: #ffffff; }

/* De voet: de inktkleur, de naam in de schreefletter. */
[data-stijl="d"] .voet { background: var(--inkt); color: #ffffff; border-top: 0; padding: 3rem 0 2.5rem; margin-top: 4rem; }
[data-stijl="d"] .voet a { color: #ffffff; }
[data-stijl="d"] .voet-winkel strong { font-family: var(--letter-kop); font-size: 1.35rem; font-weight: 400; }