/* vcaexamen.app — promotiesite. Ontwerp: design_handoff_vca_website (desktop 1440, mobiel 390). */

/* ---------- Lettertypen (woff2-subsets, tools/site_assets.py) ---------- */
@font-face { font-family: Figtree; src: url(fonts/figtree-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Figtree; src: url(fonts/figtree-800.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url(fonts/notosans-400.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url(fonts/notosans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url(fonts/notosans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url(fonts/notosans-800.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url(fonts/notosansarabic-400.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url(fonts/notosansarabic-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url(fonts/notosansarabic-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url(fonts/notosansarabic-800.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
    --primair: #47a3af;
    --primair-donker: #2f7b86;
    --teal: #2c7f8c;
    --teal-tekst: #175560;
    --teal-tekst-2: #14535d;
    --donkerteal: #1b616d;
    --accent: #1aa7cc;
    --vlak-zacht: #e8f4f5;
    --vlak-zacht-2: #f4fafb;
    --vlak: #f5f8f8;
    --rand-teal: #cfe4e6;
    --rand: #dfe9ea;
    --rand-licht: #e6eeef;
    --tekst: #0f1e21;
    --tekst-2: #3d5256;
    --tekst-3: #4a5f63;
    --tekst-4: #5b6f72;
    --tekst-lijf: #233b3f;
    --goed-tekst: #12433a; --goed-vlak: #eaf6ee; --goed-rand: #1d6d5f; --goed-rand-zacht: #bcddc8;
    --fout-tekst: #7c2d1b; --fout-vlak: #fbeae6; --fout-rand: #b4402a; --fout-rand-zacht: #edbcaf;
    --let-tekst: #8a5216; --let-vlak: #fdf0e6; --let-rand: #f0d3b6;
    --voet: #0f1e21; --voet-tekst: #cfdadb;
    --knop: linear-gradient(160deg, #4fb0bc, #2c7f8c);
    --knop-hover: linear-gradient(160deg, #42a0ac, #25707c);
    --cta: linear-gradient(160deg, #1b616d, #2c7f8c);
    --schaduw-kaart: 0 4px 14px rgba(23, 85, 96, .07);
    --schaduw-knop: 0 4px 12px rgba(37, 110, 121, .25);
    --schaduw-knop-hover: 0 6px 18px rgba(37, 110, 121, .34);
    --schaduw-menu: 0 8px 20px rgba(15, 30, 33, .12);
    --marge: 56px;
    --sectie: 64px;
    --font: Figtree, "Noto Sans", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lh-tekst: 1.6;
    --lh-kop: 1.1;
}
.schrift-cyrillisch { --font: "Noto Sans", Figtree, system-ui, sans-serif; }
.schrift-arabisch { --font: "Noto Sans Arabic", Figtree, "Noto Sans", system-ui, sans-serif; }
.schrift-latijn, .schrift-cyrillisch, .schrift-arabisch { font-family: var(--font); }
html.schrift-arabisch { --lh-tekst: 1.85; --lh-kop: 1.4; }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 20px; }
body { margin: 0; background: #fff; color: var(--tekst); font: 400 16px/var(--lh-tekst) var(--font); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-tekst); }
h1, h2, h3 { margin: 0; font-weight: 800; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
h1 { font-size: 52px; line-height: var(--lh-kop); letter-spacing: -.03em; }
h2 { font-size: 34px; line-height: 1.2; letter-spacing: -.02em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
html.schrift-arabisch * { letter-spacing: 0 !important; }
[hidden] { display: none !important; }

.breed { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--marge); }
.blok { margin-top: var(--sectie); }
.blok > h2 { margin-bottom: 28px; }
.naar-inhoud { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; box-shadow: var(--schaduw-menu); }
.naar-inhoud:focus { top: 12px; }
.klein { font-size: 14px; line-height: 1.5; color: var(--tekst-4); }
.lead { font-size: 18.5px; line-height: var(--lh-tekst); color: var(--tekst-2); max-width: 720px; }
.bodytekst { font-size: 17px; line-height: var(--lh-tekst); color: var(--tekst-2); }
.tekstlink { font-weight: 600; font-size: 16px; white-space: nowrap; }
.pijl { color: var(--teal); font-size: 22px; line-height: 1; }
[dir="rtl"] .pijl { transform: scaleX(-1); }

/* ---------- Knoppen ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--knop); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: var(--schaduw-knop); cursor: pointer; transition: box-shadow .15s ease; text-align: center; }
.knop:hover { background: var(--knop-hover); color: #fff; box-shadow: var(--schaduw-knop-hover); }
.knop--secundair { background: var(--vlak-zacht-2); color: var(--teal-tekst); border: 2px solid var(--teal); box-shadow: none; }
.knop--secundair:hover { background: var(--vlak-zacht); color: var(--teal-tekst); box-shadow: none; }
.knop--licht { background: #fff; color: var(--teal-tekst); border: 1px solid var(--rand-teal); box-shadow: none; }
.knop--licht:hover { background: #fff; color: var(--teal-tekst); border-color: var(--teal); box-shadow: none; }
.knop--kop { min-height: 42px; padding: 0 18px; border-radius: 10px; font-size: 14px; }
.knop-kort { display: none; }

/* ---------- Kop ---------- */
.kop { background: #fff; border-bottom: 1px solid var(--rand-licht); position: relative; z-index: 20; }
.kop-binnen { max-width: 1440px; margin: 0 auto; height: 76px; padding-inline: var(--marge); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.kop-links { display: flex; align-items: center; gap: 40px; min-width: 0; }
.kop-nav { display: flex; gap: 26px; }
.kop-nav a { color: var(--tekst); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.kop-nav a:hover { color: var(--teal-tekst); }
.kop-nav a[aria-current="page"] { color: var(--teal-tekst); border-bottom-color: var(--teal); }
.kop-rechts { display: flex; align-items: center; gap: 14px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; flex: none; }
.logo:hover { color: var(--tekst); }
.logo-merk { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(150deg, #1aa7cc, #2c7f8c); color: #fff; display: flex; align-items: center; justify-content: center; font: 800 12px/1 Figtree, sans-serif; letter-spacing: 0; flex: none; }
.logo-naam { font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }

.vlag { width: 20px; height: 14px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(15, 30, 33, .14); flex: none; }
.vlag--mini { width: 18px; height: 13px; }
.vlag--middel { width: 25px; height: 18px; }
.vlag--groot { width: 36px; height: 26px; border-radius: 4px; }

/* Taalkiezer */
.taalkiezer { position: relative; }
.taalkiezer summary { list-style: none; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border: 1px solid var(--rand-teal); border-radius: 10px; background: var(--vlak-zacht-2); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.taalkiezer summary::-webkit-details-marker, .menu summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.taalkiezer summary:hover { border-color: var(--teal); }
.taalkiezer-code { display: none; }
.taalkiezer-pijl { color: var(--teal-tekst); font-size: 12px; transition: transform .15s ease; }
.taalkiezer[open] .taalkiezer-pijl { transform: rotate(180deg); }
.taalkiezer-lijst { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 440px; max-height: min(70vh, 560px); overflow-y: auto; background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schaduw-menu); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.taalkiezer-lijst a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 9px; color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 15px; }
.taalkiezer-lijst a:hover { background: var(--vlak-zacht-2); color: var(--tekst); }
.taalkiezer-lijst a[aria-current] { background: var(--vlak-zacht); color: var(--teal-tekst-2); }
.taalkiezer-vink { margin-inline-start: auto; color: var(--teal); }

/* Menu (mobiel en smal) */
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.menu-icoon, .menu-icoon::before, .menu-icoon::after { display: block; width: 20px; height: 2px; background: var(--tekst); border-radius: 2px; position: relative; transition: transform .2s ease, background .2s ease; }
.menu-icoon::before, .menu-icoon::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-icoon::before { top: -6px; }
.menu-icoon::after { top: 6px; }
.menu[open] .menu-icoon { background: transparent; }
.menu[open] .menu-icoon::before { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu-icoon::after { transform: translateY(-6px) rotate(-45deg); }
.menu-paneel { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--rand); border-radius: 16px; box-shadow: var(--schaduw-menu); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.menu-paneel nav { display: flex; flex-direction: column; }
.menu-paneel nav a { min-height: 48px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; color: var(--tekst); font-weight: 600; font-size: 16px; text-decoration: none; }
.menu-paneel nav a:hover, .menu-paneel nav a[aria-current="page"] { background: var(--vlak-zacht); color: var(--teal-tekst-2); }

/* ---------- Store-badges en QR ---------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge { display: block; line-height: 0; border-radius: 8px; }
.badge img { height: 56px; width: auto; }
.badges--klein .badge img { height: 50px; }
.hero-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.qr { display: flex; align-items: center; gap: 12px; }
.qr img { width: 76px; height: 76px; border-radius: 10px; border: 1px solid var(--rand-teal); padding: 4px; background: #fff; }
.qr p { font-weight: 500; font-size: 13px; line-height: 1.35; color: var(--tekst-3); max-width: 120px; }

/* ---------- Telefoonmockup ---------- */
.toestel { width: 320px; padding: 11px; border-radius: 46px; background: #0f1e21; box-shadow: 0 22px 50px rgba(15, 30, 33, .28); flex: none; }
.toestel img { width: 100%; height: auto; border-radius: 36px; }
.toestel--sub { width: 280px; padding: 10px; border-radius: 40px; box-shadow: 0 18px 44px rgba(15, 30, 33, .26); }
.toestel--sub img { border-radius: 32px; }

/* ---------- Home: hero ---------- */
.hero { background: linear-gradient(180deg, #e9f5f6 0%, #f6fbfc 70%, #fff 100%); }
.hero-binnen { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.hero-tekst { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero-tekst h1 { max-width: 620px; }
.hero-beeld { display: flex; justify-content: center; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--rand-teal); font-weight: 600; font-size: 13px; color: var(--teal-tekst); }
.intro { font-size: 19px; line-height: 1.55; color: var(--tekst-2); max-width: 560px; }
.intro--mobiel { display: none; }

.vertrouwen { margin-top: -10px; }
.vertrouwen-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid var(--rand-teal); border-radius: 16px; padding: 18px 28px; box-shadow: 0 4px 16px rgba(23, 85, 96, .08); }
.vertrouwen-balk li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; }
.vertrouwen-balk li + li::before { content: ""; width: 1px; height: 26px; background: #e2ecee; margin-inline-end: 10px; flex: none; }
.vertrouwen-balk li { flex: 1; justify-content: center; }
.vertrouwen-balk li:first-child { justify-content: flex-start; }
.vertrouwen-balk li:last-child { justify-content: flex-end; }
.vink { color: var(--teal); font-size: 18px; }
.vertrouwen-chips { display: none; }

/* Zo werkt het */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stap { background: #fff; border: 1px solid var(--rand); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.stap > div { display: flex; flex-direction: column; gap: 12px; }
.stap h3 { font-size: 20px; }
.stap p { font-size: 16px; line-height: 1.5; color: var(--tekst-3); }
.stap-nummer { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(150deg, #4fb0bc, #2c7f8c); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; flex: none; }
.stap--2 { border-color: #dce8ef; }
.stap--2 .stap-nummer { background: linear-gradient(150deg, #3f7f9c, #26536d); }
.stap--3 { border-color: #efe0d0; }
.stap--3 .stap-nummer { background: linear-gradient(150deg, #d98a33, #a75f16); }
.stap-kort { display: none; }

/* B-VCA en VOL-VCA */
.examenkaarten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.examenkaart { border: 1px solid #d7e7e9; border-radius: 22px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.examenkaart--volvca { border-color: #dae0e6; }
.examenkaart-kop { background: linear-gradient(155deg, #1b616d, #47a3af); padding: 26px 28px; color: #fff; }
.examenkaart--volvca .examenkaart-kop { background: linear-gradient(155deg, #16333d, #2e5a6b); }
.examenkaart-kop h3 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.examenkaart-sub { font-size: 16px; color: #d5eef1; }
.examenkaart--volvca .examenkaart-sub, .examenkaart--volvca .examenkaart-kort { color: #cfe0e6; }
.examenkaart-kort { display: none; font-size: 14px; color: #d5eef1; }
.examenkaart-lijf { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.examenkaart-regels { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--tekst-lijf); }
.examenkaart-prijs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; }
.examenkaart-prijs strong { font-size: 26px; font-weight: 800; }
.examenkaart-prijs span { font-weight: 500; font-size: 14px; color: var(--tekst-4); }
.prijs-kort { display: none; }

/* Functies */
.functies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.functie { background: var(--vlak); border: 1px solid #e4eced; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.functie h3 { font-size: 18px; }
.functie p { font-size: 15.5px; line-height: 1.5; color: var(--tekst-3); }

/* Voorbeeldvraag */
.demo-blok { background: linear-gradient(160deg, #e9f5f6, #f8fcfd); border: 1px solid var(--rand-teal); border-radius: 24px; padding: 36px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.demo-intro { display: flex; flex-direction: column; gap: 14px; }
.demo-intro h2 { font-size: 30px; }
.demo-intro p { font-size: 16.5px; line-height: 1.55; color: var(--tekst-2); }
.demo-intro .klein { font-size: 14px; color: var(--tekst-4); }
.demo { background: #fff; border: 1px solid #d7e7e9; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.demo-kop { display: flex; align-items: flex-start; gap: 12px; }
.demo-vraag { flex: 1; font-weight: 700; font-size: 19px; line-height: 1.4; }
.demo-luister { width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; background: var(--knop); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.demo-luister:hover { filter: brightness(1.06); }
.demo-luister.speelt { background: var(--knop-hover); box-shadow: 0 0 0 4px rgba(44, 127, 140, .2); }
[dir="rtl"] .demo-luister svg { transform: scaleX(-1); }
.demo-hint { font-weight: 600; font-size: 13.5px; color: var(--tekst-4); }
.demo-opties { display: flex; flex-direction: column; gap: 10px; }
.demo-optie { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--rand); font-weight: 500; font-size: 15.5px; line-height: 1.45; text-align: start; cursor: pointer; width: 100%; transition: border-color .15s ease, opacity .15s ease; }
.demo-optie:hover { border-color: var(--teal); }
.demo-optie-tekst { flex: 1; }
.demo-optie-merk { font-weight: 700; font-size: 14px; white-space: nowrap; }
.demo-optie.is-goed { background: var(--goed-vlak); border: 2px solid var(--goed-rand); color: var(--goed-tekst); font-weight: 600; padding: 13px 15px; }
.demo-optie.is-fout { background: var(--fout-vlak); border: 2px solid var(--fout-rand); color: var(--fout-tekst); font-weight: 600; padding: 13px 15px; }
.demo-optie.is-gedimd { opacity: .6; }
.demo-uitleg { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.demo-uitleg.is-goed { background: var(--goed-vlak); border: 1px solid var(--goed-rand-zacht); color: var(--goed-tekst); }
.demo-uitleg.is-fout { background: var(--fout-vlak); border: 1px solid var(--fout-rand-zacht); color: var(--fout-tekst); }
.demo-uitleg-titel { font-weight: 700; font-size: 16px; }

/* Talenraster */
.blok-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.blok-kop > div { display: flex; flex-direction: column; gap: 8px; }
.blok-intro { font-size: 16.5px; line-height: 1.5; color: var(--tekst-2); max-width: 640px; }
.talenraster { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.taaltegel { display: flex; align-items: center; gap: 10px; min-height: 52px; background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; font-weight: 600; font-size: 16px; color: var(--tekst); text-decoration: none; }
a.taaltegel:hover { border-color: var(--teal); color: var(--tekst); }
.taaltegel--totaal { background: var(--vlak-zacht-2); border: 1px dashed #9fc4c9; color: var(--teal-tekst); }

/* Tekstblok (SEO-tekst) */
.tekstblok { max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.tekstblok h2 { margin-bottom: 4px; }
.tekstblok p { font-size: 17.5px; line-height: 1.7; color: var(--tekst-2); }

/* Prijzen */
.prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.prijskaart { background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.prijskaart h3 { font-size: 18px; }
.prijskaart p { font-size: 15.5px; line-height: 1.5; color: var(--tekst-3); }
.prijskaart .prijskaart-bedrag { font-weight: 800; font-size: 32px; line-height: 1.2; color: var(--tekst); }
.prijskaart--uitgelicht { border: 2px solid var(--teal); box-shadow: 0 6px 20px rgba(23, 85, 96, .12); padding: 25px; }
.prijskaart--klein { padding: 22px; gap: 2px; flex: 1; }
.prijskaart--klein.prijskaart--uitgelicht { padding: 21px; box-shadow: none; }
.prijskaart-label { font-weight: 700; font-size: 16px; color: var(--tekst-3) !important; }
.prijskaart--klein .prijskaart-bedrag { font-size: 30px; }
.prijsduo { display: flex; gap: 16px; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq--smal { max-width: 900px; }
.faq-item { border: 1px solid var(--rand); border-radius: 14px; background: #fff; overflow: hidden; }
.faq-item summary { list-style: none; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 700; font-size: 17px; line-height: 1.4; min-height: 44px; }
.faq-item summary:hover { background: var(--vlak-zacht-2); }
.faq-teken { position: relative; width: 14px; height: 14px; flex: none; }
.faq-teken::before, .faq-teken::after { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--teal); transition: transform .25s ease; }
.faq-teken::after { transform: rotate(90deg); }
.faq-item[open] .faq-teken::after { transform: rotate(0deg); }
.faq-antwoord { padding: 0 22px 20px; font-size: 16px; line-height: var(--lh-tekst); color: var(--tekst-2); }
.faq-item[open] .faq-antwoord { animation: faq-open .25s ease; }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-meer { margin-top: 18px; }

/* Afsluitende CTA */
.cta { border-radius: 24px; background: var(--cta); padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; color: #fff; }
.cta-tekst { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.cta-titel { font-weight: 800; font-size: 32px; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.cta-tekst p { font-size: 17px; line-height: 1.5; color: #dceff2; }
.cta .badges { flex-wrap: nowrap; flex: none; }

/* ---------- Voet ---------- */
.voet { margin-top: var(--sectie); background: var(--voet); color: var(--voet-tekst); }
.voet-binnen { max-width: 1440px; margin: 0 auto; padding: 48px var(--marge) 36px; display: flex; flex-direction: column; gap: 32px; }
.voet-kolommen { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.voet-merk { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.6; }
.logo--voet { color: #fff; }
.logo--voet:hover { color: #fff; }
.logo--voet .logo-merk { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
.logo--voet .logo-naam { font-size: 16px; }
.voet-lijst { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.voet-lijst a { color: var(--voet-tekst); text-decoration: none; }
.voet-lijst a:hover { color: #fff; text-decoration: underline; }
.voet-kop { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 2px; }
.voet-talen { display: flex; flex-wrap: wrap; gap: 8px; }
.voet-lijst .voet-taal { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #33484c; border-radius: 8px; font-weight: 500; font-size: 13px; }
.voet-lijst .voet-taal:hover { border-color: var(--primair); text-decoration: none; }
.voet-onder { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 20px; border-top: 1px solid #243a3e; font-size: 12.5px; line-height: 1.45; }
.voet-onder a { color: var(--voet-tekst); }

.downloadbalk { display: none; }

/* ---------- Subpagina's ---------- */
.kruimel { padding-top: 20px; font-weight: 500; font-size: 14px; color: var(--tekst-4); }
.kruimel ol { display: flex; flex-wrap: wrap; gap: 6px; }
.kruimel li { display: flex; align-items: center; gap: 6px; }
.kruimel li + li::before { content: "\203A"; color: var(--tekst-4); }
[dir="rtl"] .kruimel li + li::before { content: "\2039"; }
.kruimel a { color: var(--tekst-4); text-decoration: none; }
.kruimel a:hover { color: var(--teal-tekst); text-decoration: underline; }
.kruimel [aria-current] { color: var(--tekst); }

.subhero { background: linear-gradient(180deg, #f2f9fa, #fff 70%); }
.subhero-binnen { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; padding-top: 26px; padding-bottom: 56px; }
.subhero-tekst { display: flex; flex-direction: column; gap: 20px; }
.subhero h1 { font-size: 46px; max-width: 760px; }
.subhero .lead { max-width: 660px; }
.subhero-beeld { display: flex; justify-content: center; }
.subhero--tekst { background: linear-gradient(180deg, #f2f9fa, #fff 80%); }
.subhero-smal { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; padding-bottom: 44px; }
.subhero-smal .lead { max-width: 800px; }
.badges--hero { margin-top: 4px; }

.cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; }
.cijfer { background: linear-gradient(140deg, #e9f5f6, #f8fcfd); border: 1px solid var(--rand-teal); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.cijfer dt { font-weight: 800; font-size: 34px; letter-spacing: -.02em; line-height: 1.2; }
.cijfer dd { margin: 0; font-weight: 500; font-size: 16px; color: var(--tekst-2); }

.twee-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.kolom { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kolom h2, .donkerblok h2, .tekstblok h2 { font-size: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 14px; border-radius: 10px; background: var(--vlak); border: 1px solid #e4eced; font-weight: 600; font-size: 15px; }
.vormen { display: flex; flex-direction: column; gap: 12px; }
.vorm { background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 18px 20px; }
.vorm h3 { font-size: 18px; }
.vorm p { font-size: 15.5px; line-height: 1.5; color: var(--tekst-3); }

.donkerblok { background: var(--cta); border-radius: 24px; padding: 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.donkerblok-tekst { display: flex; flex-direction: column; gap: 14px; }
.donkerblok h2 { color: #fff; }
.donkerblok-tekst p { font-size: 17px; line-height: var(--lh-tekst); color: #dceff2; }
.donkerblok-punten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.donkerblok-punten li { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); border-radius: 14px; padding: 16px; color: #fff; font-weight: 600; font-size: 15.5px; line-height: 1.4; }

.let-op { display: flex; align-items: center; gap: 10px; background: var(--let-vlak); border: 1px solid var(--let-rand); border-radius: 14px; padding: 14px 16px; font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--let-tekst); }

.leesverder { border: 1px dashed #9fc4c9; background: linear-gradient(140deg, #e9f5f6, #fbfefe); border-radius: 20px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.leesverder > div { display: flex; flex-direction: column; gap: 6px; }
.leesverder-titel { font-weight: 700; font-size: 20px; letter-spacing: 0; }
.leesverder-links { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 16px; color: var(--tekst-3); }
.leesverder-links li:not(:last-child)::after { content: "\00B7"; margin-inline: 8px; color: var(--tekst-4); }
.leesverder-links a { color: var(--tekst-3); }
.leesverder-links a:hover { color: var(--teal-tekst); }

/* Talenpagina */
.taalkaarten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.taalkaart { display: flex; align-items: center; gap: 14px; min-height: 56px; background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 18px 20px; text-decoration: none; color: var(--tekst); height: 100%; }
.taalkaart:hover { border-color: var(--teal); color: var(--tekst); }
.taalkaart-tekst { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.taalkaart-naam { font-weight: 700; font-size: 17px; }
.taalkaart-sub { font-size: 13.5px; color: var(--tekst-4); }
.pagina-talen .twee-kolommen { gap: 40px; }
.pagina-talen .kolom { gap: 12px; }
.pagina-talen .kolom h2 { font-size: 28px; }

/* Nederlandse taalpagina's (VCA proefexamen Turks, ...) */
.taalchip { gap: 8px; align-self: flex-start; }
.vinklijst { display: flex; flex-direction: column; gap: 10px; }
.vinklijst li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16.5px; }
.eigen-site { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(140deg, #e9f5f6, #f8fcfd); border: 1px solid var(--rand-teal); border-radius: 18px; padding: 24px; color: var(--tekst); text-decoration: none; }
.eigen-site:hover { border-color: var(--teal); color: var(--tekst); }
.eigen-site-kop { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 22px; line-height: 1.3; }
.eigen-site-tekst { font-size: 16px; line-height: 1.6; color: var(--tekst-2); }
.eigen-site-knop { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--teal-tekst); align-self: flex-start; font-family: Figtree, sans-serif; }
.eigen-site[dir="rtl"] .eigen-site-knop { align-self: flex-end; }

/* Zijbalk: FAQ en juridisch */
.zijbalk-indeling { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; padding-top: 22px; }
.zijbalk-inhoud { display: flex; flex-direction: column; gap: 32px; max-width: 860px; min-width: 0; }
.paginakop { display: flex; flex-direction: column; gap: 10px; }
.paginakop h1 { font-size: 44px; line-height: 1.12; }
.paginakop .lead { font-size: 18px; }
.inhoudsopgave { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 40px); overflow-y: auto; }
.inhoudsopgave-kop { font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-4); margin-bottom: 6px; }
.inhoudsopgave a { font-weight: 600; font-size: 15px; line-height: 1.35; padding: 8px 12px; border-radius: 9px; color: var(--tekst-2); text-decoration: none; }
.inhoudsopgave a:hover { background: var(--vlak-zacht-2); color: var(--teal-tekst-2); }
.inhoudsopgave a.is-actief { background: var(--vlak-zacht); color: var(--teal-tekst-2); }
.faq-groep { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.faq-groep h2 { font-size: 24px; }

/* Kennisbank */
.artikelkaarten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.artikelkaart { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; background: #fff; border: 1px solid var(--rand); border-radius: 18px; padding: 24px 56px 24px 24px; text-decoration: none; color: var(--tekst); }
[dir="rtl"] .artikelkaart { padding: 24px 24px 24px 56px; }
.artikelkaart:hover { border-color: var(--teal); color: var(--tekst); box-shadow: var(--schaduw-kaart); }
.artikelkaart-meta { font-weight: 500; font-size: 13.5px; color: var(--tekst-4); }
.artikelkaart-titel { font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.artikelkaart-tekst { font-size: 16px; line-height: 1.5; color: var(--tekst-3); }
.artikelkaart .pijl { position: absolute; inset-inline-end: 24px; top: 50%; margin-top: -11px; }

/* Artikel */
.artikel-indeling { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 48px; align-items: start; padding-top: 22px; }
.artikel { display: flex; flex-direction: column; gap: 20px; max-width: 720px; min-width: 0; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 500; font-size: 13.5px; color: var(--tekst-4); }
.label { padding: 6px 12px; border-radius: 8px; background: var(--vlak-zacht); font-weight: 600; font-size: 13px; color: var(--teal-tekst-2); }
.artikel h1 { font-size: 44px; line-height: 1.12; }
.artikel-intro { font-size: 18.5px; line-height: 1.65; color: var(--tekst-lijf); }
.artikel h2 { font-size: 28px; margin-top: 12px; scroll-margin-top: 20px; }
.artikel > p { font-size: 17.5px; line-height: 1.7; color: var(--tekst-2); }
.artikel-lijst { display: flex; flex-direction: column; gap: 8px; font-size: 17.5px; line-height: 1.6; color: var(--tekst-2); }
.artikel-lijst li { position: relative; padding-inline-start: 26px; }
.artikel-lijst li::before { content: ""; position: absolute; inset-inline-start: 6px; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.infoblok { background: linear-gradient(140deg, #e9f5f6, #f8fcfd); border: 1px solid var(--rand-teal); border-radius: 16px; padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.infoblok-titel { font-weight: 700; font-size: 17px; }
.infoblok p:last-child { font-size: 16.5px; line-height: var(--lh-tekst); color: var(--tekst-2); }
.artikel-cta { border: 1px solid var(--rand-teal); border-radius: 18px; background: var(--vlak-zacht-2); padding: 24px; display: flex; align-items: center; gap: 24px; }
.artikel-cta > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.artikel-cta-titel { font-weight: 800; font-size: 21px; }
.artikel-cta p:last-child { font-size: 16px; line-height: 1.55; color: var(--tekst-2); }
.artikel-cta .badges { flex-wrap: nowrap; gap: 12px; }
.cta--artikel { margin-top: 12px; border-radius: 20px; padding: 32px 36px; gap: 30px; }
.cta--artikel .cta-titel { font-size: 24px; line-height: 1.3; max-width: 400px; }
.cta--artikel .badge img { height: 52px; }
.inhoudsopgave-mobiel { display: none; }
.leesook { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.leesook .inhoudsopgave-kop { margin-bottom: 0; }
.leesook-kaart { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.leesook-kaart:hover { border-color: var(--teal); }
.leesook-titel { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--tekst); }
.leesook-meta { font-size: 14px; color: var(--tekst-4); }

/* Juridisch */
.zijbalk-indeling--juridisch { max-width: 960px; grid-template-columns: 220px 1fr; gap: 40px; padding-inline: 40px; }
.zijbalk-indeling--juridisch .inhoudsopgave a { font-size: 14.5px; padding: 7px 11px; }
.juridisch { max-width: 640px; gap: 18px; }
.juridisch .paginakop h1 { font-size: 38px; line-height: 1.14; letter-spacing: -.025em; }
.juridisch-versie { font-weight: 500; font-size: 14px; color: var(--tekst-4); }
.juridisch h2 { font-size: 23px; margin-top: 10px; scroll-margin-top: 20px; }
.juridisch h3 { font-size: 18px; }
.juridisch p, .juridisch li { font-size: 16.5px; line-height: 1.7; color: var(--tekst-2); }
.juridisch ul, .juridisch ol { display: flex; flex-direction: column; gap: 6px; padding-inline-start: 22px; }
.juridisch ul { list-style: disc; }
.juridisch ol { list-style: decimal; }
.juridisch strong { color: var(--tekst); }
.juridisch .kort { background: var(--vlak-zacht-2); border: 1px solid var(--rand-teal); border-radius: 16px; padding: 18px 22px; }
.juridisch .kort strong { font-size: 17px; }
.juridisch .kort ul { margin-top: 8px; }
.juridisch table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; font-size: 15px; line-height: 1.5; }
.juridisch th, .juridisch td { text-align: start; vertical-align: top; padding: 12px 16px; color: var(--tekst-2); }
.juridisch tr + tr th, .juridisch tr + tr td { border-top: 1px solid #e9eff0; }
.juridisch tr:first-child th { background: var(--vlak); color: var(--tekst-lijf); font-weight: 700; font-size: 14px; }
.juridisch th { font-weight: 600; color: var(--tekst-lijf); }
.juridisch-voet { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: 14px; line-height: 1.6; color: var(--tekst-4); }

/* 404 */
.niet-gevonden { background: linear-gradient(180deg, #e9f5f6, #fff 60%); }
.niet-gevonden .subhero-smal { padding-top: 56px; max-width: 760px; margin-inline: auto; }
.niet-gevonden-code { font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--teal); }
.niet-gevonden h1 { font-size: 40px; }
.niet-gevonden-knoppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; max-width: 560px; }
.niet-gevonden-knoppen .knop { min-height: 52px; }

/* ---------- Tot 1420px: menu achter de hamburger (merknaam en menu zijn in sommige talen lang) ---------- */
@media (max-width: 1420px) {
    .kop-nav { display: none; }
    .menu { display: block; }
}

/* ---------- Tot 1100px ---------- */
@media (max-width: 1100px) {
    :root { --marge: 32px; }
    .hero-binnen { grid-template-columns: 1fr 340px; gap: 40px; }
    .toestel { width: 300px; }
    h1 { font-size: 44px; }
    .subhero h1 { font-size: 40px; }
    .stappen, .functies, .prijzen { grid-template-columns: repeat(2, 1fr); }
    .talenraster { grid-template-columns: repeat(3, 1fr); }
    .taalkaarten { grid-template-columns: repeat(3, 1fr); }
    .vertrouwen-balk { flex-wrap: wrap; justify-content: center; gap: 12px 24px; }
    .vertrouwen-balk li, .vertrouwen-balk li:first-child, .vertrouwen-balk li:last-child { flex: none; justify-content: center; }
    .vertrouwen-balk li + li::before { display: none; }
    .demo-blok { grid-template-columns: 1fr; gap: 24px; }
    .cta { flex-direction: column; align-items: flex-start; }
    .voet-kolommen { grid-template-columns: 1fr 1fr; }
    .subhero-binnen { grid-template-columns: 1fr 300px; gap: 40px; }
    .toestel--sub { width: 260px; }
    .donkerblok { grid-template-columns: 1fr; gap: 28px; }
    .artikel-indeling { grid-template-columns: minmax(0, 1fr) 280px; }
    .artikel-indeling > .inhoudsopgave { display: none; }
    .inhoudsopgave-mobiel { display: flex; flex-direction: column; gap: 4px; background: var(--vlak-zacht-2); border: 1px solid var(--rand-teal); border-radius: 16px; padding: 16px 18px; }
    .inhoudsopgave-mobiel a { font-weight: 600; font-size: 15.5px; padding: 6px 0; min-height: 36px; display: flex; align-items: center; }
    .inhoudsopgave-mobiel .inhoudsopgave-kop { margin-bottom: 2px; }
}

/* ---------- Tot 760px (mobiel, ontwerp 390) ---------- */
@media (max-width: 760px) {
    :root { --marge: 20px; --sectie: 28px; }
    body { font-size: 16px; }
    h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.025em; }
    h2 { font-size: 24px; }
    h3 { font-size: 17px; }
    html.schrift-arabisch h1 { line-height: 1.4; }
    html[lang="de"] h1 { font-size: 29px; }
    .blok > h2 { margin-bottom: 14px; }
    .lead { font-size: 16.5px; line-height: 1.7; }
    .bodytekst { font-size: 16.5px; line-height: 1.7; }

    .kop-binnen { height: 60px; gap: 10px; }
    .logo { gap: 8px; }
    .logo-merk { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
    .logo-naam { font-size: 14px; }
    .knop--kop { display: none; }
    .kop-rechts { gap: 6px; }
    .taalkiezer summary { height: 44px; padding: 0 8px; border: 0; background: none; gap: 6px; font-size: 13px; color: var(--teal-tekst); }
    .taalkiezer-naam, .taalkiezer-pijl { display: none; }
    .taalkiezer-code { display: inline; }
    .taalkiezer .vlag { width: 18px; height: 13px; }
    .taalkiezer-lijst { position: fixed; inset-inline: 16px; top: 68px; width: auto; grid-template-columns: 1fr 1fr; max-height: calc(100vh - 150px); }
    .taalkiezer-lijst a { font-size: 14.5px; padding: 0 10px; }

    .hero-binnen { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; padding-bottom: 22px; }
    .hero-tekst { gap: 16px; }
    .hero .chip { display: none; }
    .intro--breed { display: none; }
    .intro--mobiel { display: block; font-size: 16px; }
    .hero-acties { flex-direction: column; align-items: flex-start; gap: 10px; }
    .badges--hero { flex-direction: column; align-items: flex-start; gap: 10px; }
    .badges--hero .badge img { height: 54px; }
    .qr { display: none; }
    .hero-beeld { padding-top: 6px; }
    .toestel, .toestel--hero { width: 220px; padding: 8px; border-radius: 34px; box-shadow: 0 14px 30px rgba(15, 30, 33, .24); }
    .toestel img { border-radius: 27px; }

    .vertrouwen { margin-top: 0; padding: 18px var(--marge); border-block: 1px solid #edf3f4; background: #f9fcfc; }
    .vertrouwen-balk { display: none; }
    .vertrouwen-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .vertrouwen-chips li { padding: 7px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--rand-teal); font-weight: 600; font-size: 13px; }

    .stappen { grid-template-columns: 1fr; gap: 14px; }
    .stap { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 16px; }
    .stap > div { gap: 2px; }
    .stap-nummer { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
    .stap h3 { font-size: 17px; }
    .stap p { font-size: 15px; line-height: 1.45; }
    .stap-lang { display: none; }
    .stap-kort { display: block; }

    .examenkaarten { grid-template-columns: 1fr; gap: 14px; }
    .examenkaart { border-radius: 18px; }
    .examenkaart-kop { padding: 18px 20px; }
    .examenkaart-kop h3 { font-size: 21px; }
    .examenkaart-sub, .examenkaart-regels, .prijs-lang, .knop-lang { display: none; }
    .examenkaart-kort, .prijs-kort, .knop-kort { display: inline; }
    .examenkaart-kort { display: block; }
    .examenkaart-lijf { padding: 16px 20px 20px; gap: 12px; }
    .examenkaart-prijs strong { font-size: 22px; }
    .examenkaart-prijs span { font-size: 13px; }

    .functies, .prijzen { grid-template-columns: 1fr; gap: 12px; }
    .functie { padding: 18px; }
    .prijskaart { padding: 20px; }
    .prijskaart--uitgelicht { padding: 19px; }
    .prijskaart .prijskaart-bedrag { font-size: 28px; }

    .demo-blok { padding: 0; border: 0; background: none; border-radius: 0; gap: 14px; }
    .demo-intro h2 { font-size: 24px; }
    .demo-intro p:not(.klein) { font-size: 15.5px; }
    .demo { padding: 18px; gap: 12px; }
    .demo-vraag { font-size: 17px; }
    .demo-uitleg { font-size: 14.5px; }
    .demo-uitleg-titel { font-size: 15px; }

    .blok-kop { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
    .talenraster { grid-template-columns: 1fr 1fr; gap: 8px; }
    .taaltegel { padding: 10px 12px; font-size: 15px; min-height: 48px; }
    .tekstblok p { font-size: 16.5px; }

    .faq { gap: 10px; }
    .faq-item summary { padding: 16px 18px; font-size: 16px; }
    .faq-antwoord { padding: 0 18px 16px; font-size: 15.5px; }

    .cta { padding: 28px 22px; border-radius: 20px; gap: 20px; }
    .cta-titel { font-size: 24px; }
    .cta-tekst p { font-size: 15.5px; }
    .cta .badges { flex-wrap: wrap; }
    .cta .badge img, .cta--artikel .badge img { height: 46px; }

    .voet { padding-bottom: 76px; }
    .voet-binnen { padding: 32px var(--marge) 24px; gap: 24px; }
    .voet-kolommen { grid-template-columns: 1fr; gap: 24px; }
    .voet-merk p { font-size: 13px; line-height: 1.45; }
    .voet-onder { font-size: 11.5px; line-height: 1.35; flex-direction: column; }

    .downloadbalk { display: flex; position: sticky; bottom: 0; z-index: 15; margin-top: -76px; justify-content: center; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--rand); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(15, 30, 33, .08); }
    .badges--balk { flex-wrap: nowrap; gap: 10px; justify-content: center; }
    .badges--balk .badge img { height: 46px; }

    .kruimel { padding-top: 14px; font-size: 13px; }
    .subhero-binnen { grid-template-columns: 1fr; gap: 20px; padding-top: 14px; padding-bottom: 24px; }
    .subhero-tekst { gap: 14px; }
    .subhero h1 { font-size: 29px; line-height: 1.14; }
    .subhero-smal { padding-top: 12px; padding-bottom: 22px; gap: 12px; }
    .toestel--sub { width: 220px; }
    .cijfers { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .cijfer { padding: 14px 10px; border-radius: 14px; text-align: center; }
    .cijfer dt { font-size: 22px; }
    .cijfer dd { font-size: 12.5px; line-height: 1.3; }
    .twee-kolommen { grid-template-columns: 1fr; gap: 28px; }
    .kolom h2, .donkerblok h2, .tekstblok h2, .pagina-talen .kolom h2 { font-size: 24px; }
    .chips { gap: 8px; }
    .chips li { padding: 8px 12px; font-size: 14px; }
    .vorm { padding: 16px; }
    .vorm h3 { font-size: 17px; }
    .vorm p { font-size: 15px; }
    .donkerblok { padding: 26px 22px; border-radius: 20px; }
    .donkerblok-tekst p { font-size: 16px; }
    .donkerblok-punten { gap: 10px; }
    .donkerblok-punten li { padding: 12px; font-size: 14.5px; }
    .prijsduo { gap: 10px; }
    .prijskaart--klein { padding: 16px; }
    .prijskaart--klein.prijskaart--uitgelicht { padding: 15px; }
    .prijskaart--klein .prijskaart-bedrag { font-size: 24px; }
    .leesverder { flex-direction: column; align-items: flex-start; padding: 20px; gap: 12px; }
    .leesverder-links { flex-direction: column; gap: 6px; }
    .leesverder-links li::after { display: none; }

    .taalkaarten { grid-template-columns: 1fr; gap: 10px; }
    .taalkaart { padding: 12px 16px; border-radius: 14px; gap: 12px; }
    .taalkaart .vlag--groot { width: 32px; height: 23px; }
    .taalkaart-naam { font-size: 16px; }
    .taalkaart-sub { font-size: 13px; }

    .zijbalk-indeling, .zijbalk-indeling--juridisch { grid-template-columns: 1fr; gap: 18px; padding-top: 12px; padding-inline: var(--marge); }
    .zijbalk-indeling > .inhoudsopgave { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: none; order: 2; }
    .zijbalk-indeling > .inhoudsopgave .inhoudsopgave-kop { display: none; }
    .zijbalk-indeling > .inhoudsopgave a { padding: 8px 12px; border: 1px solid var(--rand); background: #fff; font-size: 13.5px; }
    .zijbalk-indeling > .inhoudsopgave a.is-actief { background: var(--vlak-zacht); border-color: var(--rand-teal); }
    .zijbalk-indeling--juridisch > .inhoudsopgave { display: none; }
    .zijbalk-inhoud { display: contents; }
    .zijbalk-inhoud > .paginakop { order: 1; }
    .zijbalk-inhoud > :not(.paginakop) { order: 3; }
    .juridisch { display: flex; }
    .paginakop h1, .artikel h1 { font-size: 29px; line-height: 1.14; }
    .paginakop .lead { font-size: 16px; }
    .faq-groep h2 { font-size: 21px; }
    .juridisch .paginakop h1 { font-size: 29px; }
    .juridisch h2 { font-size: 20px; }
    .juridisch p, .juridisch li { font-size: 16px; }
    .juridisch table { font-size: 14px; }
    .juridisch th, .juridisch td { padding: 10px 12px; }

    .artikelkaarten { grid-template-columns: 1fr; gap: 12px; }
    .artikelkaart { padding: 18px 48px 18px 18px; border-radius: 16px; }
    [dir="rtl"] .artikelkaart { padding: 18px 18px 18px 48px; }
    .artikelkaart .pijl { inset-inline-end: 18px; }
    .artikelkaart-titel { font-size: 19px; }
    .artikelkaart-tekst { font-size: 15px; }
    .artikel-indeling { grid-template-columns: 1fr; gap: 28px; padding-top: 12px; }
    .artikel { gap: 16px; }
    .artikel-intro { font-size: 17px; }
    .artikel h2 { font-size: 22px; margin-top: 8px; }
    .artikel > p, .artikel-lijst { font-size: 16.5px; }
    .artikel-cta { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }
    .artikel-cta .badges { flex-wrap: wrap; }
    .artikel-cta .badge img { height: 46px; }
    .cta--artikel { padding: 24px 20px; }
    .cta--artikel .cta-titel { font-size: 21px; }
    .leesook { position: static; }

    .niet-gevonden .subhero-smal { padding-top: 36px; gap: 18px; }
    .niet-gevonden h1 { font-size: 28px; line-height: 1.18; }
    .niet-gevonden-knoppen { grid-template-columns: 1fr; }
}

@media (max-width: 370px) {
    .logo-naam { font-size: 13px; }
    .badges--balk .badge img { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}