/* #region BASIS SECTION */
:root {
    /* Merkrood — getemperd (OKLCH 0.585 / 0.205 / 26.4, WCAG AA op wit: 4.65:1) */
    --hoofdkleur-rood: #fa403e;
    --hoofdkleur-rood-hover: #dd1e26;
    --hoofdkleur-rood-dark: #b3131b;
    --hoofdkleur-rood-muted: rgba(250, 64, 62, 0.12);
    --hoofdkleur-rood-muted-light: rgba(250, 64, 62, 0.08);
    --hoofdkleur-rood-shadow: rgba(250, 64, 62, 0.25);
    --hoofdkleur-rood-shadow-strong: rgba(250, 64, 62, 0.35);
    --hoofdkleur-rood-shadow-light: rgba(250, 64, 62, 0.2);
    --hoofdkleur-rood-shine: #ffb4ab;

    /* Accent */
    --hoofdkleur-groen: #57ff24;
    --hoofdkleur-groen-licht: #5df771;
    --kleur-google-ster: #fbbc04;
    /* Het vinkje na een geslaagde inschrijving, en niets anders. Bewust een ander groen dan
       beschikbaarheid-groen hierboven: dat is een statussignaal ("nu vrij"), dit een
       bevestiging achteraf. Stond tot 24/08/2026 als losse hex in .success-icon, de enige
       hardcoded kleur in dit blad. */
    --kleur-bevestiging: #10b981;

    /* Tekst */
    --tekst-donker: #1d1d1b;
    --tekst-body: #333333;
    --tekst-muted: #666666;
    --tekst-secondary: #555555;
    --tekst-subtle: #888888;
    --tekst-placeholder: #bbbbbb;
    --tekst-footer: #dadada;
    --tekst-wit-muted: rgba(255, 255, 255, 0.65);
    --tekst-wit-soft: rgba(255, 255, 255, 0.78);
    --tekst-wit-strong: rgba(255, 255, 255, 0.85);
    --tekst-wit-faint: rgba(255, 255, 255, 0.55);

    /* Achtergrond */
    --wit: #ffffff;
    --grijze-achtergrond: #f2f2f2;
    --achtergrond-tab: rgb(250, 250, 250);
    --achtergrond-licht: #f8f9fa;
    --achtergrond-subtle: #fafafa;
    --achtergrond-kaart: #1a1a1a;
    --achtergrond-kaart-donker: #141414;
    --zwart: #000000;
    --donker-achtergrond: #222222;
    --grijs-medium: #d8d8d8;
    --grijs-licht: #dddddd;

    /* Rand */
    --rand-licht: #eeeeee;
    --rand-subtle: #e9e9e9;
    --rand-medium: #e5e7eb;
    --rand-zacht: #e8e8e8;
    --rand-neutraal: #e0e0e0;
    --rand-rij: #f9f9f9;
    --rand-donker: #333333;
    --rand-tabel: rgb(100, 100, 100);
    --rand-wit-muted: rgba(255, 255, 255, 0.12);
    --rand-zwart-licht: rgba(0, 0, 0, 0.06);
    --rand-zwart-medium: rgba(0, 0, 0, 0.08);
    --rand-zwart-subtle: rgba(0, 0, 0, 0.05);

    /* Overlay */
    --overlay-zwart-subtle: rgba(0, 0, 0, 0.03);
    --overlay-zwart-muted: rgba(0, 0, 0, 0.45);
    --overlay-zwart-lightbox: rgba(0, 0, 0, 0.85);
    --overlay-wit-subtle: rgba(255, 255, 255, 0.08);

    /* Schaduw */
    --schaduw-zwart-licht: rgba(0, 0, 0, 0.05);
    --schaduw-zwart-medium: rgba(0, 0, 0, 0.1);
    --schaduw-zwart-nav: rgba(0, 0, 0, 0.12);
    --schaduw-zwart-kaart: rgba(0, 0, 0, 0.16);
    --schaduw-zwart-strong: rgba(0, 0, 0, 0.2);
    --schaduw-zwart-intense: rgba(0, 0, 0, 0.25);
    --schaduw-zwart-diep: rgba(0, 0, 0, 0.3);
    --schaduw-zwart-zacht: rgba(0, 0, 0, 0.08);

    /* Status / semantisch */
    --kleur-fout: #e74c3c;
    --kleur-fout-donker: #d32f2f;
    --kleur-fout-licht: #c92a2a;
    --achtergrond-fout: rgba(231, 76, 60, 0.05);
    /* Ring rond een veld dat de verzendcontrole tegenhield: zelfde vorm als de rode
       focusring, maar in de foutkleur. Zonder deze staat er 3px vol #d32f2f rond het veld. */
    --kleur-fout-muted: rgba(211, 47, 47, 0.18);
    --kleur-amber: #b45309;
    --achtergrond-amber-zacht: #fef3c7;
    --rand-amber: #fcd34d;
    --achtergrond-waarschuwing: #ffe3e3;
    --achtergrond-inactief: #dee2e6;
    --tekst-inactief: #868e96;
    --achtergrond-input: #f3f3f3;
    --overlay-wit-strong: rgba(255, 255, 255, 0.8);
    --rand-wit-medium: rgba(255, 255, 255, 0.6);
    --rand-wit-strong: rgba(255, 255, 255, 0.8);
    --overlay-wit-faint: rgba(255, 255, 255, 0.1);

    /* Letter-spacing */
    --letter-spacing-nav: 0.5px;
    --letter-spacing-label: 1px;
    --letter-spacing-caps: 0.06em;
    --letter-spacing-tight: 0.02em;
    --letter-spacing-subtle: 0.2px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-btn-sm: 5px;
    --radius-btn: 8px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 20px;
    --radius-3xl: 25px;
    --radius-compact: 10px;
    --radius-pill: 40%;
    --radius-round: 50%;
    --radius-badge: 50px;

    /* Typografie — font-family */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Typografie — schaal (basis 16px op html) */
    --font-size-2xs: 0.65rem;
    --font-size-xs: 0.8rem;
    --font-size-sm-compact: 0.85rem;
    --font-size-sm-alt: 0.875rem;
    --font-size-sm: 0.9rem;
    --font-size-sm-plus: 0.95rem;
    --font-size-base: 1rem;
    --font-size-md: 1.05rem;
    --font-size-nav: 1.1rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
    --font-size-price: 3.5rem;
    --font-size-tab: 1.125rem;
    --font-size-icon-md: 1.25rem;
    --font-size-icon-lg: 1.875rem;

    /* Typografie — responsieve koppen */
    --font-size-hero-title: clamp(2.5rem, 5vw, 4rem);
    --font-size-hero-subtitle: clamp(0.75rem, 5vw, 1.25rem);
    --font-size-hero-label: clamp(0.7rem, 5vw, 1rem);
    --font-size-display: clamp(4rem, 12vw, 7rem);
    --font-size-heading-xl: clamp(1.5rem, 2.5vw + 1rem, 2.2rem);
    --font-size-heading-lg: clamp(1.2rem, 2vw + 0.8rem, 1.8rem);
    --font-size-heading-md: clamp(1.25rem, 2vw + 0.8rem, 1.8rem);
    --font-size-heading-sm: clamp(1rem, 1.5vw + 0.5rem, 1.3rem);
    --font-size-body-lg: clamp(0.95rem, 1.2vw + 0.5rem, 1.2rem);
    --font-size-body-md: clamp(0.95rem, 1.2vw + 0.5rem, 1.15rem);
    --font-size-body-sm: clamp(0.9rem, 1.1vw + 0.5rem, 1.15rem);
    --font-size-card-title: clamp(1.5rem, 5vw, 2rem);
    --font-size-card-sub: clamp(0.5rem, 5vw, 0.9rem);
    --font-size-card-price: clamp(1rem, 10vw, 2rem);
    --font-size-troef: clamp(0.85rem, 1vw + 0.4rem, 0.95rem);
    --font-size-card-sub-tight: clamp(0.5rem, 3vw, 0.8rem);
    --font-size-faq-title: clamp(1rem, 1.5vw + 0.8rem, 1.8rem);
    --font-size-faq-intro: clamp(0.85rem, 1vw + 0.4rem, 1rem);
    --font-size-faq-heading: clamp(1rem, 1.2vw + 0.5rem, 1.2rem);
    --font-size-faq-text: clamp(0.9rem, 1.1vw + 0.5rem, 1.1rem);
    --font-size-vacature-title: clamp(0.95rem, 1.5vw + 0.7rem, 1.8rem);

    /* Typografie — gewicht */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Typografie — line-height */
    --line-height-tight: 1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-base: 1.5;
    --line-height-reading: 1.65;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
}

html {
    font-size: 16px;
}

html,
body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-relaxed);
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background-color: var(--grijze-achtergrond);

    background-image: url(/image/background-pattern.svg);
    background-repeat: repeat;

    background-size: 400px;
    scroll-behavior: smooth;
}

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

a {
    cursor: pointer;
    text-decoration: none;
}

header+section,
main {
    flex: 1;
}

/* #endregion */

/* #region HEADER & NAVIGATIE SECTION */

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2001;
    background-color: var(--wit);
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px var(--schaduw-zwart-medium);
}

/* Logo-container laat logo meeschalen op kleine schermen */
nav .logo {
    max-width: 100%;
    display: flex;
    align-items: center;
}

.logo img {
    max-width: 100%;
    width: 350px;
    height: auto;
    min-width: 100px;
    /* niet te klein op zeer smalle schermen */
    display: block;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.logo img:hover {
    transform: scale(1.05);
}

/* Alleen de hoofdnav-balk (directe ul onder nav), niet het dropdown-ul */
nav>ul:not(.sidebar) {
    width: 97%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    max-width: 1600px;
}

nav>ul:not(.sidebar)>li {
    height: 100%;
    flex-shrink: 0;
    /* voorkomt afkappen van tekst na deploy (andere viewport/font) */
}

nav>ul:not(.sidebar)>li:first-child {
    margin-right: auto;
    min-width: 0;
    /* logo-li mag krimpen zodat logo kan meeschalen */
}

/* Alleen de directe nav-links (niet de dropdown-links) */
nav>ul:not(.sidebar)>li>a {
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: var(--tekst-donker);
    transition: background-color 0.3s ease;
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

/* Nav links: de rode highlight is één gedeelde pill die meeschuift (.nav-pill) */
nav>ul:not(.sidebar)>li>a:not(.logo) {
    white-space: nowrap;
    /* volledige woorden (Motortraining, Sfeerbeelden) niet afkappen */
    gap: 8px;
    transition: color 0.28s ease;
}

nav>ul:not(.sidebar)>li>a:not(.logo):hover,
nav>ul:not(.sidebar)>li.is-open>a {
    color: var(--hoofdkleur-rood);
    background-color: transparent;
}

nav>ul:not(.sidebar)>li>a:not(.logo):focus-visible {
    color: var(--hoofdkleur-rood);
    outline: 2px solid var(--hoofdkleur-rood);
    outline-offset: -6px;
    border-radius: var(--radius-badge);
}

/* Meeschuivende pill-highlight achter de nav-links (positie/breedte via JS) */
.nav-pill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 40px;
    margin-top: -20px;
    border-radius: var(--radius-badge);
    background-color: var(--hoofdkleur-rood-muted-light);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
        width 0.42s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.2s ease;
}

.nav-pill.is-visible {
    opacity: 1;
}

/* Verspringen zonder animatie: eerste verschijning en na resize */
.nav-pill.is-instant {
    transition: opacity 0.2s ease;
}

/* Dropdowns: click op de trigger = overzichtspagina, hover/focus = submenu */
nav>ul:not(.sidebar)>li.nav-dropdown {
    position: relative;
}

/* Chevron — zelfde vorm als de sidebar-toggle op mobiel */
nav>ul:not(.sidebar)>li.nav-dropdown>a::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.45;
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}

nav>ul:not(.sidebar)>li.nav-dropdown>a:hover::after,
nav>ul:not(.sidebar)>li.nav-dropdown.is-open>a::after {
    opacity: 1;
}

nav>ul:not(.sidebar)>li.nav-dropdown.is-open>a::after {
    transform: translateY(1px) rotate(-135deg);
}

/* ── Gedeeld dropdown-paneel: één doos die morpht tussen de menu's ──
   Opgebouwd door script.js; zonder JS blijft de fallback hieronder staan. */
.nav-viewport {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
        width 0.38s cubic-bezier(0.32, 0.72, 0, 1),
        height 0.38s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.22s ease,
        visibility 0.22s;
}

/* Onzichtbare brug over de kier: hover breekt niet af onderweg naar het paneel */
.nav-viewport::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

.nav-viewport.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Eerste opening: meteen op de juiste plek, alleen in-faden */
.nav-viewport.is-instant {
    transition: opacity 0.22s ease, visibility 0.22s;
}

.nav-viewport-arrow {
    position: absolute;
    top: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    background-color: var(--wit);
    border-left: 1px solid var(--rand-zwart-medium);
    border-top: 1px solid var(--rand-zwart-medium);
    transform: translateX(0) rotate(45deg);
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1;
}

.nav-viewport.is-instant .nav-viewport-arrow {
    transition: none;
}

.nav-viewport-box {
    position: absolute;
    inset: 0;
    background-color: var(--wit);
    border: 1px solid var(--rand-zwart-licht);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px var(--schaduw-zwart-strong);
    overflow: hidden;
    transform: scale(0.97);
    transform-origin: top center;
    transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-viewport.is-open .nav-viewport-box {
    transform: scale(1);
}

.nav-viewport-inner {
    position: absolute;
    inset: 0;
}

/* Menu-paneel in gedeelde modus: gestapeld, alleen het actieve is zichtbaar */
nav.nav-enhanced .nav-viewport .nav-dropdown-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    min-width: 210px;
    padding: 6px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: none;
}

nav.nav-enhanced .nav-viewport .nav-dropdown-menu.is-active {
    opacity: 1;
    visibility: visible;
}

/* Fallback zonder JS: klassiek paneel onder de li */
nav .nav-dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    padding: 6px;
    min-width: 210px;
    width: max-content;
    background: var(--wit);
    box-shadow: 0 10px 30px var(--schaduw-zwart-strong);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 100;
    border: 1px solid var(--rand-zwart-licht);
}

nav:not(.nav-enhanced) .nav-dropdown:hover .nav-dropdown-menu,
nav:not(.nav-enhanced) .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

nav .nav-dropdown-menu li {
    display: block;
    height: auto;
}

nav .nav-dropdown-menu a {
    display: block;
    padding: 17px 24px;
    border-radius: var(--radius-compact);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    line-height: var(--line-height-tight);
    color: var(--tekst-donker);
    white-space: nowrap;
    height: auto;
    transition: background-color 0.18s ease, color 0.18s ease;
}

nav .nav-dropdown-menu a::after,
nav .nav-dropdown-menu a::before {
    display: none;
}

nav .nav-dropdown-menu a:hover {
    background-color: var(--hoofdkleur-rood-muted-light);
    color: var(--hoofdkleur-rood);
    transform: none;
}

nav .nav-dropdown-menu a:focus-visible {
    background-color: var(--hoofdkleur-rood-muted-light);
    color: var(--hoofdkleur-rood);
    outline: 2px solid var(--hoofdkleur-rood);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {

    .nav-pill,
    .nav-viewport,
    .nav-viewport-arrow,
    .nav-viewport-box {
        transition: opacity 0.15s linear, visibility 0.15s linear;
    }

    .nav-viewport-box,
    .nav-viewport.is-open .nav-viewport-box {
        transform: none;
    }

    nav>ul:not(.sidebar)>li.nav-dropdown>a::after {
        transition: none;
    }

    nav .nav-dropdown-menu {
        transform: none;
        transition: opacity 0.15s linear, visibility 0.15s linear;
    }

    .sidebar {
        transition: opacity 0.15s linear, visibility 0.15s linear;
    }
}

/* Scroll-lock zodra het mobiele menu open staat */
body.nav-open {
    overflow: hidden;
}

.menu-button-container {
    display: none;
    cursor: pointer;
    z-index: 3001;
    height: 72px;
    width: 60px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.menu-button-container button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-button {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bar1,
.bar2,
.bar3 {
    width: 100%;
    height: 3px;
    background-color: var(--tekst-donker);
    border-radius: var(--radius-sm);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.open .bar1 {
    transform: translateY(9.5px) rotate(-45deg);
}

.open .bar2 {
    opacity: 0;
    transform: translateX(15px);
}

.open .bar3 {
    transform: translateY(-9.5px) rotate(45deg);
}

.sidebar {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    height: calc(100dvh - 72px);
    z-index: 3000;
    background-color: var(--wit);
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.4s ease, visibility 0.4s, opacity 0.4s;

    border-top: none;
    overflow-y: auto;
}

.sidebar.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.sidebar>li {
    width: 100%;
    flex-shrink: 0;

    border-top: 1px solid var(--tekst-donker);
}

/* Linkinhoud capt op bredere schermen (tot 1450px-drempel) zodat rijen niet
   uitgerekt ogen; divider (border-top op de li hierboven) blijft wel 100vw dekkend */
.sidebar a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    height: 60px;

    padding: 0 25px;
    color: var(--tekst-donker);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s;
}

.sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.sidebar-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.sidebar-icon svg.icon-stroke {
    fill: none;
}

.sidebar-label {
    flex: 1;
    min-width: 0;
}

.sidebar-dropdown-toggle .sidebar-label {
    padding-right: 8px;
}

.sidebar-dropdown-toggle::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    opacity: 0.55;
}

.sidebar-dropdown.open>.sidebar-dropdown-toggle::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.sidebar :active {
    background-color: var(--overlay-zwart-subtle);
    color: var(--hoofdkleur-rood);
}

/* Sidebar-footer: duwt contact + CTA naar onder via margin-top:auto,
   vult de lege ruimte die overblijft onder een korte linklijst */
.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: auto;
    padding: 20px 25px 28px;
}

.sidebar-footer .sidebar-footer-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: auto;
    padding: 0;
    text-transform: none;
    color: var(--tekst-donker);
    font-weight: var(--font-weight-semibold);
}

.sidebar-footer .sidebar-footer-tel .sidebar-label {
    flex: none;
}

.sidebar-footer .sidebar-footer-tel .sidebar-icon svg {
    fill: var(--hoofdkleur-rood);
}

.sidebar-footer .sidebar-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 14px 20px;
    border-radius: var(--radius-badge);
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    transition: background-color 0.3s ease;
}

.sidebar-footer .sidebar-footer-cta:hover,
.sidebar-footer .sidebar-footer-cta:active {
    background: var(--hoofdkleur-rood-dark);
    color: var(--wit);
}

/* Sidebar dropdown Kantoren */
.sidebar .sidebar-dropdown {
    border-top: 1px solid var(--tekst-donker);
}

.sidebar .sidebar-dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    background-color: var(--overlay-zwart-subtle);
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.35s ease-out, opacity 0.25s ease-out, transform 0.25s ease-out;
}

.sidebar .sidebar-dropdown.open .sidebar-dropdown-menu {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.4s ease-in, opacity 0.3s ease-out, transform 0.3s ease-out;
}

.sidebar .sidebar-dropdown.open .sidebar-dropdown-menu--lg {
    max-height: 320px;
}

.sidebar .sidebar-dropdown-menu li {
    border-top: 1px solid var(--rand-zwart-medium);
}

.sidebar .sidebar-dropdown-menu a {
    height: 52px;
    padding-left: 40px;
    font-size: var(--font-size-sm-plus);
}

.sidebar .sidebar-dropdown.open>a.sidebar-dropdown-toggle {
    color: var(--hoofdkleur-rood);
}

.sidebar .sidebar-dropdown-soon {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 25px 0 40px;
    color: var(--overlay-zwart-muted);
    font-size: var(--font-size-sm-plus);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
}

.sidebar .sidebar-dropdown-soon-badge {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    color: var(--hoofdkleur-rood);
    margin-left: 0.45em;
    text-transform: uppercase;
}

nav .nav-dropdown-item--soon {
    display: block;
    padding: 17px 24px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    line-height: var(--line-height-tight);
    color: var(--overlay-zwart-muted);
    white-space: nowrap;
    cursor: default;
    pointer-events: none;
}

nav .nav-dropdown-soon-badge {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    color: var(--hoofdkleur-rood);
    margin-left: 0.45em;
}

@media (max-width: 1450px) {
    .hideOnMobile {
        display: none !important;
    }

    .menu-button-container {
        display: flex !important;
    }

    /* Mobiele variant: logo moet altijd in beeld blijven naast hamburger */
    nav>ul:not(.sidebar) {
        width: 100%;
        padding: 0 8px;
    }

    nav .logo {
        max-width: calc(100vw - 90px);
        /* ruimte voor hamburger (60px) + marge */
        min-width: 0;
        overflow: hidden;
        padding-left: 4px;
        padding-right: 8px;
    }

    .logo img {
        max-width: 100%;
        width: 100%;
        min-width: 80px;
        height: auto;
    }
}

/* Introtekst: korte variant op mobiel */
.intro-short {
    display: none;
}

@media (max-width: 640px) {
    .intro-long {
        display: none;
    }

    .intro-short {
        display: inline;
    }
}

/* #endregion */

/* #region HERO SECTION */

.hero-container {
    margin-top: 70px;
    min-height: 40vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 40px 20px;
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    overflow: visible;

    z-index: 10;

}

.hero-text h1 {
    font-size: var(--font-size-hero-title);
    /* DESIGN.md schrijft 1.3 voor de Headline voor; zonder deze regel erft de
       kop de 1.6 van de body en wordt een kop van 40px 64px hoog per regel. */
    line-height: var(--line-height-snug);
    margin-bottom: 20px;
    max-width: 600px;
    color: var(--tekst-donker);
    text-align: left;

    opacity: 0;

    transform: translateX(-60px);

    animation: slideInLeft 0.5s ease-out forwards;
    animation-delay: 0s;

}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

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

.hero-text .subtitle {
    font-size: var(--font-size-hero-subtitle);
    margin-bottom: 20px;
    max-width: 600px;
    color: var(--tekst-donker);
    text-align: left;

    opacity: 0;

    transform: translateX(160px);

    animation: slideInRight 0.5s ease-out forwards;
    animation-delay: 0.06s;

}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

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

.hero-motor {
    position: absolute;
    right: 0px;
    bottom: -120px;
    max-width: 1061px;

    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transform: translateX(100%);
    animation: driveInRight 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0s;
}

@keyframes driveInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .hero-motor {
        max-width: 620px;
        bottom: -70px;
    }
}

@media (max-width: 1199px) {
    .hero-motor {
        display: none;
    }
}

@media (max-width: 1366px) {
    .hero-container {
        min-height: auto;

        padding-top: 60px;

        padding-bottom: 60px;
        justify-content: flex-start;

    }
}

@media (max-width: 768px) {
    .hero-container {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 40px;
    }

    /* De 5vw in --font-size-hero-title komt op een telefoon nooit boven de
       ondergrens van 2.5rem uit, dus kreeg elk scherm van 320 tot 768px
       dezelfde kop van 40px. Deze clamp schaalt wel mee en raakt op 768px
       precies diezelfde 40px, zodat er bij de breakpoint niets verspringt. */
    .hero-text h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    }
}

/* CTA en quick-nav-kaarten zetten de hero-intro voort: tekst en motor komen
   rond 0.55s tot rust, de kaarten volgen direct erna in een korte stagger. */
.opleiding-btn {
    animation: heroFallIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.22s;
}

.quick-nav .nav-card-trigger,
.quick-nav>a.nav-card {
    animation: heroFallIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(0.28s + var(--i, 0) * 50ms);
}

@keyframes heroFallIn {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

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

@media (prefers-reduced-motion: reduce) {

    .hero-text h1,
    .hero-text .subtitle,
    .hero-motor,
    .opleiding-btn,
    .quick-nav .nav-card-trigger,
    .quick-nav>a.nav-card,
    .feature-item {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.quick-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    --quick-nav-gap: 20px;

    gap: var(--quick-nav-gap);
    margin-top: 30px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding: 0;
}

.nav-card {

    background: var(--donker-achtergrond);

    border-radius: var(--radius-lg);

    padding: 10px;
    text-align: center;
    text-decoration: none;

    color: var(--wit);

    display: flex;
    flex-direction: column;
    align-items: center;

    border-bottom: 3px solid var(--hoofdkleur-rood);

    box-shadow: 0 8px 20px var(--schaduw-zwart-strong);

    transition: transform 0.3s ease;
}

.nav-card svg {
    fill: var(--wit);
    margin-bottom: 10px;
    width: 35px;
    height: 35px;
}

.nav-card svg.icon-stroke {
    fill: none;
}

.nav-card h3 {
    color: var(--wit);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    margin: 0;
}

.nav-card:active {
    transform: scale(0.95);

    background-color: var(--achtergrond-kaart);
}

.nav-card:hover {
    transform: scale(1.05);
}

/* Auto/Motor-knoppen in grid; lijst op aparte rij (ruimte via grid-gap) */
.nav-card-expandable {
    display: contents;
}

/* Bovenste rij vast: Auto links, Motor rechts — panel duwt enkel lagere knoppen omlaag */
.quick-nav>.nav-card-trigger:nth-of-type(1) {
    grid-row: 1;
    grid-column: 1;
}

.quick-nav>.nav-card-trigger:nth-of-type(2) {
    grid-row: 1;
    grid-column: 2;
}

.quick-nav>.nav-card-trigger:nth-of-type(3) {
    grid-row: 2;
    grid-column: 2;
}

.nav-card-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: none;
    border-bottom: 3px solid var(--hoofdkleur-rood);
    cursor: pointer;
    font: inherit;
    position: relative;
    padding-right: 28px;
    box-sizing: border-box;
    transform: none;
    transition:
        border-radius 0.35s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.35s ease,
        border-bottom 0.2s ease;
}

.nav-card-expandable .nav-card-trigger:hover,
.nav-card-expandable .nav-card-trigger:active {
    transform: none;
    background-color: var(--donker-achtergrond);
}

.nav-card-expandable.open .nav-card-trigger,
.nav-card-expandable.open .nav-card-trigger:hover,
.nav-card-expandable.open .nav-card-trigger:active {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    box-shadow: none;
    transform: none;
    z-index: 2;
    overflow: visible;
}

/* Brug Motor → menu (vult grid-gap onder Motor-kolom) */
.nav-card-expandable.open .nav-card-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--quick-nav-gap) - 2px);
    height: calc(var(--quick-nav-gap) + 4px);
    background: var(--donker-achtergrond);
    z-index: 2;
}

.nav-card-trigger .nav-card-chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--wit);
    border-bottom: 2px solid var(--wit);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.25s ease;
}

.nav-card-expandable.open .nav-card-trigger .nav-card-chevron {
    transform: translateY(-35%) rotate(-135deg);
}

/* Open/dicht-animatie loopt via de Web Animations API in script.js (FLIP,
   enkel transform/opacity) — hier alleen statische open/dicht-styling. */
.nav-card-panel {
    display: none;
    grid-column: 1 / -1;
    overflow: hidden;
    margin: 0;
    background: var(--donker-achtergrond);
    border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
    border-bottom: none;
    box-shadow:
        0 8px 20px var(--schaduw-zwart-strong),
        inset 0 -3px 0 var(--hoofdkleur-rood);
    box-sizing: border-box;
}

.nav-card-expandable.open .nav-card-panel {
    display: block;
    position: relative;
    overflow: hidden;
    margin-top: -2px;
}

.nav-card-panel-inner {
    padding-bottom: 0;
}

#auto-nav-panel,
#motor-nav-panel {
    grid-row: 2;
}

#motortraining-nav-panel {
    grid-row: 3;
}

/* Rechter dropdowns: linksboven afgerond, rechtsboven recht (onder knop) */
#motor-nav-panel,
#motortraining-nav-panel {
    border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
}

/* Verberg rode onderrand van de knop links wanneer rechts dropdown open is */
.quick-nav:has([data-quick-nav-expandable].open #motor-nav-panel)>.nav-card-trigger:nth-of-type(1) {
    border-bottom-color: transparent;
}

.quick-nav:has([data-quick-nav-expandable].open #motortraining-nav-panel)>a.nav-card {
    border-bottom-color: transparent;
}

/* Extra brug vanaf menu-top (rechts, onder Motor) – sluit naad met knop */
.nav-card-expandable.open #motor-nav-panel::before,
.nav-card-expandable.open #motortraining-nav-panel::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--quick-nav-gap) - 2px);
    right: 0;
    width: calc((100% - var(--quick-nav-gap)) / 2);
    height: calc(var(--quick-nav-gap) + 4px);
    background: var(--donker-achtergrond);
    z-index: 1;
}

/* Auto-dropdown: linksboven recht, rechtsboven afgerond */
#auto-nav-panel {
    border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}

@media (max-width: 1200px) and (min-width: 301px) {
    .nav-card-expandable.open .nav-card-panel {
        justify-self: start;
        border-top: 2px solid var(--donker-achtergrond);
    }
}

@media (max-width: 300px) {
    .nav-card-expandable.open .nav-card-panel {
        width: 100% !important;
        margin-right: 0 !important;
    }
}

.nav-card-panel a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--wit);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    border-top: 1px solid var(--rand-wit-muted);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-card-panel a:first-child {
    border-top: none;
}

.nav-card-panel a:hover,
.nav-card-panel a:focus-visible {
    background-color: var(--overlay-wit-subtle);
    color: var(--wit);
    outline: none;
}

.nav-card-panel a.nav-card-panel-link {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 0.55em;
    text-transform: none;
    letter-spacing: normal;
}

.nav-card-panel-link-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    line-height: var(--line-height-snug);
}

.nav-card-panel-link-meta {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: var(--letter-spacing-subtle);
    color: var(--tekst-wit-muted);
    line-height: var(--line-height-snug);
    white-space: nowrap;
}

.nav-card-panel a.nav-card-panel-link:hover .nav-card-panel-link-meta,
.nav-card-panel a.nav-card-panel-link:focus-visible .nav-card-panel-link-meta {
    color: var(--tekst-wit-soft);
}

.nav-card-panel-item {
    display: block;
    padding: 14px 16px;
    color: var(--tekst-wit-strong);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    border-top: 1px solid var(--rand-wit-muted);
}

.nav-card-panel-item--soon {
    display: block;
    padding: 14px 16px;
    color: var(--tekst-wit-faint);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    border-top: 1px solid var(--rand-wit-muted);
    cursor: default;
    pointer-events: none;
}

.nav-card-panel-soon {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    color: var(--hoofdkleur-rood);
    margin-left: 0.45em;
}

.opleiding-btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    appearance: none;
    outline: none;
    background-color: var(--hoofdkleur-rood);

    color: var(--wit);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding: 18px 40px;
    border-radius: var(--radius-badge);
    transition: color 0.5s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 16px var(--hoofdkleur-rood-shadow);
    overflow: hidden;

    z-index: 1;
    text-decoration: none;
    margin-top: 25px;
}

.opleiding-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px var(--hoofdkleur-rood-shadow-strong);
}

.opleiding-btn:focus-visible,
.review-btn:focus-visible {
    outline: 3px solid var(--tekst-donker);
    outline-offset: 3px;
}

.opleiding-btn::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 150%;

    height: 300%;

    background-color: var(--zwart);

    transition: all 0.7s ease;
    transform: translate(-25%, -100%) rotate(25deg);

    z-index: -1;
    border-radius: var(--radius-pill);

}

.opleiding-btn:hover::before {
    transform: translate(-25%, -10%) rotate(25deg);
    scale: 110%;

}

.opleiding-btn:hover {
    color: var(--wit);

}

@media (max-width: 1199px) {
    .opleiding-btn {
        display: none;
    }
}

@media (min-width: 1200px) {
    .quick-nav {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .quick-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .quick-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .quick-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 300px) {
    .quick-nav {
        grid-template-columns: repeat(1, 1fr);
    }

    .quick-nav>.nav-card-trigger:nth-of-type(2) {
        grid-row: 2;
        grid-column: 1;
    }

    .quick-nav>.nav-card-trigger:nth-of-type(3) {
        grid-row: 4;
        grid-column: 1;
    }

    #auto-nav-panel,
    #motor-nav-panel,
    #motortraining-nav-panel {
        grid-row: auto;
    }
}

.rijbewijzen-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding-bottom: 50px;
    padding-top: 50px;
    gap: 40px;
}

.rijbewijzen-card {
    background: var(--donker-achtergrond);
    border-radius: var(--radius-lg);

    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--wit);

    display: flex;
    flex-direction: column;
    align-items: center;

    border-bottom: 3px solid var(--hoofdkleur-rood);

    box-shadow: 0 8px 20px var(--schaduw-zwart-strong);
    width: 100%;
    transition: transform 0.3s ease;
}

.rijbewijzen-card svg {
    fill: var(--wit);
    margin-bottom: 10px;
    width: 35px;
    height: 35px;
}

.rijbewijzen-card svg.icon-stroke {
    fill: none;
}

.rijbewijzen-card h3 {
    color: var(--wit);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    margin: 0;
}

.rijbewijzen-card h2,
.rijbewijzen-card-titel {
    color: var(--wit);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    margin: 0;
}

.rijbewijzen-card:active {
    transform: scale(0.95);

    background-color: var(--achtergrond-kaart);
}

.rijbewijzen-card:hover {
    transform: scale(1.05);
}

@media (max-width: 1200px) {
    .rijbewijzen-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rijbewijzen-nav.moto-rijbewijzen-nav {
    --moto-nav-gap: 14px;
}

.rijbewijzen-nav-group-label {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 0 4px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--tekst-secondary);
    text-align: center;
}

.rijbewijzen-nav-group-label:first-of-type {
    margin-top: 50px;
}

@media (max-width: 767px) {
    .rijbewijzen-nav-group-label:first-of-type {
        margin-top: 30px;
    }
}

.rijbewijzen-card-detail {
    margin: 6px 0 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: normal;
    color: var(--tekst-wit-muted);
}

@media (min-width: 700px) {
    .rijbewijzen-nav.moto-rijbewijzen-nav.moto-rijbewijzen-nav--primary {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .rijbewijzen-nav.moto-rijbewijzen-nav {
        gap: var(--moto-nav-gap);
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media (max-width: 699px) {
    .rijbewijzen-nav.moto-rijbewijzen-nav.moto-rijbewijzen-nav--primary > .rijbewijzen-card:nth-child(3) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc((100% - var(--moto-nav-gap)) / 2);
    }
}

.rijbewijzen-nav.moto-rijbewijzen-nav.moto-rijbewijzen-nav--secondary {
    max-width: 640px;
}

.moto-rijbewijzen-nav--secondary .rijbewijzen-card {
    padding: 20px;
}

.moto-rijbewijzen-nav--secondary .rijbewijzen-card svg {
    width: 28px;
    height: 28px;
    margin-bottom: 6px;
}

.moto-rijbewijzen-nav--secondary .rijbewijzen-card h2,
.moto-rijbewijzen-nav--secondary .rijbewijzen-card-titel {
    font-size: var(--font-size-sm);
}

.moto-rijbewijzen-nav--secondary .rijbewijzen-card-detail {
    font-size: var(--font-size-xs);
}

.code-crosslink {
    color: var(--tekst-secondary);
    font-size: var(--font-size-sm);
}

@media (max-width: 575px) {
    .rijbewijzen-nav {
        grid-template-columns: repeat(1, 1fr);
    }

    .rijbewijzen-nav.moto-rijbewijzen-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .rijbewijzen-card {
        padding: 20px;
    }

    .rijbewijzen-card svg {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
    }

    .rijbewijzen-card h2,
    .rijbewijzen-card-titel {
        font-size: var(--font-size-sm);
    }

    .rijbewijzen-card h3 {
        font-size: var(--font-size-sm);
    }

    .moto-rijbewijzen-nav--primary .rijbewijzen-card-detail {
        min-height: 3.2em;
    }
}

@media (max-width: 350px) {
    .rijbewijzen-card {
        padding: 15px;
    }

    .rijbewijzen-card h3 {
        font-size: var(--font-size-sm-compact);
    }

    .rijbewijzen-card h2,
    .rijbewijzen-card-titel {
        font-size: var(--font-size-sm-compact);
    }

    .rijbewijzen-card svg {
        width: 24px;
        height: 24px;
    }
}

.rijbewijzen-card-wrap {
    position: relative;
    width: 100%;
}

/* Breadcrumb navigation (reset global nav fixed-header styles) */
.breadcrumbs {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: auto;
    display: block;
    background-color: transparent;
    box-shadow: none;
    justify-content: initial;
    align-items: initial;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-troef);
    line-height: var(--line-height-base);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    color: var(--tekst-donker);
}

.breadcrumbs li:not(:last-child)::after {
    content: '›';
    margin: 0 0.5rem;
    color: var(--tekst-subtle);
    font-weight: var(--font-weight-normal);
}

.breadcrumbs a {
    color: var(--tekst-donker);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--hoofdkleur-rood);
}

.breadcrumbs [aria-current="page"] {
    color: var(--tekst-muted);
    font-weight: var(--font-weight-semibold);
}

.breadcrumbs-back {
    display: none;
}

@media (max-width: 767px) {
    .breadcrumbs {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .breadcrumbs--has-back {
        margin-top: 0.35rem;
        margin-bottom: 0.15rem;
    }

    .breadcrumbs--has-back .breadcrumbs-back {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-height: 40px;
        color: var(--tekst-donker);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .breadcrumbs--has-back .breadcrumbs-back:hover,
    .breadcrumbs--has-back .breadcrumbs-back:focus-visible {
        color: var(--hoofdkleur-rood);
    }

    .breadcrumbs--has-back .breadcrumbs-back-icon {
        font-size: 1.1em;
        line-height: 1;
    }

    .breadcrumbs--has-back ol {
        display: none;
    }
}

/* Motortraining subpages: image scales full width on small screens */
.motor-training-page-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 0 15px;
}

@media (min-width: 768px) {
    .motor-training-page-img {
        width: 45%;
        max-width: 45%;
    }
}

.motor-training-nav {
    max-width: 1100px;
}

/* Three tiles: use three columns from tablet width up so the third card is not orphaned in a 2-col grid */
@media (min-width: 700px) {
    .motor-training-nav:not(.moto-rijbewijzen-nav) {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Between one-column (phone) and three-column: two cards on row 1 — center the “binnenkort” tile on row 2 */
@media (min-width: 576px) and (max-width: 699px) {
    .motor-training-nav .rijbewijzen-card-wrap {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 24rem);
    }
}

.rijbewijzen-card--soon {
    pointer-events: none;
    cursor: default;
    opacity: 0.92;
}

.rijbewijzen-card--soon:hover,
.rijbewijzen-card--soon:active {
    transform: none;
    background: var(--donker-achtergrond);
}

.rijbewijzen-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    z-index: 2;
    box-shadow: 0 2px 8px var(--schaduw-zwart-intense);
    pointer-events: none;
}

@media (max-width: 768px) {
    .rijbewijzen-card-badge {
        font-size: var(--font-size-2xs);
        padding: 5px 8px;
        top: 10px;
        right: 10px;
    }
}

/* #endregion */

/* #region FEATURES/TROEVEN SECTION */

.features-section {
    padding: 110px 20px;
    background-color: var(--tekst-donker);

}

/* Hero + features samen exact 1 scherm vullen (onderkant features = onderkant scherm bij load) */
@media (min-width: 1367px) {
    .home-fold {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 70px);
        min-height: calc(100svh - 70px);
    }

    .features-section {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.feature-item {
    background-color: var(--wit);
    padding: 30px 20px;
    border-radius: var(--radius-xl);
    text-align: center;
    border: 1px solid var(--rand-subtle);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px var(--schaduw-zwart-kaart);
}

.feature-item svg {
    height: 55px;

    width: 55px;
    fill: var(--hoofdkleur-rood);

    margin-bottom: 20px;
}

.feature-item h3 {
    font-size: var(--font-size-lg);
    color: var(--tekst-donker);
    margin-bottom: 10px;
}

.feature-item h3 br {
    display: none;
}

.feature-item p {
    font-size: var(--font-size-sm-plus);
    color: var(--tekst-secondary);
    line-height: var(--line-height-relaxed);
}

@media (max-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);

    }
}

@media (max-width: 600px) {
    .features-section {
        padding: 50px 20px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .feature-item {
        padding: 24px 26px;
        display: grid;
        grid-template-columns: 42px 1fr;
        align-items: center;
        text-align: left;
        gap: 20px;
    }

    .feature-item svg {
        height: 42px;
        width: 42px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .feature-item h3 {
        margin-bottom: 0;
        line-height: var(--line-height-tight, 1.3);
    }

    .feature-item h3 br {
        display: block;
    }

    .feature-item p {
        display: none;
    }
}

/* #endregion */

/* #region REVIEW SECTIE */

.review-section {
    background: var(--wit);
    box-shadow: 0 10px 30px var(--schaduw-zwart-licht);
    max-width: 1400px;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.rating-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rating-info strong {
    color: var(--tekst-donker);
    font-size: var(--font-size-base);
}

.stars {
    color: var(--kleur-google-ster);
    font-size: var(--font-size-lg);
}

.review-btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    appearance: none;
    outline: none;
    background-color: var(--hoofdkleur-rood);

    color: var(--wit);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    padding: 18px 40px;
    border-radius: var(--radius-badge);
    transition: color 0.5s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    box-shadow: 0 4px 16px var(--hoofdkleur-rood-shadow);
    overflow: hidden;

    z-index: 1;
    text-decoration: none;
    margin-top: auto;
    margin-left: auto;
}

.review-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px var(--hoofdkleur-rood-shadow-strong);
}

.review-btn::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 150%;

    height: 300%;

    background-color: var(--zwart);

    transition: all 0.7s ease;
    transform: translate(-25%, -100%) rotate(25deg);

    z-index: -1;
    border-radius: var(--radius-pill);

}

.review-btn:hover::before {
    transform: translate(-25%, -10%) rotate(25deg);
    scale: 115%;

}

.review-btn:hover {
    color: var(--wit);

}

.review-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-bottom: 15px;
    width: 100%;

}

.review-carousel::-webkit-scrollbar {
    height: 6px;
}

.review-carousel::-webkit-scrollbar-thumb {
    background: var(--grijs-licht);
    border-radius: var(--radius-compact);
}

.review-card {
    flex: 1 1 300px;

    min-width: 280px;

    max-width: 450px;

    scroll-snap-align: start;
    background: var(--achtergrond-licht);
    padding: 25px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--rand-licht);
    box-shadow: 0 2px 5px var(--schaduw-zwart-licht);
    display: flex;
    flex-direction: column;
}

.card-stars {
    color: var(--kleur-google-ster);
    margin-bottom: 10px;
}

.review-card p {
    flex-grow: 1;
    color: var(--tekst-donker);

}

.author {
    display: block;
    margin-top: 15px;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--tekst-donker);

}

.review-carousel-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.review-carousel-dots.is-visible {
    display: flex;
}

.review-carousel-dot {
    width: 9px;
    height: 9px;
    border: none;
    padding: 0;
    border-radius: var(--radius-round);
    background: var(--grijs-medium);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.review-carousel-dot.is-active {
    background: var(--hoofdkleur-rood);
    transform: scale(1.2);
}

.review-carousel-dot:focus-visible {
    outline: 2px solid var(--hoofdkleur-rood);
    outline-offset: 2px;
}

.google-logo {
    width: 50px;

    height: auto;
}

.blue {
    fill: #4285F4;
}

.red {
    fill: #EA4335;
}

.yellow {
    fill: #FBBC05;
}

.green {
    fill: #34A853;
}

@media (max-width: 1450px) {
    .review-section {
        margin-right: 20px;
        margin-left: 20px;
    }
}

/* #endregion REVIEW SECTIE */

/* #region FOOTER */

footer {
    background-color: var(--tekst-donker);

    color: var(--wit);
    padding-top: 60px;
    margin-top: auto;
    width: 100%;

}

.footer-container {
    display: grid;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap: 40px;
    padding-bottom: 60px;
    padding-left: 25px;
    flex: 1;
    grid-template-columns: 1fr;
}

@media (min-width: 775px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1300px) {
    .footer-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-col h3 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: var(--hoofdkleur-rood);
}

.footer-brand-link {
    color: var(--wit);
    text-decoration: none;
}

.footer-brand-link:hover {
    color: var(--hoofdkleur-rood);
}

.footer-text,
.contact-info p {
    color: var(--tekst-placeholder);

    line-height: var(--line-height-relaxed);
    margin-bottom: 15px;
    font-size: var(--font-size-sm-plus);
}

.contact-info i,
.contact-info svg {
    color: var(--hoofdkleur-rood);
    fill: var(--hoofdkleur-rood);

    margin-right: 10px;
    vertical-align: middle;

}

.contact-info svg {
    width: 18px;
    height: 18px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--tekst-placeholder);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    transform: translateX(5px);

    color: var(--hoofdkleur-rood);
}

.footer-link-moto {
    white-space: nowrap;
}

a.footer-links {
    color: var(--tekst-placeholder) !important;
    text-decoration: none;
    transition: all 0.3s ease;

}

a.footer-links:visited {
    color: var(--tekst-placeholder) !important;
}

a.footer-links:hover {
    color: var(--hoofdkleur-rood) !important;
    transform: translateX(5px);

    display: inline-block;

}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--hoofdkleur-rood);
    border-radius: var(--radius-round);

    color: var(--wit);
    transition: 0.3s;
    font-size: var(--font-size-nav);
}

.social-icons a:hover {
    background-color: var(--wit);
    transform: translateY(-3px);
    color: var(--hoofdkleur-rood);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-bottom {
    background-color: var(--achtergrond-kaart);

    text-align: center;
    padding: 20px;
    color: var(--tekst-footer);
    font-size: var(--font-size-sm-compact);
    border-top: 1px solid var(--rand-donker);
}

/* #endregion FOOTER */

/* #region Tekst op site */

.error-code {
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-black);
    color: var(--hoofdkleur-rood);
    text-align: center;
    line-height: var(--line-height-tight);
    margin: 20px 0 10px;
}

.error-title {
    color: var(--tekst-donker);
    font-size: var(--font-size-heading-md);
    text-align: center;
    margin-bottom: 16px;
}

.error-text {
    color: var(--tekst-donker);
    text-align: center;
    max-width: 520px;
    margin: 0 auto 20px;
    line-height: var(--line-height-relaxed);
    font-size: var(--font-size-md);
}

.text-theorie-container {
    background: var(--wit);
    max-width: 1400px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    box-shadow: 0 10px 30px var(--schaduw-zwart-medium);
    display: flow-root;
    border-bottom: 5px solid var(--hoofdkleur-rood);
    border-top: none;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

.text-theorie {
    max-width: 1300px;

    margin: 0 auto;
}

.margin-large {
    margin-top: 50px;
}

.text-theorie h1 {
    color: var(--tekst-donker);
    font-size: var(--font-size-heading-xl);
    margin-bottom: 20px;
    margin-top: 20px;
}

.text-theorie .breadcrumbs+h1 {
    margin-top: 0.75rem;
}

.echte-text-theorie-container .text-theorie .breadcrumbs+h1 {
    margin-top: 0.75rem;
}

.text-theorie h2 {
    color: var(--tekst-donker);
    font-size: var(--font-size-heading-lg);
    margin-bottom: 15px;
    margin-top: 30px;
}

.text-theorie details summary h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.text-theorie h3 {
    color: var(--tekst-donker);
    font-size: var(--font-size-heading-sm);
    margin-bottom: 10px;
    margin-top: 10px;
}

.text-theorie h4 {
    color: var(--tekst-donker);
    font-size: var(--font-size-body-md);
    margin-top: 10px;
    margin-left: 10px;
}

.text-theorie p {
    color: var(--tekst-donker);
    line-height: var(--line-height-loose);
    font-size: var(--font-size-body-lg);
    margin-bottom: 20px;
}

.text-theorie ul {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.text-theorie li {
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: 10px;
    color: var(--tekst-donker);
    margin-left: 10px;
}

.text-theorie li::marker {
    color: var(--hoofdkleur-rood);
    font-weight: var(--font-weight-bold);
}

.text-theorie strong {
    color: var(--donker-achtergrond);
}

/* #endregion */

/* #region Examen-stappen (visueel stap 1/2 blok) */

.exam-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.exam-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.exam-step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    border: 2px solid var(--hoofdkleur-rood);
    color: var(--hoofdkleur-rood);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.exam-step-body h3 {
    margin-top: 0;
}

.exam-step-body p {
    margin-bottom: 0;
}

/* #endregion */

/* #region Kwalificatie-blok (leeftijd/prijs teaser moto/scooter) */

.kwalificatie-teaser {
    display: block;
    border: 2px solid var(--hoofdkleur-rood-muted);
    background: var(--hoofdkleur-rood-muted-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin: 20px 0;
}

.kwalificatie-teaser-label {
    font-weight: 700;
    color: var(--tekst-donker);
}

.kwalificatie-teaser-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--hoofdkleur-rood);
    font-weight: 600;
    text-decoration: none;
}

.kwalificatie-teaser-link:hover {
    text-decoration: underline;
}

/* #endregion */

/* #region Knoppen theorie/auto */

.container {
    max-width: 1400px;
    margin: 90px auto 0 auto;

    padding: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;

    display: flow-root;
    overflow: hidden;

}

.button-wrapper {
    display: flex;
    width: 100%;

}

.tab-button {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 22px;
    cursor: pointer;
    border: none;
    background-color: var(--achtergrond-tab);
    color: var(--donker-achtergrond);
    font-size: var(--font-size-tab);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-button:hover:not(.active) {
    background-color: var(--wit);
    transform: translateY(-3px) scale(1.03);
    color: var(--hoofdkleur-rood);
    border-bottom-color: transparent;

}

.tab-button.active {
    background-color: var(--donker-achtergrond);
    color: var(--wit);
    position: relative;
    border-bottom: none;
    box-shadow: inset 0 -4px 0 0 var(--hoofdkleur-rood);
    z-index: 250;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--hoofdkleur-rood);
    transition: width 0.3s ease;
    transform: translateX(-50%);
}

.tab-button:hover::after {
    width: 100%;
}

.echte-text-theorie-container {
    background: var(--wit);
    max-width: 1400px;
    margin-right: auto;
    margin-top: -10px;
    padding: 40px;

    box-shadow: 0 20px 40px var(--schaduw-zwart-zacht);

    border-top: none;
    border-bottom: 5px solid var(--hoofdkleur-rood);
    margin-left: auto;
}

@media (max-width: 1450px) {
    .text-theorie-container {
        padding: 10px 20px;
        width: auto;
    }

    main .echte-text-theorie-container {
        padding: 10px 20px;
        width: auto;
    }

    .text-theorie ul {
        margin-left: 20px;
    }
}

@media (max-width: 768px) {
    main .echte-text-theorie-container {
        padding: 10px 20px;
        width: auto;
    }
}

/* #endregion */

/* #region Tabel */

.responsive-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-lg);
    margin-bottom: 30px;
    overflow: hidden;
    border: 1px solid var(--rand-medium);
    box-shadow: 0 10px 25px var(--schaduw-zwart-licht);
}

.text-theorie-container .responsive-table {
    box-shadow: none;
    border: 1px solid var(--rand-zacht);
}

.responsive-table th,
.responsive-table td {
    padding: 18px 15px;
    text-align: center;
    border-bottom: 1px solid var(--rand-tabel);
    white-space: nowrap;
}

.responsive-table th:last-child,
.responsive-table td:last-child {
    border-right: none;
}

.responsive-table th {
    background-color: var(--hoofdkleur-rood);
    color: white;
    text-transform: uppercase;
    font-size: var(--font-size-sm-compact);
    letter-spacing: var(--letter-spacing-label);
}

.responsive-table td[data-label="Cursus"] {
    white-space: normal;
    min-width: 180px;
    font-weight: var(--font-weight-medium);
}

.btn-table {
    background-color: var(--hoofdkleur-rood);
    color: white !important;
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-btn);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm-plus);
    font-family: inherit;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px var(--hoofdkleur-rood-shadow);
    letter-spacing: var(--letter-spacing-tight);
}

.btn-table:hover {
    background-color: var(--hoofdkleur-rood-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--hoofdkleur-rood-shadow-strong);
}

.btn-table.is-full {
    background-color: var(--achtergrond-inactief);
    color: var(--tekst-inactief) !important;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-table.is-full:hover {
    background-color: var(--achtergrond-inactief);
    transform: none;
    box-shadow: none;
}

@media (max-width: 950px) {
    .responsive-table {
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .responsive-table thead {
        display: none;
    }

    .responsive-table tr {
        display: block;
        margin-bottom: 20px;
        border: 2px solid var(--rand-licht);
        border-radius: var(--radius-lg);
        background: var(--wit);
        box-shadow: 4px 4px 12px var(--schaduw-zwart-medium);
        padding: 10px;
    }

    .responsive-table td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px solid var(--rand-rij);

        white-space: normal;
    }

    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 45%;
        font-weight: var(--font-weight-bold);
        text-align: left;
        color: var(--tekst-body);
    }

    .responsive-table td[data-label="Inschrijven"],
    .responsive-table td[data-label="Actie"] {
        text-align: center;
        padding-left: 15px;
        padding-top: 20px;
    }

    .responsive-table td[data-label="Inschrijven"]::before,
    .responsive-table td[data-label="Actie"]::before {
        display: none;
    }

    .btn-table {
        width: 100%;

    }
}

.compare-table tbody tr:nth-of-type(even) td {
    background-color: var(--achtergrond-licht);
}

/* Zelfde rustige rood als de beschikbaarheidstabel: zachte kop i.p.v. volle
   rode band, geen zware schaduw. */
.compare-table {
    box-shadow: none;
    border-color: var(--rand-zacht);
}

.compare-table th {
    background-color: var(--hoofdkleur-rood-muted-light);
    color: var(--hoofdkleur-rood-dark);
}

.compare-table-wrap {
    overflow-x: auto;
}

.compare-table th a {
    color: inherit;
}

@media (max-width: 950px) {
    .compare-table {
        background: white;
        border-radius: var(--radius-lg);
        border: 1px solid var(--rand-zacht);
        overflow: hidden;
    }

    .compare-table thead {
        display: table-header-group;
    }

    .compare-table tr {
        display: table-row;
        border: none;
        box-shadow: none;
        background: transparent;
        margin: 0;
    }

    .compare-table th,
    .compare-table td {
        display: table-cell;
        white-space: normal;
        text-align: center;
        padding: 10px 6px;
        font-size: var(--font-size-sm);
    }

    .compare-table td::before {
        content: none;
    }

    .compare-table td[data-label="Kenmerk"] {
        text-align: left;
        font-weight: var(--font-weight-bold);
        min-width: 0;
    }
}

.table-details summary {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--tekst-donker);
}

.kantoor-kolommen {
    display: grid;

    grid-template-columns: 1fr 1fr;
    justify-content: center;
    gap: 40px;

    margin: 30px auto;
    max-width: 1200px;

}

.kantoor-item {
    background: white;
    padding: 25px;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 15px var(--schaduw-zwart-licht);

    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

}

.kantoor-item h2 {
    margin-bottom: 10px;
    color: var(--tekst-donker);
    font-size: var(--font-size-icon-lg);
}

.kantoor-item h3 {
    margin-bottom: 10px;
    color: var(--tekst-donker);
    font-size: var(--font-size-icon-md);
    margin-top: 15px;
    margin-bottom: 15px;
}

.locatie-adres {
    color: var(--tekst-donker);
    font-size: var(--font-size-icon-md);
    margin-top: 15px;
    margin-bottom: 15px;
}

.map-container {
    margin-top: 15px;
    overflow: hidden;
    overflow-x: hidden;
    border-radius: var(--radius-compact);
    max-width: 100%;
}

.map-container iframe {
    width: 100% !important;
    max-width: 100%;
    height: 300px;
    border: 0;
    box-sizing: border-box;
}

.map-open-link {
    margin-top: 15px;
    margin-bottom: 2rem;
    text-align: center;
    display: inline-block;
}

.diensten-per-locatie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.diensten-locatie {
    min-width: 0;
}

.vestiging-locatie-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-btn);
}

@media (min-width: 769px) {
    .diensten-locatie .vestiging-locatie-img {
        max-width: 85%;
    }
}

@media (max-width: 768px) {
    .diensten-per-locatie {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .vestiging-locatie-img {
        max-width: 100%;
    }
}

@media (max-width: 1250px) {
    .kantoor-kolommen {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .kantoor-item {
        max-width: 500px;

        margin: 0 auto 30px auto;
    }
}

@media (max-width: 768px) {
    .kantoor-kolommen {
        padding: 0 6px;
        margin: 16px auto;
    }

    .kantoor-item {
        padding: 10px;
        margin-bottom: 20px;
    }

    .map-container {
        margin-top: 10px;
    }
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
    margin-top: 40px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.partner-card {
    background: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 4px 15px var(--schaduw-zwart-medium);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.partner-card:hover {
    transform: translateY(-5px);
}

.partner-logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1/1;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    transition: 0.3s;
}

.partner-card h3 {
    font-size: var(--font-size-2xl);
    color: var(--tekst-donker);
    margin-bottom: 10px;
}

.partner-card p {
    font-size: var(--font-size-sm-plus);
    line-height: var(--line-height-base);
    color: var(--tekst-muted);
    margin-bottom: 20px;
    flex-grow: 1;

}

@media (max-width: 1100px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);

    }
}

@media (max-width: 700px) {
    .partners-grid {
        grid-template-columns: 1fr;

        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        gap: 20px;
    }

    .partner-card {
        padding: 15px;

    }

}

/* #region SFEERBEELDEN GALERIJ */

.sfeerbeelden-section {
    padding-bottom: 60px;
}

.sfeerbeelden-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1300px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.sfeerbeelden-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 15px var(--schaduw-zwart-medium);
}

.sfeerbeelden-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.sfeerbeelden-item figcaption {
    padding: 12px 16px;
    font-size: var(--font-size-sm-plus);
    color: var(--tekst-secondary);
    background: var(--wit);
}

@media (max-width: 1100px) {
    .sfeerbeelden-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .sfeerbeelden-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.sfeerbeelden-item img {
    cursor: zoom-in;
}

.sfeerbeelden-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 4000;
    background-color: var(--overlay-zwart-lightbox);
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.sfeerbeelden-lightbox.is-open {
    display: flex;
}

.sfeerbeelden-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sfeerbeelden-lightbox img {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px var(--schaduw-zwart-diep);
}

.sfeerbeelden-lightbox figcaption {
    margin-top: 12px;
    color: var(--wit);
    font-size: var(--font-size-sm-plus);
    text-align: center;
}

.sfeerbeelden-lightbox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background-color: var(--wit);
    color: var(--zwart);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--schaduw-zwart-diep);
}

.sfeerbeelden-tabs {
    max-width: 1300px;
    margin: 40px auto 0;
    padding: 0 20px;
    flex-wrap: wrap;
}

.sfeerbeelden-tabs .tab-button {
    flex: 1 1 auto;
}

@media (max-width: 600px) {
    .sfeerbeelden-tabs .tab-button {
        padding: 12px 14px;
        font-size: var(--font-size-xs);
    }
}

.sfeerbeelden-grid[hidden] {
    display: none;
}

.sfeerbeelden-empty {
    max-width: 1300px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: center;
    color: var(--tekst-muted);
    font-size: var(--font-size-sm-plus);
}

/* #endregion */

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

.openingsuren-lijst li {
    padding: 8px 0;
    border-bottom: 1px solid var(--rand-zwart-subtle);
    font-size: var(--font-size-nav);
    color: var(--tekst-donker);
}

.openingsuren-lijst li:last-child {
    border-bottom: none;
}

.openingsuren-lijst strong {
    color: var(--tekst-donker);
    display: inline-block;
    width: 150px;

}

@media (max-width: 768px) {
    .openingsuren-lijst strong {
        display: block;
        width: auto;
        margin-bottom: 5px;
    }
}

/* #region container van de google forms */
.contact-form-container {
    margin-top: 80px;

    background: linear-gradient(to bottom, var(--wit), var(--achtergrond-subtle));
    max-width: 1200px;

    margin: 90px auto;
    padding: 10px;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px var(--schaduw-zwart-licht);
}

/* Inschrijfpagina's met breadcrumbs: witte kaart tot onder de nav (zoals text-theorie-container) */
.contact-form-container:has(.breadcrumbs) {
    background: var(--wit);
    max-width: 1400px;
    margin: 90px auto 0;
    padding: 10px 20px 0;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    box-shadow: 0 10px 30px var(--schaduw-zwart-medium);
    border-bottom: 5px solid var(--hoofdkleur-rood);
    display: flow-root;
}

.contact-form-container:has(.breadcrumbs) .breadcrumbs {
    max-width: 1300px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0;
}

.contact-form-container:has(.breadcrumbs) iframe {
    display: block;
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form-container.aanvraag-form-container:has(.breadcrumbs) {
    max-width: 760px;
}

.contact-form-container.aanvraag-form-container:has(.breadcrumbs) .breadcrumbs {
    max-width: 100%;
}

/* Inschrijfpagina's met een sessietabel: 50% breder dan standaard aanvraag-form-container
   (760px). Scooter hoort hier ook bij — die tabel heeft zelfs één kolom méér (Prijs staat
   bij code372/373 in een aparte strip), dus met zes nowrap-kolommen groeide ze voorbij de
   smalle kaart en stak ze aan de rechterkant buiten het wit. De body-class stond er al,
   enkel deze regel ontbrak. */
body.code372-inschrijving .contact-form-container.aanvraag-form-container:has(.breadcrumbs),
body.code373-inschrijving .contact-form-container.aanvraag-form-container:has(.breadcrumbs),
body.scooter-inschrijving .contact-form-container.aanvraag-form-container:has(.breadcrumbs) {
    max-width: 1140px;
}

@media (max-width: 1150px) {
    .contact-form-container {
        margin: 80px auto;
        padding: 0;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .contact-form-container:has(.breadcrumbs) {
        margin-top: 80px;
        width: 100%;
        padding: 6px 16px 0;
        border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
        background: var(--wit);
        box-shadow: 0 10px 30px var(--schaduw-zwart-medium);
    }

    .contact-form-container:has(.breadcrumbs) .breadcrumbs--has-back {
        margin-top: 0.35rem;
        margin-bottom: 0.15rem;
    }
}

@media (max-width: 767px) {
    .contact-form-container:has(.breadcrumbs) {
        padding: 4px 12px 0;
    }

    .contact-form-container:has(.breadcrumbs) .breadcrumbs {
        margin-top: 0.35rem;
        margin-bottom: 0.25rem;
    }

    .text-theorie .breadcrumbs+h1,
    .echte-text-theorie-container .text-theorie .breadcrumbs+h1 {
        margin-top: 0.5rem;
    }
}

/* #endregion */

/* #region aanvraagformulier (auto praktijk) */
.aanvraag-form-title {
    color: var(--tekst-donker);
    font-size: var(--font-size-heading-xl);
    margin-top: 0.75rem;
    margin-bottom: 20px;
}

.aanvraag-progress {
    max-width: 720px;
    margin: 0.75rem auto 0;
}

.aanvraag-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    font-weight: 600;
    color: var(--tekst-muted);
    margin-bottom: 6px;
}

.aanvraag-progress-label span:last-child {
    color: var(--hoofdkleur-rood);
    font-weight: 700;
}

.aanvraag-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--rand-licht);
    overflow: hidden;
}

.aanvraag-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--hoofdkleur-rood);
    width: 30%;
    transition: width 0.45s ease-in-out;
}

.aanvraag-progress-stappen {
    position: relative;
    height: 34px;
    margin-top: 10px;
}

.aanvraag-progress-stap {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translateX(-50%);
}

.aanvraag-progress-stap:nth-child(1) { left: 25%; }
.aanvraag-progress-stap:nth-child(2) { left: 50%; }
.aanvraag-progress-stap:nth-child(3) { left: 75%; }
.aanvraag-progress-stap:nth-child(4) { left: 100%; transform: translateX(-100%); }

.aanvraag-progress-stap-bol {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--rand-licht);
    border: 2px solid var(--rand-licht);
    transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.aanvraag-progress-stap.behaald .aanvraag-progress-stap-bol {
    transform: scale(1.15);
}

.aanvraag-progress-stap.behaald .aanvraag-progress-stap-bol {
    background: var(--hoofdkleur-rood);
    border-color: var(--hoofdkleur-rood);
}

.aanvraag-progress-stap-tekst {
    font-size: 10px;
    color: var(--tekst-muted);
    text-align: center;
    line-height: 1.2;
}

.aanvraag-progress-stap.behaald .aanvraag-progress-stap-tekst {
    color: var(--hoofdkleur-rood);
    font-weight: 600;
}

@media (max-width: 480px) {
    .aanvraag-progress-stap-tekst {
        display: none;
    }
}

/* Foutmelding boven de verzendknop van een inschrijfformulier. Een vak en geen alert():
   de tekst blijft staan terwijl de klant hem leest, en er past een klikbaar telefoonnummer
   in. Aangemaakt vanuit js/aanvraag-verzenden.js, dus niet in de HTML te vinden. Zelfde
   vorm als .aanvraag-form .hint hieronder, met een vollere rand omdat dit er wél toe doet. */
.verzendfout {
    display: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--hoofdkleur-rood);
    border-radius: var(--radius-md);
    background: var(--hoofdkleur-rood-muted-light);
    color: var(--tekst-body);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.verzendfout strong {
    display: block;
    margin-bottom: 4px;
    color: var(--hoofdkleur-rood-dark);
}

.verzendfout a {
    color: var(--hoofdkleur-rood-dark);
    font-weight: 600;
    white-space: nowrap;
}

.aanvraag-form {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 0 40px;
}

.aanvraag-form fieldset {
    border: none;
    margin-bottom: 24px;
    padding: 0;
}

.aanvraag-form legend {
    font-weight: 700;
    color: var(--tekst-donker);
    font-size: 15px;
    margin-bottom: 10px;
}

.aanvraag-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.aanvraag-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.aanvraag-form .form-group.full {
    width: 100%;
    margin-bottom: 20px;
}

.aanvraag-form label {
    font-weight: 600;
    color: var(--tekst-body);
    margin-bottom: 6px;
    font-size: 14px;
}

.aanvraag-form label .required {
    color: var(--kleur-fout-donker);
}

.aanvraag-form input,
.aanvraag-form select,
.aanvraag-form textarea {
    padding: 12px 16px;
    border: 2px solid var(--rand-medium);
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.aanvraag-form input:focus,
.aanvraag-form select:focus,
.aanvraag-form textarea:focus {
    outline: none;
    border-color: var(--hoofdkleur-rood);
    box-shadow: 0 0 0 3px var(--hoofdkleur-rood-muted);
}

.aanvraag-form input.error,
.aanvraag-form select.error,
.aanvraag-form textarea.error {
    border-color: var(--kleur-fout-donker);
}

/* Het veld dat de verzendcontrole tegenhield. Gezet vanuit toonVeldFout() in
   js/inschrijf-formulier.js, samen met het vak boven de knop: dat vak zegt wát er mis is,
   deze rand zegt wáár. Een alert() kon dat tweede niet, en liet de klant zelf zoeken tussen
   dertig velden. Verdwijnt zodra hij het veld aanraakt. */
.aanvraag-form .veld-fout,
.aanvraag-form .veld-fout:focus {
    border-color: var(--kleur-fout-donker);
    box-shadow: 0 0 0 3px var(--kleur-fout-muted);
}

/* Het bevestigingsblok krijgt na een geslaagde verzending de focus, zodat een schermlezer
   meegaat naar de bevestiging. Een focusrand rond een half scherm tekst hoort daar niet bij. */
.success-message:focus {
    outline: none;
}

.aanvraag-form .veld-waarschuwing {
    display: none;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--achtergrond-amber-zacht);
    border: 1px solid var(--rand-amber);
    border-radius: var(--radius-md);
    color: var(--kleur-amber);
    font-size: 13px;
    line-height: 1.4;
}

.aanvraag-form .veld-waarschuwing.zichtbaar {
    display: block;
}

/* Neutrale toelichting onder een veld (bv. "laat leeg als je nog niet geslaagd bent").
   Anders dan .veld-waarschuwing: altijd zichtbaar, geen alarmkleur. */
.aanvraag-form .veld-hint {
    margin: 6px 0 0;
    color: var(--tekst-muted);
    font-size: 13px;
    line-height: 1.4;
}

.aanvraag-form textarea {
    resize: vertical;
    min-height: 90px;
}

.aanvraag-form .tel-group {
    display: flex;
    gap: 8px;
}

.aanvraag-form .tel-group input {
    flex: 1;
}

.aanvraag-form .tel-land {
    position: relative;
    flex-shrink: 0;
}

.aanvraag-form .tel-land-toggle {
    width: 96px;
    height: 100%;
    min-height: 46px;
    border: 2px solid var(--rand-medium);
    border-radius: var(--radius-md);
    background: var(--wit);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 8px;
}

.aanvraag-form .tel-land-toggle:hover {
    border-color: var(--hoofdkleur-rood);
}

.aanvraag-form .tel-land-toggle #telefoonLandCode {
    font-size: 14px;
    color: var(--tekst-donker);
    font-weight: 500;
}

.aanvraag-form .tel-land-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    background: var(--wit);
    border: 2px solid var(--rand-medium);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px var(--schaduw-zwart-strong);
    padding: 6px;
    min-width: 170px;
}

.aanvraag-form .tel-land-menu.open {
    display: block;
}

.aanvraag-form .tel-land-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    color: var(--tekst-donker);
}

.aanvraag-form .tel-land-option:hover {
    background: var(--hoofdkleur-rood-muted-light);
}

.aanvraag-form .datepicker {
    position: relative;
}

.aanvraag-form .datepicker input {
    padding-right: 44px;
}

.aanvraag-form .datepicker-toggle {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    width: 36px;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.aanvraag-form .datepicker-toggle:hover {
    background: var(--grijze-achtergrond);
}

.aanvraag-form .datepicker-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 280px;
    background: var(--wit);
    border: 2px solid var(--rand-medium);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px var(--schaduw-zwart-strong);
    padding: 14px;
}

.aanvraag-form .datepicker-panel.open {
    display: block;
}

.aanvraag-form .datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.aanvraag-form .datepicker-title {
    font-weight: 700;
    color: var(--tekst-donker);
    font-size: 14px;
    text-transform: capitalize;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 4px 8px;
}

.aanvraag-form .datepicker-title:hover {
    background: var(--grijze-achtergrond);
}

.aanvraag-form .datepicker-months,
.aanvraag-form .datepicker-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.aanvraag-form .datepicker-cell {
    border: none;
    background: transparent;
    padding: 10px 4px;
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    color: var(--tekst-donker);
    text-transform: capitalize;
}

.aanvraag-form .datepicker-cell:hover:not(:disabled) {
    background: var(--hoofdkleur-rood-muted-light);
    border: 1px solid var(--hoofdkleur-rood);
}

.aanvraag-form .datepicker-cell:disabled {
    color: var(--grijs-medium);
    cursor: not-allowed;
}

.aanvraag-form .datepicker-cell.selected {
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    font-weight: 700;
}

.aanvraag-form .datepicker-nav {
    border: none;
    background: var(--grijze-achtergrond);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 16px;
    color: var(--tekst-body);
}

.aanvraag-form .datepicker-nav:hover {
    background: var(--rand-medium);
}

.aanvraag-form .datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 11px;
    color: var(--tekst-muted);
    text-align: center;
    margin-bottom: 4px;
}

.aanvraag-form .datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.aanvraag-form .datepicker-day {
    border: none;
    background: transparent;
    padding: 6px 0;
    border-radius: var(--radius-md);
    font-size: 13px;
    cursor: pointer;
    color: var(--tekst-donker);
}

.aanvraag-form .datepicker-day:hover:not(:disabled) {
    background: var(--hoofdkleur-rood-muted-light);
    border: 1px solid var(--hoofdkleur-rood);
}

.aanvraag-form .datepicker-day:disabled {
    color: var(--grijs-medium);
    cursor: not-allowed;
}

.aanvraag-form .datepicker-day.muted {
    color: var(--tekst-subtle);
}

.aanvraag-form .datepicker-day.selected {
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    font-weight: 700;
}

.aanvraag-form .radio-group,
.aanvraag-form .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aanvraag-form .radio-option,
.aanvraag-form .checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 2px solid var(--rand-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.aanvraag-form .radio-option:hover,
.aanvraag-form .checkbox-option:hover {
    border-color: var(--tekst-muted);
    background: var(--grijze-achtergrond);
}

.aanvraag-form .radio-option:has(input:checked),
.aanvraag-form .checkbox-option:has(input:checked) {
    border-color: var(--hoofdkleur-rood);
    background: var(--hoofdkleur-rood-muted-light);
}

.aanvraag-form .radio-option input,
.aanvraag-form .checkbox-option input {
    width: auto;
    accent-color: var(--hoofdkleur-rood);
    pointer-events: none;
}

.aanvraag-form .radio-option span,
.aanvraag-form .checkbox-option span {
    margin-bottom: 0;
    font-weight: 500;
    cursor: pointer;
}

.aanvraag-form .hint {
    background: var(--hoofdkleur-rood-muted-light);
    border: 1px solid var(--hoofdkleur-rood-muted);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--tekst-body);
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Velden die pas verschijnen bij een bepaalde keuze. `#lespakketDetailGroup` was de
   eerste en houdt zijn id-selector zodat bestaande pagina's niets hoeven te wijzigen;
   `.voorwaardelijk-veld` is de herbruikbare haak voor nieuwe (moto-inschrijving gebruikt
   hem voor de ervaringsbevestiging bij het 12u-pakket). Ruimere max-height op de klasse,
   want die blokken dragen ook een label en een hint boven het veld zelf. */
.aanvraag-form #lespakketDetailGroup,
.aanvraag-form .voorwaardelijk-veld {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease;
}

.aanvraag-form #lespakketDetailGroup.visible {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 20px;
}

.aanvraag-form .voorwaardelijk-veld.visible {
    max-height: 320px;
    opacity: 1;
    margin-bottom: 20px;
}

/* Vervolgvraag die aan één keuze hangt en dus binnen de keuzelijst zelf staat, ingesprongen
   onder die ene optie (moto: de ervaringsbevestiging onder het 12u-pakket). Zo ziet de klant
   meteen bij welk pakket de vraag hoort in plaats van los onderaan het formulier.
   De negatieve bovenmarge in verborgen staat heft de `gap` van de keuzelijst op, anders blijft
   er een gat gapen tussen de optie erboven en die eronder. */
.aanvraag-form .radio-group .keuze-vervolg {
    margin-top: -10px;
    padding-left: 16px;
    border-left: 2px solid var(--hoofdkleur-rood-muted);
}

.aanvraag-form .radio-group .keuze-vervolg.visible {
    margin-top: 0;
    margin-bottom: 0;
}

.aanvraag-form .submit-btn {
    width: 100%;
    padding: 16px;
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    border: none;
    border-radius: var(--radius-compact);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.aanvraag-form .submit-btn:hover {
    background: var(--hoofdkleur-rood-hover);
}

.aanvraag-form .submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.aanvraag-form .consent-group {
    margin-top: 10px;
    margin-bottom: 20px;
}

.aanvraag-form .consent-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.aanvraag-form .consent-option input {
    width: auto;
    margin-top: 3px;
    accent-color: var(--hoofdkleur-rood);
}

.aanvraag-form .consent-option label {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 13px;
    color: var(--tekst-body);
    line-height: 1.5;
    cursor: pointer;
}

.aanvraag-form .consent-option a {
    color: var(--hoofdkleur-rood);
    font-weight: 600;
    text-decoration: none;
}

.success-message {
    display: none;
    text-align: center;
    padding: 40px;
    max-width: 720px;
    margin: 0 auto;
}

.success-message.show {
    display: block;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: var(--kleur-bevestiging);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.success-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--wit);
}

.success-message h2 {
    color: var(--tekst-donker);
    margin-bottom: 10px;
}

.success-message p {
    color: var(--tekst-muted);
    line-height: 1.6;
}

.success-message .aanvraag-nummer {
    display: inline-block;
    background: var(--hoofdkleur-rood-muted-light);
    color: var(--hoofdkleur-rood);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 20px;
    margin: 15px 0;
}

@media (max-width: 600px) {
    .aanvraag-form .form-row {
        flex-direction: column;
        gap: 20px;
    }
}
/* #endregion */

/* #region sessie-kiezer (code372/373) */
.sessie-kiezer {
    max-width: 720px;
    margin: 0.75rem auto 0;
}

/* Inschrijfpagina's met een sessietabel: tabel breder dan standaard (720px), max ruimte in
   de 1140px-container benutten. Scooter hoort hier ook bij, zie de container-regel hierboven. */
body.code372-inschrijving .sessie-kiezer,
body.code373-inschrijving .sessie-kiezer,
body.scooter-inschrijving .sessie-kiezer {
    max-width: 1080px;
}

.sessie-kiezer-titel {
    font-size: var(--font-size-heading-lg);
    color: var(--tekst-donker);
    margin-bottom: 6px;
}

.sessie-kiezer-hint {
    color: var(--tekst-muted);
    font-size: 14px;
    margin-bottom: 18px;
}

.sessie-samenvatting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--hoofdkleur-rood-muted-light);
    border: 1px solid var(--hoofdkleur-rood-muted);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--tekst-body);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.sessie-samenvatting strong {
    color: var(--tekst-donker);
}

.sessie-samenvatting-wijzig {
    border: none;
    background: transparent;
    color: var(--hoofdkleur-rood);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    flex-shrink: 0;
    padding: 0;
}
/* #endregion */

/* #region prijskaarten */

/* Vaste 2.5rem met de geërfde body-regelhoogte van 1.6 liep uit de hand zodra
   een sectiekop langer werd dan twee woorden: "Prijs en eerstvolgende momenten
   voor Code 372" werd 4 regels en 256px hoog op een 390px-scherm. Desktop
   blijft ongewijzigd (clamp-max = 2.5rem), mobiel schaalt mee. */
.section-title {
    font-size: clamp(1.7rem, 4.5vw + 0.5rem, 2.5rem);
    line-height: var(--line-height-snug);
    text-wrap: balance;
    color: var(--achtergrond-kaart);
    margin-bottom: 10px;
    text-align: center;
}

.section-title--links {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-align: left;
}

@media (max-width: 800px) {
    .section-title--links {
        text-align: center;
    }
}

.section-subtitle {
    text-align: center;
    color: var(--tekst-muted);
    margin-bottom: 40px;
}

.pakketten-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 380px));

    gap: 30px;
    max-width: 1250px;
    margin: 40px auto;

    justify-content: center;
}

.pakketten-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 300px));
    max-width: 1400px;
}

@media (max-width: 1200px) {
    .pakketten-grid {
        grid-template-columns: repeat(2, minmax(0, 380px));
        justify-content: center;
    }
}

@media (max-width: 800px) {
    .pakketten-grid {
        grid-template-columns: minmax(0, 380px);
        justify-content: center;
    }
}

/* Eén kaart: geen lege grid-tracks ernaast, op elke breedte */
.pakketten-grid--solo {
    grid-template-columns: minmax(0, 380px);
}

.pakketten-carousel-hint {
    display: none;
}

.pakketten-carousel-dots {
    display: none;
}

@media (max-width: 800px) {
    .pakketten-carousel-wrap {
        margin-inline: -20px;
        width: calc(100% + 40px);
    }

    .pakketten-carousel-hint {
        display: block;
        text-align: center;
        color: var(--tekst-subtle);
        font-size: var(--font-size-sm-compact);
        margin: 0 20px 10px;
    }

    .pakketten-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 0 20px 14px;
    }

    .pakketten-carousel-dot {
        width: 9px;
        height: 9px;
        border: none;
        padding: 0;
        border-radius: var(--radius-round);
        background: var(--grijs-medium);
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .pakketten-carousel-dot.is-active {
        background: var(--hoofdkleur-rood);
        transform: scale(1.2);
    }

    .pakketten-carousel-dot:focus-visible {
        outline: 2px solid var(--hoofdkleur-rood);
        outline-offset: 2px;
    }

    .pakketten-grid.pakketten-grid--mobile-carousel,
    .pakketten-grid-auto.pakketten-grid--mobile-carousel,
    .pakketten-grid-scooter.pakketten-grid--mobile-carousel {
        --carousel-card-width: min(85vw, 340px);
        --carousel-center-padding: calc((100% - var(--carousel-card-width)) / 2);
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        max-width: none;
        margin: 0;
        padding: 20px var(--carousel-center-padding) 15px;
        scroll-padding-inline: var(--carousel-center-padding);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pakketten-grid.pakketten-grid--mobile-carousel::-webkit-scrollbar,
    .pakketten-grid-auto.pakketten-grid--mobile-carousel::-webkit-scrollbar,
    .pakketten-grid-scooter.pakketten-grid--mobile-carousel::-webkit-scrollbar {
        display: none;
    }

    .pakketten-grid.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-auto.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-scooter.pakketten-grid--mobile-carousel .card-modern {
        flex: 0 0 var(--carousel-card-width);
        width: var(--carousel-card-width);
        max-width: none;
        scroll-snap-align: center;
        margin: 0;
        height: auto;
        align-self: stretch;
    }
}

.pakketten-grid-scooter {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;

    justify-content: center;
    justify-items: center;
}

@media (max-width: 768px) {
    .pakketten-grid-scooter {

        grid-template-columns: repeat(1, minmax(300px, 450px));
        gap: 20px;
    }
}

.pakketten-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(33.33% - 30px), 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 80px auto;
    justify-content: center;
    justify-items: center;
}

@media (max-width: 1500px) {
    .pakketten-grid-auto {

        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
}

/* Mobiele aanpassingen voor kleinere prijskaarten */
@media (max-width: 768px) {
    .pakketten-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .card-modern {
        max-width: 100%;
        margin: 10px auto 0 auto;
    }

    .pakketten-grid.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-auto.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-scooter.pakketten-grid--mobile-carousel .card-modern {
        max-width: none;
        margin: 0;
    }
}

/* Extra kleine schermen - nog compacter */
@media (max-width: 480px) {
    .pakketten-grid-auto {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 10px;
    }

    .card-modern {
        max-width: 100%;
        border-radius: var(--radius-xl);
        margin: 5px 0;
    }

    .pakketten-grid.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-auto.pakketten-grid--mobile-carousel .card-modern,
    .pakketten-grid-scooter.pakketten-grid--mobile-carousel .card-modern {
        max-width: none;
        margin: 0;
    }
}

.card-modern {
    background: white;
    width: 100%;
    max-width: 380px;
    border-radius: var(--radius-2xl);
    position: relative;
    box-shadow: 0 4px 16px var(--schaduw-zwart-nav);
    border: 1px solid var(--rand-licht);
    overflow: visible;
    margin: 20px auto 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hover effect verwijderd - kaarten zijn niet klikbaar, alleen de "nu boeken" knop */

.badge-popular {
    position: absolute;
    top: -15px;
    right: 20px;
    background: var(--hoofdkleur-rood);
    color: var(--wit);
    padding: 6px 18px;
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    z-index: 10;
    box-shadow: 0 2px 8px var(--hoofdkleur-rood-shadow-light);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    animation: pulse-badge 3s ease-in-out infinite;
    will-change: transform;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* Zelfde afspraak als bij .card-popular hieronder: wie beweging uitzet, krijgt
   de badge stil — de rode pill blijft ook zonder deining opvallen. */
@media (prefers-reduced-motion: reduce) {
    .badge-popular {
        animation: none;
    }
}

/* Losse custom property nodig zodat de hoek animeerbaar is (anders springt de
   conic-gradient instant i.p.v. te draaien) */
@property --card-popular-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes card-popular-shine {
    to {
        --card-popular-angle: 360deg;
    }
}

.card-popular {
    border-radius: var(--radius-2xl);
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--wit), var(--wit)),
        conic-gradient(from var(--card-popular-angle),
            var(--hoofdkleur-rood-dark),
            var(--hoofdkleur-rood) 30%,
            var(--hoofdkleur-rood-shine) 50%,
            var(--hoofdkleur-rood) 70%,
            var(--hoofdkleur-rood-dark) 100%);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    animation: card-popular-shine 6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .card-popular {
        animation: none;
        --card-popular-angle: 45deg;
    }
}

.card-popular .card-header {
    border-top-left-radius: 18px;

    border-top-right-radius: 18px;
}

.card-header {
    background: var(--tekst-donker);
    color: white;
    padding: 30px 20px;
    text-align: center;
    border-top-left-radius: 19px;
    border-top-right-radius: 19px;
}

.card-header h3 {
    margin: 0;
    font-size: var(--font-size-card-title);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

.card-header p {
    margin: 5px 0 0;
    opacity: 0.5;

    font-size: var(--font-size-card-sub);
}

.card-body {
    padding: 30px 20px 25px 20px;
    min-height: 250px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-body-moto {
    padding: 26px 24px;
    flex: 1 1 auto;
    min-height: 300px;
}

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

.feature-list li {
    margin-bottom: 15px;
    color: var(--donker-achtergrond);
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
}

.icon {
    color: var(--hoofdkleur-rood);
    font-weight: var(--font-weight-bold);
    margin-right: 10px;
}

.of {
    font-weight: var(--font-weight-bold);
    margin-right: 10px;
    font-size: var(--font-size-card-price);
}

.card-footer {
    padding: 0 30px 30px;
    text-align: center;
    margin-top: auto;
}

.price-wrap {
    margin-bottom: 5px;
}

.currency {
    font-size: var(--font-size-3xl);
    vertical-align: top;
    font-weight: var(--font-weight-bold);
}

.amount {
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-black);
    color: var(--tekst-donker);
}

.vat-info {
    font-size: var(--font-size-xs);
    color: var(--tekst-donker);
    margin-bottom: 20px;
}

.cta-button {
    position: relative;
    display: inline-block;
    background: var(--hoofdkleur-rood);
    color: white;
    padding: 12px 35px;
    border-radius: var(--radius-badge);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    transition: background 0.3s ease, color 0.5s ease;
    overflow: hidden;
    z-index: 1;
}

.cta-button:hover {
    background: var(--hoofdkleur-rood-dark);
    color: white;
}

/* Zelfde vul-sweep als .opleiding-btn (hero-knop) — nu ook op alle
   prijskaart-CTA's, was voorheen enkel op de hero aanwezig */
.cta-button::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 150%;
    height: 300%;
    background-color: var(--zwart);
    transition: all 0.7s ease;
    transform: translate(-25%, -100%) rotate(25deg);
    z-index: -1;
    border-radius: var(--radius-pill);
}

.cta-button:hover::before {
    transform: translate(-25%, -10%) rotate(25deg);
    scale: 110%;
}

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

.cta-button--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-button__icon {
    width: 22px;
    height: auto;
    fill: currentColor;
    flex-shrink: 0;
}

.cta-button__icon.icon-stroke {
    fill: none;
}


/* Mobiele compacte prijskaarten – na basisstijlen zodat overrides werken */
@media (max-width: 800px) {
    .card-header {
        padding: 12px 12px;
    }

    .card-header h3 {
        font-size: var(--font-size-lg);
    }

    .card-header p {
        font-size: var(--font-size-card-sub-tight);
    }

    .card-body-moto {
        padding: 20px 20px 0 20px;
    }

    .card-footer {
        padding: 0 12px 12px;
    }

    .amount {
        font-size: var(--font-size-5xl);
    }

    .currency {
        font-size: var(--font-size-lg);
    }

    .vat-info {
        font-size: var(--font-size-xs);
        margin-bottom: 15px;
    }

    .cta-button {
        padding: 10px 25px;
        font-size: var(--font-size-sm);
    }

    .badge-popular {
        font-size: var(--font-size-2xs);
        padding: 5px 14px;
        top: -12px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .card-header {
        padding: 14px 12px;
    }

    .card-header h3 {
        font-size: var(--font-size-lg);
    }

    .card-footer {
        padding: 0 10px 8px;
    }

    .amount {
        font-size: var(--font-size-4xl);
    }

    .currency {
        font-size: var(--font-size-base);
    }

    .cta-button {
        padding: 8px 20px;
        font-size: var(--font-size-sm-compact);
    }
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    padding: 20px 0;
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

.responsive-container {
    margin-top: 30px;
}

.course-intro-text {
    font-size: var(--font-size-md);
    line-height: var(--line-height-reading);
    color: var(--tekst-donker);
    margin-bottom: 20px;
}

/* Staat in de kaartencontainer op de theoriepagina en is enkel zichtbaar wanneer de
   middleware de startdata niet kon ophalen. Heette .loading-text tot 13/08/2026, maar er
   laadt niets meer: de JavaScript die dit ooit verving is weg, dus dit is de eindtoestand
   die de klant leest. Vandaar een telefoonnummer in plaats van een grijs zinnetje. */
.startdata-fallback {
    text-align: center;
    color: var(--tekst-secondary);
    padding: 40px 20px;
    grid-column: 1 / -1;
}

.startdata-fallback a {
    color: var(--hoofdkleur-rood-dark);
    font-weight: 600;
    white-space: nowrap;
}

.course-card {
    background: var(--wit);
    border-radius: var(--radius-xl);
    border: 1px solid var(--rand-neutraal);
    box-shadow: 0 10px 20px var(--schaduw-zwart-licht);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    transition: all 0.3s ease;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px var(--schaduw-zwart-diep);
}

.course-card .card-header {
    background-color: var(--achtergrond-kaart-donker);
    padding: 20px;
    border-bottom: 2px solid var(--hoofdkleur-rood);

    text-align: center;
}

.course-card .card-header h3 {
    margin: 0 0 10px 0;
    font-size: var(--font-size-xl);
    color: var(--wit);
    font-weight: var(--font-weight-bold);
}

/* #region raster */

.status-badge {
    display: inline-block;
    white-space: nowrap;
    padding: 5px 15px;
    border-radius: var(--radius-badge);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    font-weight: var(--font-weight-semibold);
}

.badge-available {
    background: var(--hoofdkleur-groen-licht);
    color: var(--tekst-donker);
}

.badge-full {
    background: var(--achtergrond-waarschuwing);
    color: var(--kleur-fout-licht);
}

.badge-bijna-vol {
    background: var(--achtergrond-amber-zacht);
    color: var(--kleur-amber);
}

.course-card .card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    gap: 12px;
}

.info-row strong {
    color: var(--tekst-donker);
    font-size: var(--font-size-sm);
    min-width: 80px;

}

.info-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    margin-right: 4px;
    color: var(--hoofdkleur-rood);
}

.info-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.info-row .lesdata,
.info-row .prijs,
.info-row .vrije-plaatsen-weergave,
.info-row .locatie-tekst {
    color: var(--tekst-donker);
    font-size: var(--font-size-sm-plus);
    line-height: var(--line-height-base);
    flex: 1;
}

.info-row .prijs {
    font-weight: var(--font-weight-semibold);
}

.lesdatum-item {
    margin-bottom: 6px;
}

.lesdatum-item:last-child {
    margin-bottom: 0;
}

.lesdatum-tijd {
    display: inline-block;
    white-space: nowrap;
    color: var(--tekst-donker);
}

.course-card .card-footer {
    padding: 20px 25px 25px 25px;
}

.btn-card {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--hoofdkleur-rood);
    color: white !important;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-compact);
    font-weight: var(--font-weight-semibold);
    transition: background 0.2s;
    border: none;
}

.btn-card:hover {
    background-color: var(--hoofdkleur-rood);
}

.btn-full {
    background-color: var(--achtergrond-inactief);
    color: var(--tekst-inactief) !important;
    cursor: not-allowed;
}

/* #region Vacature */

.cta-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* Knoppen even breed, schalen mee op kleinere schermen */
.cta-buttons-container .btn-job {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 280px;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .cta-buttons-container {
        gap: 12px;
        margin-top: 24px;
    }

    .cta-buttons-container .btn-job.margin-large {
        margin-top: 0;
    }

    .cta-buttons-container .btn-job {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
        max-width: none;
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    .cta-buttons-container .btn-job {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

.recencies-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 30px;
}

.recencies-buttons-container .btn-job {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 280px;
    margin-bottom: 20px;
}

.btn-job {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 15px 25px;
    background: var(--donker-achtergrond);
    color: var(--wit);
    border-radius: var(--radius-lg);
    border-bottom: 3px solid var(--hoofdkleur-rood);
    box-shadow: 0 4px 14px var(--schaduw-zwart-medium);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 250px;
    margin-bottom: 50px;
}

.btn-job:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px var(--schaduw-zwart-kaart);
}

.btn-mail {
    background: var(--donker-achtergrond);
    color: var(--wit);
    border-radius: var(--radius-lg);
    border-bottom: 3px solid var(--hoofdkleur-rood);
    box-shadow: 0 4px 14px var(--schaduw-zwart-medium);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-phone {
    background: var(--donker-achtergrond);
    color: var(--wit);
    border-radius: var(--radius-lg);
    border-bottom: 3px solid var(--hoofdkleur-groen);
    box-shadow: 0 4px 14px var(--schaduw-zwart-medium);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: 15px;
    color: inherit;
}

.btn-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-text {
    display: flex;
    flex-direction: column;
}

.btn-label {
    font-size: var(--font-size-sm-compact);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    opacity: 0.9;
}

.btn-value {
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 600px) {
    .cta-buttons-container {
        gap: 10px;
        margin-top: 20px;
    }

    .cta-buttons-container .btn-job {
        margin-bottom: 10px;
    }

    .btn-job {
        width: auto;
        max-width: 100%;
        min-width: unset;
        padding: 10px 18px;
        justify-content: center;
        margin-bottom: 30px;
    }

    .recencies-buttons-container .btn-job {
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .btn-job .btn-icon {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 10px;
    }

    .btn-job .btn-value {
        font-size: var(--font-size-base);
    }

    .btn-job .btn-label {
        font-size: var(--font-size-2xs);
        letter-spacing: var(--letter-spacing-nav);
    }
}

/* #endregion */

/* #region faq */

details {
    background-color: var(--overlay-wit-strong);

    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 15px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--grijs-licht);
    /* Bewust niet 'all': script.js animeert de hoogte zelf (WAAPI) en zet
       daarbij inline height/overflow. Met 'all' ging de CSS-transitie daar
       tegenin, waarvoor de JS de transitie helemaal moest uitzetten -- en
       dan verdween ook deze randovergang. Zo blijven beide werken. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

details:hover,
details[open] {
    border-color: var(--hoofdkleur-rood);
    box-shadow: 0 4px 8px var(--schaduw-zwart-licht);
}

summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h2.detail-header {
    color: var(--tekst-donker);
    font-size: var(--font-size-faq-title);
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 20px;
}

.detail-subheader {
    font-size: var(--font-size-faq-intro);
    color: var(--tekst-donker);
    opacity: 0.8;
    margin-top: 5px;
    padding-left: 20px;
    margin-bottom: 0 !important;
}

summary h3 {
    color: var(--tekst-donker);
    font-size: var(--font-size-faq-heading);
}

summary::-webkit-details-marker {
    display: block;
    color: var(--hoofdkleur-rood);
    font-size: var(--font-size-faq-heading);
}

details p,
details ul {
    margin-top: 15px;
}

details p {
    padding-left: 28px;
    line-height: var(--line-height-relaxed);
    color: var(--tekst-donker);
    font-size: var(--font-size-faq-text);
}

summary::after {
    content: '\276F';

    font-size: var(--font-size-faq-heading);
    color: var(--kleur-fout-donker);
    transition: transform 0.3s ease;
    margin-left: 10px;
}

details[open] summary::after {
    transform: rotate(90deg);
}

details[open] p,
details[open] ul {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@media (max-width: 600px) {
    details {
        padding: 5px;
    }

    summary {
        padding: 10px;
    }

    details p {
        padding-left: 10px;
        padding-right: 10px;
    }

    h2.detail-header {
        font-size: var(--font-size-vacature-title);
    }

    details[open] ul {
        animation: fadeIn 0.5s ease;
        padding: 0;
    }
}

/* #endregion faq */

.link-slide {
    text-decoration: none;
    color: var(--tekst-donker);

    position: relative;
    font-weight: var(--font-weight-bold);
}

.link-slide::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--hoofdkleur-rood);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

.link-slide:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.button-row {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;
    width: 100%;

}

.jouw-tabel-class {
    width: 100%;
    max-width: 1000px;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: var(--font-size-base);
    box-shadow: 0 0 20px var(--schaduw-zwart-medium);
    border-radius: var(--radius-btn);
    overflow: hidden;

}

.jouw-tabel-class thead tr {
    background-color: var(--hoofdkleur-rood);

    color: var(--wit);
    text-align: left;
    font-weight: var(--font-weight-bold);
}

.jouw-tabel-class th,
.jouw-tabel-class td {
    padding: 15px 20px;
}

.jouw-tabel-class tbody tr {
    border-bottom: 1px solid var(--grijs-licht);
}

.jouw-tabel-class tbody tr td:last-child {
    background-color: var(--achtergrond-fout);

    font-weight: var(--font-weight-bold);
    color: var(--kleur-fout);

}

.jouw-tabel-class tbody tr:nth-of-type(even) {
    background-color: var(--achtergrond-input);
}

.jouw-tabel-class tbody tr:last-of-type {
    border-bottom: 2px solid var(--kleur-fout);
}

@media screen and (max-width: 600px) {
    .jouw-tabel-class {
        display: block;
        overflow-x: auto;
        font-size: var(--font-size-sm-compact);
    }

    .jouw-tabel-class th,
    .jouw-tabel-class td {
        padding: 10px 10px;
    }
}

#beschikbaarheid,
#code372,
#code373,
#les9u,
#les12u,
#prijzen,
#pakket-2u,
#motorrijbewijs-informatie {
    scroll-margin-top: 100px;
}

/* Doel van de vaste mobiele CTA. Wie op "Bekijk pakketten & prijzen" tikt heeft
   de kop "Onze tarieven" niet meer nodig — die vulde het halve scherm. We landen
   daarom met de bovenkant van de kaart net onder de vaste nav. De 77px is
   uitgerekend, niet geschat: 72px nav + 12px lucht + 13px voor het "meest
   gekozen"-label dat boven de kaart uitsteekt, min de 20px padding-top van de
   carousel-rij. Zonder die 13px schuift het label onder de nav. Swipe-hint en
   dots staan daardoor net boven de vouw; de kaarten ernaast piepen aan beide
   kanten mee, dus de swipe blijft zichtbaar. */
#pakketten {
    scroll-margin-top: 77px;
}

#beschikbaarheid-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Prijs-strip (code 372/373): vervangt de solo-prijskaart boven de
   beschikbaarheidstabel. Prijs staat één keer op de pagina; de tabel heeft
   daarom geen Prijs-kolom meer. Breedte gelijk aan #beschikbaarheid-container
   zodat strip en tabel op één lijn staan. */
.prijs-strip-wrap {
    max-width: 1300px;
    margin: 0 auto 25px;
    padding: 0 20px;
}

.prijs-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px 50px;
    background: var(--wit);
    border: 1px solid var(--rand-zacht);
    border-radius: var(--radius-lg);
    padding: 25px 30px;
    box-shadow: 0 4px 16px var(--schaduw-zwart-licht);
}

/* De microdata-wrappers (areaServed/provider) bevatten enkel meta/link en zijn
   dus lege flex-items: zonder dit eisen ze elk een gap van 50px op en schuift
   de hele strip naar rechts. Microdata wordt uit de DOM gelezen, niet uit de
   rendering, dus display:none verandert niets aan het schema. */
.prijs-strip > [itemprop="areaServed"],
.prijs-strip > [itemprop="provider"] {
    display: none;
}

/* Sectie-context centreert tekst; binnen de strip links uitlijnen zodat prijs
   en feature-lijst dezelfde linkerkantlijn volgen.

   flex-shrink moet aan staan (was `flex: 0 0 auto`): een flex-item met basis
   auto en shrink 0 houdt zijn max-content-breedte, en die wordt hier bepaald
   door de langste regel, de vat-info. Dat is 325px, breder dan de kaart op elk
   scherm onder ~446px, dus het prijsblok stak tot 36px buiten de kaartrand en
   op 360px werd het einde van de zin door body{overflow-x:hidden} weggeknipt.
   min-width:0 heft de automatische min-content-bodem van flex-items op, zodat
   de zin wrapt in plaats van de kaart uit te duwen. */
.prijs-strip__prijs {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    color: var(--wit);
    background: var(--hoofdkleur-rood);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin: -14px -18px;
}

/* Onder 800px wrapt het prijsblok naar zijn eigen rij (zie .prijs-strip
   media-query verderop): een los gecentreerd blokje botste dan met de
   links uitgelijnde featurelijst eronder. Bleedt daarom vol-breed uit tot
   een echte kaart-header (zelfde patroon als .card-header elders op de
   site), zodat prijs en features dezelfde linkerkantlijn delen. */
@media (max-width: 800px) {
    .prijs-strip__prijs {
        max-width: none;
        margin: -22px -20px 0;
        padding: 18px 20px;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
}

.prijs-strip__prijs .prijs-strip__label,
.prijs-strip__prijs .amount,
.prijs-strip__prijs .currency {
    color: var(--wit);
}

.prijs-strip__prijs .vat-info {
    color: var(--tekst-wit-muted);
}

.prijs-strip__label {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-label);
    color: var(--tekst-muted);
    font-weight: var(--font-weight-bold);
    margin: 0 0 6px;
}

/* .amount/.currency/.vat-info krimpen onder 800px en 480px omdat die overrides
   voor de smalle solo-prijskaart getuned zijn. In de strip is er breedte zat,
   dus hier blijft het bedrag groot en de voorwaarde leesbaar. Deze selectors
   zijn specifieker, dus ze winnen ongeacht bronvolgorde. */
.prijs-strip .price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
    margin-bottom: 10px;
}

.prijs-strip .currency {
    font-size: var(--font-size-4xl);
    vertical-align: baseline;
    line-height: 1;
}

.prijs-strip .amount {
    font-size: var(--font-size-price);
    line-height: 1;
}

.prijs-strip .vat-info {
    font-size: var(--font-size-sm);
    color: var(--tekst-body);
    margin-bottom: 0;
}

.prijs-strip__features {
    flex: 1 1 340px;
    max-width: 660px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
}

/* .feature-list centreert verticaal; bij een item dat over twee regels wrapt
   belandt het vinkje daardoor tussen beide regels in. */
.prijs-strip__features li {
    align-items: flex-start;
    margin-bottom: 8px;
}

/* flex-wrap alleen laten afhangen van de inhoudsbreedte was niet
   betrouwbaar: tussen ~750-900px paste alles nog naast elkaar terwijl deze
   media query er al van uitging dat het prijsblok gestapeld was, met een
   plat/zwevend bodempje van het prijsblok tot gevolg. flex-direction:column
   dwingt het stapelen exact op dezelfde grens af. */
@media (max-width: 800px) {
    .prijs-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 22px 20px;
        overflow: hidden;
    }

    .prijs-strip__features {
        flex: 0 1 auto;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 420px) {
    .prijs-strip .amount {
        font-size: var(--font-size-5xl);
    }

    .prijs-strip .currency {
        font-size: var(--font-size-3xl);
    }
}

/* Duo-variant (scooter AM): twee prijs-strips naast elkaar, links de
   goedkopere formule zonder examenbegeleiding en rechts die mét. Elke kaart is
   intern gestapeld (prijsblok als kaart-header, features eronder) — de
   horizontale strip-layout van code 372/373 heeft in twee kolommen de breedte
   niet. Dat is exact de gestapelde vorm die .prijs-strip onder 800px al
   aanneemt; deze selectors zijn specifieker en trekken ze naar alle breedtes. */
/* align-items:start, niet stretch: de linkerkaart houdt zijn featurelijst
   ingeklapt en zou uitgerekt naar de hoogte van de rechterkaart een gat van een
   paar honderd pixels tussen de samenvatting en de slotregel krijgen. Elke
   kaart neemt dus zijn eigen hoogte; klapt de linkerkaart open, dan groeit hij
   gewoon mee. */
.prijs-strip-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    align-items: start;
}

@media (max-width: 800px) {
    .prijs-strip-duo {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

.prijs-strip-duo .prijs-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 22px 20px;
    overflow: hidden;
}

/* Geen eigen border-radius: de kop bleedt tot ín de rand van de kaart en wordt
   door de overflow:hidden van .prijs-strip al op de binnenkant van die rand
   afgerond. Zet je hier ook --radius-lg, dan rondt de kop af op de búitenmaat
   terwijl de clip op de binnenmaat zit (buitenradius min randdikte) — in de
   bovenhoeken blijft dan een sikkeltje kaartachtergrond tussen rand en kop
   staan, het duidelijkst op de aanbevolen kaart met zijn 2px rand. */
.prijs-strip-duo .prijs-strip__prijs {
    max-width: none;
    margin: -22px -20px 0;
    padding: 18px 20px;
    border-radius: 0;
}

.prijs-strip-duo .prijs-strip__features {
    flex: 0 1 auto;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
}

/* Positioneringsvlak voor de overhangende .badge-popular. De kaart zelf kan dat
   niet zijn: die klipt zijn inhoud (overflow:hidden voor de doorlopende
   prijskop) en zou de badge op zijn eigen rand afsnijden. */
.prijs-strip-uitgelicht {
    position: relative;
}

/* Op de auto- en motopagina's landt de badge op een witte kaartrand; hier valt
   hij half over de rode prijskop en zou rood op rood samenvloeien. De witte ring
   snijdt hem los, zodat de pil als los object boven de kaart blijft zweven. */
.prijs-strip-uitgelicht .badge-popular {
    border: 3px solid var(--wit);
    box-shadow: 0 3px 10px var(--schaduw-zwart-strong);
}

/* Aanbevolen kaart: 2px stopbord-rode rand zoals .card-popular elders. De rand
   is 1px dikker dan op de standaardkaart, dus de padding compenseert met 1px
   minder — anders staat de inhoud van beide kaarten niet op dezelfde lijn. */
.prijs-strip-duo .prijs-strip--populair {
    border: 2px solid var(--hoofdkleur-rood);
    padding: 21px 19px;
}

.prijs-strip-duo .prijs-strip--populair .prijs-strip__prijs {
    margin: -21px -19px 0;
}

/* Pakket zonder examenbegeleiding moet net het minst opvallen: rode kop
   omgekeerd naar rode letters op witte achtergrond in plaats van wit op rood,
   zodat hij niet met het aanbevolen pakket ernaast concurreert. */
#pakket-basis .prijs-strip__prijs {
    background: var(--wit);
    border-bottom: 1px solid var(--rand-zacht);
}

#pakket-basis .prijs-strip__prijs .prijs-strip__label,
#pakket-basis .prijs-strip__prijs .amount,
#pakket-basis .prijs-strip__prijs .currency {
    color: var(--hoofdkleur-rood);
}

#pakket-basis .prijs-strip__prijs .vat-info {
    color: var(--tekst-muted);
}

/* Het label draagt in de duo-variant ook de badge. Als flexrij met vaste
   minimumhoogte bepaalt de tekstregel de hoogte van de kop, zodat de badge de
   rode kop niet een paar pixels hoger maakt dan die van de kaart ernaast — en
   daarmee alle features eronder uit lijn duwt. */
.prijs-strip-duo .prijs-strip__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px;
}

/* Uitklapbare featurelijst binnen een prijskaart. De globale details-stijl is
   een eigen kaartje (witte achtergrond, rand, schaduw, marges); binnen een
   prijskaart moet dat weg — enkel de chevron en het klapgedrag blijven, zodat
   het herkenbaar dezelfde interactie is als de FAQ eronder. */
.prijs-strip__uitklap {
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.prijs-strip__uitklap:hover,
.prijs-strip__uitklap[open] {
    border: 0;
    box-shadow: none;
}

.prijs-strip__uitklap > summary {
    cursor: pointer;
    padding: 0;
    color: var(--donker-achtergrond);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.prijs-strip__uitklap > summary::after {
    font-size: var(--font-size-base);
    color: var(--hoofdkleur-rood);
}

.prijs-strip__uitklap > summary:focus-visible {
    outline: 2px solid var(--hoofdkleur-rood);
    outline-offset: 4px;
    border-radius: var(--radius-btn);
}

/* De globale regel zet 15px; hier iets ruimer zodat de eerste feature niet aan
   de samenvatting plakt. */
.prijs-strip__uitklap .prijs-strip__features {
    margin-top: 18px;
}

/* De slotzin vouwt mee open en dicht en staat dus in de gewone blokstroom van de
   uitklap. Twee dingen moeten daar terug: de margin:auto van .prijs-strip__voet
   (bedoeld om hem naar de onderkant van de kaart te duwen) pakt hier als 0 uit,
   en de FAQ-regel `details p` springt elke paragraaf binnen een <details> 28px in
   — 10px links en rechts onder 600px. Binnen de kaart moet de zin gewoon links
   uitlijnen met de featurelijst erboven. */
.prijs-strip__uitklap .prijs-strip__voet {
    margin-top: 16px;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 600px) {

    /* De 600px-regels voor de FAQ geven summary 10px padding en details 5px;
       binnen de kaart zou dat de lijst uit lijn duwen met de prijskop erboven. */
    .prijs-strip__uitklap,
    .prijs-strip__uitklap > summary {
        padding: 0;
    }
}

/* Vanaf 801px staan de kaarten naast elkaar (zie .prijs-strip-duo hierboven) en
   hoeft niemand extra te klikken om te vergelijken. Het openzetten zelf gebeurt
   met het [open]-attribuut vanuit het inline script op de scooterpagina: CSS
   krijgt een gesloten <details> niet opengetrokken, want de browser verbergt de
   inhoud via zijn eigen shadow-slot en niet via display op het kind. Hier gaat
   enkel de summary weg, zodat de kaart dezelfde vorm heeft als die ernaast:
   prijskop, featurelijst, slotregel. Onder 800px (kaarten gestapeld) blijft het
   een gewone toggle, want anders moet je te ver scrollen om alles te zien. */
@media (min-width: 801px) {
    .prijs-strip__uitklap > summary {
        display: none;
    }

    /* Zonder summary erboven zou de 18px-marge van de lijst bovenop de 20px
       flexgap van de kaart komen; de featurelijst zou dan lager beginnen dan die
       van de kaart ernaast. */
    .prijs-strip__uitklap .prijs-strip__features {
        margin-top: 0;
    }
}

/* Slotregel per kaart: duwt zichzelf naar de onderkant zodat beide kaarten hun
   afsluitende zin op dezelfde hoogte hebben, ook als de featurelijsten
   verschillen in lengte. */
.prijs-strip__voet {
    margin: auto 0 0;
    padding-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--tekst-muted);
    text-align: left;
}

.prijs-strip-note {
    max-width: 900px;
    margin: 20px 0 0;
    font-size: var(--font-size-sm);
    color: var(--tekst-body);
    text-align: left;
}

@media (max-width: 800px) {

    .prijs-strip__voet,
    .prijs-strip-note {
        text-align: center;
    }

    .prijs-strip-note {
        margin-left: auto;
        margin-right: auto;
    }
}

.section-subtitle--links {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    text-align: left;
}

@media (max-width: 800px) {
    .section-subtitle--links {
        text-align: center;
    }
}

/* Tabel onder de prijsstrip moet minder opvallen dan de prijs erboven: het oog
   valt eerst op het bedrag, pas daarna op de tabel om een datum te kiezen.
   Overschrijft hier de rode kop en zware schaduw van .responsive-table met een
   rustigere variant — enkel binnen deze sectie, elders blijft de tabel zoals ze was. */
#beschikbaarheid-container .responsive-table {
    box-shadow: none;
    border-color: var(--rand-zacht);
}

#beschikbaarheid-container .responsive-table th {
    background-color: var(--hoofdkleur-rood-muted-light);
    color: var(--hoofdkleur-rood-dark);
}

@media (max-width: 950px) {
    #beschikbaarheid-container .responsive-table tr {
        border: 1px solid var(--rand-zacht);
        box-shadow: none;
    }
}

.rpt-container {
    display: flex;
    flex-direction: column;

    gap: 20px;
    align-items: flex-start;
    margin-top: 20px;
}

.rpt-text {
    width: 100%;
}

.rpt-video {
    width: 100%;
    max-width: 400px;

}

/* Vaste mobiele CTA (bijv. rijbewijs A) */
.mobile-fixed-cta {
    display: none;
}

@media (max-width: 800px) {
    .mobile-fixed-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1500;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--wit);
        border-top: 1px solid var(--rand-zwart-medium);
        box-shadow: 0 -4px 20px var(--schaduw-zwart-medium);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .mobile-fixed-cta.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    body.has-mobile-fixed-cta {
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    body.has-mobile-fixed-cta:has(.mobile-fixed-cta.is-hidden) {
        padding-bottom: 0;
    }

    .mobile-fixed-cta__button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        text-align: left;
        background: var(--hoofdkleur-rood);
        color: var(--wit);
        padding: 10px 16px;
        border-radius: var(--radius-badge);
        text-decoration: none;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-base);
        box-shadow: 0 4px 16px var(--hoofdkleur-rood-shadow);
        transition: background 0.3s ease, transform 0.15s ease;
    }

    .mobile-fixed-cta__button:hover,
    .mobile-fixed-cta__button:active {
        background: var(--hoofdkleur-rood-dark);
        transform: translateY(-1px);
    }

    .mobile-fixed-cta__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
    }

    .mobile-fixed-cta__icon svg {
        width: 24px;
        height: 24px;
    }

    .mobile-fixed-cta__icon--filled svg {
        fill: currentColor;
    }

    .mobile-fixed-cta__icon--filled svg.icon-stroke {
        fill: none;
    }

    .mobile-fixed-cta__text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mobile-fixed-cta__title {
        line-height: 1.15;
    }

    /* Bewust krapper gezet dan 11px/0,5px: de subregel moet één regel blijven,
       ook bij een langere claim ("Lessen mogelijk binnen 2-3 weken") op een
       375px-scherm. Wikkelt hij toch, dan groeit de balk en breekt de zin
       midden in "2-3 weken". */
    .mobile-fixed-cta__sub {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: var(--font-weight-semibold);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--tekst-wit-strong);
    }

    .mobile-fixed-cta__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--hoofdkleur-groen-licht);
        box-shadow: 0 0 0 0 rgba(93, 247, 113, 0.6);
        animation: cta-dot-pulse 1.8s ease-in-out infinite;
    }

    .mobile-fixed-cta__arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .mobile-fixed-cta__arrow svg {
        width: 22px;
        height: 22px;
    }

    .mobile-fixed-cta__button:hover .mobile-fixed-cta__arrow {
        transform: translateX(3px);
    }

    @keyframes cta-dot-pulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(93, 247, 113, 0.55);
        }

        50% {
            box-shadow: 0 0 0 5px rgba(93, 247, 113, 0);
        }
    }

    /* Mobiel: geen knoppen in prijskaarten, enkel vaste CTA onderaan */
    body.has-mobile-fixed-cta .card-footer .cta-button {
        display: none;
    }
}

/* ── Pakketkiezer ────────────────────────────────────────────────────────────
   Opt-in via .pakketten-kiezer op de carousel-wrap. Lost twee dingen op die
   klanten meldden: de prijskaart was nergens klikbaar (op mobiel werd de
   kaartknop zelfs verborgen, zie hierboven), en de vaste CTA onderaan ging naar
   een leeg formulier zonder het pakket dat de klant net gekozen had.
   De hele kaart wordt één klikdoel; de vaste balk volgt het pakket in beeld. */

.pakketten-kiezer .card-modern--klikbaar {
    position: relative;
}

/* Klikvlak over de hele kaart. Het moet een los element zijn: .cta-button heeft
   overflow:hidden (voor het shine-effect van ::before), dus een ::after daarop
   wordt tot de knop geclipt. De overlay staat buiten de tab-volgorde en is
   aria-hidden — de knop eronder blijft de route voor toetsenbord en schermlezer,
   zodat er geen dubbele link ontstaat. */
.pakketten-kiezer .card-modern__vlak {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* De knop boven de overlay, zodat de zichtbare affordance zelf ook echt de
   knop is die je raakt (en het hover-effect blijft werken). */
.pakketten-kiezer .card-modern--klikbaar .card-footer .cta-button {
    z-index: 2;
}

.pakketten-kiezer .card-modern--klikbaar:active {
    transform: translateY(1px);
}

.pakketten-kiezer .card-modern--klikbaar {
    transition: transform 0.15s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
    .pakketten-kiezer .card-modern--klikbaar:hover {
        box-shadow: 0 10px 28px var(--schaduw-zwart-kaart);
    }
}

@media (max-width: 800px) {

    /* De knop moet hier juist wél zichtbaar blijven: zonder knop is er geen
       enkel teken dat de kaart aanklikbaar is — precies de oorspronkelijke klacht. */
    body.has-mobile-fixed-cta .pakketten-kiezer .card-footer .cta-button {
        display: inline-block;
    }

    /* De vaste balk dekt de onderkant van de kaart af; extra lucht zodat de
       knop in de kaart niet onder de balk verdwijnt. */
    .pakketten-kiezer .pakketten-grid--mobile-carousel {
        padding-bottom: 24px;
    }
}

/* ── Auto-praktijkpagina: knoppenrij boven de kaarten ────────────────────────
   Prijskaart-voetnoot en tweede CTA (08/08/2026 verwijderd): elke kaart toont
   de inschrijfkosten nu zelf via .vat-info, zoals op de moto- en scooterpagina's
   — geen apart sterretje/voetnoot meer nodig. De tweede knop onderaan verviel
   ook: "Kies dit pakket" in de kaart zelf is intussen het enige, en enige juiste,
   klikdoel.

   En op 11/09/2026 ging de laatste knop weg, die boven de kaarten stond en naar
   #pakketten sprong (eigenaar): de kaarten staan een half scherm lager, en hij sprong
   juist over de M18/M36-uitleg heen die er intussen boven staat. Op mobiel
   stond hij al verborgen omdat de vaste balk onderaan hetzelfde deed, dus is ook
   .button-row--desktop verdwenen: die klasse bestond enkel om hem daar te verbergen. */

/* De balk wisselt van rol: "bekijk prijzen" boven de sectie, daarna de
   keuzeknop voor het zichtbare pakket. De prijs krijgt nadruk, want dat is
   waar de klant op stuurt. */
.mobile-fixed-cta__prijs {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.mobile-fixed-cta--kiezer .mobile-fixed-cta__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: space-between;
}

.mobile-fixed-cta__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bevestiging van het gekozen pakket op de inschrijfpagina. */
.gekozen-pakket {
    max-width: 700px;
    margin: 0 auto 25px;
    padding: 20px 24px;
    background: var(--wit);
    border: 1px solid var(--rand-zwart-medium);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px var(--schaduw-zwart-licht);
}

.gekozen-pakket__kop {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    color: var(--tekst-muted);
}

.gekozen-pakket__rij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.gekozen-pakket__naam {
    margin: 0;
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--tekst-donker);
}

.gekozen-pakket__sub {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-weight-normal);
    color: var(--tekst-muted);
}

.gekozen-pakket__prijs {
    margin: 0;
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--hoofdkleur-rood);
}

.gekozen-pakket__hint {
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: var(--tekst-muted);
}

.gekozen-pakket__terug {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
}