/**
 * zendi.be, stylesheet (27/9/26).
 * Omgezet uit het goedgekeurde brandingprototype B3 (workspace/branding/mockup-b3.html met mockup-basis.css
 * en mockup-b3.css) en opgeschoond: elke regel staat hier één keer, met de waarde waarop de rondes eindigden.
 * Alle keuzes en hun reden staan in workspace/brand.md. Volgorde volgens websites-stack.md §4; de media
 * queries staan bij hun component. Kleuren en maten via de tokens in :root, het contrast staat bij de kleur.
 */

/* 1. Reset ------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* 2. Tokens ----------------------------------------------------------------------------------------------- */
:root {
    /* Merkkleuren: roze en zwart gemeten in het logo, de tinten uit de brandingrondes.
       Contrast (WCAG): wit op #d6307f 4,6 · wit op #a8155c 7,2 · #c2196d 5,75 op wit en 5,3 op de tint.
       Het logoroze #e53c8e haalt maar 3,9 op wit: enkel voor sterren en grafische accenten, nooit voor kleine tekst. */
    --zendi-roze:       #e53c8e;   /* het molecuul */
    --zendi-zwart:      #010202;   /* het woordmerk */
    --zendi-roze-tekst: #c2196d;   /* roze voor kleine tekst en labels */
    --zendi-roze-knop:  #d6307f;   /* de Salonized-knop, elke hover, de iconen van de tijdlijn */
    --zendi-roze-35:    #f6bbd7;   /* 35 procent logoroze: tweede reviewrondje, einde van de tijdlijn */
    --zendi-golf:       #fbe9f2;   /* de zachte golf achter keuzehulp, behandelingen en Zo boek je */
    --zendi-roze-tint:  #fdf3f8;   /* cijfervak, scorelabels, prijslabels */

    /* Rollen */
    --color-bg:            #ffffff;
    --color-bg-alt:        var(--zendi-roze-tint);
    --color-surface:       #ffffff;               /* kaarten en vellen */
    --color-heading:       var(--zendi-zwart);
    --color-text:          #1f1f1f;               /* 16,6 op wit */
    --color-text-subtle:   #5c5c5c;               /* 6,7 op wit, 6,2 op de tint */
    --color-border:        #e9e2e5;               /* enkel waar een lijn onvermijdelijk is (footer) */
    --color-border-strong: #8a8a8a;               /* rand van een veld: 3,45 op wit */
    --color-accent:        var(--zendi-roze);
    --color-accent-text:   var(--zendi-roze-tekst);
    --color-hover:         var(--zendi-roze-knop); /* wat zwart is, wordt bij hover dit roze */
    --focus-kleur:         var(--zendi-zwart);

    /* Typografie: Montserrat, één familie. Koppen licht zoals het woordmerk, labels zoals MEDSPA */
    --font:     'Montserrat', sans-serif;
    --fw-kop:   300;
    --fw-tekst: 400;
    --fw-label: 500;
    --fw-sterk: 600;
    --fs-h1:    clamp(2.125rem, 1.45rem + 2.1vw, 3.25rem);    /* 34 tot 52 */
    --fs-h2:    clamp(2rem, 1.4rem + 1.2vw, 2.5rem);          /* 32 tot 40; vanaf 800 breed zoals voor 15/10/26, minimum 32 op gsm (Steve: "titels wat groter") */
    --fs-h3:    clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);   /* 19 tot 22 */
    --fs-lead:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 tot 19 */
    --fs-body:  1.0625rem;                                    /* 17 */
    --fs-klein: 0.9375rem;                                    /* 15 */
    --fs-fijn:  0.875rem;                                     /* 14 */
    --fs-label: 0.8125rem;                                    /* 13, in kapitalen */
    --ls-label: 0.2em;
    --lh-body:  1.65;
    --measure:  34em;                                         /* leeskolom, rond 65 tekens */

    /* Ruimte */
    --spacing-section:   clamp(6rem, 4rem + 5vw, 9.5rem);
    --spacing-title:     3rem;
    --spacing-block:     1.5rem;
    --spacing-box:       2rem;
    --spacing-heading:   1rem;
    --spacing-paragraph: 1rem;

    /* Layout */
    --container-width:  1200px;
    --container-narrow: 760px;
    --container-gutter: 1.5rem;

    /* Vorm: rechthoeken met ronde hoeken, geen bogen. Schaduwen in lagen met een zweem roze */
    --radius-md:   1.75rem;        /* foto's en kaarten */
    --radius-vel:  1.25rem;        /* vellen en kleine kaarten */
    --radius-lg:   2.5rem;         /* panelen */
    --radius-btn:  999px;          /* knoppen, velden en labels */
    --shadow-card: 0 1px 2px rgba(40, 16, 28, 0.05), 0 10px 20px -12px rgba(40, 16, 28, 0.12), 0 34px 64px -34px rgba(168, 21, 92, 0.32);
    --glans-rand:  inset 0 1px 0 rgba(255, 255, 255, 0.9);    /* lichtrand bovenaan een kaart */
    --shadow-vel:  0 -8px 24px -18px rgba(40, 16, 28, 0.32);  /* het vel dat over een foto schuift */
    --transition:  0.2s ease;
    --ease-veer:   cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Knoppen, met de pijl van Lucide (arrow-right) als masker */
    --btn-h:  3.25rem;
    --btn-px: 1.75rem;
    --btn-fs: 0.9375rem;
    --pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");

    /* Header (niet sticky): het volledige logo, 72 op gsm en 104 vanaf 1024 */
    --header-h: 5.75rem;
    --logo-h:   4.5rem;
    --nav-gap:  2rem;

    /* Keuzehulp in een trap: de fotozone van tegel n is --trap-foto min n keer --trap-stap */
    --trap-foto: 16rem;
    --trap-stap: 1rem;

    accent-color: var(--zendi-zwart);
}
@media (min-width: 640px) {
    :root { --trap-foto: 18rem; --trap-stap: 2rem; }
}
@media (min-width: 1024px) {
    :root { --header-h: 8rem; --logo-h: 6.5rem; }
}
@media (min-width: 1200px) {
    :root { --trap-foto: 23rem; }
}
@media (max-width: 767px) {
    :root {
        --spacing-section:  5rem;
        --spacing-title:    2rem;
        --spacing-box:      1.5rem;
        --container-gutter: 1.25rem;
        --radius-lg:        1.75rem;
    }
}
/* Smalle toestellen (280 tot 359): kleiner logo, zodat de header op één rij past */
@media (max-width: 359px) {
    :root { --logo-h: 3.5rem; --container-gutter: 1rem; }
}

/* 3. Lettertype en typografie ------------------------------------------------------------------------------ */
/* Montserrat Variable (OFL), zelf gehost, latin */
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
body {
    font-family: var(--font);
    font-size: var(--fs-body);
    font-weight: var(--fw-tekst);
    line-height: var(--lh-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: var(--fw-kop); color: var(--color-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: var(--fw-tekst); }
/* Gsm tot 479 px: koppen breken nooit een woord af (Danilo 2/11/26). Lange woorden zoals "Gezichtsbehandeling,",
   "zuurstofbehandeling" en "Medisch-esthetische" passen door een letter die meeschaalt met het scherm, met minstens
   5% ruimte van 320 tot 430 px (Safari tekent soms net breder). Van 15/10 tot 2/11/26 stond er een ­ in die
   woorden (zendi_kop in site.php). Vanaf 480 px ongewijzigd. */
@media (max-width: 479px) {
    h1 { font-size: min(var(--fs-h1), 8vw); }
    h2 { font-size: min(var(--fs-h2), 8.2vw); }
}
/* HIFU-behandeling, Medisch-esthetische: koppen-heel.php in header.php zet het woord in een .heel */
.heel { white-space: nowrap; }
p { text-wrap: pretty; }
strong, b { font-weight: var(--fw-sterk); }

/* Klein label in kapitalen, zoals MEDSPA in het logo */
.label {
    font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4;
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-text);
}
/* Elke sectie opent op dezelfde manier: een roze label met een streepje, dan de kop */
.kopgroep { display: grid; gap: 1rem; }
.boventitel {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4;
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-text);
}
.boventitel::before { content: ""; flex: none; width: 2rem; height: 1.5px; background: currentColor; }

/* Iconen van Lucide, uit de sprite bovenaan de pagina (header.php) */
.icon {
    display: inline-block; flex: none; width: 1.125em; height: 1.125em;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}

/* 4. Layout ------------------------------------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: calc(var(--container-width) + 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}
.sectie { padding-block: var(--spacing-section); background: var(--color-bg); }
/* Om de beurt een zachte roze golf achter een sectie, zonder harde rand: boven en onder loopt ze uit in wit,
   zodat de secties in elkaar overlopen */
.sectie--golf {
    background: linear-gradient(180deg, rgba(251, 233, 242, 0) 0%, var(--zendi-golf) 24%, var(--zendi-golf) 76%, rgba(251, 233, 242, 0) 100%);
}
.sectie-kop { max-width: 46rem; margin-bottom: var(--spacing-title); }
.sectie-kop__intro { margin-top: 0.75rem; max-width: var(--measure); font-size: var(--fs-lead); color: var(--color-text-subtle); }
/* Kop links, een noot of een link rechts */
.sectie-kop--rij {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem;
    max-width: none;
}
.sectie-kop--rij > p { max-width: 26rem; color: var(--color-text-subtle); }

/* 5. Header en navigatie (niet sticky: scrolt mee weg) ------------------------------------------------------ */
.site-header { position: relative; z-index: 20; background: var(--color-bg); }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.site-logo { display: block; flex: none; }
.site-logo__img { height: var(--logo-h); width: auto; }

.main-nav { display: none; }
.main-nav__lijst { display: flex; align-items: center; gap: var(--nav-gap); }
.main-nav__link {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    font-size: 0.9375rem; font-weight: var(--fw-label); line-height: 1; white-space: nowrap;
    color: var(--color-heading); transition: color var(--transition);
}
.main-nav__link:hover,
.main-nav__link[aria-current] { color: var(--color-accent-text); }

.site-header__acties { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; color: var(--color-heading);
}
.nav-toggle .icon { width: 1.5rem; height: 1.5rem; }

@media (min-width: 1024px) {
    .main-nav { display: block; margin-left: auto; }
    .site-header__acties { margin-left: var(--nav-gap); }
    .nav-toggle { display: none; }
}
@media (max-width: 359px) {
    .site-header__inner { gap: 0.75rem; }
    .site-header__acties { gap: 0.25rem; }
    .site-header .site-header__knop { --btn-px: 0.75rem; --btn-fs: 0.875rem; white-space: nowrap; }   /* wint van .btn--klein */
}

/* Gsm-menu (onder 1024): volledig scherm, wit, nav.js opent en sluit het. Zolang het open staat verdwijnen de
   zwevende knoppen van Salonized en het etiketje erboven; "Boek online" staat onderaan in het menu. */
.gsm-menu {
    position: fixed; inset: 0; z-index: 2147482000;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
    background: var(--color-bg);
}
.gsm-menu__kop { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.gsm-menu__nav { padding-block: 1.5rem 2.5rem; }
.gsm-menu__lijst { display: grid; gap: 0.25rem; }
.gsm-menu__link {
    display: flex; align-items: center; min-height: 3.25rem;
    font-size: 1.625rem; font-weight: var(--fw-kop); line-height: 1.2; letter-spacing: -0.02em;
    color: var(--color-heading); transition: color var(--transition);
}
.gsm-menu__link:hover,
.gsm-menu__link[aria-current] { color: var(--color-accent-text); }
.gsm-menu__acties { margin-top: auto; padding-bottom: 2rem; }
.gsm-menu__acties .btn { width: 100%; }
body.menu-open { overflow: hidden; position: fixed; width: 100%; }
body.menu-open > iframe[src*="widget.salonized.com/button"],
body.menu-open .boekhulp { visibility: hidden; }

/* 6. Knoppen en links -------------------------------------------------------------------------------------- */
/* Zwarte pil met witte tekst en een pijl. Bij hover roze met een roze gloed, de pijl schuift mee en de knop
   komt een pixel omhoog. Eén hoverregel voor de hele site: wat zwart is, wordt #d6307f. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
    min-height: var(--btn-h); padding: 0.5rem var(--btn-px);
    font-size: var(--btn-fs); font-weight: var(--fw-sterk); letter-spacing: 0; line-height: 1.25;
    text-align: center; text-wrap: balance;
    border: 1px solid transparent; border-radius: var(--radius-btn); cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease,
                box-shadow 0.35s var(--ease-veer), transform 0.35s var(--ease-veer);
}
.btn::after {
    content: ""; flex: none; width: 1.125rem; height: 1.125rem; margin-right: -0.25rem;
    background-color: currentColor;
    -webkit-mask: var(--pijl) center / contain no-repeat; mask: var(--pijl) center / contain no-repeat;
    transition: transform 0.35s var(--ease-veer);
}
.btn:has(.icon)::after { content: none; }   /* een knop met een eigen icoon krijgt geen tweede pijl */
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn:hover { transform: translateY(-1px); }
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(0.3125rem); }
.btn:disabled { cursor: wait; opacity: 0.7; }
.btn--primair { background: var(--zendi-zwart); color: #ffffff; box-shadow: 0 10px 24px -12px rgba(1, 2, 2, 0.55); }   /* 20,8 op 1 */
.btn--primair:hover { background: var(--color-hover); box-shadow: 0 16px 32px -12px rgba(214, 48, 127, 0.65); }        /* 4,6 op 1 */
.btn--lijn { background: transparent; color: var(--color-heading); border: 1.5px solid currentColor; }
.btn--lijn:hover { background: var(--color-hover); border-color: var(--color-hover); color: #ffffff; }
.btn--klein { --btn-h: 2.75rem; --btn-px: 1.25rem; }
.btn--klein::after { width: 1rem; height: 1rem; }

/* Tekstlink met de pijl in een zwart rondje dat roze wordt */
.link-pijl {
    display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem;
    font-size: 0.9375rem; font-weight: var(--fw-sterk); color: var(--color-heading);
}
.link-pijl .icon {
    width: 1.75rem; height: 1.75rem; padding: 0.4rem; border-radius: 50%;
    background: var(--zendi-zwart); color: #ffffff; stroke-width: 2;
    transition: background-color var(--transition), transform 0.35s var(--ease-veer);
}
.link-pijl:hover .icon,
.link-pijl:focus-visible .icon { background: var(--color-hover); transform: translateX(0.25rem); }

:focus-visible { outline: 2px solid var(--focus-kleur); outline-offset: 3px; }

/* 7. Eerste scherm: wat Zendi is, de knoppen, het bewijs, en Steve met zijn handtekening ------------------ */
.hero { padding-block: 2rem 4.5rem; background: var(--color-bg); }
.hero__raster { display: grid; gap: 2.5rem; grid-template-areas: "tekst" "portret" "bewijs"; }
.hero-tekst { grid-area: tekst; }
.hero-tekst__label { margin-bottom: 1.25rem; }
.hero-tekst__titel { max-width: 14em; }
.hero-tekst__lead { margin-top: 1.5rem; max-width: 30em; font-size: var(--fs-lead); color: var(--color-text-subtle); }
.hero-tekst__acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

.portret { grid-area: portret; }
.portret__beeld { position: relative; }
.portret__foto { overflow: hidden; aspect-ratio: 7 / 8; background: var(--color-bg-alt); border-radius: var(--radius-md); }
.portret__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
/* Op gsm schrijft de handtekening bovenaan over de foto, op de witte muur */
.portret__handtekening {
    position: absolute; top: -1.5rem; right: -0.25rem; width: 13rem; max-width: 62%;
    transform: rotate(-6deg); transform-origin: right center;
}
.portret__onderschrift { margin-top: 1rem; font-size: var(--fs-klein); line-height: 1.5; color: var(--color-text-subtle); }
/* De regel over Paris Hilton onder het portret in het eerste scherm, als link naar het stuk op /over-ons/ */
.portret__extra {
    display: block; width: fit-content; margin-bottom: 0.25rem;
    font-weight: var(--fw-label); color: var(--color-heading);
    text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em;
    transition: color var(--transition);
}
.portret__extra:hover { color: var(--color-accent-text); }

/* Het bewijs op een zacht roze vlak, twee op twee: bovenaan de reviews (de lijst loopt met subgrid mee in
   dezelfde kolommen), onderaan Sinds 2007 en Treatwell. Elk vak: groot cijfer of embleem, daaronder de uitleg. */
.bewijs {
    grid-area: bewijs;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; align-items: start;
    padding: 1.75rem 2rem; background: var(--color-bg-alt); border-radius: var(--radius-md);
}
.bewijs__scores { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 1.75rem; }
/* Elk vak begint bovenaan en rekt niet uit: valt de uitleg van 643 op twee regels, dan schuiven de sterren
   van 229 niet mee */
.bewijs .score { align-self: start; align-content: start; }
.bewijs .score__aantal { display: flex; align-items: flex-start; font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem); }

@media (max-width: 479px) {
    /* Twee knoppen naast elkaar, zodat het eerste scherm Steve nog toont */
    .hero-tekst__acties .btn { flex: 1 1 auto; --btn-px: 1.125rem; }
}
@media (max-width: 767px) {
    .bewijs { padding: 1.5rem 1.25rem; column-gap: 1.25rem; }
}
@media (max-width: 359px) {
    .bewijs { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
    .portret { max-width: 26rem; }
}
@media (min-width: 900px) {
    .hero { padding-block: 3rem 6rem; }
    .hero__raster {
        --hero-tussen: clamp(3rem, 6vw, 6rem);
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-areas: "portret tekst" "portret bewijs";
        column-gap: var(--hero-tussen); row-gap: 3rem; align-items: center;
    }
    .hero-tekst { align-self: end; }
    .bewijs { align-self: start; }
    .portret { max-width: 31rem; }
    .portret__foto { aspect-ratio: 5 / 6; }
    /* Op desktop schrijft hij onderaan over de rand, naar de tekst toe. Ze steekt hooguit 60 procent van de
       tussenruimte uit, zodat ze het bewijs ernaast nooit raakt (1024) */
    .portret__handtekening {
        top: auto; bottom: 2.25rem; right: calc(var(--hero-tussen) * -0.6);
        width: min(19rem, 72%); max-width: none; transform: rotate(-5deg);
    }
}

/* 8. Secties onder het eerste scherm ------------------------------------------------------------------------ */

/* 8.1 Keuzehulp: vier tegels in een trap. De fotozone zakt per tegel een stap, dus het witte vel begint van
   tegel 1 naar 4 telkens hoger. Het beeld is 150 procent van de zone en iets omhoog geschoven, zodat de effen
   band onderaan de AI-beelden nooit in beeld komt. De hele tegel is klikbaar via ::before van de knop. */
.keuzes { display: grid; gap: 1rem; }
.keuze {
    --keuze-n: 0; --keuze-zoom: 150%; --keuze-schuif: -6%;
    position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--glans-rand), var(--shadow-card);
}
.keuze:nth-child(1) { --keuze-zoom: 160%; --keuze-schuif: -10%; }
.keuze:nth-child(2) { --keuze-n: 1; }
.keuze:nth-child(3) { --keuze-n: 2; }
.keuze:nth-child(4) { --keuze-n: 3; }
/* Een echte foto uit de fotoshoot (tegels 2 en 4, 15/10/26) heeft geen effen band: niet vergroten, niet verschuiven */
.keuze--foto { --keuze-zoom: 100%; --keuze-schuif: 0%; }
.keuze__beeld {
    flex: none; height: calc(var(--trap-foto) - var(--keuze-n) * var(--trap-stap)); margin-bottom: -1.25rem;
    overflow: hidden; background: var(--color-bg-alt);
}
.keuze__beeld img {
    width: 100%; height: var(--keuze-zoom); max-width: none; object-fit: cover; object-position: 50% 30%;
    transform: translateY(var(--keuze-schuif)); transition: transform 0.5s ease;
}
.keuze:hover .keuze__beeld img { transform: translateY(var(--keuze-schuif)) scale(1.03); }
.keuze__vel {
    position: relative; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem;
    background: var(--color-surface); border-radius: var(--radius-vel) var(--radius-vel) 0 0; box-shadow: var(--shadow-vel);
}
.keuze__titel { font-size: 1.125rem; line-height: 1.3; }
.keuze__tekst { font-size: var(--fs-klein); line-height: 1.5; color: var(--color-text-subtle); }
.keuze__meta {
    align-self: flex-start; padding: 0.3125rem 0.875rem; border-radius: var(--radius-btn);
    background: var(--color-bg-alt); font-size: var(--fs-fijn); font-weight: var(--fw-sterk); color: var(--color-text);
}
.keuze__actie { margin-top: auto; padding-top: 0.875rem; }
/* "Boek online" met de pijl in een zwart rondje, over de volle breedte; bij hover wordt het rondje roze */
.keuze__knop {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%;
    font-size: 0.9375rem; font-weight: var(--fw-sterk); color: var(--color-heading);
}
.keuze__knop::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-md); }
.keuze__knop .icon {
    flex: none; width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%;
    background: var(--zendi-zwart); color: #ffffff; stroke-width: 2;
    transition: background-color var(--transition), transform 0.35s var(--ease-veer);
}
.keuze:hover .keuze__knop .icon,
.keuze__knop:focus-visible .icon { background: var(--color-hover); transform: translateX(0.25rem); }
/* Tegel met een knop per arts (Eerste keer injectables): geen klikvlak over de hele tegel, elke knop reageert apart */
.keuze__actie--artsen { display: flex; flex-direction: column; gap: 0.5rem; }
.keuze__actie--artsen .keuze__knop::before { content: none; }
.keuze:hover .keuze__actie--artsen .keuze__knop .icon { background: var(--zendi-zwart); transform: none; }
.keuze .keuze__actie--artsen .keuze__knop:hover .icon,
.keuze .keuze__actie--artsen .keuze__knop:focus-visible .icon { background: var(--color-hover); transform: translateX(0.25rem); }
@media (min-width: 640px) {
    .keuzes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .keuzes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
    .keuze__vel { padding-inline: 1rem; }
}
/* Op gsm compact (Danilo 13/10/26): het beeld als smalle strook links, het vel schuift er van rechts over. Zo staan
   de vier keuzes samen op ruwweg één scherm in plaats van vier grote tegels onder elkaar. */
@media (max-width: 639px) {
    .keuzes { gap: 0.75rem; }
    .keuze { flex-direction: row; }
    .keuze__beeld { width: 6.5rem; height: auto; margin-bottom: 0; margin-right: -1rem; }
    .keuze__vel {
        gap: 0.375rem; padding: 1rem 1rem 0.875rem 1.125rem;
        border-radius: var(--radius-vel) 0 0 var(--radius-vel); box-shadow: -0.5rem 0 1.25rem -0.75rem rgba(40, 16, 28, 0.3);
    }
    .keuze__titel { font-size: 1.0625rem; }
    .keuze__actie { padding-top: 0.5rem; }
    .keuze__knop .icon { width: 2rem; height: 2rem; padding: 0.4375rem; }
}

/* 8.2 Wie je behandelt: drie foto's in een trap, zoals de keuzehulp. Geen reviews bij de personen (bij de artsen sowieso niet: deontologie). */
.team__lijst { display: grid; gap: 3rem 2.5rem; align-items: start; }
.persoon__foto { overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-bg-alt); border-radius: var(--radius-md); }
.persoon__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Steve nauwer gekadreerd dan in het eerste scherm: hoofd en schouders */
.persoon--steve .persoon__foto img { object-position: 50% 12%; transform: scale(1.3); transform-origin: 50% 18%; }
.persoon--de-cuyper .persoon__foto img { object-position: 50% 30%; }
.persoon__naam { margin-top: 1.5rem; }
.persoon__rol { margin-top: 0.5rem; max-width: 26em; color: var(--color-text-subtle); }
@media (min-width: 768px) {
    .team__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .team__lijst > li:nth-child(2) { margin-top: 4rem; }
    .team__lijst > li:nth-child(3) { margin-top: 8rem; }
}
/* Onder 768 breed één rij waar je doorheen veegt, zoals de behandelingen (Danilo 13/10/26) */
@media (max-width: 767px) {
    .team__lijst {
        grid-auto-flow: column; grid-auto-columns: min(72%, 20rem); gap: 1rem;
        /* overflow-y dicht en geen doorveren opzij: anders pakt de rij op iPhone ook een veeg naar onder */
        overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * var(--container-gutter)); padding-inline: var(--container-gutter);
        scroll-padding-inline: var(--container-gutter);
    }
    .team__lijst::-webkit-scrollbar { display: none; }
    .team__lijst > li { scroll-snap-align: start; }
    .persoon__naam { margin-top: 1rem; }
}

/* 8.3 Behandelingen: acht tegels in symmetrie. Elke tegel loopt met subgrid mee in dezelfde vijf rijen (beeld,
   titel, prijs, uitleg, link), zodat die in een rij tegels overal op dezelfde hoogte staan, ook als een tegel
   geen prijs of geen uitleg heeft. De foto loopt tot de rand, het witte vel schuift erover, en de link strekt
   zich over de hele tegel uit. Vier naast elkaar pas vanaf 1200, zodat "Bekijk herenbehandeling" op één regel past. */
.behandelingen__lijst { display: grid; column-gap: 1rem; }
.behandeling {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: 1rem;
    background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--glans-rand), var(--shadow-card);
}
.behandeling__beeld { position: relative; z-index: -1; grid-row: 1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-alt); }
.behandeling__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 0.5s ease; }
.behandeling__beeld--boven img { object-position: 50% 12%; }   /* het merk VIVACE op het toestel blijft heel */
.behandeling:hover .behandeling__beeld img { transform: scale(1.04); }
.behandeling__vel {
    grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0.625rem;
    margin-top: -1.25rem; padding: 1.25rem 1.25rem 1.125rem;
    background: var(--color-surface); border-radius: var(--radius-vel) var(--radius-vel) 0 0; box-shadow: var(--shadow-vel);
}
.behandeling__titel { grid-row: 1; font-size: 1.125rem; line-height: 1.3; }
/* De prijs als zacht roze label met een roze stip; liever een tweede regel dan uit het vel */
.behandeling__prijs {
    grid-row: 2; justify-self: start; align-self: start;
    display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    border-radius: var(--radius-btn); background: var(--color-bg-alt);
    font-size: var(--fs-fijn); font-weight: var(--fw-sterk); color: var(--color-text);
}
.behandeling__prijs::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.behandeling__tekst { grid-row: 3; max-width: var(--measure); font-size: var(--fs-klein); color: var(--color-text-subtle); }
/* De link onderaan over de volle breedte, de pijl altijd rechts, ook als de tekst op twee regels valt */
.behandeling__link { grid-row: 4; align-self: end; width: 100%; justify-content: space-between; margin-top: auto; padding-top: 0.25rem; font-size: var(--fs-fijn); }
.behandeling__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-md); }
.behandeling:hover .behandeling__link .icon { background: var(--color-hover); transform: translateX(0.25rem); }
@media (min-width: 640px) {
    .behandelingen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Op gsm is de lijst van de startpagina één rij waar je doorheen veegt (Danilo 13/10/26, acht tegels onder elkaar
   was te lang). Elke tegel is een kolom van dezelfde vijf rijen, de volgende steekt half in beeld. De rij loopt
   tot de schermranden; de ruimte onderaan is voor de schaduw van de tegels. */
@media (max-width: 639px) {
    .behandelingen__lijst--veeg {
        grid-auto-flow: column; grid-auto-columns: 78%; grid-template-rows: repeat(5, auto);
        overflow: auto hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-inline: calc(-1 * var(--container-gutter)); padding-inline: var(--container-gutter);
        scroll-padding-inline: var(--container-gutter); padding-block: 0.5rem 2rem; margin-bottom: -2rem;
    }
    .behandelingen__lijst--veeg::-webkit-scrollbar { display: none; }
    .behandelingen__lijst--veeg .behandeling { scroll-snap-align: start; margin-bottom: 0; }
}
@media (min-width: 1200px) {
    .behandelingen__lijst { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
    .behandeling__titel { font-size: 1.0625rem; }
}

/* 8.4 Wat klanten zeggen: de twee gemiddelden als zachte labels, daaronder twee rijen echte reviews die traag
   voorbij schuiven in tegengestelde richting, te verslepen met de muis of je vinger en trager onder de muis
   (reviews.js). Met "minder beweging" staan ze stil, slepen kan wel. Geen aanhalingsteken: een rondje met de
   initiaal, de naam en de bron. */
.reviews__scores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: -0.5rem 0 2rem; }
.reviews__scores li {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; padding: 0.625rem 1.125rem;
    border-radius: var(--radius-btn); background: var(--color-bg-alt); font-size: var(--fs-klein); color: var(--color-text-subtle);
}
.reviews__scores strong { color: var(--color-heading); }
.reviews__scores .sterren { gap: 0.125rem; }
.reviews__scores .ster { width: 1rem; height: 1rem; }
.reviewband {
    display: grid; gap: 1.25rem; overflow: hidden; padding-block: 0.75rem 1.75rem;
    -webkit-user-select: none; user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Horizontaal slepen gaat naar de band, verticaal scrolt de pagina */
.reviewband__rij { display: flex; width: max-content; touch-action: pan-y; will-change: transform; }
.reviewband.is-actief .reviewband__rij { cursor: grab; }
.reviewband.is-slepen .reviewband__rij { cursor: grabbing; }
.reviewband__spoor { display: flex; align-items: stretch; gap: 1.25rem; padding-right: 1.25rem; }
.reviewkaart {
    display: flex; flex-direction: column; gap: 1rem; width: 21rem; height: 100%; padding: 1.5rem 1.75rem 1.75rem;
    background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--glans-rand), var(--shadow-card);
}
.reviewkaart__kop { display: flex; align-items: center; gap: 0.875rem; }
.reviewkaart__initiaal {
    flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--zendi-roze-knop); color: #ffffff; font-size: 1.0625rem; font-weight: var(--fw-sterk); line-height: 1;
}
/* Drie kleuren om de beurt: roze, 35 procent roze met zwart (13 op 1), zwart */
.reviewband li:nth-child(3n+2) .reviewkaart__initiaal { background: var(--zendi-roze-35); color: var(--zendi-zwart); }
.reviewband li:nth-child(3n) .reviewkaart__initiaal { background: var(--zendi-zwart); color: #ffffff; }
.reviewkaart__naam { display: block; font-weight: var(--fw-sterk); line-height: 1.3; color: var(--color-heading); }
.reviewkaart__bron { display: block; font-size: var(--fs-fijn); line-height: 1.4; color: var(--color-text-subtle); }
.reviewkaart__tekst { font-size: 1.0625rem; line-height: 1.6; color: var(--color-heading); }
@media (max-width: 767px) {
    .reviewkaart { width: 16.5rem; padding: 1.25rem 1.375rem 1.5rem; }
}
/* De reviews schuiven zacht omhoog in beeld (reviews.js). Met de eigenschap translate, zodat het niet botst met
   het schuiven van de rijen (transform). */
.schuift-in {
    opacity: 0; translate: 0 1.5rem;
    transition: opacity 0.8s ease, translate 0.9s var(--ease-veer);
    transition-delay: var(--schuif-vertraging, 0ms);
}
.schuift-in.is-zichtbaar { opacity: 1; translate: 0 0; }

/* 8.5 Zo boek je: de kop, een korte uitleg en de drie stappen als tijdlijn met roze iconen; ernaast de echte
   boekingsmodule op een gsm (schermafbeelding, enkel de twee huidbehandelingen, zonder injecties en hun prijzen).
   Daaronder Goed om te weten en de vragen. */
.afspraak { overflow-x: clip; }   /* de gloed achter de gsm blijft binnen de sectie */
.afspraak__boeken { display: grid; gap: 3rem; align-items: center; margin-bottom: 4.5rem; }
.afspraak__intro { margin-top: 1rem; max-width: 30em; font-size: var(--fs-lead); color: var(--color-text-subtle); }
.tijdlijn { position: relative; display: grid; gap: 1.75rem; margin: 2.25rem 0 2.5rem; }
.tijdlijn::before {
    content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; width: 2px; transform: translateX(-50%);
    background: linear-gradient(var(--zendi-roze-knop), var(--zendi-roze-35));
}
.tijdlijn__stap { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
.tijdlijn__icoon {
    grid-row: 1 / span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--zendi-roze-knop); color: #ffffff; box-shadow: 0 0 0 6px var(--color-surface);
}
.tijdlijn__icoon .icon { width: 1.375rem; height: 1.375rem; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tijdlijn__label {
    font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4;
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-text);
}
.tijdlijn__tekst { font-size: 1.1875rem; line-height: 1.35; color: var(--color-heading); }
.afspraak__toestel { position: relative; isolation: isolate; justify-self: center; width: min(100%, 19rem); margin-top: 1rem; }
/* Een zachte roze gloed achter de gsm */
.afspraak__toestel::after {
    content: ""; position: absolute; z-index: -2; inset: 20% -16% 0 -16%; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(246, 187, 215, 0.7), transparent 70%);
    filter: blur(24px);
}
.afspraak__scherm {
    width: 100%; border: 0.5rem solid var(--zendi-zwart); border-radius: 2.25rem;
    background: #ffffff; box-shadow: 0 30px 60px -30px rgba(40, 16, 28, 0.55);
}
.afspraak__raster { display: grid; gap: 3rem; }
.tussenkop { margin-bottom: 1rem; font-size: 1.375rem; font-weight: var(--fw-kop); line-height: 1.3; color: var(--color-heading); }
.weten { display: grid; gap: 0.75rem; }
.weten__rij { padding: 1.125rem 1.375rem; background: var(--color-surface); border-radius: var(--radius-vel); box-shadow: var(--glans-rand), var(--shadow-card); }
.weten dt { font-weight: var(--fw-sterk); color: var(--color-heading); }
.weten dd { margin-top: 0.25rem; font-size: var(--fs-klein); color: var(--color-text-subtle); }
.weten__link { display: flex; width: max-content; margin-top: 0.75rem; }   /* de routelink op een eigen regel */
.vragen { display: grid; gap: 0.75rem; }
.vraag { background: var(--color-surface); border-radius: var(--radius-vel); box-shadow: var(--glans-rand), var(--shadow-card); }
.vraag summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    min-height: 3.5rem; padding: 1rem 1.375rem; font-size: 1.0625rem; line-height: 1.4; color: var(--color-heading);
    cursor: pointer; list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
/* De plus in een zwart rondje, open een min, bij hover roze */
.vraag summary::after {
    content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
    background:
        linear-gradient(#ffffff, #ffffff) center / 0.75rem 2px no-repeat,
        linear-gradient(#ffffff, #ffffff) center / 2px 0.75rem no-repeat,
        var(--zendi-zwart);
    transition: background-color var(--transition);
}
.vraag[open] summary::after { background: linear-gradient(#ffffff, #ffffff) center / 0.75rem 2px no-repeat, var(--zendi-zwart); }
.vraag summary:hover::after { background-color: var(--color-hover); }
.vraag p { max-width: 36em; padding: 0 1.375rem 1.25rem; font-size: var(--fs-klein); color: var(--color-text-subtle); }
@media (min-width: 900px) {
    .afspraak__boeken { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 4rem; }
    .afspraak__toestel { margin-top: 0; }
}
@media (min-width: 1024px) {
    .afspraak__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 4rem; }
}
@media (max-width: 479px) {
    .afspraak__boeken .btn--primair { width: 100%; }
    .afspraak__toestel { width: min(80%, 16rem); }
}

/* 9. Componenten ------------------------------------------------------------------------------------------- */

/* 9.1 De cijfers: aantal groot, daaronder de vijf roze sterren met het gemiddelde en de bron */
:where(.scores) { display: flex; flex-wrap: wrap; }   /* nul specificiteit: een plaatsing wint altijd */
.score { display: grid; justify-items: start; gap: 0.375rem; }
.score__aantal {
    font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem); font-weight: var(--fw-kop); line-height: 1.1;
    letter-spacing: -0.02em; color: var(--color-heading);
}
.score__sterren { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.score__sterren .sterren { gap: 0.1875rem; }
.score__sterren .ster { width: 1.125rem; height: 1.125rem; }
.score__gemiddelde { font-size: var(--fs-klein); font-weight: var(--fw-label); line-height: 1; color: var(--color-heading); }
.score__bron { font-size: var(--fs-fijn); line-height: 1.4; color: var(--color-text-subtle); }
/* "Sinds" klein in roze kapitalen voor 2007; is het vak te smal, dan schuift het boven het jaartal */
.score--jaar .score__aantal { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.375rem; }
.score__sinds {
    font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4;
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent-text);
}
/* Het embleem even hoog als een cijfer, zodat de uitleg in beide vakken op dezelfde hoogte begint */
.score__embleem { width: calc(1.1 * clamp(2.25rem, 1.8rem + 1.5vw, 3rem)); height: auto; aspect-ratio: 1; border-radius: 50%; }
.score__emblemen { display: flex; gap: 0.5rem; }   /* Top Rated 2024 en 2025 naast elkaar */
.sterren { display: inline-flex; gap: 0.2rem; color: var(--color-accent); }
.ster { width: 1.25rem; height: 1.25rem; }

/* 9.2 De teller: elk cijfer is een strook 0 tot 9 (twee keer) die naar boven schuift (teller.js). Het
   onzichtbare eindcijfer geeft de kolom zijn breedte, zodat 643 na het rollen exact staat zoals gewone tekst. */
.teller { display: inline-flex; }
.teller__rollen { display: inline-flex; align-items: flex-start; }
.teller__kolom { position: relative; display: inline-block; height: 1.1em; line-height: 1.1; overflow: hidden; }
.teller__maat { visibility: hidden; }
.teller__strip {
    position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; align-items: center;
    translate: -50% 0; transition: transform var(--teller-duur, 1.8s) cubic-bezier(0.16, 1, 0.3, 1);
}
.teller__strip > span { display: block; height: 1.1em; }

/* 9.4 De Salonized-knop belicht (boekhulp.js): in het eerste scherm een wit etiketje "Hier boek je in een paar
   klikken" met een krulpijl naar de knop (op gsm en tablet weg bij het scrollen, op desktop blijft het staan), en een lichtstreep die om de paar
   seconden over "Maak afspraak" schuift. De knop zelf is een iframe van Salonized: boekhulp.js meet hem en zet
   --bk-x, --bk-y, --bk-w, --bk-h en --bk-r. Alles weg zolang de module openstaat. Op desktop blijft het etiketje
   ook weg waar het over tekst of een beeld zou vallen (is-bots), zoals op een laptop van 1280 breed. */
.boekhulp { position: fixed; z-index: 2147480998; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.boekhulp.is-klaar { opacity: 1; }
.boekhulp.is-open { opacity: 0 !important; visibility: hidden; }
.boekhulp--pijl.is-voorbij,
.boekhulp--pijl.is-bots { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
/* Het etiketje rechts uitgelijnd met de twee knoppen; de krulpijl eronder wijst naar het woord "Maak afspraak",
   op 70 procent van de roze knop (links staat het logo van Salonized). De punt van de pijl zit 21 pixels van de
   linkerrand van de tekening. Zo loopt de pijl op 1440 breed niet meer over "Top Rated 2025 van Treatwell". */
.boekhulp--pijl { left: calc(var(--bk-r) - 17rem); top: var(--bk-y); width: 17rem; height: 7.75rem; transform: translateY(-100%); }
.boekhulp__notitie {
    position: absolute; top: 0; right: 0; width: max-content; max-width: 100%;
    padding: 0.5rem 0.875rem; border-radius: 0.875rem; background: #ffffff;
    box-shadow: 0 1px 2px rgba(40, 16, 28, 0.06), 0 12px 28px -12px rgba(40, 16, 28, 0.35);
    font-size: 0.9375rem; font-weight: var(--fw-label); line-height: 1.3; color: var(--color-accent-text);
    transform: rotate(-2deg); transform-origin: right center;
}
.boekhulp__pijl {
    position: absolute; bottom: 0.125rem; width: 5.5rem; height: auto; color: var(--zendi-roze-knop);
    left: calc(var(--bk-x) + var(--bk-w) * 0.7 - (var(--bk-r) - 17rem) - 21px);
}
/* Op gsm geen etiketje (Danilo 13/10/26: de knop is daar duidelijk genoeg). De glans blijft. */
@media (max-width: 599px) {
    .boekhulp--pijl { display: none; }
}
.boekhulp--glans {
    z-index: 2147481001; left: var(--bk-x); top: var(--bk-y); width: var(--bk-w); height: var(--bk-h);
    overflow: hidden; border-radius: 6px 0 0 6px;
}
.boekhulp--glans::after {
    content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-160%) skewX(-12deg);
    animation: bk-glans 4.5s ease-in-out 1.2s infinite;
}
@keyframes bk-glans {
    0%   { transform: translateX(-160%) skewX(-12deg); }
    35%  { transform: translateX(320%) skewX(-12deg); }
    100% { transform: translateX(320%) skewX(-12deg); }
}

/* 10. Footer: gewoon wit over de volle breedte, een dunne lijn bovenaan ---------------------------------------- */
.site-footer {
    margin-top: 4.5rem; padding-top: 4.5rem; border-top: 1px solid var(--color-border);
    font-size: var(--fs-klein); line-height: 1.6; background: var(--color-bg); color: var(--color-text);
}
.site-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.site-footer__merk { grid-column: 1 / -1; }
.site-footer__logo { height: 6.5rem; width: auto; }
.site-footer__kop {
    margin-bottom: 0.875rem; font-size: var(--fs-label); font-weight: var(--fw-label); line-height: 1.4;
    letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-subtle);
}
.site-footer__kolom p + p,
.site-footer__links li + li { margin-top: 0.375rem; }
.site-footer a { transition: color var(--transition); }
.site-footer a:hover { color: var(--color-accent-text); }
/* Onderaan ruimte voor de zwevende Salonized-knoppen */
.site-footer__onder {
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 3.5rem; padding-block: 1.5rem 5.5rem;
    border-top: 1px solid var(--color-border); font-size: var(--fs-fijn); color: var(--color-text-subtle);
}
@media (min-width: 1024px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); }   /* merk en vijf kolommen */
    .site-footer__merk { grid-column: auto; }
}
/* Het btw-nummer is één onbreekbaar geheel: op smalle schermen een kleinere letter en minder tussenruimte, onder
   380 één kolom, zodat het nergens uit zijn kolom loopt */
@media (max-width: 419px) {
    .site-footer { font-size: var(--fs-fijn); }
    .site-footer__inner { column-gap: 1.25rem; }
}
@media (max-width: 379px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* 11. Hulpklassen ------------------------------------------------------------------------------------------ */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem;
    background: var(--zendi-zwart); color: #ffffff; font-size: var(--fs-klein);
}
.skip-link:focus { top: 1rem; }
.nowrap { white-space: nowrap; }
/* Ontbrekend gegeven: een zichtbaar label, nooit iets verzinnen */
.volgt {
    display: inline-block; padding: 0.0625rem 0.5rem; font-size: var(--fs-fijn); font-weight: var(--fw-sterk);
    color: #6b4a00; background: #fff4d6; border: 1px dashed #c9a227;
}

/* 12. Eenvoudige pagina's: 404 en privacybeleid ------------------------------------------------------------ */
.pagina-kop { padding-block: 2.5rem var(--spacing-title); }
.pagina-kop__lead { margin-top: 1.5rem; max-width: 34em; font-size: var(--fs-lead); color: var(--color-text-subtle); }
.pagina-kop__lead a,
.sectie-kop__intro a { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; transition: color var(--transition); }
.pagina-kop__lead a:hover,
.sectie-kop__intro a:hover { color: var(--color-accent-text); }
.pagina-kop__acties { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.pagina-inhoud { padding-bottom: var(--spacing-section); }
.leestekst > * { max-width: var(--container-narrow); }
.leestekst h2 { margin: 3rem 0 1rem; font-size: 1.5rem; line-height: 1.3; }
.leestekst h3 { margin: 1.75rem 0 0.5rem; font-size: 1.125rem; font-weight: var(--fw-sterk); }
.leestekst p, .leestekst ul { margin-bottom: var(--spacing-paragraph); }
.leestekst ul { padding-left: 1.25rem; list-style: disc; }
.leestekst li + li { margin-top: 0.375rem; }
.leestekst a { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; transition: color var(--transition); }
.leestekst a:hover { color: var(--color-accent-text); }
.leestekst-datum { font-size: var(--fs-fijn); color: var(--color-text-subtle); }
.leestekst-info {
    margin-block: var(--spacing-block); padding: 1.5rem 1.75rem;
    background: var(--color-bg-alt); border-radius: var(--radius-vel);
}
.inhoud-lijst { columns: 2 16rem; column-gap: 2rem; margin-bottom: var(--spacing-block); }
.inhoud-lijst li { break-inside: avoid; }
@media (max-width: 479px) {
    .pagina-kop__acties .btn { flex: 1 1 auto; --btn-px: 1.125rem; }
    .leestekst h2 { font-size: min(1.5rem, 7.4vw); }   /* "OxyGeneo-behandeling" op 320 px */
}
@media (min-width: 900px) {
    .pagina-kop { padding-block: 4.5rem var(--spacing-title); }
}

/* 13. Behandelpagina's (includes/behandeling.php): de kop met vier feiten op het zachte roze vlak, zoals het bewijs
   in het eerste scherm, de tekst in één leeskolom en de prijzen als witte rijen op de golf, elke rij een boeklink
   met de dienst al gekozen. Zo boek je is het blok van de home. */
.kruimel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin-bottom: 2rem;
    font-size: var(--fs-fijn); line-height: 1.4; color: var(--color-text-subtle);
}
.kruimel a { transition: color var(--transition); }
.kruimel a:hover { color: var(--color-accent-text); }
.kruimel [aria-current] { color: var(--color-heading); }
.behandeling-kop__raster { display: grid; gap: 2.5rem; }
.behandeling-kop__tekst .kopgroep h1 { max-width: 16em; }
.feiten {
    container-type: inline-size;   /* geen links of knoppen erin, dus geen laadflits (zie de memory over l-unica) */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; align-content: start;
    padding: 1.75rem 2rem; background: var(--color-bg-alt); border-radius: var(--radius-md);
}
/* De waarde groot bovenaan, de uitleg eronder (in de HTML staat de uitleg als dt eerst). Hoogstens zo groot dat
   5 em in een kolom past: het langste woord is Milesman (4,7 em), een duur als "60 tot 90" 4,3 em. Zonder die grens
   liep Milesman bij 900 pixels 41 pixels uit het vak (28/9/26). */
.feit { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.375rem; }
.feit__waarde {
    font-size: min(clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem), 10cqi - 0.2rem); font-weight: var(--fw-kop); line-height: 1.1;
    letter-spacing: -0.02em; color: var(--color-heading);
}
.feit__uitleg { font-size: var(--fs-fijn); line-height: 1.4; color: var(--color-text-subtle); }
/* De kop met een foto (Danilo 27/9/26, "nu is het wat droog"): de foto met de feiten eronder, die als het vel van een
   tegel over de foto schuiven. Op gsm onder de tekst, op tablet de foto breder, vanaf 900 rechts van de tekst. */
.behandeling-kop__kaart { overflow: hidden; display: grid; border-radius: var(--radius-md); background: var(--color-bg-alt); }
.behandeling-kop__beeld { aspect-ratio: 4 / 3; }
.behandeling-kop__beeld img { width: 100%; height: 100%; object-fit: cover; }
.behandeling-kop__kaart .feiten { position: relative; margin-top: -1.5rem; border-radius: var(--radius-vel) var(--radius-vel) 0 0; box-shadow: var(--shadow-vel); }
@media (min-width: 600px) and (max-width: 899px) {
    .behandeling-kop__beeld { aspect-ratio: 16 / 9; }
}
.behandeling-tekst { padding-block: 1.5rem 2rem; }   /* de golf van de prijzen loopt zelf ruim uit */
.behandeling-tekst .leestekst > :first-child { margin-top: 0; }

/* De prijzen: op desktop de kop links en de rijen rechts */
.prijzen-sectie__raster { display: grid; gap: 0 4rem; }
.prijzen { display: grid; gap: 0.625rem; }
.prijs {
    position: relative; display: grid; align-items: center; column-gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "tekst duur bedrag boek";
    padding: 0.875rem 1rem 0.875rem 1.375rem;
    background: var(--color-surface); border-radius: var(--radius-vel); box-shadow: var(--glans-rand), var(--shadow-card);
}
.prijs__tekst { grid-area: tekst; display: grid; gap: 0.125rem; }
.prijs__naam { font-weight: var(--fw-label); line-height: 1.35; color: var(--color-heading); }
.prijs__uitleg { font-size: var(--fs-fijn); line-height: 1.45; color: var(--color-text-subtle); }
.prijs__duur { grid-area: duur; font-size: var(--fs-fijn); color: var(--color-text-subtle); white-space: nowrap; }
.prijs__bedrag { grid-area: bedrag; font-weight: var(--fw-sterk); color: var(--color-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* "Boek" met de pijl in een zwart rondje; de link strekt zich over de hele rij uit */
.prijs__boek { grid-area: boek; display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--fs-fijn); font-weight: var(--fw-sterk); color: var(--color-heading); }
.prijs__boek::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-vel); }
.prijs__boek .icon {
    width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%;
    background: var(--zendi-zwart); color: #ffffff; stroke-width: 2;
    transition: background-color var(--transition), transform 0.35s var(--ease-veer);
}
.prijs:hover .prijs__boek .icon,
.prijs__boek:focus-visible .icon { background: var(--color-hover); transform: translateX(0.25rem); }
.prijzen__noot { margin-top: 1.5rem; }
/* Wanneer de prijzen uit Salonized kwamen: een oude datum hier zegt dat het ophalen stilstaat (diensten.php) */
.prijzen__bron { margin-top: 1rem; font-size: var(--fs-fijn); color: var(--color-text-subtle); }
.leestekst .prijzen__bron { margin-top: 2rem; }
@media (max-width: 599px) {
    /* Op gsm de naam bovenaan, duur en prijs eronder, het rondje rechts */
    .prijs {
        grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; row-gap: 0.25rem;
        grid-template-areas: "tekst tekst boek" "duur bedrag boek";
        padding: 0.875rem 0.875rem 0.875rem 1.125rem;
    }
    .prijs__boek { font-size: 0; gap: 0; }   /* enkel het rondje; "Boek" en de naam blijven voor schermlezers */
    .prijs__boek .sr-only { font-size: var(--fs-fijn); }
}
@media (max-width: 359px) {
    .feiten { grid-template-columns: minmax(0, 1fr); }
}
/* Het overzicht /behandelingen/ (13/10/26, Danilo: "heel veel blokken" en daarna "dubbele informatie"): één lijst.
   Per onderwerp een korte kop met uitleg en daaronder lage stroken: links een klein beeld, dan de naam met de uitleg,
   eronder de prijs en rechts de knop die zegt waar je heen gaat ("Naar HydraFacial") of "Boek online" voor een dienst
   zonder eigen pagina. Op gsm en tablet onder elkaar, vanaf 1200 breed twee naast elkaar. Vervangt de tegels bovenaan
   en de rijen per groep. */
.overzicht { padding-bottom: var(--spacing-section); }
/* Bovenaan de vijf onderwerpen als sprong naar hun blok, zodat je niet door alles moet scrollen */
.sprong { margin-top: 2.25rem; }
.sprong__label { margin-bottom: 0.625rem; font-size: var(--fs-fijn); color: var(--color-text-subtle); }
.sprong ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sprong a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem;
    border-radius: var(--radius-btn); background: var(--color-bg-alt);
    font-size: var(--fs-klein); font-weight: var(--fw-label); color: var(--color-heading);
    transition: background-color var(--transition), color var(--transition);
}
.sprong a:hover { background: var(--color-hover); color: #ffffff; }
.groep { scroll-margin-top: 2rem; }
.groep + .groep { margin-top: clamp(4.5rem, 3rem + 4vw, 7rem); }
.groep .sectie-kop { margin-bottom: 1.5rem; }
.groep h2 { font-size: 1.625rem; }
.stroken { display: grid; gap: 0.75rem 1rem; }
.strook {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "beeld tekst tekst" "beeld prijs knop";
    column-gap: 1rem; row-gap: 0.625rem; align-items: center; padding-right: 0.875rem;
    background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--glans-rand), var(--shadow-card);
}
.strook__beeld { grid-area: beeld; align-self: stretch; position: relative; z-index: -1; min-height: 6.5rem; overflow: hidden; background: var(--color-bg-alt); }
.strook__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 0.5s ease; }
.strook:hover .strook__beeld img { transform: scale(1.04); }
.strook__tekst { grid-area: tekst; align-self: end; padding-top: 0.875rem; }
.strook__naam { font-size: 1.0625rem; line-height: 1.3; }
.strook__uitleg { margin-top: 0.25rem; font-size: var(--fs-fijn); line-height: 1.45; color: var(--color-text-subtle); }
.strook__prijs {
    grid-area: prijs; justify-self: start; align-self: start; margin-bottom: 0.875rem;
    display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    border-radius: var(--radius-btn); background: var(--color-bg-alt);
    font-size: var(--fs-fijn); font-weight: var(--fw-sterk); color: var(--color-text);
}
.strook__prijs::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.strook__knop { grid-area: knop; justify-self: end; align-self: start; gap: 0.75rem; margin-bottom: 0.875rem; font-size: var(--fs-fijn); white-space: nowrap; }
.strook__knop::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-md); }
.strook:hover .strook__knop .icon { background: var(--color-hover); transform: translateX(0.25rem); }
.strook__lang { display: none; }   /* op gsm enkel het rondje; de naam staat er voor schermlezers */
@media (min-width: 600px) {
    .strook { grid-template-columns: 6.5rem minmax(0, 1fr) auto; column-gap: 1.25rem; padding-right: 1.125rem; }
    .strook__lang { display: inline; }
    .strook__kort { display: none; }
}
@media (min-width: 1200px) {
    .stroken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* "Gezichtsbehandelingen" en "Gezichtsbehandeling" passen op 320 px zonder af te breken (2/11/26) */
@media (max-width: 479px) {
    .groep h2 { font-size: min(1.625rem, 7.2vw); }
    .strook__naam { font-size: min(1.0625rem, 4.9vw); }
}

/* De prijslijst: een eigen lijst uit Salonized (keuze Danilo 27/9/26, in de plaats van de embed). Bovenaan de
   namen als sprong naar hun blok, daaronder de blokken in twee kolommen op de golf, elk met de rijen van het prijsblok. */
.prijslijst__inhoud { margin-top: 2.5rem; }
.prijslijst__inhoud ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; max-width: 46rem; }
.prijslijst__inhoud a {
    display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-klein); font-weight: var(--fw-label);
    color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em;
    transition: color var(--transition);
}
.prijslijst__inhoud a:hover { color: var(--color-accent-text); }
.prijslijst__groepen { columns: 2 30rem; column-gap: 3rem; }
.prijsgroep { break-inside: avoid; padding-bottom: 3.5rem; scroll-margin-top: 1.5rem; }
.prijsgroep__kop { margin-bottom: 0.5rem; font-size: 1.625rem; }
.prijsgroep__zin { margin-bottom: 1.25rem; max-width: var(--measure); color: var(--color-text-subtle); }
.prijsgroep__kop + .prijzen { margin-top: 1.25rem; }
.prijsgroep__link { margin-top: 0.75rem; }
.prijslijst .prijzen__bron { margin-top: 0; }
@media (max-width: 767px) {
    .feiten { padding: 1.5rem 1.25rem; column-gap: 1.25rem; }
}
@media (min-width: 900px) {
    .behandeling-kop__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
    .behandeling-kop--beeld .behandeling-kop__raster { align-items: center; }
}
@media (min-width: 1024px) {
    .prijzen-sectie__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .prijzen-sectie__raster .sectie-kop { margin-bottom: 0; }
}

/* 13.2 Over ons: Steve met zijn portret en handtekening zoals in het eerste scherm, de artsen als twee kaarten zoals
   bij Wie je behandelt (zonder trap), de praktijk als leestekst. Geen reviews: de artsen staan op deze pagina. */
.over-steve__raster { --hero-tussen: clamp(3rem, 6vw, 6rem); display: grid; gap: 2.5rem; }
.over-steve .portret { grid-area: auto; }
/* Zigzag: de tweede rij heeft de tekst links en de foto rechts (Danilo 13/10/26) */
.over-steve__raster--omgekeerd { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.over-artsen__lijst { display: grid; gap: 3rem 2.5rem; align-items: start; }
.persoon__uitleg { margin-top: 0.75rem; max-width: 30em; }
.persoon__uitleg p + p { margin-top: 0.5rem; }
@media (min-width: 768px) {
    .over-artsen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* De foto naast de tekst, zodat de artsen niet groter in beeld komen dan Steve */
    .over-artsen__lijst .persoon { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 1.75rem; align-items: start; }
    .over-artsen__lijst .persoon__naam { margin-top: 0; }
}
@media (max-width: 767px) {
    .over-artsen__lijst .persoon__foto { max-width: 20rem; }
}
@media (min-width: 900px) {
    .over-steve__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--hero-tussen); align-items: center; }
    .over-steve__raster--omgekeerd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .over-steve__raster--omgekeerd .portret { justify-self: end; width: 100%; }   /* zonder breedte klapt de figuur dicht */
}

/* 13.3 Contact: de gegevens als witte vakken zoals Goed om te weten, de openingsuren als zichtbaar gat tot Steve ze
   bevestigt. Het telefoonnummer is gewone tekst, nooit een knop. */
.contact__gegevens { display: grid; gap: 0.75rem; }   /* de kaarten in een rij even hoog */
.contact__gegevens .weten__rij dd + dd { margin-top: 0.125rem; }
.contact__gegevens a:not(.link-pijl) { color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
@media (min-width: 768px) {
    .contact__gegevens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 13.4 Reel (23/10/26): een staande video zonder geluid naast een leeskolom (zendi_reel(), reel.js). Op /over-ons/
   bij De praktijk en op /medische-esthetiek/. Op gsm staat de video onder de tekst, vanaf 900 breed ernaast. */
.met-reel { display: grid; gap: 2.5rem; }
.reel { margin: 0; width: 100%; max-width: 18rem; }
.reel__kader {
    position: relative; overflow: hidden; aspect-ratio: 480 / 848;
    background: var(--color-bg-alt); border-radius: var(--radius-md); box-shadow: var(--glans-rand), var(--shadow-card);
}
.reel__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__knop {
    position: absolute; right: 0.75rem; bottom: 0.75rem; display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.92); color: var(--color-heading); box-shadow: 0 2px 10px rgba(40, 16, 28, 0.2);
    transition: color 0.2s ease;
}
.reel__knop .icon { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.reel__knop:hover, .reel__knop:focus-visible { color: var(--color-hover); }
.reel__knop:focus-visible { outline: 2px solid var(--color-hover); outline-offset: 3px; }
.reel__bijschrift { margin-top: 0.875rem; font-size: var(--fs-fijn); color: var(--color-text-subtle); }
@media (min-width: 900px) {
    .met-reel { grid-template-columns: minmax(0, var(--measure)) 18rem; column-gap: clamp(3rem, 7vw, 6rem); align-items: start; }
}

/* 14. Minder beweging: alles staat stil ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .boekhulp--glans { display: none; }   /* geen vaste witte streep op de knop (Danilo 13/10/26) */
}