/*
 * De publieke website van TheorieFocus.
 *
 * WAAROM DIT BESTAND BESTAAT EN NIET SCHERM.CSS.
 * `scherm.css` is het oefenscherm: één telefoonscherm, alles vast, niets dat
 * schuift. Een website is het tegenovergestelde — lange pagina's die op elke
 * breedte moeten werken. Twee doelen in één stijlblad wordt een stijlblad dat
 * geen van beide goed doet. De site deelt daarom wél `tokens.css` (de kleuren,
 * de maten, de knoppen, de stemmen) en verder niets.
 *
 * WAAROM SOMMIGE KLASSENAMEN `tf-` HETEN.
 * Het merkstijlblad van de voorganger (`app/merk.css` in RoberR1990/TheorieFocus)
 * droeg die namen al, en `tokens.css` heeft er de helft van meegenomen bij de
 * verhuizing. Wat hier `tf-` heet is de andere helft: precies de klassen die de
 * oude pagina's gebruikten en die `tokens.css` niet heeft. Wat nieuw is voor deze
 * site heet `site-`.
 *
 * WAT ER NIET IN MAG.
 * De server stuurt `style-src 'self'` mee (zie gereedschap/serve.mjs). Een
 * style-attribuut in de html en een stijlblok dat vanuit code wordt toegevoegd
 * worden dan STIL geweigerd: de pagina rendert kaal en er komt geen foutmelding.
 * Alle vormgeving hoort dus hier. Externe lettertypen worden om dezelfde reden
 * geblokkeerd; de site gebruikt `/fonts.css`, dat de drie merkstemmen van onze
 * eigen plek serveert.
 */

/* ── de grondtoon ────────────────────────────────────────────────────────
 *
 * De eigenaar vond de eerste versie te donker. Dat kwam niet van de kleuren maar
 * van de rolverdeling: de pagina stond op `--tf-canvas` (het grijze werkblad uit
 * het merk) en de kaarten op `--tf-bg`. Op een website hoort dat andersom — het
 * papier is licht, en de kaarten liggen er wit op. Vandaar deze twee regels; de
 * kleuren zelf komen onveranderd uit `tokens.css`.
 */

body {
  background: var(--tf-bg);
}

/* ── donkere stand ───────────────────────────────────────────────────────
 *
 * `tokens.css` zet de donkere variant bewust op `[data-theme="dark"]` en niet op
 * de systeemstand: in de app is donker een keuze. Op een website is dat anders —
 * wie zijn telefoon 's avonds op donker heeft staan verwacht geen wit vlak.
 * `site.js` zet daarom `data-theme` op basis van de systeemstand, zodat de
 * donkere kleuren uit `tokens.css` komen en hier niet nog eens staan. Draait het
 * script niet, dan blijft de site gewoon licht en leesbaar.
 */

/* ── paginaschil ─────────────────────────────────────────────────────────── */

.tf-main {
  padding-top: 18px;
}

.tf-gap-4 { gap: 4px; }
.tf-gap-8 { gap: 8px; }
.tf-self-start { align-self: flex-start; }
.tf-ink { color: var(--tf-ink); }

.tf-title-lg { font-size: 25px; }
.tf-pad { padding: 12px 2px 0; }

.tf-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tf-section-head h2 {
  margin: 0;
  font: 700 23px/1.2 var(--tf-font-display);
  text-wrap: pretty;
}

/* De secties staan ver uit elkaar; een lange pagina moet in blokken uiteenvallen
   en niet als één lap lezen. */
.tf-main > * + * {
  margin-top: 52px;
}

.site-lede {
  margin: 0;
  max-width: 60ch;
  color: var(--tf-ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ── het merkje "nog te maken" ───────────────────────────────────────────
 *
 * De filmpjes, het boek, de Proefrit en de computerversie bestaan niet. Ze staan
 * wel op de pagina, want ze horen bij wat je koopt. Dan moet in één oogopslag te
 * zien zijn wat er vandaag is en wat nog niet, en dat mag geen voetnoot zijn
 * onderaan: het merkje staat naast het ding zelf.
 */

.site-status {
  align-self: flex-start;
  padding: 3px 9px;
  border: var(--tf-border) dashed var(--tf-outline);
  border-radius: var(--tf-radius-pill);
  color: var(--tf-muted);
  font: 600 10px var(--tf-font-ui);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-status-nu {
  border-style: solid;
  border-color: var(--tf-good);
  color: var(--tf-good);
}

/* De balk bovenaan staat in maten.css: hij is van alle vier de pagina's, ook van
   het boekhoofdstuk dat dit stijlblad niet laadt. */

/* ── het openingsbeeld ───────────────────────────────────────────────────
 *
 * EIGENAARSBESLUIT 19-08-2026: het beeld loopt van rand tot rand en de tekst
 * ligt erop. Daarvóór stonden ze naast elkaar, met als reden dat er over een
 * verkeerssituatie niets heen hoort te liggen. Die reden geldt nog steeds voor
 * een situatie waar de leerling een vraag over moet beantwoorden; dit beeld
 * draagt geen vraag, het is de voordeur.
 *
 * DE SLUIER, EN WAAROM HIJ NIET OVERAL EVEN DICHT IS.
 * Bij de onderwerpbeelden in het oefenscherm bleek er geen sluierdikte te
 * bestaan waarbij de tekening zichtbaar blijft én de gedempte tekstkleur boven
 * 4,5:1 uitkomt. Hier is dat opgelost door de sluier níét overal even dicht te
 * maken: dicht waar de tekst staat, open over het kruispunt zelf. Dat is ook de
 * reden dat de tekstkleuren uit maten.css komen en niet uit tokens.css — ze
 * wisselen niet mee met licht of donker, want de foto doet dat ook niet.
 *
 * DE SLUIER LOOPT PER MAAT EEN ANDERE KANT OP, en dat is rekenwerk en geen
 * smaak. Zie de drie media-blokken onderaan dit bestand:
 *   telefoon    van boven naar beneden — tekst bovenaan, kruispunt eronder vrij
 *   tablet      van onder naar boven   — tekst onderaan, kruispunt erboven vrij
 *   computer    van links naar rechts  — tekst links, kruispunt rechts vrij
 *
 * DE ONDERGRENS IS BEWIJSBAAR, NIET GESCHAT. Waar tekst staat is de sluier
 * nergens dunner dan 0,72. Neem nu het slechtst denkbare beeld eronder: wit.
 * De samengestelde achtergrond is dan #565553, en dat is 7,4:1 tegen witte tekst
 * en 5,7:1 tegen --op-beeld-zacht. Allebei boven de 4,5 die WCAG 2.1 AA
 * (succescriterium 1.4.3) eist. Elk echt beeld is donkerder dan wit en haalt dus
 * méér: op 19-08-2026 nagemeten in de browser op 390, 768, 1024 en 1280, in de
 * lichte en de donkere stand, en de laagste waarde die daar uitkwam was 9,2:1.
 *
 * Verander je de sluier, dan meet je opnieuw. Niet kijken of het "nog leesbaar
 * lijkt" — dat is precies de fout die bij de onderwerpbeelden gemaakt is.
 */

.site-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  overflow: hidden;
  background: var(--tf-surface-sunken);
}

.site-hero-beeld {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  /* Het kruispunt zit in de onderste helft van een staand beeld. Deze uitsnede
     houdt alle vier de weggebruikers erin. */
  object-fit: cover;
  object-position: 50% 74%;
}

/*
 * De sluier is een apart vlak en geen achtergrond op de sectie: zo staat hij
 * gegarandeerd tussen het beeld en de tekst, ook als er later iets aan de
 * volgorde in de html verandert.
 *
 * Dit hier is de tabletvariant en tegelijk de terugval: van onder naar boven,
 * met de tekst onderin en het kruispunt erboven vrij. De telefoon en de computer
 * draaien hem om; zie de media-blokken onderaan.
 */
.site-hero-sluier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(var(--op-beeld-sluier) / 0.95) 0%,
    rgb(var(--op-beeld-sluier) / 0.93) 55%,
    rgb(var(--op-beeld-sluier) / 0.62) 76%,
    rgb(var(--op-beeld-sluier) / 0.26) 100%
  );
}

/* Zelfde verhaal als bij de balk: dit vak staat naast het blad, dus het leest
   --site-max rechtstreeks. Zo staat de kop precies boven de eerste kop van de
   pagina eronder. */
.site-hero-binnen {
  width: min(100% - var(--site-marge), var(--site-max));
  margin: 0 auto;
  padding: 40px 0 28px;
}

.site-hero-tekst {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  max-width: 34rem;
}

.site-hero-tekst h1 {
  margin: 0;
  font: 700 33px/1.08 var(--tf-font-display);
  letter-spacing: -0.02em;
  color: var(--op-beeld-ink);
  text-wrap: balance;
}

.site-hero-lede {
  margin: 0;
  max-width: var(--site-lede);
  color: var(--op-beeld-ink);
  font-size: 15px;
  line-height: 1.6;
}

.site-hero-noot {
  margin: 0;
  color: var(--op-beeld-zacht);
  font-size: 12px;
  line-height: 1.5;
}

/* Het merkje boven de kop. Dezelfde vorm als `.tf-tag`, maar op een beeld — dus
   met de vaste kleuren van maten.css in plaats van die van het thema. */
.site-hero-tag {
  align-self: flex-start;
  padding: 5px 11px;
  border: var(--tf-border) solid rgb(255 255 255 / 45%);
  border-radius: var(--tf-radius-pill);
  color: var(--op-beeld-ink);
  font: 600 10px var(--tf-font-ui);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.site-hero-tekst .tf-row {
  gap: 10px;
}

/* De tweede knop staat op een donker vlak en niet op het papier van de pagina;
   de gewone "secundair"-knop zou daar een grijze vlek zijn. */
.site-hero-tekst .site-hero-knop2 {
  border-color: rgb(255 255 255 / 55%);
  background: rgb(255 255 255 / 10%);
  color: var(--op-beeld-ink);
}

/* ── blokken ─────────────────────────────────────────────────────────────── */

.site-punten {
  display: grid;
  gap: var(--site-gat);
  grid-template-columns: repeat(auto-fit, minmax(var(--kolom-kaart), 1fr));
}

.site-punten-3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-punt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.site-punt h3 {
  margin: 0;
  font: 700 17px/1.3 var(--tf-font-display);
}

.site-punt p {
  margin: 0;
  color: var(--tf-ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.site-punt .site-status {
  margin-top: auto;
}

/* ── schermafdrukken: de etalage ─────────────────────────────────────────
 *
 * Dit is het bewijs op deze pagina. Er staat geen zin bij die uitlegt hoe goed
 * de uitleg is; er staat het scherm zelf. Ze komen uit
 * `gereedschap/site-schermafdrukken.mjs`, die de echte app opstart en zich er
 * doorheen klikt — dus verandert het scherm, dan draai je dat opnieuw en klopt
 * de afdruk weer.
 *
 * WAT ER MIS WAS, EN WAAROM DIT BLOK OPNIEUW GEMAAKT IS.
 *
 * De afdrukken stonden hier op de volle kolombreedte, met een dunne rand en
 * afgeronde hoeken. Op een telefoon is de kolom precies zo breed als de app
 * zelf, en dan is er geen enkel verschil meer tussen een afdruk en het echte
 * scherm: de eigenaar tikte op 20-08-2026 op de antwoorden van een bordvraag en
 * verwachtte dat er iets gebeurde. Een knop die niets doet leest als een product
 * dat stuk is, en dat is op de voorpagina de duurste indruk die er bestaat.
 *
 * Een rand is dus niet genoeg. Er staan nu vier dingen naast elkaar, en elk van
 * de vier zou het in zijn eentje al moeten zeggen:
 *
 *   1. de afdruk zit in een GETEKENDE TELEFOON — donkere rand, luidsprekerspleet;
 *   2. hij is SMALLER dan de kolom, dus de pagina loopt er zichtbaar omheen;
 *   3. hij ligt op een EIGEN VLAK dat niet de kleur van de pagina heeft;
 *   4. er staat met zoveel woorden BOVEN dat het schermafdrukken zijn.
 *
 * DE UITVERGROTING. Punt 2 kost wat: klein betekent dat de uitleg onderin de
 * telefoon niet meer te lezen is, en juist dáár gaat deze sectie over. Daarom
 * staat dat ene stuk scherm er los onder, groot. Dat is een eigen opname van
 * hetzelfde element (`uitleg-detail.png`) en geen uitvergrote uitsnede van het
 * grote beeld; een uitsnede zou korrelig zijn en dat leest als goedkoop.
 *
 * Wie hier een schermafdruk bij zet, zet hem in .site-etalage. Eén afdruk op de
 * pagina die er wél als een scherm uitziet, haalt alle vier de punten onderuit.
 */

.site-etalage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 20px 16px 22px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface-sunken);
}

/* Het etiket boven de etalage. Mono en klein: dit is een bijschrift van de
   makers, geen verkooptekst. */
.site-etalage-merk {
  margin: 0;
  align-self: flex-start;
  color: var(--tf-muted);
  font: 400 11px var(--tf-font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.site-etalage-rij {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.site-etalage > figcaption {
  align-self: flex-start;
  max-width: 56ch;
  color: var(--tf-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── de getekende telefoon ───────────────────────────────────────────────
 *
 * De maat is met opzet klein: 148 pixels breed op een telefoon. Dat is smal
 * genoeg dat niemand hem voor het echte scherm aanziet, en breed genoeg dat je
 * ziet wát er staat — de tekst lees je in de uitvergroting eronder.
 *
 * De rand is donker in beide standen, ook in de lichte. Een telefoon is een
 * zwart apparaat; een lichte rand om een licht scherm is geen apparaat maar een
 * kader, en dat was precies het probleem.
 */
.site-toestel {
  position: relative;
  width: 148px;
  max-width: 100%;
  padding: 9px 6px 10px;
  border-radius: 20px;
  background: #201c17;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

/*
 * Staat er maar ÉÉN afdruk in de etalage, dan mag de telefoon groter: er is geen
 * tweede naast, en er hoort geen uitvergroting bij. Het blok bij "Rustig scherm,
 * geen rommel" gaat over de rust van de indeling en niet over de tekst erin —
 * die hoef je dus niet te kunnen lezen, wel te kunnen zien.
 */
.site-etalage-smal .site-toestel {
  width: 190px;
}

.site-toestel-luidspreker {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: #4a443b;
  transform: translateX(-50%);
}

.site-toestel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--tf-surface);
}

/* ── de stappen naast de twee telefoons ──────────────────────────────────
 *
 * Genummerd, en dat is hier geen versiering: je krijgt eerst de korte uitleg en
 * klapt daarna zelf de lange open. De cijfers wijzen dus naar de telefoon van
 * dezelfde plek in de rij.
 */
.site-etalage-stappen {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0 0 0 22px;
  color: var(--tf-ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.site-etalage-stappen li::marker {
  color: var(--tf-muted);
  font-weight: 700;
}

/* ── de uitvergroting ────────────────────────────────────────────────────
 *
 * Deze mag wél breed worden: het is een uitsnede en geen scherm, dus er valt
 * niets op te tikken wat op een scherm lijkt. Hij staat op de kleur van de
 * pagina zelf, zodat hij loskomt van het vlak van de etalage — een uitvergroting
 * hoort ergens vandaan te komen en niet in de rij te staan.
 */
.site-uitvergroot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* Even breed als de uitsnede zelf mag worden, plus de rand eromheen. Een kaart
     die breder is dan zijn beeld laat een leeg vlak rechts staan, en dat leest
     als een blok dat niet af is. */
  max-width: 486px;
  padding: 12px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
}

.site-uitvergroot-merk {
  margin: 0;
  color: var(--tf-muted);
  font: 400 10px var(--tf-font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/*
 * DE UITVERGROTING GROEIT NIET MEE MET HET BLAD, en dat heeft twee redenen die
 * naar hetzelfde getal wijzen.
 *
 * De opname is 712 beeldpunten breed op een scherm dat er twee per punt zet;
 * boven de 356 css-pixels wordt hij dus opgerekt en gaat de tekst rafelen. En
 * groter dan dit gaat de knop "Leg dit bord uit" in de uitsnede zich weer als
 * een echte knop gedragen — precies wat dit hele blok moest oplossen. 460 is de
 * bovengrens waarop de zin op een computer prettig leest zonder dat een van die
 * twee begint op te spelen.
 */
.site-uitvergroot img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

/* ── brede blokken: tekst naast beeld ────────────────────────────────────── */

.site-breed {
  display: grid;
  gap: 20px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.site-breed-tekst {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-breed-tekst p {
  margin: 0;
  max-width: 56ch;
  color: var(--tf-ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.site-breed-tekst p:first-child {
  color: var(--tf-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}

.site-breed-beeld {
  overflow: hidden;
  border-radius: var(--tf-radius-card);
}

.site-breed-beeld > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tf-radius-card);
}

/* ── korte lijsten ───────────────────────────────────────────────────────── */

.site-kort {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
}

.site-kort > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface);
}

.site-kort dt {
  font: 700 13.5px var(--tf-font-display);
  color: var(--tf-ink);
}

.site-kort dd {
  margin: 0;
  color: var(--tf-ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.site-kort-breed {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ── pakketten ───────────────────────────────────────────────────────────── */

/* Vier pakketten in plaats van twee. Op een telefoon staan ze onder elkaar; in
   de kolom van 720px vallen ze in twee rijen van twee. Bewust geen vier smalle
   kolommen: dan wordt "Proefrit: zelf aan de situatie draaien" een regel van
   drie woorden hoog en is de kaart niet meer in één blik te lezen. */
.tf-plans {
  display: grid;
  gap: var(--site-gat);
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(var(--kolom-kaart), 1fr));
}

.tf-plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 18px;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

/* Het middelste pakket is waar de meeste mensen goed aan doen, dus dat moet er
   uitspringen zonder dat de andere drie eruitzien als een straf: een dikkere
   rand, een warme achtergrond en een vlaggetje. De volgorde blijft die van de
   prijs — een kaart uit de rij trekken maakt de ladder onleesbaar. */
.tf-plan-featured {
  position: relative;
  border: 2px solid var(--tf-ink);
  background: var(--tf-accent-tint-soft);
}

.tf-plan-flag {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 4px 10px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-accent);
  color: var(--tf-accent-ink);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tf-plan h3 {
  margin: 0;
  font: 700 16px var(--tf-font-display);
}

.tf-plan-price {
  margin: 0;
  font: 700 29px var(--tf-font-display);
  letter-spacing: -0.02em;
}

.tf-plan-featured .tf-plan-price {
  font-size: 34px;
}

.tf-plan-price small {
  font: 400 12px var(--tf-font-ui);
  color: var(--tf-muted);
  letter-spacing: 0;
}

/* Hoe lang je toegang hebt is bij vier pakketten het eerste wat je wilt weten,
   en het staat daarom onder de prijs en niet als vinkje ergens in de lijst. */
.tf-plan-duur {
  margin: -4px 0 0;
  color: var(--tf-muted);
  font-size: 13px;
  font-weight: 600;
}

.tf-plan ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 0;
  padding: 0;
  color: var(--tf-ink-soft);
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

/* Een vinkje voor elke regel: het is een lijst van wat je krijgt, en dan hoort
   er een teken voor dat dat zegt. Bij elk pakket, ook bij het goedkoopste — een
   pakket zonder vinkjes leest als een pakket zonder inhoud. */
.tf-plan li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.tf-plan li::before {
  flex: none;
  margin-top: 1px;
  color: var(--tf-accent-strong);
  font-weight: 700;
  content: "\2713";
}

.tf-plan li .site-status {
  margin-left: 2px;
}

.tf-plan .tf-note {
  margin-top: 2px;
}

.tf-plan .tf-button {
  margin-top: auto;
  min-height: var(--tf-hit-comfort);
}

.tf-referral {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--tf-radius-element);
  background: var(--tf-surface-sunken);
  color: var(--tf-ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

/* ── veelgestelde vragen ─────────────────────────────────────────────────── */

.tf-faq {
  overflow: hidden;
  border: var(--tf-border) solid var(--tf-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.tf-faq details + details {
  border-top: var(--tf-border) solid var(--tf-line);
}

.tf-faq summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tf-hit-comfort);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.tf-faq summary::-webkit-details-marker {
  display: none;
}

.tf-faq summary::after {
  flex: none;
  color: var(--tf-muted);
  font: 400 16px var(--tf-font-mono);
  content: "+";
}

.tf-faq details[open] summary::after {
  content: "\2212";
}

.tf-faq p {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--tf-ink-soft);
  font-size: 13px;
  line-height: 1.65;
}

/* ── ervaringen ──────────────────────────────────────────────────────────
 *
 * DIT BLOK TOONT VERZONNEN VOORBEELDMATERIAAL. De melding erboven is geen
 * versiering maar de voorwaarde waaronder het blok bestaat: verzonnen
 * beoordelingen die als echt worden gepresenteerd zijn een misleidende
 * handelspraktijk. `site.js` weigert de kaarten te vullen als de melding
 * ontbreekt, en `gereedschap/controle-site.mjs` zakt als iemand die melding
 * weghaalt, verbergt of de teksten hardcodeert.
 *
 * De melding staat daarom BOVEN de kaarten en in leesbare maat, niet als grijze
 * voetnoot: wie de kaarten ziet, ziet de melding.
 */

.site-voorbeeldmelding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 13px 16px;
  border: var(--tf-border) solid var(--tf-accent-line);
  border-radius: var(--tf-radius-element);
  background: var(--tf-accent-tint);
  color: var(--tf-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.site-voorbeeldmelding::before {
  flex: none;
  font-weight: 700;
  content: "\2691";
}

.tf-quotes {
  display: grid;
  gap: var(--site-gat);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tf-quote {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: var(--tf-border) dashed var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

/*
 * De plaatshouder bovenaan de kaart.
 *
 * Met opzet een vlak met een letter en geen foto. Een foto van een gezicht bij
 * een verzonnen reactie is precies het soort ding dat later niemand meer
 * terugdraait, en een foto van een echt persoon mag hier sowieso niet staan. Een
 * gekleurd vlak geeft de kaart vulling en blijft zichtbaar een plaatshouder.
 *
 * De drie tinten komen uit `tokens.css` en verschuiven dus vanzelf mee in de
 * donkere stand.
 */
.site-quote-beeld {
  display: grid;
  place-items: center;
  height: 84px;
  border-bottom: var(--tf-border) dashed var(--tf-outline);
  background: var(--tf-surface-sunken);
  color: var(--tf-faint);
  font: 700 30px var(--tf-font-display);
  user-select: none;
}

.site-quote-beeld-a { background: var(--tf-accent-tint); }
.site-quote-beeld-b { background: var(--tf-track); }
.site-quote-beeld-c { background: var(--tf-surface-warm); }

.tf-quote blockquote {
  margin: 0;
  padding: 16px 18px 12px;
  color: var(--tf-ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

.tf-quote figcaption {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-top: auto;
  padding: 0 18px 16px;
}

.tf-quote-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tf-track);
  color: var(--tf-ink-soft);
  font: 700 11px var(--tf-font-display);
}

.tf-quote figcaption span:last-child {
  color: var(--tf-muted);
  font: 400 10px/1.45 var(--tf-font-mono);
}

/* ── slotband ────────────────────────────────────────────────────────────
 *
 * Was een inktzwart vlak. Dat maakte de pagina donkerder dan hij hoort te zijn,
 * en het was het enige zwarte vlak op een verder licht blad. Nu draagt hij de
 * huisstijlkleur: even veel nadruk, geen zwart gat onderaan.
 */

.tf-cta-band {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 26px;
  border-radius: var(--tf-radius-card);
  background: var(--tf-accent);
}

.tf-cta-band h2 {
  margin: 0 0 5px;
  font: 700 21px var(--tf-font-display);
  color: var(--tf-accent-ink);
}

.tf-cta-band p {
  margin: 0;
  max-width: 46ch;
  color: var(--tf-accent-ink);
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.82;
}

/* ── de kassa die nog niet open is ───────────────────────────────────────── */

.site-kassa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: var(--tf-border) solid var(--tf-accent-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-accent-tint-soft);
}

.site-kassa h2 {
  margin: 0;
  font: 700 19px var(--tf-font-display);
}

.site-kassa p {
  margin: 0;
  max-width: 62ch;
  color: var(--tf-ink-soft);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ── leesbreedte ─────────────────────────────────────────────────────────
 *
 * Het blad is op een computer 1120 breed. Lopende tekst is dat nooit: een regel
 * van 1120 pixels is ongeveer 150 tekens en dan raak je bij elke terugsprong de
 * regel kwijt. De maten staan in maten.css; hieronder staat wélke blokken ze
 * krijgen. Kaarten en rijen blijven wél over de volle breedte — daar leest het
 * oog per kaart en niet per regel.
 */

.tf-faq,
.tf-panel,
.site-kassa,
.tf-referral,
.site-voorbeeldmelding {
  max-width: var(--site-lees-blok);
}

/* `.tf-lede` komt uit tokens.css en heeft daar geen breedte: in het oefenscherm
   staat hij altijd in een kolom van 390. Op een website moet hij zelf een grens
   hebben, anders is de zin onder de kop op een computer één regel van 150
   tekens. */
.tf-lede {
  max-width: var(--site-lees);
}

.tf-footer p {
  max-width: var(--site-lees);
}

/* De voettekstnavigatie plakte tegen de slotband aan; op een telefoon viel dat
   niet op, op een breed scherm leest het als één blok. */
.site-blad .tf-footer-nav {
  margin-top: 44px;
}

/* GEEN `flex-wrap: wrap` op `.tf-plan li`. Dat lijkt de juiste oplossing voor een
   regel met een merkje erachter, maar het vinkje ervoor is een ::before en dus
   een eigen vak: bij het afbreken blijft het vinkje alleen op een regel achter.
   Nagekeken op 19-08-2026 op de prijzenpagina. */

/* ── brede schermen ──────────────────────────────────────────────────────
 *
 * Ontworpen op 390 breed en daar nagemeten; hieronder wordt hij breder. Twee
 * sprongen, allebei uit maten.css: 761 (vanaf tablet) en 1024 (vanaf computer).
 * De pagina mag op geen enkele breedte zijwaarts schuiven.
 */

@media (min-width: 761px) {
  .site-hero {
    min-height: 460px;
  }

  .site-hero-binnen {
    padding: 48px 0 36px;
  }

  .site-hero-tekst h1 {
    font-size: 42px;
  }

  .site-hero-lede {
    font-size: 16px;
  }

  .site-breed {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 30px;
  }

  .site-breed-om .site-breed-tekst {
    order: 2;
  }

  .site-breed-om .site-breed-beeld {
    order: 1;
  }

  /* Vanaf hier is er ruimte: de getekende telefoons mogen groter, en de twee
     staan naast elkaar in plaats van onder elkaar. Groter mag hier zonder dat
     ze weer als een echt scherm gaan lezen — een tablet is breder dan deze
     kolom, dus de pagina loopt er nog steeds omheen. */
  .site-toestel {
    width: 196px;
  }

  .tf-section-head h2 {
    font-size: 27px;
  }

  .tf-title-lg { font-size: 31px; }
}

/* ── vanaf een computer ──────────────────────────────────────────────────
 *
 * Nu pas gaat de sluier van onder-naar-boven over in links-naar-rechts. De
 * tekst staat links in een kolom, en de rechterkant van het beeld — waar het
 * kruispunt zelf zit — blijft open. Op een tablet kan dat niet: daar is een
 * tekstkolom naast het beeld te smal en worden het twee woorden per regel.
 */

@media (min-width: 1024px) {
  .site-hero {
    align-items: center;
    min-height: 560px;
  }

  .site-hero-beeld {
    object-position: 62% 72%;
  }

  .site-hero-sluier {
    background: linear-gradient(
      to right,
      rgb(var(--op-beeld-sluier) / 0.95) 0%,
      rgb(var(--op-beeld-sluier) / 0.92) 45%,
      rgb(var(--op-beeld-sluier) / 0.42) 72%,
      rgb(var(--op-beeld-sluier) / 0.14) 100%
    );
  }

  .site-hero-binnen {
    padding: 64px 0;
  }

  .site-hero-tekst {
    max-width: 30rem;
    gap: 17px;
  }

  .site-hero-tekst h1 {
    font-size: 50px;
  }

  .tf-main {
    padding-top: 30px;
  }

  .tf-main > * + * {
    margin-top: 64px;
  }

  .tf-section-head h2 {
    font-size: 30px;
  }

  /*
   * Op een computer staat de uitvergroting NAAST de twee telefoons in plaats van
   * eronder: er is breedte over, en dan leest "hier komt dit vandaan" beter dan
   * een derde blok onder elkaar.
   */
  .site-etalage {
    display: grid;
    align-items: start;
    gap: 18px 28px;
    padding: 24px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .site-etalage-merk { grid-column: 1 / -1; }
  .site-etalage-rij { width: auto; grid-row: span 2; }
  .site-etalage-stappen { align-self: end; }
  .site-etalage > figcaption { grid-column: 2; }

  .site-etalage-smal {
    display: flex;
  }

  .site-toestel {
    width: 232px;
  }
}

@media (max-width: 760px) {
  /*
   * OP EEN TELEFOON STAAT DE TEKST BOVENAAN EN NIET ONDERAAN, en dat is geen
   * smaak maar rekenwerk. Het bronbeeld is staand (1000 bij 1167) en een
   * telefoonscherm is smaller dan die verhouding; de uitsnede knipt er dus
   * alleen links en rechts iets af en laat het beeld in de hoogte hélemaal
   * zien. Het kruispunt zit in de onderste helft van dat beeld. Zou de tekst
   * onderaan staan — zoals op een tablet — dan ligt hij precies over het enige
   * wat je hier wilt laten zien, en houd je bovenin een rij daken over.
   *
   * Met de tekst bovenaan loopt de sluier van boven naar beneden en blijft de
   * onderste kwart open: de lesauto en de haaientanden.
   */
  .site-hero {
    align-items: flex-start;
    min-height: 640px;
  }

  /*
   * En het beeld wordt ingezoomd. Een telefoon is hoog en smal; het bronbeeld
   * is staand met het kruispunt in het midden. Laat je het hele beeld zien, dan
   * is elk bord en elke streep een paar pixels groot en zie je vooral daken.
   * Deze uitsnede — anderhalf keer zo breed als het scherm, iets naar beneden
   * geschoven — houdt de haaientanden, het voorrangsbord en de lesauto in het
   * open onderste deel.
   */
  .site-hero-beeld {
    right: auto;
    left: -80%;
    width: 242%;
    object-position: 50% 47%;
  }

  .site-hero-sluier {
    background: linear-gradient(
      to bottom,
      rgb(var(--op-beeld-sluier) / 0.95) 0%,
      rgb(var(--op-beeld-sluier) / 0.92) 66%,
      rgb(var(--op-beeld-sluier) / 0.3) 82%,
      rgb(var(--op-beeld-sluier) / 0.06) 100%
    );
  }

  .site-hero-binnen {
    padding: 22px 0 30px;
  }

  /* Twee knoppen naast elkaar zijn op 360 breed twee halve woorden. */
  .site-hero-tekst .tf-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .site-hero-tekst .tf-row .tf-button {
    width: 100%;
  }

  .tf-main > * + * {
    margin-top: 40px;
  }

  .tf-cta-band {
    padding: 22px 20px;
  }

  .tf-cta-band .tf-button {
    width: 100%;
  }
}

/* ── nu al te lezen: de twee hoofdstukken ────────────────────────────────
 *
 * De bordenpagina en de voorrangspagina stonden alleen in het menu bovenaan.
 * Wie deze pagina van boven naar beneden las kwam er dus nooit — terwijl dat de
 * twee pagina's zijn waarmee we gevonden willen worden, en het enige op deze
 * site dat vandaag helemaal open staat.
 *
 * Hele kaarten en geen woorden met een streep eronder: dit is een aanbod om
 * ergens heen te gaan, en dat hoort de maat te hebben van de andere aanbiedingen
 * op deze pagina. Ze lijken daarom op .site-punt, met één verschil dat je moet
 * zien zonder erover na te denken: hier kún je op tikken, daar niet.
 */

.site-lees {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.site-lees-kaart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
  color: var(--tf-ink);
  text-decoration: none;
}

.site-lees-kaart h3 {
  margin: 0;
  font: 600 16px/1.35 var(--tf-font-ui);
}

.site-lees-kaart p {
  margin: 0;
  max-width: none;
  color: var(--tf-ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* De regel die zegt dat er iets achter zit. Onderaan de kaart, in de accentkleur
   en met een pijl: dat is het enige op de kaart dat om aandacht vraagt. */
.site-lees-verder {
  margin-top: auto;
  padding-top: 4px;
  color: var(--tf-accent-strong);
  font: 600 13px/1.4 var(--tf-font-ui);
}

.site-lees-verder::after {
  content: " \2192";
}

.site-lees-kaart:hover {
  border-color: var(--tf-accent);
}

.site-lees-kaart:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}