/* ── Inter — zelf gehoste font (geen externe Google Fonts request) ── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Montserrat — zelf gehost (variabel 400-700, geen externe request) ── */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Custom properties ─────────────────────────────────────── */
:root {
    /* Merel Blauw = de logokleur (#37404a). --color-dark is hetzelfde en blijft
       bestaan omdat het door de hele stylesheet gebruikt wordt. */
    --color-blue:          #37404a;
    --color-blue-50:       #83848c; /* 50% Merel Blauw — subteksten en hover */
    --color-primary:       #ae5327; /* koper, uit het logo */
    --color-primary-hover: #8c3f1c;
    --color-dark:          #37404a;
    --color-dark-hover:    #2c333b;
    --color-light-bg:      #f8f9fa;
    --color-border:        #e9ecef;
    --color-muted:         #83848c;
    --radius:              4px;
    --transition:          150ms ease;

    /* Koppen — Montserrat; doelmaten in px op desktop (html = 16px) */
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Skip-to-content ───────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .6rem 1.2rem;
    border-radius: 0 0 var(--radius) var(--radius);
    text-decoration: none;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ── Globale focus-stijl voor toetsenbordnavigatie ─────────── */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius);
}

/* ── Base ──────────────────────────────────────────────────── */
html {
    font-size: 14px;
    height: 100%;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    font-family: var(--font-body);
    color: var(--color-blue);
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 400;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1;
}

/* Koppen: Montserrat. Maten zijn de px-doelen op desktop (html = 16px);
   op mobiel schalen ze mee via html { font-size: 14px }. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-blue);
    letter-spacing: -.02em;
    line-height: 1.2;
}

h1 { font-size: 2.5rem;   font-weight: 700; }  /* 40px bold */
h2 { font-size: 2.25rem;  font-weight: 700; }  /* 36px bold */
h3 { font-size: 1.875rem; font-weight: 600; }  /* 30px semibold */
h4 { font-size: 1.625rem; font-weight: 600; }  /* 26px semibold */
h5 { font-size: 1.5rem;   font-weight: 500; }  /* 24px medium */
h6 { font-size: 1.125rem; font-weight: 600; }

/* Subteksten — 50% Merel Blauw. Zonder !important, zodat donkere secties
   (footer, .introductie) hun eigen lichte tekstkleur kunnen houden. */
.text-muted, .muted, .step-desc, figcaption {
    color: var(--color-blue-50);
}

/* Bootstrap zet .text-muted zelf met een variabele; die moet hier wijken. */
.text-muted { --bs-secondary-color: var(--color-blue-50); }

footer .text-muted,
footer small,
.introductie .text-muted,
.introductie .muted {
    color: rgba(255, 255, 255, .6);
    --bs-secondary-color: rgba(255, 255, 255, .6);
}

/* Sectietitel boven pane-content */
.section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: .5rem;
}

.introductie .section-label {
    color: rgba(255, 255, 255, .75);
}

/* ── Navigation ────────────────────────────────────────────── */
header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.site-nav {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 0;
    min-height: 88px;
}

.site-nav .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 0;
}

.navbar-brand img {
    width: 110px;
    height: auto;
    transition: width 0.25s ease;
}

/* ── Nav links – basis (mobiel én desktop) ── */
.site-nav .nav-link {
    color: var(--color-dark) !important;
    font-weight: 400;
    padding: .75rem 1.1rem;
    border-radius: 0;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    color: var(--color-primary) !important;
    background-color: transparent;
}

.site-nav .nav-link.active {
    color: var(--color-primary) !important;
}

/* ── Desktop: streepje onderaan, naadloos aan de nav-border ── */
@media (min-width: 992px) {
    .site-nav .navbar-nav { gap: 0.1rem; }

    /* Telefoonnummer verticaal gecentreerd, geen onderstreping */
    .site-nav .nav-link-tel {
        height: 88px;
        align-items: center;
    }

    /* Elke link is exact even hoog als de navbar en plakt aan de onderkant */
    .site-nav .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        height: 88px;
        padding: 0 1.1rem;
    }

    /* Oranje balkje via ::after — absoluut tegen de onderkant van de navbar */
    .site-nav .nav-link::after {
        content: '';
        position: absolute;
        bottom: -1px; /* overlapt de 1px nav-border exact */
        left: 0;
        right: 0;
        height: 4px;
        background-color: transparent;
    }

    .site-nav .nav-link:hover::after,
    .site-nav .nav-link:focus::after {
        background-color: var(--color-primary);
        transition: background-color var(--transition);
    }

    .site-nav .nav-link.active::after {
        background-color: var(--color-primary);
    }
}

/* ── Mobiel ── */
@media (max-width: 991.98px) {
    /* De padding hoort op de lijst binnenin, niet op .navbar-collapse zelf: Bootstrap
       animeert alleen de hoogte, dus padding op het collapse-element springt er in één
       keer bij en dat geeft een hik bij open- en dichtklappen. */
    .site-nav .navbar-collapse .navbar-nav {
        padding: 1rem 0 1.5rem;
    }
    .site-nav .navbar-collapse .nav-item + .nav-item {
        border-top: 1px solid var(--color-border);
    }
    .site-nav .navbar-collapse .nav-link {
        padding: .75rem .65rem;
    }
}

/* ── Telefoonnummer link ── */
.nav-link-tel {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-dark);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    padding: .4rem .6rem;
    white-space: nowrap;
}

.nav-link-tel:hover,
.nav-link-tel:focus {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

@media (max-width: 991.98px) {
    /* Geen eigen border-top: het <li> eromheen krijgt die al via .nav-item + .nav-item,
       anders staan er twee lijntjes boven het telefoonnummer. */
    .nav-link-tel {
        padding: .75rem .65rem;
        font-size: 1rem;
        display: flex;
        width: 100%;
    }
}

.navbar-toggler {
    border-color: var(--color-border);
    border-radius: var(--radius);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2855%2C64%2C74%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    border-radius: var(--radius);
    padding: .9rem 2rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    border-width: 1.5px;
    box-shadow: none !important;
    font-family: var(--font-body);
}

.btn:hover,
.btn:focus {
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

/* Gevulde knop: koper met witte tekst, hover naar Merel Blauw. */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: #fff;
}

/* Bootstrap zet op .btn-primary:disabled zijn eigen blauw (#0d6efd) — dat is
   specifieker dan .btn-primary, dus zonder deze regel wordt een uitgeschakelde
   knop een blauw vlak dat niet bij de huisstijl hoort. */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    opacity: .45;
}

/* Open/witte knop: hover naar koper met witte tekst. */
.btn-secondary {
    background-color: transparent;
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* Maakt de hele kaart klikbaar (zoals Bootstrap's .stretched-link) via een
   ::before-overlay. .card is al position: relative, dus de overlay valt
   precies over de kaart. */
.card-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: transparent;
    border-color: var(--color-blue);
    color: var(--color-blue);
    opacity: .45;
}

.introductie .btn-secondary {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
}

.introductie .btn-secondary:hover,
.introductie .btn-secondary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Hero / Header image ───────────────────────────────────── */
.header {
    background-image: url(../images/header.webp);
    background-position: center;
    background-size: cover;
    min-height: 520px;
    display: flex;
    align-items: center;
    padding: 64px 0;
}

.header--sm {
    min-height: 280px;
    padding: 64px 0;
}

.header h1,
.header h2,
.header h3,
.header h4 {
    color: #fff;
}

/* In de hero is de h2 een subtitel, geen kop-niveau: lichter en kleiner dan de
   36px uit de huisstijl, anders concurreert hij met de h1 erboven. */
.header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .9);
    margin-top: .5rem;
}

/* ── Section blocks ────────────────────────────────────────── */
.introductie {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, .75);
}

/* Koppen staan standaard in Merel Blauw; op een Merel Blauwe achtergrond zijn ze
   dan onleesbaar. In alle donkere secties dus wit. */
.introductie h1, .introductie h2, .introductie h3,
.introductie h4, .introductie h5, .introductie h6,
footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
    color: #fff;
}

/* Links in de donkere intro-secties moeten ook contrasteren. */
.introductie a:not(.btn) {
    color: #fff;
    text-decoration: underline;
}

.introductie a:not(.btn):hover,
.introductie a:not(.btn):focus {
    color: var(--color-primary);
}

.introductie2 {
    background-color: #f4f6f8;
    color: var(--color-dark);
}

.grey-box {
    background-color: var(--color-light-bg);
}

.pane {
    padding: 70px 0;
}

/* ── Scroll fade-in ─────────────────────────────────────────────
   Bewust omgekeerd: een .pane is standaard ZICHTBAAR. Alleen panes die bij het
   laden onder de fold liggen krijgen van site.js de klasse .will-animate, en
   pas daarmee worden ze even onzichtbaar om in te faden. Zou de CSS alles
   direct op opacity 0 zetten (zoals eerder), dan is de hele pagina onzichtbaar
   totdat site.js is gedownload en uitgevoerd — ~480 ms op productie, ook als er
   niets te animeren valt. Panes onder de fold ziet de bezoeker toch niet, dus
   daar is het kort zichtbaar zijn vóór de JS geen probleem. */
.pane.will-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.pane.will-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .pane {
        padding: 56px 16px;
    }
    .header {
        padding: 48px 16px;
    }
    footer {
        padding: 40px 16px 32px;
    }

    /* Ruimte tussen gestapelde kolommen (foto + tekst) op mobiel */
    .pane .row > [class*="col-"] + [class*="col-"] {
        margin-top: 1.75rem;
    }
}

/* ── Dienstkaarten (CFRS-patroon, Merel-kleuren) ────────────────
   De hele kaart is één <a>, dus overal klikbaar zonder overlay-truc. Binnenin
   alleen <span>'s: een <a> mag geen blok-elementen bevatten. */
.service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(55, 64, 74, .06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, border-color .18s ease;
}

/* Bewust geen verschuiving bij hover — alleen de rand en schaduw reageren. */
.service-card:hover,
.service-card:focus-visible {
    box-shadow: 0 6px 18px rgba(55, 64, 74, .10);
    border-color: var(--color-blue-50);
    text-decoration: none;
    color: inherit;
}

/* Vast beeldvak: de verhouding staat los van de aangeleverde foto, zodat de
   kaarten altijd op één lijn blijven. object-fit snijdt bij i.p.v. te vervormen. */
.service-card__media {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--color-light-bg);
}

.service-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem 1.4rem 1.5rem;
}

.service-card__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-blue);
    letter-spacing: -.02em;
    line-height: 1.3;
    margin-bottom: .45rem;
}

.service-card__text {
    display: block;
    flex: 1 1 auto;
    color: var(--color-blue-50);
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Tekstlink i.p.v. een volle knop; de » is de huisstijl-pijl. Bewust géén
   verschuiving bij hover — dat effect wilde je eerder expliciet niet. */
.service-card__more {
    display: block;
    color: var(--color-primary);
    font-weight: 600;
    font-size: .9rem;
}

.service-card__more::after {
    content: '\00a0\00bb';
}

.service-card:hover .service-card__more {
    color: var(--color-primary-hover);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius);
    border: none;
    background-color: var(--color-light-bg);
    box-shadow: none;
    transition: background-color var(--transition);
}

.card:hover {
    background-color: #eef0f3;
    box-shadow: none;
}

.card-img-top {
    border-radius: var(--radius) var(--radius) 0 0;
    /* VERPLICHT naast de width/height-attributen op de <img>. Die attributen gelden
       als CSS met de laagste prioriteit: Bootstrap's .card-img-top{width:100%}
       overschrijft de breedte, maar zonder hoogteregel blijft height="600" een
       harde 600px staan terwijl de breedte krimpt — de foto wordt dan uitgerekt.
       Met height:auto gebruikt de browser de attributen alleen nog om de
       verhouding te bepalen (en de ruimte vooraf te reserveren). Bootstrap's
       .img-fluid doet dit zelf al, vandaar dat alleen de kaarten last hadden. */
    height: auto;
}

.card-footer {
    background-color: transparent;
    border-top: none;
    padding: 1rem;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Kenteken input ────────────────────────────────────────── */
.kenteken {
    position: relative;
    display: flex;
    color: #111;
    background-color: #f4be04;
    line-height: 1.5;
    border-radius: var(--radius);
    border: 2px solid #111;
    overflow: hidden;
    width: 100%;
    max-width: 18rem;
    font-weight: 400;
    font-size: 2.5em;
}

.kenteken::before {
    content: "";
    position: relative;
    width: 2.2rem;
    background-color: #2662a2;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/kenteken.svg');
    background-size: 80% auto;
}

.kenteken-input {
    display: block;
    border: 0;
    outline: none; /* visueel: focus zit op .kenteken wrapper */
    text-align: center;
    font-family: Kenteken, Roboto, monospace;
    color: inherit;
    background-color: transparent;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: 0;
    top: -.04em;
}

.kenteken-input::placeholder       { color: #555; }
.kenteken-input:focus::placeholder  { color: transparent; }

/* Zichtbare focus op het kentekenveld als geheel */
.kenteken:focus-within {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .kenteken { max-width: 100%; }
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-styling {
    width: 100%;
}

.contact-form-wrap {
    width: 100%;
}

.form-label {
    font-weight: 500;
    font-size: .9rem;
    color: var(--color-dark);
    margin-bottom: .4rem;
}

.form-control,
.form-select {
    border-radius: var(--radius);
    border-color: var(--color-border);
    padding: .7rem .9rem;
    font-size: .95rem;
    line-height: 1.5;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(174, 83, 39, .3);
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.form-section {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
}

@media (min-width: 768px) {
    .mh-img-60  { max-height: 60px; }
    .mh-img-150 { max-height: 150px; }
    .btn-w-100  { width: auto; }
}

@media (max-width: 767.98px) {
    .mw-25    { max-width: 25%; }
    .btn-w-100 { width: 100%; }
    .form-styling {
        padding: 0 !important;
    }
}

/* ── Accordion (FAQ) ───────────────────────────────────────── */
.accordion-item {
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0 !important;
    background-color: transparent;
}

.accordion-item:first-of-type {
    border-top: 1px solid var(--color-border);
}

.accordion-button {
    background-color: transparent;
    color: var(--color-dark);
    font-weight: 600;
    font-size: 1rem;
    padding: 1.1rem 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--color-primary);
    box-shadow: none !important;
}

.accordion-button::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2337404a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ae5327'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    padding: 0 0 1.25rem 0;
    color: var(--color-muted);
    line-height: 1.7;
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, .75);
    padding: 56px 0 40px;
    border-top: 1px solid var(--color-primary);
}

@media (max-width: 767.98px) {
    footer > .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.footer-logo {
    width: 90px;
    filter: brightness(0) invert(1);
    opacity: .8;
}

.footer-heading {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .7rem;
    margin-bottom: .85rem;
}

.footer-address,
.footer-contact {
    font-size: .9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .75);
}

/* Meerdere vestigingen onder elkaar in de footer-kolom. */
.footer-vestiging + .footer-vestiging {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-vestiging-naam {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    margin-bottom: .2rem;
}

.footer-vestiging-naam:hover,
.footer-vestiging-naam:focus {
    color: var(--color-primary);
}

.footer-vestiging .footer-address { margin-bottom: .2rem; }

.footer-contact--general {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.footer-label {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .5);
}

.footer-links {
    font-size: .9rem;
}

.footer-links li {
    margin-bottom: .35rem;
}

footer a {
    color: rgba(255, 255, 255, .75) !important;
    text-decoration: none;
    transition: color var(--transition);
}

footer a:hover {
    color: var(--color-primary) !important;
}

.footer-links a {
    display: block;
}

/* Contactlinks (tel + e-mail): blok met tikoppervlak */
.footer-contact a {
    display: block;
    padding: .6rem 0;
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .6);
}

/* Bootstrap text-muted override in donkere footer */
footer .text-muted {
    color: rgba(255, 255, 255, .6) !important;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-bar {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: .55rem 0;
}

.bc-list {
    display: flex;
    align-items: center;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .78rem;
    letter-spacing: .01em;
}

.bc-item {
    display: flex;
    align-items: center;
    gap: .3rem;
    color: var(--color-muted);
}

/* scheidingsteken via ::before */
.bc-item + .bc-item::before {
    content: '/';
    color: var(--color-border);
    font-size: .75rem;
}

.bc-link {
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.bc-link:hover {
    color: var(--color-primary);
}

.bc-current {
    color: var(--color-dark);
    font-weight: 500;
}

/* ── Partner bar ───────────────────────────────────────────── */
.partner-bar {
    background-color: var(--color-light-bg);
    border-top: 1px solid var(--color-border);
    padding: 24px 0;
}

.partner-bar .row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.partner-bar .row > [class*="col-"] {
    flex: 1;
    padding: 0;
    display: flex;
    justify-content: center;
}

.partner-logo {
    max-height: 48px;
    max-width: 100%;
    opacity: .5;
    transition: opacity var(--transition);
    object-fit: contain;
}

.partner-logo:hover {
    opacity: .85;
}

/* ── Cookie consent ────────────────────────────────────────── */
#cookieConsent {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: calc(100% - 32px);
    max-width: 780px;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    padding: 20px 24px;
}

.cookie-consent-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1;
    min-width: 200px;
}

.cookie-consent-text strong {
    display: block;
    color: var(--color-dark);
    font-size: .95rem;
    margin-bottom: 4px;
}

.cookie-consent-text p {
    margin: 0;
    font-size: .85rem;
    color: var(--color-muted);
    line-height: 1.5;
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cookie-consent-link {
    font-size: .85rem;
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}

.cookie-consent-link:hover {
    color: var(--color-primary);
}

/* ── Roadmap / tijdlijn ─────────────────────────────────────── */
.roadmap {
    position: relative;
    padding-left: 2.5rem;
    max-width: 720px;
}

/* De weg — verticale streep met streepjespatroon */
.roadmap::before {
    content: '';
    position: absolute;
    left: .55rem;
    top: .5rem;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        var(--color-dark) 0,
        var(--color-dark) 14px,
        transparent 14px,
        transparent 24px
    );
    opacity: .18;
}

.roadmap-item {
    position: relative;
    display: flex;
    gap: 1.5rem;
    padding-bottom: 2.75rem;
}

.roadmap-item:last-child {
    padding-bottom: 0;
}

/* Marker links — jaar + icoon */
.roadmap-marker {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    position: absolute;
    left: -2.5rem;
    top: 0;
    width: 2rem;
}

.roadmap-year {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-align: center;
    line-height: 1.2;
}

/* Icoon-cirkel */
.roadmap-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.roadmap-dot svg {
    width: 14px;
    height: 14px;
}

/* Huidige mijlpaal */
.roadmap-item--current .roadmap-dot {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(174, 83, 39, .15);
}

/* Toekomst: lichtere stijl */
.roadmap-item--future .roadmap-dot {
    background: #f8f9fa;
    border-style: dashed;
    color: var(--color-muted);
    border-color: var(--color-muted);
}

.roadmap-item--future .roadmap-year {
    color: var(--color-muted);
}

/* Content rechts */
.roadmap-content {
    padding-top: .1rem;
}

.roadmap-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: var(--color-dark);
}

.roadmap-item--future .roadmap-title {
    color: var(--color-muted);
}

.roadmap-content p {
    font-size: .95rem;
    color: #555;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .roadmap {
        padding-left: 7rem;
    }

    .roadmap::before {
        left: 4.8rem;
    }

    .roadmap-marker {
        left: -7rem;
        width: 6rem;
        flex-direction: row;
        align-items: flex-start;
        gap: .6rem;
        justify-content: flex-end;
    }

    .roadmap-year {
        text-align: right;
        writing-mode: horizontal-tb;
        padding-top: .3rem;
    }
}

/* ── Process steps ─────────────────────────────────────────── */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(12.5% + 0px);
    right: calc(12.5% + 0px);
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--color-primary) 0, var(--color-primary) 10px,
        transparent 10px, transparent 18px
    );
    opacity: .25;
    pointer-events: none;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-step__circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    position: relative;
    z-index: 1;
}

.process-step__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
    color: var(--color-dark);
}

.process-step__text {
    font-size: .875rem;
    color: var(--color-muted);
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .process-steps {
        grid-template-columns: 1fr 1fr;
    }
    .process-steps::before { display: none; }
}

@media (max-width: 479.98px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* ── Openingstijden tabel in footer / contact ──────────────── */
/* Extra lucht tussen de openingstijden en de kolom ernaast: zonder dit sluit de
   tijden-lijst direct aan op 'Reparatie & herstel'. */
@media (min-width: 768px) {
    .footer-col-vestigingen { padding-right: 3rem; }
}

/* Per vestiging: gegevens links, openingstijden rechts ernaast. Op smalle schermen
   stapelen ze, anders wordt de kolom te smal voor twee naast elkaar. */
.footer-vestiging-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

@media (max-width: 575.98px) {
    .footer-vestiging-cols { grid-template-columns: 1fr; }
    .footer-vestiging-cols .footer-hours { margin-top: .5rem; }
}

/* Dag en tijd in twee kolommen, zodat de tijden onder elkaar uitlijnen. */
.footer-hours li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: .2rem 0;
    font-size: .875rem;
    color: rgba(255,255,255,.7);
}

.footer-hours li span:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ── Openingstijden op lichte achtergrond (contact) ────────── */
/* Staat in de markup als <h5>, dus houdt de h5 uit de huisstijl (24px medium).
   Alleen de kleur wordt hier gezet; grootte en gewicht komen uit de basisregel. */
.hours-heading {
    color: var(--color-blue);
}

/* Dag en tijd in twee kolommen, zodat de tijden onder elkaar uitlijnen. */
.hours-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: .3rem 0;
    font-size: .9rem;
    color: var(--color-blue);
}

.hours-list li span:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ── Vestigingblok (contactpagina) ─────────────────────────── */
/* Eén opmaak voor het vestigingblok op zowel de contact- als de vestigingpagina.
   overflow: hidden houdt de kaart binnen de afgeronde hoeken. */
.vestiging-blok {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Tekstlink onderaan het blok naar de vestigingpagina. Bewust een losse link en
   niet het hele blok klikbaar: het blok bevat zelf al een telefoon-, e-mail- en
   kaartelement, die dan onbereikbaar zouden worden. */
.vestiging-link {
    display: inline-block;
    align-self: flex-start;
    /* Duwt de knop naar de onderkant van het infoblok, zodat hij over alle kaartjes
       uitlijnt ongeacht optionele velden (WhatsApp, telefoon, e-mail, openingstijden).
       De 1.25rem is de minimale ruimte als de content het blok al bijna vult. */
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}

.vestiging-link:hover,
.vestiging-link:focus {
    color: var(--color-blue);
    text-decoration: underline;
}

/* Geen eigen grootte: de h3 uit de huisstijl (30px semibold) geldt ook hier. */

.vestiging-blok h3 a {
    color: var(--color-blue);
    text-decoration: none;
}

.vestiging-blok h3 a:hover,
.vestiging-blok h3 a:focus {
    color: var(--color-primary);
}

.vestiging-info {
    padding: 1.75rem;
    /* Vult de hoogte van het (even hoge) blok, zodat margin-top:auto op de link werkt. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* ── Contact details list ───────────────────────────────────── */
.contact-details li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .4rem 0;
    font-size: .9rem;
}

/* Strakke zwarte lijn-iconen voor adres, telefoon en e-mail. */
.contact-details svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: .2rem;
    color: #111;
}

.contact-details a {
    color: inherit;
    text-decoration: none;
}

.contact-details a:hover {
    color: var(--color-primary);
}

/* ── Google Maps embed ──────────────────────────────────────── */
.map-embed {
    display: flex;
    flex-direction: column;
    height: 360px;
}

.map-embed iframe {
    display: block;
    flex: 1;
}

/* ── Toegankelijkheid: geen animaties als gebruiker dat aangeeft ── */
@media (prefers-reduced-motion: reduce) {
    .pane {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .pane.will-animate,
    .pane.will-animate.in-view {
        transition: none !important;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Afspraak-wizard ─────────────────────────────────────────────────────── */
/* Kop boven het formulier; volgt de h2 uit de huisstijl. Links uitgelijnd tegen de
   container, dus niet meegecentreerd met de wizard eronder. */
.afspraak-titel {
    margin: 0 0 1.5rem;
    text-align: left;
}

.afspraak-wizard {
    margin: 0 auto;
}

/* Stap-indicator */
.step-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
}

.step-item {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.step-circle {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9rem;
    transition: background var(--transition), color var(--transition);
}

.step-item.is-active .step-circle,
.step-item.is-done .step-circle {
    background: var(--color-primary);
    color: #fff;
}

.step-label {
    font-size: .85rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.step-item.is-active .step-label { color: var(--color-dark); font-weight: 600; }

.step-line {
    flex: 1;
    min-width: 14px;
    height: 2px;
    background: var(--color-border);
    margin: 0 .55rem;
    transition: background var(--transition);
}

.step-line.is-done { background: var(--color-muted); }

/* Stap-inhoud */
.step-content { display: none; }
.step-content.is-active { display: block; }
.step-desc { color: var(--color-muted); line-height: 1.55; margin: 0 0 2rem; }

/* Kenteken */
.kenteken-row {
    display: flex;
    gap: .75rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.kenteken-plate {
    display: inline-flex;
    align-items: stretch;
    border: 2px solid #111;
    border-radius: 6px;
    overflow: hidden;
    background: #f4be04;
}

.kenteken-nl {
    background: #2662a2;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    font-weight: 700;
    font-size: .8rem;
}

.kenteken-field {
    border: 0;
    background: #f4be04;
    color: #111;
    width: 190px;
    padding: .4rem .75rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.kenteken-field:focus { outline: none; }
.kenteken-field::placeholder { color: #a88400; }

/* Voertuig-kaart */
.voertuig-card {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    background: var(--color-light-bg);
    padding: 1.25rem 1.4rem;
    margin-top: 1.75rem;
}

.voertuig-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.voertuig-header strong { font-size: 1.05rem; }

.kenteken-badge {
    background: #f4be04;
    border: 1px solid #111;
    border-radius: 4px;
    padding: .1rem .5rem;
    font-family: "Courier New", ui-monospace, monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.voertuig-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 1.25rem;
}

.detail-item { display: flex; flex-direction: column; }
.detail-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    margin-bottom: .1rem;
}

/* Velden */
.field-group { margin-bottom: 1.9rem; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .55rem; }

.field-input,
.file-input {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field-input:focus,
.file-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(55, 64, 74, .15);
    outline: none;
}

.field-input.textarea { resize: vertical; min-height: 120px; }

.file-list { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .85rem; color: var(--color-muted); }
.file-list li { padding: .1rem 0; }
.file-list .file-error { color: #b02a37; font-weight: 600; }

.muted { color: var(--color-muted); font-weight: 400; }

/* Overzicht */
.summary-box {
    background: var(--color-light-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 .5rem;
}

.summary-title { font-weight: 700; margin: 0 0 .5rem; }
.summary-section { padding: .75rem 0; border-top: 1px solid var(--color-border); }
.summary-section:first-of-type { border-top: 0; padding-top: 0; }
.summary-section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    margin: 0 0 .4rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .9rem;
    padding: .15rem 0;
}

.summary-row span { color: var(--color-muted); }
.summary-row--top { align-items: flex-start; }
.summary-text { text-align: right; max-width: 70%; }

/* Acties + fouten */
.step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
}

.step-actions [data-action="back"] { margin-right: auto; }

.afspraak-wizard .btn:disabled { opacity: .55; cursor: not-allowed; }
/* De verzendknop houdt tijdens het laden zijn volle kleur (geen 'disabled'-grijs). */
.afspraak-wizard .btn.is-loading { opacity: 1; cursor: progress; }
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.error-msg { color: #b02a37; font-size: .9rem; margin: 0 0 1rem; }

/* Honeypot-veld: verborgen via de stylesheet i.p.v. een opvallende inline d-none/aria-hidden,
   zodat een bot die alleen de HTML leest niet ziet dát het veld verborgen is en het toch invult.
   display:none houdt het óók weg bij schermlezers, wat voor een honeypot juist gewenst is. */
.form-extra { display: none; }

/* Foutmelding bij een specifiek veld (bij ontbrekende verplichte invoer). */
.field-error { color: #b02a37; font-size: .85rem; margin: .4rem 0 0; }
.field-group.has-error .field-input,
.field-group.has-error .kenteken-plate,
.field-group.has-error .radio-row .radio-option { border-color: #b02a37; }
.field-group.has-error .field-label { color: #b02a37; }
.vestiging-grid.has-error { outline: 1px solid #b02a37; outline-offset: 4px; border-radius: var(--radius); }

.manual-toggle {
    background: none;
    border: 0;
    padding: .75rem 0 0;
    color: var(--color-blue);
    text-decoration: underline;
    cursor: pointer;
    font-size: .9rem;
}

/* Ja/Nee-radio's (leasevoertuig) */
.radio-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.radio-option {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .6rem 1.1rem;
    cursor: pointer;
    font-size: .95rem;
}
.radio-option:hover { border-color: var(--color-primary); }
.radio-option input { accent-color: var(--color-primary); }
.radio-option:has(input:checked) {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

/* Telefoon met vast +31-voorvoegsel */
.tel-row { display: flex; align-items: stretch; }
.tel-prefix {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .8rem;
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--color-light-bg);
    color: var(--color-dark);
    font-size: .95rem;
    white-space: nowrap;
}
.tel-row .field-input { border-radius: 0 var(--radius) var(--radius) 0; }

/* Schadezijde — klikbaar bovenaanzicht van de auto */
.schadezijde {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Foto van het bovenaanzicht met een 3×3 klikraster eroverheen. */
.car-photo {
    position: relative;
    width: 240px;
    flex: none;
    border-radius: var(--radius, 8px);
    overflow: hidden;
}
.car-photo-img { display: block; width: 100%; height: auto; }
.car-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.car-zone {
    cursor: pointer;
    outline: none;
    background: transparent;
    transition: background var(--transition);
}
.car-zone:hover { background: rgba(174, 83, 39, .2); }
.car-zone.is-selected { background: rgba(174, 83, 39, .55); }
.car-zone:focus-visible { background: rgba(174, 83, 39, .3); }
.schadezijde-actions { min-width: 180px; }
.schadezijde-chosen { margin: .5rem 0 0; font-size: .9rem; }

@media (max-width: 480px) {
    .schadezijde { gap: 1rem; }
    .car-photo { width: 180px; }
}

/* Vestiging-keuze */
.vestiging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.vestiging-card {
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    padding: 1rem 1.25rem;
    cursor: pointer;
    font: inherit;
    /* Expliciete tekstkleur: iOS Safari maakt knoptekst anders systeemblauw. */
    color: var(--color-dark);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.vestiging-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.vestiging-card.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.vestiging-card strong { display: block; margin-bottom: .35rem; }
.vestiging-meta { font-size: .85rem; color: var(--color-muted); line-height: 1.5; }
.vestiging-tel { display: block; margin-top: .35rem; color: var(--color-primary); font-weight: 600; }

/* Bevestiging */
.bevestiging { text-align: center; padding: 2rem 1rem; }
.bevestiging-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.bevestiging a { color: var(--color-primary); }

@media (max-width: 540px) {
    .afspraak-wizard { padding: 1.5rem 1.25rem; }
    .fields-row { grid-template-columns: 1fr; }
    .voertuig-details { grid-template-columns: 1fr 1fr; }
    .step-label { display: none; }
    .step-line { min-width: 8px; margin: 0 .3rem; }
}