/* =====================================================================
styles.css — De Trainer
Een rustige, kaart-gebaseerde trainings-app. Lage cognitieve last.
De bloktype-taxonomie is de kern: elk type valt in één oogopslag op.
===================================================================== */
:root {
/* Basis */
--bg: #f3f1ec; /* warm papier */
--bg-card: #ffffff;
--ink: #2b2926;
--ink-soft: #6b665e;
--line: #e2ddd3;
--shadow: 0 1px 2px rgba(40,35,28,.06), 0 8px 24px rgba(40,35,28,.05);
--radius: 14px;
--maxw: 720px;
/* Bloktype-accenten (elk type één herkenbare kleurfamilie) */
--peter: #1f7a5a; --peter-bg: #eaf6f0; --peter-line:#bfe3d3;
--jan: #8a5a16; --jan-bg: #fbf2e3; --jan-line: #ecd9b3;
--fout: #b23b3b; --fout-bg: #fbecec; --fout-line:#edc4c4;
--goed: #1f7a5a; --goed-bg: #eaf6f0;
--intern: #5a4b8a; --intern-bg: #efecf8; --intern-line:#d4cbee;
--waarsch: #b2400b; --waarsch-bg: #fdeee4; --waarsch-line:#f3c9ad;
--feit: #2c6e8f; --feit-bg: #e9f3f8; --feit-line:#c2dfeb;
--kaart: #4a4640; --kaart-bg: #faf8f3;
--focus: #1f7a5a;
--on-accent: #ffffff; /* tekst/icoon op een gekleurde chip */
}
/* Donker thema */
html[data-thema="donker"] {
--bg: #1c1b19;
--bg-card: #26241f;
--ink: #ece8e0;
--ink-soft: #aaa498;
--line: #38352e;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
--peter-bg:#16302a; --peter-line:#27523f; --peter:#5fcf9f;
--jan-bg: #322713; --jan-line:#5a481f; --jan:#e0ab5c;
--fout-bg: #341c1c; --fout-line:#5d3030; --fout:#e87e7e;
--goed-bg: #16302a; --goed:#5fcf9f;
--intern-bg:#221d33; --intern-line:#3d3458; --intern:#a797e0;
--waarsch-bg:#36210f;--waarsch-line:#5e3a17;--waarsch:#f0995e;
--feit-bg: #142c38; --feit-line:#2a4d5e; --feit:#6fc0e0;
--kaart-bg:#2a2822;
--on-accent:#1b1a18;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.62;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
html[data-leesbaar="groot"] body { font-size: 19px; line-height: 1.72; }
/* ---- Leestypografie ---- */
p { margin: 0 0 .2em; }
em { font-style: italic; }
strong { font-weight: 650; }
a.skip { position:absolute; left:-9999px; }
a.skip:focus { left:8px; top:8px; background:var(--bg-card); padding:8px 12px; border-radius:8px; z-index:200; }
/* =====================================================================
LAYOUT — vaste topbar, uitschuifbare index links, lees-kolom rechts
===================================================================== */
.topbar {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
background: color-mix(in srgb, var(--bg-card) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.topbar .merk { font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.topbar .merk small { display:block; font-weight: 500; color: var(--ink-soft); font-size: 12px; letter-spacing: 0; }
.topbar .spacer { flex: 1; }
/* prominente portaalknop — Toets en Handboek zijn één portaal (zelfde stijl,
beide richtingen): .naar-handboek (toets → handboek) / .naar-toets (handboek → toets) */
.topbar .naar-handboek,
.topbar .naar-toets {
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 14px; border-radius: 10px;
background: var(--peter); border: 1px solid var(--peter); color: #fff;
font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
transition: filter .15s;
}
.topbar .naar-handboek:hover,
.topbar .naar-toets:hover { filter: brightness(1.07); }
.topbar .naar-handboek:focus-visible,
.topbar .naar-toets:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.topbar .naar-handboek svg,
.topbar .naar-toets svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 560px) {
.topbar .naar-handboek,
.topbar .naar-toets { padding: 0; width: 38px; justify-content: center; }
.topbar .naar-handboek .lbl,
.topbar .naar-toets .lbl { display: none; }
}
.iconbtn {
border: 1px solid var(--line); background: var(--bg-card); color: var(--ink);
width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; transition: background .15s, border-color .15s;
}
.iconbtn:hover { border-color: var(--ink-soft); }
.iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.iconbtn svg { width: 19px; height: 19px; }
/* dunne voortgangsbalk onder de topbar */
.voortgang-rail { height: 3px; background: var(--line); }
.voortgang-rail > span { display:block; height:100%; width:0; background: var(--peter); transition: width .4s ease; }
.shell { display: flex; }
/* ---- Index (zijbalk) ---- */
.index {
width: 300px; flex: none;
border-right: 1px solid var(--line);
height: calc(100vh - 52px); position: sticky; top: 52px;
overflow-y: auto; padding: 14px 10px 60px;
background: var(--bg);
}
.index h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-soft); margin: 16px 10px 6px; font-weight: 700; }
.index .deel:first-child h2 { margin-top: 4px; }
.index a {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px; border-radius: 9px;
color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.35;
}
.index a:hover { background: var(--bg-card); }
.index a.actief { background: var(--peter-bg); color: var(--peter); font-weight: 700;
box-shadow: inset 3px 0 0 var(--peter); }
.index .deel.actief-deel > h2 { color: var(--peter); }
.index a .vink {
flex: none; width: 16px; height: 16px; border-radius: 50%;
border: 1.5px solid var(--line); display: inline-flex; align-items:center; justify-content:center;
}
.index a.gelezen .vink { background: var(--peter); border-color: var(--peter); }
.index a.gelezen .vink svg { width: 10px; height: 10px; color: #fff; display:block; }
.index a:not(.gelezen) .vink svg { display: none; }
/* ---- Lees-kolom ---- */
.lees { flex: 1; min-width: 0; display: flex; justify-content: center; }
.kolom { width: 100%; max-width: var(--maxw); padding: 28px 24px 140px; }
.breadcrumb { color: var(--ink-soft); font-size: 13px; margin-bottom: 6px; letter-spacing:.01em; }
.hoofdstuk-titel { font-size: 27px; line-height: 1.18; margin: 0 0 18px; letter-spacing: -.015em; }
/* =====================================================================
BLOKKEN — de kern. Elk bloktype = eigen, herkenbare behandeling.
Gemeenschappelijke kaart-romp:
===================================================================== */
.blok { margin: 14px 0; opacity: 0; transform: translateY(8px);
animation: opkomst .45s ease forwards; }
@keyframes opkomst { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.blok { animation: none; opacity: 1; transform: none; }
html { scroll-behavior: auto; }
}
/* PROZA — neutraal, leesbaar. Geen kader; dít is de basisstem. */
.proza { font-size: inherit; color: var(--ink); margin: 6px 0 14px; }
.proza.stil { color: var(--ink-soft); font-size: .92em; border-left: 2px solid var(--line); padding-left: 14px; }
/* =====================================================================
SPREKERS (jan / peter / fout) — als bubbels. Eén bubbel-taal, twee layouts:
.conv = lopend gesprek → Jan links (oker) / Peter rechts (groen);
.paar = los goed↔fout moment → links uitgelijnd, gestapeld.
app.js groepeert een aaneengesloten reeks sprekers en kiest de layout.
===================================================================== */
/* gedeelde atomen: de avatar-chip + de bubbel */
.chip { flex: none; width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--on-accent); font-size: 14px; font-weight: 700; margin-top: 2px; }
.chip svg { width: 16px; height: 16px; }
.s-jan { background: var(--jan); }
.s-peter { background: var(--peter); }
.s-fout { background: var(--fout); }
.bub { border: 1px solid; border-radius: 15px; padding: 10px 15px; line-height: 1.5; }
.bub p { margin: 0; font-size: 1.02em; }
.bub .who { display: block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; margin-bottom: 4px; }
.b-jan { background: var(--jan-bg); border-color: var(--jan-line);
color: color-mix(in srgb, var(--ink) 88%, var(--jan)); }
.b-jan p { font-weight: 600; }
.b-jan .who { color: var(--jan); }
.b-peter { background: var(--peter-bg); border-color: var(--peter-line);
color: color-mix(in srgb, var(--ink) 90%, var(--peter)); }
.b-peter .who { color: var(--peter); }
.b-peter.script { border-width: 2px; } /* "volg woordelijk"-scripts iets steviger omrand */
.b-fout { background: var(--bg-card); border-color: var(--fout-line); }
.b-fout .who { color: var(--fout); }
/* de "waarom dit misgaat" onder een foute bubbel — altijd zichtbaar, vol contrast */
.waarom { margin-top: 9px; padding: 10px 12px; border-radius: 10px;
background: color-mix(in srgb, var(--fout-bg) 55%, var(--bg-card));
border: 1px solid var(--fout-line); font-size: .9em; line-height: 1.5; color: var(--ink); }
.waarom b { color: var(--fout); }
/* layout 1 — gesprek (alternerend links/rechts) */
.conv { display: flex; flex-direction: column; gap: 14px; }
.turn { display: flex; gap: 10px; max-width: 88%; }
.turn.links { align-self: flex-start; }
.turn.rechts { align-self: flex-end; flex-direction: row-reverse; }
.turn.links .bub { border-top-left-radius: 4px; }
.turn.rechts .bub { border-top-right-radius: 4px; }
/* layout 2 — goed↔fout paar (gestapeld, links uitgelijnd) */
.paar { display: flex; flex-direction: column; gap: 12px; }
.rij { display: flex; gap: 11px; align-items: flex-start; }
.rij .bub { flex: 1; border-top-left-radius: 4px; }
/* LEGENDA — de notatie-sleutel: dezelfde chips als de bubbels, zodat de lezer
de drie spreker-stijlen leert herkennen vóór hij ze in de gesprekken tegenkomt. */
.legenda { display: flex; flex-direction: column; gap: 10px;
margin: 8px 0 16px; padding: 14px 16px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.leg-rij { display: flex; gap: 11px; align-items: flex-start; }
.leg-tekst { flex: 1; line-height: 1.5; align-self: center; }
/* KERNZIN — de keystone-zin die Peter hardop zegt. Bewust géén spreker-bubbel:
een prominente pull-quote zodat de lezer de dragende zin onthoudt. */
.kernzin { position: relative; margin: 18px 0; padding: 16px 20px 16px 52px;
border-radius: var(--radius); background: var(--bg-card);
border: 1px solid var(--line); border-left: 4px solid var(--peter);
box-shadow: var(--shadow); }
.kernzin::before { content: "\201C"; position: absolute; left: 13px; top: 4px;
font-size: 2.5em; line-height: 1; color: var(--peter); opacity: .5;
font-family: Georgia, "Times New Roman", serif; }
.kernzin p { margin: 0; font-size: 1.18em; line-height: 1.5; font-weight: 600; color: var(--ink); }
/* INTERN — "voor in je hoofd, zeg dit NOOIT tegen Jan." Sterk apart.
NB: bewust .intern-blok (niet .intern) — anders erft de inline tooltip-term
.tt.intern deze blok-opmaak (padding/rand/achtergrond) en verschijnt elke
INTERN-term als een zwevend bubbeltje over de omringende tekst. */
.intern-blok {
position: relative; border-radius: var(--radius);
background:
repeating-linear-gradient(135deg,
transparent 0 11px,
color-mix(in srgb, var(--intern) 6%, transparent) 11px 12px),
var(--intern-bg);
border: 1px dashed var(--intern);
padding: 16px 18px 16px 18px; box-shadow: var(--shadow);
}
.intern-blok .intern-label {
display: inline-flex; align-items:center; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
color: var(--intern); margin-bottom: 8px;
}
.intern-blok .intern-label .slot { width:14px; height:14px; }
.intern-blok p { color: color-mix(in srgb, var(--ink) 88%, var(--intern)); }
.intern-blok .nooit {
display: block; margin-top: 10px; font-size: .82em; font-weight: 600;
color: var(--intern); letter-spacing: .01em;
}
/* WAARSCHUWING — hoogste alarm: woordelijk volgen */
.waarschuwing {
border-radius: var(--radius); padding: 14px 16px 14px 16px;
background: var(--waarsch-bg);
border: 2px solid var(--waarsch);
box-shadow: var(--shadow);
border-left-width: 8px;
}
.waarschuwing .w-kop { display:flex; align-items:center; gap:10px; font-weight: 750;
color: var(--waarsch); font-size: 1.02em; }
.waarschuwing .w-kop svg { width: 22px; height: 22px; flex:none; }
/* FEIT — zeker, rustig, "zeg ze met zekerheid" */
.feit {
display: flex; gap: 12px; align-items: flex-start;
background: var(--feit-bg); border: 1px solid var(--feit-line);
border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow);
}
.feit .anker { flex:none; width: 22px; height: 22px; color: var(--feit); margin-top: 1px; }
.feit p { color: color-mix(in srgb, var(--ink) 90%, var(--feit)); }
.feit.uitzondering { background: var(--bg-card); border-style: dashed; }
.feit.prijs { border-color: var(--ink-soft); background: var(--bg-card); }
/* KAART — naslag, tabel, opzoekbaar */
.kaart {
background: var(--kaart-bg); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.kaart .k-titel { display:flex; align-items:center; gap:10px;
padding: 12px 16px; font-weight: 700; color: var(--kaart);
border-bottom: 1px solid var(--line); background: var(--bg-card); }
.kaart .k-titel svg { width: 18px; height: 18px; color: var(--ink-soft); }
.kaart table { width: 100%; border-collapse: collapse; font-size: .95em; }
.kaart thead th { text-align: left; padding: 10px 16px; font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
border-bottom: 1px solid var(--line); }
.kaart tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kaart tbody tr:last-child td { border-bottom: 0; }
.kaart tbody td:first-child { color: var(--ink-soft); width: 46%; }
.kaart tbody td:last-child { color: var(--ink); }
/* Kolom-blok (Moment 1: wat de klant krijgt / wij doen / NIET doen) */
.kolomblok { background: var(--bg-card); border:1px solid var(--line);
border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.kolomblok .kk { font-weight: 700; font-size: .82em; text-transform: uppercase;
letter-spacing: .05em; color: var(--peter); margin-bottom: 8px;
display:flex; align-items:center; gap:8px; }
.kolomblok.niet .kk { color: var(--fout); }
.kolomblok ul { margin: 0; padding-left: 20px; }
.kolomblok li { margin-bottom: 8px; }
.kolomblok.niet li::marker { color: var(--fout); }
/* Stappen-blok */
.stappen { display:flex; flex-direction: column; gap: 8px; }
.stap { display:flex; gap: 12px; align-items:center; background: var(--bg-card);
border:1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.stap .nr { flex:none; width: 26px; height: 26px; border-radius: 50%;
background: var(--peter-bg); color: var(--peter); font-weight: 700;
display:flex; align-items:center; justify-content:center; font-size: 13px; }
.stap .kop { font-weight: 600; }
.stap .noot { margin-left:auto; font-size: 11px; color: var(--ink-soft);
border:1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
/* De drie beslismomenten — rustige visual */
.drie-momenten { display:flex; align-items:stretch; gap: 8px; margin: 6px 0 14px; flex-wrap: wrap; }
.dm-cel { flex:1; min-width: 150px; background: var(--bg-card); border:1px solid var(--line);
border-radius: 12px; padding: 14px 14px 12px; box-shadow: var(--shadow); }
.dm-nr { font-size: 26px; color: var(--peter); line-height: 1; margin-bottom: 8px; }
.dm-t { font-weight: 650; }
.dm-s { color: var(--ink-soft); font-size: .9em; }
.dm-pijl { align-self: center; color: var(--ink-soft); font-size: 20px; }
@media (max-width: 560px) { .dm-pijl { display:none; } .dm-cel { min-width: 100%; } }
/* === de drie beslismomenten · gekleurde varianten ===================== */
/* per-moment kleur: ① groen (Google) · ② blauw (website) · ③ amber (maand) */
.mom-1 { --mc: var(--peter); --mcbg: var(--peter-bg); --mcl: var(--peter-line); }
.mom-2 { --mc: var(--feit); --mcbg: var(--feit-bg); --mcl: var(--feit-line); }
.mom-3 { --mc: var(--jan); --mcbg: var(--jan-bg); --mcl: var(--jan-line); }
/* --- variant A · REISSTROOM (horizontale kaarten + pijlen) --- */
.dm-reis { display: flex; align-items: stretch; gap: 8px; margin: 8px 0 16px; flex-wrap: wrap; }
.dmr-cel { flex: 1; min-width: 150px; background: var(--bg-card);
border: 1px solid var(--line); border-top: 3px solid var(--mc);
border-radius: 12px; padding: 13px 14px 14px; box-shadow: var(--shadow); }
.dmr-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dmr-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
background: var(--mcbg); color: var(--mc); }
.dmr-ico svg { width: 19px; height: 19px; }
.dmr-nr { font-size: 24px; font-weight: 800; color: var(--mcl); line-height: 1; }
.dmr-t { font-weight: 700; overflow-wrap: break-word; }
.dmr-s { color: var(--ink-soft); font-size: .9em; }
.dmr-q { margin-top: 10px; display: inline-block; font-size: .9em; font-weight: 650; color: var(--mc);
background: var(--mcbg); border: 1px solid var(--mcl); border-radius: 999px; padding: 3px 11px; }
.dmr-pijl { align-self: center; color: var(--ink-soft); font-size: 20px; }
@media (max-width: 560px) { .dmr-pijl { display: none; } .dmr-cel { min-width: 100%; } }
/* --- variant B · TIJDLIJN (verticaal, met ruggengraat) --- */
.dm-tijdlijn { position: relative; margin: 10px 0 18px; padding-left: 6px; }
.dmt-stap { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.dmt-stap:not(:last-child)::before { content: ""; position: absolute; left: 20px; top: 42px; bottom: -2px;
width: 2px; background: linear-gradient(var(--mc), var(--mcl)); }
.dmt-node { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--mcbg); color: var(--mc); border: 2px solid var(--mc); }
.dmt-node svg { width: 20px; height: 20px; }
.dmt-nr { position: absolute; right: -4px; top: -6px; width: 18px; height: 18px; border-radius: 50%;
background: var(--mc); color: var(--on-accent); font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center; }
.dmt-body { padding-top: 3px; }
.dmt-kop { font-weight: 700; }
.dmt-waar { font-weight: 500; color: var(--ink-soft); }
.dmt-q { margin-top: 3px; font-size: .95em; color: var(--ink); }
.dmt-wie { color: var(--mc); font-weight: 650; }
/* --- variant C · TEGELS (forse gekleurde vlakken, poster-stijl) --- */
.dm-tegels { display: flex; gap: 10px; margin: 10px 0 18px; flex-wrap: wrap; }
.dmg-tegel { flex: 1; min-width: 160px; border-radius: 14px; padding: 16px;
background: var(--mcbg); border: 1px solid var(--mcl); color: var(--ink); }
.dmg-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dmg-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
background: var(--mc); color: var(--on-accent); }
.dmg-ico svg { width: 22px; height: 22px; }
.dmg-nr { font-size: 34px; font-weight: 800; color: var(--mc); opacity: .55; line-height: 1; }
.dmg-t { font-weight: 750; font-size: 1.08em; overflow-wrap: break-word; }
.dmg-s { color: var(--ink-soft); font-size: .9em; margin-top: 1px; }
.dmg-q { margin-top: 12px; font-weight: 650; color: var(--mc); }
@media (max-width: 560px) { .dmg-tegel { min-width: 100%; } }
/* Prijs-placeholder */
.prijs { color: var(--feit); background: var(--feit-bg); padding: 1px 7px;
border-radius: 6px; border: 1px dashed var(--feit-line); white-space: nowrap; }
.prijs-let-op { display:flex; gap:10px; align-items:flex-start;
background: var(--feit-bg); border:1px dashed var(--feit-line);
border-radius: 10px; padding: 11px 14px; font-size: .9em; color: var(--ink-soft); }
.prijs-let-op svg { width:18px;height:18px;color:var(--feit);flex:none;margin-top:1px; }
/* PRIJS-HERO — het ene getal, groot en met zekerheid neergezet */
.prijs-hero {
background: var(--bg-card); border: 1px solid var(--feit-line);
border-left: 4px solid var(--feit); border-radius: var(--radius);
padding: 18px 20px; box-shadow: var(--shadow);
}
.prijs-hero .ph-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prijs-hero .ph-anker { color: var(--feit); flex: none; }
.prijs-hero .ph-anker svg { width: 26px; height: 26px; display: block; }
.prijs-hero .ph-bedrag { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prijs-hero .ph-getal { font-size: 2.5em; font-weight: 800; line-height: 1.0;
color: var(--feit); letter-spacing: -.01em; }
.prijs-hero .ph-eenheid { font-size: 1.02em; font-weight: 600; color: var(--ink-soft); }
.prijs-hero .ph-tagline { margin-top: 10px; font-weight: 650; font-size: 1.06em; color: var(--ink); }
.prijs-hero .ph-toel { margin-top: 10px; color: var(--ink-soft); font-size: .94em; }
.prijs-hero .ph-toel p { margin: 0; }
/* =====================================================================
TOOLTIPS — onderstreepte termen; hover (laptop) + tap (telefoon)
===================================================================== */
.tt {
border-bottom: 2px dotted var(--feit);
cursor: help; color: inherit; position: relative;
text-decoration: none;
}
.tt.intern { border-bottom-style: dashed; border-bottom-color: var(--intern); }
.tt .badge {
font-size: 9px; font-weight: 700; vertical-align: super;
color: var(--intern); margin-left: 1px; letter-spacing: .03em;
}
/* de bubbel zelf wordt door JS in een vaste overlay geplaatst (geen clip) */
#tt-bubbel {
position: fixed; z-index: 100; max-width: 320px;
background: var(--bg-card); color: var(--ink);
border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 10px 30px rgba(40,35,28,.18);
padding: 12px 14px; font-size: 14px; line-height: 1.5;
opacity: 0; transform: translateY(4px); pointer-events: none;
transition: opacity .14s, transform .14s;
}
#tt-bubbel.zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
#tt-bubbel .tt-term { font-weight: 700; display:block; margin-bottom: 4px; }
#tt-bubbel.intern { border-color: var(--intern); border-style: dashed; }
#tt-bubbel.intern .tt-term { color: var(--intern); }
#tt-bubbel .tt-nooit { display:block; margin-top:8px; font-size:12px; font-weight:600;
color: var(--intern); }
#tt-bubbel .tt-sluit { display:none; }
html.is-touch #tt-bubbel .tt-sluit {
display:inline-block; margin-top:10px; font-size:12px; color:var(--ink-soft);
border:1px solid var(--line); border-radius:8px; padding:4px 10px; cursor:pointer; }
/* =====================================================================
ZELFTOETS — actieve recall op FOUT/PETER-paren
===================================================================== */
.toets {
margin-top: 28px; border-top: 1px dashed var(--line); padding-top: 22px;
}
.toets-kop { display:flex; align-items:center; gap:10px; margin-bottom: 4px; }
.toets-kop svg { width: 20px; height:20px; color: var(--peter); }
.toets-kop h3 { margin:0; font-size: 16px; }
.toets-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }
.toets-vraag { font-weight: 600; margin: 8px 0 12px; }
.toets-opties { display:flex; flex-direction: column; gap: 10px; }
.toets-optie {
text-align: left; font-family: inherit; font-size: .96em; line-height: 1.5;
background: var(--bg-card); border: 1.5px solid var(--line);
border-radius: 12px; padding: 13px 15px; cursor: pointer; color: var(--ink);
transition: border-color .15s, background .15s, transform .08s;
display:flex; gap: 12px; align-items:flex-start;
}
.toets-optie:hover:not(:disabled) { border-color: var(--ink-soft); }
.toets-optie:active:not(:disabled) { transform: scale(.995); }
.toets-optie .merk { flex:none; width:22px;height:22px;border-radius:50%;
border:1.5px solid var(--line); display:inline-flex;align-items:center;justify-content:center;
font-size:12px; color: var(--ink-soft); }
.toets-optie.goed { border-color: var(--goed); background: var(--goed-bg); }
.toets-optie.goed .merk { background: var(--goed); border-color: var(--goed); color:#fff; }
.toets-optie.fout { border-color: var(--fout); background: var(--fout-bg); }
.toets-optie.fout .merk { background: var(--fout); border-color: var(--fout); color:#fff; }
.toets-optie:disabled { cursor: default; }
.toets-optie.dim { opacity: .55; }
.toets-feedback {
margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: .93em;
border-left: 3px solid var(--peter); background: var(--peter-bg); color: var(--ink);
display:none;
}
.toets-feedback.zichtbaar { display:block; animation: opkomst .3s ease; }
.toets-feedback.is-fout { border-left-color: var(--fout); background: var(--fout-bg); }
.toets-feedback b { display:block; margin-bottom: 4px; }
.toets-opnieuw { margin-top: 10px; font-size: 13px; background:none; border:0;
color: var(--peter); cursor:pointer; font-family:inherit; text-decoration: underline; padding:0; }
/* =====================================================================
NAVIGATIE onderaan hoofdstuk + "waar was ik" hervat-balk
===================================================================== */
.hfd-nav { display:flex; gap: 12px; margin-top: 34px; }
.hfd-nav button, .hfd-nav a {
flex:1; text-align:left; background: var(--bg-card); border:1px solid var(--line);
border-radius: 12px; padding: 12px 16px; cursor:pointer; color: var(--ink);
font-family:inherit; transition: border-color .15s;
text-decoration:none; display:block;
}
.hfd-nav button:hover:not(:disabled), .hfd-nav a:hover { border-color: var(--ink-soft); }
.hfd-nav button:disabled { opacity:.4; cursor:default; }
.hfd-nav .richting { font-size: 11px; text-transform:uppercase; letter-spacing:.06em; color: var(--ink-soft); }
.hfd-nav .vol { font-weight: 600; margin-top: 2px; }
.hfd-nav .volgende { text-align: right; }
.markeer-knop {
display:inline-flex; align-items:center; gap:8px; margin-top: 24px;
background: var(--peter); color:#fff; border:0; border-radius: 12px;
padding: 11px 18px; font-size: 15px; font-weight:600; cursor:pointer; font-family:inherit;
}
.markeer-knop.gedaan { background: var(--bg-card); color: var(--peter); border:1px solid var(--peter-line); }
.markeer-knop svg { width:18px;height:18px; }
/* "Waar was ik gebleven" hervat-toast */
.hervat {
position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(120%);
background: var(--ink); color: var(--bg);
border-radius: 999px; padding: 10px 10px 10px 18px;
display:flex; align-items:center; gap: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
z-index: 80; transition: transform .35s ease; max-width: calc(100vw - 32px);
}
.hervat.tonen { transform: translateX(-50%); }
.hervat span { font-size: 14px; }
.hervat b { color: var(--bg); }
.hervat button { border:0; background: var(--bg-card); color: var(--ink);
border-radius: 999px; padding: 7px 14px; font-weight:600; cursor:pointer; font-family:inherit; font-size: 13.5px; }
.hervat .x { background:none; color: var(--bg); opacity:.7; padding: 7px 10px; }
/* Index overlay-knop (mobiel) */
.index-backdrop { display:none; }
/* =====================================================================
RESPONSIVE — telefoon: index als overlay-lade
===================================================================== */
@media (max-width: 880px) {
.index {
position: fixed; top: 52px; left: 0; bottom: 0; width: 290px; z-index: 60;
transform: translateX(-100%); transition: transform .28s ease;
border-right: 1px solid var(--line); box-shadow: var(--shadow);
}
.shell.index-open .index { transform: none; }
.shell.index-open .index-backdrop {
display:block; position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.32); z-index: 55;
}
.kolom { padding: 22px 18px 140px; }
.hoofdstuk-titel { font-size: 23px; }
body { font-size: 16.5px; }
.turn { max-width: 94%; } /* bubbels iets breder op telefoon */
}
@media (min-width: 881px) {
.menu-knop { display: none; }
}
/* print */
@media print {
.topbar, .index, .toets, .hfd-nav, .markeer-knop, .hervat, #tt-bubbel, .voortgang-rail { display:none !important; }
.blok { opacity:1 !important; transform:none !important; animation:none; }
body { background:#fff; font-size: 12pt; }
.kolom { max-width: none; padding: 0; }
}
/* =====================================================================
TOELICHTING — de boekstem die tussen de sprekers door uitlegt waarom
een zin werkt. Drie universele behandelingen; kies er één boekbreed.
Gebruik: …
===================================================================== */
.toel-tekst p { margin: 0 0 .45em; }
.toel-tekst p:last-child { margin-bottom: 0; }
/* A — Verbonden toelichting: zachte kantlijn-annotatie, hoort hoorbaar bij
de bubbel erboven. Kleinere, rustiger tekst met een klein kopje. */
.toel-a {
margin: 4px 0 16px;
border-left: 3px solid var(--feit-line);
background: linear-gradient(to right, color-mix(in srgb, var(--feit-bg) 60%, transparent), transparent 75%);
padding: 9px 16px 11px; border-radius: 0 10px 10px 0;
}
.toel-a .toel-tekst { color: var(--ink-soft); font-size: .955em; }
.toel-a .toel-eyebrow {
display: inline-block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
font-weight: 700; color: var(--feit); margin-bottom: 3px;
}
/* B — Coach-kaart: een rustige kaart met icoon. Onmiskenbaar de boekstem,
apart van de dialoog gezet zodat verteller ≠ spreker. */
.toel-b {
display: flex; gap: 12px; align-items: flex-start;
margin: 12px 0 16px; /* standaard: netjes in de leeskolom */
background: var(--bg-card); border: 1px solid var(--line);
border-radius: 12px; padding: 12px 15px; box-shadow: var(--shadow);
}
/* alléén náást een gesprek: -16px links = rand(1) + padding-links(15), zodat het
lampje precies op de as van de ✓/✕-chips valt. (zie handboek.js: bijGesprek) */
.toel-b.bij-gesprek { margin-left: -16px; }
.toel-b .toel-ico {
flex: none; width: 30px; height: 30px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
background: var(--feit-bg); color: var(--feit);
}
.toel-b .toel-ico svg { width: 17px; height: 17px; }
.toel-b .toel-tekst { font-size: .98em; font-style: italic; }
.toel-b .toel-eyebrow {
display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
font-weight: 700; color: var(--feit); margin-bottom: 2px;
}
/* C — Stille tussenzin: bijna kaal, maar met haarlijnen en een smallere
maat, zodat de dialoog eromheen kan ademen. Laagste chrome. */
.toel-c {
text-align: center; color: var(--ink-soft);
max-width: 54ch; margin: 16px auto; padding: 13px 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
font-size: .965em;
}
.toel-c .toel-tekst { font-style: italic; }
/* =====================================================================
GEKOPPELDE TOELICHTING — een uitleg die zichtbaar bij de bubbel erbóven
hoort (data-koppel="a|b|c" op een toelichting die direct na een spreker
staat). De bubbel zit in .paar/.rij: chip 30px + gap 11px = 41px tot de
bubbelrand, dus springen we 41px in om onder de bubbel uit te lijnen.
===================================================================== */
.koppel-eyebrow {
display: block; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
font-weight: 700; color: var(--peter); margin-bottom: 3px;
}
.koppel-tekst { font-size: .94em; }
.koppel-tekst p { margin: 0 0 .4em; }
.koppel-tekst p:last-child { margin-bottom: 0; }
/* A — draadje: ingesprongen onder de bubbel, met een korte verbindingslijn
die naar de bubbel omhoog wijst. Rustig, geen icoon. */
.paar .koppel-a {
position: relative;
margin: 2px 0 16px 41px;
padding: 8px 14px 9px;
border-left: 2px solid var(--peter-line);
background: linear-gradient(to right, var(--peter-bg), transparent 82%);
border-radius: 0 10px 10px 0;
}
.paar .koppel-a .koppel-ico { display: none; }
.paar .koppel-a::before {
content: ""; position: absolute; left: -2px; top: -10px;
width: 2px; height: 12px; background: var(--peter-line);
}
.paar .koppel-a .koppel-tekst { color: var(--ink-soft); font-style: italic; }
/* B — wijzer-kaartje: getint kaartje vlak onder de bubbel met een pijltje
omhoog dat naar Peters woorden wijst. */
.paar .koppel-b {
position: relative;
display: flex; gap: 11px; align-items: flex-start;
margin: 11px 0 16px 41px;
padding: 11px 14px;
background: var(--peter-bg); border: 1px solid var(--peter-line);
border-radius: 12px;
}
.paar .koppel-b::before {
content: ""; position: absolute; top: -7px; left: 24px;
width: 12px; height: 12px; background: var(--peter-bg);
border-left: 1px solid var(--peter-line); border-top: 1px solid var(--peter-line);
transform: rotate(45deg);
}
.paar .koppel-b .koppel-ico {
flex: none; width: 28px; height: 28px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--peter); color: #fff;
}
.paar .koppel-b .koppel-ico svg { width: 16px; height: 16px; }
.paar .koppel-b .koppel-tekst { font-style: italic; }
/* C — samengevoegd: de uitleg ín de bubbel, onder een haarlijn. Eén geheel,
dus geen twijfel bij wie de uitleg hoort. */
.bub .bub-uitleg {
margin-top: 10px; padding-top: 9px;
border-top: 1px dashed var(--peter-line);
font-size: .9em; font-style: italic; color: var(--ink-soft);
}
.bub .bub-uitleg .koppel-eyebrow { font-style: normal; }
.bub .bub-uitleg p { margin: 0; }
/* Tussenkop binnen een pagina (data-blok="kop" of een kale ) */
.sub-kop {
font-size: 20px; line-height: 1.25; letter-spacing: -.01em;
margin: 30px 0 4px; padding-top: 14px; border-top: 1px solid var(--line);
}
.blok:first-of-type .sub-kop { border-top: 0; padding-top: 0; margin-top: 8px; }
/* ── objectie-kaart ── elke "wat Jan hier kan zeggen"-objectie staat in een eigen
omlijnd kader met een nummerlabel, zodat het losse gevallen zijn — geen één
doorlopend gesprek. De kaart zelf is de animatie-eenheid; de blokken erbinnen
staan dichter op elkaar en animeren niet apart. */
.objectie {
position: relative;
border: 1px solid var(--line); border-radius: 16px;
background: var(--bg-card); box-shadow: var(--shadow);
padding: 18px 18px 8px; margin: 22px 0;
opacity: 0; transform: translateY(8px); animation: opkomst .45s ease forwards;
}
.objectie .obj-nr {
position: absolute; top: -12px; left: 18px;
display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
background: var(--jan); color: #fff; font-size: 11px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; border-radius: 999px;
box-shadow: var(--shadow);
}
.objectie .blok { margin: 0 0 12px; opacity: 1; transform: none; animation: none; }
.objectie .blok:last-child { margin-bottom: 4px; }
.objectie .vertakking { margin: 4px 0 8px; }
@media print { .objectie { break-inside: avoid; box-shadow: none; } }
/* ── vertakking ── beslis-kaart: "zegt Jan zó (links), dan zegt u zó (rechts)" */
.vertakking {
border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card);
box-shadow: var(--shadow); padding: 4px 18px; margin: 18px 0;
}
.vt-vraag {
display: flex; align-items: center; gap: 9px;
font-weight: 700; color: var(--ink); padding: 14px 0 2px;
}
.vt-vraag svg { width: 18px; height: 18px; color: var(--peter); flex: none; }
.vt-tak {
display: grid; grid-template-columns: minmax(34%, 38%) 1fr; gap: 16px;
align-items: start; padding: 14px 0; border-top: 1px solid var(--line);
}
.vt-tak:first-child { border-top: 0; }
.vt-vraag + .vt-tak { border-top: 1px solid var(--line); }
.vt-als {
display: flex; gap: 9px; align-items: flex-start;
font-weight: 600; color: color-mix(in srgb, var(--ink) 86%, var(--jan));
}
.vt-als .chip { flex: none; }
.vt-dan { color: var(--ink); }
.vt-dan p { margin: 0 0 .5em; }
.vt-dan p:last-child { margin-bottom: 0; }
.vt-dan em { color: var(--peter); font-style: italic; }
@media (max-width: 560px) {
.vt-tak { grid-template-columns: 1fr; gap: 7px; }
}
/* ── tweesprong ── een korte ja/nee-fork die daarna weer samenkomt: twee
kolommen naast elkaar (stapelt op smal scherm), pagina loopt eronder verder. */
.tweesprong { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.tw-kol {
border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card);
box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column;
}
.tw-hd {
display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .82em;
text-transform: uppercase; letter-spacing: .04em;
padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.tw-kol.ja .tw-hd { color: var(--peter); }
.tw-kol.nee .tw-hd { color: var(--ink-soft); }
.tw-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tw-kol.ja .tw-dot { background: var(--peter); }
.tw-kol.nee .tw-dot { background: var(--ink-soft); }
.tw-zin { font-weight: 650; color: var(--ink); margin: 0 0 9px; font-size: 1.02em; }
.tw-zin:last-child { margin-bottom: 0; }
.tw-zin em { color: var(--peter); font-style: italic; }
.tw-noot { color: var(--ink-soft); font-size: .9em; font-style: italic; margin: 0; }
@media (max-width: 560px) { .tweesprong { grid-template-columns: 1fr; } }
/* ── stap-kop ── een genummerde kop voor een vaste 1-2-3-procedure: groot
half-transparant cijfer + "Stap N van M" + titel, met groene onderlijn.
Anders dan sub-kop (losse tussenkop): bindt de stappen tot één zet. */
.sk-kop { display: flex; align-items: baseline; gap: 16px; margin: 32px 0 8px;
padding-bottom: 10px; border-bottom: 2px solid var(--peter-line); }
.sk-nr { flex: none; font-size: 2.7em; font-weight: 800; line-height: .85; color: var(--peter); opacity: .45; }
.sk-eyebrow { font-size: .72em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--peter); }
.sk-tt { font-size: 1.2em; font-weight: 750; color: var(--ink); line-height: 1.2; margin: 2px 0 0; }
.blok:first-of-type .sk-kop { margin-top: 8px; }
/* ── proza.lead ── standfirst: een iets grotere, lichtere openingszin voor een
hoofdstukintro. */
.proza.lead { font-size: 1.18em; line-height: 1.5; font-weight: 550; color: var(--ink); margin-bottom: 14px; }
/* ── reisroute ── de stappen van een gesprek als verbonden tijdlijn: genummerd
station + verticale lijn, elk met naam en korte uitleg. De volgorde (de route)
draagt de betekenis; anders dan "stappen" (compact overzicht zonder uitleg). */
.reisroute { margin: 16px 0 4px; }
.rr-stap { position: relative; padding: 0 0 24px 52px; }
.rr-stap:last-child { padding-bottom: 4px; }
.rr-stap::before { content: ""; position: absolute; left: 18px; top: 36px; bottom: 2px; width: 2px; background: var(--peter-line); }
.rr-stap:last-child::before { display: none; }
.rr-nr { position: absolute; left: 0; top: 2px; width: 38px; height: 38px; border-radius: 50%;
background: var(--peter-bg); border: 2px solid var(--peter-line); color: var(--peter);
display: grid; place-items: center; font-weight: 800; }
.rr-naam { margin: 7px 0 4px; font-size: 1.06em; font-weight: 750; color: var(--ink); }
.rr-uitleg { color: var(--ink-soft); line-height: 1.5; }
/* ── signalen ── één hoofdstuk-kaart die een paar vragen-om-op-te-letten bundelt:
per rij de vraag (groen) + de coach-uitleg, met eventueel een Peter-bubbel
ertussen. Eén samenhangende kaart i.p.v. losse coach-kaartjes. */
.signalen { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card);
box-shadow: var(--shadow); padding: 4px 20px; margin: 16px 0; }
.sg-rij { padding: 16px 0; }
.sg-rij + .sg-rij { border-top: 1px solid var(--line); }
.sg-q { font-weight: 750; color: var(--peter); margin: 0 0 7px; }
.sg-rij p { margin: 0; color: var(--ink); line-height: 1.55; }
.sg-rij .paar { margin: 11px 0; }
/* ── appbericht ── een WhatsApp-bericht-voorbeeld: intro/kop, telefoon-mockup
met bijlage + tekst, en eronder een coach-noot (goed) of een waarom (fout). */
.wa-intro { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 16px; line-height: 1.55; }
.wa-intro svg { width: 19px; height: 19px; color: var(--peter); flex: none; margin-top: 3px; }
.wa-foutkop { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--fout); margin: 0 0 14px; }
.wa-foutkop::before { content: "✗"; font-size: 1.05em; }
.wa-foon {
max-width: 300px; margin: 0 auto; border-radius: 28px; overflow: hidden;
background: #e6ddd1; border: 8px solid #111; box-shadow: var(--shadow);
}
html[data-thema="donker"] .wa-foon { background: #0b1410; border-color: #000; }
.wa-foon.fout { box-shadow: 0 0 0 2px var(--fout), var(--shadow); }
.wa-bar { display: flex; align-items: center; gap: 9px; padding: 12px; background: #075e54; color: #fff; }
.wa-avatar {
width: 30px; height: 30px; border-radius: 50%; background: #cbb994; flex: none;
display: grid; place-items: center; font-weight: 800; color: #5a4a2a; font-size: 13px;
}
.wa-naam { font-weight: 700; font-size: 14px; line-height: 1.1; }
.wa-status { font-size: 11px; opacity: .85; }
.wa-body {
padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 8px;
background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px); background-size: 14px 14px;
}
.wa-bubble {
align-self: flex-end; max-width: 88%;
background: #dcf8c6; color: #111; border-radius: 10px 10px 2px 10px;
padding: 6px 8px 5px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
html[data-thema="donker"] .wa-bubble { background: #144d36; color: #e9f5ee; }
.wa-bubble .serp { margin: 0 0 5px; }
.wa-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.wa-time { font-size: 10px; color: #5b746a; }
html[data-thema="donker"] .wa-time { color: #9fc7b4; }
.wa-check { font-size: 11px; color: #53bdeb; letter-spacing: -2px; }
/* coach-noot onder het goede bericht */
.wa-note {
margin: 16px auto 0; max-width: 560px; padding: 10px 14px;
font-size: .96em; font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--peter-line);
}
.wa-note .lbl {
display: block; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .05em;
text-transform: uppercase; color: var(--peter); margin-bottom: 3px;
}
/* waarom onder het foute bericht — gecentreerd onder de telefoon */
.wa-foon-waarom { margin: 16px auto 0; max-width: 560px; }
/* 'uw plek op Google' — nagebouwde mini-zoekresultaten (illustratief; later een ![]()
) */
.serp {
border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.12);
background: #fff; font-family: arial, "Segoe UI", sans-serif; color: #202124;
}
.serp-bar { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-bottom: 1px solid #ebebeb; }
.serp-bar .q {
flex: 1; height: 18px; background: #f1f3f4; border-radius: 9px;
display: flex; align-items: center; padding: 0 9px; font-size: 10px; color: #5f6368;
}
.serp-bar .mag { width: 13px; height: 13px; border: 1.5px solid #9aa0a6; border-radius: 50%; position: relative; flex: none; }
.serp-bar .mag::after { content: ""; position: absolute; right: -3px; bottom: -2px; width: 5px; height: 1.5px; background: #9aa0a6; transform: rotate(45deg); }
.serp-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 7px 9px; border-bottom: 1px solid #f3f3f3; }
.serp-row:last-child { border-bottom: 0; }
.serp-row .nm { font-size: 11px; font-weight: 600; color: #1a0dab; line-height: 1.2; }
.serp-row .url { grid-column: 1; font-size: 9px; color: #3c8c40; }
.serp-row .rate { grid-column: 2; grid-row: 1 / span 2; text-align: right; white-space: nowrap; }
.serp-row .stars { font-size: 9px; color: #fbbc04; letter-spacing: .5px; }
.serp-row .num { font-size: 8.5px; color: #5f6368; }
.serp-row.mine { background: #fff4e0; }
.serp-row.mine .nm::after {
content: "u"; margin-left: 6px; font-size: 8px; font-weight: 800; color: #fff;
background: var(--jan); border-radius: 3px; padding: 0 4px; vertical-align: middle; letter-spacing: .04em;
}
.serp-row.mine .stars { color: #c9c4bb; }
.serp-row.mine .num { color: #b23b3b; font-weight: 700; }
/* SERP, grotere variant — voor een losstaand plaatje (niet in een telefoon) */
.serp--groot { width: 100%; max-width: 380px; }
.serp--groot .serp-bar { padding: 10px 13px; }
.serp--groot .serp-bar .q { height: 26px; border-radius: 13px; font-size: 13px; padding: 0 12px; }
.serp--groot .serp-bar .mag { width: 16px; height: 16px; }
.serp--groot .serp-row { padding: 11px 13px; }
.serp--groot .serp-row .nm { font-size: 15px; }
.serp--groot .serp-row .url { font-size: 12px; }
.serp--groot .serp-row .stars { font-size: 13px; letter-spacing: 1px; }
.serp--groot .serp-row .num { font-size: 12px; }
.serp--groot .serp-row.mine .nm::after { font-size: 10px; padding: 1px 5px; }
/* PLAATJE — een ingekaderd voorbeeld (figuur) met kop-label + bijschrift */
.plaatje {
margin: 0; background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.plaatje .pl-kop {
display: flex; align-items: center; gap: 9px; padding: 11px 16px;
font-weight: 700; color: var(--kaart); background: var(--bg);
border-bottom: 1px solid var(--line);
}
.plaatje .pl-ico { color: var(--ink-soft); display: flex; flex: none; }
.plaatje .pl-ico svg { width: 18px; height: 18px; }
.plaatje .pl-body { padding: 18px 16px; display: flex; justify-content: center; }
.plaatje .pl-bij {
padding: 0 18px 15px; font-size: .88em; line-height: 1.5;
color: var(--ink-soft); text-align: center;
}
/* oproep-tot-actie — afsluitend paneel met portaalknop naar de oefen-app.
Zelfde groene portaalstijl als de topbar-knop (.naar-toets), maar groter. */
.cta-blok {
display: flex; flex-direction: column; align-items: center; gap: 16px;
text-align: center; padding: 26px 22px;
background: color-mix(in srgb, var(--peter) 8%, var(--bg-card));
border: 1px solid color-mix(in srgb, var(--peter) 30%, var(--line));
border-radius: var(--radius);
}
.cta-blok .cta-tekst { font-size: 1.08em; font-weight: 700; color: var(--ink); line-height: 1.45; }
.cta-blok .cta-tekst p { margin: 0; }
.cta-knop {
display: inline-flex; align-items: center; gap: 9px;
padding: 12px 22px; border-radius: 11px;
background: var(--peter); border: 1px solid var(--peter); color: #fff;
font-weight: 700; font-size: 15px; text-decoration: none;
transition: filter .15s, transform .15s;
}
.cta-knop:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cta-knop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cta-knop svg { width: 20px; height: 20px; flex: none; }