/*
Theme Name: Rijschool More
Theme URI:
Author: Roermedia.nl
Author URI: https://roermedia.nl
Description: Rijschool More - auto-rijschool in Roermond. Maatwerkthema met een donkere hero op antraciet met lime accent, witte kaarten, een schuifbare pakketreeks en een aanvraagformulier in stappen. Bricolage Grotesque / Sora / Inter. Respecteert prefers-reduced-motion.
Version: 1.3.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: rijschoolmore
*/

:root {
    /* Antraciet-basis */
    --anthracite: #293133;
    --anthracite-800: #20272a;
    --anthracite-900: #171d1f;
    --anthracite-950: #0f1416;
    /* Lime accent (vervangt Taxi Asya's kentekenblauw) */
    --lime: #a3e635;
    --lime-bright: #b7f24d;
    --lime-deep: #4d7c0f;        /* leesbaar accent op wit */
    --lime-glow: rgba(163, 230, 53, .5);
    /* Blauw, alleen voor bevestigingstekens. Dezelfde toon als het L-bord op
       de foto's, zodat het naast het lime niet als een vreemde kleur aanvoelt. */
    --blauw: #1c72d4;
    /* Neutraal */
    --ink: #0e1720;
    --cream: #eef2e6;
    --text: #f3f5f5;
    --text-muted: rgba(243, 245, 245, .64);
    --text-faint: rgba(243, 245, 245, .44);
    --body: #46505a;
    --muted: #6b7580;
    /* Glas */
    --glass: rgba(255, 255, 255, .055);
    --glass-border: rgba(255, 255, 255, .12);
    /* Licht */
    --bg: #ffffff;
    --bg-alt: #f5f6f3;
    --line: rgba(14, 23, 32, .08);
    --radius: 32px;
    --radius-card: 24px;
    --shadow-card: 0 14px 38px -18px rgba(14, 23, 32, .28), 0 2px 8px -4px rgba(14, 23, 32, .10);
    --shadow-card-lg: 0 30px 70px -30px rgba(14, 23, 32, .42), 0 2px 8px -4px rgba(14, 23, 32, .12);
    /* Unbounded voor koppen, cijfers, knoppen en menu (keuze CT 19-10-2026); lopende tekst blijft Inter. */
    --font-display: 'Unbounded', system-ui, sans-serif;
    --font-head: 'Unbounded', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --maxw: 1200px;
    --section-y: 104px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--font-body); background: var(--bg); color: var(--body); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lime-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-head); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-family: var(--font-display); }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { padding: var(--section-y) 0; position: relative; }
/* Voor een sectie die direct op de cijferstrip volgt. Die strip heeft geen
   eigen ondermarge, dus de volle sectiemarge werd één groot leeg vlak. */
.section--tight { padding-top: 58px; }
/* Voor een sectie waar direct een gekleurd vlak op volgt. De rand van dat vlak
   markeert de overgang al, dus de volle sectiemarge eronder is dubbelop: dat
   las als een gat in plaats van als adempauze. */
.section--kort { padding-bottom: 48px; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--anthracite-900); color: var(--text); }
.section--dark h2 { color: #fff; }

/* Ambient gloed op lichte secties */
/* De gloed liep tot precies de sectierand door. Volgt er een sectie met
   dezelfde witte achtergrond, dan zie je daar een harde horizontale lijn waar
   de gloed ophoudt. Het masker laat hem boven en onder uitdoven, zodat de
   overgang niet meer te zien is. */
.section--glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 100% 0%, rgba(163,230,53,.10), transparent 60%), radial-gradient(40% 60% at 0% 100%, rgba(163,230,53,.07), transparent 60%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.section > .container { position: relative; z-index: 1; }

/* Eyebrow + sectiekop */
.eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--lime-deep); margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--lime); }
.eyebrow__idx { color: var(--ink); font-variant-numeric: tabular-nums; }
.eyebrow--light { color: var(--lime); }
.eyebrow--light::before { background: var(--lime); }
.eyebrow--light .eyebrow__idx { color: #fff; }
/* Links uitgelijnd: gecentreerde koppen boven elke sectie geven een
   te uniform, machinaal ritme. */
.section__head { max-width: 700px; margin: 0 0 52px; text-align: left; }
/* Voor een langere kop die anders over drie regels breekt. */
.section__head--wide { max-width: 840px; }
.section__head h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.035em; line-height: 1.04; }
.section__head p { color: var(--muted); font-size: 1.1rem; line-height: 1.75; margin: 16px 0 0; max-width: 620px; }
.acc { position: relative; color: var(--lime-deep); }

/* ============================ KNOPPEN ============================ */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 100px; font-family: var(--font-body); font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: transform .16s ease, box-shadow .25s ease, background .25s ease; }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: linear-gradient(135deg, var(--lime-bright), var(--lime)); color: var(--anthracite-950); box-shadow: 0 16px 34px -12px var(--lime-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -14px var(--lime-glow), inset 0 1px 0 rgba(255,255,255,.5); text-decoration: none; }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--glass-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.12); text-decoration: none; }
/* De ghost-knop is gemaakt voor de donkere hero: witte tekst op glas. Op een
   witte sectie wordt hij daardoor onleesbaar. Deze variant houdt dezelfde
   vorm en hoogte, maar dan als witte tegel met inkt erop. */
.btn-ghost--licht { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost--licht:hover { background: #fff; border-color: var(--lime); box-shadow: var(--shadow-card-lg); }
.btn-dark { background: var(--anthracite-900); color: #fff; }
.btn-dark:hover { transform: translateY(-2px); background: var(--anthracite-800); text-decoration: none; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================ NAVBAR ============================ */
#rm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--lime); z-index: 1200; transition: width .12s linear; }
/* Boven het mobiele menu, zodat de sluitknop altijd bereikbaar blijft. */
/* De balk krimpt licht zodra je gaat scrollen. Alle bewegende maten delen
   dezelfde duur en curve, en het verschil is klein gehouden: een grote sprong
   vlak bij de bovenkant leest als een hapering, niet als een effect.
   motion.js schakelt pas boven 64px om en terug onder 24px, zodat de balk
   helemaal bovenaan stil blijft staan. */
.rm-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; padding: 16px 28px 0; transition: padding .28s cubic-bezier(.4,0,.2,1); }
.rm-header.is-scrolled { padding-top: 10px; }
body.admin-bar .rm-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .rm-header { top: 46px; } }
/* Drie losse elementen: logoplaat, menupil en knop. Geen omhullende balk. */
/* Gecentreerde cluster met vaste tussenruimte: geen space-between, want dat
   trekt de drie onderdelen over de volle containerbreedte uit elkaar. */
.rm-header__inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: stretch; justify-content: center; gap: 22px; }
.rm-header__cta { flex: 0 0 auto; gap: 12px; padding: 8px 8px 8px 26px; }
.cta-kort { display: none; }
.cta-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 100px; background: rgba(14, 23, 32, .16); transition: background .2s ease, transform .2s ease; }
.cta-arrow svg { width: 17px; height: 17px; }
.rm-header__cta:hover .cta-arrow { background: rgba(14, 23, 32, .26); transform: translateX(2px); }

/* Taalwisselaar */
.rm-lang { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; padding: 8px; border-radius: 100px; }
.rm-lang a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 100px; color: rgba(243,245,245,.76); font-family: var(--font-body); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; transition: background .2s ease, color .2s ease; }
.rm-lang a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.rm-lang a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.12); }
.rm-lang svg { flex: none; width: 21px; height: 21px; border-radius: 100px; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 2px 5px -2px rgba(0,0,0,.7); }
/* De wisselknop is er alleen voor smalle schermen. Let op de selector: met
   alleen .rm-lang__wissel verliest deze regel van .rm-lang a hierboven, en
   staan er op desktop drie vlaggen. */
.rm-lang a.rm-lang__wissel { display: none; }
/* Gedeelde glaspil voor menu en taalwisselaar */
.navbar, .rm-lang { background: rgba(18, 24, 26, .62); border: 1px solid rgba(255,255,255,.11); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 18px 40px -24px rgba(0,0,0,.85); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.rm-header.is-scrolled .navbar, .rm-header.is-scrolled .rm-lang { background: rgba(13, 18, 20, .94); border-color: rgba(255,255,255,.09); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 20px 44px -22px rgba(0,0,0,.8); }
.navbar { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 100px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
/* Menu-items nooit over twee regels. "Over ons" brak af, waardoor de balk een
   regel hoger werd en bij elke maatwissel zichtbaar versprong. */
.nav-links a { position: relative; padding: 11px 17px; border-radius: 100px; color: rgba(243,245,245,.8); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; transition: color .2s ease, background .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 17px; right: calc(100% - 17px); bottom: 7px; height: 2px; border-radius: 2px; background: var(--lime); transition: right .28s cubic-bezier(.4,0,.2,1); }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.nav-links a:hover::after { right: 17px; }
.nav-links a.is-current { color: #fff; background: rgba(255,255,255,.1); }
.nav-links a.is-current::after { right: 17px; background: var(--lime); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-phone { color: var(--text); font-weight: 600; font-size: 14.5px; }
.nav-phone:hover { color: var(--lime); text-decoration: none; }

/* Logo */
.rm-logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--text); }
.rm-logo:hover { text-decoration: none; }
.rm-logo { flex: 0 0 auto; }
.rm-logo picture { display: block; line-height: 0; }
.rm-logo__img { display: block; width: auto; max-width: none; height: 54px; transition: height .28s cubic-bezier(.4,0,.2,1); }
/* Witte pil achter het logo: het beeldmerk is ontworpen voor een lichte ondergrond */
.rm-logo--plate { padding: 9px 22px; border-radius: 100px; background: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px -16px rgba(0,0,0,.75); transition: padding .28s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, transform .25s ease; }
.rm-logo--plate:hover { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 38px -16px rgba(0,0,0,.85); transform: translateY(-1px); }
.rm-header.is-scrolled .rm-logo--plate { padding: 8px 20px; }
.rm-header.is-scrolled .rm-logo__img { height: 48px; }
.rm-logo--footer { padding: 12px 16px; border-radius: 18px; margin-bottom: 6px; }
.rm-logo--footer .rm-logo__img { height: 52px; }
/* SVG-fallback, alleen in beeld als de logobestanden ontbreken */
.rm-logo__word span { color: var(--lime); }
.rm-mark { flex: none; }
.rm-mark__tile { fill: var(--lime); }
.rm-mark__wheel { stroke: var(--anthracite-950); }
.rm-mark__hub { fill: var(--anthracite-950); }

/* ============================ HERO ============================ */
/* Foto van het daklicht met L-bord. De waas is links het zwaarst, waar de
   tekst staat, en laat rechts het beeld doorkomen. De achtergrondkleur blijft
   staan als vangnet mocht het bestand ontbreken. */
.hero { position: relative; overflow: hidden; isolation: isolate; background-color: var(--anthracite-950);
    background-image:
        radial-gradient(58% 52% at 90% -8%, rgba(163,230,53,.16) 0%, transparent 56%),
        linear-gradient(101deg, rgba(11,15,17,.92) 0%, rgba(11,15,17,.80) 34%, rgba(11,15,17,.44) 66%, rgba(11,15,17,.60) 100%),
        url('assets/img/hero-straat-1600.webp');
    background-size: cover; background-position: center 45%; background-repeat: no-repeat; }
@media (max-width: 1300px) {
    .hero { background-image:
        radial-gradient(58% 52% at 90% -8%, rgba(163,230,53,.16) 0%, transparent 56%),
        linear-gradient(101deg, rgba(11,15,17,.92) 0%, rgba(11,15,17,.80) 34%, rgba(11,15,17,.44) 66%, rgba(11,15,17,.60) 100%),
        url('assets/img/hero-straat-1000.webp'); }
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, transparent 52%, rgba(9,12,14,.72) 100%); }
.hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
@media (max-width: 900px) {
    .hero { background-image:
        radial-gradient(58% 52% at 90% -8%, rgba(163,230,53,.16) 0%, transparent 56%),
        linear-gradient(180deg, rgba(11,15,17,.90) 0%, rgba(11,15,17,.80) 45%, rgba(11,15,17,.92) 100%),
        url('assets/img/hero-straat-mobiel-1200.webp');
        /* Op een smal, hoog scherm wordt de foto op hoogte geschaald en is er
           geen verticale speling; alleen horizontaal valt er te schuiven. Op
           52% staat het daklicht net links van het midden. */
        background-position: 52% center; }
}
/* Ruimere bovenmarge, zodat het daklicht boven de H1 vrij in beeld komt. */
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 160px 28px 88px; }
/* Bovenaan uitlijnen, niet centreren. De formulierkaart wordt hoger naarmate
   de bezoeker verder komt; met centreren schoof de kop links bij elke stap een
   stukje mee. Nu blijft alles staan en groeit alleen de kaart naar beneden. */
.hero__grid { display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: start; }
/* Rasteritems mogen niet groeien naar de min-content van hun inhoud. Zonder
   dit duwt de pakketrij (vier kaarten naast elkaar) de 1fr-kolom op mobiel
   breder dan het scherm, waardoor de kop rechts wegviel. */
.hero__copy, .hero__showcase { min-width: 0; }
.hero__copy { max-width: 640px; }
.hero h1 { color: var(--text); font-size: clamp(42px, 5.4vw, 78px); line-height: 1.03; font-weight: 800; letter-spacing: -0.03em; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
/* Onderstreping onder "Roermond". Met line-height 1.03 was er te weinig plek:
   de streep raakte de stokken van de regel eronder (d, k, t). Daarom krijgt
   alleen de regel mét de streep wat extra ruimte (inline-block + marge), zodat
   de kop verder even strak blijft. De streep staat vanaf de bovenkant in em,
   dus hij schaalt mee met de koptekst op elk scherm. */
.hero h1 .accent { position: relative; white-space: nowrap; display: inline-block; margin-bottom: .12em; }
.hero h1 .accent::after { content: ""; position: absolute; left: 1px; right: 1px; top: .98em; height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--lime) 0%, var(--lime-bright) 60%, var(--cream) 100%); box-shadow: 0 8px 22px -6px var(--lime-glow); }
.hero__lead { margin-top: 26px; font-size: 18px; line-height: 1.66; color: rgba(243,245,245,.8); max-width: 480px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.hero .cta-row { margin-top: 34px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.trust li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: rgba(243,245,245,.9); background: rgba(255,255,255,.05); border: 1px solid var(--glass-border); padding: 9px 16px 9px 12px; border-radius: 100px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--lime); }

/* ---- Aanvraagformulier in de hero --------------------------------------
   Dezelfde vragen als het formulier onderaan de pagina, maar een maat
   compacter: deze kaart moet binnen het herobeeld passen naast de kop. De
   vragen komen één voor één, zodat de kaart nooit hoger wordt dan nodig. */
/* Limerand met een zachte ring eromheen. Een kale witte kaart op de donkere
   foto werd één groot wit vlak; de rand geeft hem een omlijsting in de
   huisstijlkleur zonder dat het formulier zelf druk wordt. */
.heroform { position: relative; background: #fff; border: 1.5px solid rgba(163,230,53,.85); border-radius: 22px; padding: 22px 22px 0; box-shadow: 0 0 0 4px rgba(163,230,53,.16), 0 30px 70px -28px rgba(0,0,0,.78); }
/* Donkere tegel in plaats van nog een limepil: de kaart heeft al een limerand,
   een limebadge en een limestrook, en een vierde lime vlak eronder viel weg in
   de rest. Donker met een kloppend limestipje leest als "nu beschikbaar" en
   sluit aan op de donkere menubalk erboven. */
.heroform__tag { position: absolute; top: -14px; right: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 100px; background: linear-gradient(135deg, var(--anthracite-800), var(--anthracite-950)); border: 1px solid rgba(255,255,255,.14); color: #fff; font-family: var(--font-body); font-size: 11.5px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 12px 26px -10px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.16); }
/* Dezelfde auto als in het onderwerp van de aanvraagmails, zodat het formulier
   en de bevestiging die erop volgt hetzelfde teken dragen. Het zetje vooruit
   is klein met opzet: het moet opvallen zonder te gaan dansen. */
.heroform__tag__auto { flex: none; font-size: 14px; line-height: 1; animation: rm-tagauto 3.2s ease-in-out infinite; }
@keyframes rm-tagauto {
    0%, 62%, 100% { transform: translateX(0); }
    76%           { transform: translateX(2.5px); }
}
/* Blauw vinkje: een gevuld "geverifieerd"-teken leest als een bevestigde
   belofte, waar een groen lijnvinkje op een groene pil juist wegvalt. De tekst
   gaat mee naar inkt, zodat het blauw het enige accent in de pil is. */
.heroform__badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 8px; border-radius: 100px; background: color-mix(in srgb, var(--lime) 20%, #fff); color: var(--ink); font-size: 11.5px; font-weight: 800; }
.heroform__badge svg { width: 15px; height: 15px; flex: none; color: var(--blauw); }
.heroform__titel { margin: 11px 0 0; color: var(--ink); font-family: var(--font-head); font-size: 1.44rem; line-height: 1.14; letter-spacing: -0.025em; font-weight: 800; }
.heroform__sub { margin: 7px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
/* Eigen strook onderaan, tot in de hoeken van de kaart. Breekt het witte vlak
   en geeft het telefoonnummer een plek in plaats van dat het onder het
   formulier bungelt. De negatieve marges trekken hem door de kaartpadding heen. */
.heroform__voet { margin: 15px -22px 0; padding: 11px 22px; border-top: 1px solid color-mix(in srgb, var(--lime) 38%, #fff); border-radius: 0 0 20px 20px; background: color-mix(in srgb, var(--lime) 9%, #fff); color: var(--muted); font-size: .82rem; text-align: center; }
.heroform__voet a { color: var(--lime-deep); font-weight: 700; text-decoration: none; white-space: nowrap; }
.heroform__voet a:hover { text-decoration: underline; }
/* Contact Form 7 verstuurt via JavaScript. Staat dat uit, dan is de kaart een
   dood formulier; dan verwijzen we naar het formulier onderaan de pagina. */
.heroform__nojs { display: none; margin: 16px 0 0; }
.heroform__nojs .btn { width: 100%; justify-content: center; }
html:not(.js) .heroform__nojs { display: block; }

/* Hero showcase (glas) */

.hero__showcase { position: relative; }
/* Zachter dan voorheen: achter een witte kaart werd de limegloed een groene
   rand langs de randen in plaats van een gloed. */
.hero__showcase .halo { position: absolute; inset: -10% -10% -14% -10%; z-index: -1; background: radial-gradient(circle at 50% 45%, rgba(163,230,53,.30) 0%, rgba(163,230,53,.14) 38%, rgba(163,230,53,.04) 60%, transparent 76%); filter: blur(14px); animation: rm-pulse 6s ease-in-out infinite; }
.showcase { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--glass-border); border-radius: 26px; padding: 16px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.1); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.showcase:hover { transform: translateY(-6px); box-shadow: 0 55px 100px -35px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.16); }
.showcase__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 0; margin-bottom: 12px; }
.showcase__lbl { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.showcase__badge { font-size: 12px; font-weight: 700; color: var(--anthracite-950); background: var(--lime); padding: 4px 10px; border-radius: 100px; }
.showcase__stage { position: relative; height: 300px; border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); display: grid; place-items: center; }
.showcase__wheel { width: 72%; height: auto; color: var(--lime); filter: drop-shadow(0 18px 40px rgba(0,0,0,.5)); animation: rm-spin 26s linear infinite; }
.showcase__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 4px; }
.showcase__stat { color: var(--text); font-weight: 700; font-size: 14px; }
.showcase__stat span { color: var(--lime); }
.showcase__stars { color: #ffcb45; letter-spacing: 1px; font-size: 14px; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
@keyframes rm-pulse { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* ============================ GLAS-KAARTEN ============================ */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* De veeghint hoort alleen bij de smalle weergave; daar wordt hij zichtbaar. */
.veeghint { display: none; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-card); transition: transform .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-lg); }
.card h3 { color: var(--ink); font-size: 1.22rem; margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); }
.ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 18px; color: var(--anthracite-950); background: linear-gradient(150deg, var(--lime-bright), var(--lime)); box-shadow: 0 8px 20px -10px var(--lime-glow); transition: transform .22s ease; }
.card:hover .ico { transform: scale(1.06) rotate(-4deg); }
.card__price { color: var(--lime-deep); font-weight: 800; font-size: 1.05rem; margin-top: 14px; font-family: var(--font-head); }

/* ============================ LESPAKKETTEN ============================ */
.pkg { position: relative; display: flex; flex-direction: column; padding: 26px 24px; }
.pkg--pop { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(163,230,53,.2), var(--shadow-card-lg); }
.pkg--pop:hover { box-shadow: 0 0 0 3px rgba(163,230,53,.28), var(--shadow-card-lg); }
.pkg__badge { position: absolute; top: -12px; right: 16px; padding: 6px 13px; border-radius: 100px; background: linear-gradient(135deg, var(--lime-bright), var(--lime)); color: var(--anthracite-950); font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px -10px var(--lime-glow); }
.pkg h3 { font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.pkg__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.95rem, 2.6vw, 2.35rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.pkg__unit { color: var(--muted); font-size: .93rem; margin-top: 7px; }
.pkg__list { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; }
.pkg__list li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: .94rem; line-height: 1.42; }
.pkg__list svg { flex: none; width: 17px; height: 17px; color: var(--lime-deep); margin-top: 2px; }
.pkg__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-family: var(--font-body); font-weight: 700; font-size: .93rem; color: var(--lime-deep); }
.pkg__cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.pkg__cta:hover { text-decoration: none; }
.pkg:hover .pkg__cta svg { transform: translateX(4px); }

/* Losse lessen en aanvullende tarieven: echte tabel, geen kaartjes */
.rates { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.rates table { width: 100%; border-collapse: collapse; }
.rates table + table { border-left: 1px solid var(--line); }
.rates th, .rates td { text-align: left; padding: 14px 24px; }
.rates thead th { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.rates th.num, .rates td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rates tbody td { border-bottom: 1px solid var(--line); transition: background .18s ease; }
.rates tbody tr:last-child td { border-bottom: none; }
.rates tbody tr:hover td { background: color-mix(in srgb, var(--lime) 7%, #fff); }
.rates__name { color: var(--ink); font-weight: 700; font-size: 1rem; }
.rates__meta { display: block; color: var(--muted); font-weight: 500; font-size: .87rem; margin-top: 3px; }
.rates__amount { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink); }
/* "Gratis" in groen: het is de enige prijs die een voordeel is, geen bedrag.
   Lime-deep en niet de felle lime, want die is op wit niet leesbaar. */
.rates__amount--gratis { color: var(--lime-deep); }
.rates__foot { margin: 20px 0 0; max-width: 820px; color: var(--muted); font-size: .87rem; line-height: 1.75; }
.rates__foot a { color: var(--lime-deep); font-weight: 700; }

/* ============================ TYPOGRAFISCHE BAND ============================ */
.band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(66px, 8vw, 118px) 0; background-color: var(--anthracite-950); background-image: radial-gradient(72% 62% at 88% -4%, rgba(163,230,53,.17) 0%, transparent 58%), radial-gradient(52% 60% at -6% 100%, rgba(163,230,53,.07) 0%, transparent 62%), linear-gradient(101deg, var(--anthracite-900) 0%, var(--anthracite-950) 60%); }
.band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.band > .container { position: relative; z-index: 2; }
/* Variant met echte foto: <img> in plaats van een CSS-achtergrond, zodat de
   foto een alt-tekst en een srcset heeft en dus meetelt voor afbeeldingzoeken. */
.band--foto { background-image: none; padding: clamp(88px, 10vw, 152px) 0; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
/* Drie lagen over de foto: een lichte limegloed rechtsboven zoals in de hero,
   het schuine verloop dat de tekst links leesbaar houdt, en een voet die de
   overgang naar de volgende sectie dempt. */
.band--foto::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
    radial-gradient(58% 54% at 88% 4%, rgba(163,230,53,.13) 0%, transparent 60%),
    linear-gradient(100deg, rgba(11,15,17,.94) 0%, rgba(11,15,17,.86) 32%, rgba(11,15,17,.62) 56%, rgba(11,15,17,.66) 100%),
    linear-gradient(to bottom, rgba(9,12,14,.34) 0%, transparent 32%, transparent 72%, rgba(9,12,14,.62) 100%); }
@media (max-width: 900px) {
    .band--foto::before { background: linear-gradient(180deg, rgba(11,15,17,.90) 0%, rgba(11,15,17,.80) 45%, rgba(11,15,17,.94) 100%); }
    .band__media img { object-position: center 55%; }
}
.band__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: end; }

/* ---- Cijferband ---------------------------------------------------------
   Compacter dan de werkgebiedband en met een zwaar filter over de foto: het
   beeld is hier textuur, geen onderwerp. De twee kolommen staan op ooghoogte
   en de rechterkolom hangt aan een limelijntje, zodat de tekst niet los in de
   ruimte zweeft zoals eerst. */
.band--cijfer { padding: clamp(48px, 5.4vw, 76px) 0; }
.band--cijfer::before { background:
    radial-gradient(50% 60% at 92% 0%, rgba(163,230,53,.10) 0%, transparent 62%),
    linear-gradient(100deg, rgba(9,12,14,.90) 0%, rgba(9,12,14,.82) 45%, rgba(9,12,14,.72) 100%),
    linear-gradient(to bottom, rgba(9,12,14,.45) 0%, transparent 38%, transparent 64%, rgba(9,12,14,.66) 100%); }
.band--cijfer .band__grid { grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: center; }
.band--cijfer h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.14; }
.band--cijfer .band__cite { margin-top: 16px; }
.band--cijfer .band__grid > div:last-child { border-left: 2px solid var(--lime); padding-left: 26px; }
.band--cijfer .band__grid > div:last-child p { margin: 0; font-size: 1rem; line-height: 1.75; }
/* Bij de fotoband staat rechts een paneel, geen losse regel tekst: dat hoort
   op ooghoogte met de kop, niet uitgelijnd op de onderkant. */
.band--foto .band__grid { grid-template-columns: 1.15fr 1fr; align-items: center; }
.band h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.85rem, 4.2vw, 3.05rem); letter-spacing: -0.035em; line-height: 1.06; }
.band h2 em { font-style: normal; color: var(--lime); }
.band p { color: rgba(243,245,245,.76); margin: 20px 0 0; font-size: 1.05rem; line-height: 1.78; max-width: 520px; }
.band__cite { margin-top: 22px; font-size: .84rem; color: var(--text-faint); }

/* Lesgebied als redactionele index: een kopregel met een limelijn eronder en
   de plaatsnamen in twee kolommen, gescheiden door haarlijnen. Geen kaart en
   geen pillen — die legden een dek over de foto en lieten de namen los
   zweven. Zo blijft het beeld heel en leest het als een register. */
/* Breedte expliciet: een auto-marge op een rasteritem laat het anders naar de
   inhoud krimpen, en dan brak "Sint Odiliënberg" over twee regels. */
.gebied { width: 100%; max-width: 430px; margin-left: auto; }
.gebied__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 2px; padding-bottom: 13px; border-bottom: 2px solid var(--lime); }
.gebied__label { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.gebied__label svg { flex: none; color: var(--lime); transform: translateY(-1px); }
.gebied__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
.gebied__list li { padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.17); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.015em; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
/* Het register is geen uitputtende lijst; deze laatste regel maakt dat zichtbaar. */
.gebied__list .gebied__meer { color: rgba(255,255,255,.62); font-style: italic; font-weight: 600; }
.gebied__note { margin: 14px 0 0; color: rgba(255,255,255,.68); font-size: .88rem; line-height: 1.6; text-shadow: 0 2px 12px rgba(0,0,0,.7); }

/* ============================ CIJFERSTRIP ============================ */
.statstrip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.statstrip > div { padding: 32px 30px; border-right: 1px solid var(--line); }
.statstrip > div:last-child { border-right: none; }
.statstrip__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.3vw, 2.8rem); line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.statstrip__lbl { margin-top: 12px; font-weight: 700; color: var(--ink); font-size: .96rem; }
.statstrip__sub { margin-top: 3px; color: var(--muted); font-size: .86rem; }

/* ============================ FEITENCHIPS ============================ */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px -5px rgba(14,23,32,.2); }
.chips svg { width: 15px; height: 15px; color: var(--lime-deep); flex: none; }

/* Redactioneel tweekolomsblok */
.split { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 60px; row-gap: 38px; align-items: start; }
/* De rechterkolom draagt de feitenkaart én de punten. Stonden die punten los
   over de volle breedte eronder, dan bleef er naast de tekst een leeg vak
   staan ter hoogte van een halve kolom. */
.split__zij { display: grid; gap: 18px; margin-top: 40px; }
.split__zij .chips { margin: 0; }
.split__body h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -0.035em; line-height: 1.04; }
.split__body h2 + p { margin-top: 22px; }
.split__body p { color: var(--body); font-size: 1.04rem; line-height: 1.82; margin: 0 0 18px; }
.factcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.factcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.factcard__row:last-child { border-bottom: none; }
.factcard__k { color: var(--muted); font-size: .92rem; }
.factcard__v { color: var(--ink); font-weight: 700; font-family: var(--font-head); text-align: right; }

/* ============================ ZWEVENDE KNOPPEN ============================ */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
.fab a { width: 54px; height: 54px; border-radius: 100px; display: grid; place-items: center; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); transition: transform .2s ease, box-shadow .2s ease; }
.fab a:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -16px rgba(0,0,0,.8); text-decoration: none; }
.fab svg { width: 24px; height: 24px; }
.fab__wa { background: #25d366; color: #fff; }
.fab__tel { background: var(--lime); color: var(--anthracite-950); }

/* ============================ MOBIEL MENU ============================ */
.rm-burger { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 62px; border-radius: 100px; background: rgba(18,24,26,.62); border: 1px solid rgba(255,255,255,.11); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 1px 0 rgba(255,255,255,.09) inset, 0 18px 40px -24px rgba(0,0,0,.85); cursor: pointer; padding: 0; }
.rm-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: background .2s ease; }
.rm-burger span::before, .rm-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s ease; }
.rm-burger span::before { top: -6px; }
.rm-burger span::after { top: 6px; }
.rm-burger[aria-expanded="true"] span { background: transparent; }
.rm-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.rm-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.mobmenu { position: fixed; inset: 0; z-index: 1050; padding: 124px 28px 40px; background: rgba(10,14,16,.96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; overflow-y: auto; }
.mobmenu.is-open { opacity: 1; visibility: visible; }
/* Alleen de menu-items krijgen de grote displayletter. Stond dit op elke <a>
   in het paneel, dan kreeg de knop eronder dezelfde 38 pixels mee en paste de
   tekst niet meer in de pil. */
.mobmenu nav a { display: block; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 8vw, 2.4rem); letter-spacing: -0.03em; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.mobmenu nav a:hover { color: var(--lime); text-decoration: none; }
.mobmenu__cta { margin-top: 30px; }
.mobmenu__cta .btn { width: 100%; justify-content: center; padding: 17px 24px; font-size: 1.02rem; }
body.rm-lock { overflow: hidden; }

/* ============================ VEELGESTELDE VRAGEN ============================ */
/* Twee onafhankelijke stapels naast elkaar, geen rasterrijen: zo blijft de
   rechterkolom staan waar hij staat als je links een vraag openklapt. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; align-items: start; }
.faq__col { align-self: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 0; cursor: pointer; list-style: none; transition: color .2s ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item h3 { display: inline; color: var(--ink); font-size: 1.03rem; line-height: 1.45; margin: 0; transition: color .2s ease; }
.faq__item summary:hover h3 { color: var(--lime-deep); }
.faq__item summary:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 10px; }

.faq__teken { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 100px; background: var(--bg-alt); border: 1px solid var(--line); transition: background .22s ease, border-color .22s ease; }
.faq__teken::before, .faq__teken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .22s ease, background .22s ease; }
.faq__teken::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__teken { background: var(--lime); border-color: var(--lime); }
.faq__item[open] .faq__teken::before, .faq__item[open] .faq__teken::after { background: var(--anthracite-950); }
.faq__item[open] .faq__teken::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq__antwoord { padding: 0 42px 22px 0; }
.faq__antwoord p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.78; }
.faq__item[open] .faq__antwoord { animation: rm-faq-open .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rm-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .faq__item[open] .faq__antwoord { animation: none; }
    .faq__teken, .faq__teken::before, .faq__teken::after { transition: none; }
}

/* Werkwijze */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* De lijn loopt van het midden van cirkel 1 tot het midden van cirkel 4. Met
   een percentage (9%) klopte dat niet: de cirkels staan links in hun kolom, dus
   de lijn stak er rechts ruim honderd pixels voorbij. Een kolom is
   (100% - 3 x 22px) / 4 breed en de cirkel is 48px, dus het midden ligt op
   24px vanaf de kolomrand. */
.steps::before { content: ""; position: absolute; top: 24px; left: 24px; right: calc((100% - 66px) / 4 - 24px); height: 2px; background: repeating-linear-gradient(to right, var(--lime) 0 14px, transparent 14px 28px); transform-origin: left; transition: transform 1.1s ease; }
.step { position: relative; z-index: 1; }
.step__num { width: 48px; height: 48px; border-radius: 100px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; color: var(--anthracite-950); background: linear-gradient(150deg, var(--lime-bright), var(--lime)); margin-bottom: 16px; box-shadow: 0 0 0 6px var(--bg), 0 10px 22px -12px var(--lime-glow); }
.section--alt .step__num { box-shadow: 0 0 0 6px var(--bg-alt), 0 10px 22px -12px var(--lime-glow); }
.step h3 { color: var(--ink); font-size: 1.15rem; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: .97rem; }

/* Cijfers (donker + count-up) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; color: var(--lime); letter-spacing: -0.03em; line-height: 1; }
.stat__lbl { color: rgba(243,245,245,.72); font-size: 1.02rem; margin-top: 10px; }

/* Geslaagden */
.case { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-card); transition: transform .22s ease, box-shadow .22s ease; }
.case:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-lg); }
.case__img { aspect-ratio: 16/11; background: linear-gradient(150deg, color-mix(in srgb, var(--lime) 34%, #fff), color-mix(in srgb, var(--anthracite) 14%, #fff)); display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: .9rem; }
.case__body { padding: 20px 22px; }
.case__tag { color: var(--lime-deep); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.case__body h3 { color: var(--ink); font-size: 1.05rem; margin: 4px 0 0; }
.case__body p { margin: 6px 0 0; color: var(--muted); font-size: .95rem; }


/* Over */
.about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: center; }
.about__media { aspect-ratio: 4/3; border-radius: var(--radius); background: linear-gradient(150deg, color-mix(in srgb, var(--lime) 30%, #fff), color-mix(in srgb, var(--anthracite) 16%, #fff)); box-shadow: var(--shadow-card-lg); position: relative; overflow: hidden; }
.about__media::after { content: ""; position: absolute; inset: 24px; border-radius: 18px; background: rgba(255,255,255,.5); }

/* Contact */
.cta-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); padding: clamp(44px, 6vw, 78px); text-align: center; background: linear-gradient(150deg, var(--anthracite-800), var(--anthracite-950)); color: #fff; box-shadow: var(--shadow-card-lg); }
/* Foto als textuur in de tegel: donker op donker. De waas is in het midden het
   zwaarst, want daar staat de tekst, en laat de randen doorkomen. */
.cta-card__media { position: absolute; inset: 0; z-index: 0; }
.cta-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
    radial-gradient(80% 78% at 50% 52%, rgba(9,12,14,.93) 0%, rgba(9,12,14,.88) 42%, rgba(9,12,14,.72) 100%),
    radial-gradient(620px 320px at 82% -20%, rgba(163,230,53,.26), transparent 60%); }
/* De foto is bewust uitgezonderd: die hoort onder de waas te blijven liggen. */
.cta-card > *:not(.cta-card__media) { position: relative; z-index: 2; }
.cta-card h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.cta-card p { color: rgba(255,255,255,.84); max-width: 560px; margin: 14px auto 26px; font-size: 1.12rem; }

/* Contactkaarten: echte links met een zichtbare klikbaarheid. */
.contactkaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px auto 0; max-width: 900px; text-align: left; }
/* ---- Aanvraagformulier (Contact Form 7) --------------------------------
   Wit paneel op de donkere tegel. De stappen zijn gewone fieldsets; motion.js
   toont er één tegelijk. Zonder JavaScript staan ze onder elkaar en werkt het
   formulier onveranderd. */
.aanvraag { max-width: 620px; margin: 32px auto 0; text-align: left; background: #fff; border-radius: 24px; padding: 26px 26px 24px; box-shadow: 0 26px 60px -30px rgba(0,0,0,.9); }
.aanvraag form { margin: 0; }
/* De tegel eromheen zet alle <p> op wit, gecentreerd en 1.12rem. Binnen het
   witte paneel moet dat allemaal terug naar normaal, anders staat er witte
   tekst op een witte ondergrond. */
.aanvraag p { max-width: none; margin: 0; color: var(--ink); font-size: 1rem; text-align: left; }

/* Genummerde stappen. De balk wordt door motion.js gevuld, want het aantal
   stappen hangt af van wat er gekozen is. */
/* De rij loopt over de volle breedte: de lijntjes rekken mee, de bolletjes niet. */
.wiz__stappen { display: flex; align-items: center; gap: 0; width: 100%; }
.wiz__stip { appearance: none; flex: none; width: 32px; height: 32px; border-radius: 100px; border: 2px solid var(--line); background: #fff; color: var(--muted); font-family: var(--font-body); font-weight: 800; font-size: 13px; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; transition: background .22s ease, border-color .22s ease, color .22s ease; }
.wiz__lijn { flex: 1 1 auto; min-width: 16px; height: 2px; margin: 0 10px; border-radius: 2px; background: var(--line); transition: background .3s ease; }
.wiz__lijn.is-klaar { background: var(--lime); }
.wiz__stip.is-klaar { border-color: var(--lime); background: var(--lime); color: var(--anthracite-950); }
.wiz__stip.is-nu { border-color: var(--lime); background: #fff; color: var(--ink); box-shadow: 0 0 0 4px rgba(163,230,53,.25); }
.wiz__stip[disabled] { cursor: default; }
.wiz__stip:not([disabled]):hover { border-color: var(--lime); }
.wiz__stip:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
/* Boven de cijfers, zodat meteen duidelijk is waar die bolletjes voor staan. */
.aanvraag .wiz__teller { margin: 0 0 12px; color: var(--ink); font-family: var(--font-head); font-size: .92rem; font-weight: 700; letter-spacing: -0.01em; }
.wiz__stap { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.wiz__stap[hidden] { display: none; }
.wiz__vraag { padding: 0; margin: 0 0 16px; color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; line-height: 1.3; }

/* Keuzekaarten: de radio zelf is verborgen, het label is de knop. */
.wiz__stap .wpcf7-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wiz__stap .wpcf7-list-item { margin: 0; }
.wiz__stap .wpcf7-list-item label { display: flex; align-items: center; gap: 9px; height: 100%; padding: 11px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.35; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.wiz__stap .wpcf7-list-item label:hover { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 7%, #fff); transform: translateY(-2px); }
.wiz__stap .wpcf7-list-item input[type="radio"],
.wiz__stap .wpcf7-list-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin: 0; border-radius: 100px; border: 2px solid var(--line); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
.wiz__stap .wpcf7-list-item label:has(input:checked) { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, #fff); box-shadow: 0 0 0 3px rgba(163,230,53,.22); }
.wiz__stap .wpcf7-list-item input[type="radio"]:checked,
.wiz__stap .wpcf7-list-item input[type="checkbox"]:checked { border-color: var(--lime-deep); box-shadow: inset 0 0 0 4px var(--lime); }
.wiz__stap .wpcf7-list-item input[type="radio"]:focus-visible,
.wiz__stap .wpcf7-list-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
/* De eerste stap heeft vier keuzes. Vier smalle kolommen naast elkaar drukken
   de labels tegen de rand; twee bij twee houdt de tegels leesbaar en het blok
   even hoog. */
[data-wiz-naam="Aanvraag"] .wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) {
    [data-wiz-naam="Aanvraag"] .wpcf7-radio { grid-template-columns: 1fr; }
}
/* De pakketstap heeft vijf keuzes. Twee kolommen in plaats van vier: de tegels
   worden breder, maar het label past dan op één regel, en daardoor is het
   blok als geheel juist lager. "Weet ik nog niet" pakt de hele onderste rij. */
[data-wiz-naam="Pakket"] .wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-wiz-naam="Pakket"] .wpcf7-list-item.last { grid-column: 1 / -1; }
@media (max-width: 520px) {
    [data-wiz-naam="Pakket"] .wpcf7-radio { grid-template-columns: 1fr; }
}

/* Tekstvelden */
.wiz__velden { display: grid; gap: 11px; }
.wiz__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wiz__rij--adres { grid-template-columns: 1.4fr 1fr; }
.aanvraag .wiz__hint { margin: 2px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.aanvraag .wiz__hint--goed { color: var(--lime-deep); font-weight: 600; }
.aanvraag .wiz__hint--fout { color: #b42318; }
/* Toelichting bij taxi rijles, vlak boven de verstuurknop. Bewust neutraal
   grijs en geen groen: het is informatie, geen bevestiging. */
.aanvraag .wiz__hint--taxi { margin: 14px 0 0; padding: 12px 15px; border-radius: 12px; background: var(--bg-alt); border: 1px solid var(--line); color: var(--body); font-size: .86rem; }
.aanvraag .wiz__hint--taxi[hidden] { display: none; }
/* Het adresveld wordt door het script gevuld en gaat mee in de mail, maar
   staat niet in beeld: de bevestigingsregel eronder is waar de bezoeker
   controleert of het klopt. */
.aanvraag .wpcf7-form-control-wrap[data-name="adres"] { display: none; }
/* De gevonden straat en plaats, als bevestiging onder postcode en huisnummer. */
.aanvraag .wiz__hint--goed { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--lime) 12%, #fff); border: 1px solid rgba(163,230,53,.5); color: var(--ink); font-weight: 600; }
.aanvraag .wiz__hint--goed::before { content: "✓"; flex: none; color: var(--lime-deep); font-weight: 800; }
@media (max-width: 520px) {
    .wiz__rij { grid-template-columns: 1fr; }
    .wiz__rij--adres { grid-template-columns: 1.4fr 1fr; }
    /* De donkere tegel nam op een telefoon 44px aan padding aan elke kant; het
       formulier hield daardoor nog geen 180px over en de knoprij liep eruit. */
    .cta-card { padding: 34px 18px 30px; }
    .aanvraag { padding: 20px 18px 18px; }
    /* Knoppen onder elkaar, met de verstuurknop bovenaan en over de volle
       breedte: naast elkaar passen ze hier simpelweg niet. */
    .wiz__acties { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .aanvraag .wpcf7-submit { margin-left: 0; width: 100%; }
    .wiz__terug { text-align: center; }
}
.aanvraag .wpcf7-form-control-wrap { display: block; }
.aanvraag input[type="text"], .aanvraag input[type="tel"], .aanvraag input[type="email"] { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: var(--font-body); font-size: .98rem; transition: border-color .18s ease, box-shadow .18s ease; }
.aanvraag input::placeholder { color: color-mix(in srgb, var(--muted) 78%, #fff); }
.aanvraag input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(163,230,53,.22); }

/* Knoppenrij onderin elke stap */
.wiz__acties { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.wiz__terug { appearance: none; background: none; border: 0; padding: 10px 6px; color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: .9rem; white-space: nowrap; cursor: pointer; border-radius: 10px; }
.wiz__terug:hover { color: var(--ink); }
.wiz__terug:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.aanvraag .wpcf7-submit { margin-left: auto; appearance: none; border: 0; cursor: pointer; padding: 14px 26px; border-radius: 100px; background: linear-gradient(135deg, var(--lime-bright), var(--lime)); color: var(--anthracite-950); font-family: var(--font-body); font-weight: 800; font-size: .96rem; box-shadow: 0 14px 30px -14px var(--lime-glow); transition: transform .18s ease, box-shadow .18s ease; }
.aanvraag .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px var(--lime-glow); }
.aanvraag .wpcf7-submit:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }

/* Meldingen van CF7.
   De kleur moet hier expliciet: de donkere tegel eromheen zet color op #fff,
   en dan stond de melding wit op het witte paneel — een leeg oranje kader. */
.aanvraag .wpcf7-response-output { margin: 16px 0 0 !important; padding: 12px 16px !important; border-radius: 12px !important; border-width: 1px !important; font-size: .92rem; color: var(--ink); background: var(--bg-alt); }
.aanvraag form.invalid .wpcf7-response-output,
.aanvraag form.unaccepted .wpcf7-response-output { color: #7a2a1f; background: #fdf3f2; }
.aanvraag form.failed .wpcf7-response-output,
.aanvraag form.aborted .wpcf7-response-output { color: #7a2a1f; background: #fdf3f2; }
.aanvraag form.sent .wpcf7-response-output { color: #2f5d0a; background: color-mix(in srgb, var(--lime) 14%, #fff); border-color: var(--lime) !important; }
.aanvraag .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: #b42318; font-size: .84rem; }
.aanvraag .wpcf7-spinner { margin: 0 0 0 10px; }
.aanvraag input.wpcf7-not-valid { border-color: #e0796f; }

html:not(.js) .aanvraag--hero { display: none; }
/* De witte kaart eromheen levert de achtergrond al, dus het formulier zelf is
   hier alleen nog inhoud. */
/* Haarlijn tussen de pitch en de vragen: zonder scheiding liep de ondertitel
   zo over in de stappenteller en leek het één lange lap tekst. */
.aanvraag--hero { max-width: none; margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid color-mix(in srgb, var(--lime) 38%, #fff); border-radius: 0; background: none; box-shadow: none; }
.aanvraag--hero .wiz__teller { margin: 0 0 9px; font-size: .84rem; }
.aanvraag--hero .wiz__stip { width: 26px; height: 26px; font-size: 12px; }
.aanvraag--hero .wiz__stip.is-nu { box-shadow: 0 0 0 3px rgba(163,230,53,.25); }
.aanvraag--hero .wiz__lijn { margin: 0 7px; }
.aanvraag--hero .wiz__stap { margin-top: 15px; }
.aanvraag--hero .wiz__vraag { font-size: 1.01rem; margin-bottom: 11px; }
.aanvraag--hero .wpcf7-radio { gap: 8px; }
.aanvraag--hero .wpcf7-list-item label { padding: 9px 12px; border-radius: 11px; font-size: .85rem; gap: 8px; }
.aanvraag--hero .wpcf7-list-item input[type="radio"],
.aanvraag--hero .wpcf7-list-item input[type="checkbox"] { width: 15px; height: 15px; }
.aanvraag--hero .wiz__velden { gap: 7px; }
.aanvraag--hero input[type="text"], .aanvraag--hero input[type="tel"], .aanvraag--hero input[type="email"] { padding: 9px 13px; border-radius: 12px; font-size: .92rem; }
.aanvraag--hero [data-wiz-naam="Pakket"] .wpcf7-radio { gap: 7px; }
.aanvraag--hero [data-wiz-naam="Pakket"] .wpcf7-list-item label { padding: 8px 11px; }
.aanvraag--hero .wiz__acties { margin-top: 12px; }
.aanvraag--hero .wpcf7-submit { padding: 12px 22px; font-size: .9rem; }
.aanvraag--hero .wiz__hint--taxi { margin-top: 10px; padding: 9px 12px; font-size: .79rem; }
.aanvraag--hero .wiz__hint { font-size: .79rem; }
.aanvraag--hero .wpcf7-response-output { margin-top: 12px !important; padding: 10px 13px !important; font-size: .85rem; }
@media (max-width: 520px) {
    /* De herokaart is breder dan de contacttegel onderaan de pagina: daar
       passen deze vier tegels nog wel twee naast elkaar. Onder elkaar maakte
       het de hero ruim honderd pixels langer zonder dat het beter leest. */
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-list-item label { padding: 8px 10px; font-size: .82rem; gap: 7px; }
    /* Het nummer staat al onder de kaart én in de zwevende belknop. Drie keer
       hetzelfde nummer binnen één scherm is er een te veel. */
    .hero .cta-row .btn--tel { display: none; }
}

.cta-card__of { margin: 30px 0 0; color: rgba(255,255,255,.62); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
    .wiz__vulling { transition: none; }
    .wiz__stap .wpcf7-list-item label:hover { transform: none; }
    .aanvraag .wpcf7-submit:hover { transform: none; }
    .heroform__tag__auto { animation: none; }
}

/* Witte tegels, geen glas: de kaart eronder is al glas op foto, en nog een
   laag doorschijnendheid maakt het troebel in plaats van rustig. Wit geeft
   bovendien het meeste contrast op de donkere achtergrond. */
.contactkaart { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid transparent; color: var(--ink); text-decoration: none; box-shadow: 0 10px 26px -18px rgba(0,0,0,.8); transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.contactkaart:hover { border-color: var(--lime); transform: translateY(-3px); box-shadow: 0 22px 40px -20px rgba(0,0,0,.85); text-decoration: none; }
.contactkaart:active { transform: translateY(-1px); }
.contactkaart:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
/* Wit glyph vraagt om een donker vlak eronder: wit op lime haalt maar 1,5:1
   aan contrast en verdwijnt dan zo goed als. Op antraciet is het 18:1. */
.contactkaart__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(150deg, var(--anthracite-800), var(--anthracite-950)); color: #fff; box-shadow: 0 8px 18px -12px rgba(14,23,32,.7); transition: transform .22s ease, box-shadow .22s ease; }
.contactkaart:hover .contactkaart__ico { box-shadow: 0 10px 22px -12px var(--lime-glow); }
.contactkaart:hover .contactkaart__ico { transform: scale(1.05) rotate(-3deg); }
.contactkaart__tekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.contactkaart__tekst strong { font-family: var(--font-head); font-size: .95rem; color: var(--ink); }
.contactkaart__tekst span { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contactkaart__pijl { flex: none; margin-left: auto; color: var(--muted); transition: transform .22s ease, color .22s ease; }
.contactkaart:hover .contactkaart__pijl { color: var(--lime-deep); transform: translateX(4px); }

.cta-card__gebied { display: inline-flex; align-items: center; gap: 8px; margin: 24px 0 0; color: rgba(255,255,255,.6); font-size: .88rem; }
.cta-card__gebied svg { color: var(--lime); flex: none; }

@media (prefers-reduced-motion: reduce) {
    .contactkaart, .contactkaart__ico, .contactkaart__pijl { transition: none; }
    .contactkaart:hover { transform: none; }
    .contactkaart:hover .contactkaart__ico { transform: none; }
    .contactkaart:hover .contactkaart__pijl { transform: none; }
}

/* Placeholder-melding */
.note { margin-top: 42px; text-align: center; font-size: .85rem; color: var(--muted); background: color-mix(in srgb, var(--lime) 9%, #fff); border: 1px dashed var(--line); border-radius: 14px; padding: 12px 16px; }
.section--dark .note { color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }

/* Footer */
.rm-footer { background: var(--anthracite-950); color: var(--text-muted); padding: 64px 0 40px; }
.rm-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.rm-footer h4 { color: #fff; font-family: var(--font-head); font-size: .95rem; letter-spacing: .04em; margin-bottom: 16px; }
.rm-footer a { color: var(--text-muted); }
.rm-footer a:hover { color: var(--lime); }
.rm-footer__tag { color: var(--text-muted); margin-top: 14px; max-width: 320px; font-size: .95rem; }
/* Eén zin per regel; zie footer.php. */
.rm-footer__zin { display: block; text-wrap: balance; }
.rm-footer__bar { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .88rem; color: var(--text-faint); }
.rm-footer__reg { margin-top: 16px; font-size: .85rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rm-todo { color: rgba(163,230,53,.65); font-style: italic; }

/* Alleen voor schermlezers */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============================ REVEALS ============================ */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-group > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js .reveal-group.is-visible > *:nth-child(1) { transition-delay: .05s; }
.js .reveal-group.is-visible > *:nth-child(2) { transition-delay: .12s; }
.js .reveal-group.is-visible > *:nth-child(3) { transition-delay: .19s; }
.js .reveal-group.is-visible > *:nth-child(4) { transition-delay: .26s; }
.js .reveal-group.is-visible > *:nth-child(5) { transition-delay: .33s; }
.js .reveal-group.is-visible > *:nth-child(6) { transition-delay: .40s; }
.js .steps::before { transform: scaleX(0); }
.js .steps.is-visible::before { transform: scaleX(1); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1240px) {
    .rm-header { padding-left: 18px; padding-right: 18px; }
    .rm-header__inner { gap: 12px; }
    .rm-logo__img { height: 48px; }
    .rm-logo--plate { padding: 8px 18px; }
    .navbar { padding: 7px 9px; }
    .nav-links a { padding: 10px 13px; font-size: 14px; }
    .nav-links a::after { left: 13px; right: calc(100% - 13px); }
    .nav-links a:hover::after, .nav-links a.is-current::after { right: 13px; }
    .rm-lang { padding: 7px; }
    .rm-lang a { padding: 8px 12px; font-size: 13px; }
    .rm-header__cta { padding: 7px 7px 7px 20px; font-size: 14px; gap: 10px; }
    .cta-arrow { width: 32px; height: 32px; }
}
/* Onder deze breedte past logo + vijf menu-items + taalkeuze + knop niet meer
   naast elkaar zonder af te breken. Liever het hamburgermenu dan een balk die
   twee regels hoog wordt. */
@media (max-width: 1120px) {
    .navbar { display: none; }
    .rm-burger { display: inline-flex; }
}
@media (max-width: 1000px) {
    .hero__grid { grid-template-columns: 1fr; gap: 44px; }
    .hero__showcase { max-width: 440px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .steps::before { display: none; }
    .about, .split { grid-template-columns: 1fr; gap: 40px; }
    .split__zij { margin-top: 0; }
    /* Tarieven onder elkaar; de scheiding wordt dan een lijn bovenaan. */
    .rates { grid-template-columns: 1fr; }
    .rates table + table { border-left: 0; border-top: 1px solid var(--line); }
    /* Ook de fotoband naar één kolom. Die heeft een eigen, specifiekere regel
       hierboven, dus zonder deze eigen override bleef hij tweekoloms staan en
       liepen de plaatsnamen uit hun kolom. */
    .contactkaarten { grid-template-columns: 1fr; max-width: 420px; }
    .band__grid, .band--foto .band__grid, .band--cijfer .band__grid { grid-template-columns: 1fr; gap: 34px; align-items: start; }
    .band--cijfer .band__grid > div:last-child { border-left: 0; border-top: 2px solid var(--lime); padding-left: 0; padding-top: 20px; }
    .gebied { max-width: none; margin-left: 0; }
    .statstrip { grid-template-columns: repeat(2, 1fr); }
    .statstrip > div:nth-child(2n) { border-right: none; }
    .statstrip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    /* Logo met tagline over de volle breedte, Menu en Gegevens daaronder
       naast elkaar. Zonder de span belandt Gegevens in de eerste kolom van
       een tweede rij en staat het alsnog onder Menu. */
    .rm-footer__grid { grid-template-columns: 1fr 1fr; }
    .rm-footer__grid > div:first-child { grid-column: 1 / -1; }
    /* Eén stapel; de tweede kolom sluit naadloos aan, dus geen dubbele lijn. */
    .faq { grid-template-columns: 1fr; gap: 0; }
    .faq__col + .faq__col .faq__item:first-child { border-top: 0; }
}
@media (max-width: 620px) {
    :root { --section-y: 68px; }
    .rm-header__inner { justify-content: space-between; gap: 10px; }
    .rm-header__cta { padding: 13px 18px; font-size: 14px; gap: 0; }
    .cta-lang, .cta-arrow { display: none; }
    .cta-kort { display: inline; }
    /* Alleen de taal waar je naartoe kunt, en zonder tekstlabel */
    /* Eén vlag: die van de taal waarin je nu leest. Erop tikken schakelt om,
       waarna de andere vlag verschijnt. Voorheen stond hier de vlag van de
       ándere taal, wat verwarrend las: je zag Engels terwijl je Nederlands las. */
    .rm-lang { padding: 5px; }
    .rm-lang > a[hreflang]:not(.rm-lang__wissel) { display: none; }
    .rm-lang a.rm-lang__wissel { display: inline-flex; align-items: center; padding: 9px; border-radius: 100px; }
    .rm-lang a.rm-lang__wissel:hover { background: rgba(255,255,255,.07); }
    .rm-lang a.rm-lang__wissel:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
    .rm-logo--header .rm-logo__img,
    .rm-header.is-scrolled .rm-logo--header .rm-logo__img { height: 40px; }
    .rm-logo--header.rm-logo--plate,
    .rm-header.is-scrolled .rm-logo--header.rm-logo--plate { padding: 8px 16px; border-radius: 100px; }
    .rm-logo--footer { padding: 10px 14px; }
    .rm-logo--footer .rm-logo__img { height: 44px; }
    .hero__inner { padding: 108px 22px 66px; }
    .stats, .steps { grid-template-columns: 1fr; }

    /* Stappen naast het nummer in plaats van eronder. Het cijfer spant beide
       regels, zodat kop en tekst er als één blok naast staan; dat scheelt per
       stap een hele regelhoogte en het leest als een lijst. */
    .steps { gap: 16px; }
    .step { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; row-gap: 3px; align-items: start; }
    .step__num { grid-row: span 2; width: 42px; height: 42px; margin-bottom: 0; font-size: .98rem; }
    .step h3 { margin-bottom: 0; font-size: 1.06rem; line-height: 1.3; align-self: center; }
    .step p { font-size: .93rem; line-height: 1.6; }

    /* Kaartrijen die je horizontaal veegt in plaats van onder elkaar zet.
       De volgende kaart steekt bewust een stukje in beeld — dat is het
       duidelijkste signaal dat er meer naast staat, duidelijker dan welk
       pijltje ook. De rij loopt door tot de schermranden, dus de negatieve
       marge heft de containerpadding op. */
    .veegrij { display: flex; grid-template-columns: none; gap: 14px;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
        margin: 0 -22px; padding: 18px 22px 10px; overscroll-behavior-x: contain; }
    .veegrij::-webkit-scrollbar { display: none; }
    .veegrij > * { flex: 0 0 78%; scroll-snap-align: center; scroll-snap-stop: always; }
    .veeghint { display: flex; align-items: center; justify-content: flex-end; gap: 7px;
        margin: 0 0 -6px; color: var(--muted); font-family: var(--font-body);
        font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .veeghint svg { color: var(--lime-deep); animation: rm-wenk 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .veeghint svg { animation: none; } }
@keyframes rm-wenk { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } }
    /* Vier cijfers naast elkaar in plaats van onder elkaar: dat scheelt op een
       telefoon zo'n 400 pixels. De toelichtingsregel eronder valt weg — op deze
       breedte is het cijfer met zijn label genoeg, en de bron van het laatste
       cijfer staat ook in de FAQ. */
    .statstrip { grid-template-columns: repeat(4, 1fr); }
    .statstrip > div { border-right: 1px solid var(--line); border-bottom: none; padding: 18px 8px; text-align: center; }
    .statstrip > div:nth-child(2n) { border-right: 1px solid var(--line); }
    .statstrip > div:last-child { border-right: none; }
    .statstrip__num { font-size: 1.7rem; }
    .statstrip__lbl { margin-top: 6px; font-size: .74rem; line-height: 1.3; letter-spacing: -0.005em; }
    .statstrip__sub { display: none; }
    /* Ook op een telefoon Menu en Gegevens naast elkaar; onder elkaar werd de
       footer onnodig lang. */
    /* Menu krijgt wat het nodig heeft, Gegevens de rest: het e-mailadres is
       het langste stuk tekst en moet heel blijven. */
    .rm-footer__grid { grid-template-columns: auto 1fr; gap: 30px 22px; margin-bottom: 30px; }
    .rm-footer__grid > div:first-child { grid-column: 1 / -1; }
    .rm-footer__reg { margin-top: 14px; }
    .rates th, .rates td { padding: 15px 18px; }
    .rates thead th { font-size: 10.5px; letter-spacing: .08em; }
    .fab { right: 14px; bottom: 14px; }
    .fab a { width: 48px; height: 48px; }
    .fab svg { width: 21px; height: 21px; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal, .js .reveal-group > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .steps::before, .js .steps.is-visible::before { transform: scaleX(1) !important; }
    .showcase__wheel, .hero__showcase .halo { animation: none !important; }
}
/* ===== Unbounded (keuze CT 19-10-2026) =====
   Unbounded is een breed lettertype; de koppen zijn daarom ongeveer een vijfde kleiner gezet dan met Sora,
   zodat ze even veel ruimte innemen. Knoppen en menu krijgen hetzelfde lettertype, lopende tekst blijft Inter. */
h1, h2, h3, h4 { letter-spacing: -0.02em; }
.hero h1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -0.025em; }
.section__head h2, .split__body h2 { font-size: clamp(1.6rem, 3.4vw, 2.45rem); letter-spacing: -0.025em; line-height: 1.1; }
.band h2 { font-size: clamp(1.5rem, 3.3vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.1; }
.band--cijfer h2 { font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.2; }
.cta-card h2 { font-size: clamp(1.55rem, 3.2vw, 2.3rem); }
.pkg__price { font-size: clamp(1.6rem, 2.1vw, 1.9rem); letter-spacing: -0.03em; }
.statstrip__num { font-size: clamp(1.7rem, 2.7vw, 2.3rem); letter-spacing: -0.03em; }
.stat__num { font-size: clamp(2.1rem, 4vw, 3rem); }
.mobmenu nav a { font-size: clamp(1.35rem, 6.4vw, 1.9rem); letter-spacing: -0.02em; }
.heroform__titel { font-size: 1.22rem; letter-spacing: -0.02em; }
.btn, .rm-header__cta, .aanvraag .wpcf7-submit, .pkg__cta { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.nav-links a { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }
/* Smalle telefoons met het bredere lettertype: kopbalk, lesgebied en voet binnen het scherm houden. */
@media (max-width: 400px) {
    .rm-header { padding-left: 12px; padding-right: 12px; }
    .rm-header__inner { gap: 6px; }
    .rm-logo--header .rm-logo__img,
    .rm-header.is-scrolled .rm-logo--header .rm-logo__img { height: 34px; }
    .rm-logo--header.rm-logo--plate,
    .rm-header.is-scrolled .rm-logo--header.rm-logo--plate { padding: 7px 12px; }
    .rm-burger { width: 50px; }
    .rm-header__cta { padding: 12px 14px; font-size: 13px; }
    .gebied__list { grid-template-columns: minmax(0, 1fr); }
    .rm-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .rm-footer__grid > div:first-child { grid-column: auto; }
    .rm-footer a, .contactkaart__tekst span, .gebied__list li { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
    .rm-lang { display: none; }
    .hero .cta-row .btn { font-size: 13px; padding: 14px 18px; }
}
/* ===== Hero: groen en witte knopteksten (wens CT 19-10-2026) ===== */
/* Kop iets minder dik (wens CT 19-10). */
.hero h1 { font-weight: 700; }
/* "Roermond" in de kop groen. Eronder een routelijn die eindigt in een open rondje, als de bestemming op een kaart
   (wens CT 19-10; afgekeurd: dikke balk met gloed, swoosh, streepjeslijn, markeerstift). De lijn tekent zich in
   zodra de kop inloopt, daarna veert het rondje erbij (niet bij "minder beweging"). */
.hero h1 .accent { color: var(--lime); margin-bottom: .1em; }
.hero h1 .accent::after { left: .04em; right: .36em; top: 1.03em; height: .065em; min-height: 3px; border-radius: 99px; box-shadow: none;
    background: var(--lime);
    clip-path: inset(0 0 0 0); animation: rm-swoosh .8s cubic-bezier(.65, 0, .35, 1) .5s both; }
.hero h1 .accent::before { content: ""; position: absolute; right: .1em; top: calc(1.03em + .0325em); width: .22em; height: .22em; box-sizing: border-box;
    border: .065em solid var(--lime); border-radius: 50%; translate: 0 -50%; animation: rm-stip .45s cubic-bezier(.34, 1.56, .64, 1) 1.25s both; }
/* Met de inloopanimatie: pas tekenen zodra de kop zichtbaar wordt. */
.js .hero h1.reveal .accent::after { animation: none; clip-path: inset(0 100% 0 0); }
.js .hero h1.reveal .accent::before { animation: none; scale: 0; }
.js .hero h1.reveal.is-visible .accent::after { animation: rm-swoosh .8s cubic-bezier(.65, 0, .35, 1) .45s both; }
.js .hero h1.reveal.is-visible .accent::before { animation: rm-stip .45s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
@keyframes rm-swoosh { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rm-stip { from { scale: 0; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hero h1 .accent::after, .js .hero h1.reveal .accent::after { animation: none !important; clip-path: none !important; }
    .hero h1 .accent::before, .js .hero h1.reveal .accent::before { animation: none !important; scale: 1 !important; }
}

/* "aanvraag" in de formuliertitel groen. Op de witte kaart is lime onleesbaar, daarom het donkerdere merkgroen. */
.heroform__titel .groen { color: var(--lime-deep); }
/* Groene knoppen ("Bekijk prijzen en pakketten", "Proefles aanvragen"): witte tekst op hetzelfde lime als
   "Roermond" (wens CT 19-10), effen zonder gloed of glans. */
.btn-primary { background: var(--lime); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #97d92b; color: #fff; box-shadow: none; }

/* ===== Wegknop: lesauto op een golvende autoweg (wens CT 19-10-2026, naar de zonknop van BatterijDock) =====
   Kopbalkknop "Proefles aanvragen" en heroknop "Bekijk prijzen en pakketten". Witte tekst links op groen dat naar
   onderen dieper wordt; rechts het auto-icoon uit het formulier dat naar links over een golvende weg rijdt, met een L-bord in de hoek.
   Weg en heuvels schuiven rustig door en de auto deint mee op de golven.
   Markup: rijmore_wegdecor() in functions.php. */
.btn.btn--weg {
    --rm-auto: 38px;
    position: relative;
    isolation: isolate;
    padding-right: calc(var(--rm-auto) + 26px);
    border: 1px solid rgba(214, 248, 150, .8);
    background: #5a9e12;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -8px rgba(90, 158, 18, .7);
}
.btn.btn--weg:hover { background: #5a9e12; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 28px -8px rgba(90, 158, 18, .8); }
.btn__tekst { position: relative; z-index: 2; text-shadow: 0 1px 2px rgba(22, 60, 0, .5); }
.rm-weg {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(180deg, #a3e635 0%, #79c11f 40%, #5a9e12 72%, #4a870b 100%);
    pointer-events: none;
}
/* Heuvels en weg zijn 200% breed en schuiven 50% op, zodat ze naadloos doorlopen. */
.btn .rm-weg__heuvel { position: absolute; left: 0; bottom: 20%; width: 200%; max-width: none; height: 30%; fill: rgba(214, 248, 150, .38); }
.btn .rm-weg__baan { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 38%; overflow: visible; }
.rm-weg__asfalt { fill: rgba(23, 44, 10, .55); }
.rm-weg__rand { fill: none; stroke: rgba(214, 248, 150, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rm-weg__streep { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2px; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; }
/* Rondje met een witte schuine pijl (wens CT 19-10, in plaats van de auto), rechts in de knop boven de weg. */
.btn .rm-weg__pijl {
    position: absolute;
    right: 11px;
    top: 50%;
    display: grid;
    place-items: center;
    width: var(--rm-auto);
    height: var(--rm-auto);
    margin-top: calc(var(--rm-auto) / -2);
    border-radius: 50%;
    background: #3f7a0a;
    border: 1.5px solid rgba(214, 248, 150, .75);
    color: #fff;
    box-shadow: 0 3px 8px -2px rgba(15, 35, 5, .5);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s ease;
}
.btn .rm-weg__pijl svg { width: 46%; height: 46%; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.btn--weg:hover .rm-weg__pijl { background: #356a07; transform: scale(1.06); }
.btn--weg:hover .rm-weg__pijl svg { transform: translate(2px, -2px); }
/* Klein L-bord rechtsboven aan het rondje, in het blauw van het echte lesbord. */
.rm-weg__l {
    position: absolute;
    top: -5px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: var(--blauw);
    color: #fff;
    font: 800 9px/1 var(--font-body);
    box-shadow: 0 1px 3px rgba(15, 35, 5, .35);
}
@media (prefers-reduced-motion: no-preference) {
    .rm-weg__heuvel { animation: rm-weg-schuif 16s linear infinite; }
    .rm-weg__baan { animation: rm-weg-schuif 6s linear infinite; }
    .btn--weg:hover .rm-weg__baan { animation-duration: 3.5s; }
}
/* De pijl wijst vooruit, dus de weg schuift naar links onder je door. */
@keyframes rm-weg-schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Kopbalk: compacter rondje. */
.rm-header__cta.btn--weg { --rm-auto: 36px; padding: 15px calc(var(--rm-auto) + 24px) 15px 24px; }
@media (max-width: 1100px) { .rm-header__cta.btn--weg { --rm-auto: 34px; padding: 13px calc(var(--rm-auto) + 22px) 13px 18px; } }
@media (max-width: 620px) { .rm-header__cta.btn--weg { --rm-auto: 30px; padding: 13px calc(var(--rm-auto) + 20px) 13px 14px; } .rm-header__cta.btn--weg .rm-weg__pijl { right: 9px; } }
@media (max-width: 400px) { .rm-header__cta.btn--weg { --rm-auto: 28px; padding: 12px calc(var(--rm-auto) + 13px) 12px 12px; } .rm-header__cta.btn--weg .rm-weg__pijl { right: 6px; } }
/* Heroknop op de telefoon: tekst op één regel houden. */
.hero .cta-row .btn--weg { white-space: nowrap; }
@media (max-width: 620px) { .hero .cta-row .btn--weg { --rm-auto: 34px; font-size: 14px; padding: 17px calc(var(--rm-auto) + 24px) 17px 20px; } }
@media (max-width: 400px) { .hero .cta-row .btn--weg { --rm-auto: 32px; font-size: 13px; padding: 16px calc(var(--rm-auto) + 22px) 16px 16px; } .hero .cta-row .btn--weg .rm-weg__pijl { right: 10px; } }
@media (max-width: 360px) { .hero .cta-row .btn--weg { --rm-auto: 30px; font-size: 12.5px; padding: 16px calc(var(--rm-auto) + 20px) 16px 13px; } .hero .cta-row .btn--weg .rm-weg__pijl { right: 9px; } }

/* ===== Formulierkaart in de hero groter (wens CT 19-10) ===== */
.hero__grid { grid-template-columns: 1fr 490px; gap: 48px; }
.heroform { padding: 26px 26px 0; }
.heroform__voet { margin: 18px -26px 0; padding: 13px 26px; font-size: .88rem; }
.heroform__titel { font-size: 1.42rem; }
.heroform__sub { font-size: .92rem; }
.aanvraag--hero .wiz__teller { font-size: .9rem; }
.aanvraag--hero .wiz__stip { width: 28px; height: 28px; font-size: 12.5px; }
.aanvraag--hero .wiz__vraag { font-size: 1.12rem; margin-bottom: 13px; }
/* "aanmelden" in de eerste vraag groen, net als "aanvraag" in de titel. */
.wiz__vraag .groen { color: var(--lime-deep); }
.aanvraag--hero .wpcf7-radio { gap: 10px; }
.aanvraag--hero .wpcf7-list-item label { padding: 12px 14px; font-size: .93rem; }
.aanvraag--hero input[type="text"], .aanvraag--hero input[type="tel"], .aanvraag--hero input[type="email"] { padding: 11px 14px; font-size: .96rem; }
.aanvraag--hero .wpcf7-submit { padding: 13px 24px; font-size: .95rem; }
@media (max-width: 1120px) { .hero__grid { grid-template-columns: 1fr 450px; gap: 36px; } }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; gap: 44px; } .hero__showcase { max-width: 520px; } }
@media (max-width: 520px) {
    .heroform { padding: 22px 18px 0; }
    .heroform__voet { margin: 15px -18px 0; padding: 11px 18px; }
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-list-item label { padding: 10px 11px; font-size: .86rem; }
}

/* ===== Social proof in het heroformulier (wens CT 19-10) =====
   Voorletters van echte leerlingen, Google met vijf sterren (zonder cijfer, wens CT) en "... gingen je voor". Data: rijmore_bedrijf(). */
/* Als tag onder de proefles-badge (wens CT 19-10): wit vlak met limerand en groene schaduw, zodat hij opvalt. */
.rm-bewijs { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 16px 8px 8px; border-radius: 18px; background: #fff; border: 1.5px solid var(--lime); box-shadow: 0 0 0 4px rgba(163, 230, 53, .14), 0 12px 24px -12px rgba(77, 124, 15, .55); }
.rm-bewijs__gezichten { display: flex; flex: none; }
.rm-bewijs__gezichten span { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; background: var(--lime-deep); color: #fff; font: 700 12px/1 var(--font-display); box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .35); }
.rm-bewijs__gezichten span:first-child { margin-left: 0; }
.rm-bewijs__gezichten span:nth-child(2) { background: var(--blauw); }
.rm-bewijs__gezichten .rm-bewijs__meer { background: var(--anthracite-900); font-size: 14px; }
.rm-bewijs__tekst { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rm-bewijs__score { display: inline-flex; align-items: center; gap: 6px; }
.rm-bewijs__g { flex: none; width: 15px; height: 15px; }
.rm-bewijs__sterren { display: inline-flex; gap: 1px; color: #fbbc04; }
.rm-bewijs__sterren svg { width: 15px; height: 15px; fill: currentColor; }
.rm-bewijs__namen { color: var(--ink); font-size: .84rem; font-weight: 600; line-height: 1.3; }
.rm-bewijs + .heroform__titel { margin-top: 15px; }
@media (max-width: 520px) { .rm-bewijs { padding-right: 13px; } }

/* ===== Belknop in de hero: telefoon in een wit rondje (wens CT 19-10) ===== */
.hero .btn--tel { gap: 12px; padding: 8px 24px 8px 8px; }
.btn--tel__rond { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--anthracite-950); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45); transition: transform .45s var(--veer); }
.btn--tel__rond svg { width: 18px; height: 18px; }
.btn--tel:hover .btn--tel__rond { transform: rotate(-12deg) scale(1.06); }

/* ===== Taalkeuze NL / EN in de menupil, zoals BatterijDock (wens CT 19-10) =====
   Segmentknop met wereldbolletje en een witte duim die naar de gekozen taal glijdt; geen vlaggen meer. */
:root { --veer: cubic-bezier(.34, 1.56, .64, 1); }
.rm-taal { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; margin-left: 8px; padding: 3px 3px 3px 28px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.rm-taal__wereld { position: absolute; left: 9px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: rgba(243, 245, 245, .6); }
.rm-taal__duim { position: absolute; top: 3px; bottom: 3px; left: 28px; width: 38px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35), inset 0 1px 0 #fff; transition: transform .45s var(--veer); }
.rm-taal[data-actief="en"] .rm-taal__duim { transform: translateX(100%); }
/* Iets naar de andere taal schuiven bij hover, zoals een iOS-schakelaar. */
.rm-taal[data-actief="nl"]:has(.rm-taal__optie:not(.is-actief):hover) .rm-taal__duim { transform: translateX(14%); }
.rm-taal[data-actief="en"]:has(.rm-taal__optie:not(.is-actief):hover) .rm-taal__duim { transform: translateX(86%); }
.rm-taal__optie { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: 999px; color: rgba(243, 245, 245, .72); font: 600 12.5px/1 var(--font-display); letter-spacing: .04em; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .2s, transform .3s var(--veer); }
.rm-taal__optie.is-actief { color: var(--ink); cursor: default; }
.rm-taal__optie:not(.is-actief):hover { color: #fff; text-decoration: none; }
.rm-taal__optie:not(.is-actief):active { transform: scale(.9); }
.rm-taal__optie:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* In het mobiele menu: onder de links, iets groter. */
.rm-taal--mobiel { margin: 26px 0 0; padding-left: 30px; }
.rm-taal--mobiel .rm-taal__optie { width: 46px; height: 38px; font-size: 13.5px; }
.rm-taal--mobiel .rm-taal__duim { left: 30px; width: 46px; }

/* ===== Interactie met iOS-gevoel, zoals BatterijDock (wens CT 19-10) =====
   Knoppen veren omhoog bij hover en veren in bij klikken, met een glans die de muis volgt (motion.js zet
   --mx / --my). In de menupil glijdt een glazen vlakje mee onder de muis. Iconen veren in bij een tik. */
.btn { position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: background-color .2s, border-color .2s, color .2s, box-shadow .3s, transform .45s var(--veer); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: scale(.96); transition-duration: .12s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .32), transparent 62%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.btn:hover::after { opacity: 1; }
.nav-links { position: relative; }
.nav-links a { z-index: 1; transition: color .2s ease, background .2s ease, transform .3s var(--veer); }
.nav-links a::after { display: none; }
.nav-links a:active { transform: scale(.95); }
.nav-links.heeft-glans a:hover { background: transparent; }
.nav-glans { position: absolute; top: 0; left: 0; height: 100%; width: var(--gw, 0); border-radius: 100px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); opacity: 0; transform: translateX(var(--gx, 0)); transition: transform .45s var(--veer), width .45s var(--veer), opacity .25s; pointer-events: none; }
.nav-links.is-actief .nav-glans { opacity: 1; }
.fab a { -webkit-tap-highlight-color: transparent; transition: transform .45s var(--veer), box-shadow .3s; }
.fab a:hover { transform: translateY(-2px) scale(1.05); }
.fab a:active { transform: scale(.92); transition-duration: .12s; }
.rm-burger { -webkit-tap-highlight-color: transparent; transition: transform .3s var(--veer), background .2s; }
.rm-burger:active { transform: scale(.92); }
.contactkaart:active { transform: scale(.97); transition-duration: .12s; }
.wiz__stap .wpcf7-list-item label:active { transform: scale(.97); transition-duration: .12s; }
.aanvraag .wpcf7-submit { transition: transform .45s var(--veer), box-shadow .3s; }
.aanvraag .wpcf7-submit:active { transform: scale(.96); transition-duration: .12s; }
.wiz__terug:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) {
    .btn, .nav-glans, .rm-taal__duim, .fab a, .btn--tel__rond { transition: none; }
}
/* Middelgrote schermen: zonder wereldbolletje, zodat menu, taalkeuze en proeflesknop naast elkaar passen. */
@media (max-width: 1240px) {
    .navbar .rm-taal { margin-left: 4px; padding-left: 3px; }
    .navbar .rm-taal__wereld { display: none; }
    .navbar .rm-taal__duim { left: 3px; }
}

/* ===== Keuzetegels in het formulier duidelijker klikbaar (wens CT 19-10) =====
   Een tegel kiezen springt meteen door naar de volgende stap. Daarom: een licht vlak met diepte in plaats van wit
   op wit, een duidelijker rondje en rechts een pijltje in een cirkel dat bij hover lime wordt. De pijltjes geven
   kort na het laden twee keer een duwtje (niet bij "minder beweging"). */
.wiz__stap .wpcf7-list-item label { position: relative; background: #f6f8f3; border-color: #dbe2d2; box-shadow: inset 0 1px 0 #fff, 0 3px 8px -5px rgba(23, 29, 31, .3); cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .3s, transform .4s var(--veer); }
.wiz__stap .wpcf7-list-item label::after { content: ""; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; border: 1px solid #dbe2d2;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171d1f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
    transition: background-color .2s, border-color .2s, transform .4s var(--veer); }
.wiz__stap .wpcf7-list-item input[type="radio"],
.wiz__stap .wpcf7-list-item input[type="checkbox"] { border-color: #b4bfa9; }
.wiz__stap .wpcf7-list-item label:hover { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 10%, #fff); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -10px rgba(77, 124, 15, .45); }
.wiz__stap .wpcf7-list-item label:hover::after { background-color: var(--lime); border-color: var(--lime); transform: translateX(2px); }
.wiz__stap .wpcf7-list-item label:hover input[type="radio"],
.wiz__stap .wpcf7-list-item label:hover input[type="checkbox"] { border-color: var(--lime-deep); }
.wiz__stap .wpcf7-list-item label:has(input:checked)::after { background-color: var(--lime); border-color: var(--lime); }
.aanvraag--hero .wpcf7-list-item label::after { width: 20px; height: 20px; background-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
    .wiz__stap:first-of-type .wpcf7-list-item label::after { animation: rm-duwtje .9s var(--veer) 1.6s 2; }
}
@keyframes rm-duwtje { 0%, 100% { translate: 0 0; } 45% { translate: 3px 0; } }
/* Heel smalle telefoons: pijltje en binnenruimte kleiner, zodat "Lespakket" naast het pijltje past. */
@media (max-width: 360px) {
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-list-item label { padding: 10px 8px 10px 9px; gap: 6px; }
    .aanvraag--hero .wpcf7-list-item label::after { width: 17px; height: 17px; background-size: 9px; }
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-list-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
    .aanvraag--hero [data-wiz-naam="Aanvraag"] .wpcf7-list-item label { padding-left: 12px; }
}

/* ===== Laatste stap van het formulier: velden als nette tegels (wens CT 19-10) =====
   Zelfde licht vlak en rand als de keuzetegels, met links een klein icoon per veld. Bij focus wordt het veld wit
   met een limerand. De verzendknop is groen zoals de wegknoppen, met een pijl in een rondje. */
.aanvraag .wiz__velden input:is([type="text"], [type="tel"], [type="email"]) {
    padding-left: 48px; border-color: #dbe2d2; background-color: #f6f8f3;
    /* Icoon in een wit rondje met een dunne rand (wens CT 19-10); het icoon zelf komt per veld uit --icoon. */
    background-image: var(--icoon, none), radial-gradient(circle, #fff 0 12.5px, #d6ddcc 13px 13.6px, transparent 14px);
    background-repeat: no-repeat; background-position: 14.5px 50%, 8px 50%; background-size: 15px, 28px 28px;
    box-shadow: inset 0 1px 2px rgba(23, 29, 31, .05);
    transition: border-color .2s, background-color .2s, box-shadow .25s;
}
.aanvraag .wiz__velden input:is([type="text"], [type="tel"], [type="email"]):hover { border-color: #c3ceb6; }
.aanvraag .wiz__velden input:is([type="text"], [type="tel"], [type="email"]):focus { background-color: #fff; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(163, 230, 53, .22); }
.aanvraag .wiz__velden input[name="naam"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.6-3.6 4.5-5.3 8-5.3s6.4 1.7 8 5.3'/%3E%3C/svg%3E"); }
.aanvraag .wiz__velden input[name="telefoon"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.3l1.7 4.3-2.2 1.4a11 11 0 0 0 7 7l1.4-2.2 4.3 1.7V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.1 1.5 1.5 0 0 1 5 3.5z'/%3E%3C/svg%3E"); }
.aanvraag .wiz__velden input[name="email"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.aanvraag .wiz__velden input[name="postcode"],
.aanvraag .wiz__velden input[name="adres"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.aanvraag .wiz__velden input[name="huisnummer"] { --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20h-5v-5.5H9V20H4z'/%3E%3C/svg%3E"); }
.aanvraag .wiz__velden input[readonly] { background-color: color-mix(in srgb, var(--lime) 9%, #fff); border-color: color-mix(in srgb, var(--lime) 45%, #fff); }

/* Verzendknop (als het nog een invoerveld is): groen verloop met witte tekst en een pijl in een rondje. */
.aanvraag input.wpcf7-submit {
    flex: 1 1 auto; min-width: 0; padding: 14px 54px 14px 24px; border: 1px solid rgba(214, 248, 150, .8); color: #fff;
    text-shadow: 0 1px 2px rgba(22, 60, 0, .5);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%233f7a0a' stroke='%23d6f896' stroke-opacity='.75' stroke-width='1.5'/%3E%3Cpath d='M12 20 20 12M13.5 12H20v6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center / 32px no-repeat,
        linear-gradient(180deg, #a3e635 0%, #79c11f 45%, #5a9e12 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px -8px rgba(90, 158, 18, .7);
}
.aanvraag input.wpcf7-submit:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 28px -8px rgba(90, 158, 18, .8); }
.aanvraag--hero input.wpcf7-submit { padding: 13px 50px 13px 22px; background-size: 30px, auto; }
@media (max-width: 400px) { .aanvraag .wiz__velden .wiz__rij--adres input:is([name="postcode"], [name="huisnummer"]) { padding-left: 40px; padding-right: 8px; background-position: 11.5px 50%, 4px 50%; background-size: 13px, 28px 28px; } }
/* Postcode en huisnummer even breed (wens CT 19-10). */
.wiz__rij--adres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Verzendknop als wegknop (wens CT 19-10): zelfde weg, rondje met pijl en L-bord als de knoppen in de hero. */
.aanvraag .wpcf7-submit.btn--weg { flex: 1 1 auto; justify-content: center; min-width: 0; margin-left: 0; padding: 17px calc(var(--rm-auto) + 26px) 17px 24px; border-radius: 100px; font-size: 15px; }
.aanvraag--hero .wpcf7-submit.btn--weg { --rm-auto: 32px; padding: 16px calc(var(--rm-auto) + 22px) 16px 20px; }
.aanvraag .wpcf7-submit.btn--weg:disabled { cursor: progress; opacity: .85; }
/* Tijdens het verzenden (CF7 zet .submitting op het formulier): de weg rijdt sneller en het rondje klopt, in plaats
   van het losse laadicoon van CF7. */
.wpcf7-form.submitting .wpcf7-submit.btn--weg { cursor: progress; }
.wpcf7-form.submitting .wpcf7-submit.btn--weg .rm-weg__baan { animation-duration: 1.2s; }
.wpcf7-form.submitting .wpcf7-submit.btn--weg .rm-weg__pijl { animation: rm-klop .8s ease-in-out infinite alternate; }
@keyframes rm-klop { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ===== Pakketkeuze: tegels netjes naast elkaar (wens CT 19-10) =====
   De pakketvraag is een "exclusive" checkbox, geen radio; daardoor gold het raster van de andere vragen niet en
   stonden de tegels los onder elkaar. Nu twee kolommen met dezelfde tussenruimte, "Weet ik niet" over de hele breedte. */
.wiz__stap .wpcf7-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wiz__stap .wpcf7-checkbox .wpcf7-list-item.last { grid-column: 1 / -1; }
.aanvraag--hero .wiz__stap .wpcf7-checkbox { gap: 8px; }

/* ===== Reviewtag: 3D in plaats van limerand (wens CT 19-10) =====
   Wit naar lichtgrijs verloop, een lichte bovenrand, een donkerder onderrand en een zachte slagschaduw: de tag ligt
   als een knopje op de kaart. Achter "Rijschool More" de "o" uit het logo. */
.rm-bewijs { border: 0; background: linear-gradient(180deg, #fff 0%, #f2f5ee 100%);
    box-shadow: 0 0 0 1px rgba(23, 29, 31, .07), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(23, 29, 31, .06), 0 2px 3px rgba(23, 29, 31, .06), 0 12px 24px -12px rgba(23, 29, 31, .4); }
.rm-bewijs__o { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
/* Pakkettegels in de herokaart iets compacter, zodat "Pakket A · 20 lessen" op één regel past. */
.aanvraag--hero .wiz__stap .wpcf7-checkbox .wpcf7-list-item label { gap: 7px; padding: 12px 10px 12px 12px; font-size: .86rem; }
.aanvraag--hero .wiz__stap .wpcf7-checkbox .wpcf7-list-item label::after { width: 18px; height: 18px; background-size: 10px; }
@media (min-width: 521px) { .aanvraag--hero .wiz__stap .wpcf7-checkbox .wpcf7-list-item-label { white-space: nowrap; } }
/* Telefoon: pakkettegels onder elkaar, elk op één regel (twee kolommen werden drie regels hoog). */
@media (max-width: 520px) { .aanvraag--hero .wiz__stap .wpcf7-checkbox { grid-template-columns: minmax(0, 1fr); } }
/* Heroknoppen: op desktop naast de kop, op tablet en telefoon onder het formulier (wens CT 19-10). */
.cta-row--onder { display: none; }
@media (max-width: 1000px) {
    .cta-row--boven { display: none; }
    .hero .cta-row--onder { display: flex; margin-top: 0; }
}
/* Mobiel: proeflesknop vóór de menuknop, zodat het menu helemaal rechts staat (wens CT 19-10). */
@media (max-width: 1120px) {
    .rm-header__cta { order: 2; margin-left: auto; }
    .rm-burger { order: 3; }
}
/* Proeflesknop in het mobiele menu: zelfde wegknop als in de kopbalk (wens CT 19-10). */
.mobmenu__cta .btn--weg { --rm-auto: 40px; padding: 18px calc(var(--rm-auto) + 26px) 18px 24px; }
@media (max-width: 400px) { .mobmenu__cta .btn--weg { font-size: 14px; white-space: nowrap; padding-left: 18px; } }
/* "gratis" in de proefles-badge wit (wens CT 19-10). Wit op de lichte badge is onleesbaar, daarom in een klein
   groen labeltje. */
.heroform__badge .gratis { display: inline-block; margin: 0 1px; padding: 2px 8px 3px; border-radius: 100px; background: #4f930d; color: #fff; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

/* ===== Hero rustiger (wens CT 19-10: "te druk en sterk") =====
   Minder gloed en contrast, zodat kop en formulier het werk doen:
   - foto gelijkmatiger en donkerder, zonder de limegloed rechtsboven en zonder de limehalo achter de kaart;
   - formulierkaart met een neutrale witte rand en een zachte donkere schaduw in plaats van limerand met ring;
   - kop iets kleiner, groene knoppen zonder groene gloed, de weg rijdt rustiger en de streepjes zijn zachter. */
.hero { background-image:
        linear-gradient(101deg, rgba(11, 15, 17, .94) 0%, rgba(11, 15, 17, .86) 40%, rgba(11, 15, 17, .74) 70%, rgba(11, 15, 17, .8) 100%),
        url('assets/img/hero-straat-1600.webp'); }
@media (max-width: 1300px) {
    .hero { background-image:
        linear-gradient(101deg, rgba(11, 15, 17, .94) 0%, rgba(11, 15, 17, .86) 40%, rgba(11, 15, 17, .74) 70%, rgba(11, 15, 17, .8) 100%),
        url('assets/img/hero-straat-1000.webp'); }
}
@media (max-width: 900px) {
    .hero { background-image:
        linear-gradient(180deg, rgba(11, 15, 17, .92) 0%, rgba(11, 15, 17, .86) 45%, rgba(11, 15, 17, .94) 100%),
        url('assets/img/hero-straat-mobiel-1200.webp'); }
}
.hero__showcase .halo { display: none; }
.heroform { border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 34px 70px -32px rgba(0, 0, 0, .8); }
.hero h1 { font-size: clamp(32px, 3.9vw, 56px); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.btn.btn--weg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -8px rgba(0, 0, 0, .5); }
.btn.btn--weg:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px -10px rgba(0, 0, 0, .55); }
.rm-weg__streep { stroke: rgba(255, 255, 255, .72); }
@media (prefers-reduced-motion: no-preference) {
    .rm-weg__heuvel { animation-duration: 24s; }
    .rm-weg__baan { animation-duration: 10s; }
    .btn--weg:hover .rm-weg__baan { animation-duration: 5s; }
}

/* ===== Cijferkaart half over de hero (wens CT 19-10: "heel lelijk, mag meer passen") =====
   Een witte zwevende kaart die over de onderrand van de hero valt, zoals de vertrouwenskaart bij BatterijDock.
   Per cijfer: het getal groot in merkgroen links, label en toelichting ernaast. Korte scheidingslijnen ertussen. */
.statsectie { position: relative; z-index: 3; padding: 0; margin-top: -58px; }
.hero__inner { padding-bottom: 120px; }
.statstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; border: 1px solid rgba(23, 29, 31, .06); border-radius: 24px; background: #fff;
    box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(11, 15, 17, .06), 0 32px 60px -30px rgba(11, 15, 17, .55); }
.statstrip > div { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-content: center; align-items: center; padding: 24px 24px; border: 0; }
.statstrip > div + div::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.statstrip__num { grid-row: 1 / 3; min-width: 1.3em; color: var(--lime-deep); font-size: clamp(2rem, 3vw, 2.6rem); text-align: center; }
.statstrip__lbl { align-self: end; margin: 0; font-size: .95rem; line-height: 1.25; }
.statstrip__sub { align-self: start; margin: 3px 0 0; font-size: .84rem; line-height: 1.35; }

/* Tablet: twee bij twee. */
@media (max-width: 1000px) {
    .statsectie { margin-top: -46px; }
    .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .statstrip > div { border: 0 !important; }
    .statstrip > div + div::before { display: none; }
    .statstrip > div:nth-child(2n)::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
    .statstrip > div:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
}
/* Telefoon: vier smalle kolommen met het getal boven het label, zonder toelichting. */
@media (max-width: 620px) {
    .hero__inner { padding-bottom: 96px; }
    .statsectie { margin-top: -40px; }
    .statsectie > .container { padding: 0 16px; }
    .statstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border-radius: 20px; }
    .statstrip > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 16px 4px; text-align: center; }
    .statstrip > div:nth-child(n+3) { border-top: 0 !important; }
    .statstrip > div::after { display: none !important; }
    .statstrip > div + div::before { display: block; top: 22%; bottom: 22%; }
    .statstrip__num { min-width: 0; font-size: 1.6rem; }
    .statstrip__lbl { margin-top: 6px; font-size: .72rem; }
    .statstrip__sub { display: none; }
}

/* ===== Cijferkaart speelser (wens CT 19-10) =====
   De getallen tellen op zodra de kaart in beeld komt (de wachtlijst telt af naar 0, motion.js). Onder elk getal een
   kort stukje wegmarkering, zoals de weg in de groene knoppen; bij hover licht de tegel op en rijdt de markering. */
.statstrip > div { border-radius: 18px; transition: background-color .25s, transform .45s var(--veer); }
.statstrip__num { position: relative; padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.statstrip__num::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1.1em; max-width: 46px; height: 3px; border-radius: 3px; transform: translateX(-50%);
    background: repeating-linear-gradient(90deg, var(--lime) 0 7px, transparent 7px 11px); background-size: 22px 3px; }
@media (hover: hover) {
    .statstrip > div:hover { background: color-mix(in srgb, var(--lime) 8%, #fff); transform: translateY(-2px); }
    .statstrip > div:hover .statstrip__num::after { animation: rm-markering .7s linear infinite; }
}
@keyframes rm-markering { to { background-position: -22px 0; } }
@media (max-width: 620px) {
    .statstrip__num { padding-bottom: 8px; }
    .statstrip__num::after { height: 2.5px; }
    .statstrip__lbl { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .statstrip > div:hover .statstrip__num::after { animation: none; } }

/* ===== Menubalk lichter (wens CT 19-10: middelste deel van de header te donker) =====
   Licht melkglas in plaats van bijna zwart; bij scrollen (boven witte secties) een middengrijs glas zodat de witte
   menutekst leesbaar blijft. De menuknop op mobiel krijgt hetzelfde glas. */
.navbar, .rm-burger { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .26); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 18px 40px -24px rgba(0, 0, 0, .6); }
.rm-header.is-scrolled .navbar, .rm-header.is-scrolled .rm-burger { background: rgba(44, 54, 58, .88); border-color: rgba(255, 255, 255, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 20px 44px -22px rgba(0, 0, 0, .55); }
.nav-links a { color: rgba(255, 255, 255, .92); }
.nav-glans { background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.nav-links a.is-current { background: rgba(255, 255, 255, .16); }
.navbar .rm-taal { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.navbar .rm-taal__optie { color: rgba(255, 255, 255, .85); }
.navbar .rm-taal__optie.is-actief { color: var(--ink); }


/* ===== Menu-items: witte tekst met een groene lijn eronder (wens CT 19-10) =====
   De lijn groeit vanuit het midden bij hover en blijft staan onder de sectie waar je bent. Zachte limegloed. */
.nav-links a { color: #fff; }
.nav-links a::after { display: block; left: 50%; right: 50%; bottom: 5px; height: 3px; border-radius: 3px; background: var(--lime);
    box-shadow: 0 0 10px rgba(163, 230, 53, .55); transition: left .4s var(--veer), right .4s var(--veer); }
.nav-links a:hover::after, .nav-links a.is-current::after { left: 17px; right: 17px; }
@media (max-width: 1240px) { .nav-links a:hover::after, .nav-links a.is-current::after { left: 13px; right: 13px; } }

/* ===== Header zoals BatterijDock (wens CT 19-10): drie eilandjes van gelijke hoogte =====
   Logo (wit), menu met taalkeuze (glas) en acties (proeflesknop + menuknop, glas). Eilanden 58 px hoog met hoeken van
   16 px en 10 px ertussen; knoppen erin 46 px met hoeken van 11 px. Op mobiel 52 px. */
.rm-header { padding: 14px 32px 0; }
.rm-header.is-scrolled { padding-top: 10px; }
.rm-header .rm-header__inner { max-width: 1180px; align-items: center; gap: 10px; }

/* Logo-eiland */
.rm-header .rm-logo--header.rm-logo--plate,
.rm-header.is-scrolled .rm-logo--header.rm-logo--plate { height: 58px; padding: 6px 16px; border-radius: 16px; box-shadow: inset 0 1px 0 #fff, 0 10px 32px -6px rgba(0, 0, 0, .35); }
.rm-header .rm-logo--header .rm-logo__img,
.rm-header.is-scrolled .rm-logo--header .rm-logo__img { height: 42px; }

/* Menu-eiland */
.rm-header .navbar { height: 58px; padding: 6px; border-radius: 16px; }
.rm-header .nav-links { gap: 2px; }
.rm-header .nav-links a { display: inline-flex; align-items: center; height: 46px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.rm-header .nav-glans { border-radius: 10px; }
.rm-header .nav-links a::after { bottom: 7px; }
.rm-header .nav-links a:hover::after, .rm-header .nav-links a.is-current::after { left: 14px; right: 14px; }
.rm-header .nav-links a.is-current { border-radius: 10px; }
.rm-header .navbar .rm-taal { margin: 0 2px 0 6px; }

/* Acties-eiland: zelfde glas als het menu */
.rm-header__acties { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 58px; padding: 6px; border-radius: 16px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 18px 40px -24px rgba(0, 0, 0, .6); transition: background .3s ease, border-color .3s ease; }
.rm-header.is-scrolled .rm-header__acties { background: rgba(44, 54, 58, .88); border-color: rgba(255, 255, 255, .16); }
.rm-header .rm-header__cta.btn--weg { --rm-auto: 30px; height: 46px; padding: 0 calc(var(--rm-auto) + 18px) 0 18px; border-radius: 11px; font-size: 14.5px; }
.rm-header .rm-header__cta.btn--weg .rm-weg__pijl { right: 8px; }
.rm-header .rm-burger, .rm-header.is-scrolled .rm-burger { width: 46px; height: 46px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .12); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (max-width: 1240px) {
    .rm-header .nav-links a { padding: 0 11px; font-size: 13.5px; }
    .rm-header .nav-links a:hover::after, .rm-header .nav-links a.is-current::after { left: 11px; right: 11px; }
}
@media (max-width: 1120px) {
    .rm-header .rm-header__inner { justify-content: space-between; }
}
@media (max-width: 620px) {
    .rm-header { padding: 10px 12px 0; }
    .rm-header .rm-logo--header.rm-logo--plate,
    .rm-header.is-scrolled .rm-logo--header.rm-logo--plate { height: 52px; padding: 5px 12px; border-radius: 14px; }
    .rm-header .rm-logo--header .rm-logo__img,
    .rm-header.is-scrolled .rm-logo--header .rm-logo__img { height: 36px; }
    .rm-header__acties { height: 52px; padding: 5px; gap: 5px; border-radius: 14px; }
    .rm-header .rm-header__cta.btn--weg { --rm-auto: 28px; height: 42px; padding: 0 calc(var(--rm-auto) + 16px) 0 14px; border-radius: 10px; font-size: 14px; }
    .rm-header .rm-header__cta.btn--weg .rm-weg__pijl { right: 7px; }
    .rm-header .rm-burger, .rm-header.is-scrolled .rm-burger { width: 42px; height: 42px; border-radius: 10px; }
}
@media (max-width: 400px) {
    .rm-header .rm-logo--header.rm-logo--plate,
    .rm-header.is-scrolled .rm-logo--header.rm-logo--plate { padding: 5px 10px; }
    .rm-header .rm-logo--header .rm-logo__img,
    .rm-header.is-scrolled .rm-logo--header .rm-logo__img { height: 31px; }
    .rm-header .rm-header__cta.btn--weg { --rm-auto: 26px; padding: 0 calc(var(--rm-auto) + 13px) 0 12px; font-size: 13px; }
    .rm-header .rm-header__cta.btn--weg .rm-weg__pijl { right: 6px; }
    .rm-header .rm-burger, .rm-header.is-scrolled .rm-burger { width: 40px; }
}

/* ===== Hero strakker (wens CT 19-10) =====
   Minder lucht tussen header en kop. Op desktop staat het telefoonnummer al als knop naast "Bekijk prijzen", dus de
   regel "Liever even bellen?" onder de kaart valt daar weg: de kaart eindigt dan gelijk met de knoppen links.
   Op tablet en telefoon (knoppen onder de kaart) blijft de regel staan. */
.hero__inner { padding-top: 128px; }
@media (min-width: 1001px) {
    .heroform { padding-bottom: 24px; }
    .heroform__voet { display: none; }
}
@media (max-width: 620px) { .hero__inner { padding-top: 96px; } }

/* ===== Formulierkaart komt naar voren (wens CT 19-10) =====
   Gelaagde schaduw achter en onder de kaart (dichtbij scherp, verder weg zacht en groot, op wens CT sterker) en een hogere positie,
   zodat de kaart los van de foto lijkt te zweven. Een dunne lichte rand houdt hem scherp tegen de donkere achtergrond. */
.heroform {
    transform: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .65),
        0 0 90px rgba(255, 255, 255, .1),
        0 4px 8px rgba(0, 0, 0, .4),
        0 18px 34px -4px rgba(0, 0, 0, .65),
        0 44px 80px -10px rgba(0, 0, 0, .85),
        0 100px 160px -30px rgba(0, 0, 0, .95);
}
/* Zichtbare schaduw achter de kaart (de oude halo-laag): een donkere schaduw valt weg op de donkere foto (CT: "ik zie
   helemaal geen schaduw"). Daarom een licht melkglazen plaatje dat schuin rechtsonder achter de kaart ligt: de kaart
   lijkt daardoor duidelijk los te komen en naar voren te staan. */
.hero__showcase .halo { display: block; inset: 18px -18px -18px 18px; z-index: -1; transform: none; border-radius: 24px; filter: none; animation: none;
    background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1)); border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
@media (max-width: 1000px) { .heroform { transform: none; } .hero__showcase .halo { inset: 12px -10px -12px 10px; } }
@media (max-width: 520px) { .hero__showcase .halo { inset: 10px -6px -10px 6px; border-radius: 20px; } }

/* ===== Sectie Over ons in de nieuwe stijl (wens CT 19-10) =====
   Geen label met streepje en geen vinkjes meer. Kop met het tweede deel in merkgroen, grotere eerste alinea met een
   markeerstift op "Geen stress, wel resultaat.", rechts de feitenkaart donker zoals de hero (prijzen en proefles in
   lime) en daaronder de kenmerken als tags. Rechterkolom later vervangen door lichte feitentegels (zie hieronder). */
.over { background: linear-gradient(180deg, #fff 0%, #f3f7ec 100%); padding-bottom: 96px; }
.over .split { align-items: center; }
.over .split__body h2 .groen { color: var(--lime-deep); }
.over .split__body h2 + p { margin-top: 24px; }
.over__lead { color: var(--ink) !important; font-size: 1.14rem !important; line-height: 1.75 !important; }
.over mark { padding: 0 2px; color: inherit; background: linear-gradient(transparent 58%, rgba(163, 230, 53, .5) 58%); }
.over .split__zij { margin-top: 0; gap: 20px; }

/* Rechterkolom als speelse rijbewijs-kaart (wens CT 19-10: "speelser, leuker, creatiever"). Lichtgroene pas met een fijn
   guillochepatroon, bovenin de "o" uit het logo, de naam en een blauw L-bordje; de feiten als genummerde velden zoals op
   een echt rijbewijs. De kaart staat licht schuin en veert recht bij hover. De kenmerken eronder zijn blauwe
   verkeersbordjes (wit kader op blauw) die even wiebelen bij hover. */
.factcard--rijbewijs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; row-gap: 2px; padding: 18px 22px 20px; counter-reset: veld;
    border: 1px solid color-mix(in srgb, var(--lime) 45%, #fff); border-radius: 22px; overflow: hidden;
    background:
        repeating-radial-gradient(circle at 115% -20%, transparent 0 9px, rgba(77, 124, 15, .07) 9px 10px),
        linear-gradient(135deg, #f7fdec 0%, #e6f6c9 55%, #d9f0b0 100%);
    box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(11, 15, 17, .06), 0 26px 50px -24px rgba(11, 15, 17, .45);
    transform: rotate(-2deg); transition: transform .55s var(--veer), box-shadow .35s; }
@media (hover: hover) { .factcard--rijbewijs:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 4px 8px rgba(11, 15, 17, .06), 0 34px 60px -26px rgba(11, 15, 17, .5); } }
.rijbewijs__kop { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed color-mix(in srgb, var(--lime-deep) 35%, transparent); }
.rijbewijs__kop img { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.rijbewijs__naam { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.rijbewijs__l { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 2px solid #fff; border-radius: 6px; background: var(--blauw); color: #fff; font: 800 15px/1 var(--font-body); box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .3); transform: rotate(4deg); }
.factcard--rijbewijs .factcard__row { position: relative; display: block; padding: 8px 0 8px 26px; border: 0; background: none; counter-increment: veld; }
.factcard--rijbewijs .factcard__row::before { content: counter(veld) "."; position: absolute; left: 0; top: 9px; font: 700 12px/1.4 var(--font-display); color: var(--lime-deep); }
.factcard--rijbewijs .factcard__k { display: block; font-size: .78rem; color: #56635a; }
.factcard--rijbewijs .factcard__v { display: block; margin-top: 2px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; color: var(--ink); }
.factcard--rijbewijs .factcard__v--groen { color: var(--lime-deep); }
.factcard--rijbewijs .factcard__row:last-child { border-bottom: 0; }

.chips--borden { gap: 10px; margin-top: 6px; }
.chips--borden li { gap: 0; padding: 10px 15px; border: 0; border-radius: 9px; background: var(--blauw); color: #fff; font-weight: 700; font-size: 13px;
    box-shadow: inset 0 0 0 2px var(--blauw), inset 0 0 0 4px #fff, 0 6px 14px -8px rgba(18, 70, 140, .6); transition: transform .45s var(--veer); }
@media (hover: hover) { .chips--borden li:hover { animation: rm-wiebel .5s ease-in-out; } }
@keyframes rm-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .factcard--rijbewijs, .factcard--rijbewijs:hover { transform: none; } .chips--borden li:hover { animation: none; } }
@media (max-width: 620px) {
    .over { padding-bottom: 64px; }
    .over__lead { font-size: 1.06rem !important; }
    .factcard--rijbewijs { padding: 16px 16px 18px; column-gap: 12px; transform: rotate(-1.2deg); }
    .factcard--rijbewijs .factcard__v { font-size: .9rem; }
}
/* Smalle telefoons: rijbewijsvelden in één kolom, dan passen de waarden. */
@media (max-width: 400px) { .factcard--rijbewijs { grid-template-columns: minmax(0, 1fr); } }
/* Rijbewijs-kaart: witte rand om de logo-o en een blauw verificatievinkje achter de naam (wens CT 19-10). */
.rijbewijs__kop img { box-sizing: content-box; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .3); }
.rijbewijs__kop { gap: 8px; }
.rijbewijs__naam { margin-left: 2px; }
.rijbewijs__check { display: inline-flex; flex: none; color: var(--blauw); }
.rijbewijs__check svg { width: 18px; height: 18px; }

/* ===== Lesgebied als kaart (wens CT 19-10) =====
   Kleikaart (Magnific) in een kaart met ronde hoeken die licht schuin staat; de plaatsen zijn kleine blauwe
   plaatsnaamborden (zoals de bordjes bij de bebouwde kom) aan een speld. Roermond is groter, met een lime speld die
   zacht pulseert. Het label met streepje boven de kop is weg. */
.band--foto .band__grid { align-items: center; }
.lesgebied { width: 100%; max-width: 540px; margin-left: auto; }
.lesgebied__kaart { position: relative; overflow: hidden; border-radius: 26px; border: 4px solid #fff; background: #cfe7b0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 34px 70px -24px rgba(0, 0, 0, .85); transform: rotate(1.5deg); transition: transform .55s var(--veer); }
@media (hover: hover) { .lesgebied__kaart:hover { transform: rotate(0deg) scale(1.01); } }
.lesgebied__kaart img { display: block; width: 100%; height: auto; }
.lesgebied__plaatsen { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.plaats { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
/* Speld: wit bolletje met blauwe rand op de exacte plek. */
.plaats::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--blauw); box-sizing: border-box; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.plaats__bord { position: absolute; top: -12px; padding: 4px 8px; border-radius: 5px; white-space: nowrap; background: var(--blauw); color: #fff; font: 700 11.5px/1.2 var(--font-body);
    box-shadow: inset 0 0 0 1.5px var(--blauw), inset 0 0 0 3px #fff, 0 4px 10px -4px rgba(10, 40, 90, .7); transition: transform .35s var(--veer); }
.plaats--rechts .plaats__bord { left: 12px; }
.plaats--links .plaats__bord { right: 12px; }
@media (hover: hover) { .plaats:hover .plaats__bord { transform: translateY(-3px) rotate(-2deg); } }
/* Roermond: groter bord en een lime speld met een zachte puls. */
.plaats--hoofd::before { left: -9px; top: -9px; width: 18px; height: 18px; background: var(--lime); border-color: #fff; }
.plaats--hoofd::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lime); }
.plaats--hoofd .plaats__bord { top: -15px; left: 16px; padding: 6px 11px; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
    .plaats--hoofd::after { animation: rm-puls 2.2s ease-out infinite; }
}
@keyframes rm-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.lesgebied__schaal { display: none; position: absolute; left: 12px; top: 10px; padding: 4px 9px; border-radius: 100px; background: rgba(255, 255, 255, .78); color: #3c4a40; font-size: 11px; font-weight: 600; }
.lesgebied__noot { margin: 18px 0 0; color: rgba(255, 255, 255, .78); font-size: .9rem; line-height: 1.6; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
@media (max-width: 1000px) { .lesgebied { max-width: 620px; margin: 0; } .lesgebied__kaart { transform: rotate(.8deg); } }
@media (max-width: 520px) {
    .lesgebied__kaart { border-width: 3px; border-radius: 20px; }
    .plaats__bord { padding: 3px 6px; font-size: 9.5px; top: -10px; box-shadow: inset 0 0 0 1px var(--blauw), inset 0 0 0 2px #fff, 0 3px 8px -4px rgba(10, 40, 90, .7); }
    .plaats--rechts .plaats__bord { left: 9px; }
    .plaats--links .plaats__bord { right: 9px; }
    .plaats::before { left: -5px; top: -5px; width: 10px; height: 10px; border-width: 2.5px; }
    .plaats--hoofd .plaats__bord { top: -12px; left: 12px; padding: 4px 8px; font-size: 11.5px; }
    .plaats--hoofd::before, .plaats--hoofd::after { left: -7px; top: -7px; width: 14px; height: 14px; }
    .lesgebied__schaal { font-size: 9.5px; left: 8px; top: 7px; }
}

/* ===== Roermond e.o.: tag op de kaart en een vollere linkerhelft (wens CT 19-10) =====
   Op de kaart een witte tag met een blauw L-bordje en het aantal plaatsen (uit de databron). Links de route uit de
   tekst als wegstrook met haltes (zie hieronder) en de
   proeflesknop. */
.lesgebied__tag { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 100px;
    background: #fff; color: var(--ink); font: 700 12px/1 var(--font-body); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.lesgebied__l { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; background: var(--blauw); color: #fff; font: 800 11px/1 var(--font-body);
    box-shadow: inset 0 0 0 1.5px var(--blauw), inset 0 0 0 3px #fff; }
/* Route als compacte wegstrook (wens CT 19-10: bordjes "niet mooi", compacter): een donkere strook met gestippelde
   lime middenlijn en drie haltes, met korte labels eronder. De laatste halte (Roermond e.o.) is lime. */
.route { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 440px; margin: 28px 0 0; padding: 26px 0 0; list-style: none; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 12px; border-radius: 6px; background: #2a3337; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -4px rgba(0, 0, 0, .6); }
.route::after { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: repeating-linear-gradient(90deg, var(--lime) 0 8px, transparent 8px 14px); }
@media (prefers-reduced-motion: no-preference) { .route:hover::after { animation: rm-strook-route .8s linear infinite; } }
@keyframes rm-strook-route { to { background-position: 14px 0; } }
.route li { position: relative; padding: 0 6px; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; }
/* Haltes als kleine L-bordjes op de weg (wens CT 19-10). */
.route li::before { content: "L"; position: absolute; left: 50%; top: -27px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 5px; box-sizing: border-box;
    background: var(--blauw); border: 2px solid #fff; color: #fff; font: 800 12px/1 var(--font-body); box-shadow: 0 3px 6px rgba(0, 0, 0, .45); transform: rotate(-3deg); transition: transform .35s var(--veer); }
.route li:nth-child(2)::before { transform: rotate(2deg); }
@media (hover: hover) { .route li:hover::before { transform: rotate(0) translateY(-3px) scale(1.08); } }
.route .route__doel { color: var(--lime); }
.route .route__doel::before { box-shadow: 0 0 0 3px var(--lime), 0 3px 8px rgba(0, 0, 0, .45); }
.band__knoppen { margin-top: 30px; }
@media (max-width: 620px) {
    .route li { font-size: 12px; }
    .lesgebied__tag { left: 8px; top: 7px; font-size: 10.5px; padding: 4px 10px 4px 4px; gap: 6px; }
    .lesgebied__l { width: 18px; height: 18px; font-size: 10px; }
    .band__knoppen .btn--weg { --rm-auto: 34px; font-size: 14px; padding: 16px calc(var(--rm-auto) + 24px) 16px 20px; }
}

/* ===== Prijzen en pakketten in de nieuwe stijl (wens CT 19-10) =====
   Geen label met streepje, geen vinkjes, geen hoofdletters. Kop met groen tweede deel. Elke pakketkaart heeft een
   wegstrookje dat met de lessen meegroeit (grootste pakket = volle weg) met een L-bordje aan het eind; het meest
   gekozen pakket heeft de rijbewijs-stijl (zie verderop), met een blauw bord "Meest gekozen". De knop per pakket is een zachte
   groene balk. De tarieftabellen krijgen rustige koppen en "Gratis" als limelabel. */
.prijzen { background: linear-gradient(180deg, #f3f7ec 0%, #fff 70%); }
.prijzen .section__head h2 .groen { color: var(--lime-deep); }
.prijzen .pkg { padding: 26px 24px 22px; border: 1px solid rgba(23, 29, 31, .07); border-radius: 24px;
    box-shadow: 0 1px 0 #fff inset, 0 16px 34px -20px rgba(11, 15, 17, .4); transition: transform .45s var(--veer), box-shadow .3s; }
.prijzen .pkg:hover { transform: translateY(-4px); box-shadow: 0 1px 0 #fff inset, 0 24px 44px -22px rgba(11, 15, 17, .45); }
.prijzen .pkg h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--muted); }

.pkg__weg { position: relative; height: 12px; margin: 18px 12px 6px 0; border-radius: 6px; background: #edf1e8; }
.pkg__rijbaan { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lengte); border-radius: 6px;
    background: repeating-linear-gradient(90deg, var(--lime) 0 7px, transparent 7px 12px) center / calc(100% - 16px) 2px no-repeat, #2a3337;
    transition: width 1.2s cubic-bezier(.2, .7, .2, 1) .35s; }
.js .veegrij:not(.is-visible) .pkg__rijbaan { width: 0; }
.pkg__l { position: absolute; right: -11px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #fff; border-radius: 5px;
    background: var(--blauw); color: #fff; font: 800 12px/1 var(--font-body); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); transform: translateY(-50%) rotate(-4deg); }

.prijzen .pkg__list { gap: 0; margin: 16px 0 20px; }
.prijzen .pkg__list li { display: block; padding: 9px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.prijzen .pkg__cta { justify-content: space-between; gap: 10px; padding: 12px 14px 12px 16px; white-space: nowrap; font-size: .88rem; border-radius: 12px; background: color-mix(in srgb, var(--lime) 16%, #fff); color: #34560a; transition: background-color .2s, transform .35s var(--veer); }
.prijzen .pkg__cta:hover { background: var(--lime); color: #1d2a07; }
.prijzen .pkg__cta:active { transform: scale(.97); }

.prijzen .pkg__badge { top: -14px; right: 18px; padding: 7px 12px; border-radius: 7px; background: var(--blauw); color: #fff; font: 700 12px/1.1 var(--font-body); letter-spacing: 0; text-transform: none;
    box-shadow: inset 0 0 0 1.5px var(--blauw), inset 0 0 0 3px #fff, 0 6px 14px -6px rgba(10, 40, 90, .6); transform: rotate(2deg); }
/* Meest gekozen pakket in de rijbewijs-stijl van "Over ons" (wens CT 19-10): lichtgroene pas met guillochepatroon,
   licht schuin, veert recht bij hover. */
.prijzen .pkg--pop { border: 1px solid color-mix(in srgb, var(--lime) 50%, #fff);
    background:
        repeating-radial-gradient(circle at 115% -20%, transparent 0 9px, rgba(77, 124, 15, .07) 9px 10px),
        linear-gradient(135deg, #f7fdec 0%, #e6f6c9 55%, #d9f0b0 100%);
    box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(11, 15, 17, .06), 0 26px 50px -24px rgba(11, 15, 17, .45);
    transform: rotate(-1.5deg); }
@media (hover: hover) { .prijzen .pkg--pop:hover { transform: rotate(0deg) translateY(-4px); } }
.prijzen .pkg--pop h3 { color: #4d6b2a; }
.prijzen .pkg--pop .pkg__price { color: var(--ink); }
.prijzen .pkg--pop .pkg__weg { background: rgba(255, 255, 255, .7); }
.prijzen .pkg--pop .pkg__list li { border-top-color: rgba(77, 124, 15, .18); }
.prijzen .pkg--pop .pkg__cta { background: var(--lime); color: #1d2a07; }
.prijzen .pkg--pop .pkg__cta:hover { background: #b7f24d; }
@media (prefers-reduced-motion: reduce) { .prijzen .pkg--pop, .prijzen .pkg--pop:hover { transform: none; } }

/* Aantal lessen duidelijk (wens CT 19-10): groot getal in merkgroen met "lessen" ernaast, de duur klein eronder. */
.prijzen .pkg__unit { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; margin-top: 12px; color: var(--muted); }
.pkg__aantal { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; color: var(--lime-deep); }
.pkg__lessen { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.pkg__duur { flex-basis: 100%; margin-top: 4px; font-size: .86rem; }

.prijzen .rates { border-color: rgba(23, 29, 31, .07); border-radius: 24px; box-shadow: 0 16px 34px -20px rgba(11, 15, 17, .35); }
.prijzen .rates thead th { padding-top: 16px; padding-bottom: 16px; background: #f6f8f3; color: var(--ink); font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }
.prijzen .rates__amount--gratis { display: inline-block; padding: 6px 12px; border-radius: 100px; background: var(--lime); color: #1d2a07; font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .pkg__rijbaan { transition: none; } .js .veegrij:not(.is-visible) .pkg__rijbaan { width: var(--lengte); } }
@media (max-width: 620px) { .prijzen .rates thead th { font-size: .88rem; } }
/* Veeghint op de telefoon gewoon klein, zonder hoofdletters en letterafstand (geen AI-slop). */
@media (max-width: 620px) { .prijzen .veeghint { font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); } }

/* ===== Taxi rijles in de nieuwe stijl (wens CT 19-10) =====
   Geen label met streepje meer; kop met het tweede deel groen. De feitenkaart is een gele taxi (de donkere versie
   oogde CT te AI-achtig): bovenop een zwart daklicht met gloeiend gele letters, op het portier de logo-o met
   "Rijschool More" en een blauw L-bordje, daaronder de geblokte taxiband en de feiten als velden. De prijs staat op een
   taximeter. Licht schuin zoals de rijbewijs-kaart; bij hover recht, het daklicht gloeit en de band rijdt. */
.taxi { --taxigeel: #ffcc1f; --taxigeel-diep: #f2b705; background: linear-gradient(180deg, #f3f7ec 0%, #fff 100%); }
.taxi .split { align-items: center; }
.taxi .split__body h2 .groen { color: var(--lime-deep); }
.taxi .split__zij { margin-top: 0; gap: 26px; }
.taxi__kaart { position: relative; padding-top: 26px; transform: rotate(-1.2deg); transition: transform .5s var(--veer); }
.taxi__dak { position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%); display: grid; place-items: center; width: 138px; height: 34px;
    border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #2b3438 0%, #151b1d 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 6px 14px -6px rgba(0, 0, 0, .5); transition: transform .5s var(--veer); }
.taxi__dak span { font: 700 15px/1 var(--font-display); letter-spacing: .16em; padding-left: .16em; color: var(--taxigeel);
    text-shadow: 0 0 8px rgba(255, 204, 31, .55); transition: text-shadow .4s; }
.taxi__wagen { position: relative; overflow: hidden; border-radius: 24px; color: #1d2427;
    background: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .45), transparent 55%), linear-gradient(170deg, var(--taxigeel) 0%, var(--taxigeel-diep) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -3px 0 rgba(0, 0, 0, .08) inset, 0 4px 10px rgba(120, 85, 0, .12), 0 34px 60px -28px rgba(120, 85, 0, .55); }
.taxi__kop { display: flex; align-items: center; gap: 10px; padding: 18px 22px 14px; }
.taxi__kop img { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .25); }
.taxi__naam { font: 700 15px/1 var(--font-display); letter-spacing: -0.01em; }
.taxi__l { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border: 2px solid #fff; border-radius: 6px; background: var(--blauw); color: #fff;
    font: 800 14px/1 var(--font-body); box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .3); transform: rotate(4deg); }
.taxi__band { display: block; height: 20px; background: repeating-conic-gradient(#1d2427 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
.factcard--taxi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px 18px 18px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.factcard--taxi .factcard__row { display: block; padding: 11px 14px 12px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; }
.factcard--taxi .factcard__k { display: block; font-size: .78rem; color: #5b4a12; }
.factcard--taxi .factcard__v { display: block; margin-top: 3px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -0.01em; color: #1d2427; }
/* Prijs op de taximeter: donker display met groene cijfers. */
.factcard--taxi .factcard__row:last-child { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px;
    background: linear-gradient(180deg, #1f272a 0%, #12181a 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 0 0 3px rgba(0, 0, 0, .12); }
.factcard--taxi .factcard__row:last-child .factcard__k { color: rgba(243, 245, 245, .65); font-size: .82rem; }
.factcard--taxi .factcard__row:last-child .factcard__v { margin: 0; color: var(--lime); font-size: 1.08rem; text-shadow: 0 0 10px rgba(163, 230, 53, .45); }
@media (hover: hover) {
    .taxi__kaart:hover { transform: rotate(0deg) translateY(-4px); }
    .taxi__kaart:hover .taxi__dak span { text-shadow: 0 0 6px rgba(255, 204, 31, .9), 0 0 18px rgba(255, 204, 31, .7); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .taxi__kaart:hover .taxi__band { animation: rm-taxiband .9s linear infinite; }
}
@keyframes rm-taxiband { to { background-position: -40px 0; } }
.taxi .cta-row { margin-top: 0; }
.taxi__bel { gap: 12px; padding: 8px 22px 8px 8px; }
.taxi__bel .btn--tel__rond { width: 36px; height: 36px; background: color-mix(in srgb, var(--lime) 30%, #fff); color: #2f4f08; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .taxi__kaart, .taxi__kaart:hover { transform: none; transition: none; } }
@media (max-width: 620px) {
    .taxi__kaart { transform: rotate(-.8deg); }
    .factcard--taxi { gap: 8px; padding: 14px; }
    .factcard--taxi .factcard__row { padding: 10px 12px; }
    .factcard--taxi .factcard__v { font-size: .88rem; }
    .taxi .cta-row .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 360px) { .factcard--taxi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .taxi .btn--weg .btn__tekst { white-space: nowrap; font-size: 13.5px; } }
/* Taxikaart: prijs op de taximeter wit en het blauwe verificatievinkje achter de naam, zoals op de rijbewijs-kaart (wens CT 19-10). */
.factcard--taxi .factcard__row:last-child .factcard__v { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .3); }
.taxi__check { display: inline-flex; flex: none; margin-left: -5px; color: var(--blauw); }
.taxi__check svg { width: 18px; height: 18px; }

/* ===== Zo werkt het in de nieuwe stijl (wens CT 19-10) =====
   Geen label met streepje meer; kop met het tweede deel groen. De vier stappen liggen aan een weg: asfalt met een
   lime middenstreep die zich bij het inlopen uittekent, de stapnummers als blauwe borden (zoals het L-bord) op de weg
   en de laatste stap (examen) als lime bord met een geblokte finish aan het eind. Daaronder witte kaarten.
   Op tablet en telefoon loopt de weg verticaal links langs de kaarten. Bij hover rijdt de middenstreep. */
.werkwijze .section__head h2 .groen { color: var(--lime-deep); }
.steps--weg { gap: 18px; padding-top: 74px; }
.steps--weg::before { top: 16px; left: 0; right: 0; height: 30px; border-radius: 15px; background: #2a3337;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 8px 16px -10px rgba(0, 0, 0, .5); }
.steps--weg::after { content: ""; position: absolute; top: 30px; left: 20px; right: 40px; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--lime) 0 12px, transparent 12px 22px); opacity: 0; transition: opacity .6s .7s; }
.steps--weg.is-visible::after, .no-js .steps--weg::after { opacity: .9; }
@media (prefers-reduced-motion: no-preference) { .steps--weg:hover::after { animation: rm-stappen-weg .9s linear infinite; } }
@keyframes rm-stappen-weg { to { background-position: 22px 0; } }
.steps--weg .step { padding: 24px 22px 26px; border: 1px solid rgba(29, 36, 39, .06); border-radius: 20px; background: #fff;
    box-shadow: 0 1px 2px rgba(11, 15, 17, .04), 0 18px 34px -24px rgba(11, 15, 17, .35); transition: transform .45s var(--veer), box-shadow .45s ease; }
.steps--weg .step__num { position: absolute; top: -66px; left: 20px; z-index: 2; width: 42px; height: 42px; margin: 0; border: 3px solid #fff; border-radius: 9px;
    background: var(--blauw); color: #fff; font: 700 17px/1 var(--font-display); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .4); transform: rotate(-3deg);
    transition: transform .45s var(--veer); }
.steps--weg .step:nth-child(2) .step__num { transform: rotate(2deg); }
.steps--weg .step:nth-child(3) .step__num { transform: rotate(-1.5deg); }
.steps--weg .step:last-child .step__num { background: var(--lime); color: #1d2427; transform: rotate(2.5deg); box-shadow: 0 0 0 3px var(--lime-deep), 0 4px 10px -2px rgba(0, 0, 0, .4); }
/* Geblokte finish aan het eind van de weg. */
.steps--weg .step:last-child::after { content: ""; position: absolute; top: -58px; right: 0; width: 30px; height: 30px; border-radius: 0 15px 15px 0;
    background: repeating-conic-gradient(#fff 0 25%, #1d2427 0 50%) 0 0 / 10px 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.steps--weg .step h3 { margin-bottom: 8px; }
@media (hover: hover) {
    .steps--weg .step:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(11, 15, 17, .05), 0 26px 44px -26px rgba(11, 15, 17, .45); }
    .steps--weg .step:hover .step__num { transform: rotate(0deg) translateY(-3px) scale(1.08); }
}
@media (max-width: 1000px) {
    .steps--weg { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 0 0 62px; max-width: 640px; }
    .steps--weg::before { display: block; top: 6px; bottom: 6px; left: 6px; right: auto; width: 30px; height: auto; transform-origin: top; }
    .js .steps--weg::before { transform: scaleY(0); }
    .js .steps--weg.is-visible::before { transform: scaleY(1); }
    .steps--weg::after { top: 22px; bottom: 40px; left: 20px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--lime) 0 12px, transparent 12px 22px); }
    @keyframes rm-stappen-weg-v { to { background-position: 0 22px; } }
    .steps--weg:hover::after { animation-name: rm-stappen-weg-v; }
    .steps--weg .step { display: block; padding: 18px 20px 20px; }
    .steps--weg .step__num { top: 14px; left: -61px; width: 38px; height: 38px; font-size: 15px; }
    .steps--weg .step:last-child::after { top: auto; bottom: 6px; left: -56px; right: auto; width: 30px; height: 30px; border-radius: 0 0 15px 15px; }
    .steps--weg .step:last-child .step__num { top: 14px; }
}
@media (max-width: 620px) {
    .steps--weg { padding-left: 54px; }
    .steps--weg::before { left: 2px; width: 28px; }
    .steps--weg::after { left: 15px; }
    .steps--weg .step { padding: 16px 16px 18px; }
    .steps--weg .step__num { left: -55px; width: 36px; height: 36px; }
    .steps--weg .step:last-child::after { left: -52px; width: 28px; }
}
@media (prefers-reduced-motion: reduce) { .steps--weg .step, .steps--weg .step__num { transition: none; } .steps--weg::after { opacity: .9; transition: none; } }
.werkwijze .section__head h2 .groen { white-space: nowrap; }

/* ===== Goed om te weten (41 lesuren) in de nieuwe stijl (wens CT 19-10) =====
   Label met streepje weg. Rechts een kilometerteller: drie wieltjes die bij het inlopen naar 0-4-1 rollen, het laatste
   wiel in lime (zoals het dagteller-wiel). Alleen decoratie, het getal staat al in de kop. De lime streep ernaast is weg. */
.band--cijfer .band__grid > div:last-child { border: 0; padding: 0; }
.teller { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px; padding: 9px 20px 9px 9px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
    background: linear-gradient(180deg, #1d2427 0%, #0d1214 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 40px -22px #000; }
.teller__wielen { display: flex; gap: 4px; padding: 5px; border-radius: 12px; background: #05080a; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .85); }
.teller__wiel { --h: 54px; position: relative; display: block; width: 40px; height: var(--h); overflow: hidden; border-radius: 7px;
    background: linear-gradient(180deg, #11171a 0%, #2b3438 50%, #11171a 100%); color: #fff; }
.teller__wiel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, .55) 100%); }
.teller__wiel > span { display: block; width: 100%; word-spacing: 100px; text-align: center; font: 700 28px/var(--h) var(--font-display);
    transform: translateY(calc(var(--n) * var(--h) * -1)); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1) .3s; }
.teller__wiel:nth-child(2) > span { transition-delay: .45s; }
.teller__wiel:nth-child(3) > span { transition-delay: .6s; transition-duration: 2.2s; }
.teller__wiel:last-child { background: linear-gradient(180deg, #6fa51c 0%, var(--lime) 50%, #6fa51c 100%); color: #12181a; }
.teller__wiel:last-child::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, .3) 100%); }
.js .reveal:not(.is-visible) .teller__wiel > span { transform: translateY(0); }
.teller__eenheid { color: #fff; font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) { .teller__wiel > span { transition: none; } .js .reveal:not(.is-visible) .teller__wiel > span { transform: translateY(calc(var(--n) * var(--h) * -1)); } }
@media (max-width: 1000px) { .band--cijfer .band__grid > div:last-child { border: 0; padding: 0; } }
@media (max-width: 620px) { .teller__wiel { --h: 46px; width: 34px; } .teller__wiel > span { font-size: 24px; } }

/* ===== Veelgestelde vragen in de nieuwe stijl (wens CT 19-10) =====
   Label met streepje en de groene gloed weg; kop met "Roermond" groen. Elke vraag een witte kaart; het plusje is een
   blauw bordje met witte rand (zoals het L-bord) dat lime wordt als de vraag open staat. */
.faqsectie { background: linear-gradient(180deg, #fff 0%, #f3f7ec 100%); }
.faqsectie::before { display: none; }
.faqsectie .section__head h2 .groen { color: var(--lime-deep); }
.faqsectie .faq { gap: 12px 20px; }
.faqsectie .faq__col { display: grid; gap: 12px; }
.faqsectie .faq__item, .faqsectie .faq__item:first-child { padding: 0 20px; border: 1px solid rgba(29, 36, 39, .07); border-radius: 18px; background: #fff;
    box-shadow: 0 1px 2px rgba(11, 15, 17, .04), 0 14px 28px -22px rgba(11, 15, 17, .35); transition: border-color .25s, background-color .25s, box-shadow .3s; }
.faqsectie .faq__item summary { align-items: center; padding: 17px 0; }
.faqsectie .faq__item[open] { border-color: color-mix(in srgb, var(--lime) 55%, #fff); background: #fbfdf5; }
@media (hover: hover) { .faqsectie .faq__item:hover { box-shadow: 0 1px 2px rgba(11, 15, 17, .05), 0 20px 36px -24px rgba(11, 15, 17, .45); } }
.faqsectie .faq__teken { width: 28px; height: 28px; margin: 0; border: 2px solid #fff; border-radius: 7px; background: var(--blauw); box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .3);
    transform: rotate(-3deg); transition: background-color .25s, transform .4s var(--veer); }
.faqsectie .faq__teken::before, .faqsectie .faq__teken::after { background: #fff; }
.faqsectie .faq__item summary:hover .faq__teken { transform: rotate(0deg) scale(1.08); }
.faqsectie .faq__item[open] .faq__teken { background: var(--lime); border-color: #fff; transform: rotate(0deg); }
.faqsectie .faq__item[open] .faq__teken::before { background: #1d2427; }
.faqsectie .faq__antwoord { padding: 0 40px 20px 0; }
@media (max-width: 1000px) { .faqsectie .faq { gap: 12px; } .faqsectie .faq__col + .faq__col .faq__item:first-child { border-top: 1px solid rgba(29, 36, 39, .07); } }
@media (max-width: 620px) { .faqsectie .faq__item, .faqsectie .faq__item:first-child { padding: 0 16px; } .faqsectie .faq__antwoord { padding-right: 0; } }

/* ===== Contact in de nieuwe stijl (wens CT 19-10) =====
   Label met streepje weg, "Roermond" lime in de kop. "Of neem direct contact op" in gewone letters (geen hoofdletters
   met letterafstand) en de iconen van de contactkaarten in een lichtgroen rondje, zoals de belknop bij taxi. */
.cta-card h2 .groen { color: var(--lime); }
.cta-card__of { margin-top: 32px; font: 600 .98rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .75); }
.contactkaart__ico { border-radius: 50%; background: color-mix(in srgb, var(--lime) 30%, #fff); color: #2f4f08; box-shadow: none; transition: transform .45s var(--veer); }
.contactkaart:hover .contactkaart__ico { box-shadow: none; transform: rotate(-10deg) scale(1.06); }

/* ===== Footer in de nieuwe stijl (wens CT 19-10) =====
   Over de bovenrand loopt een weg met een lime middenstreep (rijdt mee bij hover over de footer) en een geblokte
   finish rechts. Links krijgen dezelfde lime lijn die vanuit het midden groeit als het menu. */
.rm-footer { position: relative; padding-top: 92px; }
.rm-footer__weg { position: absolute; top: 0; left: 0; right: 0; height: 28px; background: #2a3337; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .35); }
.rm-footer__weg::before { content: ""; position: absolute; top: 13px; left: 0; right: 28px; height: 2px; background: repeating-linear-gradient(90deg, var(--lime) 0 14px, transparent 14px 26px); opacity: .85; }
.rm-footer__weg::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: repeating-conic-gradient(#fff 0 25%, #1d2427 0 50%) 0 0 / 14px 14px; }
@media (prefers-reduced-motion: no-preference) { .rm-footer:hover .rm-footer__weg::before { animation: rm-footer-weg 1s linear infinite; } }
@keyframes rm-footer-weg { to { background-position: 26px 0; } }
.rm-footer h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 620px) { .rm-footer { padding-top: 72px; } }
@media (max-width: 620px) { .faqsectie .faq__item h3 { font-size: .95rem; } }
@media (max-width: 1000px) { .contactkaarten { grid-template-columns: minmax(0, 1fr); } .contactkaart { min-width: 0; } }
@media (max-width: 380px) { .cta-card .contactkaart { gap: 10px; padding: 12px; } .cta-card .contactkaart__ico { width: 36px; height: 36px; } .cta-card .contactkaart__pijl { display: none; } }

/* ===== Footer, ronde 2 (wens CT 19-10: "veel en veel leuker", donker logo-plaatje overal weg) =====
   Het logo staat weer op zijn witte plaatje (de lijn-regel voor footerlinks wiste die achtergrond). Bovenin een
   afsluiter met de vaste slogan groot en de weg- en belknop; daaronder het logo licht schuin als een bordje, het menu
   met de lime lijn, de gegevens met iconen in lime rondjes en het werkgebied als blauw plaatsnaambord. */
.rm-footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; flex-wrap: wrap; margin-bottom: 52px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.rm-footer__slogan { max-width: 620px; margin: 0; color: #fff; font: 700 clamp(1.6rem, 3.4vw, 2.6rem)/1.12 var(--font-display); letter-spacing: -0.03em; }
.rm-footer__slogan .groen { color: var(--lime); }
.rm-footer__knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.rm-footer__knoppen .btn--tel { gap: 12px; padding: 8px 22px 8px 8px; }
.rm-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; }
.rm-footer .rm-logo--footer { background: #fff; transform: rotate(-2deg); transition: transform .45s var(--veer), box-shadow .3s; }
.rm-footer .rm-logo--footer:hover { transform: rotate(0deg) translateY(-2px); }
.rm-footer__tag { margin-top: 18px; }
.rm-footer h4 { margin-bottom: 18px; color: #fff; }
.rm-footer__menu ul, .rm-footer__contact { margin: 0; padding: 0; list-style: none; }
.rm-footer__menu li { margin-bottom: 9px; }
.rm-footer__menu a { padding-bottom: 3px; color: var(--text-muted); text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 50% 100% / 0 2px no-repeat; transition: color .2s, background-size .3s ease; }
.rm-footer__menu a:hover { color: #fff; text-decoration: none; background-size: 100% 2px; }
.rm-footer__contact li { margin-bottom: 10px; }
.rm-footer__contact a { display: inline-flex; align-items: center; gap: 11px; color: var(--text-muted); text-decoration: none; transition: color .2s; }
.rm-footer__contact a:hover { color: #fff; text-decoration: none; }
.rm-footer__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(163, 230, 53, .14); color: var(--lime); transition: background-color .25s, color .25s, transform .45s var(--veer); }
.rm-footer__ico svg { width: 16px; height: 16px; }
.rm-footer__contact a:hover .rm-footer__ico { background: var(--lime); color: #12181a; transform: rotate(-10deg) scale(1.06); }
.rm-footer__bord { display: inline-block; margin: 8px 0 0; padding: 7px 14px; border: 3px solid var(--blauw); border-radius: 7px; background: var(--blauw); color: #fff;
    font: 700 14px/1.2 var(--font-body); box-shadow: inset 0 0 0 2px #fff, 0 6px 14px -6px rgba(0, 0, 0, .6); transform: rotate(-2deg); transition: transform .45s var(--veer); }
@media (hover: hover) { .rm-footer__bord:hover { transform: rotate(1deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .rm-footer .rm-logo--footer, .rm-footer__bord, .rm-footer__ico { transition: none; } }
@media (max-width: 1000px) { .rm-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
    .rm-footer__cta { margin-bottom: 40px; padding-bottom: 36px; }
    .rm-footer__knoppen { width: 100%; }
    .rm-footer__knoppen .btn { flex: 1 1 100%; justify-content: center; }
    .rm-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .rm-footer__grid > div:first-child { grid-column: auto; }
}
.rm-footer__slogan { flex: 1 1 420px; }
.rm-footer__knoppen { flex: 0 0 auto; }
.rm-footer__bord { padding: 8px 16px; font-size: 15px; }
@media (max-width: 620px) { .rm-footer__knoppen { flex: 1 1 100%; } }

/* ===== Footer, ronde 3 (wens CT 19-10: "veel leuker", ideeën van BatterijDock, Instagram, groot logo onderaan) =====
   Contacttegels zoals bij BatterijDock (Bel, WhatsApp, Mail, Instagram), kolommen, de credit met link, en als
   afsluiter het logo groot op een wit daklicht met blauw L-bord dat op het dak van de lesauto staat (zoals op de foto's
   van de auto). Bij hover gaat het daklicht "aan" en wiebelt het L-bord. */
.rm-footer { padding-bottom: 0; overflow: hidden; }
.rm-footer__tegels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 56px; padding: 0; list-style: none; }
.rm-footer__tegels a { display: flex; align-items: center; gap: 14px; height: 100%; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
    background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background-color .25s, border-color .25s, transform .45s var(--veer); }
.rm-footer__tegels a:hover, .rm-footer__tegels a:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(163, 230, 53, .6); text-decoration: none; transform: translateY(-3px); }
.rm-footer__tegels .rm-footer__ico { width: 44px; height: 44px; }
.rm-footer__tegels .rm-footer__ico svg { width: 20px; height: 20px; }
.rm-footer__tegels a:hover .rm-footer__ico { background: var(--lime); color: #12181a; transform: rotate(-10deg) scale(1.06); }
.rm-footer__tegeltekst { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rm-footer__label { font: 600 14.5px/1.3 var(--font-display); letter-spacing: -0.01em; color: #fff; }
.rm-footer__waarde { overflow: hidden; color: var(--text-muted); font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.rm-footer__pijl { flex: none; margin-left: auto; color: var(--text-faint); transition: color .25s, transform .3s ease; }
.rm-footer__tegels a:hover .rm-footer__pijl { color: var(--lime); transform: translateX(3px) rotate(-45deg); }
.rm-footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; margin-bottom: 40px; }
.rm-footer__tag { margin-top: 0; font-size: 1rem; }
.rm-footer__bord { margin-top: 18px; }
.rm-footer__reg { margin: 0; font-size: .92rem; }
.rm-footer__reg div { display: flex; gap: 12px; margin-bottom: 8px; }
.rm-footer__reg dt { flex: none; width: 82px; color: var(--text-faint); }
.rm-footer__reg dd { margin: 0; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rm-footer__credit a { color: #fff; text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) 50% 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size .3s ease, color .2s; }
.rm-footer__credit a:hover { color: var(--lime); text-decoration: none; background-size: 100% 2px; }
.rm-footer__credit strong { font-weight: 700; }

/* Daklicht met het grote logo */
.rm-footer__daklicht { position: relative; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px); width: min(100%, 960px); margin: 64px auto 0; padding-bottom: 14px; }
.rm-footer__dakbord { position: relative; flex: 1 1 auto; padding: clamp(16px, 3vw, 34px) clamp(22px, 5vw, 64px); border-radius: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 10px 10px;
    background: linear-gradient(180deg, #fff 0%, #f1f4ec 100%);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06), inset 0 2px 0 #fff, 0 30px 60px -28px rgba(0, 0, 0, .9); transition: box-shadow .5s ease; }
.rm-footer__dakbord img { display: block; width: 100%; height: auto; }
.rm-footer__dakl { flex: none; display: grid; place-items: center; width: clamp(54px, 11vw, 132px); aspect-ratio: 1; border-radius: clamp(8px, 1.2vw, 14px); background: var(--blauw); color: #fff;
    font: 800 clamp(34px, 7vw, 86px)/1 var(--font-body); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .15), 0 24px 40px -22px rgba(0, 0, 0, .9); transform: rotate(3deg); transform-origin: 50% 100%; }
.rm-footer__voet { position: absolute; bottom: 0; width: clamp(40px, 7vw, 72px); height: 14px; border-radius: 3px 3px 6px 6px; background: linear-gradient(180deg, #2a3337, #05080a); }
.rm-footer__voet--1 { left: 22%; }
.rm-footer__voet--2 { left: 56%; }
.rm-footer__dak { height: clamp(46px, 7vw, 90px); margin: 0 -2%; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: radial-gradient(45% 140% at 50% 0%, #3a4549 0%, #1d2427 45%, #0b1012 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12); }
@media (hover: hover) {
    .rm-footer__daklicht:hover .rm-footer__dakbord { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06), inset 0 2px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .6), 0 0 60px 6px rgba(255, 255, 255, .22), 0 30px 60px -28px rgba(0, 0, 0, .9); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rm-footer__daklicht:hover .rm-footer__dakl { animation: rm-dakl-wiebel .9s var(--veer); }
}
@keyframes rm-dakl-wiebel { 0% { transform: rotate(3deg); } 30% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } 100% { transform: rotate(3deg); } }
@media (max-width: 1000px) { .rm-footer__tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .rm-footer__tegels { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
    .rm-footer__daklicht { margin-top: 44px; padding-bottom: 10px; }
    .rm-footer__voet { height: 10px; }
    .rm-footer__bar { flex-direction: column; gap: 6px; }
}
/* L-bord vast aan het daklicht, zoals op de lesauto: half over de rechterrand en even hoog als het bord. */
.rm-footer__daklicht { gap: 0; }
.rm-footer__dakl { position: relative; z-index: 1; width: clamp(56px, 13vw, 156px); margin-left: calc(-1 * clamp(10px, 2.2vw, 26px)); border: clamp(2px, .35vw, 4px) solid #fff; }
@media (max-width: 1000px) { .rm-footer__grid { grid-template-columns: 1fr 1fr; } .rm-footer__grid > .rm-footer__merk { grid-column: 1 / -1; } }
@media (max-width: 620px) { .rm-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } .rm-footer__grid > .rm-footer__merk { grid-column: auto; } .rm-footer__reg dt { width: 72px; } }

/* ===== Footer: credit groot onder de gegevens en witte iconen (wens CT 19-10) ===== */
.rm-footer__credit { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.rm-footer__credit span { display: block; margin-bottom: 4px; color: var(--text-faint); font-size: .9rem; }
.rm-footer__credit a { display: inline-block; color: #fff; font: 700 clamp(1.35rem, 2.2vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.02em; text-decoration: none;
    background: linear-gradient(var(--lime), var(--lime)) 0 100% / 0 3px no-repeat; padding-bottom: 4px; transition: background-size .35s ease, color .2s; }
.rm-footer__credit a:hover { color: var(--lime); text-decoration: none; background-size: 100% 3px; }
/* Witte iconen: footertegels op een licht glazen rondje, contactkaarten (contactsectie) op een lime rondje. */
.rm-footer__tegels .rm-footer__ico { background: rgba(255, 255, 255, .12); color: #fff; }
.rm-footer__tegels a:hover .rm-footer__ico { background: var(--lime); color: #fff; }
.contactkaart__ico { background: linear-gradient(150deg, var(--lime) 0%, var(--lime-deep) 100%); color: #fff; }

/* ===== Contacttegel "Proefles aanvragen" creatiever (wens CT 19-10) =====
   Niet meer alles gecentreerd onder elkaar: links de kop, tekst, de proefles-badge en het klantbewijs (zoals in de
   hero) met daaronder de contactkaarten; rechts het formulier op een glazen plaatje dat schuin achter de kaart ligt.
   Onderin de tegel loopt een weg van een blauw L-bord (start) naar een geblokte finish; de middenstreep rijdt bij hover.
   Telefoon en tablet: tekst, formulier, contactkaarten onder elkaar. */
.cta-card--route { padding: clamp(40px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(96px, 9vw, 116px); text-align: left; }
.cta-card--route::before { background: linear-gradient(100deg, rgba(9, 12, 14, .94) 0%, rgba(9, 12, 14, .86) 45%, rgba(9, 12, 14, .62) 100%), radial-gradient(620px 320px at 90% -10%, rgba(163, 230, 53, .22), transparent 60%); }
.cta-card__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); grid-template-areas: "tekst form" "contact form"; gap: 30px 60px; align-items: start; }
.cta-card__tekst { grid-area: tekst; }
.cta-card__form { grid-area: form; position: relative; }
.cta-card__contact { grid-area: contact; align-self: end; }
.cta-card--route h2 { max-width: 520px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.12; }
.cta-card--route .cta-card__tekst > p { max-width: 500px; margin: 16px 0 24px; font-size: 1.05rem; line-height: 1.7; }
.cta-card__bewijs { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-card__bewijs .rm-bewijs { margin: 0; }
.cta-card__badge { font-size: 12.5px; padding: 6px 14px 6px 9px; }
.cta-card__plaat { position: absolute; inset: 18px -16px -18px 16px; z-index: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: rotate(2deg); transition: transform .6s var(--veer); }
.cta-card__form:hover .cta-card__plaat { transform: rotate(3.5deg) translate(4px, 2px); }
.cta-card--route .aanvraag { position: relative; z-index: 1; max-width: none; margin: 0; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, .2), 0 40px 70px -30px rgba(0, 0, 0, .95); }
.cta-card--route .cta-card__of { margin: 0 0 12px; text-align: left; }
.cta-card--route .contactkaarten { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0; gap: 10px; }
.cta-card--route .contactkaart { padding: 12px 14px; }
/* De weg onderin met start (L-bord) en finish. */
.cta-card__weg { position: absolute; left: 0; right: 0; bottom: clamp(26px, 3vw, 36px); z-index: 2; height: 34px; background: #2a3337;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 10px 22px -10px rgba(0, 0, 0, .8); }
.cta-card__weg::before { content: ""; position: absolute; top: 16px; left: 70px; right: 40px; height: 2px; background: repeating-linear-gradient(90deg, var(--lime) 0 14px, transparent 14px 26px); opacity: .9; }
.cta-card__weg::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: repeating-conic-gradient(#fff 0 25%, #1d2427 0 50%) 0 0 / 17px 17px; }
@media (prefers-reduced-motion: no-preference) { .cta-card--route:hover .cta-card__weg::before { animation: rm-cta-weg 1s linear infinite; } }
@keyframes rm-cta-weg { to { background-position: 26px 0; } }
.cta-card__start { position: absolute; left: clamp(18px, 4vw, 40px); top: 50%; display: grid; place-items: center; width: 38px; height: 38px; border: 3px solid #fff; border-radius: 8px;
    background: var(--blauw); color: #fff; font: 800 19px/1 var(--font-body); box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .5); transform: translateY(-50%) rotate(-4deg); }
@media (max-width: 1000px) {
    .cta-card__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "form" "contact"; gap: 30px; }
    .cta-card--route .contactkaarten { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cta-card__plaat { inset: 12px -8px -12px 8px; }
}
@media (max-width: 760px) { .cta-card--route .contactkaarten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
    .cta-card--route { padding: 32px 16px 84px; }
    .cta-card--route .aanvraag { padding: 20px 16px 18px; }
    .cta-card__plaat { inset: 10px -6px -10px 6px; }
    .cta-card__weg { height: 28px; bottom: 22px; }
    .cta-card__weg::before { top: 13px; left: 56px; right: 34px; }
    .cta-card__weg::after { width: 28px; height: 28px; background-size: 14px 14px; }
    .cta-card__start { width: 32px; height: 32px; font-size: 16px; }
}
/* Contactkaarten op desktop als rij over de hele breedte onder tekst en formulier. */
@media (min-width: 1001px) {
    .cta-card__raster { grid-template-areas: "tekst form" "contact contact"; align-items: center; row-gap: 44px; }
    .cta-card--route .contactkaarten { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cta-card--route .cta-card__of { margin-bottom: 14px; }
}
.cta-card > .cta-card__weg { position: absolute; }

/* ===== Formuliertegels netjes uitgelijnd (wens CT 19-10) =====
   Elke keuzevraag in twee gelijke kolommen; staat er een oneven tegel achteraan (zoals "Weet ik niet"), dan loopt die
   over de hele breedte. Drie smalle tegels naast elkaar braken "Weet ik niet" over twee regels. */
.wiz__stap .wpcf7-radio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wiz__stap .wpcf7-radio .wpcf7-list-item.last:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 521px) { .wiz__stap .wpcf7-radio .wpcf7-list-item-label { white-space: nowrap; } }

/* ===== Blauw bord achter "Rijschool" in de herotitel (wens CT 19-10) =====
   Zoals een plaatsnaambord: blauw vlak met een dunne witte binnenrand, licht schuin. Springt licht op bij het inlopen. */
.hero h1 .bordwoord { display: inline-block; margin: 0 .06em .08em -.04em; padding: .04em .2em .1em; border: .045em solid var(--blauw); border-radius: .14em; background: var(--blauw); color: #fff;
    text-shadow: none; box-shadow: inset 0 0 0 .035em #fff, 0 .12em .3em -.08em rgba(0, 0, 0, .55); transform: rotate(-2deg); line-height: 1; }
@media (prefers-reduced-motion: no-preference) { .js .hero h1.reveal.is-visible .bordwoord { animation: rm-bordwoord .7s var(--veer) .25s both; } }
@keyframes rm-bordwoord { from { transform: rotate(-9deg) scale(.85); } to { transform: rotate(-2deg) scale(1); } }
/* Blauw vinkje achter "doorstart" in plaats van ervoor (wens CT 19-10). */
.heroform__badge { padding: 5px 8px 5px 13px; }
.cta-card__badge { padding: 6px 9px 6px 14px; }

/* ===== Herofoto naar links (wens CT 19-10) =====
   Het daklicht met logo viel achter het formulier. De foto is iets groter dan de hero en schuift naar links, zodat
   logo en L-bord tussen kop en formulier in beeld komen; het donkere verloop is in het midden iets lichter. */
@media (min-width: 901px) {
    .hero { background-size: auto, 135% auto; background-position: 0 0, 88% 60%; }
}
.hero { background-image:
        linear-gradient(101deg, rgba(11, 15, 17, .94) 0%, rgba(11, 15, 17, .84) 34%, rgba(11, 15, 17, .62) 56%, rgba(11, 15, 17, .76) 100%),
        url('assets/img/hero-straat-1600.webp'); }
@media (max-width: 1300px) {
    .hero { background-image:
        linear-gradient(101deg, rgba(11, 15, 17, .94) 0%, rgba(11, 15, 17, .84) 34%, rgba(11, 15, 17, .62) 56%, rgba(11, 15, 17, .76) 100%),
        url('assets/img/hero-straat-1000.webp'); }
}
@media (max-width: 900px) {
    .hero { background-image:
        linear-gradient(180deg, rgba(11, 15, 17, .92) 0%, rgba(11, 15, 17, .86) 45%, rgba(11, 15, 17, .94) 100%),
        url('assets/img/hero-straat-mobiel-1200.webp'); }
}
/* Pakketkaarten: tussen 1001 en 1200 px pasten vier kaarten niet (horizontale scroll); dan twee per rij. */
@media (min-width: 1001px) and (max-width: 1200px) { .prijzen .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Bedankscherm in de formulierkaart (wens CT 19-10, zoals BatterijDock) =====
   Na het versturen verdwijnen de stappen en staat in dezelfde kaart meteen dat de aanvraag binnen is: een groen rondje
   met een vinkje dat zich tekent, "Bedankt, Lisa!", het telefoonnummer waarop we bellen en de keuzes als klein
   rijbewijs-pasje. De melding van Contact Form 7 onder de knop is dan overbodig. Tijdens het versturen staat er
   "Versturen..." op de knop en rijdt de weg sneller. Turnstile staat vlak boven de knop en is meestal onzichtbaar. */
.wiz.is-klaar > :not(.wiz__klaar) { display: none !important; }
.aanvraag .wpcf7-form.sent .wpcf7-response-output, .aanvraag .wpcf7-form:has(.wiz.is-klaar) .wpcf7-response-output { display: none !important; }
.wiz__klaar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 2px 4px; text-align: center; outline: none; }
.wiz__klaar[hidden] { display: none; }
.wiz__vink { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #5a9e12; color: #fff;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 30%, #fff), 0 12px 26px -10px rgba(90, 158, 18, .8); }
.wiz__vink svg { width: 32px; height: 32px; stroke-dasharray: 24; stroke-dashoffset: 0; }
.wiz__klaar-titel { margin: 6px 0 0; font: 700 1.45rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.wiz__klaar-tekst { max-width: 38ch; margin: 0; color: var(--body); font-size: .98rem; line-height: 1.6; }
.wiz__klaar-tekst strong { color: var(--ink); white-space: nowrap; }
.wiz__samenvatting { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; width: 100%; max-width: 420px; margin: 4px 0 0; padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--lime) 45%, #fff); border-radius: 16px; text-align: left;
    background: linear-gradient(135deg, #f7fdec 0%, #e6f6c9 100%); }
.wiz__samenvatting:empty { display: none; }
.wiz__samenvatting dt { color: #56635a; font-size: .82rem; line-height: 1.5; }
.wiz__samenvatting dd { margin: 0; color: var(--ink); font-weight: 600; font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.wiz__klaar-noot { margin: 0; color: var(--muted); font-size: .85rem; }
.wiz__klaar-knoppen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 4px; }
.wiz__opnieuw { padding: 6px 2px; border: 0; background: none; color: var(--lime-deep); font: 600 .9rem/1.3 var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wiz__klaar-lokaal { margin: 0; padding: 6px 12px; border-radius: 8px; background: #fff4d6; color: #7a5200; font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) {
    .wiz__klaar:not([hidden]) { animation: rm-klaar-in .5s cubic-bezier(.2, .7, .2, 1) both; }
    .wiz__klaar:not([hidden]) .wiz__vink { animation: rm-vink-pop .6s var(--veer) .05s both; }
    .wiz__klaar:not([hidden]) .wiz__vink svg { animation: rm-vink-teken .45s ease-out .3s both; }
}
@keyframes rm-klaar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rm-vink-pop { from { transform: scale(.5); } to { transform: scale(1); } }
@keyframes rm-vink-teken { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.rm-turnstile { margin: 4px 0 10px; }
.rm-turnstile:empty { margin: 0; }
/* Instagram-knop rechtsonder, als laatste onder WhatsApp en bellen (wens CT 19-10). Kleuren van het Instagram-icoon zelf, zodat hij direct herkenbaar is. */
.fab__insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; }