/* Flatpickr tweaks */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #c0c4cc;
    background: #f5f7fa;
    cursor: not-allowed
}

:root {
    --bg: #fffef8;
    --ink: #111;
    --muted: #525a6b;
    --acc: #5d5be3;
    --acc2: #ff4d7e;
    --radius: 22px;
    --shadow: 0 12px 30px rgba(0, 0, 0, .08);
    /* lichter baseline voor lagere paint-kosten */
    --headerH: 64px;
    --space: clamp(8px, 2.2vw, 20px);
    --dotsGutter: 24px;
    --panelMaxH: auto;
    --bottomSafe: 64px;
    /* Reviews theme vars */
    --rev-accent: #7bb2ff;
    --rev-accent2: #ff8fb3;
    --rev-radius: 16px;
    --rev-glass: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7));
    --rev-shadow: 0 20px 50px rgba(0, 0, 0, .10);
    --rev-muted: #525a6b;
    --rev-ink: #111;
}

/* Mobiel: nog lichtere shadow */
@media (max-width: 600px) {
    :root {
        --shadow: 0 8px 18px rgba(0, 0, 0, .08);
    }
}

/* * {
    box-sizing: border-box
} */

html,
body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior-y: none;
    /* voorkom pull-to-refresh/bounce */
}

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg)
}

/* Superklein: systeemfont om renderkosten te drukken (optioneel) */
@media (max-width: 360px) {
    body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
}

.skip {
    position: absolute;
    left: -9999px;
    top: auto
}

.skip:focus {
    left: 12px;
    top: 12px;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 2000
}

/* Header */
.top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    z-index: 1400
}

/* Mobile: geen backdrop-filter (duur) */
@media (max-width: 600px) {
    .top {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, .95);
    }
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.logo {
    width: 120px;
    height: auto;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow)
}

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

.brand h1 {
    font-size: 1.15rem;
    margin: 0
}

.muted {
    color: var(--muted)
}

.btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 11px 16px;
    border-radius: 999px;
    font-weight: 700;
    background: #111;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.btn-alt {
    background: var(--acc)
}

.btn-call {
    background: #16a34a
}

/* Scroller */
main {
    position: relative;
    height: calc(100svh - var(--headerH));
    margin-top: var(--headerH);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
    /* harde snap per sectie */
    /* soepeler dan mandatory */
    overscroll-behavior-y: contain;
    /* i.p.v. shorthand */
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
    scrollbar-gutter: stable both-edges;
    padding-right: var(--dotsGutter)
}

/* Secties */
section.snap {
    --sec-accent: var(--acc);
    --chip-bg: color-mix(in srgb, var(--sec-accent) 12%, #ffffff);
    --chip-border: color-mix(in srgb, var(--sec-accent) 22%, #e9ecff);
    --imgishH-min: 110px;
    /* minimaal */
    --imgishH-raw: auto;
    /* wat je (of JS) wil */
    --imgishH: clamp(var(--imgishH-min), var(--imgishH-raw, 40vh), 9999px);
    --sec-bg: transparent;
    background: var(--sec-bg);
    height: calc(100svh - var(--headerH));
    display: grid;
    place-items: center;
    padding: var(--space);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden
}

/* Mobiel: eenvoudigere bg voor lichtere paints */
@media (max-width: 600px) {
    section.snap {
        --sec-bg: linear-gradient(180deg, rgba(255, 255, 255, .98), #fffef8 60%);
        background: var(--sec-bg);
    }
}

#knippen {
    --sec-accent: #9b87f5;
    --sec-bg: linear-gradient(180deg, #f7f5ff 0%, #fffef8 100%)
}

#kleuren {
    --sec-accent: #ff7aa2;
    --sec-bg: linear-gradient(180deg, #fff0f4 0%, #fffef8 100%)
}

#keratine {
    --sec-accent: #69d1c5;
    --sec-bg: linear-gradient(180deg, #f0fffb 0%, #fffef8 100%)
}

#over {
    --sec-accent: #8dd0ff;
    --sec-bg: linear-gradient(180deg, #eef9ff 0%, #fffef8 100%)
}

#prijzen {
    --sec-accent: #7bb2ff;
    --sec-bg: linear-gradient(180deg, #f2f7ff 0%, #fffef8 100%)
}

#openingstijden {
    --sec-accent: #ffd28d;
    --sec-bg: linear-gradient(180deg, #fff8ea 0%, #fffef8 100%)
}

#adres {
    --sec-accent: #b0e1ff;
    --sec-bg: linear-gradient(180deg, #eefaff 0%, #fffef8 100%)
}

#boeken {
    --sec-accent: #b6f0c8;
    --sec-bg: linear-gradient(180deg, #eefff4 0%, #fffef8 100%)
}

.section-inner {
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center
}

#boeken .section-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: var(--space);
    min-height: 0
}

/* Content blokken */
.panel {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: calc(var(--space)* .75);
    align-items: center;
    max-height: var(--panelMaxH, calc((100svh - var(--headerH))* .80));
    /* Lazy-render buiten viewport */
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
}

@media (max-width: 600px) {
    .panel {
        contain-intrinsic-size: 480px 640px;
    }
}

.card {
    grid-column: span 6;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: calc(var(--space)* .9);
    position: relative;
    overflow: hidden;
    /* scrollende kaarten beter isoleren */
    contain: layout paint;
}

.imgish {
    grid-column: span 6;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--sec-accent) 10%, #f7f8ff);
    height: var(--imgishH, clamp(180px, calc((100svh - var(--headerH))* .40), 360px));
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden
}

.imgish img.cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.blob {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: var(--shadow);
    font-weight: 700
}

h2.big {
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: 1.12;
    margin: 0;
    letter-spacing: .015em
}

.tag {
    display: inline-block;
    font-size: .88rem;
    font-weight: 700;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 999px;
    padding: 5px 9px;
    margin-bottom: 8px
}

@media (max-width:980px) {

    .card,
    .imgish {
        grid-column: 1/-1
    }

    #kleuren .panel .card {
        order: 1
    }

    #kleuren .panel .imgish {
        order: 2
    }
}

@media (min-width:981px) {
    .panel {
        max-width: 1200px
    }

    .card {
        padding: calc(var(--space)*1.35)
    }

    h2.big {
        font-size: clamp(1.8rem, 3.6vw, 3.2rem)
    }
}

/* Prijslijst */
.menu-wrap {
    max-width: 1100px;
    width: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: calc(var(--space)* .9);
    /* lazy render */
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
}

@media (max-width: 600px) {
    .menu-wrap {
        contain-intrinsic-size: 480px 640px;
    }
}

.menu-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.menu-tab {
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    font-weight: 700
}

.menu-tab[aria-selected="true"] {
    background: var(--sec-accent);
    border-color: transparent;
    color: #fff
}

.menu-viewport {
    position: relative;
    height: clamp(320px, calc((100svh - var(--headerH))* .62), 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px dashed #eef2f7;
    border-radius: 16px;
    padding: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sec-accent) 6%, #fff) 0%, #fff 20%, #fff 100%);
    contain: layout paint;
    /* isolatie */
}

.menu-viewport::before,
.menu-viewport::after {
    content: "";
    position: sticky;
    left: 0;
    right: 0;
    height: 20px;
    pointer-events: none;
    z-index: 2
}

.menu-viewport::before {
    top: 0;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0))
}

.menu-viewport::after {
    bottom: 0;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff)
}

.menu-list {
    display: grid;
    gap: 6px
}

.menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px dashed #f1f5f9
}

.menu-item:last-child {
    border-bottom: 0
}

.menu-name {
    font-weight: 700
}

.menu-desc {
    color: var(--muted)
}

.menu-price {
    font-weight: 800;
    white-space: nowrap
}

/* Map */
.mapcard {
    max-width: 1000px;
    width: 100%;
    aspect-ratio: 16/9;
    /* hoogte automatisch */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    /* isolatie voor betere performance */
    contain: layout paint size style;
}

/* Op héle kleine schermen: gebruik bijna vierkant */
@media (max-width: 600px) {
    .mapcard {
        aspect-ratio: auto;
        /* laat hoogte los */
        height: 60vh;
        /* kaart neemt 60% van viewport-hoogte */
        min-height: 320px;
        /* extra zekerheid */
    }
}

.mapleaf,
#mapLeaf {
    height: 100%;
    width: 100%;
}

.mapcard .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2
}

.addrbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .92);
    color: #111;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: min(920px, calc(100% - 24px))
}

/* Mobile: geen blur, lichtere shadow */
@media (max-width: 600px) {
    .addrbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    }
}

.addrbar .icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center
}

.addrbar .addrtext {
    flex: 1;
    font-weight: 700
}

.addrbar a.cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-weight: 700
}

.map-attr {
    font-size: 12px;
    opacity: .8
}

/* Dots nav */
.dots {
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    z-index: 1300;
    pointer-events: auto;
    transition: opacity .2s ease
}

.dots::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 78svh;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(93, 91, 227, .35), rgba(255, 77, 126, .35))
}

.dot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-left: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 4px 14px rgba(17, 17, 17, .10);
    transition: opacity .2s ease, max-width .25s ease, padding .25s ease, margin .25s ease, background .2s ease, border-color .2s ease;
    cursor: pointer
}

/* Mobile: kortere transities */
@media (max-width: 600px) {
    .dot {
        transition-duration: .15s;
    }
}

.dot:hover {
    background: rgba(255, 255, 255, .36);
    border-color: rgba(255, 255, 255, .3)
}

.dot .bullet {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: background .2s ease, transform .2s ease
}

.dot.active .bullet {
    background: var(--acc);
    transform: scale(1.05)
}

.dot .label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .25s ease, opacity .25s ease;
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink)
}

.dot.show .label {
    max-width: 160px;
    opacity: .95
}

.dots.slim {
    inline-size: 12px;
    padding: 0;
    right: 8px;
    background: transparent;
    box-shadow: none
}

.dots.slim .dot {
    max-width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none
}

.dots.show-all .dot .label {
    max-width: 160px;
    opacity: .95
}

.nav-hint {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(6px);
    padding: 10px 6px;
    border-left: 1px solid rgba(0, 0, 0, .06);
    border-radius: 10px 0 0 10px;
    box-shadow: var(--shadow);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    user-select: none
}

@media (max-width: 600px) {
    .nav-hint {
        transition-duration: .15s;
    }
}

.nav-hint.show {
    opacity: .95
}

/* Boeken */
.bookwrap {
    max-width: 700px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--space)* .75);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    /* lazy render */
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
}

@media (max-width: 600px) {
    .bookwrap {
        contain-intrinsic-size: 480px 640px;
    }
}

.formcard {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    /* lazy render */
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
    contain: layout paint;
    /* isolatie */
}

@media (max-width: 600px) {
    .formcard {
        contain-intrinsic-size: 480px 640px;
    }
}

.formhead {
    padding: 14px 16px;
    border-bottom: 1px dashed #eef2f7
}

.formtitle {
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem)
}

.wizard {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0
}

.formbody {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
    contain: layout paint;
    /* isolatie scroll */
}

/* toegevoegd: laat kinderen krimpen */
.formbody,
.formbody>label,
.row2>*,
.row3>*,
.dt-row>* {
    min-width: 0
}

.row2,
.row3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

label>span {
    display: block;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px
}

.input {
    height: 44px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 0 12px;
    font: inherit;
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
}

select.input {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

textarea.input {
    height: auto;
    padding: 10px 12px;
    font-size: 1rem;
    line-height: 1.5
}

.input::placeholder,
textarea.input::placeholder {
    font-size: .95rem;
    color: var(--muted);
    opacity: .85
}

.hp {
    position: absolute;
    left: -9999px;
    top: -9999px
}

.actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px dashed #eef2f7;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 60%);
    position: sticky;
    bottom: var(--bottomSafe);
}

.btn-ghost {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700
}

.dt-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, 1fr);
    gap: 10px;
    align-items: start;
}

#prefDate {
    position: relative;
    z-index: 2;
}

#prefTime {
    position: relative;
    z-index: 1;
}

@media (max-width:700px) {
    .dt-row {
        grid-template-columns: 1fr
    }
}

.captcha-wrap {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden
}

.captcha-wrap>div,
.captcha-wrap iframe {
    transform-origin: 0 0;
    display: block
}

.wa-btn svg {
    width: 18px;
    height: 18px
}

.note {
    margin-top: 8px;
    border: 1px dashed #f4cc6a;
    background: #fff8e1;
    color: #8a6d1a;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .95rem;
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}

#waNum {
    color: #fff !important
}

.flatpickr-calendar {
    z-index: 2600;
    contain: layout paint style;
    /* isolatie in overlay */
}

/* Cookiebar (overlay, geen layout-shift/CLS) */
.cookiebar {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    background: #111;
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
    z-index: 2400;

    /* Animatie zonder layout */
    transform: translateY(calc(100% + 16px));
    transition: transform .25s ease;
    /* Vermijd langdurige will-change (duurder); alleen transform animeren volstaat */

    /* Als verborgen: klik erdoorheen (geen obstakels voor gebruiker) */
    pointer-events: none;

    /* Layout binnenin */
    max-width: 880px;
    margin-inline: auto;
    color-scheme: light dark;
    /* betere autofill/OS contrast */
}

/* Toonstaat (een attribuut i.p.v. extra klasses) */
.cookiebar[aria-hidden="false"] {
    transform: translateY(0);
    pointer-events: auto;
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cookiebar {
        transition: none;
    }
}

/* Binnenwerk */
.cookiebar__inner {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

/* Tekst & linkjes */
.cookiebar__text small {
    display: block;
    opacity: .9;
    margin-top: 2px;
}

.cookiebar__link {
    background: none;
    border: 0;
    color: #b6f0c8;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-top: 6px;
}

/* Knoppen */
.cookiebar__actions {
    display: flex;
    gap: 10px;
}

.cookiebar__actions .btn,
.cookiebar__actions .btn-ghost {
    /* tastbare focus voor toetsenbord */
    outline: none;
}

.cookiebar__actions .btn:focus-visible,
.cookiebar__actions .btn-ghost:focus-visible,
.cookiebar__link:focus-visible {
    outline: 2px solid #b6f0c8;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Voorkeurspaneel */
.cookieprefs {
    background: #fff;
    color: #111;
    border-radius: 0 0 14px 14px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.cookieprefs__row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    align-items: start;
    padding: 8px 0;
}

.cookieprefs__row small {
    grid-column: 2;
    color: #525a6b;
}

.cookieprefs__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
}

/* Responsief: stapel op smalle schermen */
@media (max-width: 540px) {
    .cookiebar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cookiebar__actions {
        justify-content: stretch;
    }
}

/* Optioneel: dark-mode tinten voor voorkeurenpaneel */
@media (prefers-color-scheme: dark) {
    .cookieprefs {
        background: #171a20;
        color: #f3f5f7;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .cookieprefs__row small {
        color: #aab1bb;
    }
}


/* Credit chip */
.credit-chip {
    position: fixed;
    inset-inline: 12px;
    bottom: 14px;
    backdrop-filter: blur(8px) saturate(140%);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(17, 17, 17, .06);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    z-index: 2300;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .8rem;
    justify-content: center;
    align-items: center;
    max-width: min(900px, calc(100vw - 24px));
    font-size: clamp(.85rem, 1.6vw, .95rem);
    line-height: 1.3;
    text-wrap: balance;
}

.credit-chip span {
    white-space: nowrap
}

.credit-chip b {
    font-weight: 800
}

#cb-accept {
    background: #16a34a;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s
}

#cb-decline {
    background: #525a6b;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .15s
}

#cb-accept:hover {
    background: #15803d;
    transform: scale(1.05)
}

#cb-decline:hover {
    background: #3f4655;
    transform: scale(1.05)
}

/* Bel-knop */
#btnCall {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

#btnCall .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0
}

#btnCall .label {
    display: inline
}

/* Header responsiviteit */
.top nav {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 8px;
    flex: 0 0 auto
}

.top nav a.btn {
    white-space: nowrap
}

.logo {
    width: 120px;
    flex: 0 0 120px
}

.top .brand {
    min-width: 0
}

.top .brand h1,
.top .brand .muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width:560px) {
    #btnCall .label {
        display: none
    }

    .logo {
        width: 120px;
        flex: 0 0 120px
    }
}

@media (max-width:880px) {
    .top .brand .muted {
        display: none
    }
}

@media (max-width:760px) {
    .top .brand h1 {
        display: none
    }
}

/* Inside scroll op service-kaarten */
#knippen .card,
#kleuren .card,
#keratine .card {
    max-height: clamp(260px, calc((100svh - var(--headerH)) * .62), 560px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    contain: layout paint;
    /* isolatie */
}

#knippen .card::-webkit-scrollbar,
#kleuren .card::-webkit-scrollbar,
#over .card::-webkit-scrollbar,
#keratine .card::-webkit-scrollbar {
    display: none
}

/* Footer pills + icons-only (container queries) */
.credit-chip {
    container-type: inline-size;
    container-name: chip
}

.credit-chip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
    background: rgba(17, 17, 17, .06);
    border: 1px solid rgba(17, 17, 17, .08);
    color: #111;
    transition: background .25s, color .25s, transform .2s, box-shadow .25s, border-color .25s;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .credit-chip a {
        transition-duration: .15s;
    }
}

.credit-chip a:hover,
.credit-chip a:focus-visible {
    background: #111;
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    outline: none
}

.credit-chip span:has(> a) {
    font-size: 0
}

.credit-chip span:has(> a)>a {
    font-size: clamp(.85rem, 1.6vw, .95rem)
}

.credit-chip a::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.credit-chip a[href^="mailto:"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5Z"/></svg>')
}

.credit-chip a[href*="instagram.com"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm6.5-.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm6.5-.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z"/></svg>')
}

.credit-chip a[href$="/privacy.html"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-6 0V6a2 2 0 1 1 4 0v2h-4Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-6 0V6a2 2 0 1 1 4 0v2h-4Z"/></svg>')
}

.credit-chip a[href$="/faq.html"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 16a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1-5.16V14a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.5-1.5 1 1 0 0 1-2 0 3.5 3.5 0 1 1 4.5 3.34z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 16a1 1 0 1 1 1-1 1 1 0 0 1-1 1zm1-5.16V14a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.5-1.5 1 1 0 0 1-2 0 3.5 3.5 0 1 1 4.5 3.34z"/></svg>');
}



.credit-chip a[href="/"]::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3 2 12h3v9h14v-9h3L12 3Z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 3 2 12h3v9h14v-9h3L12 3Z"/></svg>')
}

@container chip (max-width:650px) {
    .credit-chip span:has(> a)>a {
        font-size: 0 !important;
        overflow: hidden
    }

    .credit-chip a {
        padding: 8px;
        gap: 0
    }

    .credit-chip a::before {
        width: 18px;
        height: 18px
    }
}

@supports not (container-type:inline-size) {
    @media (max-width:900px) {
        .credit-chip span:has(> a)>a {
            font-size: 0 !important;
            overflow: hidden
        }

        .credit-chip a {
            padding: 8px;
            gap: 0
        }

        .credit-chip a::before {
            width: 18px;
            height: 18px
        }
    }
}

/* ==== Anti-copy baseline ==== */
body.nocopy,
body.nocopy *:not(input):not(textarea):not(select):not([contenteditable]) {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

img,
svg {
    -webkit-user-drag: none;
    -user-drag: none
}

.imgish .cover {
    display: block;
    width: 100%;
    height: 100%;
    /* <— belangrijk */
    object-fit: cover;
    /* vult zonder te rekken, snijdt netjes bij */
}

.imgish::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: auto
}

@media (max-width: 640px) {
    .imgish {
        max-height: 200px;
        /* bv. */
    }
}


.logo {
    position: relative
}

.logo img {
    pointer-events: none
}

.logo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: auto
}

#nocopy-toast {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    z-index: 3000;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

/* Datum & tijd naast elkaar met ruimte ertussen */
#boeken .dt-row {
    display: flex;
    gap: 12px;
    /* ← afstand tussen de velden */
    align-items: center;
    flex-wrap: wrap;
    /* breekt onder elkaar op smalle schermen */
}

/* Zorg dat je algemene .input (vaak width:100%) hier meewerkt */
#boeken .dt-row .input {
    flex: 1 1 220px;
    /* beide velden delen de rij */
    min-width: 160px;
    /* voorkom te smal worden */
}

/* Zorg dat alle labels in het formulier dezelfde breedte pakken */
#boeken .formbody label {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    /* mooie ruimte ertussen */
}

/* Inputs, selects, textarea’s dezelfde styling */
#boeken .formbody .input,
#boeken .formbody textarea {
    width: 100%;
    box-sizing: border-box;
    display: block;
}

/* Twee velden naast elkaar (Naam + E-mail) */
#boeken .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* ruimte ertussen */
}

/* Op mobiel onder elkaar */
@media (max-width: 600px) {
    #boeken .row2 {
        grid-template-columns: 1fr;
    }
}

/* ============================
   REVIEWS SECTION – COMPLETE CSS (ALTIJD LIGHT)
   ============================ */

/* Forceer light rendering binnen de sectie */
#reviews,
#reviews * {
    color-scheme: light !important;
}

/* Thema-tokens (light) — lokaal aan #reviews binden */
#reviews {
    --rv-bg: #ffffff;
    --rv-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .95));
    --rv-card: #fff;
    --rv-card-grad: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 250, 250, .96));
    --rv-border: rgba(17, 17, 17, .08);
    --rv-border-strong: rgba(17, 17, 17, .12);
    --rv-text: #0f1115;
    --rv-text-muted: #616770;
    --rv-chip-bg: rgba(17, 17, 17, .06);
    --rv-chip-text: #0f1115;
    --rv-star: #f5a524;
    --rv-quote: rgba(17, 17, 17, .12);
    --rv-shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
    --rv-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    --rv-scrollbar: rgba(17, 17, 17, .25);
    --rv-scrollbar-track: rgba(17, 17, 17, .06);
    --rv-btn-bg: rgba(17, 17, 17, .75);
    --rv-btn-text: #fff;
    --rv-btn-bg-hover: rgba(17, 17, 17, .9);
}

/* Sectie-achtergrond */
#reviews {
    --sec-accent: #7bb2ff;
    --sec-bg: conic-gradient(from 210deg at 20% 10%,
            color-mix(in srgb, var(--sec-accent) 18%, #fff) 0 25%,
            #fffef8 25% 60%,
            color-mix(in srgb, #ff8fb3 16%, #fff) 60% 100%);
    background: var(--sec-bg);
    padding: clamp(16px, 4vw, 28px);
}

/* ✅ overschrijft de full-screen snap */
#reviews.snap {
    height: auto;
    /* niet meer 100% scherm */
    min-height: 60vh;
    /* geef wel een minimale hoogte zodat je erheen kunt scrollen */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#reviews .section-inner {
    min-height: 0;
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: var(--space);
}

/* Hoofdomhulsel */
#reviews .reviews {
    background: var(--rv-bg-soft) !important;
    border: 1px solid var(--rv-border) !important;
    border-radius: 16px;
    box-shadow: var(--rv-shadow-sm);
    padding: clamp(12px, 2.4vw, 18px);
    color: var(--rv-text) !important;
    backdrop-filter: blur(6px) saturate(130%);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    max-width: 1000px;
    width: 100%;
    min-height: 0;
    max-height: none;
    /* ✅ laat content hoogte bepalen */
    /* lazy render */
    content-visibility: auto;
    contain-intrinsic-size: 600px 800px;
}

@media (max-width: 600px) {
    #reviews .reviews {
        contain-intrinsic-size: 480px 640px;
    }
}

/* ===== Header ===== */
#reviews .reviews__head {
    padding: clamp(8px, 1.6vw, 12px);
    border: 1px solid var(--rv-border);
    border-radius: 12px;
    background: var(--rv-card) !important;
    background-image: var(--rv-card-grad) !important;
    box-shadow: var(--rv-shadow-sm);
    container-type: inline-size;
    container-name: reviews-head;
}

#reviews .reviews__head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.6vw, 14px);
    flex-wrap: nowrap;
    min-width: 0;
}

#reviews .reviews__head-inner>* {
    min-width: 0;
}

#reviews .reviews__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-chip-bg);
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

#reviews .reviews__g {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
}

@media (prefers-color-scheme: dark) {
    #reviews .reviews__g {
        /* klein tintje behoudt helderheid logo op OLED, blijft verder light */
        filter: saturate(1.1) brightness(1.05) contrast(1.02);
    }
}

#reviews .reviews__google {
    font-weight: 700;
    color: var(--rv-chip-text);
    font-size: .98rem;
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reviews .reviews__titles {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

#reviews .reviews__title {
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reviews .reviews__sub {
    margin: 0;
    color: var(--rv-text-muted);
    font-size: clamp(.85rem, 1.2vw, .95rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reviews .reviews__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--rv-border);
    border-radius: 999px;
    background: var(--rv-chip-bg);
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
}

#reviews .reviews__stars {
    color: var(--rv-star);
    font-size: 1.05rem;
    letter-spacing: .08em;
    line-height: 1;
}

#reviews .reviews__avg {
    font-size: 1rem;
    font-weight: 800;
    color: var(--rv-chip-text);
}

#reviews .reviews__based {
    font-size: .9rem;
    color: var(--rv-text-muted);
}

/* Progressief verbergen via container queries */
@container reviews-head (max-width: 760px) {
    #reviews .reviews__sub {
        display: none;
    }
}

@container reviews-head (max-width: 620px) {
    #reviews .reviews__based {
        display: none;
    }
}

@container reviews-head (max-width: 520px) {
    #reviews .reviews__google {
        display: none;
    }
}

@container reviews-head (max-width: 460px) {
    #reviews .reviews__title {
        font-size: clamp(1rem, 3.5vw, 1.15rem);
    }

    #reviews .reviews__stars,
    #reviews .reviews__avg {
        font-size: .95rem;
    }
}

/* ===== Viewport ===== */
#reviews .reviews__viewport {
    position: relative;
    border: 1px solid var(--rv-border) !important;
    border-radius: 12px;
    background: var(--rv-card) !important;
    background-image: var(--rv-card-grad) !important;
    box-shadow: var(--rv-shadow);
    isolation: isolate;
    min-width: 0;
    max-height: none;
    padding: clamp(10px, 2vw, 14px);
}

/* ===== HORIZONTALE LIJST ===== */
#reviews .reviews__list {
    --rv-card-w: clamp(280px, 88%, 420px);
    margin: 0;
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--rv-card-w);
    gap: clamp(10px, 2.2vw, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-scrollbar) var(--rv-scrollbar-track);
}

#reviews .reviews__list::-webkit-scrollbar {
    height: 10px;
}

#reviews .reviews__list::-webkit-scrollbar-track {
    background: var(--rv-scrollbar-track);
    border-radius: 999px;
}

#reviews .reviews__list::-webkit-scrollbar-thumb {
    background: var(--rv-scrollbar);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ===== Controls ===== */
#reviews .reviews__controls {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#reviews .reviews__btn {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--rv-border-strong) !important;
    background: var(--rv-btn-bg) !important;
    color: var(--rv-btn-text) !important;
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
    box-shadow: var(--rv-shadow-sm);
    /* micro-opt: soepelere animatie zonder extra paints */
    will-change: transform;
    backface-visibility: hidden;
}

@media (max-width: 600px) {
    #reviews .reviews__btn {
        transition-duration: .15s;
    }
}

#reviews .reviews__btn:hover {
    background: var(--rv-btn-bg-hover) !important;
    transform: translateY(-50%) scale(1.04);
}

#reviews .reviews__btn:active {
    transform: translateY(-50%) scale(.98);
}

#reviews #reviews-prev {
    left: 8px;
}

#reviews #reviews-next {
    right: 8px;
}

/* ===== Cards ===== */
#reviews .reviews__card {
    scroll-snap-align: start;
    display: grid;
    grid-template-rows: auto auto 20px 1fr;
    gap: 8px;
    padding: clamp(10px, 2.2vw, 14px);
    background: var(--rv-card) !important;
    background-image: var(--rv-card-grad) !important;
    border: 1px solid var(--rv-border) !important;
    border-radius: 12px;
    box-shadow: var(--rv-shadow-sm);
    min-height: 200px;
    /* ✅ compacter */
}

#reviews .reviews__quote {
    width: 22px;
    height: 22px;
    opacity: .55;
    color: var(--rv-quote);
}

#reviews .reviews__meta {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
}

#reviews .reviews__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rv-scrollbar-track);
    border: 1px solid var(--rv-border);
    display: grid;
    place-items: center;
    overflow: hidden;
}

#reviews .reviews__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#reviews .reviews__who {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

#reviews .reviews__name {
    font-weight: 700;
    color: var(--rv-text) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reviews .reviews__date {
    color: var(--rv-text-muted) !important;
    font-size: .9rem;
    white-space: nowrap;
}

#reviews .reviews__stars-row {
    color: var(--rv-star);
    letter-spacing: .08em;
    line-height: 1;
    font-size: 1rem;
}

/* Verticale inside scroll voor tekst */
#reviews .reviews__text {
    color: var(--rv-text) !important;
    font-size: .98rem;
    line-height: 1.5;
    max-height: clamp(100px, 18vh, 160px);
    /* ✅ iets lager */
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--rv-scrollbar) var(--rv-scrollbar-track);
}

#reviews .reviews__text::-webkit-scrollbar {
    width: 10px;
}

#reviews .reviews__text::-webkit-scrollbar-track {
    background: var(--rv-scrollbar-track);
    border-radius: 999px;
}

#reviews .reviews__text::-webkit-scrollbar-thumb {
    background: var(--rv-scrollbar);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* "meer lezen" verbergen */
#reviews .reviews__more {
    display: none !important;
}

#reviews .reviews__rest {
    display: inline;
}

/* Klein extra duwtje op small devices */
@media (max-width: 420px) {

    #reviews .reviews__stars,
    #reviews .reviews__stars-row,
    #reviews .reviews__avg {
        font-size: .95rem;
        letter-spacing: .06em;
    }
}

/* Focus */
#reviews .reviews__btn:focus-visible,
#reviews .reviews__list:focus-visible,
#reviews .reviews__card:focus-within {
    outline: 2px solid color-mix(in oklab, var(--rv-star) 60%, #00f 0%);
    outline-offset: 2px;
    border-radius: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #reviews .reviews__list {
        scroll-behavior: auto;
    }

    #reviews .reviews__btn {
        transition: none;
    }
}

/* Mobile: kortere transities op diverse interactieve elementen */
@media (max-width: 600px) {

    .credit-chip a,
    .btn,
    .btn-ghost,
    .cookiebar {
        transition-duration: .15s !important;
    }
}