/* Psy-Well prototypes — shared base. Pulls the real design system in, so a token change lands here too. */ *,*::before,*::after{box-sizing:border-box} /* Het hidden-attribuut moet altijd winnen. De browser zet er display:none op, maar elke eigen display-regel (.card is display:flex) overrulet dat, en dan blijft een verborgen element gewoon staan. Daar zijn hierboven al vijf componenten los op gepatcht; dit is dezelfde fix, één keer en voor alles. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-primary); font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal); overflow-x:hidden} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0} p{margin:0} a{color:var(--text-accent)} a:hover{color:var(--mauve-700)} ul{margin:0} /* Ankers mogen niet onder de vaste kopbalk verdwijnen. */ :target,section[id]{scroll-margin-top:9rem} /* ---------- crisis strip: first thing after the skip link, never dismissible ---------- */ .crisis{background:var(--midnight);color:var(--text-on-dark);font-size:var(--text-sm)} .crisis .in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4); padding-block:10px} .crisis strong{font-weight:500} .crisis a{color:var(--wisteria);text-decoration:underline;text-underline-offset:2px} .crisis a:hover{color:var(--parchment)} .crisis .dot{width:7px;height:7px;border-radius:50%;background:var(--wisteria);flex-shrink:0} /* De strip staat vast in beeld, dus op mobiel moet hij op één regel passen — anders eet hij een vijfde van het scherm op. De volledige zin blijft op desktop staan. */ .crisis-long{display:none} @media (min-width:900px){.crisis-long{display:inline}} /* ---------- vaste kopbalk ---------- Crisisstrip en navigatie zitten samen in één sticky blok. De crisisroute blijft daardoor op elk scrollmoment bereikbaar, en niet alleen bovenaan de pagina. */ .topbar{position:sticky;top:0;z-index:40;background:var(--surface-page); border-bottom:1px solid var(--border-subtle)} .site-header .in{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);padding-block:var(--space-4)} /* ---------- logo ---------- Beeldmerk plus woordmerk uit "Psy-Well Logo Voorstel B". Het woordmerk was gespatieerde kapitaal-serif (PSY-WELL in Marcellus). Dat vervalt: naast een beeldmerk vechten twee sterke elementen om aandacht. Nu DM Sans medium in sentence case met tracking −.032em, zoals het voorstel voorschrijft. Gespatieerde kapitalen blijven wél bestaan voor navigatielabels en tabelkoppen — niet als label boven een kop. De vrije ruimte is één balkdikte: de balk is 76 van de 200 eenheden, dus .38em van de merkgrootte. Dat is meteen de afstand tussen merk en woord. */ .wordmark{--logo-size:2rem; display:inline-flex;align-items:center;gap:calc(var(--logo-size) * .38); padding:calc(var(--logo-size) * .38) 0; color:var(--text-primary);text-decoration:none;flex-shrink:0} .wordmark:hover{color:var(--text-primary)} .wordmark .logo-mark{width:var(--logo-size);height:var(--logo-size);flex-shrink:0; display:block} .wordmark-tekst{font-family:var(--font-sans);font-weight:500; font-size:calc(var(--logo-size) * .72);letter-spacing:-.032em;line-height:1} /* Minimummaten uit het voorstel: 16 px als absolute ondergrens, 24 px waaronder de kern een stap groter moet (dat is de `klein`-variant in lib/ui.js), 44 px als comfortabele maat. */ @media (max-width:899px){.wordmark{--logo-size:1.75rem}} .nav{display:none} .nav ul{display:flex;align-items:center;gap:2px;list-style:none;padding:0} .nav a,.nav .nav-top{display:inline-flex;align-items:center;gap:4px;min-height:44px; padding:0 14px;border:none;background:none;cursor:pointer; border-radius:var(--radius-pill);text-decoration:none; font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-secondary)} .nav a:hover,.nav .nav-top:hover{background:var(--surface-softer);color:var(--text-on-soft)} .nav a[aria-current="page"],.nav .nav-top[data-current]{background:var(--surface-softer); color:var(--text-on-soft);font-weight:500} .nav .nav-top .chev{transition:transform var(--dur-fast) var(--ease-brand)} .nav .nav-top[aria-expanded="true"]{background:var(--surface-softer);color:var(--text-on-soft)} .nav .nav-top[aria-expanded="true"] .chev{transform:rotate(180deg)} /* ---------- uitklapper onder de balk ---------- Absoluut gepositioneerd binnen .topbar, die sticky is en dus zelf het positioneringskader vormt. Daardoor hangt het paneel onder de balk in beide smaken, ook onder de zwevende pill-navigatie van smaak D, zonder dat de pagina eronder verschuift. */ .nav-flyout{position:absolute;left:0;right:0;top:100%;z-index:39; background:var(--surface-card);border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-float)} .nav-flyout[hidden]{display:none} .nav-flyout .in{padding-block:var(--space-6)} /* Twee of drie kolommen, afhankelijk van hoeveel groepen een ingang heeft. auto-fit in plaats van een vast aantal, zodat een extra groep geen CSS-wijziging vraagt. */ .fly-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--space-5) var(--space-6)} /* Geen kop maar een label: een

in een uitklapper staat in de DOM vóór de

van de pagina en breekt daarmee de koppenvolgorde. */ .fly-h{font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wide); text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)} .fly-col ul{list-style:none;padding:0;display:flex;flex-direction:column} .fly-col a{display:flex;align-items:center;min-height:40px;padding:2px 0; text-decoration:none;color:var(--text-primary);font-size:var(--text-base)} .fly-col a:hover{color:var(--text-accent);text-decoration:underline} /* De actie staat ook op mobiel in de balk, direct links van de hamburger. margin-left:auto duwt de twee als groep naar rechts; zonder dat spreidt space-between ze over de hele balk. Zodra het menu opengaat verdwijnt de knop: het paneel dekt het scherm af, en wat je niet ziet hoort ook niet in de tabvolgorde te blijven staan. */ .header-actions{display:flex;gap:var(--space-2);align-items:center;margin-left:auto} @media (max-width:899px){.site-header .in{gap:var(--space-3)}} body.nav-open .header-actions{display:none} .nav-toggle{display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;border:none;cursor:pointer;border-radius:var(--radius-pill); background:var(--surface-soft);color:var(--text-on-soft);flex-shrink:0} .nav-toggle:hover{background:var(--wisteria-300)} /* ---------- mobiel menu: schermvullend paneel ---------- Naar het voorbeeld van de gedeelde N26-navigatie: een eigen kopregel met woordmerk en sluitkruis, daaronder grote regels met een chevron, en onderin de acties vast in beeld. */ .nav-panel{position:fixed;inset:0;z-index:200;background:var(--surface-page); display:flex;flex-direction:column} .nav-panel[hidden]{display:none} .nav-panel-head{border-bottom:1px solid var(--border-strong);flex-shrink:0} .nav-panel-head .in{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);padding-block:var(--space-4)} /* Zelfde maat en zelfde rechtermarge als de hamburger, zodat het kruis precies op de plek verschijnt waar je net hebt getikt. De negatieve marge die hier stond verschoof hem 10px. */ .nav-close{width:44px;height:44px;border:none;background:none;cursor:pointer; color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center; border-radius:var(--radius-pill);flex-shrink:0} .nav-close:hover{background:var(--surface-softer)} /* width:100% is nodig omdat .psy-page een `margin:0 auto` meebrengt; in een flex-kolom schakelt een auto-marge de stretch uit en krimpt het blok tot inhoudsbreedte. */ .nav-panel-list{flex:1;width:100%;overflow-y:auto;display:flex;flex-direction:column; padding-block:var(--space-5)} /* Een hoofdingang: een rij in de displayletter met een chevron. Heeft hij onderliggende pagina's, dan is het een knop die eronder een omkaderd blok opent in plaats van een link die je wegstuurt. Dat is het patroon uit de gedeelde N26-navigatie. */ .np-top,.np-link{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);width:100%;padding:var(--space-4) 0;min-height:60px; border:none;background:none;cursor:pointer;text-align:left;text-decoration:none; font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.2; color:var(--text-primary)} .np-top:hover,.np-link:hover{color:var(--text-on-soft)} .np-top svg,.np-link svg{color:var(--text-muted);flex-shrink:0; transition:transform var(--dur-fast) var(--ease-brand)} .np-top[aria-expanded="true"] .chev{transform:rotate(180deg)} .np-top[data-current],.np-link[aria-current="page"]{color:var(--text-accent)} .np-top[data-current] svg,.np-link[aria-current="page"] svg{color:var(--text-accent)} /* Het uitgeklapte blok. Eigen kader en eigen achtergrond, zodat zichtbaar is waar de groep begint en ophoudt — anders lopen sub-items en hoofdingangen in elkaar over. */ .np-sub{background:var(--surface-softer);border:1px solid var(--border-subtle); border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5) var(--space-5); margin-bottom:var(--space-4)} .np-sub[hidden]{display:none} .np-group{font-size:var(--text-xs);font-weight:500;letter-spacing:var(--tracking-wide); text-transform:uppercase;color:var(--text-secondary); margin-bottom:var(--space-3);padding-top:var(--space-2)} .np-group + .np-group,.np-sub a + .np-group{margin-top:var(--space-5)} .np-sub a{display:flex;align-items:center;min-height:48px; text-decoration:none;color:var(--text-primary);font-size:var(--text-lg)} .np-sub a:hover{color:var(--text-accent);text-decoration:underline} .nav-panel-foot{border-top:1px solid var(--border-subtle);flex-shrink:0; background:var(--surface-card)} .nav-panel-foot .in{display:flex;flex-direction:column;gap:var(--space-2); padding-block:var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))} .nav-panel-foot .btn{width:100%} .nav-crisis{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2)} .nav-crisis a{font-weight:500} @media (min-width:900px){ .nav{display:block} .nav-toggle,.nav-panel{display:none} /* Drie kolommen in plaats van space-between: woordmerk links, menu écht in het midden, actie rechts. Met space-between hing het menu tegen het woordmerk aan en stond het optisch links, ook al was er rechts ruimte zat. De hamburger is hier display:none en telt dus niet mee als vierde kolom. */ .site-header .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .header-actions{justify-self:end;margin-left:0} } @media (max-width:899px){ /* Onder 900px is er geen uitklapper: het paneel doet het werk. */ .nav-flyout{display:none !important} } /* ---------- buttons & pills ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 24px;border:none;border-radius:var(--radius-pill);cursor:pointer; font-family:var(--font-sans);font-size:var(--text-base);font-weight:500; text-decoration:none;line-height:1; transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand)} .btn-primary{background:var(--mauve);color:var(--text-on-brand)} .btn-primary:hover,.btn-primary:focus-visible{background:var(--mauve-600);color:var(--text-on-brand)} .btn-dark{background:var(--midnight);color:var(--text-on-dark)} .btn-dark:hover,.btn-dark:focus-visible{background:var(--plum);color:var(--text-on-dark)} .btn-soft{background:var(--surface-soft);color:var(--mauve-700)} .btn-soft:hover,.btn-soft:focus-visible{background:var(--wisteria-300);color:var(--mauve-700)} .btn-ghost{background:transparent;color:var(--mauve-700);padding-inline:14px} .btn-ghost:hover,.btn-ghost:focus-visible{background:var(--surface-softer);color:var(--mauve-700)} /* Paarse tint voor de aanmeldknop in het menu en de footer: op een licht paneel valt mauve beter op dan het bijna-zwarte midnight, en het is de primaire merkkleur. */ .btn-menu{background:var(--mauve);color:var(--text-on-brand)} .btn-menu:hover,.btn-menu:focus-visible{background:var(--mauve-600);color:var(--text-on-brand)} .btn-menu-alt{background:var(--surface-soft);color:var(--text-on-soft)} .btn-menu-alt:hover,.btn-menu-alt:focus-visible{background:var(--wisteria-300);color:var(--text-on-soft)} /* Press-state. De richtlijn schrijft een driestapsreeks voor: "Hover: knoppen worden één stap donkerder. Press: nog een stap donkerder, geen schaal-effecten." Alleen de eerste twee stappen stonden in CSS, dus indrukken gaf geen enkele terugkoppeling. */ .btn-primary:active,.btn-menu:active{background:var(--mauve-700)} .btn-dark:active{background:var(--midnight)} .btn-soft:active,.btn-menu-alt:active{background:var(--wisteria)} .btn-ghost:active{background:var(--surface-soft)} .pill:active{background:var(--wisteria-200)} .nav-toggle:active{background:var(--wisteria)} .btn-sm{min-height:36px;padding:0 18px;font-size:var(--text-sm)} .btn-lg{min-height:52px;padding:0 32px;font-size:var(--text-lg)} /* 36px is dense enough for a mouse and passes WCAG 2.2 AA (24px minimum), but on a touch viewport every tap target goes to 44px — the rule the readme states. */ @media (max-width:899px){ .btn-sm,.pill{min-height:44px} } .pill{display:inline-flex;align-items:center;min-height:36px;padding:0 18px; border-radius:var(--radius-pill);background:var(--surface-card);box-shadow:var(--shadow-card); font-size:var(--text-sm);color:var(--text-primary);text-decoration:none} .pill:hover{background:var(--wisteria-100);color:var(--text-primary)} .badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-pill); font-size:var(--text-xs);font-weight:500;letter-spacing:.02em; background:var(--surface-soft);color:var(--mauve-700)} .badge-warning{background:var(--surface-warning);color:var(--status-warning)} .badge-success{background:var(--surface-success);color:var(--status-success)} /* Anything not yet supplied by the client is labelled, never quietly presented as fact. */ .ph{display:inline-flex;align-items:center;gap:6px;padding:3px 10px; border-radius:var(--radius-pill);background:var(--surface-warning);color:var(--status-warning); font-size:var(--text-xs);font-weight:500;letter-spacing:.02em} /* Een pill die zelf een placeholder is, draagt die markering in het vlak zelf. Een bijschrift onder de rij wordt overgeslagen door wie scant. */ .pill-ph{background:var(--surface-warning);color:var(--status-warning); border-color:transparent;box-shadow:none} .pill-ph:hover{background:var(--surface-warning);color:var(--status-warning)} /* ---------- surfaces ---------- */ .card{background:var(--surface-card);border-radius:var(--radius-lg); box-shadow:var(--shadow-card);padding:var(--space-6)} .card-soft{background:var(--surface-soft);box-shadow:none} .card-softer{background:var(--surface-softer);box-shadow:none} .card-dark{background:var(--surface-dark);color:var(--text-on-dark);box-shadow:none} .card-dark h2,.card-dark h3{color:var(--text-on-dark)} .card-flat{background:transparent;box-shadow:none;padding:0} /* ---------- swipe-rij ---------- Twee kaarten die naast elkaar horen te staan worden onder de kolombreuk een stapel van twee schermvullende blokken: je scrollt langs de eerste heen zonder te weten dat er een tweede is die ermee vergelijkt. Onder 900px wordt het daarom één horizontale rij met scroll-snap. De rij loopt door de gutter heen naar de schermrand en de volgende kaart steekt er zichtbaar naast uit — dat is het enige wat vertelt dat er meer is, dus die 14% overloop is functioneel en geen marge. De container heeft tabindex="0" in de markup: een scrollbaar vlak zonder focusbare inhoud is anders niet met het toetsenbord te bereiken (WCAG 2.1.1). */ @media (max-width:899px){ /* `grid-template-columns:none` is hier geen opruimwerk maar de kern: .psy-grid-2 zet een expliciete kolom van 1fr, en met grid-auto-flow:column belandt de eerste kaart daarin terwijl alle volgende de impliciete 86% krijgen. Eén smalle kaart naast brede dus. */ .swipe-m{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:86%;gap:var(--space-4); overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; padding-inline:var(--gutter);margin-inline:calc(-1 * var(--gutter)); scroll-padding-inline:var(--gutter);scrollbar-width:none} .swipe-m::-webkit-scrollbar{display:none} .swipe-m > *{scroll-snap-align:start} /* De kv-rijen splitsen vanaf 640px in een labelkolom van 14rem plus waarde. Die breekpunten kijken naar het scherm, niet naar de kaart — en een kaart in deze rij is 86% van een tablet, niet van de pagina. Daar bleef voor de waarde een kolom van een paar woorden breed over. Binnen een swipe-kaart stapelen label en waarde dus altijd. */ .swipe-m .kv > div{grid-template-columns:1fr;gap:2px} /* Focus op de rij zelf moet zichtbaar zijn, maar niet als een kader om de hele sectie. */ .swipe-m:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:var(--radius-lg)} } /* Sectiepadding: was 64px overal, dat las als één lange lap. Nu compacter, en het onderscheid tussen secties komt van de banden hieronder in plaats van van witruimte. */ section{padding-block:var(--space-7)} @media (min-width:900px){section{padding-block:var(--space-8)}} section:first-of-type{padding-top:var(--space-5)} .section-head{max-width:60ch;margin-bottom:var(--space-5)} .section-head p{color:var(--text-secondary);margin-top:var(--space-3)} .lead{font-size:var(--text-lg);color:var(--text-secondary);max-width:58ch} .muted{color:var(--text-muted);font-size:var(--text-sm)} .prose{max-width:66ch} .prose p + p{margin-top:var(--space-4)} .prose h3{margin-top:var(--space-6);margin-bottom:var(--space-3)} .prose ul{padding-left:1.15em;color:var(--text-secondary)} .prose li + li{margin-top:var(--space-2)} /* ---------- kleurbanden ---------- Secties krijgen een eigen vlak dat over de volle breedte doorloopt, ook al zit de sectie in een gecentreerde kolom. De box-shadow + clip-path doen dat zonder pseudo-element en zonder stapelvolgorde-gedoe, en zonder horizontale overflow te veroorzaken. Dit is wat het onderscheid tussen secties draagt — niet nog meer witruimte. */ section[data-band]{ background:var(--band); box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax); } section[data-band="softer"]{--band:var(--wisteria-100)} section[data-band="soft"]{--band:var(--wisteria-200)} section[data-band="card"]{--band:var(--surface-card)} section[data-band="brand"]{--band:var(--mauve);color:var(--text-on-brand)} section[data-band="dark"]{--band:var(--midnight);color:var(--text-on-dark)} /* Op een merk- of donkere band moet alles wat een eigen kleur had, meebewegen. */ section[data-band="brand"] .section-head p, section[data-band="dark"] .section-head p, section[data-band="brand"] .lead, section[data-band="dark"] .lead, section[data-band="brand"] .muted, section[data-band="dark"] .muted, section[data-band="brand"] .prose ul, section[data-band="dark"] .prose ul, section[data-band="brand"] .prose p, section[data-band="dark"] .prose p{color:var(--wisteria-200)} /* `:not(.btn)` is hier het hele punt. Deze regel is specifieker dan `.btn-menu-alt` en won het daarvan, waardoor een knop op de merkband wisteria tekst kreeg op een wisteria vlak: 1,6:1. Knoppen dragen hun eigen kleurpaar; alleen tekstlinks volgen de band. */ section[data-band="brand"] a:not(.btn), section[data-band="dark"] a:not(.btn){color:var(--wisteria)} section[data-band="brand"] a:not(.btn):hover, section[data-band="dark"] a:not(.btn):hover{color:var(--parchment)} section[data-band="brand"] .quiet-panel, section[data-band="dark"] .quiet-panel{background:rgba(247,244,240,.10)} section[data-band="dark"] details.acc, section[data-band="brand"] details.acc{--acc-line:rgba(247,244,240,.22); --acc-knop:rgba(247,244,240,.16);--acc-knop-hover:rgba(247,244,240,.30);--acc-knop-ink:var(--parchment)} section[data-band="dark"] details.acc .body, section[data-band="brand"] details.acc .body{color:var(--wisteria-200)} /* De tussenkoppen staan op licht bewust op de primaire (donkere) tekstkleur; op een donkere band moeten ze de andere kant op, anders vallen ze weg in het vlak. */ section[data-band="dark"] details.acc .body h3, section[data-band="brand"] details.acc .body h3{color:var(--text-on-dark)} section[data-band="dark"] .timeline li, section[data-band="brand"] .timeline li{border-left-color:rgba(247,244,240,.22)} section[data-band="dark"] .timeline li::before, section[data-band="brand"] .timeline li::before{background:rgba(247,244,240,.16);color:var(--parchment)} section[data-band="dark"] .timeline .when, section[data-band="brand"] .timeline .when{color:var(--wisteria)} section[data-band="dark"] .timeline p, section[data-band="brand"] .timeline p{color:var(--wisteria-200)} section[data-band="soft"] .lead, section[data-band="soft"] .section-head p, section[data-band="soft"] .muted, section[data-band="soft"] .editorial > p, section[data-band="soft"] .prose p, section[data-band="soft"] .prose ul, section[data-band="soft"] details.acc .body{color:var(--text-on-soft)} /* Op de wisteria-vlakken is de knop wit in plaats van wisteria: op de zachte band viel hij anders exact weg, en op de zachtste haalde hij 1,2:1. Wit is bovendien wat de rest van deze pagina's al doet met aanraakbare vlakken (de inhoudsopgave, de kaarten). De lijn krijgt een mauve tint uit het palet in plaats van het warme grijs, dat alleen op parchment werkt. */ section[data-band="soft"] details.acc, section[data-band="softer"] details.acc{--acc-line:rgba(78,54,78,.20); --acc-knop:var(--surface-card);--acc-knop-hover:var(--wisteria-200)} /* Kop met een actie rechts, zoals "Alle programma's →". De actie stond op flex-end: onder een tweeregelige kop zakte hij naar de onderrand en bleef hij naast de witruimte hangen. Hij lijnt nu uit op de eerste regel van de kop, waar het oog na de kop terechtkomt. */ .section-head-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between; gap:var(--space-4);margin-bottom:var(--space-5)} .section-head-row h2{max-width:22ch} /* Navigerende actie: een tekstlink, maar dan wel als link herkenbaar. 14px zonder onderstreping las als bijschrift. De pijl zit in de opmaak (zie sectionHead / psywell_section_head) en schuift mee bij hover. */ .section-head-row .side{margin-top:.55em;font-size:var(--text-base);font-weight:500; white-space:nowrap;display:inline-flex;align-items:center;gap:8px; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px; text-decoration-color:var(--wisteria-300)} .section-head-row .side .pijl{transition:transform var(--dur-fast) var(--ease-brand)} .section-head-row .side:hover{text-decoration-color:currentColor} .section-head-row .side:hover .pijl{transform:translateX(3px)} /* Conversieactie: dezelfde plek, maar de knopvorm. Die brengt zijn eigen kleurpaar, maat en raakvlak mee, dus de linkopmaak hierboven gaat er weer af. */ .section-head-row .side.btn{text-decoration:none;font-size:var(--text-sm)} /* ---------- media-kaart: foto met label eroverheen ---------- Het label staat op een verloop, niet rechtstreeks op het beeld. */ .media-card{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden; text-decoration:none;color:var(--parchment);min-height:15rem} .media-card .photo{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%} /* Altijd een merklaag over het beeld. De kaarttekst is wit en moet ook op een lichte foto leesbaar blijven; dat mag niet afhangen van wie welke foto uploadt. Onderaan bijna dekkend midnight (daar staat de tekst), naar boven toe oplopend in mauve, zodat het beeld zichtbaar blijft en de kaart in het palet valt. */ .media-card .photo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(26,21,32,.92) 0%,rgba(44,37,48,.78) 34%,rgba(107,76,107,.45) 100%)} .media-card:hover .photo::after{background:linear-gradient(to top,rgba(26,21,32,.95) 0%,rgba(44,37,48,.85) 40%,rgba(107,76,107,.55) 100%)} /* Het label van een nog ontbrekende foto hoort bóven de laag te blijven staan. */ .media-card .photo>span{position:relative;z-index:1} .media-card .veil{position:absolute;inset:0; background:linear-gradient(to top,rgba(26,21,32,.92) 0%,rgba(26,21,32,.72) 32%,rgba(26,21,32,.12) 72%)} .media-card .txt{position:relative;height:100%;display:flex;flex-direction:column; justify-content:flex-end;padding:var(--space-5);gap:6px;min-height:15rem} .media-card h3{color:var(--parchment)} .media-card p{color:var(--wisteria-200);font-size:var(--text-sm)} .media-card:hover{color:var(--parchment)} .media-card:hover .veil{background:linear-gradient(to top,rgba(26,21,32,.95) 0%,rgba(26,21,32,.8) 40%,rgba(26,21,32,.25) 80%)} .media-card .go{position:absolute;top:var(--space-4);right:var(--space-4); width:36px;height:36px;border-radius:50%;background:rgba(247,244,240,.92);color:var(--plum); display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm)} /* ---------- stapkaarten in wisselende vullingen ---------- */ /* Op mobiel schuiven de stappen over elkaar heen tijdens het scrollen: elke kaart blijft even plakken onder de vorige, zodat je de volgorde van het traject voelt in plaats van vier losse blokken langs te scrollen. De offsets lopen op, waardoor de randen van de vorige stappen zichtbaar blijven als een stapeltje. Bewust zonder script: sticky is scrollgedrag van de browser zelf, dus het blijft werken met verminderde beweging, zonder JavaScript en ook als een plugin iets sloopt. */ @media (max-width:639px){ /* De crisisstrook en de pill-header staan sticky bovenaan (samen ruim 7,5rem); de stapel begint daaronder. Iets ruimer dan gemeten, zodat een tweeregelige crisisstrook op een heel smal scherm de bovenste kaart niet afsnijdt. */ .steps > *{position:sticky;top:9rem} .steps > :nth-child(2){top:9.75rem} .steps > :nth-child(3){top:10.5rem} .steps > :nth-child(4){top:11.25rem} .steps > :nth-child(5){top:12rem} .steps > :nth-child(6){top:12.75rem} /* Een stapel heeft schaduw nodig, anders lopen twee lichte kaarten in elkaar over. */ .steps > *{box-shadow:0 -6px 18px rgba(26,21,32,.10)} } .steps{display:grid;grid-template-columns:1fr;gap:var(--space-3)} @media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}} @media (min-width:1200px){.steps{grid-template-columns:repeat(4,1fr)}} .steps > *{border-radius:var(--radius-lg);padding:var(--space-5);display:flex; flex-direction:column;gap:var(--space-2)} .steps h3{font-size:var(--text-lg)} .steps p{font-size:var(--text-sm)} .steps > :nth-child(1){background:var(--midnight);color:var(--parchment)} .steps > :nth-child(1) h3{color:var(--wisteria)} .steps > :nth-child(1) p{color:var(--wisteria-200)} .steps > :nth-child(2){background:var(--wisteria-100);color:var(--text-primary)} .steps > :nth-child(2) p{color:var(--text-secondary)} .steps > :nth-child(3){background:var(--surface-card);color:var(--text-primary);box-shadow:var(--shadow-card)} .steps > :nth-child(3) p{color:var(--text-secondary)} .steps > :nth-child(4){background:var(--mauve);color:var(--text-on-brand)} .steps > :nth-child(4) h3{color:var(--text-on-brand)} .steps > :nth-child(4) p{color:var(--wisteria-200)} /* ---------- hero ---------- */ .hero{padding-top:var(--space-5);padding-bottom:var(--space-6)} .hero h1{margin-bottom:var(--space-5)} .hero .cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)} /* The two answers people actually arrive for, above the fold. */ .facts{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-6)} @media (min-width:640px){.facts{grid-template-columns:repeat(2,1fr)}} .fact{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--surface-card); box-shadow:var(--shadow-card)} .fact .k{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1; display:block;margin-bottom:var(--space-2)} .fact .v{font-size:var(--text-sm);color:var(--text-secondary);display:block} .fact a{font-size:var(--text-sm);display:inline-block;margin-top:var(--space-3)} /* ---------- gedeelde bouwstenen ---------- */ .crumbs{padding-top:var(--space-4);font-size:var(--text-xs)} .crumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0;margin:0} .crumbs a{color:var(--text-muted);text-decoration:none} .crumbs li[aria-hidden]{color:var(--text-muted)} .editorial{display:grid;grid-template-columns:1fr;gap:var(--space-5)} @media (min-width:900px){.editorial{grid-template-columns:1fr 1.5fr;gap:var(--space-7)}} .editorial > p{font-size:var(--text-lg);line-height:1.6;max-width:62ch;color:var(--text-secondary)} section[data-band="brand"] .editorial > p, section[data-band="dark"] .editorial > p{color:var(--wisteria-200)} /* Kaartrijen: op smalle schermen doorschuiven in plaats van eindeloos onder elkaar. Vanaf tablet gewoon een raster. Dezelfde mechaniek als de behandelarenrij. */ .grid-cards{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:var(--space-3); -webkit-overflow-scrolling:touch} .grid-cards>*{flex:0 0 82%;scroll-snap-align:start;min-width:0} .grid-cards:focus-visible{outline:var(--focus-ring);outline-offset:4px} @media (min-width:640px){ .grid-cards{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible;padding-bottom:0} .grid-cards>*{flex:none} } @media (min-width:1200px){.grid-cards{grid-template-columns:repeat(3,1fr)}} .quiet-panel{background:var(--surface-softer);border-radius:var(--radius-xl);padding:var(--space-6)} .rule{border:none;border-top:1px solid var(--border-subtle);margin-block:var(--space-6)} /* Mozaïek: de eerste kaart is de grote. */ .mosaic{display:grid;grid-template-columns:1fr;gap:var(--space-4)} @media (min-width:900px){ .mosaic{grid-template-columns:repeat(2,1fr)} .mosaic-lg{grid-column:span 2} } @media (min-width:1200px){ .mosaic{grid-template-columns:repeat(3,1fr);grid-auto-rows:16rem} .mosaic-lg{grid-column:span 2;grid-row:span 2} } /* Vlak in plaats van foto: we hebben alleen portretten aangeleverd, en een portret representeert geen zorgniveau. Kleur wel. */ /* Dekkende kleur ónder het verloop: valt het verloop weg, dan blijft de tekst leesbaar — en het maakt het contrast meetbaar in plaats van iets wat je op het oog moet geloven. */ .mosaic > .media-card:nth-child(1){background-color:var(--mauve-600); background-image:linear-gradient(160deg,var(--mauve),var(--midnight))} .mosaic > .media-card:nth-child(2){background-color:var(--mauve-600); background-image:linear-gradient(160deg,var(--mauve-600),var(--plum))} .mosaic > .media-card:nth-child(3){background-color:var(--mauve-700); background-image:linear-gradient(160deg,var(--plum),var(--mauve-700))} /* ------------------------------------------------------------------ slider */ /* Behandelaren staan in een rij die je op smalle schermen doorschuift en op brede schermen in zijn geheel ziet: maximaal vier naast elkaar, want een vijfde kolom maakt de portretten te klein voor een gezicht. Bewust met scroll-snap in plaats van een script: swipen, muiswiel en trackpad werken dan native, en met `tabindex="0"` op de rij kun je er ook met het toetsenbord doorheen. Wie liever niet swipet ziet op desktop gewoon alles staan. */ .psy-slider{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory; overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:var(--space-3); -webkit-overflow-scrolling:touch} /* Smal genoeg dat de volgende kaart duidelijk uitsteekt — dat is het signaal dat er meer staat en dat je kunt swipen. */ .psy-slider>*{flex:0 0 58%;scroll-snap-align:start;min-width:0} .psy-slider:focus-visible{outline:var(--focus-ring);outline-offset:4px} @media (min-width:520px){.psy-slider>*{flex-basis:calc((100% - var(--space-4)) / 2 - var(--space-3))}} @media (min-width:760px){.psy-slider>*{flex-basis:calc((100% - 2 * var(--space-4)) / 3)}} @media (min-width:900px){ /* Vanaf hier past de hele rij: geen scroll meer, vier gelijke kolommen. */ .psy-slider{overflow:visible;scroll-snap-type:none;padding-bottom:0} .psy-slider>*{flex-basis:calc((100% - 3 * var(--space-4)) / 4)} } /* Op een muis-apparaat is een dunne scrollbar hinderlijk onder de kaarten; op touch verschijnt hij vanzelf alleen tijdens het scrollen. */ @media (hover:hover) and (pointer:fine){ .psy-slider{scrollbar-color:var(--wisteria-300) transparent} } .person .photo{aspect-ratio:3/4;border-radius:var(--radius-lg);margin-bottom:var(--space-3)} .person .nm{display:block;font-size:var(--text-sm);font-weight:500} .person .role,.person .big{display:block;font-size:var(--text-xs);color:var(--text-muted)} section[data-band="dark"] .person .role, section[data-band="dark"] .person .big{color:var(--wisteria)} .hero-photo{position:relative} .hero-photo .caption{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4); color:var(--white);background:rgba(26,21,32,.82);padding:var(--space-4) var(--space-5); border-radius:var(--radius-lg)} .hero-photo .caption .k{display:block;font-size:var(--text-sm);color:var(--wisteria-200);margin-bottom:2px} .hero-photo .caption .t{font-family:var(--font-display);line-height:var(--leading-tight); font-size:clamp(1.5rem,1.1rem + 1.6vw,2rem)} /* ---------- photo placeholders ---------- */ .photo{background:linear-gradient(140deg,var(--wisteria-300),#B79BB7 60%,#8C7090); border-radius:var(--radius-lg);aspect-ratio:4/3;position:relative; display:flex;align-items:flex-end;padding:var(--space-4);overflow:hidden} /* Text over imagery sits on its own dark band, never straight on the picture: white on the light end of this gradient measures 1.1:1, and a real photograph is even less predictable. */ .photo span{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase; color:var(--white);background:rgba(26,21,32,.82);padding:5px 12px; border-radius:var(--radius-pill)} .photo-tall{aspect-ratio:3/4} .photo-wide{aspect-ratio:16/9} /* Aangeleverde fotografie. Eén slot per plek; wat geen slot heeft blijft een gelabeld placeholdervlak. De uitsnedes staan hoog zodat gezichten boven een captionband uitkomen. */ /* ---------------------------------------------------------------- locatie */ /* Het blok waarmee de opnamelocatie wordt getoond: tekst naast een staande foto, op mobiel onder elkaar. Dezelfde bandkleuren en radii als de rest; de foto gebruikt het gewone .photo-slotmechanisme, zodat een echte locatiefoto er zo in kan. */ .location-feature{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:stretch} @media (min-width:900px){.location-feature{grid-template-columns:1.05fr .95fr;gap:var(--space-7)}} .location-feature-copy{display:flex;flex-direction:column;justify-content:center} .location-feature-copy ul{margin-top:var(--space-4);padding-left:1.15em;color:var(--text-secondary)} .location-feature-copy li+li{margin-top:var(--space-2)} /* De basis-.photo heeft een vaste 4/3-verhouding; in dit tweekoloms blok moet de foto juist de hoogte van de tekstkolom volgen, anders loopt hij uit zijn kolom. */ .photo.location-photo{width:100%;aspect-ratio:auto;min-height:20rem;border-radius:var(--radius-xl)} @media (min-width:900px){.photo.location-photo{min-height:26rem}} /* Elke .photo met een beeld vult zijn vlak. Dit gold eerder alleen voor [data-photo], toen elk beeld nog uit het designsysteem kwam. De behandelaarportretten komen nu uit de mediabibliotheek en dus zónder slot; zonder deze regels rendert zo'n foto op ware grootte en getegeld in plaats van bijgesneden. */ .photo{background-color:var(--wisteria-200);background-repeat:no-repeat; background-size:cover;background-position:center} /* Portretten: bij een 3/4-uitsnede zit het hoofd hoog in beeld, dus iets naar boven. */ .photo-tall,.team-card .photo,.person .photo{background-position:center 20%} /* De portretslots persoon-1 t/m 4 hadden elk een eigen uitsnede, afgestemd op de vijf stockportretten uit het designsysteem. Die foto's zijn weg: behandelaarportretten komen nu uit de mediabibliotheek. Een vaste uitsnede per slot zou daar willekeurig zijn en zorgde ervoor dat dezelfde foto op de home anders werd bijgesneden dan op /behandelaren/. Ze delen nu de portretuitsnede uit .photo-tall. */ /* De hero toont sinds de komst van de opnamelocatie het pand aan de Touwslager 30. Uitsnede iets onder het midden: daar staat het gebouw, daarboven is het lucht. */ .photo[data-photo="hero"]{background-position:center 62%} .photo[data-photo="locatie"]{background-position:center 60%} .photo[data-photo="aanmelden"]{background-position:center 24%} /* ---------- alerts ---------- */ .alert{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-4) var(--space-5); border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--leading-normal)} .alert .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:7px} .alert strong{display:block;font-weight:500;margin-bottom:2px} .alert-warning{background:var(--surface-warning);color:var(--status-warning)} .alert-warning .dot{background:var(--status-warning)} .alert-info{background:var(--surface-softer);color:var(--text-primary)} .alert-info .dot{background:var(--mauve)} .alert-crisis{background:var(--midnight);color:var(--text-on-dark)} .alert-crisis .dot{background:var(--wisteria)} .alert-crisis a{color:var(--wisteria)} /* ---------- wachttijden table ---------- */ .table-wrap{overflow-x:auto} table.wt{width:100%;border-collapse:collapse;min-width:560px} table.wt caption{text-align:left;caption-side:top;padding-bottom:var(--space-4); font-size:var(--text-sm);color:var(--text-secondary)} table.wt th,table.wt td{padding:var(--space-4) var(--space-3);text-align:left; font-size:var(--text-sm);vertical-align:top;border-bottom:1px solid var(--border-subtle)} table.wt thead th{font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase; font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-strong)} table.wt thead th .norm{display:block;font-weight:400;text-transform:none;letter-spacing:0; color:var(--text-muted)} table.wt tbody th{font-weight:500} table.wt tbody th .sub{display:block;font-weight:400;font-size:var(--text-xs);color:var(--text-muted)} .over{color:var(--status-error);font-weight:500} .over .why{font-size:var(--text-xs);display:block;font-weight:400} @media (max-width:639px){ table.wt{min-width:0} table.wt thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} table.wt tr{display:block;padding-block:var(--space-4);border-bottom:1px solid var(--border-subtle)} table.wt th,table.wt td{border:none;padding:2px 0;display:flex;justify-content:space-between;gap:var(--space-4)} table.wt td::before{content:attr(data-label);font-weight:500;color:var(--text-secondary)} /* The row header carries its own sub-line; stacked it must not read as a value on the right. */ table.wt tbody th{flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:var(--space-2)} } /* ---------- accordion (native details, so keyboard support is free) ---------- De lijn en de knop stonden op vaste kleuren: --border-subtle (warm grijs) en --surface-soft (wisteria-200). Op de wisteria-banden waar deze lijsten juist staan viel de knop exact samen met het vlak eronder en haalde de lijn 1,05:1 — twaalf uitklappers zonder één zichtbare rand of knop, en dat is wat een lijst in een lap tekst verandert. Beide lopen nu via een variabele die de band zelf zet, zodat elke band zijn eigen contrast meebrengt. */ details.acc{--acc-line:var(--border-subtle); --acc-knop:var(--surface-soft);--acc-knop-hover:var(--wisteria-300);--acc-knop-ink:var(--mauve-700); border-bottom:1px solid var(--acc-line)} details.acc summary{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);cursor:pointer;list-style:none;padding-block:var(--space-5);min-height:44px} /* De titel in een summary is niet overal een h3: waar de uitklapper zelf tussenkoppen heeft (de klachtenpagina) staat er een h2, anders klopt de koppenvolgorde niet. De maat hoort bij de component, niet bij het niveau. */ details.acc summary :is(h2,h3){font-family:var(--font-display);font-weight:400; font-size:var(--text-xl);line-height:var(--leading-snug)} details.acc summary::-webkit-details-marker{display:none} details.acc summary::after{content:"+";flex-shrink:0;width:32px;height:32px;border-radius:50%; background:var(--acc-knop);color:var(--acc-knop-ink);display:inline-flex; align-items:center;justify-content:center;font-family:var(--font-sans);font-size:var(--text-lg); transition:background var(--dur-fast) var(--ease-brand)} details.acc[open] summary::after{content:"–"} /* De hele regel is klikbaar, dus de hele regel moet ook reageren — anders lijkt alleen de knop het doel en oogt een gesloten lijst dood. */ details.acc summary:hover::after{background:var(--acc-knop-hover)} details.acc .body{padding-bottom:var(--space-5);color:var(--text-secondary);max-width:62ch} details.acc .body p + p{margin-top:var(--space-3)} /* De tussenkoppen in een uitklapper hadden geen enkel eigen kenmerk: h1-h4 staan globaal op margin:0, en de kleur erfden ze van .body (secundair). "Herkenbaar?" liep daardoor gewoon door op de zin ervoor en las een klachtblok als één lap tekst. Ze krijgen hier ruimte erboven, de primaire tekstkleur en een maat tussen de body en de klachtnaam in — dat is wat het onderscheid draagt, niet een lijn: onder de kv-lijst en de wachttijdstrip zit al een rand, en die zou dan verdubbelen. */ details.acc .body h3{font-size:var(--text-lg);line-height:var(--leading-snug); color:var(--text-primary);margin-top:var(--space-6);margin-bottom:var(--space-3)} details.acc .body > :first-child{margin-top:0} /* Opsommingen in een uitklapper stonden op de browserinspringing zonder regelafstand; bij zinnen die over twee regels lopen liepen de punten in elkaar over. Gelijk aan .prose. */ details.acc .body ul{padding-left:1.15em} details.acc .body li + li{margin-top:var(--space-2)} details.acc .body > .muted{margin-top:var(--space-5)} /* ---------- stepper ---------- */ .stepper ol{display:flex;flex-wrap:wrap;gap:var(--space-4);list-style:none;padding:0} .stepper li{display:flex;align-items:center;gap:var(--space-3);flex:1 1 11rem;min-width:0} .stepper .n{width:32px;height:32px;flex-shrink:0;border-radius:50%; border:1.5px solid var(--border-control);display:inline-flex;align-items:center; justify-content:center;font-size:var(--text-sm);font-weight:500;color:var(--mauve-700)} .stepper .done .n{background:var(--mauve);border-color:var(--mauve);color:var(--text-on-brand)} .stepper .now .n{background:var(--surface-soft);border-color:var(--surface-soft)} .stepper .lab{font-size:var(--text-sm);color:var(--text-muted)} .stepper .now .lab,.stepper .done .lab{color:var(--text-primary)} .stepper .now .lab{font-weight:500} /* ---------- route choice (aanmelden) ---------- */ .route-card{display:flex;flex-direction:column;gap:var(--space-3);text-decoration:none; color:var(--text-primary)} .route-card:hover{color:var(--text-primary)} .route-card h2{margin:0} .route-go{margin-top:auto;padding-top:var(--space-2);color:var(--text-accent); font-size:var(--text-sm);font-weight:500} .route-card:hover .route-go{color:var(--mauve-700)} .v-b .route-card,.v-b .route-card:hover{color:var(--text-primary)} .v-b .route-go,.v-b .route-card:hover .route-go{color:var(--wisteria)} /* ---------- timeline (wat er daarna gebeurt) ---------- */ /* De bollen staan midden op de lijn en steken dus een halve bol naar links uit. Zonder eigen inspringing van de lijst valt die helft buiten de tekstkolom: op mobiel, waar de gutter 16px is, plakte de "1" tegen de schermrand. De lijst schuift daarom een halve bol op, en de tekst springt op mobiel de bol plus een marge in in plaats van de volle 64px — anders houdt een zin van vier woorden per regel over. */ .timeline{list-style:none;padding:0 0 0 var(--space-4);margin:0;counter-reset:step} .timeline li{counter-increment:step;position:relative; padding:0 0 var(--space-6) var(--space-5);border-left:1px solid var(--border-subtle)} @media (min-width:640px){.timeline li{padding-left:var(--space-8)}} .timeline li:last-child{border-left-color:transparent;padding-bottom:0} .timeline li::before{content:counter(step);position:absolute;left:calc(-1 * var(--space-4));top:0; width:32px;height:32px;border-radius:50%;background:var(--surface-soft);color:var(--mauve-700); display:flex;align-items:center;justify-content:center; font-size:var(--text-sm);font-weight:500} .timeline h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl); line-height:var(--leading-snug)} /* Stond als kapitalenlabel bóven de kop. Dat is een eyebrow, en die gebruiken we niet. De informatie is wel echt — wanneer deze fase plaatsvindt — dus hij verhuist naar onder de kop als gewone regel in zinsvorm, waar hij de kop aanvult in plaats van hem te etiketteren. */ .timeline .when{display:block;font-size:var(--text-sm);color:var(--text-muted); margin-top:2px;margin-bottom:var(--space-2)} .timeline p{color:var(--text-secondary);max-width:60ch} .v-b .timeline li::before{background:rgba(196,168,196,.24);color:var(--parchment)} /* ---------- forms ---------- */ .field{display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm)} .field > label,.field .lbl{font-weight:500} .field .req{color:var(--status-error)} .field input,.field select,.field textarea{ width:100%;background:var(--white);color:var(--text-primary); border:1.5px solid var(--border-subtle);border-radius:var(--radius-md); padding:12px 14px;font-family:var(--font-sans);font-size:var(--text-base)} .field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6375' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:40px} .field .hint{color:var(--text-muted);font-size:var(--text-xs)} fieldset{border:none;margin:0;padding:0;min-inline-size:auto} legend{padding:0;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:500} .choice{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer; font-size:var(--text-base);line-height:var(--leading-snug)} .choice input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)} .choice .box{width:20px;height:20px;margin-top:2px;flex-shrink:0;background:var(--white); border:1.5px solid var(--border-control);display:inline-flex;align-items:center; justify-content:center;transition:background var(--dur-fast) var(--ease-brand)} .choice .box.radio{border-radius:50%} .choice .box.check{border-radius:6px} .choice input:checked + .box{background:var(--mauve);border-color:var(--mauve)} .choice input:checked + .box.radio{background:var(--white)} .choice input:checked + .box.radio::after{content:"";width:10px;height:10px;border-radius:50%; background:var(--mauve)} .choice input:checked + .box.check::after{content:"";width:11px;height:6px; border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg); margin-top:-3px} .choice input:focus-visible + .box{outline:2px solid var(--focus-ring);outline-offset:2px} .choices{display:flex;flex-wrap:wrap;gap:var(--space-4)} .choices-col{flex-direction:column;gap:var(--space-3)} /* ---------- footer ---------- Twee kolommen op mobiel, vier op desktop. De juridische documenten staan als eigen kolom tussen de rest — niet als losse regel onderaan, want daar leest niemand ze en het maakt de voet onrustig. Onder de streep blijft alleen wat er echt bij hoort: © en KvK. */ .site-footer{background:var(--midnight);color:var(--text-on-dark); border-radius:var(--radius-xl);margin:var(--space-7) var(--gutter) var(--space-5); padding:var(--space-7) var(--space-5)} @media (min-width:900px){.site-footer{padding:var(--space-8) var(--space-7)}} /* Woordmerk plus zin links, de actie ernaast — dat leest als één regel in plaats van als drie losse blokken onder elkaar. Onder 640px valt de knop alsnog naar de volgende regel. */ .foot-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--space-5);margin-bottom:var(--space-7); padding-bottom:var(--space-6);border-bottom:1px solid rgba(247,244,240,.15)} .foot-lead > div{max-width:34rem} /* display:inline-flex laten staan, anders vallen merk en woord uit elkaar; alleen de kleur en de marge verschillen hier van de kopbalk. */ .site-footer .wordmark{color:var(--parchment);margin-bottom:var(--space-2)} .site-footer .wordmark:hover{color:var(--parchment)} .site-footer h2{font-size:var(--text-xl);line-height:var(--leading-snug)} .foot-lead .btn{flex-shrink:0} .site-footer .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--space-5)} @media (min-width:900px){.site-footer .cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}} .site-footer h3{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:500; letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--wisteria); margin-bottom:var(--space-3)} .site-footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px} .site-footer a{color:var(--wisteria-200);text-decoration:none;font-size:var(--text-sm)} .site-footer a:hover{color:var(--parchment);text-decoration:underline} .site-footer .legal{margin-top:var(--space-7);padding-top:var(--space-5); border-top:1px solid rgba(247,244,240,.15);display:flex;flex-wrap:wrap; gap:var(--space-2) var(--space-5);font-size:var(--text-xs);color:var(--wisteria-200)} /* ---------- artikelmeta ---------- Thema en leestijd. Dit stond als kapitalenlabel bóven de titel — een eyebrow, en die gebruiken we niet: de titel hoort zelf te dragen waar het over gaat. Het is bovendien geen categorielabel maar meta, en meta hoort onder de kop. Staat er nu in zinsvorm. */ .artikel-meta{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-2)} section[data-band="brand"] .artikel-meta, section[data-band="dark"] .artikel-meta{color:var(--wisteria)} /* ---------- wachttijdstrip ---------- De regel uit de wachttijdentabel die bij déze klacht hoort, bovenaan de klachtpagina. Wie op "trauma" binnenkomt hoort de wachttijd voor trauma te zien, niet een gemiddelde. */ .waitstrip{display:grid;grid-template-columns:1fr;gap:var(--space-3)} @media (min-width:640px){.waitstrip{grid-template-columns:repeat(2,1fr)}} .waitstrip .ws{background:var(--surface-softer);border-radius:var(--radius-lg); padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:4px} .waitstrip .ws-k{font-family:var(--font-display);font-size:var(--text-xl); line-height:var(--leading-snug)} .waitstrip .ws-v{font-size:var(--text-sm);color:var(--text-on-soft)} .waitstrip .ws-over{font-size:var(--text-xs);font-weight:500;color:var(--status-error)} .waitstrip .ws-foot{grid-column:1/-1;font-size:var(--text-sm);color:var(--text-secondary); display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)} /* ---------- inhoudsopgave ---------- */ .toc ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)} .toc .toc-h{font-family:var(--font-sans);font-size:var(--text-xs);font-weight:500; letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted); margin-bottom:var(--space-4)} .toc a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px; border-radius:var(--radius-pill);background:var(--surface-softer);color:var(--text-on-soft); text-decoration:none;font-size:var(--text-sm)} .toc a:hover{background:var(--wisteria-200);color:var(--text-on-soft)} @media (max-width:899px){.toc a{min-height:44px}} /* ---------- linklijst ---------- Doorverwijzingen naar onderliggende pagina's: titel, één zin, pijl. Het hele blok is de link, dus het raakvlak is de rij en niet alleen de tekst. */ .linklist{list-style:none;padding:0;display:flex;flex-direction:column} .linklist li{border-top:1px solid var(--border-subtle)} .linklist li:last-child{border-bottom:1px solid var(--border-subtle)} .linklist a{display:grid;grid-template-columns:1fr auto;align-items:center; gap:var(--space-2) var(--space-4);padding:var(--space-4) 0;min-height:44px; text-decoration:none;color:var(--text-primary)} .linklist a:hover{color:var(--text-accent)} .linklist .ll-t{font-family:var(--font-display);font-size:var(--text-xl); line-height:var(--leading-snug)} .linklist .ll-d{grid-column:1;font-size:var(--text-sm);color:var(--text-secondary)} .linklist .ll-go{grid-row:1/span 2;grid-column:2;color:var(--text-accent)} section[data-band="soft"] .linklist .ll-d{color:var(--text-on-soft)} section[data-band="brand"] .linklist a, section[data-band="dark"] .linklist a{color:var(--parchment)} section[data-band="brand"] .linklist .ll-d, section[data-band="dark"] .linklist .ll-d{color:var(--wisteria-200)} section[data-band="brand"] .linklist li, section[data-band="dark"] .linklist li{border-color:rgba(247,244,240,.22)} /* ---------- term en waarde ---------- Een
, want dat is wat het is: BIG-nummer, tarief, duur. Op desktop twee kolommen, zodat de termen onder elkaar uitlijnen en je verticaal kunt scannen. */ .kv{display:flex;flex-direction:column;margin:0} .kv > div{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--space-4) 0; border-top:1px solid var(--border-subtle)} .kv > div:last-child{border-bottom:1px solid var(--border-subtle)} @media (min-width:640px){ .kv > div{grid-template-columns:14rem 1fr;gap:var(--space-4)} } .kv dt{font-weight:500;font-size:var(--text-sm)} .kv dd{margin:0;color:var(--text-secondary);font-size:var(--text-sm)} .kv-lg dt{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg); line-height:var(--leading-snug)} .kv-lg dd{font-size:var(--text-base)} @media (min-width:640px){.kv-lg > div{grid-template-columns:18rem 1fr}} section[data-band="soft"] .kv dd{color:var(--text-on-soft)} section[data-band="brand"] .kv dd, section[data-band="dark"] .kv dd{color:var(--wisteria-200)} section[data-band="brand"] .kv > div, section[data-band="dark"] .kv > div{border-color:rgba(247,244,240,.22)} /* ---------- afsluitende actieband ---------- Onderaan elke inhoudspagina, zodat er nergens een pagina is waar je vanaf moet scrollen om te weten hoe je je aanmeldt. */ .cta-band{display:grid;grid-template-columns:1fr;gap:var(--space-5);align-items:center} @media (min-width:900px){.cta-band{grid-template-columns:1.4fr 1fr}} .cta-band .cta{display:flex;flex-wrap:wrap;gap:var(--space-3)} .cta-band .lead{margin-top:var(--space-3)} /* Een lichte ghost-knop voor op de merkband: transparant met een rand in plaats van een vlak, zodat hij naast de gevulde knop leest als de tweede keuze. */ .btn-ghost-light{background:transparent;color:var(--parchment); box-shadow:inset 0 0 0 1.5px rgba(247,244,240,.5)} .btn-ghost-light:hover,.btn-ghost-light:focus-visible{background:rgba(247,244,240,.14); color:var(--parchment)} .btn-ghost-light:active{background:rgba(247,244,240,.22)} /* ---------- team ---------- */ .team-card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4)} .team-card .photo{aspect-ratio:3/4;margin-bottom:var(--space-3)} .team-link{text-decoration:none;color:var(--text-primary);display:block} .team-link:hover{color:var(--text-accent)} .team-card .role{font-size:var(--text-sm);color:var(--text-secondary)} .team-card .big{font-size:var(--text-xs);color:var(--text-muted)} .team-card .route-go{margin-top:auto;text-decoration:none} .person-link{text-decoration:none;color:inherit;display:block} .person-link:hover{color:inherit} .person-link:hover .nm{text-decoration:underline} /* Specialismen als rij tags. Een