/* ================================================================
GRANDEUR STIJL — gedeelde stijl
Samenstelling na de vergelijking van variant A en B:
header layout van A (mega-menu met beeld) in het kleurgebruik van B
USP-band uit A
overige uit B: lamellen-onthulling, kozijnlijn, schaduwletters,
mozaïek, technische tekening, tijdlijn
Merk
Kleuren, radius 0 en typografie komen van boorvrijeraambekleding.nl,
uitgelezen met computed styles.
TYPOGRAFIE — JOST, EN VERDER NIETS
De oude site gebruikt uitsluitend Jost. Er is GEEN serif in het merk.
Gemeten op de live site:
body Jost 400 18px / 27px #868686
h1 Jost 600 58.9px / 1.4 ls -2px
h2 Jost 600 44.2px / 1.3 ls -2px
h4 Jost 600 24.9px / 1.3
h5 Jost 600 18.7px / 1.2
h6/label Jost 500 14px ls 2px uppercase, messing
knop Jost 500 17px geen uppercase, radius 0
groot getal Jost 600 58.9px messing
De maten hieronder staan in clamp() omdat onze layout een andere
schaal heeft, maar familie, gewichten en letterafstand volgen de
live site. Alles loopt via --font en --display, dus zelf-hosten
is later een kwestie van @font-face plus die twee variabelen.
================================================================ */
:root{
/* Exact uitgelezen van boorvrijeraambekleding.nl met computed styles.
Meer kleuren dan dit heeft het merk niet, en radius is overal 0. */
--teal: #1D3439; /* het donkergroen, SECUNDAIR: alleen als accentvlak */
--ink: #1D3439;
--brass: #C1997D;
--tint: #FAF9FD;
--line: #D5D8DC;
/* LEESBAARHEID — herzien 04-08-2026
Het merkgrijs #868686 haalde op wit 3,64:1 en op de tint 3,47:1, waar de
norm 4,5:1 is. Dat is de lopende tekst van de hele site, bij een doelgroep
die grotendeels boven de vijfenveertig zit. Een tint donkerder haalt 5,0:1
op wit en 4,8:1 op de tint, en verandert de uitstraling nauwelijks. */
--body: #6F6F6F;
--white: #FFFFFF;
--line-w: rgba(255,255,255,.16);
--body-w: rgba(255,255,255,.72);
/* rustige grijzen voor formuliervelden, afgeleid van --line en --body
in plaats van losse grijstinten die niet in het merk zitten */
--line-2: #C4C9CD;
--body-2: #74797A;
/* MESSING — één waarde, de beige van de oude site
Op 04-08 stond hier een tweede, dieper messing (#8A6A50) voor het contrast:
op wit haalt de merkkleur maar 2,3:1 en dat raakt élk labeltje, elk groot
cijfer en elke knop met witte tekst. Die diepe variant leest beter, maar
hij oogt bruin, en het merk is beige. Teruggezet op 05-08 op verzoek van
Miguel: de site draagt nu overal dezelfde #C1997D als
boorvrijeraambekleding.nl.
De opzet met --accent blijft staan, zodat een volgende ronde de kleur per
ondergrond kan laten meewisselen zonder dat er 53 regels om moeten. Nu
wijzen beide waarden naar hetzelfde messing. */
--brass-ink: #C1997D;
--accent: var(--brass-ink);
/* Jost is het enige font van het merk, --display is dezelfde familie
in gewicht 600. Geen serif. */
--font: 'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--display: var(--font);
--gut: clamp(20px,4.4vw,72px);
--max: 1440px;
--e: cubic-bezier(.42,0,.12,1);
--e-o: cubic-bezier(.16,1,.3,1);
--ease: var(--e);
/* lamellentextuur, het patroon van een jaloezie. Alleen op de teal vlakken. */
--slat: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
}
/* De donkere vlakken zetten --accent terug op het lichte merkmessing. Omdat
custom properties overerven, krijgt elk labeltje, cijfer en icoontje binnen
zo'n vlak vanzelf de juiste variant, zonder dat er per onderdeel een
uitzondering nodig is. */
.topbar, .hdr, .mnav, .panel, .usp, .spec, .cta, .ft, .tile.dark,
.aside-card, .phead-foto, .stmt .ghost{ --accent: var(--brass) }
.aside-card.light{ --accent: var(--brass-ink) }
/* En ze zetten meteen hun eigen tekstkleur. Zonder dit erven losse elementen
binnen zo'n vlak het grijs van de lichte modus, en dat staat op donkergroen
op 2,6:1. Vlakken die verderop een eigen kleur zetten winnen gewoon, want
die regels staan later in dit bestand. */
.panel, .usp, .spec, .cta, .phead-foto{ color:var(--body-w) }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px }
body{
font-family:var(--font); font-size:17px; line-height:1.58; font-weight:400;
color:var(--body); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }
/* messing als achtergrond krijgt ALTIJD witte tekst, ook hier */
::selection{ background:var(--brass-ink); color:#fff }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
/* Jost 600 met negatieve letterafstand, zoals de koppen op de live site.
Daar staat ls -2px vast; in em uitgedrukt zodat het meeschaalt. */
h1,h2,h3,.display{ font-family:var(--display); font-weight:600; letter-spacing:-.034em; color:var(--ink) }
h1{ font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1.1 }
h2{ font-size:clamp(1.9rem,3.5vw,3.1rem); line-height:1.18 }
h3{ font-size:clamp(1.24rem,1.6vw,1.55rem); line-height:1.28; letter-spacing:-.024em }
strong{ font-weight:600 }
/* Twee alinea's onder elkaar hadden nergens ruimte ertussen, dus liep het tweede
verhaal tegen het eerste aan. Op desktop viel dat nog mee omdat een regel kort
is; op een telefoon werd het één blok van vijftien regels. Secties die hun
eigen afstand zetten (.artikel, .cta, .stmt, .antwoord) winnen op specificiteit
en veranderen hier niet van. */
p + p{ margin-top:1.05em }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding:clamp(78px,10vw,168px) 0; position:relative }
/* micro-label: exact de h6 van de live site (Jost 500, 14px, ls 2px, messing),
met een messing streepje ervoor */
.mark, .label{
display:inline-flex; align-items:center; gap:.75em; font-size:.875rem; font-weight:500;
letter-spacing:.143em; text-transform:uppercase; color:var(--accent); line-height:1.25;
}
.mark::before, .label::before{ content:""; width:16px; height:1px; background:var(--accent); flex:none }
.lead, .intro{ font-size:clamp(1.04rem,1.25vw,1.18rem); line-height:1.6; max-width:56ch }
/* ---------------------------------------------------------------
KOZIJN — verwijderd
Was een vaste messing haarlijn met hoekmarkeringen over de hele
pagina. Zelf verzonnen sieraad: op boorvrijeraambekleding.nl wordt
messing alleen gebruikt voor knoppen, labels en grote cijfers, niet
als kader. Het element blijft in de HTML staan maar toont niets meer.
--------------------------------------------------------------- */
.kozijn{ display:none }
.prog{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:200; transition:width .1s linear }
/* ---------------------------------------------------------------
KNOPPEN
--------------------------------------------------------------- */
/* Knopspec van de live site: Jost 500, 17px, geen uppercase, geen extra
letterafstand, radius 0. */
.btn{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
padding:16px 30px; font-size:1.0625rem; font-weight:500; line-height:1; letter-spacing:0;
border:1px solid transparent; white-space:nowrap; isolation:isolate;
}
.btn span{ position:relative; display:inline-flex; align-items:center; gap:.7em }
.btn svg{ flex:none; transition:transform .35s var(--e-o) }
.btn:hover svg{ transform:translateX(4px) }
/* de vulling schuift van onder naar boven, zoals een rolgordijn */
.btn::after{
content:""; position:absolute; inset:0; z-index:-1; transform:scaleY(0); transform-origin:50% 100%;
transition:transform .42s var(--e);
}
.btn:hover::after{ transform:scaleY(1) }
/* messing knop met WITTE tekst, exact zoals "Offerte aanvragen" op de live site */
.btn-brass, .btn-p{ background:var(--brass-ink); color:#fff }
.btn-brass::after, .btn-p::after{ background:var(--teal) }
.btn-brass:hover, .btn-p:hover{ color:#fff }
.btn-line, .btn-o{ border-color:var(--line-w); color:#fff }
.btn-line::after, .btn-o::after{ background:rgba(255,255,255,.09) }
.btn-dark, .btn-s{ border-color:rgba(29,52,57,.22); color:var(--ink); background:#fff }
.btn-dark::after, .btn-s::after{ background:var(--teal) }
.btn-dark:hover, .btn-s:hover{ color:#fff; border-color:var(--teal) }
.btn-solid{ background:var(--teal); border-color:var(--teal); color:#fff }
.btn-solid::after{ background:#fff }
.btn-solid:hover{ color:var(--ink) }
/* witte knop die bij hover messing wordt: de tekst moet dan mee naar wit */
.btn-light, .btn-d{ background:#fff; color:var(--ink) }
.btn-light::after, .btn-d::after{ background:var(--brass-ink) }
.btn-light:hover, .btn-d:hover{ color:#fff }
.tlink, .alink{ display:inline-flex; align-items:center; gap:.6em; font-size:.98rem; font-weight:500;
padding-bottom:5px; border-bottom:1px solid currentColor; color:var(--ink) }
.tlink svg, .alink svg{ transition:transform .35s var(--e-o) }
.tlink:hover svg, .alink:hover svg{ transform:translateX(4px) }
/* ---------------------------------------------------------------
LAMELLEN-ONTHULLING — beeld gaat open als een jaloezie
--------------------------------------------------------------- */
.rev{ display:block; position:relative; overflow:hidden; background:var(--teal) }
.rev > img{ width:100%; height:100%; object-fit:cover }
.slats{ position:absolute; inset:0; display:grid; pointer-events:none; z-index:2 }
.slats i{ background:var(--teal); transform:scaleY(1); transform-origin:50% 0; transition:transform 1.05s var(--e-o) }
.rev.on .slats i{ transform:scaleY(0) }
.slats i:nth-child(1){ transition-delay:.02s } .slats i:nth-child(2){ transition-delay:.07s }
.slats i:nth-child(3){ transition-delay:.12s } .slats i:nth-child(4){ transition-delay:.17s }
.slats i:nth-child(5){ transition-delay:.22s } .slats i:nth-child(6){ transition-delay:.27s }
.slats i:nth-child(7){ transition-delay:.32s } .slats i:nth-child(8){ transition-delay:.37s }
.slats i:nth-child(9){ transition-delay:.42s } .slats i:nth-child(10){ transition-delay:.47s }
/* ================================================================
1. TOPBALK + HEADER
layout van variant A (mega-menu met beeld), kleuren van variant B
================================================================ */
.topbar{ background:#1D3439; color:rgba(255,255,255,.5); font-size:.775rem; position:relative; z-index:130 }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:40px }
.topbar a:hover{ color:#fff }
.topbar-l{ display:flex; align-items:center; gap:.6em }
.topbar-r{ display:flex; align-items:center; gap:24px }
.topbar .tel{ color:var(--accent); font-weight:600; letter-spacing:.02em }
.pin, .dot{ width:5px; height:5px; background:var(--accent); flex:none; display:inline-block }
/* ---------- taalkeuze NL / EN / DE ----------
Drie letters achter elkaar met een dun streepje ertussen. Bewust klein en
grijs: negen van de tien bezoekers hebben er niets aan, en het mag het
telefoonnummer ernaast niet beconcurreren. De actieve taal staat wit, want
messing is hier de kleur van het nummer en dat zou twee accenten geven. */
.taal{ display:flex; align-items:center; gap:1px; flex:none }
.taal button{ font:inherit; font-weight:500; letter-spacing:.06em; line-height:1;
color:rgba(255,255,255,.5); background:none; border:0; cursor:pointer;
padding:6px 5px; transition:color .2s var(--e) }
.taal button + button{ box-shadow:-1px 0 0 rgba(255,255,255,.18) }
.taal button:hover{ color:#fff }
.taal button.on{ color:#fff; font-weight:600 }
.taal button:focus-visible{ outline:1px solid var(--brass); outline-offset:1px }
/* Vertalen duurt op een telefoon zomaar een paar seconden, want het script van
Google moet nog opgehaald worden. Zonder deze toestand lijkt de knop niets te
doen en gaat de bezoeker zelf herladen. */
.taal button[disabled]{ cursor:default }
.taal button.bezig{ color:#fff; position:relative }
.taal button.bezig::after{ content:""; position:absolute; left:5px; right:5px; bottom:2px;
height:1px; background:var(--brass); transform-origin:left;
animation:taal-bezig 1.1s var(--e) infinite }
@keyframes taal-bezig{ 0%{ transform:scaleX(0); opacity:1 } 60%{ transform:scaleX(1) } 100%{ transform:scaleX(1); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .taal button.bezig::after{ animation:none; transform:scaleX(1) } }
/* ---------- koppen bij een vertaling ----------
De koppen breken in het Nederlands op een gekozen plek af, want de regellengte
is onderdeel van het ontwerp. Een vertaling heeft een andere lengte, en dan
valt die afbreking midden in een zin: "The full" / "program". Bij een vertaalde
pagina laten wij de kop dus gewoon zelf afbreken.
In de bron staat een spatie vóór en ná elke
. Die spatie is in het
Nederlands onzichtbaar (de browser laat een spatie aan het eind van een regel
en aan het begin van de volgende weg), maar zorgt dat de woorden niet aan
elkaar plakken zodra de
verdwijnt. */
html.vertaald :is(h1, h2, h3) br{ display:none }
/* Zolang de vertaling onderweg is blijft de pagina onzichtbaar. Anders leest de
bezoeker eerst een seconde Nederlands en ziet hij de tekst daarna onder zich
omklappen. Het blok in de haalt deze klasse er weer af zodra de eerste
vertaalde woorden binnen zijn, en hoe dan ook na 1,2 seconde. */
html.vertaalt-nog body{ opacity:0 }
body{ transition:opacity .16s linear }
/* ---------- de vertaalwidget van Google zelf ----------
Wij bedienen hem via de cookie en tonen zijn eigen keuzelijst nooit. Zonder
deze regels zet Google een balk van 40px boven de pagina en duwt hij de body
omlaag met een inline `top`, wat de plakkende header uit beeld schuift. */
.skiptranslate{ display:none !important }
body{ top:0 !important }
#goog-gt-tt, .goog-te-balloon-frame, #google_translate_element{ display:none !important }
.goog-text-highlight{ background:none !important; box-shadow:none !important }
/* De laadschijf die Google linksboven vastzet terwijl hij vertaalt. Blijft in de
praktijk staan en dekt daar het logo half af. De klassenaam is verhaspeld,
vandaar de prefix-selector; die dekt de hele reeks van dat onderdeel. */
[class*="VIpgJd-ZVi9od-aZ2wEe"]{ display:none !important }
.hdr{ position:sticky; top:0; z-index:120; background:rgba(29,52,57,.9); backdrop-filter:blur(14px);
border-bottom:1px solid var(--line-w); transition:background .3s var(--e) }
.hdr.stuck{ background:rgba(29,52,57,.97) }
.hdr-in{ display:flex; align-items:center; gap:clamp(14px,2.2vw,40px);
height:78px; width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut) }
.logo{ flex:none; margin-right:auto; display:block }
/* Het logo is breed (951:354), dus hoogte kost meteen veel breedte. Meeschalend
zodat het op smallere schermen de navigatie niet verdringt. */
.logo img{ height:clamp(42px,3.3vw,54px); width:auto }
.nav{ display:flex; align-items:center; height:100% }
.nav-item{ position:relative; height:100% }
.nav-item.wide{ position:static }
.nav-link{ display:flex; align-items:center; gap:.45em; height:100%; padding:0 15px; position:relative;
font-size:.93rem; font-weight:500; color:rgba(255,255,255,.86); letter-spacing:.005em }
.nav-link::after{ content:""; position:absolute; left:15px; right:15px; bottom:-1px; height:1px;
background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .34s var(--e-o) }
.nav-item:hover > .nav-link::after, .nav-item.open > .nav-link::after, a.nav-link:hover::after{ transform:scaleX(1) }
.nav-link:hover, .nav-link[aria-current]{ color:#fff }
.chev{ color:var(--accent); transition:transform .3s var(--e) }
.nav-item.open .chev{ transform:rotate(180deg) }
.hdr-act{ display:flex; align-items:center; gap:12px; flex:none }
.hdr-act .btn{ padding:13px 22px; font-size:.88rem }
.panel{
/* eigen tekstkleur, anders erft het paneel het lichte-modus grijs van body en
staat dat op het donkergroen ineens op 2,6:1 */
color:var(--body-w);
position:absolute; top:100%; z-index:130; background:#1D3439; border:1px solid var(--line-w); border-top:0;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .24s var(--e), transform .24s var(--e), visibility .24s;
box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.nav-item.open .panel{ opacity:1; visibility:visible; transform:none }
.panel-sm{ left:8px; min-width:290px; padding:10px }
.panel-sm a{ display:block; padding:12px 15px; font-size:.93rem; font-weight:500; color:#fff }
.panel-sm a em{ display:block; font-style:normal; font-size:.81rem; font-weight:400; color:var(--body-w); margin-top:3px }
.panel-sm a:hover{ background:rgba(255,255,255,.05) }
/* mega-menu met beeldminiaturen, de layout uit variant A */
.panel-wide{ left:var(--gut); right:var(--gut); padding:14px; display:grid; grid-template-columns:1fr 250px; gap:14px }
.mega{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px }
.mega a{ display:flex; align-items:center; gap:15px; padding:10px; transition:background .2s var(--e) }
.mega a:hover{ background:rgba(255,255,255,.05) }
.mega img{ width:82px; height:62px; object-fit:cover; flex:none }
.mega b{ display:block; font-size:.92rem; font-weight:600; color:#fff; letter-spacing:-.012em }
.mega em{ display:block; font-style:normal; font-size:.79rem; color:var(--body-w); margin-top:3px; line-height:1.4 }
.mega-side{ background:rgba(255,255,255,.035); padding:22px }
.mega-side .mega-kop{ display:block; font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:15px }
.mega-side a{ display:block; padding:7px 0; font-size:.91rem; font-weight:500; color:rgba(255,255,255,.82) }
.mega-side a:hover{ color:var(--accent) }
/* belknop in de plakkende header, alleen onder de burgergrens (zie het
1080-blok onderaan). Zelfde maat en kader als de burger ernaast. */
.hdr-tel{ display:none; width:44px; height:44px; align-items:center; justify-content:center;
border:1px solid var(--line-w); color:#fff; flex:none;
transition:background .25s var(--e), border-color .25s var(--e) }
.hdr-tel:hover, .hdr-tel:active{ background:var(--brass-ink); border-color:var(--brass-ink) }
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line-w) }
.burger i{ display:block; width:18px; height:1.5px; background:#fff; position:relative; transition:background .2s }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:#fff; transition:transform .3s var(--e) }
.burger i::before{ top:-6px } .burger i::after{ top:6px }
.burger.on i{ background:transparent }
.burger.on i::before{ transform:translateY(6px) rotate(45deg) }
.burger.on i::after{ transform:translateY(-6px) rotate(-45deg) }
.mnav{ display:none; background:#1D3439; border-top:1px solid var(--line-w); max-height:calc(100dvh - 118px); overflow-y:auto;
overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.mnav.on{ display:block }
/* Draaide u het toestel met het menu open, dan bleef die lijst boven de gewone
navigatie hangen: .mnav.on kende geen breakpoint. Boven de burgergrens dus
altijd weg, wat er ook aan klassen op staat. */
@media (min-width:1081px){ .mnav, .mnav.on{ display:none } }
/* het scrollen van de pagina eronder vastzetten zolang het menu open is */
body.menu-open{ overflow:hidden }
.mnav .wrap{ padding-block:8px 26px }
.macc > button{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:17px 0;
font-size:1rem; font-weight:600; color:#fff; border-bottom:1px solid var(--line-w) }
.macc > button svg{ color:var(--accent); transition:transform .3s var(--e) }
.macc.on > button svg{ transform:rotate(180deg) }
.macc-body{ display:none; padding:8px 0 14px }
.macc.on .macc-body{ display:block }
.macc-body a{ display:block; padding:10px 0 10px 16px; font-size:.94rem; color:var(--body-w); border-left:1px solid var(--line-w) }
.macc-body a:hover{ color:#fff; border-color:var(--accent) }
.mnav > .wrap > a{ display:block; padding:17px 0; font-size:1rem; font-weight:600; color:#fff; border-bottom:1px solid var(--line-w) }
.mnav-cta{ display:grid; gap:10px; margin-top:22px }
/* Taalkeuze onderin het uitklapmenu, want in de topbalk staat op mobiel alleen
nog het telefoonnummer. Ruimere raakvlakken dan in de balk. */
.mnav-taal{ display:flex; align-items:center; justify-content:space-between; gap:14px;
margin-top:22px; padding-top:18px; border-top:1px solid var(--line-w);
font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body-w) }
.mnav-taal .taal{ gap:2px }
.mnav-taal .taal button{ padding:11px 13px; font-size:.9rem; letter-spacing:.06em; text-transform:none }
/* ================================================================
2. HERO (de lichte hero uit variant A, met de lamellen-onthulling uit B)
================================================================ */
/* 1:1 verdeling tussen tekst en beeld. Niets hangt hier nog aan vast: de USP-balk
eronder volgt sinds deze ronde het containerraster en niet meer deze scheiding. */
.hero{ display:grid; grid-template-columns:1fr 1fr; background:#fff }
.hero-copy{
display:flex; flex-direction:column; justify-content:center;
padding:clamp(48px,6vw,84px) clamp(28px,4vw,64px) clamp(48px,6vw,84px)
max(var(--gut), calc((100vw - var(--max))/2 + var(--gut)));
}
.hero-copy > *{ opacity:0; transform:translateY(12px); animation:heroUp .7s var(--e) forwards }
.hero-copy > *:nth-child(1){ animation-delay:.05s }
.hero-copy > *:nth-child(2){ animation-delay:.14s }
.hero-copy > *:nth-child(3){ animation-delay:.22s }
.hero-copy > *:nth-child(4){ animation-delay:.3s }
.hero-copy > *:nth-child(5){ animation-delay:.38s }
@keyframes heroUp{ to{ opacity:1; transform:none } }
.hero h1{ font-size:clamp(2.15rem,3.9vw,3.35rem); line-height:1.08 }
.hero-brandline{
display:inline-flex; align-items:center; gap:.6em; font-size:.8rem; font-weight:500;
letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:22px;
}
.hero-copy p.sub{ font-size:1.12rem; line-height:1.6; margin-top:20px; max-width:50ch; color:var(--body) }
.hero-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.hero-media{ position:relative; min-height:clamp(340px,52vw,660px); overflow:hidden }
.hero-media .rev{ position:absolute; inset:0; background:#fff }
/* Wisselende beelden met crossfade en langzame uitzoom.
.show regelt alleen het faden, .play alleen de zoom. Die twee staan los van
elkaar zodat het uitgaande beeld door kan blijven zoomen tijdens de fade.
Zou de animatie daar stoppen, dan springt het beeld zichtbaar terug. */
.hero-slides{ position:absolute; inset:0 }
.hs{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.2s var(--e) }
.hs.show{ opacity:1 }
.hs img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%;
}
.hs.play img{ animation:heroZoom 8s linear forwards }
@keyframes heroZoom{ from{ transform:scale(1.07) } to{ transform:scale(1) } }
/* de lamellen sluiten hier in wit, passend bij de lichte hero */
.hero-media .slats{ grid-template-rows:repeat(10,1fr) }
.hero-media .slats i{ background:#fff }
.hero-media::after{
content:""; position:absolute; z-index:3; inset:auto 0 0 0; height:38%; pointer-events:none;
background:linear-gradient(transparent, rgba(29,52,57,.55));
}
/* zweeft rechtsonder op de foto, met marge, niet vastgeplakt aan de rand */
.hero-cap{
position:absolute; z-index:4; right:clamp(16px,1.8vw,28px); bottom:clamp(16px,1.8vw,28px);
display:flex; align-items:center; gap:12px; max-width:calc(100% - clamp(32px,3.6vw,56px));
padding:12px 18px; background:rgba(29,52,57,.82); backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.18); color:#fff; font-size:.8rem; letter-spacing:.01em;
opacity:0; transform:translateY(8px); animation:capIn .7s var(--e-o) 1.15s forwards;
}
@keyframes capIn{ to{ opacity:1; transform:none } }
.hero-cap-t{ transition:opacity .4s var(--e) }
.hero-cap-t.fade{ opacity:0 }
/* streepjes die aangeven hoeveel beelden er zijn en welke u ziet */
.hero-ticks{ display:flex; gap:5px; flex:none; padding-left:4px; border-left:1px solid rgba(255,255,255,.22) }
.hero-ticks i{ display:block; width:12px; height:2px; background:rgba(255,255,255,.28);
transition:background .4s var(--e); margin-left:4px }
.hero-ticks i.on{ background:var(--accent) }
/* ================================================================
3. USP-BALK (uit variant A)
================================================================ */
/* De balk stond eerst op volle breedte met een berekende buitenmarge, zodat de
middelste deellijn op exact 50vw viel en samenviel met de beeldscheiding van
de hero. Dat hield alleen stand op een paar breedtes: zodra de hero door zijn
max-width of een breakpoint ergens anders splitste, joeg de lijn een scheiding
na die er niet meer was, en waren de vier tekstkolommen ongelijk breed.
Nu volgt de balk gewoon het containerraster van de rest van de pagina:
vier gelijke kolommen, deellijnen ertussen, buitenste tekst op de gutter.
Het teal vlak blijft wel over de volle breedte doorlopen.
De deellijnen zijn geen border-left maar een lijntje in het midden van de
kolomruimte. Met een border zou het eerste item zijn tekst wel op de gutter
krijgen maar 31px breder blijven dan de andere drie, want die hebben links
nog padding naast hun lijn. Zo zijn alle vier de tekstkolommen exact gelijk. */
.usp{ background:var(--teal); --usp-gap:clamp(26px,3.4vw,56px) }
.usp ul{
width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:var(--usp-gap);
}
.usp li{ position:relative; padding-block:clamp(30px,3.2vw,46px) }
.usp li + li::before{
content:""; position:absolute; top:0; bottom:0; left:calc(var(--usp-gap) / -2);
width:1px; background:var(--line-w);
}
.usp .ic{ display:block; color:var(--accent); margin-bottom:16px }
.usp b{ display:block; font-family:var(--display); font-weight:600; font-size:1.16rem; color:#fff;
letter-spacing:-.018em; margin-bottom:7px }
.usp p{ font-size:.88rem; line-height:1.5; color:var(--body-w); max-width:26ch }
/* ================================================================
4. STATEMENT — reuzenwoord op de achtergrond
================================================================ */
.stmt{ position:relative; background:#fff; overflow:hidden; padding:clamp(56px,6.4vw,104px) 0 }
/* GEEN CONTOURLETTERS MEER. Dit stond op color:transparent met
-webkit-text-stroke, en dat kan met dit font niet:
1. Jost bouwt zijn letters uit OVERLAPPENDE deelvormen (een stam plus een
losse bol, een schacht plus een arm). Bij een gevulde letter zie je daar
niets van, want de vormen vloeien samen. Zet je de vulling op transparant
en trek je een lijn om de contouren, dan wordt elke interne rand ook
getekend: de d werd een cirkel met een streep erdoor, de e kreeg een
balk door de bol, de 4 een driehoek met kruisende lijnen. De G en de 0
bestaan uit een enkele contour en zagen er daarom wel goed uit.
2. Een lijn van 1px blijft 1px terwijl de letters met de viewport meegroeien.
Op 1600px zijn ze 320px hoog, op een 2560-scherm 512px, met dezelfde
haarlijn van 10% dekking. Dan is er op een groot scherm bijna niets meer
te zien. Dat was dus niet de monitor.
Nu een massieve vulling in een lichte tint van het merkgroen. Geen interne
randen mogelijk, en de zichtbaarheid is onafhankelijk van de schermgrootte. */
.ghost{ position:absolute; z-index:0; font-family:var(--display); font-weight:600; line-height:.8; white-space:nowrap;
color:rgba(29,52,57,.038); pointer-events:none; user-select:none }
/* Het tekstvak staat gecentreerd, maar de inkt niet: de G heeft links meer
witruimte in de letter dan de r rechts. Opnieuw gemeten voor Jost met
canvas measureText (zie meet-ghost.mjs): zijruimte links .0313em, rechts
-.0006em, dus het inkt-midden ligt .0159em rechts van het vakmidden.
Was .026em toen hier nog Prata stond, dat font heeft andere zijruimte. */
.stmt .ghost{ font-size:clamp(9rem,20vw,20rem); left:50%; top:50%;
transform:translate(calc(-50% - .0159em), -50%) }
.stmt .wrap{ position:relative; z-index:2; text-align:center }
.stmt .rule{ display:block; width:1px; height:clamp(32px,4vw,54px); background:var(--accent); margin:0 auto 20px }
.stmt h2{ max-width:20ch; margin:20px auto 0 }
.stmt p{ max-width:60ch; margin:22px auto 0; color:var(--body) }
/* ================================================================
5. SECTIEKOP + ASSORTIMENT-MOZAÏEK
================================================================ */
/* lichte band; wit en #FAF9FD wisselen elkaar af door de pagina heen */
.alt{ background:var(--tint) }
.sec-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(24px,4vw,70px);
align-items:end; margin-bottom:clamp(44px,5.5vw,84px) }
.sec-head h2{ margin-top:20px }
.sec-head .lead{ color:var(--body) }
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,44px) }
.card{ display:flex; flex-direction:column; position:relative }
.card:nth-child(2),.card:nth-child(5){ margin-top:clamp(26px,3.4vw,58px) }
.card:nth-child(3),.card:nth-child(6){ margin-top:clamp(52px,6.8vw,116px) }
.card .rev{ aspect-ratio:4/5 }
.card .slats{ grid-template-rows:repeat(8,1fr) }
.card .slats i{ background:var(--tint) }
.card .rev > img{ transition:transform 1.1s var(--e-o) }
.card:hover .rev > img{ transform:scale(1.045) }
.card .badge{ position:absolute; z-index:3; left:0; top:0; width:52px; height:52px; display:grid; place-items:center;
background:var(--teal); color:#fff; transition:background .3s var(--e), color .3s var(--e) }
.card:hover .badge{ background:var(--brass-ink); color:#fff }
.card-b{ padding-top:20px; display:flex; flex-direction:column; flex:1 }
.card .top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px }
.card .arw{ color:var(--body); opacity:0; transform:translateX(-8px);
transition:opacity .4s var(--e), transform .4s var(--e-o); flex:none }
.card:hover .arw{ opacity:1; transform:none }
.card p{ font-size:.93rem; line-height:1.55; margin-top:10px; color:var(--body) }
.card .tags{ display:block; margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
font-size:.8rem; color:var(--body) }
/* op een touchscreen bestaat hover niet, dus daar moet zichtbaar zijn dat de kaart een link is */
.card-go{ display:none; align-items:center; gap:.5em; margin-top:14px; font-size:.92rem;
font-weight:600; color:var(--ink); border-bottom:1px solid var(--accent);
padding-bottom:4px; align-self:flex-start }
.card-go svg{ color:var(--accent) }
@media (hover:none){ .card-go{ display:inline-flex } .card .arw{ display:none } }
/* ================================================================
6. BOORVRIJ — donkere band met technische tekening
================================================================ */
.spec{ position:relative; background:var(--teal); overflow:hidden }
.spec::before{ content:""; position:absolute; inset:0; background:var(--slat); opacity:.5; pointer-events:none }
.spec .wrap{ position:relative; z-index:2 }
.spec .grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(32px,5vw,88px); align-items:center }
.spec h2{ color:#fff; margin-top:20px }
.spec p{ color:var(--body-w); margin-top:20px; max-width:50ch }
.checks{ display:grid; margin:32px 0 36px; border-top:1px solid var(--line-w) }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
padding:16px 0; border-bottom:1px solid var(--line-w); color:rgba(255,255,255,.88); font-size:.97rem }
.checks svg{ margin-top:5px; color:var(--accent); flex:none }
.spec-fig{ position:relative }
.spec-fig .rev{ aspect-ratio:4/3.4 }
.spec-fig .slats{ grid-template-rows:repeat(8,1fr) }
.spec-fig .slats i{ background:var(--teal) }
/* Bewijsblok over het beeld. Bewust licht: een donker kaartje op de donkergroene
band verdween tegen de achtergrond. */
.proof{ position:absolute; z-index:4; right:-14px; bottom:-24px; display:flex; align-items:center; gap:18px;
background:#fff; border-top:2px solid var(--accent); padding:20px 26px 21px;
max-width:clamp(250px,27vw,340px) }
.proof .n{ font-family:var(--display); font-weight:600; font-size:clamp(2.5rem,3.2vw,3.3rem); line-height:.86; color:var(--accent); flex:none }
.proof .t{ font-size:.83rem; line-height:1.45; color:var(--body) }
.proof .t b{ display:block; font-size:.97rem; font-weight:600; color:var(--ink); letter-spacing:-.012em; margin-bottom:2px }
/* ================================================================
7. WERKWIJZE — tijdlijn met schaduwcijfers
================================================================ */
.werk{ background:var(--tint); position:relative; overflow:hidden }
/* Geen doorlopende lijn boven de stappen meer. Het cijfer blijft rechtsboven staan,
maar steekt nu net boven het messing streepje uit. */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,40px);
position:relative; padding-top:clamp(24px,2.4vw,36px) }
/* Zes stappen leest beter als 3+3 dan als 4+2 */
.steps.zes{ grid-template-columns:repeat(3,1fr) }
/* Drie stappen naast elkaar. Stond op de studiopagina als inline style, en die
weegt zwaarder dan élke mediaquery: de kolommen bleven daardoor ook op een
telefoon met z'n drieën naast elkaar staan, nog geen honderd pixels breed.
Als klasse volgt hij de tredes hieronder gewoon mee. */
.steps.drie{ grid-template-columns:repeat(3,1fr) }
.step{ position:relative; padding-top:30px }
.step::before{ content:""; position:absolute; left:0; top:0; width:34px; height:2px; background:var(--accent) }
/* Massieve vulling in plaats van een contourlijn, om dezelfde reden als het
schaduwwoord: de 3 en de 4 lieten in Jost hun interne deelvormen zien.
Messing, gelijk aan de mobiele variant en aan de grote getallen op de site
van het merk. Stond eerst in een lichtgrijze tint van het merkgroen, maar
dan hangt er een kleur in de pagina die nergens anders voorkomt. */
.step .no{ position:absolute; right:4px; top:-.36em; font-family:var(--display); font-weight:600;
font-size:clamp(3rem,4.6vw,4.6rem); line-height:1;
color:var(--accent); pointer-events:none }
.step h3{ font-size:1.14rem }
.step p{ font-size:.92rem; line-height:1.56; margin-top:11px; color:var(--body); max-width:30ch }
/* ================================================================
8. INSPIRATIE
================================================================ */
.insp{ background:#fff; position:relative; overflow:hidden; padding:clamp(78px,9vw,150px) 0;
border-block:1px solid var(--line) }
.insp .wrap{ position:relative; z-index:2 }
.insp-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:clamp(30px,3.5vw,52px) }
.insp h2{ margin-top:20px }
.track{ display:grid; grid-auto-flow:column; grid-auto-columns:clamp(238px,23vw,340px); gap:clamp(12px,1.4vw,22px);
overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:16px;
margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut);
scroll-padding-inline:var(--gut);
scrollbar-width:thin; scrollbar-color:var(--line) transparent; position:relative; z-index:2 }
.track::-webkit-scrollbar{ height:2px }
.track::-webkit-scrollbar-thumb{ background:var(--line) }
.fig{ position:relative; scroll-snap-align:start; overflow:hidden }
.fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1s var(--e-o) }
.fig:hover img{ transform:scale(1.05) }
.fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:46px 18px 16px; color:#fff;
font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:-.024em;
background:linear-gradient(transparent, rgba(29,52,57,.88)) }
/* het volgnummer moet ook op een lichte foto leesbaar blijven */
.fig .no{ position:absolute; z-index:2; right:14px; top:12px; font-size:.78rem; letter-spacing:.16em;
color:#fff; text-shadow:0 1px 3px rgba(29,52,57,.65) }
/* ================================================================
9. ADVIES — overlappende beelden op de merktint
================================================================ */
.advies{ background:var(--tint) }
.advies .grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:clamp(34px,5vw,86px); align-items:center }
.stack{ position:relative; padding:0 0 clamp(40px,5vw,74px) clamp(34px,4.4vw,70px) }
.stack .a{ display:block; position:relative; z-index:1 }
/* messing haarlijn die schuin achter het hoofdbeeld uitsteekt */
.stack .a::before{ content:""; position:absolute; z-index:-1; inset:-20px -20px 20px 20px; border:1px solid var(--accent); opacity:.5 }
.stack .a .rev{ aspect-ratio:4/5 }
.stack .a .slats{ grid-template-rows:repeat(8,1fr) }
.advies .slats i{ background:var(--tint) }
.stack .b{ position:absolute; z-index:2; left:0; bottom:0; width:47%; border:6px solid var(--tint); background:var(--tint) }
.stack .b img{ aspect-ratio:1/1; object-fit:cover; width:100% }
.advies h2{ margin-top:20px }
.advies .lead{ color:var(--body); margin-top:20px }
.plaatsen{ margin-top:34px; border-top:1px solid var(--line) }
.plaatsen li{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line) }
.plaatsen .ic{ width:42px; height:42px; border:1px solid var(--line); background:#fff; display:grid; place-items:center;
color:var(--body); flex:none; transition:all .3s var(--e) }
.plaatsen li:hover .ic{ background:var(--teal); border-color:var(--teal); color:#fff }
.plaatsen b{ display:block; font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:-.012em }
.plaatsen p{ font-size:.91rem; line-height:1.55; margin-top:4px; color:var(--body) }
.plaatsen .adr{ display:inline-block; margin-top:8px; font-size:.85rem; font-weight:600; color:var(--body) }
/* als .adr een link is (route naar de studio) mag hij zich ook als link gedragen */
a.adr{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
text-decoration-color:var(--line); transition:color .25s var(--e), text-decoration-color .25s var(--e) }
a.adr:hover{ color:var(--accent); text-decoration-color:var(--accent) }
/* Staat de lijst niet naast een beeld maar over de volle breedte, dan wordt een
regel ruim 1100 px lang en leest hij niet meer. Op een tablet blijft dat gelden:
op 810px is een doorlopende regel nog altijd 740px. Dus twee naast elkaar vanaf
een tablet, drie zodra er echt ruimte is. */
@media (min-width:701px){
.plaatsen.kolommen{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(26px,3.2vw,56px) }
.plaatsen.kolommen li{ border-bottom:0; padding:26px 0 0 }
}
@media (min-width:901px){ .plaatsen.kolommen{ grid-template-columns:repeat(3,1fr) } }
/* ---------- BLOG: overzicht en artikel ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,40px);
margin-top:clamp(28px,3vw,46px) }
.post{ display:block; background:#fff; border:1px solid var(--line); transition:border-color .25s var(--e) }
.post:hover{ border-color:var(--line-2) }
.post .rev{ display:block; aspect-ratio:4/3 }
.post .rev > img{ transition:transform 1.1s var(--e-o) }
.post:hover .rev > img{ transform:scale(1.045) }
.post-b{ display:block; padding:clamp(20px,2vw,28px) }
.post-meta{ display:flex; align-items:center; gap:10px; font-size:.76rem; font-weight:500;
letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.post-meta i{ width:14px; height:1px; background:var(--line-2); flex:none }
.post h3{ font-size:clamp(1.1rem,1.5vw,1.3rem); margin-top:12px; letter-spacing:-.015em }
.post p{ margin-top:10px; font-size:.94rem; line-height:1.6; color:var(--body) }
.post .card-go{ margin-top:16px }
/* het aantal kolommen staat bij de vier tredes onderaan dit bestand */
.artikel{ max-width:44rem }
.artikel-meta{ display:flex; align-items:center; gap:10px; font-size:.76rem; font-weight:500;
letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.artikel-meta i{ width:14px; height:1px; background:var(--line-2); flex:none }
.artikel-lead{ font-size:clamp(1.1rem,1.5vw,1.28rem); line-height:1.6; color:var(--ink);
margin-top:18px; padding-bottom:clamp(22px,2.4vw,32px); border-bottom:1px solid var(--line) }
.artikel h2{ font-size:clamp(1.3rem,1.9vw,1.62rem); margin-top:clamp(34px,3.4vw,50px) }
.artikel p{ margin-top:14px; color:var(--body) }
.artikel p b{ color:var(--ink); font-weight:600 }
.artikel-cta{ margin-top:clamp(34px,3.4vw,48px) }
/* Wat Patrick via /beheer/ kan invoegen: tussenkop h3, opsomming, link, foto */
.artikel h3{ font-size:clamp(1.1rem,1.5vw,1.25rem); margin-top:clamp(26px,2.6vw,36px) }
.artikel ul, .artikel ol{ margin-top:14px; padding-left:1.3em; color:var(--body) }
.artikel ul{ list-style:disc }
.artikel ol{ list-style:decimal }
.artikel li + li{ margin-top:6px }
.artikel li::marker{ color:var(--accent) }
.artikel li b{ color:var(--ink); font-weight:600 }
.artikel p a:not(.btn), .artikel li a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
text-underline-offset:3px }
.artikel p a:not(.btn):hover, .artikel li a:hover{ color:var(--accent) }
.artikel figure{ margin-top:clamp(26px,3vw,40px) }
.artikel figure img{ width:100%; height:auto; display:block }
.artikel figcaption{ margin-top:10px; font-size:.86rem; color:var(--body) }
/* ---------- INSPIRATIE: filter + galerij ----------
Metselwerk via CSS-kolommen, zodat staande en liggende foto's naast elkaar
kunnen staan zonder dat er wit onder een kolom overblijft. */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(28px,3vw,44px) }
.filter{ font:inherit; font-size:.9rem; font-weight:500; color:var(--ink); background:#fff;
border:1px solid var(--line); padding:10px 16px; cursor:pointer;
transition:all .18s var(--e) }
.filter:hover{ border-color:var(--line-2) }
.filter.aan{ background:rgba(29,52,57,.055); border-color:var(--teal); color:var(--teal) }
.filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.galerij{ columns:3; column-gap:clamp(14px,1.6vw,24px); margin-top:clamp(24px,2.6vw,38px) }
.gal-item{ break-inside:avoid; margin:0 0 clamp(14px,1.6vw,24px); position:relative;
background:var(--tint); overflow:hidden }
.gal-item img{ display:block; width:100%; height:auto; transition:transform 1s var(--e-o) }
.gal-item:hover img{ transform:scale(1.04) }
.gal-item figcaption{ position:absolute; inset:auto 0 0 0; padding:34px 16px 14px; color:#fff;
background:linear-gradient(to top, rgba(29,52,57,.86), rgba(29,52,57,0));
display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px }
.gal-item figcaption b{ font-size:.97rem; font-weight:600; letter-spacing:-.01em }
.gal-item figcaption span{ font-size:.83rem; color:rgba(255,255,255,.7) }
.gal-leeg{ margin-top:26px; color:var(--body) }
/* op een tablet staand passen er twee naast elkaar, op een telefoon één */
@media (max-width:900px){ .galerij{ columns:2 } }
@media (max-width:560px){ .galerij{ columns:1 } }
/* ---------- FAQ: uitklapbare vragen ----------
Met , dus zonder javascript. Het plusteken draait naar een min. */
.vragen{ max-width:62rem; margin-top:clamp(28px,3vw,44px) }
.vragen-kop{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
color:var(--accent); margin:clamp(34px,3.4vw,52px) 0 6px }
.vragen-kop:first-child{ margin-top:0 }
.vraag{ border-bottom:1px solid var(--line) }
.vraag > summary{ list-style:none; cursor:pointer; position:relative; display:block;
padding:22px 52px 22px 0; font-size:clamp(1rem,1.3vw,1.1rem); font-weight:500;
color:var(--ink); letter-spacing:-.01em; transition:color .2s var(--e) }
.vraag > summary::-webkit-details-marker{ display:none }
.vraag > summary:hover{ color:var(--accent) }
.vraag > summary::before,
.vraag > summary::after{ content:""; position:absolute; right:8px; top:50%; background:var(--accent);
transition:transform .3s var(--e), opacity .3s var(--e) }
.vraag > summary::before{ width:15px; height:1.5px; transform:translateY(-50%) }
.vraag > summary::after{ width:1.5px; height:15px; right:14.75px; transform:translateY(-50%) }
.vraag[open] > summary::after{ transform:translateY(-50%) rotate(90deg); opacity:0 }
.vraag[open] > summary{ color:var(--accent) }
.antwoord{ padding:0 52px 24px 0 }
.antwoord p{ color:var(--body); max-width:62ch }
.antwoord p + p{ margin-top:12px }
/* Legpatronen als getekend diagram. Het vlak snijdt de tekening af, want een
legpatroon loopt door; daarom overflow:hidden op de figuur zelf. */
.patronen{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,34px);
margin-top:clamp(30px,3.4vw,52px) }
.pat svg{ display:block; width:100%; aspect-ratio:4/3; background:var(--tint);
color:var(--teal); overflow:hidden; border:1px solid var(--line) }
.pat figcaption{ margin-top:16px }
.pat figcaption b{ display:block; font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-.012em }
.pat figcaption p{ margin-top:6px; font-size:.9rem; line-height:1.55; color:var(--body) }
/* vier diagrammen van 215px is op een tablet te klein om het legpatroon nog te
lezen: drie op een liggende tablet, twee staand, één op een telefoon. Deze
drie regels staan hier bij elkaar en niet bij de tredes onderaan, want daar
zou de ruimste van de drie als laatste komen en dus altijd winnen. */
@media (max-width:1080px){ .patronen{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:900px){ .patronen{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .patronen{ grid-template-columns:1fr } }
.advies .btn{ margin-top:32px }
/* ================================================================
10. ZAKELIJK — twee tegels, rustig gehouden
================================================================ */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,26px) }
.tile{ display:flex; flex-direction:column; padding:clamp(34px,3.8vw,62px); background:#fff;
border:1px solid var(--ink); position:relative; overflow:hidden }
.tile.dark{ background:var(--teal); border-color:var(--teal); color:var(--body-w) }
.tile.dark::before{ content:""; position:absolute; inset:0; background:var(--slat); opacity:.5; pointer-events:none }
.tile > *{ position:relative; z-index:2 }
.tile h3{ font-size:1.5rem; margin-bottom:14px }
.tile.dark h3{ color:#fff }
.tile p{ font-size:.96rem; line-height:1.6; color:var(--body) }
.tile.dark p{ color:var(--body-w) }
.tile ul{ display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 28px }
.tile ul li{ font-size:.78rem; font-weight:500; padding:6px 12px; border:1px solid var(--line); color:var(--body) }
.tile.dark ul li{ border-color:var(--line-w); color:rgba(255,255,255,.8) }
.tile .btn{ margin-top:auto; align-self:flex-start }
/* ================================================================
11. CTA
================================================================ */
/* eigen, krappere ruimte: deze sectie hoeft de sec-hoogte niet te volgen */
.cta{ position:relative; background:var(--teal); overflow:hidden; isolation:isolate;
padding:clamp(52px,5vw,74px) 0 }
.cta-bg{ position:absolute; inset:0; z-index:-2 }
.cta-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42% }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(100deg, rgba(29,52,57,.97) 32%, rgba(29,52,57,.72) 100%) }
.cta .grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(30px,4vw,72px); align-items:center }
.cta h2{ color:#fff; max-width:17ch; margin-top:16px }
.cta p{ color:var(--body-w); margin-top:14px; max-width:48ch }
.cta-acts{ display:flex; flex-wrap:wrap; gap:12px }
.cta-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
margin-top:clamp(26px,2.8vw,38px); padding-top:24px; border-top:1px solid var(--line-w) }
.cta-info h4{ font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:6px }
.cta-info p{ margin:0; font-size:.95rem; color:rgba(255,255,255,.86) }
.cta-info a:hover{ color:var(--accent) }
/* ================================================================
12. FOOTER
================================================================ */
.ft{ background:var(--teal); color:var(--body-w); font-size:.95rem; padding:clamp(50px,5vw,76px) 0 22px }
.ft-top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:36px clamp(24px,3vw,52px); padding-bottom:clamp(34px,3.6vw,50px) }
.ft-brand img{ height:44px; width:auto }
.ft-brand p{ margin-top:20px; max-width:32ch; line-height:1.65 }
.ft-brand .nap{ margin-top:16px; color:rgba(255,255,255,.82); line-height:1.7 }
.ft-brand .nap a{ color:var(--accent) }
.ft h3{ font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:16px }
.ft li{ margin-bottom:9px; line-height:1.5 }
.ft a:hover{ color:#fff }
/* drie kolommen i.p.v. space-between, anders staat het midden niet echt gecentreerd */
.ft-bot{ border-top:1px solid var(--line-w); padding-top:20px; display:grid;
grid-template-columns:1fr auto 1fr; align-items:center; gap:12px 28px;
font-size:.85rem; color:rgba(255,255,255,.5) }
.ft-bot > :last-child{ justify-self:end }
.ft-soc{ display:flex; gap:10px; justify-self:center }
.ft-soc a{ display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-w);
color:rgba(255,255,255,.7); transition:background .25s var(--e), border-color .25s var(--e), color .25s var(--e) }
.ft-soc a:hover{ background:var(--brass-ink); border-color:var(--brass-ink); color:#fff }
.ft-soc svg{ width:17px; height:17px }
/* ================================================================
13. PAGINAKOP (binnenpagina's)
================================================================ */
.phead{ background:var(--tint); border-bottom:1px solid var(--line); padding:clamp(44px,5.5vw,84px) 0 clamp(40px,5vw,72px) }
.phead .crumbs{ font-size:.84rem; margin-bottom:18px; color:var(--body) }
.phead .crumbs a:hover{ color:var(--body) }
.phead .crumbs span{ color:var(--ink) }
.phead h1{ font-size:clamp(2.2rem,4.4vw,3.6rem); max-width:18ch; margin-top:20px }
.phead .intro{ margin-top:18px; color:var(--body) }
/* Variant met sfeerbeeld erachter. De foto blijft leesbaar onder een teal waas die
links zwaarder is dan rechts, zodat de tekst staat en het beeld toch te zien is. */
.phead-foto{ position:relative; background:var(--teal); border-bottom:0; overflow:hidden;
display:flex; align-items:center;
min-height:clamp(230px,25vw,330px);
padding:clamp(46px,5vw,74px) 0 clamp(44px,4.6vw,68px) }
.phead-media{ position:absolute; inset:0; z-index:0 }
.phead-foto::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(100deg, rgba(29,52,57,.95) 0%, rgba(29,52,57,.88) 40%,
rgba(29,52,57,.58) 100%) }
.phead-foto > .wrap{ position:relative; z-index:2; width:100% }
.phead-foto .crumbs{ color:rgba(255,255,255,.68) }
.phead-foto .crumbs a:hover{ color:#fff }
.phead-foto .crumbs span{ color:#fff }
.phead-foto h1{ color:#fff }
.phead-foto .intro{ color:rgba(255,255,255,.88); max-width:56ch }
/* ================================================================
14. FORMULIER
================================================================ */
.form-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:clamp(30px,4vw,72px); align-items:start }
/* Zonder kop begon het formulier koud bij het label VOORNAAM. Deze kop geeft de
kolom een begin en zegt meteen welke velden echt nodig zijn. */
.frm-kop{ margin-bottom:clamp(26px,3vw,36px) }
.frm-kop h2{ font-size:clamp(1.5rem,2.2vw,1.95rem) }
.frm-kop p{ margin-top:12px; max-width:52ch; color:var(--body) }
.frm{ display:grid; gap:22px }
.frm .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
/* Veldnamen in gewone schrijfwijze. Kapitalen met letterruimte geven élk label evenveel
gewicht als een kop, en dan oogt een formulier van dertien velden als een formulier. */
.f label, .fset > legend{ display:block; font-size:.92rem; font-weight:500; letter-spacing:0;
text-transform:none; color:var(--ink); margin-bottom:8px }
.f label .opt, .fset > legend .opt{ font-weight:400; letter-spacing:0; text-transform:none; color:var(--body); font-size:.86rem }
.f input, .f textarea{ width:100%; font:inherit; font-size:1rem; color:var(--ink); background:#fff;
border:1px solid var(--line); padding:13px 15px;
transition:border-color .2s var(--e), box-shadow .2s var(--e) }
.f textarea{ min-height:132px; resize:vertical; line-height:1.55 }
.f input::placeholder, .f textarea::placeholder{ color:var(--body-2) }
.f input:hover, .f textarea:hover{ border-color:var(--line-2) }
.f input:focus, .f textarea:focus{ outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(193,153,125,.22) }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"]{ border-color:#B4443C; box-shadow:0 0 0 3px rgba(180,68,60,.13) }
.f .err{ display:none; margin-top:7px; font-size:.84rem; color:#B4443C }
.f input[aria-invalid="true"] ~ .err, .f textarea[aria-invalid="true"] ~ .err{ display:block }
.fset{ border:0 }
/* Genummerde stappen. Eén lange kolom velden leest als een formulier waar geen einde
aan komt; met drie koppen zie je meteen hoeveel er nog volgt. */
.stap{ border:0; padding:0; margin:0 }
.stap > legend{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 13px; padding:0;
margin-bottom:20px; font-size:clamp(1.05rem,1.5vw,1.2rem); font-weight:600;
letter-spacing:-.015em; text-transform:none; color:var(--ink) }
.stap > legend .opt{ font-size:.85rem; font-weight:400; letter-spacing:.01em;
text-transform:none; color:var(--body) }
.stap-n{ display:grid; place-items:center; width:27px; height:27px; flex:none;
border:1px solid var(--accent); color:var(--accent); background:transparent;
font-size:.88rem; font-weight:500; letter-spacing:0 }
.stap-b{ display:grid; gap:22px }
/* De scheidingslijn als pseudo-element, niet als border op het fieldset: een legend
valt in de inkeping van die border en dan loopt de lijn alleen rechts van de kop door. */
.stap + .stap{ position:relative; margin-top:12px; padding-top:30px }
.stap + .stap::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line) }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{ position:relative }
.chip input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.chip span{ display:block; padding:10px 15px; font-size:.9rem; font-weight:500; color:var(--ink);
background:#fff; border:1px solid var(--line); transition:all .18s var(--e) }
.chip input:hover + span{ border-color:var(--line-2) }
/* Aangevinkt was een dichtgekleurd donkergroen vlak. Op zeven keuzevakjes naast elkaar
werd dat een zwaar blok; nu een lichte wassing met een groene rand. */
.chip input:checked + span{ background:rgba(29,52,57,.055); border-color:var(--teal); color:var(--teal) }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }
.opts-radio{ display:grid; gap:8px }
.opts-radio .chip span{ display:flex; align-items:center; gap:11px; padding:13px 15px }
.opts-radio .chip span::before{ content:""; width:14px; height:14px; border:1px solid var(--line-2); flex:none;
transition:all .18s var(--e) }
.opts-radio .chip input:checked + span::before{ border-color:var(--accent); background:var(--accent);
box-shadow:inset 0 0 0 3px #fff }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.frm-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; padding-top:4px }
.frm-note{ font-size:.85rem; line-height:1.5; max-width:34ch }
.frm-status{ display:none; padding:13px 16px; font-size:.9rem; border-left:3px solid #B4443C; background:#FCF3F2; color:#8E332C }
.frm-status.on{ display:block }
.frm-done{ display:none; border:1px solid var(--line); border-top:3px solid var(--accent); padding:clamp(30px,3.4vw,48px); background:#fff }
.frm-done.on{ display:block }
.frm-done .tick{ width:44px; height:44px; background:var(--teal); color:#fff; display:grid; place-items:center; margin-bottom:20px }
.frm-done h2{ font-size:clamp(1.4rem,2vw,1.85rem) }
.frm-done p{ margin-top:12px; max-width:46ch }
.frm-done .tlink{ margin-top:22px }
.aside-card{ position:relative; background:var(--teal); color:var(--body-w); padding:clamp(26px,2.8vw,38px); overflow:hidden }
.aside-card::before{ content:""; position:absolute; inset:0; background:var(--slat); opacity:.5; pointer-events:none }
.aside-card > *{ position:relative; z-index:2 }
.aside-card + .aside-card{ margin-top:16px }
.aside-card.light{ background:var(--tint); color:var(--body) }
.aside-card.light::before{ display:none }
.aside-card h3{ font-size:1.28rem; color:#fff; margin-bottom:16px }
.aside-card.light h3{ color:var(--ink) }
.aside-card dl{ display:grid; gap:15px; font-size:.94rem }
.aside-card dt{ font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); margin-bottom:4px }
.aside-card dd{ color:rgba(255,255,255,.9); line-height:1.55 }
.aside-card.light dd{ color:var(--ink) }
.aside-card a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.3) }
.aside-card a:hover{ text-decoration-color:var(--accent) }
.aside-card.light a{ text-decoration-color:var(--line) }
.aside-card .btn{ width:100%; margin-top:20px }
.aside-card ul{ display:grid; gap:10px; margin-top:4px; font-size:.93rem }
.aside-card ul li{ display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start }
.aside-card ul svg{ margin-top:5px; color:var(--accent); flex:none }
/* ================================================================
CIJFERS — smalle band met vier harde getallen
Bewust géén kaartjes met schaduw: het is een regel feiten, geen dashboard.
================================================================ */
.cijfers{ background:var(--tint); border-block:1px solid var(--line) }
.cijfers ul{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:clamp(20px,3vw,52px) }
.cijfers li{ position:relative; padding-block:clamp(30px,3.4vw,48px) }
.cijfers li + li::before{ content:""; position:absolute; top:0; bottom:0;
left:calc(clamp(20px,3vw,52px) / -2); width:1px; background:var(--line) }
.cijfers .n{ display:block; font-family:var(--display); font-weight:600;
font-size:clamp(2.1rem,3.4vw,3.1rem); line-height:1; letter-spacing:-.035em;
color:var(--accent) }
.cijfers .n em{ font-style:normal; font-size:.62em; letter-spacing:0 }
.cijfers .t{ display:block; margin-top:10px; font-size:.92rem; line-height:1.45;
color:var(--body); max-width:20ch }
/* ================================================================
REVIEWS — echte Google-recensies
================================================================ */
.reviews{ background:#fff }
.rev-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
gap:clamp(24px,4vw,70px); align-items:end; margin-bottom:clamp(34px,4vw,58px) }
.rev-head h2{ margin-top:20px }
.rev-score{ display:grid; grid-template-columns:auto 1fr; gap:4px clamp(14px,1.6vw,22px);
align-items:center; padding:clamp(20px,2.2vw,28px); background:var(--tint);
border-left:2px solid var(--accent) }
.rev-cijfer{ grid-row:1 / span 2; font-family:var(--display); font-weight:600;
font-size:clamp(2.4rem,3.4vw,3.2rem); line-height:.9; letter-spacing:-.04em;
color:var(--accent) }
.rev-sterren{ display:flex; gap:3px; align-self:end }
.rev-sterren svg{ width:16px; height:15px; fill:var(--accent); flex:none }
.rev-sterren.klein svg{ width:13px; height:12px }
/* de sterren in de score staan naast het cijfer en lijnen onderaan uit; in een
kaart is de kaart zelf een kolom, en dan duwt datzelfde align-self ze naar
rechts. Daar horen ze gewoon links te beginnen. */
.rev-kaart .rev-sterren{ align-self:flex-start }
.rev-bron{ font-size:.88rem; line-height:1.45; color:var(--body); align-self:start }
.rev-bron b{ color:var(--ink); font-weight:600 }
.rev-score .tlink{ grid-column:1 / -1; margin-top:14px; justify-self:start; font-size:.92rem }
.rev-lijst{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px) }
.rev-kaart{ display:flex; flex-direction:column; padding:clamp(22px,2.2vw,30px);
background:#fff; border:1px solid var(--line) }
.rev-kaart blockquote{ margin-top:14px; font-size:.95rem; line-height:1.6; color:var(--ink) }
.rev-kaart blockquote::before{ content:"\201C" }
.rev-kaart blockquote::after{ content:"\201D" }
.rev-naam{ margin-top:auto; padding-top:16px; font-size:.88rem; font-weight:600; color:var(--ink) }
.rev-naam span{ font-weight:400; color:var(--body) }
@media (max-width:1080px){
.rev-head{ grid-template-columns:1fr; align-items:start }
.rev-lijst{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:1180px){
.cijfers ul{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0 }
.cijfers li + li::before{ display:none }
.cijfers li:nth-child(even)::before{ display:block }
.cijfers li:nth-child(n+3){ border-top:1px solid var(--line); padding-top:clamp(24px,3vw,34px) }
}
@media (max-width:700px){
.cijfers ul{ grid-template-columns:1fr }
.cijfers li::before{ display:none !important }
.cijfers li{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline;
column-gap:16px; padding:18px 0 !important; border-top:1px solid var(--line) }
.cijfers li:first-child{ border-top:0 }
.cijfers .n{ font-size:2.2rem }
.cijfers .t{ margin-top:0; max-width:none; font-size:.96rem }
.rev-lijst{ grid-template-columns:1fr }
.rev-score{ padding:20px 18px }
}
/* ================================================================
JURIDISCHE PAGINA'S — voorwaarden en privacy
Twintig artikelen achter elkaar is geen leesvoer maar een naslagwerk.
Daarom een smalle kolom, een inhoudsopgave bovenaan en per artikel een
duidelijke kop, zodat iemand kan zoeken in plaats van lezen.
================================================================ */
.juridisch{ max-width:46rem }
.jur-kop{ padding-bottom:clamp(22px,2.4vw,32px); border-bottom:1px solid var(--line) }
.jur-kop h2{ font-size:clamp(1.4rem,2vw,1.85rem) }
.jur-kop p{ margin-top:10px; font-size:.95rem }
.jur-kop a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
text-decoration-color:var(--line-2) }
.jur-kop a:hover{ color:var(--accent); text-decoration-color:var(--accent) }
.jur-datum{ font-size:.86rem; color:var(--body) }
.jur-index{ margin-top:clamp(26px,3vw,38px); padding:clamp(22px,2.4vw,30px);
background:var(--tint); border-left:2px solid var(--accent) }
.jur-index h3{ font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
color:var(--accent); margin-bottom:14px }
.jur-index ol{ counter-reset:jur; display:grid; gap:2px }
.jur-index li{ counter-increment:jur }
.jur-index a{ display:block; padding:5px 0; font-size:.95rem; color:var(--ink);
text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
transition:text-decoration-color .2s var(--e), color .2s var(--e) }
.jur-index a:hover{ color:var(--accent); text-decoration-color:var(--accent) }
.jur-art{ margin-top:clamp(32px,3.4vw,48px); scroll-margin-top:120px }
.jur-art h3{ font-size:clamp(1.08rem,1.5vw,1.28rem); padding-bottom:12px;
border-bottom:1px solid var(--line); margin-bottom:16px }
.jur-art p{ font-size:.96rem; line-height:1.68 }
.jur-art a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
@media (max-width:700px){
.jur-index{ padding:20px 18px }
.jur-art p{ font-size:.94rem }
}
/* ================================================================
PARTNERPROGRAMMA
De pagina kreeg op 20-08-2026 de tekst van de klant zelf, en die bestaat
grotendeels uit opsommingen: veertien soorten organisaties, tien onderdelen
van het traject en vijftien redenen om partner te worden. Drie keer dezelfde
vinklijst onder elkaar leest als een offerte, dus elke lijst heeft hier een
eigen vorm gekregen: losse namen in kolommen, vinkjes in twee kolommen, en
de redenen verdeeld over twee tegels.
================================================================ */
/* de ondertitel in de paginakop is een h2, want dat vraagt de tekstopzet van
de klant. Zonder deze regel krijgt hij de koptekstmaat en staat hij groter
dan de h1 eronder. Kleur komt van .phead-foto .intro, dus niet hier zetten. */
.phead h2.intro{ font-size:clamp(1.02rem,1.4vw,1.24rem); font-weight:400;
letter-spacing:0; line-height:1.55 }
/* de belofte in het kort, direct onder de ondertitel. De klant wil dat een
bezoeker dit binnen vijf seconden gelezen heeft, dus staat hij in de kop en
niet pas in de eerste tekstsectie. */
.phead-foto .pitch{ margin-top:14px; max-width:62ch; font-size:.97rem; line-height:1.6;
color:rgba(255,255,255,.8) }
.phead .acts{ margin-top:26px }
/* knoppenrij in een gewone tekstkolom, zelfde ritme als .hero-acts */
.acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
/* De klant leverde deze kop als volzin aan: "U brengt ons in contact met de
klant of het project. Wij verzorgen de rest." Op de gewone kopmaat wordt dat
vijf regels in een kolom van 620px. Een slag kleiner past hij in twee. */
.p-partnerprogramma h2.lang{ font-size:clamp(1.6rem,2.4vw,2.15rem); line-height:1.24 }
/* de veertien soorten organisaties: alleen namen, dus geen vinkje en geen
uitleg. Een streepje in messing houdt de kolommen aan elkaar geregen. */
.namen{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
gap:0 clamp(20px,2.6vw,52px); margin-top:clamp(28px,3.2vw,50px);
border-top:1px solid var(--line) }
.namen li{ display:flex; align-items:center; gap:12px; padding:14px 2px;
border-bottom:1px solid var(--line); font-size:.97rem; color:var(--ink) }
.namen li::before{ content:""; width:14px; height:1px; background:var(--accent); flex:none }
.namen-slot{ max-width:66ch; margin-top:clamp(22px,2.4vw,34px); font-size:1rem }
/* .checks is gebouwd voor de donkere .spec-band: witte tekst op witte lijnen.
Op een lichte ondergrond zijn beide onzichtbaar, vandaar deze variant. */
.checks.licht{ border-top-color:var(--line) }
.checks.licht li{ color:var(--body); border-bottom-color:var(--line) }
/* Twee gelijke kolommen liepen niet in de pas met de sectiekop erboven: die
staat op 1fr / .78fr, dus de rechterkolom vinkjes begon een stuk links van
de tekst erboven. Zelfde raster en zelfde tussenruimte als .sec-head, dan
staan de tweede kolom en de inleidende tekst op dezelfde lijn. */
.checks.twee{ column-gap:clamp(24px,4vw,70px) }
@media (min-width:760px){
.checks.twee{ grid-template-columns:minmax(0,1fr) minmax(0,.78fr) }
}
/* de zes productgroepen zijn geen vinklijst maar zes vakjes met een grotere
letter, elk een doorverwijzing naar de eigen productpagina. Ze tillen bij
aanwijzen licht op, meer beweging hoeft niet. */
.werkvakken{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(10px,1.1vw,14px); margin:clamp(26px,2.8vw,38px) 0 clamp(28px,3vw,40px) }
.werkvakken a{ display:flex; align-items:center; justify-content:space-between; gap:14px;
min-height:64px; padding:16px 20px; border:1px solid var(--line-w);
font-family:var(--display); font-weight:500; font-size:1.04rem;
letter-spacing:-.018em; line-height:1.25; color:#fff;
background:rgba(255,255,255,.03);
transition:transform .3s var(--e-o), border-color .3s var(--e), background .3s var(--e) }
.werkvakken svg{ flex:none; color:var(--accent); opacity:.65; transition:opacity .3s var(--e), transform .3s var(--e-o) }
.werkvakken a:hover{ transform:scale(1.025); border-color:var(--accent); background:rgba(255,255,255,.07) }
.werkvakken a:hover svg{ opacity:1; transform:translateX(3px) }
@media (max-width:520px){ .werkvakken{ grid-template-columns:1fr } }
/* de lijst in een tegel staat normaal als kleine pilletjes, en dat werkt voor
drie trefwoorden. Hier staan er tien van een halve regel, dus onder elkaar. */
.tile ul.punten{ display:block; margin:24px 0 0 }
.tile ul.punten li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
padding:13px 0; border:0; border-bottom:1px solid var(--line);
font-size:.95rem; font-weight:400; line-height:1.5; color:var(--body) }
.tile ul.punten li:last-child{ border-bottom:0 }
.tile ul.punten svg{ margin-top:5px; color:var(--accent); flex:none }
.tile.dark ul.punten li{ border-bottom-color:var(--line-w); color:var(--body-w) }
/* de rechtertegel heeft vijf regels tegen tien links. Met margin-top:auto zakt
deze slotregel naar de onderkant en staan beide tegels even vol. */
.tile-slot{ margin-top:auto; padding-top:24px; border-top:1px solid var(--line-w);
font-size:.95rem }
/* Vijf regels die allemaal met "Geen" beginnen krijgen geen vinkje: een vinkje
voor "Geen extra personeel nodig" leest als een dubbele ontkenning. Alleen
een streepje in messing, zoals bij de kolomlijst hierboven. */
.tile ul.punten.kaal li{ grid-template-columns:auto 1fr; gap:14px; align-items:baseline }
.tile ul.punten.kaal li::before{ content:""; width:14px; height:1px; background:var(--accent);
transform:translateY(-4px) }
/* ---------- ritme van deze pagina ----------
De secties staan hier dichter op elkaar dan elders op de site. De pagina is
lang en bestaat grotendeels uit opsommingen; met de standaardafstand van
168px viel er tussen twee lijsten een gat van vijf centimeter. */
.p-partnerprogramma .sec{ padding:clamp(46px,4.9vw,78px) 0 }
.p-partnerprogramma .stmt{ padding:clamp(44px,4.4vw,72px) 0 }
.p-partnerprogramma .sec-head{ margin-bottom:clamp(26px,2.8vw,40px) }
/* de vier stappen: het grote cijfer stond rechtsboven half over de kop heen.
Nu staat het gewoon in de kolom, met het messing streepje erboven en lucht
tussen cijfer en kop. */
.p-partnerprogramma .step{ padding-top:24px }
.p-partnerprogramma .step .no{ position:static; display:block; margin-bottom:16px;
font-size:clamp(2.4rem,3.2vw,3.5rem); line-height:1 }
/* het slotblok stond in twee kolommen, waardoor de knoppen halverwege de tekst
zweefden. Nu loopt de kop over de volle breedte en staan tekst en knoppen
er gewoon onder. */
.cta-breed h2{ max-width:none }
.cta-breed p{ max-width:64ch }
.cta-breed .cta-acts{ margin-top:clamp(26px,3vw,38px) }
@media (max-width:700px){
.namen{ grid-template-columns:1fr }
.acts .btn{ flex:1 1 100% }
/* De USP-band is op de homepage een statement: één kolom, gecentreerd, letters
van 1,5rem. Hier draagt hij de vier punten die een bezoeker in vijf seconden
moet zien, en dan kostte dat op een telefoon anderhalf scherm. Zelfde band,
compacter gezet: links uitgelijnd, kleiner icoon, kop op leesmaat. */
.p-partnerprogramma .usp li{ padding:22px 0 !important; text-align:left }
.p-partnerprogramma .usp .ic{ margin:0 0 10px }
.p-partnerprogramma .usp .ic svg{ width:26px; height:26px }
.p-partnerprogramma .usp b{ font-size:1.12rem; margin-bottom:5px }
.p-partnerprogramma .usp p{ font-size:.94rem; max-width:42ch; margin-inline:0 }
}
/* ================================================================
BROCHURES
De kaarten staan er nog niet in, de pdf's komen later van de klant. De opmaak
staat er wel, zodat het invullen straks alleen html kost. Een brochurekaart is
bewust géén .card: die stuurt naar een pagina, deze levert een bestand. Het
pijltje wijst daarom omlaag en de bestandsgrootte staat erbij.
================================================================ */
.broch{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px) }
.broch:empty{ display:none }
.broch a{ display:flex; flex-direction:column; height:100%; border:1px solid var(--line);
background:#fff; transition:border-color .3s var(--e), transform .3s var(--e-o) }
.broch a:hover{ border-color:var(--accent); transform:translateY(-3px) }
.broch-fig{ display:block; overflow:hidden; aspect-ratio:4 / 3 }
.broch-fig img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e-o) }
.broch a:hover .broch-fig img{ transform:scale(1.04) }
.broch-b{ display:flex; flex-direction:column; flex:1; padding:clamp(20px,2vw,28px) }
.broch-b h3{ font-size:1.18rem }
.broch-b p{ margin-top:9px; font-size:.94rem; line-height:1.55; color:var(--body) }
.broch-go{ display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:18px;
font-size:.9rem; font-weight:500; color:var(--accent) }
.broch-go em{ font-style:normal; color:var(--body); font-weight:400 }
.broch-go svg{ margin-left:auto }
/* Meldingsblok zolang er nog geen brochures zijn. Weghalen zodra ze er staan. */
.melding{ display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2vw,28px);
align-items:start; padding:clamp(26px,3vw,44px); background:var(--tint);
border:1px solid var(--line) }
.melding-ic{ display:grid; place-items:center; width:52px; height:52px;
border:1px solid var(--accent); color:var(--accent) }
.melding h3{ font-size:1.24rem }
.melding p{ margin-top:10px; max-width:62ch }
.melding .tlink{ margin-top:16px }
@media (max-width:900px){ .broch{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){
.broch{ grid-template-columns:1fr }
.melding{ grid-template-columns:1fr; gap:18px }
}
/* ================================================================
REVEAL
================================================================ */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--e-o), transform .7s var(--e-o); transition-delay:var(--d,0s) }
.rv.in{ opacity:1; transform:none }
/* ================================================================
RESPONSIVE — vier tredes
1180 van vier naar twee kolommen in de brede rasters
1080 de navigatie past niet meer: uitklapmenu, en de blogkaarten
en de voettekst gaan een trede terug
900 TABLET STAAND. Hier houden de twee-koloms secties op:
hero, boorvrij, advies, cta en het formulier gaan onder elkaar
700 TELEFOON
De ondergrens staat bewust op 700 en niet op 760. Een iPad Mini staand is
744px breed en viel daarmee in het telefoonblok: één kolom kaarten van 680px,
een hero met de tekst over de foto, en een homepagina van 13.000px in plaats
van 10.500px. Alles tussen 700 en 1080 hoort een tablet te zijn.
================================================================ */
@media (max-width:1180px){
.mosaic{ grid-template-columns:repeat(2,1fr) }
.card:nth-child(n){ margin-top:0 }
.card:nth-child(even){ margin-top:clamp(24px,4vw,54px) }
/* twee kolommen: alleen nog een lijn tussen links en rechts, en een
horizontale lijn boven de onderste rij */
.usp ul{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0 }
.usp li + li::before{ display:none }
.usp li:nth-child(even)::before{ display:block; left:calc(var(--usp-gap) / -2) }
.usp li:nth-child(n+3){ border-top:1px solid var(--line-w); padding-top:clamp(26px,3vw,38px) }
.steps{ grid-template-columns:1fr 1fr; gap:34px 26px }
.ft-top{ grid-template-columns:1fr 1fr 1fr }
}
@media (max-width:1080px){
.nav, .hdr-act .btn{ display:none }
.burger, .hdr-tel{ display:flex }
/* Zes stappen bleven hier op drie kolommen staan, want .steps.zes weegt
zwaarder dan .steps. Vanaf hier volgen ze gewoon de rest. */
.steps.zes, .steps.drie{ grid-template-columns:1fr 1fr }
/* Blogkaarten sprongen van drie kolommen ineens naar één, met beelden van
740px breed op een tablet. Twee is hier de maat. */
.posts{ grid-template-columns:repeat(2,1fr) }
/* het merkblok over de volle breedte, de linklijsten er in drieën onder */
.ft-top{ grid-template-columns:repeat(3,1fr) }
.ft-brand{ grid-column:1 / -1 }
}
/* ================================================================
TABLET STAAND — iPad mini, 10.2", Air en Pro staand (744 t/m 1024px)
Tot hier blijven de secties met een beeld naast de tekst twee kolommen.
Daaronder is de tekstkolom te smal en gaat alles onder elkaar.
================================================================ */
@media (max-width:900px){
.hero{ grid-template-columns:1fr }
.hero-copy{ padding:clamp(36px,7vw,60px) var(--gut) }
/* eerst de kop en de tekst, daarna pas het beeld. Zonder bovengrens werd de
foto op een tablet bijna 600px hoog en duwde hij alles onder de vouw. */
.hero-media{ min-height:min(66vw,470px) }
.sec-head{ grid-template-columns:1fr; gap:22px; align-items:start }
.spec .grid, .advies .grid{ grid-template-columns:1fr }
.spec-fig{ order:2 } /* eerst de tekst, dan pas het beeld met het garantieblok */
.stack{ order:2 } /* idem bij de advies-sectie */
.proof{ right:0; bottom:-18px }
.cta .grid{ grid-template-columns:1fr; align-items:start }
.form-grid{ grid-template-columns:1fr }
/* De topbalk draagt een adreszin van tachtig tekens plus vier links. Naast
elkaar past dat hier niet meer op één regel van 40px, en de links staan
allemaal ook in het uitklapmenu. */
.topbar-l, .topbar-r a:not(.tel), .topbar .taal{ display:none }
.topbar .wrap{ justify-content:center }
/* nu het nummer alleen staat mag het de hele balkhoogte als raakvlak nemen */
.topbar .tel{ display:block; padding-block:10px }
.ft-top{ grid-template-columns:1fr 1fr; gap:26px 20px }
.ft-top > div:last-child{ grid-column:1 / -1 }
}
/* ================================================================
MOBIEL — één doorlopend blok, in de volgorde van de pagina
Herzien na de mobiele feedbackronde van 28-07.
================================================================ */
@media (max-width:700px){
body{ font-size:16px }
.sec{ padding:clamp(62px,11vw,88px) 0 }
/* zinsdeel dat alleen op een groot scherm meeloopt, zie de hero-tekst */
.m-hide{ display:none }
/* de balk is hierboven al teruggebracht tot het telefoonnummer */
.topbar .tel{ font-size:.85rem }
/* ---------- HERO: de foto is de achtergrond, alles staat erop ----------
Tekst en beeld liggen in dezelfde rasterkcel. Het beeld ligt onderop
(eigen stapelcontext op z-index 0), de tekstkolom eroverheen op 3. */
.hero{ position:relative; grid-template-columns:1fr; background:#fff;
min-height:74vh; min-height:min(74svh,660px) }
.hero > *{ grid-area:1 / 1 }
.hero-media{ min-height:0; z-index:0 }
/* WITTE SLUIER, GEEN DONKERE.
Op desktop is de hero een witte sectie met de foto ernaast. Op mobiel past
die foto onder de tekst niet meer, dus ligt hij eronder met een witte sluier
erover. Zo blijft het één lichte sectie met dezelfde tekstkleuren als op
desktop, in plaats van een tweede donkergroen vlak boven de USP-balk.
De sluier loopt naar onderen dicht, want daar staat de tekst. */
.hero-media::after{
inset:0; height:auto;
background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.74) 34%,
rgba(255,255,255,.94) 66%, rgba(255,255,255,.97) 100%);
}
/* tekst iets hoger in de sectie: bovenaan bleef te veel leegte staan */
.hero-copy{ position:relative; z-index:3; justify-content:flex-end;
padding:clamp(70px,20vw,120px) var(--gut) clamp(60px,15vw,88px) }
.hero h1{ font-size:clamp(2.2rem,8.8vw,2.9rem) }
.hero-brandline{ margin-bottom:15px }
.hero-copy p.sub{ font-size:1.06rem; margin-top:14px; max-width:34ch }
.hero-acts{ margin-top:26px; gap:10px }
/* het bijschrift bij de slideshow vervalt: de tekst staat nu op de foto zelf */
.hero-cap, .hero-ticks{ display:none }
/* ---------- USP-balk: onder elkaar, gecentreerd, grotere titels ---------- */
.usp ul{ grid-template-columns:1fr }
.usp li::before{ display:none !important }
.usp li{ padding:30px 0 !important; border-top:1px solid var(--line-w); text-align:center }
.usp li:first-child{ border-top:0 }
.usp .ic{ margin:0 auto 14px }
.usp .ic svg{ width:34px; height:34px }
.usp b{ font-size:1.5rem; margin-bottom:10px }
.usp p{ font-size:1rem; line-height:1.55; max-width:30ch; margin-inline:auto }
/* ---------- STATEMENT ----------
Het schaduwwoord staat in vw zodat het meeschaalt met het scherm: de
clamp-ondergrens van 9rem sneed op een telefoon de G en de r eraf. Bij
22,5vw is "Grandeur" ongeveer 98% van de schermbreedte, dus het raakt
links en rechts net de rand zonder erover te vallen (.stmt snijdt af).
Het staat lager dan op desktop, zodat het achter de beschrijving valt en
niet in het gat tussen de kop en de tekst. */
.stmt{ padding:clamp(52px,10vw,84px) 0 }
.stmt .ghost{ font-size:22.5vw; top:64%; color:rgba(29,52,57,.05) }
.stmt .rule{ height:34px; margin-bottom:16px }
.stmt h2{ font-size:1.82rem; max-width:none }
.stmt p{ font-size:.95rem; line-height:1.62; margin-top:18px }
/* ---------- ASSORTIMENT: kaarten die zichtbaar aantikbaar zijn ----------
Op een touchscreen bestaat geen hover, dus de pijl die op desktop bij
hover verschijnt zegt hier niets. In plaats daarvan is elke kaart een
omkaderd blok met onderin een echte balk "Bekijken" en een messing
pijlvlak. Dat leest als een knop en beslaat de volle kaartbreedte. */
.mosaic{ grid-template-columns:1fr; gap:18px }
.card:nth-child(n){ margin-top:0 }
.card{ background:#fff; border:1px solid var(--line) }
.card .rev{ aspect-ratio:3/2 }
.card .badge{ width:46px; height:46px }
.card .arw{ display:none }
.card-b{ padding:20px 20px 0 }
.card p{ margin-top:8px }
.card .tags{ padding:12px 0 16px; border-top:1px solid var(--line) }
.card-go{
display:flex; align-items:center; justify-content:space-between; align-self:stretch;
width:calc(100% + 40px); margin:0 -20px; padding:0 0 0 20px;
border-top:1px solid var(--line); border-bottom:0; font-size:.97rem; color:var(--ink);
}
.card-go svg{ width:16px; height:12px; padding:16px 19px; box-sizing:content-box;
background:var(--brass-ink); color:#fff }
.card:active{ background:var(--tint) }
/* ---------- BOORVRIJ ----------
De volgorde (eerst de tekst en de knop, dan pas het beeld met het
garantieblok) komt uit het 1080-blok hierboven via .spec-fig{order:2}. */
.spec .grid{ gap:30px }
/* het bewijsblok onder het beeld i.p.v. eroverheen, anders dekt het de foto af */
.proof{ position:static; max-width:none; width:100%; padding:18px 22px 19px }
/* ---------- WERKWIJZE: eerst het nummer, dan de stap ----------
Het schaduwcijfer rechtsboven werkt alleen in vier kolommen. Op één kolom
staat het cijfer vóór de titel, in messing zoals de grote getallen op de
site van het merk, met een haarlijn tussen de stappen. */
.steps, .steps.zes, .steps.drie{ grid-template-columns:1fr; padding-top:0; gap:0 }
.step{ padding:24px 0 0; display:grid; grid-template-columns:auto minmax(0,1fr);
column-gap:16px; align-items:start }
.step::before{ display:none }
.step + .step{ margin-top:24px; border-top:1px solid var(--line) }
.step .no{ position:static; grid-row:1 / span 2; font-size:2.5rem; line-height:1;
letter-spacing:-.03em; color:var(--accent); margin-top:-4px }
.step h3{ grid-column:2; font-size:1.14rem }
.step p{ grid-column:2; max-width:none; margin-top:7px }
/* ---------- INSPIRATIE: kaart plus een stukje van de volgende ---------- */
.insp{ padding:clamp(62px,11vw,88px) 0 }
.track{ grid-auto-columns:64vw }
.fig figcaption{ padding:34px 14px 13px; font-size:.94rem }
/* ---------- ADVIES: twee beelden naast elkaar i.p.v. groot onder elkaar ---------- */
.stack{ width:100%; padding:0; margin-top:30px;
display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start }
.stack .a::before{ display:none }
.stack .a .rev{ aspect-ratio:3/4 }
.stack .b{ position:relative; width:100%; margin:0; border:0 }
.stack .b img{ aspect-ratio:3/4 }
/* ---------- ZAKELIJK: compacter ---------- */
.duo{ grid-template-columns:1fr; gap:16px }
.tile{ padding:28px 22px }
.tile h3{ font-size:1.3rem }
.tile ul{ gap:6px; margin:18px 0 22px }
.tile ul li{ font-size:.75rem; padding:5px 10px }
.tile .btn{ width:100% }
/* ---------- CTA ---------- */
/* het schuine verloop dekt een smalle kolom niet, dus verticaal verlopen */
.cta::before{ background:linear-gradient(rgba(29,52,57,.94), rgba(29,52,57,.88)) }
.cta-info{ grid-template-columns:1fr; gap:18px }
/* ---------- FOOTER ----------
De kolomindeling (merkblok over de volle breedte, links in tweeën) staat
al in het 900-blok; hier alleen nog de krappere maatvoering. */
.ft{ padding:40px 0 18px }
.ft-top{ padding-bottom:24px }
.ft-brand p{ max-width:38ch }
.ft li{ margin-bottom:7px }
.posts{ grid-template-columns:1fr }
.ft-bot{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:16px }
.ft-bot > :last-child{ justify-self:center }
/* ---------- knoppen en formulier ----------
Een knop staat op nowrap, en op een scherm van 320px past "Meer over
boorvrije montage" daar niet meer op één regel. Een rasterkolom heeft
min-width:auto, dus die knop rekte zijn hele kolom op en duwde de tekst
en het beeld ernaast het scherm uit. Hier mag het opschrift dus afbreken,
en de kolommen mogen krimpen. */
.btn{ white-space:normal; text-align:center }
.spec .grid > *, .advies .grid > *, .cta .grid > *, .form-grid > *{ min-width:0 }
.hero-acts .btn, .cta-acts .btn, .frm-foot .btn{ flex:1 1 100% }
.frm .row{ grid-template-columns:1fr }
/* het plusteken staat rechts van de vraag, dus daar moet ruimte blijven; het
antwoord eronder heeft die inspringing niet nodig en wint zo tien tekens */
.antwoord{ padding-right:0 }
/* ---------- BLOG EN ARTIKEL ----------
Een alinea van veertien pixels afstand leest op een breed scherm prima,
maar in een kolom van 350px lopen de blokken in elkaar over. */
.artikel p{ margin-top:16px }
.artikel-lead{ font-size:1.08rem }
/* de kaart op het overzicht mag hetzelfde aantikbare blok zijn als elders */
.post .card-go{ margin-top:14px }
}
/* ================================================================
AANRAAKVLAKKEN — op wat u aanwijst, niet op hoe breed het scherm is
Met een vinger mikt u grover dan met een muis, en dat verandert niet zodra
u een tablet pakt in plaats van een telefoon. Dit stond eerst in het
telefoonblok, waardoor een iPad alles weer op muismaat kreeg: filterknoppen
van 40px, voetteksten van 22px en een kruimelpad van 19px.
Alles hieronder geeft hoogte zonder de tekstgrootte te raken, dus de
regelafstand in de lopende tekst blijft precies gelijk.
================================================================ */
@media (pointer:coarse){
.ft-top a{ display:inline-block; padding-block:5px }
.ft-top li{ margin-bottom:2px }
.ft-brand .nap a{ display:inline-block; padding-block:5px }
.crumbs a, .crumbs span{ display:inline-block; padding-block:4px }
.filter{ min-height:44px; padding:11px 16px }
.chip span{ min-height:44px; display:flex; align-items:center }
.opts-radio .chip span{ min-height:48px }
.macc-body a{ padding:13px 0 13px 16px }
.tlink, .alink, a.adr{ padding-bottom:8px }
.vragen .vraag > summary{ padding-block:20px }
.mnav-taal .taal button{ min-height:44px; padding:12px 15px }
}
@media (prefers-reduced-motion:reduce){
*{ animation-duration:.01ms !important; transition-duration:.01ms !important }
.rv{ opacity:1; transform:none }
.hero-copy > *, .hero-cap{ opacity:1; transform:none }
.hs img{ transform:none !important }
.slats{ display:none }
}