/* style.css — de hele opmaak van photonic.eu, overgenomen uit mockup/mockup-v6.html (versie 52, 22 sep 2026).
   De mockup is de bron van waarheid; de besluiten erachter staan in docs/02-besluiten-mockup.md.
   Eén los bestand met vaste naam (exporteis), geen bouwstap nodig om hem te lezen of te wijzigen. */

/* ---- Lettertype: Barlow, zelf gehost (geen verzoek naar Google). Latin + latin-ext per gewicht;
   unicode-range laat de browser alleen de subset laden die de tekst nodig heeft. ---- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/barlow-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- Huisstijl-tokens. De site is licht met een donkere hero (geen donker thema). ---- */
/* --grad = het merkverloop uit de merk-master (~/AI/Projects/huisstijl/README.md, besluit 29 okt 2026): kleurlijnen op
   30 graden, parallel aan de schuine randen van de P; licht linksboven, donker rechtsonder. Niet los aanpassen: het
   merkblokje (.merk .p), de iconen (tools/make-icons.py) en het logo elders volgen dezelfde stops. */
:root{--donker:#2D2962;--licht:#4F80C1;--grad:linear-gradient(150deg,#2481C3 0%,#216FAF 10%,#2B5592 25%,#2C326D 55%,#2A2862 78%,#2A2862 100%);
  --ink:#1b1a2e;--muted:#5a5f72;--wit:#fff;--vlak:#f5f7fb;--lijn:#e2e5ef;
  --reel-h:180px;--reel-speed:40s;--breedte:1120px;--logo-b:130px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* geen automatische tekstvergroting door iOS Safari */
*{box-sizing:border-box}
body{margin:0;background:var(--wit);color:var(--ink);font-family:"Barlow",ui-sans-serif,system-ui,sans-serif;font-size:1.0625rem;line-height:1.55}
h1,h2,h3{margin:0;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--licht);outline-offset:2px}

/* ---- Site-basis ---- */
.in{max-width:var(--breedte);margin-inline:auto;padding-inline:20px}
.sectie{padding-block:clamp(2.5rem,6vw,4.5rem)}
.sectie--vlak{background:var(--vlak)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;font-weight:700;color:var(--licht);margin-bottom:.5rem}
.hero .eyebrow{color:#cfe0ff}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);color:var(--donker);font-weight:800}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:60ch;color:var(--ink)}
.lead--kern{margin-top:1rem;max-width:56ch}
.lead--app{margin-top:1rem}
.muted{color:var(--muted)}
.knop{display:inline-block;padding:.75em 1.35em;border-radius:999px;text-decoration:none;background:var(--grad);color:#fff;border:0;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(45,41,98,.25)}
.knop--klein{padding:.55em 1.05em;font-size:.95rem}
.knop--secundair{background:#fff;color:var(--donker);border:2px solid var(--licht);box-shadow:none}
.knop--secundair:hover{background:var(--vlak)}
.testen{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:1.4rem;font-size:.95rem}

/* ---- Header ---- */
.kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px}
.merk{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--donker);text-decoration:none;font-size:1.15rem}
.merk .p{width:34px;height:34px;border-radius:7px;background:var(--grad);display:grid;place-items:center} /* zelfde verloop als de merk-master (via --grad) */
.kop .rechts{display:flex;align-items:center;gap:14px}
.taal{display:inline-flex;border:1px solid var(--lijn);border-radius:999px;padding:3px;gap:2px;background:var(--vlak)}
.taal a,.taal span{font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--muted);padding:.3em .6em;border-radius:999px;text-decoration:none;display:inline-flex;gap:5px;align-items:center}
.taal [aria-current="page"]{background:var(--donker);color:#fff} /* de actieve taal is een <span>, geen link: een klik laadt niets opnieuw */
.taal svg{width:16px;height:16px;border-radius:50%;flex:none}
@media (max-width:560px){.kop .knop{display:none}} /* op telefoon staat de knop in de hero; header blijft rustig */

/* ---- Hero (variant 6: telefoon naast de kop, schuine band over de onderrand) ---- */
.hero-wrap{overflow:hidden;position:relative;padding-bottom:calc(var(--reel-h) * .75 + 3.5vw + 30px);background:var(--wit)} /* ruimte onder de hero voor de onderste helft van de band + schaduw (zie rekensom bij de band) */
/* Onderaan ruimte voor de bovenste helft van de band; de band mag telefoon en tekst niet raken (rekensom bij de band). */
.hero{position:relative;background:var(--grad);color:#fff;padding-bottom:calc(var(--reel-h) * .75 + max(-25px, 51px - 5.5vw))}
.hero .in{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.hero .tekst{display:grid;gap:1.3rem}
.hero h1{font-size:clamp(2.2rem,5.6vw,4rem);font-weight:800;text-wrap:wrap} /* geen "balance": de eerste regel moet "Fotomarketing tools" blijven */
.hero .sub{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:36ch;opacity:.92}
.hero .acties{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero .acties .knop{background:#fff;color:var(--donker);box-shadow:0 4px 18px rgba(0,0,0,.2)}
.hero .acties .tel{opacity:.85;font-size:.95rem;text-decoration:none}
/* Wisselwoorden: alle woorden staan op dezelfde plek (grid-area 1/1), alleen het actieve is zichtbaar.
   justify-self:start: het woord is zo breed als zichzelf; site.js zet de slotbreedte op het actieve woord zodat de tekst eromheen niet verspringt. */
.wissel{display:inline-grid;text-align:left;transition:width .45s ease;overflow:visible}
.wissel > span{grid-area:1/1;justify-self:start;transition:opacity .45s ease,transform .45s ease;opacity:0;transform:translateY(.35em);white-space:nowrap;color:#cfe0ff}
.wissel > span.aan{opacity:1;transform:none}
.wissel > span.uit{opacity:0;transform:translateY(-.35em)}
/* Doelregel "(bv. voor meer …)": eigen regel onder de kop, 0,62× de kopgrootte, één letterdikte (die van de kop), het wisselwoord
   lichtblauw, het haakje wit en meebewegend met het woord. display:block: zo krijgt de regel de hoogte van zijn eigen (kleinere)
   letter en niet de strut van de h1 — de mockup (quirks-modus, geen doctype) toont hem precies zo strak. */
.doelregel{display:block;font-size:.62em;white-space:nowrap}
.doelregel .klein{font-weight:inherit}
.wissel--doel .haak{color:#fff}
@media (max-width:820px){.doelregel{white-space:normal}}
@media (prefers-reduced-motion:reduce){.wissel,.wissel > span{transition:none}}

/* ---- Lopende banden (foto's en logo's delen de mechaniek: één set herhaald tot schermbreedte, dan verdubbeld, -50% verschuiven) ---- */
.band{overflow:hidden;width:100%;position:relative}
/* Binnenruimte boven/onder: .band knipt (overflow:hidden) en zonder deze padding valt de slagschaduw onder de foto's weg. */
.band .spoor{display:flex;gap:12px;align-items:center;width:max-content;padding:14px 0 32px;animation:loop var(--reel-speed) linear infinite} /* align-items:center = gemeenschappelijke hartlijn */
/* Modus 'even groot' (Patrick): liggende foto's zijn --reel-h hoog, staande foto's --reel-h BREED (en dus ~1,5x zo hoog).
   Geen aspect-ratio zetten (29 sep 2026): de browser haalt de verhouding dan uit width/height van de <img>, zodat
   een foto al de juiste breedte heeft vóór hij geladen is. Met aspect-ratio:auto was een ongeladen liggende foto
   0px breed, meette site.js een te smalle band en liep de band bij een koude eerste laadbeurt te langzaam. */
.band img{height:var(--reel-h);width:auto;object-fit:contain;border-radius:0;display:block;flex:none;box-shadow:0 8px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.3)} /* scherpe hoeken (veel foto's hebben zelf een kader); twee schaduwlagen zodat een witte fotorand ook op de witte sectie loskomt */
.band img.staand{height:auto;width:var(--reel-h)}
/* Foto's en logo's staan in <picture> (WebP met JPEG/PNG-terugval, 29 sep 2026); de <picture> is het flex-item. */
.band picture{display:block;flex:none}
/* Elke foto van de fotoband een eigen compositielaag (29 sep 2026). Zonder dit tekende iOS Safari de lopende band
   vaak helemaal niet of met gaten: het spoor is één laag van ~8000px breed die met een CSS-animatie schuift, en
   Safari tekent van zo'n grote bewegende laag alleen stukken (in de iOS Simulator 4 van 4 keer leeg na scrollen).
   Met losse lagen per foto was de band 5 van 5 keer zichtbaar en lopend. Kosten: wat extra geheugen (44 kleine
   lagen). Alleen de fotoband; de logoband had het probleem niet. */
.fotoband img{transform:translateZ(0)}
@keyframes loop{from{transform:translateX(calc(-50% - 6px))}to{transform:translateX(0)}} /* -6px = de halve gap, anders hapert de naad */
@media (prefers-reduced-motion:reduce){.band .spoor{animation:none}}
/* Pauze en label alleen met een muis: op iOS blijft :hover plakken na een tik en stond de band anders stil. */
@media (hover:hover){.band:hover .spoor{animation-play-state:paused}.band:hover .bandlabel{opacity:1}}
.bandlabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.5em 1.1em;border-radius:999px;background:rgba(27,26,46,.72);color:#fff;font-weight:600;font-size:.95rem;letter-spacing:.01em;white-space:nowrap;backdrop-filter:blur(4px);opacity:0;transition:opacity .25s;pointer-events:none}
.band.schuin{position:absolute;left:-6%;right:-6%;width:auto;bottom:calc(-32px - var(--reel-h) * .75);z-index:1;transform:rotate(-4deg)} /* width:auto: anders wint width:100% van left/right en stopt de band op 94% */

/* ---- Telefoon met de app (hero) ---- */
.tel-mock{justify-self:center;width:min(270px,78vw);aspect-ratio:9/19;border-radius:36px;background:#0e0d1c;border:6px solid #23223a;box-shadow:0 30px 60px rgba(0,0,0,.4);position:relative;overflow:hidden;z-index:2}
.tel-mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){.hero .in{grid-template-columns:1fr}.tel-mock{width:min(220px,60vw);margin-top:.5rem}:root{--reel-h:130px}}
/* De band ligt half op blauw, half op wit: de overgang blauw→wit loopt in het schermmidden door de hartlijn van
   de foto's (Patrick, 29 sep 2026: eerst mobiel, daarna "doe hetzelfde voor de computer site"; op 23 sep al minder blauw).
   Rekensom (tokens: --reel-h; staande foto's zijn 1,5x --reel-h hoog):
   - .band.schuin bottom: de hartlijn ligt 32px (padding-bottom van .spoor) + een halve staande foto boven de
     onderkant van de band; die afstand onder de hero-rand zetten → hartlijn op de rand.
   - 3.5vw = hoeveel de -4° gedraaide band aan de schermrand hoger/lager uitkomt (tan 4° x halve breedte).
   - .hero padding-bottom: halve staande foto + een correctie, zo gekozen dat de hoogste foto over de hele
     animatie nog ~12px of meer van de telefoon blijft (de tekst ligt links, waar de band lager loopt).
     Telefoon/tablet (één kolom, hieronder): + 3.5vw - 19px → 13-23px onder de telefoon op 375-820px.
     Desktop (twee kolommen, hierboven): + max(-25px, 51px - 5.5vw), gemeten aangepast: de telefoon staat rechts
     van het midden en de hero-binnenruimte groeit tot 1333px mee (6vw) → 13-20px onder de telefoon op 821-2560px.
   - .hero-wrap padding-bottom: ruimte onder de hero voor de onderste helft van de band + schaduw, zodat
     overflow:hidden geen foto's afknipt. */
@media (max-width:820px){.hero{padding-bottom:calc(var(--reel-h) * .75 + 3.5vw - 19px)}}

/* ---- Drie secties met dezelfde opmaak (Het idee / De app / Andere tools): kolommen 1.2fr/0.8fr, rechterblok op de hoogte van de H2,
   één blokstijl (accentstreep links, vette regel, grijze toelichting). Eerder had elk blok een eigen stijl; dat vond Patrick onrustig. ---- */
.kern,.app{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:start}
.zij{display:grid;gap:14px;padding-top:1.75rem;counter-reset:s} /* padding-top ≈ hoogte van de eyebrow */
.zij > div{border-left:3px solid var(--licht);padding-left:14px}
.zij b,.zij .n{display:block;font-size:1.35rem;font-weight:800;color:var(--donker);line-height:1.15;font-variant-numeric:tabular-nums}
.zij span,.zij .l{display:block;font-size:.95rem;color:var(--muted);margin-top:2px}
/* De app-stappen krijgen een nummer (Patrick: afwisseling); het nummer neemt de plaats van de accentstreep in. */
.zij > div.nr{border-left:0;padding-left:0;display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.zij > div.nr > div{display:grid;gap:2px} /* kop + toelichting naast het nummer (app-pagina) */
.zij > div.nr::before{counter-increment:s;content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;font-size:.9rem;display:grid;place-items:center;margin-top:-2px}
@media (max-width:820px){.kern,.app{grid-template-columns:1fr}.zij{padding-top:0}}

/* ---- Logoband: grijze PNG's (#8a8fa3 met alpha, gemaakt met tools/grijs.py) op wit ---- */
.logoband-wrap{background:#fff;padding:2.2rem 0 1.6rem;border-top:1px solid var(--lijn)}
.logoband-wrap .eyebrow{display:block;margin-bottom:1rem}
.logoband .spoor{gap:0;padding:0} /* geen schaduw op logo's, dus geen extra ruimte nodig */
/* Vaste itemhoogte (0,6 × logobreedte): alle scheidingsstreepjes even hoog, ongeacht het logo erin. */
.logoband .lg{flex:none;display:grid;justify-items:center;align-content:center;height:calc(var(--logo-b)*.6);padding:0 2rem;border-right:1px solid var(--lijn)}
/* Elk logo dezelfde breedte, hoogte maximaal 0,6 × de breedte; hogere logo's (Ajax, Kumpany) worden daarbinnen gecentreerd en dus smaller. Geen schaduw. */
.logoband .lg img{width:var(--logo-b);height:auto;max-height:calc(var(--logo-b)*.6);object-fit:contain;box-shadow:none;opacity:.85}

/* ---- Bureau of locatie? (één regel in een licht kader; bewust geen link naar het formulier) ---- */
.sectie--bureaus{padding-block:0 3rem}
.bureaus{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;border:1px solid var(--lijn);border-radius:14px;padding:22px 24px}
.bureaus b{color:var(--donker)}

/* ---- Contact / offerteformulier ---- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.contact .intro{margin:.6rem 0 1.2rem;max-width:50ch}
.form{display:grid;gap:10px}
.form label{display:grid;gap:4px;font-size:.9rem;font-weight:600;color:var(--donker)}
.form input,.form textarea{font:inherit;padding:.65em .8em;border:1px solid var(--lijn);border-radius:10px;background:#fff;color:var(--ink);width:100%;min-width:0}
/* iOS Safari tekent datum/tijd-velden als eigen widget met eigen minimumbreedte; appearance:none + display:block + min-width:0 maakt ze gewone vakken die in hun gridcel passen. */
.form input[type=date],.form input[type=time]{-webkit-appearance:none;appearance:none;display:block;text-align:left}
.form input{height:3em} /* ≈43 px, aanraakvriendelijk; één vaste hoogte voor alle eenregelige velden, ook de iOS-widgets */
.form input::-webkit-date-and-time-value{text-align:left;min-height:1.55em}
.form textarea{min-height:110px;resize:vertical}
.form .rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px} /* minmax(0,…): een veld met eigen minimumbreedte mag de cel niet oprekken */
.form .tijden{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center;color:var(--muted);font-weight:400}
.form label:has([required]) > span:first-child::after{content:' *';color:var(--licht)} /* sterretje volgt automatisch het required-attribuut */
.form .groep{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.form .voetnoot{font-size:.8rem}
.form .trap{position:absolute;left:-9999px;top:-9999px} /* honeypot: uit beeld, niet display:none (eis formulierdienst) */
@media (max-width:520px){.form .rij{grid-template-columns:1fr}}
.direct{display:grid;gap:.6rem;color:var(--muted)}
.direct b{color:var(--donker)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* ---- Voettekst ---- */
.voet-wrap{border-top:1px solid var(--lijn);color:var(--muted);font-size:.9rem}
.voet{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-block:2rem 1.5rem} /* padding-block, niet padding: anders vervalt de zijmarge van .in */
.voet .kolom{display:grid;gap:.35rem;align-content:start}
.voet .kolom > b{color:var(--ink);margin-bottom:.15rem}
.voet .kolom .lijst{display:grid;gap:.35rem}
.voet a{color:var(--muted);text-decoration:none;display:inline-block} /* inline-block: links mogen afbreken over regels */
.voet .lijst > span{display:inline-block;color:var(--ink)} /* de huidige pagina: geen link, iets donkerder */
.voet a:hover{color:var(--donker);text-decoration:underline}
.onderregel{padding-block:.9rem 1.4rem;border-top:1px solid var(--lijn);font-size:.8rem;color:#8a8fa3}
@media (max-width:700px){.voet{grid-template-columns:1fr;gap:1.4rem}}

/* ---- Subpagina's (app, tools, privacy, laag 2, bedankt): rustige leeskolom in dezelfde stijl ---- */
.pagina{max-width:68ch;padding-block:clamp(2rem,5vw,3.5rem)}
.pagina h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;color:var(--donker);margin-bottom:1rem}
.pagina h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2.2rem;margin-bottom:.6rem}
.pagina p,.pagina li{color:var(--ink)}
.pagina p + p,.pagina ul + p,.pagina ol + p{margin-top:.8rem}
.pagina ul,.pagina ol{margin:.6rem 0 0;padding-left:1.3em}
.pagina li + li{margin-top:.35rem}
.pagina .lead{margin-bottom:1rem}
.pagina .marker{background:#fff3c4;border-radius:4px;padding:0 .25em} /* [vierkante haken] uit het concept: nog in te vullen door Patrick; opvallend, bewust */
.pagina .bijschrift{font-size:.9rem;color:var(--muted)}
.pagina .zij{padding-top:0;margin-top:1.2rem}
.pagina .testen{margin-top:1.6rem}
.bedankt{text-align:center;max-width:52ch;margin-inline:auto;padding-block:clamp(4rem,10vw,7rem)}
.pagina h3{font-size:1.1rem;margin-top:1.2rem;margin-bottom:.3rem;color:var(--donker)}