/* Venus Schoonheidssalon, ronde 6: "De deur in de wand".
   De hele site staat op de tegels van haar behandelkamer: --tegel is de module (8 tegels breed vanaf
   1024 px, 4 tegels daaronder). Kleuren gemeten in haar eigen foto's (brief §3). Geen gedeelde code
   met andere demo's. Fonts: officiele Fontshare-woff2, ongewijzigd (ITF FFL 2.0 §02 verbiedt subsetten). */

/* ---------- Fonts ---------- */
@font-face { font-family: "Melodrama"; src: url("fonts/Melodrama-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Melodrama"; src: url("fonts/Melodrama-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Gemeten terugvallers (canvas measureText tegen Arial, 2026-10-14): breedte gelijk, dus geen verschuiving bij het wisselen. */
@font-face { font-family: "Melodrama terugval"; src: local("Arial"); size-adjust: 91.94%; ascent-override: 106.6%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "Switzer terugval"; src: local("Arial"); size-adjust: 100.65%; ascent-override: 97.4%; descent-override: 24.8%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --wand: #6C2A26;          /* middentoon van haar tegelwand */
  --schaduw: #461613;       /* de onverlichte bovenste tegelrijen */
  --lamp: #A84A48;          /* tegels onder de spots: hover en gekozen, nooit tekst */
  --pleister: #E2DAD4;      /* haar gestucte muur, gemeten in idm20 */
  --hoofdband: #F4F2F1;     /* de witte hoofdband: alle tekst op de wand, de boektegel */
  --blazer: #141826;        /* haar pak: inkt op pleister, de voettegels */
  --t0: #461613; --t1: #59201D; --t2: #6C2A26; --t3: #8A3A37; --t4: #A84A48; /* vijf vaste stappen */
  --naad: rgb(70 22 19 / .55);
  --naad-licht: rgb(20 24 38 / .14);
  --inkt-2: #4D4A50;        /* tweede inkt op pleister, 7,3:1 */
  --dim: #D9C9C6;           /* tweede inkt op t0 tot t2, minimaal 6,1:1 */
  --display: "Melodrama", "Melodrama terugval", "Arial", sans-serif;
  --tekst: "Switzer", "Switzer terugval", "Arial", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --kop: 72px;
  accent-color: var(--wand);
}
:root { --tegel: min(12.5cqw, 210px); --kol: 8; --pad: 24px; --tegel-vast: min(12.5%, 210px); }
@media (max-width: 1023.98px) { :root { --tegel: min(25cqw, 210px); --kol: 4; --pad: 14px; --kop: 56px; } }
/* --tegel geldt binnen kop, main en voet (elk een container zonder vaste kinderen); vaste elementen rekenen in % van het venster. */
.kop, main, .voet { container-type: inline-size; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; scroll-padding-bottom: 140px; background: var(--schaduw); color-scheme: dark; scrollbar-color: var(--wand) var(--schaduw); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  font: 400 18px/1.6 var(--tekst); letter-spacing: .004em;
  color: var(--hoofdband); background: var(--schaduw); caret-color: var(--wand);
  font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p, h1, h2, h3, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--wand); color: var(--hoofdband); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--hoofdband); outline-offset: 2px; box-shadow: 0 0 0 2px var(--blazer); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--hoofdband); color: var(--blazer); padding: 12px 18px; font-weight: 500; text-decoration: none; }
.skip:focus-visible { top: 12px; }
.pijl { width: 1.1em; height: 1.1em; flex: none; }
.zw { white-space: nowrap; }

/* ---------- De muur ---------- */
.muur { position: relative; width: calc(var(--tegel) * var(--kol)); margin-inline: auto; }
.wand { position: relative; background: var(--schaduw); }
.veld {
  position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: repeat(var(--kol), var(--tegel)); grid-auto-rows: var(--tegel);
}
.veld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("foto/suede.webp") left top / calc(var(--tegel) * 4) calc(var(--tegel) * 4);
  mix-blend-mode: soft-light; opacity: .36;
}
/* de korrel per sectie verschoven, zodat de herhaling van het stukje wand niet zichtbaar wordt */
.kiezer .veld::after { background-position: calc(var(--tegel) * 1.37) calc(var(--tegel) * .61); }
.acne .veld::after { background-position: calc(var(--tegel) * 2.71) calc(var(--tegel) * 1.29); }
.soumaya .veld::after { background-position: calc(var(--tegel) * .53) calc(var(--tegel) * 2.17); }
.slot .veld::after { background-position: calc(var(--tegel) * 3.19) calc(var(--tegel) * .83); }
.veld--vlak { background-color: var(--wand); background-image: linear-gradient(to right, var(--naad) 1px, transparent 1px), linear-gradient(to bottom, var(--naad) 1px, transparent 1px); background-size: var(--tegel) var(--tegel); }
.veld--donker { background-color: var(--schaduw); background-image: linear-gradient(to right, rgb(30 8 7 / .5) 1px, transparent 1px), linear-gradient(to bottom, rgb(30 8 7 / .5) 1px, transparent 1px); background-size: var(--tegel) var(--tegel); }
.tg { background-color: var(--d, var(--t2)); box-shadow: inset 1px 1px 0 var(--naad); }
.d0 { --d: var(--t0); } .d1 { --d: var(--t1); } .d2 { --d: var(--t2); } .d3 { --d: var(--t3); } .d4 { --d: var(--t4); }
@media (max-width: 1023.98px) {
  .m0 { --d: var(--t0); } .m1 { --d: var(--t1); } .m2 { --d: var(--t2); } .m3 { --d: var(--t3); } .m4 { --d: var(--t4); }
}
.inhoud { position: relative; z-index: 1; }

/* ---------- Kop ---------- */
.kop { position: absolute; inset: 0 0 auto 0; z-index: 20; height: var(--kop); }
.kop__muur { height: 100%; display: grid; grid-template-columns: repeat(8, var(--tegel)); align-items: center; }
.logo { display: flex; align-items: center; min-height: 44px; width: min(160px, calc(var(--tegel) * .75)); margin-left: var(--pad); line-height: 0; grid-column: 1 / 3; grid-row: 1; justify-self: start; }
.logo img { width: 100%; height: auto; }
.nav { display: contents; }
.nav__groep { display: flex; gap: 20px; grid-row: 1; font: 500 14px/1 var(--tekst); letter-spacing: .01em; }
.nav__groep--links { grid-column: 2 / 4; justify-self: end; padding-right: var(--pad); }
.nav__groep--rechts { grid-column: 6 / 9; justify-self: start; padding-left: var(--pad); }
.nav__groep a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; position: relative; }
.nav__groep a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__groep a:hover::after, .nav__groep a:focus-visible::after { transform: scaleX(1); }
.menuknop { display: none; grid-column: 7 / 9; grid-row: 1; justify-self: end; margin-right: var(--pad); min-height: 44px; min-width: 64px; font: 500 15px/1 var(--tekst); letter-spacing: .01em; }
.menuknop span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
@media (min-width: 1440px) { .nav__groep { font-size: 15px; } }
@media (max-width: 1279.98px) { .nav__groep { display: none; } .menuknop { display: inline-flex; align-items: center; justify-content: flex-end; } .logo { width: min(136px, calc(var(--tegel) * .8)); } }
@media (max-width: 1023.98px) {
  .kop { position: sticky; top: 0; background: var(--schaduw); box-shadow: 0 1px 0 rgb(30 8 7 / .7); }
  .kop__muur { grid-template-columns: 1fr auto; width: 100%; }
  .logo { width: 104px; grid-column: 1; margin-left: 14px; }
  .menuknop { grid-column: 2; margin-right: 6px; padding-inline: 8px; }
}

/* ---------- 1. De deur ---------- */
.deur { overflow: clip; }
.deur .muur {
  height: clamp(calc(var(--tegel) * 4 + var(--kop)), 100svh, calc(var(--tegel) * 5 + var(--kop)));
  display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: 1fr repeat(4, var(--tegel));
}
.deur .veld { align-content: end; }
.deur .veld::after { background-position: left bottom; }
.deur .tg { transition: background-color .7s var(--ease) calc(var(--afstand, 0) * 45ms); }
.licht-uit .deur .tg { background-color: var(--wand); }
.deur__plaat { grid-column: 4 / 6; grid-row: 1 / -1; position: relative; z-index: 2; overflow: clip; background: var(--schaduw); }
.deur__plaat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: filter 1.1s var(--ease); }
.licht-uit .deur__plaat img { filter: brightness(1.18) contrast(.92); }
.zin {
  grid-column: 1 / -1; grid-row: 2 / 6; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  position: relative; z-index: 1; pointer-events: none;
  font: 600 calc(var(--tegel) * .9333)/var(--tegel) var(--display); letter-spacing: -.012em; font-kerning: normal;
}
.paar { display: contents; }
/* Melodrama heeft geen I met schreven: de kapitaal staat er als een kale stok (leest als "leder"). Hier een I met
   haarschreven in Melodrama's eigen maten (stok .11 em, kaphoogte .6925 em, haarlijn gemeten op de E). De echte letter
   staat ernaast voor schermlezers en kopiëren. */
.kap-i { display: inline-block; width: .245em; height: .6925em; vertical-align: baseline; fill: currentColor; overflow: visible; }
.kap-i .schreef-m { display: none; }
@media (max-width: 1023.98px) { .kap-i .schreef-d { display: none; } .kap-i .schreef-m { display: inline; } }
.w { align-self: center; white-space: nowrap; }
.w--ieder { grid-column: 1 / 4; grid-row: 1; justify-self: end; padding-right: var(--pad); }
.w--mens { grid-column: 6 / 9; grid-row: 1; justify-self: start; padding-left: var(--pad); }
.w--is { grid-column: 1 / 4; grid-row: 2; justify-self: end; padding-right: var(--pad); }
.w--mooi { grid-column: 6 / 9; grid-row: 2; justify-self: start; padding-left: var(--pad); }
.w--slot { grid-column: 6 / 9; grid-row: 3; align-self: end; justify-self: start; padding: 0 0 calc(var(--tegel) * .1) var(--pad); font: 400 calc(var(--tegel) * .2889)/1.1 var(--display); letter-spacing: 0; }
.deur__naam { grid-column: 6 / 8; grid-row: 5; align-self: start; padding: 12px 0 0 var(--pad); position: relative; z-index: 3; font: 500 15px/1.4 var(--tekst); letter-spacing: .02em; }
.deur__feiten { grid-column: 1 / 4; grid-row: 4 / 6; align-self: start; position: relative; z-index: 3; padding: calc(var(--tegel) * .16) var(--pad) 0; max-width: 34em; }
.deur__feiten p { font-size: 18px; line-height: 1.55; }
.deur__feiten p + p { margin-top: 2px; }
.deur__feiten strong { font-weight: 500; }
.tekstlink { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; font: 500 16px/1.3 var(--tekst); letter-spacing: .01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; }
.tekstlink .pijl { transition: transform .25s var(--ease); }
.tekstlink:hover .pijl { transform: translateX(4px); }

@media (max-height: 820px) and (min-width: 1024px) {
  .deur__feiten p { font-size: 17px; line-height: 1.5; }
}

/* ---------- Boektegel (desktop) en tegelbalk (telefoon) ---------- */
.boektegel {
  position: fixed; z-index: 30; bottom: 0; right: max(0px, (100% - var(--tegel-vast) * 8) / 2);
  width: var(--tegel-vast); aspect-ratio: 1; background: var(--hoofdband); color: var(--blazer); text-decoration: none;
  transform-origin: 100% 100%; transition: transform .2s var(--ease), opacity .2s linear, visibility 0s linear 0s;
  box-shadow: inset 1px 1px 0 rgb(20 24 38 / .08);
}
.boektegel__tekst { position: absolute; left: 20px; bottom: 18px; font: 500 18px/1.15 var(--tekst); letter-spacing: .005em; transform-origin: 0 100%; transition: transform .2s var(--ease); }
.boektegel .pijl { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; transform-origin: 100% 0; transition: transform .2s var(--ease); }
.boektegel:hover { background: #FFFFFF; }
.boektegel:focus-visible { outline: 2px solid var(--blazer); outline-offset: -8px; box-shadow: none; }
/* Boven de witte muur wordt de tegel een tegel van haar wijnrode wand: op pleister verdwijnt wit (1,2:1). */
.boektegel { transition: transform .2s var(--ease), opacity .2s linear, visibility 0s linear 0s, background-color .2s linear, color .2s linear; }
.boektegel.op-pleister { background: var(--wand); color: var(--hoofdband); box-shadow: none; }
.boektegel.op-pleister:hover { background: var(--t3); }
.boektegel.op-pleister:focus-visible { outline-color: var(--hoofdband); box-shadow: inset 0 0 0 8px var(--wand), inset 0 0 0 10px var(--blazer); }
.boektegel.is-klein { transform: scale(.6667); }
.boektegel.is-klein .boektegel__tekst { transform: scale(1.3); }
.boektegel.is-klein .pijl { transform: scale(1.3); }
.boektegel.is-weg { opacity: 0; visibility: hidden; transition: transform .2s var(--ease), opacity .2s linear, visibility 0s linear .2s; }
.tegelbalk { display: none; }
@media (max-width: 1023.98px) {
  .boektegel { display: none; }
  .tegelbalk {
    display: grid; grid-template-columns: 3fr 1fr; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--schaduw);
  }
  .tegelbalk a { display: flex; align-items: center; gap: 10px; padding: 0 16px; text-decoration: none; font: 500 17px/1 var(--tekst); }
  .tegelbalk__boek { background: var(--hoofdband); color: var(--blazer); justify-content: space-between; }
  .tegelbalk__app { background: var(--schaduw); color: var(--hoofdband); justify-content: center; box-shadow: inset 1px 0 0 rgb(244 242 241 / .18); font-size: 15px !important; }
  .tegelbalk a:focus-visible { outline-offset: -6px; box-shadow: none; }
  .tegelbalk__boek:focus-visible { outline-color: var(--blazer); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: 72px; scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom) + 16px); }
}

/* ---------- Menu als tegelrijen ---------- */
.menu {
  margin: 0; padding: 0; border: 0; background: none; color: var(--hoofdband); max-width: none; max-height: none; overflow: visible;
  position: fixed; inset: var(--kop) max(0px, (100% - var(--tegel-vast) * 8) / 2) auto auto; width: calc(var(--tegel-vast) * 4);
}
.menu::backdrop { background: rgb(26 8 7 / .55); }
.menu__rijen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min(12.5vw, 210px); background: var(--t0); box-shadow: 0 30px 60px -30px rgb(10 3 3 / .8); }
.menu__tegel {
  display: flex; align-items: flex-end; padding: 10px 12px; min-height: 44px; text-decoration: none; text-align: left;
  font: 500 15px/1.2 var(--tekst); letter-spacing: .01em; background: var(--d); color: var(--hoofdband);
  box-shadow: inset 1px 1px 0 var(--naad); position: relative;
}
.menu__tegel--breed { grid-column: span 2; }
.menu__tegel:hover { background: var(--lamp); }
.menu__tegel:focus-visible { outline-offset: -4px; box-shadow: inset 0 0 0 2px var(--blazer); }
.menu__tegel .pijl { position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; opacity: .8; }
.menu[open] .menu__tegel { animation: menu-tegel .18s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes menu-tegel { from { transform: translateY(8px); background-color: var(--wand); opacity: 0; } }
@media (max-width: 1023.98px) {
  .menu { inset: auto 0 calc(64px + env(safe-area-inset-bottom)) 0; width: 100%; }
  .menu__rijen { grid-auto-rows: 25vw; }
}

/* ---------- Sectiekoppen ---------- */
.stelling { font: 600 calc(var(--tegel) * .4444)/1.07 var(--display); letter-spacing: -.012em; text-wrap: balance; }
/* Melodrama zet nooit een cijfer (de nul is doorgestreept): cijfers binnen Melodrama-tekst krijgen Switzer. */
.cijfer { font-family: var(--tekst); font-weight: 300; letter-spacing: -.02em; font-size: .94em; }

/* ---------- 2. De wand: de kiezer ---------- */
.kiezer .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) var(--tegel) repeat(2, var(--tegel)) auto; }
.kiezer__kop { grid-column: 1 / 7; grid-row: 1 / 3; align-self: end; padding: 0 var(--pad) calc(var(--tegel) * .17); position: relative; z-index: 1; }
.tegels { grid-column: 1 / -1; grid-row: 3 / 5; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; position: relative; z-index: 1; }
.tegels li { display: flex; }
.tegels li.tegels__intake { grid-column: span 3; }
.klacht {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px var(--pad);
  background-color: var(--d); color: var(--hoofdband); text-decoration: none; box-shadow: inset 1px 1px 0 var(--naad);
  font: 500 17px/1.25 var(--tekst); letter-spacing: .005em; hyphens: none;
  transition: background-color .18s var(--ease);
}
.klacht__plus { position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; transition: transform .3s var(--ease); }
.klacht:hover, .klacht.is-gekozen { background-color: var(--lamp); }
.klacht:hover .klacht__plus { transform: rotate(90deg); }
.klacht.is-gekozen .klacht__plus { transform: rotate(45deg); }
.klacht:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); z-index: 2; }
.kiezer.heeft-antwoord .klacht:not(.is-gekozen) { background-color: var(--t0); color: var(--dim); box-shadow: inset 1px 1px 0 rgb(24 6 5 / .75); }
.kiezer.heeft-antwoord .klacht:not(.is-gekozen):hover { background-color: var(--t3); color: var(--hoofdband); }
.klacht--intake { background-color: var(--t0); justify-content: space-between; flex-direction: row; align-items: flex-end; gap: 16px; }
.klacht--intake .klacht__vraag { display: block; font: 400 16px/1.45 var(--tekst); color: var(--dim); max-width: 16em; }
.klacht--intake .klacht__actie { display: flex; align-items: center; gap: 10px; font: 500 19px/1.2 var(--tekst); white-space: nowrap; }
.klacht--intake:hover { background-color: var(--lamp); }
.kiezer.heeft-antwoord .klacht--intake { background-color: var(--t0); color: var(--hoofdband); }

/* Het antwoord */
.antwoorden { grid-column: 1 / -1; grid-row: 5; position: relative; z-index: 3; }
.antwoord { display: none; }
html:not(.js) .antwoord:target, .antwoord.is-open { display: grid; }
.antwoord {
  grid-template-columns: calc(var(--tegel) * 2) minmax(0, 1fr); align-items: start; background: var(--schaduw); scroll-margin-top: 24px;
  box-shadow: 0 34px 60px -30px rgb(14 4 4 / .85);
}
.antwoord__naam {
  /* de gekozen tegel, uitgegroeid: dezelfde suèdekorrel als de wand, onder de lamp */
  background: var(--lamp); position: relative; isolation: isolate;
  box-shadow: inset 1px 1px 0 var(--naad);
  padding: calc(var(--tegel) * .2) var(--pad) var(--pad); display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: calc(var(--tegel) * 2);
}
.antwoord__naam::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("foto/suede.webp") left top / calc(var(--tegel) * 4) calc(var(--tegel) * 4); mix-blend-mode: soft-light; opacity: .36; }
.antwoord__naam h3 { font: 600 calc(var(--tegel) * .4)/1.02 var(--display); letter-spacing: -.01em; hyphens: manual; overflow-wrap: break-word; }
.antwoord__naam h3:focus-visible { outline-offset: 6px; }
.antwoord--lang .antwoord__naam h3 { font-size: calc(var(--tegel) * .24); }
.terug { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 2px; font: 500 16px/1.2 var(--tekst); text-decoration: underline; text-underline-offset: .32em; align-self: flex-start; }
.terug .pijl { transform: scaleX(-1); }
.antwoord__tekst { padding: calc(var(--tegel) * .2) calc(var(--tegel) * 1) var(--pad) calc(var(--tegel) * .25); }
.antwoord__label { font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--dim); margin-bottom: 10px; }
.antwoord__aanpak { max-width: 62ch; font-size: 18px; line-height: 1.6; }
.antwoord__blok { margin-top: 34px; }
.antwoord__lijst { margin-top: 14px; }
.rij { display: grid; grid-template-columns: 1fr 5.5em 6.5em 5em; align-items: center; gap: 16px; min-height: 56px; box-shadow: inset 0 -1px 0 rgb(244 242 241 / .1); }
.rij:first-of-type { box-shadow: inset 0 1px 0 rgb(244 242 241 / .1), inset 0 -1px 0 rgb(244 242 241 / .1); }
.rij__naam { font: 500 18px/1.3 var(--tekst); }
.rij__min { font-size: 16px; color: var(--dim); text-align: right; }
.rij__prijs { font: 400 19px/1 var(--tekst); text-align: right; white-space: nowrap; }
.rij__prijs small { font-size: 14px; color: var(--dim); margin-right: 4px; }
.rij__boek { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; justify-content: flex-end; font: 500 16px/1 var(--tekst); text-decoration: underline; text-underline-offset: .3em; }
.rij__boek--stil { text-decoration: none; color: var(--dim); font-weight: 400; font-size: 15px; text-align: right; white-space: normal; line-height: 1.3; }
.antwoord__intake { margin-top: 28px; max-width: 58ch; font-size: 17px; line-height: 1.6; }
.antwoord__intake strong { font-weight: 500; }
.antwoord__acties { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 30px; }
.knop {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 56px; padding: 0 22px;
  background: var(--lamp); color: var(--hoofdband); text-decoration: none; font: 500 17px/1.2 var(--tekst); letter-spacing: .005em;
  transition: background-color .18s var(--ease);
}
.knop:hover { background: #B55654; }
.knop .pijl { height: 21px; position: relative; top: -.7px; transition: transform .25s var(--ease); }
.knop:hover .pijl { transform: translateX(4px); }

/* View Transition: de tegel groeit uit tot het antwoord */
::view-transition { pointer-events: none; }
::view-transition-group(tegel) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); overflow: clip; }
::view-transition-old(tegel), ::view-transition-new(tegel) { height: 100%; width: 100%; object-fit: none; object-position: left top; }
::view-transition-old(tegel) { animation: vt-uit .2s ease-out both; }
::view-transition-new(tegel) { animation: vt-in .32s .08s ease-out both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; }
@keyframes vt-uit { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- 3. Zeventig minuten: de acnebehandeling ---------- */
.acne .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) repeat(5, var(--tegel)) minmax(var(--tegel), auto); }
.acne__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; white-space: nowrap; padding: 0 var(--pad); position: relative; z-index: 1; }
.platen { grid-column: 1 / 7; grid-row: 2 / 8; align-self: start; display: grid; grid-template-columns: repeat(3, calc(var(--tegel) * 2)); grid-template-rows: repeat(2, calc(var(--tegel) * 3)); position: relative; z-index: 1; }
.plaat { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; grid-template-rows: calc(var(--tegel) * 2.5) calc(var(--tegel) * .5); background: var(--wand); box-shadow: inset 1px 1px 0 var(--naad); }
.plaat picture { display: block; min-width: 0; overflow: clip; }
.plaat img { width: 100%; height: 100%; object-fit: cover; }
.plaat figcaption { display: flex; align-items: center; padding: 0 var(--pad); font: 600 calc(var(--tegel) * .14)/1.05 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.plaat__sub { display: block; margin-top: 4px; font: 400 14px/1.3 var(--tekst); letter-spacing: .005em; color: var(--dim); }
.acne__zij { grid-column: 7 / 9; grid-row: 2 / 8; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--tegel) * 2.5) calc(var(--tegel) * 1.5) var(--tegel) minmax(var(--tegel), auto); }
.acne__introblok { display: flex; flex-direction: column; gap: 16px; padding: var(--pad); }
.acne__introblok .acne__noot { margin-top: auto; }
.acne__intro { font-size: 17px; line-height: 1.6; color: var(--dim); }
.prijsblok { padding: 0 var(--pad); }
.prijsblok__naam { font: 500 17px/1.3 var(--tekst); }
.prijsblok__bedrag { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; font: 200 calc(var(--tegel) * .5333)/1 var(--tekst); letter-spacing: -.02em; }
.prijsblok__bedrag small { font: 400 16px/1 var(--tekst); letter-spacing: .01em; color: var(--dim); }
.varianten { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.varianten li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 6px 0; box-shadow: inset 0 -1px 0 rgb(244 242 241 / .12); }
.varianten li span:last-child { white-space: nowrap; }
.varianten .klein { color: var(--dim); font-size: 14px; margin-left: 4px; }
.vergoed { padding: 12px var(--pad) var(--pad); }
.vergoed summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font: 500 16px/1.3 var(--tekst); box-shadow: inset 0 -1px 0 rgb(244 242 241 / .2); }
.vergoed summary::-webkit-details-marker { display: none; }
.vergoed summary .plus { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.vergoed[open] summary .plus { transform: rotate(45deg); }
.vergoed__inhoud { padding-top: 14px; font-size: 15px; line-height: 1.55; }
.vergoed__inhoud ol { list-style: decimal; padding-left: 1.2em; margin-top: 8px; }
.vergoed__inhoud li + li { margin-top: 4px; }
.acne__noot { font-size: 14px; line-height: 1.5; color: var(--dim); }

/* Elke boekactie is een tegel: wit op de wijnrode wand, wijnrood op de witte muur (net als de vaste boektegel). */
.boekblok {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 20px var(--pad); background: var(--hoofdband); color: var(--blazer); text-decoration: none; position: relative;
  font: 500 18px/1.2 var(--tekst); letter-spacing: .005em; transition: background-color .18s var(--ease);
}
.boekblok .pijl { width: 22px; height: 22px; align-self: flex-end; order: -1; transition: transform .25s var(--ease); }
.boekblok:hover { background: #FFFFFF; }
.boekblok:hover .pijl { transform: translateX(4px); }
.boekblok:focus-visible { outline: 2px solid var(--blazer); outline-offset: -8px; box-shadow: none; }
.boekblok--wand { background: var(--wand); color: var(--hoofdband); }
.boekblok--wand:hover { background: var(--t3); }
.pleister .boekblok--wand:focus-visible { outline-color: var(--hoofdband); box-shadow: inset 0 0 0 8px var(--wand), inset 0 0 0 10px var(--blazer); }

/* ---------- De witte muur: pleister ---------- */
.pleister { background: var(--pleister); color: var(--blazer); color-scheme: light; }
.pleister ::selection { background: var(--wand); color: var(--hoofdband); }
.pleister a:focus-visible { outline-color: var(--blazer); box-shadow: 0 0 0 2px var(--hoofdband); }

/* ---------- 4. Het menu: de prijsladder ---------- */
.ladder .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: calc(var(--tegel) * .5) repeat(7, var(--tegel)); }
.ladder__kop { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; align-self: end; padding: 0 var(--pad) calc(var(--tegel) * .12); font: 600 calc(var(--tegel) * .4444)/1.07 var(--display); letter-spacing: -.012em; }
.ladder__lijst { grid-column: 1 / -1; grid-row: 3 / 8; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.ladder__lijst > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.trede { grid-column: 1 / 8; display: grid; grid-template-columns: subgrid; align-items: center; text-decoration: none; color: inherit; position: relative; }
.trede::before { content: ""; position: absolute; inset: 0; background: rgb(108 42 38 / .06); opacity: 0; transition: opacity .2s var(--ease); }
.trede:hover::before { opacity: 1; }
.trede:focus-visible { outline-offset: -4px; box-shadow: none; outline-color: var(--blazer); }
.trede__naam { grid-column: 1 / 4; padding-left: var(--pad); font: 600 calc(var(--tegel) * .3556)/1 var(--display); letter-spacing: -.012em; }
.trede__meta { grid-column: 4 / 6; padding-left: var(--pad); font-size: 16px; line-height: 1.45; color: var(--inkt-2); }
.trede__prijs { grid-column: 6 / 8; justify-self: end; padding-right: var(--pad); display: grid; grid-template-columns: auto 22px calc(var(--tegel) * .5333 * 1.62); align-items: baseline; column-gap: 8px; color: var(--wand); }
.trede__prijs small { font: 400 16px/1 var(--tekst); letter-spacing: .01em; color: var(--inkt-2); }
.trede__euro { grid-column: 2; font: 300 22px/1 var(--tekst); text-align: right; }
.trede__getal { grid-column: 3; text-align: right; font: 200 calc(var(--tegel) * .5333)/1 var(--tekst); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.ladder__voet { grid-column: 1 / 8; grid-row: 8; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad); box-shadow: inset 0 1px 0 var(--naad-licht); }
.ladder__voet p { font-size: 18px; }
.ladder__voet .tekstlink { margin-top: 0; }

/* ---------- 5. Waxen met LYCON ---------- */
.wax .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: calc(var(--tegel) * .5) repeat(3, var(--tegel)) var(--tegel) calc(var(--tegel) * .5); }
.wax__plaat { grid-column: 1 / 3; grid-row: 2 / 5; margin: 0; }
.wax__plaat img { width: 100%; height: 100%; object-fit: cover; }
.wax__tekst { grid-column: 3 / 8; grid-row: 2; padding: 0 var(--pad) 0 calc(var(--pad) + 12px); align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--pad) * 2); }
.wax__kop { grid-column: 1 / -1; font: 600 calc(var(--tegel) * .3556)/1 var(--display); letter-spacing: -.012em; }
.wax__feit { grid-column: 1 / -1; margin-top: 14px; max-width: 64ch; font-size: 17px; line-height: 1.6; color: var(--inkt-2); }
.wax__rijen { grid-column: 3 / 8; grid-row: 3 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--pad) * 2); padding: 0 var(--pad) 0 calc(var(--pad) + 12px); align-content: end; }
.waxgroep h3 { font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--inkt-2); height: 40px; display: flex; align-items: flex-end; padding-bottom: 8px; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.waxgroep h3 em { font-style: normal; color: var(--wand); margin-left: 8px; }
.waxrij { display: grid; grid-template-columns: 1fr 4.2em 3.6em; align-items: baseline; gap: 12px; min-height: calc(var(--tegel) / 4); padding-top: 12px; font-size: 17px; }
.waxrij span:nth-child(2) { color: var(--inkt-2); font-size: 15px; text-align: right; }
.waxrij span:last-child { text-align: right; font-weight: 500; white-space: nowrap; }
.wax__acties { grid-column: 3 / 8; grid-row: 5; display: grid; grid-template-columns: repeat(2, var(--tegel)) 1fr; align-items: center; }
.wax__acties .boekblok { grid-column: 1 / 3; align-self: stretch; }
.wax__acties .tekstlink { margin-top: 0; padding-left: calc(var(--pad) + 12px); }

/* ---------- 6. 5,0 ---------- */
.score .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: calc(var(--tegel) * .5) repeat(2, var(--tegel)) calc(var(--tegel) * .5); }
.score__cijfer { grid-column: 1 / 4; grid-row: 2 / 4; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); }
.score__cijfer h2 { font-weight: 400; }
.score__getal { display: block; font: 200 calc(var(--tegel) * 1.3333)/.86 var(--tekst); letter-spacing: -.045em; color: var(--wand); margin-left: -.04em; }
.score__bron { display: block; margin-top: 18px; font: 500 18px/1.4 var(--tekst); }
.score__meer { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--inkt-2); }
.citaten { grid-column: 4 / 8; grid-row: 2 / 4; display: grid; grid-template-columns: repeat(2, calc(var(--tegel) * 2)); grid-template-rows: repeat(2, var(--tegel)); }
.citaat { padding: 22px var(--pad); display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 1px 0 0 var(--naad-licht); }
.citaat:nth-child(n+3) { box-shadow: inset 1px 0 0 var(--naad-licht), inset 0 1px 0 var(--naad-licht); }
.citaat blockquote p { font: 400 17px/1.5 var(--tekst); text-wrap: pretty; }
.citaat blockquote p::before { content: "\201C"; } .citaat blockquote p::after { content: "\201D"; }
.citaat figcaption { font: 500 14px/1.4 var(--tekst); color: var(--inkt-2); letter-spacing: .01em; }
.score__alle { grid-column: 4 / 8; grid-row: 4; display: flex; align-items: center; padding: 0 var(--pad); }
.score__alle .tekstlink { margin-top: 0; gap: 10px; }

/* ---------- 7. Soumaya ---------- */
.soumaya .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(4, var(--tegel)) calc(var(--tegel) * 3) var(--tegel); }
.soumaya__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; white-space: nowrap; padding: 0 var(--pad); position: relative; z-index: 1; }
.soumaya__tekst { grid-column: 1 / 6; grid-row: 2 / 4; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--pad) * 2); padding: calc(var(--tegel) * .12) var(--pad) 0; align-content: start; }
.soumaya__tekst p { font-size: 17px; line-height: 1.65; }
.soumaya__tekst p + p { margin-top: 14px; }
.soumaya__kol { min-width: 0; }
.soumaya__plaat { grid-column: 7 / 9; grid-row: 2 / 5; margin: 0; position: relative; z-index: 1; }
.soumaya__plaat img { width: 100%; height: 100%; object-fit: cover; }
.keurmerken { grid-column: 1 / 6; grid-row: 4; align-self: center; position: relative; z-index: 1; display: flex; align-items: center; gap: 36px; padding: 0 var(--pad); }
.keurmerken img { height: auto; }
.keurmerken__jaren { font: 500 16px/1.4 var(--tekst); max-width: 13em; }
.keurmerken__jaren small { display: block; font: 400 13px/1.4 var(--tekst); color: var(--dim); margin-top: 2px; }
.soumaya__tekst .tekstlink { margin-top: 18px; }
.plank { grid-column: 1 / -1; grid-row: 5; margin: 0; position: relative; z-index: 1; }
.plank img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.plank__woorden { grid-column: 1 / -1; grid-row: 6; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--pad); }
.plank__woorden ul { display: flex; flex-wrap: wrap; gap: 8px 56px; font: 400 calc(var(--tegel) * .16)/1.1 var(--display); }
.plank__woorden .tekstlink { margin-top: 0; }

/* ---------- 8. Klaar om te stralen? ---------- */
.slot .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(5, var(--tegel)); }
.slot__kop { grid-column: 1 / -1; grid-row: 2 / 4; display: grid; grid-template-rows: subgrid; grid-template-columns: subgrid; position: relative; z-index: 1; font: 600 calc(var(--tegel) * .9333)/var(--tegel) var(--display); letter-spacing: -.015em; }
.slot__kop span { grid-column: 1 / -1; padding-left: var(--pad); white-space: nowrap; align-self: center; }
.slot__kop span + span { grid-column: 3 / -1; }
.info { grid-column: 1 / -1; grid-row: 4 / 6; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; position: relative; z-index: 1; }
.info > * { box-shadow: inset 1px 1px 0 var(--naad); padding: 20px var(--pad); background: var(--d, var(--t1)); display: flex; flex-direction: column; min-width: 0; }
.info h3 { font: 500 14px/1.3 var(--tekst); letter-spacing: .02em; color: var(--dim); margin-bottom: 10px; }
.info p { font-size: 16px; line-height: 1.5; }
.info__uren { grid-column: 1; grid-row: 1 / 3; }
.info__nu { margin-top: auto; padding-top: 12px; font: 500 16px/1.35 var(--tekst); }
.info__nu:empty { display: none; }
.info__adres { grid-column: 2 / 4; grid-row: 1; }
.info__lounge { grid-column: 2; grid-row: 2; padding: 0 !important; margin: 0; overflow: clip; }
.info__lounge img { width: 100%; height: 100%; object-fit: cover; }
.info__route { grid-column: 3; grid-row: 2; justify-content: space-between; text-decoration: none; }
.info__route:hover { background: var(--lamp); }
.info__route span { font: 500 17px/1.25 var(--tekst); }
.info__contact { grid-column: 4 / 6; grid-row: 1 / 3; }
.info__tel { font: 300 calc(var(--tegel) * .1778)/1.1 var(--tekst); letter-spacing: -.01em; text-decoration: none; margin: 2px 0 14px; display: inline-block; }
.info__contact ul li + li { margin-top: 6px; }
.info__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.info__contact ul li + li { margin-top: 0; }
.info__cadeau { grid-column: 6; grid-row: 1 / 3; text-decoration: none; }
.info__cadeau:hover { background: var(--lamp); }
.info__bedrag { display: block; font: 300 calc(var(--tegel) * .1333)/1.15 var(--tekst); letter-spacing: -.01em; margin: 2px 0 12px; }
.info__cadeau .info__klein { font-size: 15px; line-height: 1.45; }
.info__cadeau .pijl { margin-top: auto; align-self: flex-end; width: 20px; height: 20px; }
.info .boekvlak { grid-column: 7 / 9; grid-row: 1 / 3; background: var(--hoofdband); color: var(--blazer); text-decoration: none; justify-content: space-between; padding: calc(var(--tegel) * .14); box-shadow: none; }
.boekvlak .pijl { width: 36px; height: 36px; align-self: flex-end; transition: transform .25s var(--ease); }
.boekvlak:hover .pijl { transform: translate(4px, -4px); }
.boekvlak span { font: 500 calc(var(--tegel) * .1556)/1.08 var(--tekst); letter-spacing: -.01em; }
.boekvlak:hover { background: #FFFFFF; }
.boekvlak:focus-visible { outline-offset: -8px; outline-color: var(--blazer); box-shadow: none; }

/* ---------- Voet: een rij Blazer-tegels ---------- */
.voet { background: var(--blazer); color: var(--hoofdband); }
.voet .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-auto-rows: var(--tegel); }
.voet__tegel { padding: 20px 18px; box-shadow: inset 1px 0 0 rgb(244 242 241 / .1), inset 0 1px 0 rgb(244 242 241 / .1); font-size: 14px; line-height: 1.5; min-width: 0; }
.voet__tegel h2 { font: 500 14px/1.4 var(--tekst); letter-spacing: .02em; color: #A9ABB5; margin-bottom: 6px; }
.voet__tegel a { text-decoration: none; display: inline-block; padding: 1px 0; }
.voet__regel { display: none; }
.voet__tegel a:hover { text-decoration: underline; }
.voet__tegel li { line-height: 1.45; }
.voet__tegel--logo { display: flex; flex-direction: column; justify-content: space-between; }
.voet__tegel--logo img { width: 100%; max-width: 132px; }
.voet__tegel--logo p { color: #A9ABB5; font-size: 13px; }
.voet__tegel--merk { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.voet__tegel--merk img { opacity: .92; }
.voet__klein { color: #A9ABB5; font-size: 13px; }

/* ---------- 1024 tot 1279: smallere tegels in de acnekolom ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .acne__zij { grid-template-rows: calc(var(--tegel) * 2) calc(var(--tegel) * 2) var(--tegel) minmax(var(--tegel), auto); }
  .acne__introblok { padding: 18px var(--pad) 16px; gap: 10px; }
  .acne__intro { font-size: 15px; line-height: 1.5; }
  .acne__noot { font-size: 13px; line-height: 1.4; }
  .plaat figcaption { padding: 0 16px; }
  .plaat__sub { font-size: 12px; margin-top: 2px; white-space: nowrap; }
}

/* ---------- 1600+: de muur centreert op schaduw ---------- */

/* ---------- Telefoon en tablet: vier tegels breed ---------- */
@media (max-width: 1023.98px) {
  body { font-size: 17px; }
  .deur .muur { height: auto; grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: calc(var(--tegel) * .82) repeat(4, var(--tegel)) calc(var(--tegel) * .9) auto auto; }
  .deur .veld { align-content: start; top: calc(var(--tegel) * -.18); }
  .deur .veld::after { background-position: left top; }
  .deur__plaat { grid-column: 2 / 4; grid-row: 2 / 6; }
  .zin { grid-row: 1 / 8; font-size: calc(var(--tegel) * .656); line-height: 1; }
  .paar { display: block; grid-column: 1 / -1; padding: 0 var(--pad); white-space: nowrap; }
  .paar--1 { grid-row: 1; align-self: end; padding-bottom: calc(var(--tegel) * .09); }
  .paar--2 { grid-row: 6; align-self: center; }
  .w { padding: 0 !important; }
  .w--slot { grid-column: 1 / -1; grid-row: 7; padding: 0 var(--pad) !important; font-size: calc(var(--tegel) * .287); line-height: 1.15; align-self: start; }
  .deur__naam { display: none; }
  .deur__feiten { grid-column: 1 / -1; grid-row: 8; padding: 10px var(--pad) 12px; max-width: none; }
  .deur__feiten p { font-size: 15.5px; line-height: 1.5; }
  .deur__feiten .tekstlink { margin-top: 2px; font-size: 16px; }

  .stelling { font-size: calc(var(--tegel) * .4); line-height: 1.02; }
  .kiezer .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto repeat(4, var(--tegel)) auto; }
  .kiezer__kop { grid-column: 1 / -1; grid-row: 1 / 3; padding: calc(var(--tegel) * .7) var(--pad) 24px; }
  .tegels { grid-row: 3 / 7; }
  .klacht { padding: 10px 10px 9px; font-size: 13.5px; line-height: 1.22; hyphens: manual; }
  .klacht__plus { top: 10px; right: 10px; width: 14px; height: 14px; }
  .klacht--intake { padding: 10px 14px 11px; gap: 8px; }
  .klacht--intake .klacht__vraag { font-size: 13.5px; line-height: 1.35; max-width: 11em; }
  .klacht--intake .klacht__actie { font-size: 15.5px; }
  .antwoorden { grid-row: 7; }
  .antwoord { grid-template-columns: 1fr; }
  .antwoord__naam { padding: 22px var(--pad) 14px; gap: 10px; flex-direction: column-reverse; align-items: flex-start; }
  .antwoord__naam h3, .antwoord--lang .antwoord__naam h3 { font-size: calc(var(--tegel) * .38); }
  .terug { font-size: 15px; min-height: 44px; }
  .antwoord__tekst { padding: 20px var(--pad) 28px; }
  .antwoord__aanpak { font-size: 16px; }
  .rij { grid-template-columns: 1fr auto auto; grid-template-areas: "n n n" "m p b"; gap: 0 14px; padding: 12px 0 6px; min-height: 0; }
  .rij__naam { grid-area: n; font-size: 16px; }
  .rij__min { grid-area: m; text-align: left; font-size: 15px; }
  .rij__prijs { grid-area: p; font-size: 17px; }
  .rij__boek { grid-area: b; font-size: 15px; min-height: 44px; }
  .rij__boek--stil { font-size: 14px; }
  .antwoord__acties { gap: 4px 24px; margin-top: 22px; }

  .acne .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto auto; }
  .acne__kop { grid-column: 1 / -1; grid-row: 1; white-space: normal; padding: calc(var(--tegel) * .7) var(--pad) 22px; }
  .platen { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, calc(var(--tegel) * 2)); grid-template-rows: repeat(3, auto); }
  .plaat { grid-template-rows: calc(var(--tegel) * 2.5) auto; }
  .plaat figcaption { padding: 8px var(--pad); min-height: calc(var(--tegel) * .62); font-size: 17px; line-height: 1.12; align-items: center; }
  .plaat__sub { font-size: 13px; }
  .acne__noot { font-size: 13px; }
  .acne__zij { grid-column: 1 / -1; grid-row: 3; display: block; }
  .acne__introblok { padding: 22px var(--pad) 0; }
  .prijsblok { padding: 22px var(--pad) 22px; }
  .boekblok { min-height: var(--tegel); width: 100%; }
  .vergoed { padding: 8px var(--pad) 44px; }
  .prijsblok__bedrag { font-size: 64px; }

  .ladder .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: none; grid-auto-rows: auto; }
  .ladder__kop { grid-column: 1 / -1; grid-row: 1; white-space: normal; padding: calc(var(--tegel) * .7) var(--pad) 18px; font-size: calc(var(--tegel) * .36); }
  .ladder__lijst { grid-row: 2; grid-template-rows: none; grid-template-columns: 1fr; display: block; }
  .trede { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n n" "m p"; gap: 6px 12px; padding: 18px var(--pad) 16px; box-shadow: inset 0 1px 0 var(--naad-licht); }
  .trede__naam { grid-area: n; padding: 0; font-size: 30px; }
  .trede__meta { grid-area: m; padding: 0; font-size: 14px; align-self: end; }
  .trede__prijs { grid-area: p; padding: 0; grid-template-columns: auto 16px calc(48px * 1.62); column-gap: 6px; }
  .trede__prijs small { font-size: 13px; }
  .trede__euro { font-size: 18px; }
  .trede__getal { font-size: 48px; }
  .ladder__voet { grid-column: 1 / -1; grid-row: 3; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px var(--pad) 40px; }
  .ladder__voet p { font-size: 16px; }

  .wax .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto auto auto; }
  .wax__plaat { grid-column: 1 / -1; grid-row: 2; height: calc(var(--tegel) * 4.5); }
  .wax__tekst { grid-column: 1 / -1; grid-row: 1; grid-template-columns: 1fr; padding: calc(var(--tegel) * .45) var(--pad) 22px; }
  .wax__kop { font-size: calc(var(--tegel) * .36); }
  .wax__feit { font-size: 15.5px; }
  .wax__rijen { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; padding: 10px var(--pad) 0; gap: 18px; }
  .waxrij { font-size: 16px; min-height: 0; padding-top: 10px; }
  .wax .muur { grid-template-rows: auto auto auto auto; }
  .wax__acties { grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 28px 0 44px; }
  .wax__acties .tekstlink { padding-left: var(--pad); }

  .score .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto auto; }
  .score__cijfer { grid-column: 1 / -1; grid-row: 1; padding: calc(var(--tegel) * .45) var(--pad) 18px; }
  .score__getal { font-size: calc(var(--tegel) * 1.6); }
  .citaten { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr; grid-template-rows: none; }
  .citaat, .citaat:nth-child(n+3) { padding: 18px var(--pad); gap: 10px; box-shadow: inset 0 1px 0 var(--naad-licht); }
  .citaat blockquote p { font-size: 17px; }
  .score__alle { grid-column: 1 / -1; grid-row: 3; padding: 12px var(--pad) 44px; box-shadow: none; }

  .soumaya .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto calc(var(--tegel) * 4.5) auto auto auto calc(var(--tegel) * 2) auto; }
  .soumaya__kop { grid-column: 1 / -1; grid-row: 1; white-space: normal; padding: calc(var(--tegel) * .7) var(--pad) 22px; }
  .soumaya__plaat { grid-column: 2 / 5; grid-row: 2; }
  .soumaya__tekst { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; padding: 26px var(--pad) 0; }
  .soumaya__tekst p { font-size: 16px; }
  .soumaya__kol + .soumaya__kol { margin-top: 14px; }
  .keurmerken { grid-column: 1 / -1; grid-row: 4; padding: 28px var(--pad) 0; gap: 22px; flex-wrap: wrap; }
  .plank { grid-row: 6; }
  .plank__woorden { grid-row: 7; flex-direction: column; align-items: flex-start; padding: 20px var(--pad) 36px; }
  .plank__woorden ul { flex-direction: column; gap: 4px; font-size: 22px; }

  .slot .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: calc(var(--tegel) * .7) auto auto; }
  .slot__kop { grid-row: 2; display: block; font-size: calc(var(--tegel) * .58); line-height: 1.02; padding: 0 var(--pad) 26px; }
  .slot__kop span { display: block; padding: 0; }
  .info { grid-row: 3; grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: none; grid-auto-rows: minmax(var(--tegel), auto); }
  .info > * { padding: 14px var(--pad); }
  .info__uren { grid-column: 1 / 3; grid-row: auto / span 2; }
  .info__adres { grid-column: 3 / 5; grid-row: auto / span 2; }
  .info__lounge { grid-column: 1 / 3; grid-row: auto / span 2; }
  .info__route { grid-column: 3 / 5; grid-row: auto / span 2; }
  .info__contact { grid-column: 1 / 5; grid-row: auto / span 2; }
  .info__cadeau { grid-column: 1 / 5; grid-row: auto; }
  .info .boekvlak { grid-column: 1 / 5; grid-row: auto / span 2; padding: 18px var(--pad); }
  .info p { font-size: 15px; }
  .info__tel { font-size: 30px; }
  .boekvlak span { font-size: 30px; }

  .voet .muur { grid-template-columns: repeat(4, var(--tegel)); grid-auto-rows: minmax(var(--tegel), auto); }
  .voet__tegel { padding: 18px 16px; }
  .voet__tegel li a, .voet__tegel h2 a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .voet__tegel h2 { margin-bottom: 0; }
  .info__contact ul a, .info__tel { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Telefoon: twee rijen van vier voettegels, een link per tegel; de rest als gewone regel eronder (brief §7). */
@media (max-width: 639.98px) {
  .voet .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: repeat(2, var(--tegel)) auto; grid-auto-rows: auto; }
  .voet__tegel { grid-column: span 1; padding: 10px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 14px; line-height: 1.2; }
  .voet__tegel h2 { font: 500 14px/1.2 var(--tekst); color: var(--hoofdband); letter-spacing: .005em; }
  .voet__tegel ul, .voet__klein, .voet__tegel--logo p, .voet__tegel--merk a { display: none; }
  .voet__tegel:not(:has(h2)) ul { display: block; }
  .voet__tegel:not(:has(h2)) li:not(:first-child) { display: none; }
  .voet__tegel--logo { justify-content: center; }
  .voet__tegel--merk { justify-content: center; gap: 8px; }
  .voet__tegel--merk img { max-width: 100%; height: auto; }
  .voet__regel { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 0 20px; padding: 14px var(--pad) 24px; font-size: 14px; line-height: 1.4; color: #A9ABB5; }
  .voet__regel a { color: var(--hoofdband); display: inline-flex; align-items: center; min-height: 44px; }
  .voet__regel span { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .boekblok { min-height: calc(var(--tegel) * .5); flex-direction: row; align-items: center; }
  .boekblok .pijl { order: 0; align-self: center; }
  .deur .muur { grid-template-rows: calc(var(--tegel) * .6) repeat(3, var(--tegel)) calc(var(--tegel) * .56) auto; }
  .deur .veld { top: calc(var(--tegel) * -.4); }
  .deur__plaat { grid-row: 2 / 5; }
  .deur__plaat img { object-position: 50% 50%; }
  .zin { grid-row: 1 / 6; font-size: calc(var(--tegel) * .5); }
  .paar--1 { padding-bottom: calc(var(--tegel) * .07); }
  .paar--2 { grid-row: 5; align-self: baseline; }
  .w--slot { grid-row: 5; justify-self: end; align-self: baseline; font-size: calc(var(--tegel) * .24); }
  .deur__feiten { grid-row: 6; padding-top: 6px; }
  .deur__feiten p { font-size: 17px !important; }
  .deur__feiten .tekstlink { margin-top: 0; }
  .wax__plaat { grid-column: 2 / 5; height: calc(var(--tegel) * 4.5); }
  .voet .muur { grid-auto-rows: minmax(var(--tegel), auto); }
  .voet__tegel { grid-column: span 1; padding: 18px 16px; }
  .klacht { padding: 18px 18px 16px; font-size: 17px; }
  .klacht--intake .klacht__vraag { font-size: 16px; max-width: 16em; }
  .klacht--intake .klacht__actie { font-size: 19px; }
  .plaat figcaption { font-size: 24px; }
  .info > * { padding: 22px var(--pad); }
}

/* ---------- Bewegingsvoorkeur ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .kop, .boektegel, .tegelbalk, .menu, .veld { display: none !important; }
  body, .wand, .pleister, .voet { background: #fff !important; color: #000 !important; }
}

/* Zonder script: geen dode menuknop; onder 1280 px draagt de voet dan alle links (alle acht staan erin). */
html:not(.js) .menuknop { display: none !important; }

/* =====================================================================
   Binnenpagina's (brief §8). Zelfde muur, zelfde tegel; elke paginasoort een eigen compositie.
   ===================================================================== */
.dim { color: var(--dim); }
.pleister .dim { color: var(--inkt-2); }
.aanloop { font: 300 24px/1.45 var(--tekst); letter-spacing: -.003em; max-width: 34em; text-wrap: pretty; }
.kleinkop { font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--dim); margin: 0 0 10px; }
.pleister .kleinkop { color: var(--inkt-2); }
* + .kleinkop { margin-top: 32px; }
.vlak__kop { grid-column: 1 / -1; font: 600 calc(var(--tegel) * .3)/1.05 var(--display); letter-spacing: -.012em; text-wrap: balance; padding: 0 var(--pad); margin-bottom: 34px; }
.pleister .muur > p, .pleister .muur li, .pleister .muur dd { text-wrap: pretty; }
.nav__groep a[aria-current="page"]::after { transform: scaleX(1); }
.menu__tegel[aria-current="page"] { background: var(--lamp); }

/* Lijsten op de naden van de muur (geen bolletjes, geen leaders) */
.naadlijst li { padding: 11px 0 12px; font-size: 17px; line-height: 1.45; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.naadlijst li:first-child { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.naadlijst--wand li { box-shadow: inset 0 -1px 0 rgb(244 242 241 / .14); }
.naadlijst--wand li:first-child { box-shadow: inset 0 1px 0 rgb(244 242 241 / .14), inset 0 -1px 0 rgb(244 242 241 / .14); }
.vormen > div { padding: 12px 0 13px; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.vormen > div:first-child { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.vormen dt { font: 500 17px/1.35 var(--tekst); }
.vormen dd { margin: 3px 0 0; font-size: 16px; line-height: 1.5; color: var(--inkt-2); }
.vormen--ruim { margin-top: 28px; }

/* Vraag en antwoord */
.faq { grid-column: 1 / 7; padding: 0 var(--pad); }
.faq__item { box-shadow: inset 0 -1px 0 var(--naad-licht); }
.faq__item:first-child { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 14px 0; font: 500 18px/1.35 var(--tekst); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover span { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.faq__item summary:focus-visible { outline: 2px solid var(--blazer); outline-offset: 2px; box-shadow: 0 0 0 2px var(--hoofdband); }
.faq__item .plus { width: 18px; height: 18px; flex: none; color: var(--wand); transition: transform .3s var(--ease); }
.faq__item[open] .plus { transform: rotate(45deg); }
.faq__item p { padding: 0 48px 22px 0; font-size: 17px; line-height: 1.6; max-width: 62ch; color: var(--inkt-2); }

/* Prijsrijen op pleister */
.pleister .rij { box-shadow: inset 0 -1px 0 var(--naad-licht); }
.pleister .rij:first-of-type { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.pleister .rij__min, .pleister .rij__prijs small { color: var(--inkt-2); }
.rij__naam a { text-decoration: none; }
.rij__naam a:hover { text-decoration: underline; }
.pleister .vergoed { padding: 18px 0 0; }
.pleister .vergoed summary { box-shadow: inset 0 -1px 0 var(--naad-licht); }
.pleister .vergoed summary:focus-visible { outline-color: var(--blazer); box-shadow: 0 0 0 2px var(--hoofdband); }

/* ---------- De paginakop: een tegelrij met de naam ---------- */
.paginakop .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--kop) minmax(var(--tegel), auto); }
.paginakop .veld { align-content: end; }
.paginakop .veld::after { background-position: calc(var(--tegel) * 1.9) calc(var(--tegel) * .4); }
.kruimel { grid-column: 1 / 6; grid-row: 2; align-self: start; position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 10px; padding: 18px var(--pad) 0; font: 500 15px/1.3 var(--tekst); color: var(--dim); }
.kruimel a { color: var(--hoofdband); text-underline-offset: .28em; display: inline-flex; align-items: center; min-height: 32px; margin-top: -6px; }
.kruimel span[aria-current] { display: none; }
.paginakop h1 { grid-column: 1 / 6; grid-row: 2; align-self: end; position: relative; z-index: 1; padding: 52px var(--pad) calc(var(--tegel) * .1); font: 600 calc(var(--tegel) * .4444)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.paginakop h1.lang { grid-column: 1 / 7; font-size: calc(var(--tegel) * .3); line-height: 1.04; }
.paginakop__bij { grid-column: 6 / 9; grid-row: 2; align-self: end; position: relative; z-index: 1; padding: 0 var(--pad) calc(var(--tegel) * .14); font-size: 17px; line-height: 1.5; color: var(--hoofdband); max-width: 30em; text-wrap: pretty; }
.paginakop h1.lang + .paginakop__bij { grid-column: 7 / 9; }

/* ---------- De slotrij ---------- */
.slotrij .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-auto-rows: var(--tegel); }
.slotrij a { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: relative; padding: 20px var(--pad); text-decoration: none; background: var(--d, var(--t1)); box-shadow: inset 1px 1px 0 var(--naad); font: 500 17px/1.25 var(--tekst); transition: background-color .18s var(--ease); }
.slotrij a .pijl { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; }
.slotrij a:hover { background: var(--lamp); }
.slotrij a:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.slotrij__boek { grid-column: span 2; background: var(--hoofdband) !important; color: var(--blazer); font-size: 22px !important; }
.slotrij__boek:hover { background: #FFFFFF !important; }
.slotrij__boek:focus-visible { outline-color: var(--blazer); }
.slotrij a:nth-child(2), .slotrij__tegel--breed { grid-column: span 2; }
.slotrij__klein { font: 400 14px/1.35 var(--tekst); color: var(--dim); }
.slotrij__tel { font: 300 calc(var(--tegel) * .1778)/1.1 var(--tekst); letter-spacing: -.01em; }

/* ---------- Huidproblemen: de wand + de rij ---------- */
.kiezer--pagina .kiezer__kop { font-size: calc(var(--tegel) * .3556); }
.rijtje .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .5) 0; }
.rijtje__kop { grid-column: 1 / 5; padding: 0 var(--pad); font: 600 calc(var(--tegel) * .3)/1.05 var(--display); letter-spacing: -.012em; }
.rijtje__uitleg { grid-column: 5 / 9; padding: 0 var(--pad); align-self: end; font-size: 16px; line-height: 1.55; color: var(--inkt-2); }
.rijtje__lijst { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-top: 40px; }
.rijtje__lijst li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.rijtje__item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; min-height: calc(var(--tegel) * .5); text-decoration: none; position: relative; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.rijtje__lijst li:first-child .rijtje__item { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.rijtje__item::before { content: ""; position: absolute; inset: 0; background: rgb(108 42 38 / .06); opacity: 0; transition: opacity .2s var(--ease); }
.rijtje__item:hover::before { opacity: 1; }
.rijtje__item:focus-visible { outline-offset: -4px; outline-color: var(--blazer); box-shadow: none; }
.rijtje__naam { grid-column: 1 / 4; padding: 14px var(--pad); font: 600 calc(var(--tegel) * .16)/1.1 var(--display); letter-spacing: -.005em; }
.rijtje__kort { grid-column: 4 / 7; padding: 0 var(--pad); font-size: 16px; line-height: 1.45; color: var(--inkt-2); }
.rijtje__prijs { grid-column: 7 / 8; padding: 0 var(--pad); font-size: 16px; white-space: nowrap; color: var(--wand); }
.rijtje__item .pijl { grid-column: 8; justify-self: end; margin-right: var(--pad); width: 20px; height: 20px; transition: transform .25s var(--ease); }
.rijtje__item:hover .pijl { transform: translateX(4px); }

/* ---------- Huidprobleem: het dossier ---------- */
.dossier .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(3, var(--tegel)) auto; }
.dossier__tekst { grid-column: 1 / 6; grid-row: 1 / 5; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) calc(var(--tegel) * .4); }
.dossier__tekst p + p { margin-top: 18px; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--dim); }
.dossier__plaat { grid-column: 7 / 9; grid-row: 1 / 4; margin: 0; position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: clip; background: var(--schaduw); }
.dossier__plaat picture { display: block; min-height: 0; }
.dossier__plaat img { width: 100%; height: 100%; object-fit: cover; }
.dossier__plaat figcaption { padding: 8px 12px; font-size: 13px; line-height: 1.35; color: var(--dim); background: var(--schaduw); }
.dossier__plaat--liggend { grid-column: 6 / 9; }
.dossier__plaat--liggend + * { display: none; }
.dossier:has(.dossier__plaat--liggend) .dossier__tekst { grid-column: 1 / 6; }
.dossier__kort { grid-column: 7 / 9; grid-row: 1 / 3; position: relative; z-index: 1; background: var(--t3); box-shadow: inset 1px 1px 0 var(--naad); display: flex; align-items: flex-end; padding: var(--pad); font: 400 calc(var(--tegel) * .16)/1.12 var(--display); text-wrap: balance; }

.oorzaak .muur, .verwacht .muur, .kenmerk .muur, .nazorg .muur, .drieluik .muur, .prijsmuur .muur, .brazprijs .muur, .merk .muur, .assortiment .muur, .bonidee .muur, .kamer .muur, .beleid .muur, .intake .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .5) 0; align-content: start; }
.oorzaak__links { grid-column: 1 / 5; padding: 0 var(--pad); }
.oorzaak__rechts { grid-column: 5 / 9; padding: 0 var(--pad); }

.aanpak .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) auto auto; padding-bottom: calc(var(--tegel) * .5); }
.aanpak__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.aanpak__tekst { grid-column: 1 / 5; grid-row: 2; position: relative; z-index: 1; padding: 0 var(--pad); }
.aanpak__tekst p { font-size: 19px; line-height: 1.6; max-width: 46ch; }
.aanpak__let { margin-top: 18px; font-size: 16px !important; color: var(--dim); }
.aanpak__let strong { color: var(--hoofdband); font-weight: 500; }
.aanpak__delen { grid-column: 5 / 9; grid-row: 2; position: relative; z-index: 1; padding: 4px var(--pad) 0; }
.aanpak__plan { grid-column: 1 / 7; grid-row: 3; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) 0; }
.aanpak__acties { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; margin-top: 22px; }
.aanpak__acties .vergoed { padding: 0; min-width: min(100%, 360px); }

.verwacht__tekst { grid-column: 1 / 7; padding: 0 var(--pad); font: 300 21px/1.55 var(--tekst); max-width: 52ch; }
.verwacht__faqkop, .nazorg__faqkop, .drieluik__faqkop { margin-top: calc(var(--tegel) * .45); }

/* ---------- Koppels: verder op de wand ---------- */
.koppels .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: calc(var(--tegel) * .55) var(--tegel); }
.koppels__kop { grid-column: 1 / -1; grid-row: 1; align-self: end; position: relative; z-index: 1; padding: 0 var(--pad) 14px; font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--dim); }
.koppels__rij { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; position: relative; z-index: 1; }
.koppels__rij li { display: flex; }
.koppels__rij li.breed { grid-column: span 2; }
.koppel { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: relative; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); text-decoration: none; transition: background-color .18s var(--ease); }
.koppel:hover { background: var(--lamp); }
.koppel:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.koppel__sub { font-size: 14px; line-height: 1.3; color: var(--dim); }
.koppel__naam { font: 600 calc(var(--tegel) * .14)/1.1 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.koppel .pijl { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; }

/* ---------- Behandelingen: overzicht ---------- */
.uitgelicht .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) calc(var(--tegel) * 3) calc(var(--tegel) * .5); }
.uitgelicht__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.uitgelicht__rij { grid-column: 1 / 7; grid-row: 2; display: grid; grid-template-columns: repeat(3, calc(var(--tegel) * 2)); position: relative; z-index: 1; }
.uitgelicht__rij li { display: flex; }
.uitgelicht__item { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: calc(var(--tegel) * 2.4) 1fr; position: relative; text-decoration: none; background: var(--t1); box-shadow: inset 1px 1px 0 var(--naad); transition: background-color .18s var(--ease); }
.uitgelicht__item picture { grid-column: 1 / -1; display: block; overflow: clip; }
.uitgelicht__item img { width: 100%; height: 100%; object-fit: cover; }
.uitgelicht__naam { align-self: center; padding: 0 0 0 var(--pad); font: 600 calc(var(--tegel) * .16)/1.05 var(--display); }
.uitgelicht__prijs { align-self: center; padding: 0 var(--pad); font-size: 16px; color: var(--dim); white-space: nowrap; }
.uitgelicht__item .pijl { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; color: var(--hoofdband); filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
.uitgelicht__item:hover { background: var(--lamp); }
.uitgelicht__item:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.uitgelicht__intro { grid-column: 7 / 9; grid-row: 2; position: relative; z-index: 1; padding: 0 var(--pad); font-size: 17px; line-height: 1.6; color: var(--dim); }

.groep .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .45) 0; box-shadow: inset 0 1px 0 var(--naad-licht); }
.groep:first-of-type .muur, .uitgelicht + .groep .muur { box-shadow: none; }
.groep__zij { grid-column: 1 / 4; padding: 0 var(--pad); }
.groep__kop { font: 600 calc(var(--tegel) * .2)/1.05 var(--display); letter-spacing: -.008em; margin-bottom: 14px; text-wrap: balance; }
.groep__zij p { font-size: 16px; line-height: 1.6; color: var(--inkt-2); max-width: 32ch; }
.groep__lijst { grid-column: 4 / 9; padding-right: var(--pad); }
.behrij { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em 7em 28px; grid-template-areas: "n m p a" "k k k a"; column-gap: 18px; align-items: baseline; padding: 18px 0 18px var(--pad); text-decoration: none; position: relative; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.groep__lijst li:first-child .behrij { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.behrij::before { content: ""; position: absolute; inset: 0; background: rgb(108 42 38 / .06); opacity: 0; transition: opacity .2s var(--ease); }
.behrij:hover::before { opacity: 1; }
.behrij:focus-visible { outline-offset: -4px; outline-color: var(--blazer); box-shadow: none; }
.behrij__naam { grid-area: n; font: 600 calc(var(--tegel) * .16)/1.1 var(--display); }
.behrij__kort { grid-area: k; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--inkt-2); }
.behrij__min { grid-area: m; text-align: right; font-size: 15px; color: var(--inkt-2); }
.behrij__prijs { grid-area: p; text-align: right; font-size: 17px; font-weight: 500; color: var(--wand); white-space: nowrap; }
.behrij .pijl { grid-area: a; align-self: center; justify-self: end; width: 20px; height: 20px; margin-right: 4px; }

/* ---------- Behandeling: de kaart ---------- */
.kaart .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(3, var(--tegel)) auto; }
.kaart__tekst { grid-column: 1 / 6; grid-row: 1 / 5; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) calc(var(--tegel) * .4); }
.kaart__tekst p + p { margin-top: 18px; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--dim); }
.kaart__tekst .aanloop + p { margin-top: 26px; }
.kaart__prijs { grid-column: 7 / 9; grid-row: 1 / 3; position: relative; z-index: 1; padding: 20px var(--pad); background: var(--t3); box-shadow: inset 1px 1px 0 var(--naad); display: flex; flex-direction: column; }
.kaart__label { font: 500 15px/1.3 var(--tekst); color: var(--hoofdband); }
.kaart__bedrag { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font: 200 calc(var(--tegel) * .5333)/1 var(--tekst); letter-spacing: -.03em; }
.kaart__bedrag small { font: 300 22px/1 var(--tekst); letter-spacing: 0; }
.kaart__rijen { margin-top: auto; font-size: 14.5px; line-height: 1.4; }
.kaart__rijen li { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 5px 0; box-shadow: inset 0 -1px 0 rgb(244 242 241 / .18); }
.kaart__rijen li:first-child { box-shadow: inset 0 1px 0 rgb(244 242 241 / .18), inset 0 -1px 0 rgb(244 242 241 / .18); }
.kaart__rijen .klein { color: var(--hoofdband); opacity: .82; font-size: 13.5px; margin-left: 2px; white-space: nowrap; }
.kaart__rijen li span:last-child { white-space: nowrap; }
.kaart__boek { grid-column: 7 / 9; grid-row: 3; position: relative; z-index: 1; }
.kaart--kort .muur { grid-template-rows: repeat(3, var(--tegel)); }

.verloop .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) auto auto auto; padding-bottom: calc(var(--tegel) * .5); align-content: start; }
.verloop__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.verloop__intro { grid-column: 1 / 6; grid-row: 2; position: relative; z-index: 1; padding: 0 var(--pad) 30px; font-size: 18px; line-height: 1.6; max-width: 58ch; }
.stappen { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); grid-auto-rows: minmax(var(--tegel), auto); position: relative; z-index: 1; counter-reset: stap; }
.met-plaat .stappen { grid-column: 1 / 7; grid-template-columns: repeat(3, calc(var(--tegel) * 2)); }
.stap { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); }
.stap__naam { font: 600 calc(var(--tegel) * .14)/1.08 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.stap__tekst { font-size: 15px; line-height: 1.5; color: var(--hoofdband); opacity: .9; }
.verloop__na { grid-column: 1 / 6; grid-row: 4; position: relative; z-index: 1; padding: 26px var(--pad) 0; font-size: 17px; line-height: 1.6; color: var(--dim); max-width: 58ch; }
.verloop__plaat { grid-column: 7 / 9; grid-row: 2 / 5; align-self: start; height: calc(var(--tegel) * 3); margin: 0; position: relative; z-index: 1; overflow: clip; }
.verloop__plaat img { width: 100%; height: 100%; object-fit: cover; }
.verloop .met-plaat .verloop__plaat { grid-row: 3 / 5; }
.verloop__plaat--liggend, .verloop .met-plaat .verloop__plaat--liggend { grid-column: 6 / 9; grid-row: 2; height: calc(var(--tegel) * 2); margin-bottom: 30px; }
.met-plaat:has(.verloop__plaat--liggend) .stappen { grid-column: 1 / -1; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); }
.verloop--tekst .muur { grid-template-rows: var(--tegel) auto; }
.verloop--tekst .verloop__intro { padding-bottom: 0; }

.kenmerk__links { grid-column: 1 / 5; padding: 0 var(--pad); }
.kenmerk__rechts { grid-column: 5 / 9; padding: 0 var(--pad); }
.kenmerk__rechts p { font-size: 17px; line-height: 1.6; max-width: 52ch; }
.kenmerk__rechts p + p { margin-top: 14px; }
.kenmerk__rechts p + .naadlijst, .kenmerk__rechts .kleinkop + p { margin-top: 0; }
.kenmerk__rechts p + .naadlijst { margin-top: 18px; }

.nazorg .muur { box-shadow: inset 0 1px 0 var(--naad-licht); }
.nazorg__lijsten { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 calc(var(--pad) * 2); padding: 0 var(--pad); }
.nazorg__lijsten:empty { display: none; }
.nazorg__kuur { grid-column: 1 / 7; padding: 30px var(--pad) 0; font: 300 21px/1.5 var(--tekst); max-width: 50ch; }
.nazorg__prijzen { grid-column: 1 / 7; padding: calc(var(--tegel) * .3) var(--pad) 0; }
.nazorg__cadeau { margin-top: 18px; font-size: 16px; color: var(--inkt-2); }

/* ---------- Waxen ---------- */
.waxkop .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(3, var(--tegel)) auto; }
.waxkop__plaat { grid-column: 1 / 3; grid-row: 1 / 4; margin: 0; position: relative; z-index: 1; overflow: clip; }
.waxkop__plaat img { width: 100%; height: 100%; object-fit: cover; }
.waxkop__tekst { grid-column: 3 / 7; grid-row: 1 / 5; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) calc(var(--tegel) * .4) calc(var(--pad) + 12px); }
.waxkop__tekst p + p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--dim); max-width: 58ch; }
.waxkop__tekst .aanloop + p { margin-top: 24px; }
.waxkop__lycon { grid-column: 7 / 9; grid-row: 1 / 4; position: relative; z-index: 1; padding: 20px var(--pad); background: var(--t1); box-shadow: inset 1px 1px 0 var(--naad); }
.waxkop__lycon .kleinkop { font: 600 calc(var(--tegel) * .16)/1 var(--display); color: var(--hoofdband); letter-spacing: 0; margin-bottom: 14px; }
.waxkop__lycon p { font-size: 15px; line-height: 1.55; }
.waxkop__lycon p + p { margin-top: 10px; color: var(--dim); }

.prijsmuur__noot { grid-column: 1 / -1; padding: 0 var(--pad); margin: -20px 0 30px; font-size: 15px; color: var(--inkt-2); }
.prijsmuur__kolommen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); }
.prijskolom { padding: 0 var(--pad); box-shadow: inset 1px 0 0 var(--naad-licht); }
.prijskolom:first-child { box-shadow: none; }
.prijskolom h3 { font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--inkt-2); padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.noot { font-weight: 500; color: var(--wand); margin-left: 6px; letter-spacing: .01em; }
.prijskolom li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 9px 0; font-size: 15.5px; line-height: 1.35; }
.prijskolom .m { font-size: 13.5px; color: var(--inkt-2); white-space: nowrap; }
.prijskolom .p { font-weight: 500; white-space: nowrap; text-align: right; min-width: 3.6em; }
.prijsmuur__acties { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, var(--tegel)) 1fr; align-items: center; margin-top: 40px; }
.prijsmuur__acties .boekblok { grid-column: 1 / 3; min-height: calc(var(--tegel) * .55); flex-direction: row; align-items: center; }
.prijsmuur__acties .boekblok .pijl { order: 0; align-self: center; }
.prijsmuur__acties .tekstlink { margin: 0; padding-left: calc(var(--pad) + 12px); }

.drieluik__lead { grid-column: 1 / 7; padding: 0 var(--pad); font: 300 21px/1.55 var(--tekst); max-width: 54ch; }
.drieluik__lead p + p { margin-top: 14px; }
div.drieluik__lead { font-size: 19px; }
.drieluik__kolommen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--pad) * 2); padding: 34px var(--pad) 0; }
.drieluik__kolommen--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drieluik .faq { grid-column: 1 / 7; }

/* ---------- Brazilian wax ---------- */
.braz .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(2, var(--tegel)); }
.braz__lead { grid-column: 1 / 5; grid-row: 1 / 3; position: relative; z-index: 1; padding: calc(var(--tegel) * .25) var(--pad); align-self: start; font-size: 22px; }
.braz__keuze { grid-row: 1 / 3; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); }
.braz__keuze--a { grid-column: 5 / 7; }
.braz__keuze--b { grid-column: 7 / 9; }
.braz__keuze h2 { font: 600 calc(var(--tegel) * .2)/1 var(--display); }
.braz__keuze p { font-size: 15.5px; line-height: 1.5; }
.braz__prijs { margin-top: auto; font: 300 28px/1 var(--tekst) !important; }
.braz__prijs span { font-size: 15px; color: var(--dim); margin-left: 6px; }

.sfeer .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) repeat(3, var(--tegel)) calc(var(--tegel) * .5); }
.sfeer__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.sfeer figure { margin: 0; position: relative; z-index: 1; overflow: clip; }
.sfeer figure img { width: 100%; height: 100%; object-fit: cover; }
.sfeer__a { grid-column: 1 / 3; grid-row: 2 / 5; }
.sfeer__b { grid-column: 3 / 5; grid-row: 2 / 5; }
.sfeer__c { grid-column: 5 / 9; grid-row: 2 / 4; }
.sfeer__noot { grid-column: 5 / 9; grid-row: 4; align-self: end; position: relative; z-index: 1; padding: 0 var(--pad) 20px; font-size: 15px; color: var(--dim); }

.brazprijs__rijen { grid-column: 1 / 6; padding: 0 var(--pad); }
.brazprijs__rijen .kleinkop { margin-top: 34px; }
.brazprijs__lycon { grid-column: 6 / 9; padding: 0 var(--pad); }
.brazprijs__lycon p { font-size: 16px; line-height: 1.6; color: var(--inkt-2); }
.brazprijs__lycon p + p { margin-top: 12px; }

/* ---------- Tarieven ---------- */
.spring .muur { padding: 0; }
.spring ul { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-auto-rows: calc(var(--tegel) * .5); }
.spring a, .spring button { display: flex; align-items: flex-end; padding: 12px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); text-decoration: none; font: 500 15.5px/1.2 var(--tekst); text-align: left; width: 100%; transition: background-color .18s var(--ease); }
.spring a:hover, .spring button:hover { background: var(--lamp); }
.spring a:focus-visible, .spring button:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--blazer); }
.tarief { padding-bottom: calc(var(--tegel) * .4); }
.tarief__groep { scroll-margin-top: 16px; }
.tarief__groep .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: 40px 0; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.tarief__kop { grid-column: 1 / 3; padding: 4px var(--pad) 0; font: 600 calc(var(--tegel) * .17)/1.08 var(--display); text-wrap: balance; }
.tarief__kop .noot { display: block; margin: 8px 0 0; font: 500 14px/1.3 var(--tekst); }
.tarief__tabel { grid-column: 3 / 9; border-collapse: collapse; margin-right: var(--pad); width: calc(100% - var(--pad)); }
.tarief__tabel tr { box-shadow: inset 0 -1px 0 var(--naad-licht); }
.tarief__tabel tbody tr:first-child { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.tarief__tabel th, .tarief__tabel td { padding: 12px 0; text-align: left; font-weight: 400; font-size: 17px; line-height: 1.4; vertical-align: baseline; }
.tarief__tabel th { padding-left: var(--pad); }
.tarief__tabel th a { text-decoration: none; }
.tarief__tabel th a:hover { text-decoration: underline; }
.tarief__tabel td { text-align: right; white-space: nowrap; }
.tarief__tabel td:nth-of-type(1) { width: 7em; font-size: 15px; color: var(--inkt-2); }
.tarief__tabel td:nth-of-type(2) { width: 7.5em; font-weight: 500; padding-right: 4px; }
.tarief__tabel td small { font-weight: 400; font-size: 14px; color: var(--inkt-2); }
.tarief__voet { padding: 34px var(--pad) 0; display: grid; gap: 8px; }
.tarief__voet p { font-size: 16px; line-height: 1.55; color: var(--inkt-2); max-width: 70ch; }
.tarief__voet a { color: var(--blazer); }

/* ---------- Producten ---------- */
.plankband__beeld { margin: 0; }
.plankband__beeld img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; object-position: 50% 60%; }
.merk__kop { grid-column: 1 / 7; padding: 0 var(--pad); font: 600 calc(var(--tegel) * .2667)/1.1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.merk__tekst { grid-column: 1 / -1; columns: 2; column-gap: calc(var(--pad) * 3); padding: 40px var(--pad) 0; }
.merk__tekst p { font-size: 17px; line-height: 1.65; color: var(--inkt-2); break-inside: avoid; margin-bottom: 16px; }
.assortiment .muur { box-shadow: inset 0 1px 0 var(--naad-licht); }
.assortiment__groep { padding: 0 var(--pad); }
.assortiment__groep:nth-of-type(1) { grid-column: 1 / 3; }
.assortiment__groep:nth-of-type(2) { grid-column: 3 / 5; }
.assortiment__groep:nth-of-type(3) { grid-column: 5 / 9; }
.assortiment__groep:nth-of-type(3) ul { columns: 2; column-gap: calc(var(--pad) * 2); }
.assortiment__groep h3 { font: 500 15px/1.3 var(--tekst); letter-spacing: .02em; color: var(--inkt-2); padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--naad-licht); margin-bottom: 4px; }
.assortiment__groep li { padding: 9px 0; font: 400 19px/1.25 var(--display); break-inside: avoid; }
.tweeb .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(3, var(--tegel)); }
.tweeb__plaat { grid-column: 1 / 3; grid-row: 1 / 4; margin: 0; position: relative; z-index: 1; overflow: clip; }
.tweeb__plaat img { width: 100%; height: 100%; object-fit: cover; }
.tweeb__tekst { grid-column: 3 / 7; grid-row: 1 / 3; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) 0 calc(var(--pad) + 12px); }
.tweeb__tekst .stelling { font-size: calc(var(--tegel) * .3); }
.tweeb__tekst p { margin-top: 18px; font-size: 17px; line-height: 1.6; max-width: 52ch; color: var(--dim); }
.tweeb__advies { grid-column: 3 / 9; grid-row: 3; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--tegel) * 2); }
.tweeb__advies .aanloop { align-self: center; padding: 0 var(--pad) 0 calc(var(--pad) + 12px); font-size: 19px; }

/* ---------- Recensies ---------- */
.cijfers .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .4) 0 calc(var(--tegel) * .5); align-items: end; }
.cijfers__tw { grid-column: 1 / 5; padding: 0 var(--pad); }
.cijfers__g { grid-column: 5 / 9; padding: 0 var(--pad); box-shadow: inset 1px 0 0 var(--naad-licht); }
.cijfers__getal { font: 200 calc(var(--tegel) * 1.3333)/.86 var(--tekst); letter-spacing: -.045em; color: var(--wand); margin-left: -.04em; }
.cijfers__getal--klein { font-size: calc(var(--tegel) * .8); }
.cijfers__bron { margin-top: 18px; font: 500 19px/1.4 var(--tekst); }
.cijfers__meer { margin-top: 4px; font-size: 15px; color: var(--inkt-2); }
.woorden .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) auto auto; padding-bottom: calc(var(--tegel) * .5); }
.woorden__kop { grid-column: 1 / 6; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.woorden__uitleg { grid-column: 6 / 9; grid-row: 1; align-self: center; position: relative; z-index: 1; padding: 0 var(--pad); font-size: 16px; color: var(--dim); }
.woorden__muur { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); grid-auto-rows: minmax(var(--tegel), auto); position: relative; z-index: 1; }
.woord { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); }
.woord blockquote { margin: 0; }
.woord blockquote p { font: 400 17px/1.55 var(--tekst); text-wrap: pretty; }
.woord blockquote p::before { content: "\201C"; } .woord blockquote p::after { content: "\201D"; }
.woord--lang blockquote p { font-size: 16px; }
.woord figcaption { font-size: 14px; line-height: 1.4; color: var(--dim); }
.woord figcaption span { display: block; font: 500 16px/1.3 var(--tekst); color: var(--hoofdband); }

/* ---------- Blog ---------- */
.blogrij .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .5) 0; }
.blogitem { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.blogitem__plaat { grid-column: 1 / 3; display: block; height: calc(var(--tegel) * 2.5); overflow: clip; }
.blogitem__plaat img { width: 100%; height: 100%; object-fit: cover; }
.blogitem__tekst { grid-column: 3 / 8; padding: 6px var(--pad) 0 calc(var(--pad) + 12px); }
.blogitem__datum { font-size: 15px; color: var(--inkt-2); }
.blogitem h2 { margin: 10px 0 16px; font: 600 calc(var(--tegel) * .24)/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.blogitem h2 a { text-decoration: none; }
.blogitem h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.blogitem__tekst > p:not(.blogitem__datum) { font-size: 17px; line-height: 1.6; color: var(--inkt-2); max-width: 60ch; }
.artikel .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .4) 0 calc(var(--tegel) * .6); align-items: start; }
.artikel__datum { grid-column: 1 / 6; padding: 0 var(--pad) 28px; font-size: 15px; color: var(--inkt-2); }
.artikel__tekst { grid-column: 1 / 6; grid-row: 2; padding: 0 var(--pad); max-width: calc(64ch + var(--pad) * 2); }
.artikel__tekst p { font-size: 18px; line-height: 1.7; }
.artikel__tekst p + p { margin-top: 16px; }
.artikel__tekst .aanloop { font-size: 23px; line-height: 1.5; margin-bottom: 26px; }
.artikel__tekst h2 { margin: 1.7em 0 .55em; font: 600 calc(var(--tegel) * .19)/1.1 var(--display); letter-spacing: -.008em; }
.artikel__zij { grid-column: 7 / 9; grid-row: 1 / 3; position: sticky; top: 24px; display: flex; flex-direction: column; }
.artikel__tegel { background: var(--wand); color: var(--hoofdband); padding: 20px var(--pad); min-height: var(--tegel); }
.artikel__tegel .kaart__label { color: var(--hoofdband); }
.artikel__min { font-size: 15px; color: var(--dim); margin-top: 8px; }
.artikel__zij .boekblok { min-height: calc(var(--tegel) * .6); }
.artikel__zij .tekstlink { margin-left: var(--pad); }

/* ---------- Over Soumaya ---------- */
.portret .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: calc(var(--tegel) * 4.5) auto; }
.portret__plaat { grid-column: 1 / 4; grid-row: 1; margin: 0; position: relative; z-index: 1; overflow: clip; }
.portret__plaat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.portret__tekst { grid-column: 4 / 9; grid-row: 1 / 3; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad) calc(var(--tegel) * .5) calc(var(--pad) + 12px); }
.portret__zin { font: 600 calc(var(--tegel) * .28)/1.06 var(--display); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 30px; max-width: 16em; }
.portret__tekst p:not(.portret__zin) { font-size: 18px; line-height: 1.65; max-width: 58ch; }
.portret__tekst p + p { margin-top: 16px; }
.brieven .muur { padding: 0; }
.brieven__rij { display: grid; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); grid-auto-rows: var(--tegel); }
.brieven__rij li { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); font-size: 15px; line-height: 1.4; color: var(--dim); }
.brieven__groot { font: 600 calc(var(--tegel) * .15)/1.05 var(--display); color: var(--hoofdband); }
.brieven__rij img { width: 128px; height: auto; }
.brieven__rij img.brieven__skin { width: 72px; }
.kamer__tekst { grid-column: 1 / 6; padding: 0 var(--pad) 36px; font: 300 21px/1.55 var(--tekst); max-width: 52ch; }
.kamer figure { margin: 0; overflow: clip; }
.kamer figure img { width: 100%; height: 100%; object-fit: cover; }
.kamer__a { grid-column: 1 / 3; height: calc(var(--tegel) * 2); }
.kamer__b { grid-column: 3 / 7; height: calc(var(--tegel) * 2); }
.kamer__c { grid-column: 7 / 9; display: grid; grid-template-rows: calc(var(--tegel) * 2) auto; }
.kamer__c figcaption { padding: 10px var(--pad) 0 0; font-size: 14px; line-height: 1.4; color: var(--inkt-2); }
.kamer__adres { grid-column: 1 / 7; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; padding: 26px var(--pad) 0; font-size: 17px; }
.kamer__adres .tekstlink { margin: 0; }

/* ---------- Afspraak ---------- */
.agenda .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(3, var(--tegel)); }
.agenda__vak { grid-column: 1 / 6; grid-row: 1 / 4; position: relative; z-index: 1; padding: calc(var(--tegel) * .25) var(--pad) var(--pad); display: flex; flex-direction: column; align-items: flex-start; }
.agenda__kop { font: 600 calc(var(--tegel) * .3)/1.05 var(--display); letter-spacing: -.01em; }
.agenda__uitleg { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 52ch; color: var(--dim); }
.agenda__laad { margin-top: auto; display: flex; justify-content: space-between; align-items: center; width: calc(var(--tegel) * 2); min-height: calc(var(--tegel) * .6); padding: 18px 20px; background: var(--hoofdband); color: var(--blazer); font: 500 19px/1.2 var(--tekst); text-align: left; transition: background-color .18s var(--ease); }
.agenda__laad:hover { background: #FFFFFF; }
.agenda__laad:focus-visible { outline: 2px solid var(--blazer); outline-offset: -8px; box-shadow: none; }
.agenda__laad .pijl { width: 22px; height: 22px; }
.agenda__klein { margin-top: 10px; font-size: 14px; color: var(--dim); }
.agenda__vak .tekstlink { margin-top: 2px; }
.agenda__vak.is-geladen { grid-row: 1 / 5; background: var(--hoofdband); color: var(--blazer); padding: 0; }
.agenda__vak iframe { display: block; width: 100%; height: 760px; border: 0; background: #fff; }
.agenda__vak .agenda__terugval { padding: 10px var(--pad); font-size: 15px; background: var(--hoofdband); color: var(--blazer); width: 100%; }
.agenda__uren, .agenda__adres, .agenda__contact { grid-column: 6 / 9; position: relative; z-index: 1; padding: 18px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); display: flex; flex-direction: column; font-size: 16px; line-height: 1.45; }
.agenda__uren { grid-row: 1; } .agenda__adres { grid-row: 2; } .agenda__contact { grid-row: 3; }
.agenda .muur h2:not(.agenda__kop) { font: 500 14px/1.3 var(--tekst); letter-spacing: .02em; color: var(--dim); margin-bottom: 8px; }
.agenda__uren .info__nu { margin-top: auto; padding-top: 6px; }
.agenda__contact a { display: inline-flex; align-items: center; min-height: 32px; text-underline-offset: .25em; }
.agenda__contact .agenda__tel { font: 300 26px/1.1 var(--tekst); text-decoration: none; min-height: 36px; }
.intake { scroll-margin-top: 0; }
.intake__kop { grid-column: 1 / -1; padding: 0 var(--pad); font: 600 calc(var(--tegel) * .3)/1.05 var(--display); letter-spacing: -.01em; }
.intake__tekst { grid-column: 1 / 7; padding: 20px var(--pad) 34px; }
.intake__wegen { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(3, calc(var(--tegel) * 2)); }
.intake__wegen a { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: var(--tegel); padding: 20px var(--pad); position: relative; background: var(--d); color: var(--hoofdband); text-decoration: none; font: 500 19px/1.2 var(--tekst); box-shadow: inset 1px 1px 0 var(--naad); transition: background-color .18s var(--ease); }
.intake__wegen a:hover { background: var(--lamp); }
.intake__wegen a:focus-visible { outline-color: var(--hoofdband); outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.intake__wegen .pijl { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; }
.intake__klein { font: 400 14px/1.3 var(--tekst); color: var(--dim); }
.beleid { scroll-margin-top: 0; }
.beleid .muur { box-shadow: inset 0 1px 0 var(--naad-licht); }
.beleid__lijst { grid-column: 1 / 7; padding: 0 var(--pad); }
.beleid__lijst li { display: grid; grid-template-columns: calc(var(--tegel) * 1.6) minmax(0, 1fr); gap: 18px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--naad-licht); font-size: 17px; line-height: 1.55; }
.beleid__lijst li:first-child { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.beleid__getal { font: 600 22px/1.2 var(--display); }
.kaartvak .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) repeat(3, var(--tegel)); }
.kaartvak__kop { grid-column: 1 / -1; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.kaartvak__vak { grid-column: 1 / 7; grid-row: 2 / 5; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: var(--pad); background: var(--t1); box-shadow: inset 1px 1px 0 var(--naad); }
.kaartvak__vak.is-geladen { padding: 0; }
.kaartvak__vak iframe { width: 100%; height: 100%; border: 0; display: block; }
.kaartvak__laad { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 22px; background: var(--lamp); color: var(--hoofdband); font: 500 17px/1.2 var(--tekst); transition: background-color .18s var(--ease); }
.kaartvak__laad:hover { background: #B55654; }
.kaartvak__klein { margin-top: 10px; font-size: 14px; color: var(--dim); }
.kaartvak__route { grid-column: 7 / 9; grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); text-decoration: none; font: 500 17px/1.25 var(--tekst); }
.kaartvak__route .pijl { align-self: flex-end; width: 22px; height: 22px; }
.kaartvak__route:hover { background: var(--lamp); }
.kaartvak__route:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.kaartvak__bedrijf { grid-column: 7 / 9; grid-row: 3; position: relative; z-index: 1; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); font-size: 15px; line-height: 1.55; color: var(--dim); }

/* ---------- Contact en formulier ---------- */
.contact .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .4) 0 calc(var(--tegel) * .5); align-items: start; }
.formulier { grid-column: 1 / 6; padding: 0 var(--pad) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.formulier > *, .formulier__intake { grid-column: 1 / -1; }
.veldgroep--half { grid-column: span 1; }
.formulier__intake { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.formulier__intake[hidden] { display: none; }
.formulier label, .formulier legend { display: block; font: 500 15.5px/1.3 var(--tekst); margin-bottom: 8px; padding: 0; }
.formulier fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.optie { font-weight: 400; color: var(--inkt-2); }
.formulier input:not([type="radio"]), .formulier select, .formulier textarea { width: 100%; min-height: 52px; padding: 12px 14px; font: 400 17px/1.4 var(--tekst); color: var(--blazer); background: var(--hoofdband); border: 1px solid var(--inkt-2); border-radius: 0; caret-color: var(--wand); }
.formulier textarea { resize: vertical; min-height: 150px; }
.formulier select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blazer) 50%), linear-gradient(-45deg, transparent 50%, var(--blazer) 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.formulier input:focus-visible, .formulier select:focus-visible, .formulier textarea:focus-visible { outline: 2px solid var(--blazer); outline-offset: 1px; box-shadow: none; border-color: var(--blazer); }
.formulier [aria-invalid="true"] { border: 2px solid var(--wand); }
.fout { margin-top: 6px; font: 500 15px/1.4 var(--tekst); color: var(--wand); }
.fout::before { content: "! "; }
.keuze { display: flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; font: 400 17px/1.3 var(--tekst) !important; cursor: pointer; }
.keuze input { width: 20px; height: 20px; margin: 0; accent-color: var(--wand); flex: none; }
.formulier__soort { display: flex; flex-wrap: wrap; gap: 0 28px; }
.formulier__soort legend { width: 100%; }
.formulier__dagdeel { display: flex; flex-wrap: wrap; gap: 0 18px; }
.formulier__dagdeel legend { width: 100%; }
.formulier__privacy { font-size: 15px; line-height: 1.5; color: var(--inkt-2); }
.formulier__privacy a { color: var(--blazer); }
.formulier__knop { justify-self: start; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; width: calc(var(--tegel) * 2); min-height: 60px; padding: 0 20px; background: var(--wand); color: var(--hoofdband); font: 500 18px/1 var(--tekst); transition: background-color .18s var(--ease); }
.formulier__knop:hover { background: var(--t3); }
.formulier__knop:focus-visible { outline: 2px solid var(--blazer); outline-offset: 2px; box-shadow: none; }
.formulier__knop .pijl { width: 22px; height: 22px; }
.formulier__status:empty { display: none; }
.formulier__status { font: 500 16px/1.5 var(--tekst); color: var(--wand); }
.contact__zij { grid-column: 6 / 9; display: grid; grid-template-columns: repeat(3, var(--tegel)); grid-auto-rows: var(--tegel); margin-right: 0; }
.contact__tegel { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; position: relative; padding: 18px var(--pad); background: var(--d); color: var(--hoofdband); text-decoration: none; box-shadow: inset 1px 1px 0 var(--naad); font: 500 18px/1.3 var(--tekst); }
a.contact__tegel:hover { background: var(--lamp); }
a.contact__tegel:focus-visible { outline-color: var(--hoofdband); outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.contact__tegel .pijl { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; }
.contact__klein { font: 400 14px/1.35 var(--tekst); color: var(--dim); }
.contact__groot { font: 300 calc(var(--tegel) * .1778)/1.1 var(--tekst); letter-spacing: -.01em; }
.contact__mail { overflow-wrap: anywhere; font-size: 16px; }
.contact__tegel--adres { font-size: 16px; font-weight: 400; }

.dank .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: repeat(2, var(--tegel)) var(--tegel); }
.dank__tekst { grid-column: 1 / 7; grid-row: 1 / 3; position: relative; z-index: 1; padding: calc(var(--tegel) * .3) var(--pad); }
.dank__rij { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, calc(var(--tegel) * 2)); position: relative; z-index: 1; }
.dank__rij a { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; padding: 20px var(--pad); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); text-decoration: none; font: 500 18px/1.25 var(--tekst); }
.dank__rij a:hover { background: var(--lamp); }
.dank__rij a:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.dank__rij .pijl { position: absolute; top: 18px; right: 18px; width: 20px; height: 20px; }

/* ---------- Cadeaubon ---------- */
.bonnen .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); grid-template-rows: var(--tegel) auto var(--tegel) calc(var(--tegel) * .5); }
.bonnen__kop { grid-column: 1 / 6; grid-row: 1; align-self: center; padding: 0 var(--pad); position: relative; z-index: 1; }
.bonnen__uitleg { grid-column: 1 / 6; grid-row: 2; padding: 0 var(--pad) 30px; position: relative; z-index: 1; font-size: 18px; line-height: 1.55; color: var(--dim); max-width: 52ch; }
.bonnen__rij { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: subgrid; position: relative; z-index: 1; }
.bon { display: flex; align-items: baseline; gap: 6px; height: 100%; position: relative; padding: 0 var(--pad); padding-top: calc(var(--tegel) * .42); background: var(--d); box-shadow: inset 1px 1px 0 var(--naad); text-decoration: none; transition: background-color .18s var(--ease); }
.bon:hover { background: var(--lamp); }
.bon:focus-visible { outline-offset: -6px; box-shadow: inset 0 0 0 2px var(--blazer); }
.bon__euro { font: 300 20px/1 var(--tekst); }
.bon__getal { font: 200 calc(var(--tegel) * .3333)/1 var(--tekst); letter-spacing: -.03em; }
.bon .pijl { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; }
.bonnen__salon { grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px var(--pad); background: var(--t0); box-shadow: inset 1px 1px 0 var(--naad); font-size: 16px; line-height: 1.45; }
.bonnen__salon .tekstlink { margin-top: 6px; }
.bonidee__tekst { grid-column: 1 / 7; padding: 0 var(--pad); }
.bonidee__links { grid-column: 1 / 7; display: flex; flex-wrap: wrap; gap: 0 32px; padding: 12px var(--pad) 0; }

/* ---------- Privacy en cookies ---------- */
.juri .muur { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: calc(var(--tegel) * .4) 0 calc(var(--tegel) * .6); align-items: start; }
.juri__zij { grid-column: 1 / 3; position: sticky; top: 24px; display: flex; flex-direction: column; padding: 0 var(--pad); }
.juri__zij a { display: flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.juri__zij a:hover { text-decoration: underline; }
.juri__zij a[aria-current="page"] { font-weight: 500; color: var(--wand); }
.juri__tekst { grid-column: 3 / 8; padding: 0 var(--pad); max-width: calc(66ch + var(--pad) * 2); }
.juri__tekst h2 { margin: 1.8em 0 .5em; font: 600 calc(var(--tegel) * .16)/1.15 var(--display); letter-spacing: -.005em; }
.juri__tekst > :first-child { margin-top: 0; }
.juri__tekst p, .juri__tekst li { font-size: 17px; line-height: 1.65; }
.juri__tekst p + p { margin-top: 12px; }
.juri__tekst .regel { margin-top: 0 !important; }
.juri__tekst ul { margin: 12px 0; }
.juri__tekst li { padding: 6px 0; box-shadow: inset 0 -1px 0 var(--naad-licht); }
.juri__tekst a { overflow-wrap: anywhere; }
.juri__tekst .vormen { margin-top: 8px; }

/* ---------- 1024 tot 1279: smallere tegels ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .aanloop { font-size: 21px; }
  .kaart__prijs { padding: 16px; }
  .kaart__rijen { font-size: 13.5px; }
  .stap__tekst { font-size: 14px; }
  .prijskolom li { font-size: 14.5px; }
  .waxkop__lycon p { font-size: 14px; }
  .uitgelicht__naam { font-size: 22px; }
  .brieven__groot { font-size: 22px; }
}

/* ---------- Telefoon en tablet: vier tegels breed ---------- */
@media (max-width: 1023.98px) {
  .aanloop { font-size: 20px; }
  .vlak__kop { font-size: calc(var(--tegel) * .36); margin-bottom: 24px; }
  .naadlijst li { font-size: 16px; }
  .faq { grid-column: 1 / -1; }
  .faq__item summary { font-size: 17px; min-height: 60px; }
  .faq__item p { font-size: 16px; padding-right: 0; }

  .paginakop .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .paginakop .veld { align-content: start; }
  .kruimel { grid-column: 1 / -1; grid-row: 1; padding: 16px var(--pad) 0; font-size: 14px; }
  .paginakop h1, .paginakop h1.lang { grid-column: 1 / -1; grid-row: 2; padding: 12px var(--pad) 18px; font-size: calc(var(--tegel) * .42); line-height: 1.02; }
  .paginakop h1.lang { font-size: calc(var(--tegel) * .3); }
  .paginakop .muur:not(:has(.kruimel)) h1 { padding-top: calc(var(--tegel) * .45); }
  .paginakop__bij, .paginakop h1.lang + .paginakop__bij { grid-column: 1 / -1; grid-row: 3; padding: 0 var(--pad) 22px; font-size: 16px; }

  .slotrij .muur { grid-template-columns: repeat(4, var(--tegel)); }
  .slotrij a { padding: 12px 14px; font-size: 15px; }
  .slotrij a .pijl { top: 12px; right: 12px; width: 16px; height: 16px; }
  .slotrij__boek { font-size: 18px !important; }
  .slotrij__klein { font-size: 13px; }
  .slotrij__tel { font-size: 22px; }

  .rijtje .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .6) 0; }
  .rijtje__kop { grid-column: 1 / -1; font-size: calc(var(--tegel) * .36); }
  .rijtje__uitleg { grid-column: 1 / -1; padding-top: 14px; font-size: 15.5px; }
  .rijtje__lijst { margin-top: 26px; display: block; }
  .rijtje__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n a" "k a" "p a"; padding: 14px var(--pad); min-height: 0; gap: 2px 12px; }
  .rijtje__naam { grid-area: n; padding: 0; font-size: 22px; }
  .rijtje__kort { grid-area: k; padding: 0; font-size: 15px; }
  .rijtje__prijs { grid-area: p; padding: 2px 0 0; font-size: 15px; }
  .rijtje__item .pijl { grid-area: a; margin: 0; align-self: center; }

  .dossier .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto; }
  .dossier__tekst { grid-column: 1 / -1; grid-row: 1; padding: 26px var(--pad) 28px; }
  .dossier__tekst p + p { font-size: 16.5px; }
  .dossier__plaat, .dossier__plaat--liggend { grid-column: 2 / 5; grid-row: 2; height: calc(var(--tegel) * 4.5); }
  .dossier__plaat--liggend { grid-column: 1 / -1; height: calc(var(--tegel) * 2.67); }
  .dossier__kort { grid-column: 2 / 5; grid-row: 2; height: calc(var(--tegel) * 2); font-size: 22px; }
  .oorzaak .muur, .verwacht .muur, .kenmerk .muur, .nazorg .muur, .drieluik .muur, .prijsmuur .muur, .brazprijs .muur, .merk .muur, .assortiment .muur, .bonidee .muur, .kamer .muur, .beleid .muur, .intake .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .6) 0; }
  .oorzaak__links, .oorzaak__rechts, .kenmerk__links, .kenmerk__rechts { grid-column: 1 / -1; }
  .oorzaak__rechts, .kenmerk__rechts { margin-top: 32px; }
  .aanpak .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .aanpak__kop { grid-row: 1; padding: calc(var(--tegel) * .6) var(--pad) 20px; }
  .aanpak__tekst, .aanpak__delen, .aanpak__plan { grid-column: 1 / -1; grid-row: auto; }
  .aanpak__tekst p { font-size: 17px; }
  .aanpak__delen { padding-top: 28px; }
  .aanpak__plan { padding-top: 30px; }
  .verwacht__tekst { grid-column: 1 / -1; font-size: 18px; }
  .koppels .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto; }
  .koppels__kop { padding: 30px var(--pad) 12px; }
  .koppels__rij { grid-row: 2; grid-auto-rows: var(--tegel); }
  .koppel { padding: 12px 14px; }
  .koppel .pijl { top: 12px; right: 12px; width: 16px; height: 16px; }
  .koppel__naam { font-size: 18px; }
  .koppel__sub { font-size: 13px; }

  .uitgelicht .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .uitgelicht__kop { padding: calc(var(--tegel) * .6) var(--pad) 16px; }
  .uitgelicht__intro { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--pad) 26px; font-size: 16px; }
  .uitgelicht__rij { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(2, calc(var(--tegel) * 2)); }
  .uitgelicht__rij li:last-child { grid-column: 1 / -1; }
  .uitgelicht__item { grid-template-rows: calc(var(--tegel) * 2.2) auto; }
  .uitgelicht__rij li:last-child .uitgelicht__item { grid-template-rows: calc(var(--tegel) * 2) auto; }
  .uitgelicht__naam { font-size: 19px; padding: 12px 0 12px 14px; }
  .uitgelicht__prijs { font-size: 14px; padding: 0 14px; }
  .groep .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .55) 0; }
  .groep__zij, .groep__lijst { grid-column: 1 / -1; }
  .groep__lijst { padding: 20px 0 0; }
  .behrij { grid-template-columns: minmax(0, 1fr) auto 22px; grid-template-areas: "n n a" "k k a" "m p a"; padding: 16px var(--pad); column-gap: 12px; }
  .behrij__naam { font-size: 22px; }
  .behrij__min { text-align: left; margin-top: 6px; }
  .behrij__prijs { margin-top: 6px; }

  .kaart .muur, .kaart--kort .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto var(--tegel); }
  .kaart__tekst { grid-column: 1 / -1; grid-row: 1; padding: 26px var(--pad) 30px; }
  .kaart__tekst p + p { font-size: 16.5px; }
  .kaart__prijs { grid-column: 1 / -1; grid-row: 2; min-height: calc(var(--tegel) * 1.6); padding: 16px var(--pad); }
  .kaart__bedrag { font-size: 64px; }
  .kaart__rijen { margin-top: 16px; font-size: 15px; }
  .kaart__boek { grid-column: 1 / -1; grid-row: 3; }
  .verloop .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .verloop__kop { padding: calc(var(--tegel) * .6) var(--pad) 18px; }
  .verloop__intro, .verloop__na { grid-column: 1 / -1; grid-row: auto; font-size: 16.5px; }
  .stappen, .met-plaat .stappen, .met-plaat:has(.verloop__plaat--liggend) .stappen { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, calc(var(--tegel) * 2)); grid-auto-rows: minmax(calc(var(--tegel) * 1.5), auto); }
  .stap { padding: 14px; gap: 10px; }
  .stap__naam { font-size: 19px; }
  .stap__tekst { font-size: 14px; }
  .verloop__plaat, .verloop .met-plaat .verloop__plaat { grid-column: 2 / 5; grid-row: auto; height: calc(var(--tegel) * 4.5); margin-top: 26px; }
  .verloop__plaat--liggend, .verloop .met-plaat .verloop__plaat--liggend { grid-column: 1 / -1; grid-row: auto; height: calc(var(--tegel) * 2.67); margin: 22px 0 26px; }
  .nazorg__lijsten { grid-template-columns: 1fr; }
  .nazorg__lijsten > div + div { margin-top: 26px; }
  .nazorg__kuur, .nazorg__prijzen { grid-column: 1 / -1; }
  .nazorg__kuur { font-size: 18px; }

  .waxkop .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .waxkop__tekst { grid-column: 1 / -1; grid-row: 1; padding: 26px var(--pad) 26px; }
  .waxkop__tekst p + p { font-size: 16px; }
  .waxkop__plaat { grid-column: 1 / 3; grid-row: 2; height: calc(var(--tegel) * 3); }
  .waxkop__lycon { grid-column: 3 / 5; grid-row: 2; height: auto; min-height: calc(var(--tegel) * 3); padding: 14px; }
  .waxkop__lycon .kleinkop { font-size: 20px; }
  .waxkop__lycon p { font-size: 14px; }
  .waxkop__lycon p + p { display: none; }
  .prijsmuur__noot { margin-top: -10px; }
  .prijsmuur__kolommen { grid-template-columns: 1fr; gap: 28px; }
  .prijskolom, .prijskolom:first-child { box-shadow: none; }
  .prijsmuur__acties { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 30px; }
  .prijsmuur__acties .boekblok { min-height: calc(var(--tegel) * .7); }
  .prijsmuur__acties .tekstlink { padding-left: var(--pad); }
  .drieluik__lead { grid-column: 1 / -1; font-size: 18px; }
  .drieluik__kolommen, .drieluik__kolommen--twee { grid-template-columns: 1fr; gap: 26px; }

  .braz .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto auto; }
  .braz__lead { grid-column: 1 / -1; grid-row: 1; padding: 26px var(--pad) 28px; font-size: 19px; }
  .braz__keuze { grid-row: 2; padding: 14px; min-height: calc(var(--tegel) * 2.4); }
  .braz__keuze--a { grid-column: 1 / 3; }
  .braz__keuze--b { grid-column: 3 / 5; }
  .braz__keuze h2 { font-size: 22px; }
  .braz__keuze p { font-size: 14px; }
  .braz__prijs { font-size: 22px !important; }
  .sfeer .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto calc(var(--tegel) * 3) calc(var(--tegel) * 2) auto; }
  .sfeer__kop { padding: calc(var(--tegel) * .6) var(--pad) 18px; }
  .sfeer__a { grid-column: 1 / 3; grid-row: 2; }
  .sfeer__b { grid-column: 3 / 5; grid-row: 2; }
  .sfeer__c { grid-column: 1 / -1; grid-row: 3; }
  .sfeer__noot { grid-column: 1 / -1; grid-row: 4; padding: 12px var(--pad) 28px; }
  .brazprijs__rijen, .brazprijs__lycon { grid-column: 1 / -1; }
  .brazprijs__lycon { margin-top: 30px; }

  .spring ul { grid-template-columns: repeat(4, var(--tegel)); grid-auto-rows: calc(var(--tegel) * .7); }
  .spring a, .spring button { padding: 10px 12px; font-size: 14px; }
  .tarief__groep .muur { grid-template-columns: repeat(4, var(--tegel)); padding: 30px 0; }
  .tarief__kop { grid-column: 1 / -1; padding-bottom: 14px; font-size: 26px; }
  .tarief__tabel { grid-column: 1 / -1; margin: 0 var(--pad); width: calc(100% - var(--pad) * 2); }
  .tarief__tabel th { padding-left: 0; font-size: 16px; padding-right: 10px; }
  .tarief__tabel td { font-size: 16px; }
  .tarief__tabel td:nth-of-type(1) { width: 4.6em; font-size: 14px; }
  .tarief__tabel td:nth-of-type(2) { width: 5.2em; }

  .merk__kop { grid-column: 1 / -1; font-size: 26px; }
  .merk__tekst { columns: 1; padding-top: 26px; }
  .merk__tekst p { font-size: 16px; }
  .assortiment__groep:nth-of-type(n) { grid-column: 1 / -1; }
  .assortiment__groep + .assortiment__groep { margin-top: 28px; }
  .assortiment__groep:nth-of-type(3) ul { columns: 1; }
  .assortiment__groep li { font-size: 18px; }
  .tweeb .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .tweeb__tekst { grid-column: 1 / -1; grid-row: 1; padding: calc(var(--tegel) * .6) var(--pad) 26px; }
  .tweeb__tekst .stelling { font-size: calc(var(--tegel) * .36); }
  .tweeb__tekst p { font-size: 16px; }
  .tweeb__plaat { grid-column: 2 / 5; grid-row: 2; height: calc(var(--tegel) * 4.5); }
  .tweeb__advies { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; }
  .tweeb__advies .aanloop { padding: 26px var(--pad); font-size: 17px; }
  .tweeb__advies .boekblok { min-height: calc(var(--tegel) * .8); }

  .cijfers .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .5) 0; }
  .cijfers__tw, .cijfers__g { grid-column: 1 / -1; }
  .cijfers__g { box-shadow: inset 0 1px 0 var(--naad-licht); margin-top: 30px; padding-top: 26px; }
  .cijfers__getal { font-size: calc(var(--tegel) * 1.6); }
  .cijfers__getal--klein { font-size: calc(var(--tegel) * .9); }
  .woorden .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .woorden__kop { grid-column: 1 / -1; padding: calc(var(--tegel) * .6) var(--pad) 8px; }
  .woorden__uitleg { grid-column: 1 / -1; grid-row: 2; padding: 0 var(--pad) 22px; font-size: 15px; }
  .woorden__muur { grid-row: 3; grid-template-columns: 1fr; }
  .woord { padding: 18px var(--pad); }

  .blogrij .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .5) 0; }
  .blogitem__plaat { grid-column: 1 / 3; height: calc(var(--tegel) * 2.5); }
  .blogitem__tekst { grid-column: 1 / -1; padding: 22px var(--pad) 0; }
  .blogitem h2 { font-size: 28px; }
  .artikel .muur { grid-template-columns: repeat(4, var(--tegel)); padding: calc(var(--tegel) * .4) 0 calc(var(--tegel) * .5); }
  .artikel__datum, .artikel__tekst { grid-column: 1 / -1; }
  .artikel__tekst p { font-size: 17px; }
  .artikel__tekst .aanloop { font-size: 20px; }
  .artikel__tekst h2 { font-size: 26px; }
  .artikel__zij { grid-column: 1 / -1; grid-row: 3; position: static; margin-top: 36px; }
  .artikel__zij .tekstlink { margin-left: var(--pad); }

  .portret .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: calc(var(--tegel) * 4.5) auto; }
  .portret__plaat { grid-column: 1 / 4; }
  .portret__tekst { grid-column: 1 / -1; grid-row: 2; padding: 28px var(--pad) 40px; }
  .portret__zin { font-size: 30px; }
  .portret__tekst p:not(.portret__zin) { font-size: 16.5px; }
  .brieven__rij { grid-template-columns: repeat(2, calc(var(--tegel) * 2)); grid-auto-rows: minmax(var(--tegel), auto); }
  .brieven__rij li { padding: 14px; font-size: 14px; }
  .brieven__groot { font-size: 18px; }
  .brieven__rij img { width: 96px; }
  .brieven__rij img.brieven__skin { width: 54px; }
  .kamer__tekst { grid-column: 1 / -1; font-size: 18px; padding-bottom: 26px; }
  .kamer__a { grid-column: 1 / 3; }
  .kamer__c { grid-column: 3 / 5; }
  .kamer__b { grid-column: 1 / -1; grid-row: auto; height: calc(var(--tegel) * 2.67); order: 3; }
  .kamer__adres { grid-column: 1 / -1; order: 4; }

  .agenda .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .agenda__vak, .agenda__vak.is-geladen { grid-column: 1 / -1; grid-row: 1; padding: 26px var(--pad) 28px; }
  .agenda__vak.is-geladen { padding: 0; }
  .agenda__kop { font-size: calc(var(--tegel) * .36); }
  .agenda__uitleg { font-size: 16px; margin-bottom: 22px; }
  .agenda__laad { width: 100%; min-height: calc(var(--tegel) * .8); }
  .agenda__uren, .agenda__adres, .agenda__contact { grid-column: 1 / -1; grid-row: auto; padding: 16px var(--pad); }
  .intake__kop { font-size: calc(var(--tegel) * .36); }
  .intake__tekst { grid-column: 1 / -1; padding-bottom: 26px; }
  .intake__wegen { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .intake__wegen a { min-height: calc(var(--tegel) * .9); }
  .beleid__lijst { grid-column: 1 / -1; }
  .beleid__lijst li { grid-template-columns: 1fr; gap: 4px; font-size: 16px; }
  .kaartvak .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto calc(var(--tegel) * 3) var(--tegel); }
  .kaartvak__kop { padding: calc(var(--tegel) * .6) var(--pad) 18px; }
  .kaartvak__vak { grid-column: 1 / -1; grid-row: 2; padding: 14px; }
  .kaartvak__route { grid-column: 1 / 3; grid-row: 3; padding: 14px; font-size: 15px; }
  .kaartvak__bedrijf { grid-column: 3 / 5; grid-row: 3; padding: 14px; font-size: 13px; }

  .contact .muur { grid-template-columns: repeat(4, var(--tegel)); padding: 26px 0 0; }
  .formulier { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 20px; }
  .veldgroep--half { grid-column: 1 / -1; }
  .formulier__intake { grid-template-columns: 1fr; gap: 20px; }
  .formulier__knop { width: 100%; }
  .contact__zij { grid-column: 1 / -1; grid-template-columns: repeat(4, var(--tegel)); grid-auto-rows: minmax(var(--tegel), auto); margin-top: 40px; }
  .contact__tegel { grid-column: span 2; padding: 14px; font-size: 16px; }
  .contact__tegel--tel, .contact__tegel--adres { grid-column: 1 / -1; }
  .contact__groot { font-size: 26px; }
  .contact__mail { font-size: 14px; }
  .dank .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .dank__tekst { grid-column: 1 / -1; padding: 26px var(--pad) 32px; }
  .dank__rij { grid-row: 2; grid-template-columns: repeat(2, calc(var(--tegel) * 2)); grid-auto-rows: var(--tegel); }
  .dank__rij a { padding: 14px; font-size: 16px; }
  .bonnen .muur { grid-template-columns: repeat(4, var(--tegel)); grid-template-rows: auto; }
  .bonnen__kop { grid-column: 1 / -1; padding: calc(var(--tegel) * .6) var(--pad) 14px; }
  .bonnen__uitleg { grid-column: 1 / -1; grid-row: 2; font-size: 16px; padding-bottom: 24px; }
  .bonnen__rij { grid-row: 3; grid-auto-rows: var(--tegel); }
  .bon { padding: 0 12px; padding-top: calc(var(--tegel) * .4); }
  .bon__euro { font-size: 14px; }
  .bon__getal { font-size: 30px; }
  .bon .pijl { top: 10px; right: 10px; width: 14px; height: 14px; }
  .bonnen__salon { padding: 12px 14px; font-size: 14px; }
  .bonnen__salon .tekstlink { font-size: 14px; }
  .bonidee__tekst, .bonidee__links { grid-column: 1 / -1; }
  .bonidee__links { flex-direction: column; }
  .juri .muur { grid-template-columns: repeat(4, var(--tegel)); padding: 26px 0 40px; }
  .juri__zij { grid-column: 1 / -1; position: static; margin-bottom: 30px; }
  .juri__tekst { grid-column: 1 / -1; }
  .juri__tekst p, .juri__tekst li { font-size: 16px; }
  .juri__tekst h2 { font-size: 22px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .dossier__plaat { grid-column: 3 / 5; height: calc(var(--tegel) * 3); }
  .dossier__kort { grid-column: 3 / 5; }
  .verloop__plaat, .verloop .met-plaat .verloop__plaat { grid-column: 3 / 5; height: calc(var(--tegel) * 3); }
  .stappen, .met-plaat .stappen, .met-plaat:has(.verloop__plaat--liggend) .stappen { grid-template-columns: repeat(4, var(--tegel)); grid-auto-rows: minmax(var(--tegel), auto); }
  .stap { grid-column: span 2; }
  .tweeb__plaat { grid-column: 3 / 5; height: calc(var(--tegel) * 3); }
  .portret .muur { grid-template-rows: calc(var(--tegel) * 3) auto; }
  .portret__plaat { grid-column: 1 / 3; }
  .woorden__muur { grid-template-columns: repeat(2, calc(var(--tegel) * 2)); }
  .uitgelicht__rij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uitgelicht__rij li:last-child { grid-column: auto; }
  .uitgelicht__rij li:last-child .uitgelicht__item, .uitgelicht__item { grid-template-rows: calc(var(--tegel) * 1.6) auto; }
  .braz__keuze { min-height: calc(var(--tegel) * 1.4); }
  .waxkop__lycon p + p { display: block; }
  .agenda__laad { width: calc(var(--tegel) * 2); }
}

/* ---------- Afdrukken (tarieven) ---------- */
@media print {
  .slotrij, .spring, .koppels, .paginakop .veld, .voet { display: none !important; }
  .paginakop .muur { grid-template-rows: auto; }
  .paginakop h1 { padding: 0 0 12px; color: #000; }
  .tarief__groep .muur { padding: 12px 0; break-inside: avoid; }
  .tarief__tabel th, .tarief__tabel td { font-size: 11pt; padding: 4px 0; color: #000; }
  .muur { width: 100% !important; }
}
.kruimel a { gap: 8px; }
.kruimel .terugpijl { transform: scaleX(-1); width: 16px; height: 16px; }

.verloop .met-plaat .verloop__plaat--liggend { grid-row: 1 / 3; align-self: end; margin-bottom: 30px; }
.met-plaat .verloop__kop { grid-column: 1 / 6; }
.kaart__lijst { margin-top: 30px; max-width: 760px; }
.prijsmuur + .drieluik .muur { box-shadow: inset 0 1px 0 var(--naad-licht); }
@media (max-width: 1023.98px) {
  .verloop .met-plaat .verloop__plaat--liggend { grid-row: auto; margin: 0 0 26px; }
  .met-plaat .verloop__kop { grid-column: 1 / -1; }
}
.kaart--kort .kaart__rijen { display: none; }

.kaartvak .muur { grid-template-rows: var(--tegel) repeat(2, var(--tegel)); }
.kaartvak__vak { grid-row: 2 / 4; }
.kaartvak__adres { font: 600 calc(var(--tegel) * .2)/1.1 var(--display); letter-spacing: -.005em; margin-bottom: 6px; }
.kaartvak__bij { font-size: 16px; color: var(--dim); margin-bottom: auto; }
@media (max-width: 1023.98px) {
  .kaartvak .muur { grid-template-rows: auto auto var(--tegel); }
  .kaartvak__vak { grid-row: 2; min-height: calc(var(--tegel) * 3); }
  .kaartvak__adres { font-size: 24px; }
}
.koppels__rij li, .stappen > li, .woorden__muur > *, .prijsmuur__kolommen > * { min-width: 0; }
.koppel__naam { overflow-wrap: break-word; hyphens: manual; }
.koppel { min-width: 0; }

/* Melodrama's I krijgt haarschreven in Melodrama's eigen maten (gemeten: advance .245em, kaphoogte .703em,
   descent .28em; schreef .229em breed, zoals de I op de homepage). De echte letter blijft staan. */
.kapi { position: relative; }
.kapi::before, .kapi::after { content: ""; position: absolute; left: .009em; width: .229em; height: max(1px, .015em); background: currentColor; pointer-events: none; }
.kapi::before { bottom: .28em; }
.kapi::after { bottom: calc(.28em + .703em - max(1px, .015em)); }
@media (max-width: 1023.98px) { .kapi::before, .kapi::after { height: max(1px, .024em); } .kapi::after { bottom: calc(.28em + .703em - max(1px, .024em)); } }

@media (max-width: 1023.98px) {
  .spring ul { grid-auto-rows: calc(var(--tegel) * .55); }
  .spring li { grid-column: span 2; }
  .uitgelicht__item { grid-template-columns: minmax(0, 1fr); }
  .uitgelicht__naam { padding: 12px 14px 0; }
  .uitgelicht__prijs { padding: 2px 14px 12px; }
}
.assortiment__groep li { font: 400 17px/1.4 var(--tekst); }
/* Onder de lamp (hover) wordt de tweede inkt de eerste: dim op lamp haalt AA niet. */
.koppel:hover .koppel__sub, .slotrij a:hover .slotrij__klein, .intake__wegen a:hover .intake__klein, a.contact__tegel:hover .contact__klein, .uitgelicht__item:hover .uitgelicht__prijs { color: var(--hoofdband); }
.paginakop h1 { overflow-wrap: break-word; hyphens: manual; }

/* =====================================================================
   QA ronde 6 (2026-10-15): typografievloer, tikdoelen, naden, menu, kleine uitlijningen.
   ===================================================================== */

/* -- Melodrama-vloer. Onder 44px (desktop) en 36px (telefoon) vallen zijn haarlijnen weg. Namen, labels, kleine
      koppen en tegelopschriften staan in Switzer 500; Melodrama blijft voor campagnewoorden, stellingen en paginanamen. */
.rijtje__naam, .behrij__naam, .uitgelicht__naam, .koppel__naam, .stap__naam, .plaat figcaption, .beleid__getal,
.brieven__groot, .waxkop__lycon .kleinkop, .tarief__kop, .juri__tekst h2, .artikel__tekst h2 {
  font-family: var(--tekst); font-weight: 500; letter-spacing: -.005em;
}
.rijtje__naam, .behrij__naam { font-size: 21px; line-height: 1.25; }
.uitgelicht__naam { font-size: 21px; line-height: 1.2; }
.koppel__naam { font-size: 19px; line-height: 1.25; }
.stap__naam { font-size: 19px; line-height: 1.25; }
.plaat figcaption { font-size: 19px; line-height: 1.25; }
.beleid__getal { font-size: 18px; line-height: 1.4; }
.brieven__groot { font-size: 21px; line-height: 1.2; }
.waxkop__lycon .kleinkop { font-size: 21px; line-height: 1.2; letter-spacing: .01em; }
.tarief__kop { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.juri__tekst h2 { font-size: 22px; line-height: 1.3; }
.artikel__tekst h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; }
.dossier__kort { font: 400 20px/1.35 var(--tekst); letter-spacing: 0; }
.kaartvak__adres { font: 300 calc(var(--tegel) * .2)/1.15 var(--tekst); letter-spacing: -.01em; }
.plank__woorden ul { font: 500 20px/1.25 var(--tekst); letter-spacing: -.005em; }
/* groepskoppen staan boven de namen: in stellinggrootte, dus groter dan de namen eronder */
.groep__kop { font-size: max(44px, calc(var(--tegel) * .3)); line-height: 1.05; margin-bottom: 18px; }
.braz__keuze h2 { font-size: max(44px, calc(var(--tegel) * .26)); }
.blogitem h2 { font-size: max(44px, calc(var(--tegel) * .26)); }
/* de haarschreven van de I horen alleen bij Melodrama */
.juri__tekst .kapi::before, .juri__tekst .kapi::after, .artikel__tekst .kapi::before, .artikel__tekst .kapi::after,
.prod .kapi::before, .prod .kapi::after { display: none; }

@media (max-width: 1023.98px) {
  .rijtje__naam, .behrij__naam { font-size: 18px; }
  .uitgelicht__naam { font-size: 17px; }
  .koppel__naam { font-size: 16px; }
  .stap__naam { font-size: 17px; }
  .plaat figcaption { font-size: 17px; }
  .brieven__groot { font-size: 18px; }
  .waxkop__lycon .kleinkop { font-size: 18px; }
  .tarief__kop { font-size: 21px; }
  .juri__tekst h2 { font-size: 20px; }
  .artikel__tekst h2 { font-size: 22px; }
  .dossier__kort { font-size: 18px; }
  .kaartvak__adres { font-size: 24px; }
  .plank__woorden ul { font-size: 18px; }
  .groep__kop, .braz__keuze h2, .blogitem h2 { font-size: 36px; }
  /* stellingen, sectiekoppen en paginanamen: nooit onder 36px */
  .vlak__kop, .rijtje__kop, .ladder__kop, .wax__kop, .intake__kop, .agenda__kop, .kiezer--pagina .kiezer__kop,
  .tweeb__tekst .stelling, .paginakop h1.lang { font-size: max(36px, calc(var(--tegel) * .36)); }
  .stelling { font-size: max(36px, calc(var(--tegel) * .4)); }
  .portret__zin, .trede__naam { font-size: 36px; }
}
@media (max-width: 1023.98px) {
  /* de lange productzin is op de telefoon leestekst, geen kop in Melodrama */
  .merk__kop { font: 300 22px/1.42 var(--tekst); letter-spacing: -.003em; }
  .merk__kop .kapi::before, .merk__kop .kapi::after { display: none; }
}

/* -- Lijsten op de naden van de muur: geen haarlijn onder elke rij, alleen een naad aan begin en eind van de lijst. */
.rij, .rij:first-of-type, .pleister .rij, .pleister .rij:first-of-type, .varianten li, .rijtje__item,
.rijtje__lijst li:first-child .rijtje__item, .behrij, .groep__lijst li:first-child .behrij, .beleid__lijst li,
.beleid__lijst li:first-child, .naadlijst li, .naadlijst li:first-child, .naadlijst--wand li, .naadlijst--wand li:first-child,
.tarief__tabel tr, .tarief__tabel tbody tr:first-child, .kaart__rijen li, .kaart__rijen li:first-child, .vormen > div, .vormen > div:first-child { box-shadow: none; }
.antwoord__lijst, .varianten, .kaart__rijen { box-shadow: inset 0 1px 0 rgb(244 242 241 / .14), inset 0 -1px 0 rgb(244 242 241 / .14); }
.pleister .antwoord__lijst, .rijtje__lijst, .groep__lijst, .beleid__lijst, .naadlijst, .vormen, .tarief__tabel tbody { box-shadow: inset 0 1px 0 var(--naad-licht), inset 0 -1px 0 var(--naad-licht); }
.naadlijst--wand { box-shadow: inset 0 1px 0 rgb(244 242 241 / .14), inset 0 -1px 0 rgb(244 242 241 / .14); }
.naadlijst li { padding: 8px 0; }
.naadlijst { padding: 6px 0; }
.vormen { padding: 4px 0; }
.vormen > div { padding: 10px 0; }
.rijtje__item { min-height: calc(var(--tegel) * .4); }
.behrij { padding-block: 16px; }
.tarief__tabel th, .tarief__tabel td { padding-block: 9px; }
.varianten li { padding: 5px 0; }
.varianten { padding: 4px 0; }
.kaart__rijen { padding: 4px 0; }

/* -- Tikdoelen: een rij met een naamlink is in zijn geheel de link; de boekknop blijft erboven. */
.rij { position: relative; }
.rij__naam a::after { content: ""; position: absolute; inset: 0; }
.rij__boek { position: relative; z-index: 1; }
.tarief__tabel tr { position: relative; }
.tarief__tabel th a::after { content: ""; position: absolute; inset: 0; }
.tarief__tabel tr:has(a):hover th a { text-decoration: underline; }
.kruimel a { min-height: 44px; margin-top: -12px; }
.agenda__contact a { min-height: 44px; }
.agenda__contact .agenda__tel { min-height: 44px; }

/* -- Tarieven: een rij gelijke springtegels (afdrukken staat nu onder de lijst) */
.spring li { display: flex; }
.spring a { flex: 1; }
.spring li.breed { grid-column: span 2; }
.tarief__voet .tekstknop { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 16px/1.3 var(--tekst); text-decoration: underline; text-underline-offset: .32em; color: var(--blazer); }
@media (max-width: 1023.98px) {
  .spring ul { grid-auto-rows: calc(var(--tegel) * .5); }
  .spring li, .spring li.breed { grid-column: span 2; }
  .spring li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .spring ul { grid-auto-rows: var(--tegel); }
}

/* -- Recensies: naam en bron op vaste hoogte, zodat de namen in een rij gelijk staan */
.woord figcaption { min-height: calc(16px * 1.3 + 14px * 1.4 * 2); }

/* -- Behandelkaart: lucht tussen stelling en intro, foto en stappen eindigen op dezelfde naad */
.verloop__intro { padding-top: calc(var(--tegel) * .22); }
.verloop .met-plaat .verloop__plaat:not(.verloop__plaat--liggend) { grid-row: 3; height: auto; align-self: stretch; min-height: calc(var(--tegel) * 2); }
.met-plaat .stappen > li:last-child:nth-child(3n+2) { grid-column: span 2; }
.stap { justify-content: flex-start; }
.stap__tekst { margin-top: auto; }
@media (max-width: 1023.98px) {
  .verloop .met-plaat .verloop__plaat:not(.verloop__plaat--liggend) { grid-row: auto; height: calc(var(--tegel) * 4.5); }
  .met-plaat .stappen > li:last-child:nth-child(3n+2) { grid-column: auto; }
}

/* -- Behandelingen: in de uitgelichte tegels staat de prijs onder de naam */
@media (min-width: 1024px) {
  .uitgelicht__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--tegel) * 2.4) auto 1fr; }
  .uitgelicht__naam { padding: 16px var(--pad) 0; align-self: start; }
  .uitgelicht__prijs { padding: 4px var(--pad) 16px; align-self: start; }
}

/* -- Voet: titels die links zijn zien er ook zo uit */
.voet__tegel h2 a { color: var(--hoofdband); text-decoration: underline; text-decoration-color: rgb(244 242 241 / .35); text-underline-offset: .3em; }
.voet__tegel h2 a:hover { text-decoration-color: currentColor; }
@media (max-width: 639.98px) {
  .voet__tegel--juri h2 { display: none; }
  .voet__tegel--juri ul { display: block !important; }
  .voet__tegel--juri li:not(:first-child) { display: none; }
}

/* -- Menu: geen scrollende pagina eronder; een boektegel bovenaan; zes gangen passen in het venster */
html:has(dialog.menu[open]) { overflow: hidden; scrollbar-gutter: stable; }
.menu__tegel--drie { grid-column: span 3; }
.menu__tegel--boek { background: var(--hoofdband); color: var(--blazer); justify-content: space-between; align-items: flex-end; }
.menu__tegel--boek:hover { background: #FFFFFF; }
.menu__tegel--boek .pijl { color: var(--blazer); opacity: 1; }
.menu__tegel--boek:focus-visible { box-shadow: inset 0 0 0 2px var(--blazer); outline-color: var(--blazer); }
.menu__rijen { grid-auto-rows: min(12.5vw, 210px, calc((100dvh - var(--kop) - 24px) / 6)); }
@media (max-width: 1023.98px) {
  .menu__rijen { grid-auto-rows: min(25vw, calc((100dvh - var(--kop) - 64px - env(safe-area-inset-bottom) - 12px) / 6)); }
}
/* Zonder script: de knop "Menu" wordt een link naar de voet, waar elke pagina staat */
.menulink { display: none; }
@media (max-width: 1279.98px) {
  html:not(.js) .menulink { display: inline-flex; align-items: center; justify-content: flex-end; grid-column: 7 / 9; grid-row: 1; justify-self: end; margin-right: var(--pad); min-height: 44px; min-width: 64px; font: 500 15px/1 var(--tekst); letter-spacing: .01em; text-decoration: none; }
  html:not(.js) .menulink span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
}
@media (max-width: 1023.98px) {
  html:not(.js) .menulink { grid-column: 2; margin-right: 6px; padding-inline: 8px; }
}

/* =====================================================================
   QA ronde 6: de homepage
   ===================================================================== */
/* 1. De deur: boven 5 tegels hoog geen strook van de donkere bovenrij; veld, deurplaat en kopband beginnen op y=0 */
.deur .muur { height: clamp(calc(var(--tegel) * 4 + var(--kop)), 100svh, calc(var(--tegel) * 5)); }

/* 3. Platen: titels op dezelfde hoogte, onderregel hangt eronder */
.plaat figcaption { align-items: flex-start; padding-top: calc(var(--tegel) * .25 - 12px); }
.plaat figcaption > span { display: block; }
.plaat__smal { display: none; }
@media (max-width: 1023.98px) {
  .plaat figcaption { align-items: flex-start; padding: 14px var(--pad) 12px; }
}
@media (max-width: 639.98px) {
  .plaat__breed { display: none; }
  .plaat__smal { display: inline; }
}
/* 3. Onder 1024 staat de intro voor de platen ("daarna volgen deze stappen"), prijs en boektegel erna */
@media (max-width: 1023.98px) {
  .acne .muur { grid-template-rows: auto; }
  .acne__zij { display: contents; }
  .acne__introblok { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; padding: 0 var(--pad) 26px; }
  .platen { grid-row: 3; }
  .prijsblok { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 1; }
  .acne__zij > .boekblok { grid-column: 1 / -1; grid-row: 5; position: relative; z-index: 1; }
  .acne__zij > .vergoed { grid-column: 1 / -1; grid-row: 6; position: relative; z-index: 1; }
}

/* 4. Prijsladder: het eurosteken staat tegen het getal, het geheel lijnt rechts uit */
.trede__prijs { display: flex; align-items: baseline; justify-content: flex-end; gap: 0; }
.trede__prijs small { margin-right: 10px; }
.trede__euro { margin-right: 8px; }
@media (max-width: 1023.98px) {
  .trede { box-shadow: none; }
  .ladder__lijst { box-shadow: inset 0 1px 0 var(--naad-licht); }
  .trede__euro { margin-right: 6px; }
}

/* 6. 5,0: de komma krijgt ruimte boven het bijschrift */
.score__getal { padding-bottom: .09em; }

/* 7. Soumaya: lucht onder de keurmerken; de woorden onder de plank op de tegelnaden */
@media (min-width: 1024px) {
  .plank__woorden { display: grid; grid-template-columns: repeat(8, var(--tegel)); padding: 0; gap: 0; }
  .plank__woorden ul { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(3, calc(var(--tegel) * 2)); gap: 0; }
  .plank__woorden li { padding: 0 var(--pad); }
  .plank__woorden .tekstlink { grid-column: 7 / 9; justify-self: start; padding-left: var(--pad); }
}
@media (max-width: 1023.98px) {
  .keurmerken { padding-bottom: calc(var(--tegel) * .5); }
}

/* 8. Slotmuur: cadeaubon zonder losse regel; op tablet compacte 2x1-tegels */
.info__bedrag { white-space: nowrap; }
@media (max-width: 1023.98px) {
  .info__bedrag { font-size: 20px; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .info { grid-auto-rows: minmax(var(--tegel), auto); }
  .info__uren, .info__adres, .info__contact, .info__cadeau, .info__lounge, .info__route { grid-row: auto / span 1; }
  .info__uren { grid-column: 1 / 3; }
  .info__adres { grid-column: 3 / 5; }
  .info__contact { grid-column: 1 / 3; }
  .info__cadeau { grid-column: 3 / 5; }
  .info__lounge { grid-column: 1 / 3; contain: size; }
  .info__lounge picture { height: 100%; }
  .info__route { grid-column: 3 / 5; }
  .info .boekvlak { grid-column: 1 / 5; grid-row: auto / span 1; }
}
/* Kiezer: de tegel "Staat uw klacht er niet bij?" breekt niet op een los woord */
.klacht--intake .klacht__vraag { text-wrap: balance; }

/* 2. Het antwoord: de naamtegel is op desktop drie tegels breed, zodat elke klachtnaam zonder afbreekstreepje past */
@media (min-width: 1024px) {
  .antwoord { grid-template-columns: calc(var(--tegel) * 3) minmax(0, 1fr); }
  .antwoord__naam h3, .antwoord--lang .antwoord__naam h3 { font-size: min(calc(var(--tegel) * .4), calc((var(--tegel) * 3 - var(--pad) * 2) / var(--em, 6.8))); hyphens: none; text-wrap: balance; }
  #zonbeschadiging, #huidverslapping { --em: 7.5; }
}
@media (max-width: 1023.98px) {
  .antwoord__naam h3, .antwoord--lang .antwoord__naam h3 { hyphens: none; text-wrap: balance; }
}

/* Tikdoelen op de telefoon: prijsrijen minstens 44px, een losse link in de juridische tekst ook */
@media (max-width: 1023.98px) {
  .tarief__tabel th, .tarief__tabel td { padding-block: 12px; }
}
.juri__tekst p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Keuzerondjes: 24px, het label eromheen is 44px hoog */
.keuze input { width: 24px; height: 24px; }

/* Voet op de telefoon: tegels van twee breed, zodat elke titel heel blijft (geen afbreekstreepjes) */
@media (max-width: 639.98px) {
  .voet .muur { grid-template-rows: repeat(4, var(--tegel)) auto; }
  .voet__tegel { grid-column: span 2; padding: 12px var(--pad); }
  .voet__regel { grid-row: 5; }
}