/*
  Matchwijzer, merkgids v2 in code.
  Kernpalet staat vast op alle niches; --accent wordt per niche gezet vanuit Quiz.ThemeJson.
  Eén accent per scherm, goud alleen voor fijne details.
*/

:root {
  --paper: #F6F2EC;
  --card: #FFFFFF;
  --card-2: #FCFAF6;
  --ink: #1C1A17;
  --navy: #1E2A44;
  --graphite: #6B655C;
  --line: #E7E0D4;
  --gold: #B08A46;
  --accent: #1E2A44;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 68ch;
  --radius: 4px;

  /* De zijmarge van elke pagina, als variabele omdat de kaartenrijen hem nodig hebben: die lopen
     op een telefoon bewust door tot de schermrand en trekken zichzelf met een negatieve marge van
     precies deze breedte uit de kolom. Twee losse getallen die gelijk moeten blijven lopen vroeg
     of laat uit elkaar. */
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

/* Het hidden-attribuut moet altijd winnen. De browser geeft het display: none mee, maar dat is de
   zwakste regel die er is: elke eigen display (de flex op .guide-index li bijvoorbeeld) overruled
   hem, en dan staat een verborgen element gewoon in beeld. Dit is de enige plek in dit bestand met
   !important, en dit is precies waarvoor het bedoeld is. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }

/* ---------- Kop en voet ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 18px; padding-bottom: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand-name {
  font-family: var(--serif); font-weight: 500; font-size: 27px;
  letter-spacing: -0.5px; color: var(--navy);
}
.brand-name em { font-style: italic; color: var(--gold); }
.site-nav { display: flex; gap: 22px; font-size: 14.5px; }
.site-nav a { color: var(--graphite); text-decoration: none; }
.site-nav a:hover { color: var(--navy); }

/* Waar je bent, in het menu. Navy in plaats van grijs plus een zwaarder gewicht: dat leest als
   "hier sta je" zonder er een extra kleur bij te halen, en het werkt ook als je geen kleur ziet.
   Het gouden streepje eronder doet hetzelfde nog eens voor wie snel scant.

   aria-current als haak en niet een eigen class: het attribuut moet er toch staan voor een
   schermlezer, en dan is een tweede signaal in de HTML alleen iets wat uit de pas kan lopen. */
.site-nav a[aria-current] {
  color: var(--navy); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* De sectie waarin je zit, niet de pagina zelf: "Categorieën" terwijl je op /categorie/dieren/
   staat. Zelfde kleur, geen streep, want het is een zwakker signaal. */
.site-nav a[aria-current="true"] { box-shadow: none; }

.site-footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  background: var(--card); color: var(--graphite); font-size: 13.5px;
}
.site-footer .wrap { padding-top: 28px; padding-bottom: 40px; }

/* ---------- Typografie ---------- */

h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.14; letter-spacing: -0.6px; color: var(--navy);
}
h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.8vw, 30px);
  line-height: 1.25; letter-spacing: -0.3px; color: var(--navy); margin-top: 44px;
}
h3 {
  font-family: var(--sans); font-weight: 600; font-size: 18px;
  color: var(--ink); margin-top: 28px;
}
p + p, ul + p, p + ul, p + h3 { margin-top: 16px; }
.prose ul, .prose ol { margin-top: 14px; padding-left: 22px; }
.prose li { margin: 8px 0; }
.prose h2 + p, .prose h3 + p { margin-top: 12px; }

.eyebrow {
  font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.lead { font-size: 19px; color: var(--graphite); margin-top: 16px; max-width: var(--measure); }
.muted { color: var(--graphite); }
.small { font-size: 13.5px; }

.rule { height: 1px; background: var(--line); margin: 48px 0; border: 0; }
.rule-gold {
  height: 1px; border: 0; margin: 48px 0; opacity: 0.7;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Kruimelpad ---------- */

/* Het pad blijft op één regel, ook op een smal scherm. Bij wrappen begon een nieuwe regel
   met een losse scheidingsstreep, en dat las als een tweede, halve navigatie. De laatste
   kruimel krijgt de ellips: die titel staat er als H1 toch al voluit onder.
   Alleen padding-top, geen shorthand: die overschreef de 24px zijpadding van .wrap, waardoor
   het pad tegen de schermrand plakte terwijl de H1 eronder wél inspringt. */
.breadcrumbs { font-size: 13.5px; color: var(--graphite); padding-top: 20px; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: nowrap; min-width: 0;
}
.breadcrumbs li { display: flex; align-items: center; min-width: 0; }
.breadcrumbs li:not(:last-child) { flex: none; }
.breadcrumbs li:last-child { flex: 0 1 auto; }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line); flex: none; }
.breadcrumbs a, .breadcrumbs [aria-current] {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumbs a { color: var(--graphite); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 2px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; min-height: 48px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(0.93); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); }
.btn-block { width: 100%; }

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

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.card-quiet { background: var(--card-2); }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Kaartenrij: raster op een breed scherm, veegrij op een smal ----------
   Een rij van vier keuzehulpkaarten wordt op een telefoon vier schermen scrollen voordat je bij
   de volgende sectie bent. Wie dan drie categorieën langs wil, geeft het op. Als veegrij staat
   dezelfde rij op één schermhoogte en blijft de rest van de pagina in beeld.

   Waarom niet gewoon minder kaarten tonen: de kaarten zíjn de pagina. Er staan er hoogstens drie
   per categorie en die zijn met de hand gekozen; er eentje afhalen kost de bezoeker een keuze en
   levert alleen ruimte op.

   De klasse staat naast .grid en niet in plaats daarvan: op een breed scherm blijft het gewoon
   het raster dat het was, en dit blok grijpt alleen in onder de breekpunt. Zie het media-blok
   onderaan dit bestand voor de veegstand zelf. */
.card-rail { scroll-padding-left: var(--gutter); }

.link-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.link-card:hover { border-color: var(--accent); color: inherit; }
.link-card h3 { margin-top: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy); }
.link-card p { margin-top: 8px; font-size: 14.5px; color: var(--graphite); }
/* Het onderwerp boven de titel: "Hond", "Kat". Vervangt de tussenkopjes per diersoort, en
   houdt de kaarten van één categorie in één raster in plaats van in rijtjes per soort. */
.card-subject {
  margin-top: 0 !important; margin-bottom: 7px;
  font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
.card-subject + h3 { margin-top: 0; }

/* ---------- Line-iconen ----------
   Laag 1 uit de beeldrichtlijn: functioneel beeld, altijd in de accentkleur van zijn niche. Ze
   dragen geen betekenis die er niet ook in tekst staat — ze zijn er zodat je een rij kaarten kunt
   scannen zonder te lezen.

   De kleur komt uit currentColor, dus de view zet één keer een color en het icoon volgt. Vaste
   width en height op het element zelf, want een svg zonder maten neemt de ruimte pas in als hij
   getekend is en dat is een layout-sprong. */

.icon { display: block; flex: none; }

/* Het icoon op een keuzehulpkaart staat op de regel van het onderwerp ("Hond"), niet erboven:
   samen zijn ze één bijschrift, en twee losse regels boven de titel duwen de kop naar beneden. */
.card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
/* De kleur staat op .card-head, maar .link-card p zet verderop expliciet graphite en dat is
   specifieker dan overerven. Zonder deze regel wordt "Hond" grijs in plaats van accentkleurig. */
.link-card .card-head .card-subject { margin: 0; color: inherit; }

/* In de kop van een sectie of een categoriepagina vervangt het icoon de gekleurde stip. Diezelfde
   kleur, meer herkenning, en het is nog steeds één teken naast de kop.
   Een eigen omhulsel draagt de kleur: de kop bevat ook een link, en .plain-link erft zijn kleur. */
.sec-icon { display: flex; flex: none; }

/* Op de compacte categorietegel zat een gekleurd vierkantje. Het icoon neemt precies die plek in,
   met dezelfde afmeting, zodat het raster niet verspringt. */
.category-icon {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--card-2); border: 1px solid var(--line);
}

/* ---------- Overzichten: alle categorieën, alle gidsen ----------
   Compacter dan .link-card, en met opzet. Op een overzicht van twintig categorieën telt de
   naam en de telling; een beschrijving per tegel maakt er een muur van waar je doorheen moet
   lezen in plaats van scannen. */

/* auto-fill en niet auto-fit: bij één categorie zou auto-fit die tegel over de hele breedte
   uitrekken, en dan staat er een banner waar een tegel hoort. */
.category-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.category-card {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 17px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
}
.category-card:hover { border-color: var(--accent); color: inherit; }
.category-dot { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.category-name { display: block; font-weight: 600; font-size: 15px; color: var(--navy); }
.category-count { display: block; font-size: 12.5px; color: var(--graphite); margin-top: 2px; }

/* Een gids is een leestitel, dus een lijst en geen kaart. De niche ervoor als vaste kolom,
   zodat je met je oog langs één rand naar beneden kunt lopen. */
.guide-index { list-style: none; padding: 0; margin-top: 16px; }
.guide-index li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.guide-index-niche {
  flex: none; min-width: 92px; font-size: 11.5px; letter-spacing: 0.5px;
  text-transform: uppercase; font-weight: 600; color: var(--accent);
}
.guide-index a { font-size: 15px; color: var(--ink); text-decoration: none; font-weight: 500; }
.guide-index a:hover { color: var(--navy); text-decoration: underline; }
/* De leestijd staat rechts uitgelijnd langs één rand, zodat hij te negeren is. Hij hoort bij de
   titel en niet bij de rij eronder, dus hij mag nooit als eerste opvallen. */
.guide-index-time {
  margin-left: auto; flex: none; font-size: 12.5px; color: var(--graphite);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- Zoeken en filteren boven een lang overzicht ----------
   Staat op /gidsen/ en verschijnt pas met JavaScript: zonder script zou het een zoekveld zijn dat
   niets doet. De lijst eronder is de pagina; dit is alleen een kortere weg erdoorheen. */

.guide-tools { margin-top: 26px; }
.guide-tools input {
  width: 100%; padding: 14px 17px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card);
  color: var(--ink); min-height: 52px;
}
.guide-tools input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* De chips in de hero staan gecentreerd onder een gecentreerde kop; hier staan ze links onder een
   zoekveld dat de volle breedte pakt, en dan hoort de rij aan dezelfde marge te beginnen.
   Via .guide-tools en niet via een losse class: .chips staat verderop in dit bestand en zou een
   los .chips-start met dezelfde specificiteit gewoon overrulen. */
.guide-tools .chips { justify-content: flex-start; margin-top: 14px; }
/* Een filterknop is een button en geen link: hij gaat nergens heen. De chip-stijl blijft, maar een
   button erft standaard geen lettertype en heeft zijn eigen achtergrondtekening. */
button.chip { font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.is-active:hover { color: #fff; }

/* Een streep in de accentkleur onder de categoriekop: bij tien secties onder elkaar is dat het
   enige wat de grens tussen twee categorieën direct zichtbaar maakt. */
.sec-head-rule { border-bottom: 2px solid var(--accent); padding-bottom: 9px; }
.sec-count { font-size: 13px; color: var(--graphite); white-space: nowrap; }

/* De regel onder een kaarttitel: leestijd en niche. Kleiner dan de kaarttekst, want het is
   bijschrift en geen inhoud. */
.card-meta { margin-top: 10px; font-size: 13px; color: var(--graphite); }

/* ---------- Categoriepagina ----------
   De kop staat in een eigen vlak met de accentkleur van de categorie erboven. Alle kaarten
   eronder dragen die kleur al op hun bovenrand; zonder dit blok opent de pagina met een reeks
   losse strepen en geen enkele die zegt waar je bent. */

.cat-hero {
  background: var(--card); border: 1px solid var(--line);
  border-top: 4px solid var(--accent); border-radius: var(--radius);
  padding: 30px 32px; margin-top: 12px;
}
.cat-hero h1 { margin-top: 8px; }
/* Icoon en bovenschrift op één regel, met het icoon iets groter dan de tekst: dat is het teken
   dat opvalt, en "Categorie" is er alleen het bijschrift bij. */
.cat-hero-head { display: flex; align-items: center; gap: 10px; }
.cat-hero .lead { font-size: 17px; }
/* De telling: klein, grijs, met de getallen in de donkere kleur. Het is bijschrift bij de kop en
   mag de kop niet beconcurreren, maar de aantallen zijn wel het antwoord op "valt hier iets te
   halen" en die mogen opvallen. */
.cat-meta { margin-top: 16px; font-size: 13.5px; color: var(--graphite); }
.cat-meta strong { color: var(--navy); font-weight: 600; }
.cat-meta .sep { color: var(--line); margin: 0 5px; }

/* Tussenkopje per onderwerp boven een groep kaarten: "Hond", "Kat", "Algemeen". Bewust klein en
   in kapitalen — het is een scheiding en geen tweede kop, want de H2 erboven is de kop. */
.subject-head {
  margin: 26px 0 12px; font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase;
  font-weight: 600; color: var(--graphite);
}
.sec-head + .subject-head { margin-top: 6px; }

/* auto-fill en niet auto-fit: bij een groep van één zou auto-fit die kaart over de volle breedte
   uitrekken, en dan staat er een banner waar een kaart hoort. Eén kat naast drie honden is op een
   categoriepagina met tussenkopjes het normale geval. */
.niche-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* De korte versie van de onafhankelijkheidsgarantie. Eén regel, want de bezoeker staat op het punt
   een test te doen bij een site die hij niet kent en dit is het antwoord op die ene vraag. */
.trustline {
  margin-top: 40px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 18px 22px; font-size: 14px; color: var(--graphite);
}
.trustline strong { color: var(--navy); }
.trustline a { color: var(--gold); font-weight: 600; white-space: nowrap; }

/* ---------- De uitweg onderaan een overzicht ----------
   Horizontaal en niet als kaart: een blok met een kop, een regel en een knop naast elkaar leest
   als een afsluiting, terwijl een kaart eruitziet als nog een ding om te lezen. */
.crossbar {
  margin-top: 48px; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 22px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
.crossbar-title { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy); }
.crossbar .muted { margin-top: 6px; font-size: 14.5px; }
.crossbar .btn { flex: none; }

.tag {
  display: inline-block; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase;
  font-weight: 600; color: var(--graphite); border: 1px solid var(--line);
  border-radius: 2px; padding: 3px 9px;
}

/* ---------- Quiz ---------- */

/* De quizstap heeft een eigen, smallere kolom. Stond als inline-stijl op de view, en dan is er
   geen manier om hem op een telefoon krapper te zetten: een inline-stijl wint van elk media-blok. */
.quiz-page { padding-top: 36px; max-width: 760px; }
.quiz-note { margin-top: 20px; text-align: center; }

.quiz-embed {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; border-top: 3px solid var(--accent);
  /* Vaste minimumhoogte houdt de layout stil terwijl de quiz laadt (CLS). */
  min-height: 260px;
}
.quiz-embed h2 { margin-top: 0; }

.progress {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--graphite); margin-bottom: 22px;
}
.progress-track { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
/* display: block is hier geen opsmuk maar de kern: het is een span, en een inline
   element negeert width en height, waardoor de balk nooit vulde. */
.progress-bar { display: block; height: 100%; background: var(--accent); }

.question { font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--navy); line-height: 1.25; }
.question-help { color: var(--graphite); font-size: 14.5px; margin-top: 10px; }

/* ---------- Hoeveel antwoorden mogen ----------
   Twee keer verteld, met opzet: in woorden boven de lijst en in de vorm van het vakje voor elk
   antwoord. Een bezoeker die de regel overslaat ziet aan het rondje of hokje nog steeds waar hij
   aan toe is, en wie het vakje niet als teken herkent leest de regel. */

.choice-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 0; font-size: 14px; color: var(--graphite);
}
.choice-hint-mark {
  flex: none; width: 15px; height: 15px;
  border: 1.5px solid var(--graphite); background: var(--card-2);
}
.choice-hint-single .choice-hint-mark { border-radius: 50%; }
.choice-hint-multi .choice-hint-mark { border-radius: 3px; }

.options { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.option { display: block; }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option > span {
  display: block; padding: 15px 18px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--card-2); cursor: pointer; font-size: 16px;
}
.option:hover > span { border-color: var(--accent); }
.option input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Het vakje voor het antwoord. Rond bij één keuze, vierkant bij meerkeuze — dat is de vorm die
   elk formulier op internet gebruikt, dus die hoeft de bezoeker niet te leren.
   align-items: flex-start houdt het vakje op de eerste regel staan bij een antwoord dat over
   twee regels loopt; centreren zou het bij een lang antwoord halverwege laten zweven. */
.option-label { display: flex; align-items: flex-start; gap: 12px; }
.option-mark {
  flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--line); background: var(--card);
  transition: border-color .12s ease, background-color .12s ease;
}
.options-single .option-mark { border-radius: 50%; }
.options-multi .option-mark { border-radius: 4px; }
.option:hover .option-mark { border-color: var(--accent); }

/* De stip en het vinkje zitten er altijd, alleen onzichtbaar tot je kiest. Zo verandert bij het
   aanvinken niets aan de maatvoering en verspringt de regel niet. */
.option-mark::after {
  content: ""; position: absolute; opacity: 0; transition: opacity .12s ease;
}
.options-single .option-mark::after {
  inset: 3px; border-radius: 50%; background: var(--accent);
}
.options-multi .option-mark::after {
  left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.option input:checked + span .option-mark { border-color: var(--accent); }
.options-multi .option input:checked + span .option-mark { background: var(--accent); }
.option input:checked + span .option-mark::after { opacity: 1; }

/* ---------- Beeld-antwoorden ----------
   Twee kolommen, ook op een telefoon: bij beeld is naast elkaar vergelijken de hele reden dat je
   beeld gebruikt, en onder elkaar wordt het weer een lijst met plaatjes erbij.

   De selectie ziet er hetzelfde uit als bij een tekstantwoord — dezelfde rand in de accentkleur.
   Wat je aanwijst moet er hetzelfde uitzien, of er nu een foto in staat of niet. */

.options-image { grid-template-columns: 1fr 1fr; gap: 12px; }
.option-image > span { padding: 0; overflow: hidden; height: 100%; }
/* Vaste verhouding op de tegel zelf: de foto vult hem en wordt bijgesneden in plaats van
   uitgerekt, en de rij blijft recht ook als de redactie ooit een afwijkend formaat aanlevert. */
.option-image img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; background: var(--card-2);
}
/* Bij een beeldtegel staat het vakje in de tekstbalk eronder, op dezelfde plek als bij een
   tekstantwoord: links vóór het label. Iets kleiner, omdat de balk zelf lager is. */
.option-image .option-label { padding: 12px 14px; font-size: 15px; align-items: center; gap: 10px; }
.option-image .option-mark { width: 18px; height: 18px; margin-top: 0; }
.options-image.options-multi .option-mark::after { left: 5px; top: 1px; }

.slider-row { margin-top: 26px; display: grid; gap: 10px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent); height: 32px; }
.slider-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--graphite); }

.quiz-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.field-error { color: #9a5a4a; font-size: 14px; margin-top: 14px; }

/* ---------- Even rekenen ----------
   Het schermpje tussen de laatste vraag en de uitslag. Zie de toelichting in Quiz/Result.cshtml:
   het rekenwerk is al klaar, dit is het moment waarop de bezoeker ziet dát er iets met zijn
   antwoorden gebeurde.

   Twee dingen zitten er met opzet in de CSS en niet in de JavaScript. Het verschijnen hangt aan
   html.js, dus zonder script staat er niets over de uitslag heen. En het verdwijnen is een
   animatie die eindigt op visibility: hidden, dus het gaat ook weg als matchwijzer.js niet laadt.
   JavaScript doet hier alleen wat CSS niet kan zien: de terugknop.

   Alle tijden hieronder tellen op tot dezelfde 1700ms. Verander je er één, verander ze dan
   allemaal — de balk, de stappen en het uitfaden horen samen af te lopen. */

.result-loader { display: none; }

html.js .result-loader {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: var(--paper);
  animation: mw-loader-out 300ms ease 1700ms forwards;
}

@keyframes mw-loader-out {
  /* visibility en niet display: alleen visibility is animeerbaar, en een onzichtbaar element
     vangt geen kliks meer. Zonder deze regel blijft er na het uitfaden een doorzichtige plaat
     over de hele pagina liggen. */
  to { opacity: 0; visibility: hidden; }
}

.result-loader-inner { display: grid; justify-items: center; gap: 14px; text-align: center; }

/* Een naald die zoekt en niet een wiel dat draait: hij schiet door en komt terug op het noorden.
   Dat is hetzelfde merkmerk als in de kop, en het leest als kiezen in plaats van als wachten. */
.result-loader-mark { animation: mw-loader-seek 1500ms cubic-bezier(0.5, 0, 0.3, 1) infinite; }

@keyframes mw-loader-seek {
  0%   { transform: rotate(0deg); }
  55%  { transform: rotate(320deg); }
  75%  { transform: rotate(298deg); }
  100% { transform: rotate(360deg); }
}

.result-loader-title {
  font-family: var(--serif); font-weight: 500; font-size: 24px;
  color: var(--navy); line-height: 1.25;
}

/* De drie stappen liggen op elkaar in één cel: zo springt er niets als de tekstlengte wisselt. */
.result-loader-steps { display: grid; min-height: 1.65em; font-size: 15px; color: var(--graphite); }
.result-loader-steps span { grid-area: 1 / 1; opacity: 0; animation: mw-loader-step 570ms ease both; }
.result-loader-steps span:nth-child(2) { animation-delay: 570ms; }
/* De laatste blijft staan tot het scherm weggaat; hij fadet niet uit naar niets. */
.result-loader-steps span:nth-child(3) { animation-name: mw-loader-step-last; animation-delay: 1140ms; }

@keyframes mw-loader-step {
  0%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
@keyframes mw-loader-step-last {
  0% { opacity: 0; }
  25%, 100% { opacity: 1; }
}

.result-loader-track {
  display: block; width: 180px; max-width: 60vw; height: 3px;
  margin-top: 4px; border-radius: 2px; background: var(--line); overflow: hidden;
}
.result-loader-bar {
  display: block; height: 100%; width: 8%; border-radius: 2px; background: var(--accent);
  animation: mw-loader-bar 1700ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes mw-loader-bar {
  to { width: 100%; }
}

/* Wie verminderde beweging vraagt, krijgt geen wachtscherm. De regel onderaan dit bestand zet
   elke animatie uit, en dan zou dit overlay blijven staan waar het net nog vanzelf wegging.
   Meteen de uitslag is hier bovendien gewoon het betere antwoord. */
@media (prefers-reduced-motion: reduce) {
  html.js .result-loader { display: none; }
}

/* ---------- Resultaat ---------- */

.result-head { border-top: 3px solid var(--accent); padding-top: 26px; }
.product {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
}
.product img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; background: var(--card-2); }
.product h3 { margin-top: 0; font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy); }
/* Matchlabel en prijs delen één regel: twee losse regels kostten hoogte zonder iets toe te voegen. */
.product-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 6px; font-size: 14.5px; color: var(--graphite);
}
.product-meta strong { color: var(--accent); }
/* Cijfers op vaste breedte: anders staan "70%" en "45%" op twee kaarten onder elkaar niet in
   dezelfde kolom, en dan lees je het rijtje niet meer als één schaal. */
.match-score { font-variant-numeric: tabular-nums; }
.product .price { font-weight: 600; }
.product .why { color: var(--graphite); font-size: 14.5px; margin-top: 8px; }
.product .why strong { color: var(--navy); }
/* De kanttekening blijft op de "past omdat"-regel staan, maar mag er niet in verdwijnen. */
.why-caveat { display: block; margin-top: 4px; }
.product .btn { margin-top: 14px; }

/* ---------- Rassen op de uitslag ----------
   De tegenhanger van het productblok bij de voer-niches: hetzelfde gewicht op de pagina, want
   het is even goed het antwoord waar de bezoeker voor kwam. Beeld is optioneel; zonder foto
   schuift de tekst gewoon naar links en blijft de kaart heel. */

.highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.highlight {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.highlight-with-image { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.highlight img { width: 96px; height: 96px; object-fit: cover; border-radius: 2px; background: var(--card-2); }
.highlight-name {
  margin-top: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; color: var(--navy);
}
.highlight-why { margin-top: 4px; font-size: 14.5px; color: var(--graphite); }
.highlight-caution { margin-top: 6px; font-size: 14px; color: var(--graphite); }
.highlight-caution strong { color: var(--navy); }

.disclosure {
  font-size: 13px; color: var(--graphite); background: var(--card-2);
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: 2px; padding: 14px 16px; margin-top: 28px;
}

.share { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.share a, .share button {
  font-size: 14px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card); color: var(--navy); text-decoration: none; cursor: pointer; min-height: 44px;
}
.share a:hover, .share button:hover { border-color: var(--accent); }

/* ---------- E-mailcapture ---------- */

.lead-capture { border-left: 3px solid var(--accent); }
.lead-form { display: grid; gap: 16px; margin-top: 20px; max-width: 520px; }
.lead-fields { display: grid; gap: 12px; }
.lead-form label.small { display: block; margin-bottom: 5px; }
.lead-form input[type="text"],
.lead-form input[type="email"] {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card); min-height: 48px;
}
.lead-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--graphite); }
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.consent strong { color: var(--ink); }

@media (min-width: 560px) {
  .lead-fields { grid-template-columns: 1fr 1.4fr; }
}

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0; margin-top: 20px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: var(--serif); font-size: 19px; color: var(--navy);
  cursor: pointer; list-style: none; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold); font-family: var(--sans); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 12px; color: var(--graphite); max-width: var(--measure); }

/* ---------- Lees meer ----------
   Voor de alinea die wel klopt maar niet iedereen hoeft te lezen. Zelfde mechaniek als de FAQ,
   maar zonder de randen: dit hoort bij de tekst erboven en is geen eigen blok.

   Bewust een details en geen JavaScript: de tekst staat gewoon in de HTML, dus een zoekmachine
   leest hem en Ctrl+F vindt hem. */

.readmore { margin-top: 12px; }
.readmore summary {
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; color: var(--navy);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.readmore summary::-webkit-details-marker { display: none; }
.readmore summary::after { content: "+"; color: var(--gold); font-weight: 600; }
.readmore[open] summary::after { content: "–"; }
.readmore summary:hover { text-decoration: underline; }
.readmore > p { margin-top: 4px; color: var(--graphite); }

/* ---------- Bronnen onder een artikel ----------
   Kleiner dan de lopende tekst en zonder kader: het is een verantwoording en geen leesstof. Wie
   het wil nakijken vindt het, wie doorleest wordt er niet door opgehouden. */

.sources { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.sources h2 { margin-top: 0; font-size: 20px; }
.source-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.source-list li { font-size: 14px; color: var(--graphite); line-height: 1.5; }
.source-list a { color: var(--navy); }
/* De uitgever staat achter de naam en niet eronder: hij hoort erbij en mag geen eigen regel
   pakken in een lijst die vooral te negeren moet zijn. */
.source-publisher::before { content: " · "; color: var(--line); }

/* ---------- Hero en zoekbalk ---------- */

.hero { padding: 44px 0 8px; text-align: center; }
.hero h1 { margin-top: 12px; }
.hero-lead { margin: 16px auto 0; max-width: 54ch; }

/* ---------- Hero met sfeerbeeld ----------
   Alleen actief als er beeld geregistreerd staat onder "/" in PageImages. Zonder beeld raakt geen
   van deze regels iets aan: .hero-text is dan een gewone div zonder eigen opmaak.

   De tekst gaat links uitlijnen zodra er beeld naast staat. Gecentreerde tekst naast een foto
   leest scheef — het midden van de kolom valt dan nergens samen met het midden van het scherm. */
@media (min-width: 900px) {
  .hero-with-image .wrap {
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
    text-align: left;
  }
  .hero-with-image .hero-lead { margin-left: 0; }
  .hero-with-image .search { margin-left: 0; }
  .hero-with-image .chips { justify-content: flex-start; }
}

/* Op een smal scherm valt het beeld onder de tekst en blijft de hero gecentreerd zoals nu. Onder
   de knoppen en niet erboven: de zoekbalk is de kortste weg naar een advies en die hoort niet
   achter een foto vandaan te komen. */
.hero-image { margin-top: 26px; }
.hero-image .figure { margin: 0; max-width: none; }
.hero-image .figure img { border-radius: 10px; }

.search {
  display: flex; gap: 10px; margin: 28px auto 0; max-width: 560px;
}
.search input {
  flex: 1; min-width: 0; padding: 15px 18px; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--card);
  color: var(--ink); min-height: 52px;
}
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search .btn { flex: none; }
.search-inline { margin-left: 0; margin-right: 0; }

/* ---------- Categoriechips in de hero ----------
   De zoekbalk stond onder de keuzehulpen zolang er een handvol niches waren: zoeken is dan
   vooral een manier om niets te vinden. Nu staat hij vooraan en zijn dit de knoppen eronder,
   voor wie liever bladert dan typt. De ingetogen variant van de zoekbalk en de grote
   keuzekaarten uit de oude hero zijn hiermee vervallen. */

.chips {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 9px; margin-top: 22px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 14px; font-weight: 500; color: var(--navy); text-decoration: none;
  min-height: 40px;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ---------- Sectiekoppen met "bekijk alles" ----------
   De link rechts is wat de homepage laat schalen: per categorie staan er hoogstens drie kaarten
   en de rest zit hierachter. Hij mag daarom nooit wegvallen op een smal scherm, alleen onder de
   kop schuiven. */

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 40px;
}
.sec-head h2 { margin-top: 0; display: flex; align-items: center; gap: 11px; }
/* Binnen .section draagt de sectie zelf de ruimte al; anders stapelen de twee marges op. */
.section > .sec-head:first-child { margin-top: 0; }
.sec-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sec-all {
  font-size: 13.5px; font-weight: 600; color: var(--gold);
  text-decoration: none; white-space: nowrap;
}
.sec-all::after { content: " →"; }
.sec-all:hover { color: var(--gold); text-decoration: underline; }
.sec-lead { margin-top: 10px; }
.sec-lead .sep { color: var(--line); margin: 0 4px; }
.sec-grid { margin-top: 20px; }

/* De uitgelichte instap staat in een eigen vlak: het scheidt "hier kun je beginnen" van de
   volledige indeling eronder, zonder er een tweede kleur bij te halen. */
.band {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px;
}
/* Iets smallere kolommen dan de standaard 260px: met vier uitgelichte keuzehulpen viel de
   vierde anders als wees op een tweede regel, en dan leest hij als een nagekomen kaart. */
.band .grid { margin: 0; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); }
.band .link-card { background: var(--card-2); }

/* De kaart eindigt met dezelfde belofte als de knop op de pillar. */
.card-cta { margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.card-cta::after { content: " →"; }

/* Hoe vaak deze keuzehulp is afgerond. Klein en grijs, en dat is de hele bedoeling: het is een
   feit dat meehelpt en geen claim die om aandacht vraagt. Het bolletje ervoor is hetzelfde teken
   als bij "Wat je krijgt" op de homepage, want het is hetzelfde soort mededeling. */
/* Via .link-card en niet los: .link-card p zet hierboven al een grootte en een kleur, en die is
   specifieker dan een enkele class. */
.link-card .card-proof {
  margin-top: 10px; font-size: 13px; color: var(--graphite);
  display: flex; align-items: center; gap: 7px;
}
.card-proof::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* Twee kolommen zodra er ruimte is: zes gidsen onder elkaar maken van een strip een lijst.
   De nichekolom is hier breder dan op /gidsen/, want anders duwt de langste niche de titel in
   de ene kolom verder naar rechts dan in de andere en loopt de lijst scheef. */
@media (min-width: 780px) {
  .guide-index-split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .guide-index-split .guide-index-niche { min-width: 112px; }
}


.section { margin-top: 56px; }

/* ---------- Hoe het werkt ---------- */

.steps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.steps li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
}
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--serif); font-size: 17px;
}
.steps h3 { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--navy); }
.steps p { margin-top: 8px; color: var(--graphite); font-size: 15px; }

/* ---------- Onafhankelijkheidsgarantie ---------- */

.guarantee {
  background: var(--card-2); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 28px 30px; margin-top: 56px;
}
.guarantee-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.guarantee-list li {
  font-size: 15px; color: var(--graphite); padding-left: 24px; position: relative;
}
.guarantee-list li::before {
  content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 600;
}
.guarantee-list strong { color: var(--ink); }

/* ---------- Redactioneel beeld ----------
   aspect-ratio komt uit de width en height op het img-element zelf, dus de ruimte staat al
   gereserveerd voordat de foto binnen is. Daarom hier alleen de vorm, geen vaste hoogtes. */

.figure { margin: 30px 0 0; max-width: var(--measure); }
.figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--card-2);
}
.figure figcaption {
  margin-top: 10px; font-size: 13.5px; color: var(--graphite); line-height: 1.5;
}
.figure-credit { display: block; margin-top: 2px; font-size: 12.5px; opacity: 0.85; }

/* De bovenste foto mag breder zijn dan de tekstkolom: hij hoort bij de pagina, niet bij een
   alinea. Blijft binnen .wrap, dus nooit breder dan 1080. */
.figure-hero { max-width: none; }

/* Een schema is geen foto. Het staat in de tekst als uitleg, dus het krijgt ruimte boven én
   onder in plaats van alleen boven, en geen achtergrondvlak: de SVG tekent zijn eigen papier.
   De max-width zit op de svg zelf (460px) en niet hier, want op desktop moet een staand schema
   juist níet de hele kolom vullen — dan wordt de tekst erin onnodig groot. */
.figure-schema { margin: 30px 0; }
.figure-schema svg {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
}

/* ---------- De uitslag ----------
   Rustig gehouden: de dekking is een hulpmiddel, niet de kop van de pagina. De regels eronder
   krijgen juist wél nadruk, want dat is wat de bezoeker moet lezen. */

/* Het beeld bij een uitkomst is bewust kleiner dan een gids-header: het hoort bij het antwoord,
   niet bij de pagina. Meer dan dit en het wordt de kop van de uitslag in plaats van de titel. */
/* Specifieker dan .figure-hero, dat max-width op none zet: ook met Priority (voor het laden)
   blijft het beeld hier klein. */
.profile-figure .figure { margin-top: 22px; max-width: 480px; }

/* Het percentage en de telling in één badge. inline-flex met een gat in plaats van losse
   spaties: bij het omslaan op een smal scherm houdt de tweede regel dan zijn eigen uitlijning,
   waar een inline-block de scheidingspunt aan het regeleinde zou laten hangen. */
.match-headline {
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 18px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--card);
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
/* Het cijfer draagt het accent en de telling erachter niet. Twee keer accent maakt de badge één
   blok kleur, en dan leidt het cijfer niet meer. */
.match-headline .match-score { color: var(--accent); }

/* De gids staat op een eigen regel, niet achter de zin. Wie snel scant, ziet zo in één oogopslag
   dat er een uitweg is zonder de hele regel te hoeven lezen. */
.result-note {
  margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--line);
  font-size: 15px; color: var(--ink); max-width: var(--measure);
}
.result-note strong { color: var(--navy); }
/* Het openstaande antwoord en de noot staan naast elkaar op één regel en breken samen af. */
.result-note span + span { margin-left: 5px; }
.result-note a { display: block; margin-top: 6px; }
.result-note a::before { content: "→ "; color: var(--graphite); }

/* Goud is op deze site het teken voor "let op". De waarschuwing en de kanttekening onder de
   ondergrens delen dat, want ze doen hetzelfde werk. */
.result-note-caution { border-left-color: var(--gold); }

.match-caveat {
  margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--gold);
  font-size: 15px; color: var(--ink); max-width: var(--measure);
}

/* ---------- Wat je krijgt ----------
   Verving het tellerblok. Bewust geen kaders en geen grote cijfers: dit zijn geen prestaties om
   mee te pronken maar vier feiten over de test, op één rustige regel. */

.promises {
  list-style: none; margin: 30px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14.5px; color: var(--graphite);
}
.promises li { display: flex; align-items: center; gap: 9px; }
.promises li::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}

/* ---------- Voettekst ---------- */

.footer-grid { display: grid; gap: 32px; }
.footer-brand { font-family: var(--serif); font-size: 20px; color: var(--navy); }
.footer-heading {
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--graphite); font-weight: 600; margin-bottom: 12px;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-list a { color: var(--navy); text-decoration: none; font-size: 14.5px; }
.footer-list a:hover { text-decoration: underline; }
/* In de voet zijn de links al navy, dus doet alleen het gewicht hier het werk. */
.footer-list a[aria-current="page"] { font-weight: 600; }

.plain-link { text-decoration: none; color: inherit; }
.plain-link:hover { color: var(--accent); }

/* Een knop die als link in de voet staat. Cookievoorkeuren wijzigen gaat nergens heen, dus het is
   een button, maar hij hoort wel in het rijtje links eronder thuis. */
.link-button {
  font: inherit; font-size: 14.5px; color: var(--navy);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.link-button:hover { text-decoration: underline; }
/* Middenin een lopende tekst moet hij er wél meteen als link uitzien; in de voet doet de kolom
   dat werk al. */
.prose .link-button { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Cookiemelding ----------
   Onderaan vastgezet en niet als scherm ervoor: de bezoeker kwam voor een advies en niet voor een
   toestemmingsformulier. Wie hem negeert, kan gewoon verder — er wordt dan ook niets gemeten, en
   dat is precies de bedoeling van "standaard geweigerd".

   Geen animatie: de balk verschijnt vlak na het laden, en iets wat op dat moment nog beweegt
   telt mee als layout shift. */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--card); border-top: 2px solid var(--gold);
  box-shadow: 0 -2px 12px rgba(28, 26, 23, 0.07);
}
.cookiebar-inner {
  max-width: 1080px; margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cookiebar-title { font-weight: 600; font-size: 15.5px; color: var(--navy); }
.cookiebar-text {
  margin-top: 6px; font-size: 14px; color: var(--graphite); max-width: 62ch; line-height: 1.55;
}
.cookiebar-text a { color: var(--gold); font-weight: 600; white-space: nowrap; }
.cookiebar-actions { display: flex; gap: 10px; flex: none; }

/* Beide knoppen dezelfde vorm, dezelfde kleur, dezelfde breedte. Zie de partial voor waarom. */
.btn-consent {
  background: transparent; color: var(--navy); border-color: var(--navy);
  font-size: 15px; padding: 12px 20px; min-height: 46px; flex: 1 1 auto;
}
.btn-consent:hover { color: var(--navy); background: var(--card-2); }

@media (max-width: 620px) {
  .cookiebar-inner { padding: 16px var(--gutter); gap: 14px; }
  .cookiebar-actions { width: 100%; }
  .btn-consent { flex: 1 1 0; padding: 12px 12px; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Vanaf tablet: meer kolommen. Mobile-first, dus dit is de uitbreiding, niet de basis. */
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .guarantee { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; align-items: start; }
  .guarantee-list { margin-top: 0; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .hero { padding-top: 64px; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 10;
}
.skip-link:focus { left: 0; color: #fff; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .product { grid-template-columns: 1fr; }
  .product img { width: 100%; height: 180px; }

  /* ---------- De veegstand van de kaartenrijen ----------
     De rij loopt door tot de schermrand: een kaart die op 24 pixels van de rand stopt, ziet er
     afgesneden uit in plaats van doorlopend, en dan veegt niemand. Vandaar de negatieve marge van
     precies de zijmarge van de pagina, met dezelfde waarde als padding terug erin zodat de eerste
     kaart wél netjes onder de kop begint.

     82% breed en niet 100%: de volgende kaart moet half in beeld staan. Dat randje is het enige
     signaal dat er meer is — een rij die precies past leest als een rij van één. */
  .card-rail {
    display: flex; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 8px;
    scrollbar-width: none;
  }
  .card-rail::-webkit-scrollbar { display: none; }
  .card-rail > * { flex: 0 0 82%; scroll-snap-align: start; min-width: 0; }

  /* Binnen het uitgelichte vlak draagt dat vlak de zijmarge, niet de pagina. */
  .band { padding: 18px 20px; }
  .band .card-rail {
    margin-left: -20px; margin-right: -20px;
    padding-left: 20px; padding-right: 20px;
    scroll-padding-left: 20px;
  }

  /* De navigatie schuift horizontaal in plaats van te verdwijnen: verbergen zou
     op mobiel elke pagina een dead end maken. */
  .site-header .wrap { flex-wrap: wrap; gap: 12px; }
  .site-nav {
    width: 100%; overflow-x: auto; gap: 16px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* Op een telefoon is dit een eigen regel onder het merk, en dan mag een menu-item ook een
     tikdoel van een halve duim zijn. Op een breed scherm zou dezelfde hoogte de kop opblazen. */
  .site-nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Tikdoelen ----------
     Alles waar je met een duim op mikt haalt 44 pixels. Dat is geen kosmetiek: een link van 28
     pixels hoog in een lijst van tien betekent dat je er regelmatig naast zit, en dan is de
     kortste weg naar een advies ineens twee keer laden. */
  .sec-all { display: inline-flex; align-items: center; min-height: 44px; }
  .guide-index li { padding: 8px 0; }
  .guide-index a { padding: 6px 0; }
  .footer-list { gap: 2px; }
  .footer-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .chip { min-height: 44px; }

  /* ---------- De quizstap op één scherm ----------
     Vraag, antwoorden en de knop horen samen zichtbaar te zijn: moet je scrollen om te zien dat
     er een knop is, dan is de stap langer dan de vraag zelf. Alles hieronder haalt daar hoogte
     weg zonder iets te verbergen. */
  .quiz-page { padding-top: 20px; }
  .quiz-embed { padding: 20px 18px; }
  .progress { margin-bottom: 16px; }
  .question { font-size: 23px; }
  .question-help { margin-top: 8px; }
  .choice-hint { margin-top: 16px; font-size: 13.5px; }
  .options { margin-top: 10px; gap: 8px; }
  .option > span { padding: 14px 16px; }
  .quiz-actions { margin-top: 20px; gap: 10px; }
  /* De knoppen delen de regel in plaats van onder elkaar te vallen: "Volgende" blijft zo binnen
     duimbereik onderaan het scherm, en "Terug" pakt niet dezelfde nadruk. */
  .quiz-actions .btn { flex: 1 1 44%; padding-left: 16px; padding-right: 16px; }
  .quiz-note { margin-top: 14px; }

  /* Foto boven de tekst in plaats van ernaast; 96 pixels naast tekst wordt op een telefoon
     een kolom van twee woorden breed. */
  .highlight-with-image { grid-template-columns: 1fr; gap: 12px; }
  .highlight img { width: 100%; height: 160px; }

  /* Op smal scherm wint de titel van de kolom: de niche gaat erboven staan, met de leestijd
     ernaast op diezelfde regel. Die twee zijn samen één bijschrift; onder elkaar zouden ze van
     elke gids een blok van drie regels maken en dan scrol je door een lijst in plaats van erlangs. */
  .guide-index li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; }
  .guide-index-niche { min-width: 0; grid-column: 1; grid-row: 1; }
  .guide-index-time { grid-column: 2; grid-row: 1; margin-left: 0; }
  .guide-index a { grid-column: 1 / -1; grid-row: 2; }

  .crossbar { padding: 20px 22px; }
  .crossbar .btn { width: 100%; text-align: center; }

  .cat-hero { padding: 22px 20px; }
  .cat-hero .lead { font-size: 16px; }

  .breadcrumbs { font-size: 13px; padding-top: 16px; }
  .breadcrumbs li + li::before { margin: 0 6px; }

  .search { flex-direction: column; }
  .search .btn { width: 100%; }
}

/* ---------- De smalste telefoons ----------
   Een iPhone SE staat op 375 CSS-pixels en een enkel Android-toestel op 360. Daar kost 24 pixels
   marge aan weerskanten een achtste van de leesbreedte, en dat merk je vooral aan de koppen: die
   gaan van twee naar drie regels en duwen de quiz van het scherm. De rest van dit blok haalt
   hoogte weg uit de blokken die alleen inleiden. */
@media (max-width: 400px) {
  :root { --gutter: 18px; }

  .hero { padding: 28px 0 4px; }
  .section { margin-top: 40px; }
  .sec-head { margin-top: 30px; }
  .card { padding: 20px 18px; }
  .link-card { padding: 18px 18px; }
  .steps li { padding: 20px 18px; }
  .guarantee { padding: 22px 20px; margin-top: 40px; }
  .quiz-embed { padding: 18px 16px; }
  .question { font-size: 21px; }

  /* Op deze breedte past een kaart van 82% naast een half zichtbare buur niet meer leesbaar:
     de tekst breekt dan op elke tweede lettergreep. Iets breder, en het randje blijft. */
  .card-rail > * { flex: 0 0 86%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}