/* =========================================================================
   HV Products — huisstijl
   Oranje #FF781E op donkergrijs, koppen in Agency FB (hun eigen lettertype),
   lopende tekst in Montserrat. Overgenomen van hvproducts.nl.
   ========================================================================= */

@font-face {
    font-family: 'Agency FB';
    src: url('../fonts/agency.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --oranje:        #ff781e;
    --oranje-donker: #de5900;
    --oranje-licht:  #fff3ea;
    --donker:        #23272b;
    --donker-2:      #1a1d20;
    --tekst:         #2b2f33;
    --tekst-licht:   #6b7177;
    --lijn:          #e4e7ea;
    --lijn-donker:   #34393e;
    --vlak:          #f6f7f9;
    --wit:           #ffffff;
    --groen:         #1f8b4c;
    --rood:          #c62828;
    --geel:          #fbbc04;

    --radius:        14px;
    --radius-klein:  9px;
    --schaduw:       0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.16);
    --schaduw-diep:  0 2px 4px rgba(16,24,40,.05), 0 24px 48px -16px rgba(16,24,40,.22);
    --breedte:       1240px;
    --usp-hoogte:    61px;   /* hoogte van de pluspuntenbalk onder de hero */
    --hero-vast:     80px;   /* hoelang de hero blijft staan bij het scrollen */
    --hero-lucht:    32px;   /* extra ruimte rond de tekst in de hero */
    --blad-radius:   24px;   /* ronding bovenaan het blad onder de hero */
    /* De oranje kaart ligt met zijn onderste helft op het witte blad en met
       zijn bovenste helft op de foto. De ronding van het blad valt daarbij nog
       helemaal binnen de foto, zodat daar geen wit achter zichtbaar wordt. */
    --hero-overlap:  calc(var(--usp-hoogte) / 2 + var(--blad-radius));
    --kop:           'Agency FB', 'Haettenschweiler', 'Arial Narrow', Impact, sans-serif;
    --tekstfont:     Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Eén bewegingstaal voor de hele site. Drie curves, meer niet: hoe minder
       verschillende bewegingen, hoe rustiger en duurder het aanvoelt.
         --soepel  binnenkomen: begint vlot, remt lang uit
         --vlot    hover en statuswissels: kort en strak
         --veer    een klein tikje doorschieten; alleen voor knoppen en swatches */
    --soepel: cubic-bezier(.22, .61, .36, 1);
    --vlot:   cubic-bezier(.33, .10, .25, 1);
    --veer:   cubic-bezier(.34, 1.28, .64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Toetsenbordgebruikers krijgen overal dezelfde duidelijke ring. Muisklikken
   laten hem met rust; daar is :focus-visible voor. */
:focus-visible {
    outline: 2px solid var(--oranje);
    outline-offset: 3px;
}
.hero :focus-visible,
.site-footer :focus-visible,
.topbalk :focus-visible,
.band :focus-visible,
.cta :focus-visible { outline-color: #fff; }

body {
    margin: 0;
    font-family: var(--tekstfont);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--tekst);
    background: var(--wit);
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--oranje-donker); }

h1, h2, h3 {
    font-family: var(--kop);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    margin: 0 0 .4em;
    text-transform: none;
}
h1 { font-size: clamp(34px, 5vw, 58px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: 20px; }
h4 { font-size: 15px; font-weight: 700; margin: 0 0 .4em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--breedte); margin: 0 auto; padding: 0 24px; }
.smal { max-width: 820px; }
.sectie { padding: 66px 0; }
.sectie-klein { padding: 42px 0; }
.sectie-vlak { background: var(--vlak); }

.sectiekop { text-align: center; max-width: 62ch; margin: 0 auto 38px; }
.sectiekop p { color: var(--tekst-licht); font-size: 16px; }

.bovenlijn {
    display: inline-block;
    font-family: var(--tekstfont);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oranje-donker);
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------- topbalk */
.topbalk {
    background: var(--donker);
    color: #aeb6bd;
    font-size: 12.5px;
}
.topbalk .wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 38px;
    flex-wrap: wrap;
}
.topbalk ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.topbalk li { display: flex; align-items: center; gap: 7px; }
.topbalk svg { width: 14px; height: 14px; color: var(--oranje); flex: none; }
.topbalk a { color: #fff; text-decoration: none; font-weight: 600; transition: color .2s var(--vlot); }
/* Telefoon en e-mail hebben hun icoon in de link zelf staan. Zonder flex hangt
   dat icoon aan de tekstregel en staat het een paar pixels te hoog; net als bij
   het adres hiernaast moet het op het midden van de tekst uitkomen. */
.topbalk .rechts a { display: inline-flex; align-items: center; gap: 7px; }
.topbalk a:hover { color: var(--oranje); }
.topbalk .rechts { margin-left: auto; display: flex; gap: 18px; align-items: center; }

/* ---------------------------------------------------------------- header */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--lijn);
    position: sticky;
    top: 0;
    z-index: 60;
    transition: box-shadow .35s var(--vlot), border-color .35s var(--vlot);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 78px;
    transition: min-height .35s var(--vlot);
}
.logo { flex: none; }
.logo img { height: 46px; width: auto; transition: height .35s var(--vlot); }

/* Zodra je gaat scrollen trekt de balk zich een stukje samen en gaat hij op de
   pagina zweven in plaats van erop te liggen. Kleine beweging, maar hij maakt
   het verschil tussen "een balk bovenaan" en een header die meedenkt. */
body.gescrold .site-header {
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .05), 0 14px 32px -20px rgba(16, 24, 40, .45);
}
body.gescrold .site-header .wrap { min-height: 62px; }
body.gescrold .logo img { height: 38px; }
@media (max-width: 820px) {
    body.gescrold .site-header .wrap { min-height: 58px; }
}

.hoofdmenu {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-left: auto;
}
.hoofdmenu > a:not(.wagen-knop), .menu-knop {
    color: var(--tekst);
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    padding: 28px 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: padding .35s var(--vlot), color .2s var(--vlot);
}
/* De menu-items bepalen samen met .wrap de hoogte van de balk, dus die moeten
   mee inklappen — anders houdt hun padding de header alsnog op 78px. */
body.gescrold .hoofdmenu > a:not(.wagen-knop),
body.gescrold .menu-knop { padding: 20px 0; }

.hoofdmenu > a:not(.wagen-knop)::after, .menu-knop::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    height: 2px;
    background: var(--oranje);
    transform: scaleX(0);
    /* Bij het aanwijzen loopt het streepje van links naar rechts binnen, bij het
       weghalen loopt het aan diezelfde kant verder weg in plaats van terug te
       krimpen. Dat leest als één doorgaande beweging. */
    transform-origin: right;
    transition: transform .3s var(--soepel), bottom .35s var(--vlot);
}
body.gescrold .hoofdmenu > a:not(.wagen-knop)::after,
body.gescrold .menu-knop::after { bottom: 14px; }
.hoofdmenu > a:not(.wagen-knop):hover::after, .menu-knop:hover::after,
.hoofdmenu > a.actief::after { transform: scaleX(1); transform-origin: left; }
.hoofdmenu > a.actief { color: var(--oranje-donker); }
.menu-knop .pijl { width: 11px; height: 11px; transition: transform .18s; }
.menu-item { position: relative; }
.menu-item[data-open="1"] .pijl { transform: rotate(180deg); }

/* uitklapmenu kleding: links de hoofdcategorieën, rechts wat erin zit */
.megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: min(880px, 94vw);
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    box-shadow: var(--schaduw-diep);
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--soepel), transform .22s var(--soepel), visibility .22s;
    z-index: 70;
}
.menu-item[data-open="1"] .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-lijst { background: var(--vlak); border-right: 1px solid var(--lijn); padding: 8px 0; }
.mega-hoofd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    text-decoration: none;
    color: var(--tekst);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.mega-hoofd:last-child { border-bottom: 0; }
.mega-hoofd .pijltje { width: 14px; height: 14px; margin-left: auto; opacity: 0; transition: opacity .12s; }
.mega-hoofd:hover, .mega-hoofd.actief { background: var(--oranje); color: #fff; }
.mega-hoofd:hover .pijltje, .mega-hoofd.actief .pijltje { opacity: 1; }

.mega-paneel { padding: 18px; }
.mega-inhoud { display: none; }
.mega-inhoud.actief { display: block; }

.mega-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mega-tegels a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 8px;
    border-radius: var(--radius-klein);
    text-decoration: none;
    color: var(--tekst);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
}
.mega-tegels a { transition: background .2s var(--vlot), color .2s var(--vlot); }
.mega-tegels a:hover { background: var(--oranje-licht); color: var(--oranje-donker); }
.mega-tegels img { width: 54px; height: 54px; object-fit: contain; }

.mega-alles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--lijn);
    width: 100%;
    color: var(--oranje-donker);
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
}

.mega-groot {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--tekst);
    border-radius: var(--radius-klein);
    padding: 10px;
}
.mega-groot:hover { background: var(--oranje-licht); }
.mega-groot img { width: 120px; height: 96px; object-fit: cover; border-radius: 8px; flex: none; }
.mega-groot strong { display: block; font-size: 17px; }
.mega-groot em { font-style: normal; font-size: 13px; color: var(--tekst-licht); }

.wagen-knop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--oranje);
    color: #fff !important;
    padding: 11px 18px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: background .2s var(--vlot), transform .28s var(--veer), box-shadow .28s var(--vlot);
}
.wagen-knop:hover {
    background: var(--oranje-donker);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(232, 119, 34, .6);
}
.wagen-knop:active { transform: translateY(0); transition-duration: .07s; }
.wagen-knop svg { width: 17px; height: 17px; }
.wagen-telling {
    background: rgba(255,255,255,.3);
    border-radius: 100px;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 1.5;
}

.menu-hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-hamburger svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- knoppen */
.knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: var(--oranje);
    color: #fff;
    border: 2px solid var(--oranje);
    padding: 13px 26px;
    border-radius: 100px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1.3;
    transition: background .2s var(--vlot), border-color .2s var(--vlot),
                color .2s var(--vlot), transform .28s var(--veer), box-shadow .28s var(--vlot);
}
.knop:hover { background: var(--oranje-donker); border-color: var(--oranje-donker); color: #fff; transform: translateY(-2px); }
/* Alleen de oranje hoofdknop krijgt een gekleurde gloed onder zich; de
   omlijnde varianten blijven vlak, anders wordt het rommelig. */
.knop:not(.knop-rand):not(.knop-wit):not(.knop-omlijnd-wit):hover {
    box-shadow: 0 10px 22px -10px rgba(232, 119, 34, .6);
}
/* Indrukken geeft meteen antwoord: terug naar de grondlijn, zonder na-veren. */
.knop:active { transform: translateY(0); transition-duration: .07s; }
.knop:disabled { background: #cfd3d7; border-color: #cfd3d7; cursor: not-allowed; transform: none; box-shadow: none; }
.knop svg { width: 17px; height: 17px; }

.knop-rand { background: #fff; color: var(--tekst); border-color: var(--lijn); }
.knop-rand:hover { background: var(--vlak); color: var(--tekst); border-color: #cfd5da; }
.knop-wit { background: #fff; color: var(--oranje-donker); border-color: #fff; }
.knop-wit:hover { background: rgba(255,255,255,.88); color: var(--oranje-donker); border-color: transparent; }
.knop-omlijnd-wit { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.knop-omlijnd-wit:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.knop-klein { padding: 9px 17px; font-size: 13.5px; }
.knop-breed { width: 100%; }

/* ---------------------------------------------------------------- meldingen */
.melding {
    padding: 14px 18px;
    border-radius: var(--radius-klein);
    margin: 0 0 22px;
    border-left: 4px solid var(--oranje);
    background: var(--oranje-licht);
    font-size: 14.5px;
}
.melding.ok   { border-left-color: var(--groen); background: #edf9f1; }
.melding.fout { border-left-color: var(--rood);  background: #fdeded; }

/* ---------------------------------------------------------------- prijs */
.prijs { font-weight: 700; font-size: 17px; }
.prijs-incl { color: var(--tekst-licht); font-size: 12px; margin-left: 6px; font-weight: 500; }

/* ---------------------------------------------------------------- hero */
.hero {
    position: relative;
    min-height: min(660px, 84vh);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    background: var(--donker);
    isolation: isolate;
    /* Blijft even staan terwijl de inhoud eroverheen schuift. Hoe lang precies
       bepaalt .hero-houder hieronder. */
    position: sticky;
    top: 0;
}

/* De houder krijgt onderin een leeg blokje. Precies zolang blijft de hero staan
   terwijl de inhoud eroverheen schuift; daarna scrollt hij gewoon mee.
   (Opvulling met padding werkt hier niet: een sticky element mag alleen bewegen
   binnen de inhoud van zijn houder, niet binnen de padding.)

   De negatieve marge haalt dat blokje weer uit de opmaak én legt de oranje
   kaart over de foto heen. Dat moet in één waarde: twee negatieve marges naast
   elkaar klappen namelijk samen tot de grootste van de twee, waardoor de
   overlap van de kaart anders verloren gaat. */
.hero-houder {
    position: relative;
    z-index: 0;
    margin-bottom: calc(-1 * (var(--hero-vast) + var(--hero-overlap)));
}
.hero-houder::after {
    content: "";
    display: block;
    height: var(--hero-vast);
}

/* De dia's schuiven niet, ze vloeien in elkaar over en zoomen heel langzaam in.
   Dat geeft rust en houdt de foto's toch levend. */
.hero-dias { position: absolute; inset: 0; z-index: 0; }
.hero-dias .dia {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.6s ease-in-out;
    will-change: opacity, transform;
}
.hero-dias .dia.aan { opacity: 1; }

/* De zoom hangt bewust aan een eigen klasse (.zoomt) en niet aan .aan. Zat hij
   aan .aan vast, dan zou het beeld op het moment van wisselen terugspringen naar
   zijn beginformaat terwijl het nog anderhalve seconde zichtbaar uitvloeit — en
   dat zie je als uitzoomen, precies vóór de volgende foto. Nu blijft de oude
   foto gewoon doorzoomen tot hij weg is; site.js haalt .zoomt er pas daarna af.

   Verder linear in plaats van ease-out: met ease-out is de beweging na een paar
   seconden vrijwel klaar en staat het beeld de rest van de tijd stil. De dia is
   hooguit 7,6 seconde in beeld, dus met 12 seconden looptijd zoomt hij de hele
   tijd door en komt hij nooit aan het eind. */
@media (prefers-reduced-motion: no-preference) {
    .hero-dias .dia.zoomt { animation: hero-inzoomen 12s linear forwards; }
    @keyframes hero-inzoomen {
        from { transform: scale(1.05); }
        to   { transform: scale(1.16); }
    }
}

/* Twee lagen: van links donker zodat de tekst leesbaar blijft, en boven- en
   onderaan een zweem donker voor de header en de overgang naar de oranje balk. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(95deg,
            rgba(13,16,19,.93) 0%,
            rgba(13,16,19,.80) 32%,
            rgba(13,16,19,.42) 60%,
            rgba(13,16,19,.18) 100%),
        linear-gradient(180deg,
            rgba(13,16,19,.55) 0%,
            rgba(13,16,19,0) 26%,
            rgba(13,16,19,0) 58%,
            rgba(13,16,19,.55) 100%);
}

/* Onderin moet zoveel ruimte zitten dat de oranje kaart er helemaal overheen
   kan schuiven zonder de knoppen of de streepjes te raken. De ruimte bovenin
   volgt dezelfde formule min de overlap, waardoor er in rust boven en onder de
   tekst precies evenveel lucht zit. */
.hero .wrap {
    position: relative;
    z-index: 2;
    /* .hero is een flexbox, dus deze wrap is een flex-item en zou anders
       krimpen tot de breedte van de tekst. De 'margin: 0 auto' van .wrap
       centreerde dat smalle blok dan midden in het scherm, los van het
       stramien van de header en de oranje balk. */
    width: 100%;
    padding-top:    calc(var(--hero-vast) + var(--hero-lucht));
    padding-bottom: calc(var(--hero-vast) + var(--hero-lucht) + var(--hero-overlap));
}
.hero-inhoud { max-width: 41rem; }

/* De hero bouwt zichzelf op bij het laden: regel voor regel, van boven naar
   beneden, met een korte tel ertussen. Dat is het eerste wat een bezoeker ziet
   en het scheelt enorm of dat als één blok verschijnt of zich netjes ontvouwt.
   'backwards' zorgt dat alles al onzichtbaar staat vóór zijn beurt komt. */
@media (prefers-reduced-motion: no-preference) {
    .hero-inhoud > *,
    .hero-punten {
        animation: hero-binnen .85s var(--soepel) backwards;
    }
    .hero-inhoud > *:nth-child(1) { animation-delay: .12s; }
    .hero-inhoud > *:nth-child(2) { animation-delay: .20s; }
    .hero-inhoud > *:nth-child(3) { animation-delay: .30s; }
    .hero-inhoud > *:nth-child(4) { animation-delay: .40s; }
    .hero-inhoud > *:nth-child(5) { animation-delay: .50s; }
    .hero-punten { animation-delay: .58s; }

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

    /* De streep vóór de bovenregel tekent zichzelf, in plaats van er ineens
       te staan. */
    .hero .bovenlijn::before {
        animation: lijn-trekken .7s var(--soepel) .3s backwards;
    }
    @keyframes lijn-trekken {
        from { width: 0; opacity: 0; }
    }
}

.hero .bovenlijn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--oranje);
    margin-bottom: 16px;
}
.hero .bovenlijn::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--oranje);
    flex: none;
}

.hero h1 {
    color: #fff;
    font-size: clamp(38px, 5.4vw, 68px);
    margin-bottom: .3em;
    text-wrap: balance;
    text-shadow: 0 2px 34px rgba(0,0,0,.45);
}
.hero h1 em { font-style: normal; color: var(--oranje); }
.hero p.intro {
    font-size: 17.5px;
    color: #d9dee3;
    max-width: 33rem;
    text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.hero-knoppen { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-knoppen .knop { padding: 15px 30px; font-size: 15px; }

/* Streepjes onder de knoppen: laten zien dat er meer foto's zijn en waar je bent. */
.hero-stippen {
    display: flex;
    gap: 7px;
    margin-top: 32px;
}
.hero-stippen button {
    width: 26px;
    height: 3px;
    border: 0;
    padding: 0;
    border-radius: 3px;
    background: rgba(255,255,255,.38);
    cursor: pointer;
    transition: background .2s, width .25s;
}
.hero-stippen button:hover { background: rgba(255,255,255,.65); }
.hero-stippen button[aria-selected="true"] { background: var(--oranje); width: 44px; }

/* De pluspunten liggen als kaart over de onderrand van de hero heen. Die
   overlap komt uit .hero-houder, niet uit een eigen marge. */
.hero-punten { position: relative; z-index: 3; }

/* Het blad dat over de hero heen schuift. De ronde bovenhoeken en de schaduw
   zijn in rust niet te zien; ze komen tevoorschijn zodra het blad over de foto
   heen komt, en maken dat het er echt vóór lijkt te liggen. */
.na-hero {
    position: relative;
    z-index: 2;
    /* Omhoog tot het midden van de oranje kaart: die snijdt de bovenrand van
       het blad dus precies doormidden. */
    margin-top: calc(var(--usp-hoogte) / -2);
    background: var(--wit);
    border-radius: var(--blad-radius) var(--blad-radius) 0 0;
    box-shadow: 0 -22px 44px -22px rgba(13,16,19,.5);
}
.hero-punten ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--oranje);
    border-radius: var(--radius);
    box-shadow: 0 20px 44px -20px rgba(13,16,19,.7);
    overflow: hidden;
}
.hero-punten li {
    display: flex;
    align-items: center;
    gap: 11px;
    height: var(--usp-hoogte);
    padding: 0 22px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-left: 1px solid rgba(255,255,255,.2);
}
.hero-punten li:first-child { border-left: 0; }
.hero-punten svg { width: 21px; height: 21px; flex: none; }
.punten-balk { position: relative; }
.punten-pijl {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 42px;
    border: 0;
    padding: 0;
    color: #fff;
    cursor: pointer;
    z-index: 2;
    align-items: center;
    justify-content: center;
}
.punten-pijl svg { width: 19px; height: 19px; }
.punten-pijl.links {
    left: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    justify-content: flex-start;
    padding-left: 11px;
}
.punten-pijl.rechts {
    right: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(270deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    justify-content: flex-end;
    padding-right: 11px;
}
.punten-pijl:active svg { transform: scale(.85); }

.hero-punten .sterren { gap: 1px; margin: 0; flex: none; }
.hero-punten .sterren svg { width: 14px; height: 14px; color: #fff; }
.hero-punten strong { font-weight: 700; }

/* ---------------------------------------------------------------- oranje band */
/* Eén statement in het oranje van de huisstijl. Bewust géén opsomming: de
   categorieën staan er vlak boven al met foto en al. Deze balk geeft de pagina
   even rust tussen twee roosters en beantwoordt de vraag die daarna komt:
   hoe komt mijn ontwerp erop? */
.band {
    background: var(--oranje);
    color: #fff;
    padding: 62px 0;
    background-image:
        radial-gradient(60rem 30rem at 88% -10%, rgba(255,255,255,.22), transparent 62%),
        radial-gradient(40rem 26rem at 8% 120%, rgba(0,0,0,.14), transparent 60%);
}
.band .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 56px;
}
.band .bovenlijn { color: rgba(255,255,255,.85); margin-bottom: 14px; }
.band h2 {
    color: #fff;
    margin: 0;
    text-wrap: balance;
}
.band p {
    color: rgba(255,255,255,.92);
    margin: 0 0 22px;
    font-size: 15.5px;
    max-width: 42ch;
}
.band-acties { display: flex; gap: 11px; flex-wrap: wrap; }
.band-acties .knop { white-space: nowrap; }

/* ---------------------------------------------------------------- rooster */
.rooster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 24px;
}
.rooster-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* categoriekaarten
   Licht van opzet, want de foto's worden op termijn productfoto's op een witte
   achtergrond. Een donkere waas eroverheen zou die grijs en dof maken.
   De eerste kaart is groter: dat is de categorie die je online kunt bestellen. */
.categorieen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.cat-kaart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .32s var(--vlot), transform .32s var(--vlot), border-color .32s var(--vlot);
}
.cat-kaart:hover {
    box-shadow: var(--schaduw-diep);
    transform: translateY(-5px);
    border-color: #d6dbdf;
}

.cat-foto {
    position: relative;
    background: var(--vlak);
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.cat-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--soepel);
}
.cat-kaart:hover .cat-foto img { transform: scale(1.06); }

.cat-badge {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 2;
    background: rgba(255,255,255,.94);
    color: var(--tekst-licht);
    border-radius: 100px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16,24,40,.1);
}
.cat-badge.aan { background: var(--oranje); color: #fff; }

.cat-tekst {
    padding: 15px 17px 17px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.cat-tekst h3 { margin: 0; font-size: 23px; line-height: 1.1; }
.cat-tekst .aantal { display: block; font-family: var(--tekstfont); font-size: 12.5px;
                     font-weight: 600; color: var(--tekst-licht); margin-top: 2px; }
.cat-tekst .pijl {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--vlak);
    color: var(--tekst-licht);
    display: grid; place-items: center;
    flex: none;
    transition: background .3s var(--vlot), color .3s var(--vlot), transform .3s var(--veer);
}
.cat-tekst .pijl svg { width: 14px; height: 14px; }
.cat-kaart:hover .pijl { background: var(--oranje); color: #fff; transform: translateX(5px); }

/* De uitgelichte categorie beslaat twee kolommen en twee rijen. */
.cat-kaart.groot { grid-column: span 2; grid-row: span 2; }
.cat-kaart.groot .cat-foto { aspect-ratio: auto; flex: 1; min-height: 240px; }
.cat-kaart.groot .cat-tekst { flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 24px 24px; }
.cat-kaart.groot h3 { font-size: 34px; }
.cat-kaart.groot p { font-size: 14px; color: var(--tekst-licht); margin: 0; max-width: 40ch; }
.cat-kaart.groot .knop { margin-top: 12px; pointer-events: none; }

/* productkaart
   Vast raster van vier: met auto-fill werd het op 1240px vijf kolommen en dus
   een rommelige rij van 5 en 3. */
.producten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.kaart {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .32s var(--vlot), transform .32s var(--vlot), border-color .32s var(--vlot);
}
.kaart:hover { box-shadow: var(--schaduw-diep); transform: translateY(-5px); border-color: #d8dde1; }
.kaart-foto {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--vlak);
    overflow: hidden;
}
.kaart-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--soepel); }
.kaart:hover .kaart-foto img { transform: scale(1.06); }
.kaart-tekst { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.kaart-tekst h3 { font-family: var(--tekstfont); font-size: 15.5px; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.kaart-meta { color: var(--tekst-licht); font-size: 12.5px; }
/* De prijs staat onderaan, met een scheidingslijntje: dat geeft elke kaart
   dezelfde rustige opbouw, ook als de naam over twee regels loopt. */
.kaart-prijs {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--lijn);
}
.kaart-kleuren { display: flex; gap: 4px; margin: 12px 0 16px; flex-wrap: wrap; align-items: center; }
.kaart-kleuren span {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.16);
}
.kaart-kleuren .meer { font-size: 11px; color: var(--tekst-licht); border: 0; width: auto; font-weight: 600; }

/* Ronde icoontjes met bijschrift; gebruikt op over-ons, werkwijze en de
   bevestigingspagina. */
.usp-kaart { text-align: center; padding: 6px; }
.usp-kaart h3 { color: var(--oranje-donker); font-size: 23px; }
.usp-kaart p { font-size: 14px; color: var(--tekst-licht); }
.usp-icoon {
    width: 62px; height: 62px;
    border-radius: 50%;
    background: var(--oranje);
    display: grid; place-items: center;
    margin: 0 auto 16px;
}
.usp-icoon svg { width: 28px; height: 28px; color: #fff; }

/* waarom-sectie: kop links, redenen rechts onder elkaar */
.waarom {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 70px;
    /* Beide kolommen even hoog: de foto in de linkerkolom rekt mee, zodat er
       nergens een leeg gat overblijft. */
    align-items: stretch;
}
.waarom-kop { display: flex; flex-direction: column; }
.waarom-foto {
    margin: 30px 0 0;
    flex: 1;
    min-height: 200px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--lijn);
}
.waarom-foto img { width: 100%; height: 100%; object-fit: cover; }
.waarom-kop h2 { margin-bottom: 14px; }
.waarom-kop p { color: var(--tekst-licht); margin-bottom: 24px; max-width: 34ch; }

/* De lijst staat op een wit vlak. Op de grijze achtergrond waren de haarlijnen
   ertussen nauwelijks te zien; op wit vallen ze precies goed. */
.waarom-lijst {
    list-style: none;
    margin: 0;
    padding: 4px 30px;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
}
.waarom-lijst li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    padding: 26px 0;
    border-top: 1px solid var(--lijn);
}
.waarom-lijst li:first-child { border-top: 0; }

.waarom-icoon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--oranje-licht);
    color: var(--oranje-donker);
    display: grid;
    place-items: center;
    flex: none;
}
.waarom-icoon svg { width: 24px; height: 24px; }

.waarom-tekst h3 { font-size: 24px; margin: 0 0 6px; }
.waarom-tekst p { font-size: 15px; color: var(--tekst-licht); margin: 0; max-width: 54ch; }

/* losse stapkaart; gebruikt op werkwijze.php en de bevestigingspagina */
.stap-kaart {
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 24px 22px;
    position: relative;
}
.stap-nummer {
    font-family: var(--kop);
    font-size: 44px;
    line-height: 1;
    color: var(--oranje);
    opacity: .35;
    position: absolute;
    right: 18px; top: 12px;
}
.stap-kaart h3 { font-size: 21px; margin-bottom: 6px; }
.stap-kaart p { font-size: 14px; color: var(--tekst-licht); margin: 0; }

/* stappen: een tijdlijn met gestippelde verbinding tussen de nummers */
.stappen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.stappen li { position: relative; }

/* Het streepjeslijntje loopt van naast de bol door tot in de volgende kolom. */
.stappen li::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 66px;
    right: -34px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--lijn) 0 7px, transparent 7px 14px);
}
.stappen li:last-child::after { display: none; }

.stap-bol {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--oranje);
    color: var(--oranje-donker);
    font-family: var(--kop);
    font-size: 27px;
    line-height: 1;
    margin-bottom: 20px;
}

.stap-tekst h3 { font-size: 22px; margin: 0 0 6px; }
.stap-tekst p { font-size: 14.5px; color: var(--tekst-licht); margin: 0; }

/* impressie: mozaïek met één grote foto linksboven */
.impressie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.impressie > * { margin: 0; border-radius: var(--radius); overflow: hidden; }
/* De foto's vullen hun vak helemaal. Zonder height liep een foto van 4:3 in een
   vierkant vak vast en hield je er onderin een strook wit onder: de rijen zijn
   namelijk vierkant, want die worden bepaald door de grote foto ernaast die over
   twee rijen loopt.
   De verhouding blijft er wel staan als terugval. Waar het vak een echte hoogte
   heeft (het mozaïek op de desktop) wint height en vult de foto het vak; waar
   dat niet zo is (alles onder elkaar op een telefoon) valt hij terug op 4:3 en
   staan ze allemaal even hoog in plaats van elk op hun eigen maat. */
.impressie img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--soepel);
}
/* Elke foto is een link naar de kaart. Een trage inzoom laat merken dat er iets
   te klikken valt, zonder dat het mozaïek gaat springen. */
.impressie a:hover img,
.impressie a:focus-visible img { transform: scale(1.05); }
.impressie > *:first-child { grid-column: span 2; grid-row: span 2; }
.impressie > *:first-child img { aspect-ratio: 1 / 1; height: 100%; }

/* Balk onder de foto's: waar we zitten en hoe je er komt. */
.showroom-balk {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding: 20px 24px;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
}
.showroom-plaats { display: flex; align-items: center; gap: 13px; font-size: 14px; color: var(--tekst-licht); }
.showroom-plaats svg { width: 20px; height: 20px; color: var(--oranje); flex: none; }
.showroom-plaats strong { display: block; color: var(--tekst); font-size: 16px; }
.showroom-acties { margin-left: auto; display: flex; gap: 11px; flex-wrap: wrap; }

/* reviews */
.reviewkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 34px;
    text-align: left;
    max-width: none;
}
.reviewkop h2 { margin: 0; }

.reviewscore {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 16px 20px;
}
.reviewcijfer {
    font-family: var(--kop);
    font-size: 46px;
    line-height: 1;
    color: var(--oranje);
}
.reviewscore p { margin: 3px 0 0; font-size: 13px; color: var(--tekst-licht); }

/* Sterrenbalk: een grijze rij met daarover een oranje rij die tot --vulling
   loopt. Zo klopt het beeld met het cijfer, ook bij 4,8. */
.sterrenbalk { position: relative; display: inline-block; line-height: 0; }
.sterrenbalk .leeg, .sterrenbalk .vol { display: flex; gap: 2px; }
.sterrenbalk svg { width: 17px; height: 17px; }
.sterrenbalk .leeg svg { color: #d8dde1; }
.sterrenbalk .vol {
    position: absolute;
    inset: 0;
    width: var(--vulling, 100%);
    overflow: hidden;
}
.sterrenbalk .vol svg { color: var(--geel); flex: none; }
.sterrenbalk.vast { position: static; }
.sterrenbalk.vast .vol { position: static; width: auto; overflow: visible; }

/* De losse recensies */
.recensies {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.review {
    position: relative;
    margin: 0;
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
.review-aanhaling {
    position: absolute;
    right: 14px;
    top: -6px;
    font-family: var(--kop);
    font-size: 78px;
    line-height: 1;
    color: var(--oranje-licht);
    pointer-events: none;
}
.review blockquote {
    margin: 0;
    font-size: 14.5px;
    color: var(--tekst-licht);
    flex: 1;
}
.review figcaption {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid var(--lijn);
}
.review-bol {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--oranje-licht);
    color: var(--oranje-donker);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex: none;
}
.review-naam { font-weight: 700; font-size: 14px; }

/* verhaal: tekst met een kleine tijdlijn links, foto die de hoogte meeneemt */
.verhaal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
}
.verhaal-tekst { display: flex; flex-direction: column; justify-content: center; }
.verhaal-foto {
    position: relative;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schaduw);
    min-height: 320px;
}
.verhaal-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Kaartje op de foto: vertelt meteen waar dit pand staat. */
.verhaal-foto figcaption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-klein);
    padding: 13px 16px;
    box-shadow: 0 6px 20px -8px rgba(16,24,40,.4);
    font-size: 13px;
    color: var(--tekst-licht);
    line-height: 1.4;
}
.verhaal-foto figcaption svg { width: 18px; height: 18px; color: var(--oranje); flex: none; }
.verhaal-foto figcaption strong { display: block; color: var(--tekst); font-size: 14.5px; }
.verhaal img { border-radius: var(--radius); box-shadow: var(--schaduw-diep); }

.verhaal-lead { color: var(--tekst-licht); margin-bottom: 4px; max-width: 46ch; }

/* Tijdlijn met een stip per jaartal, verbonden door een streepjeslijn. */
.tijdlijn { list-style: none; margin: 26px 0 30px; padding: 0; }
.tijdlijn li {
    position: relative;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 0 0 22px 26px;
}
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--oranje);
}
.tijdlijn li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 22px;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(180deg, #c8cfd5 0 5px, transparent 5px 10px);
}
.tijdlijn li:last-child::after { display: none; }
.tijdlijn .jaar {
    font-family: var(--kop);
    font-size: 29px;
    line-height: 1;
    color: var(--oranje);
}
.tijdlijn p { font-size: 14.5px; color: var(--tekst-licht); margin: 0; }
.verhaal .jaartal {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--kop);
    font-size: 46px;
    color: var(--oranje);
    line-height: 1;
}
.verhaal .jaartal small { font-family: var(--tekstfont); font-size: 13px; color: var(--tekst-licht); font-weight: 600; }

/* cta-strook */
.cta {
    background: var(--donker);
    color: #fff;
    border-radius: var(--radius);
    padding: 44px 46px;
    display: flex;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    background-image: radial-gradient(circle at 88% 12%, rgba(255,120,30,.32), transparent 46%);
}
.cta h2 { color: #fff; margin: 0 0 8px; }
.cta p { color: #b9c0c7; margin: 0; max-width: 46ch; }
.cta .knoppen { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- product */
.kruimels { font-size: 13px; color: var(--tekst-licht); padding: 20px 0 4px; }
.kruimels a { color: inherit; text-decoration: none; }
.kruimels a { transition: color .2s var(--vlot); }
.kruimels a:hover { color: var(--oranje-donker); }

.product-indeling {
    display: grid;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    gap: 52px;
    margin: 18px 0 60px;
}
.product-foto { position: sticky; top: 100px; align-self: start; }
.product-foto .groot {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: var(--vlak);
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.product-foto .groot img { width: 100%; height: 100%; object-fit: cover; }
.miniaturen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.miniaturen button {
    width: 58px; height: 58px;
    border: 1px solid var(--lijn);
    border-radius: 9px;
    overflow: hidden;
    background: var(--vlak);
    padding: 0;
    cursor: pointer;
}
.miniaturen button img { width: 100%; height: 100%; object-fit: cover; }
.miniaturen button[aria-pressed="true"] { border-color: var(--oranje); box-shadow: 0 0 0 2px var(--oranje-licht); }

.blok { margin-bottom: 34px; }
.blok > h2 {
    font-family: var(--tekstfont);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--tekst-licht);
    border-bottom: 1px solid var(--lijn);
    padding-bottom: 10px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stap {
    display: inline-grid;
    place-items: center;
    width: 23px; height: 23px;
    background: var(--oranje); color: #fff;
    border-radius: 50%;
    font-size: 12px; font-weight: 700;
    flex: none;
}

/* kleurkiezer */
.kleuren { display: flex; flex-wrap: wrap; gap: 9px; }
.kleur {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18);
    cursor: pointer;
    padding: 0;
    transition: transform .22s var(--veer), box-shadow .22s var(--vlot);
}
.kleur:hover { transform: scale(1.14); }
.kleur[aria-pressed="true"] { outline: 2px solid var(--oranje); outline-offset: 3px; }
.kleur[aria-pressed="true"]::after {
    content: "";
    position: absolute; inset: 0;
    background: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 2px rgba(0,0,0,.55));
}
.kleur-naam { font-size: 13px; color: var(--tekst-licht); margin-top: 12px; min-height: 1.4em; }

/* maten */
.maat-rij {
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding: 15px 17px;
    margin-bottom: 12px;
    background: #fff;
}
.maat-rij-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; font-weight: 700; font-size: 14.5px; }
.maat-rij-kop .stip { width: 19px; height: 19px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); flex: none; }
.maat-rij-kop .aantal-badge { font-size: 12px; color: var(--tekst-licht); font-weight: 600; }
.maat-rij-kop .verwijder {
    margin-left: auto; background: none; border: 0;
    color: var(--tekst-licht); cursor: pointer; font-size: 13px;
    text-decoration: underline; font-family: inherit;
}
.maat-rij-kop .verwijder:hover { color: var(--rood); }
/* Bij meer dan één ontwerp staat er per kleurrij bij waar hij bij hoort. */
.maat-rij-kop .rij-ontwerp {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oranje-donker);
    background: var(--oranje-licht);
    border-radius: 100px;
    padding: 3px 9px;
}

/* Optelling onder de maatmatrix: bij grote bestellingen wil je niet zelf tellen. */
.maat-totaal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 17px;
    border-radius: var(--radius-klein);
    background: var(--vlak);
    border: 1px solid var(--lijn);
    font-size: 14px;
}
.maat-totaal strong { font-size: 16px; }
.staffelhint {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius-klein);
    background: var(--oranje-licht);
    color: var(--oranje-donker);
    font-size: 13px;
    font-weight: 600;
}
.maten { display: flex; flex-wrap: wrap; gap: 9px; }
.maat { width: 66px; }
.maat label { display: block; font-size: 11.5px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--tekst-licht); }
.maat input {
    width: 100%;
    padding: 9px 4px;
    text-align: center;
    border: 1px solid var(--lijn);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    -moz-appearance: textfield;
}
.maat input::-webkit-outer-spin-button,
.maat input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.maat input:focus { outline: 2px solid var(--oranje); outline-offset: 1px; border-color: transparent; }
.maat input.gevuld { border-color: var(--oranje); background: var(--oranje-licht); color: var(--oranje-donker); }

/* technieken */
.technieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.techniek-keuze {
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding: 13px 15px;
    cursor: pointer;
    display: block;
    transition: border-color .15s, background .15s;
}
.techniek-keuze:hover { border-color: #cfd5da; }
.techniek-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.techniek-keuze:has(input:checked) { border-color: var(--oranje); background: var(--oranje-licht); }
.techniek-keuze strong { display: block; font-size: 14.5px; }
.techniek-keuze span { font-size: 12px; color: var(--tekst-licht); }

/* ---------------------------------------------------------- ontwerpgroepen
   Eén bestelregel kan meer dan één ontwerp bevatten, elk op zijn eigen
   kledingkleuren. Zolang er maar één is (verreweg het vaakst) blijft het blok
   bewust onopvallend: geen kader, geen kop — dan zou de gewone bestelling
   ingewikkelder lijken dan hij is. Pas bij een tweede ontwerp krijgen ze allebei
   een eigen omlijsting, want dán moet je kunnen zien wat bij wat hoort. */
.ontwerpgroep + .ontwerpgroep { margin-top: 18px; }
.ontwerpgroep:not(.enkel) {
    border: 1px solid var(--lijn);
    border-left: 3px solid var(--oranje);
    border-radius: var(--radius-klein);
    padding: 16px 18px 18px;
    background: #fff;
}
.groepkop { display: none; }
.ontwerpgroep:not(.enkel) .groepkop {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}
.groepnr { font-weight: 700; font-size: 15px; }
.groep-telling { font-size: 12px; color: var(--tekst-licht); font-weight: 600; }
.groep-weg {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--tekst-licht);
    cursor: pointer;
    transition: color .2s var(--vlot);
}
.groep-weg:hover { color: var(--rood); }
.groep-weg svg { width: 13px; height: 13px; }

/* Een ontwerp zonder kleuren erin is een fout die je moet zien vóór je verstuurt. */
.ontwerpgroep:not(.enkel).leeg { border-left-color: var(--rood); }

.groepkleuren {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 15px;
}
.groeplabel {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tekst-licht);
}
.ontwerpgroep.enkel .groeplabel::after { content: ' deze kleuren'; }
.kleurchips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-leeg { font-size: 13px; color: var(--tekst-licht); }

.kleurchip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 6px;
    border: 1px solid var(--lijn);
    border-radius: 100px;
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tekst-licht);
    cursor: pointer;
    transition: border-color .2s var(--vlot), color .2s var(--vlot),
                background .2s var(--vlot), opacity .2s var(--vlot);
}
.kleurchip.aan {
    border-color: var(--oranje);
    background: var(--oranje-licht);
    color: var(--oranje-donker);
}
.kleurchip:not(.aan) { opacity: .55; }
.kleurchip:not(.aan):hover { opacity: 1; border-color: #c9d0d6; }
.chipstip {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.2);
    flex: none;
}
.chipgroep {
    font-size: 10.5px;
    font-weight: 700;
    background: var(--lijn);
    color: var(--tekst-licht);
    border-radius: 100px;
    padding: 1px 6px;
}
/* Bij één ontwerp zijn de chips alleen een geheugensteun, geen knop. */
.ontwerpgroep.enkel .kleurchip { pointer-events: none; }

.groephint { margin: 0 0 12px; color: var(--tekst-licht); font-size: 13px; }

#groep-toevoegen:disabled { opacity: .5; cursor: not-allowed; }

/* drukposities: kaartjes met een tekening van het shirt */
.posities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}
.positie-kaart {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lijn);
    border-radius: var(--radius-klein);
    padding: 10px 10px 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .25s var(--vlot), box-shadow .25s var(--vlot), transform .25s var(--vlot);
}
.positie-kaart:hover { border-color: #c9d0d6; transform: translateY(-3px); box-shadow: var(--schaduw); }
.positie-kaart input { position: absolute; opacity: 0; pointer-events: none; }
.positie-kaart:has(input:checked) {
    border-color: var(--oranje);
    box-shadow: 0 0 0 2px var(--oranje-licht);
}
.positie-kaart:focus-within { outline: 2px solid var(--oranje); outline-offset: 2px; }

.positie-plaatje {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
}
.positie-plaatje img {
    width: 100%; height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.positie-vink {
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--oranje);
    display: grid; place-items: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s, transform .15s;
}
.positie-vink svg { width: 13px; height: 13px; color: #fff; stroke-width: 3.5; }
.positie-kaart:has(input:checked) .positie-vink { opacity: 1; transform: scale(1); }

.positie-naam { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.positie-max { font-size: 11.5px; color: var(--tekst-licht); margin-top: 2px; }

/* het uitklapblok onder de kaartjes, per gekozen plek */
.positie-detail {
    border: 1px solid var(--oranje);
    border-radius: var(--radius-klein);
    background: var(--vlak);
    padding: 14px 16px 16px;
    margin-top: 12px;
}
.positie-detail-kop {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    font-size: 14.5px;
}
.positie-detail-kop img {
    width: 36px; height: 36px;
    object-fit: contain;
    flex: none;
    mix-blend-mode: multiply;
}
.positie-detail-kop .max { font-size: 12px; color: var(--tekst-licht); }
.positie-detail-kop .positie-weg {
    margin-left: auto;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--tekst-licht);
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}
.positie-detail-kop .positie-weg:hover { background: #fff; color: var(--rood); }
.positie-detail-kop .positie-weg svg { width: 16px; height: 16px; }

.veld { margin-bottom: 14px; }
.veld:last-child { margin-bottom: 0; }
.veld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.veld input[type=text], .veld input[type=email], .veld input[type=tel],
.veld input[type=number], .veld input[type=date], .veld input[type=password],
.veld select, .veld textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--lijn);
    border-radius: 9px;
    font: inherit;
    font-size: 14.5px;
    background: #fff;
    color: var(--tekst);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
    outline: 2px solid var(--oranje);
    outline-offset: -1px;
    border-color: transparent;
}
.veld textarea { min-height: 96px; resize: vertical; }
.veld .hint { font-size: 12px; color: var(--tekst-licht); margin-top: 5px; }
.veld-rij { display: flex; gap: 13px; flex-wrap: wrap; }
.veld-rij > * { flex: 1 1 160px; }

.bestand {
    border: 2px dashed #cbd2d8;
    border-radius: var(--radius-klein);
    padding: 20px 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--tekst-licht);
    background: #fff;
    cursor: pointer;
    display: block;
    transition: border-color .15s, background .15s;
}
.bestand:hover, .bestand.sleep { border-color: var(--oranje); background: var(--oranje-licht); }
.bestand input { display: none; }
.bestand.gekozen { border-style: solid; border-color: var(--oranje); color: var(--tekst); background: var(--oranje-licht); }
.bestand svg { width: 22px; height: 22px; color: var(--oranje); margin: 0 auto 8px; }
.bestand .bestandnaam { font-weight: 600; }

/* prijsblok */
.prijsblok {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 20px 22px;
    background: var(--vlak);
}
/* Het prijsblok onder de configurator: wit met schaduw, zodat het opvalt.
   Bewust niet sticky — dan zou het over stap 2 tot en met 4 heen vallen. */
.prijsblok.vast { background: #fff; box-shadow: var(--schaduw); border-color: #d9dee2; }
.prijsregel { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14.5px; }
.prijsregel.totaal {
    border-top: 1px solid var(--lijn);
    margin-top: 11px; padding-top: 11px;
    font-size: 19px;
    font-family: var(--kop);
}
.prijsregel .op { color: var(--tekst-licht); font-weight: 500; }
.prijsregel .korting { color: var(--groen); }

/* specificaties */
.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs th, .specs td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { width: 36%; font-weight: 600; color: var(--tekst-licht); }

/* ---------------------------------------------------------------- tabellen */
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { padding: 12px 10px; border-bottom: 1px solid var(--lijn); text-align: left; vertical-align: top; }
.tabel th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tekst-licht); font-weight: 700; }
.tabel tr:last-child td { border-bottom: 0; }
.rechts { text-align: right; }

.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    background: var(--vlak);
    border: 1px solid var(--lijn);
    color: var(--tekst-licht);
}

/* winkelwagenregel */
.wagenregel {
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 18px;
    background: #fff;
}
.wagenregel-kop { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.wagenregel-foto {
    width: 96px; height: 96px;
    object-fit: cover;
    background: var(--vlak);
    border-radius: var(--radius-klein);
    flex: none;
}

/* ---------------------------------------------------------------- footer */
.site-footer {
    margin-top: 0;
    background: var(--donker);
    color: #a9b1b8;
    padding: 56px 0 26px;
    font-size: 14px;
}
.site-footer a { color: #dfe4e8; text-decoration: none; transition: color .2s var(--vlot); }
.site-footer a:hover { color: var(--oranje); }
.site-footer h3 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px;
}
.footer-kolommen { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 7px; }
/* Het logo heeft een donkergrijze ondertitel; die valt weg op de donkere
   footer. Vandaar een wit vlak eronder, zodat het logo blijft zoals het is. */
.footer-logo-vak {
    display: inline-block;
    background: #fff;
    padding: 13px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
}
.footer-logo { height: 42px; width: auto; display: block; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; color: var(--oranje); flex: none; margin-top: 4px; }
.footer-onder {
    border-top: 1px solid var(--lijn-donker);
    margin-top: 36px; padding-top: 20px;
    color: #7f878e; font-size: 12.5px;
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.footer-onder .rechts { margin-left: auto; }

/* Credit van de bouwer. Bewust ingetogen: standaard iets gedempt, en pas bij
   aanwijzen op volle sterkte. Zo staat het er netjes bij zonder de aandacht weg
   te trekken van de gegevens van HV Products zelf. */
.gemaakt-door {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #7f878e;
    text-decoration: none;
    transition: color .2s var(--vlot);
}
.gemaakt-door img {
    height: 14px;
    width: auto;
    opacity: .62;
    transition: opacity .2s var(--vlot);
}
.gemaakt-door:hover { color: #b7bec4; }
.gemaakt-door:hover img { opacity: 1; }

@media (max-width: 620px) {
    /* Op een telefoon staat alles onder elkaar; dan hoort de credit onderaan
       en niet ergens rechts uitgelijnd. */
    .footer-onder { display: block; }
    .footer-onder > span { display: block; margin-bottom: 6px; }
    .gemaakt-door { margin-top: 10px; }
}

/* ---------------------------------------------------------------- mobiel */
@media (max-width: 1080px) {
    .categorieen { grid-template-columns: repeat(2, 1fr); }
    .producten   { grid-template-columns: repeat(3, 1fr); }
    .cat-kaart.groot { grid-column: span 2; grid-row: auto; }
    .cat-kaart.groot .cat-foto { aspect-ratio: 16 / 9; min-height: 0; }
    .verhaal { grid-template-columns: 1fr; gap: 30px; }
    .verhaal-foto { min-height: 0; aspect-ratio: 16 / 10; }
    .waarom { grid-template-columns: 1fr; gap: 34px; }
    .stappen { grid-template-columns: repeat(2, 1fr); gap: 30px 34px; }
    .recensies { grid-template-columns: repeat(2, 1fr); }
    .stappen li:nth-child(2n)::after { display: none; }
    .waarom-foto { aspect-ratio: 16 / 9; flex: none; min-height: 0; margin-top: 26px; }
    .footer-kolommen { grid-template-columns: 1fr 1fr; gap: 30px; }
    .hero-punten ul { grid-template-columns: repeat(2, 1fr); }
    .hero-punten li:nth-child(3) { border-left: 0; }
    .hero-punten li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.2); }
}

@media (max-width: 900px) {
    .product-indeling { grid-template-columns: 1fr; gap: 28px; }
    .product-foto { position: static; }
    .recensies { grid-template-columns: repeat(2, 1fr); }
    .impressie { grid-template-columns: repeat(2, 1fr); }
    .impressie > *:first-child { grid-column: span 2; grid-row: auto; }
    .impressie > *:first-child img { aspect-ratio: 16 / 9; }
    .showroom-acties { margin-left: 0; }
    .cta { padding: 32px 26px; }
    .cta .knoppen { margin-left: 0; }
    .band .wrap { grid-template-columns: 1fr; gap: 26px; }
    .band-acties { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 820px) {
    .menu-hamburger { display: block; margin-left: auto; }
    .hoofdmenu {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(330px, 86vw);
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 84px 22px 30px;
        box-shadow: -12px 0 40px rgba(0,0,0,.16);
        transform: translateX(100%);
        transition: transform .22s ease;
        overflow-y: auto;
        z-index: 65;
    }
    body.menu-open .hoofdmenu { transform: translateX(0); }
    body.menu-open { overflow: hidden; }
    .hoofdmenu > a, .menu-knop { padding: 14px 0; border-bottom: 1px solid var(--lijn); width: 100%; justify-content: space-between; }
    .hoofdmenu > a:not(.wagen-knop)::after, .menu-knop::after { display: none; }
    /* Op mobiel geen twee kolommen: gewoon de hoofdcategorieën onder elkaar. */
    .megamenu {
        position: static;
        transform: none;
        width: 100%;
        border: 0;
        box-shadow: none;
        padding: 4px 0 10px;
        grid-template-columns: 1fr;
        display: none;
        opacity: 1;
        visibility: visible;
    }
    .menu-item[data-open="1"] .megamenu { display: block; transform: none; }
    .mega-lijst { background: none; border-right: 0; padding: 0; }
    .mega-hoofd { padding: 11px 12px; border-radius: 8px; border-bottom: 0; }
    .mega-hoofd .pijltje { opacity: .5; }
    .mega-paneel { display: none; }
    .wagen-knop { margin-top: 18px; justify-content: center; }
    .menu-sluit { position: absolute; top: 22px; right: 20px; background: none; border: 0; cursor: pointer; }
    .menu-sluit svg { width: 24px; height: 24px; }
    .site-header .wrap { gap: 14px; }
    .logo img { height: 38px; }
    .topbalk .rechts { display: none; }
}

@media (min-width: 821px) { .menu-sluit { display: none; } }

@media (max-width: 620px) {
    .sectie { padding: 44px 0; }
    .categorieen { gap: 14px; }
    .recensies { grid-template-columns: 1fr; gap: 14px; }
    .reviewkop { gap: 20px; }
    .reviewscore { width: 100%; flex-wrap: wrap; }
    .tijdlijn li { grid-template-columns: 58px minmax(0,1fr); gap: 14px; padding-left: 22px; }
    .verhaal-foto figcaption { left: 12px; right: 12px; bottom: 12px; padding: 11px 13px; }
    .tijdlijn .jaar { font-size: 25px; }
    /* Op mobiel wordt het een staande tijdlijn: bol links, tekst ernaast. */
    .stappen { grid-template-columns: 1fr; gap: 0; }
    .stappen li { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 18px; padding-bottom: 26px; }
    .stappen li:last-child { padding-bottom: 0; }
    .stappen li::after {
        top: 52px; bottom: 6px; left: 22px; right: auto;
        width: 2px; height: auto;
        background: repeating-linear-gradient(180deg, var(--lijn) 0 7px, transparent 7px 14px);
    }
    .stap-bol { width: 46px; height: 46px; font-size: 23px; margin-bottom: 0; }
    .stap-tekst h3 { font-size: 20px; }
    .waarom-lijst { padding: 2px 18px; }
    .waarom-lijst li { grid-template-columns: 44px minmax(0,1fr); gap: 16px; padding: 22px 0; }
    .waarom-icoon { width: 44px; height: 44px; border-radius: 12px; }
    .waarom-icoon svg { width: 21px; height: 21px; }
    .waarom-tekst h3 { font-size: 21px; }
    .producten { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .cat-tekst { padding: 12px 14px 14px; }
    .cat-tekst h3 { font-size: 19px; }
    .cat-kaart.groot h3 { font-size: 27px; }
    .cat-kaart.groot .cat-foto { aspect-ratio: 4 / 3; }
    .hero { min-height: min(560px, 88vh); }
    :root { --hero-lucht: 22px; }
    .hero-stippen { margin-top: 24px; }

    /* De bovenregel is te lang voor één regel op een telefoon: streepje weg,
       iets kleiner en minder letterafstand. */
    .hero .bovenlijn { font-size: 11px; letter-spacing: .07em; }
    .hero .bovenlijn::before { display: none; }

    /* De pluspunten worden één balk waar je doorheen kunt vegen. */
    :root { --usp-hoogte: 54px; }
    .hero-punten ul {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .hero-punten ul::-webkit-scrollbar { display: none; }
    .hero-punten li {
        flex: 0 0 100%;
        scroll-snap-align: center;
        justify-content: center;
        border-left: 0;
        padding: 0 46px;
    }
    .punten-pijl { display: flex; }
    .footer-kolommen { grid-template-columns: 1fr; }
    /* Alles onder elkaar. De grote foto moet zijn kolomspan hier weer inleveren:
       met 'span 2' in een raster van één kolom maakt de browser er een tweede
       kolom van nul pixels bij, en dan vallen twee van de vijf foto's daarin en
       zijn ze onzichtbaar. */
    .impressie { grid-template-columns: 1fr; }
    .impressie > *:first-child { grid-column: auto; }
    .impressie > *:first-child img { aspect-ratio: 4 / 3; height: auto; }
    .wrap { padding: 0 18px; }
}

/* ---------------------------------------------------------------- animatie */
@media (prefers-reduced-motion: no-preference) {

    /* Losse blokken komen in hun geheel omhoog. */
    .komt-op {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .7s var(--soepel), transform .7s var(--soepel);
        transition-delay: var(--wacht, 0s);
    }
    .komt-op.zichtbaar { opacity: 1; transform: none; }

    /* Roosters doen het anders: niet het rooster komt op, maar de kaarten erin,
       één voor één. site.js zet per kaart een eigen --wacht. Alles tegelijk laten
       verschijnen leest als een pagina die inklapt; na elkaar leest als aandacht.
       Het rooster zelf staat daarbij stil, anders beweegt alles dubbel. */
    .komt-op.gespreid {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .komt-op.gespreid > * {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .65s var(--soepel), transform .65s var(--soepel);
        transition-delay: var(--wacht, 0s);
    }
    .komt-op.gespreid.zichtbaar > * { opacity: 1; transform: none; }
}

/* --------------------------------------------- beweging die bij de sectie past
   Hieronder staat per sectie één animatie die iets zegt over wát er staat, in
   plaats van overal dezelfde fade. Ze zitten ver genoeg uit elkaar op de pagina
   dat je er nooit twee tegelijk ziet; daardoor blijft het rustig. Allemaal met
   dezelfde curves en tijden als de rest, anders valt het uit de toon. */
@media (prefers-reduced-motion: no-preference) {

    /* ----- Zo werkt het: de tijdlijn legt zichzelf aan.
       Per stap: eerst wipt het nummer op zijn plek, dan komt de tekst omhoog,
       dan trekt het stippellijntje door naar de volgende stap. Vier keer
       achter elkaar, dus je ziet de route van 1 naar 4 ontstaan. */
    .stappen.gespreid > li {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .stappen.gespreid .stap-bol {
        opacity: 0;
        transform: scale(.45);
        transition: opacity .35s var(--vlot), transform .6s var(--veer);
        transition-delay: var(--wacht, 0s);
    }
    .stappen.gespreid .stap-tekst {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s var(--soepel), transform .6s var(--soepel);
        transition-delay: calc(var(--wacht, 0s) + .14s);
    }
    .stappen.gespreid li::after {
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .7s var(--soepel);
        transition-delay: calc(var(--wacht, 0s) + .26s);
    }
    .stappen.gespreid.zichtbaar .stap-bol   { opacity: 1; transform: none; }
    .stappen.gespreid.zichtbaar .stap-tekst { opacity: 1; transform: none; }
    .stappen.gespreid.zichtbaar li::after   { transform: scaleX(1); }

    /* ----- Wat klanten zeggen: de balk vult zich tot 4,8.
       Het cijfer ernaast telt mee omhoog; dat doet site.js. Samen leest het als
       een score die wordt opgemaakt in plaats van een plaatje van een score. */
    .reviewkop .sterrenbalk .vol {
        width: 0;
        transition: width 1.1s var(--soepel) .3s;
    }
    .reviewkop.zichtbaar .sterrenbalk .vol { width: var(--vulling, 100%); }

    /* ----- Waarom HV Products: de icoontjes tekenen zichzelf.
       site.js meet elk lijnstuk op en zet de lengte in --lengte; hier wordt die
       lijn van niets naar vol getrokken, in het tempo van de lijst ernaast. */
    .waarom-lijst.gespreid .waarom-icoon svg > * {
        stroke-dasharray: var(--lengte, 100);
        stroke-dashoffset: var(--lengte, 100);
        transition: stroke-dashoffset .9s var(--soepel);
        transition-delay: calc(var(--wacht, 0s) + .18s);
    }
    .waarom-lijst.gespreid.zichtbaar .waarom-icoon svg > * { stroke-dashoffset: 0; }

    /* ----- Foto's gaan open in plaats van aan te floepen.
       Het beeld wordt van onder naar boven vrijgegeven en zoomt daarbij een
       heel klein beetje uit, alsof het scherpstelt. Dit is de beweging die het
       meest "duur" leest, dus hij zit alleen op de grote sfeerbeelden. */
    /* Steeds vanuit een .komt-op ouder geschreven: staat die er niet (of doet de
       JS het niet), dan is er ook geen dichtgeknipte foto die nooit meer
       opengaat. */
    .komt-op .verhaal-foto,
    .komt-op .waarom-foto,
    .impressie.komt-op > * {
        clip-path: inset(0 0 100% 0 round var(--radius));
        transition: clip-path 1s var(--soepel);
        transition-delay: calc(var(--wacht, 0s) + .1s);
    }
    .komt-op .verhaal-foto img,
    .komt-op .waarom-foto img,
    .impressie.komt-op img {
        transform: scale(1.07);
        transition: transform 1.3s var(--soepel);
        transition-delay: calc(var(--wacht, 0s) + .1s);
    }
    .komt-op.zichtbaar .verhaal-foto,
    .komt-op.zichtbaar .waarom-foto,
    .impressie.komt-op.zichtbaar > * { clip-path: inset(0 0 0 0 round var(--radius)); }
    .komt-op.zichtbaar .verhaal-foto img,
    .komt-op.zichtbaar .waarom-foto img,
    .impressie.komt-op.zichtbaar img { transform: none; }
    /* Aanwijzen wint het altijd van de binnenkomst-zoom. */
    .impressie a:hover img,
    .impressie a:focus-visible img { transform: scale(1.05); }

    /* ----- Productkaarten: de kleuren komen er stuk voor stuk bij.
       Dat is precies waar zo'n kaart over gaat — in hoeveel kleuren is dit
       shirt te krijgen. De bolletjes tellen zichzelf af. */
    .komt-op.gespreid .kaart-kleuren > * {
        opacity: 0;
        transform: scale(.4);
        transition: opacity .3s var(--vlot), transform .45s var(--veer);
    }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > * { opacity: 1; transform: none; }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(1) { transition-delay: calc(var(--wacht, 0s) + .30s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(2) { transition-delay: calc(var(--wacht, 0s) + .35s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(3) { transition-delay: calc(var(--wacht, 0s) + .40s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(4) { transition-delay: calc(var(--wacht, 0s) + .45s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(5) { transition-delay: calc(var(--wacht, 0s) + .50s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(6) { transition-delay: calc(var(--wacht, 0s) + .55s); }
    .komt-op.gespreid.zichtbaar .kaart-kleuren > *:nth-child(n+7) { transition-delay: calc(var(--wacht, 0s) + .60s); }
}

/* Wie in zijn systeem heeft aangezet dat beweging hem hindert, krijgt de site
   zonder animaties: alles staat er meteen, niets schuift of vervaagt. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Onder de 620px staat de tijdlijn rechtop (bol links, tekst ernaast). Het
   verbindingslijntje moet dan van boven naar beneden getrokken worden in plaats
   van van links naar rechts. Deze regel staat bewust achter het blok hierboven:
   met dezelfde specificiteit wint de laatste. */
@media (max-width: 620px) and (prefers-reduced-motion: no-preference) {
    .stappen.gespreid li::after { transform: scaleY(0); transform-origin: top; }
    .stappen.gespreid.zichtbaar li::after { transform: scaleY(1); }
}