/* ============================================================
   STERKER na de val
   Eén stylesheet, elk element één keer, geen dubbele scope.
   Alleen het tokenblok verschilt tussen de merken.
   ============================================================ */
:root{
  --pagina:#FCFAF5;
  --linnen:#F1EDE6;
  --zand:#E5DDD4;
  --accent:#ED5B3F;
  --accent-diep:#BA2C11;  /* dezelfde kleur, donker genoeg om als tekst te lezen */
  --donker:#16242F;
  --donker-licht:#1E3444;
  --bijtekst:#6B5F57;
  --bijtekst-dk:#8A9BAA;
  --randje:#C6BBAF;
  --maxw:1180px;
  --lees:31em;   /* ca. 68 tekens per regel; ch is in Kanit veel te breed */
  --pad:28px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--pagina);color:var(--donker);
  font-family:Kanit,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;font-size:17.5px;line-height:1.7;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-weight:600;margin:0 0 .5em}
h1{font-size:clamp(34px,4.6vw,52px);line-height:1.22;max-width:17em;text-wrap:balance}
h2{font-size:clamp(24px,2.6vw,31px);line-height:1.28;max-width:20em}
h3{font-size:20px;font-weight:500;line-height:1.35}
p{margin:0 0 1.1em;max-width:var(--lees)}
.lead{font-size:19.5px}
.pitch{font-size:clamp(20px,2.1vw,23px);line-height:1.5;color:var(--donker)}
.stil{color:var(--bijtekst);font-size:15.5px}

a{color:inherit}
.tekstlink{color:var(--bijtekst);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:1px}
.tekstlink:hover{color:var(--donker)}
.strook--donker .tekstlink{color:var(--bijtekst-dk)}
.strook--donker .tekstlink:hover{color:var(--pagina)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.strook{padding:clamp(52px,7vw,84px) 0}
.strook--pagina{background:var(--pagina)}
.strook--linnen{background:var(--linnen)}
.strook--zand{background:var(--zand)}
.strook--donker{background:var(--donker);color:var(--pagina)}
.strook--donker h2,.strook--donker h3{color:var(--pagina)}
.strook--donker .label{color:var(--bijtekst-dk)}
.strook--donker .stil{color:var(--bijtekst-dk)}
.strook--smal{padding:36px 0}

.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
/* Een kolom in een grid mag standaard niet smaller worden dan zijn inhoud. Zit
   er een beeld in met breedte 1000 in de html, dan blaast die kolom het raster
   voorbij het scherm, ook al staat er max-width:100% op de afbeelding: die
   honderd procent rekent tegen een kolom die zelf al te breed is. Zo gaf
   /boek/ een horizontale schuifbalk tussen ongeveer 640 en 1000 pixels. */
.duo > *{min-width:0}
/* ---- twee kolommen die op dezelfde lijn beginnen ----
   Begint de linkerkolom met een labeltje en de rechter niet, dan start die
   rechterkolom hoger dan de kop ernaast en lijnt er niets uit: het labeltje,
   de kop en de eerste regel rechts staan alle drie net anders. Deze modifier
   laat de tweede kolom zakken tot op de koplijn. Het labeltje staat dan als
   vlaggetje boven het geheel en er loopt één lijn over de strook.
   De 39 pixels zijn de hoogte van een labeltje plus zijn ondermarge. Alleen
   naast elkaar, want gestapeld staat het labeltje gewoon boven alles. */
@media (min-width:981px){
  .duo--koplijn > *:nth-child(2){margin-top:39px}
}
.duo--boven{align-items:start}
.duo--portret{grid-template-columns:462px minmax(0,1fr)}
/* de tekst krijgt wat meer ruimte dan het beeld, anders breekt de kop te vroeg.
   Deze regel moet boven de media query staan, anders wint hij daar ook. */
.duo--test{grid-template-columns:1.12fr 1fr}
.duo--kaarten{grid-template-columns:1fr 1fr}
/* de tekst weegt zwaarder dan de tekening ernaast. Net als de andere
   duo-varianten hoort deze regel boven de media query te staan. */
/* De tekening staat verticaal in het midden van de tekstkolom ernaast. Stond
   ze bovenaan, dan bleef er onder een halve schermhoogte leeg, en dat is het
   eerste wat iemand van zijn uitslag ziet. */
.duo--uitslag{grid-template-columns:1fr 1.02fr;align-items:center}

.label{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:500;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--bijtekst);margin:0 0 18px}
.label::before{content:"";width:28px;height:2px;background:var(--accent);flex:none}

.knop{display:inline-block;background:var(--accent);color:#fff;font-family:inherit;
  font-size:16px;font-weight:500;padding:16px 34px;border-radius:12px;
  text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease}
.knop:hover{transform:translateY(-1px)}
.na-knop{margin:16px 0 0;font-size:15.5px;color:var(--bijtekst)}
.na-knop b{color:var(--donker);font-weight:500}
.tekstlink--zacht{border-bottom-color:var(--randje)}
.tekstlink--zacht:hover{border-bottom-color:var(--accent)}
.strook--donker .na-knop{color:var(--bijtekst-dk)}
.strook--donker .na-knop b{color:var(--pagina)}

/* ---- navigatie ---- */
.balk{background:var(--pagina);border-bottom:1px solid var(--randje)}
.balk .wrap{display:flex;align-items:center;gap:26px;min-height:72px;flex-wrap:wrap}
.merk{font-size:19px;letter-spacing:1.6px;line-height:1;text-decoration:none;
  color:var(--donker);margin-right:auto;white-space:nowrap}
.merk b{font-weight:600;color:var(--accent)}
.merk span{font-weight:400}
.balk nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:15.5px}
.balk nav a{text-decoration:none;color:var(--donker);padding:6px 0;border-bottom:1.5px solid transparent}
.balk nav a:hover{border-bottom-color:var(--accent)}

/* ---- hero ---- */
.hero img{border-radius:4px;box-shadow:0 18px 44px rgba(22,36,47,.22),0 2px 6px rgba(22,36,47,.12);
  max-width:360px;margin-left:auto}
.hero figure{margin:0}
/* tweede zin van de hero-kop, kleiner dan de eerste */
.kop-tweede{display:block;font-size:.68em;font-weight:400;margin-top:.06em}

/* ---- het leesblok ---- */
.blad-kop{max-width:none;font-size:12.5px;letter-spacing:2.6px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);margin:0 0 20px;min-height:1.7em}
.blad{font-size:19px;line-height:1.85;padding-left:26px;border-left:2px solid var(--accent)}
.blad p{max-width:none}
.blad p:last-child{margin-bottom:0}
.blad-vaag{position:relative;max-height:7.4em;overflow:hidden}
.blad-vaag::after{content:"";position:absolute;inset:auto 0 0 0;height:4em;
  background:linear-gradient(to bottom,rgba(241,237,230,0),var(--linnen))}
.blad-slot{margin:24px 0 0;padding-left:26px;font-size:15.5px;color:var(--bijtekst)}

/* ---- inschrijfkaart ---- */
.inschrijf{background:var(--pagina);border:1px solid var(--randje);border-radius:20px;padding:30px}
.inschrijf--accent{border:2px solid var(--accent)}
.inschrijf h3{margin-bottom:12px}
.inschrijf p{font-size:16px;max-width:none}
.inschrijf label{display:block;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);margin:18px 0 7px}
.inschrijf input{width:100%;font-family:inherit;font-size:16.5px;font-weight:300;color:var(--donker);
  background:var(--linnen);border:1px solid var(--randje);border-radius:12px;padding:13px 15px}
.inschrijf input:focus{outline:2px solid var(--accent);outline-offset:1px}
.inschrijf .knop{width:100%;margin-top:22px;text-align:center}
.inschrijf .fijn{margin:14px 0 0;font-size:14px;color:var(--bijtekst)}

/* wat er in de doos zit, in de kaart zelf en niet in de alinea ernaast.
   LET OP: .aanbod bestond al voor de bestelkaart, vandaar de eigen naam. */
.pakket{display:flex;gap:18px;align-items:flex-start;margin:16px 0 24px}
.pakketbeeld{flex:none;width:118px;height:auto;border-radius:8px;
  border:1px solid var(--randje)}
.pakketlijst{list-style:none;margin:0;padding:0;display:grid;gap:9px;
  font-size:15.5px;line-height:1.45;color:var(--donker)}
.pakketlijst li{position:relative;padding-left:19px}
.pakketlijst li::before{content:"";position:absolute;left:0;top:.6em;
  width:10px;height:2px;background:var(--accent)}
/* wie de mails stuurt, op de plek waar iemand zijn adres afgeeft */
.afzender{display:flex;gap:18px;align-items:center;margin:clamp(26px,3vw,36px) 0 0;
  padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--randje)}
.afzenderfoto{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:1px solid var(--randje)}
.afzender p{margin:0;font-size:16px;line-height:1.6;max-width:24em}
@media (max-width:520px){
  .afzenderfoto{width:76px;height:76px}
  .afzender{gap:14px}
  .pakket{gap:14px}
  .pakketbeeld{width:92px}
  .pakketlijst{font-size:14.5px;gap:8px}
}

/* ---- de vraagzin ---- */
.vraagzin{font-size:19.5px}

/* twee kolommen die tegenover elkaar staan, elk met een eigen lijntje erboven */
.kolomkop{border-top:2px solid var(--accent);padding-top:16px;margin-top:0}
/* Links oranje, rechts donker. Zonder die afspraak stonden er acht oranje
   strepen onder elkaar op dezelfde pagina en zei de kleur niets meer. */
.kolomkop--rechts,.kolomkop--kost{border-top-color:var(--donker)}

/* ---- kaarten ---- */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;align-items:stretch}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:32px 0 0}
/* vier kaarten naast elkaar worden onder de duizend pixels te smal om te
   lezen. Twee bij twee leest als een bewuste indeling, net als bij
   .poortvier; onder de 560 gaan ze onder elkaar. */
@media (max-width:1000px){.vier{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vier{grid-template-columns:1fr;gap:14px}}
.kaart{background:var(--pagina);border:1px solid var(--randje);border-radius:20px;padding:26px}
.strook--pagina .kaart{background:var(--linnen)}
.kaart p{font-size:16px;margin-bottom:0;max-width:none}
/* alles wat je meeneemt draagt hetzelfde oranje randje links */
.kaart--accent{border-left:3px solid var(--accent)}
/* de keerzijde van je stijl staat op de donkere grond, zodat de goede kant en
   de schaduwkant op het scherm ook twee verschillende dingen zijn */
.kaart--schaduw{background:var(--donker);border-color:var(--donker);color:var(--pagina)}
.strook--pagina .kaart--schaduw{background:var(--donker)}
.kaart--schaduw h3{color:var(--pagina)}
.kaart--schaduw p{color:var(--pagina)}
.duo--kaarten{grid-template-columns:1fr 1fr;align-items:stretch;
  margin-top:clamp(28px,3.4vw,40px)}
.duo--kaarten .kaart h3{margin:0 0 10px}
.duo--kaarten .kaart p{font-size:17px}
/* een kaart over de volle breedte, om een rij van twee tekstkolommen te breken */
.kaart--breed{margin-top:clamp(30px,3.6vw,44px);border-left:3px solid var(--accent);
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:start}
.kaart--breed h3{margin:0}
.kaart--breed p{font-size:17px;max-width:var(--lees)}
/* Meer dan een alinea in een brede kaart: zonder deze regel plakken ze aan
   elkaar, want .kaart p heeft margin-bottom 0. */
.kaart p + p{margin-top:14px}
@media (max-width:760px){.kaart--breed{grid-template-columns:1fr;gap:10px}}

/* ---- bestellen ---- */
.bestel{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(26px,3.5vw,48px);
  align-items:start;margin-top:32px}
.aanbod{background:var(--pagina);border:2px solid var(--accent);border-radius:20px;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;overflow:hidden}
.aanbod-tekst{padding:clamp(26px,2.6vw,36px)}
.merkje{display:inline-block;background:var(--accent);color:#fff;
  font-size:12px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;
  padding:6px 12px;border-radius:8px;margin:0 0 14px}
.aanbod h3{font-size:22px;margin-bottom:10px}
.prijs{font-size:26px;font-weight:500;margin:0 0 4px}
.aanbod .anker{font-size:15px;color:var(--bijtekst);margin:0 0 16px;max-width:none}
.aanbod .wat{font-size:16.5px;margin:0 0 20px;max-width:none}
.aanbod .knop{margin:0;padding:15px 28px}
.bewijsfoto{margin:0;min-height:100%;position:relative}
.bewijsfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% center;display:block}

.anders{padding-top:4px}
.anders .kopje{font-size:12.5px;letter-spacing:2.6px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);margin:0 0 4px}
.vorm{border-top:1px solid var(--randje);padding:18px 0}

.vorm h3{font-size:18px;margin:0 0 2px}
.vorm .staat{font-size:15px;color:var(--bijtekst);margin:0 0 6px;max-width:none}
.vorm .staat em{font-style:italic}
.vorm p.vormtekst{font-size:15.5px;margin:0;max-width:none}

/* de zin links, de vier winkels rechts ernaast */
.winkels{margin-top:40px;border-top:1px solid var(--randje);padding-top:26px;
  display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:center}
.winkels p{max-width:none}
/* op /bestel/ staat de kop erboven, dus daar geen scheidingslijn en meer
   ruimte voor de tekstkolom */
.winkels--breed{margin-top:22px;border-top:0;padding-top:0;
  grid-template-columns:minmax(0,21em) minmax(0,1fr);align-items:center}
.winkelrij{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);margin-top:22px;flex-wrap:wrap;max-width:900px}
/* grijs tot je erover gaat: het gesigneerde exemplaar hoort de blikvanger te
   blijven, en het blauw van bol en het oranje van Amazon wonnen dat */
.winkel{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  opacity:.8;filter:grayscale(1);
  transition:opacity .14s ease,filter .18s ease,transform .12s ease;padding:6px}
.winkel:hover{opacity:1;filter:grayscale(0);transform:translateY(-1px)}
.winkel img{width:auto;height:auto;display:block}
.winkel--sb img{max-height:56px}
.winkel--mb img{max-height:30px}
.winkel--bol img{max-height:29px}
.winkel--az img{max-height:31px}

/* ---- sociaal bewijs ---- */
.uitgelicht{display:grid;grid-template-columns:auto minmax(0,62ch);justify-content:start;
  gap:clamp(26px,3.4vw,48px);align-items:center}
.gezicht{width:128px;height:128px;border-radius:50%;position:relative;
  background:var(--zand);box-shadow:inset 0 0 0 1px rgba(22,36,47,.09);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:500;color:var(--bijtekst);overflow:hidden;flex:none}
.gezicht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uitgelicht-tekst{min-width:0}
.uitgelicht blockquote{margin:0 0 16px;font-family:"Playfair Display",Georgia,serif;
  font-style:italic;font-size:clamp(18.5px,1.9vw,22px);line-height:1.55}
.wie{font-size:15.5px;color:var(--bijtekst);line-height:1.5;margin:0;max-width:none}
.wie strong{display:block;color:var(--donker);font-weight:500;font-size:16.5px;margin-bottom:2px}

/* één stem als band, meteen onder de hero */
.stemband{display:grid;grid-template-columns:auto minmax(0,42em);justify-content:start;
  gap:clamp(20px,2.6vw,34px);align-items:center}
.stemband .gezicht{width:84px;height:84px;font-size:24px}
.stemband blockquote{margin:0 0 10px;font-family:"Playfair Display",Georgia,serif;
  font-style:italic;font-size:clamp(18px,1.9vw,22px);line-height:1.5}

.stemmen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,24px);
  margin-top:clamp(40px,4.5vw,58px);align-items:stretch}
.stem{background:var(--pagina);border:1px solid var(--randje);border-radius:20px;
  padding:clamp(22px,2.2vw,28px);display:flex;flex-direction:column}
.stemkop{display:flex;align-items:center;gap:15px;margin:0 0 18px;padding-bottom:18px;
  border-bottom:1px solid var(--randje)}
.stem .gezicht{width:68px;height:68px;font-size:20px}
.stem .naam{margin:0;font-size:14.5px;color:var(--bijtekst);max-width:none;line-height:1.35}
.stem .naam strong{display:block;color:var(--donker);font-weight:500;font-size:16.5px}
.stem p.zegt{margin:0;font-size:16.5px;font-style:italic;max-width:none;line-height:1.6}

/* ---- de vier vragen ---- */
.vragen{margin:0;padding:0;list-style:none;max-width:var(--lees)}
.vragen li{border-bottom:1px solid var(--randje);border-radius:12px}
.vragen li:last-child{border-bottom:0}
.vragen li:hover{background:rgba(237,91,63,.07)}
.vragen label{display:flex;align-items:flex-start;gap:16px;padding:16px 12px;cursor:pointer;font-size:18px}
.vragen input{position:absolute;opacity:0;width:1px;height:1px}
.vinkje{flex:none;width:24px;height:24px;margin-top:4px;border:2px solid var(--accent);
  border-radius:7px;background:var(--pagina);position:relative;transition:.14s ease}
.vragen input:checked+.vinkje{background:var(--accent)}
.vragen input:checked+.vinkje::after{content:"";position:absolute;left:8px;top:3px;
  width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vragen input:focus-visible+.vinkje{outline:2px solid var(--accent);outline-offset:3px}
.teller{font-size:15px;letter-spacing:2.6px;text-transform:uppercase;font-weight:500;
  color:var(--accent);margin:0 0 12px}

/* ---- portret ---- */
.portret{margin:0;max-width:462px}
.portret img{border-radius:20px;width:100%;
  box-shadow:0 14px 34px rgba(22,36,47,.14),0 2px 6px rgba(22,36,47,.08)}

/* ---- fotoband met filter ---- */
/* in een gecentreerd blok moeten begrensde blokken zelf ook centreren */
.fotoband h2,.fotoband p{margin-left:auto;margin-right:auto}
.fotoband{position:relative;color:var(--pagina);text-align:center;
  padding:clamp(64px,9vw,110px) 0;background:var(--donker);
  background-image:linear-gradient(rgba(22,36,47,.74),rgba(22,36,47,.84)),url("beelden/drukpers-1600.jpg");
  background-size:cover;background-position:center}
.fotoband h2{color:var(--pagina)}
.fotoband p{margin-left:auto;margin-right:auto;color:var(--pagina)}
.fotoband .label{justify-content:center;color:var(--bijtekst-dk)}

/* ---- doorsturen ---- */
.doorstuur{display:flex;align-items:center;gap:clamp(18px,2.6vw,32px);flex-wrap:wrap;
  justify-content:flex-start}
/* staat de doorstuurrij binnen een grotere strook, dan scheidt een lijn hem af */
section.strook > .doorstuur{margin-top:clamp(38px,4.4vw,52px);
  padding-top:clamp(28px,3.2vw,38px);border-top:1px solid var(--randje)}
.doorstuur p{margin:0;font-size:16.5px;max-width:52ch}
.deelrij{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.deelknop{display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:500;color:var(--donker);
  background:var(--pagina);border:1.5px solid var(--accent);border-radius:12px;
  padding:12px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .14s ease,background .14s ease}
.deelknop:hover{border-color:var(--accent);background:var(--pagina)}
.deelknop--stil{background:transparent;border-color:var(--randje);color:var(--bijtekst)}
/* de merktekens van whatsapp, facebook en linkedin komen als svg uit hun eigen
   persmap in beelden/deel/. Ontbreekt zo'n bestand, dan haalt de onerror in de
   html het beeld weg en blijft alleen het woord staan. */
.deelicoon{width:18px;height:18px;flex:none;display:block;
  filter:grayscale(1) opacity(.72);transition:filter .18s ease}
.deelknop:hover .deelicoon{filter:none}
.deelicoon--eigen{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.strook--zand .deelknop{background:var(--pagina)}
@media (max-width:640px){.deelknop{padding:12px 16px;font-size:14.5px}}

/* ---- voet ---- */
.voet{background:var(--donker);color:var(--pagina);padding:56px 0 40px;font-size:15.5px;
  border-top:1px solid rgba(252,250,245,.14)}
/* ---- de voet als eigen zone ----
   Eindigt een pagina op een donkere strook, dan raakt donker aan donker en is
   er op het scherm geen verschil te zien tussen het einde van de inhoud en het
   begin van de voet. Dat gebeurt op /30dagen/ en op de vier uitslagpagina's.
   De site scheidt zones met waarde en niet met lijnen, en het palet heeft daar
   al een kleur voor: --donker-licht, dezelfde die in de ringen op de home zit.
   Staat de voet tegen een donkere strook, dan zet ze een stap naar die kleur,
   en het haarlijntje dat er altijd al stond wordt net iets duidelijker. Eén
   regel voor alle gevallen, geen uitzondering per pagina, en op elke pagina
   die op een lichte strook eindigt verandert er niets. */
.strook--donker + .voet,
.fotoband + .voet{background:var(--donker-licht);
  border-top-color:rgba(252,250,245,.22)}
.voet a{color:var(--pagina);text-decoration:none;border-bottom:1px solid transparent}
.voet a:hover{border-bottom-color:var(--accent)}
.voet-rijen{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px}
/* de naam van het boek staat in de voet zoals in de balk. Het accent haalt op
   de donkere grond 4,65 op 1, dus ruim boven de norm. */
.merk--voet{margin:0 0 16px;font-size:19px;letter-spacing:1.6px;line-height:1;
  color:var(--pagina);max-width:none}
.voet h3{font-size:14px;letter-spacing:2.6px;text-transform:uppercase;color:var(--bijtekst-dk);
  font-weight:500;margin-bottom:14px}
/* volglinks in de voet: de merktekens staan in beelden/deel/ */
.volgrij{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.volg{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  padding:8px 13px;border-radius:99px;border:1px solid rgba(252,250,245,.22);
  text-decoration:none;color:var(--pagina)}
.volg:hover{border-color:var(--accent);background:rgba(252,250,245,.05)}
.voet .volg{border-bottom:1px solid rgba(252,250,245,.22)}
@media (max-width:430px){
  .volg--kort span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .volg--kort{padding:11px 13px}
}
.volg img{display:block;width:20px;height:20px;flex:none;
  filter:grayscale(1) brightness(1.7) opacity(.8);transition:filter .18s ease}
.volg:hover img{filter:none}
.voet ul{margin:0;padding:0;list-style:none}
.voet li{padding:5px 0}
.voet p{max-width:42ch}
.voet .fijn{font-size:13.5px;color:var(--bijtekst-dk);border-top:1px solid rgba(255,255,255,.12);
  padding-top:22px;line-height:1.6;max-width:none}

@media (max-width:980px){
  .duo,.duo--test,.duo--portret,.duo--uitslag,.duo--kaarten,.duo--materiaalkop{grid-template-columns:1fr;gap:34px}
  /* gestapeld mag de tekening niet de volle breedte pakken */
  .tekening{max-width:420px}
  .hero img{margin:0;max-width:250px}
  .hero figure{order:-1}
  .portret{max-width:420px}
  .stemmen{grid-template-columns:1fr}
  .uitgelicht{grid-template-columns:minmax(0,1fr);gap:24px}
  .gezicht{width:104px;height:104px;font-size:28px}
  .bestel{grid-template-columns:1fr;gap:30px}
  .aanbod{grid-template-columns:1fr}
  .bewijsfoto{min-height:0;aspect-ratio:16/10;order:-1}
  /* het kader is hier liggend en de foto staand, dus snijdt hij boven en onder.
     Hoger uitsnijden, anders gaat de bovenkant van het hoofd eraf. */
  .bewijsfoto img{position:static;height:100%;object-position:56% 12%}
}
@media (max-width:860px){
  .drie{grid-template-columns:1fr}
  .voet-rijen{grid-template-columns:1fr}
  .balk .wrap{min-height:0;padding-top:14px;padding-bottom:14px}
}
@media (max-width:640px){
  .winkels{grid-template-columns:1fr;gap:22px}
  .winkelrij{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;
    justify-items:center;align-items:center}
  .stemband{gap:18px;align-items:start}
  .stemband .gezicht{width:62px;height:62px;font-size:18px}
  .strook{padding:46px 0}
  .strook--smal{padding:30px 0}
  .duo{gap:26px}
  .drie{gap:14px}
  .kaart{padding:20px}
  .blad{font-size:18px;line-height:1.8;padding-left:20px}
  .blad-vaag{max-height:5em}
  .blad-slot{padding-left:20px}
  .inschrijf{padding:22px}
  .hero img{max-width:210px}
  .sofie img{max-width:270px;margin:0 auto}
  .portret{max-width:100%}
  .vragen label{padding:13px 8px;font-size:17px}
  /* De links stonden hier op één schuifbare rij. Op 390 pixels bleef daar na de
     naam 152 pixels van over, dus zag je anderhalve link en moest je zijwaarts
     vegen om de rest te vinden. Nu breken ze onder de naam over twee regels:
     alles zichtbaar, niets om te ontdekken. */
  .voet-rijen{grid-template-columns:1fr 1fr;gap:22px}
  .voet li{padding:9px 0}
  .volg{padding:11px 14px}
  .voet-rijen>div:first-child{grid-column:1 / -1}
  .voet{padding:40px 0 30px}
  .fotoband{background-image:linear-gradient(rgba(22,36,47,.74),rgba(22,36,47,.86)),url("beelden/drukpers-900.jpg")}
}

/* ---- bestelpagina: de vragen ---- */
.vragenlijst{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(22px,3vw,34px) clamp(30px,5vw,64px);margin-top:30px}
.vragenlijst h3{margin:0 0 6px;font-size:17.5px;font-weight:500}
.vragenlijst p{margin:0;font-size:16.5px;color:var(--bijtekst);max-width:52ch}
.isbn{margin:26px 0 0}
.balk nav a[aria-current]{border-bottom-color:var(--accent)}
@media (max-width:860px){
  .vragenlijst{grid-template-columns:1fr}
}
.kopcover{margin:0}
.kopcover img{max-width:230px;margin-left:auto;border-radius:4px;
  box-shadow:0 14px 34px rgba(22,36,47,.20),0 2px 5px rgba(22,36,47,.10)}
/* op telefoon staat de cover boven de tekst, net als in de hero */
@media (max-width:980px){.kopcover{order:-1}.kopcover img{margin:0;max-width:200px}}
.strook--band{padding:clamp(40px,5vw,60px) 0}
h2 + .vorm{margin-top:24px}

/* ---- modelpagina: de matrix ---- */

@media (max-width:980px){
  /* beeld naast de tekst, anders wordt de pagina op telefoon te lang */
}

/* ---- modelpagina: kiezen op de ring ---- */
/* cirkel en resultaat staan naast elkaar: je moet de verandering kunnen zien */
.kiezer{display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(26px,3.4vw,40px)}
.ringblok{display:block}
.ringen{display:block;width:100%;max-width:300px;margin:0}
/* dezelfde cirkel op de donkere strook van de home, alleen als beeld */
.ringen--donker{max-width:360px;margin-left:auto}
.ringen--donker .ring-tekst{fill:var(--pagina)}
.ring{stroke:var(--donker);stroke-width:1.5;cursor:pointer;
  transition:fill .18s ease,stroke .14s ease}
.ring[data-terrein=organisatie]{fill:var(--pagina)}
.ring[data-terrein=relationeel]{fill:var(--linnen)}
.ring[data-terrein=persoonlijk]{fill:var(--zand)}
.ring[aria-pressed=true]{fill:var(--accent);stroke:var(--accent)}
.ring:hover{stroke:var(--accent);stroke-width:2.5}
.ring:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ringlabel{pointer-events:none}
.ringlabel[data-aan=true] .ring-tekst{fill:#fff}
/* de oranje onderlijn van een tekstlink: zegt "hier kan je op klikken" */
.ringlijn{fill:var(--accent)}
.ringlabel[data-aan=true] .ringlijn{display:none}
.ring-tekst{font-family:Kanit,sans-serif;font-size:16.5px;font-weight:600;letter-spacing:1.2px;
  fill:var(--donker);text-anchor:middle}
.ring-op-oranje{fill:#fff}
.ringhint{margin:16px 0 0;font-size:13px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);text-align:center;max-width:300px}

.kant{display:inline-flex;gap:4px;border:1px solid var(--randje);border-radius:999px;
  padding:4px;background:var(--pagina);margin:0 0 clamp(20px,2.4vw,26px)}
.kantknop{font-family:inherit;font-size:14.5px;font-weight:500;border:0;background:none;
  color:var(--bijtekst);padding:8px 20px;border-radius:999px;cursor:pointer;
  transition:background .16s ease,color .16s ease}
.kantknop:hover{color:var(--donker)}
.kantknop[aria-pressed=true]{background:var(--donker);color:var(--pagina)}

.drieluik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.ding{display:block;animation:zachtin .38s ease}
@keyframes zachtin{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ding{animation:none}}
.ding[hidden]{display:none}   /* anders wint .ding van de browserregel voor hidden */
.ding img{width:100%;display:block;margin:0 0 16px}
.dinglaag{margin:0 0 4px;font-size:11.5px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--bijtekst);max-width:none}
.dingnaam{margin:0 0 4px;font-size:19px;font-weight:600;color:var(--accent);max-width:none;
  line-height:1.25;min-height:2.5em}   /* twee regels, zodat de motto's op één lijn staan */
.dingzin{margin:0;font-size:16px;max-width:none;line-height:1.5;min-height:4.5em}
/* drie regels gereserveerd, anders springt de pagina bij het wisselen tussen
   eigenschappen (één regel) en valkuilen (drie regels) */

.modelslot{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--randje);
  padding-top:clamp(26px,3vw,36px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(30px,5vw,64px);align-items:start}
.modelslot p{margin-bottom:0}
.modelslot .stil{grid-column:1 / -1;margin-top:clamp(22px,2.6vw,30px)}
@media (max-width:760px){
  .modelslot{grid-template-columns:1fr;gap:18px}
}

@media (max-width:860px){
  .kiezer{grid-template-columns:1fr;gap:26px}
  .ringen{max-width:280px;margin:0 auto}
  .ringhint{max-width:none}
  .drieluik{grid-template-columns:1fr;gap:22px}
  .ding{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center}
  .ding img{margin:0}
  .dingnaam{min-height:0}
  .dingzin{min-height:0}
}

.boekbeeld{margin:0}
.boekbeeld img{max-width:300px;margin-left:auto;border-radius:4px;
  box-shadow:0 18px 44px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25)}
@media (max-width:980px){
  .boekbeeld img{max-width:220px;margin:0}
}

/* ---- boekpagina: de inhoudstafel ---- */
.inhoudkolom{columns:2;column-gap:clamp(30px,5vw,64px);margin-top:34px}
.inhoudkolom > div{break-inside:avoid;margin:0 0 28px}
.inhoudkolom h3{margin:0 0 6px;font-size:17.5px;font-weight:500}
.inhoudkolom p{margin:0;font-size:16.5px;color:var(--bijtekst);max-width:none;line-height:1.75}
@media (max-width:700px){.inhoudkolom{columns:1}}

/* ---- boekpagina: de drie delen ---- */
.deelkaart .deelnr{font-size:34px;font-weight:600;line-height:1;color:var(--accent);
  margin:0 0 14px;max-width:none}
.deelkaart h3{margin:0 0 4px}
.deelkaart .deeltijd{font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);margin:0 0 14px;max-width:none}

/* ---- boekpagina: de foto en de platen uit het boek ---- */
.boekfoto{margin:0}
.boekfoto img{border-radius:4px;box-shadow:0 18px 44px rgba(22,36,47,.20),0 2px 6px rgba(22,36,47,.10)}
.plaat{margin:0}
.plaat img{width:100%;max-width:420px}
.plaat figcaption,.platjes figcaption{font-size:14.5px;color:var(--bijtekst);
  margin-top:12px;line-height:1.5}
.platjes{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:clamp(22px,3vw,44px);
  align-items:end;margin-top:clamp(34px,4vw,52px);
  border-top:1px solid var(--randje);padding-top:clamp(26px,3vw,36px)}
.platjes figure{margin:0;display:flex;flex-direction:column;justify-content:flex-end}
.platjes a{display:block}
.platjes figcaption .stil{font-size:13.5px}
.platjes img{width:auto;max-width:100%;max-height:130px}
.platjes .stil{margin:0;align-self:end}
.oefkop{font-family:Kanit,sans-serif;font-size:15px;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:500;color:var(--bijtekst);margin:0 0 14px}
@media (max-width:860px){
  .platjes{grid-template-columns:1fr 1fr}
  .platjes .stil{grid-column:1 / -1}
  .plaat img{max-width:100%}
}
/* onder de 640 staan ze onder elkaar. Naast elkaar op een telefoon worden de
   woorden in de platen onleesbaar klein. */
@media (max-width:640px){
  .platjes{grid-template-columns:1fr;gap:26px}
  .platjes img{max-height:none;width:100%}
  .platjes .stil{grid-column:auto}
}


/* ---- materiaalpagina ---- */
.materiaalbeeld{margin:0}
/* De drie covers staan als een waaier op de lichtste grond, met hun schaduw
   al in het beeld gebakken. Vandaar geen ronde hoeken en geen kader: dan zou
   je de rand van de jpg zien liggen. */
.materiaalbeeld picture{display:block}
.materiaalbeeld img{display:block;width:100%;max-width:640px;height:auto;margin-left:auto}
/* De kop van de materiaalpagina geeft de rechterkolom meer plaats dan gewoon,
   want daar liggen drie covers naast elkaar. Op 540 pixels worden dat drie
   postzegels waarop je de titels niet meer leest. */
.duo--materiaalkop{grid-template-columns:.88fr 1.12fr}
/* Het lijntje onder het laatste vinkje hoort bij dat vinkje, niet bij het
   lijstje. Zat het op de ul, dan stond het zes pixels lager dan de twee
   erboven en las het als een andere soort lijn. */
.vragen--kort{max-width:none;margin:0 0 6px;border-bottom:0;padding-bottom:0}
.vragen--kort li:last-child{border-bottom:1px solid var(--randje)}
.vragen--kort label{font-size:16.5px;padding:12px 8px;align-items:center}
/* de vinkjes staan in een inschrijfkaart, dus de labelstijl daarvan terugdraaien */
.inschrijf .vragen label{text-transform:none;letter-spacing:normal;font-weight:300;
  color:var(--donker);margin:0}
/* LET OP: .duo--materiaalkop hierboven staat LATER in dit bestand dan de
   mobiele regel voor alle duo's (zoek op "grid-template-columns:1fr;gap:34px").
   Even zwaar, dus wint de laatste, en daardoor bleef deze kop op een telefoon
   in twee kolommen staan: een tekstkolom van vijf woorden breed naast een
   postzegel. Vandaar dat hij hier opnieuw op één kolom gezet wordt. */
@media (max-width:980px){
  .duo--materiaalkop{grid-template-columns:1fr}
  .materiaalbeeld img{margin:0;max-width:100%}
}

/* De drie kaarten dragen de cover van hun pdf, klein en met een schaduw,
   zodat ze als een boekje op tafel liggen en niet als een banner. */
.deelkaart--cover .kaartbeeld{display:block;width:100%;max-width:200px;height:auto;
  border-radius:3px;margin:0 0 20px;
  box-shadow:0 12px 28px rgba(22,36,47,.22),0 2px 5px rgba(22,36,47,.12)}

/* Op /materiaal/ staat sinds 20 september een echte mockup op elke kaart: de
   cover met de bladzijden erachter, schaduw en al. Die schaduw zit in het
   beeld zelf, dus hier geen ronde hoeken en geen tweede schaduw, anders zie je
   de rand van de jpg liggen. En geen kap op 200 pixels meer: het beeld mag de
   volle breedte van de kaart hebben. */
.deelkaart--mockup picture{display:block}
.deelkaart--mockup .kaartbeeld{display:block;width:100%;height:auto;margin:0 0 18px}
/* Onder de 980 staan de drie kaarten onder elkaar en is een kaart bijna zo
   breed als de pagina. Zonder deze kap wordt een liggend beeld daar een
   banner en scrol je op een telefoon alleen nog langs plaatjes. */
@media (max-width:980px){.deelkaart--mockup .kaartbeeld{max-width:380px}}

/* Eén zin die niet mag wegzakken tussen de alinea's eromheen: een stil lijntje
   ervoor in de kleur van de randjes. Bewust geen oranje: dat is op deze pagina
   voor de knop en voor de maandagen in het raster. */
.eigenhandig{margin:20px 0 24px;padding-left:18px;border-left:2px solid var(--randje);
  font-size:18px;line-height:1.6;color:var(--donker)}
.strook--donker .eigenhandig{border-left-color:rgba(252,250,245,.28);color:var(--pagina)}
.strook--zand .eigenhandig{border-left-color:rgba(22,36,47,.30)}

/* De vier stijlen naast de test. Twee bij twee, op de lichtste grond zodat ze
   loskomen van de linnen kaart eromheen. */
.stijlvraag{font-size:16px;color:var(--bijtekst);margin:0;max-width:none}
.stijlvier{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:18px 0 0;padding:0;max-width:none}
.stijlvier li{background:var(--pagina);border:1px solid var(--randje);border-radius:14px;
  padding:14px 16px}
.stijlvier b{display:block;font-weight:500;font-size:16.5px;color:var(--donker)}
.stijlvier span{display:block;font-size:15px;color:var(--bijtekst);margin-top:2px}
@media (max-width:420px){.stijlvier{grid-template-columns:1fr;gap:10px}}

/* ---- de test ---- */
/* de test staat in een eigen smalle kolom, midden op de pagina, anders reist
   je oog te ver van de stelling naar de knoppen ernaast */
.wrap--test{max-width:880px}
.stellingen{margin:clamp(30px,4vw,44px) 0 0;padding:0;border:0}
.stelling{border:0;padding:0;margin:0;border-top:1px solid var(--randje)}
.stelling:last-of-type{border-bottom:1px solid var(--randje)}
.stelling > div{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,40px);align-items:center;padding:18px 0}
.stelling legend{font-size:17.5px;line-height:1.5;padding:0;float:left;width:100%}
.stelling legend::after{content:"";display:block;clear:both}
.stelnr{color:var(--bijtekst);font-size:14px;margin-right:10px}
.keuzes{display:flex;gap:8px;flex:none}
.keuzes label{position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:66px;padding:10px 14px;font-size:15px;font-weight:500;cursor:pointer;
  border:1.5px solid var(--randje);border-radius:12px;background:var(--pagina);
  transition:border-color .14s ease,background .14s ease,color .14s ease}
.keuzes label:hover{border-color:var(--accent)}
.keuzes input{position:absolute;opacity:0;width:1px;height:1px}
.keuzes input:checked + span{color:#fff}
.keuzes label:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
/* een ring rond de hele knop. De tweede regel is het vangnet voor
   browsers zonder :has(), daar komt de ring rond het woordje. */
.keuzes input:focus-visible + span{outline:2px solid var(--donker);outline-offset:6px}
.keuzes label:has(input:focus-visible){outline:3px solid var(--donker);outline-offset:3px}
.keuzes label:has(input:focus-visible) span{outline:none}
/* de knop staat rechts, onder de kolom waar je net geklikt hebt */
.testvoet{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,32px);flex-wrap:wrap;margin-top:clamp(28px,3.4vw,38px)}
.testvoet-rechts{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);
  margin-left:auto;flex-wrap:wrap}
.testvoet .knop[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* bleek, maar wel klikbaar en leesbaar: de klik brengt je naar de stelling die je oversloeg */
.knop--bleek{background:var(--pagina);color:var(--bijtekst);
  box-shadow:inset 0 0 0 1.5px var(--randje)}
.teller-test{margin:0;font-size:15.5px;color:var(--bijtekst)}
.stelling--leeg{position:relative;background:rgba(232,90,58,.05)}
.stelling--leeg::before{content:"";position:absolute;left:-14px;top:0;bottom:0;
  width:3px;border-radius:99px;background:var(--accent)}
.stelling--leeg .stelnr{color:var(--accent-diep);font-weight:600}
.melding{max-width:820px;margin:clamp(26px,3vw,34px) 0 0;padding:24px 26px;
  border:1.5px solid var(--accent);border-radius:20px;background:var(--pagina)}
.melding:focus{outline:none}
.melding h3{margin:0 0 10px}
.melding p{margin:0 0 14px}
.melding p:last-child{margin:0}
.zelfteller{margin-top:34px;border-top:1px solid var(--randje);padding-top:22px}
.zelfteller p{font-size:15.5px;color:var(--bijtekst)}

/* ---- de uitslag ---- */
/* de vier scores als staven. Geen assen, geen modeltaal: alleen hoe hoog je
   op elke stijl uitkomt. site.js vult de cijfers en sorteert de rijen. */
.staven{display:grid;gap:18px;max-width:500px}
.staaf{display:grid;grid-template-columns:42px 1fr auto;gap:4px 14px;align-items:baseline}
/* De vorm van de stijl, klein, naast zijn balk. Daarmee krijgt de tekening uit
   de kop hier zijn betekenis: je ziet de vier vormen naast elkaar. */
/* Let op: .vorm bestaat al voor de blokjes op /model/, met een lijn erboven.
   Vandaar stijlvorm en niet vorm. */
.stijlvorm{grid-row:1 / 3;align-self:center;width:42px;height:42px;display:block}
.stijlvorm .tk-ring{stroke-width:7}
.stijlvorm .tk-ring--jij{stroke-width:9}
.stijlvorm .tk-vast{stroke-width:5}
.stijlvorm .tk-pijl{stroke-width:7}
/* Alleen jouw eigen vorm houdt het accent. De andere drie staan helemaal in
   de randkleur, anders staan er vier oranje puntjes onder elkaar en valt de
   jouwe niet meer op. */
.staaf:not(.staaf--jij) .stijlvorm .tk-ring,
.staaf:not(.staaf--jij) .stijlvorm .tk-vast,
.staaf:not(.staaf--jij) .stijlvorm .tk-pijl{stroke:var(--randje)}
.staaf b{font-weight:500;font-size:17px}
.staaf .cijfer{font-weight:600;font-size:17px;color:var(--bijtekst);
  font-variant-numeric:tabular-nums}
.staaf .baan{grid-column:2 / -1;height:12px;border-radius:99px;background:var(--zand);
  position:relative;overflow:hidden}
.strook--zand .staaf .baan{background:var(--randje)}
.staaf .vul{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:var(--donker);transition:width .5s ease}
.staaf--jij b,.staaf--jij .cijfer{color:var(--accent-diep)}
.staaf--jij .cijfer{font-size:21px}
.staaf--jij .vul{background:var(--accent)}
.staaf--jij .baan{height:18px}
/* de tweede stijl bij een gelijkspel: wel aangeduid, minder luid */
.staaf--ook .vul{background:var(--accent);opacity:.5}
.staven[hidden]{display:none}
/* staan er twee even hoog, dan zegt deze melding waarom je op deze pagina
   uitkwam. Ze staat bij de staven, want daar zie je de gelijke cijfers. */
.gelijkmelding{margin:20px 0 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);
  font-size:16px;line-height:1.6;max-width:30em}
.gelijkmelding[hidden]{display:none}
.gelijkmelding .tekstlink{white-space:nowrap}
.gelijkfijn{display:block;margin-top:8px;font-size:14.5px;color:var(--bijtekst)}
/* geopend zonder de test: de namen blijven, de banen zijn leeg */
/* De regel die zegt wat deze pagina is voor wie de test niet deed. Staat op de
   donkere kop, dus in de zachtere tekstkleur van die grond, en met een streepje
   erboven zodat ze bij de titel hoort en niet bij de pitch eronder. */
.wieisdit{margin:clamp(18px,2vw,24px) 0 0;padding-top:clamp(16px,1.8vw,22px);
  border-top:1px solid rgba(252,250,245,.16);
  font-size:17px;line-height:1.6;color:var(--bijtekst-dk);max-width:34em}

/* Zonder scores: alleen de vier namen met hun tekeningetje, geen balken. Een
   lege balk leest als een fout, een rij namen leest als een inhoudsopgave van
   wat de test je geeft. De vorm mag dan niet meer over twee rijen lopen, want
   er is er nog maar één. */
.staven--leeg .cijfer,
.staven--leeg .baan{display:none}
.staven--leeg{gap:14px}
.staven--leeg .stijlvorm{grid-row:1;align-self:center}

/* De uitnodiging voor wie de test nog niet deed. Accentrand, want dit is de
   enige plek op de pagina waar zo iemand iets te doen heeft. */
.geentest{background:var(--pagina);border:2px solid var(--accent);
  border-radius:20px;padding:clamp(22px,2.6vw,30px);
  margin-top:clamp(22px,2.6vw,30px);max-width:500px}
.geentest h3{margin:0 0 10px}
.geentest p{font-size:16.5px;margin:0;max-width:none}
.geentest .geentestknop{margin-top:20px}
@media (prefers-reduced-motion:reduce){.staaf .vul{transition:none}}

/* decoratieve tekening naast een kop: open ringen, gestippelde bogen,
   en één ring in accent. LET OP: fill:none is niet optioneel, zonder die
   regel vult de browser elke cirkel zwart. */
.tekening{margin:0;display:flex;justify-content:center}
.tekening svg{display:block;width:100%;max-width:540px;height:auto}
.tk-ring{fill:none;stroke:var(--donker);stroke-width:3.6}
.tk-lijn{fill:none;stroke:var(--randje);stroke-width:2.8;stroke-linecap:round;
  stroke-dasharray:2 11}
.tk-ring--jij{stroke:var(--accent);stroke-width:4.4}
.tk-lijn--jij{stroke:var(--accent)}
/* Een doorlopende lijn in dezelfde tekening. De streepjeslijn zegt "dit hangt
   samen", de vaste lijn zegt "dit ligt vast". Vandaar twee klassen. */
.tk-vast{fill:none;stroke:var(--randje);stroke-width:2.6;stroke-linecap:round}
.tk-pijl{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;
  stroke-linejoin:round}
@media (max-width:860px){
  .tekening{max-width:340px;margin:8px 0 0}
}
/* ---- de kop van een uitslagpagina ----
   Deze strook staat op de donkere grond. Dat is bewust: de uitslag is het
   moment waar de hele test naartoe werkt, en op beige komt die naam binnen
   als zomaar een kop. De ringen staan hier dus in het licht getekend. */
.uitslagkop{max-width:22em}
.strook--uitslagkop h1{color:var(--pagina)}
.strook--uitslagkop .uitslagkop{font-size:clamp(38px,6.1vw,74px);line-height:1.04;
  max-width:14em;margin:0 0 16px}
.strook--uitslagkop .kernwoorden{color:var(--bijtekst-dk);margin-bottom:0}
.strook--uitslagkop .reflexzin{color:var(--pagina);margin:0 0 6px}
.strook--uitslagkop .scoreblok{margin:0}
.strook--uitslagkop .scoregetal{color:var(--accent);font-size:clamp(54px,6.6vw,82px)}
.strook--uitslagkop .scoreuitleg{color:var(--bijtekst-dk)}
/* score en reflexzin staan samen op één rij onder een accentlijn */
/* Eén accentlijn in de kop, en die staat onder de pitchzin, boven "Als
   leidinggevende". De score en de pitchzin staan er dus zonder lijn boven. */
.scorebalk{display:flex;align-items:flex-end;gap:clamp(20px,3vw,40px);
  margin:20px 0 0;padding-top:0}
.scorebalk[hidden]{display:none}
/* Op een donkere grond moeten de lijnen omkeren, anders staat er navy op
   navy en zie je alleen de streepjes. Dit stond eerst op .strook--uitslagkop,
   maar de stresstekening staat in strook 4, die wel donker is en geen
   uitslagkop. Vandaar nu op .strook--donker: elke tekening op een donkere
   strook klopt zo vanzelf. */
.strook--donker .tk-ring{stroke:var(--pagina)}
.strook--donker .tk-lijn,
.strook--donker .tk-vast{stroke:rgba(252,250,245,.38)}
.strook--donker .tk-ring--jij{stroke:var(--accent)}
@media (max-width:760px){
  .scorebalk{flex-wrap:wrap;gap:14px;margin:22px 0 26px}
}
.reflexzin{font-size:clamp(20px,2.1vw,23px);line-height:1.5;color:var(--donker);
  margin:0 0 10px}
.scoreblok{display:flex;align-items:center;gap:14px;margin:0 0 28px}
.scoreblok[hidden]{display:none}
.scoregetal{font-size:clamp(48px,5.6vw,64px);line-height:.9;font-weight:600;
  color:var(--accent-diep)}
.scoreuitleg{font-size:15px;line-height:1.35;color:var(--bijtekst)}
.uitslagblok h3{margin:clamp(30px,3.4vw,40px) 0 10px}
.uitslagblok .kolomkop{margin:clamp(30px,3.4vw,40px) 0 14px}

/* ---- uitslagpagina: de stroken van de lange teksten ---- */
/* Een tweede duo onder een brede kaart in dezelfde strook. Zonder deze marge
   plakken ze tegen elkaar. */
.duo--nastrook{margin-top:clamp(30px,3.6vw,44px)}
/* De brug naar het boek staat onder de groeistrook, achter een haarlijn, want
   het is een ander onderwerp dan de tekst erboven. */
.negenblok{margin-top:clamp(38px,4.4vw,52px);border-top:1px solid var(--randje);
  padding-top:clamp(26px,3vw,36px)}
.negenblok h2{margin-bottom:.6em}
/* De kaderzin staat boven de kracht en de valkuil, want ze zegt precies hoe
   die twee samenhangen: je sterkte is de reden dat je leidinggevende werd, en
   je valkuil is diezelfde sterkte op het verkeerde moment. Ze is voor alle
   vier de stijlen dezelfde. */
.kaderzin{margin:0 0 clamp(30px,3.6vw,44px);font-size:clamp(19px,1.9vw,21px);
  line-height:1.6;color:var(--donker);max-width:30em;
  border-left:3px solid var(--accent);padding-left:20px}

/* ---- hoe je team jou ziet: twee spreekwolkjes ----
   Dit is het enige blok op de pagina waar niet jij kijkt maar zij. Zo'n
   wissel van perspectief mag je zien, vandaar de volle breedte en de vorm van
   een uitspraak in plaats van een tekstkolom. */
.kolomkop--breed{max-width:none}
.wolken{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.8vw,34px);
  margin-top:clamp(26px,3vw,36px);align-items:start}
.wolk{position:relative;margin:0;background:var(--linnen);
  border:1px solid var(--randje);border-radius:22px;
  padding:clamp(22px,2.4vw,30px)}
.wolk--door{background:var(--zand)}
.wolkrol{font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;font-weight:500;
  color:var(--bijtekst);margin:0 0 14px;max-width:none}
.wolk blockquote{margin:0;font-family:"Playfair Display",Georgia,serif;font-style:italic;
  font-size:clamp(18px,1.8vw,21px);line-height:1.5;color:var(--donker)}
.wolk blockquote + blockquote{margin-top:16px;padding-top:16px;
  border-top:1px solid var(--randje)}
/* Het staartje: een gedraaid vierkantje met dezelfde grond en dezelfde rand,
   dat met zijn punt onder de wolk uitsteekt. */
.wolk::after{content:"";position:absolute;left:34px;bottom:-11px;width:20px;height:20px;
  background:inherit;border:1px solid var(--randje);border-top:0;border-left:0;
  border-bottom-right-radius:4px;transform:rotate(45deg)}
.wolkvoet{margin:clamp(26px,3vw,34px) 0 0;font-size:17px;color:var(--bijtekst);
  max-width:var(--lees)}
@media (max-width:760px){
  .wolken{grid-template-columns:1fr;gap:26px}
}

/* Na de drie vragen staat de lezer acht schermen onder het formulier. Deze
   regel is de enige weg terug. */
.terugcta{margin:clamp(32px,3.6vw,44px) 0 0;font-size:17.5px;color:var(--bijtekst);
  max-width:var(--lees)}

/* De opdracht is het enige blok op de pagina waar je iets moet doen. Daarom
   krijgt ze de zwaarste grond van de drie en geen kop maar een label. */
/* De breedte is afgestemd op de tekst erin. Over de volle breedte bleef de
   rechterhelft van het vak leeg en las het als een half ingevuld formulier. */
.opdracht{background:var(--zand);border-radius:20px;margin-top:clamp(34px,4vw,48px);
  padding:clamp(26px,3.4vw,40px);max-width:44em}
.opdracht .label{margin:0 0 16px}
.opdracht p{font-size:18px;line-height:1.72;max-width:var(--lees)}
.opdracht p + p{margin-top:14px}
.duo--uitslag .tekening svg{max-width:none}
.vragenkop{margin:clamp(38px,4.4vw,52px) 0 0}
/* de valkuil onder jouw stijl en de eigenschap die je ertegenover zet.
   De pijl wijst van de valkuil naar de eigenschap: dat is de richting van het
   boek, en dezelfde volgorde als de tegels op de home. Pijn eerst, antwoord
   daarna. */
.paarblok{display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(16px,2.6vw,34px);align-items:start;
  margin:clamp(30px,3.6vw,46px) 0 0;border:1px solid var(--randje);
  border-radius:20px;padding:clamp(22px,3vw,36px);background:var(--linnen)}
.strook--linnen .paarblok,.strook--zand .paarblok{background:var(--pagina)}
.paarkop{grid-column:1 / -1;margin:0 0 6px;font-size:clamp(19px,2vw,22px);
  font-weight:500;color:var(--donker)}
.paardeel{margin:0;min-width:0;height:100%}
.paarblok figure{display:flex;flex-direction:column}
/* de acht paarbeelden zijn strak om de inkt gesneden en allemaal even hoog,
   zodat de valkuil en de eigenschap op dezelfde lijn staan */
.paarbeeld{display:block;height:clamp(150px,17vw,250px);width:auto;max-width:100%;
  align-self:flex-start;margin-top:auto}
.paarblok figcaption{margin-top:12px}
.paarrol{display:block;font-size:12px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--bijtekst)}
.paarrol--eig{color:var(--accent-diep)}
.paarblok figcaption b{display:block;margin:4px 0 6px;font-weight:600;
  font-size:clamp(19px,2vw,22px);color:var(--donker)}
.paartekst{display:block;font-size:16px;line-height:1.6;color:var(--donker);
  max-width:26em}
.paarpijl{align-self:center;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding-top:60px}
.paarpijlwoord{font-size:12px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--accent-diep);white-space:nowrap}
.paarpijlbeeld{height:auto;fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* twee pijlen, want de richting van de beweging draait mee met de opbouw:
   naast elkaar op een breed scherm, onder elkaar op een telefoon */
.paarpijlbeeld--liggend{width:clamp(60px,8vw,110px)}
.paarpijlbeeld--staand{display:none;width:24px;height:52px}
.paarvoet{grid-column:1 / -1;margin:clamp(18px,2.4vw,28px) 0 0;
  padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--randje);
  font-size:16px;color:var(--bijtekst);max-width:none}
.paarvoet .tekstlink{margin-left:6px}
@media (max-width:760px){
  .paarblok{grid-template-columns:1fr;justify-items:start}
  .paarpijl{padding:6px 0 0;flex-direction:column;align-items:flex-start;gap:10px}
  .paarpijlbeeld--liggend{display:none}
  .paarpijlbeeld--staand{display:block;margin-left:30px}
  .paarbeeld{height:150px}
}
@media (max-width:520px){
  .paarblok{padding:18px}
  .paarblok figcaption{font-size:13px}
  .paarblok figcaption b{font-size:14.5px}
}
.andere{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
.andere div{border-top:1px solid var(--randje);padding-top:14px}
.andere b{display:block;font-weight:500;font-size:16.5px}
.andere span{font-size:15.5px;color:var(--bijtekst)}
@media (max-width:860px){
  .stelling > div{grid-template-columns:1fr;gap:14px;align-items:start}
  .keuzes label{flex:1;min-width:0}
  /* op een smal scherm staat alles onder elkaar, dus de knop weer vooraan */
  .testvoet-rechts{margin-left:0;flex-direction:row-reverse;width:100%;
    justify-content:flex-end;gap:18px}
  .andere{grid-template-columns:1fr}
}
.kernwoorden{font-size:13px;letter-spacing:2.4px;text-transform:uppercase;font-weight:500;
  color:var(--bijtekst);margin:-4px 0 22px}
.drievragen{margin:14px 0 0;padding:0 0 0 22px;max-width:var(--lees)}
.drievragen li{margin:0 0 8px;font-size:17px}
/* de drie vragen naast elkaar, zodat ze de breedte vullen in plaats van
   onderaan een kolom te hangen */
.drievragen--rij{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,34px);max-width:none;padding:0;list-style:none;
  margin-top:22px}
.drievragen--rij li{margin:0;padding-top:16px;border-top:2px solid var(--accent);
  font-size:17px;line-height:1.55}
@media (max-width:760px){.drievragen--rij{grid-template-columns:1fr;gap:16px}}
.voortgang{display:flex;gap:6px;margin:clamp(26px,3vw,34px) 0 0}
.voortgang span{height:4px;flex:1;border-radius:99px;background:var(--randje);
  transition:background .2s ease}
.voortgang span[data-aan]{background:var(--accent)}
.tekstknop{font-family:inherit;font-size:15.5px;color:var(--bijtekst);background:none;
  border:0;padding:6px 0;cursor:pointer;border-bottom:1.5px solid var(--randje)}
.tekstknop:hover{color:var(--donker);border-bottom-color:var(--accent)}
/* eigen display-regels winnen van de browserregel voor hidden, dus expliciet */
.stap[hidden],.knop[hidden],.voortgang[hidden],.melding[hidden]{display:none}
.stap .stelling:first-of-type{border-top:1px solid var(--randje)}
.stap .stelling:last-of-type{border-bottom:1px solid var(--randje)}
.stellingen{margin-top:clamp(24px,3vw,34px)}


/* ---- bedankpagina's -------------------------------------------------- */
/* Een stille knop naast de oranje. Zelfde vorm, minder lawaai. */
.knop--stil{background:none;color:var(--donker);
  box-shadow:inset 0 0 0 2px var(--randje)}
.knop--stil:hover{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-diep)}

/* Het uitklapblok voor wie het boek al heeft. <details> werkt zonder
   javascript, dus dit blijft ook bruikbaar als site.js niet laadt. */
.alhet{margin:34px 0 0;border-top:1px solid var(--randje);padding-top:18px;
  max-width:var(--lees)}
.alhet > summary{cursor:pointer;font-size:16px;color:var(--bijtekst);
  list-style:none;display:inline-flex;align-items:center;gap:8px}
.alhet > summary::-webkit-details-marker{display:none}
.alhet > summary::before{content:"+";font-weight:500;color:var(--accent);
  font-size:18px;line-height:1}
.alhet[open] > summary::before{content:"\2013"}
.alhet > summary:hover{color:var(--donker)}
.alhet p{margin:14px 0 0;font-size:16px}

/* De afzenderkaart naast de bevestiging, en de cover naast het boekblok. */
.bedankjan{margin:0;background:var(--linnen);border:1px solid var(--randje);
  border-radius:20px;padding:26px;max-width:360px;justify-self:end}
.bedankjan img{width:104px;height:104px;border-radius:50%;object-fit:cover;
  margin:0 0 16px;border:1px solid var(--randje)}
.bedankjan figcaption{font-size:16px;line-height:1.6;color:var(--donker)}
.bedankjan figcaption span{display:block;margin-top:12px;font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bijtekst)}
.duo--bedankt{align-items:center}
.bedankjan::before{content:"";display:block;width:34px;height:2px;
  background:var(--accent);margin:0 0 18px}
.bedankcover{margin:0;justify-self:end}
.bedankcover img{width:280px;height:auto;border-radius:4px;
  box-shadow:0 18px 40px rgba(22,36,47,.18)}
@media (max-width:860px){
  .bedankjan,.bedankcover{justify-self:start}
  .bedankcover img{width:200px}
}

/* ---- de balk die meeloopt ----
   Op een breed scherm blijft de balk bovenaan hangen en wordt hij slanker zodra
   je een stuk gescrold hebt. Op een telefoon staan de links op twee regels onder
   de naam. Zo'n balk is te hoog om een halve schermhoogte op te eisen, dus daar
   scrollt hij gewoon mee weg. */
@media (min-width:861px){
  /* zodat een sprong naar een anker niet onder de balk belandt */
  html{scroll-padding-top:76px}
  .balk{position:sticky;top:0;z-index:60}
  .balk .wrap{transition:min-height .18s ease}
  .balk--klein .wrap{min-height:56px}
  .balk--klein{box-shadow:0 6px 18px rgba(22,36,47,.07)}
}
@media (prefers-reduced-motion:reduce){.balk .wrap{transition:none}}

/* Op een heel smal toestel (320) passen de vier links maar net naast elkaar.
   Een maat kleiner en een kleinere tussenruimte houdt ze op één regel, zodat
   de balk ook daar twee regels blijft. */
/* ---- de balk in twee lagen ----
   Onder 710 pixels passen de naam, de vier links en de bestelknop niet meer op
   één regel. Dan gaat de balk in twee lagen: boven de naam met de knop op de
   paginagrond, eronder de vier links in een eigen strook op linnen, verdeeld
   over de volle breedte. Zo leest die rij als navigatie in plaats van als een
   losse regel tekst, en staat de enige handeling bovenaan waar het oog begint.
   De knop staat daarvoor absoluut, en dat mag alleen hier: zodra de links weer
   naast de naam passen, zou een losse knop er dwars overheen vallen. */
@media (max-width:710px){
  .merk{font-size:16px;letter-spacing:1.2px;margin-right:0;flex:0 0 auto}
  .balk .wrap{flex-wrap:wrap;gap:0;overflow:visible;position:relative;padding-bottom:0}
  .balk nav{flex:1 0 100%;flex-wrap:wrap;font-size:15px;justify-content:space-between;
    gap:0;margin:12px calc(var(--pad) * -1) 0;padding:10px var(--pad);
    background:var(--linnen);border-top:1px solid var(--randje)}
  .balk nav a{white-space:nowrap;padding:6px 0}
  .balk nav .navknop{position:absolute;top:6px;right:var(--pad)}
}
/* Op een tablet of een half venster is de strook breed genoeg om de vier links
   uit elkaar te trekken tot honderd pixels tussenruimte. Daar staan ze dus
   gewoon naast elkaar links, en verdeelt alleen een telefoon ze over de breedte. */
@media (min-width:521px) and (max-width:710px){
  .balk nav{justify-content:flex-start;gap:0 30px}
}

@media (max-width:365px){
  .merk{font-size:15px;letter-spacing:1px}
  .balk nav{font-size:14.5px}
  .balk nav .navknop{padding:6px 12px;font-size:14.5px;top:5px}
}

/* Bestellen is de enige echte handeling in de rij, dus die staat er als knopje.
   Staat na de regel voor aria-current, anders tekent die er een streep onder. */
.balk nav .navknop,
.balk nav .navknop[aria-current]{background:var(--accent);color:#fff;border-radius:10px;
  padding:9px 18px;border-bottom:0;line-height:1.25;transition:transform .12s ease}
.balk nav .navknop:hover{transform:translateY(-1px)}
.balk nav .navknop[aria-current]{background:var(--accent-diep)}
@media (max-width:860px){
  .balk nav .navknop{padding:7px 14px}
}

/* ---- de gegevenstabel op /media/ ---- */
.gegevens{border-collapse:collapse;margin:22px 0 0;width:100%;max-width:var(--lees)}
.gegevens th,.gegevens td{text-align:left;vertical-align:top;padding:9px 0;
  border-bottom:1px solid var(--randje);font-weight:400;font-size:16.5px;line-height:1.5}
.gegevens th{width:10.5em;padding-right:18px;color:var(--bijtekst)}
.gegevens tr:last-child th,.gegevens tr:last-child td{border-bottom:0}
@media (max-width:520px){
  .gegevens th{width:8em;font-size:15.5px}
  .gegevens td{font-size:15.5px}
}

/* de drie lezingen op /media/, op de donkere grond. Geen kaartjes, want een
   donkere kaart op een donkere grond is geen kaart. Een streepje volstaat. */
.spreek{border-top:2px solid var(--accent);padding-top:16px}
.spreek h3{margin:0 0 8px;font-size:19px;font-weight:500}
.spreek p{margin:0;color:var(--bijtekst-dk)}

/* ---- in de media, op /media/ ---- */
.medialijst{list-style:none;padding:0;margin:24px 0 0;max-width:var(--lees)}
.medialijst li{border-top:1px solid var(--randje);padding:22px 0 0;margin:0 0 22px}
.medialijst li:last-child{margin-bottom:0}
.medium{margin:0 0 6px;font-size:12.5px;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst)}
.medialijst h3{margin:0 0 10px;font-size:20px;font-weight:500;line-height:1.35}
.mediacitaat{font-family:"Playfair Display",Georgia,serif;font-style:italic;
  font-size:19px;line-height:1.5;margin:0 0 10px;color:var(--donker)}

/* Het vinkje "Ik heb het boek al in huis" onder een inschrijfformulier.
   Los van het rijtje erboven, want dat gaat over wat je wil ontvangen en dit
   over wie je bent. Zonder onderrand, want er komt geen tweede vraag na. */
.vragen--los{max-width:none;margin:14px 0 4px;border-bottom:0;padding-bottom:0}
.vragen--los label{font-size:16px;padding:10px 8px;align-items:center;color:var(--bijtekst)}
.vragen--los em{font-style:italic}

/* De regel onder de vinkjes op /materiaal/: wie er drie aankruist, krijgt drie
   mails. Dat staat er liever bij dan dat iemand zich afvraagt waarom. */
.fijn--vink{margin:8px 0 0;padding-left:8px}

/* ---- het kiesblok op /materiaal/ ---- */
/* Iemand koos er maar één omdat het formulier niet liet zien dat er meer mag.
   Links de uitnodiging en het landschap, rechts de kaart waarin je kiest.
   Het landschap staat als derde kind in het raster en niet in de tekstkolom,
   zodat het op een telefoon onder het formulier kan zakken in plaats van het
   naar beneden te duwen. */
.kiesblok{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,5vw,64px);align-items:start}
.kiesblok > *{min-width:0}
.kiesintro{grid-column:1;grid-row:1}
.inschrijf--kiezen{grid-column:2;grid-row:1 / span 2}
/* Het beeld blijft binnen de kantlijn: links lijnt het uit op de tekst erboven,
   rechts op de kolom. container-type staat er voor de handgeschreven zin, die
   meeschaalt met de breedte van dit beeld en niet met die van het scherm. */
.landschap{grid-column:1;grid-row:2;margin:6px 0 0;position:relative;
  container-type:inline-size}
/* LET OP: .wegwijzer bestond al, voor de zin onder een kop. Vandaar
   .landschap. En .keuzes bestond al voor de vinkjes op de testpagina, vandaar
   .kieslijst en .kiesvak. Dat zijn de vijfde en de zesde naamsbotsing in dit
   project, na .deel, .deelkaart, .tekening en .uitgelicht. Kijk een nieuwe
   klassenaam altijd eerst na. */
.kiesintro p:last-child{margin-bottom:0}

/* Het beeld is decoratief en heeft zijn beige ondergrond ingebakken, precies
   op --zand. Daarom geen doorzichtige png en geen schaduw: de rand vervaagt
   in de strook zelf. */
.landschap img{width:100%}
/* De zin schaalt mee met het beeld en niet met het scherm: anders staat ze op
   een smal venster te groot over de bergen. Vandaar cqi. De regel erboven is
   de terugval voor een browser die dat niet kent. */
.handschrift{position:absolute;left:3%;top:4%;margin:0;
  font-family:"Caveat",ui-rounded,"Segoe Script",cursive;
  font-weight:500;line-height:1.22;
  font-size:clamp(17px,3.2vw,38px);
  font-size:clamp(17px,5.6cqi,40px);
  color:var(--donker);transform:rotate(-4deg);transform-origin:left top;
  pointer-events:none}
.handschrift::after{content:"";display:block;width:4em;height:1.5px;
  margin:.18em 0 0 .25em;border-radius:2px;background:var(--accent);opacity:.8;
  transform:rotate(1.4deg)}

/* ---- de kaart waarin je kiest ---- */
.kiezenkop{margin:0 0 18px}
.inschrijf--kiezen h3{margin:0 0 3px}
/* de knop staat op de regel van de wijzer, niet op die van de kop */
.kiesrij{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.kieswijzer{margin:0;font-size:16px;color:var(--bijtekst);max-width:none}
.alledrie{font-family:inherit;font-size:16px;font-weight:500;color:var(--accent-diep);
  background:none;border:0;padding:2px 0;cursor:pointer;white-space:nowrap;
  border-bottom:1.5px solid rgba(186,44,17,.45);border-radius:0}
.alledrie:hover{border-bottom-color:var(--accent-diep)}
.alledrie:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- de drie keuzeblokken ---- */
/* Rustige vakjes, geen productkaarten: één lijntje, één achtergrond, en de
   hele rij is aanklikbaar. */
.kieslijst{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:none}
/* LET OP: .inschrijf label zet display:block en hoofdletters. Die regel weegt
   even zwaar als een losse klasse, dus staat alles wat ze moet overrulen hier
   achter .inschrijf. Anders valt het vinkje uit de rij en wordt het een streepje:
   een span met width krijgt pas maat als ze een flexkind is. */
.inschrijf .kiesvak{display:flex;align-items:flex-start;gap:14px;padding:15px 16px;
  cursor:pointer;background:var(--linnen);border:1px solid rgba(198,187,175,.6);
  border-radius:14px;transition:border-color .14s ease,background .14s ease;
  text-transform:none;letter-spacing:normal;font-weight:300;
  color:var(--donker);margin:0;font-size:17px}
.inschrijf .kiesvak:hover{border-color:rgba(237,91,63,.55)}
.inschrijf .kiesvak:has(input:checked){border-color:var(--accent);background:rgba(237,91,63,.07)}
.kieslijst input{position:absolute;opacity:0;width:1px;height:1px}
.kieslijst .vinkje{margin-top:1px}
.kieslijst input:checked + .vinkje{background:var(--accent)}
.kieslijst input:checked + .vinkje::after{content:"";position:absolute;left:8px;top:3px;
  width:6px;height:12px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kieslijst input:focus-visible + .vinkje{outline:2px solid var(--accent);outline-offset:3px}
.keuzetekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.keuzenaam{display:block;font-weight:500;line-height:1.35}
.keuzeuitleg{display:block;font-size:15px;line-height:1.45;color:var(--bijtekst)}

/* De foutmelding hoort bij de groep vinkjes en staat er dus onder, niet bij
   de knop. --accent-diep, want de gewone accentkleur is als tekst te licht. */
.keuzefout{margin:12px 0 0;font-size:15.5px;color:var(--accent-diep);max-width:none}
.keuzefout[hidden]{display:none}
.materiaalkeuze[data-fout] .kiesvak{border-color:var(--accent-diep)}

/* De vraag over het boek gaat over de bezoeker, niet over wat hij meeneemt.
   Vandaar een lijn en flink wat lucht ertussen. */
.boekvraag{margin-top:26px;padding-top:22px;border-top:1px solid var(--randje)}
.boekkop{margin:0 0 10px;font-size:17.5px;font-weight:500;color:var(--donker);max-width:none}
.inschrijf .kieslijst--los .kiesvak{background:none;border-color:transparent;padding:6px 2px;align-items:center}
.inschrijf .kieslijst--los .kiesvak:hover{border-color:transparent}
.inschrijf .kieslijst--los .kiesvak:has(input:checked){background:none;border-color:transparent}
.kieslijst--los .keuzenaam{font-weight:300}
.kieslijst--los em{font-style:italic}
.materiaalkeuze[data-fout] .kieslijst--los .kiesvak{border-color:transparent}

.inschrijf--kiezen .pijl{margin-left:6px}
.fijn--privacy{font-size:13.5px;margin-top:10px}

/* LET OP: deze media-regel moet ná .kiesblok hierboven staan, net als bij
   .duo--materiaalkop. Anders wint de bredere regel en blijft het blok op een
   telefoon in twee kolommen staan. */
@media (max-width:980px){
  .kiesblok{grid-template-columns:1fr;gap:30px}
  /* de volgorde op een telefoon: eerst de uitnodiging, dan kiezen, dan het
     landschap. Het beeld mag het formulier niet naar beneden duwen. */
  .kiesintro,.inschrijf--kiezen,.landschap{grid-column:1;grid-row:auto}
  .kiesintro{order:1}
  .inschrijf--kiezen{order:2}
  .landschap{order:3;margin-top:4px}
  .handschrift{left:3%;top:3%}
}
@media (max-width:560px){
  .inschrijf .kiesvak{padding:14px;gap:12px}
  .keuzeuitleg{font-size:14.5px}
  .kiezenkop{margin-bottom:16px}
}

/* ---- de verkooproute, 21 september ----
   Waar het materiaal vandaan komt, onder de kop van /materiaal/. */
.herkomst{margin:0 0 clamp(24px,2.8vw,32px)}
/* De stap na het boek op /model/: een regel onder de prijs, geen tweede blok. */
.volgstap{margin:12px 0 0;font-size:15.5px}
/* Wat met hidden verborgen staat, blijft verborgen, ook als een klasse het
   element een display geeft. Dat geldt voor de agendaregel, die pas zichtbaar
   mag worden als coachjan.be/agenda online staat, en voor de twee versies van
   de boekstrook op de bedankpagina's. */
[data-agenda][hidden],[data-boekaanbod][hidden],[data-boekinhuis][hidden]{display:none}
/* Op een telefoon brak "Bekijk het 30-dagenprogramma" in de stille kaart af op
   het streepje: "30-" op de ene regel, "dagenprogramma" op de volgende. Een
   knop over de volle breedte met wat minder zijlucht past op 360 pixels op
   één regel. */
@media (max-width:560px){
  .oefenkaart .knop{display:block;text-align:center;padding-left:14px;padding-right:14px}
}

/* ---- /bestel/, 21 september ----
   De verzendregel onder de prijs: de kassa toont voor België meteen 42,99, dus
   de 8 euro staat hier al vóór iemand klikt. Kleiner dan de prijs, niet grijzer
   dan leesbaar. */
.verzendregel{margin:0 0 14px;font-size:15px;color:var(--bijtekst);max-width:none}
.aanbod .verzendregel{margin:-2px 0 16px}

/* Het tweede bestelmoment onderaan: compact, één kaart, tekst links en de
   koop rechts. Zelfde oranje rand als het bestelblok bovenaan, zodat je ziet
   dat het dezelfde bestelling is. */
.bestelslot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(22px,4vw,56px);align-items:center;background:var(--pagina);
  border:2px solid var(--accent);border-radius:20px;padding:clamp(24px,3vw,40px)}
.bestelslot h2{margin:0 0 10px}
.bestelslot-tekst p{margin:0}
.bestelslot-titel{margin:0 0 2px;font-size:17px;max-width:none}
.bestelslot .knop{margin-top:4px}
@media (max-width:760px){
  .bestelslot{grid-template-columns:1fr}
}

/* Afdrukken of als pdf bewaren: de logo's van de boekhandels in kleur en vol,
   zonder de grijsfilter die op het scherm de aandacht bij het eigen bestelblok
   houdt. Sommige pdf-motoren lieten ze met die filter helemaal weg. */
@media print{
  .winkel{filter:none;opacity:1}
}

/* ---- 30 dagen groeien ---- */
/* Het aanbod staat op de uitslagpagina en op /30dagen/ zonder foto ernaast.
   Eén kolom dus, en de tekst mag dan niet over de volle breedte lopen. */
.aanbod--enkel{grid-template-columns:1fr;max-width:640px}
.aanbod--enkel .wat{max-width:var(--lees)}
.aanbod .startdatum{font-size:15px;color:var(--accent-diep);font-weight:500;
  letter-spacing:1.4px;text-transform:uppercase;margin:0 0 16px;max-width:none}

/* ---- de eerstvolgende startmaandag ----
   30 dagen loopt door: wie vandaag instapt, begint op zijn eerstvolgende
   maandag. De datum komt uit site.js en staat nergens in de html, want een
   datum in de html wordt vanzelf fout. Het blok staat op hidden tot javascript
   hem gevuld heeft; de zin die er altijd naast staat blijft ook zonder
   javascript waar. Rustig van toon: dit is een mededeling en geen afteller. */
.startregel{margin:14px 0 0;font-size:15.5px;color:var(--bijtekst);max-width:none}
.startregel b{font-weight:500;color:var(--donker)}
.strook--donker .startregel{color:var(--bijtekst-dk)}
.strook--donker .startregel b{color:var(--pagina)}
/* In de aanbodkaart neemt de datum de plaats in van de tijdloze regel, in
   dezelfde vorm. Daar staat geen "nog zoveel dagen" bij: dat hoort één keer op
   een pagina te staan en dat is in de kop. */
.aanbod .startdatum[data-startblok] b{font-weight:500}
/* .pitch heeft de donkere letterkleur vastgezet. Op de donkere kop van
   /30dagen/ verdween die zin daardoor bijna in de achtergrond. */
.strook--donker .pitch{color:var(--pagina)}
/* De aanbodkaart staat op de lichte grond, ook binnen een donkere strook.
   Zonder deze regels erven de kop en de prijs de lichte letterkleur van die
   strook en verdwijnen ze in de kaart. Dat kostte me een ronde. */
.strook--donker .aanbod h3,.strook--donker .aanbod .prijs{color:var(--donker)}
.strook--donker .aanbod .wat{color:var(--donker)}
.strook--donker .aanbod .anker{color:var(--bijtekst)}

/* Kicker boven een kaart of een traject: kleiner dan .label, zonder streepje. */
.weekkop{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;
  font-weight:500;color:var(--bijtekst);margin:0 0 10px;max-width:none}
.weeklijst{list-style:none;margin:0;padding:0;counter-reset:week}
.weeklijst li{position:relative;padding-left:36px;margin:0 0 14px}
.weeklijst li:last-child{margin-bottom:0}
/* Eerst stond hier het woord "Week" plus het cijfer. Op een telefoon werd dat
   label breder dan de inspringing en schoof de titel eroverheen. Nu een rond
   cijfer, en het woord week staat in de tekst erboven. */
.weeklijst li::before{counter-increment:week;content:counter(week);
  position:absolute;left:0;top:.05em;width:24px;height:24px;border-radius:50%;
  background:var(--zand);color:var(--accent-diep);font-size:13px;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.weeklijst b{display:block;font-weight:500;font-size:16.5px;color:var(--donker);
  line-height:1.4}
.weeklijst span{display:block;font-size:15.5px;color:var(--bijtekst);margin-top:3px;
  line-height:1.6}

/* Wat er elke week in de mail zit. Twee kolommen vinkjes, want het is een
   opsomming en geen tekst om te lezen. */
.inzit{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;
  margin:24px 0 0;padding:0;max-width:none}
.inzit li{position:relative;padding-left:24px;font-size:17px;line-height:1.6}
.inzit li::before{content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--accent)}
@media (max-width:620px){.inzit{grid-template-columns:1fr}}

/* De praktische regels: label links, antwoord rechts. */
.praktisch{list-style:none;margin:24px 0 0;padding:0;max-width:var(--lees)}
.praktisch li{display:grid;grid-template-columns:150px 1fr;gap:8px 22px;
  border-top:1px solid var(--randje);padding:16px 0}
.praktisch b{font-weight:500;font-size:12.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--bijtekst);padding-top:3px}
.praktisch span{font-size:17px;line-height:1.6}
/* De datum staat binnen de span van een praktische regel. Een <b> zou daar
   het labeltje in kapitalen worden, vandaar een eigen element. */
.startdag{font-style:normal;font-weight:500;color:var(--donker)}
@media (max-width:560px){.praktisch li{grid-template-columns:1fr;gap:2px}}

/* Het aanbodblok op de vier uitslagpagina's. Staat op zand tussen twee lichte
   stroken, zodat het opvalt zonder een tweede donkere band te worden naast
   die van het boek eronder. */
.verderblok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);
  align-items:center}
@media (max-width:860px){.verderblok{grid-template-columns:1fr}}

/* ---- /30dagen/: de dertig dagen in de kop ----
   Zeven kolommen, dertig genummerde vakjes. De maandagen in het accent met
   een envelopje, de andere dagen worden dag na dag lichter (--vul staat per
   vakje in de html, van 0,05 op dag 1 tot 0,34 op dag 30): dat is de
   groei die de kop belooft. Alles in css, geen beeldbestand. */
.duo--dagen{grid-template-columns:1.05fr .95fr;align-items:center}
.dagen{max-width:440px;margin-left:auto;width:100%}
.dagen-kop{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:10px;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:500;
  color:var(--bijtekst-dk);text-align:center}
.dagen-rooster{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.dag{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:8px;
  border:1.5px solid rgba(252,250,245,.32);background:rgba(252,250,245,var(--vul,.07));
  font-style:normal;font-size:13px;font-weight:500;color:var(--pagina);position:relative;overflow:hidden}
.dag--mail{color:#fff}
.dag--mail{background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='1.5' y='1.5' width='21' height='15' rx='2.5' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cpath d='M2.5 3.5l9.5 6.5 9.5-6.5' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center 3px;background-size:34% auto;align-items:flex-end;padding-bottom:3px;line-height:1}
/* vrijdag: de vraag hoe het ging. Open kader in het accent, cijfer in het accent. */
.dag--vraag{border:2px solid var(--accent);color:var(--accent);background:rgba(252,250,245,.04)}
.dagen-zin{margin:22px 0 0;font-size:15.5px;color:var(--bijtekst-dk);max-width:none}
.dagen-zin b{color:var(--pagina);font-weight:500}
@media (max-width:980px){
  .duo--dagen{grid-template-columns:1fr}
  .dagen{margin-left:0;max-width:400px}
}

/* ---- /30dagen/: waarom en wat, naast elkaar ---- */
.duo--waarom{grid-template-columns:1.05fr .95fr}
.mailkaart h3{margin-bottom:8px}
.mailkaart p{max-width:none}
.inzit--kolom{grid-template-columns:1fr;gap:10px;margin-top:18px}
.inzit--kolom li{font-size:16.5px}
.mailkaart-vrijdag{margin:22px 0 0;padding:16px 18px;border-left:3px solid var(--accent);background:var(--linnen);border-radius:0 12px 12px 0;font-size:16.5px}
.mailkaart-vrijdag b{font-weight:500}
.mailkaart-stil{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--randje)}
@media (max-width:980px){.duo--waarom{grid-template-columns:1fr}}

/* ---- /30dagen/: de kiezer met de vier trajecten ----
   Vier tabbladen met de stijlvorm erin, en één traject tegelijk in beeld.
   Zonder javascript blijven de tabbladen verborgen en staan alle vier de
   trajecten onder elkaar. */
.kies{margin-top:clamp(26px,3vw,36px)}
.kies-vraag{font-size:15.5px;color:var(--bijtekst);margin:0 0 12px;max-width:none}
.kies-vraag--eigen{color:var(--accent-diep);font-weight:500}
.kies-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.kies-tab{display:grid;grid-template-columns:42px 1fr;gap:2px 14px;align-items:center;align-content:start;
  text-align:left;font-family:inherit;cursor:pointer;
  background:var(--linnen);border:1.5px solid var(--randje);border-radius:14px;
  padding:14px 16px;color:var(--donker);transition:border-color .12s ease,background .12s ease}
.kies-tab .stijlvorm{grid-row:1 / 3}
.kies-tab:hover{border-color:var(--accent)}
.kies-tab:focus-visible{outline:3px solid var(--donker);outline-offset:2px}
.kies-tab[aria-selected=true]{background:var(--pagina);border:2px solid var(--accent);padding:13px 15px}
.kies-naam{font-size:16.5px;font-weight:500;line-height:1.25}
.kies-zin{font-size:13.5px;color:var(--bijtekst);line-height:1.35}
/* de vorm van een tabblad dat niet gekozen is, staat in het randje */
.kies-tab:not([aria-selected=true]) .stijlvorm .tk-ring,
.kies-tab:not([aria-selected=true]) .stijlvorm .tk-vast,
.kies-tab:not([aria-selected=true]) .stijlvorm .tk-pijl{stroke:var(--randje)}
.kies-tabs[hidden]{display:none}
.traject{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,4vw,56px);
  align-items:center;background:var(--linnen);border:1px solid var(--randje);
  border-radius:20px;padding:clamp(24px,3vw,40px)}
.traject + .traject{margin-top:18px}
.traject[hidden]{display:none}   /* .traject zet zelf een display, dus de browserregel voor hidden wint niet */
.traject-vorm{width:100%;height:auto;display:block}
.traject-tekst h3{margin:0 0 2px;font-size:22px}
.traject .stijlzin{font-size:15.5px;color:var(--bijtekst);margin:0 0 14px;max-width:none}
/* per stijl één zin over dag 30: de bestemming, boven de vier opdrachten */
.traject .dag30{font-size:17px;line-height:1.55;margin:0 0 20px;padding:12px 16px;max-width:none;
  border-left:3px solid var(--accent);background:var(--pagina);border-radius:0 12px 12px 0}
.aanbod .garantie{margin:14px 0 0;font-size:14.5px;color:var(--bijtekst);max-width:none}
.traject .weeklijst li::before{background:var(--pagina)}
.traject .weeklijst b{max-width:none}
.kies-voet{margin-top:clamp(22px,2.6vw,30px)}
@media (max-width:860px){
  .kies-tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kies-tab{min-width:0}
  .traject{grid-template-columns:1fr;gap:22px}
  .traject-beeld{max-width:260px}
}
@media (max-width:520px){
  .kies-tabs{gap:8px}
  .kies-tab{padding:12px;grid-template-columns:36px 1fr}
  .kies-tab[aria-selected=true]{padding:11px}
  .kies-tab .stijlvorm{width:36px;height:36px}
  .kies-zin{display:none}
  .kies-naam{font-size:15px}
}
/* onder de 365 past "De Ruimtemaker" niet meer naast de vorm in een halve kolom */
@media (max-width:365px){
  .kies-tabs{grid-template-columns:minmax(0,1fr)}
  .kies-tab{grid-template-columns:36px 1fr}
}

/* ---- /30dagen/: voor wie, met het praktische ernaast ---- */
.duo--voorwie{grid-template-columns:1.05fr .95fr}
.niet-kop{margin:26px 0 8px}
.praktischkaart .praktisch{margin-top:6px;max-width:none}
.praktischkaart .praktisch li{grid-template-columns:118px 1fr;gap:6px 18px;padding:14px 0}
.praktischkaart .praktisch li:first-child{border-top:0;padding-top:0}
.praktischkaart .praktisch span{font-size:16.5px}
@media (max-width:980px){.duo--voorwie{grid-template-columns:1fr}}
@media (max-width:560px){.praktischkaart .praktisch li{grid-template-columns:1fr;gap:2px}}

/* ---- doorsturen: het berichtje dat al klaarstaat ----
   De zin zat vroeger alleen in een data-attribuut. De bezoeker las dus
   "de zin staat al klaar" en zag niets staan. Nu staat ze er echt, met het
   adres eronder, zodat "kopieer" ook een zichtbaar voorwerp heeft. */
.doorstuurkaart{background:var(--pagina);border:1px solid var(--randje);
  border-radius:14px;padding:clamp(22px,2.6vw,30px)}
.doorstuurzin{margin:0 0 8px;font-size:18px;line-height:1.65;color:var(--donker)}
.doorstuuradres{margin:0 0 22px;font-size:15px;color:var(--bijtekst)}
.doorstuurkaart .deelrij{gap:8px}
.doorstuurmeer{margin:22px 0 0;font-size:15.5px;color:var(--bijtekst)}
/* binnen de doorstuurrij wint .doorstuur p met margin:0, vandaar deze */
.doorstuur .doorstuurmeer{margin:10px 0 0;font-size:15px}
@media (max-width:520px){
  .doorstuurkaart .deelknop{flex:1 1 100%;justify-content:center}
}


/* ---- de hero op een telefoon: woorden eerst, cover daarna ----
   Gemeten op 390 bij 650, wat een telefoon toont nadat de browser zijn eigen
   balken erafgepakt heeft. Met de cover bovenaan ging er 297 van die 650 naar
   het beeld, haalde de titel net het scherm en viel de belofte eronder weg.
   Nu leest iemand eerst waar het over gaat en bevestigt de cover dat daarna,
   nog altijd volledig binnen datzelfde scherm.

   De tekst en de cover zijn twee kolommen van .duo, dus om ze op een telefoon
   door elkaar te kunnen zetten laten we de tekstkolom zelf verdwijnen met
   display:contents. Kent een browser dat niet, dan blijft de gewone volgorde
   staan: eerst alle tekst, dan de cover. Ook prima. */
@media (max-width:980px){
  /* align-items:stretch moet er expliciet bij. .duo zet align-items:center,
     en dat betekent in een rij verticaal centreren maar in een kolom
     horizontaal. Zonder deze regel kreeg elk blok de breedte van zijn eigen
     inhoud en stond het gecentreerd: de titel begon op 48 terwijl de tekst
     eronder op 28 begint. Op een smal scherm valt dat niet op omdat alles de
     volle breedte vult, op 430 wel. */
  .hero .wrap.duo{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero .wrap.duo > div{display:contents}
  .hero h1{order:1}
  .hero .pitch{order:2;margin-bottom:22px}
  /* De cover staat links, op dezelfde kantlijn als de titel, de tekst en de
     knop. Dan loopt er een rechte lijn van boven naar beneden door het hele
     scherm.

     Rechts is geprobeerd en weer teruggedraaid. De rechterrand van de cover
     lag dan precies op de rechterrand van de tekstkolom, wat op papier een
     uitlijning is, maar die rand bestaat niet voor een lezer: lopende tekst
     eindigt rafelig, elke regel ergens anders. Je lijnt dus uit op iets wat
     alleen in een meting staat. Gecentreerd viel om dezelfde reden af, daar
     lag de linkerrand op 100 terwijl al de rest op 28 begint. */
  .hero figure{order:3;margin:4px 0 26px;align-self:flex-start}
  .hero img{max-width:190px}
  .hero p:not(.pitch):not(.na-knop){order:4}
  .hero .knop{order:5;align-self:flex-start}
  .hero .na-knop{order:6}
}

/* ---- heel smalle telefoons ----
   Op 320 pixels is de tekstkolom 264 breed, en een woord als
   "leiderschapsstijl" of "voorkeursstijl" past daar niet in op 34 pixels.
   Dat woord stak buiten het scherm en de hele pagina kreeg een horizontale
   schuifbalk, op /test/, /30dagen/ en /materiaal/.

   Eerst geprobeerd met hyphens:auto. Dat hangt af van een woordenboek in de
   browser: is het er niet, dan breekt het woord zonder streepje af
   ("leidinggeven / de") en dat is lelijker dan het probleem. Een maat kleiner
   werkt overal hetzelfde. Boven 365 verandert er niets. */
@media (max-width:365px){
  h1{font-size:29px}
  h2{font-size:23px}
}

/* ---- 320 pixels, de smalste telefoons die nog rondgaan ----
   Daar liep de naam linksboven (28..206) onder de bestelknop (197..292) en
   raakten de vier navigatielinks elkaar: 94..147 en dan meteen 148..223, dus
   nul pixels ertussen. Op 360 en 390 is er niets aan de hand, vandaar een
   eigen grens op 340. Gemeten, niet geschat. */
@media (max-width:340px){
  .merk{font-size:13.5px;letter-spacing:.6px}
  .balk nav{font-size:13.5px}
  .balk nav .navknop{padding:6px 10px;font-size:13.5px}
}


/* ---- lezers: twee stroken plus het blok om zelf iets te schrijven ---- */
.label--li{color:#0A66C2}
.label--li::before{background:#0A66C2}
.label--sociaal{color:#C13584}
.label--sociaal::before{background:#C13584}
.label img{width:19px;height:19px;display:block}

.merkje{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--donker);background:var(--pagina);
  border:1px solid var(--randje);padding:6px 12px;border-radius:8px;white-space:nowrap}
.merkje img{width:18px;height:18px;display:block;flex:none}

.bronrij{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,24px);
  margin-top:clamp(34px,4vw,48px);align-items:stretch}
.bronkaart{background:var(--pagina);border:1px solid var(--randje);border-top:3px solid #0A66C2;
  border-radius:20px;padding:clamp(20px,2vw,26px);display:flex;flex-direction:column}
.bronkop{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.bronkaart .gezicht{width:56px;height:56px;font-size:18px}
.bronnaam{margin:0;font-size:14px;color:var(--bijtekst);line-height:1.35;max-width:none}
.bronnaam strong{display:block;color:var(--donker);font-weight:500;font-size:16.5px}
.bronzegt{margin:0 0 22px;font-size:16.5px;line-height:1.62;max-width:none}
.bronvoet{margin-top:auto;padding-top:16px;border-top:1px solid var(--randje);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bronvoet .tekstlink{font-size:14.5px}

.fotorij{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(34px,4vw,48px);align-items:start}
.lezersfoto{margin:0;background:var(--pagina);border:1px solid var(--randje);
  border-radius:18px;overflow:hidden}
.beeldvak{position:relative;aspect-ratio:4/5;background:var(--zand)}
.beeldvak > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beeldvak .merkje{position:absolute;left:12px;top:12px;z-index:2;background:#fff;
  border-color:transparent;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.lezersfoto figcaption{padding:15px 16px 17px;font-size:14.5px;color:var(--bijtekst);line-height:1.45}
.lezersfoto figcaption strong{display:block;color:var(--donker);font-weight:500;font-size:16px}

.meeschrijven{background:var(--pagina);border:1px solid var(--randje);border-radius:22px;
  padding:clamp(26px,3vw,40px);max-width:760px}
.meeschrijven h3{margin:0 0 14px;font-size:clamp(23px,2.4vw,28px);font-weight:500}
.meeschrijven p{margin:0;max-width:none}
.meeschrijven .zinkader{margin:24px 0 26px;background:var(--linnen);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 22px;font-family:"Playfair Display",Georgia,serif;
  font-style:italic;font-size:clamp(17px,1.8vw,19.5px);line-height:1.5}
.knoprij{display:flex;gap:14px;flex-wrap:wrap}
.knop--stil{background:transparent;color:var(--donker);box-shadow:inset 0 0 0 1.5px var(--randje)}
.knop--stil:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
/* De stille knop op een donkere strook: lichte tekst en een lichte rand. Zonder
   deze regel staat er donkerblauwe tekst op donkerblauw. Sinds 21 september is
   dit de vorm voor elke gratis of volgende stap, ook in de donkere modelstrook:
   volle oranje knoppen zijn er voor het boek. */
.strook--donker .knop--stil{color:var(--pagina);box-shadow:inset 0 0 0 1.5px rgba(252,250,245,.5)}
.strook--donker .knop--stil:hover{color:var(--pagina);box-shadow:inset 0 0 0 1.5px var(--accent)}
.strook--linnen .meeschrijven,.strook--zand .meeschrijven{background:var(--pagina)}

@media (max-width:900px){
  .bronrij{grid-template-columns:1fr}
  .fotorij{grid-template-columns:repeat(2,1fr)}
}

/* ---- de poort tussen de test en de uitslag ----
   Na stelling 16 vragen we naam en adres voor we de uitslag tonen. De link
   eronder slaat dat over en geeft dezelfde pagina. Klein maar niet verstopt:
   hij staat op zijn eigen regel, onder de kaart, in de bijtekstkleur. */
.poort{scroll-margin-top:90px}
.poortover{margin:clamp(22px,2.6vw,30px) 0 0;font-size:15.5px;color:var(--bijtekst)}

/* ---- de bevestiging bovenaan de uitslag ---- */
/* ---- de drie delen van de uitslagpagina ----
   De pagina telt twaalf stroken en ruim tweeduizend woorden. Elke strook had
   hetzelfde gewicht (labeltje, kop, tekst, volgende), dus niets zei "hier
   begint een nieuw hoofdstuk" en las het als een trap zonder overlopen. De
   afwisselende achtergrondkleuren doen dat werk niet: die lezen als strepen.
   Deze kop staat boven de eerste strook van elk deel, op dezelfde grond, zodat
   er geen extra streep bijkomt. LET OP: .deelkaart en .deel bestonden al voor
   deel 1, 2 en 3 van het boek, vandaar de naam hoofdstuk. */
/* Eerste poging was een klein labeltje in hoofdletters. Dat werkte niet: het
   stond pal boven de labeltjes van de stroken zelf, even klein en even grijs,
   dus het las als een herhaling in plaats van als een niveau hoger. Op een
   verkleinde afdruk van de hele pagina waren de drie koppen niet terug te
   vinden. Nu een echte hoofdstukopening: een groot cijfer in de accentkleur en
   een titel die boven de koppen van de stroken uitkomt. Terughoudend is hier
   hetzelfde als onzichtbaar. */
.hoofdstuk{grid-column:1 / -1;display:flex;align-items:baseline;
  gap:clamp(16px,2vw,26px);margin:0 0 clamp(34px,4vw,54px)}
.hoofdstuknr{flex:none;font-size:clamp(46px,5.4vw,74px);line-height:.86;
  font-weight:500;color:var(--accent);letter-spacing:-.02em}
.hoofdstuktitel{margin:0;max-width:none;font-weight:600;color:var(--donker);
  font-size:clamp(26px,3.3vw,41px);line-height:1.12;letter-spacing:-.01em}
.strook--donker .hoofdstuktitel{color:var(--pagina)}
@media (max-width:520px){
  .hoofdstuk{gap:14px}
}

/* ---- één zin die zegt wat er komt ----
   Onderaan de kop, zodat wie begint te scrollen weet waarvoor. */
.wegwijzer{margin:clamp(26px,3vw,34px) 0 0;padding-top:clamp(20px,2.2vw,26px);
  border-top:1px solid rgba(252,250,245,.16);
  font-size:16px;line-height:1.65;color:var(--bijtekst-dk);max-width:36em}

/* ---- een zin die uit de tekst springt ----
   Doet in een strook zonder beeld hetzelfde werk als een plaatje: ze breekt de
   muur en geeft het oog een rustpunt. Groter dan de lopende tekst, buiten de
   leeskolom, met een streep in de accentkleur ervoor.
   LET OP: .uitgelicht bestond al, voor het blok met een portret en een quote.
   Vandaar .kernzin. Dat is de vierde naamsbotsing in dit project, na .deel,
   .deelkaart en .tekening. Kijk een nieuwe klassenaam altijd eerst na. */
.kernzin{margin:clamp(30px,3.4vw,42px) 0 0;padding-left:clamp(18px,2vw,26px);
  border-left:3px solid var(--accent);
  font-size:clamp(19px,2.1vw,24px);line-height:1.42;color:var(--donker);
  max-width:24em;font-weight:400}

/* kaart en portret samen in de rechterkolom */
.kaartkolom{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,30px)}
.kaartkolom .afzender{margin:0;padding-top:0;border-top:0}

/* ---- de tekening onder de kop bij strook 4 ----
   Kleiner dan de tekening in de kop van de pagina en links uitgelijnd, zodat
   ze onder de kop hangt in plaats van in het midden van de kolom te zweven.
   De tweede ring in de accentkleur is de signatuur van "onder druk": dunner
   dan de kern en halfdoorzichtig, zodat het als spanning leest en niet als
   een tweede cirkel. */
.tekening--stress{display:block;margin:clamp(26px,3vw,38px) 0 0}
.tekening--stress svg{width:100%;max-width:400px}
.tk-ring--druk{stroke-width:2.2;opacity:.5}
.tk-ring--druk2{stroke-width:1.6;opacity:.26}
@media (max-width:980px){
  .tekening--stress{margin-top:22px}
  .tekening--stress svg{max-width:320px;margin:0 auto}
}

/* ---- de kaart met wat er onderweg is ----
   Staat in strook 7b, op de plek waar anders het inschrijfformulier staat. Ze
   heeft dezelfde vorm als die kaart maar zonder de accentrand, want er valt
   hier niets meer te doen. Het spamadvies staat onderaan, achter een lijntje:
   het geldt voor een kleine minderheid en hoeft niet even luid te klinken als
   de bevestiging zelf. */
.klaarkaart{background:var(--pagina);border:1px solid var(--randje);
  border-radius:20px;padding:30px}

.klaarkaart h3{margin-bottom:12px}
.klaarkaart .pakket{margin:16px 0 0}
.klaarkaart .fijn{margin:22px 0 0;padding-top:18px;
  border-top:1px solid var(--randje);font-size:14px;line-height:1.6;
  color:var(--bijtekst)}

/* ---- de vier stijlen naast de poort ----
   De linkerkolom stond voor twee derde leeg naast een kaart van negenhonderd
   pixels hoog. Deze rij vult die ruimte met iets dat werk doet: je ziet welke
   vier er in het spel zijn, precies op het moment dat je wil weten welke van de
   vier jij bent. Dezelfde tekeningen als op de uitslagpagina, in de randkleur,
   want welke het is weten we hier nog niet. */
.poortkop{margin:clamp(26px,3vw,34px) 0 0;font-size:15.5px;color:var(--bijtekst)}
.poortvier{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:16px 12px;
  max-width:460px}
/* Een vaste rij van 36 pixels voor de tekening, anders gaan de vier namen op
   verschillende hoogtes staan naargelang de vorm hoog of breed is. */
.poortvier li{display:grid;grid-template-rows:36px auto;gap:8px;
  justify-items:start;font-size:14px;line-height:1.35;color:var(--bijtekst)}
.poortvier .stijlvorm{width:36px;height:36px;display:block}
.poortvier .tk-ring,.poortvier .tk-vast,.poortvier .tk-pijl{stroke:var(--randje)}

/* Op een telefoon passen er geen vier naast elkaar: dan viel de Ruimtemaker
   alleen op een tweede regel, drie plus een. Twee bij twee leest als een
   bewuste indeling. */
@media (max-width:520px){
  .poortvier{grid-template-columns:repeat(2,1fr);max-width:none}
}

/* ---- de oefenstrook: 30 dagen als volgende stap ----
   Staat op de home, onderaan /materiaal/ en in een stille versie op /boek/.
   Geen nieuwe vormtaal: het is het raster van dertig dagen uit de kop van
   /30dagen/, met het labeltje, de kop, de knop en de na-knop die overal al
   staan. Daar staat het raster op donker, hier tussen lichte inhoud, dus is
   er een lichte tegenhanger. Alles eraan blijft hetzelfde: maandag oranje met
   het envelopje, vrijdag een open kader, de andere dagen lopen dag na dag
   voller. Zo herkent iemand het blok van de ene pagina op de andere.
   LET OP: .dagen--licht komt na .dag--mail en .dag--vraag in dit bestand en
   is ook specifieker, dus die twee moeten hier opnieuw gezet worden. Alleen
   background-color, nooit het background-kortschrift: dat veegt het envelopje
   weg. */
.dagen--licht{margin-left:auto}
.dagen--licht .dagen-kop{color:var(--bijtekst)}
/* dezelfde oplopende vulling, maar in inkt in plaats van in wit. De factor
   houdt het donkerste vakje licht genoeg om het cijfer erin te lezen. */
.dagen--licht .dag{border-color:var(--randje);color:var(--donker);
  background-color:rgba(22,36,47,calc(var(--vul,.07) * .8))}
.dagen--licht .dag--mail{background-color:var(--accent);border-color:var(--accent);color:#fff}
.dagen--licht .dag--vraag{border:2px solid var(--accent);color:var(--accent-diep);
  background-color:rgba(237,91,63,.10)}
.dagen--licht .dagen-zin{color:var(--bijtekst)}
.dagen--licht .dagen-zin b{color:var(--donker)}
/* op zand is de gewone kaartgrond te dicht bij de strook zelf */
.strook--zand .dagen--licht .dag{border-color:rgba(22,36,47,.22)}

/* de stille versie op /boek/: hetzelfde raster, kleiner, zonder cijfers en
   zonder de dagenkop. Het is daar geen tweede aanbod maar een verwijzing, dus
   het blok is een kaart met het oranje randje en niet een hele strook. */
.oefenkaart{display:grid;grid-template-columns:minmax(0,188px) minmax(0,1fr);
  gap:clamp(20px,3.2vw,40px);align-items:center}
.oefenkaart h3{margin:0 0 8px}
.oefenkaart p{margin:0;font-size:16.5px}
.oefenkaart .knoprij{margin-top:16px}
.dagen--mini{max-width:188px;margin:0}
.dagen--mini .dagen-kop,.dagen--mini .dagen-zin{display:none}
.dagen--mini .dagen-rooster{gap:5px}
.dagen--mini .dag{border-radius:5px;border-width:1px;font-size:0;line-height:0}
.dagen--mini .dag--mail{align-items:center;padding-bottom:0;
  background-position:center;background-size:52% auto}
/* zonder cijfer moet de kleur het werk doen: een open kader van anderhalve
   pixel valt op deze maat weg en leest als een gat in het raster. */
.dagen--mini .dag--vraag{border-width:1.5px;background-color:rgba(237,91,63,.22)}
/* hetzelfde rastertje op de vier uitslagpagina's, naast één regel uitleg.
   Daar is het geen aanbod maar het merkteken van het programma: wie straks op
   /30dagen/ komt, ziet meteen hetzelfde beeld terug. */
.oefenrij{display:flex;align-items:center;gap:clamp(16px,2.4vw,26px);
  margin:clamp(24px,3vw,32px) 0 0;padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid var(--randje);flex-wrap:wrap}
.oefenrij .stil{margin:0;max-width:21em}

/* gestapeld heeft het rastertje geen 188 pixels nodig om iets te zeggen */
@media (max-width:760px){
  .oefenkaart{grid-template-columns:1fr;gap:20px}
  .dagen--mini{max-width:152px}
}


/* ---- materiaalteaser op de home -----------------------------------------
   Eén compacte strook tussen het model en de oefenstrook: hier ziet de
   bezoeker dat er gratis werkmateriaal klaarligt. De uitgebreide uitleg staat
   op /materiaal/, dus hier geen kaarten, geen opsomming en één knop.

   De rechterkolom is bewust ruimer dan de linker: daar liggen drie covers
   naast elkaar en op 500 pixels worden dat postzegels. Zelfde afweging als
   .duo--materiaalkop op /materiaal/, alleen iets minder ver doorgetrokken,
   want hier staat er ook nog een knop in de tekstkolom. */
.duo--materiaalteaser{grid-template-columns:.88fr 1.12fr;gap:clamp(26px,3.6vw,48px)}
.teaserbeeld{margin:0}
/* Geen ronde hoeken, geen kader en geen schaduw: de grond van dit beeld is
   precies --pagina en de schaduw van de covers zit al in de jpg. Een kader
   zou de rand van het beeld zichtbaar maken. */
.teaserbeeld img{display:block;width:100%;max-width:640px;height:auto;margin-left:auto}
@media (max-width:980px){
  .duo--materiaalteaser{grid-template-columns:1fr}
  /* gestapeld staat het beeld onder de tekst en mag het de volle breedte
     hebben: het handschrift rechtsonder moet leesbaar blijven. */
  .teaserbeeld img{margin:0;max-width:100%}
}
/* Op een telefoon gaat het beeld van rand tot rand. Dat mag hier, en alleen
   hier: de grond van deze jpg is precies --pagina, dus je ziet geen kader
   liggen, en die laatste zesenvijftig pixels zijn net het verschil tussen
   drie postzegels en drie boekjes waarvan je het handschrift nog leest. */
@media (max-width:640px){
  .teaserbeeld{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .teaserbeeld img{max-width:none}
}

/* ---- de overgangsregel boven een eyebrow --------------------------------
   Eén zin die zegt waarom de volgende strook er staat. Hij hoort lichter te
   wegen dan de eyebrow eronder, dus geen hoofdletters, geen lijntje en de
   kleur van bijtekst. Komt uit gereedschap/zet-oefenstrook.py. */
.overgang{margin:0 0 14px;font-size:16px;color:var(--bijtekst);max-width:26em}
.strook--donker .overgang{color:var(--bijtekst-dk)}

/* ---- /e-boek-lezen/: hoe open je de epub ----
   Een raster van toestellen, elk met een klein lijnicoon en twee of drie
   stappen. De laatste kaart is donker: wie er niet uitkomt, mailt Jan. */
.lezen-held .bedankcover img{width:100%;max-width:520px;border-radius:14px}
.toestellen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:clamp(28px,3.4vw,40px)}
.toestel{background:var(--pagina);border:1px solid var(--randje);border-radius:20px;
  padding:24px 24px 22px;display:flex;flex-direction:column}
.toestel svg{width:34px;height:34px;color:var(--accent);margin:0 0 14px;flex:none}
.toestel h3{font-size:18.5px;margin:0 0 10px}
.toestel ol{margin:0;padding:0 0 0 1.15em;font-size:16px;line-height:1.6}
.toestel li{margin:0 0 6px;padding-left:2px}
.toestel li::marker{color:var(--accent-diep);font-weight:500}
.toestel--hulp{background:var(--donker);border-color:var(--donker);color:var(--pagina)}
.toestel--hulp h3{color:var(--pagina)}
.toestel--hulp p{font-size:16px;margin:0 0 16px;max-width:none}
.toestel--hulp img{width:56px;height:56px;border-radius:50%;margin:0 0 14px}
.toestel--hulp .tekstlink{color:var(--pagina);margin-top:auto;align-self:flex-start}
@media (max-width:980px){.toestellen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.toestellen{grid-template-columns:1fr;gap:14px}}

.vraagjes{border-top:1px solid var(--randje)}
.vraagjes details{border-bottom:1px solid var(--randje);padding:16px 0}
.vraagjes summary{cursor:pointer;list-style:none;display:flex;gap:12px;
  align-items:baseline;font-size:17.5px;font-weight:400}
.vraagjes summary::-webkit-details-marker{display:none}
.vraagjes summary::before{content:"+";color:var(--accent);font-weight:500;
  font-size:20px;line-height:1;width:14px;flex:none}
.vraagjes details[open] summary::before{content:"\2013"}
.vraagjes summary:hover{color:var(--accent-diep)}
.vraagjes details p{margin:10px 0 2px 26px;font-size:16.5px}

.leestips{list-style:none;margin:6px 0 28px;padding:0;counter-reset:tip}
.leestips li{counter-increment:tip;position:relative;padding:0 0 0 46px;margin:0 0 18px;
  max-width:var(--lees)}
.leestips li::before{content:counter(tip);position:absolute;left:0;top:1px;width:30px;height:30px;
  border-radius:50%;border:1.5px solid var(--accent);color:var(--pagina);font-size:14px;
  font-weight:500;display:flex;align-items:center;justify-content:center}
.leestips b{font-weight:500}
.testkaart{background:var(--donker-licht);border-radius:20px;padding:clamp(26px,3vw,36px);
  border-top:3px solid var(--accent)}
.testkaart h3{font-size:21px;margin:0 0 12px}
.testkaart p{font-size:16.5px;max-width:none}
.testkaart .knop{margin-top:4px}
.papier-foto{margin:0;justify-self:end;max-width:360px}
.papier-foto img{width:100%;border-radius:16px;box-shadow:0 18px 40px rgba(22,36,47,.18)}
.papier-foto figcaption{font-size:14px;color:var(--bijtekst);margin-top:10px}
.papierlijst{list-style:none;margin:4px 0 26px;padding:0}
.papierlijst li{position:relative;padding-left:30px;margin:0 0 8px;max-width:var(--lees)}
.papierlijst li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;
  border-left:2px solid var(--accent-diep);border-bottom:2px solid var(--accent-diep);transform:rotate(-45deg)}
.prijsregel{font-size:22px;font-weight:500;margin:0 0 6px}
.prijsregel span{font-size:15.5px;font-weight:300;color:var(--bijtekst)}
@media (max-width:860px){.papier-foto{justify-self:start;max-width:300px}}

/* ---- wat je erbij krijgt, als rijen naast het formulier (8 november 2026)
   Het formulier zelf blijft kort: kop, twee velden, vinkje, knop. Wat iemand
   krijgt staat in de linkerkolom, elke rij een icoon, een vette titel en een
   regel uitleg. Velden blijven onder elkaar: sneller ingevuld (CXL, 2016). */
.krijgkop{margin:clamp(26px,3vw,34px) 0 8px;font-size:15.5px;font-weight:500;color:var(--donker)}
.krijg{list-style:none;margin:0;padding:0;max-width:30em}
.krijg li{display:flex;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--randje)}
.krijg li:last-child{border-bottom:1px solid var(--randje)}
.krijgicoon{flex:none;width:44px;height:44px;border-radius:10px;background:var(--linnen);
  color:var(--accent-diep);display:flex;align-items:center;justify-content:center}
.krijgicoon svg{width:22px;height:22px}
.krijgbeeld{flex:none;width:44px;height:auto;border-radius:5px;border:1px solid var(--randje)}
.krijg b{display:block;font-weight:500;font-size:16px;line-height:1.35}
.krijg small{display:block;font-size:14px;line-height:1.45;color:var(--bijtekst)}
@media (max-width:640px){
  .krijg b{font-size:15px}
  .krijg small{font-size:13.5px}
}
/* Op de uitslagpagina volgt de foto van Jan meteen op de rijen: dan is de
   onderste lijn van de rijen genoeg, een tweede lijn erboven is er te veel. */
.krijg + .afzender{border-top:0;padding-top:0}

/* ---- de stellingen compacter, zodat de knop Volgende in beeld staat ----
   Wie op "Start met stelling 1" klikt, moet het labeltje, de uitleg, de vier
   stellingen en de knop in één scherm zien, ook op een laptop van 13 duim.
   Daarom minder lucht boven de strook en tussen de stellingen. */
#stellingen{padding-top:clamp(28px,3.4vw,40px)}
#stellingen h2{margin-bottom:10px}
.stelling > div{padding:13px 0}
.voortgang{margin-top:clamp(18px,2.2vw,24px)}
.testvoet{margin-top:clamp(18px,2.4vw,26px)}
#stellingen .stellingen{margin-top:clamp(18px,2.2vw,24px)}
/* Na de sprong naar de stellingen vult de linnen strook het hele scherm.
   De slanke balk is 57 pixels hoog en de sprong houdt 76 pixels vrij, dus
   zonder de -19 piept er een randje van de witte strook erboven door. De
   minimumhoogte houdt de zandkleurige strook eronder uit beeld. */
@media (min-width:861px){
  #stellingen{scroll-margin-top:-19px;min-height:calc(100vh - 57px)}
}

/* het uitleggetje naast het cijfer blijft op zijn twee regels. Zonder dit
   duwt de zin ernaast het zo smal dat elk woord op een eigen regel valt. */
.scoreuitleg{white-space:nowrap}