/* ============================================================
JR TECHNIEK — 4. BLOKKEN
De sectiebibliotheek. Elk blok is een compleet stuk pagina
met varianten. Een nieuwe pagina bouw je door blokken te
kiezen en te vullen, niet door CSS te schrijven.
Zie blokken.html voor de markup van elk blok.
============================================================ */
/* ============================================================
BLOK: HEADER
Varianten: .is-op-media (transparant, over een hero-beeld)
============================================================ */
/* De kopbalk staat in de flow en scrollt gewoon mee. Hij ligt over de
herobeeld in het paneel, dus zonder eigen achtergrond. */
.blok-header { position: relative; z-index: 3; background: transparent; }
/* Open menu moet boven de hero uitkomen. De paneelregel in 2-basis
(.paneel.op-donker > *:not(.beeld):not(.sluier), specificiteit 0,4,0)
zet elk kind op z-index 3; een override moet dus minstens even
specifiek zijn, anders blijft de lijst onder de hero-tekst hangen. */
.paneel.op-donker > .blok-header.is-open,
.blok-header.is-open { z-index: 10; }
.blok-header .balk { display: flex; justify-content: center; align-items: center;
gap: var(--ruimte-custom1); padding: var(--ruimte-xsmall) var(--goot-midden);
color: var(--tekst-secundair); font-size: var(--tekst-small);
border-bottom: 1px solid var(--lijn); }
.blok-header .balk span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.blok-header .balk svg { width: 14px; height: 14px; color: var(--accent-tekst); }
.blok-header .balk .scheiding { color: var(--tekst-tertiair); }
.blok-header .navigatie { display: flex; align-items: center; justify-content: space-between;
gap: var(--ruimte-custom1); padding: var(--ruimte-xsmall) var(--goot-midden); }
.blok-header .merk { display: inline-flex; align-items: center; gap: var(--ruimte-xsmall);
color: var(--tekst-primair); font-family: var(--familie-kop);
font-weight: var(--gewicht-bold); font-size: var(--kop-h5);
letter-spacing: -0.01em; white-space: nowrap; }
.blok-header .merk .logo { height: 56px; width: 56px; }
.blok-header .links { display: flex; gap: var(--ruimte-medium); }
.blok-header .menuknop { display: none; }
.blok-header .links a { font-family: var(--familie-ui); font-weight: var(--gewicht-bold);
font-size: var(--tekst-regular); letter-spacing: 0.07em; text-transform: uppercase;
color: var(--tekst-primair); }
.blok-header .links a:hover { color: var(--accent-tekst); }
.blok-header .acties { display: flex; align-items: center; gap: var(--ruimte-custom1); }
@media (max-width: 900px) {
/* Onder 900px past er naast het logo maar een knop; spoed wint. */
.blok-header .acties .is-secundair,
.blok-header .balk .optioneel, .blok-header .balk .scheiding { display: none; }
/* Mobiel menu: de knop staat naast het merk, de lijst klapt onder de
kopbalk uit over de volle breedte. Zonder dit had mobiel geen
navigatie: de links waren gewoon weg. */
.blok-header .navigatie { position: relative; }
.blok-header .menuknop { display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; margin-left: auto; order: 2;
border: 1px solid var(--knop-lijn); border-radius: var(--radius-m);
background: transparent; color: var(--tekst-primair); cursor: pointer; }
.blok-header .menuknop svg { width: 22px; height: 22px; }
.blok-header .menuknop svg path { transition: transform var(--duur-snel), opacity var(--duur-snel); transform-origin: 12px 12px; }
.blok-header.is-open .menuknop .lijn-1 { transform: translateY(5px) rotate(45deg); }
.blok-header.is-open .menuknop .lijn-2 { opacity: 0; }
.blok-header.is-open .menuknop .lijn-3 { transform: translateY(-5px) rotate(-45deg); }
.blok-header .acties { order: 3; }
.blok-header .links { display: none; }
.blok-header.is-open .links { display: flex; flex-direction: column; gap: 0;
position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
background: var(--vlak); border-top: 1px solid var(--lijn);
border-bottom: 1px solid var(--lijn);
padding: var(--ruimte-xsmall) var(--rand-globaal); }
.blok-header.is-open .links a { display: block; min-height: 48px; line-height: 48px;
font-size: var(--tekst-medium); border-bottom: 1px solid var(--lijn); }
.blok-header.is-open .links a:last-child { border-bottom: 0; }
/* Tikdoelen: minimaal 44px hoog, ook voor tekstlinks. */
.blok-header .balk a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 480px) {
.blok-header .merknaam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.blok-header .merk .logo { height: 44px; width: 44px; }
.blok-header .navigatie { gap: var(--ruimte-xsmall); }
.blok-header .merk { font-size: var(--tekst-medium); }
.blok-header .merk .logo { height: 44px; width: 44px; }
}
@media (max-width: 560px) {
/* De knop in de header moet naast het logo passen op een telefoon. */
.blok-header .acties .knop { font-size: var(--tekst-tiny); padding: 0 var(--ruimte-small); }
.blok-header .merk { font-size: var(--tekst-regular); }
}
/* ============================================================
BLOK: HERO
Varianten: .is-media-vol (beeld over de volle breedte),
.is-media-zij (beeld alleen rechts),
.is-kaal (geen beeld)
Optioneel: .hero-voetkaart rechtsonder
============================================================ */
.blok-hero { position: relative; z-index: 3; }
.beeld { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.is-media-zij .beeld { left: auto; width: 62%; }
.is-kaal .beeld { display: none; }
.beeld .laag { position: absolute; inset: -10% 0; z-index: 1; will-change: transform; }
/* De compositie doet hier het werk: de donkere handschoen ligt links,
waar de tekst en de diepste sluier staan, en het chroom van de sifon
en de hoekstopkranen ligt rechts in het licht. Een gewone uitsnede
op het midden volstaat dus; geen kunstgrepen nodig. */
.beeld img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: var(--beeld-uitsnede, 50% 50%);
transform-origin: 50% 45%;
animation: beelddrift 24s ease-in-out infinite alternate; }
/* Schuift naar rechts, zodat de kraan gaandeweg uit de donkere sluier
het heldere deel in loopt. De verplaatsing doet het werk en de zoom
staat vrijwel vlak (1,08 naar 1,10): zoomen vanuit het midden duwt
alles links van het midden juist naar links, en heft de verplaatsing
dan grotendeels weer op. Het zoompunt staat in het midden omdat de
linkeroverloop daar het grootst is; bij een punt links loopt de
verplaatsing buiten het beeld en komt de rand in zicht.
De easing is ease-in-out en niet --soepel: die laatste is
asymmetrisch, waardoor de beweging op het keerpunt langzaam
uitloopt en meteen weer snel de andere kant op schiet. Bij
ease-in-out is de snelheid aan beide einden nul en loopt de
lus vloeiend om. */
@keyframes beelddrift {
from { transform: scale(1.08) translate3d(0, 0, 0); }
to { transform: scale(1.14) translate3d(6%, -0.8%, 0); }
}
/* Het herobeeld is nu zelf donker gegenereerd, met de linkerhelft als
lege schaduw. De sluier mag daardoor lichter dan bij het vorige,
felle stockbeeld: het chroom rechts komt zo beter uit. */
.sluier { position: absolute; inset: 0; z-index: 2; pointer-events: none;
/* Drie lagen. De eerste is smal en verdiept alleen de tekstzone: de kop
loopt tot 65% en kwam daar op de witte wastafel uit op 3,28 contrast.
Hij is uitgedoofd op 78%, zodat het chroom en de hand rechts helder
blijven. De tweede is de brede stemmingsgradient, de derde de
onderrand voor de voetkaart. */
background: linear-gradient(90deg, rgba(20,22,26,0.34) 0%, rgba(20,22,26,0.34) 58%, rgba(20,22,26,0) 78%),
linear-gradient(90deg, rgba(20,22,26,0.86) 0%, rgba(20,22,26,0.74) 40%, rgba(20,22,26,0.46) 62%, rgba(20,22,26,0.16) 82%, rgba(20,22,26,0.02) 100%),
linear-gradient(0deg, rgba(20,22,26,0.94) 0%, rgba(20,22,26,0.82) 16%, rgba(20,22,26,0.45) 32%, rgba(20,22,26,0) 52%); }
/* Geen max-width meer op het blok zelf: de kop breekt via
, de alinea
op 46ch. De linkerrand valt zo gelijk met de gecentreerde container. */
.blok-hero .inhoud { position: relative; z-index: 3;
padding: var(--ruimte-xxlarge) var(--goot-midden) var(--ruimte-xxhuge); }
/* De afbreking staat in de HTML met
, zodat de
kop op brede schermen altijd op twee regels valt. Op mobiel telt hij niet. */
.blok-hero .inhoud h1 { font-size: var(--kop-hero); font-weight: var(--gewicht-xbold);
letter-spacing: -0.035em; }
.blok-hero .inhoud p { color: var(--tekst-secundair); font-size: var(--tekst-medium); max-width: 46ch;
margin: var(--ruimte-custom1) 0 var(--ruimte-medium); }
/* Geen vlak eronder: de tekst zweeft op het beeld. De leesbaarheid
komt van de donkere onderrand in .sluier plus een zachte schaduw. */
.blok-hero .hero-voetkaart { position: absolute; right: 0; bottom: 0; z-index: 4; max-width: 62%;
padding: var(--ruimte-custom1) var(--goot-midden) var(--ruimte-custom1) var(--rand-globaal);
display: flex; flex-direction: column; align-items: flex-end;
gap: var(--ruimte-small); text-align: right;
text-shadow: 0 1px 4px rgba(12,14,17,0.75); }
.blok-hero .hero-voetkaart .item { display: flex; flex-direction: row-reverse; align-items: center;
gap: var(--ruimte-xsmall); }
.blok-hero .hero-voetkaart .item > svg { width: 22px; height: 22px; color: var(--accent-tekst); flex: none;
filter: drop-shadow(0 1px 3px rgba(12,14,17,0.8)); }
.blok-hero .hero-voetkaart .profielfoto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
flex: none; border: 2px solid rgba(255,255,255,0.85);
box-shadow: 0 2px 10px rgba(12,14,17,0.6); }
.blok-hero .hero-voetkaart .scorebadge { width: 48px; height: 48px; border-radius: 50%; flex: none;
display: grid; place-items: center; background: var(--knop-vlak);
color: var(--knop-tekst); font-family: var(--familie-kop);
font-weight: var(--gewicht-bold); font-size: var(--tekst-regular);
border: 1.5px solid rgba(255,255,255,0.28);
box-shadow: 0 2px 10px rgba(12,14,17,0.6); text-shadow: none; }
.blok-hero .hero-voetkaart .sterren { color: var(--geel-500); letter-spacing: 1px; font-size: 0.9em;
margin-right: 4px; }
.blok-hero .hero-voetkaart strong { display: block; font-family: var(--familie-kop);
font-weight: var(--gewicht-bold); font-size: var(--tekst-medium);
line-height: 1.2; color: var(--tekst-primair); }
.blok-hero .hero-voetkaart small { display: block; font-size: var(--tekst-small);
color: var(--tekst-secundair); margin-top: 3px; }
@media (max-width: 900px) {
.is-media-zij .beeld { position: relative; width: 100%; height: 20rem; }
.blok-hero .inhoud { padding: var(--ruimte-large) var(--rand-globaal) var(--ruimte-medium); max-width: none; }
.sluier { background: linear-gradient(180deg, rgba(20,22,26,0.82) 0%, rgba(20,22,26,0.7) 50%, rgba(20,22,26,0.92) 100%); }
/* Op een telefoon is rechts uitlijnen te krap: de regels breken raar af.
Daar staat het blok links, met het beeld voorop en normale leesrichting. */
.blok-hero .hero-voetkaart { position: static; max-width: none; flex-direction: column;
align-items: stretch; text-align: left; gap: var(--ruimte-small);
padding: 0 var(--rand-globaal) var(--ruimte-medium); }
.blok-hero .hero-voetkaart .item { flex-direction: row; align-items: center; gap: var(--ruimte-small); }
.blok-hero .hero-voetkaart small { max-width: 34ch; }
}
/* ============================================================
BLOK: PUNTEN — korte kernpunten met icoon, op één rij
============================================================ */
.blok-punten { display: grid; gap: var(--ruimte-small);
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
padding: var(--ruimte-medium) var(--rand-globaal); }
.blok-punten > div { display: flex; align-items: center; gap: var(--ruimte-xsmall);
font-family: var(--familie-ui); font-weight: var(--gewicht-bold);
font-size: var(--tekst-small); line-height: 1.35; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--tekst-primair); }
.blok-punten svg { width: 22px; height: 22px; color: var(--accent-tekst); flex: none; }
/* ============================================================
BLOK: CIJFERS — kerngetallen die bekwaamheid laten zien
============================================================ */
.blok-cijfers { display: grid; gap: var(--ruimte-medium); text-align: center;
grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.blok-cijfers .cijfer { display: block; font-family: var(--familie-kop); font-weight: var(--gewicht-xbold);
font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.04em;
color: var(--tekst-primair); font-variant-numeric: tabular-nums; }
.blok-cijfers small { display: block; margin-top: var(--ruimte-xsmall); font-size: var(--tekst-small);
color: var(--tekst-secundair); max-width: 22ch; margin-inline: auto; }
/* ============================================================
BLOK: WISSELAAR — genummerde lijst links, beeldpaneel rechts
============================================================ */
.blok-wisselaar { display: grid; grid-template-columns: 21rem 1fr; gap: var(--ruimte-large); align-items: stretch; }
@media (max-width: 900px) { .blok-wisselaar { grid-template-columns: 1fr; } }
.blok-wisselaar .lijst { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--lijn-sterk); }
.blok-wisselaar .lijst button { width: 100%; text-align: left; background: none; border: 0;
border-bottom: 1px solid var(--lijn); padding: var(--ruimte-small) 0;
display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: var(--ruimte-xsmall);
font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-regular);
letter-spacing: 0.04em; text-transform: uppercase; color: var(--tekst-secundair);
cursor: pointer; transition: color var(--duur-snel); }
.blok-wisselaar .lijst .nr { font-size: var(--tekst-tiny); color: var(--tekst-secundair); }
.blok-wisselaar .lijst button:hover,
.blok-wisselaar .lijst button[aria-selected="true"] { color: var(--tekst-primair); }
.blok-wisselaar .lijst button[aria-selected="true"] .nr { color: var(--accent-tekst); }
.blok-wisselaar .paneelbeeld { position: relative; min-height: 27.5rem; border-radius: var(--radius-l);
overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end;
color: var(--neutraal-0); }
.blok-wisselaar .paneelbeeld::before { content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(20,22,26,0.96) 0%, rgba(20,22,26,0.9) 32%, rgba(20,22,26,0.6) 58%, rgba(20,22,26,0.18) 84%, rgba(20,22,26,0) 100%); }
.blok-wisselaar .paneelbeeld > div { position: relative; padding: var(--ruimte-medium); max-width: 56ch; }
.blok-wisselaar .paneelbeeld h3 { margin-bottom: var(--ruimte-xxsmall); }
.blok-wisselaar .paneelbeeld p { color: var(--neutraal-200); margin-bottom: var(--ruimte-small); }
@media (max-width: 900px) { .blok-wisselaar .paneelbeeld { min-height: 23rem; } }
/* ============================================================
BLOK: KENMERKEN — icoon, kop en regel, in een raster
============================================================ */
.blok-kenmerken { display: grid; gap: var(--ruimte-medium) var(--ruimte-custom1);
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.blok-kenmerken .kenmerk { display: flex; gap: var(--ruimte-small); }
/* Variant: onder elkaar in plaats van naast elkaar, en een maat groter.
Bedoeld voor drie of vier punten naast een beeld. */
.blok-kenmerken.is-lijst { grid-template-columns: 1fr; gap: var(--ruimte-large); }
.blok-kenmerken.is-lijst .kenmerk { gap: var(--ruimte-medium); align-items: flex-start; }
.blok-kenmerken.is-lijst .icoonvlak { width: 76px; height: 76px; border-radius: var(--radius-l); }
.blok-kenmerken.is-lijst .icoonvlak svg { width: 34px; height: 34px; }
.blok-kenmerken.is-lijst h3 { font-size: var(--kop-h3); margin-bottom: var(--ruimte-xsmall); }
.blok-kenmerken.is-lijst p { font-size: var(--tekst-medium); max-width: 40ch; }
.blok-kenmerken h3 { font-size: var(--kop-h5); margin-bottom: var(--ruimte-xxsmall); }
.blok-kenmerken p { color: var(--tekst-secundair); font-size: var(--tekst-small); }
/* ============================================================
BLOK: STAPPEN — genummerd proces
============================================================ */
.blok-stappen { display: grid; gap: var(--ruimte-small);
grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.blok-stappen .stap { border-top: 1px solid var(--lijn); padding-top: var(--ruimte-custom1); }
.blok-stappen .nr { display: block; font-family: var(--familie-kop); font-weight: var(--gewicht-bold);
font-size: 3.25rem; line-height: 1; letter-spacing: -0.04em;
color: var(--accent-tekst); margin-bottom: var(--ruimte-xsmall); }
.blok-stappen h3 { color: var(--tekst-primair); margin-bottom: var(--ruimte-xxsmall); }
.blok-stappen p { font-size: var(--tekst-small); color: var(--tekst-secundair); }
/* ============================================================
BLOK: FAQ — uitklapbare vragen
============================================================ */
.blok-faq { max-width: var(--breed-large); margin-inline: auto; display: flex; flex-direction: column; }
.blok-faq details { border-top: 1px solid var(--lijn); }
.blok-faq details:last-child { border-bottom: 1px solid var(--lijn); }
.blok-faq summary { list-style: none; cursor: pointer; padding: var(--ruimte-small) 0;
font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-medium);
letter-spacing: 0.03em; text-transform: uppercase;
display: flex; justify-content: space-between; align-items: center; gap: var(--ruimte-small); }
.blok-faq summary::-webkit-details-marker { display: none; }
.blok-faq summary::after { content: "+"; font: var(--gewicht-normaal) 1.6rem/1 var(--familie-body); color: var(--accent-tekst); }
.blok-faq details[open] summary::after { content: "–"; }
.blok-faq .antwoord { padding-bottom: var(--ruimte-custom1); color: var(--tekst-secundair); }
/* ============================================================
BLOK: CTA — gecentreerde oproep
============================================================ */
.blok-cta { text-align: center; padding: var(--sectie-large) var(--rand-globaal); }
.blok-cta h2 { max-width: 20ch; margin: 0 auto var(--ruimte-xsmall); }
.blok-cta p { font-size: var(--tekst-medium); margin-bottom: var(--ruimte-medium); }
.blok-cta .naschrift { display: block; margin-top: var(--ruimte-custom1);
font-family: var(--familie-ui); font-weight: var(--gewicht-bold); font-size: var(--tekst-small);
letter-spacing: 0.06em; text-transform: uppercase; }
.blok-cta .naschrift a { text-decoration: underline; text-underline-offset: 4px; }
/* ============================================================
BLOK: REVIEWS — beoordelingen in kaarten
============================================================ */
.blok-reviews { display: grid; gap: var(--ruimte-small);
grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.blok-reviews .review { background: var(--kaart-vlak); border: 1px solid var(--kaart-lijn);
border-radius: var(--kaart-radius); padding: var(--ruimte-custom1);
display: flex; flex-direction: column; gap: var(--ruimte-small); }
.blok-reviews .sterren { color: var(--geel-500); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.blok-reviews blockquote { margin: 0; flex: 1; color: var(--tekst-secundair); font-size: var(--tekst-regular); }
.blok-reviews footer { display: flex; align-items: center; gap: var(--ruimte-xsmall); }
.blok-reviews .avatar { width: 2.5rem; height: 2.5rem; font-size: var(--tekst-tiny); }
.blok-reviews .naam { display: block; font-family: var(--familie-kop); font-weight: var(--gewicht-bold);
font-size: var(--tekst-regular); color: var(--tekst-primair); line-height: 1.2; }
.blok-reviews .plaats { font-size: var(--tekst-small); color: var(--tekst-tertiair); }
.blok-reviews .bron { margin-left: auto; font-family: var(--familie-ui); font-weight: var(--gewicht-bold);
font-size: var(--tekst-tiny); letter-spacing: 0.1em; text-transform: uppercase;
color: var(--tekst-tertiair); }
.blok-reviews-voet { margin-top: var(--ruimte-custom1); text-align: center; color: var(--tekst-secundair);
font-size: var(--tekst-small); }
/* ============================================================
BLOK: FORMULIER — pitch links, formulierkaart rechts.
De spoedregel staat bovenaan, zodat bellen altijd de
snelste route blijft.
============================================================ */
.blok-formulier { display: grid; gap: var(--ruimte-xlarge); align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.blok-formulier .pitch p { margin-top: var(--ruimte-small); max-width: 44ch; }
.blok-formulier .spoed { display: grid; gap: var(--ruimte-small);
margin-top: var(--ruimte-medium); padding: var(--ruimte-custom1);
border-radius: var(--radius-m); background: var(--vlak-zacht);
border: 1px solid var(--lijn); }
.blok-formulier .spoed .kop { display: flex; align-items: flex-start; gap: var(--ruimte-small); }
/* Alleen het icoon, geen gevuld rondje: dat leek te veel op de knop. */
.blok-formulier .spoed-icoon { flex: none; display: grid; place-items: center;
width: 28px; height: 28px; color: var(--accent-tekst); }
.blok-formulier .spoed-icoon svg { width: 28px; height: 28px; }
.blok-formulier .spoed .acties { display: flex; align-items: center; gap: var(--ruimte-custom1); flex-wrap: wrap; }
.blok-formulier .spoed strong { display: block; font-family: var(--familie-kop);
font-weight: var(--gewicht-bold); font-size: var(--tekst-medium); }
.blok-formulier .spoed small { display: block; font-size: var(--tekst-small); color: var(--tekst-secundair);
margin-top: 4px; max-width: 40ch; }
.blok-formulier .formkaart { border-radius: var(--radius-l); padding: var(--ruimte-custom2); }
.blok-formulier .velden { display: grid; gap: var(--ruimte-small); }
.blok-formulier .velden .duo-veld { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ruimte-small); }
.blok-formulier fieldset { border: 0; margin: 0; padding: 0; }
.blok-formulier legend { padding: 0; }
.blok-formulier .keuzes { display: flex; flex-direction: column; gap: var(--ruimte-xsmall);
margin-top: var(--ruimte-xsmall); }
.blok-formulier .bevestiging { display: none; }
.blok-formulier .bevestiging.is-zichtbaar { display: flex; align-items: center; gap: var(--ruimte-xsmall); }
@media (max-width: 560px) { .blok-formulier .velden .duo-veld { grid-template-columns: 1fr; } }
/* ============================================================
BLOK: MIDDENKAART — één gecentreerde kaart, voor een
melding of een sectie die nog gevuld moet worden
============================================================ */
.blok-middenkaart { max-width: var(--breed-large); margin-inline: auto; text-align: center;
display: flex; flex-direction: column; gap: var(--ruimte-small); align-items: center;
background: var(--kaart-vlak); border: 1px solid var(--kaart-lijn);
border-radius: var(--kaart-radius); padding: var(--ruimte-medium); }
.blok-middenkaart p { color: var(--tekst-secundair); max-width: 50ch; }
/* ============================================================
BLOK: FOOTER
============================================================ */
.blok-footer .boven { display: grid; grid-template-columns: 1fr 1.6fr;
max-width: var(--breed-xxlarge); margin-inline: auto; }
@media (max-width: 900px) { .blok-footer .boven { grid-template-columns: 1fr; } }
.blok-footer .zijde { padding: var(--ruimte-xlarge) var(--rand-globaal); border-right: 1px solid var(--lijn); }
@media (max-width: 900px) { .blok-footer .zijde { border-right: 0; border-bottom: 1px solid var(--lijn); } }
.blok-footer .zijde .logo { height: 96px; width: 96px; }
.blok-footer .zijde p { color: var(--tekst-secundair); font-size: var(--tekst-small); max-width: 34ch; }
.blok-footer .hoofd { padding: var(--ruimte-xlarge) var(--rand-globaal) var(--ruimte-medium);
display: flex; flex-direction: column; gap: var(--ruimte-medium); }
.blok-footer .kolommen { display: grid; grid-template-columns: 1fr 1fr 1.3fr;
gap: var(--ruimte-medium); font-size: var(--tekst-small); }
@media (max-width: 900px) { .blok-footer .kolommen { grid-template-columns: 1fr 1fr; }
.blok-footer .kolommen > div:last-child { grid-column: 1 / -1; } }
.blok-footer .kolomkop { display: block; color: var(--tekst-tertiair); margin-bottom: var(--ruimte-small); }
/* Tekstlinks in de footer krijgen verticale tikruimte tot 40px. */
.blok-footer ul a { display: inline-block; padding-block: 8px; }
.blok-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
gap: var(--ruimte-xsmall); color: var(--tekst-secundair); }
.blok-footer li a:hover { color: var(--accent-tekst); }
.blok-footer .contactregel { display: flex; gap: var(--ruimte-xsmall); align-items: flex-start; }
.blok-footer .contactregel svg { width: 16px; height: 16px; color: var(--tekst-tertiair); flex: none; margin-top: 3px; }
/* Belknop en de rest op een rij; op smalle schermen zakt de rij door. */
.blok-footer .contactrij { display: flex; align-items: center; flex-wrap: wrap;
gap: var(--ruimte-small); margin-top: var(--ruimte-small); }
.blok-footer .socials { display: flex; gap: var(--ruimte-xsmall); }
.blok-footer .socials .is-label { width: auto; padding: 0 12px; gap: 6px;
border-radius: var(--radius-vol);
font-family: var(--familie-ui); font-weight: var(--gewicht-bold);
font-size: var(--tekst-tiny); letter-spacing: 0.06em;
text-transform: uppercase; white-space: nowrap; }
.blok-footer .socials .is-label svg { width: 14px; height: 14px; color: var(--geel-500); }
.blok-footer .socials .is-label:hover svg { color: var(--accent-tekst); }
.blok-footer .socials a { width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--lijn); color: var(--tekst-secundair);
transition: color var(--duur-snel), border-color var(--duur-snel); }
.blok-footer .socials a:hover { color: var(--accent-tekst); border-color: var(--accent-tekst); }
.blok-footer .socials svg { width: 18px; height: 18px; }
.blok-footer .slotregel { padding: var(--ruimte-small) var(--goot-midden); border-top: 1px solid var(--lijn);
font-size: var(--tekst-small); color: var(--tekst-tertiair);
display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ruimte-xsmall); }
.blok-footer .slotregel a:hover { color: var(--tekst-primair); }
/* ============================================================
BLOK: BELBALK — vaste knop onderaan op mobiel
============================================================ */
.blok-belbalk { display: none; }
@media (max-width: 900px) {
body { padding-bottom: 76px; }
.blok-belbalk { display: flex; gap: var(--ruimte-xxsmall); position: fixed;
left: var(--paneel-marge); right: var(--paneel-marge);
bottom: var(--paneel-marge); z-index: 20; }
.blok-belbalk a { flex: 1; }
/* De balk zweeft over de pagina, dus de tweede knop krijgt een eigen
ondergrond in plaats van doorzichtig te blijven. */
.blok-belbalk .knop.is-secundair { background: var(--neutraal-0); border-color: var(--neutraal-200); }
}
/* ---------- Intro-animatie, alleen voor de hero ---------- */
/* De hero bouwt zich op in leesvolgorde: kicker, kop, tekst, actie.
De knoppen komen als laatste binnen, zodat het oog daar eindigt. */
.intro { opacity: 0; transform: translateY(26px); animation: intro var(--duur-onthul) var(--soepel-uit) forwards; }
.intro:nth-child(1) { animation-delay: .1s; }
.intro:nth-child(2) { animation-delay: calc(.1s + var(--trap) * 1.6); }
.intro:nth-child(3) { animation-delay: calc(.1s + var(--trap) * 3.2); }
.intro:nth-child(4) { animation-delay: calc(.1s + var(--trap) * 5); }
@keyframes intro { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.intro { opacity: 1 !important; transform: none !important; }
.beeld img { animation: none; transform: scale(1.11) translate3d(3%, -0.4%, 0); }
}