/**
 * home-v2.css — Donker premium mobile-first homepagina (v2.1).
 *
 * Wordt geladen door `shared/includes/home-render-v2.php` wanneer
 * de env-flag `HOMEPAGE_V2=true` actief is. Gebruikt het `hpv2-*` BEM-prefix
 * om botsing met de bestaande `hr-*` v1-styling te voorkomen.
 *
 * Designprincipes:
 *  - Mobile-first (320px+), opschalen naar tablet (≥720px) en desktop (≥1024px).
 *  - Donker premium thema: warm zwart/houtskool + gedempt goud, foto's dragen sfeer.
 *  - WCAG 2.1 AA contrast op alle tekst.
 *  - Micro-animaties (fade-up, fly-in, hover) — alle uit bij `prefers-reduced-motion`.
 *  - Geen horizontale overflow vanaf 320px, tap-targets ≥48px.
 */

/* ============================================================
   TOKENS — basis (thema-agnostisch)
   ============================================================ */
:root {
    --hpv2-radius: 6px;
    --hpv2-radius-lg: 14px;
    --hpv2-container: 1180px;

    --hpv2-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hpv2-font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;

    --hpv2-tap-min: 48px;
    --hpv2-trans: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);

    --hpv2-accent: #c9a25a;          /* warm goud — gedeeld tussen thema's */
    --hpv2-accent-strong: #b8924b;
    --hpv2-accent-soft: rgba(201, 162, 90, 0.12);
}

/* ============================================================
   DARK THEMA (default — komt overeen met v2.1)
   - Geldt voor `html[data-theme="dark"]` EN als default zonder data-theme,
     EN als systeem `prefers-color-scheme: dark` heeft.
   ============================================================ */
:root,
html[data-theme="dark"] {
    --hpv2-bg: #0c0a09;
    --hpv2-bg-elev: #161310;
    --hpv2-bg-soft: #1f1b17;
    --hpv2-fg: #f5f1ea;
    --hpv2-fg-soft: #d6cfc3;
    --hpv2-muted: #a8a094;
    --hpv2-line: rgba(245, 241, 234, 0.10);
    --hpv2-line-strong: rgba(245, 241, 234, 0.18);

    --hpv2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --hpv2-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --hpv2-shadow-glow: 0 0 0 1px rgba(201, 162, 90, 0.35), 0 8px 24px rgba(201, 162, 90, 0.12);

    /* Rustige, vrijwel egale verduistering houdt titel en acties leesbaar en
       tempert drukke details in wisselende achtergrondfoto's. */
    --hpv2-hero-overlay:
        linear-gradient(90deg, rgba(12, 10, 9, 0.88) 0%, rgba(12, 10, 9, 0.74) 58%, rgba(12, 10, 9, 0.68) 100%),
        linear-gradient(180deg, rgba(12, 10, 9, 0.68) 0%, rgba(12, 10, 9, 0.92) 100%);

    --hpv2-btn-fg: #0a0a0a;
}

/* ============================================================
   LIGHT THEMA
   - Geldt voor `html[data-theme="light"]`, of als default wanneer
     systeem `prefers-color-scheme: light` en gebruiker geen keuze maakte.
   ============================================================ */
html[data-theme="light"] {
    --hpv2-bg: #faf7f1;          /* warm off-white */
    --hpv2-bg-elev: #ffffff;
    --hpv2-bg-soft: #f3ede2;
    --hpv2-fg: #14100c;          /* iets donkerder voor 14+:1 contrast op #faf7f1 */
    --hpv2-fg-soft: #2d251e;     /* >12:1 op #faf7f1 */
    --hpv2-muted: #5a4f43;       /* >7:1 op #faf7f1 (was 5.1:1) */
    --hpv2-line: rgba(20, 16, 12, 0.12);
    --hpv2-line-strong: rgba(20, 16, 12, 0.22);

    --hpv2-accent: #8a6829;       /* >5:1 op #faf7f1 — AA voor normale tekst */
    --hpv2-accent-strong: #6f521e;
    --hpv2-accent-soft: rgba(138, 104, 41, 0.14);

    --hpv2-shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.08);
    --hpv2-shadow-md: 0 10px 28px rgba(20, 16, 12, 0.12);
    --hpv2-shadow-glow: 0 0 0 1px rgba(138, 104, 41, 0.55), 0 8px 24px rgba(138, 104, 41, 0.22);

    /* Hero-overlay in licht thema: zwaardere gradient onderaan voor AA-contrast
       op tekst (4.5:1+), foto blijft sfeerdrager bovenaan zichtbaar. */
    --hpv2-hero-overlay:
        linear-gradient(90deg, rgba(250, 247, 241, 0.9) 0%, rgba(250, 247, 241, 0.78) 58%, rgba(250, 247, 241, 0.72) 100%),
        linear-gradient(180deg, rgba(250, 247, 241, 0.68) 0%, rgba(250, 247, 241, 0.96) 100%);

    --hpv2-btn-fg: #faf7f1;
}

/* Systeem-thema respecteren ZOLANG gebruiker geen handmatige keuze heeft.
   `data-theme="system"` is de default-staat (gezet door het anti-flash boot-script);
   binnen die staat volgen we `prefers-color-scheme`. Een expliciete keuze
   (`data-theme="light"` of `"dark"`) wint altijd via de regels hierboven. */
@media (prefers-color-scheme: light) {
    html[data-theme="system"] {
        --hpv2-bg: #faf7f1;
        --hpv2-bg-elev: #ffffff;
        --hpv2-bg-soft: #f3ede2;
        --hpv2-fg: #14100c;
        --hpv2-fg-soft: #2d251e;
        --hpv2-muted: #5a4f43;
        --hpv2-line: rgba(20, 16, 12, 0.12);
        --hpv2-line-strong: rgba(20, 16, 12, 0.22);
        --hpv2-accent: #8a6829;
        --hpv2-accent-strong: #6f521e;
        --hpv2-accent-soft: rgba(138, 104, 41, 0.14);
        --hpv2-shadow-sm: 0 1px 2px rgba(20, 16, 12, 0.08);
        --hpv2-shadow-md: 0 10px 28px rgba(20, 16, 12, 0.12);
        --hpv2-shadow-glow: 0 0 0 1px rgba(138, 104, 41, 0.55), 0 8px 24px rgba(138, 104, 41, 0.22);
        --hpv2-hero-overlay:
            linear-gradient(90deg, rgba(250, 247, 241, 0.9) 0%, rgba(250, 247, 241, 0.78) 58%, rgba(250, 247, 241, 0.72) 100%),
            linear-gradient(180deg, rgba(250, 247, 241, 0.68) 0%, rgba(250, 247, 241, 0.96) 100%);
        --hpv2-btn-fg: #faf7f1;
    }
}

/* ============================================================
   BASE
   ============================================================ */
body.hpv2 {
    margin: 0;
    /* Override v1 root-landing.css: geen padding/flex/wood-bg op body.
       v2 is een edge-to-edge layout met sectie-gestuurde achtergronden. */
    padding: 0 !important;
    background: var(--hpv2-bg);
    background-image: none !important;
    background-attachment: scroll !important;
    display: block !important;
    color: var(--hpv2-fg);
    font-family: var(--hpv2-font-sans);
    /* Bodytekst standaard 16px (1rem). Op grotere desktop-viewports
       schalen we naar ~17px zodat lange leesteksten en service-/FAQ-content
       comfortabeler zijn voor oudere bezoekers, zonder layout te breken. */
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
@media (min-width: 1200px) {
    body.hpv2 {
        font-size: 1.0625rem; /* 17px — iets meer ademruimte voor lange copy */
    }
}

/* v1 zet een radial-gradient op body::before — onzichtbaar maken in v2 */
body.hpv2::before {
    display: none !important;
}

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

body.hpv2 ::selection {
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
}

.hpv2-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.hpv2-skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
    padding: 0.5rem 1rem;
    z-index: 10000;
    border-radius: var(--hpv2-radius);
}

.hpv2-container {
    width: 100%;
    max-width: var(--hpv2-container);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    position: relative;
    z-index: 2;
}

.hpv2-section {
    padding: clamp(2.5rem, 7vw, 5.5rem) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* scroll-margin zodat anker-links (#availability-section) niet onder de
       floating theme-toggle of een sticky noticebar landen. */
    scroll-margin-top: clamp(1rem, 4vh, 4rem);
}

.hpv2-section-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hpv2-section-media__slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1200ms ease-in-out;
}

.hpv2-section-media__slide.is-active {
    opacity: 1;
}

.hpv2-section-media__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hpv2-bg);
    opacity: var(--hpv2-section-media-overlay-opacity, 0.72);
}

/* Scroll-gedreven slide-effect voor sectie-achtergronden (CMS v2-media).
   JS (initSectionMediaSlideFx in home-v2.js) kent per media-laag in
   documentvolgorde afwisselend een richtingsclass toe en toggelt
   .is-inview op basis van een IntersectionObserver op de oudersectie:
   het beeld schuift van links of rechts in zodra de sectie in beeld
   scrolt, en schuift weer uit zodra de sectie de viewport verlaat
   (in beide scrollrichtingen). */
.hpv2-section-media--from-left,
.hpv2-section-media--from-right {
    opacity: 0;
    /* Rustige drift: 1600ms transform met zachte uitloop, opacity iets
       korter zodat het beeld al zichtbaar is terwijl het nog beweegt. */
    transition: transform 1600ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1200ms ease;
    will-change: transform, opacity;
}

/* Subtiele variant: 40% offset i.p.v. volledig buiten beeld — het beeld
   drijft in combinatie met de opacity-fade de sectie in ("drift-in"). */
.hpv2-section-media--from-left { transform: translateX(-40%); }
.hpv2-section-media--from-right { transform: translateX(40%); }

.hpv2-section-media--from-left.is-inview,
.hpv2-section-media--from-right.is-inview {
    transform: translateX(0);
    opacity: 1;
}

/* De horizontaal schuivende media-laag mag geen paginabrede scrollbalk
   veroorzaken: clip alleen de x-as van secties met media. (visible+clip
   is de toegestane gemengde overflow-combinatie, dus verticale content
   zoals schaduwen blijft ongemoeid.) */
.hpv2-section:has(.hpv2-section-media) { overflow-x: clip; }

/* Reduced motion: geen slide — het beeld staat gewoon vast zichtbaar. */
@media (prefers-reduced-motion: reduce) {
    .hpv2-section-media--from-left,
    .hpv2-section-media--from-right {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* Leesbaarheids-versteviging voor secties met een media-achtergrond.
   Het overlay-blok dempt het beeld, maar fijne tekst (eyebrow, labels) en
   ghost-knoppen kunnen nog steeds wegvallen tegen een getextureerde foto.
   Een subtiele text-shadow op tekst-elementen en een semi-opaque vulling
   op ghost-knoppen voorkomt verlies van contrast zonder de foto te
   verbergen. Selector matched alleen secties die daadwerkelijk een
   `.hpv2-section-media`-kind hebben. */
.hpv2-section:has(.hpv2-section-media) .hpv2-section-label,
.hpv2-section:has(.hpv2-section-media) .hpv2-section-title,
.hpv2-section:has(.hpv2-section-media) .hpv2-section-lead,
.hpv2-section:has(.hpv2-section-media) .hpv2-contact-list,
.hpv2-section:has(.hpv2-section-media) .hpv2-contact-list a,
.hpv2-section:has(.hpv2-section-media) .hpv2-faq__question {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-section-label,
html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-section-title,
html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-section-lead,
html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-contact-list,
html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-contact-list a,
html[data-theme="dark"] .hpv2-section:has(.hpv2-section-media) .hpv2-faq__question {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Ghost-knoppen tegen een foto-achtergrond: vul ze met semi-opaque elev-bg
   zodat ze duidelijk klikbaar zijn. Hover gedrag van .hpv2-btn--ghost komt
   automatisch over deze regel heen. */
.hpv2-section:has(.hpv2-section-media) .hpv2-btn--ghost {
    background: color-mix(in srgb, var(--hpv2-bg-elev) 78%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* FAQ-items binnen een sectie met media: zelfde semi-opaque behandeling
   zodat de accordion-kaarten duidelijk afgebakend blijven. */
.hpv2-section:has(.hpv2-section-media) .hpv2-faq__item {
    background: color-mix(in srgb, var(--hpv2-bg-elev) 88%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.hpv2-section--alt {
    background: var(--hpv2-bg-elev);
}

/* ============================================================
   FULLSCREEN HELPER
   - `.hpv2-section--fullscreen` zorgt dat een sectie minstens één viewport
     hoog is. Gebruikt 100svh (small viewport) als primair en valt terug op
     100vh voor browsers zonder svh-support.
   - Content wordt verticaal gecentreerd met een flex-wrapper (`__inner`).
   - Safe-area (iOS notch / home-indicator) wordt via env() gerespecteerd.
   - Op kleine schermen blijft `min-height`, content mag doorgroeien.
   ============================================================ */
.hpv2-section--fullscreen {
    min-height: 100vh;                     /* fallback */
    min-height: 100svh;                    /* moderne viewports — geen browserchrome-flicker */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-bottom, 0px));
}

/* Variant: hero — start hoger op de viewport zodat de CTA op mobiel boven
   de vouw blijft en de scroll-cue genoeg ademruimte heeft. */
.hpv2-hero.hpv2-section--fullscreen {
    justify-content: flex-start;
    padding-top: calc(clamp(5rem, 14vw, 8rem) + env(safe-area-inset-top, 0px));
}
@media (min-width: 960px) {
    .hpv2-hero.hpv2-section--fullscreen {
        justify-content: center;
    }
}

/* Variant: contact — split-layout op desktop, kolom-stack op mobiel.
   Beide kolommen vullen samen de viewport-hoogte. */
.hpv2-contact-fullscreen .hpv2-contact-grid {
    align-items: stretch;
}
@media (min-width: 960px) {
    .hpv2-contact-fullscreen .hpv2-contact-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        min-height: calc(100svh - clamp(6rem, 14vw, 10rem));
    }
}

/* Variant: half-fullscreen — voor mobiel waar volle viewport teveel ruimte
   zou geven aan één sectie. Quote-band gebruikt dit. */
@media (max-width: 719px) {
    .hpv2-section--half-fullscreen-mobile {
        min-height: 60vh;
        min-height: 60svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* `.hpv2-section--fullscreen` voor secties die we NIET op mobiel willen
   forceren (trust, team, contact) — alleen vanaf tablet. */
@media (max-width: 719px) {
    .hpv2-section--fullscreen-desktop-only {
        min-height: 0;
        display: block;
    }
}
@media (min-width: 720px) {
    .hpv2-section--fullscreen-desktop-only {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-bottom, 0px));
    }
}

/* Soft-variant: forceert alleen `min-height: 100svh` zonder flex/centering.
   Voor secties met eigen complexe interne layout (availability-slider,
   services-grid, FAQ-accordion) waar flex de child-DOM zou breken. Content
   stroomt natuurlijk; ankerlinks (#availability-section, #faq-section)
   landen netjes bovenaan. Bij mobiele landschapsstand (lage hoogte) zakken
   we terug naar 100vh zodat de slider zelf de viewport bepaalt zonder
   onnodige verticale padding. */
.hpv2-section--fullscreen-soft {
    min-height: 100vh;
    min-height: 100svh;
    /* display: block default — geen flex om bestaande interne grids in stand
       te houden. */
    padding-top: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-bottom, 0px));
}

/* Homepage-audit 2026-07-19: op telefoons bepaalt de inhoud de sectiehoogte.
   De vroegere 60/100svh-minima maakten grote lege vlakken tussen hero,
   beschikbaarheid en quote. Desktop behoudt de cinematografische fullscreen-opbouw. */
@media (max-width: 719px) {
    .hpv2-section--fullscreen,
    .hpv2-section--fullscreen-soft,
    .hpv2-section--half-fullscreen-mobile {
        min-height: 0;
    }
}

/* Mobiele landschapsstand (lage viewporthoogte, oriëntatie liggend): elke
   fullscreen-variant krijgt compacte verticale padding zodat primaire content
   binnen de viewport past. Tap-targets blijven ≥48px via --hpv2-tap-min.
   Geldt voor telefoons (max-height 540px geeft typisch landscape-telefoon-
   zones). */
@media (orientation: landscape) and (max-height: 540px) {
    .hpv2-section--fullscreen,
    .hpv2-section--fullscreen-soft,
    .hpv2-section--fullscreen-desktop-only {
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }
    .hpv2-hero.hpv2-section--fullscreen {
        padding-top: calc(3rem + env(safe-area-inset-top, 0px));
    }
    /* Scroll-cue verbergen in mobiel landschap; hij vreet schaarse hoogte. */
    .hpv2-hero__scroll-cue {
        display: none;
    }
}

/* Footer-min-height in v2-context (alleen desktop ≥720px). Op mobiel laten
   we de footer op natuurlijke hoogte uitgroeien — anders krijgen we lege
   ruimte onder beperkte content. */
@media (min-width: 720px) {
    body.hpv2 .hr-footer {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: calc(clamp(2.5rem, 7vw, 5.5rem) + env(safe-area-inset-top, 0px));
        padding-bottom: calc(clamp(2rem, 5vw, 4rem) + env(safe-area-inset-bottom, 0px));
    }
}

/* Subtiele scheidingslijn tussen secties — fijner dan een harde border */
.hpv2-section + .hpv2-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 8vw, 80px);
    height: 1px;
    background: var(--hpv2-line-strong);
}

/* Sectie-koppen */
.hpv2-section-label {
    /* 13px in plaats van 12px: bij ALL-CAPS + brede letter-spacing was 12px
       op de grens voor oudere bezoekers. 13px is nog steeds subtiel-secundair
       maar comfortabeler leesbaar zonder de visuele hiërarchie te doorbreken. */
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--hpv2-accent);
    margin: 0 0 0.75rem;
    font-weight: 600;
}
.hpv2-section-title {
    font-family: var(--hpv2-font-display);
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin: 0 0 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--hpv2-fg);
}
/* Accentlijn-reveal onder elke sectietitel: een korte gouden lijn die van
   links naar rechts "groeit" zodra de titel via de bestaande fade-up-observer
   zichtbaar wordt (.is-visible — gezet door initFadeUp in home-v2.js, dus géén
   extra JS). De ruimte van de lijn is vanaf de eerste paint gereserveerd
   (alleen transform animeert → geen layout-shift). Vangnetten: noscript-regel
   in home-render-v2.php en het prefers-reduced-motion-blok tonen de lijn direct. */
.hpv2-section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: var(--hpv2-accent);
    transform: scaleX(0);
    transform-origin: left;
    /* Kleine vertraging zodat de lijn nét na de titel-fade-up binnenkomt. */
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms;
}
/* Reveal-trigger: dezelfde .is-visible-klasse als de fade-up van de titel. */
.hpv2-section-title.hpv2-fade-up.is-visible::after {
    transform: scaleX(1);
}

/* ============================================================
   NOTICE BAR
   ============================================================ */
.hpv2-notice-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg-soft);
    border-bottom: 1px solid var(--hpv2-line-strong);
    font-family: var(--hpv2-font-body);
    font-size: 0.875rem;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0.55rem 1.25rem;
    text-align: center;
    /* Dunne scheidingslijn + zachte schaduw lossen de balk netjes los van
       de donkere hero eronder. */
    box-shadow: 0 5px 16px -14px rgba(0, 0, 0, 0.6);
    /* De zwevende hero-navbar (.hr-navbar) is `position:fixed; z-index:1000`
       en zou anders over deze in-flow balk heen getekend worden. z-index
       werkt alleen met een positioneringscontext, vandaar position:relative.
       Fix 2026-07-03 (gevangen door Playwright): 1100 lag óók boven de
       Bootstrap-modals (backdrop 1050 / modal 1055), waardoor de balk kliks
       op o.a. de modal-sluitknop onderschepte. 1035 = boven navbar (1000) en
       Bootstrap-fixed (1030), onder offcanvas-backdrop (1040) en modals. */
    position: relative;
    z-index: 1035;
}
/* Info-icoon vóór de melding (mask → volgt automatisch de tekstkleur,
   dus correct in zowel donker als licht thema). */
.hpv2-notice-bar::before {
    content: "";
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    background-color: currentColor;
    color: var(--hpv2-accent);
    opacity: 0.9;
    -webkit-mask: var(--hpv2-notice-icon) center / contain no-repeat;
    mask: var(--hpv2-notice-icon) center / contain no-repeat;
}
.hpv2-notice-bar {
    --hpv2-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
}
.hpv2-notice-bar span {
    /* Lange meldingen netjes laten afbreken zonder de balk te laten knappen. */
    max-width: 70ch;
}
.hpv2-notice-bar span + span::before {
    content: " · ";
    opacity: 0.55;
    padding: 0 0.3rem;
}
@media (max-width: 575px) {
    .hpv2-notice-bar {
        align-items: flex-start;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
        gap: 0.45rem;
    }
    .hpv2-notice-bar::before { width: 1rem; height: 1rem; }
}

/* ============================================================
   HERO — donker, met achtergrondfoto en overlay
   ============================================================ */
.hpv2-hero {
    position: relative;
    /* Fullscreen-hero via .hpv2-section--fullscreen helper; deze regel houdt
       de inhoud overflowing/isolated, padding wordt door de helper bepaald. */
    overflow: hidden;
    isolation: isolate;
}

.hpv2-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--hpv2-bg);
}
/* Elke actieve achtergrondslide zoomt binnen zijn eigen zichtduur rustig in.
   JS zet de duur vanuit hetzelfde data-interval als de slidewissel, zodat de
   eindzoom exact bereikt is wanneer de crossfade start. De motion-class wordt
   alleen bij meerdere slides en zonder reduced-motion toegevoegd; een enkele
   heroafbeelding blijft dus statisch. */
@keyframes hpv2-hero-slide-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.025); }
}
.hpv2-hero__bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity var(--hpv2-hero-crossfade-duration, 1200ms) ease-in-out;
    will-change: opacity, transform;
}
.hpv2-hero__bg-slide.is-active {
    opacity: 1;
}
/* Alleen de actieve slide animeert. `both` houdt bij activering de beginschaal
   vast en eindigt op 1.06 tot JS de slide als uitgaand markeert. */
.hpv2-hero__bg.has-slide-motion .hpv2-hero__bg-slide.is-active {
    animation: hpv2-hero-slide-zoom var(--hpv2-hero-slide-duration, 7000ms) ease-in-out both;
}
/* Tijdens de 1,2s-crossfade blijft de uitgaande slide op zijn eindzoom staan.
   Zonder deze klasse zou het verwijderen van `is-active` zichtbaar terugspringen
   naar scale(1) terwijl de opacity nog aan het uitfaden is. */
.hpv2-hero__bg-slide.is-leaving {
    opacity: 0;
    transform: scale(1.025);
}

/* Overlay voor leesbaarheid — per thema instelbaar via --hpv2-hero-overlay. */
.hpv2-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hpv2-hero-overlay);
    pointer-events: none;
}

.hpv2-hero__inner {
    /* Vult de volledige breedte van .hpv2-container (tot --hpv2-container = 1180px)
       i.p.v. de eerdere vaste 720px-kolom. De hero-content (eyebrow/titel/CTA/
       snapshot) loopt nu door tot de containerrand; de lead-paragraaf behoudt
       bewust zijn eigen leesbaarheidscap via .hpv2-hero__lead { max-width: 58ch }. */
    max-width: 100%;
}

/* Hero-actiezone: op desktop twee kolommen naast elkaar met het actuele slot
   links en de dienstkeuzes rechts. Op mobiel/tablet blijft alles één kolom,
   zodat medewerker-rijen niet worden samengeperst. */
.hpv2-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
/* Op gsm ziet de bezoeker na de informatieve intro eerst het actuele slot en
   pas daarna de dienstkeuzes. home-v2.js synchroniseert op hetzelfde breakpoint
   ook de DOM-/focusvolgorde; deze CSS voorkomt een verkeerde eerste paint. */
@media (max-width: 719px) {
    .hpv2-hero__actions > .hpv2-availability-snapshot {
        order: 1;
        margin-top: 0;
    }
    .hpv2-hero__actions > .hpv2-hero__cta-row { order: 2; }
}
/* Vanaf 960px is er genoeg breedte zodat beide kolommen comfortabel passen
   (snapshot-rij = avatar + naam · slot-chip · "Boek →"). De CTA-kolom wordt
   verticaal gecentreerd t.o.v. de hogere snapshot-kaart. */
@media (min-width: 960px) {
    .hpv2-hero__actions {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(1rem, 2.5vw, 2rem);
        /* Beide kolommen aan de bovenkant uitlijnen: de CTA-kolom (vak B) start
           op dezelfde hoogte als de top van het "Eerstvolgende slot"-overzicht
           (vak A) i.p.v. verticaal gecentreerd. */
        align-items: start;
    }
    /* Kolommen omgedraaid: vak A (links) = het "Eerstvolgende slot"-overzicht,
       vak B (rechts) = de CTA-kolom (online-teller + boekingsknop). `order`
       behoudt de bestaande desktopcompositie onafhankelijk van de DOM-volgorde. */
    .hpv2-hero__actions .hpv2-availability-snapshot { order: 1; }
    .hpv2-hero__actions .hpv2-hero__cta-row { order: 2; }
}
/* In de grid regelt de gap de verticale spacing; de eigen top-marge van de
   snapshot (2rem, bedoeld voor de gestapelde flow) vervalt binnen de actiezone. */
.hpv2-hero__actions .hpv2-availability-snapshot {
    margin-top: 0;
}

.hpv2-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    /* 13px — zie .hpv2-section-label voor motivatie. */
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hpv2-accent);
    margin: 0 0 1.25rem;
    font-weight: 600;
}
/* Licht thema: de hero-overlay is bovenaan slechts ~20% opaak, dus de eyebrow
   zit bovenop het ruwe hero-foto-materiaal (varieerd grijs/beige).
   Pure kleur-contrast volstaat niet — we combineren:
     1. Donkere `--hpv2-fg-soft` (#2d251e) als basiskleur (≥12:1 op #faf7f1)
        zodat de tekst óók over donkere foto-zones leesbaar blijft.
     2. Cream text-shadow halo die rond elke letter een lichte "rim" tekent
        en de tekst visueel optilt van de foto.
   De gouden accent-stijl blijft behouden via de `::before` streep. */
html[data-theme="light"] .hpv2-hero__eyebrow,
html[data-theme="light"] .hpv2-hero__eyebrow::before {
    color: var(--hpv2-fg-soft);
}
html[data-theme="light"] .hpv2-hero__eyebrow {
    font-weight: 700;
    text-shadow:
        0 0 4px rgba(250, 247, 241, 0.9),
        0 0 8px rgba(250, 247, 241, 0.7),
        0 1px 2px rgba(250, 247, 241, 0.95);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .hpv2-hero__eyebrow,
    html[data-theme="system"] .hpv2-hero__eyebrow::before {
        color: var(--hpv2-fg-soft);
    }
    html[data-theme="system"] .hpv2-hero__eyebrow {
        font-weight: 700;
        text-shadow:
            0 0 4px rgba(250, 247, 241, 0.9),
            0 0 8px rgba(250, 247, 241, 0.7),
            0 1px 2px rgba(250, 247, 241, 0.95);
    }
}
.hpv2-hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
}

.hpv2-hero__title {
    font-family: var(--hpv2-font-display);
    font-size: clamp(2.15rem, 7vw, 3.75rem);
    line-height: 1.05;
    margin: 0 0 0.85rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--hpv2-fg);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.48);
}
.hpv2-hero__title span {
    color: var(--hpv2-accent);
    font-style: italic;
}

/* Licht thema: net als bij de eyebrow staat de hero-titel bovenaan de hero,
   waar de overlay slechts ~20% opaak is en de foto-textuur (variabel grijs/
   beige) doorslaat. Pure donkere kleur volstaat dan niet — een lichte halo
   tilt de tekst visueel los van de foto zonder de donkere kleurkeuze te
   verlaten. De halo blijft subtiel om geen "outlined font"-effect te geven. */
html[data-theme="light"] .hpv2-hero__title,
html[data-theme="light"] .hpv2-hero__title span {
    text-shadow:
        0 0 6px rgba(250, 247, 241, 0.85),
        0 0 14px rgba(250, 247, 241, 0.55),
        0 1px 2px rgba(250, 247, 241, 0.95);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .hpv2-hero__title,
    html[data-theme="system"] .hpv2-hero__title span {
        text-shadow:
            0 0 6px rgba(250, 247, 241, 0.85),
            0 0 14px rgba(250, 247, 241, 0.55),
            0 1px 2px rgba(250, 247, 241, 0.95);
    }
}

.hpv2-hero__lead {
    color: var(--hpv2-fg-soft);
    font-size: clamp(1rem, 2.4vw, 1.1875rem);
    margin: 0;
    max-width: 58ch;
    line-height: 1.65;
}

/* Licht thema: hero-lead krijgt eveneens een subtielere halo (kleiner dan de
   titel) zodat lange paragrafen niet wegvallen tegen lichte foto-zones. */
html[data-theme="light"] .hpv2-hero__lead {
    text-shadow:
        0 0 4px rgba(250, 247, 241, 0.85),
        0 1px 2px rgba(250, 247, 241, 0.9);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .hpv2-hero__lead {
        text-shadow:
            0 0 4px rgba(250, 247, 241, 0.85),
            0 1px 2px rgba(250, 247, 241, 0.9);
    }
}

.hpv2-hero__notice {
    background: var(--hpv2-accent-soft);
    border-left: 3px solid var(--hpv2-accent);
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.75rem;
    font-size: 0.9375rem;
    color: var(--hpv2-fg);
    border-radius: 0 var(--hpv2-radius) var(--hpv2-radius) 0;
}

.hpv2-hero__cta-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

/* Twee rustige keuze-kaarten leggen het verschil uit vóór de klik. De gewone
   afspraakknop blijft de sterkste gevulde CTA; snelboeken krijgt een herkenbaar
   icoon en duidelijke dienstscope zonder extra keuze- of bevestigingsstap. */
.hpv2-booking-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
}
@media (min-width: 560px) and (max-width: 959.98px), (min-width: 1180px) {
    .hpv2-booking-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hpv2-booking-choice {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--hpv2-line-strong);
    border-radius: var(--hpv2-radius-lg);
    background: rgba(20, 17, 15, 0.78);
    box-shadow: var(--hpv2-shadow-sm);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
html[data-theme="light"] .hpv2-booking-choice {
    background: rgba(255, 252, 247, 0.88);
}
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .hpv2-booking-choice { background: rgba(255, 252, 247, 0.88); }
}
.hpv2-booking-choice--quick { border-color: rgba(201, 162, 90, 0.55); }
.hpv2-booking-choice__heading { display: flex; align-items: center; gap: 0.75rem; }
.hpv2-booking-choice__icon {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-accent);
}
.hpv2-booking-choice__icon svg { width: 23px; height: 23px; }
.hpv2-booking-choice__kicker {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--hpv2-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hpv2-booking-choice__title {
    margin: 0;
    color: var(--hpv2-fg);
    font-family: var(--hpv2-font-body);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}
.hpv2-booking-choice__text,
.hpv2-booking-choice__scope {
    margin: 0.6rem 0 0.8rem;
    color: var(--hpv2-fg-soft);
    font-size: 0.875rem;
    line-height: 1.45;
}
.hpv2-booking-choice__scope strong { color: var(--hpv2-fg); }
.hpv2-booking-choice .hpv2-btn { margin-top: auto; }
.hpv2-btn svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.hpv2-btn--quick {
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-fg);
    border-color: var(--hpv2-accent);
}
.hpv2-btn--quick:hover,
.hpv2-btn--quick:focus-visible {
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
}

.hpv2-hero__live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Toon de online-teller op een eigen regel BOVEN de knop(pen): order:-1 zet
       hem vooraan in de flex-volgorde en flex-basis:100% dwingt hem op een eigen
       regel, zodat de CTA-knop(pen) eronder wrappen. */
    order: -1;
    flex-basis: 100%;
    margin-left: 0;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    color: var(--hpv2-muted);
}
.hpv2-hero__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    animation: hpv2-pulse 2.4s ease-in-out infinite;
}

@keyframes hpv2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.4); }
}

/* Scroll cue onderaan hero — decoratief (aria-hidden), staat absoluut
   gepositioneerd. Op viewports onder de desktop-breekpunt loopt de hero-
   content (eyebrow, titel, lead, CTA-row, snapshot-knop) tot vlak boven
   de bottom-rand, waardoor de cue visueel bovenop het snapshot-kaartje
   valt. Het snapshot-kaartje bevat zelf al een "Boek dit slot →" indicator
   onderaan, dus de scroll-cue voegt op mobile/tablet niets toe. */
.hpv2-hero__scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    color: var(--hpv2-muted);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: hpv2-cue 2.6s ease-in-out infinite;
    pointer-events: none;
}
@media (max-width: 991.98px) {
    .hpv2-hero__scroll-cue {
        display: none;
    }
}
.hpv2-hero__scroll-cue::after {
    content: "";
    display: block;
    width: 1px;
    height: 32px;
    background: var(--hpv2-accent);
    margin: 0.5rem auto 0;
    opacity: 0.7;
}
@keyframes hpv2-cue {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
    50% { transform: translate(-50%, 6px); opacity: 1; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hpv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.9375rem 1.625rem;
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
    text-decoration: none;
    border: 1px solid var(--hpv2-accent);
    border-radius: var(--hpv2-radius);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    min-height: var(--hpv2-tap-min);
    cursor: pointer;
    transition: background var(--hpv2-trans), border-color var(--hpv2-trans), transform var(--hpv2-trans), box-shadow var(--hpv2-trans);
    font-family: inherit;
    letter-spacing: 0.01em;
}
.hpv2-btn:hover {
    background: var(--hpv2-accent-strong);
    border-color: var(--hpv2-accent-strong);
    box-shadow: var(--hpv2-shadow-glow);
    transform: translateY(-1px);
}
.hpv2-btn:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 3px;
}
.hpv2-btn:active {
    /* Press-state: subtiele "indruk"-feedback bij klikken/tikken — moderne
       tactiele bevestiging naast de hover-lift. Alleen transform (compositor). */
    transform: translateY(0) scale(0.98);
}

.hpv2-btn--ghost {
    background: transparent;
    color: var(--hpv2-fg);
    border-color: var(--hpv2-line-strong);
    box-shadow: none;
}
.hpv2-btn--ghost:hover {
    background: var(--hpv2-bg-soft);
    color: var(--hpv2-accent);
    border-color: var(--hpv2-accent);
    transform: translateY(-1px);
    box-shadow: none;
}

.hpv2-btn--block { width: 100%; }

/* ============================================================
   BESCHIKBAARHEID SNAPSHOT
   ============================================================ */
.hpv2-availability-snapshot {
    display: block;
    margin-top: 2rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--hpv2-line-strong);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-bg-elev);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 100%;
    max-width: 420px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--hpv2-trans), background var(--hpv2-trans),
                transform var(--hpv2-trans), box-shadow var(--hpv2-trans);
    min-height: var(--hpv2-tap-min);
    /* Button-reset zodat <button> en <a> hetzelfde renderen */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.hpv2-availability-snapshot:hover,
.hpv2-availability-snapshot:focus-visible {
    border-color: var(--hpv2-accent);
    transform: translateY(-1px);
    box-shadow: var(--hpv2-shadow-glow);
    outline: none;
}
.hpv2-availability-snapshot:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 3px;
}
.hpv2-availability-snapshot__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hpv2-muted);
    margin: 0 0 0.5rem;
    font-weight: 600;
}
/* Korte instructie-regel boven de medewerker-rijen: subtiel, niet schreeuwerig. */
.hpv2-availability-snapshot__hint {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--hpv2-muted);
    margin: 0 0 0.65rem;
}
.hpv2-availability-snapshot__hint strong {
    color: var(--hpv2-fg);
}
.hpv2-availability-snapshot__value {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--hpv2-fg);
    font-variant-numeric: tabular-nums;
}
.hpv2-availability-snapshot__cta {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hpv2-accent);
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--hpv2-trans), transform var(--hpv2-trans);
}
.hpv2-availability-snapshot:hover .hpv2-availability-snapshot__cta,
.hpv2-availability-snapshot:focus-visible .hpv2-availability-snapshot__cta,
.hpv2-availability-snapshot[data-state="loaded"] .hpv2-availability-snapshot__cta {
    opacity: 1;
    transform: translateX(0);
}
.hpv2-availability-snapshot[data-state="loaded"] {
    border-color: var(--hpv2-accent);
    background: var(--hpv2-accent-soft);
}
/* Laad-staat: subtiele pulse op de waarde tot availability.php antwoordt.
   De CTA-pijl blijft verborgen tot er een echt slot is. */
.hpv2-availability-snapshot[data-state="loading"] .hpv2-availability-snapshot__value {
    color: var(--hpv2-muted);
    animation: hpv2-snapshot-pulse 1.4s ease-in-out infinite;
}
.hpv2-availability-snapshot[data-state="loading"] .hpv2-availability-snapshot__cta {
    opacity: 0;
}
@keyframes hpv2-snapshot-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}
/* Respecteer prefers-reduced-motion: geen pulserende animatie. */
@media (prefers-reduced-motion: reduce) {
    .hpv2-availability-snapshot[data-state="loading"] .hpv2-availability-snapshot__value {
        animation: none;
    }
}
/* Inerte staat: JS zet bij empty/error de <button> op disabled of de <a> op
   aria-disabled. Visueel gedempt en niet interactief (dekt muis én toetsenbord). */
.hpv2-availability-snapshot:disabled,
.hpv2-availability-snapshot[aria-disabled="true"] {
    pointer-events: none;
    cursor: default;
    transform: none;
    box-shadow: none;
    opacity: 0.85;
}

/* ---- Fallback-CTA bij lege/fout-staat (Fase 2, 2026-06-27) ----
   home-v2.js bouwt dit blok als SIBLING ná het snapshot-element (niet genest,
   want het snapshot is zelf een <button>/<a>). Het maakt de dode-eind-staat
   ("geen vrije slot" / fetch-fout) bruikbaar met een wachtlijst-link + bel-link. */
.hpv2-availability-snapshot__fallback {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}
.hpv2-availability-snapshot__fallback[hidden] {
    display: none;
}
.hpv2-availability-snapshot__fallback-link,
.hpv2-availability-snapshot__fallback-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--hpv2-trans), color var(--hpv2-trans), border-color var(--hpv2-trans);
}
/* Primair: wachtlijst (accent-gevuld). */
.hpv2-availability-snapshot__fallback-link {
    background: var(--hpv2-accent);
    color: #fff;
}
.hpv2-availability-snapshot__fallback-link:hover,
.hpv2-availability-snapshot__fallback-link:focus-visible {
    background: var(--hpv2-accent-strong, var(--hpv2-accent));
    color: #fff;
}
/* Secundair: bel-link (omlijnd/ghost). */
.hpv2-availability-snapshot__fallback-tel {
    border: 1px solid var(--hpv2-accent);
    color: var(--hpv2-accent);
    background: transparent;
}
.hpv2-availability-snapshot__fallback-tel:hover,
.hpv2-availability-snapshot__fallback-tel:focus-visible {
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-accent);
}

/* ---- Per-medewerker modus (snapshot_modus = per_medewerker) ----
   De container is een groep (geen knop): neutraliseer hover/cursor. De
   per-medewerker rijen erin zijn de interactieve knoppen. */
.hpv2-availability-snapshot--multi {
    cursor: default;
    /* Per-medewerker kaart vult de volle breedte van .hpv2-hero__inner i.p.v.
       de compacte 420px-cap van de enkelvoudige snapshot-knop. Zo krijgen de
       medewerker-rijen (avatar+naam · slot-chip · "Boek →") de ruimte om met
       de CTA tot de rechterrand door te lopen. De enkelvoudige variant houdt
       bewust haar 420px-cap (compacte knop). */
    max-width: 100%;
}
.hpv2-availability-snapshot--multi:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--hpv2-line-strong);
}
/* Bij geladen rijen verbergen we de status-/laadregel; de lijst neemt het over. */
.hpv2-availability-snapshot--multi[data-state="loaded"] .hpv2-availability-snapshot__value {
    display: none;
}
.hpv2-snapshot-staff {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* No-JS-uitkomst (Fase 3, 2026-07-27): korte uitleg + werkende route naar de
   volledige afspraakflow. Alleen zichtbaar wanneer JavaScript uitstaat, dus
   bewust sober: dezelfde spacing als de snapshot-rijen en de bestaande
   ghost-knop uit het design system. */
.hpv2-availability-snapshot__noscript {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-width: 420px;
}
.hpv2-availability-snapshot__noscript-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--hpv2-muted);
}

/* Afkappingsregel (Fase 4, 2026-07-27): niet-interactieve telling van de
   medewerkers die buiten de data-cap vallen. Bewust géén knop-uiterlijk — er
   hoort geen quick-book bij — maar wel leesbaar contrast en dezelfde ritmiek
   als de rijen erboven. */
.hpv2-snapshot-staff__item--rest {
    display: flex;
    justify-content: center;
}
.hpv2-snapshot-staff__rest {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    color: var(--hpv2-muted);
}
.hpv2-snapshot-staff__btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--hpv2-tap-min);
    padding: 0.5rem 0.65rem;
    text-align: left;
    border: 1px solid var(--hpv2-line);
    border-radius: var(--hpv2-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--hpv2-trans), background var(--hpv2-trans), transform var(--hpv2-trans);
}
.hpv2-snapshot-staff__btn:hover,
.hpv2-snapshot-staff__btn:focus-visible {
    border-color: var(--hpv2-accent);
    background: var(--hpv2-accent-soft);
    transform: translateY(-1px);
    outline: none;
}
.hpv2-snapshot-staff__btn:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
}
/* Press-state: zelfde subtiele indruk-feedback als .hpv2-btn (consistentie). */
.hpv2-snapshot-staff__btn:active {
    transform: translateY(0) scale(0.98);
}
/* Persoon blijft met een kleinere avatar en naam compact; op brede schermen
   delen persoon, exacte datum/tijd en boekactie ieder hun scanbare kolom. */
.hpv2-snapshot-staff__person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.hpv2-snapshot-staff__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hpv2-line);
    background: var(--hpv2-bg-elev);
}
/* F2 (2026-06-07): initialen-placeholder wanneer de avatar-afbeelding ontbreekt/404't,
   zodat de rij dezelfde 44px-cirkel behoudt i.p.v. een lege plek (symmetrie). */
.hpv2-snapshot-staff__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--hpv2-accent);
    text-transform: uppercase;
    object-fit: initial;
}
.hpv2-snapshot-staff__name {
    min-width: 0;
    font-weight: 600;
    text-align: left;
    line-height: 1.2;
    /* Alleen een werkelijk ononderbroken lange naam mag binnen zijn eigen
       volle persoonrij afbreken; normale voor-/achternamen blijven woorden. */
    overflow-wrap: anywhere;
}
/* Datum + uur in een omkaderde chip zodat het slot beter opvalt. */
.hpv2-snapshot-staff__slot {
    flex: 0 1 auto;
    align-self: center;
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--hpv2-accent);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-bg-elev);
    line-height: 1.2;
    color: var(--hpv2-muted);
    font-variant-numeric: tabular-nums;
}
.hpv2-snapshot-staff__date {
    color: var(--hpv2-muted);
    font-size: 0.8125rem;
}
/* Het uur altijd op een eigen regel onder de datum, nadrukkelijker. */
.hpv2-snapshot-staff__time {
    color: var(--hpv2-fg);
    font-weight: 700;
}
.hpv2-snapshot-staff__cta {
    flex: 0 0 auto;
    color: var(--hpv2-accent);
    font-size: 0.8125rem;
    font-weight: 600;
}
@media (max-width: 719px) {
    /* Een gsm kan persoon + lange datumchip + CTA niet betrouwbaar in drie
       kolommen dragen. De persoon krijgt daarom de volle eerste rij; slot en
       actie delen de tweede. Zo bepaalt intrinsieke datumtekst nooit meer een
       naambreedte van één teken, terwijl de volledige kaart één link blijft. */
    .hpv2-snapshot-staff__btn {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "person person"
            "slot cta";
        gap: 0.65rem 0.75rem;
        padding: 0.65rem;
    }
    .hpv2-snapshot-staff__person {
        grid-area: person;
        width: 100%;
    }
    .hpv2-snapshot-staff__slot {
        grid-area: slot;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }
    .hpv2-snapshot-staff__cta {
        grid-area: cta;
        justify-self: end;
    }
}
@media (max-width: 420px) {
    /* Op de smalste telefoons blijft de tweelaagse gsm-indeling compact. */
    .hpv2-snapshot-staff__btn {
        gap: 0.55rem 0.5rem;
    }
    .hpv2-snapshot-staff__slot {
        padding: 0.35rem 0.45rem;
    }
    .hpv2-snapshot-staff__cta { font-size: 0.75rem; }
}
/* ============================================================
   SNAPSHOT SKELETON (layout-shift-fix)
   - Skeleton-rijen reserveren tijdens de async fetch exact dezelfde ruimte als
     echte medewerker-rijen (zelfde structuur/classes), zodat de hero niet groeit
     en de secties eronder niet verspringen wanneer de echte rijen binnenkomen.
   - In multi-modus tonen we tijdens 'loading' NIET de tekstregel "Beschikbaarheid
     ophalen…": de skeleton-rijen zijn de laadindicatie. Zo is de loading-hoogte
     gelijk aan de loaded-hoogte (label + hint + lijst), zonder een extra
     verdwijnende tekstregel die alsnog een sprong zou geven.
   ============================================================ */
.hpv2-availability-snapshot--multi[data-state="loading"] .hpv2-availability-snapshot__value {
    display: none;
}
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__btn {
    cursor: default;
    pointer-events: none;
}
/* De tekst-/avatar-elementen worden grijze shimmer-balken; de &nbsp;-inhoud
   behoudt de regelhoogte zodat de rijhoogte exact die van een echte rij is. */
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__avatar,
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__name,
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__date,
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__time,
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__cta {
    color: transparent;
    border-color: transparent;
    background: linear-gradient(90deg, var(--hpv2-bg-soft) 25%, var(--hpv2-line) 37%, var(--hpv2-bg-soft) 63%);
    background-size: 400% 100%;
    border-radius: 6px;
    animation: hpv2-skeleton-shimmer 1.4s ease-in-out infinite;
}
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__name { min-width: 4.5rem; }
.hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__cta { min-width: 3rem; }
@keyframes hpv2-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__avatar,
    .hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__name,
    .hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__date,
    .hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__time,
    .hpv2-snapshot-staff__item--skeleton .hpv2-snapshot-staff__cta {
        animation: none;
    }
}
/* Single-snapshot (modus 'eerste'): reserveer 2 regels voor de waarde, zodat de
   wissel "Laden…" → "morgen · 10:15 bij X" (die kan wrappen) niet reflowt.
   Multi-modus uitgesloten: daar is de waarde tijdens loading/loaded verborgen. */
.hpv2-availability-snapshot:not(.hpv2-availability-snapshot--multi) .hpv2-availability-snapshot__value {
    min-height: 2.92rem; /* ~2 regels bij font-size 1.125rem */
}

/* Wanneer er geen slot is OF data niet geladen kon worden: link doof maken */
.hpv2-availability-snapshot[data-state="empty"],
.hpv2-availability-snapshot[data-state="error"] {
    pointer-events: none;
    cursor: default;
}
.hpv2-availability-snapshot[data-state="empty"] .hpv2-availability-snapshot__value,
.hpv2-availability-snapshot[data-state="error"] .hpv2-availability-snapshot__value {
    color: var(--hpv2-muted);
    font-weight: 500;
}
.hpv2-availability-snapshot[data-state="empty"] .hpv2-availability-snapshot__cta,
.hpv2-availability-snapshot[data-state="error"] .hpv2-availability-snapshot__cta {
    display: none;
}

/* ============================================================
   AVAILABILITY GRID WRAPPER
   ============================================================ */
.hpv2-availability {
    background: var(--hpv2-bg-elev);
}
.hpv2-availability #availability-grid {
    min-height: 6rem;
}

/* Override v1 home-redesign.css regel die `#availability-section` (ID-selector
   + !important) een lichte cream-gradient geeft. In v2 willen we de
   thema-token gebruiken zodat het in donker én licht thema klopt. */
body.hpv2 #availability-section.hpv2-availability {
    background: var(--hpv2-bg-elev) !important;
}

/* ============================================================
   QUOTE / TESTIMONIAL BAND
   ============================================================ */
.hpv2-quote {
    background: var(--hpv2-bg);
    text-align: center;
    border-top: 1px solid var(--hpv2-line);
    border-bottom: 1px solid var(--hpv2-line);
}
.hpv2-quote.hpv2-section--fullscreen,
.hpv2-quote.hpv2-section--half-fullscreen-mobile {
    /* Zorgt dat tekst gecentreerd staat binnen het fullscreen-frame */
    align-items: center;
}
/* Persona-UX (Fase 4): de quote is content-licht (één zin). Een volledige
   100svh op desktop gaf een grotendeels leeg scherm en onnodige scrollbelasting.
   Een ruime — maar niet-volledige — hoogte behoudt de premium "adempauze"-band
   (centrering + accentranden) met minder scrollen. Mobiel blijft via
   --half-fullscreen-mobile (60svh) ongewijzigd. Specificiteit (0,2,0) wint van
   de generieke --fullscreen-desktop-only-regel (0,1,0). */
@media (min-width: 720px) {
    .hpv2-quote.hpv2-section--fullscreen-desktop-only {
        min-height: 62svh;
    }
}
.hpv2-quote__mark {
    display: block;
    font-family: var(--hpv2-font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--hpv2-accent);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}
.hpv2-quote__text {
    font-family: var(--hpv2-font-display);
    font-size: clamp(1.375rem, 3.2vw, 1.875rem);
    line-height: 1.4;
    max-width: 36ch;
    margin: 0 auto 1.25rem;
    color: var(--hpv2-fg);
    font-style: italic;
    font-weight: 500;
}
.hpv2-quote__author {
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hpv2-muted);
}

/* ============================================================
   DIENSTEN
   ============================================================ */
.hpv2-services {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 540px) {
    .hpv2-services {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        /* Alle dienstkaarten even hoog, ook over meerdere rijen: 1fr maakt elke
           (impliciete) grid-rij even hoog als de hoogste rij, terwijl de grid-default
           `align-items: stretch` de kaarten die rijhoogte laat vullen. Zo blijven
           kaarten met een lange, wrappende dienstnaam en korte namen gelijk. */
        grid-auto-rows: 1fr;
    }
}
/* Op mobiel / klein scherm (single-column, < 540px) blijft de dienstenlijst kort:
   we tonen maximaal 3 kaarten. De overige diensten blijven bereikbaar via de
   "Alle prijzen bekijken"-knop (prijslijst-modal). Op tablet/desktop verschijnen
   alle aangevinkte diensten. Puur visueel: alle kaarten staan nog in de DOM. */
@media (max-width: 539.98px) {
    .hpv2-services .hpv2-service-card:nth-child(n+4) {
        display: none;
    }
}

.hpv2-service-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem 1.625rem;
    border: 1px solid var(--hpv2-line);
    border-radius: var(--hpv2-radius);
    text-decoration: none;
    color: inherit;
    background: var(--hpv2-bg-elev);
    min-height: var(--hpv2-tap-min);
    transition: border-color var(--hpv2-trans), transform var(--hpv2-trans), box-shadow var(--hpv2-trans);
    position: relative;
}
.hpv2-service-card::after {
    content: "→";
    position: absolute;
    top: 1.5rem;
    right: 1.625rem;
    color: var(--hpv2-accent);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--hpv2-trans), transform var(--hpv2-trans);
}
.hpv2-service-card:hover,
.hpv2-service-card:focus-visible {
    border-color: var(--hpv2-accent);
    transform: translateY(-2px);
    box-shadow: var(--hpv2-shadow-md);
    outline: none;
}
.hpv2-service-card:hover::after,
.hpv2-service-card:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}
.hpv2-service-card__name {
    font-family: var(--hpv2-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hpv2-fg);
}
/* Prijs-regel (tweede/laatste kind) naar de onderkant duwen. Bij uitgerekte,
   gelijk-hoge kaarten blijft de prijs zo netjes onderaan uitgelijnd i.p.v. dat
   er lege ruimte onder de prijs ontstaat. */
.hpv2-service-card > span:last-child {
    margin-top: auto;
}
.hpv2-service-card__price {
    color: var(--hpv2-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
    font-size: 1.0625rem;
}
.hpv2-service-card__price-prefix {
    /* 13px (was 12px) — "vanaf"-label naast de prijs blijft secundair maar is
       op kleine telefoons en voor oudere ogen comfortabeler leesbaar. */
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hpv2-muted);
    margin-right: 0.375rem;
    font-weight: 500;
}

/* ============================================================
   TRUST BAND
   ============================================================ */
.hpv2-trust {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .hpv2-trust {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}
.hpv2-trust__item {
    text-align: left;
    padding-left: 1.25rem;
    border-left: 2px solid var(--hpv2-accent);
}
.hpv2-trust__item h3 {
    font-family: var(--hpv2-font-display);
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--hpv2-fg);
}
.hpv2-trust__item p {
    margin: 0;
    color: var(--hpv2-fg-soft);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ============================================================
   TEAM STRIP
   ============================================================ */
.hpv2-team {
    background: var(--hpv2-bg-elev);
}
.hpv2-team__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: flex-start;
    justify-content: center;
    margin-top: 1.5rem;
}
.hpv2-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 140px;
    text-decoration: none;
    color: inherit;
    /* Hover-lift (zie :hover/:focus-visible hieronder) — zelfde gedrag als de
       service-kaarten zodat alle klikbare kaarten consistent reageren. */
    transition: transform var(--hpv2-trans);
}
.hpv2-team-card__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--hpv2-line-strong);
    background: var(--hpv2-bg-soft);
    transition: border-color var(--hpv2-trans), transform var(--hpv2-trans);
    margin-bottom: 0.75rem;
}
.hpv2-team-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hpv2-team-card:hover .hpv2-team-card__avatar,
.hpv2-team-card:focus-visible .hpv2-team-card__avatar {
    border-color: var(--hpv2-accent);
    transform: scale(1.04);
}
/* Consistente kaart-lift: team-kaarten gedragen zich als service-kaarten. */
.hpv2-team-card:hover,
.hpv2-team-card:focus-visible {
    transform: translateY(-2px);
}
.hpv2-team-card__name {
    font-family: var(--hpv2-font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--hpv2-fg);
    line-height: 1.2;
}

/* ============================================================
   CONTACT + MAP
   ============================================================ */
.hpv2-contact-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .hpv2-contact-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 3rem;
    }
}

.hpv2-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.hpv2-contact-list li {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--hpv2-line);
    font-size: 0.9375rem;
    color: var(--hpv2-fg-soft);
}
.hpv2-contact-list li:last-child { border-bottom: 0; }
.hpv2-contact-list strong {
    display: inline-block;
    min-width: 80px;
    color: var(--hpv2-muted);
    font-weight: 500;
    /* 13px — contactlabels (Adres/Telefoon/E-mail) blijven secundair maar
       worden niet langer op de leesbaarheidsdrempel gepind. */
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.hpv2-contact-list a {
    color: var(--hpv2-fg);
    text-decoration: none;
    border-bottom: 1px solid var(--hpv2-line-strong);
    transition: color var(--hpv2-trans), border-color var(--hpv2-trans);
}
.hpv2-contact-list a:hover,
.hpv2-contact-list a:focus-visible {
    color: var(--hpv2-accent);
    border-bottom-color: var(--hpv2-accent);
    outline: none;
}

.hpv2-contact-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}
.hpv2-contact-actions .hpv2-btn {
    justify-content: flex-start;
}

/* Contact + kaart: gestapeld op mobiel, 2 kolommen naast elkaar op
   grotere schermen. Vervangt de oude full-width-onder-elkaar opzet. */
.hpv2-contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 960px) {
    .hpv2-contact-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}
/* De contact-grid bevat nu alleen nog de info/knoppen-kolom (de kaart
   staat ernaast in de layout) → forceer één kolom, ook in de
   fullscreen-contactvariant die voorheen 2 kolommen zette. */
.hpv2-contact-grid,
.hpv2-contact-fullscreen .hpv2-contact-grid {
    grid-template-columns: 1fr !important;
    min-height: 0;
}
.hpv2-contact-layout .hpv2-map-band {
    margin-top: 0;
}

/* Locatieband: min-height i.p.v. alleen aspect-ratio zodat de kaart op
   elke viewport groot genoeg is. */
.hpv2-map-band {
    margin-top: 2.5rem;
}
.hpv2-map-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    margin-bottom: 0.75rem;
    color: var(--hpv2-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.hpv2-map-open:hover,
.hpv2-map-open:focus-visible {
    text-decoration: underline;
}
.hpv2-map-open:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
    border-radius: var(--hpv2-radius);
}
.hpv2-map-frame {
    position: relative;
    width: 100%;
    /* Groot genoeg op alle doelviewports; clamp voorkomt mini-kaart op
       desktop én te hoge kaart op kleine schermen. */
    min-height: clamp(300px, 55svh, 620px);
    border-radius: var(--hpv2-radius-lg);
    overflow: hidden;
    box-shadow: var(--hpv2-shadow-md);
}
.hpv2-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.2) contrast(0.95);
}
/* Fallback vult de kaartzone; verdwijnt zodra de iframe 'is-loaded' meldt. */
.hpv2-map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg-soft);
}
.hpv2-map-frame.is-loaded .hpv2-map-fallback {
    display: none;
}
.hpv2-map-fallback__title {
    font-weight: 600;
    color: var(--hpv2-fg);
    margin: 0;
}
.hpv2-map-fallback__text {
    margin: 0;
    font-size: 0.9375rem;
}
.hpv2-map-fallback__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--hpv2-accent);
    font-weight: 600;
    text-decoration: none;
}
.hpv2-map-fallback__link:hover,
.hpv2-map-fallback__link:focus-visible {
    text-decoration: underline;
}

/* ============================================================
   FADE-UP MICRO-ANIMATIES
   ============================================================ */
.hpv2-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hpv2-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero-elementen gebruiken dezelfde eenmalige observerstate als fade-up. De
   42px-reis en subtiele schaal geven meer diepte, terwijl uitsluitend compositor-
   eigenschappen bewegen en de mobiele layout daardoor ongemoeid blijft. */
.hpv2-fly-left,
.hpv2-fly-right {
    opacity: 0;
    transition: opacity 920ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
    will-change: transform, opacity;
}
.hpv2-fly-left {
    transform: translate3d(-42px, 0, 0) scale(0.975);
}
.hpv2-fly-right {
    transform: translate3d(42px, 0, 0) scale(0.975);
}
.hpv2-fly-left.is-visible,
.hpv2-fly-right.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
.hpv2-fly-left.is-reveal-complete,
.hpv2-fly-right.is-reveal-complete {
    /* Behoud geen compositorlaag nadat de eenmalige entree is afgerond. */
    will-change: auto;
}
/* Herstel na de entree de bestaande snelle kaartinteractie, die anders door de
   langere revealtransition en haar eindtransform zou worden overschreven. */
.hpv2-availability-snapshot.hpv2-fly-right.is-reveal-complete {
    transition: border-color var(--hpv2-trans), background var(--hpv2-trans),
                transform var(--hpv2-trans), box-shadow var(--hpv2-trans);
}
.hpv2-availability-snapshot.hpv2-fly-right.is-visible.is-reveal-complete:hover,
.hpv2-availability-snapshot.hpv2-fly-right.is-visible.is-reveal-complete:focus-visible {
    transform: translate3d(0, -1px, 0);
}

/* Gestaffelde animatie voor reeksen */
:is(.hpv2-fade-up, .hpv2-fly-left, .hpv2-fly-right)[data-fade-delay="1"] { transition-delay: 80ms; }
:is(.hpv2-fade-up, .hpv2-fly-left, .hpv2-fly-right)[data-fade-delay="2"] { transition-delay: 160ms; }
:is(.hpv2-fade-up, .hpv2-fly-left, .hpv2-fly-right)[data-fade-delay="3"] { transition-delay: 240ms; }
:is(.hpv2-fade-up, .hpv2-fly-left, .hpv2-fly-right)[data-fade-delay="4"] { transition-delay: 320ms; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
/* Vloeiende in-page-navigatie (skip-link, sectie-ankers, anker-links) — alleen
   wanneer de bezoeker GEEN verminderde-beweging-voorkeur heeft. Scoping via
   :has(body.hpv2) zodat enkel de v2-homepage dit gedrag krijgt; browsers
   zonder :has-ondersteuning negeren de regel (instant scroll = huidig gedrag). */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.hpv2) {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hpv2 *,
    body.hpv2 *::before,
    body.hpv2 *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    body.hpv2 :is(.hpv2-fade-up, .hpv2-fly-left, .hpv2-fly-right) {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .hpv2-hero__scroll-cue,
    .hpv2-hero__live-dot {
        animation: none;
    }
    /* Slidezoom volledig uit: de hero-achtergrond blijft statisch op scale(1).
       De generieke 0.01ms-regel hierboven zou een actieve slide anders direct
       naar de ingezoomde eindstand laten springen. */
    .hpv2-hero__bg-slide,
    .hpv2-hero__bg-slide.is-active,
    .hpv2-hero__bg-slide.is-leaving {
        animation: none;
        transform: none;
    }
    /* Accentlijn onder sectietitels: direct volledig zichtbaar, geen groei. */
    .hpv2-section-title::after {
        transform: scaleX(1);
        transition: none;
    }
    /* FAQ: direct open/dicht — de generieke regel hierboven dekt het
       ::details-content-pseudo-element niet, dus expliciet uitschakelen. */
    .hpv2-faq__item::details-content {
        transition: none;
    }
}

@media (forced-colors: active) {
    .hpv2-btn,
    .hpv2-service-card,
    .hpv2-availability-snapshot {
        border: 2px solid;
    }
}

/* ============================================================
   FOOTER (v1 .hr-footer) en MODALS (v1 .contact-modal) — v2-thema
   - Scoped onder `body.hpv2` zodat v1 ongeraakt blijft.
   - Gebruikt --hpv2-* tokens zodat licht/donker thema automatisch klopt.
   ============================================================ */
body.hpv2 .hr-footer {
    background: var(--hpv2-bg-elev) !important;
    color: var(--hpv2-fg-soft) !important;
    border-top: 1px solid var(--hpv2-line) !important;
    background-image: none !important;
}
body.hpv2 .hr-footer * {
    border-color: var(--hpv2-line) !important;
}
body.hpv2 .hr-footer a {
    color: var(--hpv2-fg) !important;
    text-decoration-color: var(--hpv2-line-strong);
}
body.hpv2 .hr-footer a:hover,
body.hpv2 .hr-footer a:focus-visible {
    color: var(--hpv2-accent) !important;
}
body.hpv2 .hr-footer [class*="icon"],
body.hpv2 .hr-footer i,
body.hpv2 .hr-footer svg {
    color: var(--hpv2-accent) !important;
}
body.hpv2 .hr-footer h1,
body.hpv2 .hr-footer h2,
body.hpv2 .hr-footer h3,
body.hpv2 .hr-footer h4,
body.hpv2 .hr-footer .hr-footer__brand,
body.hpv2 .hr-footer strong {
    color: var(--hpv2-fg) !important;
}
body.hpv2 .hr-footer small,
body.hpv2 .hr-footer .text-muted {
    color: var(--hpv2-muted) !important;
}

/* Modals — Bootstrap default is licht. Hier overschreven naar v2-tokens. */
body.hpv2 .contact-modal .modal-content {
    background: var(--hpv2-bg-elev) !important;
    color: var(--hpv2-fg) !important;
    border: 1px solid var(--hpv2-line-strong) !important;
    border-radius: var(--hpv2-radius-lg) !important;
    box-shadow: var(--hpv2-shadow-md) !important;
}
body.hpv2 .contact-modal .modal-header {
    border-bottom: 1px solid var(--hpv2-line) !important;
}
body.hpv2 .contact-modal .modal-footer {
    border-top: 1px solid var(--hpv2-line) !important;
}
body.hpv2 .contact-modal .modal-title,
body.hpv2 .contact-modal .modal-body strong {
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .contact-eyebrow {
    color: var(--hpv2-accent) !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* 13px — consistent met andere eyebrow/label tweaks voor leesbaarheid. */
    font-size: 0.8125rem;
    font-weight: 600;
}
body.hpv2 .contact-modal .text-muted,
body.hpv2 .contact-modal .form-text {
    color: var(--hpv2-muted) !important;
}
body.hpv2 .contact-modal .form-label {
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .form-control,
body.hpv2 .contact-modal .form-select {
    background: var(--hpv2-bg) !important;
    color: var(--hpv2-fg) !important;
    border: 1px solid var(--hpv2-line-strong) !important;
    border-radius: var(--hpv2-radius) !important;
}
body.hpv2 .contact-modal .form-control:focus,
body.hpv2 .contact-modal .form-select:focus {
    border-color: var(--hpv2-accent) !important;
    box-shadow: 0 0 0 3px var(--hpv2-accent-soft) !important;
    outline: none !important;
}
body.hpv2 .contact-modal .form-control::placeholder {
    color: var(--hpv2-muted) !important;
    opacity: 0.7;
}
body.hpv2 .contact-modal .form-check-input {
    background-color: var(--hpv2-bg) !important;
    border-color: var(--hpv2-line-strong) !important;
}
body.hpv2 .contact-modal .form-check-input:checked {
    background-color: var(--hpv2-accent) !important;
    border-color: var(--hpv2-accent) !important;
}
body.hpv2 .contact-modal .form-check-label {
    color: var(--hpv2-fg-soft) !important;
}

/* Modal-knoppen */
body.hpv2 .contact-modal .btn-primary {
    background: var(--hpv2-accent) !important;
    border-color: var(--hpv2-accent) !important;
    color: var(--hpv2-btn-fg) !important;
}
body.hpv2 .contact-modal .btn-primary:hover,
body.hpv2 .contact-modal .btn-primary:focus-visible {
    background: var(--hpv2-accent-strong) !important;
    border-color: var(--hpv2-accent-strong) !important;
    box-shadow: var(--hpv2-shadow-glow) !important;
}
body.hpv2 .contact-modal .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--hpv2-line-strong) !important;
    color: var(--hpv2-fg-soft) !important;
}
body.hpv2 .contact-modal .btn-outline-secondary:hover,
body.hpv2 .contact-modal .btn-outline-secondary:focus-visible {
    background: var(--hpv2-bg-soft) !important;
    border-color: var(--hpv2-accent) !important;
    color: var(--hpv2-accent) !important;
}
body.hpv2 .contact-modal .btn-link {
    color: var(--hpv2-accent) !important;
    text-decoration-color: var(--hpv2-line-strong);
}
body.hpv2 .contact-modal .btn-link:hover,
body.hpv2 .contact-modal .btn-link:focus-visible {
    color: var(--hpv2-accent-strong) !important;
    text-decoration-color: var(--hpv2-accent) !important;
}

/* ============================================================
   Last-minute datum-chips (#lastMinuteDateGrid)
   ------------------------------------------------------------
   De chip-styling stond alleen in de legacy home-redesign.css
   (gescoped op body.home-redesign), die v2 bewust niet laadt →
   op v2 verscheen het raster als kale verticale tekst ("di26 mei").
   Hier geport naar het v2-thema via de --hpv2-tokens, zodat het
   in zowel het donkere als het lichte thema correct meekleurt.
   Markup/JS: home-modals.php:143 + home-v2-contact-actions.js.
   ============================================================ */

/* Container: tik-vriendelijk raster — 2 kolommen mobiel, 3 vanaf 576px. */
body.hpv2 .contact-modal .lastminute-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 4px;
}
@media (min-width: 576px) {
    body.hpv2 .contact-modal .lastminute-date-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Loader-placeholder beslaat de volle breedte van het raster. */
body.hpv2 .contact-modal .lastminute-date-grid__loading {
    grid-column: 1 / -1;
    padding: 8px 4px;
    color: var(--hpv2-muted) !important;
}

body.hpv2 .contact-modal .lastminute-date-chip-wrap {
    position: relative;
}

/* De checkbox zelf is visueel verborgen (btn-check); de label is de chip. */
body.hpv2 .contact-modal .lastminute-date-input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

/* Chip: dagnaam (klein/gedempt) bóven datum (groot/vet), gestapeld. */
body.hpv2 .contact-modal .lastminute-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 8px 6px;
    border: 1.5px solid var(--hpv2-line-strong);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-bg);
    color: var(--hpv2-fg);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--hpv2-trans), background var(--hpv2-trans), transform 80ms ease;
}
body.hpv2 .contact-modal .lastminute-date-chip:hover {
    border-color: var(--hpv2-accent);
}
body.hpv2 .contact-modal .lastminute-date-chip:active {
    transform: scale(0.98);
}
body.hpv2 .contact-modal .lastminute-date-chip__day {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--hpv2-muted);
}
body.hpv2 .contact-modal .lastminute-date-chip__date {
    font-size: 0.92rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Geselecteerd: goud gevuld, leesbare knop-voorgrond (token zorgt voor contrast). */
body.hpv2 .contact-modal .lastminute-date-input:checked + .lastminute-date-chip {
    background: var(--hpv2-accent);
    border-color: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
}
body.hpv2 .contact-modal .lastminute-date-input:checked + .lastminute-date-chip .lastminute-date-chip__day {
    color: var(--hpv2-btn-fg);
    opacity: 0.85;
}

/* Zichtbare focus voor toetsenbordnavigatie (WCAG). */
body.hpv2 .contact-modal .lastminute-date-input:focus-visible + .lastminute-date-chip {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
}

/* Close-X */
body.hpv2 .contact-modal .btn-close {
    filter: invert(0);
}
html[data-theme="dark"] body.hpv2 .contact-modal .btn-close,
body.hpv2 .contact-modal .btn-close[data-theme-dark] {
    filter: invert(1) hue-rotate(180deg);
}

/* De team-modal-header is in elk thema donker; de standaard donkere
   Bootstrap btn-close valt daar weg. Forceer een wit icoon met een
   zichtbare ronde tap-zone, ongeacht thema. Overschrijft de generieke
   .contact-modal .btn-close-regel hierboven (hogere specificiteit via #id). */
body.hpv2 #teamModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
    box-sizing: border-box;
    width: var(--hpv2-tap-min);
    height: var(--hpv2-tap-min);
    padding: calc((var(--hpv2-tap-min) - 16px) / 2);
    background-size: 16px 16px;
    background-position: center center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
}
body.hpv2 #teamModal .btn-close:hover,
body.hpv2 #teamModal .btn-close:focus-visible {
    opacity: 1;
    background-color: var(--hpv2-accent-soft);
}
body.hpv2 #teamModal .btn-close:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Alerts in modals */
body.hpv2 .contact-modal .alert-warning {
    background: var(--hpv2-accent-soft) !important;
    border-color: var(--hpv2-accent) !important;
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .alert-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .alert-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
    color: var(--hpv2-fg) !important;
}

/* Team modal-specifiek */
body.hpv2 .contact-modal .team-card {
    background: var(--hpv2-bg-soft) !important;
    border: 1px solid var(--hpv2-line) !important;
    border-radius: var(--hpv2-radius) !important;
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .team-name {
    color: var(--hpv2-fg) !important;
}
body.hpv2 .contact-modal .team-bio {
    color: var(--hpv2-fg-soft) !important;
}

/* ============================================================
   NAVBAR — alleen zichtbaar in hero-sectie (v2-only)
   - `body.hpv2 .hr-navbar` blijft default zichtbaar (anti-flash).
   - Wanneer JS detecteert dat de hero buiten viewport is, krijgt body
     de class `hpv2-nav-hidden` en wordt de navbar uitgefadet.
   - prefers-reduced-motion: directe hide ipv fade.
   ============================================================ */
body.hpv2 .hr-navbar {
    transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 0s;
    will-change: opacity, transform;
}
body.hpv2.hpv2-nav-hidden .hr-navbar {
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    body.hpv2 .hr-navbar,
    body.hpv2.hpv2-nav-hidden .hr-navbar {
        transition: none;
    }
}

/* ============================================================
   NAVBAR — thema-reactieve kleuren (v2)
   De gedeelde navbar (.hr-navbar; basis-styling in home-redesign.css) had
   een vaste LICHTE glas-look in álle thema's. Op v2 volgt hij nu het thema:
   een donkere glas-balk in dark mode, ongewijzigd in light/system-light.

   Mechaniek: navbar-scoped custom properties (--hrnav-*) met de bestaande
   LICHTE waarden als var()-fallback. In light/system-light blijven de vars
   leeg → fallback = de oorspronkelijke look (byte-identiek, geen regressie).
   De dark-triggers onderaan (expliciete keuze + systeem-dark) vullen de
   donkere waarden in. Dit spiegelt exact het --hpv2-*-tokenmodel hierboven.
   ============================================================ */
body.hpv2 .hr-navbar {
    /* var()-fallback = de originele lichte glas-balk uit home-redesign.css */
    background: var(--hrnav-bg, rgba(248, 246, 242, 0.72));
    border-color: var(--hrnav-border, var(--hr-border-gold));
    box-shadow: var(--hrnav-shadow,
        0 10px 30px -5px rgba(45, 55, 72, 0.1),
        0 4px 12px -2px rgba(74, 144, 217, 0.08));
}
/* Logo: in light een donkere silhouet (filter), in dark het natuurlijke goud. */
body.hpv2 .hr-navbar__logo {
    filter: var(--hrnav-logo-filter, brightness(0) saturate(100%) invert(13%) sepia(17%) saturate(1100%) hue-rotate(178deg) brightness(96%) contrast(92%));
}
/* Merknaam + ondertitel: donker op licht, licht op donker. */
body.hpv2 .hr-navbar__logo-text { color: var(--hrnav-fg, var(--hr-charcoal)); }
body.hpv2 .hr-navbar__logo-sub  { color: var(--hrnav-muted, var(--hr-muted)); }
/* Taalkeuze-pill + knoppen volgen het thema mee. */
body.hpv2 .hr-lang-form {
    background: var(--hrnav-lang-bg, var(--hr-white));
    border-color: var(--hrnav-lang-border, var(--hr-border));
}
body.hpv2 .hr-lang-btn { color: var(--hrnav-lang-fg, var(--hr-muted)); }
body.hpv2 .hr-lang-btn:hover {
    color: var(--hrnav-lang-hover-fg, var(--hr-charcoal));
    background: var(--hrnav-lang-hover-bg, var(--hr-gold-xlight));
}
body.hpv2 .hr-lang-btn.is-active { color: var(--hrnav-lang-active, var(--hr-gold-dark)); }

/* Snelmenu-knop volgt het navbar-thema — hergebruikt exact de --hrnav-lang-*
   tokens van de taalkeuze-pill, dus light/dark werkt automatisch (de
   dark-triggers verderop vullen de waarden; in light geldt de var()-fallback
   = de oorspronkelijke lichte look uit home-redesign.css). */
body.hpv2 .hr-navbar__menu-toggle {
    background: var(--hrnav-lang-bg, var(--hr-white));
    border-color: var(--hrnav-lang-border, var(--hr-border));
    color: var(--hrnav-lang-fg, var(--hr-muted));
}
body.hpv2 .hr-navbar__menu-toggle:hover,
body.hpv2 .hr-navbar__menu-toggle:focus-visible,
body.hpv2 .hr-navbar__menu-toggle[aria-expanded="true"] {
    color: var(--hrnav-lang-hover-fg, var(--hr-charcoal));
    background: var(--hrnav-lang-hover-bg, var(--hr-gold-xlight));
    border-color: var(--hrnav-lang-active, var(--hr-border-gold));
}

/* Bellen blijft goed bereikbaar maar gebruikt een neutrale secundaire stijl;
   de gevulde hero-CTA behoudt zo onmiskenbaar de eerste prioriteit. */
body.hpv2 .hr-navbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    min-height: var(--hpv2-tap-min, 48px);
    border-radius: 999px;
    border: 1px solid var(--hpv2-line-strong);
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--hpv2-trans), color var(--hpv2-trans), border-color var(--hpv2-trans);
}
body.hpv2 .hr-navbar__phone:hover,
body.hpv2 .hr-navbar__phone:focus-visible {
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-accent);
    border-color: var(--hpv2-accent);
    outline: none;
}
body.hpv2 .hr-navbar__phone i,
body.hpv2 .hr-navbar__phone svg { width: 18px; height: 18px; }
/* Zeer smalle schermen: label verbergen, icoon blijft als compacte bel-knop. */
@media (max-width: 480px) {
    body.hpv2 .hr-navbar__phone-label { display: none; }
    body.hpv2 .hr-navbar__phone { padding: 0.5rem; gap: 0; min-width: 44px; }
}

/* Mobiele navbar: de visuele iconen/labels blijven compact, maar hun volledige
   interactieve dozen zijn minstens 44×44px. Dit corrigeert de gemeten 19–32px
   hoge taal-, merk- en menudoelen zonder de desktopnavbar te vergroten. */
@media (max-width: 575px) {
    body.hpv2 .hr-navbar__brand,
    body.hpv2 .hr-lang-btn,
    body.hpv2 .hr-navbar__menu-toggle,
    body.hpv2 .hr-navbar__phone {
        min-width: 44px;
        min-height: 44px;
    }

    body.hpv2 .hr-navbar__brand,
    body.hpv2 .hr-lang-btn,
    body.hpv2 .hr-navbar__menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.hpv2 .hr-lang-form {
        padding: 0;
        gap: 2px;
    }
}

/* Dropdown-paneel via de thema-bewuste --hpv2-*-tokens: donker glas in dark,
   de lichte kaart in light — zónder dark-duplicatie (de tokens flippen zelf
   met het thema). Zo springt het snelmenu niet uit het v2-thema, net als de
   prijslijst-modal verderop. */
body.hpv2 .hr-navbar__menu-list {
    background: var(--hpv2-bg-elev);
    border-color: var(--hpv2-line);
    box-shadow: var(--hpv2-shadow-md);
}
body.hpv2 .hr-navbar__menu-list .dropdown-header { color: var(--hpv2-muted); }
body.hpv2 .hr-navbar__menu-list .dropdown-item { color: var(--hpv2-fg); }
body.hpv2 .hr-navbar__menu-list .dropdown-item:hover,
body.hpv2 .hr-navbar__menu-list .dropdown-item:focus {
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-fg);
}
body.hpv2 .hr-navbar__menu-list .dropdown-item i,
body.hpv2 .hr-navbar__menu-list .dropdown-item svg { color: var(--hpv2-accent); }

/* Primaire boekings-CTA in het menu volgt op v2 het gouden accent (i.p.v. het
   blauwe legacy --hr-gold) zodat hij harmonieert met de gouden iconen en de
   rest van v2 — in light én dark (de accent-/btn-fg-tokens flippen mee). */
body.hpv2 .hr-navbar__menu-list .dropdown-item.hr-navbar__menu-cta {
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
}
body.hpv2 .hr-navbar__menu-list .dropdown-item.hr-navbar__menu-cta:hover,
body.hpv2 .hr-navbar__menu-list .dropdown-item.hr-navbar__menu-cta:focus {
    background: var(--hpv2-accent-strong);
    color: var(--hpv2-btn-fg);
}
body.hpv2 .hr-navbar__menu-list .dropdown-item.hr-navbar__menu-cta i,
body.hpv2 .hr-navbar__menu-list .dropdown-item.hr-navbar__menu-cta svg { color: var(--hpv2-btn-fg); }

/* Scheidingslijnen in het menu themabewust (anders Bootstrap-default grijs). */
body.hpv2 .hr-navbar__menu-list .dropdown-divider { border-top-color: var(--hpv2-line); }

/* Thema-wissel-rij in het snelmenu: label links, de (door home-v2.js
   ingevoegde) icoon-toggle rechts. Alleen v2 rendert deze rij; home-v2.css
   laadt sowieso enkel op v2. */
.hr-navbar__menu-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.65rem;
}
.hr-navbar__menu-theme-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--hpv2-fg);
}
/* De toggle binnen het menu: compacte, statische icoon-knop (niet floating);
   overruled de fixed-positie + maat uit het floating-blok verderop. */
.hr-navbar__menu-theme .hpv2-theme-toggle {
    position: static;
    width: 38px;
    height: 38px;
    box-shadow: none;
    background: var(--hpv2-bg-soft);
    border-color: var(--hpv2-line-strong);
    color: var(--hpv2-fg);
}
.hr-navbar__menu-theme .hpv2-theme-toggle:hover,
.hr-navbar__menu-theme .hpv2-theme-toggle:focus-visible {
    transform: none;
    background: var(--hpv2-accent-soft);
    border-color: var(--hpv2-accent);
    color: var(--hpv2-accent);
}
.hr-navbar__menu-theme .hpv2-theme-toggle__icon {
    width: 18px;
    height: 18px;
}

/* Dark-waarden bij een EXPLICIETE dark-keuze. Identiek herhaald voor
   systeem-dark hieronder (zelfde conventie als de --hpv2-* light-duplicatie
   in dit bestand: één set waarden per trigger-context). */
html[data-theme="dark"] {
    --hrnav-bg: rgba(22, 19, 16, 0.82);          /* warme donkere glas-balk (~--hpv2-bg-elev) */
    --hrnav-border: var(--hpv2-line-strong);     /* subtiele lichte hairline */
    --hrnav-shadow: var(--hpv2-shadow-md);
    --hrnav-logo-filter: none;                   /* natuurlijk goud logo op donker */
    --hrnav-fg: var(--hpv2-fg);
    --hrnav-muted: var(--hpv2-muted);
    --hrnav-lang-bg: rgba(245, 241, 234, 0.08);
    --hrnav-lang-border: var(--hpv2-line);
    --hrnav-lang-fg: var(--hpv2-fg-soft);
    --hrnav-lang-hover-fg: var(--hpv2-fg);
    --hrnav-lang-hover-bg: var(--hpv2-accent-soft);
    --hrnav-lang-active: var(--hpv2-accent);     /* goud accent i.p.v. blauw */
}
/* Systeem-dark zónder expliciete keuze (data-theme="system" + OS = dark). */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --hrnav-bg: rgba(22, 19, 16, 0.82);
        --hrnav-border: var(--hpv2-line-strong);
        --hrnav-shadow: var(--hpv2-shadow-md);
        --hrnav-logo-filter: none;
        --hrnav-fg: var(--hpv2-fg);
        --hrnav-muted: var(--hpv2-muted);
        --hrnav-lang-bg: rgba(245, 241, 234, 0.08);
        --hrnav-lang-border: var(--hpv2-line);
        --hrnav-lang-fg: var(--hpv2-fg-soft);
        --hrnav-lang-hover-fg: var(--hpv2-fg);
        --hrnav-lang-hover-bg: var(--hpv2-accent-soft);
        --hrnav-lang-active: var(--hpv2-accent);
    }
}

/* ============================================================
   THEME TOGGLE — geplaatst in navbar (door JS na init), fallback
   floating rechtsboven wanneer navbar-injectie niet lukt.
   ============================================================ */
.hpv2-theme-toggle {
    position: fixed;
    top: clamp(0.75rem, 2vw, 1.25rem);
    right: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 1040;                  /* onder Bootstrap-modals (1050+) */
    width: var(--hpv2-tap-min);
    height: var(--hpv2-tap-min);
    border-radius: 50%;
    border: 1px solid var(--hpv2-line-strong);
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hpv2-shadow-sm);
    transition: background var(--hpv2-trans), border-color var(--hpv2-trans),
                color var(--hpv2-trans), transform var(--hpv2-trans);
    padding: 0;
}
.hpv2-theme-toggle:hover,
.hpv2-theme-toggle:focus-visible {
    border-color: var(--hpv2-accent);
    color: var(--hpv2-accent);
    transform: rotate(15deg);
    outline: none;
}
.hpv2-theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--hpv2-accent-soft);
}
.hpv2-theme-toggle__icon {
    width: 22px;
    height: 22px;
    pointer-events: none;
}
/* Toon zon op donker thema (om naar licht te schakelen),
   maan op licht thema. Default = dark = zon zichtbaar. */
.hpv2-theme-toggle__icon--sun { display: inline-block; }
.hpv2-theme-toggle__icon--moon { display: none; }
html[data-theme="light"] .hpv2-theme-toggle__icon--sun { display: none; }
html[data-theme="light"] .hpv2-theme-toggle__icon--moon { display: inline-block; }
@media (prefers-color-scheme: light) {
    html[data-theme="system"] .hpv2-theme-toggle__icon--sun { display: none; }
    html[data-theme="system"] .hpv2-theme-toggle__icon--moon { display: inline-block; }
}

/* Compacter op heel kleine schermen zodat toggle de hero niet domineert */
@media (max-width: 380px) {
    .hpv2-theme-toggle {
        width: 44px;
        height: 44px;
    }
    .hpv2-theme-toggle__icon {
        width: 18px;
        height: 18px;
    }
}

/* Wanneer JS de toggle in de navbar heeft geïnjecteerd: niet meer floating,
   inline naast taalkeuze en CTA, kleinere maat, geen rotate-hover die de
   navbar-layout zou verstoren. */
body.hpv2-theme-toggle--in-nav .hpv2-theme-toggle {
    position: static;
    width: 40px;
    height: 40px;
    box-shadow: none;
    background: transparent;
    border-color: var(--hpv2-line-strong);
}
body.hpv2-theme-toggle--in-nav .hpv2-theme-toggle:hover,
body.hpv2-theme-toggle--in-nav .hpv2-theme-toggle:focus-visible {
    transform: none;
    background: var(--hpv2-bg-soft);
    border-color: var(--hpv2-accent);
    color: var(--hpv2-accent);
}
body.hpv2-theme-toggle--in-nav .hpv2-theme-toggle__icon {
    width: 18px;
    height: 18px;
}

/* ============================================================
   DIENSTEN-SECTIE — secundaire CTA naar prijslijst-modal
   ============================================================ */
/* Centreert de "Alle prijzen bekijken" knop onder de service-cards.
   Gebruikt de bestaande --hpv2-btn(--ghost) tokens — geen eigen kleuren. */
.hpv2-services-actions {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.25rem, 4vw, 2rem);
}

/* ============================================================
   PRIJSLIJST-MODAL — v2 thema-scoping
   ============================================================
   De gedeelde modal (`shared/includes/price-list-modal.php`) heeft eigen
   inline styles voor de afspraak-context (donker thema). Hieronder overrulen
   we die alleen wanneer de modal geopend wordt vanuit de homepage v2,
   zodat het v1-thema niet geraakt wordt. */
body.hpv2 #priceListModal .modal-content {
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg);
    border: 1px solid var(--hpv2-line);
}
body.hpv2 #priceListModal .modal-header {
    border-bottom: 1px solid var(--hpv2-line);
}
body.hpv2 #priceListModal .modal-title {
    color: var(--hpv2-fg);
    font-family: var(--hpv2-font-display);
}
body.hpv2 #priceListModal .price-list-eyebrow {
    color: var(--hpv2-accent);
    opacity: 1;
}
body.hpv2 #priceListModal .text-muted,
body.hpv2 #priceListModal .calc-total-disclaimer {
    color: var(--hpv2-muted) !important;
}
/* btn-close icoon: standaard Bootstrap-SVG met fill='#000'.
   - Licht thema: geen filter → zwarte X op lichte achtergrond = goed zichtbaar.
   - Donker thema: invert → witte X op donkere achtergrond = goed zichtbaar.
   v2 zet het thema via `<html data-theme="dark|light|system">`.
   `system` valt terug op `prefers-color-scheme`.

   Tap-target: Bootstrap default = 16×16 (te klein voor mobile). We vergroten
   het klikgebied via box-sizing + padding zodat het visuele kruisje gelijk
   blijft maar de hit-area minimaal de WCAG-aanbevolen 44×44px haalt.
   `--hpv2-tap-min` (48px) is al gedefinieerd in v2-tokens. */
body.hpv2 #priceListModal .btn-close {
    filter: none;
    opacity: 0.85;
    /* Bootstrap zet btn-close al op `padding: 0.25em`; we overrulen naar een
       expliciete vierkante tap-zone met de bestaande 16×16 icoon-grootte. */
    box-sizing: border-box;
    width: var(--hpv2-tap-min);
    height: var(--hpv2-tap-min);
    padding: calc((var(--hpv2-tap-min) - 16px) / 2);
    background-size: 16px 16px;
    background-position: center center;
    border-radius: 50%;
}
body.hpv2 #priceListModal .btn-close:hover,
body.hpv2 #priceListModal .btn-close:focus-visible {
    opacity: 1;
    background-color: var(--hpv2-accent-soft);
}
body.hpv2 #priceListModal .btn-close:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
    box-shadow: none;
}
/* Expliciet donker thema. */
html[data-theme="dark"] body.hpv2 #priceListModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
/* System-theme + OS-voorkeur donker. */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] body.hpv2 #priceListModal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}
body.hpv2 #priceListModal .alert {
    background: var(--hpv2-accent-soft) !important;
    border-left-color: var(--hpv2-accent) !important;
    color: var(--hpv2-fg);
}
/* Notice / agree-knop = v2 primaire-CTA stijl. */
body.hpv2 #priceListModal #priceListAgreeBtn {
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
    border-color: var(--hpv2-accent);
}
body.hpv2 #priceListModal #priceListAgreeBtn:hover,
body.hpv2 #priceListModal #priceListAgreeBtn:focus-visible {
    background: var(--hpv2-accent-strong);
    border-color: var(--hpv2-accent-strong);
}

/* Calculator-tabel: vervang de hard-gecodeerde `table-dark` kleur door tokens. */
body.hpv2 #priceListModal .custom-calc-table,
body.hpv2 #priceListModal .custom-calc-table thead,
body.hpv2 #priceListModal .custom-calc-table tbody,
body.hpv2 #priceListModal .custom-calc-table tr,
body.hpv2 #priceListModal .custom-calc-table td,
body.hpv2 #priceListModal .custom-calc-table th {
    background: transparent;
    color: var(--hpv2-fg);
    border-color: var(--hpv2-line);
}
/* Specificity-boost (extra `.custom-calc-table`) zodat we de eerdere
   reset-rule met dezelfde selector-list overrulen. */
body.hpv2 #priceListModal .custom-calc-table .calc-row {
    background: var(--hpv2-bg-soft);
}
body.hpv2 #priceListModal .custom-calc-table .calc-row.active {
    background: var(--hpv2-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hpv2-line-strong);
}
/* Bootstrap `.table-hover` op `.table-dark` rendert een donkergrijze hover-rij
   die niet bij het v2-thema past. Override met dezelfde tokens als de
   `.active`-state zodat hover en geselecteerd visueel samenhangen. */
body.hpv2 #priceListModal .custom-calc-table.table-hover > tbody > tr.calc-row:hover > *,
body.hpv2 #priceListModal .custom-calc-table .calc-row:hover {
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--hpv2-fg);
    background-color: var(--hpv2-accent-soft);
    color: var(--hpv2-fg);
    box-shadow: inset 0 0 0 1px var(--hpv2-line);
}
body.hpv2 #priceListModal .custom-calc-table.table-hover > tbody > tr.calc-row.active:hover > *,
body.hpv2 #priceListModal .custom-calc-table .calc-row.active:hover {
    background-color: var(--hpv2-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hpv2-line-strong);
}
body.hpv2 #priceListModal .form-check-input {
    background-color: var(--hpv2-bg);
    border-color: var(--hpv2-line-strong);
}
body.hpv2 #priceListModal .form-check-input:checked {
    background-color: var(--hpv2-accent);
    border-color: var(--hpv2-accent);
}
body.hpv2 #priceListModal .form-check-input:focus,
body.hpv2 #priceListModal .qty-input:focus {
    box-shadow: 0 0 0 3px var(--hpv2-accent-soft);
    border-color: var(--hpv2-accent);
    outline: none;
}
body.hpv2 #priceListModal .qty-input {
    background: var(--hpv2-bg);
    color: var(--hpv2-fg);
    border-color: var(--hpv2-line);
}
body.hpv2 #priceListModal .btn-outline-light {
    color: var(--hpv2-fg);
    border-color: var(--hpv2-line-strong);
    background: transparent;
}
body.hpv2 #priceListModal .btn-outline-light:hover,
body.hpv2 #priceListModal .btn-outline-light:focus-visible {
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-fg);
    border-color: var(--hpv2-accent);
}

/* Sticky bottom-bar / summary panel. */
body.hpv2 #priceListModal .calc-summary-panel {
    background: var(--hpv2-bg-elev);
    border-top: 1px solid var(--hpv2-line);
}
body.hpv2 #priceListModal .calc-summary-item {
    background: var(--hpv2-bg-soft);
    color: var(--hpv2-fg);
}
body.hpv2 #priceListModal .calc-total-section {
    border-top-color: var(--hpv2-line) !important;
}
body.hpv2 #priceListModal .calc-total-section .text-primary {
    color: var(--hpv2-accent) !important;
}
body.hpv2 #priceListModal h6.text-primary {
    color: var(--hpv2-accent) !important;
}

/* Desktop: side-panel border + scrollbar tokens. */
@media (min-width: 992px) {
    body.hpv2 #priceListModal .price-list-selection {
        border-right-color: var(--hpv2-line) !important;
    }
    body.hpv2 #priceListModal .calc-row td {
        border-top-color: var(--hpv2-line) !important;
        border-bottom-color: var(--hpv2-line) !important;
    }
    body.hpv2 #priceListModal .calc-row td:first-child {
        border-left-color: var(--hpv2-line) !important;
    }
    body.hpv2 #priceListModal .calc-row td:last-child {
        border-right-color: var(--hpv2-line) !important;
    }
}

/* ============================================================
   TEAM-MODAL — highlight de geselecteerde profiel-kaart
   ============================================================
   Wanneer een bezoeker op een specifieke team-card in de hero-strip
   klikt, scrollt JS naar de bijbehorende `.team-card` binnen de modal
   en voegt tijdelijk `.team-card--highlight` toe. Visueel ring met
   accent-kleur + zachte glow zodat de gebruiker meteen ziet welke
   medewerker hij/zij had aangeklikt. */
body.hpv2 #teamModal .team-card {
    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease,
        border-color 0.4s ease;
}
body.hpv2 #teamModal .team-card.team-card--highlight {
    box-shadow:
        0 0 0 2px var(--hpv2-accent),
        0 8px 24px var(--hpv2-accent-soft);
    transform: translateY(-2px);
}
/* Solo-state: één medewerker zichtbaar — laat de kaart over volle breedte
   spreiden i.p.v. een dunne kolom uit het oorspronkelijke 2-koloms grid. */
body.hpv2 #teamModal .team-card.team-card--solo {
    grid-column: 1 / -1;
    max-width: 560px;
    margin: 0 auto;
}

/* ============================================================
   AVAILABILITY-SECTION — v2 thema-scoping
   ============================================================
   De availability-cards en navigatie-knoppen in `#availability-section`
   gebruiken hardcoded dark-theme kleuren uit `root-landing.css`
   (rgba(36,23,15,…) + rgba(255,255,255,…)). Dat werkt op v1 dark, maar op
   v2 light wordt het een troebele bruin-grijze laag op de cream pagina.
   Hieronder mappen we alles naar v2-tokens zodat zowel licht als donker
   thema automatisch klopt. Alleen scoped onder `body.hpv2`. */
/* LET OP: gebruik overal `background-color` (longhand) i.p.v. `background`
   shorthand. De Vite/lightningcss-minifier expandeert `background: var(--...)`
   incorrect tot lege longhands waardoor de kleur weg valt. */
body.hpv2 .availability-card {
    background-color: var(--hpv2-bg-elev);
    background-image: none;
    border-color: var(--hpv2-line);
    box-shadow: var(--hpv2-shadow-md);
}
body.hpv2 .availability-card:hover {
    border-color: var(--hpv2-line-strong);
    box-shadow: var(--hpv2-shadow-md);
}
body.hpv2 .availability-slider-overlay {
    background-color: color-mix(in srgb, var(--hpv2-bg-elev) 85%, transparent);
}
body.hpv2 .day-label {
    color: var(--hpv2-fg);
}
body.hpv2 .day-subtitle {
    color: var(--hpv2-muted);
}
body.hpv2 .day-badge {
    background-color: var(--hpv2-accent-soft);
    color: var(--hpv2-accent-strong);
    border-color: color-mix(in srgb, var(--hpv2-accent) 50%, transparent);
}
body.hpv2 .day-pill {
    background-color: var(--hpv2-bg-soft);
    color: var(--hpv2-fg-soft);
    border-color: var(--hpv2-line);
}
/* Dichte salon = duidelijke waarschuwingsvariant zodat bezoekers het meteen
   herkennen. Gebruikt een warm rood-bruin dat past bij het gouden palet,
   maar voldoende afwijkt om als "let op" leesbaar te zijn in beide thema's. */
body.hpv2 .day-pill--closed {
    background-color: rgba(176, 64, 48, 0.14);
    color: #8a2a1f;
    border-color: rgba(176, 64, 48, 0.45);
    font-weight: 700;
}
html[data-theme="dark"] body.hpv2 .day-pill--closed {
    background-color: rgba(229, 115, 99, 0.18);
    color: #f0a195;
    border-color: rgba(229, 115, 99, 0.45);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] body.hpv2 .day-pill--closed {
        background-color: rgba(229, 115, 99, 0.18);
        color: #f0a195;
        border-color: rgba(229, 115, 99, 0.45);
    }
}

/* "Vandaag al gesloten" = neutrale variant voor een dag waarop het salon
   gewoon open was maar de boekbare slots voorbij zijn. Geen alarm-rood:
   de bezoeker moet meteen begrijpen dat het salon werkelijk werkte, maar
   dat de werkdag voorbij is. Gebruikt het bestaande goud-token zodat het
   visueel rijmt met de "Vandaag"-badge (zelfde accentkleur, lichtere tint
   dan de pill voor een actieve werkdag). */
body.hpv2 .day-pill--closed-today {
    background-color: var(--hpv2-accent-soft);
    color: var(--hpv2-accent-strong);
    border-color: color-mix(in srgb, var(--hpv2-accent) 40%, transparent);
    font-weight: 600;
}
html[data-theme="dark"] body.hpv2 .day-pill--closed-today {
    color: var(--hpv2-accent);
    border-color: color-mix(in srgb, var(--hpv2-accent) 55%, transparent);
}
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] body.hpv2 .day-pill--closed-today {
        color: var(--hpv2-accent);
        border-color: color-mix(in srgb, var(--hpv2-accent) 55%, transparent);
    }
}
body.hpv2 .availability-staff {
    border-top-color: var(--hpv2-line);
}
body.hpv2 .staff-name {
    color: var(--hpv2-fg);
}
body.hpv2 .staff-status--unscheduled {
    color: var(--hpv2-muted);
    border-color: var(--hpv2-line);
    background-color: var(--hpv2-bg-soft);
}
body.hpv2 .slot-line {
    background-color: var(--hpv2-bg-soft);
    /* Compenseer voor mogelijke "transparent on transparent" issue uit basis */
    box-shadow: inset 0 0 0 1px var(--hpv2-line);
}
body.hpv2 .slot-line:hover {
    background-color: var(--hpv2-accent-soft);
    box-shadow: inset 0 0 0 1px var(--hpv2-line-strong);
}
body.hpv2 .slot-label {
    color: var(--hpv2-accent-strong);
}
body.hpv2 .slot-value {
    color: var(--hpv2-fg);
}
body.hpv2 .availability-empty {
    color: var(--hpv2-muted);
}
/* Navigatieknoppen (Vorige / Volgende / Vandaag) — v1 had dark pill-stijl
   met gradients en text-shadow voor donker thema. v2 gebruikt een schone
   token-gebaseerde outline-knop met accent-hover.
   `background-image: none` reset de v1-gradient zodat onze solide token-bg
   doorkomt; `text-shadow: none` voorkomt zwarte schaduw op licht thema. */
body.hpv2 .availability-nav-btn {
    background-color: var(--hpv2-bg-elev);
    background-image: none;
    color: var(--hpv2-fg);
    border: 1px solid var(--hpv2-line-strong);
    box-shadow: var(--hpv2-shadow-sm);
    text-shadow: none;
    /* De basisstylesheet zakt op smalle schermen naar 40px; v2 houdt iedere
       dagactie als betrouwbaar touchdoel van minimaal 44px. */
    min-width: 44px;
    min-height: 44px;
}
body.hpv2 .availability-nav-btn:hover:not(:disabled),
body.hpv2 .availability-nav-btn:focus-visible {
    background-color: var(--hpv2-accent-soft);
    background-image: none;
    color: var(--hpv2-fg);
    border-color: var(--hpv2-accent);
    box-shadow: var(--hpv2-shadow-sm);
    transform: none;
}
body.hpv2 .availability-nav-btn:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
    box-shadow: none;
}
body.hpv2 .availability-nav-btn:disabled,
body.hpv2 .availability-nav-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
}
/* "Last-minute lijst" CTA onder de availability-card.
   Volledige button-styling (display/padding/border-radius) — de base-CSS
   in root-landing.css definieert die niet en de v1 (.home-redesign) rules
   raken v2 niet. */
body.hpv2 .availability-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hpv2-line);
}
body.hpv2 .availability-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;             /* >= WCAG-tap-target */
    padding: 0.7rem 1.1rem;
    background-color: var(--hpv2-bg-elev);
    background-image: none;
    color: var(--hpv2-fg);
    border: 1.5px solid var(--hpv2-line-strong);
    border-radius: var(--hpv2-radius);
    font-family: var(--hpv2-font-sans);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--hpv2-shadow-sm);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
body.hpv2 .availability-card-action svg,
body.hpv2 .availability-card-action i[data-lucide] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
/* De "Geen plaats gevonden?"-vraag is een secondaire label binnen de knop —
   in het v1-design klein en gedempt boven het hoofdlabel. */
body.hpv2 .availability-card-action span {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.78;
}
body.hpv2 .availability-card-action:hover,
body.hpv2 .availability-card-action:focus-visible {
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: var(--hpv2-shadow-md);
}
body.hpv2 .availability-card-action:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
}
body.hpv2 .availability-card-action--primary {
    background-color: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
    border-color: var(--hpv2-accent);
}
body.hpv2 .availability-card-action--primary:hover,
body.hpv2 .availability-card-action--primary:focus-visible {
    background-color: var(--hpv2-accent-strong);
    border-color: var(--hpv2-accent-strong);
    color: var(--hpv2-btn-fg);
}
body.hpv2 .availability-card-action--secondary {
    background-color: var(--hpv2-bg-elev);
    color: var(--hpv2-accent-strong);
    border-color: var(--hpv2-accent);
}
body.hpv2 .availability-card-action--secondary:hover,
body.hpv2 .availability-card-action--secondary:focus-visible {
    background-color: var(--hpv2-accent-soft);
    border-color: var(--hpv2-accent-strong);
    color: var(--hpv2-accent-strong);
}
/* Disabled-state — wanneer salon gesloten is, geeft de last-minute knop
   geen actie. Visueel gedempt + cursor not-allowed + geen hover-lift. */
body.hpv2 .availability-card-action:disabled,
body.hpv2 .availability-card-action[aria-disabled="true"] {
    background-color: var(--hpv2-bg-soft);
    background-image: none;
    color: var(--hpv2-muted);
    border-color: var(--hpv2-line);
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
body.hpv2 .availability-card-action:disabled:hover,
body.hpv2 .availability-card-action[aria-disabled="true"]:hover,
body.hpv2 .availability-card-action:disabled:focus-visible,
body.hpv2 .availability-card-action[aria-disabled="true"]:focus-visible {
    background-color: var(--hpv2-bg-soft);
    color: var(--hpv2-muted);
    border-color: var(--hpv2-line);
    transform: none;
    box-shadow: none;
}

/* ============================================================
   FAQ SECTIE
   - Mobile-first: items als verticale stack van <details>, native accordion.
   - Tokens: --hpv2-bg-elev voor item-achtergrond, --hpv2-line voor randen,
     --hpv2-accent voor focus/chevron-hover. Zelfde patroon als andere sectie-
     kaarten zodat licht/donker thema automatisch meegaat.
   - Toegankelijkheid: focus-visible op summary, AA-contrast via --hpv2-fg /
     --hpv2-muted, chevron is decoratief (aria-hidden in markup).
   ============================================================ */
.hpv2-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hpv2-faq__item {
    background: var(--hpv2-bg-elev);
    border: 1px solid var(--hpv2-line);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--hpv2-trans), box-shadow var(--hpv2-trans);
}

.hpv2-faq__item[open] {
    border-color: var(--hpv2-line-strong);
    box-shadow: var(--hpv2-shadow-sm);
}

/* ------------------------------------------------------------
   Vloeiend open-/dichtklappen van de FAQ-accordion.
   Progressive enhancement: `interpolate-size: allow-keywords` laat
   block-size naar `auto` animeren en `::details-content` is het
   browser-pseudo-element rond de accordion-inhoud (Chromium 131+).
   Browsers zonder ondersteuning negeren deze regels volledig en
   behouden het bestaande directe open/dicht-gedrag — geen regressie.
   prefers-reduced-motion: transitie uitgeschakeld (zie MOTION-blok).
   ------------------------------------------------------------ */
.hpv2-faq__item {
    interpolate-size: allow-keywords;
}
.hpv2-faq__item::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition: content-visibility 320ms allow-discrete,
                opacity 320ms ease,
                block-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hpv2-faq__item[open]::details-content {
    opacity: 1;
    block-size: auto;
}

.hpv2-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    min-height: var(--hpv2-tap-min);
    cursor: pointer;
    font-family: var(--hpv2-font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--hpv2-fg);
    list-style: none;
    user-select: none;
}

/* Verberg de native disclosure-driehoek in Safari/Chromium. */
.hpv2-faq__question::-webkit-details-marker { display: none; }
.hpv2-faq__question::marker { content: ''; }

.hpv2-faq__question:hover {
    color: var(--hpv2-accent);
}

.hpv2-faq__question:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
}

.hpv2-faq__question-text {
    flex: 1 1 auto;
    line-height: 1.4;
}

.hpv2-faq__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    width: 20px;
    height: 20px;
    color: var(--hpv2-muted);
    transition: transform var(--hpv2-trans), color var(--hpv2-trans);
}

.hpv2-faq__chevron svg {
    width: 100%;
    height: 100%;
}

.hpv2-faq__item[open] .hpv2-faq__chevron {
    transform: rotate(180deg);
    color: var(--hpv2-accent);
}

.hpv2-faq__answer {
    padding: 0 1.25rem 1.1rem;
    color: var(--hpv2-fg-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Optionele sectie-lead boven de accordion (admin kan deze leeg laten). */
.hpv2-section-lead {
    margin: 0.75rem auto 0;
    max-width: 720px;
    color: var(--hpv2-muted);
    text-align: center;
    font-size: 1rem;
    line-height: 1.55;
}

/* Reduced-motion: geen chevron-rotatie-animatie. */
@media (prefers-reduced-motion: reduce) {
    .hpv2-faq__chevron { transition: none; }
    .hpv2-faq__item { transition: none; }
}

/* ============================================================
   SMALL-SCREEN OVERRIDES
   ============================================================ */
@media (max-width: 380px) {
    .hpv2-hero__title { font-size: 2rem; }
    .hpv2-btn { width: 100%; }
    .hpv2-hero__cta-row { flex-direction: column; align-items: stretch; }
    /* Kolom-stack op zeer smal scherm: order:-1 houdt de teller bovenaan;
       flex-basis terug naar auto (100% zou in kolomrichting de hoogte forceren). */
    .hpv2-hero__live { margin-left: 0; margin-top: 0; margin-bottom: 0.5rem; flex-basis: auto; }
    .hpv2-faq__question { padding: 0.85rem 1rem; font-size: 0.95rem; }
    .hpv2-faq__answer { padding: 0 1rem 1rem; font-size: 0.9rem; }
}

/* ============================================================
   TEAM CERTIFICATEN/DIPLOMA'S
   - Sectie binnen de team-modal die per medewerker publieke
     certificaten, diploma's, opleidingen en ervaring toont.
   - Gescoped onder body.hpv2 .team-modal zodat we niet conflicteren
     met admin-styling of v1-rendering.
   ============================================================ */
body.hpv2 .team-modal .team-certs {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hpv2-line);
}
body.hpv2 .team-modal .team-certs__title {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hpv2-accent);
    margin: 0 0 0.75rem;
    font-weight: 600;
}
body.hpv2 .team-modal .team-certs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
body.hpv2 .team-modal .team-cert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--hpv2-bg-soft);
    border: 1px solid var(--hpv2-line);
    border-radius: var(--hpv2-radius);
}
/* Vaste breedte + gecentreerde tekst: zo zijn alle type-labels
   (DIPLOMA/CERTIFICAAT/ERVARING) even groot en breed en start de
   tekstkolom op elke kaart op exact dezelfde x-positie. */
body.hpv2 .team-modal .team-cert__type {
    flex: 0 0 7rem;
    width: 7rem;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: var(--hpv2-accent-soft);
    color: var(--hpv2-accent);
    border: 1px solid var(--hpv2-line-strong);
    white-space: nowrap;
}
/* Per type een subtiel kleurverschil via dezelfde token-laag — geen extra
   palette, alleen accent of muted afhankelijk van betekenis. */
body.hpv2 .team-modal .team-cert__type[data-type="diploma"] {
    background: color-mix(in srgb, var(--hpv2-accent) 18%, var(--hpv2-bg-elev));
}
body.hpv2 .team-modal .team-cert__type[data-type="ervaring"] {
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg-soft);
}
body.hpv2 .team-modal .team-cert__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1 1 auto;
}
body.hpv2 .team-modal .team-cert__titel {
    color: var(--hpv2-fg);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}
body.hpv2 .team-modal .team-cert__meta {
    color: var(--hpv2-muted);
    font-size: 0.85rem;
    line-height: 1.4;
}
body.hpv2 .team-modal .team-cert__beschrijving {
    color: var(--hpv2-fg-soft);
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.25rem;
}
/* Bijlage-preview bij een certificaat (webp-thumbnail of pdf-link). */
body.hpv2 .team-modal .team-cert__doc {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    text-decoration: none;
}
/* Met bijlage: 2-koloms grid. Linkerkolom = afbeelding met de badge er
   direct onder; rechterkolom = titel/jaar/beschrijving die de volledige
   hoogte naast de afbeelding vult (geen lege ruimte rechts). */
body.hpv2 .team-modal .team-cert--has-doc {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    align-items: start;
}
body.hpv2 .team-modal .team-cert--has-doc > .team-cert__doc {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
body.hpv2 .team-modal .team-cert--has-doc > .team-cert__type {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
}
body.hpv2 .team-modal .team-cert--has-doc > .team-cert__body {
    grid-column: 2;
    grid-row: 1 / span 2;
}
body.hpv2 .team-modal .team-cert--has-doc > .team-cert__doc .team-cert__thumb {
    max-width: 150px;
    max-height: 200px;
}
body.hpv2 .team-modal .team-cert__thumb {
    max-width: 140px;
    max-height: 100px;
    width: auto;
    height: auto;
    border-radius: var(--hpv2-radius);
    border: 1px solid var(--hpv2-line);
    background: var(--hpv2-bg-elev);
    object-fit: cover;
    transition: border-color 0.15s ease;
}
body.hpv2 .team-modal .team-cert__doc:hover .team-cert__thumb,
body.hpv2 .team-modal .team-cert__doc:focus-visible .team-cert__thumb {
    border-color: var(--hpv2-accent);
}
/* Placeholder wanneer de certificaat-scan niet kan laden (404/403/corrupt):
   home-v2.js vervangt de kapotte <img> + zoom-link door dit blok. */
body.hpv2 .team-modal .team-cert__thumb--placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 140px;
    min-height: 100px;
    padding: 0.6rem 0.5rem;
    border: 1px dashed var(--hpv2-line);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg-soft);
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.3;
}
body.hpv2 .team-modal .team-cert__thumb--placeholder i {
    font-size: 1.25rem;
    opacity: 0.7;
}
/* Zelfde grid-positie als de vervangen .team-cert__doc (kolom 1, rij 1). */
body.hpv2 .team-modal .team-cert--has-doc > .team-cert__thumb--placeholder {
    grid-column: 1;
    grid-row: 1;
}
body.hpv2 .team-modal .team-cert__doc--pdf {
    color: var(--hpv2-accent);
    font-size: 0.875rem;
    font-weight: 600;
}
body.hpv2 .team-modal .team-cert__doc--pdf:hover,
body.hpv2 .team-modal .team-cert__doc--pdf:focus-visible {
    text-decoration: underline;
}
body.hpv2 .team-modal .team-cert__doc:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
    border-radius: var(--hpv2-radius);
}
body.hpv2 .team-modal .team-cert__doc[data-team-cert-preview] {
    cursor: zoom-in;
}

/* Certificaat-preview ligt bovenop de bestaande Bootstrap team-modal.
   Bootstrap gebruikt normaal modal/backdrop rond 1050/1055; deze hogere laag
   voorkomt dat de grote scan achter `#teamModal` of zijn backdrop belandt. */
body.hpv2 #teamCertPreviewModal {
    z-index: 1085;
}
body.hpv2 .modal-backdrop.team-cert-preview-backdrop,
body.hpv2 .modal-backdrop.show + .modal-backdrop.show {
    z-index: 1080;
}
body.hpv2 #teamCertPreviewModal .modal-dialog {
    width: min(100vw - 1rem, 980px);
    max-width: min(100vw - 1rem, 980px);
    margin: 0.5rem auto;
}
body.hpv2 #teamCertPreviewModal .modal-content {
    max-height: calc(100vh - 1rem);
    max-height: calc(100svh - 1rem);
    background: var(--hpv2-bg-elev);
    border-color: var(--hpv2-line-strong);
    overflow: hidden;
}
body.hpv2 #teamCertPreviewModal .modal-header,
body.hpv2 #teamCertPreviewModal .modal-footer {
    flex: 0 0 auto;
}
body.hpv2 #teamCertPreviewModal .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    padding: 0.75rem;
    overflow: auto;
}
body.hpv2 #teamCertPreviewModal .team-cert-preview-modal__image {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 2.5rem);
    max-height: calc(100vh - 11rem);
    max-height: calc(100svh - 11rem);
    object-fit: contain;
    border-radius: var(--hpv2-radius);
    border: 1px solid var(--hpv2-line);
    background: var(--hpv2-bg-soft);
}
@media (max-width: 575px) {
    body.hpv2 #teamCertPreviewModal .modal-dialog {
        width: calc(100vw - 0.5rem);
        max-width: calc(100vw - 0.5rem);
        margin: 0.25rem auto;
    }
    body.hpv2 #teamCertPreviewModal .modal-content {
        max-height: calc(100vh - 0.5rem);
        max-height: calc(100svh - 0.5rem);
    }
    body.hpv2 #teamCertPreviewModal .modal-body {
        padding: 0.5rem;
    }
    body.hpv2 #teamCertPreviewModal .team-cert-preview-modal__image {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 10rem);
        max-height: calc(100svh - 10rem);
    }
}

/* ============================================================
   TERUG-NAAR-BOVEN KNOP
   - Verborgen tot body.hpv2-nav-hidden actief is (state komt uit
     initHeroOnlyNavbar in home-v2.js — zelfde signaal als waarop
     de navbar zelf verdwijnt).
   - Vaste positie rechtsonder, respecteert iOS safe-area.
   - 48px tap-target, ronde knop, AA-contrast in beide thema's.
   - Fade-in via opacity-transition zodat de verschijning niet
     "popt"; respecteert prefers-reduced-motion.
   ============================================================ */
.hpv2-back-to-top {
    position: fixed;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: var(--hpv2-tap-min);
    height: var(--hpv2-tap-min);
    min-width: var(--hpv2-tap-min);
    min-height: var(--hpv2-tap-min);
    border: 1px solid var(--hpv2-line-strong);
    border-radius: 50%;
    background: var(--hpv2-bg-elev);
    color: var(--hpv2-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: var(--hpv2-shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity var(--hpv2-trans),
        transform var(--hpv2-trans),
        background var(--hpv2-trans),
        border-color var(--hpv2-trans);
    /* z-index onder Bootstrap-modals (1055+) maar boven content. Modals winnen
       altijd, dus de knop verstoort geen dialog-interactie. */
    z-index: 1000;
}
.hpv2-back-to-top svg {
    width: 22px;
    height: 22px;
}
.hpv2-back-to-top:hover,
.hpv2-back-to-top:focus-visible {
    background: var(--hpv2-bg-soft);
    border-color: var(--hpv2-accent);
    color: var(--hpv2-accent);
}
.hpv2-back-to-top:focus-visible {
    outline: 2px solid var(--hpv2-accent);
    outline-offset: 2px;
}
/* Press-state: zelfde subtiele indruk-feedback als .hpv2-btn (consistentie). */
.hpv2-back-to-top:active {
    transform: translateY(0) scale(0.94);
}
/* Toon de knop alleen wanneer de navbar verborgen is. We tonen niet alleen
   maar maken hem klikbaar via pointer-events; daardoor blijft hij tijdens
   de fade-out non-interactief. `[hidden]`-attribuut wordt door JS verwijderd
   zodra hij voor het eerst zichtbaar wordt — daarvoor blijft hij weg uit de
   tabvolgorde. */
body.hpv2-nav-hidden .hpv2-back-to-top {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Mobiele landschapsstand: knop iets kleiner zodat hij CTA's niet afdekt. */
@media (orientation: landscape) and (max-height: 540px) {
    .hpv2-back-to-top {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        right: calc(0.75rem + env(safe-area-inset-right, 0px));
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    .hpv2-back-to-top svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .hpv2-back-to-top {
        transition: opacity 0ms, transform 0ms;
        transform: none;
    }
}

/* ============================================================
   A1: dienstspecifiek zeven-dagenoverzicht. De trigger blijft secundair;
   uitsluitend het dagraster mag op smalle schermen horizontaal scrollen. */
.hpv2-service-week-trigger {
    width: min(100%, 24rem);
    min-height: var(--hpv2-tap-min);
    gap: 0.55rem;
    text-align: center;
}
.hpv2-service-week-trigger svg { width: 19px; height: 19px; flex: 0 0 auto; }
.hpv2-service-week-modal .modal-dialog {
    width: min(calc(100vw - 1rem), 1180px);
    max-width: min(calc(100vw - 1rem), 1180px);
}
.hpv2-service-week-modal .modal-content {
    color: var(--hpv2-fg);
    background: var(--hpv2-bg-elev);
    border: 1px solid var(--hpv2-line-strong);
    box-shadow: var(--hpv2-shadow-lg);
}
.hpv2-service-week-modal .modal-header,
.hpv2-service-week-modal .modal-footer { border-color: var(--hpv2-line); }
.hpv2-service-week-modal .modal-header { align-items: flex-start; gap: 1rem; }
.hpv2-service-week-modal .btn-close {
    flex: 0 0 auto;
    min-width: var(--hpv2-tap-min);
    min-height: var(--hpv2-tap-min);
    margin: -0.45rem -0.45rem 0 0;
}
.hpv2-service-week-status,
.hpv2-service-week-fallback {
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    color: var(--hpv2-muted);
    text-align: center;
}
.hpv2-service-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(132px, 1fr));
    gap: 0.75rem;
    min-width: 0;
}
.hpv2-service-week-day {
    min-width: 0;
    min-height: 14rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    border: 1px solid var(--hpv2-line);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-bg-soft);
}
.hpv2-service-week-day.is-available { border-color: color-mix(in srgb, var(--hpv2-accent) 55%, var(--hpv2-line)); }
.hpv2-service-week-day.is-full { opacity: 0.72; }
.hpv2-service-week-day__head { display: flex; flex-direction: column; gap: 0.5rem; }
.hpv2-service-week-day__date {
    margin: 0;
    color: var(--hpv2-fg);
    font-family: var(--hpv2-font-sans);
    font-size: 1rem;
    line-height: 1.25;
}
.hpv2-service-week-day__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.hpv2-service-week-badge {
    padding: 0.22rem 0.42rem;
    border: 1px solid var(--hpv2-line-strong);
    border-radius: 999px;
    color: var(--hpv2-accent-strong);
    background: var(--hpv2-accent-soft);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
}
.hpv2-service-week-badge.is-choice { color: var(--hpv2-fg-soft); background: var(--hpv2-bg-elev); }
.hpv2-service-week-day__time,
.hpv2-service-week-day__meta,
.hpv2-service-week-day__full { margin: 0; line-height: 1.4; }
.hpv2-service-week-day__time strong {
    display: block;
    margin-top: 0.15rem;
    color: var(--hpv2-accent-strong);
    font-size: 1.35rem;
}
.hpv2-service-week-day__meta,
.hpv2-service-week-day__full { color: var(--hpv2-muted); font-size: 0.82rem; }
.hpv2-service-week-day__link {
    min-height: var(--hpv2-tap-min);
    margin-top: auto;
    padding: 0.65rem 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hpv2-accent);
    border-radius: var(--hpv2-radius);
    background: var(--hpv2-accent);
    color: var(--hpv2-btn-fg);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background var(--hpv2-trans), border-color var(--hpv2-trans), transform var(--hpv2-trans);
}
.hpv2-service-week-day__link:hover,
.hpv2-service-week-day__link:focus-visible {
    background: var(--hpv2-accent-strong);
    border-color: var(--hpv2-accent-strong);
    color: var(--hpv2-btn-fg);
    transform: translateY(-1px);
}
.hpv2-service-week-day__link:focus-visible,
.hpv2-service-week-modal button:focus-visible { outline: 2px solid var(--hpv2-accent); outline-offset: 2px; }
.hpv2-service-week-fallback__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }
.hpv2-service-week-fallback__actions .hpv2-btn { min-height: var(--hpv2-tap-min); }
@media (max-width: 991px) {
    .hpv2-service-week-grid {
        grid-template-columns: repeat(7, minmax(168px, 168px));
        padding-bottom: 0.5rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: inline mandatory;
    }
    .hpv2-service-week-day { scroll-snap-align: start; }
}
@media (max-width: 575px) {
    .hpv2-service-week-modal .modal-dialog {
        width: calc(100vw - 0.5rem);
        max-width: calc(100vw - 0.5rem);
        margin: 0.25rem auto;
    }
    .hpv2-service-week-modal .modal-header,
    .hpv2-service-week-modal .modal-body,
    .hpv2-service-week-modal .modal-footer { padding: 0.9rem; }
    .hpv2-service-week-modal .modal-footer { align-items: stretch; }
    .hpv2-service-week-modal .modal-footer .btn { min-height: var(--hpv2-tap-min); }
}
@media (prefers-reduced-motion: reduce) {
    .hpv2-service-week-day__link { transition: none; }
    .hpv2-service-week-day__link:hover,
    .hpv2-service-week-day__link:focus-visible { transform: none; }
}

/* ============================================================
   hpv2-flash — Banner voor no-JS form-submit feedback.
   Shim `form-fallback-shim.php` redirect bij niet-AJAX POST naar
   ?form=ok|err&form_msg=...; render-v2.php toont deze banner.
   ============================================================ */
.hpv2-flash {
    margin: 0;
    padding: 0.9rem 1.25rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(245, 241, 234, 0.12);
}
.hpv2-flash--ok {
    background: rgba(46, 125, 50, 0.18);
    color: #d7f5db;
}
.hpv2-flash--err {
    background: rgba(176, 0, 32, 0.20);
    color: #fbd7dc;
}
.hpv2-flash__text {
    display: inline-block;
    max-width: 60ch;
}