/* ==========================================================================
   Lettertypes (eigen server, latin-subset)
   ========================================================================== */

/* Variabele lettertypes: één bestand per familie dekt alle gewichten van 400 tot 700.
   In gebruik: Archivo (Semi Expanded, breedte 112.5%) 400 en 600, Montserrat 400, 500, 600 en 700. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 112.5%;
    font-display: swap;
    src: url("../fonts/archivo-variabel.woff2") format("woff2");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/montserrat-variabel.woff2") format("woff2");
}

/* Links tonen in geen enkele staat een onderlijning */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* ==========================================================================
   Variabelen
   ========================================================================== */

:root {
    /* Kleurenschema: lichte achtergrond, donkere tekst, steenkleur als accent */
    --kleur-achtergrond: #F2EEE9;
    --kleur-footer: #DED8D0;
    --kleur-tekst: #2E2A26;
    /* Accent in drie tinten, naargelang de toepassing:
       - vulling met donkere tekst of een donker icoon erop (hover-achtergronden): 5,2:1 met de tekstkleur;
       - tekst, lijntjes en indicatoren op een lichte ondergrond (sterren, quote-teken, actief bolletje):
         5,0:1 op de pagina-achtergrond, 5,8:1 op wit;
       - tekst op de donkere hero-foto (actief menu-item, hover in de header, eyebrow). */
    --kleur-accent: #A89A89;
    --kleur-accent-tekst: #6F6459;
    --kleur-accent-foto: #D9D3CB;
    /* Enkel voor tekst op foto's (hero, header, actie-kaart) */
    --kleur-wit: #FFFFFF;

    --lijn: 1px solid rgba(46, 42, 38, 0.15);

    /* Archivo Semi Expanded (Google Fonts, breedte 112.5%): gratis vervanger voor
       "29LT Bukra Semi Wide", waarvoor een aparte, betaalde weblicentie bij 29LT nodig is */
    --font-tekst: "Archivo", Arial, sans-serif;
    --font-tekst-breedte: 112.5%;
    --font-titel: "Montserrat", Arial, sans-serif;
    --letter-spacing-titel: 0.12em;
    --radius: 4px;

    --max-breedte: 1200px;
    --gutter: 1.5rem;
    --header-breedte: 1440px;
    --header-pad: clamp(var(--gutter), 3vw, 40px);
    /* Gemeenschappelijke linkerlijn: logo, paginatitels en footer starten hier */
    --pagina-links: var(--header-pad);
}

/* Vanaf 1000px een vaste zijruimte van 40px (daaronder groeit ze mee van 24 naar 30px): header, de tekst en
   de badge in de hero en de footer staan zo links en rechts op dezelfde lijn */
@media (min-width: 1000px) {
    :root {
        --header-pad: 40px;
    }
}

/* ==========================================================================
   Basis
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-family: var(--font-tekst);
    font-stretch: var(--font-tekst-breedte);
    font-size: 1rem;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

/* Links zijn herkenbaar via kleur, gewicht en een kleurverandering bij hover (nooit onderlijnd) */
a {
    color: inherit;
    cursor: pointer;
}

/* Tekstlinks in de inhoud (links zonder class, zoals "Lees meer over mij" en "Bekijk de actie").
   Knoppen, logo en navigatie hebben een class of eigen stijl en vallen hier buiten. */
main a:not([class]) {
    color: var(--kleur-tekst);
    font-weight: 600;
    transition: background-color 0.2s, box-shadow 0.2s;
}

/* Hover op tekstlinks (lichte achtergrond): tekst blijft donker, steenkleurige markering erachter.
   De vulkleur zelf haalt als tekstkleur hier maar 2,4:1. De box-shadow geeft wat ademruimte zonder de lay-out te verschuiven. */
main a:not([class]):hover,
main a:not([class]):focus-visible,
footer a:not(.logo-link):not(.social-rond):hover,
footer a:not(.logo-link):not(.social-rond):focus-visible {
    color: var(--kleur-tekst);
    background-color: var(--kleur-accent);
    box-shadow: 0 0 0 0.15em var(--kleur-accent);
    border-radius: 2px;
}

/* Focusring bij toetsenbordnavigatie (Tab): 2px donkere rand met 2px afstand, op elk klikbaar element.
   Donker en niet de accentkleur: zo is de ring op elke ondergrond even duidelijk (ruim boven 3:1).
   :focus-visible: de ring verschijnt niet bij een muisklik en laat de hover-stijlen ongemoeid.
   Zonder elementnaam, zodat ook een schuifbare rij (de reviews op een smal scherm) dezelfde ring krijgt. */
:focus-visible {
    outline: 2px solid var(--kleur-tekst);
    outline-offset: 2px;
}

/* Op de donkere foto (header en titelblok van de hero): witte focusring */
.heeft-foto-hero header a:focus-visible,
.heeft-foto-hero header button:focus-visible,
.foto-hero a:focus-visible,
.foto-hero button:focus-visible {
    outline-color: var(--kleur-wit);
}

.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;
}

/* ==========================================================================
   Typografie
   ========================================================================== */

h1,
h2,
h3 {
    margin: 0 0 0.75em;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-titel);
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
}

h2 {
    font-size: clamp(1.375rem, 3vw, 1.875rem);
}

h3 {
    font-size: 1.125rem;
}

p {
    margin: 0 0 1em;
    color: var(--kleur-tekst);
}

/* Dunne lijntjes als scheiding tussen secties */
hr {
    border: 0;
    border-top: var(--lijn);
    margin: 2rem 0;
}

main {
    max-width: var(--max-breedte);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

main > section {
    padding: 3rem 0;
}

main > section + section {
    border-top: var(--lijn);
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.btn,
.btn-boeken,
.btn-behandelingen {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 1px solid var(--kleur-tekst);
    border-radius: var(--radius);
    background-color: var(--kleur-tekst);
    color: var(--kleur-achtergrond);
    font-family: var(--font-tekst);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Hover: steenkleur met donkere tekst (witte tekst is op die vulling niet leesbaar) */
.btn:hover,
.btn:focus-visible,
.btn-behandelingen:hover,
.btn-behandelingen:focus-visible {
    background-color: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-tekst);
}

/* ==========================================================================
   Preloader (op elke pagina)
   ========================================================================== */

/* Bedekt het scherm bij elke paginalading: de draaiende badge (logo met "Laser Hair Removal Studio" errond).
   Het script voegt .is-weg toe zodra de pagina geladen is (minstens 0,5s en hoogstens 1,5s na het verschijnen;
   vervagen in 0,4s) en haalt de laag daarna uit de pagina.
   Vangnet: komt het script niet of te laat, dan vervaagt de laag na 1,5s vanzelf, zodat de site nooit
   geblokkeerd blijft */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--kleur-achtergrond);
    transition: opacity 0.4s ease;
    animation: preloader-vangnet 0.4s ease 1.5s forwards;
}

.preloader.is-weg {
    opacity: 0;
    pointer-events: none;
}

@keyframes preloader-vangnet {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* De badge is wit (voor op de foto's); hier donker gekleurd tot ongeveer de tekstkleur */
.preloader-logo {
    width: 140px;
    height: 140px;
    filter: brightness(0.18);
    animation: draaien 8s linear infinite;
}

@media (max-width: 600px) {
    .preloader-logo {
        width: 110px;
        height: 110px;
    }
}

/* Zonder JavaScript (geen .js op <html>, zie het scriptje in de <head>) kan niets de preloader weghalen:
   dan wordt hij niet getoond en is de pagina meteen zichtbaar en bruikbaar */
html:not(.js) .preloader {
    display: none;
}

/* Minder beweging: geen preloader, de pagina is meteen zichtbaar */
@media (prefers-reduced-motion: reduce) {
    .preloader {
        display: none;
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Drie groepen op één rij, over de volle paginabreedte:
   logo — navigatie — header-acties (Afspraak boeken, Instagram, taalwisselaar).
   De kolomafstand (64px) is de vaste ruimte tussen logo en menu. */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 30px;
    margin: 0 auto;
    /* 18px boven/onder: met het grotere logo (72px) blijft de header even hoog als voorheen */
    padding: 18px var(--header-pad) 18px var(--pagina-links);
    border-bottom: var(--lijn);
}

header .logo-link {
    display: block;
    flex-shrink: 0;
    margin-right: 0;
    line-height: 0;
}

/* De afbeelding is bijgesneden tot het beeldmerk zelf, dus 72px = zichtbare hoogte */
header .logo-link img {
    height: 72px;
    width: auto;
}

/* Vanaf 1000px: een logo dat 10% kleiner is (65px). De marge boven en onder het logo vult aan tot 72px,
   zodat de header precies even hoog blijft en het logo meer lucht krijgt.
   (De zijruimte van 40px komt vanaf 1000px van --header-pad, zie de variabelen.) */
@media (min-width: 1000px) {
    header .logo-link img {
        height: 65px;
        margin: 3.5px 0;
    }
}

/* Het menu vult de middelste ruimte en staat links daarin: zo blijft het vlak na het logo,
   ook op brede schermen, en staan de acties uiterst rechts (zonder margin: auto) */
header nav {
    flex: 1;
}

header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu altijd op één regel (behalve op gsm, zie Responsive), gecentreerd tussen logo en knoppen.
   Tussenruimte groeit mee met het scherm: 17px op 1431px (nodig om daar op één regel te passen)
   tot maximaal 48px vanaf ±1920px */
.hoofdnav-lijst {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(17px, calc(6.3vw - 73px), 48px);
    white-space: nowrap;
}

.hoofdnav-lijst a {
    display: block;
    padding: 10px 4px;
    color: var(--kleur-wit);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
}

/* Geen extra ruimte links van de eerste link */
.hoofdnav-lijst li:first-child a {
    padding-left: 0;
}

.hoofdnav-lijst a:hover,
.hoofdnav-lijst a:focus-visible {
    color: var(--kleur-accent-foto);
}

/* Huidige pagina: accentkleur, vetter en een streepje van 2px onder het woord.
   Het streepje zorgt dat de actieve pagina niet enkel aan een (subtiel) kleurverschil te herkennen is. */
.hoofdnav-lijst a[aria-current="page"] {
    position: relative;
    color: var(--kleur-accent-foto);
    font-weight: 600;
}

/* Binnen de padding van de link (10px onder, 4px opzij), zodat het streepje even breed is als het woord
   en er vlak onder staat; currentColor: altijd dezelfde kleur als de tekst */
.hoofdnav-lijst a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 5px;
    height: 2px;
    background: currentColor;
}

/* De eerste link heeft links geen padding */
.hoofdnav-lijst li:first-child a[aria-current="page"]::after {
    left: 0;
}

.header-acties {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
}

/* 'Afspraak boeken': lichte knop met donkere tekst.
   Bij hover/focus wordt hij steenkleurig en wisselt de tekst naar kalender-icoon + "Boek nu" (enkel CSS). */
header .btn-boeken {
    position: relative;
    padding: 14px 28px;
    font-size: 13px;
    line-height: 1;
    background-color: var(--kleur-achtergrond);
    border-color: var(--kleur-achtergrond);
    color: var(--kleur-tekst);
    font-weight: 600;
    white-space: nowrap;
}

.btn-boeken-tekst,
.btn-boeken-hover {
    transition: opacity 0.2s, visibility 0.2s;
}

/* Hover-tekst ligt over de normale tekst; de knop houdt zo altijd dezelfde breedte */
.btn-boeken-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
}

.icoon-kalender {
    flex-shrink: 0;
}

header .btn-boeken:hover,
header .btn-boeken:focus-visible {
    background-color: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-tekst);
}

.btn-boeken:hover .btn-boeken-tekst,
.btn-boeken:focus-visible .btn-boeken-tekst {
    opacity: 0;
    visibility: hidden;
}

.btn-boeken:hover .btn-boeken-hover,
.btn-boeken:focus-visible .btn-boeken-hover {
    opacity: 1;
    visibility: visible;
}

.social-icons {
    display: flex;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icons a {
    color: var(--kleur-wit);
    font-size: 1.2rem;
    transition: color 0.2s;
}

.social-icons a:hover {
    color: var(--kleur-accent-foto);
}

/* Instagram-icoon als inline SVG: schaalt mee met de lettergrootte van de link (0,875em breed, 1em hoog) */
.icoon-instagram {
    display: block;
    width: 0.875em;
    height: 1em;
}

/* Zelfde vak als de wereldbol-knop, zodat beide iconen exact op één lijn staan */
header .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
}

/* Taalwisselaar: enkel een wereldbol; met JavaScript opent het menu bij een klik/tap, zonder JavaScript bij
   hover of focus */
.taalwisselaar {
    position: relative;
}

.taalwisselaar-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kleur-wit);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.icoon-wereldbol {
    width: 22px;
    height: 22px;
}

.taalwisselaar-knop:hover,
.taalwisselaar-knop[aria-expanded="true"] {
    color: var(--kleur-accent-foto);
}

/* De padding-top overbrugt de ruimte tussen icoon en menu, zodat hover niet wegvalt
   wanneer je met de muis naar het menu beweegt */
.taalwisselaar-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    padding-top: 0.5rem;
    visibility: hidden;
    opacity: 0;
    /* Bij sluiten: 0.4s wachten, zodat het menu niet meteen verdwijnt */
    transition: opacity 0.2s 0.4s, visibility 0s 0.6s;
}

.taalwisselaar-menu li {
    background-color: var(--kleur-achtergrond);
}

.taalwisselaar-menu li:first-child {
    border-radius: var(--radius) var(--radius) 0 0;
    padding-top: 0.25rem;
}

.taalwisselaar-menu li:last-child {
    border-radius: 0 0 var(--radius) var(--radius);
    padding-bottom: 0.25rem;
}

.taalwisselaar-menu a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--kleur-tekst);
    font-size: 15px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* 'header' ervoor: wint zo van de witte focusrand voor de header op de foto */
header .taalwisselaar-menu a:hover,
header .taalwisselaar-menu a:focus-visible {
    color: var(--kleur-tekst);
    background-color: var(--kleur-accent);
    outline-color: var(--kleur-tekst);
    outline-offset: -3px;
}

.taalwisselaar-menu a[aria-current="true"] {
    color: var(--kleur-tekst);
    font-weight: 600;
}

/* Openen: zonder JavaScript via :hover en :focus-within, met JavaScript enkel via de knop (.is-open) */
html:not(.js) .taalwisselaar:hover .taalwisselaar-menu,
html:not(.js) .taalwisselaar:focus-within .taalwisselaar-menu,
.taalwisselaar.is-open .taalwisselaar-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s, visibility 0s;
}

/* Met JavaScript sluit het menu meteen (geen wachttijd zoals bij hover) */
.js .taalwisselaar-menu {
    transition: opacity 0.2s, visibility 0s 0.2s;
}

/* ==========================================================================
   Homepage-hero
   ========================================================================== */

/* Intro-animatie: tekst zakt bij het laden zacht naar zijn plaats en wordt zichtbaar */
@keyframes zak-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animeer-in {
    /* 'both': onzichtbaar tijdens de vertraging, zichtbaar na afloop; speelt één keer af */
    animation: zak-in 0.8s ease-out both;
}

.animeer-in.vertraging-1 {
    animation-delay: 0.15s;
}

.animeer-in.vertraging-2 {
    animation-delay: 0.3s;
}

/* Intro-sectie onder de hero loopt verder in hetzelfde ritme (stappen van 0.15s),
   zodat ze net na de hero start in plaats van gelijktijdig */
.animeer-in.vertraging-3 {
    animation-delay: 0.45s;
}

.animeer-in.vertraging-4 {
    animation-delay: 0.6s;
}

.animeer-in.vertraging-5 {
    animation-delay: 0.75s;
}

.animeer-in.vertraging-6 {
    animation-delay: 0.9s;
}

.animeer-in.vertraging-7 {
    animation-delay: 1.05s;
}

.animeer-in.vertraging-8 {
    animation-delay: 1.2s;
}

/* Intro-sectie "Ontdek een huid zonder zorgen" (enkel homepage), naar het LAB-voorbeeld:
   brede container, groot label + titel, paragraaf met accentlijn links.
   Ruime ademruimte boven en onder (overschrijft de algemene sectie-padding) */
.heeft-foto-hero main > section.over-mij.intro-home,
.intro-home {
    /* Volle containerbreedte (1200px, gewone zijruimte); de inhoud is één kolom van maximaal 1000px
       die tegen de rechterkant van de container staat. 100px onderaan, zoals de andere secties */
    display: grid;
    grid-template-columns: minmax(0, 1000px);
    justify-content: end;
    max-width: 1200px;
    padding: 90px var(--gutter) 100px;
}

/* Klein label in hoofdletters boven de titel (enkel op de homepage).
   Donker, niet de accentkleur: als kleine tekst leest de tekstkleur het best */
.eyebrow-tekst {
    margin: 0 0 20px;
    color: var(--kleur-tekst);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Echte sectiekop: groot, gewone tekst */
.intro-home h2 {
    margin: 0 0 24px;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: 48px;
    font-weight: 600;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: normal;
    /* Als de kop afbreekt: evenwichtig verdelen, nooit één woord alleen op de laatste regel */
    text-wrap: balance;
}

/* Paragraaf met een dun verticaal accentlijntje links */
.intro-home-tekst {
    margin: 0;
    padding-left: 24px;
    border-left: 3px solid var(--kleur-accent-tekst);
    font-size: 20px;
    line-height: 1.8;
    color: var(--kleur-tekst);
}

/* Woorden met een koppelteken die samen moeten blijven (bv. "Diode Ice 4-Waves") */
.niet-afbreken {
    white-space: nowrap;
}

/* Gevulde knop (.btn): donker met lichte tekst, bij hover steenkleur met donkere tekst.
   justify-self: de knop rekt niet uit over de kolom */
.intro-home .btn-intro {
    display: inline-block;
    justify-self: start;
    margin-top: 32px;
    padding: 18px 40px;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* De knoptekst breekt op 320px af naar twee regels (in de drie talen); die staan dan gecentreerd */
.intro-home .btn-intro {
    text-align: center;
}

@media (max-width: 900px) {
    .heeft-foto-hero main > section.over-mij.intro-home,
    .intro-home {
        padding: 72px var(--gutter) 100px;
    }

    .intro-home h2 {
        font-size: 44px;
    }

    .intro-home-tekst {
        font-size: 18px;
    }
}

/* Desktop (vanaf 1025px): het blok loopt over de volle schermbreedte (geen 1200px-container), met links
   en rechts dezelfde zijruimte. Bovenaan de eyebrow, daaronder twee kolommen: links de grote kop op twee
   regels, rechts de introtekst met het lijntje en de knop. */
@media (min-width: 1025px) {
    /* Zijruimte van het blok; ook gebruikt door "Waarom kiezen voor Isara" (Wie ben ik), zodat dat blok
       even breed is */
    .intro-home,
    .studio-galerij,
    .waarom-isara,
    .voorbereiding-layout,
    .prijslijst-sectie,
    .behandelingen-intro {
        --intro-zij: clamp(48px, 7vw, 140px);
    }

    .heeft-foto-hero main > section.over-mij.intro-home,
    .intro-home {
        position: relative;
        display: block;
        max-width: none;
        padding: clamp(88px, 8vw, 130px) var(--intro-zij);
        border-top: 0;
    }

    /* Scheidingslijnen boven en onder: even breed als het blok (zelfde zijruimte). De lijn eronder is
       normaal de bovenrand van de volgende sectie (1200px breed); die vervalt hier. */
    .intro-home::before,
    .intro-home::after {
        content: "";
        position: absolute;
        left: var(--intro-zij);
        right: var(--intro-zij);
        border-top: var(--lijn);
    }

    .intro-home::before {
        top: 0;
    }

    .intro-home::after {
        bottom: 0;
    }

    .heeft-foto-hero main > section.intro-home + section {
        border-top: 0;
    }

    /* Rij 1: eyebrow over beide kolommen. Rij 2 en 3: links de kop (over beide rijen),
       rechts de tekst en daaronder de knop */
    .intro-home-blok {
        display: grid;
        grid-template-columns: 5fr 7fr;
        column-gap: clamp(40px, 3.5vw, 72px);
        align-items: start;
    }

    .intro-home .eyebrow-tekst {
        grid-column: 1 / -1;
        margin-bottom: 28px;
        font-size: clamp(15px, 1vw, 19px);
        letter-spacing: 2px;
    }

    /* balance: de twee regels worden ongeveer even lang ("Ontdek een huid / zonder zorgen") */
    .intro-home h2 {
        grid-column: 1;
        grid-row: 2 / span 2;
        /* 0.06em omlaag: zo staat de bovenkant van de hoofdletters gelijk met die van de eerste tekstregel */
        margin: 0.06em 0 0;
        font-size: clamp(44px, 3.6vw, 68px);
        line-height: 1.12;
        text-wrap: balance;
    }

    .intro-home-tekst {
        grid-column: 2;
        grid-row: 2;
        font-size: clamp(19px, 1.4vw, 26px);
        line-height: 1.75;
    }

    /* 27px naar rechts (lijntje 3px + 24px ruimte): de knop begint op dezelfde lijn als de tekst zelf */
    .intro-home .btn-intro {
        grid-column: 2;
        grid-row: 3;
        margin-top: 40px;
        margin-left: 27px;
        padding: 22px 48px;
        font-size: 16px;
    }
}

/* Smal desktopscherm (1025–1199px): met de gewone maten past de kop niet op twee regels en wordt de
   tekstkolom te smal. Daarom hier minder zijruimte en een kleinere kop. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .intro-home,
    .studio-galerij,
    .waarom-isara,
    .voorbereiding-layout,
    .prijslijst-sectie,
    .behandelingen-intro {
        --intro-zij: 48px;
    }

    .intro-home h2 {
        font-size: 40px;
    }
}

/* Onder 700px hebben de andere homepage-secties 64px: onderaan hier ook */
@media (max-width: 700px) {
    .heeft-foto-hero main > section.over-mij.intro-home,
    .intro-home {
        padding-bottom: 64px;
    }
}

@media (max-width: 600px) {
    .heeft-foto-hero main > section.over-mij.intro-home,
    .intro-home {
        padding: 64px var(--gutter);
    }

    .intro-home h2 {
        font-size: 34px;
    }

    .intro-home-tekst {
        font-size: 17px;
        line-height: 1.65;
    }
}
@media (prefers-reduced-motion: reduce) {
    .animeer-in {
        animation: none;
    }
}

/* Zolang de preloader het scherm bedekt (class gezet door js/script.js) blijft de tekst
   onzichtbaar en start de animatie nog niet; ze begint pas wanneer de preloader verdwijnt */
@media (prefers-reduced-motion: no-preference) {
    .wacht-op-preloader .animeer-in {
        animation: none;
        opacity: 0;
    }
}

/* ==========================================================================
   Titelsectie met foto-achtergrond (wie-ben-ik.html)
   ========================================================================== */

/* Foto van de subpagina's (de homepage heeft een eigen laag, zie .hero-achtergrond) */
.foto-hero {
    --hero-foto: url("../img/header-pagina.jpg");
    /* Tekst links op dezelfde lijn als het logo; badge rechts op dezelfde lijn als de header-knoppen */
    --hero-inspringing: var(--pagina-links);
    --hero-rechts: var(--header-pad);

    /* Vaste hoogte; de tekst staat absoluut gepositioneerd tegen de onderkant */
    position: relative;
    height: 540px;
    padding: 0;
    /* Dezelfde donkere laag als de homepage (.hero-achtergrond): verloop van 0.63 boven naar 0.68 onder */
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--hero-laag-boven)), rgba(0, 0, 0, var(--hero-laag-onder))),
        var(--hero-foto);
    background-size: cover;
    background-position: center;
    --hero-laag-boven: 0.63;
    --hero-laag-onder: 0.68;
}

/* Op deze pagina is <main> onbegrensd zodat de foto de volle breedte krijgt;
   de andere secties krijgen dezelfde begrenzing als <main> elders */
.heeft-foto-hero main {
    max-width: none;
    padding: 0;
}

.heeft-foto-hero main > section:not(.foto-hero) {
    max-width: var(--max-breedte);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Subpagina's: vaste ruimte tussen de foto en de eerste inhoud (96px, 64px op een telefoon).
   Niet op de homepage (.foto-hero-home), die zijn eigen maten heeft, en niet bij .behandelingen-inhoud:
   daar heeft de eerste categorietitel zelf al 32px marge (zie verderop). */
.heeft-foto-hero main > section.foto-hero:not(.foto-hero-home) + section:not(.behandelingen-inhoud) {
    padding-top: 96px;
}

@media (max-width: 700px) {
    .heeft-foto-hero main > section.foto-hero:not(.foto-hero-home) + section:not(.behandelingen-inhoud) {
        padding-top: 64px;
    }
}

/* Welkomstactie (homepage): hergebruikt het introblok (.intro-home) en staat er vlak boven.
   Vanaf 1025px heeft elk introblok een eigen lijn boven en onder; tussen de twee blokken zou dat een dubbele
   lijn geven. Daarom vervalt daar de bovenste lijn van het tweede blok. Onder 1025px scheidt de gewone
   bovenrand van de sectie (één lijn). */
@media (min-width: 1025px) {
    .welkomstactie + .intro-home::before {
        content: none;
    }
}

/* Geen los woord op de laatste regel van de zin en van de (lange) knoptekst */
.welkomstactie .intro-home-tekst {
    text-wrap: pretty;
}

.welkomstactie .btn-intro {
    text-wrap: balance;
    /* Lange knoptekst: regels niet tegen elkaar. De extra regelhoogte (0,35em) gaat van de verticale padding af
       (0,175em boven en onder), zodat de knop met één regel even hoog blijft als "Lees meer over mij" */
    line-height: 1.35;
    padding-top: calc(18px - 0.175em);
    padding-bottom: calc(18px - 0.175em);
}

@media (min-width: 1025px) {
    .welkomstactie .btn-intro {
        padding-top: calc(22px - 0.175em);
        padding-bottom: calc(22px - 0.175em);
    }
}

/* Titelblok altijd op dezelfde afstand van de onderkant van de foto */
.foto-hero-inhoud {
    position: absolute;
    bottom: 130px;
    left: var(--hero-inspringing);
    text-align: left;
}

/* Lichte taupe, zelfde kleur als de titelbalk onder de foto */
.foto-hero .eyebrow {
    margin: 0 0 0.5rem;
    color: var(--kleur-accent-foto);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-titel);
}

/* Smalste telefoons: iets minder letterafstand, zodat "Laser & Huidverzorging" op 15px op één regel blijft */
@media (max-width: 340px) {
    .foto-hero:not(.foto-hero-home) .eyebrow {
        letter-spacing: 0.06em;
    }
}

.foto-hero h1 {
    margin: 0;
    color: var(--kleur-wit);
    font-family: var(--font-titel);
    font-size: 48px;
    line-height: 1.1;
}

/* Header ligt transparant over de foto */
.heeft-foto-hero header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Op de donkere foto: accentkleur voor de actieve pagina en bij hover */
.heeft-foto-hero .hoofdnav-lijst a[aria-current="page"],
.heeft-foto-hero .hoofdnav-lijst a:hover,
.heeft-foto-hero .hoofdnav-lijst a:focus-visible,
.heeft-foto-hero header .social-icons a:hover,
.heeft-foto-hero .taalwisselaar-knop:hover,
.heeft-foto-hero .taalwisselaar-knop[aria-expanded="true"] {
    color: var(--kleur-accent-foto);
}

/* Draaiende logo-badge rechtsonder */
@keyframes draaien {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.foto-hero {
    --badge-grootte: 130px;
    /* De draaiende badge mag nooit buiten de sectie uitsteken (geen horizontale scrollbalk) */
    overflow: hidden;
}

/* Altijd een perfecte cirkel: vierkant kader, ronde afsnijding, afbeelding gecentreerd erin.
   De afbeelding is bijgesneden rond het zichtbare middelpunt, zodat ze niet 'slingert' tijdens het draaien. */
.foto-hero .draaiend-logo {
    position: absolute;
    right: var(--hero-rechts);
    bottom: 40px;
    width: var(--badge-grootte);
    height: var(--badge-grootte);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    animation: draaien 12s linear infinite;
}

.logo-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Titel blijft links van de badge */
.foto-hero-inhoud {
    right: calc(var(--hero-rechts) + var(--badge-grootte) + 2rem);
}

@media (max-width: 900px) {
    .foto-hero {
        --badge-grootte: 120px;
    }

    .foto-hero h1 {
        font-size: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foto-hero .draaiend-logo {
        animation-play-state: paused;
    }
}

@media (max-width: 600px) {
    .foto-hero {
        --badge-grootte: 110px;
        /* Hoger, want de header loopt hier over meerdere regels */
        height: 600px;
    }

    /* Badge staat hier onder de titel in plaats van ernaast */
    .foto-hero-inhoud {
        right: var(--hero-rechts);
        bottom: 170px;
    }

    .foto-hero h1 {
        font-size: 30px;
    }

    .foto-hero .draaiend-logo {
        bottom: 28px;
    }
}

/* Onderliggende pagina's (niet de homepage) ------------------------------------ */

/* Eigen foto voor de subpagina's (4:3): de klant op de behandelstoel rechts; linksboven hangt het ISARA-logo
   op de muur. Dat logo blijft op elke schermmaat buiten beeld (het zou achter het sitelogo en het menu staan),
   de klant staat met hoofd en schouders volledig in beeld, onder de header, en de titel staat nooit over
   haar gezicht of haar. Maten in de foto (fractie van breedte/hoogte): logo tot 36% breed en tot 27% hoog;
   haar van 44% tot 82% hoog; klant van 59% tot 80% breed. Drie opbouwen, per schermbreedte hieronder. */
.foto-hero:not(.foto-hero-home) {
    height: clamp(480px, 68vh, 720px);
}

/* Vanaf 901px (volledig menu, titel 48px op 194px van de onderkant): de klant staat rechts naast de titel.
   De foto is minstens 1451px breed. Verticaal begint het beeld net onder het logo (27,2% van de fotohoogte):
   zo staat haar hoofd ook onder het menu op twee regels (167px). Horizontaal: 70%, maar nooit verder naar
   links dan 263px, zodat haar schouder rechts van de langste titel blijft. */
@media (min-width: 901px) {
    .foto-hero:not(.foto-hero-home) {
        background-size: auto, max(100%, 1451px) auto;
        background-position: max(-263px, 70%) calc(max(100vw, 1451px) * -0.204);
    }

    /* Het titelblok 64px hoger dan de algemene 130px, vrij boven de badge (die tot 170px reikt) */
    .foto-hero:not(.foto-hero-home) .foto-hero-inhoud {
        bottom: 194px;
    }
}

/* Vanaf 1431px (menu op één regel, 110px): op brede schermen is de strook laag tegenover de foto; daar schuift
   het beeld verder naar onder (56%), zodat hoofd en schouders in beeld blijven */
@media (min-width: 1431px) {
    .foto-hero:not(.foto-hero-home) {
        background-position: max(-263px, 70%) min(calc(max(100vw, 1451px) * -0.204), 56%);
    }
}

/* 901–1104px: de draaiende badge staat hier onder haar rechterarm. Minstens 540px hoog, zodat de badge
   onder haar kin blijft. */
@media (min-width: 901px) and (max-width: 1104px) {
    .foto-hero:not(.foto-hero-home) {
        height: clamp(540px, 68vh, 720px);
    }
}

/* 601–900px (hamburgermenu, titel 36px): naast de titel is geen plaats voor de klant. De foto schaalt mee
   met de hoogte van de strook (138%, onderaan uitgelijnd: het beeld begint net onder het logo) en de titel
   staat onderaan (40px), onder haar haar, met de badge ernaast. Minstens 510px hoog, zodat haar hoofd
   onder de header blijft. */
@media (min-width: 601px) and (max-width: 900px) {
    .foto-hero:not(.foto-hero-home) {
        height: clamp(510px, 68vh, 720px);
        background-size: auto, auto max(138%, 75vw);
        background-position: 90% bottom;
    }

    .foto-hero:not(.foto-hero-home) .foto-hero-inhoud {
        bottom: 40px;
    }
}

/* Telefoon: een eigen uitsnede zonder het logo (rechter 63% van de foto), onderaan uitgelijnd, 128% van de
   hoogte van de strook (--hero-hoogte): de titel staat onder haar haar. Horizontaal rechts uitgelijnd, maar
   nooit verder naar links dan 34,56% van de strookhoogte: zo blijft de klant ook op een smal, hoog scherm
   volledig in beeld, links van de badge. Zonder JavaScript loopt het menu in de header over meerdere
   regels: dan blijft de strook 600px hoog (zie de algemene .foto-hero). */
@media (max-width: 600px) {
    .foto-hero:not(.foto-hero-home) {
        --hero-foto: url("../img/header-pagina-small.jpg");
        --hero-hoogte: 600px;
        height: var(--hero-hoogte);
        background-size: auto, auto max(128%, 119.5vw);
        background-position: max(calc(var(--hero-hoogte) * -0.3456), 100%) bottom;
    }
}

/* Telefoon met het hamburgermenu: de header is compact (88–108px). Strook van 62% van de schermhoogte
   (430–520px): hoog genoeg voor haar hoofd onder de header én de titel onder haar haar.
   Titel linksonder (32px van de onderkant), de badge rechts erboven, vrij van de header en de titel. */
@media (max-width: 600px) {
    .js .foto-hero:not(.foto-hero-home) {
        --badge-grootte: 88px;
        --hero-hoogte: clamp(430px, 62vh, 520px);
    }

    .js .foto-hero:not(.foto-hero-home) .foto-hero-inhoud {
        bottom: 32px;
    }

    .js .foto-hero:not(.foto-hero-home) .draaiend-logo {
        bottom: 112px;
    }
}

/* Titel links uitgelijnd, zoals op de homepage */
.foto-hero-inhoud--subpagina {
    left: var(--hero-inspringing);
    right: calc(var(--hero-rechts) + var(--badge-grootte) + 2rem);
    transform: none;
    text-align: left;
    width: auto;
    max-width: none;
}

@media (max-width: 600px) {
    /* Badge staat hier onder de titel, net als op de homepage */
    .foto-hero-inhoud--subpagina {
        right: var(--hero-rechts);
    }

    /* Lange woorden als "Behandelingen" moeten binnen de breedte passen */
    .foto-hero-inhoud--subpagina h1 {
        font-size: 24px;
        letter-spacing: 0.08em;
    }
}

/* Homepage: zelfde foto-hero, maar imposanter: bijna schermvullend, met een grote titel.
   De ondergrens voorkomt dat de tekst op lage schermen onder de header schuift. */
.foto-hero-home {
    height: auto;
    min-height: max(90vh, 640px);
}

/* Zoom-animatie: de foto + overlay zitten hier op een eigen laag die traag in- en uitzoomt.
   De sectie zelf heeft overflow: hidden (zie .foto-hero), dus geen scrollbalk. */
.foto-hero-home {
    background-image: none;
}

/* Iets sterkere overlay dan op de subpagina's (0.6). Afgestemd op de echte studiofoto, die erg licht is
   (witte muren, raam): bij 0.63–0.68 haalt ook de taupe eyebrow op het lichtste deel minstens 4.5:1.
   De volledige foto is zichtbaar (cover, niet vooraf ingezoomd); de animatie zoomt traag in vanuit het midden. */
.hero-achtergrond {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.68)),
        url("../img/header-home.jpg");
    background-size: cover;
    /* Links uitgelijnd: op schermen die hoger zijn dan de foto valt de klant (links in de foto) nooit weg.
       15% van boven: op brede, lage schermen blijft haar hoofd volledig in beeld, ook op het verste punt van de zoom */
    background-position: left 15%;
    animation: hero-zoom 12s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.16);
    }
}

/* Smal scherm: een staande uitsnede van dezelfde foto (1040 x 1200px), met de klant in het midden van de
   strook. Lichte zoom vanuit dat midden. */
@keyframes hero-zoom-smal {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.125);
    }
}

@media (max-width: 600px) {
    .hero-achtergrond {
        background-image:
            linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.68)),
            url("../img/header-home-small.jpg");
        background-position: 30% center;
        transform: none;
        transform-origin: 30% center;
        animation-name: hero-zoom-smal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-achtergrond {
        animation: none;
    }
}

/* Titelblok op de homepage verticaal én horizontaal gecentreerd in de foto, over 90% van de breedte
   (subpagina's: links uitgelijnd, 130px van de onderkant). Eyebrow en knop centreren mee. */
.foto-hero-home .foto-hero-inhoud {
    top: 50%;
    bottom: auto;
    left: 5%;
    right: 5%;
    transform: translateY(-50%);
    text-align: center;
}

/* 22px: de maat van de categorietitels (19px op een telefoon, zie media query) */
.foto-hero-home .eyebrow {
    margin-bottom: 18px;
    font-size: 22px;
}

/* Medium (Montserrat 500; de formule is afgesteld op de bredere vette letter en past dus ook hier). Eén doorlopende formule voor alle schermbreedtes (geen media queries), zodat een
   smaller scherm nooit een grotere letter krijgt dan een breder:
   - vanaf ±1280px: 2.29vw, zodat de hele zin op één regel net binnen de 90% past, ook met een scrollbalk
     (±33px op 1440px, ±44px op 1920px, maximaal 50px). Iets lager dan de 2.35vw van de gewone letter,
     omdat de vette letter ±2,4% breder loopt;
   - daaronder: een zachte helling van 27px (375px) naar 29px (1280px); de titel breekt daar af. */
.foto-hero-home h1 {
    font-size: min(50px, max(calc(26.04px + 0.255vw), 2.29vw));
    font-weight: 500;
    line-height: 1.2;
    /* Evenwichtig afbreken (erft door naar elke zin): nooit één woord alleen op een regel */
    text-wrap: balance;
}

/* Elke zin blijft bij het afbreken zo lang mogelijk samen: eerst een nieuwe regel tussen de twee zinnen */
.foto-hero-home h1 .zin {
    display: inline-block;
}

/* Grote knop op de foto in de steenkleur (donkere tekst: 5,2:1), 56px onder de titel.
   Geen rand: de padding is 3px groter dan 20px 44px, zodat de knop even groot is als toen hij een
   rand van 3px had. De witte focusring komt van .foto-hero a:focus-visible. */
.foto-hero-home .btn-behandelingen {
    margin-top: 56px;
    padding: 23px 47px;
    border: 0;
    background-color: var(--kleur-accent);
    color: var(--kleur-tekst);
    font-size: 16px;
}

/* Hover/focus: de knop licht op naar de lichte taupe (tekst blijft donker: 9,6:1) */
.foto-hero-home .btn-behandelingen:hover,
.foto-hero-home .btn-behandelingen:focus-visible {
    background-color: var(--kleur-accent-foto);
    color: var(--kleur-tekst);
}

@media (max-width: 1430px) {
    .foto-hero-home {
        min-height: max(90vh, 780px);
    }
}


@media (max-width: 600px) {
    .foto-hero-home {
        min-height: max(90vh, 880px);
    }

    /* De header is hier hoog (drie regels): 72px lager dan het exacte midden,
       zodat er ruimte blijft tussen header en titelblok */
    .foto-hero-home .foto-hero-inhoud {
        top: calc(50% + 72px);
        left: var(--hero-inspringing);
        right: var(--hero-rechts);
    }

    .foto-hero-home .eyebrow {
        font-size: 19px;
    }

    /* Minder zijruimte in de knop, zodat hij binnen de schermbreedte op één regel blijft */
    .foto-hero-home .btn-behandelingen {
        margin-top: 52px;
        padding: 23px 27px;
    }
}

/* Kleinste telefoons: de titel loopt hier over vijf regels, dus de hero iets hoger (anders raakt het
   titelblok de header), en de knoptekst past met 16px niet meer op één regel */
@media (max-width: 360px) {
    .foto-hero-home {
        min-height: max(90vh, 920px);
    }

    .foto-hero-home .btn-behandelingen {
        padding: 21px 16px;
        font-size: 15px;
    }
}

/* Frans, smalle telefoons: "Une technologie" past in de gewone maat (27px) pas vanaf ±375px op één regel,
   waardoor "Une" alleen op een regel kwam. Daaronder schaalt de titel mee met de schermbreedte
   (±26px op 360px, ±22px op 320px), zodat die twee woorden samen blijven. */
@media (max-width: 379px) {
    :lang(fr) .foto-hero-home h1 {
        font-size: min(calc(26.04px + 0.255vw), calc((100vw - 48px) / 12.1));
    }
}

/* ==========================================================================
   Homepage: "Jouw volgende stap" (twee kaarten: Full Body Isara Pack en Behandelingen)
   ========================================================================== */

/* Sectietitels (homepage en subpagina's): één gedeelde stijl, vet in gewone letters.
   40px; vanaf 1025px meeschalend tot 56px, op een telefoon 30px (zie verderop) */
.sectie-titel {
    margin: 0 0 32px;
    /* Nooit één los woord op de laatste regel */
    text-wrap: balance;
    font-family: var(--font-titel);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

/* Gebruikt op de Prijzen-pagina (.actie-sectie) */
.actie-eyebrow {
    margin: 0 0 0.4rem;
    color: var(--kleur-tekst);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-titel);
}

/* Gebruikt op de Behandelingen-pagina ("Bekijk prijzen"): zelfde maat als de andere grote knoppen
   (16px op desktop, 15px daaronder; nooit kleiner dan 15px) */
.btn-overzicht {
    padding: 18px 40px;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (min-width: 1025px) {
    .btn-overzicht {
        padding: 22px 48px;
        font-size: 16px;
    }
}

/* 100px boven en onder, zoals de andere secties op de homepage */
.heeft-foto-hero main > section.volgende-stap,
.volgende-stap {
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

/* Zoals de fotostrip: volle paginabreedte met 48px zijruimte, niet begrensd op 1200px */
.heeft-foto-hero main > section.volgende-stap {
    max-width: none;
    padding-left: 48px;
    padding-right: 48px;
}

.volgende-stap h2 {
    margin-bottom: 48px;
}

/* Twee even brede kaarten naast elkaar; stretch: altijd even hoog */
.stap-kaarten {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 32px;
    text-align: left;
}

/* Zelfde kaartstijl als de reviews (wit, lichte schaduw, 4px afgerond).
   Kolom: de knop krijgt margin-top: auto en staat zo in beide kaarten onderaan, op dezelfde hoogte */
.stap-kaart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 64px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
}

.stap-kaart p {
    margin: 0;
}

/* 30px: de bestaande kopmaat tussen de sectietitel en de categorietitels (22px) */
.stap-kaart h3 {
    margin: 0 0 16px;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.stap-kaart .stap-tekst {
    margin-bottom: 32px;
    font-size: 18px;
}

/* Rechthoekig label boven de prijs, zoals op Prijzen: witte vulling, donkere tekst, 2px afronding.
   Op de witte kaart een dunne donkere rand, anders valt het witte label weg */
.stap-kaart .stap-besparing {
    margin-bottom: 16px;
    padding: 8px 14px;
    border: 1px solid var(--kleur-tekst);
    border-radius: 2px;
    background-color: var(--kleur-wit);
    color: var(--kleur-tekst);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Prijsregel: nieuwe prijs groot, oude prijs en "/ 6 sessies" kleiner ernaast op dezelfde basislijn.
   32px eronder: minimale lucht boven de knop */
.stap-kaart .stap-prijs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 48px;
}

.stap-prijs-nu {
    font-family: var(--font-titel);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

/* Gedimd via de steenkleur voor tekst (5,8:1 op wit) in plaats van via doorzichtigheid */
.stap-prijs-oud {
    color: var(--kleur-accent-tekst);
    font-size: 17px;
    text-decoration: line-through;
}

/* Altijd bij elkaar op één regel */
.stap-prijs-eenheid {
    color: var(--kleur-accent-tekst);
    font-size: 15px;
    white-space: nowrap;
}

/* Categorieën als pil-knopjes naast elkaar; breken af naar een tweede rij als het niet past */
.stap-categorieen {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 48px;
    padding: 0;
    list-style: none;
}

/* De categorie-pillen zijn links: accentkleur (#A89A89) op 28% dekking, zodat de pilvorm zichtbaar is en
   ze als aanklikbare groep ogen. Bij hover/focus vol in de accentkleur (donkere tekst erop: 5,2:1) */
.categorie-label {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background-color: rgba(168, 154, 137, 0.28);
    color: var(--kleur-tekst);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.categorie-label:hover,
.categorie-label:focus-visible {
    background-color: var(--kleur-accent);
}

/* Gevulde knoppen (.btn: donker, bij hover steenkleur), onderaan de kaart ongeacht hoeveel tekst erboven staat.
   Zelfde opbouw als de knoppen op Prijzen: 15px, vanaf 1025px 16px */
.stap-kaart .btn-stap {
    margin-top: auto;
    padding: 18px 40px;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (min-width: 1025px) {
    .stap-kaart .btn-stap {
        padding: 22px 48px;
        font-size: 16px;
    }
}

/* Smaller desktopscherm en tablet: minder binnenruimte */
@media (max-width: 1100px) {
    .stap-kaart {
        padding: 48px;
    }
}

/* Zeer breed scherm (vanaf 1600px): de kaarten zijn hier 750px en breder. Meer binnenruimte en een grotere
   titel, tekst, pillen en knop, zodat de inhoud de kaart vult. Onder 1600px verandert er niets. */
@media (min-width: 1600px) {
    .stap-kaart {
        padding: 80px;
    }

    .stap-kaart h3 {
        font-size: 40px;
    }

    .stap-kaart .stap-tekst {
        max-width: 760px;
        font-size: 20px;
        line-height: 1.7;
        /* Geen alleenstaand woord op de laatste regel */
        text-wrap: pretty;
    }

}

/* Smalle kaarten: nog minder binnenruimte en de knop over de volle kaartbreedte,
   zodat "Bekijk alle behandelingen" op één regel blijft */
@media (max-width: 1023px) {
    .stap-kaart {
        padding: 32px;
    }

    .stap-kaart .stap-tekst {
        font-size: 16px;
    }

    .stap-kaart .btn-stap {
        align-self: stretch;
        padding: 18px 8px;
        font-size: 15px;
        letter-spacing: 0.04em;
        text-align: center;
    }

}

/* Tot 1199px past "Bekijk alle behandelingen" op 15–16px niet op één regel in de kaart: hier de kortere tekst */
@media (max-width: 1199px) {
    .stap-kaart .knoptekst-lang {
        display: none;
    }

    .stap-kaart .knoptekst-kort {
        display: inline;
    }
}

/* Breder dan 1920px: de sectie groeit niet verder mee (maximaal 1920px, gecentreerd, met de 48px zijruimte
   erbinnen). De kaarten blijven zo 896px breed in plaats van steeds leger te worden. */
@media (min-width: 1921px) {
    .heeft-foto-hero main > section.volgende-stap {
        max-width: 1920px;
    }
}

/* Tablet en telefoon: 24px zijruimte. Al onder 1024px en niet pas op de telefoon: met 48px zijn twee kaarten
   naast elkaar op een tablet te smal en breekt "Bekijk alle behandelingen" af naar twee regels */
@media (max-width: 1023px) {
    .heeft-foto-hero main > section.volgende-stap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* "Bekijk alle behandelingen" past onder ±360px niet meer op één regel: daar de kortere tekst.
   Geen kleinere letter, die zou op zo'n klein scherm minder leesbaar zijn. */
.knoptekst-kort {
    display: none;
}

@media (max-width: 360px) {
    .knoptekst-lang {
        display: none;
    }

    .knoptekst-kort {
        display: inline;
    }
}

/* Onder elkaar vanaf 760px (niet pas onder 700px): tussen 700 en 760px waren twee kaarten naast elkaar
   te smal, en brak "Bekijk alle behandelingen" af naar twee regels */
@media (max-width: 760px) {
    .stap-kaarten {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 700px) {
    .sectie-titel {
        font-size: 30px;
    }

    .heeft-foto-hero main > section.volgende-stap,
    .volgende-stap {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .stap-kaart {
        padding: 32px 24px;
    }

    .stap-kaart h3 {
        font-size: 24px;
    }

}
/* ==========================================================================
   Voorbereiding-pagina: sectietitel, foto links (sticky) en drie witte kaarten rechts
   (eigen klassen .kaart-titel en .kaart-lijst: .cat-titel en .cat-lijst blijven van Behandelingen en Prijzen)
   ========================================================================== */

/* minmax(0, 1fr): de inhoud kan de kolom nooit breder maken dan het scherm.
   (Met 1fr maakten de alt-teksten van de vroegere, ontbrekende foto's de kolom 368px breed: horizontale scrollbalk.)
   Ritme: 96px na de hero (algemene regel) en 96px tot de footer (48px hier + 48px marge boven de footer). */
.heeft-foto-hero main > section.voorbereiding-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 48px;
}

/* Zelfde afstand als bij "Waarom kiezen voor Isara": 56px van de titel tot de inhoud */
.voorbereiding-layout .sectie-titel {
    margin-bottom: 56px;
}

.voorbereiding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

/* Fotovak van 3:4, maximaal 480px breed en gecentreerd. De foto zelf is hoger (1000 x 1781) en wordt in het
   vak bijgesneden: 20% van boven, zodat de stapel handdoeken met de beschermbril volledig in beeld staat */
.voorbereiding-foto {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.voorbereiding-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 4px;
}

.voorbereiding-kaarten {
    display: grid;
    gap: 24px;
}

/* Witte kaart: zelfde achtergrond, afronding en schaduw als de formulierkaart op Contact (.contact-kaart) */
.voorbereiding-kaart {
    padding: 40px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
}

.kaart-titel {
    margin: 0 0 20px;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    /* Rechte cijfers ("4 weken"), ook als het lettertype standaard oude-stijlcijfers heeft */
    font-variant-numeric: lining-nums;
    /* Als de titel afbreekt: evenwichtig verdelen, nooit één woord alleen op de laatste regel */
    text-wrap: balance;
}

.kaart-lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Punt van 6px in de donkere accenttint, op de hoogte van de eerste tekstregel */
.kaart-lijst li {
    position: relative;
    padding-left: 22px;
    color: var(--kleur-tekst);
    font-size: 18px;
    line-height: 1.6;
}

.kaart-lijst li + li {
    margin-top: 12px;
}

.kaart-lijst li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.8em - 3px);
    width: 6px;
    height: 6px;
    background-color: var(--kleur-accent-tekst);
}

/* Knop gecentreerd onder de kaarten (56px), in dezelfde maat als de knop bij "Waarom kiezen voor Isara" */
.voorbereiding-knop {
    margin: 56px 0 0;
    text-align: center;
}

/* 15px tot 1024px, 16px op desktop (nooit kleiner dan 15px) */
.btn-voorbereiding {
    padding: 18px 40px;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Desktop: zijruimte van het introblok, twee kolommen 5:7; de foto blijft staan tijdens het scrollen */
@media (min-width: 1025px) {
    .heeft-foto-hero main > section.voorbereiding-layout {
        max-width: none;
        padding-left: var(--intro-zij);
        padding-right: var(--intro-zij);
    }

    .voorbereiding-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(40px, 3.5vw, 72px);
        align-items: start;
    }

    .voorbereiding-foto {
        position: sticky;
        top: 120px;
        max-width: none;
        margin: 0;
    }

    /* De drie kaarten samen even hoog als de foto: de kolom rekt uit tot de rijhoogte en de ruimte die over is
       wordt gelijk verdeeld tussen de kaarten (de kaarten zelf worden niet hoger). Zijn de kaarten samen hoger
       dan de foto, dan is er niets te verdelen en blijft de gewone afstand van 24px gelden. */
    .voorbereiding-kaarten {
        align-self: stretch;
        align-content: space-between;
    }

    .btn-voorbereiding {
        padding: 22px 48px;
        font-size: 16px;
    }
}

/* Telefoon: foto over de volle breedte, kleinere kaarten en tekst, 64px tot de footer */
@media (max-width: 700px) {
    .heeft-foto-hero main > section.voorbereiding-layout {
        padding-bottom: 16px;
    }

    .voorbereiding-layout .sectie-titel {
        margin-bottom: 40px;
    }

    .voorbereiding-foto {
        max-width: none;
    }

    .voorbereiding-kaart {
        padding: 32px;
    }

    .kaart-titel {
        font-size: 20px;
    }

    .kaart-lijst li {
        font-size: 17px;
    }

    .voorbereiding-knop {
        margin-top: 40px;
    }
}

@media (max-width: 340px) {
    .voorbereiding-kaart {
        padding: 20px;
    }
}

/* Tot 360px: minder zijruimte en letterafstand, zodat ook "Book an appointment" (Engels) op één regel past */
@media (max-width: 360px) {
    .btn-voorbereiding {
        padding-left: 24px;
        padding-right: 24px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   Prijzen-pagina: Voordeelpak (actiekaart) en prijslijst in witte kaarten
   (eigen klassen; .cat-titel, .cat-lijst, .cat-blok en .behandelingen-* blijven van de Behandelingen-pagina)
   ========================================================================== */

/* Het voordeelpak staat binnen de prijslijst-sectie. Tot 999px onder de Full Body-kaart, even breed, met 96px
   erboven (64px op een telefoon); vanaf 1000px in de rechterkolom naast de lijsten (zie .prijs-indeling) */
.actie-sectie {
    margin: 96px 0 0;
    text-align: center;
}

/* Effen kaart in de donkere accenttint, zonder foto; witte tekst haalt daarop 5,8:1 */
.actie-kader {
    padding: 64px 40px;
    border-radius: 4px;
    background: var(--kleur-accent-tekst);
    color: var(--kleur-wit);
}

.actie-sectie p {
    color: inherit;
}

/* Alle tekst op de kaart: minstens 15px en volledig dekkend */
.actie-sectie .actie-eyebrow {
    margin: 0 0 16px;
    color: var(--kleur-wit);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.actie-pakket-titel {
    margin: 0 0 8px;
    color: inherit;
    font-family: var(--font-titel);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
}

.actie-pakket-sub {
    margin: 0 0 40px;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.actie-prijs {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    margin: 0 0 32px;
}

.actie-prijs-nu {
    font-size: clamp(48px, 5vw, 64px);
    font-weight: 600;
    line-height: 1;
}

.actie-prijs-oud {
    font-size: 22px;
    text-decoration: line-through;
}

/* Rechthoekig label: witte vulling, donkere tekst */
.actie-badge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 2px;
    background: var(--kleur-wit);
    color: var(--kleur-tekst);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Onder de kaart, op de lichte achtergrond */
.actie-sectie .actie-voorwaarde {
    margin: 20px 0 0;
    color: var(--kleur-tekst);
    font-size: 15px;
    line-height: 1.5;
}

/* Prijslijst: titel links, één witte kaart met de vier lijsten, Full Body als aparte kaart eronder, het voordeelpak
   (vanaf 1000px ernaast) en de knop gecentreerd. 96px na de hero en 96px tot de footer (48px hier + 48px marge boven de footer). */
.heeft-foto-hero main > section.prijslijst-sectie {
    padding-top: 96px;
    padding-bottom: 48px;
    border-top: 0;
}

.prijslijst-sectie .sectie-titel {
    margin-bottom: 56px;
}

/* De witte kaart en de Full Body-kaart onder elkaar, even breed, met 24px ertussen */
.prijs-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

/* Witte kaart: zelfde achtergrond, afronding en schaduw als de formulierkaart op Contact (.contact-kaart) */
.prijs-kaart {
    padding: 40px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
}

/* De vier lijsten (Gezicht, Bovenlichaam, Bikini, Benen) samen in één witte kaart, onder elkaar met 40px ertussen.
   De binnenruimte is die van .prijs-kaart, zodat de tekst links en rechts uitlijnt met de Full Body-kaart eronder. */
.prijs-groepen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
}

.prijs-kaart-titel {
    margin: 0 0 12px;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.prijs-rijen {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Naam links, prijs rechts, minstens 44px hoog, dunne lijn (12% van de tekstkleur) tussen de rijen */
.prijs-rijen li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    padding: 8px 0;
    color: var(--kleur-tekst);
    font-size: 18px;
    line-height: 1.4;
}

.prijs-rijen li + li {
    border-top: 1px solid rgba(46, 42, 38, 0.12);
}

/* Prijzen in rechte cijfers van gelijke breedte, zodat ze netjes onder elkaar staan */
.prijs-rijen li span:last-child {
    flex-shrink: 0;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Full Body: aparte kaart onder de witte kaart, in de lichte taupe */
.prijs-kaart-fullbody {
    background: var(--kleur-accent-foto);
}

/* Zelfde afstand onder het voordeelpak als erboven: 96px (64px op een telefoon) */
.prijslijst-knop {
    margin: 96px 0 0;
    text-align: center;
}

/* 15px tot 1024px, 16px op desktop (nooit kleiner dan 15px) */
.btn-prijslijst {
    padding: 18px 40px;
    font-size: 15px;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Vanaf 1000px twee kolommen (3:2, 48px ertussen): links de lijsten en Full Body, rechts het voordeelpak.
   Het voordeelpak begint op dezelfde hoogte als de witte kaart en blijft tijdens het scrollen in beeld (sticky,
   48px onder de bovenrand; de header is niet vast en scrolt mee weg). Het blijft binnen deze twee kolommen,
   dus het schuift nooit over de knop of de footer. In de smallere kaart: minder binnenruimte links en rechts. */
@media (min-width: 1000px) {
    .prijs-indeling {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 48px;
        align-items: start;
    }

    .actie-sectie {
        position: sticky;
        top: 48px;
        margin-top: 0;
    }

    .actie-kader {
        padding: 56px 32px;
    }
}

/* Desktop: zelfde zijruimte als het introblok */
@media (min-width: 1025px) {
    .heeft-foto-hero main > section.prijslijst-sectie {
        max-width: none;
        padding-left: var(--intro-zij);
        padding-right: var(--intro-zij);
    }

    .btn-prijslijst {
        padding: 22px 48px;
        font-size: 16px;
    }
}

/* Telefoon: één kolom, minder binnenruimte, 64px tussen de blokken */
@media (max-width: 700px) {
    .actie-sectie {
        margin-top: 64px;
    }

    .actie-kader {
        padding: 48px 24px;
    }

    .heeft-foto-hero main > section.prijslijst-sectie {
        padding-top: 64px;
        padding-bottom: 16px;
    }

    .prijslijst-sectie .sectie-titel {
        margin-bottom: 40px;
    }

    .prijs-kaart {
        padding: 24px;
    }

    .prijs-rijen li {
        font-size: 17px;
    }

    .prijslijst-knop {
        margin-top: 64px;
    }
}

@media (max-width: 340px) {
    .actie-kader {
        padding: 40px 20px;
    }

    .prijs-kaart {
        padding: 20px;
    }
}

/* Tot 360px: minder zijruimte en letterafstand, zodat ook "Book an appointment" (Engels) op één regel past */
@media (max-width: 360px) {
    .btn-prijslijst {
        padding-left: 24px;
        padding-right: 24px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   Behandelingen-pagina: intro (liggende foto + overlappende kaart)
   (eigen klassen .behandelingen-*; .cat-titel, .cat-lijst en .cat-blok blijven ongewijzigd)
   ========================================================================== */

/* 96px na de hero (algemene regel); 96px tot de footer (48px + 48px marge boven de footer) */
.heeft-foto-hero main > section.behandelingen-intro {
    padding-bottom: 48px;
}

/* Foto en kaart onder elkaar in één kolom, zo breed als de rest van de pagina (--max-breedte) */
.behandelingen-intro-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--max-breedte);
    margin: 0 auto;
}

/* Liggende foto van de studio. Op een telefoon 16:10, onderaan uitgelijnd (alleen plafond valt weg); vanaf
   701px in haar eigen verhouding (1320 x 935), zodat de hele studio te zien is */
.behandelingen-foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 4px;
}

/* Witte kaart: zelfde achtergrond, afronding en schaduw als de formulierkaart op Contact (.contact-kaart) */
.behandelingen-kaart {
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
}

.behandelingen-kaart {
    position: relative;
    z-index: 1;
    padding: 56px;
}

.behandelingen-kaart .sectie-titel {
    margin-bottom: 24px;
}

.behandelingen-kaart p {
    margin: 0 0 32px;
    color: var(--kleur-tekst);
    font-size: 18px;
    line-height: 1.6;
}

/* Vanaf 701px: de foto onbesneden over de volle breedte, de kaart eronder met een kleine overlap (40px) */
@media (min-width: 701px) {
    .behandelingen-foto img {
        aspect-ratio: 1320 / 935;
    }

    .behandelingen-kaart {
        margin-top: -40px;
    }
}

/* Desktop: zijruimte van het introblok */
@media (min-width: 1025px) {
    .heeft-foto-hero main > section.behandelingen-intro {
        max-width: none;
        padding-left: var(--intro-zij);
        padding-right: var(--intro-zij);
    }
}

/* Vanaf 1240px: grote foto (hoogstens 1320px breed, haar eigen breedte) met de kaart links eroverheen.
   De kaart steekt 80px voorbij de linkerrand van de foto en bedekt alleen de lege muur linksboven: ze reikt
   tot hoogstens 40% van de fotobreedte (daar begint de plafondlamp) en blijft boven de fauteuil (60% van de
   fotohoogte). Onder 1240px is de foto daar te laag voor en staat de kaart onder de foto.
   De titel is hier kleiner (32–34px), zodat hij in de smalle kaart op één regel past. */
@media (min-width: 1240px) {
    .heeft-foto-hero main > section.behandelingen-intro {
        padding-left: 48px;
        padding-right: 48px;
    }

    .behandelingen-intro-raster {
        max-width: 1400px;
    }

    .behandelingen-foto,
    .behandelingen-kaart {
        grid-area: 1 / 1;
    }

    .behandelingen-foto {
        margin-left: 80px;
    }

    .behandelingen-kaart {
        align-self: start;
        justify-self: start;
        width: min(520px, calc(40% + 48px));
        margin-top: clamp(24px, calc(8vw - 76px), 72px);
    }

    .behandelingen-kaart .sectie-titel {
        font-size: clamp(32px, 2.6vw, 34px);
    }
}

/* Telefoon: foto over de volle breedte, de kaart eronder, even breed, met een kleine overlap (32px);
   minder binnenruimte, 64px tot de footer */
@media (max-width: 700px) {
    .behandelingen-kaart {
        margin-top: -32px;
        padding: 32px;
    }

    .heeft-foto-hero main > section.behandelingen-intro {
        padding-bottom: 16px;
    }
}

@media (max-width: 340px) {
    .behandelingen-kaart {
        padding: 24px;
    }

    /* "Bekijk prijzen" op één regel */
    .btn-overzicht {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ==========================================================================
   Homepage: fotostrook "Een kijkje in onze studio"
   ========================================================================== */

/* 100px boven de titel; de foto's sluiten onderaan af zonder extra ruimte
   (de reviews-sectie eronder heeft zelf 100px bovenaan) */
.heeft-foto-hero main > section.studio-sfeer,
.studio-sfeer {
    padding-top: 100px;
    padding-bottom: 0;
    text-align: center;
}

/* De fotostrip gebruikt de volle schermbreedte: de sectie is niet begrensd; de zijruimte zit op het venster */
.heeft-foto-hero main > section.studio-sfeer {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.studio-sfeer h2 {
    margin-bottom: 48px;
    padding: 0 var(--gutter);
}

/* De carrousel heeft geen ruimte eronder: de volgende sectie ("Jouw volgende stap") heeft zelf 100px
   bovenaan, en krijgt geen scheidingslijn die direct tegen de bediening van de carrousel zou plakken */
.heeft-foto-hero main > section.studio-sfeer + section.volgende-stap {
    border-top: 0;
}

/* Carrousel over de volle schermbreedte, met zijruimte: drie grote foto's tegelijk in beeld (vier op zeer
   brede schermen, twee op een tablet, één op een telefoon). In rust zijn alle zichtbare foto's volledig te zien.
   Het venster knipt af wat ernaast valt; js/script.js verschuift de rij per foto (pijlknoppen of swipe).
   --zichtbaar en --tussenruimte sturen zowel de breedte van de foto's als de stapgrootte in het script. */
.studio-carrousel {
    --zichtbaar: 3;
    --tussenruimte: 20px;
    --zijruimte: 48px;
}

/* Het venster knipt de rij af op de zijruimte: tijdens het schuiven staan foto's even deels buiten beeld.
   pan-y: verticaal scrollen blijft gewoon werken, horizontaal vegen is voor de carrousel */
.studio-venster {
    margin: 0 var(--zijruimte);
    overflow: hidden;
    touch-action: pan-y;
}

/* De overgang (duur en verloop) wordt door js/script.js gezet */
.studio-fotos {
    display: flex;
    gap: var(--tussenruimte);
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-fotos li {
    flex: none;
    width: calc((100% - (var(--zichtbaar) - 1) * var(--tussenruimte)) / var(--zichtbaar));
}

/* Sfeerfoto's: bijsnijden mag (object-fit: cover), vaste staande verhouding 3:4.
   Niet versleepbaar, zodat vegen met de muis de carrousel bedient in plaats van de afbeelding op te pakken */
.studio-fotos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    -webkit-user-drag: none;
    user-select: none;
}

/* Bediening onder de foto's: pijl – voortgangsbalkje – pijl */
.studio-bediening {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

/* Ronde knop van 56px met een lichte schaduw */
.studio-knop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--kleur-wit);
    box-shadow: 0 2px 8px rgba(46, 42, 38, 0.16);
    color: var(--kleur-tekst);
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

/* Zelfde hover als de pijltjes bij de reviews: steenkleurige achtergrond, pijl blijft donker */
.studio-knop:hover:not(:disabled) {
    background-color: var(--kleur-accent);
}

/* Mini-voortgangsbalk in plaats van losse bolletjes: het gekleurde deel groeit met elke stap
   (de breedte wordt door het script gezet) */
.studio-voortgang {
    width: 48px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(46, 42, 38, 0.15);
    overflow: hidden;
}

.studio-voortgang-balk {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 4px;
    background-color: var(--kleur-accent-tekst);
    transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .studio-voortgang-balk {
        transition: none;
    }
}

/* Zeer breed scherm: vier foto's, anders worden ze hoger dan het scherm */
@media (min-width: 1600px) {
    .studio-carrousel {
        --zichtbaar: 4;
    }
}

.studio-knop svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 1024px) {
    .studio-carrousel {
        --zichtbaar: 2;
    }
}

/* Telefoon: één foto per keer, minder zijruimte */
@media (max-width: 600px) {
    .studio-carrousel {
        --zichtbaar: 1;
        --zijruimte: 24px;
    }
}

/* Sectietitels: groter op desktop, meeschalend met het scherm (40px tot 56px) */
@media (min-width: 1025px) {
    .sectie-titel {
        font-size: clamp(40px, 3.2vw, 56px);
    }
}

@media (max-width: 700px) {
    .heeft-foto-hero main > section.studio-sfeer,
    .studio-sfeer {
        padding-top: 64px;
    }
}

/* ==========================================================================
   Homepage: "Wat klanten van Isara zeggen" (review-kaarten met pijltjes)
   ========================================================================== */

/* --avatar-maat stuurt de avatar, de ruimte erboven en de bovenpadding van de kaart (zie verder) */
.heeft-foto-hero main > section.testimonials,
.testimonials {
    --avatar-maat: 104px;
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

/* Vanaf 1248px past de volle 1200px: dan geen zijruimte, zodat de drie kaartjes de hele sectiebreedte krijgen
   (±375px per kaartje). Daaronder gewoon de gewone zijruimte van de pagina. */
@media (min-width: 1248px) {
    .heeft-foto-hero main > section.testimonials {
        padding-left: 0;
        padding-right: 0;
    }
}

.testimonials h2 {
    margin-bottom: 16px;
}

/* Korte intro onder de titel, zelfde maat als de inleidende tekst bovenaan de pagina */
.testimonials .reviews-intro {
    max-width: 640px;
    margin: 0 auto 16px;
    font-size: 18px;
    line-height: 1.6;
}

/* Op elke breedte: eerst de kaartenrij over de volle breedte, daaronder één gecentreerde rij ‹ • • • ›.
   Rijafstand 8px + 16px onderaan de kaartenrij (ruimte voor de schaduw) = 24px tot de bedieningsrij */
.reviews-carrousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 16px;
    margin-top: 8px;
}

.reviews-pijl {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kleur-tekst);
    font-family: var(--font-tekst);
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s, color 0.2s;
}

/* Zelfde hover als de tekstlinks: steenkleurige achtergrond, pijl blijft donker */
.reviews-pijl:hover:not(:disabled) {
    border-radius: 50%;
    background-color: var(--kleur-accent);
}

/* Begin of einde bereikt: niets meer om naartoe te schuiven */
.reviews-pijl:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Schuifbare rij: drie kaarten tegelijk in beeld (één op smalle schermen, zie media query),
   de pijltjes schuiven telkens één kaart op */
.reviews-grid {
    display: grid;
    /* Kaarten in een rij altijd even hoog, ook bij een kortere reviewtekst */
    align-items: stretch;
    flex: 0 0 100%;
    order: -1;
    min-width: 0;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 32px) / 3);
    gap: 32px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0;
    /* Ruimte rond de kaarten, zodat de schaduw en de uitstekende avatar (een halve avatar boven de kaart)
       niet worden afgesneden in de schuifbare rij */
    padding: calc(var(--avatar-maat) / 2 + 4px) 6px 16px;
    list-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
}

.reviews-grid::-webkit-scrollbar {
    display: none;
}

/* Alles gecentreerd, van boven naar onder: avatar, naam, reviewtekst, sterren.
   Kolom met de sterren onderaan (margin-top: auto), zodat ze in alle kaartjes op dezelfde hoogte staan.
   Bovenaan: de onderste helft van de avatar valt in de kaart, plus 30px lucht */
.review-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--avatar-maat) / 2 + 30px) 60px 60px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
    text-align: center;
    scroll-snap-align: start;
}

.review-kaart p {
    margin: 0;
}

/* Avatar: gegolfde cirkel ("scalloped circle") met 12 ronde lobben, gecentreerd en half over de bovenrand
   van de kaart. De vorm is een SVG-pad dat exact berekend is (12 cirkelbogen, elk met straal 12 op 38 van het
   midden, in een vak van 100x100) en dient als masker, zodat hij met het element meeschaalt.
   Twee lagen in dezelfde vorm: wit (de rand, 5% van de maat) en daarbinnen de lichte taupe.
   De schaduw is een drop-shadow-filter, zodat ze de golvende rand volgt (een box-shadow zou rond blijven). */
.review-avatar {
    --avatar-vorm: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M38.721 7.904A12 12 0 0 1 61.279 7.904A12 12 0 0 1 80.816 19.184A12 12 0 0 1 92.096 38.721A12 12 0 0 1 92.096 61.279A12 12 0 0 1 80.816 80.816A12 12 0 0 1 61.279 92.096A12 12 0 0 1 38.721 92.096A12 12 0 0 1 19.184 80.816A12 12 0 0 1 7.904 61.279A12 12 0 0 1 7.904 38.721A12 12 0 0 1 19.184 19.184A12 12 0 0 1 38.721 7.904Z%22/%3E%3C/svg%3E");
    position: absolute;
    top: calc(var(--avatar-maat) / -2);
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-maat);
    height: var(--avatar-maat);
    filter: drop-shadow(0 4px 6px rgba(46, 42, 38, 0.1));
    transform: translateX(-50%);
}

.review-avatar::before,
.review-avatar::after {
    content: "";
    position: absolute;
    -webkit-mask: var(--avatar-vorm) center / contain no-repeat;
    mask: var(--avatar-vorm) center / contain no-repeat;
}

.review-avatar::before {
    inset: 0;
    background-color: #FFFFFF;
}

/* Lichte taupe: duidelijk donkerder dan de pagina-achtergrond (1,29:1) en dan de witte kaart (1,49:1) */
.review-avatar::after {
    inset: calc(var(--avatar-maat) * 0.05);
    background-color: var(--kleur-accent-foto);
}

/* Initialen in de avatar: donkere tekstkleur op de lichte taupe (9,6:1), boven de twee lagen van de gegolfde vorm.
   Lettergrootte in verhouding tot de avatar (30%: 31px bij 104px, 24px bij 80px) */
.review-initialen {
    position: relative;
    z-index: 1;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: calc(var(--avatar-maat) * 0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1;
}

.review-kaart .review-naam {
    margin-bottom: 20px;
    color: var(--kleur-tekst);
    font-size: 20px;
    font-weight: 600;
}

.review-tekst {
    margin: 0 0 30px;
}

.review-kaart .review-tekst p {
    color: var(--kleur-tekst);
    font-size: 18px;
    line-height: 1.7;
}

/* Laatste element, onderaan de kaart */
.review-kaart .review-sterren {
    margin-top: auto;
    color: var(--kleur-accent-tekst);
    font-size: 20px;
    letter-spacing: 2px;
}

/* Schuifindicatoren (bolletjes) onder de reviews en de studiofoto's; aangemaakt door js/script.js.
   Het zichtbare bolletje is 8px; de knop zelf is groter (padding), zodat hij makkelijk aan te tikken is.
   Valt er niets te schuiven, dan zet het script 'hidden' op de rij */
.carrousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carrousel-dots[hidden] {
    display: none;
}

.carrousel-dot {
    padding: 8px 4px;
    border: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
}

.carrousel-dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    /* 0.55: 3,3:1 contrast op de achtergrond (minimum 3:1 voor bedieningselementen) */
    background-color: rgba(46, 42, 38, 0.55);
    transition: width 0.25s, background-color 0.25s;
}

.carrousel-dot:hover::before {
    background-color: var(--kleur-accent-tekst);
}

/* Actief: breder streepje in accentkleur */
.carrousel-dot[aria-current="true"]::before {
    width: 24px;
    background-color: var(--kleur-accent-tekst);
}

@media (prefers-reduced-motion: reduce) {
    .carrousel-dot::before {
        transition: none;
    }
}

/* Smaller desktopscherm: drie kaartjes van ±300px; minder zijruimte, zodat de tekst niet te smal wordt */
@media (max-width: 1100px) {
    .review-kaart {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Smaller scherm: één kaart per keer over de volle breedte */
@media (max-width: 900px) {
    .reviews-grid {
        grid-auto-columns: 100%;
        gap: 16px;
    }
}

/* Telefoon: dezelfde verhoudingen, kleiner (avatar 80px zoals voorheen) */
@media (max-width: 700px) {
    .heeft-foto-hero main > section.testimonials,
    .testimonials {
        --avatar-maat: 80px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Smal kaartje: minder zijruimte, zodat de tekst niet te smal wordt */
    .review-kaart {
        padding: calc(var(--avatar-maat) / 2 + 20px) 24px 36px;
    }

    .review-kaart .review-naam {
        margin-bottom: 16px;
        font-size: 19px;
    }

    .review-kaart .review-tekst p {
        font-size: 17px;
    }

    .review-kaart .review-sterren {
        font-size: 18px;
    }
}

/* Vanaf 1200px: even breed als de kaarten van "Jouw volgende stap" (48px zijruimte, maximaal 1920px,
   gecentreerd). Marge in plaats van padding, zodat de grijze lijn bovenaan even breed is als de kaarten.
   De kaartenrij steekt 6px uit aan beide kanten (ruimte voor de schaduw), zodat de kaarten zelf precies
   op de 48px-lijn beginnen en eindigen. Onder 1200px verandert er niets. */
@media (min-width: 1200px) {
    .heeft-foto-hero main > section.testimonials {
        --avatar-maat: 120px;
        max-width: min(1920px - 2 * 48px, 100% - 2 * 48px);
        padding-left: 0;
        padding-right: 0;
    }

    .testimonials .reviews-intro {
        font-size: 20px;
    }

    .reviews-grid {
        flex-basis: calc(100% + 2 * 6px);
        margin: 0 -6px;
    }

    .review-kaart {
        padding: calc(var(--avatar-maat) / 2 + 30px) 48px 48px;
    }

    .review-kaart .review-naam {
        font-size: 22px;
    }

    .review-kaart .review-tekst p {
        font-size: 20px;
        line-height: 1.7;
    }

    .review-kaart .review-sterren {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-grid {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Wie ben ik: "Bij Isara draait alles om jou" en "Waarom kiezen voor Isara"
   ========================================================================== */

/* "Bij Isara draait alles om jou": precies het introblok van de homepage (.intro-home), zonder knop.
   De fotogalerij eronder (.studio-galerij) is eigen aan deze pagina. */

/* Galerij van drie staande foto's op een taupe band over de volle breedte, onder het introblok.
   De foto's zelf zijn even breed als het introblok erboven: onder 1025px de gewone begrenzing (1200px met de
   zijruimte van de pagina), vanaf 1025px de zijruimte van het introblok (--intro-zij). */
.heeft-foto-hero main > section.studio-galerij {
    max-width: none;
    padding: 72px 0;
    border-top: 0;
    background-color: var(--kleur-footer);
}

/* De band scheidt al: geen lijn onderaan het introblok en boven "Waarom kiezen voor Isara" */
.intro-subpagina::after {
    content: none;
}

.studio-galerij + .waarom-isara {
    border-top: 0;
}

.studio-galerij-lijst {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: var(--max-breedte);
    margin: 0 auto;
    padding: 0 var(--gutter);
    list-style: none;
}

/* 3:4, bijgesneden (nooit vervormd); per foto een eigen uitsnede rond het onderwerp */
.studio-galerij-lijst img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
}

/* Werkplank: het blad met het tissuedoosje en de bril, met het logo erboven volledig in beeld
   (lager gekaderd valt het logo half buiten de bovenrand) */
.studio-galerij-lijst .foto-werkblad {
    object-position: center 8%;
}

/* Behandeling: al als 3:4 uitgesneden; op een telefoon (4:5) blijft het bovenste deel met het handstuk en
   de handschoenen in beeld */
.studio-galerij-lijst .foto-behandeling {
    object-position: center 30%;
}

/* Latte: het glas (linksonder in de foto) */
.studio-galerij-lijst .foto-latte {
    object-position: 35% 60%;
}

@media (min-width: 1025px) {
    .studio-galerij-lijst {
        max-width: none;
        padding: 0 var(--intro-zij);
    }
}

/* Telefoon: de foto's onder elkaar, iets minder hoog (4:5) */
@media (max-width: 700px) {
    .heeft-foto-hero main > section.studio-galerij {
        padding: 48px 0;
    }

    .studio-galerij-lijst {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .studio-galerij-lijst img {
        aspect-ratio: 4 / 5;
    }
}

/* Geen lijn over de volle breedte: het smalle .usp-lijn-lijntje neemt die rol over */
.waarom-isara {
    text-align: center;
}

/* Zelfde ritme als de rest van de pagina: 96px tussen de taupe band en de lijn, en 96px tussen de knop en
   de footer (48px hier + de 48px marge boven de footer). Op een telefoon 64px, zoals het introblok. */
.heeft-foto-hero main > section.waarom-isara {
    padding-top: 96px;
    padding-bottom: 48px;
}

@media (max-width: 700px) {
    .heeft-foto-hero main > section.waarom-isara {
        padding-top: 64px;
        padding-bottom: 16px;
    }
}

.usp-lijn {
    width: 160px;
    height: 1px;
    margin: 0 auto 40px;
    background: rgba(46, 42, 38, 0.2);
}

.waarom-isara h2 {
    margin-bottom: 56px;
    color: var(--kleur-tekst);
}

/* Onder 1025px: de kolommen onder elkaar, gecentreerd. Even breed als het introblok erboven
   (zelfde begrenzing en zijruimte van de pagina). 56px tot de knop. */
.voordelen-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-bottom: 56px;
}

.voordeel-item {
    text-align: center;
}

/* Kopje: vet in gewone letters, zoals de sectietitels */
.voordeel-item h3 {
    margin-bottom: 0.6rem;
    color: var(--kleur-tekst);
    font-family: var(--font-titel);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    /* Als een titel toch afbreekt: evenwichtig verdelen, nooit één woord alleen */
    text-wrap: balance;
}

.voordeel-item p {
    margin: 0;
    color: var(--kleur-tekst);
    font-size: 18px;
    line-height: 1.7;
    /* Geen alleenstaand woord op de laatste regel */
    text-wrap: pretty;
}

/* Zelfde maat als de knop in het introblok van de homepage (.btn-intro); kleuren en hover komen van .btn */
.btn-waarom {
    display: inline-block;
    padding: 18px 40px;
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Vanaf 1025px: even breed als het introblok (volle breedte met dezelfde zijruimte), drie gelijke kolommen */
@media (min-width: 1025px) {
    .heeft-foto-hero main > section.waarom-isara {
        max-width: none;
        padding-left: var(--intro-zij);
        padding-right: var(--intro-zij);
    }

    .voordelen-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px;
    }

    .voordeel-item h3 {
        font-size: 22px;
    }

    .voordeel-item p {
        font-size: clamp(19px, 1.3vw, 22px);
    }

    .btn-waarom {
        padding: 22px 48px;
        font-size: 16px;
    }
}

@media (max-width: 700px) {
    .voordeel-item h3 {
        font-size: 18px;
    }
}

/* Telefoon: minder zijruimte in de knop, zodat "Bekijk onze behandelingen" vanaf ±360px op één regel past */
@media (max-width: 600px) {
    .btn-waarom {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ==========================================================================
   Contact: gegevens + formulier, kaart
   ========================================================================== */

/* Hergebruikt het introblok (.intro-home: zijruimte, breedte, scheidingslijnen, kleine regel, kop en de tekst
   met de lijn links). Binnenin een eigen indeling: onder 1025px onder elkaar, daarboven twee kolommen 5:7
   zoals het introblok (links de gegevens, rechts het formulier). */
.contact-blok {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
}

@media (min-width: 1025px) {
    .contact-blok {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(40px, 3.5vw, 72px);
        align-items: start;
    }
}

/* In het introblok staat de kop naast de tekst; hier staat hij erboven, dus ruimte eronder zoals op een smal scherm */
.intro-home .contact-info h2 {
    margin-bottom: 24px;
}

/* Vier rijen (adres, uren, e-mail, telefoon) met een dunne lijn ertussen: links het pictogram, rechts de waarde */
.contact-gegevens {
    margin: 40px 0 0;
}

.contact-rij {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-top: var(--lijn);
}

.contact-rij:last-child {
    border-bottom: var(--lijn);
}

.contact-rij dt {
    /* Pictogram op de hoogte van de eerste tekstregel */
    padding-top: 4px;
    line-height: 0;
}

/* Lijnpictogram in de donkere accenttint (5,0:1 op de achtergrond) */
.contact-icoon {
    width: 24px;
    height: 24px;
    color: var(--kleur-accent-tekst);
}

.contact-rij dd {
    margin: 0;
    color: var(--kleur-tekst);
    font-size: 20px;
    line-height: 1.5;
}

/* Openingsuren: dezelfde lijst als in de footer, hier op 20px (iets meer ruimte voor de daglabels) */
.contact-rij .openingsuren {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* De kaart eronder scheidt al: geen lijn onderaan het blok */
.contact-sectie::after {
    content: none;
}

.contact-rij .openingsuren li {
    grid-template-columns: 7.5em 1fr;
}

/* Witte kaart rond het formulier, zoals de kaarten op de homepage */
.contact-kaart {
    padding: 48px;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(46, 42, 38, 0.08);
}

/* Zonder JavaScript: enkel deze zin; met JavaScript is hij verborgen */
.formulier-zonder-js {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.6;
}

.js .formulier-zonder-js {
    display: none;
}

.formulier-uitleg {
    margin: 0 0 24px;
    font-size: 15px;
}

/* Velden in twee kolommen; het bericht over de volle breedte */
.formulier-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.formulier-veld-breed {
    grid-column: 1 / -1;
}

.formulier-veld label {
    display: block;
    margin-bottom: 8px;
    color: var(--kleur-tekst);
    font-size: 15px;
    font-weight: 600;
}

.formulier-veld .verplicht {
    color: var(--kleur-accent-tekst);
}

/* Witte velden met een rand in de donkere accenttint (6,0:1 op wit), minstens 52px hoog.
   De focusring is de algemene donkere :focus-visible-ring. */
.formulier-veld input,
.formulier-veld select,
.formulier-veld textarea {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--kleur-accent-tekst);
    border-radius: 4px;
    background-color: #FFFFFF;
    color: var(--kleur-tekst);
    font-family: var(--font-tekst);
    font-size: 17px;
    line-height: 1.4;
}

.formulier-veld textarea {
    resize: vertical;
}

/* Keuzelijst: eigen pijltje, zodat hij er hetzelfde uitziet als de andere velden */
.formulier-veld select {
    padding-right: 44px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2A26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 20px 20px;
    cursor: pointer;
}

/* Fout: rode rand en een melding onder het veld (#A3261C: 7,2:1 op wit) */
.formulier-veld [aria-invalid="true"] {
    border-color: #A3261C;
    box-shadow: inset 0 0 0 1px #A3261C;
}

.veld-fout {
    margin: 6px 0 0;
    color: #A3261C;
    font-size: 15px;
    line-height: 1.4;
}

.veld-fout:empty {
    display: none;
}

.btn-versturen {
    margin-top: 32px;
    padding: 18px 40px;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1;
    cursor: pointer;
}

.formulier-status {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
}

.formulier-status:empty {
    display: none;
}

@media (max-width: 700px) {
    .contact-kaart {
        padding: 32px;
    }
}

@media (max-width: 599px) {
    .formulier-velden {
        grid-template-columns: minmax(0, 1fr);
    }

    .btn-versturen {
        width: 100%;
    }
}

/* Telefoon: smallere kolom voor de dagen, zodat dag en uren (20px) naast elkaar passen.
   6.75em is breed genoeg voor het langste daglabel ("Wednesday") met minstens 16px tot de uren */
@media (max-width: 700px) {
    .contact-rij .openingsuren li {
        grid-template-columns: 6.75em 1fr;
    }
}

/* Smalle telefoon: minder binnenruimte in de kaart (20px), zodat de velden breed genoeg blijven,
   en de uren onder de dag (naast elkaar passen ze op 20px niet meer) */
@media (max-width: 360px) {
    .contact-kaart {
        padding: 20px;
    }

    /* "Kies een behandeling" moet volledig leesbaar blijven: minder ruimte links en rond het pijltje */
    .formulier-veld select {
        padding-left: 12px;
        padding-right: 34px;
        background-position: right 10px center;
    }

    .contact-rij .openingsuren li {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .contact-rij .openingsuren li + li {
        margin-top: 0.6em;
    }
}

/* Kaart over de volle schermbreedte, direct onder het bovenste deel (dat zorgt zelf voor de ruimte erboven)
   en zonder tussenruimte tegen de footer aan: de negatieve marge heft de marge boven de footer (3rem) op.
   Een strook van 320px hoog (280px op een telefoon). */
.heeft-foto-hero main > section.contact-kaart-sectie {
    position: relative;
    max-width: none;
    margin-bottom: -3rem;
    padding: 0;
    border-top: 0;
}

.kaart-houder {
    height: 320px;
}

/* Standaard in grijstinten; in kleur zodra de muis op de kaart of de knop staat, of de focus erin zit
   (toetsenbord of aanraking) */
.kaart-houder iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

.contact-kaart-sectie:hover iframe,
.contact-kaart-sectie:focus-within iframe {
    filter: grayscale(0);
}

/* Geen hover (aanraakscherm): meteen in kleur */
@media (hover: none) {
    .kaart-houder iframe {
        filter: grayscale(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kaart-houder iframe {
        transition: none;
    }
}

/* Knop over de kaart, gecentreerd onderaan. 48px van de onderrand: Google zet zijn logo midden onderaan
   (tot ±36px hoog) met de bronvermelding eronder, en die moeten zichtbaar blijven.
   De alinea zelf vangt geen klikken op, zodat de kaart naast de knop bedienbaar blijft. */
.kaart-knop {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 48px;
    margin: 0;
    text-align: center;
    pointer-events: none;
}

.kaart-knop .btn-route {
    pointer-events: auto;
}

.btn-route {
    padding: 18px 40px;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1;
}

@media (max-width: 700px) {
    .kaart-houder {
        height: 280px;
    }

    /* Smal scherm: de knop komt hier boven de luchtfoto-knop (links) en de bedieningsknop (rechts) van Google,
       die tot ±65px hoog reiken, en blijft onder de locatiespeld in het midden */
    .kaart-knop {
        bottom: 68px;
    }
}

/* Tot 360px: minder zijruimte en letterafstand, zodat ook "Planifier l'itinéraire" (Frans) op één regel past */
@media (max-width: 360px) {
    .btn-route {
        padding-left: 16px;
        padding-right: 16px;
        letter-spacing: 0.04em;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
    margin-top: 3rem;
    background-color: var(--kleur-footer);
    color: var(--kleur-tekst);
    font-size: 0.9375rem;
}

/* Vijf kolommen naast elkaar: contact — menu — behandelingen — openingsuren — volg ons */
.footer-kolommen {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr 0.8fr;
    gap: 40px;
    align-items: start;
    /* Volle breedte, links op dezelfde lijn als het logo */
    padding: 56px var(--header-pad) 32px var(--pagina-links);
}

/* Kleine ondertitel binnen de footer (overschrijft de algemene h2-stijl) */
.footer-titel {
    margin: 0 0 16px;
    color: var(--kleur-tekst);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

footer .logo-link {
    display: inline-block;
    margin-bottom: 20px;
    line-height: 0;
}

/* Het logobestand is wit (voor op de foto); hier donker gekleurd tot ongeveer de tekstkleur */
footer .logo-link img {
    display: block;
    width: 130px;
    height: auto;
    filter: brightness(0.18);
}

footer address {
    font-style: normal;
}

footer p {
    margin: 0 0 0.4em;
    color: var(--kleur-tekst);
}

footer a {
    color: var(--kleur-tekst);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

/* Geen bolletjes in de footer */
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-lijst li + li,
.openingsuren li + li {
    margin-top: 0.45em;
}

/* Dag links, uren rechts ernaast; lange uren lopen netjes door onder de uren */
.openingsuren li {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 0.5em;
}

/* De uren zelf breken nooit af ("09:00–" met "21:00" eronder) */
.openingsuren li span:last-child {
    white-space: nowrap;
}

.openingsuren .dag {
    color: var(--kleur-tekst);
    font-weight: 600;
}

/* Ronde sociale knoppen: dunne donkere rand, bij hover gevuld in steenkleur (icoon blijft donker) */
.footer-social {
    display: flex;
    gap: 0.75rem;
}

.social-rond {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--kleur-tekst);
    border-radius: 50%;
}

footer .social-rond:hover,
footer .social-rond:focus-visible {
    background-color: var(--kleur-accent);
    border-color: var(--kleur-accent);
    color: var(--kleur-tekst);
}

/* Lijn over de breedte van de kolommen, met het copyright eronder */
.footer-onderaan {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 var(--header-pad) 0 var(--pagina-links);
    padding: 24px 0 32px;
    border-top: var(--lijn);
}


.footer-onderaan p {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

/* Smal desktopscherm (1001 tot 1150px): de vijf kolommen blijven, maar openingsuren en "Volg ons" zijn precies
   zo breed als hun inhoud en de Menu-kolom is minstens 204px (het Franse privacylabel past dan op twee regels,
   het Engelse op één). Iets minder tussenruimte, zodat alles naast elkaar past. */
@media (min-width: 1001px) and (max-width: 1150px) {
    .footer-kolommen {
        grid-template-columns: minmax(170px, 1fr) minmax(204px, 1.2fr) minmax(108px, 0.7fr) max-content max-content;
        column-gap: 28px;
    }
}

/* Vanaf 1151px: zelfde verdeling als hierboven, maar de kolom met de openingsuren wordt nooit smaller dan de
   uren zelf. In het Engels en Frans is de Menu-kolom minstens zo breed dat het privacylabel op één regel
   (Engels) of twee regels (Frans) past; op brede schermen verandert daardoor niets. */
@media (min-width: 1151px) {
    .footer-kolommen {
        grid-template-columns: 1.3fr 0.8fr 0.8fr minmax(max-content, 1fr) 0.8fr;
    }

    :lang(en) .footer-kolommen {
        grid-template-columns: 1.3fr minmax(190px, 0.8fr) 0.8fr minmax(max-content, 1fr) 0.8fr;
    }

    :lang(fr) .footer-kolommen {
        grid-template-columns: 1.3fr minmax(204px, 0.8fr) 0.8fr minmax(max-content, 1fr) 0.8fr;
    }
}

/* Tablet: vijf kolommen passen niet meer. Drie kolommen; openingsuren (4de kolom) krijgt
   twee kolommen breedte, zodat de uren (nowrap) niet buiten beeld lopen */
@media (max-width: 1000px) {
    .footer-kolommen {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-kolommen > .footer-kolom:nth-child(4) {
        grid-column: span 2;
    }
}

/* Gsm: alles onder elkaar */
@media (max-width: 700px) {
    .footer-kolommen {
        grid-template-columns: 1fr;
        padding: 48px var(--gutter) 24px;
    }

    .footer-kolommen > .footer-kolom:nth-child(4) {
        grid-column: auto;
    }

    .footer-onderaan {
        margin: 0 var(--gutter);
    }
}

/* ==========================================================================
   Privacyverklaring (privacy.html)
   ========================================================================== */

/* De kaarten zelf zijn die van Voorbereiding (.voorbereiding-kaart, .kaart-titel, .kaart-lijst).
   Hier enkel: één leeskolom van maximaal 860px en de lopende tekst in de maat van de lijstpunten. */
.privacy-tekst {
    max-width: 860px;
}

.privacy-tekst p {
    font-size: 18px;
    line-height: 1.6;
}

.privacy-tekst .privacy-intro {
    margin-bottom: 40px;
}

/* Lijst gevolgd door een alinea: zelfde afstand als tussen twee alinea's; het laatste element sluit de kaart af */
.privacy-tekst .kaart-lijst {
    margin-bottom: 1em;
}

.privacy-tekst .voorbereiding-kaart > :last-child {
    margin-bottom: 0;
}

.privacy-tekst .privacy-datum {
    margin: 32px 0 0;
    font-size: 16px;
}

@media (max-width: 700px) {
    .privacy-tekst p {
        font-size: 17px;
    }

    .privacy-tekst .privacy-datum {
        font-size: 16px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Te smal voor alles op één regel: logo en acties bovenaan, navigatie eronder */
@media (max-width: 1430px) {
    header {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    header nav {
        order: 3;
        flex: 0 0 100%;
        margin-left: 0;
    }

    /* Menu op een eigen regel: links uitgelijnd met het logo, vaste tussenruimte
       (niet uitgespreid over de volle breedte: dat geldt enkel naast logo en knoppen) */
    .hoofdnav-lijst {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* Frans: de menulabels en "Prendre rendez-vous" zijn langer, waardoor alles pas vanaf ±1465px op één regel past
   (de taalknop stak tussen 1431 en 1463px buiten beeld). Tot 1480px daarom dezelfde indeling als hierboven. */
@media (min-width: 1431px) and (max-width: 1480px) {
    :lang(fr) header {
        flex-wrap: wrap;
    }

    :lang(fr) header nav {
        order: 3;
        flex: 0 0 100%;
        margin-left: 0;
    }

    :lang(fr) .hoofdnav-lijst {
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media (max-width: 500px) {
    header {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .header-acties {
        gap: 0.75rem;
    }

    header .btn-boeken {
        padding: 0.5em 0.9em;
        font-size: 0.8rem;
    }

    /* Navigatie loopt hier over meerdere regels: elke regel links uitlijnen */
    .hoofdnav-lijst {
        gap: 0;
    }

    .hoofdnav-lijst a {
        padding: 10px 24px 10px 0;
    }

    /* Streepje onder de actieve pagina volgt de padding hierboven */
    .hoofdnav-lijst a[aria-current="page"]::after {
        left: 0;
        right: 24px;
    }
}

/* Tablet / smal venster: het menu staat op een eigen regel onder logo en knoppen.
   Iets kleiner en krapper, zodat alle 6 links daar toch op één regel passen. */
@media (max-width: 900px) {
    .hoofdnav-lijst {
        gap: 14px;
    }

    .hoofdnav-lijst a {
        font-size: 11px;
        letter-spacing: 0.06em;
    }
}

/* Gsm: zelfs verkleind past het menu niet meer op één regel, dan mag het afbreken */
@media (max-width: 640px) {
    .hoofdnav-lijst {
        flex-wrap: wrap;
        row-gap: 0;
    }
}

/* Heel kleine schermen (vanaf 320px): knop en iconen iets compacter, zodat de header past */
@media (max-width: 360px) {
    .header-acties {
        gap: 6px;
    }

    header .btn-boeken {
        padding: 0.5em 0.7em;
        letter-spacing: 0.08em;
    }

    header .social-icons a,
    .taalwisselaar-knop {
        width: 34px;
        height: 34px;
    }
}

/* ==========================================================================
   Hamburgermenu (kleine schermen)
   ========================================================================== */

/* Groot scherm: het paneel is onzichtbaar als kader (display: contents), zodat de menubalk zich gedraagt
   zoals voorheen. De knop en de tweede "Afspraak boeken" (onderaan in het paneel) zijn er niet. */
.menu-paneel {
    display: contents;
}

.menu-knop,
.btn-boeken-paneel,
.taal-paneel {
    display: none;
}

/* Vanaf 900px en smaller past het menu niet meer op één regel in de gewone maat (14px): het moest daar al
   verkleinen tot 11px en brak onder 640px af over meerdere regels. Daar dus het hamburgermenu.
   Alleen met JavaScript (.js op <html>): zonder JavaScript blijft het menu gewoon zichtbaar in de header. */
@media (max-width: 900px) {
    .js header {
        flex-wrap: nowrap;
        column-gap: 8px;
    }

    /* Volgorde: logo links, rechts de iconen en daarnaast de knop */
    .js header .header-acties {
        order: 1;
        margin-left: auto;
        gap: 8px;
    }

    .js .menu-knop {
        order: 2;
    }

    /* "Afspraak boeken" verhuist naar het paneel */
    .js .header-acties .btn-boeken {
        display: none;
    }

    /* Hamburgerknop: 44x44px, drie witte lijnen die bij openen een kruisje vormen */
    .js .menu-knop {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--kleur-wit);
        cursor: pointer;
    }

    .menu-knop-lijnen,
    .menu-knop-lijnen::before,
    .menu-knop-lijnen::after {
        display: block;
        width: 26px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 0.25s, background-color 0.25s;
    }

    .menu-knop-lijnen {
        position: relative;
    }

    .menu-knop-lijnen::before,
    .menu-knop-lijnen::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .menu-knop-lijnen::before {
        top: -8px;
    }

    .menu-knop-lijnen::after {
        top: 8px;
    }

    .menu-knop[aria-expanded="true"] .menu-knop-lijnen {
        background-color: transparent;
    }

    .menu-knop[aria-expanded="true"] .menu-knop-lijnen::before {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-knop[aria-expanded="true"] .menu-knop-lijnen::after {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Paneel over de volle breedte, net onder de header; effen donker (tekstkleur, volledig dekkend).
       Dicht: onzichtbaar en niet bereikbaar met Tab (visibility). Openen: vervagen en licht inschuiven. */
    .js .menu-paneel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 20;
        display: block;
        max-height: calc(100vh - 100%);
        max-height: calc(100dvh - 100%);
        overflow-y: auto;
        padding: 8px var(--header-pad) 24px var(--pagina-links);
        /* Volledig dekkend: de herotekst mag er niet door schemeren */
        background-color: var(--kleur-tekst);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
    }

    .js .menu-paneel.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.25s, transform 0.25s, visibility 0s;
    }

    /* De zes links onder elkaar: 20px, wit, minstens 52px per rij, met een dunne lijn ertussen */
    .js .hoofdnav-lijst {
        display: block;
        white-space: normal;
    }

    .js .hoofdnav-lijst li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .js .hoofdnav-lijst a,
    .js .hoofdnav-lijst li:first-child a {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 8px 0;
        font-size: 20px;
        letter-spacing: 0.06em;
    }

    /* Actieve pagina: zelfde accentkleur, vetter en een streepje van 2px onder het woord, zoals in de menubalk.
       Als onderstreping (niet ::after): de link is hier een volle rij, en zo blijft het streepje even breed
       als het woord. !important (met hogere specificiteit) wint van de algemene regel "geen onderlijning" */
    .js .hoofdnav-lijst a[aria-current="page"]::after {
        content: none;
    }

    .js .hoofdnav-lijst a[aria-current="page"] {
        text-decoration: underline 2px !important;
        text-underline-offset: 8px;
    }

    /* Witte focusring binnen de rij, zodat hij niet tegen de rand van het paneel valt */
    .js .menu-paneel a:focus-visible {
        outline-offset: -2px;
    }

    /* "Afspraak boeken" onderaan over de volle breedte, in dezelfde stijl als de knop in de header */
    .js .btn-boeken-paneel {
        display: block;
        margin-top: 16px;
        padding: 18px 28px;
        font-size: 14px;
        text-align: center;
    }

    /* De drie talen als gewone links op één rij onderaan, wit op het donkere paneel; de huidige taal vet
       en onderstreept (zoals de actieve pagina) */
    .js .taal-paneel {
        display: flex;
        flex-wrap: wrap;
        column-gap: 24px;
        margin: 16px 0 0;
        padding: 8px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        list-style: none;
    }

    .js .taal-paneel a {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: var(--kleur-wit);
        font-size: 16px;
        letter-spacing: 0.04em;
    }

    .js .taal-paneel a[aria-current="true"] {
        font-weight: 600;
        text-decoration: underline 2px !important;
        text-underline-offset: 6px;
    }
}

/* Telefoon: kleiner logo, zodat logo, iconen en knop op één regel passen (ook op 320px) */
@media (max-width: 500px) {
    .js header .logo-link img {
        height: 56px;
    }
}

@media (max-width: 360px) {
    .js header .header-acties {
        gap: 4px;
    }
}

/* Menu open: de pagina eronder scrolt niet mee */
.menu-open,
.menu-open body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .js .menu-paneel,
    .js .menu-paneel.is-open,
    .menu-knop-lijnen,
    .menu-knop-lijnen::before,
    .menu-knop-lijnen::after {
        transition: none;
    }

    .js .menu-paneel {
        transform: none;
    }
}

/* ==========================================================================
   Tikdoelen op aanraakschermen
   ========================================================================== */

/* Tot 1023px: elk tikdoel is minstens 44px hoog (footerlinks 40px). Waar het zichtbare ontwerp gelijk moet
   blijven, vergroot een onzichtbaar vlak (::after) enkel de klikzone. */
@media (max-width: 1023px) {
    /* Instagram- en taalicoon in de kop: 44x44px (het icoon zelf blijft even groot) */
    header .social-icons a,
    .taalwisselaar-knop {
        width: 44px;
        height: 44px;
    }

    /* Bolletjes van de carrousels: klikzone 24x44px rond hetzelfde bolletje van 8px. De negatieve marge houdt
       de rij even hoog. Breder kan niet zonder de bolletjes ver uit elkaar te zetten: zes vlakken van 44px
       passen op een telefoon niet tussen de twee pijlen. */
    .carrousel-dot {
        margin: -10px 0;
        padding: 18px 8px;
    }

    /* Categorie-pillen op de homepage, en e-mail, telefoon en adres op Contact: klikzone van 44px hoog */
    .categorie-label,
    .contact-rij dd > a {
        position: relative;
    }

    .categorie-label::after,
    .contact-rij dd > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }

    /* Footerlinks: klikzone van 40px per link; de rijen staan daarvoor 40px uit elkaar (was ±31px) */
    .footer-lijst li + li {
        margin-top: 16px;
    }

    .footer-lijst a {
        position: relative;
    }

    .footer-lijst a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        bottom: -12px;
    }
}

/* Vanaf 340px passen de twee iconen van 44px met 8px ertussen naast het logo en de menuknop;
   op nog smallere schermen (320px) blijven ze 34px, anders raken ze het logo */
@media (min-width: 340px) and (max-width: 360px) {
    .js header .header-acties {
        gap: 8px;
    }
}

@media (max-width: 339px) {
    header .social-icons a,
    .taalwisselaar-knop {
        width: 34px;
        height: 34px;
    }
}

/* Menubalk op een tablet of smal desktopscherm (901 tot 1279px): menulinks en "Afspraak boeken" 44px hoog.
   Het streepje onder de actieve pagina schuift 1px mee, zodat het even dicht onder het woord blijft. */
@media (min-width: 901px) and (max-width: 1279px) {
    .hoofdnav-lijst a {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .hoofdnav-lijst a[aria-current="page"]::after {
        bottom: 6px;
    }

    header .btn-boeken {
        padding-top: 14.5px;
        padding-bottom: 14.5px;
    }
}