/* ============================================================================
   WCREATE BASIS  -  wcreate-main.css

   DE REGEL: opmaak schrijf je met de utility classes uit tailwind-css.css,
   rechtstreeks in de HTML. Nieuwe CSS is de uitzondering.

   Zoekvolgorde voor je CSS schrijft:
     1. wcreate-variables.css  tokens (kleuren, spacing, fontsizes, easing)
     2. tailwind-css.css       utilities. Mobiele varianten hebben de prefix
                               m-- en gelden onder 1024px (m--flex--col,
                               m--mt--24, m--text--center)
     3. wcreate-main.css       pas hier, en dan als herbruikbare component

   Wat NIET in dit bestand hoort, want tailwind-css.css heeft het al:
     margin, padding, gap, font-size, line-height, font-weight, text-align,
     text-transform, display, align-items, justify-content, flex-direction,
     border-radius, opacity, width, height, overflow, z-index, kleuren.
   Schrijf je zo'n declaratie toch, kijk dan eerst of er geen class voor is.
   Vroeger stond hier een tweede utility-set op percentages die de pixelset
   van tailwind overschreef (.p--20 was 20% in plaats van 20px). Die is eruit.
   Zet ze niet terug.

   Waar komt welke CSS:
     wcreate-header.css     header en navigatie
     wcreate-footer.css     footer
     wcreate-main.css       al de rest, per component met een titel erboven
     animation-wcreate.css  begintoestanden en will-change voor GSAP
     [klantnaam].css        enkel een override die nergens anders past

   Animatie gaat via GSAP. Geen Splide of andere slider libraries.
   ============================================================================ */

/* =========================== Algemeen =========================== */

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size);
    overflow-x: hidden;
}

img {
    width: 100%;
}

a {
    color: var(--color-black);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
    transition: color var(--animate);
}

/* Een gewone link op een vlak in de merkkleur wordt wit. Knoppen houden hun
   eigen kleur, anders valt een witte knop weg zodra het vlak de utility
   bg--primary krijgt. */
:is(.bg--primary, .bg--secondary) a:not(.knop):not([class*="btn--"]) {
    color: var(--color-white);
}

:is(.bg--primary, .bg--secondary) a:not(.knop):not([class*="btn--"]):hover,
:is(.bg--primary, .bg--secondary) a:not(.knop):not([class*="btn--"]):focus-visible {
    color: var(--color-white);
    transition: color var(--animate);
}

/* Smallere varianten van de container uit tailwind-css.css */
.w--container.medium {
    max-width: calc(var(--container-width) * 0.85);
}

.w--container.small {
    max-width: calc(var(--container-width) * 0.7);
}

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

h1, .h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    margin-bottom: 2rem;
}

h2, .h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-tight);
    margin-bottom: 1rem;
}

h3, .h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-normal);
    margin-bottom: 1rem;
}

h4, .h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-normal);
    margin-bottom: 1rem;
}

h5, .h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-normal);
    margin-bottom: 0.75rem;
}

p {
    font-size: var(--font-size);
    line-height: var(--line-height-relaxed);
}

/* =========================== Kleuren die tailwind niet heeft =========================== */

.text--gray-500 { color: var(--color-gray-500); }
.text--gray-700 { color: var(--color-gray-700); }

.bg--gray-100 { background-color: var(--color-gray-100); }
.bg--gray-200 { background-color: var(--color-gray-200); }
.bg--gray-500 { background-color: var(--color-gray-500); }

/* =========================== Randen, schaduwen, tekstdecoratie =========================== */

.border         { border: 1px solid var(--color-gray-200); }
.border--top    { border-top: 1px solid var(--color-gray-200); }
.border--bottom { border-bottom: 1px solid var(--color-gray-200); }
.border--left   { border-left: 1px solid var(--color-gray-200); }
.border--right  { border-right: 1px solid var(--color-gray-200); }

.shadow--sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow--md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.shadow--lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); }
.shadow--xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); }

.text--decoration-none      { text-decoration: none; }
.text--decoration-underline { text-decoration: underline; }

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

.z--999  { z-index: 999; }
.z--9999 { z-index: 9999; }

/* =========================== Transities en hover =========================== */

.transition--all       { transition: all var(--animate); }
.transition--colors    { transition: color var(--animate), background-color var(--animate), border-color var(--animate); }
.transition--transform { transition: transform var(--animate); }
.transition--opacity   { transition: opacity var(--animate); }
.transition--fast      { transition-duration: var(--animate-fast); }
.transition--slow      { transition-duration: var(--animate-slow); }

.hover--scale:hover   { transform: scale(1.05); transition: transform var(--animate); }
.hover--opacity:hover { opacity: 0.8; transition: opacity var(--animate); }
.hover--shadow:hover  { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); transition: box-shadow var(--animate); }
.hover--lift:hover    { transform: translateY(-5px); transition: transform var(--animate); }

/* =========================== Scroll to top =========================== */

.scroll--wcreate {
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    border: 1px solid var(--color-white);
    transition: 0.8s ease-in-out;
}

.scrollToTop {
    position: fixed;
    right: 2%;
    bottom: 5%;
    display: none;
    transition: 0.5s ease;
    z-index: 5;
}

a.scrollToTop svg {
    width: 50px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.8s ease-in-out;
}

.pijl {
    fill: var(--color-white);
}

.scroll--wcreate:hover .pijl {
    fill: var(--color-primary) !important;
    transition: 0.8s ease;
}

a.scrollToTop:hover .scroll--wcreate {
    background-color: var(--color-white);
    border: 1px solid var(--color-primary);
    transition: 0.8s ease;
}

/* =========================== Breadcrumbs =========================== */

.breadcrumbs,
.yoast-breadcrumbs {
    padding: 1rem 0;
    font-size: 0.9rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--color-gray-700);
    text-decoration: none;
    transition: color var(--animate);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--color-black);
}

.breadcrumb-separator {
    display: inline;
    margin: 0 0.5rem;
    color: var(--color-gray-500);
}

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

.btn--primary,
.btn--secondary {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 0;
    font-size: var(--font-size);
    font-weight: 300;
    text-transform: uppercase;
    color: var(--color-white);
    cursor: pointer;
    transition: 0.5s ease;
}

.btn--primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn--primary:hover {
    color: var(--color-primary);
    background: var(--color-white);
}

.btn--secondary {
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
}

.btn--secondary:hover {
    color: var(--color-secondary) !important;
    background: var(--color-white);
}

.btn--container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

/* =========================== Mobiel =========================== */
/* Utilities voor mobiel staan in tailwind-css.css met de prefix m-- en
   gelden onder 1024px. Hier enkel de koppen die mee moeten schalen. */

@media only screen and (max-width: 811px) {

    body { font-size: 1rem; }

    h1, .h1 { font-size: 1.6rem; margin-bottom: 2rem; }
    h2, .h2 { font-size: 1.3rem; font-weight: 300; margin-bottom: 1rem; }
    h3, .h3 { font-size: 1.2rem; margin-bottom: 1rem; }
    p       { font-size: 1rem; }

    .btn--primary,
    .btn--secondary {
        font-size: 0.9rem;
    }

    .btn--container {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================== CARZ4U BASIS =========================== */

/* Het oorspronkelijke ontwerp is gemaakt op 1800px, de groottes hieronder
   schalen daarom mee met de breedte van het scherm */

h1 {
    font-weight: 900;
    text-transform: uppercase;
}

h2 {
    font-size: 2vw;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

p {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.site-main,
main {
    display: block;
}

/* Kleuren en ruimte die tailwind niet heeft */
.bg--grijs-licht { background-color: var(--color-gray-100); }
.bg--grijs-donker { background-color: var(--color-dark); }

.ruimte--5 { padding: 5%; }
.ruimte--5-x { padding-left: 5%; padding-right: 5%; }
.ruimte--5-t { padding-top: 5%; }
.ruimte--5-b { padding-bottom: 5%; }

@media only screen and (max-width: 780px) {
    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.1rem;
        font-weight: 700;
    }
}

@media only screen and (max-width: 440px) {
    h2 {
        font-size: 1.3rem;
    }
}

/* =========================== KNOPPEN =========================== */

/* Standaard is een knop geel met donkere tekst. Bij hover keert hij om. */
.knop {
    display: inline-block;
    padding: 10px 35px;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.8vw;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.knop:hover,
.knop:focus-visible {
    background-color: var(--color-dark);
    color: var(--color-primary);
}

/* Donkere knop met gele rand */
.knop--donker {
    background-color: var(--color-dark);
    color: var(--color-primary);
}

.knop--donker:hover,
.knop--donker:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Enkel een gele rand */
.knop--outline {
    background-color: transparent;
    color: var(--color-primary);
}

.knop--outline:hover,
.knop--outline:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Compacte variant, voor naast elkaar in een smalle kolom */
.knop--klein {
    padding: 10px 15px;
}

@media only screen and (max-width: 780px) {
    .knop {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 440px) {
    .knop {
        padding: 10px 15px;
    }
}

/* =========================== SCROLL NAAR BOVEN =========================== */

.scrollToTop {
    position: fixed;
    right: 50px;
    bottom: 80px;
    z-index: 10;
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.scrollToTop:hover,
.scrollToTop:focus-visible {
    background-color: var(--color-black);
}

.pijl--omhoog {
    display: inline-block;
    margin-top: 6px;
    padding: 3px;
    border: solid var(--color-on-primary);
    border-width: 0 3px 3px 0;
    transform: rotate(-135deg);
}

.scrollToTop:hover .pijl--omhoog,
.scrollToTop:focus-visible .pijl--omhoog {
    border-color: var(--color-primary);
}

@media only screen and (max-width: 780px) {
    .scrollToTop {
        right: 30px;
        bottom: 30px;
    }
}


/* =========================== FORMULIEREN =========================== */

/* De reCAPTCHA badge blijft verborgen, zoals in het oude thema */
.grecaptcha-badge {
    visibility: hidden;
}

/* Onze eigen formulieren (contact in de footer, offerte op de importcalculator): witte tekst met een witte onderlijn op een donkere achtergrond */
.formulier input[type=text],
.formulier input[type=email],
.formulier input[type=tel],
.formulier textarea {
    width: 100%;
    padding: 8px 0;
    border: 0;
    border-bottom: 1px solid var(--color-white);
    border-radius: 0;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
}

.formulier input::placeholder,
.formulier textarea::placeholder {
    color: var(--color-white);
    opacity: 0.7;
}

.formulier input:focus,
.formulier textarea:focus {
    outline: 0;
    background-color: var(--color-white);
    color: #495057;
}

.formulier__veld {
    margin: 0 0 1.5rem;
}

.formulier__fout {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-white);
    font-size: var(--font-size-sm);
}

.formulier .is-fout {
    border-bottom: 3px solid var(--color-white);
}

.formulier button.knop {
    font-family: inherit;
    cursor: pointer;
}

.formulier button[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.formulier__melding {
    margin: 1.5rem 0 0;
    font-weight: 700;
}

/* Het honeypot is voor mensen onzichtbaar */
.formulier__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* =========================== HERO =========================== */

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--color-black);
    color: var(--color-white);
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__inhoud {
    position: relative;
    z-index: 11;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    min-height: 100vh;
}

.hero__kol {
    padding-left: 10%;
    padding-right: 10%;
}

.hero__titel {
    margin-bottom: 1.5rem;
    color: var(--color-white);
    font-size: 2.7vw;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.hero__sub2 {
    margin-bottom: 2.5rem;
    color: var(--color-white);
    font-size: 1.3vw;
    line-height: 1.5;
}

/* De merknaam staat in de h1 zelf, in het merkrood */
.hero__merk {
    color: var(--color-primary);
}

/* De knop en de AutoScout24 score naast elkaar */
.hero__acties {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: center;
}

.hero__acties .autoscout-score {
    margin-top: 0;
    line-height: 1.3;
}

/* Het label boven de slider met de recentste wagens */
.hero__label {
    margin-bottom: 1rem;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* De kaartjes in de hero */
.wagen-slide {
    position: relative;
    display: block;
    height: 30vh;
    margin: 0 10px;
    overflow: hidden;
    color: var(--color-white);
}

.wagen-slide:hover,
.wagen-slide:focus-visible {
    color: var(--color-white);
}

.wagen-slide__foto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wagen-slide__tekst {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    font-size: 1vw;
    font-weight: 700;
    text-shadow: 0 0 2px var(--color-black);
    text-transform: uppercase;
}

@media only screen and (max-width: 780px) {
    .hero {
        min-height: 0;
    }

    .hero__inhoud {
        display: block;
        min-height: 0;
        padding-top: 200px;
        padding-bottom: 50px;
    }

    .hero__kol {
        padding-left: 10%;
        padding-right: 10%;
    }

    .hero__slider {
        margin-top: 60px;
    }

    .hero__titel {
        font-size: 2rem;
    }

    .hero__sub2 {
        font-size: 1rem;
    }

    .wagen-slide {
        margin: 0;
    }

    .wagen-slide__tekst {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 440px) {
    .hero__inhoud {
        padding-top: 140px;
    }

    .hero__titel {
        font-size: 1.2rem;
    }

}

/* =========================== SLIDER =========================== */

/* Eén slider voor alles. Het aantal zichtbare slides komt uit de data
   attributen en wordt door wcreate-animation.js in --per-view gezet. */
.slider {
    position: relative;
}

.slider__viewport {
    overflow: hidden;
    cursor: grab;
    /* Horizontaal vegen is voor de slider, verticaal scrollen blijft voor de pagina */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.slider.is-slepen .slider__viewport {
    cursor: grabbing;
}

.slider__viewport img {
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Passen alle slides in beeld, dan zijn pijlen en puntjes overbodig */
.slider.is-statisch .slider__bediening {
    display: none;
}

.slider.is-statisch .slider__viewport {
    cursor: auto;
}

.slider__track {
    display: flex;
}

.slider__slide {
    flex: 0 0 calc(100% / var(--per-view, 1));
    min-width: 0;
}

.slider__bediening {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.slider__dots {
    display: flex;
    padding-left: 10px;
}

.slider__dot {
    position: relative;
    width: 100px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.slider__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
    transform: translateY(-50%);
}

.slider__dot.is-active::before {
    height: 4px;
    background-color: var(--color-primary);
}

.slider__pijlen {
    display: inline-flex;
    align-items: center;
    padding: 10px;
    color: var(--color-white);
    font-size: 1rem;
}

.slider__pijlen button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 2rem;
    font-weight: 600;
    cursor: pointer;
}

.slider__pijlen button:first-child {
    margin-right: 20px;
}

.slider__pijlen button:last-child {
    margin-left: 20px;
}

.slider__pijlen span {
    line-height: 3rem;
}

/* Pijlen over de foto, rechtsonder */
.slider__pijlen--over {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--color-black);
}

@media only screen and (max-width: 1599px) {
    .slider__dot {
        width: 50px;
    }
}

@media only screen and (max-width: 899px) {
    .slider__dot {
        width: 20px;
    }
}

@media only screen and (max-width: 780px) {
    .slider__dots {
        display: none;
    }

    .slider__pijlen--over {
        padding: 0 10px;
    }
}

/* =========================== HOME =========================== */

.tekst--blok {
    font-size: 1vw;
}

.opsomming {
    list-style: none;
    padding-left: 2rem;
}

.opsomming li {
    font-size: 1vw;
    line-height: 3rem;
}

.opsomming li::before {
    content: "o";
    display: inline-block;
    width: 1.4em;
    margin-left: -1.4em;
    color: var(--color-primary);
    font-weight: 600;
}

/* Sectie met een verticaal label links */
.sectie--label {
    position: relative;
    padding-left: calc(5% + 3rem);
}

.label--vertikaal {
    position: absolute;
    bottom: 12%;
    left: 5%;
    display: flex;
    width: 70vh;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    text-transform: uppercase;
}

.label--vertikaal__lijn {
    width: 40%;
    height: 1px;
    margin-top: 15px;
    margin-right: 50px;
    background-color: var(--color-white);
}

.label--vertikaal--cleaning {
    width: 50vh;
}

.label--vertikaal--cleaning .label--vertikaal__lijn {
    width: 60%;
}

/* De drie foto's naast de tekst bij B2B */
.sectie--fotos {
    display: flex;
    flex: 1.8;
    gap: 4%;
}

.sectie--fotos img {
    flex: 1;
    min-width: 0;
    height: auto;
    align-self: flex-start;
}

/* Import kort */
.import-kort {
    position: relative;
    overflow: hidden;
}

.import-kort__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.import-kort__bg {
    filter: brightness(0.55);
}

.import-kort__inhoud {
    position: relative;
    padding-top: 8%;
    padding-bottom: 8%;
    color: var(--color-white);
}

.import-kort__tekst {
    width: 50%;
}

.import-kort__titel {
    margin-bottom: 1.5rem;
    font-size: 4vw;
    font-weight: 700;
    text-transform: uppercase;
}

/* Car cleaning */
.cleaning__rij {
    display: flex;
}

.cleaning__tekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
}

.cleaning__foto {
    flex: 0.6;
    padding: 5%;
}

.prijs--accent {
    display: inline-block;
    padding: 10px 35px;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.8vw;
    font-weight: 700;
    text-transform: uppercase;
}

@media only screen and (max-width: 780px) {
    .tekst--blok,
    .opsomming li {
        font-size: inherit;
    }

    .opsomming li {
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 3rem;
    }

    .sectie--label {
        padding-left: 5%;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .label--vertikaal {
        display: none;
    }

    .sectie--fotos {
        flex-direction: column;
        gap: 2rem;
        margin-top: 2rem;
    }

    .import-kort__titel {
        font-size: 3rem;
    }

    .import-kort__tekst {
        width: 100%;
    }


    .cleaning__rij,
    .cleaning__rij--omgekeerd {
        flex-direction: column;
    }

    .cleaning__rij--omgekeerd {
        flex-direction: column-reverse;
    }

    .cleaning__tekst,
    .cleaning__foto {
        padding: 5% 0;
    }

    .prijs--accent {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 440px) {
    .opsomming {
        padding-left: 20px;
    }

    .opsomming li {
        font-weight: 500;
        line-height: 2rem;
    }
}


/* =========================== STOCKWAGENS ARCHIEF =========================== */

/* Hero van binnenpagina's: de tekst neemt 60% van de breedte */
.hero__inhoud--pagina {
    grid-template-columns: 60%;
}

.knop--pijlen {
    padding-top: 0;
    padding-bottom: 0;
}

.knop--pijlen span {
    display: inline-block;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.6;
    transform: rotate(90deg);
}

.wagens-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    background-color: var(--color-white);
}

/* Elke wagen is een witte kaart met een lichte schaduw. De drie strepen uit het logo staan voor de titel. */
.wagen-kaart {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    box-shadow: 0 2px 14px rgb(2 4 10 / 7%);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.wagen-kaart:not(.wagen-kaart--verkocht):hover {
    box-shadow: 0 8px 24px rgb(2 4 10 / 12%);
    transform: translateY(-6px);
}

.wagen-kaart__titel::before {
    content: "";
    flex: none;
    width: 34px;
    height: 25px;
    margin-top: 0.15rem;
    background-color: var(--color-primary);
    -webkit-mask: var(--streepjes) no-repeat left center / contain;
    mask: var(--streepjes) no-repeat left center / contain;
}

.wagen-kaart__beeld {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-gray-200);
}

.wagen-kaart__beeld > a {
    display: block;
    height: 100%;
}

.wagen-kaart__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.wagen-kaart:not(.wagen-kaart--verkocht):hover .wagen-kaart__foto {
    transform: scale(1.05);
}

.wagen-kaart__nieuw {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 1;
    padding: 10px 25px;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
    text-transform: uppercase;
}

.wagen-kaart__verkocht {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 30%);
}

.wagen-kaart__verkocht span {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--color-white);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.wagen-kaart__info {
    flex: 1;
    padding: 1.75rem;
}

.wagen-kaart__titel {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    overflow-wrap: anywhere;
    margin: 0 0 0.75rem;
    color: var(--color-black);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.wagen-kaart:not(.wagen-kaart--verkocht):hover .wagen-kaart__titel {
    color: var(--color-primary);
}

.wagen-kaart__tekst {
    overflow-wrap: anywhere;
    color: var(--color-black);
    font-weight: 500;
}

@media only screen and (max-width: 780px) {
    .wagens-raster {
        grid-template-columns: minmax(0, 1fr);
    }

    .knop--pijlen span {
        font-size: 1.4rem;
    }
}


/* =========================== STOCKWAGEN DETAIL =========================== */

.single--stockwagens {
    margin-top: 50px;
    padding: 5%;
}

.wagen-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5%;
    margin-top: 2rem;
}

/* Galerij: grote foto met vervagende overgang en een rij thumbnails */
.galerij__groot {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: var(--color-gray-200);
}

.galerij__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.galerij__thumbs {
    margin-top: 1.5rem;
}

.galerij__viewport {
    overflow: hidden;
}

.galerij__track {
    display: flex;
    will-change: transform;
}

.galerij__thumb {
    flex: 0 0 calc(100% / 3);
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

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

.galerij__thumb:hover,
.galerij__thumb:focus-visible,
.galerij__thumb.is-actief {
    opacity: 1;
}

/* Info naast de galerij */
.wagen-info {
    padding-left: 5%;
}

.wagen-info__merk {
    font-size: 3vw;
    font-weight: 900;
}

.wagen-info__model {
    color: var(--color-primary);
    font-size: 2vw;
    font-weight: 900;
}

.wagen-info__tekst {
    margin-top: 2%;
    margin-bottom: 5%;
}

.wagen-info__prijs {
    display: flex;
    align-items: center;
    margin-bottom: 5%;
}

.prijs--groot {
    padding: 2% 5%;
    font-size: inherit;
    font-weight: 600;
}

.wagen-info__btw {
    padding-left: 2%;
    font-weight: 600;
}

/* Contactbalk onder de galerij */
.contact-balk {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4rem;
    padding: 1%;
    background-color: var(--color-black);
    text-align: center;
}

.contact-balk a {
    padding: 10px;
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: color 0.5s ease;
}

.contact-balk a:first-child {
    border-right: 2px solid var(--color-primary);
}

.contact-balk a:hover,
.contact-balk a:focus-visible {
    color: var(--color-primary);
}

/* Specificaties */
.wagen-specs {
    padding: 2% 0;
}

.wagen-specs h2 {
    font-size: 2vw;
}

.wagen-specs__kolommen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 5%;
}

.wagen-specs__lijst {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem 1rem;
    margin: 0 0 2rem;
}

.wagen-specs__lijst dt {
    color: #495057;
}

.wagen-specs__lijst dd {
    margin: 0;
}

.wagen-specs__lijn {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--color-primary);
}

.wagen-specs__extra {
    overflow-wrap: anywhere;
}

/* Vorige en volgende wagen */
.wagen-nav {
    display: flex;
    justify-content: space-between;
    padding: 4% 0 0;
}

.knop--nav {
    padding: 10px 25px;
    border: 1px solid var(--color-black);
    background-color: var(--color-dark);
    color: var(--color-white);
    font-size: 0.8vw;
    font-weight: 700;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.knop--nav:hover,
.knop--nav:focus-visible {
    background-color: var(--color-white);
    color: var(--color-dark);
}

@media only screen and (max-width: 780px) {
    .single--stockwagens {
        margin-top: 120px;
    }

    .wagen-detail {
        display: block;
    }

    .wagen-info {
        padding-left: 0;
    }

    .wagen-info__merk {
        margin-top: 2rem;
        font-size: 2rem;
    }

    .wagen-info__model {
        font-size: 1.4rem;
    }

    .wagen-info__prijs {
        margin-top: 1rem;
    }

    .wagen-info__contact {
        display: none;
    }

    .contact-balk {
        display: block;
        margin-top: 2rem;
    }

    .contact-balk a {
        display: block;
        font-size: 1.3rem;
    }

    .contact-balk a:first-child {
        border-right: 0;
        border-bottom: 2px solid var(--color-primary);
    }

    .wagen-specs h2 {
        font-size: 1.6rem;
    }

    .wagen-specs__kolommen {
        display: block;
    }

    .wagen-specs__lijst {
        grid-template-columns: 1fr 1fr;
        font-size: 0.8rem;
    }

    .wagen-specs__lijst dt {
        color: var(--color-black);
        font-weight: 600;
    }

    .knop--nav {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}


/* =========================== IMPORT EN OVER ONS: BLOKKEN =========================== */

/* Rij met tekst en foto naast elkaar. De omgekeerde variant zet de foto links. */
.stap {
    display: flex;
}

.stap__tekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: 5%;
}

.stap__foto {
    flex: 1;
    padding: 5%;
}

.stap--omgekeerd {
    flex-direction: row-reverse;
}

.lijst {
    margin: 1rem 0;
    padding-left: 2rem;
    list-style: disc;
}

/* =========================== OVER ONS =========================== */

.eerlijk {
    position: relative;
    display: flex;
    align-items: center;
    height: 90vh;
}

.eerlijk__titel {
    position: absolute;
    top: 50%;
    left: 15%;
    z-index: 3;
    color: var(--color-white);
    font-size: 5vw;
    font-weight: 900;
    transform: translateY(-50%);
}

.eerlijk__foto {
    position: absolute;
    top: 50%;
    left: 40%;
    width: 51%;
    transform: translateY(-50%);
}

.banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* De drie tariefblokken, het middelste steekt uit */
.tarieven {
    display: flex;
}

.tarief {
    width: 33.333%;
    padding: 5%;
    background-color: var(--color-gray-800);
    color: var(--color-white);
}

.tarief--premium {
    position: relative;
    z-index: 1;
    top: -20px;
    margin-bottom: -40px;
    background-color: var(--color-black);
    box-shadow: 2px 4px 10px var(--color-black);
}

.tarief__titel {
    margin-bottom: 4rem;
    color: var(--color-white);
    font-size: 2vw;
    text-align: center;
}

.tarief .opsomming li {
    line-height: 4rem;
}

.tarief__prijs {
    margin-top: 2rem;
    text-align: center;
}

.prijs--zwart {
    display: inline-block;
    padding: 10px 35px;
    border: 1px solid var(--color-primary);
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 0.8vw;
    font-weight: 700;
    text-transform: uppercase;
}

.team {
    display: flex;
}

.team__lid {
    flex: 0.3;
    margin: 0;
    padding: 5%;
}

.team__lid figcaption {
    padding-top: 2%;
    font-size: 1vw;
    font-weight: 500;
}

@media only screen and (max-width: 780px) {
    .stap,
    .stap--omgekeerd {
        flex-direction: column;
    }

    .stap--omgekeerd {
        flex-direction: column-reverse;
    }

    .eerlijk {
        display: block;
        height: auto;
        padding: 10% 0;
    }

    .eerlijk__titel {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 10%;
        font-size: 2rem;
        transform: none;
    }

    .eerlijk__foto {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 20px;
        transform: none;
    }

    .tarieven {
        display: block;
    }

    .tarief {
        width: 100%;
        padding: 10%;
    }

    .tarief--premium {
        top: 0;
        margin: 20px 0;
        box-shadow: none;
    }

    .tarief__titel {
        margin-bottom: 2rem;
        font-size: 2rem;
    }

    .tarief .opsomming li {
        line-height: 2rem;
    }

    .prijs--zwart {
        font-size: 0.8rem;
    }

    .team__lid {
        flex: auto;
    }

    .team__lid figcaption {
        font-size: 2rem;
    }
}


/* =========================== STANDAARD INHOUD =========================== */

/* Pagina's zonder eigen template, zoekresultaten en de terugvaltemplate */
.inhoud {
    max-width: 1000px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 5%) 24px 10%;
}

.inhoud__titel {
    margin-bottom: 2rem;
    font-size: 2.6vw;
}

.inhoud__tekst > * + * {
    margin-top: 1rem;
}

.inhoud__tekst ul,
.inhoud__tekst ol {
    padding-left: 2rem;
}

.inhoud__tekst ul {
    list-style: disc;
}

.inhoud__tekst a,
.zoek-resultaat a {
    text-decoration: underline;
}

.zoek-resultaat {
    margin-bottom: 2rem;
}

.zoek-resultaat h2 {
    overflow-wrap: anywhere;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

@media only screen and (max-width: 780px) {
    .inhoud__titel {
        font-size: 2rem;
    }
}

/* =========================== ZOEKFORMULIER =========================== */

.search-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
}

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

.search-form .search-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-black);
    border-right: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 1rem;
}

.search-form .search-submit {
    padding: 12px 24px;
    border: 1px solid var(--color-primary);
    border-radius: 0;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
    background-color: var(--color-dark);
    color: var(--color-primary);
}


/* =========================== NIEUWE PAGINA'S: AUTOTRANSPORT EN HOME =========================== */

/* Een donkere laag over de hero wanneer de foto licht is */
.hero--overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 55%);
}

/* Tekst in de stappen: lopende tekst met ademruimte tussen de alinea's */
.tekst--stappen p + p {
    margin-top: 1.5rem;
}

.tekst--groot {
    font-size: 1.4vw;
    line-height: 1.7;
}

.tekst--twee-kolommen {
    max-width: 1100px;
}

.opsomming--stappen li {
    font-size: 1vw;
    line-height: 2rem;
    margin-bottom: 0.75rem;
}

/* Balk met wat we vervoeren */
.tags-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 2.5rem;
    padding: 1.5rem 5%;
    background-color: var(--color-black);
    color: var(--color-white);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tags-balk span + span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 2.5rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    vertical-align: middle;
}

/* Rij met drie foto's en een bijschrift */
.foto-rij {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3%;
}

.foto-rij figure {
    margin: 0;
}

.foto-rij img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.foto-rij figcaption {
    padding-top: 1rem;
    font-size: 1vw;
}

.foto-rij figcaption strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-primary);
    font-size: 1.2vw;
    text-transform: uppercase;
}

/* Offerteblok met een grote foto */
.cta {
    display: flex;
    align-items: stretch;
}

.cta__foto {
    flex: 1;
}

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

.cta__tekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.cta__knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 2rem;
}

.stap__foto img {
    display: block;
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 780px) {
    .tekst--groot {
        font-size: 1.1rem;
    }

.opsomming--stappen li {
        font-size: 0.9rem;
    }

    .tags-balk {
        gap: 0.5rem 1.5rem;
        font-size: 0.8rem;
    }

    .tags-balk span + span::before {
        margin-right: 1.5rem;
    }

    .foto-rij {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .foto-rij figcaption {
        font-size: 0.9rem;
    }

    .foto-rij figcaption strong {
        font-size: 1rem;
    }

    .cta {
        flex-direction: column;
    }
}


/* =========================== IMPORT =========================== */

/* Hero van binnenpagina's: laag, de inhoud begint meteen onder de titel (enkel de homepage heeft een volle hero) */
.hero--pagina {
    min-height: 0;
}

.hero--pagina .hero__inhoud {
    min-height: 0;
    padding: 12rem 0 7rem;
}

/* Smallere tekstkolom, zodat de tekst niet over de wagen op de foto loopt */
.hero--smal .hero__inhoud--pagina {
    grid-template-columns: 42%;
}

.import-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.import-intro__sub {
    color: var(--color-primary);
    font-size: var(--font-size-h4);
    font-weight: 700;
    text-transform: uppercase;
}

/* De drie voordelen naast elkaar */
.voordelen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4%;
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.voordeel {
    padding-top: 1.5rem;
    border-top: 3px solid var(--color-primary);
}

.voordeel__nummer {
    color: var(--color-primary);
    font-size: var(--font-size-h2);
    font-weight: 900;
}

.voordeel__titel {
    margin: 0.5rem 0 1rem;
    font-size: var(--font-size-h4);
    text-transform: uppercase;
}

/* De werkwijze in een blok: links de belofte, rechts de zes stappen */
.regelt {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 6%;
    align-items: start;
}

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

.regelt__stap {
    display: flex;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgb(255 255 255 / 18%);
}

.regelt__stap:first-child {
    padding-top: 0;
}

.regelt__nummer {
    display: flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    height: 3rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-h4);
    font-weight: 900;
}

.regelt__titel {
    margin: 0 0 0.25rem;
    color: var(--color-white);
    font-size: var(--font-size-h5);
    text-transform: uppercase;
}

.regelt__stap p {
    margin: 0;
}

.import-cta {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 6%;
    align-items: center;
}

.import-cta__beeld {
    margin: 0;
}

.import-cta__beeld img {
    display: block;
    width: 100%;
    height: auto;
}

.import-cta__label {
    margin: 0 0 0.5rem;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
}

@media only screen and (max-width: 780px) {
    .hero--smal .hero__inhoud--pagina {
        grid-template-columns: 100%;
    }

    .voordelen {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .regelt,
    .import-cta {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}


/* =========================== IMPORTCALCULATOR =========================== */

/* De calculator is een brede donkere kaart met een rode rand, links de stappen en rechts de kaart */
.calculator__kaart {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 6%;
    align-items: start;
    padding: 3rem 4rem;
    scroll-margin-top: 120px;
    border-top: 6px solid var(--color-primary);
    background-color: var(--color-black);
    color: var(--color-white);
}

.calculator__kaart a {
    color: var(--color-primary);
}

.calculator__stappen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.calculator__stappen li {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.45;
}

.calculator__stappen li.is-actief {
    opacity: 1;
}

.calculator__stappen span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.calculator__stap[hidden] {
    display: none;
}

.calculator__invoer {
    display: grid;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.calculator__label {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.calculator__veld {
    width: 6.5rem;
    padding: 0.25rem 0;
    border: 0;
    border-bottom: 3px solid var(--color-primary);
    border-radius: 0;
    background-color: transparent;
    color: var(--color-white);
    font-family: inherit;
    font-size: var(--font-size-display);
    font-weight: 900;
    text-align: center;
}

.calculator__veld::placeholder {
    color: var(--color-white);
    opacity: 0.25;
}

.calculator__veld:focus {
    outline: 0;
    border-bottom-color: var(--color-white);
}

.calculator__keuzes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.calculator__keuzes legend {
    grid-column: 1 / -1;
    padding: 0;
}

.calculator__keuze {
    position: relative;
    cursor: pointer;
}

.calculator__keuze input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.calculator__keuze-tekst {
    display: block;
    height: 100%;
    padding: 1.1rem 1.25rem;
    border: 2px solid rgb(255 255 255 / 25%);
    font-size: var(--font-size-sm);
}

.calculator__keuze-tekst strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.calculator__keuze input:checked + .calculator__keuze-tekst {
    border-color: var(--color-primary);
    background-color: rgb(235 53 44 / 15%);
}

.calculator__keuze input:focus-visible + .calculator__keuze-tekst {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
}

.calculator__verder[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Stap 2: de prijs boven het offerteformulier */
.calculator__samenvatting {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(255 255 255 / 20%);
}

.calculator__prijs {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--font-size-display);
    font-weight: 900;
    line-height: 1.1;
}

.calculator__noot {
    margin: 0.75rem 0 0;
    font-size: var(--font-size-sm);
    opacity: 0.75;
}

.calculator__terug {
    margin-top: 1.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-white);
    font-family: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

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

.calculator__titel {
    margin: 0 0 0.75rem;
    color: var(--color-white);
}

.calculator__offerte .formulier {
    margin-top: 2.5rem;
}

.formulier--raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}

.formulier--raster .formulier__veld--breed,
.formulier--raster .formulier__verstuur {
    grid-column: 1 / -1;
}

/* Onder de calculator: de opmerking over de prijzen */
.calculator__onder {
    margin-top: 2.5rem;
}

.calculator__kaartbeeld {
    position: sticky;
    top: 120px;
    margin: 0;
}

.kaart {
    display: block;
    width: 100%;
    height: auto;
}

.kaart__zone {
    stroke: var(--color-black);
    stroke-width: 1.2;
    stroke-linejoin: round;
    cursor: pointer;
    transition: opacity 0.2s;
}

.kaart__zone--0 { fill: var(--color-gray-800); }
.kaart__zone--1 { fill: #f7c4c0; }
.kaart__zone--2 { fill: #f08c85; }
.kaart__zone--3 { fill: #ee5c53; }
.kaart__zone--4 { fill: var(--color-primary); }

.kaart__zone:hover {
    opacity: 0.75;
}

.kaart__zone.is-gekozen {
    fill: var(--color-white);
}

.kaart__labels text {
    fill: var(--color-black);
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.kaart__labels text.is-gekozen {
    fill: var(--color-black);
}

.kaart__legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1rem 0 0;
    padding: 0;
    font-size: var(--font-size-sm);
    list-style: none;
}

.kaart__legende li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.kaart__stip {
    width: 1rem;
    height: 1rem;
}

.kaart__stip--1 { background-color: #f7c4c0; }
.kaart__stip--2 { background-color: #f08c85; }
.kaart__stip--3 { background-color: #ee5c53; }
.kaart__stip--4 { background-color: var(--color-primary); }

.prijslijst .calculator__noot {
    color: var(--color-gray-700);
    opacity: 1;
}

@media only screen and (max-width: 780px) {
    .calculator__kaart {
        padding: 1.75rem;
    }

    .calculator__kaart {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .calculator__kaartbeeld {
        position: static;
    }

    .calculator__keuzes,
    .formulier--raster {
        grid-template-columns: 1fr;
    }
}


/* =========================== LETTERTYPE (Satoshi) =========================== */

/* Satoshi uit de huisstijl, zelf gehost. Koppen in Black Italic, tekst in Medium. */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi-900i.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

body {
    font-weight: 500;
}

strong,
b {
    font-weight: 700;
}

/* Koppen staan in Satoshi Black Italic, in hoofdletters */
h1,
h2,
.wagen-info__merk,
.wagen-info__model,
.import-kort__titel,
.footer--titel,
.wagen-kaart__titel,
.fout-404__nummer {
    font-style: italic;
    font-weight: 900;
}

h3 {
    font-weight: 700;
}

.contact-logo {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-bottom: 2rem;
}

/* =========================== MERKSTREPEN =========================== */

/* De drie strepen uit het logo, in het merkrood. Op elke kop met titel--strepen, of los met streepjes. */
:root {
    --streepjes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='140 -402 180 132'%3E%3Cg transform='scale(1,-1)'%3E%3Cpath d='M165.4 399H315.4L310.5 371.6H160.5Z'/%3E%3Cpath d='M201.7 350.4H306.7L301.7 323H196.7Z'/%3E%3Cpath d='M147.9 301.8H297.9L293 274.4H143Z'/%3E%3C/g%3E%3C/svg%3E");
}

.titel--strepen::before,
.streepjes::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 0.85em;
    margin-right: 0.4em;
    background-color: var(--color-primary);
    -webkit-mask: var(--streepjes) no-repeat center / contain;
    mask: var(--streepjes) no-repeat center / contain;
}

/* Lichte donkere laag over de home-hero, iets sterker bovenaan zodat het menu leesbaar blijft */
.hero--home::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 65%) 0, rgb(0 0 0 / 35%) 30%, rgb(0 0 0 / 20%) 100%);
}