/* ==========================================================================
   DroneStars — stylesheet
   Opzet: tokens, basis, layout, componenten, blokken, pagina's, responsive.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    --paper:        #ffffff;
    --mist:         #f4f7fa;
    --mist-deep:    #eaf0f6;
    --ink:          #0b1a2b;
    --ink-soft:     #24384c;

    /*
     * De kleur van de donkere vlakken: de balk bovenaan, de cookiemelding,
     * de kop van de assistent en dergelijke. Losgehouden van --ink, want dat
     * is óók de kleur van de gewone tekst; die samen verschuiven zou de
     * leesbaarheid aantasten. In te stellen in het beheer.
     */
    --vlak:         #0b1a2b;
    --knop-tekst:   #ffffff;
    --slate:        #56697d;
    --line:         #e2e9f0;
    --signal:       #0b5fd0;
    --signal-dark:  #084aa4;
    --signal-tint:  #eaf1fc;

    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --wrap:         1200px;
    --gutter:       24px;
    --radius:       4px;
    --radius-lg:    10px;

    --shadow-sm:    0 1px 2px rgba(11, 26, 43, .05);
    --shadow-md:    0 8px 28px -14px rgba(11, 26, 43, .28);
    --shadow-lg:    0 24px 60px -30px rgba(11, 26, 43, .35);

    --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
    font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; }

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

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--vlak); color: #fff; padding: 12px 20px;
    font-family: var(--font-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- layout */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tint { background: var(--mist); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

/* Signature: mono-label met tickrule, ontleend aan hoogte-aanduidingen
   op luchtvaartkaarten. Wordt boven elke sectiekop gebruikt. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal);
    margin: 0 0 14px;
}
.eyebrow::after {
    content: '';
    flex: 1;
    height: 7px;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: 7px 100%;
    background-position: bottom left;
    border-bottom: 1px solid var(--line);
}

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--slate); font-size: 1.06rem; margin-top: -.2em; }

.lede { font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--ink-soft); }

.prose { max-width: 68ch; }
.prose p { color: var(--slate); }
.prose p strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- usp-balk */
.usp-bar {
    background: var(--vlak);
    /*
     * Was tweeënzeventig procent wit. Net als bij de cijferbalk las dat op het
     * oorspronkelijke donkerblauw nog wel, maar op een lichtere kleur valt het
     * weg. Vol wit en een stap zwaarder leest op elke kleur die hier kan staan.
     */
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    /* Zelfde reden als bij de cijferbalk: zo komen de letters voller over. */
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}
.usp-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding-block: 8px;
}
.usp-bar__list { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; }
.usp-bar__list li { position: relative; padding-left: 16px; }
.usp-bar__list li::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 6px; height: 6px; margin-top: -3px;
    background: var(--signal);
    border-radius: 50%;
}
.usp-bar__contact {
    display: flex;
    gap: 20px;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 500;
}
.usp-bar__contact a { color: #fff; text-decoration: none; }
/*
 * Het telefoonnummer en het adres waren al lichter dan de rest; nu alles vol
 * wit is, moet het aanwijzen iets anders laten zien dan alleen de streep.
 */
.usp-bar__contact a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------- masthead */
/*
 * Ankerpunten.
 *
 * Een leeg merkteken vóór een blok, waar een link naartoe kan springen. Het
 * neemt geen ruimte in, maar krijgt wel een marge mee bij het springen: de
 * menubalk blijft bovenin staan en zou anders de kop van het blok afdekken.
 */
.anker {
    display: block;
    height: 0;
    scroll-margin-top: 92px;
}

.masthead {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
}
.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.brand {
    display: inline-flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.22rem; font-weight: 500;
    letter-spacing: -.02em;
}
.brand__mark { color: var(--signal); display: flex; }
.brand__name strong { font-weight: 700; }
.brand--footer { color: var(--ink); }

/* Eigen logo uit het CMS. Hoogte vast, breedte volgt, zodat elk formaat past. */
/*
 * De hoogte staat als variabele, zodat hij vanuit het beheer kan worden
 * ingesteld. De breedte volgt vanzelf, dus het logo vervormt nooit.
 */
.brand__logo { height: var(--logo-kop, 38px); width: auto; display: block; }
.brand--footer .brand__logo { height: var(--logo-voet, 32px); }

/* ------------------------------------------------------------------- nav */
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__item { position: relative; }

.nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    font-size: .93rem; font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border: 0; background: none; cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius);
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover { color: var(--signal); background: var(--signal-tint); }
.nav__link[aria-current="page"] { color: var(--signal); }
.nav__chevron { transition: transform .2s var(--ease); }
.nav__link--toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/*
 * Een uitklapper met een eigen pagina: de naam is een link, het pijltje
 * ernaast klapt uit. Zo blijft de pagina zelf bereikbaar.
 */
.nav__rij {
    display: inline-flex; align-items: center;
    border-radius: var(--radius);
    transition: background .18s var(--ease);
}
.nav__item--has-children .nav__rij .nav__link { padding-right: 4px; }

.nav__pijl {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 9px 10px 9px 4px;
    border: 0; background: none; cursor: pointer;
    color: var(--ink-soft);
    border-radius: var(--radius);
    transition: color .18s var(--ease);
}
.nav__pijl[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

/*
 * De lichte achtergrond ligt op de hele rij, niet op de twee delen apart.
 * Anders kleurde alleen de naam op en bleef het pijltje ernaast wit, alsof er
 * een hap uit het vlakje was genomen.
 *
 * Alleen op apparaten met een muis: op een aanraakscherm blijft :hover na een
 * tik hangen, en dan zou de rij gekleurd blijven staan.
 */
@media (hover: hover) and (pointer: fine) {
    .nav__rij:hover { background: var(--signal-tint); }
    .nav__rij:hover .nav__link,
    .nav__rij:hover .nav__pijl { color: var(--signal); }
    .nav__rij .nav__link:hover,
    .nav__rij .nav__pijl:hover { background: none; }
}

.submenu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 268px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Onzichtbare brug over de ruimte tussen knop en menu. Zonder deze strook
   verliest de muis de hover zodra hij het gat kruist. */
.submenu::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.nav__item--has-children:hover .submenu,
.nav__item--has-children:focus-within .submenu,
.submenu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.submenu a {
    display: block;
    padding: 9px 12px;
    font-size: .9rem;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: var(--radius);
}
.submenu a:hover { background: var(--mist); color: var(--signal); }
/*
 * De huidige pagina alleen in kleur aanduiden, zonder gevuld vlak. Met die
 * vulling leek zo'n item permanent aangewezen te zijn, en dat wijkt af van de
 * items in de hoofdbalk, die alleen van tekstkleur veranderen.
 */
.submenu a[aria-current="page"] { color: var(--signal); background: transparent; font-weight: 600; }

.nav-toggle {
    display: none;
    align-items: center; gap: 9px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 9px 13px;
    font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
    cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3.5px; }
.nav-toggle__bars i { display: block; width: 17px; height: 1.8px; background: var(--ink); transition: transform .2s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.3px) rotate(-45deg); }

/* --------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 24px;
    font-family: var(--font-body);
    font-size: .94rem; font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

/*
 * De tekstkleur volgt de knopkleur. Kiest iemand een lichte kleur, dan wordt
 * de tekst donker; anders zou witte tekst op geel onleesbaar zijn.
 */
.btn--primary { background: var(--signal); color: var(--knop-tekst, #fff); }
.btn--primary:hover { background: var(--signal-dark); color: var(--knop-tekst, #fff); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--mist); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--mist); color: var(--ink); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }

.arrow-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .94rem;
    text-decoration: none;
}
.arrow-link::after {
    content: '→';
    transition: transform .18s var(--ease);
}
.arrow-link:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ hero */
.hero {
    position: relative;
    padding-block: clamp(56px, 8vw, 108px);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* Fijn meetraster, verwijzing naar luchtvaartkaarten. */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
            mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
    opacity: .8;
    pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero__inner { max-width: 46rem; }
.hero__title { margin-bottom: .35em; }
.hero__intro { font-size: clamp(1.06rem, 1.8vw, 1.28rem); color: var(--slate); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero--home .hero__inner { max-width: 52rem; }

/* Hoogtebalk rechts in de hero op de homepage. */
.hero__tape {
    position: absolute; right: var(--gutter); top: 50%;
    transform: translateY(-50%);
    display: grid; gap: 10px;
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .1em; color: var(--slate);
    text-align: right;
    pointer-events: none;
}
.hero__tape span { display: block; opacity: .75; }
.hero__tape span::after {
    content: '';
    display: inline-block;
    width: 26px; height: 1px;
    background: var(--line);
    margin-left: 10px; vertical-align: middle;
}

/* ---------------------------------------------------------------- blokken */
.checklist { list-style: none; display: grid; gap: 2px; }
.checklist li {
    position: relative;
    padding: 14px 18px 14px 46px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.checklist li::before {
    content: '';
    position: absolute; left: 18px; top: 21px;
    width: 13px; height: 8px;
    border-left: 2px solid var(--signal);
    border-bottom: 2px solid var(--signal);
    transform: rotate(-45deg);
}
.section--tint .checklist li { background: var(--paper); }

.block-note {
    margin-top: 18px;
    font-size: .9rem;
    color: var(--slate);
    padding-left: 16px;
    border-left: 2px solid var(--signal);
}

.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.taglist li {
    font-family: var(--font-mono);
    font-size: .84rem;
    padding: 9px 15px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
}

.numbered { list-style: none; display: grid; gap: 4px; counter-reset: step; }
.numbered__item {
    counter-increment: step;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px 24px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}
.numbered__item:last-child { border-bottom: 1px solid var(--line); }
.numbered__item::before {
    content: counter(step, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--font-mono);
    font-size: .84rem;
    color: var(--signal);
    padding-top: 4px;
}
/*
 * Alles behalve het nummer hoort in de tweede kolom. Vroeger vertrouwden wij
 * erop dat de browser dat vanzelf goed deed, maar zodra er een element bij
 * kwam schoof de tekst naar de smalle nummerkolom.
 */
.numbered__item > h3,
.numbered__item > .numbered__tekst { grid-column: 2; }

.numbered__item h3 { margin: 0; }
.numbered__item p { color: var(--slate); margin: 0 0 10px; }
.numbered__item p:last-child { margin-bottom: 0; }
.numbered__tekst { color: var(--slate); }
.numbered__tekst ul,
.numbered__tekst ol { margin: 0 0 10px; padding-left: 20px; }

.specs { display: grid; gap: 0; }
.specs__row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px 28px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.specs__row:last-child { border-bottom: 1px solid var(--line); }
.specs__row dt {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 3px;
}
.specs__row dd { margin: 0; color: var(--slate); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
}
.card {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 26px 24px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover {
    border-color: rgba(11, 95, 208, .38);
    color: inherit;
}
/*
 * Een kaart zonder link beweegt niet mee onder de muis: daarmee zou hij zich
 * voordoen als iets om op te klikken.
 */
.card--stil:hover { border-color: var(--line); box-shadow: none; transform: none; }
/*
 * Afbeelding boven de kop van een kaart.
 *
 * Twee standen, want een logo en een foto vragen het tegenovergestelde. Een
 * beeldmerk mag nooit worden bijgesneden en moet naast de andere logo's op
 * één lijn staan; een foto mag juist de hele bovenkant vullen. Welke stand
 * geldt, kiest u per blok in het beheer.
 *
 * Een kaart zonder afbeelding begint gewoon bij de kop: er blijft geen lege
 * strook staan.
 */
.card__beeld { display: block; }

/* Logo: hele afbeelding, op een strook van gelijke hoogte. */
.card-grid--logo .card__beeld {
    display: flex; align-items: center; justify-content: flex-start;
    height: 54px;
}
.card-grid--logo .card__beeld img {
    max-height: 100%; max-width: 74%;
    width: auto; height: auto;
    object-fit: contain;
}

/*
 * Foto: tot de randen van de kaart. De negatieve marges halen de binnenruimte
 * van de kaart weg; overflow houdt de hoeken netjes rond. Dat overflow staat
 * met opzet alleen hier, want .card wordt ook voor formulieren gebruikt en
 * daar hoort niets te worden afgeknipt.
 */
.card-grid--foto .card { overflow: hidden; }
.card-grid--foto .card__beeld {
    margin: -26px -24px 4px;
    aspect-ratio: 16 / 9;
}
.card-grid--foto .card__beeld img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
}

.card__title { font-size: 1.1rem; margin: 0; }
.card__text { font-size: .94rem; color: var(--slate); margin: 0; flex: 1; }
.card__more {
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--signal);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
}
.gallery figure { margin: 0; }
.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.gallery figcaption {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--slate);
    margin-top: 9px;
}

.cta-panel {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 24px;
    padding: clamp(30px, 4vw, 46px);
    background: var(--vlak);
    border-radius: var(--radius-lg);
    color: #fff;
}
.cta-panel h2 { color: #fff; margin: 0 0 .35em; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cta-panel p { color: rgba(255, 255, 255, .74); margin: 0; max-width: 46ch; }

/* ------------------------------------------------------------ home: hero */
.hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hero--home .hero__copy { max-width: none; }

.hero__visual {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--mist);
}
.hero__visual img,
.hero__visual video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*
 * Een video houdt zijn eigen verhouding. Die staat als stijl op het element
 * zelf, uit het bestand gelezen. Zonder vaste verhouding zou hij bijgesneden
 * worden, en dat is bij een breed filmpje meteen zichtbaar.
 */
.hero__visual video.hero__video {
    height: auto;
    /* Geen vaste verhouding: die komt uit het bestand, of anders van de
       browser zodra de video binnen is. */
    aspect-ratio: auto;
    object-fit: contain;
    background: var(--mist);

    /*
     * Plafond voor een sterk staande video. Zonder dit zou een filmpje van
     * 1080 bij 1920 het hele scherm vullen en de tekst wegdrukken. Het beeld
     * wordt daarbij niet bijgesneden; er komt hooguit wat lucht naast.
     */
    max-height: 70vh;
}

/* Signature: aflezing van vluchtcategorieën over het beeld heen. */
.hero__readout {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(11, 26, 43, .88), rgba(11, 26, 43, 0));
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .82);
}
.hero__readout span { position: relative; padding-top: 12px; }
.hero__readout span::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: 1px; height: 6px;
    background: rgba(255, 255, 255, .45);
}

/* -------------------------------------------- hero: animatie volle breedte */
.hero--anim {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 68vh, 720px);
    padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* Het meetraster uit de oude hero geldt hier niet; de animatie is de achtergrond. */
.hero--anim::before { content: none; }

.hero__anim {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    /* Loopt door tot de rand van het scherm, zonder kader. De linkerhelft
       blijft vrij voor de tekst. */
    left: 47%;
    z-index: 0;
}
.hero__canvas,
.hero__poster {
    display: block;
    width: 100%;
    height: 100%;
    /* Contain, niet cover: de drone moet in zijn geheel zichtbaar blijven.
       De achtergrond van de frames is wit, dus dat valt samen met de pagina. */
    object-fit: contain;
    object-position: 62% 50%;
}
.hero__canvas {
    opacity: 0;                 /* pas zichtbaar zodra frame 1 getekend is */
    transition: opacity .3s var(--ease);
}
.hero__anim.is-ready .hero__canvas { opacity: 1; }

.hero__poster { position: absolute; inset: 0; transition: opacity .3s var(--ease); }
.hero__anim.is-ready .hero__poster { opacity: 0; }

/* Witte sluier zodat de tekst leesbaar blijft over het beeld heen. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .9) 0%,
        rgba(255, 255, 255, .6) 38%,
        rgba(255, 255, 255, 0) 54%
    );
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
    /*
     * De tekstlaag ligt over de volle breedte boven het beeld, ook waar er
     * geen tekst staat. Stond daar een filmpje, dan ving deze laag de klik op
     * en gebeurde er niets — ook niet op de knop "Eenmalig laden". Daarom
     * laat de laag zelf klikken door; de tekst en de knoppen erin vangen ze
     * gewoon op.
     */
    pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
/* De breedte op de kinderen zetten, niet op .hero__content zelf: die erft
   margin-inline: auto van .wrap en zou zichzelf anders centreren. */
.hero__content > * { max-width: 34rem; }
.hero--anim .hero__title { margin-bottom: .35em; }
.hero--anim .hero__intro { max-width: 32rem; }

/* Aflezing als lijn onderin de header, over de volle breedte. */
.hero--anim .hero__readout {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: none;
    border-top: 1px solid var(--line);
    padding: 0;
}
.hero__readout-inner {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding-block: 12px 14px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--slate);
}
.hero__readout-inner span { position: relative; padding-top: 12px; }
.hero__readout-inner span::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: 1px; height: 6px;
    background: var(--line);
}

/* ------------------------------------------------------- home: bewijsbalk */
.proof {
    background: var(--vlak);
    color: #fff;
}
.proof__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
}
.proof__item {
    padding: 26px 20px;
    position: relative;
}
.proof__item + .proof__item::before {
    content: '';
    position: absolute; left: 0; top: 26px; bottom: 26px;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}
/*
 * Witte tekst op een kleur oogt altijd dunner dan dezelfde tekst in het zwart
 * op wit. Daarom staat de verzachting van de letterranden in deze balk uit:
 * met de gewone weergave van het besturingssysteem komen de letters voller en
 * daarmee witter over. Browsers die dit niet kennen, trekken zich er niets van
 * aan en tonen de balk zoals altijd.
 */
.proof {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}
.proof__item b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    /* Zwaarder dan de koppen elders: deze regel moet van een afstand opvallen. */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: #fff;
}
.proof__item span {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    /*
     * Was zestig procent wit. Op een donkerblauw vlak las dat nog wel, maar op
     * een lichtere kleur viel het weg tegen de achtergrond. Vol wit leest op
     * elke kleur die onder deze balk kan staan.
     */
    color: #fff;
}

/* ---------------------------------------------------------- home: tegels */
.tiles { display: grid; gap: 16px; }
.tiles--featured { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.tiles--rest { grid-template-columns: repeat(3, 1fr); }

.tile {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--vlak);
    isolation: isolate;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover { color: #fff; }

.tile__media { display: block; }
/* Tegel zonder eigen beeld: effen vlak, zodat de tekst leesbaar blijft. */
.tile--plain .tile__media { min-height: 210px; background: var(--vlak); }
.tile--plain.tile--lg .tile__media { min-height: 260px; }
.tile__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.tile--lg .tile__media img { aspect-ratio: 16 / 10; }

/*
 * De sluier over de foto. De donkerte is instelbaar in het CMS, algemeen of
 * per tegel, via --tile-o (een waarde tussen 0 en 1). De tussenstops volgen
 * die waarde, zodat het verloop zijn vorm houdt.
 */
.tile__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(11, 26, 43, var(--tile-o, .72)) 12%,
        rgba(11, 26, 43, calc(var(--tile-o, .72) * .38)) 55%,
        rgba(11, 26, 43, calc(var(--tile-o, .72) * .14)) 100%
    );
    transition: opacity .3s var(--ease);
}
/* Hoeveel de sluier bij aanwijzen oplicht, hangt af van het gekozen
   animatietype; zie de blokken onderaan deze stylesheet. */

.tile__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    padding: 22px 24px;
}
.tile__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.tile--lg .tile__title { font-size: 1.5rem; }
.tile__text {
    display: block;
    margin-top: 6px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .78);
    max-width: 40ch;
}
.tile__more {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 2px;
}

/* ------------------------------------------- hero met beeld (subpagina's) */
.hero--media { padding-block: clamp(44px, 5.5vw, 76px); }
.hero--media .hero__inner { max-width: none; }
.hero--media .hero__visual img,
.hero--media .hero__visual video { aspect-ratio: 3 / 2; }
.hero--media .hero__intro { max-width: 34rem; }

/* ------------------------------------------------------------- kerncijfers */
.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.figure-item { background: var(--paper); padding: 24px 22px; }
.figure-item b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}
.figure-item span {
    display: block;
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--slate);
}

/* Kaart zonder link: zelfde vorm, geen hover-gedrag. */
.card--static { cursor: default; }
.card--static:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* Beeld links in plaats van rechts. */
.feature--flip .feature__media { order: 2; }

/* ------------------------------------------------------ home: uitgelicht */
.features { display: grid; gap: clamp(32px, 5vw, 64px); }

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
/* Om en om spiegelen, zodat de reeks ritme krijgt. */
.feature:nth-child(even) .feature__media { order: 2; }

.feature__media { margin: 0; }
.feature__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
/*
 * Staat er een filmpje naast de tekst in plaats van een foto, dan krijgt dat
 * hetzelfde kader: even breed, dezelfde ronding, dezelfde lijn. Een film is
 * 16 bij 9 en een foto 3 bij 2; daarom hier een eigen verhouding.
 */
.feature__media--film video,
.feature__media--film iframe,
.feature__media--film .embedslot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
/* Alleen achter een eigen video donker; de wachtstand van YouTube houdt zijn
   eigen lichte vlak met de uitleg en de knop erin. */
.feature__media--film video { background: #0b1a2b; object-fit: contain; }


.feature__title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .4em; }
.feature__text { color: var(--slate); }

.feature__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 22px;
}
.feature__meta li {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    padding: 6px 12px;
    background: var(--mist);
    border-radius: 999px;
    color: var(--ink-soft);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* ---------------------------------------------------------------- casussen */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}
.case {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.case:hover { border-color: rgba(11, 95, 208, .38); }
.case__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case__meta {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.case__tag { color: var(--signal); }
.case__title { font-size: 1.12rem; margin: 0; }
.case__title a { color: inherit; text-decoration: none; }
.case__title a:hover { color: var(--signal); }
.case__excerpt { font-size: .94rem; color: var(--slate); margin: 0; flex: 1; }

/* -------------------------------------------------------- uitgelichte case */
.case--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
}
.case--featured:hover { transform: none; box-shadow: none; border-color: var(--line); }
.case--featured .case__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
.case--featured .case__body { padding: clamp(28px, 3.5vw, 44px); justify-content: center; }
.case--featured .case__title { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.case--featured .case__excerpt { font-size: 1rem; flex: 0 0 auto; }
.case--featured .arrow-link { margin-top: 8px; align-self: flex-start; }


/* -------------------------------------------------------------- opleidingen */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}
.course {
    display: flex; flex-direction: column;
    padding: clamp(26px, 3vw, 36px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.course__name { font-size: 1.45rem; margin-bottom: .3em; }
.course__lead { color: var(--ink-soft); font-weight: 500; }
.course__body { color: var(--slate); font-size: .96rem; }
.course .specs { margin-top: 6px; }
.course .btn { margin-top: 26px; align-self: flex-start; }

/* ----------------------------------------------------------------- team */
/*
 * Het raster paste precies zes kolommen. Bij zeven of meer personen kwam er
 * een losse rij achter, en dat oogt als een fout. Nu verdeelt het raster zich
 * over de beschikbare breedte: negen personen worden vanzelf twee nette rijen.
 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}
@media (min-width: 1040px) {
    /* Nooit smaller dan leesbaar, en hoogstens zes op een rij. */
    .team-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.member figure { margin: 0; }
.member img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.member__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-top: 14px; }
.member__role { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }

.pullquote {
    margin: 0;
    padding: clamp(28px, 4vw, 44px);
    background: var(--mist);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--signal);
}
.pullquote p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    line-height: 1.4;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -.01em;
}
.pullquote footer {
    font-family: var(--font-mono); font-size: .76rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
    margin-top: 16px;
}

/* ---------------------------------------------------------------- contact */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
    font-family: var(--font-mono);
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
}
.field input, .field select, .field textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    padding: 13px 15px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-tint);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--error input, .field--error textarea { border-color: #c0392b; }
.field__error { font-size: .84rem; color: #c0392b; }
/* De uitleg die bij een veld hoort, als die in het beheer is ingevuld. */
.field__hint { font-size: .84rem; color: var(--slate); }
.field--error select { border-color: #c0392b; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field--hidden { position: absolute; left: -9999px; }

.alert {
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: .95rem;
    border: 1px solid;
}
.alert--ok    { background: var(--signal-tint); border-color: rgba(11, 95, 208, .3); color: var(--signal-dark); }
.alert--error { background: #fdf0ee; border-color: #eecfc9; color: #a5382a; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }

.info-panel {
    padding: clamp(26px, 3vw, 34px);
    background: var(--mist);
    border-radius: var(--radius-lg);
}
.info-panel + .info-panel { margin-top: 18px; }
.info-panel h2 { font-size: 1.15rem; }
.info-panel .address-list { margin-top: 6px; }

/* ------------------------------------------------------------------ shop */
.shop-note {
    padding: clamp(26px, 3vw, 36px);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--mist);
}
.shop-note h2 { font-size: 1.25rem; }
.shop-note p { color: var(--slate); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 34px;
}
.product {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
}
.product__media {
    aspect-ratio: 4 / 3;
    background: #fff;
}
.product__body { padding: 18px 20px 22px; }
.product__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.product__price { font-family: var(--font-mono); font-size: .86rem; color: var(--slate); margin-top: 6px; }

/* ---------------------------------------------------------------- footer */
.footer {
    background: var(--mist);
    border-top: 1px solid var(--line);
    padding-block: clamp(48px, 6vw, 76px) 32px;
    font-size: .93rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 52px);
}
.footer__heading {
    font-family: var(--font-mono);
    font-size: .74rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 18px;
}
.footer__pitch { color: var(--slate); margin-top: 18px; max-width: 32ch; }
.footer__direct { margin-top: 16px; font-family: var(--font-mono); font-size: .86rem; }
.footer__direct a { text-decoration: none; }
.footer__direct a:hover { text-decoration: underline; }

.social { display: flex; gap: 16px; list-style: none; margin-top: 18px; }
.social a { font-size: .86rem; color: var(--slate); text-decoration: none; }
.social a:hover { color: var(--signal); }

.address-list { list-style: none; display: grid; gap: 16px; }
.address__name { display: block; font-weight: 600; color: var(--ink); }
.address__lines { display: block; color: var(--slate); font-size: .9rem; }

/* ------------------------------------------------- route naar een vestiging */
/*
 * Het speldje met het woord "Route" eronder. Een speldje alleen zegt niet wat
 * er gebeurt als u erop drukt; met het woord erbij is dat meteen duidelijk.
 */
.address__route {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 11px 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--signal);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.address__route:hover,
.address__route:focus-visible {
    border-color: var(--signal);
    background: var(--signal);
    color: #fff;
}
.address__pin {
    width: 16px;
    height: 16px;
    flex: none;
}

@media (max-width: 640px) {
    /* Op een telefoon wordt hierop getikt, niet geklikt: dan mag het knopje
       wat hoger, zodat een duim hem zonder mikken raakt. */
    .address__route { padding: 11px 16px 11px 13px; }
}

.hours { margin: 0; }
.hours__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.hours__row dt { color: var(--ink-soft); }
.hours__row dd { margin: 0; font-family: var(--font-mono); font-size: .84rem; color: var(--slate); }
.hours__row--closed dd { opacity: .6; }

.footer__menu { list-style: none; display: grid; gap: 9px; }
.footer__menu a { color: var(--slate); text-decoration: none; }
.footer__menu a:hover { color: var(--signal); }

/*
 * De brede balk tussen de kolommen en de onderste regel. Altijd in het
 * midden, en nooit breder dan de ruimte die er is: een liggend logo dat op
 * een telefoon over de rand steekt is lelijker dan een kleiner logo.
 */
.footer__band {
    margin-top: clamp(32px, 4vw, 52px);
}
/*
 * Het beeld krijgt de volle breedte en een vaste hoogte; de afbeelding zelf
 * blijft daarbinnen op zijn eigen verhouding staan en komt vanzelf in het
 * midden. Dat moet zo: een svg met alleen een viewBox heeft geen eigen maat,
 * en zonder een vast kader wordt hij nul bij nul.
 */
.footer__band img {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}
.footer__band a { display: block; transition: opacity .18s var(--ease); }
.footer__band a:hover { opacity: .84; }

/*
 * Staat de balk er, dan is die al de scheiding; de onderste regel hoeft er
 * dan niet nog een keer bovenop met zijn eigen witruimte.
 */
.footer__band + .footer__bar { margin-top: clamp(28px, 3.5vw, 44px); }

.footer__bar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 12px 24px;
    margin-top: clamp(36px, 5vw, 60px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.footer__legal-info { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-family: var(--font-mono); font-size: .74rem; color: var(--slate); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; font-size: .82rem; }
.footer__legal-links a { color: var(--slate); text-decoration: none; }
.footer__legal-links a:hover { color: var(--signal); }


/* ------------------------------------------------------- beeld in beweging */
/*
 * Uitgangspunten voor soepel bewegen:
 *
 * 1. Alleen transform en opacity animeren. Dat zijn de twee eigenschappen die
 *    de browser aan de grafische kaart kan overlaten. Schaduw, filter of
 *    kleuren meebewegen dwingt hem elke beeldwissel opnieuw te tekenen, en
 *    dat is precies wat schokkerig aanvoelt.
 * 2. De schaduw zit daarom op een aparte laag die alleen van doorzichtigheid
 *    verandert, niet op de tegel zelf.
 * 3. will-change alleen tijdens het bewegen, niet permanent. Anders houdt de
 *    browser voor elk element geheugen apart, wat op een lange pagina juist
 *    averechts werkt.
 * 4. Opkomen bij het scrollen en reageren op de muis schrijven wij in eigen
 *    variabelen en tellen we op, zodat ze niet om dezelfde eigenschap vechten.
 */

.tile,
.feature,
.case,
.member,
.gallery figure,
.card-grid > .card {
    --rev-y: 0px;
    --hov-y: 0px;
    transform: translate3d(0, calc(var(--rev-y) + var(--hov-y)), 0);
    transition: transform .5s var(--ease), opacity .6s var(--ease),
                box-shadow .35s var(--ease), border-color .35s var(--ease);
    backface-visibility: hidden;
}

/* ------------------------------------------------ opkomen bij het scrollen */
.js-reveal [data-reveal] {
    opacity: 0;
    --rev-y: 18px;
    will-change: transform, opacity;
}
.js-reveal [data-reveal].is-in {
    opacity: 1;
    --rev-y: 0px;
    will-change: auto;
}
.js-reveal [data-reveal] img { opacity: 0; transition: opacity .8s var(--ease); }
.js-reveal [data-reveal].is-in img { opacity: 1; }

/* --------------------------------------------------------------- schaduw
 * Een aparte schaduwlaag zou netter zijn voor de prestaties, maar de tegels
 * knippen alles binnen hun rand weg en dan is er niets te zien. Daarom hier
 * wel gewoon een overgang op de schaduw zelf, met een korte duur zodat het
 * niet in de weg zit.
 */
.tile, .case, .card-grid > .card { transition-property: transform, opacity, box-shadow, border-color; }
.tile:hover { box-shadow: var(--shadow-lg); }
.case:hover, .card-grid > .card:hover { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------ aanwijzen */
.tile:hover,
.case:hover,
.card-grid > .card:hover { --hov-y: -5px; }

.feature__media,
.gallery figure,
.member figure { overflow: hidden; border-radius: var(--radius-lg); }

.tile__media img,
.feature__media img,
.gallery figure img,
.case__media img,
.member img {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform .5s var(--ease);
    backface-visibility: hidden;
}
.tile:hover .tile__media img,
.feature:hover .feature__media img,
.gallery figure:hover img,
.case:hover .case__media img,
.member:hover img { will-change: transform; }

/* Tekst schuift mee. */
.tile__body { transition: transform .5s var(--ease); }

/* Het streepje onder BEKIJKEN tekent zichzelf. */
.tile__more { position: relative; border-bottom-color: transparent; }
.tile__more::after {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.tile:hover .tile__more::after { transform: scaleX(1); }

/* De sluier over de tegel. */
.tile__media::after { transition: opacity .4s var(--ease); }

/* ================================================= 1. inzoomen (standaard) */
.anim-zoom .tile:hover .tile__media img,
.anim-zoom .feature:hover .feature__media img,
.anim-zoom .gallery figure:hover img,
.anim-zoom .case:hover .case__media img,
.anim-zoom .member:hover img {
    transform: translate3d(0, 0, 0) scale(1.06);
    transition-duration: .8s;
}
.anim-zoom .tile:hover .tile__media::after { opacity: .84; }
.anim-zoom .tile:hover .tile__body { transform: translate3d(0, -4px, 0); }

/* ============================================== 2. langzaam schuiven (pan) */
/* De foto staat al iets ingezoomd, zodat er ruimte is om te schuiven zonder
   dat er een rand zichtbaar wordt. */
.anim-pan .tile__media img,
.anim-pan .feature__media img,
.anim-pan .gallery figure img,
.anim-pan .case__media img {
    transform: translate3d(0, 0, 0) scale(1.06);
}
.anim-pan .tile:hover .tile__media img,
.anim-pan .feature:hover .feature__media img,
.anim-pan .gallery figure:hover img,
.anim-pan .case:hover .case__media img {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.1);
    transition-duration: 2.4s;
    transition-timing-function: linear;
}
.anim-pan .tile:hover .tile__media::after { opacity: .86; }

/* ======================================================= 3. oplichten (fade) */
.anim-fade .tile__media::after { transition: opacity .45s var(--ease); }
.anim-fade .tile:hover .tile__media::after { opacity: .55; }
.anim-fade .tile:hover .tile__body { transform: translate3d(0, -3px, 0); }
.anim-fade .feature__media img,
.anim-fade .gallery figure img,
.anim-fade .case__media img,
.anim-fade .member img { transition: opacity .45s var(--ease); }
.anim-fade .feature:hover .feature__media img,
.anim-fade .gallery figure:hover img,
.anim-fade .case:hover .case__media img { opacity: .86; }

/* ========================================================= 4. optillen (lift) */
.anim-lift .tile:hover,
.anim-lift .case:hover,
.anim-lift .card-grid > .card:hover { --hov-y: -9px; }
.anim-lift .tile:hover .tile__media::after { opacity: .88; }

/* ============================================================= 5. geen */
.anim-geen .tile:hover .tile__media img,
.anim-geen .feature:hover .feature__media img,
.anim-geen .gallery figure:hover img,
.anim-geen .case:hover .case__media img,
.anim-geen .member:hover img { transform: none; }
.anim-geen .tile:hover,
.anim-geen .case:hover,
.anim-geen .card-grid > .card:hover { --hov-y: 0px; }

/* Portretten kleuren in, ongeacht het gekozen type. */
.member img { filter: grayscale(1); transition: transform .5s var(--ease), filter .4s var(--ease); }
.member:hover img { filter: grayscale(0); }

@media (prefers-reduced-motion: reduce) {
    .tile, .feature, .case, .member, .gallery figure, .card-grid > .card {
        transform: none;
        transition: none;
    }
    .js-reveal [data-reveal],
    .js-reveal [data-reveal] img { opacity: 1; }
    .tile:hover .tile__media img,
    .feature:hover .feature__media img,
    .gallery figure:hover img,
    .case:hover .case__media img,
    .member:hover img,
    .tile:hover .tile__body { transform: none; }
    .tile:hover .tile__more::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .hero__tape { display: none; }

    .hero__layout { grid-template-columns: 1fr; }
    .hero__visual { order: -1; }
    .hero__visual img,
    .hero__visual video { aspect-ratio: 16 / 9; }

    /* Minder breedte beschikbaar: animatie achter de tekst, sluier sterker. */
    .hero__anim { left: 0; }
    .hero__canvas, .hero__poster { object-position: 88% 50%; }
    .hero__scrim {
        background: linear-gradient(to right,
            rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 44%,
            rgba(255,255,255,.5) 64%, rgba(255,255,255,0) 80%);
    }

    .proof__inner { grid-template-columns: repeat(3, 1fr); }
    .proof__item:nth-child(4)::before,
    .proof__item:nth-child(3n+1)::before { display: none; }

    .tiles--rest { grid-template-columns: repeat(2, 1fr); }

    .feature { grid-template-columns: 1fr; }
    .feature:nth-child(even) .feature__media,
    .feature--flip .feature__media { order: 0; }

    .figures { grid-template-columns: repeat(2, 1fr); }
    .case--featured { grid-template-columns: 1fr; }
    .case--featured .case__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease);
    }
    .nav.is-open { max-height: 80vh; overflow-y: auto; }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px var(--gutter) 24px;
    }
    .nav__link { padding: 14px 4px; font-size: 1rem; justify-content: space-between; width: 100%; }
    .nav__item + .nav__item { border-top: 1px solid var(--line); }

    /*
     * Op een smal scherm staan de naam en het pijltje op één regel: de naam
     * neemt de ruimte, het pijltje staat rechts. Het raakvlak van dat knopje
     * is met opzet ruim, zodat u er met een vinger naast kunt zitten en toch
     * het juiste raakt.
     */
    .nav__rij { display: flex; width: 100%; align-items: center; }
    .nav__rij .nav__link { flex: 1 1 auto; }
    .nav__item--has-children .nav__rij .nav__link { padding-right: 8px; }
    .nav__pijl { flex: 0 0 auto; padding: 14px 4px 14px 12px; }

    .submenu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        pointer-events: auto;
        background: none; box-shadow: none; border: 0; border-radius: 0;
        padding: 0 0 8px 14px;
        max-height: 0; overflow: hidden;
        transition: max-height .25s var(--ease);
    }
    .submenu::before { display: none; }

    /*
     * Op een aanraakscherm blijft :hover hangen na een tik. De regel die het
     * submenu dichthoudt bij hover was specifieker dan de regel die het opent,
     * waardoor het menu direct weer dichtklapte zodra je het aantikte.
     *
     * Daarom staat de hover-regel nu alleen aan op apparaten met een echte
     * muis, en is de open-regel zwaarder gemaakt zodat hij hoe dan ook wint.
     */
    @media (hover: hover) and (pointer: fine) {
        .nav__item--has-children:hover .submenu:not(.is-open) { max-height: 0; }
    }

    .nav__item--has-children .submenu.is-open { max-height: 420px; }

    .nav__item--cta { border-top: 0; margin-top: 16px; }
    .nav__item--cta .btn { width: 100%; padding: 14px; }

    .usp-bar__list li:nth-child(n+3) { display: none; }
    .usp-bar__contact a:last-child { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .footer__grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .numbered__item { grid-template-columns: 1fr; gap: 6px; }
    .numbered__item::before { grid-row: auto; }
    .numbered__item > h3,
    .numbered__item > .numbered__tekst { grid-column: 1; }
    .specs__row { grid-template-columns: 1fr; gap: 4px; }
    .cta-panel { flex-direction: column; align-items: flex-start; }
    .hero__actions .btn { width: 100%; }

    .tiles--featured,
    .tiles--rest { grid-template-columns: 1fr; }
    .tile__media img,
    .tile--lg .tile__media img { aspect-ratio: 16 / 10; }

    .proof__inner { grid-template-columns: repeat(2, 1fr); }
    .proof__item::before { display: none !important; }
    .proof__item { padding: 20px 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
    .proof__item:last-child { grid-column: 1 / -1; }
    .proof__item b { font-size: 1.4rem; }

    .hero__readout span:nth-child(n+4) { display: none; }
    .figures { grid-template-columns: 1fr; }

    /* Op mobiel staat de tekst boven en de animatie eronder, niet erachter. */
    .hero--anim {
        display: block;
        min-height: 0;
        padding-block: clamp(32px, 8vw, 48px) 0;
    }
    .hero__anim { position: static; }
    .hero__canvas, .hero__poster {
        height: auto;
        aspect-ratio: 860 / 577;
        object-position: center;
        margin-top: 28px;
    }
    .hero__poster { position: absolute; inset: auto 0 auto 0; }
    /*
     * Bij de gewone kop staat de tekst op een smal scherm ONDER het beeld, dus
     * daar is een sluier overbodig. Bij de brede kop staat hij er juist
     * overheen; die moet dus blijven, anders is de tekst onleesbaar.
     */
    .hero:not(.hero--breed) .hero__scrim { display: none; }
    .hero--anim .hero__readout { position: static; }
    .hero__readout-inner span:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card:hover, .case:hover { transform: none; }
}

/* ==========================================================================
   Webshop
   ========================================================================== */

/* ------------------------------------------------------- winkelwagen-knop */
.cartlink {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.cartlink:hover { border-color: var(--signal); color: var(--signal); }
.cartlink__aantal {
    position: absolute; top: -7px; right: -7px;
    min-width: 19px; height: 19px;
    display: grid; place-items: center;
    padding: 0 5px;
    background: var(--signal); color: #fff;
    border-radius: 999px;
    font-family: var(--font-mono); font-size: .66rem; line-height: 1;
}

/* ------------------------------------------------------------- overzicht */
.shopbar {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.shopbar__zoek { display: flex; gap: 8px; }
.shopbar__zoek input {
    width: 240px; padding: 9px 12px; font-size: .93rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-body);
}
.shopbar__zoek input:focus {
    outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint);
}

.product { display: flex; flex-direction: column; }
.product__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
/*
 * Wit achter de productfoto. Veel fabrieksfoto's zijn png's met een
 * doorzichtige rand; wat daar doorheen te zien is, is deze achtergrond. Dat
 * was een streepjespatroon - bedoeld als "hier staat nog geen foto" - en dat
 * kwam zo achter de artikelen vandaan kijken.
 */
.product__media {
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: #fff;
}
/*
 * Alleen een artikel zonder foto houdt het patroon, zodat in het overzicht te
 * zien blijft waar nog een foto bij moet. Kent een oudere browser :has() niet,
 * dan vervalt deze regel en is ook dat vak gewoon wit.
 */
.product__media:not(:has(img)) {
    background: repeating-linear-gradient(45deg, var(--mist) 0 10px, var(--mist-deep) 10px 20px);
}
/*
 * De hele foto in beeld, niet bijgesneden. Een fabrieksfoto is vaak vierkant
 * of staand; met bijsnijden ging daar boven- en onderaan een stuk af. Nu komt
 * hij in zijn geheel in het vak te staan, met wat lucht eromheen.
 */
.product__media img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 10px; box-sizing: border-box;
}
.product__body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; flex: 1; }
.product__sku {
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .08em; color: var(--slate);
}
.product__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.product__text { font-size: .89rem; color: var(--slate); flex: 1; }
.product__price {
    font-family: var(--font-display); font-weight: 700; color: var(--ink);
    font-size: 1.05rem; margin-top: 6px;
}
.product__price small {
    display: block; font-family: var(--font-mono); font-size: .68rem;
    font-weight: 400; color: var(--slate); letter-spacing: .06em;
}
.product__foot {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: space-between;
    padding: 0 20px 18px;
}
.arrow-link--sm { font-size: .85rem; }
.tag--uit { background: var(--mist-deep); color: var(--slate); }

/* -------------------------------------------------------- productpagina */
.kruimels {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .06em; color: var(--slate);
}
.kruimels a { color: var(--slate); text-decoration: none; }
.kruimels a:hover { color: var(--signal); }

.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pdp__hoofd { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.pdp__hoofd img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; display: block; padding: 14px; box-sizing: border-box; }
.pdp__hoofd--leeg { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--mist) 0 12px, var(--mist-deep) 12px 24px); }
.pdp__strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pdp__mini {
    width: 72px; padding: 0; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; background: none; cursor: pointer;
}
.pdp__mini img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; padding: 4px; box-sizing: border-box; }
.pdp__mini.is-actief { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-tint); }

.pdp__naam { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .3em; }
.pdp__lead { color: var(--slate); font-size: 1.04rem; }
.pdp__prijs { display: flex; align-items: baseline; gap: 10px; margin: 20px 0; }
.pdp__prijs strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); letter-spacing: -.02em; }
.pdp__prijs span { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); }
.pdp__bestel .field { margin-bottom: 14px; }
.pdp__acties { display: flex; gap: 12px; align-items: flex-end; margin-top: 4px; }
.aantal input { width: 84px; }
.pdp__voorraad { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); margin-top: 12px; }

/*
 * Melding dat bestellen een account vereist. Op de productpagina onder de
 * knop, in de winkelwagen boven de inlogknop. Rustig van toon: het is geen
 * foutmelding, het is hoe de winkel werkt.
 */
.pdp__inlog,
.inlogmelding {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--mist);
    border-left: 3px solid var(--signal);
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--slate);
    line-height: 1.5;
}
.inlogmelding { margin-bottom: 14px; }
.pdp__inlog a,
.inlogmelding a { color: var(--signal); }
.pdp__usps { list-style: none; display: grid; gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pdp__usps li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--slate); }
.pdp__usps li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 11px; height: 7px;
    border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------- winkelwagen */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 44px); align-items: start; }
.cart__regels { display: grid; gap: 12px; }
.cartline {
    display: grid; grid-template-columns: 92px 1fr 90px 110px 32px;
    gap: 16px; align-items: center;
    padding: 14px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* Ook in de winkelwagen wit achter de foto, met een lijntje eromheen. */
.cartline__beeld {
    aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line);
}
.cartline__beeld img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.cartline__naam { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; }
.cartline__naam:hover { color: var(--signal); }
.cartline__opties { list-style: none; margin: 5px 0 0; font-size: .84rem; color: var(--slate); }
.cartline__stuk { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); margin: 6px 0 0; }
.cartline__aantal input { width: 74px; text-align: center; }
.cartline__bedrag { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-align: right; }
.cartline__weg button {
    background: none; border: 0; color: var(--slate);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cartline__weg button:hover { color: #c0392b; }
.cart__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cart__totaal { background: var(--mist); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; }

.totalen { margin: 16px 0 20px; }
.totalen > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .94rem; }
.totalen dt { color: var(--slate); }
.totalen dd { margin: 0; font-family: var(--font-mono); font-size: .88rem; color: var(--ink); }
.totalen__eind {
    border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px !important;
}
.totalen__eind dt { color: var(--ink); font-weight: 600; }
.totalen__eind dd { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

/* ------------------------------------------------------------ afrekenen */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 44px); align-items: start; }
.checkout__velden { display: grid; gap: 18px; }
.checkout__overzicht { position: sticky; top: 100px; }
.checkout .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.checkout .card h2 { font-size: 1.1rem; margin-bottom: 16px; }
.checkout .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.field--fout input, .field--fout textarea { border-color: #c0392b; }
.fout { color: #c0392b; }
.check--fout { color: #c0392b; }

.mini-regels { list-style: none; display: grid; gap: 10px; margin-bottom: 4px; }
.mini-regels li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; font-size: .9rem; align-items: start; }
.mini-regels__aantal { font-family: var(--font-mono); font-size: .8rem; color: var(--slate); }
.mini-regels__naam small { display: block; color: var(--slate); font-size: .8rem; }
.mini-regels__bedrag { font-family: var(--font-mono); font-size: .84rem; }

/* --------------------------------------------------------- klantportaal */
.smallform { max-width: 460px; margin-inline: auto; }
.smallform .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.smallform .field { margin-bottom: 16px; }
.smallform .field__label,
.checkout .field__label,
.pdp .field__label {
    display: block; font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px;
}
.smallform input, .checkout input, .checkout textarea, .checkout select,
.pdp select, .pdp input {
    width: 100%; padding: 11px 13px; font-family: var(--font-body); font-size: .96rem;
    border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper);
}
.smallform input:focus, .checkout input:focus, .checkout textarea:focus,
.checkout select:focus, .pdp select:focus, .pdp input:focus {
    outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint);
}
.checkout .field, .pdp .field { margin-bottom: 16px; }
.checkout .check, .smallform .check { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; margin: 12px 0; }
.checkout .check input, .smallform .check input { width: auto; margin-top: 3px; }

@media (max-width: 980px) {
    .pdp, .cart, .checkout { grid-template-columns: 1fr; }
    .cart__totaal, .checkout__overzicht { position: static; }
}
@media (max-width: 620px) {
    .cartline { grid-template-columns: 64px 1fr 32px; grid-template-areas: "beeld info weg" "aantal aantal bedrag"; }
    .cartline__beeld { grid-area: beeld; }
    .cartline__info { grid-area: info; }
    .cartline__weg { grid-area: weg; }
    .cartline__aantal { grid-area: aantal; }
    .cartline__bedrag { grid-area: bedrag; }
    .checkout .grid2 { grid-template-columns: 1fr; }
    .shopbar__zoek input { width: 100%; }
}

/* ------------------------------------------------------------- verhuur */
.huurtarieven {
    list-style: none;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.huurtarieven li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 16px;
    font-size: .93rem;
}
.huurtarieven li + li { border-top: 1px solid var(--line); }
.huurtarieven span { color: var(--slate); }
.huurtarieven strong { font-family: var(--font-mono); font-size: .9rem; color: var(--ink); }

.huurdatums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.huurmelding {
    margin: 0 0 14px;
    padding: 11px 14px;
    background: #fdf0ee;
    border: 1px solid #eecfc9;
    border-radius: var(--radius);
    color: #a5382a;
    font-size: .9rem;
}

.huurbezet { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.huurbezet ul { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.huurbezet li {
    font-family: var(--font-mono); font-size: .8rem; color: var(--slate);
}

.cartline__periode { margin: 6px 0 0; font-size: .89rem; color: var(--ink-soft); }
.cartline__periode span { color: var(--slate); }
.cartline__een { font-family: var(--font-mono); font-size: .78rem; color: var(--slate); }

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

/* ------------------------------------------------- bezorgen of ophalen */
.lever-keuze { display: grid; gap: 10px; margin-bottom: 4px; }

.lever {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    grid-template-areas: "radio kop prijs" ". tekst tekst";
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lever:hover { border-color: var(--slate); }
.lever.is-actief { border-color: var(--signal); background: var(--signal-tint); }
.lever input { grid-area: radio; width: auto; margin-top: 3px; }
.lever__kop { grid-area: kop; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.lever__tekst { grid-area: tekst; font-size: .88rem; color: var(--slate); }
.lever__prijs { grid-area: prijs; font-family: var(--font-mono); font-size: .82rem; color: var(--ink); }

.afhaalinfo {
    margin-top: 16px;
    padding: 16px;
    background: var(--mist);
    border-radius: var(--radius-lg);
}
.afhaalinfo__adres { margin: 0 0 14px; font-size: .93rem; }
.afhaalinfo__uren dl { display: grid; gap: 3px; margin: 8px 0 14px; }
.afhaalinfo__uren dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.afhaalinfo__uren dt { color: var(--slate); }
.afhaalinfo__uren dd { margin: 0; font-family: var(--font-mono); font-size: .8rem; }

@media (max-width: 620px) {
    .lever { grid-template-columns: 22px 1fr; grid-template-areas: "radio kop" ". tekst" ". prijs"; }
}

/* ------------------------------------------------ korting en retouren */
.couponblok { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.coupon { display: flex; gap: 8px; }
.coupon input[type=text] { flex: 1; text-transform: uppercase; }
.coupon--actief {
    align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--signal-tint);
    border: 1px solid var(--signal); border-radius: var(--radius);
}
.coupon--actief span { display: grid; }
.coupon--actief strong { font-family: var(--font-mono); font-size: .85rem; color: var(--signal-dark); }
.coupon--actief small { color: var(--slate); font-size: .8rem; }
.coupon--actief button {
    background: none; border: 0; cursor: pointer;
    font-size: 1.2rem; line-height: 1; color: var(--slate);
}
.coupon--actief button:hover { color: var(--ink); }
.totalen__korting dd { color: var(--signal-dark); }

.retourblok { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.retourblok summary { cursor: pointer; color: var(--signal); font-size: .93rem; }
.retourblok h3 { font-size: 1rem; margin-bottom: 6px; }
.retourform { margin-top: 16px; display: grid; gap: 12px; max-width: 460px; }

/* ------------------------------------------------------- filmbanner */
/*
 * Smalle band met de frame-animatie. Standaard op contentbreedte, zodat hij
 * in dezelfde kolom staat als de tekst eronder. De hoogte volgt de verhouding
 * van de beelden (1600 x 292).
 */
/*
 * Krappe ruimte eromheen: de band hoort tegen de hero en de tekst aan te
 * liggen, niet als los blok in het midden te zweven.
 */
.bannerfilm-band { padding-block: clamp(10px, 1.4vw, 16px); }

/*
 * De sectie direct onder de band mag ook krapper: anders staat er alsnog een
 * flinke witruimte tussen de drone en de tekst.
 */
.bannerfilm-band + .section { padding-top: clamp(24px, 3vw, 40px); }

.bannerfilm {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 292;
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* Variant over de volle schermbreedte: geen randen en hoeken, wel lijnen. */
.bannerfilm-band--vol { padding-block: 0; }
.bannerfilm--vol {
    border-inline: 0;
    border-radius: 0;
    border-block: 1px solid var(--line);
    background: var(--paper);
}

.bannerfilm__canvas,
.bannerfilm__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Het canvas ligt boven de poster en neemt het over zodra JavaScript draait. */
.bannerfilm__canvas { opacity: 0; transition: opacity .25s var(--ease); z-index: 1; }
.bannerfilm.is-ready .bannerfilm__canvas { opacity: 1; }
.bannerfilm.is-ready .bannerfilm__poster { opacity: 0; transition: opacity .3s var(--ease); }

/*
 * Op een smal scherm is er geen muis, en bijsnijden zou de drone buiten beeld
 * duwen: hij begint links en het beeld is vijf keer zo breed als hoog. Daarom
 * tonen wij daar het hele frame, met wat lucht erboven en eronder.
 */
@media (max-width: 700px) {
    .bannerfilm { aspect-ratio: auto; height: 110px; }
    .bannerfilm__canvas,
    .bannerfilm__poster { object-fit: contain; }
}

/* --------------------------------------------------- Over ons: zijkolom */
.overons__zij { display: grid; gap: 24px; align-content: start; }

.fotoblok {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
}
.fotoblok img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.fotoblok figcaption {
    padding: 11px 16px;
    font-size: .85rem;
    color: var(--slate);
    border-top: 1px solid var(--line);
}

/*
 * Video in het fotoblok houdt de verhouding van het bestand zelf; die staat
 * als stijl op het element. Lukt uitlezen niet, dan bepaalt de browser hem
 * zodra de video geladen is. Een vaste 4:3 opleggen deden wij eerder, maar
 * dan krijgt een breed filmpje balken links en rechts.
 */
.fotoblok video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--mist);
    max-height: 560px;   /* zodat een staande video de kolom niet overneemt */
}

/* Voorbeeld van een video in het beheer. */
.videoveld__preview {
    display: block;
    width: 100%;
    max-height: 200px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    background: #000;
}

/* ------------------------------------------------ inloglink als pictogram */
.accountlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.accountlink:hover { border-color: var(--signal); color: var(--signal); }
.accountlink.is-ingelogd { border-color: var(--signal); color: var(--signal); }
.accountlink__tekst { display: none; }

/* ------------------------------------------------------------ taalkeuze */
/*
 * Taalkeuze: alleen een wereldbol met de taalcode. De volledige namen namen te
 * veel breedte in naast het menu; die staan nu in het uitklaplijstje.
 */
.taalkeuze { position: relative; }

.taalkeuze__knop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--slate);
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.taalkeuze__knop:hover,
.taalkeuze.is-open .taalkeuze__knop { border-color: var(--signal); color: var(--signal); }

.taalkeuze__code {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
}

/*
 * De keuzelijst van GTranslate.
 *
 * Die widget zet zijn eigen select in ons vak. Die doet het werk, maar hij
 * staat uit het zicht: in de balk staat onze eigen wereldbol met een lijstje
 * vlaggen, en dat bedient hem. Weghalen met display:none mag niet — een veld
 * dat niet wordt weergegeven is voor een browser niet te bedienen, en dan
 * komt onze keuze niet aan. Daarom schuiven wij hem weg in een vakje van één
 * beeldpunt.
 */
.taalkeuze .gtranslate_wrapper {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

/*
 * Vangnet: zet GTranslate iets anders neer dan een keuzelijst, dan kan onze
 * wereldbol hem niet bedienen. In dat geval laten wij hun eigen bediening
 * gewoon zien — minder mooi, maar het werkt, en dat gaat voor.
 */
.taalkeuze.is-ontkoppeld .taalkeuze__knop,
.taalkeuze.is-ontkoppeld .taalkeuze__lijst { display: none; }

.taalkeuze.is-ontkoppeld .gtranslate_wrapper {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    pointer-events: auto;
}
.taalkeuze.is-ontkoppeld select {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--slate);
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}

/* Het vlaggetje voor de taalnaam. */
.taalvlag {
    flex: none;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(11, 26, 43, .14);
}

/* De balk die de widget soms bovenaan de pagina zet, hoort hier niet. */
.skiptranslate iframe,
body > .skiptranslate { display: none !important; }
body { top: 0 !important; }

.taalkeuze__lijst {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.taalkeuze__lijst[hidden] { display: none; }

.taalkeuze__lijst button {
    /* Vlag en naam naast elkaar, en de naam netjes uitgelijnd over de regels. */
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    text-align: left;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
}
.taalkeuze__lijst button:hover { background: var(--mist); color: var(--signal); }
.taalkeuze__lijst button.is-actief { color: var(--signal); font-weight: 600; }

@media (max-width: 900px) {
    /* In het uitgeklapte mobiele menu staat de keuze in de rij, niet zwevend;
       anders valt het lijstje buiten beeld. */
    .taalkeuze__lijst { position: static; box-shadow: none; margin-top: 6px; min-width: 0; }
}

.visueel-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* De balk die Google er standaard bovenop zet hoort hier niet. */
#google_translate_element { display: none; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }

@media (max-width: 900px) {
    /* In het uitgeklapte menu is een los pictogram raadselachtig, dus daar
       komt de tekst er weer bij en loopt het item mee in de lijst. */
    .accountlink {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        padding: 14px 4px;
        font-size: 1rem;
        color: var(--ink);
    }
    .accountlink__tekst { display: inline; }

    .taalkeuze {
        width: 100%;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        padding: 14px 4px;
        height: auto;
    }
    .taalkeuze__lijst button { font-size: 1rem; }
}

/* ------------------------------------------------- ingesloten media */
.hero__embed {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--vlak);
}
.hero__embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;   /* wordt overschreven als de code een eigen maat meegeeft */
    border: 0;
}

/* ------------------------------------------------------------ mediablok */
.mediablok__figuur { margin: 0; }

.mediablok__inhoud {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--line);
}
.mediablok--volledig .mediablok__inhoud { border-radius: 0; border-inline: 0; }

.mediablok__inhoud img,
.mediablok__inhoud video {
    display: block;
    width: 100%;
    height: auto;
}
.mediablok__inhoud iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.mediablok__figuur figcaption {
    margin-top: 10px;
    font-size: .88rem;
    color: var(--slate);
}

/* Breder dan de tekst, maar niet tot de rand: geeft lucht bij een foto of
   filmpje zonder dat het blok de pagina overneemt. */
.mediablok--breed .mediablok__figuur { max-width: min(100%, 1000px); margin-inline: auto; }
.mediablok--tekst .mediablok__figuur  { max-width: min(100%, 740px); }

/* Videoveld in de blokeditor. */
.videopick { display: grid; gap: 8px; }

/* Ingesloten venster in het fotoblok naast de tekst. */
.fotoblok iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* --------------------------------------------------- casus in detail */
.hero--case { padding-block: clamp(36px, 4vw, 60px) clamp(20px, 2.5vw, 32px); }

/* Kop: tekst links, beeld rechts. */
.casuskop {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}

/*
 * Kleiner dan een gewone paginakop. Op een casus is de titel geen wervende
 * kreet maar een omschrijving, en die mag rustiger staan.
 */
.casuskop h1 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.2;
    max-width: 22ch;
}
.casuskop .hero__lede { font-size: 1rem; max-width: 46ch; margin-top: 12px; }
.case__datum { margin-top: 14px; font-family: var(--font-mono); font-size: .78rem; color: var(--slate); }

.casuskop__beeld { margin: 0; }
.casuskop__beeld img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

/*
 * Een tekstsectie gebruikt de volle kolom. Standaard houdt .prose een
 * leesbreedte van 68 tekens aan; die heffen wij hier op, want u kiest
 * bewust voor volle breedte.
 */
.casus-sectie--tekst .casus-sectie__tekst { max-width: none; }

/*
 * Bij de zij-indelingen blijft die leesbreedte staan: daar staat de tekst
 * al in een halve kolom en zou opheffen niets veranderen.
 */
.casus-sectie--links .casus-sectie__tekst,
.casus-sectie--rechts .casus-sectie__tekst,
.casus-sectie--beeld .casus-sectie__tekst { max-width: 68ch; }
.casus-sectie__tekst h2 { margin-bottom: 12px; }

/* Beeld en tekst naast elkaar. De volgorde wisselt met de keuze in het
   beheer; op een smal scherm staat het beeld altijd boven. */
.casus-sectie__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.casus-sectie--rechts .casus-sectie__media { order: 2; }

.casus-sectie__media { margin: 0; }
.casus-sectie__media img,
.casus-sectie__media video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--mist);
}
.casus-sectie__media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
}
.casus-sectie__media figcaption {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--slate);
}

.casus-sectie--beeld .casus-sectie__tekst { margin-top: 28px; }

/* Beeld onder een tekstsectie: volle breedte, met lucht ertussen. */
.casus-sectie__media--onder { margin-top: clamp(20px, 2.5vw, 32px); }

/*
 * Krappere ruimte tussen de secties van een casus.
 *
 * De gewone sectieruimte is bedoeld om losse onderwerpen op een pagina uit
 * elkaar te houden: tot 104 px boven en onder, dus ruim 200 px ertussen. Een
 * casus is één doorlopend verhaal, en dan valt de tekst uit elkaar.
 */
.casus-sectie { padding-block: clamp(22px, 2.6vw, 34px); }

/* Ook de inleiding erboven mag krapper, zodat het geheel doorloopt. */
.casus-sectie--inleiding { padding-block: clamp(20px, 2.4vw, 30px); }

/* --------------------------------------------- casussen als tegels */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/*
 * Kleinere tegels onder een casus. Het gaat om een verwijzing naar ander
 * werk, niet om het hoofdgerecht, dus alles een maatje kleiner.
 */
.cases--tegels { gap: 18px; }
.cases--tegels .case__media { aspect-ratio: 16 / 9; }
.cases--tegels .case__body { padding: 14px 16px 18px; gap: 7px; }
.cases--tegels .case__meta { font-size: .66rem; gap: 8px; }
.cases--tegels .case__title { font-size: .98rem; }
.cases--tegels .case__excerpt {
    font-size: .86rem;
    /*
     * Hooguit drie regels, zodat de tegels even hoog blijven en de tekst niet
     * over de rand loopt. De flex-groei van de gewone kaart moet hier uit,
     * anders rekt de alinea alsnog op en telt de begrenzing niet.
     */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

@media (max-width: 820px) {
    .casuskop { grid-template-columns: 1fr; }
    .casuskop__beeld { order: -1; }
    .casus-sectie__duo { grid-template-columns: 1fr; }
    .casus-sectie--rechts .casus-sectie__media { order: 0; }
}

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

/* ------------------------------------------------------ tabellen in tekst */
/*
 * Tabellen die uit een spreadsheet zijn geplakt. Zij krijgen de stijl van de
 * site; de opmaak uit het rekenblad is bij het opslaan al verwijderd.
 */
.prose table,
.casus-sectie__tekst table,
.numbered__tekst table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    font-size: .94rem;
}

.prose table th,
.prose table td,
.casus-sectie__tekst table th,
.casus-sectie__tekst table td,
.numbered__tekst table th,
.numbered__tekst table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    color: var(--slate);
}

.prose table th,
.casus-sectie__tekst table th,
.numbered__tekst table th {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink-soft);
}

/* De eerste rij als kop, ook als er geen th's in staan: dat is wat een
   spreadsheet meestal oplevert.

   Heeft de tabel wél een eigen kopregel, dan laten wij deze regel los. Anders
   werd de eerste rij mét gegevens ook vet, en stonden er twee koppen boven
   elkaar. */
.prose table:not(:has(thead)) tr:first-child td,
.casus-sectie__tekst table:not(:has(thead)) tr:first-child td,
.numbered__tekst table:not(:has(thead)) tr:first-child td {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink-soft);
}

.prose table tr:last-child td,
.casus-sectie__tekst table tr:last-child td { border-bottom: 0; }

/*
 * Op een smal scherm mag de tabel schuiven in plaats van te persen.
 *
 * Eerder stond hier dat niets mocht afbreken. Dat gaat goed bij korte cellen
 * uit een rekenblad, maar een cel met een hele zin werd dan één lange regel
 * die u meters moest schuiven. Nu breekt de tekst gewoon af en zorgt een
 * ondergrens per kolom dat er niet één letter per regel overblijft; past het
 * dan nog niet, dan schuift de tabel.
 */
@media (max-width: 700px) {
    .prose table,
    .casus-sectie__tekst table,
    .numbered__tekst table { display: block; overflow-x: auto; }

    .prose table th,
    .prose table td,
    .casus-sectie__tekst table th,
    .casus-sectie__tekst table td,
    .numbered__tekst table th,
    .numbered__tekst table td { min-width: 7em; }
}

/* ------------------------------------------------------- cookiemelding */
.cookiemelding {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: var(--vlak);
    color: #fff;
    box-shadow: 0 -8px 30px rgba(11, 26, 43, .22);
}
.cookiemelding[hidden] { display: none; }

.cookiemelding__binnen {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 20px clamp(16px, 4vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}

.cookiemelding h2 { font-size: 1.02rem; margin-bottom: 6px; color: #fff; }
.cookiemelding p { font-size: .88rem; color: rgba(255, 255, 255, .78); margin: 0 0 6px; }
.cookiemelding__klein { font-size: .82rem; }
.cookiemelding a { color: #fff; text-decoration: underline; }

.cookiemelding__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiemelding__knoppen .btn:not(.btn--primary) {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

@media (max-width: 760px) {
    .cookiemelding__binnen { grid-template-columns: 1fr; }
    .cookiemelding__knoppen .btn { flex: 1; justify-content: center; }
}

/* Plek van geblokkeerde inhoud, met een knop om hem alsnog te laden. */
.embedslot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--mist);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.embedslot iframe { display: block; width: 100%; height: 100%; border: 0; }

.embedslot__melding {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    background: var(--mist);
}
.embedslot__melding p { max-width: 40ch; font-size: .88rem; color: var(--slate); margin: 0; }

/* ------------------------------------------- keurmerk in de voettekst */
/*
 * Het keurmerk heeft een witte achtergrond en de voettekst een lichte tint.
 * Een wit vlak met een dunne rand eromheen zet het beeld af tegen die tint,
 * in plaats van dat het er vaag in wegvalt.
 */
.footer__col--keurmerk { align-self: start; }

/* De kop staat midden boven de logo's, niet links ernaast. */
.footer__col--keurmerk .footer__heading { text-align: center; }

/*
 * De keurmerken onder elkaar.
 *
 * Niet naast elkaar: het ene logo is breed en laag, het andere smal en hoog.
 * Naast elkaar moet een van de twee zo klein dat de tekst erin niet meer te
 * lezen is. Onder elkaar krijgt elk logo de volle kolombreedte en blijft het
 * op zijn eigen verhouding staan.
 */
.keurmerken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 12px;
}

/*
 * Elk logo in een kader van dezelfde maat, en daarbinnen passend gemaakt.
 *
 * Dat moet hier wel: deze bestanden zijn svg's met alleen een viewBox en geen
 * eigen breedte of hoogte. Een browser weet dan niet hoe groot hij ze moet
 * tekenen en maakt ze nul bij nul. Met een vast kader en object-fit houdt elk
 * logo zijn eigen verhouding, hoe breed of hoog het ook is — ook een
 * certificaat dat er later bij komt.
 */
.keurmerken__item { width: 190px; }

.keurmerken img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: contain;
    /*
     * Midden in het vak. Het ene logo is breed, het andere smal; stonden zij
     * links, dan leek het smalle logo scheef te hangen ten opzichte van het
     * brede. Nu staan zij met hun hart onder elkaar.
     */
    object-position: center;
}

.keurmerken a { display: block; transition: opacity .18s var(--ease); }
.keurmerken a:hover { opacity: .84; }

@media (max-width: 760px) {
    /*
     * Op een smal scherm naast elkaar: daar is hoogte schaarser dan breedte.
     * De kop gaat dan weer naar links, net als alle andere koppen in de
     * voettekst; een enkele kop in het midden valt daar uit de toon.
     */
    .footer__col--keurmerk .footer__heading { text-align: left; }

    .keurmerken {
        grid-auto-flow: column;
        justify-content: start;
        align-items: center;
        gap: 20px;
    }
    .keurmerken__item { width: 140px; }
    .keurmerken img { height: 70px; }
}

/* ------------------------------------------------------------- assistent */
.agent { position: fixed; right: 20px; bottom: 20px; z-index: 80; }

.agent__knop {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(11, 26, 43, .24);
    transition: transform .18s var(--ease), background .18s var(--ease);
}
.agent__knop:hover { background: var(--signal-dark); transform: translateY(-2px); }
.agent.is-open .agent__knop { background: var(--vlak); }

.agent__venster {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(380px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px rgba(11, 26, 43, .18);
    overflow: hidden;
}
.agent__venster[hidden] { display: none; }

.agent__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--vlak);
    color: #fff;
}
.agent__kop strong { display: block; font-size: .95rem; }
.agent__kop small { color: rgba(255, 255, 255, .7); font-size: .78rem; }
.agent__sluit {
    border: 0; background: none; color: rgba(255, 255, 255, .8);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.agent__sluit:hover { color: #fff; }

.agent__gesprek {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.agent__bericht {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: var(--radius-lg);
    font-size: .89rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.agent__bericht--assistent { background: var(--mist); color: var(--ink-soft); justify-self: start; }
.agent__bericht--bezoeker  { background: var(--signal); color: var(--knop-tekst, #fff); justify-self: end; }
.agent__bericht--fout      { background: #fdeaea; color: #8d2b2b; justify-self: start; }

/* Drie stipjes terwijl er op antwoord wordt gewacht. */
.agent__wacht { display: inline-flex; gap: 4px; }
.agent__wacht span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--slate);
    animation: agentstip 1.1s infinite;
}
.agent__wacht span:nth-child(2) { animation-delay: .18s; }
.agent__wacht span:nth-child(3) { animation-delay: .36s; }

@keyframes agentstip {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.agent__invoer {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 12px 12px 8px;
    border-top: 1px solid var(--line);
}
.agent__invoer textarea {
    flex: 1;
    resize: none;
    max-height: 110px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.agent__verstuur {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 0; border-radius: var(--radius);
    background: var(--signal); color: var(--knop-tekst, #fff); cursor: pointer;
}
.agent__verstuur:disabled { opacity: .5; cursor: default; }

.agent__voet {
    margin: 0;
    padding: 0 14px 12px;
    font-size: .76rem;
    color: var(--slate);
}

@media (max-width: 620px) {
    .agent { right: 14px; bottom: 14px; }
    .agent__venster { bottom: 62px; max-height: calc(100vh - 100px); }
}

/* Links in een antwoord van de assistent. */
.agent__link {
    color: var(--signal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.agent__bericht--assistent .agent__link:hover { color: var(--ink); }

/* Dealerprijs: de gewone prijs erbij, doorgestreept. */
.prijs__was {
    display: inline-block;
    margin-right: 8px;
    color: var(--slate);
    text-decoration: line-through;
    font-size: .92rem;
}
.prijs__groep {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--signal-tint);
    color: var(--signal-dark);
    font-size: .74rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ------------------------------------------------ ervaringen van klanten */
.ervaringen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    align-items: start;
}

.ervaring {
    margin: 0;
    padding: clamp(22px, 2.6vw, 32px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ervaring__tekst {
    margin: 0;
    font-size: .96rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* De aanhalingstekens zet de opmaak; zo staan ze er altijd en altijd gelijk. */
.ervaring__tekst::before { content: '\201C'; }
.ervaring__tekst::after  { content: '\201D'; }

/* Een lang citaat tonen wij ingekort; de knop klapt het open. */
.ervaring--lang .ervaring__tekst {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ervaring--lang.is-open .ervaring__tekst {
    display: block;
    overflow: visible;
}

.ervaring__meer {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--signal);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.ervaring__meer:hover { color: var(--signal-dark); text-decoration: underline; }

.ervaring__wie {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ervaring__wie strong { display: block; color: var(--ink); font-size: .95rem; }
.ervaring__wie span { color: var(--slate); font-size: .86rem; }

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

/* --------------------------------------------------------- partnerbadge */
/*
 * Zweeft over de kop van de homepage. Binnen de hero geplaatst en niet
 * vastgezet in het scherm: een badge die meescrollt legt beslag op de hele
 * site en botst met de assistent rechtsonder.
 */
.partnerbadge {
    position: absolute;
    top: clamp(90px, 12vh, 150px);
    z-index: 5;
    width: var(--badge-breedte, 150px);
    filter: drop-shadow(0 10px 26px rgba(11, 26, 43, .28));
    transition: transform .25s var(--ease);
}
.partnerbadge--rechts { right: clamp(16px, 5vw, 64px); }
.partnerbadge--links  { left: clamp(16px, 5vw, 64px); }

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

/* Alleen bewegen als hij ergens naartoe leidt. */
.partnerbadge a { display: block; }
.partnerbadge a:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
    /*
     * Op een smal scherm staat het beeld boven de tekst en is er rechts geen
     * ruimte meer. De badge gaat dan mee naar boven, over de hoek van het
     * beeld: eerder probeerde ik hem onderaan te zetten, maar daar viel hij
     * half buiten beeld en liep hij door de titel heen.
     */
    .partnerbadge {
        top: clamp(96px, 14vh, 150px);
        bottom: auto;
        right: 12px;
        left: auto;
        width: min(var(--badge-breedte, 150px), 96px);
    }

    /* Ook een badge die links stond, gaat rechts staan: links botst hij met
       de tekst die daaronder begint. */
    .partnerbadge--links { right: 12px; left: auto; }
}

@media (max-width: 620px) {
    .partnerbadge {
        top: clamp(84px, 12vh, 120px);
        width: min(var(--badge-breedte, 150px), 78px);
    }
}

/* ----------------------------------------------------- teamlid in detail */
/* De aanklikbare kaart is een knop; die moet er niet als knop uitzien. */
.member--klikbaar {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.member--klikbaar figure { position: relative; }
.member--klikbaar img { transition: transform .3s var(--ease); }
.member--klikbaar:hover img { transform: scale(1.03); }

/* Plusje rechtsonder op de foto, zodat zichtbaar is dat er meer is. */
.member__meer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    box-shadow: 0 4px 14px rgba(11, 26, 43, .28);
    transition: background .18s var(--ease);
}
.member--klikbaar:hover .member__meer { background: var(--signal-dark); }

.teamvenster {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 40px);
}
.teamvenster[hidden] { display: none; }

.teamvenster__vlak {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 43, .55);
}

.teamvenster__kaart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: clamp(20px, 3vw, 36px);
    width: min(760px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(20px, 3vw, 34px);
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(11, 26, 43, .3);
}

.teamvenster__sluit {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
}
.teamvenster__sluit:hover { color: var(--ink); }

.teamvenster__foto { margin: 0; }
.teamvenster__foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.teamvenster__tekst h3 { margin: 0 0 2px; font-size: 1.3rem; }
.teamvenster__rol { margin: 0 0 14px; color: var(--slate); font-size: .92rem; }
.teamvenster__bio { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; }

.teamvenster__contact { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.teamvenster__contact div { display: flex; gap: 10px; padding: 4px 0; }
.teamvenster__contact dt { min-width: 74px; color: var(--slate); font-size: .88rem; }
.teamvenster__contact dd { margin: 0; font-size: .92rem; }
.teamvenster__contact a { color: var(--signal); }

@media (max-width: 700px) {
    /* Foto boven de tekst; naast elkaar wordt allebei te smal. */
    .teamvenster__kaart { grid-template-columns: 1fr; }
    .teamvenster__foto img { max-height: 34vh; object-fit: cover; }
}

/* ------------------------------------------------- zwevende webshopknop */
/*
 * Onder de kopbalk, niet erover: die balk blijft plakken bovenaan met de
 * winkelwagen, het account en de contactknop erin. De precieze afstand zet
 * het script, want de hoogte hangt af van de ingestelde logogrootte.
 */
.webshopknop {
    position: fixed;
    top: 90px;
    right: clamp(14px, 3vw, 28px);
    z-index: 95;

    /* Verborgen tot de bezoeker voorbij de kop is; anders ligt hij over de
       knoppen die daar al staan. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.webshopknop.is-zichtbaar,
.webshopknop.is-altijd {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.webshopknop__knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(11, 26, 43, .26);
    transition: background .18s var(--ease);
}
.webshopknop__knop:hover { background: var(--signal-dark); }

.webshopknop__pijl { transition: transform .2s var(--ease); }
.webshopknop.is-open .webshopknop__pijl { transform: rotate(180deg); }

.webshopknop__lijst {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 44px rgba(11, 26, 43, .2);
}
.webshopknop__lijst[hidden] { display: none; }

.webshopknop__lijst a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink-soft);
    text-decoration: none;
}
.webshopknop__lijst a:hover { background: var(--mist); color: var(--signal); }

@media (max-width: 620px) {
    /* Alleen het icoon; de tekst kost te veel breedte naast het menu. */
    .webshopknop__knop { height: 38px; padding: 0 11px; }
    .webshopknop__knop span { display: none; }
}

/* ------------------------------------------- kopen op rekening, portaal */
.rekeningmelding {
    padding: 10px 14px;
    margin: 0 0 16px;
    border-radius: var(--radius);
    background: var(--signal-tint);
    color: var(--ink-soft);
    font-size: .9rem;
}
.rekeningmelding--laat  { background: #fdeaea; color: #8d2b2b; }
.rekeningmelding--bijna { background: #fff6ed; color: #92400e; }
.rekeningmelding--ok    { background: #eaf6ee; color: #1a7f37; }

.openstaand__totaal { margin: 0 0 12px; color: var(--slate); }
.openstaand__totaal strong { font-size: 1.3rem; color: var(--ink); }
.openstaand__laat { color: #8d2b2b; font-weight: 600; }

/* ------------------------------------------- kop over de volle breedte */
/*
 * Tweede kopstijl: de beeldenreeks loopt over de hele breedte en de tekst
 * staat eroverheen. De beweging is dezelfde als bij de standaardkop; alleen
 * de indeling verschilt.
 */
.hero--breed { min-height: min(76vh, 720px); display: grid; align-items: end; }

.hero--breed .hero__anim {
    left: 0;                      /* niet alleen de rechterhelft */
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--breed .hero__canvas,
.hero--breed .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* vult het vlak, ongeacht de verhouding */
}

/*
 * Twee sluiers over elkaar: een donkere hoek linksonder waar de tekst staat,
 * en een lichte verdonkering van onderaf.
 *
 * Een sluier van onderaf alleen was niet genoeg: de titel viel dan precies
 * over het toestel en dat leest rommelig. Zo houdt de tekst links zijn eigen
 * rustige vlak en blijft de drone rechts goed zichtbaar.
 */
.hero--breed .hero__scrim {
    /* Ook hier regelt --sluier hoe donker het wordt; zie de brede kop. */
    background:
        linear-gradient(
            to right,
            rgba(11, 26, 43, calc(.88 * var(--sluier, 1))) 0%,
            rgba(11, 26, 43, calc(.72 * var(--sluier, 1))) 26%,
            rgba(11, 26, 43, calc(.32 * var(--sluier, 1))) 50%,
            rgba(11, 26, 43, calc(.06 * var(--sluier, 1))) 72%
        ),
        linear-gradient(
            to top,
            rgba(11, 26, 43, calc(.55 * var(--sluier, 1))) 0%,
            rgba(11, 26, 43, calc(.12 * var(--sluier, 1))) 45%,
            rgba(11, 26, 43, 0) 75%
        );
}

/*
 * De breedte beperken op de losse elementen en niet op het omhullende vak.
 * Dat vak is de gewone inhoudsbreedte, die zichzelf centreert; zou ik dáár de
 * breedte beperken, dan schuift het geheel naar het midden en staat de tekst
 * alsnog over het toestel.
 */
.hero--breed .hero__content { padding-block: clamp(40px, 7vw, 92px); }
.hero--breed .hero__content > * { max-width: 600px; }

@media (max-width: 900px) {
    /*
     * Op een smal scherm staat de tekst óp het beeld en niet ernaast. Het
     * beeld is licht van boven, dus witte tekst verdwijnt erin; daarom hier
     * een flink donkerder sluier over het geheel.
     */
    .hero--breed .hero__scrim {
        background:
            linear-gradient(
                to top,
                rgba(11, 26, 43, calc(.92 * var(--sluier, 1))) 0%,
                rgba(11, 26, 43, calc(.78 * var(--sluier, 1))) 40%,
                rgba(11, 26, 43, calc(.62 * var(--sluier, 1))) 75%,
                rgba(11, 26, 43, calc(.5 * var(--sluier, 1))) 100%
            );
    }
    .hero--breed .hero__content > * { max-width: none; }
}
.hero--breed .eyebrow,      .hero--vol .eyebrow      { color: #9ec4f5; }
.hero--breed .hero__title,  .hero--vol .hero__title  { color: #fff; }
.hero--breed .hero__intro,  .hero--vol .hero__intro  { color: rgba(255, 255, 255, .88); }

/* De tweede knop moet leesbaar blijven op het donkere beeld. */
.hero--breed .btn--ghost,
.hero--vol .btn--ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.hero--breed .btn--ghost:hover,
.hero--vol .btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* De partnerbadge staat bij deze kop lager, anders valt hij over de rand. */
.hero--breed .partnerbadge { top: clamp(80px, 10vh, 130px); }

@media (max-width: 700px) {
    /*
     * Op een smal scherm wordt het beeld in de gewone kop een blok bovenaan.
     * Bij deze kopstijl mag dat niet: de tekst staat er wit overheen en zou
     * dan op een witte achtergrond belanden, dus onleesbaar zijn.
     *
     * Daarom blijft het beeld hier de hele kop vullen, met de tekst eroverheen.
     */
    .hero--breed {
        min-height: min(72vh, 600px);
        display: grid;
        align-items: end;
        padding-block: 0;
    }

    .hero--breed .hero__anim {
        position: absolute;
        inset: 0;
    }

    .hero--breed .hero__canvas,
    .hero--breed .hero__poster {
        height: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        object-fit: cover;
        object-position: center;
    }
}


/* ------------------------------------------- kop met de explosiereeks */
.hero--explode { background: #fff; }

/*
 * KOP 3 — het toestel op de rechterhelft.
 *
 * Het beeldvlak begint op de helft van de kop, zodat de tekst links vrij
 * blijft. "contain" houdt het hele toestel in beeld; met "cover" zou de
 * browser hem opschalen en de zijkanten wegsnijden.
 */
.hero--explode-half .hero__anim {
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--explode-half .hero__canvas,
.hero--explode-half .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* Geen sluier nodig: de tekst staat naast het beeld, niet erop. */
.hero--explode-half .hero__scrim { background: none; }

/*
 * KOP 4 — het beeld over de volle breedte, tekst eroverheen.
 */
.hero--explode-vol .hero__anim {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--explode-vol .hero__canvas,
.hero--explode-vol .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #fff;
}

/* Hier staat de tekst wél op het beeld, dus een lichte sluier van links. */
.hero--explode-vol .hero__scrim {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .82) 32%,
        rgba(255, 255, 255, .34) 58%,
        rgba(255, 255, 255, 0) 78%
    );
}

@media (max-width: 900px) {
    /* Op een smal scherm past niets naast elkaar; dan beide over de breedte. */
    .hero--explode-half .hero__anim { left: 0; }
    .hero--explode-half .hero__scrim,
    .hero--explode-vol .hero__scrim {
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .86) 45%,
            rgba(255, 255, 255, .5) 100%
        );
    }
}

/*
 * Kop 3 en 4. De reeks staat op een lichte studio-achtergrond, dus hier een
 * lichte sluier van links — een donkere zou het beeld wegdrukken.
 */
.hero--explode .hero__scrim {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .8) 30%,
        rgba(255, 255, 255, .32) 56%,
        rgba(255, 255, 255, 0) 76%
    );
}
.hero--explode .eyebrow     { color: var(--signal); }
.hero--explode .hero__title { color: var(--ink); }
.hero--explode .hero__intro { color: var(--ink-soft); }
.hero--explode .btn--ghost  { border-color: var(--line); color: var(--ink); }
.hero--explode .btn--ghost:hover { background: var(--mist); border-color: var(--ink); color: var(--ink); }



/* ------------------------------------------- aanpak: van vraag naar oplossing */
/*
 * De afstanden en de breedte komen van .section en .wrap, net als bij de
 * andere secties. Eerder zette ik hier een eigen max-width op de wrap; dan
 * schoof het blok naar binnen en liep de linkerrand niet meer gelijk met de
 * rest van de pagina.
 */
.aanpak { position: relative; background: #fff; border-bottom: 1px solid var(--line); }

/*
 * De accentlijn over de VOLLE breedte, dus op de sectie en niet in de wrap.
 * Met een rand op de wrap zou hij mee inspringen en bij de paginamarge
 * ophouden; hier loopt hij van rand tot rand.
 */
.aanpak--lijn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--signal);
}

/* ------------------------------------------------------ tekst naast beeld */
/* De keten staat onder het raster, dus over de volle breedte van de pagina. */
.aanpak .keten { margin-top: clamp(26px, 4vw, 40px); }

.aanpak__raster--beeld {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.aanpak__beeld { margin: 0; }

.aanpak__beeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

@media (max-width: 900px) {
    /* Onder elkaar; het beeld onder de tekst, want de tekst draagt de boodschap. */
    .aanpak__raster--beeld { grid-template-columns: 1fr; }
}

/* Leesbare regellengte, zonder het blok zelf te verschuiven. */
/* Leesbare regellengte als de tekst alleen staat. Naast een foto is de kolom
   al smal genoeg; dan zou deze grens hem onnodig verder inperken. */
.aanpak__titel,
.aanpak__lead,
.aanpak__tekst { max-width: 62ch; }

.aanpak__raster--beeld .aanpak__titel,
.aanpak__raster--beeld .aanpak__lead,
.aanpak__raster--beeld .aanpak__tekst { max-width: none; }

.aanpak__titel {
    margin: 0 0 14px;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--ink);
}

.aanpak__lead {
    margin: 0 0 18px;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    color: var(--ink);
}

.aanpak__tekst {
    color: var(--ink-soft);
    line-height: 1.7;
}
/*
 * De tekst kwam vroeger als platte regels binnen en staat nu in alinea's uit
 * de editor. Allebei moeten zij er hetzelfde uitzien, dus de ruimte tussen de
 * alinea's is dezelfde als die tussen twee lege regels.
 */
.aanpak__tekst br + br { content: ''; display: block; height: 10px; }
.aanpak__tekst p { margin: 0 0 14px; }
.aanpak__tekst p:last-child { margin-bottom: 0; }
.aanpak__tekst ul,
.aanpak__tekst ol { margin: 0 0 14px; padding-left: 20px; }
.aanpak__tekst li { margin-bottom: 4px; }
.aanpak__tekst a { color: var(--signal); }

/* ---------------------------------------------------------------- de keten */
/*
 * Een rij stappen met een pijl ertussen. De pijl staat in de opmaak en niet in
 * de tekst: zo staat hij nooit aan het eind van een regel als de rij afbreekt,
 * en hoeft u hem niet mee te typen in het beheer.
 */
.keten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 4px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: keten;
}

.keten__stap { display: flex; align-items: center; }

/*
 * De pijl achter de stap, niet ervoor. Breekt de rij af, dan begint de
 * volgende regel met een stap in plaats van met een losse pijl.
 */
.keten__stap:not(:last-child)::after {
    content: '→';
    margin: 0 6px 0 8px;
    color: var(--slate);
    font-size: .95rem;
}

.keten__link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}

a.keten__link:hover {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}

/* Zonder adres is het geen knop; dan ook niet als knop laten aanvoelen. */
.keten__link--dood {
    background: var(--mist);
    color: var(--ink-soft);
    font-weight: 500;
}

/*
 * Omgekeerd, in te stellen bij Instellingen.
 *
 * Dan valt een stap zónder adres juist op: hij staat in de accentkleur en
 * wordt wit zodra u hem aanwijst — precies andersom dan een stap mét adres,
 * die wit staat en blauw wordt. Handig als de keten zelf het verhaal is en
 * de losse stappen geen eigen pagina hebben.
 *
 * Stappen mét een adres blijven onveranderd; die regel staat hierboven en is
 * even zwaar, maar geldt voor a.keten__link en die komt hier niet voorbij.
 */
.keten--omgekeerd .keten__link--dood {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--knop-tekst, #fff);
    font-weight: 600;
}
.keten--omgekeerd .keten__link--dood:hover {
    background: var(--paper);
    border-color: var(--signal);
    color: var(--signal);
}

@media (max-width: 620px) {
    .keten { gap: 6px 2px; }
    .keten__link { padding: 7px 11px; font-size: .86rem; }
    .keten__stap:not(:last-child)::after { margin: 0 3px 0 5px; }
}

/*
 * Vaste hoogte voor de foto in de aanpaksectie.
 *
 * Met object-fit: cover wordt hij bijgesneden in plaats van uitgerekt; anders
 * worden mensen en toestellen op de foto vervormd zodra de verhouding niet
 * precies klopt.
 */
.aanpak__beeld--vast img {
    object-fit: cover;
    object-position: center;
}

@media (max-width: 900px) {
    /* Op een smal scherm een vaste hoogte laten varen: het beeld is dan al
       smal, en bijsnijden zou er weinig van overlaten. */
    .aanpak__beeld--vast img { height: auto !important; }
}

/* ------------------------------------------------------------ partnerlogo's */
.partners__kop { margin-bottom: 20px; }

/*
 * Vier naast elkaar op een breed scherm; heeft u er meer, dan lopen ze door op
 * de volgende regel. Met auto-fit hoeft u niets in te stellen als er een
 * partner bij komt.
 */
.partners__rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(18px, 3vw, 40px);
    align-items: center;
}

.partners__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--slate);
    text-decoration: none;
    font-size: .82rem;
    text-align: center;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* Alleen een link voelt aan als een link. */
a.partners__item:hover {
    border-color: var(--signal);
    box-shadow: 0 6px 18px rgba(11, 26, 43, .08);
    transform: translateY(-2px);
}

.partners__item img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    .partners__rij { grid-template-columns: repeat(2, 1fr); }
    .partners__item img { max-height: 44px; }
}

/*
 * Scheidingslijn tussen twee secties.
 *
 * Een los blokje en geen rand op een van de twee secties: zo hoort hij bij
 * geen van beide en kan hij overal worden neergezet zonder dat de opvulling
 * van die secties verandert.
 */
.scheidslijn {
    height: 2px;
    background: var(--signal);
}

/*
 * Split-blok zonder afbeelding: tekst over de hele beschikbare breedte.
 *
 * Eerder begrensde ik de regellengte hier, maar dan blijft er rechts een
 * gat staan waar niets komt — precies wat u niet wilde.
 */
.feature--breed { display: block; }
.feature--breed .feature__body { max-width: none; }

/*
 * Ruimte tussen de blokken van een pagina.
 *
 * De maat zit op de secties binnen de wikkel, niet op de wikkel zelf: alleen
 * dan verandert de afstand tussen de blokken en niet die tot de kop of de
 * voettekst.
 */
.blokken--compact > .section { padding-block: clamp(34px, 4.5vw, 56px); }
.blokken--krap    > .section { padding-block: clamp(20px, 2.8vw, 32px); }
.blokken--ruim    > .section { padding-block: clamp(72px, 10vw, 128px); }

/*
 * Het afsluitende oproepblok houdt zijn eigen lucht: dat hoort los te staan
 * van de rij erboven, anders plakt het tegen de laatste alinea aan.
 */
.blokken--compact > .section:last-child,
.blokken--krap > .section:last-child { padding-block: clamp(44px, 6vw, 72px); }

/*
 * Foto's in paginablokken: standaard hun eigen verhouding.
 *
 * Eerder werd elke foto in een kader van 3:2 geduwd en bijgesneden. Dat oogt
 * rustig bij een rij gelijke foto's, maar bij een brede of staande foto snijdt
 * het er te veel vanaf — precies waar u tegenaan liep.
 *
 * Dit geldt alleen binnen .blokken, dus voor de blokken van een pagina. De
 * uitgelichte blokken op de homepage staan daarbuiten en houden hun vaste
 * kader, zodat die rij gelijk blijft.
 */
.blokken .feature__media img {
    aspect-ratio: auto;
    height: auto;
    object-fit: fill;
}

/* Wie de oude, strak uitgelijnde rij wil, kiest het vaste kader terug. */
.blokken--kader .feature__media img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
}

/* --------------------------------------------- Over ons: tekst en foto */
/*
 * Tekst over de volle breedte, met de foto en het citaat eronder in plaats
 * van ernaast. Eerder lag de tweedeling vast, ook als er geen foto stond.
 */
.split--breed { display: block; }
.split--breed .overons__zij { margin-top: clamp(28px, 4vw, 48px); }

/*
 * De tekst krijgt hier de volle breedte. Normaal begrenzen wij een lap tekst
 * op 68 tekens omdat dat prettiger leest, maar u vroeg juist om de hele
 * breedte — en zonder foto ernaast staat er anders een gat rechts.
 */
.split--breed .prose { max-width: none; }

/*
 * De foto eronder niet over de hele breedte uitrekken. Een liggende foto van
 * 1150 px breed wordt anders zo hoog dat hij het halve scherm vult, terwijl
 * hij hier een illustratie is en niet het onderwerp.
 */
.split--breed .fotoblok { max-width: 720px; }

/* Naast elkaar blijft het beeld naast de tekst; alleen de kant wisselt. */
.split--flip .prose { order: 2; }
.split--flip .overons__zij { order: 1; }

/* ------------------------------------------- partners: schuifbare rij */
/*
 * Vanaf vijf partners schuift de rij opzij in plaats van door te lopen op een
 * tweede regel. Er passen er vier tegelijk in beeld; de rest haalt u met de
 * pijlen, met een veegbeweging of met de pijltjestoetsen.
 */
.partners__vak { position: relative; }

.partners__rij--schuif {
    display: grid;
    /*
     * De kolomindeling van de gewone rij uitschakelen. Die plaatst alle logo's
     * in kolommen die samen precies passen, en dan valt er niets te schuiven:
     * de browser perst ze gewoon allemaal in beeld.
     */
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Precies vier in beeld, met de tussenruimte meegerekend. */
    grid-auto-columns: calc((100% - 3 * clamp(18px, 3vw, 40px)) / 4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.partners__rij--schuif::-webkit-scrollbar { display: none; }
.partners__rij--schuif > * { scroll-snap-align: start; }

/* De pijlen zweven over de rand, zodat zij geen ruimte van de logo's afsnoepen. */
.partners__pijl {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 26, 43, .1);
    transform: translateY(-50%);
    transition: background .15s, border-color .15s, opacity .15s;
}
.partners__pijl:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.partners__pijl[hidden] { display: none; }
.partners__pijl--terug  { left: -20px; }
.partners__pijl--verder { right: -20px; }

@media (max-width: 900px) {
    /* Op een smal scherm passen er twee; daar veegt men liever dan te klikken. */
    .partners__rij--schuif {
        grid-auto-columns: calc((100% - clamp(18px, 3vw, 40px)) / 2);
    }
    .partners__pijl { display: none; }
}

/* ------------------------------------------ partners: doorlopend schuiven */
/*
 * De tweede manier van bewegen: geen sprongen, maar een rij die onafgebroken
 * langzaam opzij schuift. De logo's staan twee keer in de rij; het script
 * houdt de positie bij en zet de rij halverwege terug naar het begin.
 */
.partners__rij--loop {
    /*
     * Vastklikken moet hier uit. Scroll-snap trekt de rij bij elke kleine
     * verschuiving naar het dichtstbijzijnde logo, en dan beweegt er niets
     * meer: snap en een doorlopende beweging vechten om dezelfde positie.
     */
    scroll-snap-type: none;
    /*
     * En zacht schuiven ook: het script zet de positie zelf elk beeld, dus een
     * naschuivende browser maakt het alleen maar stroperig.
     */
    scroll-behavior: auto;
}
.partners__rij--loop > * { scroll-snap-align: none; }

/*
 * Een zachte rand links en rechts.
 *
 * Bij een doorlopende rij staat er altijd een logo half in beeld. Recht
 * afgesneden ziet dat eruit als een fout; met een overgang naar wit ziet het
 * eruit als wat het is: een rij die doorloopt. Kan een browser dit niet, dan
 * ziet hij de rechte rand, en meer gebeurt er niet.
 */
.partners__vak--loop {
    --partners-rand: clamp(24px, 6%, 72px);

    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--partners-rand),
        #000 calc(100% - var(--partners-rand)), transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0, #000 var(--partners-rand),
        #000 calc(100% - var(--partners-rand)), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Geen beweging gevraagd, dus ook geen tweede ronde logo's: die staat er
     * alleen om de overgang te verbergen. Wat overblijft is een gewone rij die
     * met de hand te vegen is.
     */
    .partners__rij--loop > [aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------- diensten als carrousel */
/*
 * Eén rij die opzij schuift. De kaart in het midden staat op ware grootte, de
 * buren staan kleiner en lichter, zodat het oog vanzelf naar het midden gaat.
 *
 * Het schalen gebeurt met een klasse die de javascript zet op basis van de
 * afstand tot het midden; zo werkt het ook bij vegen en met het wiel, niet
 * alleen bij de pijlen.
 */
.dienstrol { position: relative; }

.dienstrol__spoor {
    display: flex;
    gap: clamp(16px, 2.5vw, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Ruimte links en rechts, zodat de eerste en laatste kaart ook in het
       midden kunnen komen te staan. */
    padding: 10px calc(50% - min(360px, 34vw)) 24px;
}
.dienstrol__spoor::-webkit-scrollbar { display: none; }

.dienstrol__kaart {
    flex: 0 0 min(720px, 68vw);
    scroll-snap-align: center;
    transform: scale(.82);
    opacity: .5;
    transition: transform .35s ease, opacity .35s ease;
}
.dienstrol__kaart.is-midden { transform: scale(1); opacity: 1; }

/* De kaarten zelf houden hun eigen opmaak; alleen de hoogte trekken wij gelijk. */
.dienstrol__kaart .tile { height: 100%; }

.dienstrol__pijl {
    position: absolute;
    top: calc(50% - 12px);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(11, 26, 43, .14);
    transform: translateY(-50%);
    transition: background .15s, border-color .15s, color .15s;
}
.dienstrol__pijl:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.dienstrol__pijl[hidden] { display: none; }
.dienstrol__pijl--terug  { left: clamp(4px, 2vw, 24px); }
.dienstrol__pijl--verder { right: clamp(4px, 2vw, 24px); }

.dienstrol__stippen {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.dienstrol__stip {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    transition: background .2s, width .2s;
}
.dienstrol__stip.is-hier { width: 22px; background: var(--signal); }

@media (max-width: 720px) {
    /* Op een telefoon één kaart in beeld; de buren steken er net langs. */
    .dienstrol__kaart { flex-basis: 82vw; transform: scale(.92); }
    .dienstrol__spoor { padding-inline: 9vw; }
    .dienstrol__pijl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dienstrol__spoor { scroll-behavior: auto; }
    .dienstrol__kaart { transition: none; }
}

/* ---------------------------------------------------------- shopfilter */
/*
 * De categorieknoppen boven een overzicht. Dezelfde vorm als bij de casussen:
 * met een handvol categorieën ziet u in één oogopslag wat er te kiezen valt,
 * en hoeveel producten er achter elke knop zitten.
 */
.shopfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(24px, 4vw, 36px);
    padding-bottom: clamp(18px, 3vw, 26px);
    border-bottom: 1px solid var(--line);
}

.shopfilter__kop {
    margin-right: 6px;
    color: var(--slate);
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shopfilter__knop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s, border-color .15s, color .15s;
}

.shopfilter__knop span { color: var(--slate); font-size: .78rem; }
.shopfilter__knop:hover { border-color: var(--signal); color: var(--signal); }

/* De knop die aan staat: omgekeerd, zodat hij er niet uitziet als nog te kiezen. */
.shopfilter__knop.is-aan {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.shopfilter__knop.is-aan span { color: rgba(255, 255, 255, .7); }

/*
 * Het kruisje in een knop die aanstaat. U kunt er meerdere tegelijk aanzetten,
 * en dan moet ook te zien zijn dat zo'n knop weer uit kan: zonder dat kruisje
 * lijkt een rij zwarte knoppen een stand waar u niet meer uitkomt.
 */
.shopfilter__uit {
    margin-left: 1px;
    font-size: 1rem;
    line-height: 1;
    opacity: .75;
}
.shopfilter__knop.is-aan:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.shopfilter__knop.is-aan:hover .shopfilter__uit { opacity: 1; }

/* Hoeveel er samen overblijft als er meerdere knoppen aanstaan. */
.shopfilter__samen {
    margin: -14px 0 clamp(22px, 3vw, 30px);
    font-size: .88rem;
    color: var(--slate);
}
.shopfilter__samen a { color: var(--signal); }

@media (max-width: 760px) {
    /* Op een smal scherm staat de kop boven de knoppen in plaats van ervoor. */
    .shopfilter__kop { width: 100%; margin: 0 0 2px; }
}

/* --------------------------------------------------------- casusfilter */
/*
 * Drie groepen knoppen boven het archief. Bewust geen keuzelijsten: met een
 * handvol waarden per groep ziet u zo in één oogopslag wat er te kiezen valt,
 * en hoeveel casussen er achter elke keuze zitten.
 */
.casusfilter {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(20px, 3vw, 28px);
    border-bottom: 1px solid var(--line);
}

.casusfilter__groep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.casusfilter__kop {
    min-width: 96px;
    color: var(--slate);
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.casusfilter__knop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s, border-color .15s, color .15s;
}
.casusfilter__knop span { color: var(--slate); font-size: .78rem; }
.casusfilter__knop:hover { border-color: var(--signal); color: var(--signal); }

.casusfilter__knop.is-aan {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}
.casusfilter__knop.is-aan span { color: rgba(255, 255, 255, .8); }

.casusfilter__wis {
    justify-self: start;
    color: var(--slate);
    font-size: .86rem;
}

@media (max-width: 620px) {
    .casusfilter__kop { min-width: 100%; }
}

/* ------------------------------------------ casussen: sectoren en toepassingen */
/*
 * Twee knoppen die een lijst uitklappen. Wij gebruiken <details>: dat werkt
 * zonder javascript, blijft werken als dat niet laadt, en een bezoeker die
 * zoekt in de pagina vindt ook de dichtgeklapte regels.
 */
.casusboom {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.casusboom__vak {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}

.casusboom__knop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.casusboom__knop::-webkit-details-marker { display: none; }
.casusboom__knop:hover { color: var(--signal); }

.casusboom__pijl { color: var(--slate); transition: transform .2s; }
.casusboom__vak[open] .casusboom__pijl { transform: rotate(90deg); }
.casusboom__vak[open] .casusboom__knop { border-bottom: 1px solid var(--line); }

.casusboom__lijst,
.casusboom__kinderen { margin: 0; padding: 0; list-style: none; }
.casusboom__lijst { padding: 10px 20px 18px; }
.casusboom__lijst > li + li { margin-top: 10px; }

.casusboom__tak {
    display: inline-block;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
}
.casusboom__tak:hover { color: var(--signal); }

/* De onderliggende regels iets ingesprongen, met een lijntje ervoor: zo ziet u
   in één oogopslag wat bij wat hoort. */
.casusboom__kinderen {
    margin: 6px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.casusboom__kind {
    color: var(--slate);
    text-decoration: none;
    font-size: .86rem;
}
.casusboom__kind:hover { color: var(--signal); }

.casusboom__tak.is-aan,
.casusboom__kind.is-aan { color: var(--signal); text-decoration: underline; }

/* Het aantal casussen achter een regel; nul laten wij weg en tonen wij lichter. */
.casusboom__tak span,
.casusboom__kind span {
    margin-left: 4px;
    color: var(--signal);
    font-size: .74rem;
    font-weight: 600;
}
.casusboom__tak.is-leeg,
.casusboom__kind.is-leeg { color: var(--slate); opacity: .6; }

/* --------------------------------------------- knoppen met een uitlegvenster */
.popknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.knopje {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.knopje:hover { background: var(--signal); border-color: var(--signal); color: #fff; }

/*
 * Het venster zelf. Wij gebruiken <dialog>: dat regelt de donkere achtergrond,
 * sluiten met Escape en het vasthouden van de toetsaanslagen binnen het
 * venster. Dat laatste is precies wat mensen met een schermlezer nodig hebben.
 */
.popvenster {
    width: min(620px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(11, 26, 43, .28);
}
.popvenster::backdrop { background: rgba(11, 26, 43, .55); }

.popvenster__beeld {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}

/*
 * Een filmpje op de plek van de afbeelding. De verhouding ligt vast op 16:9,
 * zodat het venster niet opspringt zodra de speler is geladen.
 */
.popvenster__film { display: block; }
.popvenster__film iframe,
.popvenster__film video,
.popvenster__film .embedslot {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}
/* Een eigen video op een donkere ondergrond; een staand filmpje valt dan niet uit de toon. */
.popvenster__film video { background: #0b1a2b; object-fit: contain; }

.popvenster__inhoud { padding: 26px 28px 30px; }
.popvenster__inhoud h3 { margin: 0 0 12px; font-size: 1.3rem; }
.popvenster__inhoud p { color: var(--slate); margin: 0 0 12px; }
.popvenster__inhoud p:last-child { margin-bottom: 0; }
.popvenster__inhoud ul { margin: 0 0 12px; padding-left: 20px; color: var(--slate); }

/*
 * Boven de inhoud. Zonder die z-index verdwijnt het kruisje achter een
 * ingesloten speler: een iframe legt zichzelf over alles heen en dan is het
 * venster alleen nog met Escape te sluiten.
 */
.popvenster__sluit { position: absolute; top: 12px; right: 12px; z-index: 2; }
.popvenster__sluit button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}
.popvenster__sluit button:hover { background: #fff; }

/* De keten op Over ons staat onder het tekstblok, met wat lucht ertussen. */
.keten--overons { margin-top: clamp(28px, 4vw, 44px); }

/*
 * De tweede rij knoppen: de subcategorieën binnen de gekozen categorie. Iets
 * kleiner en zonder streep eronder, zodat te zien is dat hij bij de rij
 * erboven hoort en er niet mee concurreert.
 */
/*
 * De tweede rij staat in een eigen blauwe balk, met een streep aan de
 * linkerkant. Zonder dat zagen de twee rijen er hetzelfde uit en was niet te
 * zien dat de onderste bij de bovenste hoort — precies het punt waar het niet
 * duidelijk was.
 */
.shopfilter--sub {
    background: var(--signal-tint);
    border: 1px solid #d6e4fa;
    border-left: 4px solid var(--signal);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: clamp(24px, 4vw, 36px);
}

/* Staat er een tweede rij onder, dan houdt de eerste zijn streep voor zich. */
.shopfilter:has(+ .shopfilter--sub) {
    margin-bottom: 12px;
    padding-bottom: clamp(14px, 2vw, 18px);
}

.shopfilter__kop--sub {
    color: var(--signal);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-display, inherit);
    font-size: .92rem;
    font-weight: 600;
}

.shopfilter--sub .shopfilter__knop {
    padding: 5px 12px;
    font-size: .85rem;
    background: #fff;
    border-color: #cedff7;
}
.shopfilter--sub .shopfilter__knop span { font-size: .75rem; }
.shopfilter--sub .shopfilter__knop:hover { border-color: var(--signal); color: var(--signal); }

/* Aan: blauw in plaats van donkerblauw, zodat de twee rijen uit elkaar te houden zijn. */
.shopfilter--sub .shopfilter__knop.is-aan {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}
.shopfilter--sub .shopfilter__knop.is-aan span { color: rgba(255, 255, 255, .78); }
.shopfilter--sub .shopfilter__knop.is-aan:hover { background: var(--signal-dark); border-color: var(--signal-dark); }

@media (max-width: 760px) {
    .shopfilter__kop--sub { width: 100%; margin: 0 0 6px; }
}

/* ------------------------------------- eigen beeld of video in de kop */
/*
 * Komt op de plek van de beeldenreeks, met dezelfde maten. Een foto en een
 * video vullen het vlak; een filmpje van YouTube krijgt zijn eigen verhouding
 * en staat gecentreerd, want een iframe laat zich niet bijsnijden.
 */
.hero__eigenbeeld,
.hero__eigenfilm {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero--breed .hero__eigenbeeld,
.hero--breed .hero__eigenfilm { object-position: 50% 50%; }

.hero__eigenembed {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vw, 40px);
}
.hero__eigenembed iframe,
.hero__eigenembed .embedslot {
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
}

/*
 * Bij kop 1 staat de tekst links en het beeld rechts; dan hoort de sluier er
 * niet overheen te liggen. Bij kop 2 juist wel, want daar staat de tekst op
 * het beeld.
 */
.hero--anim:not(.hero--breed) .hero__eigen + .hero__scrim { display: none; }

/* ------------------------------------ eigen knop voor volledig scherm */
/*
 * Hoort bij een speler zonder knoppen van de dienst zelf. Rechtsonder, half
 * doorzichtig, en pas goed zichtbaar als u er met de muis overheen gaat —
 * zodat hij het beeld niet in de weg zit.
 */
.embedslot { position: relative; }
.embedslot--los { aspect-ratio: 16 / 9; }

.embedslot__groot {
    position: absolute;
    right: 10px; bottom: 10px;
    z-index: 2;
    width: 36px; height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(11, 26, 43, .45);
    color: #fff;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, background .15s;
}
.embedslot:hover .embedslot__groot,
.embedslot__groot:focus-visible { opacity: 1; background: rgba(11, 26, 43, .75); }

/* Het hoekje-icoon: vier streepjes die een kader suggereren. */
.embedslot__groot span {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 15px; height: 13px;
    border: 2px solid currentColor;
    border-radius: 2px;
    border-left-width: 6px;
    border-right-width: 6px;
}

/* In volledig scherm vult de speler alles en staat de knop rechtsonder. */
.embedslot:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; background: #000; }
.embedslot:fullscreen iframe { width: 100%; height: 100%; }

/* --------------------------------- kop met beeld over de volle breedte */
/*
 * De tweede indeling van de kop van een pagina: het beeld, de video of het
 * filmpje vult de hele kop en de tekst staat eroverheen. De eerste indeling —
 * tekst naast het beeld — blijft gewoon wat hij was.
 *
 * Het beeld staat in de opmaak nog binnen de inhoudsbreedte; met een absolute
 * plaatsing haalt het die band toch over de volle breedte. Zo hoefde de
 * opbouw van de pagina niet om, en blijft de ene indeling de andere niet in
 * de weg zitten.
 */
.hero--vol {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 60vh, 640px);
    display: flex;
    align-items: center;
    background: var(--ink);
}

.hero--vol .hero__visual {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    /* Geen kader, geen ronding en geen schaduw: het beeld ís de kop. */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}
.hero--vol .hero__visual img,
.hero--vol .hero__visual video,
.hero--vol .hero__embed,
.hero--vol .hero__embed .embedslot,
.hero--vol .hero__embed iframe {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    object-fit: cover;
}

/* De sluier tussen beeld en tekst: donker onderaan, open naar boven. */
.hero--vol .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;      /* de knop en het filmpje blijven aanklikbaar */
    /*
     * --sluier komt van de pagina zelf (0 tot 1) en regelt hoe donker het
     * wordt. Op 1 is het zoals het was; op 0 blijft er niets van over en ziet
     * u het beeld onbedekt — let dan wel op of uw tekst nog leesbaar is.
     */
    background: linear-gradient(
        to top,
        rgba(11, 26, 43, calc(.86 * var(--sluier, 1))) 0%,
        rgba(11, 26, 43, calc(.62 * var(--sluier, 1))) 45%,
        rgba(11, 26, 43, calc(.34 * var(--sluier, 1))) 100%
    );
}

/* De tekst erbovenop, en niet meer in twee kolommen. */
.hero--vol .hero__layout { display: block; }
.hero--vol .hero__copy   { position: relative; z-index: 2; max-width: 640px; }

@media (max-width: 700px) {
    /*
     * Op een smal scherm mag het beeld geen blok bovenaan worden, zoals bij de
     * gewone kop: de tekst staat er wit overheen en zou dan op wit belanden.
     */
    .hero--vol .hero__visual { position: absolute; inset: 0; }
    .hero--vol .hero__copy   { max-width: none; }
    .hero--vol .hero__scrim  {
        background: linear-gradient(
            to top,
            rgba(11, 26, 43, calc(.92 * var(--sluier, 1))) 0%,
            rgba(11, 26, 43, calc(.78 * var(--sluier, 1))) 50%,
            rgba(11, 26, 43, calc(.6 * var(--sluier, 1))) 100%
        );
    }
}

/*
 * De wachtstand van YouTube in een kop over de volle breedte.
 *
 * Standaard staat die melding in het midden van het vlak, en dat is hier het
 * midden van de kop: precies waar de titel staat. Daarom schuift hij in deze
 * indeling naar de rechteronderhoek, in een eigen vakje — zo blijft de tekst
 * leesbaar en de knop vindbaar. Zodra de bezoeker de cookiemelding heeft
 * beantwoord, verdwijnt dit vanzelf.
 */
.hero--vol .embedslot__melding {
    inset: auto 0 0 auto;
    width: min(360px, 86vw);
    margin: clamp(14px, 3vw, 28px);
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    /*
     * Donker in plaats van licht. De sluier ligt over dit vakje heen — het
     * zit immers in hetzelfde beeldvlak — en een wit vakje wordt daar grauw
     * van. Donker met witte tekst leest er juist goed doorheen.
     */
    background: rgba(11, 26, 43, .82);
    box-shadow: var(--shadow-lg);
    z-index: 3;
}
.hero--vol .embedslot__melding p {
    font-size: .82rem;
    color: rgba(255, 255, 255, .92);
}

/* ===================================================== popup op de homepage */
/*
 * Eén venster over de homepage, met een foto boven de tekst. De sluier
 * eronder vangt een klik naast het venster op, zodat sluiten vanzelf gaat
 * zonder dat iemand het kruisje hoeft te zoeken.
 *
 * De z-index ligt boven de cookiemelding (90): die melding gaat over wat de
 * site met gegevens doet en hoort niet achter een aankondiging te verdwijnen
 * — maar hij blijft leesbaar doordat hij onderaan staat en het venster in het
 * midden.
 */
.popup {
    position: fixed; inset: 0; z-index: 95;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.popup[hidden] { display: none; }

.popup__sluier {
    position: absolute; inset: 0;
    background: rgba(11, 26, 43, .55);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.popup.is-open .popup__sluier { opacity: 1; }

.popup__venster {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(11, 26, 43, .34);
    opacity: 0;
    transform: translateY(14px) scale(.98);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.popup.is-open .popup__venster { opacity: 1; transform: none; }
/* Het venster krijgt de aandacht bij het openen; daar hoort geen ring omheen. */
.popup__venster:focus { outline: none; }

.popup__kruis {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    /* Lichte knop op de foto én op wit: vandaar het doorzichtige vlak. */
    background: rgba(255, 255, 255, .88);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(11, 26, 43, .18);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.popup__kruis:hover { background: #fff; color: var(--signal); }

.popup__beeld { margin: 0; }
.popup__beeld img {
    display: block;
    width: 100%; aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.popup__tekst { padding: 26px 28px 28px; }
.popup__tekst h2 { margin: 0 0 10px; font-size: 1.42rem; }
.popup__body { color: var(--slate); font-size: .96rem; }
.popup__body p { margin: 0 0 10px; }
.popup__body p:last-child { margin-bottom: 0; }
.popup__acties { margin: 20px 0 0; }
.popup__acties .btn { width: 100%; justify-content: center; }

@media (max-width: 560px) {
    .popup { padding: 14px; align-items: flex-end; }
    .popup__venster { max-height: calc(100vh - 28px); }
    .popup__tekst { padding: 22px 20px 24px; }
    .popup__tekst h2 { font-size: 1.24rem; }
}

/* Wie beweging liever uitzet, krijgt het venster gewoon meteen. */
@media (prefers-reduced-motion: reduce) {
    .popup__sluier,
    .popup__venster { transition: none; }
}


/* ================================ beeld even hoog als de tekst ernaast */
/*
 * Per blok in te stellen bij "Tekst naast beeld" -> "Hoogte van het beeld".
 *
 * Normaal houdt de foto zijn eigen verhouding en staat hij midden naast de
 * tekst; bij een lange tekst steekt die er dan boven en onder uit. Met deze
 * keuze vult de foto de hele hoogte van het blok. Hij wordt bijgesneden, niet
 * uitgerekt, dus het onderwerp hoort in het midden te staan.
 *
 * Alleen waar de twee kolommen naast elkaar staan. Daaronder valt de foto
 * boven de tekst en is "even hoog" betekenisloos: dan zou hij zich richten
 * naar een hoogte die er niet is en in elkaar zakken.
 *
 * Deze regels staan met opzet helemaal onderaan. Verderop in dit bestand
 * staan twee regels over foto's in paginablokken (.blokken en
 * .blokken--kader) die even zwaar wegen; wie als laatste komt, wint. Een
 * keuze die u per blok maakt hoort het te winnen van de algemene stand van
 * de pagina.
 */
@media (min-width: 1001px) {
    .feature--gelijk { align-items: stretch; }
    .feature--gelijk .feature__media { display: block; height: 100%; }

    .feature--gelijk .feature__media img {
        width: 100%; height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    /* Een filmpje houdt zijn eigen verhouding: 16 bij 9 uitrekken is geen optie. */
    .feature--gelijk .feature__media--film { display: flex; align-items: center; }

    /*
     * Dezelfde keuze bij de kop van een pagina.
     *
     * De kop is dezelfde tweedeling: tekst links, beeld rechts. Zonder deze
     * regel houdt het beeld zijn 3 bij 2 en staat het midden naast een kop
     * die langer is — net als bij de blokken eronder.
     *
     * Een video blijft buiten schot: die houdt de verhouding van het bestand
     * zelf en wordt niet uitgerekt naar de hoogte van de tekst.
     */
    .hero--gelijk .hero__layout { align-items: stretch; }
    .hero--gelijk .hero__visual { display: block; height: 100%; }

    .hero--gelijk .hero__visual img {
        width: 100%; height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .hero--gelijk .hero__visual video.hero__video,
    .hero--gelijk .hero__embed { align-self: center; }
}

/* ========================================= kop van een casus: video en breed */
/*
 * De kop van een casus kan nu hetzelfde als die van een pagina: een foto, een
 * eigen video of een ingesloten venster, naast de tekst of over de volle
 * breedte met de tekst eroverheen.
 *
 * Voor de brede indeling leent de casus de opmaak van .hero--vol, die daar al
 * voor bestaat. Hieronder alleen wat de casus eigen is: zijn tekstblok heet
 * anders en zijn titel is geen .hero__title.
 */
.casuskop__beeld video,
.casuskop__beeld .casuskop__embed,
.casuskop__beeld .embedslot,
.casuskop__beeld iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

/* Een video houdt de verhouding van het bestand zelf: anders wordt een breed
   of staand filmpje bijgesneden, en dat zie je meteen. */
.casuskop__beeld video.casuskop__video {
    aspect-ratio: auto;
    object-fit: contain;
    background: var(--mist);
    max-height: 70vh;
}

/* Zonder beeld hoeft de tekst niet in een halve kolom te blijven staan. */
.casuskop--breed { display: block; }
.casuskop--breed .casuskop__tekst h1,
.casuskop--breed .hero__lede { max-width: 60ch; }

/* ----------------------------------------- de brede indeling bij een casus */
.hero--casevol .casuskop { display: block; }
.hero--casevol .casuskop__tekst { position: relative; z-index: 2; max-width: 640px; }

/* Wit op het beeld. .hero--vol regelt dit al voor een pagina, maar daar heten
   de titel en de tekst anders dan hier. */
.hero--casevol .casuskop__tekst h1 { color: #fff; }
.hero--casevol .hero__lede { color: rgba(255, 255, 255, .88); }
.hero--casevol .case__datum { color: rgba(255, 255, 255, .72); }

/* Het beeld ís de kop: geen kader, geen ronding, geen vaste verhouding. */
.hero--casevol .casuskop__beeld video,
.hero--casevol .casuskop__beeld .casuskop__embed,
.hero--casevol .casuskop__beeld .embedslot,
.hero--casevol .casuskop__beeld iframe,
.hero--casevol .casuskop__beeld img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border: 0;
    border-radius: 0;
}