/* ==========================================================================
Psalm Spa Pedicure, Enschede
Richting: "Het heiligdom". Warm travertijn, bouclé-creme, walnoot en messing,
met de boog als terugkerende vorm (haar salon heeft er een, en Psalm 91 gaat
over een schuilplaats).
========================================================================== */
:root{
/* kleur */
--creme:#F7F2EA; /* papier, de basis */
--creme-diep:#EFE7DA; /* tweede lichte vlak */
--zand:#E4D6C1; /* travertijn */
--klei:#C9A78C; /* zachte terracotta, secundair */
--messing:#AC8450; /* accent, gedempt messing */
--messing-licht:#C9A470;
--inkt:#221A13; /* warm bijna-zwart */
--inkt-zacht:#3A2E23;
/* Stond op .58 en dat haalde het net niet: 4.09:1 op creme en 3.97:1 op
creme-diep, allebei onder de 4.5 die je nodig hebt. Op .70 is het 5.99 en
5.69, en het blijft duidelijk zachter dan de koppen. Gemeten 17 sep, de
lopende tekst boven "Lees het verhaal" was het voorbeeld. */
--mist:rgba(34,26,19,.70);/* lopende tekst op licht */
--mist-om:rgba(247,242,234,.68); /* lopende tekst op donker */
--lijn:rgba(34,26,19,.14);
--lijn-om:rgba(247,242,234,.18);
/* ruimte */
--pad:clamp(20px,5vw,72px);
--sectie:clamp(72px,10vw,140px);
--max:1320px;
--balk-h:38px;
--kop-h:clamp(64px,5.4vw,84px);
--topruimte:calc(var(--balk-h) + var(--kop-h));
/* vorm */
--boog:999px 999px 6px 6px / 46% 46% 4% 4%; /* de boogvorm */
--pil:999px;
--r:4px;
}
/* --- grondslag ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}
/* overflow-x:clip en niet hidden: hidden zet position:sticky uit */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){body{overflow-x:hidden}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
margin:0;
background:var(--creme);
color:var(--inkt);
font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:clamp(15.5px,1.02vw,17px);
font-weight:300;
line-height:1.72;
letter-spacing:.008em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.012em}
/* Het lichte korrelvlies over alles, haalt de digitale vlakheid eruit. */
body::after{
content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml;utf8,");
}
/* --- typografie ---------------------------------------------------------- */
.display{
font-family:"Fraunces","Times New Roman",serif;
font-weight:300;
font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
line-height:.98;
letter-spacing:-.022em;
}
.d1{font-size:clamp(44px,8.4vw,116px)}
.d2{font-size:clamp(34px,5.4vw,74px)}
.d3{font-size:clamp(25px,3vw,42px)}
.d4{font-size:clamp(20px,2vw,27px);line-height:1.18}
em,.cursief{font-style:italic;font-variation-settings:"SOFT" 80,"WONK" 1}
.label{
font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
color:var(--messing);margin:0 0 20px
}
.label--om{color:var(--messing-licht)}
.label span{display:inline-block}
.lead{font-size:clamp(16.5px,1.32vw,20px);line-height:1.66;color:var(--mist);max-width:56ch}
.lead--om{color:var(--mist-om)}
.klein{font-size:13.5px;letter-spacing:.02em;color:var(--mist)}
/* --- opmaakhulp ---------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sectie{padding-block:var(--sectie)}
.donker{background:var(--inkt);color:var(--creme)}
.donker .lead{color:var(--mist-om)}
.donker .klein{color:var(--mist-om)}
.zand{background:var(--creme-diep)}
.streep{height:1px;background:var(--lijn);border:0;margin:0}
.donker .streep{background:var(--lijn-om)}
/* --- knoppen ------------------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:12px;
padding:16px 30px;border-radius:var(--pil);border:1px solid var(--inkt);
background:var(--inkt);color:var(--creme);
font-size:13.5px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
line-height:1;cursor:pointer;position:relative;overflow:hidden;
transition:background .4s cubic-bezier(.22,1,.36,1),color .4s cubic-bezier(.22,1,.36,1),
border-color .4s,transform .5s cubic-bezier(.22,1,.36,1);
will-change:transform;
}
.btn .pijl{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.btn:hover{background:var(--messing);border-color:var(--messing);color:#fff}
.btn:hover .pijl{transform:translateX(5px)}
.btn:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.btn--licht{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
.btn--licht:hover{background:var(--messing-licht);border-color:var(--messing-licht);color:var(--inkt)}
.btn--leeg{background:transparent;color:var(--inkt);border-color:var(--lijn)}
.btn--leeg:hover{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.donker .btn--leeg{color:var(--creme);border-color:var(--lijn-om)}
.donker .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.btn--klein{padding:12px 22px;font-size:12px}
/* tekstlink met onderstreping die uitschuift */
.link{
display:inline-flex;align-items:center;gap:10px;position:relative;
font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;padding-bottom:6px;
}
.link::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:currentColor;transform-origin:right;transform:scaleX(1);
transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.link:hover::after{transform:scaleX(0)}
.link .pijl{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.link:hover .pijl{transform:translateX(5px)}
/* --- vaste bovenlaag: balk + kop ----------------------------------------- */
/* Buiten #smooth-wrapper, dus vast en niet sticky (sticky werkt niet in een
getransformeerde ScrollSmoother-container). */
.top{position:fixed;top:0;left:0;right:0;z-index:100}
.balk{
background:var(--inkt);color:var(--mist-om);
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
text-align:center;height:var(--balk-h);
display:flex;align-items:center;justify-content:center;gap:10px;
padding-inline:var(--pad);overflow:hidden;
transition:height .55s cubic-bezier(.76,0,.24,1),opacity .35s ease;
}
.balk b{color:var(--messing-licht);font-weight:400}
.balk span{opacity:.5}
.top.vast .balk{height:0;opacity:0}
.kop{
background:var(--creme);
border-bottom:1px solid transparent;
transition:border-color .5s ease,box-shadow .5s ease;
}
.top.vast .kop{border-bottom-color:var(--lijn);box-shadow:0 14px 34px -30px rgba(34,26,19,.7)}
/* Dekvlak boven de kop: zie dek() in app.js. Een gewoon element (geen fixed),
want vaste elementen worden op iOS 26 afgekapt boven de kop. Wordt alleen door
app.js toegevoegd, en alleen bij gewone scroll (telefoon). */
.kopdek{
position:absolute;left:0;top:0;width:100%;height:280px;
background:var(--creme);pointer-events:none;z-index:99;will-change:transform;
}
.kop__in{
display:flex;align-items:center;justify-content:space-between;gap:24px;
height:var(--kop-h);
width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
position:relative;
}
.merk{display:flex;align-items:baseline;gap:9px;line-height:1;color:var(--inkt)}
.merk__naam{font-family:"Fraunces",serif;font-size:clamp(19px,1.7vw,23px);letter-spacing:.01em;font-variation-settings:"SOFT" 40,"WONK" 1}
.merk__tag{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;opacity:.62}
.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav a{
position:relative;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--inkt);opacity:.78;transition:opacity .3s ease;padding-block:6px;
}
.nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--messing);
transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1}
.kop__cta{display:flex;align-items:center;gap:14px}
.kop .btn--nav{padding:12px 24px;font-size:11.5px}
/* hamburger */
.burger{
display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
align-items:center;justify-content:center;padding:0;margin-left:-11px;
}
.burger span{display:block;width:22px;height:1.4px;background:var(--inkt);position:relative}
.burger span::before,.burger span::after{
content:"";position:absolute;left:0;width:22px;height:1.4px;background:inherit;
transition:transform .45s cubic-bezier(.76,0,.24,1);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
/* uitschuifmenu */
.paneel{
/* display:none als vangnet (Robin, 10 nov 2026, #45921 en #3028): bij een
handvol demo's bleef dit paneel zichtbaar het hele scherm bedekken terwijl
clip-path en visibility zelf al correct op dicht stonden. Nooit helemaal
uitgezocht waarom; display:none kan niet half-zichtbaar renderen, dus dit
sluit de hele klasse fouten uit in plaats van de ene die we zagen. */
display:none;
position:fixed;inset:0;z-index:120;background:var(--inkt);color:var(--creme);
flex-direction:column;justify-content:center;
padding:calc(var(--pad) + 40px) var(--pad) var(--pad);
clip-path:inset(0 0 100% 0);visibility:hidden;
transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s,display 0s linear .8s;
}
.paneel.open{display:flex;clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s,display 0s}
/* Telefoon (gewone scroll): zie menu() in app.js. Gewone inhoud, geen fixed. */
.paneel.native{
position:absolute;inset:auto;left:0;right:0;top:0;width:100%;
padding:calc(300px + var(--pad) + 40px) var(--pad) calc(300px + var(--pad));
overscroll-behavior:contain;touch-action:none;
}
.paneel.native .paneel__sluit{top:calc(300px + 22px)}
.paneel__sluit{
position:absolute;top:22px;right:var(--pad);width:46px;height:46px;border:1px solid var(--lijn-om);
border-radius:var(--pil);background:transparent;cursor:pointer;display:grid;place-items:center;
transition:background .4s ease,border-color .4s ease;
}
.paneel__sluit:hover{background:rgba(247,242,234,.1);border-color:var(--creme)}
.paneel__sluit::before,.paneel__sluit::after{
content:"";position:absolute;width:17px;height:1.4px;background:var(--creme)
}
.paneel__sluit::before{transform:rotate(45deg)}
.paneel__sluit::after{transform:rotate(-45deg)}
.paneel nav{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,16px)}
.paneel nav a{
font-family:"Fraunces",serif;font-size:clamp(30px,8.6vw,46px);line-height:1.08;
font-variation-settings:"SOFT" 40,"WONK" 1;
display:flex;align-items:baseline;gap:14px;opacity:0;
}
.paneel nav a i{
font-style:normal;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.2em;
color:var(--messing-licht);
}
.paneel__cta{margin-top:clamp(24px,5vh,46px);opacity:0}
/* --- video achter de opening --------------------------------------------- */
/* De film liep eerst door tot en met de drie pijlers. Dat oogde goedkoop: een
halfdonker vlak met tekst erop terwijl de film er niets meer aan toevoegde.
Robin, 17 sep. Hij staat nu alleen achter de opening. Niet opnieuw doortrekken.
Geen position:fixed, want dat werkt niet binnen de ScrollSmoother-wrapper
(die transformeert zijn inhoud, en een transform maakt van fixed een gewone
absolute).
Terugdraaien: dit blok plus .opening.opening--film weg, en in bouw.py de
.doorloop-wrapper om de opening halen. */
.doorloop{position:relative;isolation:isolate}
.doorloop__film{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Niet position:sticky. Gemeten op 17 sep: binnen de ScrollSmoother-wrapper
schuift een sticky element gewoon mee omhoog, want de smoother verplaatst de
hele inhoud met een transform en dan is er voor de browser niets aan het
scrollen. Op telefoon (geen smoother) werkte sticky wel, dus het verschil
zat precies daar. Nu staat hij bovenaan het blok en verschuift app.js hem
met een scrub. Zonder JS blijft de film boven in beeld staan, ook goed. */
.doorloop__kleef{position:absolute;top:0;left:0;right:0;height:100svh;overflow:hidden}
.doorloop__film video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 42%;
}
/* Staat er een eigen foto achter de opening in plaats van de stockfilm, dan
hangt die in hetzelfde kader. Het brandpunt ligt rechts van het midden: daar
zit bij een close-up het oog, en links moet de kop vrij blijven. */
.doorloop__film picture{position:absolute;inset:0}
.doorloop__film picture img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:62% 46%;
}
/* De sluier maakt de film donker genoeg om creme tekst op te lezen. Bovenaan
het zwaarst, want daar staat de vaste kop. */
.doorloop__doek{
position:absolute;inset:0;
background:
linear-gradient(to bottom, rgba(24,17,11,.80) 0%, rgba(24,17,11,.40) 24%,
rgba(24,17,11,.50) 58%, rgba(24,17,11,.86) 100%),
rgba(24,17,11,.34);
}
.doorloop > section{position:relative;z-index:1}
/* De opening staat nu op de film: geen creme vlak, geen boog ernaast, tekst
over de volle breedte in plaats van in een halve kolom.
Let op de dubbele klasse in de selectors hieronder. Dit blok staat boven
`.opening` in het bestand, dus met alleen `.opening--film` (0,1,0) wint
`.opening{background:var(--creme)}` op volgorde en dan staat er crème tekst
op een crème vlak met de video onzichtbaar eronder. Gemeten op 17 sep. */
.opening.opening--film{background:transparent;color:var(--creme)}
/* min-height en align-items staan bewust achter min-width:981px. Zonder die
media query wint deze regel (drie klassen, specificiteit 0,3,0) altijd van
de mobiele .opening__in hieronder (een klasse, 0,1,0), media query of niet.
Zo bleef .opening op telefoon vaste `100svh - topruimte` hoog in plaats van
de bedoelde volle 100svh, en stak de vastgeplakte .doorloop__kleef (altijd
100svh) er onderaan overheen: de donkere film liep door in de pijlers.
Gemeten en gefixt 17 sep 2026, Beauty Sestra's (bleek ook al zo te staan op
de live psalm-spa). Mobiel zet grid-template-columns, align-items en
min-height zelf al, dus dit blok hoeft er op smalle schermen niet bij. */
@media (min-width:981px){
.opening.opening--film .opening__in{
grid-template-columns:1fr;
min-height:min(calc(100svh - var(--topruimte)),1000px);
align-items:end;
}
}
/* De kop stond in de oude opzet in een halve kolom, dus 116px kon daar. Op de
volle breedte van de film is dat te groot: hij liep op 1440 over zes regels
en schoot onder het scherm door. Kleiner, en de tekstkolom op ruim de helft. */
.opening.opening--film .opening__tekst{max-width:min(58ch,60vw)}
.opening.opening--film .d1{max-width:15ch;font-size:clamp(40px,5.6vw,84px)}
.opening.opening--film .opening__lead{color:rgba(247,242,234,.84);max-width:46ch}
.opening.opening--film .btn{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
.opening.opening--film .btn:hover{background:var(--messing-licht);border-color:var(--messing-licht)}
.opening.opening--film .btn--leeg{background:transparent;color:var(--creme);border-color:rgba(247,242,234,.45)}
.opening.opening--film .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.opening.opening--film .scrolhint{color:rgba(247,242,234,.7)}
.opening.opening--film .scrolhint i{background:rgba(247,242,234,.35)}
/* Een foto van echt werk is lichter en onrustiger dan een stockfilm: huid,
wimpers en hoge lichten lopen door de tekst heen. Daarom alleen onder
.opening--beeld een zwaardere kop en volle creme in plaats van doorzichtig.
Een film-hero zonder eigen foto verandert hier niet van. */
.opening.opening--beeld .d1{font-weight:600;color:var(--creme);text-shadow:0 2px 26px rgba(24,17,11,.45)}
.opening.opening--beeld .opening__lead{color:var(--creme);text-shadow:0 1px 16px rgba(24,17,11,.5)}
.opening.opening--beeld .label{color:var(--creme);text-shadow:0 1px 14px rgba(24,17,11,.5)}
/* Het bijschrift rechtsboven benoemt wat er op de foto staat. .opening__in is
zelf niet positioned, dus die moet hier een containing block worden, anders
springt het bijschrift naar de .opening eromheen. right/top gaan tegen de
padding-box, dus de gutter moet er met de hand bij. */
.opening.opening--beeld .opening__in{position:relative}
.beeldkaart{
position:absolute;right:var(--pad);top:clamp(10px,3vh,38px);
margin:0;text-align:right;z-index:2;
font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);
text-shadow:0 1px 14px rgba(24,17,11,.55);
}
.beeldkaart span{font-weight:600}
.beeldkaart b{
display:block;margin-top:6px;font-family:"Fraunces","Times New Roman",serif;
font-weight:600;font-size:26px;letter-spacing:0;text-transform:none;line-height:1.1;
}
/* Op smal valt het bijschrift over de kop heen, en daar is de foto zelf al
het bewijsstuk. Dus weg ermee onder 860px. */
@media (max-width:860px){.beeldkaart{display:none}}
/* --- opening (hero) ------------------------------------------------------ */
.opening{
position:relative;
padding-top:var(--topruimte);
background:var(--creme);
overflow:hidden;
}
.opening__in{
width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,72px);align-items:center;
min-height:min(calc(100svh - var(--topruimte)),1000px);
padding-block:clamp(30px,5vh,72px);
}
.opening__tekst{position:relative;z-index:2}
.opening .d1{margin:0 0 26px;max-width:13ch}
/* SplitText zet elke regel in een .rgl-doosje met overflow, zodat hij er
onderuit kan komen zonder de regel erboven te raken. */
/* SplitText zet elke regel in zo'n doosje om hem van onderaf te laten opkomen.
De padding geeft de staarten van g, j en y ruimte, de negatieve marge haalt
die ruimte er weer af zodat de regelafstand niet verandert. */
.rgl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rgl > *{display:block}
.opening__lead{margin:0 0 36px;max-width:42ch}
.opening__knoppen{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* de boog met het beeld erin */
.boog{
position:relative;border-radius:var(--boog);overflow:hidden;
aspect-ratio:3/4;max-height:min(74vh,760px);margin-inline:auto;width:100%;
background:var(--zand);
}
.boog img{width:100%;height:100%;object-fit:cover;will-change:transform}
.boog__rand{
position:absolute;inset:0;pointer-events:none;border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(247,242,234,.34);
}
/* Een warme sluier over het beeld. Op desktop staat hij uit; op telefoon vult
het beeld het hele scherm en moet de tekst er leesbaar op staan. De sluier
is onderaan het zwaarst, precies waar de kop en de knoppen staan. */
.boog__doek{
position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;
background:linear-gradient(to top,
rgba(24,17,11,.94) 0%, rgba(24,17,11,.88) 20%, rgba(24,17,11,.6) 34%,
rgba(24,17,11,.22) 52%, rgba(24,17,11,.06) 74%, rgba(24,17,11,.14) 100%);
}
.opening__boog{position:relative}
/* de messing lijn die de boog natekent */
.boogsvg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);pointer-events:none;overflow:visible}
.boogsvg path{fill:none;stroke:var(--messing);stroke-width:1;opacity:.6}
/* het zwevende kaartje bij de boog */
.zwever{
position:absolute;left:clamp(-10px,-2vw,-34px);bottom:clamp(18px,4vw,42px);
background:var(--creme);border:1px solid var(--lijn);border-radius:var(--r);
padding:16px 20px;max-width:220px;box-shadow:0 22px 50px -28px rgba(34,26,19,.5);
}
.zwever b{display:block;font-family:"Fraunces",serif;font-size:19px;font-weight:400;margin-bottom:2px}
.zwever span{font-size:12px;letter-spacing:.06em;color:var(--mist);line-height:1.45;display:block}
.scrolhint{
position:absolute;left:var(--pad);bottom:22px;display:flex;align-items:center;gap:12px;
font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);z-index:3;
}
.scrolhint i{display:block;width:44px;height:1px;background:var(--lijn);position:relative;overflow:hidden}
.scrolhint i::after{
content:"";position:absolute;inset:0;background:var(--messing);
animation:veeg 2.6s cubic-bezier(.76,0,.24,1) infinite;
}
@keyframes veeg{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
/* --- pijlers (waarom) ---------------------------------------------------- */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.pijler{border-top:1px solid var(--lijn);padding-top:26px}
.pijler__nr{
font-family:"Fraunces",serif;font-size:12px;letter-spacing:.2em;color:var(--messing);
display:block;margin-bottom:16px;
}
.pijler h3{font-family:"Fraunces",serif;font-size:clamp(20px,1.7vw,25px);margin-bottom:10px;font-variation-settings:"SOFT" 40,"WONK" 1}
.pijler p{margin:0;font-size:15px;color:var(--mist);line-height:1.65}
/* --- behandelingen ------------------------------------------------------- */
.dienstenkop{
display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
margin-bottom:clamp(34px,4vw,56px);
}
.dienstenkop>div{min-width:0}
.dienstenkop h2{max-width:none;text-wrap:balance}
@media (max-width:760px){.dienstenkop h2{max-width:16ch}}
/* --- één uitgelichte behandeling op de home ------------------------------ */
/* De home liet eerst alle zeven behandelingen in een raster zien. "Veel te vol"
(Robin, 17 sep). Nu staat er één groot, met de doorverwijzing naar de pagina
met alle zeven. Het raster hieronder blijft in gebruik op behandelingen.html. */
.uit{
display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
background:var(--creme);border:1px solid var(--lijn);border-radius:var(--r);
overflow:hidden;
transition:border-color .5s ease,box-shadow .6s ease;
}
.uit:hover{border-color:rgba(172,132,80,.5);box-shadow:0 34px 70px -44px rgba(34,26,19,.44)}
.uit__beeld{
position:relative;display:block;overflow:hidden;background:var(--zand);
min-height:clamp(340px,40vw,560px);
}
.uit__beeld img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.uit:hover .uit__beeld img{transform:scale(1.045)}
/* Variant voor een eigen aangeleverde foto in dit vak (sleutel `uitgelicht.beeld`).
Het liggende vak hierboven toont van een staande close-up nooit het hele
onderwerp: `.diep` maakt het beeld 128% hoog, dus het kader laat maar 78% van
de hoogte zien en die strook schuift tijdens het scrollen ook nog heen en
weer. Bij BE4UTY beslaan de twee wenkbrauwen 74% van de foto en waren ze
daardoor altijd half weg (Robin, 14 okt 2026). Deze variant is 3:4 staand en
zet de parallax uit, zodat het hele beeld blijft staan. De uitsnede die je
aanlevert moet dan ook 3:4 zijn, met lucht boven en onder: de hover zoomt
naar scale(1.045) en snijdt daarbij 2,2% van elke rand. */
.uit__beeld--heel{min-height:0;aspect-ratio:3/4}
/* Een staand vak maakt de hele kaart hoog, en dan blijft er onder de tekst een
gat over. Daarom krijgt de beeldkolom in deze variant een kleiner aandeel. */
.uit:has(.uit__beeld--heel){grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.uit__beeld--heel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uit__vink{
position:absolute;top:16px;left:16px;z-index:2;background:rgba(247,242,234,.93);color:var(--inkt);
border-radius:var(--pil);padding:7px 15px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.uit__in{
padding:clamp(30px,3.4vw,58px);
display:flex;flex-direction:column;justify-content:center;
}
.uit__in .d3{margin-bottom:16px}
.uit__in .lead{color:var(--mist);margin:0;font-size:clamp(15.5px,1.1vw,18px);max-width:46ch}
.uit__feiten{
display:flex;flex-wrap:wrap;margin:clamp(26px,2.8vw,38px) 0;
border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
}
.uit__feiten > div{flex:1 1 130px;padding:18px 0}
.uit__feiten > div + div{border-left:1px solid var(--lijn);padding-left:clamp(16px,1.6vw,26px)}
.uit__feiten dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--messing);margin-bottom:8px}
.uit__feiten dd{
margin:0;font-family:"Fraunces",serif;font-size:clamp(17px,1.4vw,22px);line-height:1.2;
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.uit__knoppen{display:flex;flex-wrap:wrap;gap:12px}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,34px)}
.raster--2{grid-template-columns:repeat(2,1fr)}
/* Het aantal kolommen van de galerij hing eerst in een inline style. Dat is een
hogere specificiteit dan welke media-query dan ook, dus op een telefoon bleef
die galerij in drie kolommen van 90px staan. Vandaar nu een data-attribuut:
op het brede scherm precies hetzelfde beeld, maar de regels hieronder kunnen
er wel overheen. Gevonden 13 okt 2026 op be4uty-6245. */
.raster[data-kol="2"]{grid-template-columns:repeat(2,1fr)}
.raster[data-kol="3"]{grid-template-columns:repeat(3,1fr)}
.raster[data-kol="4"]{grid-template-columns:repeat(4,1fr)}
.raster[data-kol="5"],.raster[data-kol="6"]{grid-template-columns:repeat(3,1fr)}
/* Zeven in drie kolommen laat één kaart alleen op de onderste rij staan en dat
leest als een fout. In vier kolommen wordt het 4 + 3 en ziet die laatste rij
eruit alsof het zo bedoeld is. */
.raster[data-kol="7"],.raster[data-kol="8"]{grid-template-columns:repeat(4,1fr)}
.raster[data-kol="11"],.raster[data-kol="12"]{grid-template-columns:repeat(4,1fr)}
/* De optionele regel onder de agenda (boeken.alternatief). Klein en rustig,
gecentreerd onder de widget; de links zijn onderstreept zodat je ziet dat je
erop kunt tikken. */
.boekalt{max-width:560px;margin:clamp(18px,2.4vw,28px) auto 0;text-align:center;line-height:1.6}
.boekalt a{color:var(--inkt);text-decoration:underline;text-underline-offset:3px}
/* Ons werk: een portfoliopagina, geen tweede menukaart. Hier staat alleen het
bewijs, dus het beeld groot en verder niets dan de naam van de behandeling.
De prijs en de duur horen op behandelingen.html en blijven hier bewust weg,
anders krijg je twee plekken die hetzelfde zeggen en dat was juist de reden
om te splitsen. Staand formaat (4/5), want het zijn telefoonfoto's van een
gezicht en die verliezen hun onderwerp in een liggende uitsnede. */
.werkstuk{
display:block;position:relative;overflow:hidden;border-radius:var(--r);
background:var(--zand);border:1px solid var(--lijn);
transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
}
.werkstuk:hover{transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(34,26,19,.42)}
.werkstuk img{
display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.werkstuk:hover img{transform:scale(1.045)}
.raster--vierkant .werkstuk img{aspect-ratio:1/1}
/* De naam staat op de foto en niet eronder, zodat de rij kaarten één strak
raster blijft ook als de ene naam wel en de andere niet afbreekt. */
.werkstuk__op{
position:absolute;left:0;right:0;bottom:0;padding:clamp(40px,6vw,64px) 20px 18px;
color:var(--creme);
background:linear-gradient(to top,rgba(24,17,11,.82),rgba(24,17,11,.34) 54%,rgba(24,17,11,0));
}
.werkstuk__naam{
display:block;font-family:"Fraunces","Times New Roman",serif;font-weight:600;
font-size:clamp(17px,1.4vw,21px);line-height:1.18;
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.werkstuk__bij{
display:block;margin-top:6px;font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;opacity:.82;
}
/* Een behandeling waarvan de foto nog komt (binnenkort: true in zaak.json).
Hetzelfde staande vak als een foto, zodat het raster niet verspringt als de
foto later binnenkomt, maar grijs en zonder hover-lift: er is nog niets om
naar te kijken. De naam staat op dezelfde plek als bij de andere kaarten. */
.werkstuk--leeg{
aspect-ratio:4/5;background:#DAD6D0;
display:flex;align-items:center;justify-content:center;
}
.werkstuk--leeg:hover{transform:none;box-shadow:none}
.werkstuk__leeg{
font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#7C766F;
padding:9px 16px;border:1px solid rgba(34,26,19,.18);border-radius:var(--pil);
margin-bottom:22%;
}
.werkstuk--leeg .werkstuk__op{
color:var(--inkt);background:none;padding-top:0;
}
/* Vergrootglas op de werkpagina.
Een klik op een kaart stuurde eerst meteen door naar de menukaart, en dan had
je de foto juist niet gezien (Robin, 13 okt 2026). Nu komt eerst de hele foto
groot in beeld, met de link naar de behandeling erbij. De laag wordt door JS
aan de body gehangen en niet aan #smooth-content, want ScrollSmoother zet
daar een transform op en dan werkt position:fixed niet meer. */
.lb{
position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
padding:clamp(54px,7vw,76px) clamp(14px,4vw,54px) clamp(18px,4vw,54px);
background:rgba(24,17,11,.93);color:var(--creme);
opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s;
}
.lb.open{opacity:1;visibility:visible;transition:opacity .34s ease,visibility 0s}
.lb__in{
display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px);
max-width:min(1000px,100%);
transform:translateY(14px) scale(.986);
transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.lb.open .lb__in{transform:none}
.lb__foto{
display:block;margin:0 auto;max-width:100%;max-height:calc(100vh - 230px);
width:auto;height:auto;border-radius:var(--r);background:rgba(247,242,234,.06);
}
.lb__bij{
display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:8px clamp(18px,3vw,36px);
}
.lb__naam{
font-family:"Fraunces","Times New Roman",serif;font-weight:600;
font-size:clamp(19px,1.8vw,26px);line-height:1.15;
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.lb__link{
display:inline-flex;align-items:center;gap:10px;color:var(--creme);
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
border-bottom:1px solid var(--lijn-om);padding-bottom:4px;
transition:border-color .4s ease;
}
.lb__link:hover{border-color:var(--creme)}
.lb__link svg{width:15px;height:8px;stroke:currentColor;fill:none;stroke-width:1.2}
.lb__sluit{
position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);
width:46px;height:46px;border:1px solid var(--lijn-om);border-radius:var(--pil);
background:transparent;cursor:pointer;display:grid;place-items:center;
transition:background .4s ease,border-color .4s ease;
}
.lb__sluit:hover{background:rgba(247,242,234,.1);border-color:var(--creme)}
.lb__sluit::before,.lb__sluit::after{
content:"";position:absolute;width:17px;height:1.4px;background:var(--creme)
}
.lb__sluit::before{transform:rotate(45deg)}
.lb__sluit::after{transform:rotate(-45deg)}
.lb__stap{
position:absolute;top:50%;transform:translateY(-50%);
width:46px;height:46px;border:1px solid var(--lijn-om);border-radius:var(--pil);
background:rgba(24,17,11,.4);color:var(--creme);cursor:pointer;
display:grid;place-items:center;font-size:17px;line-height:1;
transition:background .4s ease,border-color .4s ease;
}
.lb__stap:hover{background:rgba(247,242,234,.12);border-color:var(--creme)}
.lb__stap--vorig{left:clamp(6px,1.6vw,22px)}
.lb__stap--volg{right:clamp(6px,1.6vw,22px)}
/* Op een telefoon liggen de pijlen over de foto heen. Ze onder de foto zetten
kost ruimte die daar niet is, en de onderrand is al bezet door de naam. */
@media (max-width:760px){
.lb__foto{max-height:calc(100vh - 250px)}
.lb__stap{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
.lb,.lb__in{transition:none}
.lb__in{transform:none}
}
.dienst{
display:flex;flex-direction:column;background:var(--creme);
border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
transition:border-color .5s ease,transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease;
}
.dienst:hover{border-color:rgba(172,132,80,.55);transform:translateY(-5px);box-shadow:0 26px 54px -34px rgba(34,26,19,.42)}
.dienst__beeld{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--zand)}
.dienst__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.dienst:hover .dienst__beeld img{transform:scale(1.045)}
.dienst__vink{
position:absolute;top:12px;left:12px;background:rgba(247,242,234,.93);color:var(--inkt);
border-radius:var(--pil);padding:6px 13px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.dienst__in{padding:24px clamp(18px,2vw,26px) clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.dienst__titel{
font-family:"Fraunces",serif;font-size:clamp(19px,1.6vw,24px);line-height:1.18;margin-bottom:10px;
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.dienst p{margin:0 0 20px;font-size:14.5px;line-height:1.62;color:var(--mist)}
/* wrapt op smalle kaarten: de prijs mag niet afbreken, dus de boek-link
zakt naar de volgende regel in plaats van buiten de kaart te steken */
.dienst__voet{
margin-top:auto;display:flex;align-items:center;justify-content:space-between;
gap:10px 16px;flex-wrap:wrap;
border-top:1px solid var(--lijn);padding-top:16px;
}
.dienst__voet > div{min-width:0}
.dienst__prijs{font-family:"Fraunces",serif;font-size:20px}
.dienst__duur{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.dienst__boek{
font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--messing);
display:inline-flex;align-items:center;gap:7px;flex:none;
}
.dienst__boek .pijl{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.dienst:hover .dienst__boek .pijl{transform:translateX(4px)}
/* de prijslijst (behandelingen-pagina), maximaal leesbaar */
.lijst__rij{
display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,2vw,34px);align-items:baseline;
padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--lijn);
transition:background .4s ease,padding-inline .4s ease;
}
.lijst__rij:hover{background:rgba(228,214,193,.34);padding-inline:14px}
/* de prijslijst staat per soort bij elkaar, anders lezen zeven bijna gelijke
namen als één lange brij */
.groep + .groep{margin-top:clamp(40px,5vw,72px)}
.groep__kop{
display:flex;align-items:baseline;justify-content:space-between;
gap:12px 28px;flex-wrap:wrap;
padding-bottom:14px;border-bottom:1px solid var(--inkt);
}
.groep__kop h3{
margin:0;font-family:"Fraunces",serif;font-weight:400;
font-size:clamp(21px,2vw,29px);line-height:1.2;
font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
}
.groep__kop p{margin:0;font-size:14px;color:var(--mist);max-width:46ch}
.lijst__naam{font-family:"Fraunces",serif;font-size:clamp(18px,1.6vw,23px);line-height:1.22}
.lijst__naam small{display:block;font-family:"Jost",sans-serif;font-size:14px;color:var(--mist);margin-top:5px;line-height:1.6;max-width:62ch;letter-spacing:0}
.lijst__duur{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.lijst__prijs{font-family:"Fraunces",serif;font-size:clamp(18px,1.5vw,22px);white-space:nowrap;text-align:right;min-width:4.5ch}
/* --- het psalmvlak (scrubbed quote) -------------------------------------- */
.psalm{position:relative;background:var(--inkt);color:var(--creme);overflow:hidden}
.psalm__beeld{position:absolute;inset:0;opacity:.2}
.psalm__beeld img{width:100%;height:100%;object-fit:cover}
.psalm__in{position:relative;z-index:2;text-align:center;padding-block:clamp(90px,14vw,190px)}
.psalm__tekst{
font-family:"Fraunces",serif;font-weight:300;
font-size:clamp(26px,4.1vw,60px);line-height:1.22;letter-spacing:-.015em;
font-variation-settings:"SOFT" 60,"WONK" 1;
max-width:19ch;margin:0 auto;
}
.psalm__tekst .w{color:rgba(247,242,234,.2)} /* GSAP tilt ze een voor een op */
.psalm__bron{margin-top:34px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--messing-licht)}
.ornament{display:block;margin:0 auto 34px;width:74px;height:38px;overflow:visible}
.ornament path{fill:none;stroke:var(--messing-licht);stroke-width:1.1}
/* --- verhaal / beeld naast tekst ----------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:center}
.duo--om .duo__beeld{order:2}
.duo__beeld{position:relative;border-radius:var(--boog);overflow:hidden;aspect-ratio:4/5;background:var(--zand)}
.duo__beeld img{width:100%;height:100%;object-fit:cover;will-change:transform}
.duo__beeld--vierkant{aspect-ratio:1/1} /* zonder parallax: .diep maakt het beeld 128% hoog en knipt boven en onder 14% weg, dat nam hoofden mee */
.duo__beeld img.diep{height:128%} /* anders wint height:100% hierboven van .diep en blijft onder de foto een lege strook staan (2 nov 2026) */
.duo__tekst h2{margin-bottom:22px}
/* Deze kop staat in een halve kolom en moet op één regel blijven, anders valt
er een los woord onderaan. Daarom schaalt hij met de kolom mee, niet met d2. */
.duo__tekst .d2{font-size:clamp(30px,4.2vw,60px)}
.duo__tekst p{color:var(--mist);margin:0 0 20px}
.duo__tekst .btn,.duo__tekst .link{margin-top:10px}
/* --- cijfers ------------------------------------------------------------- */
.cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
.cijfer{text-align:center}
.cijfer b{
display:block;font-family:"Fraunces",serif;font-weight:300;
font-size:clamp(34px,4.2vw,60px);line-height:1;margin-bottom:12px;
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.cijfer span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.donker .cijfer span{color:var(--mist-om)}
/* --- stappen ------------------------------------------------------------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px);counter-reset:s}
.stap{position:relative;padding-top:30px;border-top:1px solid var(--lijn-om)}
.donker .stap{border-top-color:var(--lijn-om)}
.stap b{
position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--messing);display:block;
}
.stap__nr{font-family:"Fraunces",serif;font-size:12px;letter-spacing:.2em;color:var(--messing-licht);display:block;margin-bottom:14px}
.stap h3{font-family:"Fraunces",serif;font-size:clamp(19px,1.7vw,24px);margin-bottom:10px;font-variation-settings:"SOFT" 40,"WONK" 1}
.stap p{margin:0;font-size:15px;color:var(--mist-om);line-height:1.62}
/* --- slot-oproep --------------------------------------------------------- */
.slot{position:relative;background:var(--inkt);color:var(--creme);overflow:hidden;text-align:center}
/* .slot zet zijn eigen donkere achtergrond, maar heeft nooit de class
"donker" zelf. Zonder deze regel valt de bel-knop terug op de standaard
.btn--leeg (inkt-tekst op een lijn van --lijn), en dat is inkt-op-inkt: de
tekst is dan onzichtbaar tot je eroverheen hovert. Zelfde kleuren als
".donker .btn--leeg" hierboven, nu ook zonder die ouderclass. */
.slot .btn--leeg{color:var(--creme);border-color:var(--lijn-om)}
.slot .btn--leeg:hover{background:var(--creme);color:var(--inkt);border-color:var(--creme)}
.slot__in{position:relative;z-index:2;padding-block:clamp(80px,11vw,150px)}
.slot h2{margin:0 auto 22px;max-width:15ch}
.slot .lead{margin:0 auto 38px;text-align:center}
.slot__knoppen{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* Hier stond een boogcontour achter de tekst. Die las als een kader om de
sectie heen in plaats van als vorm, dus hij is weg. De boog blijft waar hij
wel werkt: om een beeld heen. */
/* --- voet ---------------------------------------------------------------- */
.voet{background:var(--creme-diep);padding-block:clamp(54px,7vw,84px) 28px}
.voet__boven{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,50px);
padding-bottom:clamp(38px,5vw,60px);border-bottom:1px solid var(--lijn);
}
/* De kopjes waren messing op creme: mooi, maar te licht om als kop te werken.
Nu vet en in inkt, zodat je de vier kolommen meteen uit elkaar houdt. */
.voet h4{
font-size:12px;letter-spacing:.22em;text-transform:uppercase;
font-weight:600;color:var(--inkt);margin-bottom:20px;
}
.voet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
/* --mist (58% zwart) haalde op dit crème net geen leesbaar contrast. De
lopende tekst staat nu op inkt-zacht, dat is 4.5:1 of beter. */
.voet li,.voet p{font-size:14.5px;color:var(--inkt-zacht);margin:0;line-height:1.6}
.voet li a{color:var(--inkt-zacht)}
.voet a:hover{color:var(--messing)}
.voet__merk .merk{color:var(--inkt);margin-bottom:16px}
.voet__merk p{max-width:34ch}
.voet__tijden{display:flex;flex-direction:column;gap:9px}
.voet__tijd{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--inkt-zacht)}
.voet__tijd b{font-weight:500;color:var(--inkt)}
.voet__onder{
display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
padding-top:24px;font-size:13px;color:var(--inkt-zacht);
}
.voet__onder a{color:var(--inkt-zacht);border-bottom:1px solid rgba(34,26,19,.3)}
/* --- recensies ------------------------------------------------------------ */
/* Twee eerdere versies afgekeurd: doosjes met een sterretje erin (goedkoop) en
daarna drie kolommen onder een haarlijn (Robin: "afscheidingslijnen, niet
heel netjes"). Dit is versie drie en die doet wat hij vroeg: kaarten die er
uitzien alsof ze rechtstreeks van Google komen, want daar gaan de echte
reacties straks ook vandaan. Vandaar het echte vierkleurenlogo, de gele
Google-sterren (#FBBC04) en de witte kaart. Wit, niet creme: op het creme
vlak van de sectie licht de kaart dan net op, zoals op Google zelf.
Ze staan in een carrousel, ook op desktop, zie .carrousel hieronder. */
.carrousel{--kgap:clamp(16px,1.8vw,26px);position:relative}
.carrousel__spoor{
display:flex;gap:var(--kgap);
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;-ms-overflow-style:none;
/* ruimte voor de schaduw van de kaarten, anders knipt de scroller die af */
padding:6px 2px 14px;margin:-6px -2px -14px;
}
.carrousel__spoor::-webkit-scrollbar{display:none}
.recensie{
flex:0 0 calc((100% - 2 * var(--kgap)) / 3);
scroll-snap-align:start;
margin:0;display:flex;flex-direction:column;
background:#fff;border:1px solid var(--lijn);border-radius:var(--r);
padding:clamp(22px,2.1vw,30px);
box-shadow:0 20px 44px -34px rgba(34,26,19,.4);
}
.recensie__kop{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.recensie__rondje{
flex:0 0 40px;width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;color:#fff;line-height:1;
font-family:"Fraunces",serif;font-size:17px;
}
.recensie__wie{display:flex;flex-direction:column;min-width:0;flex:1}
.recensie__wie b{
font-weight:500;font-size:14.5px;color:var(--inkt);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recensie__datum{font-size:12.5px;color:var(--inkt-zacht);margin-top:3px}
.goog{flex:0 0 20px;width:20px;height:20px}
.sterren{display:inline-flex;gap:2px;color:#FBBC04;line-height:0}
.sterren .ster{width:15px;height:14px;fill:currentColor}
.recensie .sterren{margin-bottom:13px}
.recensie blockquote{margin:0;font-size:14.8px;line-height:1.66;color:var(--mist)}
.recensie blockquote{flex:1 1 auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.recensie--open blockquote{display:block;-webkit-line-clamp:unset;overflow:visible}
.recensie__meer{
align-self:flex-start;margin:14px 0 0;padding:0;background:none;border:0;cursor:pointer;
font:inherit;font-size:13.5px;color:var(--inkt);text-decoration:underline;text-underline-offset:3px;
}
.recensie__meer[hidden]{display:none}
/* de beoordeling boven de carrousel */
.cijfer{
display:flex;align-items:center;gap:11px;flex-wrap:wrap;
margin:calc(-1 * clamp(16px,1.8vw,26px)) 0 clamp(24px,2.8vw,34px);
font-size:13.5px;color:var(--inkt-zacht);
}
.cijfer .goog{flex:0 0 22px;width:22px;height:22px}
.cijfer b{font-family:"Fraunces",serif;font-weight:400;font-size:22px;color:var(--inkt);line-height:1}
.cijfer .sterren .ster{width:16px;height:15px}
/* --- de reviewpagina ------------------------------------------------------ */
/* "Zie alle reviews" gaat naar een eigen pagina op de site, niet naar Google
zelf: de bezoeker moet hier blijven. Robin, 17 sep. Alleen "schrijf een
review" wijst naar buiten, want dat kan alleen bij Google. */
.score{
display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr);
gap:clamp(30px,4vw,66px);align-items:center;
}
.score__links{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.score__groot{
font-family:"Fraunces",serif;font-weight:200;line-height:.9;
font-size:clamp(66px,7vw,104px);color:var(--inkt);
font-variation-settings:"SOFT" 40,"WONK" 1;
}
.score__links .sterren .ster{width:20px;height:19px}
.score__bij{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;color:var(--inkt-zacht)}
.verdeling{display:flex;flex-direction:column;gap:9px}
.verdeling__rij{display:flex;align-items:center;gap:12px}
.verdeling__cijfer{font-size:12.5px;color:var(--inkt-zacht);width:9px;text-align:right}
.verdeling__baan{flex:1;height:7px;border-radius:var(--pil);background:rgba(34,26,19,.1);overflow:hidden}
.verdeling__baan i{display:block;height:100%;border-radius:var(--pil);background:#FBBC04}
.verdeling__aantal{font-size:12.5px;color:var(--inkt-zacht);width:22px}
.score__doen{border-left:1px solid var(--lijn);padding-left:clamp(20px,2.4vw,36px)}
.score__doen p{margin:0 0 18px;font-size:14.5px;line-height:1.62;color:var(--mist)}
/* Alle recensies onder elkaar in kolommen. Met CSS-columns en niet met een grid,
want kaarten van ongelijke lengte houden elkaar in een grid op een rij vast
en dan staan er gaten tussen. */
.kolommen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);align-items:stretch;grid-auto-rows:1fr}
.kolommen .recensie{flex:none;margin:0}
/* Alle reviewkaarten even groot (Robin, 2 nov 2026): de tekst is afgekapt op 5 regels en "Lees meer" klapt
hem open. Het raster hierboven en de stretch in de carrousel doen de rest. Vroeger waren dit CSS-kolommen. */
.carrousel__voet{
display:flex;align-items:center;justify-content:space-between;gap:20px;
margin-top:clamp(22px,2.4vw,32px);
}
/* passen alle kaarten al naast elkaar, dan valt er niets te bedienen */
.carrousel--vol .carrousel__voet{display:none}
.carrousel__stippen{display:flex;align-items:center;gap:8px}
.stip{
width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:rgba(34,26,19,.2);
transition:background .4s ease,width .4s cubic-bezier(.22,1,.36,1);
}
.stip[aria-current="true"]{background:var(--messing);width:24px;border-radius:var(--pil)}
.stip[hidden]{display:none}
.carrousel__pijlen{display:flex;gap:10px}
.rond{
width:46px;height:46px;border-radius:50%;padding:0;cursor:pointer;
border:1px solid var(--lijn);background:transparent;color:var(--inkt);
display:grid;place-items:center;
transition:background .4s ease,border-color .4s ease,color .4s ease,opacity .3s ease;
}
.rond svg{width:15px;height:9px}
.rond:hover{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.rond:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
.rond[disabled]{opacity:.3;pointer-events:none}
/* --- paginakop (subpagina's) --------------------------------------------- */
.pkop{
position:relative;
padding-top:calc(var(--topruimte) + clamp(48px,7vw,100px));
padding-bottom:clamp(52px,7.5vw,104px);
background:var(--inkt);color:var(--creme);overflow:hidden;
}
/* De beelden zijn in beelden.py al op helderheid 92 gezet omdat er tekst
overheen gaat. Hier dus licht doseren, anders blijft er van de foto niets
over en is de kop een zwarte balk. */
.pkop__beeld{position:absolute;inset:0;opacity:.74}
.pkop__beeld img{width:100%;height:100%;object-fit:cover}
.pkop::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(34,26,19,.6),rgba(34,26,19,.34) 45%,rgba(34,26,19,.8));
}
.pkop__in{position:relative;z-index:2}
.pkop h1{margin:0 0 18px;max-width:none;text-wrap:balance}
.pkop .lead{color:rgba(247,242,234,.84)}
.kruimel{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--messing-licht);margin-bottom:22px}
.kruimel span{opacity:.5}
/* --- contact ------------------------------------------------------------- */
.contactraster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,70px)}
.infoblok{border-top:1px solid var(--lijn);padding-top:26px;margin-bottom:34px}
.infoblok h3{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--messing);margin-bottom:16px;font-family:"Jost",sans-serif}
.infoblok p,.infoblok a{font-size:clamp(17px,1.5vw,21px);font-family:"Fraunces",serif;line-height:1.5;margin:0;display:block}
.infoblok a:hover{color:var(--messing)}
.kaart{border-radius:var(--r);overflow:hidden;border:1px solid var(--lijn);min-height:340px;height:100%;background:var(--zand)}
.kaart iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.5) sepia(.14)}
.tijdtabel{width:100%;border-collapse:collapse}
.tijdtabel td{padding-block:13px;border-bottom:1px solid var(--lijn);font-size:15px}
.tijdtabel td:last-child{text-align:right;color:var(--mist)}
.tijdtabel tr.nu td{color:var(--messing)}
.tijdtabel tr.nu td:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--messing);margin-right:9px;vertical-align:middle}
/* --- boekflow ------------------------------------------------------------ */
.boekwrap{max-width:860px;margin-inline:auto}
/* --- de echte Boekbaar-widget ------------------------------------------- */
.boekkop{margin-bottom:clamp(28px,3.4vw,44px)}
.boekkop .d2{margin:0 0 16px;max-width:none;text-wrap:balance;font-size:clamp(30px,3.2vw,46px)}
@media (max-width:760px){.boekkop .d2{max-width:18ch}}
.boekkop .lead{margin:0;max-width:46ch}
.widget{
border:1px solid var(--lijn);border-radius:20px;overflow:hidden;
background:#fff;box-shadow:0 22px 60px -38px rgba(34,26,19,.45);
}
/* De bak om de iframe heen, zonder eigen vlak. De widget binnen de iframe
tekent zelf al een kaart, dus met dit kader erom stonden er drie
achtergronden in elkaar: de creme sectie, deze witte bak en de ivoren kaart
van de widget. Op een donkere sectie viel dat wit er hard uit.
Sinds 16 okt 2026 krijgt de iframe ?vlak=1 mee met de kleuren van de sectie
(widget_vlak() in bouw.py), laat de widget zijn kaart weg, en hoort deze bak
dat ook te doen. Wat overblijft is één vlak: dat van de sectie.
.widget zelf blijft staan voor oudere gebouwde sites die deze klasse niet
hebben; die stylesheet staat per klant in de klantmap. */
.widget--vlak{
border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
}
/* de hoogte komt via postMessage binnen, dit is alleen wat er staat zolang
de widget nog niets heeft teruggestuurd */
.widget iframe{display:block;width:100%;height:640px;border:0}
/* Een verborgen tab. Staat er expliciet omdat het thema elders display-regels
op klassen zet en die het UA-gedrag van [hidden] zouden overrulen. */
.widget[hidden]{display:none}
/* --- de twee tabs van de lessenroute ------------------------------------- */
/* Alleen op de boekpagina van een lesstudio: links het rooster om te kijken,
rechts het formulier om je aan te melden. Geen eigen vlak en geen schaduw,
want dat is precies waar .widget--vlak hierboven vanaf wil. Wat de tabs
onderscheidt is de lijn eronder, net als de rest van het thema. */
.widgettabs{
display:flex;gap:4px;margin-bottom:clamp(20px,2.4vw,30px);
border-bottom:1px solid var(--lijn);
}
.widgettab{
font-family:inherit;font-size:14px;letter-spacing:.02em;
padding:12px 20px;background:none;border:0;cursor:pointer;
color:var(--inkt);opacity:.5;position:relative;
transition:opacity .3s ease;
}
.widgettab::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:var(--messing);transform:scaleX(0);transform-origin:left;
transition:transform .4s cubic-bezier(.76,0,.24,1);
}
.widgettab:hover{opacity:.8}
.widgettab[aria-selected="true"]{opacity:1}
.widgettab[aria-selected="true"]::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
.widgettab,.widgettab::after{transition:none}
}
.balkje{display:flex;gap:8px;margin-bottom:clamp(26px,3vw,40px)}
.balkje i{flex:1;height:2px;background:var(--lijn);position:relative;overflow:hidden;border-radius:2px}
.balkje i::after{content:"";position:absolute;inset:0;background:var(--messing);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.balkje i.aan::after{transform:scaleX(1)}
.stapkop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.stapkop h2{font-family:"Fraunces",serif;font-size:clamp(23px,2.4vw,34px);font-variation-settings:"SOFT" 40,"WONK" 1}
.stapkop .klein{white-space:nowrap}
.keuze{display:grid;gap:12px}
.keuze--2{grid-template-columns:repeat(2,1fr)}
.optie{
display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
width:100%;padding:20px 24px;border:1px solid var(--lijn);border-radius:var(--r);
background:var(--creme);cursor:pointer;transition:border-color .35s ease,background .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.optie:hover{border-color:var(--messing);background:rgba(228,214,193,.36);transform:translateX(4px)}
.optie.aan{border-color:var(--messing);background:rgba(228,214,193,.5)}
.optie__naam{font-family:"Fraunces",serif;font-size:clamp(17px,1.4vw,20px);line-height:1.3;display:block}
.optie__sub{display:block;font-size:13px;color:var(--mist);margin-top:4px}
.optie__prijs{font-family:"Fraunces",serif;font-size:17px;white-space:nowrap}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot-btn{
padding:14px 8px;text-align:center;border:1px solid var(--lijn);border-radius:var(--pil);
background:var(--creme);cursor:pointer;font-size:14px;letter-spacing:.04em;
transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.slot-btn:hover{border-color:var(--messing);color:var(--messing)}
.slot-btn.aan{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.dagkiezer{display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;margin-bottom:22px;scrollbar-width:thin}
.dag{
flex:0 0 auto;min-width:78px;padding:13px 6px;text-align:center;border:1px solid var(--lijn);
border-radius:var(--r);background:var(--creme);cursor:pointer;transition:all .3s ease;
}
.dag.aan{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.dag.dicht{opacity:.32;cursor:not-allowed}
.dag b{display:block;font-family:"Fraunces",serif;font-size:19px;font-weight:400;line-height:1.1}
.dag span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:4px;opacity:.7}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.veld label{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.veld input,.veld textarea{
font:inherit;font-size:15.5px;padding:15px 17px;border:1px solid var(--lijn);border-radius:var(--r);
background:var(--creme);color:var(--inkt);transition:border-color .3s ease;
}
.veld input:focus,.veld textarea:focus{outline:0;border-color:var(--messing)}
.veld.fout input{border-color:#A8443B}
.veld .foutje{font-size:12.5px;color:#A8443B;display:none}
.veld.fout .foutje{display:block}
.overzicht{border:1px solid var(--lijn);border-radius:var(--r);padding:22px 24px;background:rgba(228,214,193,.3);margin-bottom:26px}
.overzicht dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:14.5px}
.overzicht dt{color:var(--mist);letter-spacing:.02em}
.overzicht dd{margin:0;text-align:right;font-family:"Fraunces",serif;font-size:16px}
.boekvoet{display:flex;justify-content:space-between;gap:14px;margin-top:28px;align-items:center;flex-wrap:wrap}
.klaar{text-align:center;padding-block:20px}
.klaar__vink{
width:72px;height:72px;border-radius:50%;border:1px solid var(--messing);margin:0 auto 26px;
display:grid;place-items:center;
}
.klaar__vink svg{width:30px;height:30px;overflow:visible}
.klaar__vink path{fill:none;stroke:var(--messing);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hulp{
display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);
margin-top:clamp(50px,7vw,86px);padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--lijn);
}
.hulp h4{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--messing);margin-bottom:12px}
.hulp p,.hulp a{font-size:15px;color:var(--mist);margin:0;line-height:1.6}
.hulp a:hover{color:var(--inkt)}
/* --- scroll-reveal (vangnet) --------------------------------------------- */
/* Verbergen gebeurt via JS (html.js-klaar), zodat zonder JS niets wegvalt. */
.js-klaar .stil{opacity:0}
/* --- het doek ------------------------------------------------------------
Staat bewust buiten #smooth-wrapper: position:fixed werkt niet binnen een
container die door ScrollSmoother getransformeerd wordt. Zonder JS is er
geen `doek-dicht` en haalt app.js het element meteen weg, dus het kan de
site nooit blokkeren. */
.doek{
position:fixed;inset:0;z-index:200;background:var(--inkt);
display:flex;align-items:center;justify-content:center;will-change:transform;
}
.doek__in{text-align:center}
.doek__lijn{display:block;width:clamp(120px,17vw,190px);height:auto;margin:0 auto 22px}
.doek__lijn path{fill:none;stroke:var(--messing);stroke-width:1.1}
.doek__naam{opacity:0}
.doek__naam b{
display:block;font-family:"Fraunces",serif;font-weight:400;color:var(--creme);
font-size:clamp(30px,4.6vw,54px);line-height:1;
font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120;
}
.doek__naam span{
display:block;margin-top:14px;font-size:10px;letter-spacing:.38em;
text-transform:uppercase;color:var(--messing-licht);
}
body.doek-dicht{overflow:hidden}
/* Beelden die meebewegen met de scroll staan bewust hoger dan hun kader,
anders loopt de rand in beeld op het uiterste punt van de parallax. */
.diep{position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover}
/* --- ScrollSmoother ------------------------------------------------------ */
#smooth-content{will-change:transform}
/* ==========================================================================
Smalle schermen
========================================================================== */
@media (max-width:1100px){
.voet__boven{grid-template-columns:1fr 1fr;row-gap:38px}
.cijfers{grid-template-columns:repeat(2,1fr);row-gap:34px}
.raster,.raster[data-kol]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
:root{--balk-h:34px;--kop-h:62px}
.nav{display:none}
.burger{display:inline-flex}
.kop__in{gap:12px}
.balk{font-size:10px;letter-spacing:.14em}
/* Alleen het logo in de kop wordt gecentreerd. Zonder .kop ervoor pakte ook
het logo in de voettekst dit op; dat staat in een .voet__merk zonder
position, dus het sprong naar het midden van een heel andere ouder en
kwam op telefoon dwars over de recensiekop te staan. Gemeten 17 sep. */
.kop .merk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.kop__cta .btn--nav{padding:11px 18px;font-size:10.5px}
/* Op telefoon is de opening één beeld dat het hele scherm vult, met de tekst
eroverheen. De vorige opzet (eerst een foto, dan een lap tekst, dan pas de
knoppen) las als een folder en de CTA's zakten onder de vouw. Nu staat de
tekst onderin het beeld, dus beide knoppen zijn altijd in zicht. */
.opening{padding-top:0;background:var(--inkt);color:var(--creme)}
/* de home-hero staat op de video, dus daar geen eigen inkt-vlak */
.opening.opening--film{background:transparent}
.opening__in{
grid-template-columns:1fr;gap:0;align-items:end;
min-height:100svh;
padding-block:calc(var(--topruimte) + 12px) clamp(30px,6vh,56px);
}
.opening.opening--film .opening__tekst{max-width:none}
.opening__boog{position:absolute;inset:0;order:0;pointer-events:none}
.boog{aspect-ratio:auto;width:100%;height:100%;max-height:none;border-radius:0;margin:0}
/* schermvullend snijdt de zijkanten weg; iets hoger uitsnijden houdt het
voetenbad in beeld in plaats van alleen de badrand */
.boog img{object-position:50% 42%}
.boog__doek{opacity:1}
.boog__rand{display:none}
.boogsvg{display:none}
.opening .label{color:var(--messing-licht)}
.opening .d1{max-width:none;margin-bottom:16px}
.opening__lead{margin-bottom:24px;color:rgba(247,242,234,.82)}
.opening__knoppen .btn{background:var(--creme);border-color:var(--creme);color:var(--inkt)}
.opening__knoppen .btn:hover{background:var(--messing-licht);border-color:var(--messing-licht)}
.opening__knoppen .btn--leeg{background:transparent;color:var(--creme);border-color:rgba(247,242,234,.4)}
.zwever{display:none}
.scrolhint{display:none}
.pijlers{grid-template-columns:1fr;gap:26px}
.duo{grid-template-columns:1fr;gap:30px}
.duo--om .duo__beeld{order:-1}
.duo__beeld{aspect-ratio:4/3;max-height:52vh}
.duo__beeld.duo__beeld--vierkant{aspect-ratio:1/1;max-height:none}
.stappen{grid-template-columns:1fr;gap:26px}
.contactraster{grid-template-columns:1fr}
.hulp{grid-template-columns:1fr;gap:24px}
.uit{grid-template-columns:1fr}
/* `.uit:has(.uit__beeld--heel)` hierboven is specifieker dan deze regel en
wint anders ook op een telefoon, met een beeldkolom van 195px tot gevolg. */
.uit:has(.uit__beeld--heel){grid-template-columns:1fr}
.uit__beeld{min-height:0;aspect-ratio:16/10}
/* Moet hier herhaald worden. Deze regel staat verderop in het bestand dan de
variant zelf en heeft dezelfde specificiteit, dus zonder deze regel wint
16/10 ook voor het staande vak. */
.uit__beeld--heel{aspect-ratio:3/4}
.recensie{flex-basis:calc((100% - var(--kgap)) / 2)}
.kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}
/* het cijfer en de balkjes naast elkaar, de oproep eronder over de volle breedte */
.score{grid-template-columns:auto minmax(0,1fr);gap:28px 34px}
.score__doen{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--lijn);padding-top:24px}
}
@media (max-width:720px){
/* De swipe-carrousel van 17 sep is er weer uit. Halve kaarten die aan de rand
worden afgesneden oogden goedkoop. Kaarten staan op telefoon weer gewoon op
volle breedte onder elkaar. Deze twee regels stonden in het carrouselblok,
dus zonder dat blok bleven het twee kolommen van 180px op een telefoon. */
.raster,.raster[data-kol]{grid-template-columns:1fr}
/* De recensies zijn wel een carrousel, op elke maat, want dat vroeg Robin.
Op telefoon staan ze op volle breedte: kaarten die half aan de rand worden
afgesneden zijn hier eerder afgekeurd. De stippen en de pijlen eronder
maken duidelijk genoeg dat er meer is. */
.recensie{flex-basis:100%}
.dienst__beeld{aspect-ratio:16/10}
.kolommen{grid-template-columns:minmax(0,1fr)}
.score{grid-template-columns:1fr;gap:24px}
.uit__feiten > div{flex-basis:100%;padding:14px 0}
.uit__feiten > div + div{border-left:0;border-top:1px solid var(--lijn);padding-left:0}
.uit__knoppen .btn{width:100%;justify-content:center}
.dienstenkop{align-items:flex-start;gap:18px}
.veldrij{grid-template-columns:1fr}
.keuze--2{grid-template-columns:1fr}
.voet__boven{grid-template-columns:1fr;row-gap:32px}
/* op telefoon staat er onderaan al genoeg: naam, nummer, credit. De
Instagram-regel staat hierboven ook al in het menu en valt hier weg. */
.voet__onder{flex-direction:column;align-items:flex-start;gap:8px}
/* .label span hierboven is specifieker dan .smal-weg alleen, dus die moet
hier expliciet genoemd worden, anders blijft de regel gewoon staan */
.smal-weg,.label .smal-weg{display:none}
/* minmax(0,1fr): een lange omschrijving of "Op aanvraag" als prijs duwde de rij 14 tot 34px buiten het scherm,
waar overflow-x:clip hem afkapte (gezien bij quirins-beauty-37963 en hair-by-qsh-3473, 2 nov 2026) */
.lijst__rij{grid-template-columns:minmax(0,1fr) auto;row-gap:6px;column-gap:14px}
.lijst__naam{min-width:0}
.lijst__duur{grid-column:2;font-size:11.5px;text-align:right}
.lijst__prijs{grid-column:2;text-align:right;font-size:19px;white-space:nowrap}
.lijst__rij:hover{padding-inline:8px}
.psalm__tekst{max-width:15ch}
.cijfers{gap:26px}
.overzicht dl{grid-template-columns:1fr;gap:3px 0}
.overzicht dd{text-align:left;margin-bottom:10px}
.boekvoet{flex-direction:column-reverse;align-items:stretch}
.boekvoet .btn{width:100%}
}
/* het logo staat op mobiel absoluut gecentreerd, dus het telt niet mee in de
breedte. Vanaf hier wordt de knop korter, anders schuift de pil eroverheen. */
@media (max-width:560px){
/* Een lange zaaknaam of lange balktekst samen ("Nieuw online je aanvraag doen bij
Autorijschool van der Pluijm") viel op dit formaat in meer regels dan er ruimte
voor was (Robin, 9 nov 2026, #33438). Kleiner en krapper, zodat het past. */
.balk{font-size:9px;letter-spacing:.1em;gap:6px}
.kop__cta .btn--nav .mr{display:none}
.kop__cta .btn--nav{padding:11px 15px}
/* Beide knoppen moeten binnen het eerste scherm vallen, anders ziet niemand
"Bekijk de behandelingen". De kop schaalt daarom mee met de hoogte en niet
alleen met de breedte. */
.opening .label{margin-bottom:13px}
.opening .d1{font-size:clamp(32px,min(8.6vw,5.2vh),46px);margin-bottom:12px}
.opening__lead{margin-bottom:20px}
}
/* Een heel kort scherm (oude SE) heeft nauwelijks hoogte. Alles een maat
kleiner, anders zakken de knoppen alsnog onder de vouw. */
@media (max-width:560px) and (max-height:660px){
.opening .label{margin-bottom:10px}
.opening .d1{font-size:clamp(26px,7.6vw,32px);margin-bottom:10px}
.opening__lead{margin-bottom:14px}
}
@media (max-width:420px){
.merk__tag{display:none}
.opening__knoppen{gap:10px}
.opening__knoppen .btn{width:100%}
.slot__knoppen .btn{width:100%}
}
/* heel breed: laat de inhoud niet uit elkaar vallen */
@media (min-width:1700px){
:root{--max:1440px}
}
/* Lage maar brede schermen: de opening moet binnen het scherm blijven. */
@media (min-width:981px){
.opening .d1{font-size:clamp(40px,min(6.4vw,9.2vh),104px)}
.boog{max-height:min(70vh,720px)}
}
@media print{
.kop,.balk,.paneel,.scrolhint,body::after{display:none !important}
.stil{opacity:1 !important}
}
/* Geen film in de map: een stilstaande foto in hetzelfde kader als de film, zonder