/*
Theme Name: IAB Theme
Theme URI: https://038marketing.nl
Author: 038 Marketing
Author URI: https://038marketing.nl
Description: Neutrale vergelijker-kit theme. Config-gedreven, geen jQuery, geen build-step.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: iab
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
  /* ---------------------------------------------------------------------
     Huisstijl internet-abonnement.com: wit, rustig en zakelijk, in de lijn
     van de Nederlandse vergelijkers. Marineblauw draagt de structuur,
     oranje wijst alleen de weg (knoppen, stap-badges, accentstreepjes).
     Geen enkele hex-waarde staat buiten dit blok.
     --------------------------------------------------------------------- */

  /* Merkkleuren */
  --iab-marine: #1E3A8A;
  --iab-marine-dark: #172B66;
  --iab-oranje: #D97706;
  --iab-oranje-dark: #B45309;
  --iab-info: #0369A1;
  --iab-positief: #15803D;
  --iab-tint-blauw: #F3F7FC;
  --iab-tint-oranje: #FEF3EC;
  --iab-tint-groen: #F0F7F2;
  --iab-wit: #FFFFFF;

  /* Hoofdkleur: knoppen, links, actieve staten, focusrand */
  --iab-primary: var(--iab-marine);
  /* Donkerder primary: hover/actief op knoppen en links */
  --iab-primary-dark: var(--iab-marine-dark);
  /* Accentkleur: stap-badges, accentstreep, iconen en vlakken zonder tekst */
  --iab-accent: var(--iab-oranje);
  /* Hover op de accentkleur */
  --iab-accent-dark: var(--iab-oranje-dark);
  /* Tweede accent: info-badges en iconen, afwisseling met accent */
  --iab-accent-2: var(--iab-info);
  /* Donkerste tekstkleur: koppen (h1-h4) */
  --iab-ink: #14213D;
  /* Standaard leestekstkleur (body, paragrafen) */
  --iab-text: #3A4557;
  /* Gedempte tekstkleur: labels, meta, bijschriften */
  --iab-muted: #626C7E;
  /* Paginabackground (achter alle content): wit */
  --iab-bg: var(--iab-wit);
  /* Sectie-achtergrond voor afwisseling: zeer licht blauwgrijs */
  --iab-surface: #F6F8FB;
  /* Component-achtergrond: kaarten, tabellen, panelen */
  --iab-card: var(--iab-wit);
  /* Zeer lichte blauwtint van de hero en van rustige tekstblokken */
  --iab-hero-tint: #EAF1FA;
  --iab-hero-tint-0: rgba(234,241,250,0);
  --iab-hero-tint-9: rgba(234,241,250,.92);
  /* Standaard randkleur op kaarten, tabellen, invoervelden */
  --iab-border: #E1E7F0;
  /* Kopfont met verplichte fallback-stack */
  --iab-font-head: 'Albert Sans', system-ui, -apple-system, sans-serif;
  /* Bodyfont met verplichte fallback-stack */
  --iab-font-body: 'Source Sans 3', system-ui, -apple-system, sans-serif;
  /* Basis-lettergrootte van de body */
  --iab-base-size: 17px;
  /* Standaard regelhoogte voor leesbaarheid */
  --iab-lh: 1.65;
  /* Standaard afrondingsradius (kaarten, panelen): groot en zacht, de
     vormtaal van de adviseur. De vergelijker-plugin volgt dit token via
     --iab-app-radius. */
  --iab-radius: 16px;
  /* Kleinere afrondingsradius (chips, inputs) */
  --iab-radius-sm: 10px;
  /* Knopradius: ruim afgerond, tussen chip en kaart in */
  --iab-radius-btn: 12px;
  /* Zachte kaartschaduw: dit vervangt de 1px-rand op alle kaarten */
  --iab-shadow-soft: 0 1px 2px rgba(20,33,61,.05), 0 8px 24px rgba(20,33,61,.08);
  /* Diepere variant van de zachte schaduw, voor hover en dragende kaarten */
  --iab-shadow-soft-lg: 0 2px 4px rgba(20,33,61,.05), 0 14px 34px rgba(20,33,61,.13);
  /* Maximale breedte van de pagina-container */
  --iab-container: 1180px;
  /* Maximale leesbreedte voor lopende tekst (artikelen) */
  --iab-content: 720px;
  /* Lichte schaduw: kaarten, dropdowns */
  --iab-shadow-1: 0 1px 3px rgba(0,0,0,.08);
  /* Iets ruimere schaduw: modals, sticky header bij scroll. Nooit gekleurd. */
  --iab-shadow-2: 0 4px 12px rgba(0,0,0,.06);
  /* Tekstkleur op een gekleurd/primary vlak (knoppen, badges) */
  --iab-on-primary: var(--iab-wit);
  /* Subtielere tekstkleur op een gekleurd vlak */
  --iab-on-primary-soft: rgba(255,255,255,.86);
  /* Succeskleur: positieve score-band, vinkjes, beste-rij */
  --iab-success: var(--iab-positief);
  /* Waarschuwingskleur: middelmatige score-band, let-op-teksten */
  --iab-warning: #B45309;
  /* Gevaarkleur: lage score-band, foutmeldingen */
  --iab-danger: #B91C1C;
  /* Sectietint 1: heel licht blauw, het rustige standaardvlak */
  --iab-tint-1: var(--iab-tint-blauw);
  /* Sectietint 2: heel licht oranje, voor secties die aandacht vragen */
  --iab-tint-2: var(--iab-tint-oranje);
  /* Sectietint 3: heel licht groen, voor bevestigende secties (reviews) */
  --iab-tint-3: var(--iab-tint-groen);
  /* Sectietint 4: extra lichtgrijze variant voor lange pagina's */
  --iab-tint-4: #F6F8FB;
  /* CTA-oranje: dieper dan het accent-oranje, zodat witte knoptekst de
     WCAG AA-contrasteis haalt. Het accent-oranje blijft voor vlakken en
     lijnen zonder tekst (stap-badge, accentstreep, tipblok-rand). */
  --iab-cta: #C2410C;
  --iab-cta-dark: #9A3412;
  /* Zachte tint voor gedempte vlakken binnen een donkere strook */
  --iab-soft: #F6F8FB;
}

/* =========================================================================
   2. Merk-stramien
   -------------------------------------------------------------------------
   Twee signatuur-elementen, rustig gehouden:
   (a) de genummerde stap-badge: een cirkel in marineblauw met een wit cijfer,
       voor alles wat een volgorde heeft.
   (b) een dunne accentrand links bij tipblokken en sectiekoppen.
   Er zijn geen vouw-hoeken, golfranden of patronen meer: secties scheiden
   met witruimte en hooguit een dunne lijn.
   ========================================================================= */

/* Legacy-namen uit de kit blijven bestaan, maar tekenen niets meer. */
.iab-fold,
.iab-chamfer { position: relative; }
.iab-fold::before,
.iab-fold::after,
.iab-chamfer::before { content: none; }

/* (b) Dunne accentstreep links van een sectiekop. */
.iab-section-heading {
  position: relative;
  display: block;
  padding-left: 14px;
}
.iab-section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  bottom: .2em;
  width: 3px;
  border-radius: 2px;
  background: var(--iab-accent);
}
/* Gecentreerde variant: de streep gaat dan boven de kop staan. */
.iab-section-heading--center {
  padding-left: 0;
  padding-top: 14px;
  text-align: center;
}
.iab-section-heading--center::before {
  left: 50%;
  top: 0;
  bottom: auto;
  width: 40px;
  height: 3px;
  transform: translateX(-50%);
}
.iab-section-heading--left { display: block; }

/* (a) Stap-badge met nummer: cirkel in primary, wit cijfer. */
.iab-step-badge,
.iab-outline-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: var(--iab-primary);
  color: var(--iab-on-primary);
  border-radius: 50%;
  font-family: var(--iab-font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.iab-step-badge--accent { background: var(--iab-cta); }

/* Klein label of badge, maximaal drie woorden. */
.iab-tape-label {
  display: inline-block;
  background: var(--iab-tint-1);
  color: var(--iab-primary);
  font-family: var(--iab-font-body);
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.iab-tape-label--marine { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-tape-label--outline {
  background: transparent;
  color: var(--iab-primary);
  border: 1px solid var(--iab-border);
}

/* Golfrand-hulpklasse uit de kit: tekent niets meer. */
.iab-wave { position: relative; }

/* =========================================================================
   3. Reset / basis
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* GEEN scroll-behavior:smooth op html: in combinatie met een sticky header
   (.iab-header, hieronder) veroorzaakt dit in WebKit/Safari een bekende bug
   waarbij de sticky header tijdens (met name trackpad-)scrollen tijdelijk
   loskomt van de bovenkant, met een lege strook erboven (gereproduceerd op
   de referentie-implementatie, visuele review 20 aug 2026, zie REDESIGN-RONDE-2.md
   punt A). Niets in de kit gebruikt smooth-scroll-anchors. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--iab-font-body);
  font-size: var(--iab-base-size);
  line-height: var(--iab-lh);
  color: var(--iab-text);
  background: var(--iab-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--iab-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--iab-font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--iab-ink);
  margin: 0 0 .5em;
  /* Lange woorden en URL's in koppen mogen breken i.p.v. de layout oprekken. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); }
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
p { margin: 0 0 1em; }
::selection { background: var(--iab-accent); color: var(--iab-ink); }

/* =========================================================================
   4. Layout helpers
   ========================================================================= */
.iab-container { width: 100%; max-width: var(--iab-container); margin-inline: auto; padding-inline: 20px; }
.iab-section { padding-block: clamp(44px, 6vw, 80px); }
.iab-section--tight { padding-block: clamp(32px, 4vw, 64px); }
.iab-surface { background: var(--iab-surface); }
/* Sectieritme: bg / tint-1 / bg / tint-3 / bg / tint-2 / bg..., nooit 2
   dezelfde achtergrond aansluitend (REDESIGN-RONDE-2.md punt B/7). */
.iab-tint-1 { background: var(--iab-tint-1); }
.iab-tint-2 { background: var(--iab-tint-2); }
.iab-tint-3 { background: var(--iab-tint-3); }
.iab-tint-4 { background: var(--iab-tint-4); }
.iab-lead { font-size: 1.15rem; color: var(--iab-muted); max-width: 60ch; }
.iab-center { text-align: center; }
.iab-center .iab-lead { margin-inline: auto; }
/* Sectiekop-stramien (iab_shead() in inc/template-tags.php): vervangt de
   oude uppercase-eyebrow-labels overal. */
.iab-shead { margin-bottom: 34px; }
.iab-shead--center { text-align: center; }
.iab-shead--center .iab-lead { margin-inline: auto; }
.iab-shead > svg, .iab-shead > img { display: inline-block; margin-bottom: 10px; }
.iab-shead .iab-section-heading { margin-top: 0; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 1000; background: var(--iab-card); padding: 10px 16px; border-radius: var(--iab-radius-sm); box-shadow: var(--iab-shadow-1); }

/* =========================================================================
   5. Knoppen
   ========================================================================= */
.iab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 13px 22px; border-radius: var(--iab-radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; white-space: nowrap; background: var(--iab-primary); color: var(--iab-on-primary);
}
.iab-btn:hover { background: var(--iab-primary-dark); color: var(--iab-on-primary); text-decoration: none; }
.iab-btn:active { opacity: .92; }
.iab-btn--primary { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-btn--accent { background: var(--iab-accent); color: var(--iab-ink); }
.iab-btn--accent:hover { background: var(--iab-accent); opacity: .9; color: var(--iab-ink); }
.iab-btn--ghost { background: var(--iab-card); color: var(--iab-ink); border-color: var(--iab-border); }
.iab-btn--ghost:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-btn--outline { background: transparent; color: var(--iab-ink); border-color: var(--iab-border); }
.iab-btn--outline:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-btn--lg { font-size: 1.1rem; padding: 18px 30px; }
.iab-btn--sm { font-size: .85rem; padding: 9px 16px; }
.iab-btn--block { width: 100%; }
.iab-btn.iab-btn--cta { background: var(--iab-cta); color: var(--iab-on-primary); }
.iab-btn.iab-btn--cta:hover { background: var(--iab-cta-dark); color: var(--iab-on-primary); }

/* =========================================================================
   6. Header
   ========================================================================= */
.iab-header {
  position: sticky; top: 0; z-index: 100; width: 100%; background: var(--iab-card);
  border-bottom: 1px solid var(--iab-border);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .15s ease;
  /* Compositing-hint: voorkomt een bekende WebKit/Safari-bug waarbij een
     sticky element tijdens (met name trackpad-)scrollen kortstondig loskomt
     van de bovenkant (zie ook scroll-behavior-fix in sectie 3 hierboven). */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.iab-header.is-scrolled { box-shadow: var(--iab-shadow-1); }
.iab-header__bar { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.iab-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--iab-ink); }
.iab-brand:hover { text-decoration: none; }
.iab-brand__mark { display: inline-flex; align-items: center; width: 208px; height: 38px; color: var(--iab-ink); }
.iab-brand__mark svg { width: 100%; height: 100%; display: block; }
.iab-footer .iab-brand__mark { color: var(--iab-ink); }
.iab-nav { margin-left: auto; }
.iab-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.iab-nav a { display: inline-block; padding: 10px 11px; border-radius: var(--iab-radius-sm); font-weight: 600; color: var(--iab-ink); font-size: .95rem; white-space: nowrap; }
.iab-nav a:hover { background: var(--iab-surface); text-decoration: none; color: var(--iab-primary); }
.iab-nav .current-menu-item > a { color: var(--iab-primary); }
.iab-nav li { position: relative; }
.iab-nav .sub-menu { list-style: none; margin: 0; padding: 12px 8px 8px; position: absolute; top: 100%; left: 0; min-width: 232px; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); box-shadow: var(--iab-shadow-1); display: none; z-index: 200; }
.iab-nav > ul > .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.iab-nav li:hover > .sub-menu, .iab-nav li:focus-within > .sub-menu { display: block; }
.iab-nav .sub-menu a { display: block; white-space: nowrap; }
.iab-nav .sub-menu .sub-menu { top: -8px; left: 100%; }
.iab-nav .sub-menu .menu-item-has-children { position: relative; }
.iab-nav .sub-menu .menu-item-has-children > a::after { content: "\203A"; }
.iab-nav .menu-item-has-children > a::after { content: "\2304"; margin-left: 5px; opacity: .55; font-size: .9em; }
.iab-header__cta { display: inline-flex; }
.iab-nav-toggle { display: none; margin-left: auto; background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; }
.iab-nav-toggle span, .iab-nav-toggle span::before, .iab-nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--iab-ink); position: relative; transition: .2s; }
.iab-nav-toggle span::before { position: absolute; top: -7px; }
.iab-nav-toggle span::after { position: absolute; top: 7px; }

@media (max-width: 860px) {
  .iab-header__bar { min-height: 64px; padding-block: 12px 8px; gap: 10px; }
  .iab-nav-toggle { display: inline-flex; margin-left: 0; order: 3; flex-shrink: 0; }
  .iab-header__cta { display: none; }
  .iab-brand__mark { height: 34px; width: 150px; }
  .iab-nav { position: fixed; inset: 64px 0 auto 0; background: var(--iab-card); border-bottom: 1px solid var(--iab-border); transform: translateY(calc(-100% - 120px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: var(--iab-shadow-1); max-height: calc(100vh - 64px); overflow-y: auto; }
  .iab-nav[data-open="true"] { transform: translateY(0); visibility: visible; transition: transform .25s ease; }
  .iab-nav ul { flex-direction: column; padding: 12px 20px; gap: 2px; }
  .iab-nav a { padding: 14px; font-size: 1.1rem; }
  .iab-nav .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 6px 14px; min-width: 0; background: transparent; }
  .iab-nav .sub-menu a { padding: 10px 14px; font-size: 1rem; color: var(--iab-muted); }
  .iab-nav .menu-item-has-children > a::after { display: none; }
}

/* Zoekbalk in header */
.iab-search-toggle { background: none; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); width: 40px; height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--iab-ink); margin-left: 4px; }
.iab-search-toggle:hover { background: var(--iab-surface); color: var(--iab-primary); }
.iab-searchbar { background: var(--iab-card); border-bottom: 2px solid var(--iab-primary); padding: 16px 0; box-shadow: var(--iab-shadow-1); }
.iab-searchbar form { display: flex; gap: 8px; max-width: 600px; margin: 0 auto; }
.iab-searchbar input { flex: 1; padding: 12px 16px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: 1rem; background: var(--iab-card); color: var(--iab-ink); }
.iab-searchbar input:focus { outline: 2px solid var(--iab-primary); border-color: transparent; }
.iab-searchbar__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--iab-muted); padding: 0 8px; }
.iab-searchbar__close:hover { color: var(--iab-ink); }
@media (max-width: 860px) { .iab-search-toggle { margin-left: auto; order: 2; width: 46px; height: 46px; } }

/* =========================================================================
   7. Hero
   ========================================================================= */
.iab-hero { position: relative; color: var(--iab-text); background: var(--iab-hero-tint); border-bottom: 1px solid var(--iab-border); }
.iab-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-block: clamp(48px, 6vw, 92px) clamp(28px, 3vw, 44px); }
.iab-hero h1 { color: var(--iab-ink); }
.iab-hero__sub { font-size: 1.12rem; color: var(--iab-text); max-width: 52ch; margin-bottom: 1.5rem; }
.iab-hero__trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-weight: 600; font-size: .95rem; color: var(--iab-text); }
.iab-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.iab-hero__widget { background: transparent; border: 0; box-shadow: none; padding: 0; color: var(--iab-text); }
@media (max-width: 860px) {
  .iab-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

/* =========================================================================
   8. Kaartroosters
   ========================================================================= */
.iab-grid--2 { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.iab-grid--3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.iab-grid--4 { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .iab-grid--3, .iab-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .iab-grid--2, .iab-grid--3, .iab-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.iab-tilecard {
  background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius);
  padding: 22px; transition: transform .12s ease, box-shadow .15s ease, border-color .15s;
  display: flex; flex-direction: column; gap: 8px;
}
a.iab-tilecard:hover { transform: translateY(-3px); box-shadow: var(--iab-shadow-1); border-color: var(--iab-primary); text-decoration: none; }
.iab-tilecard__icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--iab-tint-1); color: var(--iab-primary); display: grid; place-items: center; margin-bottom: 6px; }
.iab-tilecard h3, .iab-tilecard h4 { margin: 0; font-size: 1.15rem; }
.iab-tilecard p { margin: 0; color: var(--iab-muted); font-size: .96rem; }
.iab-tilecard__arrow { margin-top: auto; color: var(--iab-primary); font-weight: 700; }
.iab-tilecard__count { position: absolute; top: 12px; right: 14px; font-size: .72rem; font-weight: 700; color: var(--iab-muted); background: var(--iab-surface); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; }
.iab-tilecard { position: relative; }

/* Post-kaarten (blog) */
.iab-postcard { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .12s, box-shadow .15s; }
.iab-postcard:hover { transform: translateY(-3px); box-shadow: var(--iab-shadow-1); }
.iab-postcard__thumb { aspect-ratio: 16/9; background: var(--iab-surface); overflow: hidden; }
.iab-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.iab-postcard__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.iab-postcard__cat { font-size: .78rem; font-weight: 700; color: var(--iab-primary); }
.iab-postcard h3 { font-size: 1.18rem; margin: 0; }
.iab-postcard h3 a { color: var(--iab-ink); }
.iab-postcard h3 a:hover { color: var(--iab-primary); text-decoration: none; }
.iab-postcard__excerpt { color: var(--iab-muted); font-size: .95rem; margin: 0; }
.iab-postcard__meta { margin-top: auto; padding-top: 10px; color: var(--iab-muted); font-size: .85rem; }

/* Masonry via CSS columns (kennisbank laatste nieuws) */
.iab-masonry { columns: 3; column-gap: 20px; }
@media (max-width: 860px) { .iab-masonry { columns: 2; } }
@media (max-width: 600px) { .iab-masonry { columns: 1; } }
.iab-masonry .iab-postcard { break-inside: avoid; margin-bottom: 20px; display: inline-block; width: 100%; }

/* =========================================================================
   9. USP-strip
   ========================================================================= */
.iab-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.iab-usp__item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.iab-usp__item .iab-outline-number { margin-bottom: 4px; }
.iab-usp__item h3 { margin: 0; font-size: 1.05rem; }
.iab-usp__item p { margin: 0; color: var(--iab-muted); font-size: .92rem; }
@media (max-width: 860px) { .iab-usp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .iab-usp { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   10. FAQ
   ========================================================================= */
.iab-faq { max-width: 800px; margin-inline: auto; }
.iab-faq details { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 4px 20px; margin-bottom: 12px; }
.iab-faq summary { cursor: pointer; font-weight: 700; color: var(--iab-ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.iab-faq summary::-webkit-details-marker { display: none; }
.iab-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--iab-primary); font-weight: 700; }
.iab-faq details[open] summary::after { content: "\2212"; }
.iab-faq details > p { margin: 0 0 16px; color: var(--iab-text); }

/* =========================================================================
   11. Footer
   ========================================================================= */
.iab-footer { background: var(--iab-surface); color: var(--iab-text); margin-top: 56px; border-top: 1px solid var(--iab-border); }
.iab-footer a { color: var(--iab-text); }
.iab-footer a:hover { color: var(--iab-primary); }
.iab-footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 56px; }
.iab-footer__brand .iab-brand { color: var(--iab-ink); }
.iab-footer h4 { color: var(--iab-ink); font-size: 1rem; margin-bottom: 14px; font-family: var(--iab-font-head); }
.iab-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.iab-footer__bottom { border-top: 1px solid var(--iab-border); padding-block: 20px; font-size: .85rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.iab-footer__disclaimer { font-size: .82rem; color: var(--iab-muted); max-width: 60ch; margin-top: 14px; }
@media (max-width: 860px) { .iab-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .iab-footer__top { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   12. Cookiebanner
   ========================================================================= */
.iab-cookiebanner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999; background: var(--iab-card); border: 1px solid var(--iab-border); color: var(--iab-text); padding: 18px 22px; border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-2); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 720px; margin-inline: auto; }
.iab-cookiebanner p { margin: 0; font-size: .9rem; flex: 1 1 260px; line-height: 1.5; color: var(--iab-text); }
.iab-cookiebanner a { color: var(--iab-primary); }
.iab-cookiebanner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .iab-cookiebanner { flex-direction: column; align-items: stretch; text-align: left; gap: 14px; left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; }
  .iab-cookiebanner p { flex: 0 1 auto; }
  .iab-cookiebanner__actions { flex-wrap: nowrap; }
  .iab-cookiebanner__actions .iab-btn { flex: 1 1 0; }
}

/* =========================================================================
   13. Content / artikelen (prose)
   ========================================================================= */
.iab-page { padding-block: clamp(32px, 4vw, 60px); }
.iab-prose { max-width: var(--iab-content); margin-inline: auto; font-size: 1.05rem; }
.iab-prose--wide { max-width: none; }
.iab-prose h2 { margin-top: 1.6em; }
.iab-prose h3 { margin-top: 1.3em; }
.iab-prose img { border-radius: var(--iab-radius-sm); margin-block: 1.4em; }
.iab-prose ul, .iab-prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.iab-prose li { margin-bottom: .4em; }
.iab-prose blockquote { border-left: 4px solid var(--iab-primary); background: var(--iab-surface); margin: 1.4em 0; padding: 4px 20px; border-radius: 0 var(--iab-radius-sm) var(--iab-radius-sm) 0; }
.iab-prose a { text-decoration: underline; }
.iab-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.iab-prose th, .iab-prose td { border: 1px solid var(--iab-border); padding: 10px 14px; text-align: left; }
.iab-prose th { background: var(--iab-surface); }
/* In tabellen wint de tabelstijl van de generieke prose-linkstijl: een
   onderstreping per cel maakt een brede tabel onleesbaar. */
.iab-prose table a { text-decoration: none; font-weight: 600; color: var(--iab-primary); }
.iab-prose table a:hover { text-decoration: underline; }
/* Knoppen in een tabel houden hun eigen knoptekstkleur (contrast). */
.iab-prose table a.iab-btn, .iab-prose table a.iab-btn:hover { color: var(--iab-on-primary); text-decoration: none; }
@media (max-width: 600px) {
  .iab-prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .iab-prose table th, .iab-prose table td { white-space: normal; min-width: 120px; }
}

.iab-article-head { margin: 0 0 28px; }
.iab-breadcrumbs { font-size: .88rem; color: var(--iab-muted); margin-bottom: 14px; }
.iab-breadcrumbs a { color: var(--iab-muted); }
.iab-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--iab-muted); font-size: .92rem; margin-top: 10px; align-items: center; }
.iab-meta .iab-cat { background: var(--iab-tint-1); color: var(--iab-primary); padding: 3px 12px; border-radius: 999px; font-weight: 700; }
.iab-meta__author { color: var(--iab-primary); font-weight: 600; text-decoration: none; }
.iab-meta__author:hover { text-decoration: underline; }
.iab-meta__updated { color: var(--iab-primary); font-weight: 600; }
.iab-featured { margin: 0 0 30px; }
.iab-featured img { width: 100%; border-radius: var(--iab-radius); }
.iab-featured--page { max-width: 480px; }

.iab-archive-head { text-align: center; padding-block: clamp(36px,4vw,60px); background: var(--iab-surface); border-bottom: 1px solid var(--iab-border); }
.iab-archive-head .iab-lead { margin-inline: auto; }
.iab-kb-head { margin: 8px 0 8px; }
.iab-kb-head h1 { margin: 6px 0 10px; }
.iab-kb-head .iab-lead { margin: 0; }
.iab-rule-head { border-bottom: 2px solid var(--iab-border); padding-bottom: 12px; margin-bottom: 24px; }
.iab-rule-head h2 { font-size: 1.2rem; margin: 0; }

/* Kennisbank pillars */
.iab-kb-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 32px 0 44px; }
@media (max-width: 860px) { .iab-kb-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .iab-kb-pillars { grid-template-columns: minmax(0, 1fr); } }
.iab-pillar { display: flex; align-items: center; gap: 14px; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 18px; text-decoration: none; position: relative; transition: transform .12s, box-shadow .15s, border-color .15s; }
.iab-pillar:hover { transform: translateY(-3px); box-shadow: var(--iab-shadow-1); border-color: var(--iab-primary); text-decoration: none; }
.iab-pillar__icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: var(--iab-tint-1); color: var(--iab-primary); display: grid; place-items: center; }
.iab-pillar:hover .iab-pillar__icon { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-pillar__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iab-pillar__name { font-weight: 700; font-size: 1.02rem; color: var(--iab-ink); }
.iab-pillar__desc { font-size: .82rem; color: var(--iab-muted); line-height: 1.35; }
.iab-pillar__count { position: absolute; top: 12px; right: 14px; font-size: .72rem; font-weight: 700; color: var(--iab-muted); background: var(--iab-surface); border-radius: 999px; min-width: 22px; height: 22px; padding: 0 7px; display: grid; place-items: center; }
.iab-kb-row { margin: 0 0 44px; }
.iab-kb-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.iab-kb-row__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.4rem; }
.iab-kb-row__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--iab-tint-1); color: var(--iab-primary); flex: 0 0 34px; }
.iab-kb-row__icon svg { width: 20px; height: 20px; }
.iab-kb-row__all { font-weight: 700; color: var(--iab-primary); font-size: .92rem; white-space: nowrap; }

/* Interne linkhub (homepage) */
.iab-linkhub__col h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 12px; color: var(--iab-ink); }
.iab-linkhub__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.iab-linkhub__col a { color: var(--iab-primary); text-decoration: none; font-size: .95rem; font-weight: 600; }
.iab-linkhub__col a:hover { text-decoration: underline; }

/* =========================================================================
   14. Article layout (sidebar)
   ========================================================================= */
.iab-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
/* Gridkinderen krimpen anders niet onder hun intrinsieke breedte: brede
   tabellen duwden op mobiel de hele pagina opzij. */
.iab-article-layout > * { min-width: 0; }
.iab-article-main { min-width: 0; }
.iab-article-main { min-width: 0; }
@media (max-width: 860px) { .iab-article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.iab-sidebar { align-self: stretch; display: flex; flex-direction: column; gap: 20px; }
.iab-sidebar__sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
.iab-sidebar__cta { background: var(--iab-tint-1); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 26px 22px; text-align: center; color: var(--iab-text); }
.iab-sidebar__cta h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--iab-ink); }
.iab-sidebar__cta-sub { display: block; margin-top: 10px; font-size: .78rem; color: var(--iab-muted); }
.iab-sidebar__block { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); overflow: hidden; }
.iab-sidebar__heading { margin: 0; padding: 16px 20px 12px; font-size: .82rem; color: var(--iab-muted); font-weight: 700; border-bottom: 1px solid var(--iab-border); }
.iab-sidebar__search form { display: flex; gap: 6px; }
.iab-sidebar__search input[type="search"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: .95rem; }
.iab-sidebar__search input[type="search"]:focus { outline: 2px solid var(--iab-primary); border-color: transparent; }
.iab-sidebar__search button { border: none; background: var(--iab-primary); color: var(--iab-on-primary); border-radius: var(--iab-radius-sm); padding: 0 16px; font-weight: 700; cursor: pointer; }
.iab-sidebar__search button:hover { background: var(--iab-primary-dark); }

.iab-sidebar__prov-list { padding: 4px 0; }
.iab-sidebar__prov { display: flex; align-items: center; gap: 14px; padding: 10px 20px; text-decoration: none; transition: background .15s; }
.iab-sidebar__prov:hover { background: var(--iab-surface); text-decoration: none; }
.iab-sidebar__prov-logo-wrap { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--iab-radius-sm); background: var(--iab-surface); display: grid; place-items: center; overflow: hidden; }
.iab-sidebar__prov-logo-wrap img { max-width: 32px; max-height: 24px; width: auto; height: auto; object-fit: contain; }
.iab-sidebar__prov-initials { font-size: .85rem; font-weight: 700; color: var(--iab-primary); }
.iab-sidebar__prov-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.iab-sidebar__prov-name { font-size: .88rem; font-weight: 700; color: var(--iab-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iab-sidebar__prov-score { font-size: .78rem; color: var(--iab-muted); }

.iab-sidebar__posts { padding: 4px 0; }
.iab-sidebar__post { display: flex; align-items: stretch; gap: 14px; padding: 12px 20px; text-decoration: none; transition: background .15s; }
.iab-sidebar__post:hover { background: var(--iab-surface); text-decoration: none; }
.iab-sidebar__post-thumb { flex: 0 0 64px; width: 64px; height: 56px; border-radius: var(--iab-radius-sm); background: var(--iab-surface) center/cover no-repeat; }
.iab-sidebar__post-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.iab-sidebar__post-cat { font-size: .7rem; font-weight: 700; color: var(--iab-primary); }
.iab-sidebar__post-title { font-size: .85rem; font-weight: 600; color: var(--iab-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iab-sidebar__post-date { font-size: .75rem; color: var(--iab-muted); }

.iab-sidebar__topics { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; }
.iab-sidebar__topic { display: inline-flex; align-items: center; gap: 7px; background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: 999px; padding: 6px 12px; font-size: .85rem; font-weight: 700; color: var(--iab-ink); }
.iab-sidebar__topic:hover { border-color: var(--iab-primary); color: var(--iab-primary); text-decoration: none; }
.iab-sidebar__topic span { background: var(--iab-tint-1); color: var(--iab-muted); border-radius: 999px; font-size: .72rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; }

.iab-sidebar__top3 { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.iab-sidebar__top3-row { display: flex; align-items: center; gap: 10px; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 9px 12px; }
.iab-sidebar__top3-row:hover { border-color: var(--iab-primary); text-decoration: none; }
.iab-sidebar__top3-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--iab-primary); color: var(--iab-on-primary); font-weight: 700; font-size: .78rem; display: grid; place-items: center; flex-shrink: 0; }
.iab-sidebar__top3-name { flex: 1; font-weight: 700; font-size: .92rem; color: var(--iab-ink); }
.iab-sidebar__top3-score { font-weight: 700; color: var(--iab-success); font-size: .95rem; }
.iab-sidebar__view-all { display: block; padding: 12px 20px; text-align: center; font-size: .85rem; font-weight: 700; color: var(--iab-primary); border-top: 1px solid var(--iab-border); transition: background .15s; }
.iab-sidebar__view-all:hover { background: var(--iab-tint-1); text-decoration: none; }
.iab-sidebar__widgets { display: flex; flex-direction: column; gap: 20px; }
.iab-widget { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 20px 20px 8px; }
.iab-widget__title { margin: 0 0 12px; font-size: .95rem; }

/* =========================================================================
   15. TOC
   ========================================================================= */
.iab-toc-box, .iab-prose .iab-toc-box { background: var(--iab-tint-1); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 4px 22px; margin: 0 0 30px; }
.iab-toc-box summary { cursor: pointer; font-weight: 700; color: var(--iab-ink); padding: 16px 0; list-style: none; font-size: 1.05rem; }
.iab-toc-box summary::-webkit-details-marker { display: none; }
.iab-toc-box summary::before { content: "\25B8"; display: inline-block; margin-right: 10px; transition: transform .15s; color: var(--iab-primary); }
.iab-toc-box[open] summary::before { transform: rotate(90deg); }
.iab-toc-list { margin: 0 0 16px; padding-left: 30px; display: grid; gap: 7px; list-style: decimal; }
.iab-toc-list a { color: var(--iab-ink); font-weight: 600; font-size: .95rem; text-decoration: none; }
.iab-toc-list a:hover { color: var(--iab-primary); text-decoration: underline; }
.iab-toc-list__sub { margin-left: 16px; list-style: lower-alpha; }
.iab-toc-list__sub a { font-weight: 500; font-size: .9rem; }

/* =========================================================================
   16. Author bio
   ========================================================================= */
.iab-author { display: flex; gap: 20px; align-items: flex-start; background: var(--iab-bg); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 24px; margin: 40px 0 0; }
.iab-author__avatar { flex: 0 0 72px; width: 72px; height: 72px; display: block; }
.iab-author__avatar img { border-radius: 50%; width: 72px; height: 72px; object-fit: cover; }
.iab-author__label { display: block; font-size: .75rem; color: var(--iab-muted); margin-bottom: 2px; }
.iab-author__name { font-size: 1.05rem; color: var(--iab-ink); font-weight: 700; text-decoration: none; display: block; }
.iab-author__name:hover { color: var(--iab-primary); }
.iab-author__role { display: block; font-size: .82rem; font-weight: 700; color: var(--iab-primary); }
.iab-author__bio { margin: 8px 0 0; font-size: .9rem; color: var(--iab-muted); line-height: 1.5; }
.iab-author__linkedin { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--iab-primary); }

/* =========================================================================
   17. Reader tools
   ========================================================================= */
.iab-readertools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 1.6em; }
.iab-readertools__group { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.iab-readertools__sz { min-width: 44px; justify-content: center; font-weight: 700; }
.iab-readaloud { display: inline-flex; gap: 10px; }
.iab-readaloud[hidden] { display: none; }
.iab-readertools__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; min-height: 44px;
  border: 1px solid var(--iab-border); border-radius: 999px;
  background: var(--iab-card); color: var(--iab-ink);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.iab-readertools__btn:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-readertools__btn[aria-pressed="true"] { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-on-primary); }
.iab-readaloud__stop[hidden] { display: none; }

.iab-prose { font-size: calc(1.02em * var(--iab-read-scale, 1)); }
html.iab-spacious .iab-prose { letter-spacing: .05em; word-spacing: .12em; line-height: 2; }
html.iab-spacious .iab-prose p { margin-bottom: 1.8em; }
html.iab-focusmode .iab-article-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
html.iab-focusmode .iab-sidebar { display: none; }
html.iab-dysfont .iab-prose { font-family: 'Lexend', 'Atkinson Hyperlegible', system-ui, sans-serif; }
html.iab-serif .iab-prose { font-family: Georgia, 'Times New Roman', serif; }

.iab-quotecopy {
  position: absolute; z-index: 95; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--iab-ink); color: var(--iab-on-primary); font-size: .82rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--iab-shadow-1);
}
.iab-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 120;
  background: var(--iab-ink); color: var(--iab-on-primary); padding: 10px 22px; border-radius: 999px;
  font-size: .88rem; font-weight: 600; box-shadow: var(--iab-shadow-1);
  animation: iab-fadein .2s ease;
}
@keyframes iab-fadein { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

@media (max-width: 600px) {
  .iab-readertools { gap: 8px; }
  .iab-readertools__btn { padding: 7px 12px; font-size: .82rem; }
}

/* =========================================================================
   18. Share buttons
   ========================================================================= */
.iab-share { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; align-items: center; }
.iab-share__label { font-size: .9rem; font-weight: 600; color: var(--iab-muted); margin-right: 4px; }
.iab-share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border: 1px solid var(--iab-border); border-radius: 999px;
  font-size: .87rem; font-weight: 500; color: var(--iab-ink);
  transition: border-color .15s, color .15s;
}
.iab-share__btn:hover { border-color: var(--iab-primary); color: var(--iab-primary); text-decoration: none; }

/* =========================================================================
   19. Post navigatie
   ========================================================================= */
.iab-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.iab-postnav__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); color: inherit; transition: border-color .15s, transform .15s; }
.iab-postnav__item:hover { border-color: var(--iab-primary); transform: translateY(-2px); text-decoration: none; }
.iab-postnav__next { text-align: right; align-items: flex-end; }
.iab-postnav__dir { font-size: .8rem; font-weight: 600; color: var(--iab-primary); }
.iab-postnav__title { font-weight: 600; line-height: 1.3; color: var(--iab-ink); }
@media (max-width: 600px) { .iab-postnav { grid-template-columns: minmax(0, 1fr); } .iab-postnav__next { text-align: left; align-items: flex-start; } }

/* =========================================================================
   20. Related + pagination
   ========================================================================= */
.iab-related { margin: 40px 0 0; }
.iab-related h2 { font-size: 1.4rem; margin-bottom: 20px; }
.iab-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.iab-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--iab-radius-sm); border: 1px solid var(--iab-border); background: var(--iab-card); font-weight: 700; color: var(--iab-ink); }
.iab-pagination .page-numbers.current { background: var(--iab-primary); color: var(--iab-on-primary); border-color: var(--iab-primary); }
.iab-pagination a.page-numbers:hover { border-color: var(--iab-primary); color: var(--iab-primary); text-decoration: none; }

/* =========================================================================
   21. Auteurspagina
   ========================================================================= */
.iab-authorcard { display: flex; gap: 24px; align-items: flex-start; background: var(--iab-tint-1); border-radius: var(--iab-radius); padding: 32px; margin: 24px 0 40px; }
.iab-authorcard__avatar { flex: 0 0 96px; width: 96px; height: 96px; }
.iab-authorcard__avatar img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; }
.iab-authorcard__role { font-size: .75rem; color: var(--iab-primary); font-weight: 700; }
.iab-authorcard__name { font-size: 1.6rem; margin: 4px 0 8px; color: var(--iab-ink); }
.iab-authorcard__bio { font-size: .95rem; color: var(--iab-muted); line-height: 1.6; margin: 0 0 12px; }
.iab-authorcard__meta { display: flex; gap: 24px; font-size: .85rem; color: var(--iab-muted); flex-wrap: wrap; align-items: center; }
.iab-authorcard__meta strong { color: var(--iab-ink); }
@media (max-width: 600px) { .iab-authorcard { flex-direction: column; text-align: center; align-items: center; } }

/* Team (over ons) */
.iab-team { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 24px 0; }
.iab-team__lid { display: flex; gap: 16px; align-items: flex-start; background: var(--iab-bg); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); padding: 20px; }
.iab-team__foto { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.iab-team__info strong { display: block; }
.iab-team__info strong a { color: var(--iab-ink); text-decoration: none; }
.iab-team__info strong a:hover { color: var(--iab-primary); }
.iab-team__rol { display: block; color: var(--iab-primary); font-size: .85rem; font-weight: 700; margin: 2px 0 8px; }
.iab-team__info p { margin: 0; font-size: .9rem; color: var(--iab-muted); line-height: 1.55; }
@media (max-width: 600px) { .iab-team { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   22. CTA-banner
   ========================================================================= */
.iab-cta-banner-theme { background: var(--iab-tint-1); border: 1px solid var(--iab-border); color: var(--iab-text); border-radius: var(--iab-radius); padding: 30px; margin: 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.iab-cta-banner-theme h3 { color: var(--iab-ink); margin: 0 0 4px; }
.iab-cta-banner-theme p { margin: 0; color: var(--iab-text); }

/* =========================================================================
   23. Sitemap
   ========================================================================= */
.iab-sitemap h2 { font-size: 1.25rem; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--iab-border); }
.iab-sitemap h2:first-child { margin-top: 0; }
.iab-sitemap__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; }
.iab-sitemap__list li { break-inside: avoid; padding: 4px 0; }
.iab-sitemap__list a { color: var(--iab-primary); font-weight: 500; }
.iab-sitemap__list a:hover { text-decoration: underline; }
.iab-sitemap__list ul { list-style: none; padding: 0 0 0 16px; margin: 4px 0 0; columns: 1; }
.iab-sitemap__list ul li { font-size: .92rem; }
@media (max-width: 600px) { .iab-sitemap__list { columns: 1; } }

/* =========================================================================
   24. Zoekformulier (404 + search)
   ========================================================================= */
.iab-search--lg { display: flex; gap: 8px; }
.iab-search--lg input { flex: 1; padding: 14px 18px; border: 2px solid var(--iab-border); border-radius: var(--iab-radius-sm); font-size: 1.05rem; }
.iab-search--lg input:focus { outline: none; border-color: var(--iab-primary); }
.iab-search input[type="search"] { padding: 11px 14px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); }

/* =========================================================================
   25. Utility
   ========================================================================= */
.iab-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* =========================================================================
   26. Adminbalk-correctie
   ========================================================================= */
.admin-bar .iab-header { top: 32px; }
@media (max-width: 782px) {
  #wpadminbar { position: fixed !important; }
  .admin-bar .iab-header { top: 46px; }
  .admin-bar .iab-nav { inset: calc(64px + 46px) 0 auto 0; }
}

/* =========================================================================
   27. FAQ-styling voor losse <details> in de artikelcontent
   -------------------------------------------------------------------------
   Redacteuren zetten vraag/antwoord-blokken vaak als kale <details> in de
   content. Die krijgen hier dezelfde accordeonstijl als .iab-faq. De TOC-box
   is expliciet uitgezonderd: die heeft zijn eigen stijl (sectie 15) en zou
   anders het plus/min-teken van de FAQ erbij krijgen.
   ========================================================================= */
.iab-prose > details:not(.iab-toc-box) { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 4px 20px; margin-bottom: 12px; }
.iab-prose > details:not(.iab-toc-box) > summary { cursor: pointer; font-weight: 700; color: var(--iab-ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.iab-prose > details:not(.iab-toc-box) > summary::-webkit-details-marker { display: none; }
.iab-prose > details:not(.iab-toc-box) > summary::after { content: "+"; font-size: 1.5rem; color: var(--iab-primary); font-weight: 700; }
.iab-prose > details[open]:not(.iab-toc-box) { border-color: var(--iab-primary); }
.iab-prose > details[open]:not(.iab-toc-box) > summary::after { content: "\2212"; }
.iab-prose > details:not(.iab-toc-box) > p { margin: 0 0 16px; color: var(--iab-text); }
.iab-prose > details:not(.iab-toc-box) + details:not(.iab-toc-box) { margin-top: -2px; }

/* =========================================================================
   28. Scroll-affordance (fade-randen + veeg-hint)
   -------------------------------------------------------------------------
   Overal waar horizontaal gescrolld kan worden laten we dat op mobiel zien:
   een fade aan de kant waar nog inhoud staat en boven tabellen een veeg-hint
   die verdwijnt zodra er gescrold is. De klassen worden gezet door
   assets/js/iab-scrollhint.js.
   ========================================================================= */
.iab-scrollable { position: relative; }
.iab-scrollable::before,
.iab-scrollable::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none;
  opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.iab-scrollable::before { left: 0; background: linear-gradient(to right, var(--iab-bg), transparent); }
.iab-scrollable::after { right: 0; background: linear-gradient(to left, var(--iab-bg), transparent); }
.iab-scrollable.has-left::before { opacity: 1; }
.iab-scrollable.has-right::after { opacity: 1; }
.iab-scrollhint { display: none; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .82rem; font-weight: 600; color: var(--iab-muted); }
.iab-scrollhint svg { color: var(--iab-primary); }
.iab-scrollhint.is-visible { display: flex; }
@media (min-width: 861px) { .iab-scrollhint { display: none !important; } }

/* =========================================================================
   29. Auteurs en team (aanvullingen)
   -------------------------------------------------------------------------
   LET OP: het get_avatar-filter (inc/blog.php) bouwt de img-tag zelf op en
   geeft die alleen de WordPress-standaardklassen mee. Meegegeven eigen
   classes overleven dat filter niet, dus avatars worden hier via de
   containerselector gestyled (.iab-team img.avatar), nooit via .iab-team__foto.
   ========================================================================= */
.iab-authorcard__expertise { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.iab-badge { display: inline-block; background: var(--iab-surface); color: var(--iab-primary); border: 1px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 4px 12px; font-size: .78rem; font-weight: 600; }
.iab-team img.avatar, .iab-authorcard__avatar img, .iab-author__avatar img { border-radius: 50%; object-fit: cover; }
.iab-team__lid > a:first-child { flex: 0 0 96px; }
.iab-team img.avatar { width: 96px; height: 96px; display: block; }
@media (max-width: 600px) { .iab-team__lid > a:first-child { flex: 0 0 72px; } .iab-team img.avatar { width: 72px; height: 72px; } }

/* =========================================================================
   30. Homepage: help-drieluik
   ========================================================================= */
.iab-help3__grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 24px; margin-top: 8px; }
.iab-help3__card { display: flex; flex-direction: column; align-items: flex-start; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-1); padding: 30px 28px; min-width: 0; }
.iab-help3__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: var(--iab-tint-1); margin-bottom: 18px; flex-shrink: 0; }
.iab-help3__icon svg { width: 30px; height: 30px; }
.iab-help3__card h3 { margin: 0 0 10px; font-size: 1.12rem; font-family: var(--iab-font-head); font-weight: 700; }
.iab-help3__card p { margin: 0 0 22px; color: var(--iab-text); font-size: .95rem; }
.iab-help3__btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; background: var(--iab-card); color: var(--iab-primary); border: 1px solid var(--iab-primary); border-radius: 999px; padding: 11px 22px; font-weight: 700; font-size: .92rem; transition: background .15s, color .15s; }
.iab-help3__btn:hover { background: var(--iab-primary); color: var(--iab-on-primary); text-decoration: none; }
@media (max-width: 860px) { .iab-help3__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* =========================================================================
   31. Homepage: statblok
   ========================================================================= */
.iab-statblok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; max-width: 900px; margin-left: auto; margin-right: auto; }
.iab-statblok__card { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-1); padding: 26px 20px; text-align: center; }
.iab-statblok__cijfer { display: block; font-family: var(--iab-font-head); font-weight: 700; font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem); color: var(--iab-primary); line-height: 1.1; }
.iab-statblok__label { display: block; margin-top: 8px; color: var(--iab-muted); font-size: .9rem; }
@media (max-width: 860px) { .iab-statblok { grid-template-columns: minmax(0, 1fr); max-width: 420px; } }

/* =========================================================================
   32. Homepage: vergelijker-mockup
   ========================================================================= */
.iab-vm__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.iab-vm__art { min-width: 0; }
.iab-vm__art svg { display: block; width: 100%; height: auto; }
.iab-vm__copy { min-width: 0; }
.iab-vm__copy .iab-lead { margin: 12px 0 20px; }
.iab-vm__list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.iab-vm__list li { position: relative; padding-left: 26px; color: var(--iab-text); font-size: .96rem; }
.iab-vm__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--iab-accent); }
@media (max-width: 860px) { .iab-vm__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; } .iab-vm__art { order: -1; max-width: 100%; } }

/* =========================================================================
   33. Homepage: extern linkblok
   ========================================================================= */
.iab-extlinks { padding-top: 0; }
.iab-extlinks__links { font-size: .9rem; color: var(--iab-muted); line-height: 2; }
.iab-extlinks__links a { color: var(--iab-muted); text-decoration: underline; text-underline-offset: 2px; }
.iab-extlinks__links a:hover { color: var(--iab-primary); }

/* =========================================================================
   34. Sidebar-uitbreidingen (deal, trustbadge, tool, wist-je-dat)
   ========================================================================= */
.iab-sidebar__deal { border: 1px solid var(--iab-border); border-top: 3px solid var(--iab-accent); }
.iab-sidebar__deal-kop, .iab-sidebar__deal-prijs, .iab-sidebar__deal-cta { margin-left: 20px; margin-right: 20px; }
.iab-sidebar__deal-kop { display: flex; align-items: center; gap: 10px; margin-top: 14px; margin-bottom: 8px; }
.iab-sidebar__deal-kop img { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; }
.iab-sidebar__deal-kop strong { color: var(--iab-ink); min-width: 0; }
.iab-sidebar__deal-prijs { font-family: var(--iab-font-head); font-size: 1.3rem; color: var(--iab-ink); font-weight: 700; margin-top: 0; margin-bottom: 12px; }
.iab-sidebar__deal-prijs small { font-size: .8rem; color: var(--iab-muted); font-weight: 600; }
.iab-sidebar__deal-prijs s { font-size: .9rem; color: var(--iab-muted); font-weight: 500; margin-left: 6px; }
.iab-sidebar__deal-cta { display: block; text-align: center; margin-bottom: 18px; }
/* Sterrenrating (iab_stars_html). Staat ook in de plugin-CSS, maar die wordt
   niet geladen op gewone berichten/pagina's zonder vergelijkershortcode. Zonder
   deze regels rendert elke SVG op zijn intrinsieke formaat, zwart gevuld. */
.iab-stars { display: inline-flex; gap: 2px; --iab-star-size: 18px; line-height: 1; }
.iab-star { width: var(--iab-star-size); height: var(--iab-star-size); flex: 0 0 auto; fill: var(--iab-border); }
.iab-star.is-full, .iab-star.is-half { fill: var(--iab-accent); }

.iab-sidebar__trust { text-align: center; padding: 20px; }
.iab-sidebar__trust .iab-stars { justify-content: center; margin-top: 4px; }
.iab-sidebar__trust-cijfer { display: block; font-family: var(--iab-font-head); font-size: 1.9rem; font-weight: 700; color: var(--iab-primary); }
.iab-sidebar__trust a { display: block; margin-top: 6px; font-size: .88rem; color: var(--iab-muted); }
.iab-sidebar__trust a:hover { color: var(--iab-primary); }
.iab-sidebar__feit { background: var(--iab-tint-1); }
.iab-sidebar__feit p, .iab-sidebar__tool p { font-size: .92rem; color: var(--iab-text); margin: 12px 20px; }
.iab-sidebar__tool p { color: var(--iab-muted); }

/* =========================================================================
   35. Voorkeursbron-knop (onder de deelknoppen)
   ========================================================================= */
.iab-google-source { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 18px; border: 1px solid var(--iab-border); border-radius: 999px; background: var(--iab-surface); color: var(--iab-ink); font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: var(--iab-shadow-1); }
.iab-google-source:hover { border-color: var(--iab-primary); color: var(--iab-primary); }

/* =========================================================================
   36. 404-pagina
   ========================================================================= */
.iab-404__inner { max-width: 640px; text-align: center; }
.iab-404__inner .iab-lead { margin-inline: auto; }
.iab-404__illu svg { width: min(320px, 80%); height: auto; margin: 0 auto 10px; display: block; }
.iab-404__illu text { font-family: var(--iab-font-head); }
.iab-404__search { margin: 28px auto; max-width: 460px; }
.iab-404__acties { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.iab-404__links { margin-top: 44px; }
.iab-404__links h2 { font-size: 1.05rem; margin-bottom: 14px; }
.iab-404__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.iab-404__chip { display: inline-block; background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .9rem; color: var(--iab-ink); }
.iab-404__chip:hover { border-color: var(--iab-primary); color: var(--iab-primary); }

/* =========================================================================
   37. Home-secties uit de pilot (batch 3): top3, waarom, updates, actueel,
   meer-links, providerstrip, kennisbank-onderwerpen (page-kennisbank.php),
   contactformulier.
   ========================================================================= */
.iab-shead--left { text-align: left; }
.iab-shead--left .iab-lead { margin-inline: 0; }

.iab-top3__grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 22px; align-items: stretch; }
.iab-top3__card { position: relative; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-1); padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.iab-top3__card:nth-child(1) { order: 2; }
.iab-top3__card:nth-child(2) { order: 1; }
.iab-top3__card:nth-child(3) { order: 3; }
.iab-top3__card--featured { order: 2; border: 1px solid var(--iab-primary); box-shadow: var(--iab-shadow-2); padding-top: 36px; }
.iab-top3__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--iab-accent); color: var(--iab-ink); font-weight: 700; font-size: .76rem; padding: 5px 16px; border-radius: 999px; white-space: nowrap; }
.iab-top3__score { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: var(--iab-radius-sm); font-weight: 700; font-size: .95rem; color: var(--iab-success); background: var(--iab-tint-3); }
.iab-top3__score--great { color: var(--iab-success); }
.iab-top3__score--good { color: var(--iab-primary); }
.iab-top3__score--ok { color: var(--iab-warning); }
.iab-top3__score--poor { color: var(--iab-danger); }
.iab-top3__logo { width: 56px; height: 56px; border-radius: 8px; background: var(--iab-bg); border: 1px solid var(--iab-border); display: grid; place-items: center; overflow: hidden; padding: 6px; margin-top: 4px; }
.iab-top3__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.iab-top3__initials { font-weight: 700; color: var(--iab-muted); }
.iab-top3__name { margin: 2px 0 0; font-size: 1.1rem; }
.iab-top3__name a { color: var(--iab-ink); }
.iab-top3__name a:hover { color: var(--iab-primary); }
.iab-top3__usps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--iab-text); }
.iab-top3__usps li { display: flex; align-items: center; gap: 7px; }
.iab-top3__usps svg { flex: 0 0 auto; color: var(--iab-success); }
.iab-top3__cta { margin-top: auto; padding-top: 14px; width: 100%; }
@media (max-width: 860px) {
	.iab-top3__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.iab-top3__card:nth-child(1), .iab-top3__card:nth-child(2), .iab-top3__card:nth-child(3), .iab-top3__card--featured { order: 0; }
}

/* Tweekoloms: links kop + lead (sticky zolang de lijst rechts hoger is),
   rechts een lijst van de punten met het icoon op de regel. Mobiel (860px en
   smaller) staan de kolommen onder elkaar, zie de media query onderaan. */
.iab-waarom__layout { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px 40px; align-items: start; margin-top: 8px; }
.iab-waarom__intro { position: sticky; top: 100px; }
.iab-waarom__lijst { display: flex; flex-direction: column; }
.iab-waarom__row { display: flex; gap: 18px; align-items: flex-start; padding-block: 22px; border-bottom: 1px solid var(--iab-border); }
.iab-waarom__row:first-child { padding-top: 0; }
.iab-waarom__row:last-child { border-bottom: 0; padding-bottom: 0; }
.iab-waarom__rowbody { flex: 1 1 auto; min-width: 0; }
.iab-waarom__iconwrap { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; }
.iab-waarom__iconwrap svg { width: 28px; height: 28px; }
.iab-waarom__rowbody h3 { margin: 0 0 10px; font-size: 1.12rem; font-family: var(--iab-font-head); font-weight: 700; }
.iab-waarom__body p { margin: 0 0 10px; color: var(--iab-text); font-size: .96rem; }
.iab-waarom__body p:last-child { margin-bottom: 0; }
.iab-waarom__body .iab-waarom__extra { display: none; }
.iab-waarom__body.is-open .iab-waarom__extra { display: block; }
.iab-waarom__foot { margin-top: 14px; display: flex; justify-content: flex-start; }
.iab-waarom__toggle { width: auto; height: auto; border-radius: 999px; padding: 8px 16px 8px 18px; gap: 8px; display: inline-flex; flex-direction: row-reverse; align-items: center; border: 1px solid var(--iab-border); background: var(--iab-card); color: var(--iab-primary); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.iab-waarom__toggle:hover { border-color: var(--iab-primary); }
.iab-waarom__toggle-label { font-size: 14px; font-weight: 700; color: var(--iab-primary); transition: color .15s; }
.iab-waarom__toggle-icon { display: grid; place-items: center; transition: transform .2s ease; }
.iab-waarom__toggle[aria-expanded="true"] { background: var(--iab-primary); border-color: var(--iab-primary); }
.iab-waarom__toggle[aria-expanded="true"] .iab-waarom__toggle-label { color: var(--iab-on-primary); }
.iab-waarom__toggle[aria-expanded="true"] .iab-waarom__toggle-icon { transform: rotate(180deg); color: var(--iab-on-primary); }
.iab-waarom__cta { margin-top: 44px; }
@media (max-width: 860px) {
  .iab-waarom__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .iab-waarom__intro { position: static; }
}

.iab-updates__grid { align-items: stretch; }
.iab-updates__card { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-1); overflow: hidden; display: flex; flex-direction: column; color: inherit; height: 100%; transition: transform .12s, box-shadow .15s, border-color .15s; }
.iab-updates__card:hover { transform: translateY(-3px); box-shadow: var(--iab-shadow-2); border-color: var(--iab-primary); text-decoration: none; }
.iab-updates__card:hover .iab-updates__cta-arrow { transform: translateX(4px); }
.iab-updates__cover { position: relative; height: 132px; overflow: hidden; }
.iab-updates__cover--1 { background: linear-gradient(135deg, var(--iab-tint-1), var(--iab-tint-2)); }
.iab-updates__cover--2 { background: linear-gradient(135deg, var(--iab-tint-3), var(--iab-tint-4)); }
.iab-updates__cover--3 { background: linear-gradient(135deg, var(--iab-tint-2), var(--iab-tint-3)); }
.iab-updates__cover--4 { background: linear-gradient(135deg, var(--iab-tint-4), var(--iab-tint-1)); }
.iab-updates__ring { position: absolute; right: -20px; bottom: -26px; opacity: .22; pointer-events: none; }
.iab-updates__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.iab-updates__meta { display: flex; align-items: center; gap: 10px; }
.iab-updates__chip { background: var(--iab-tint-1); color: var(--iab-primary); padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: .78rem; }
.iab-updates__date { font-size: 12.5px; color: var(--iab-muted); }
.iab-updates__title { font-size: 17px; font-weight: 700; color: var(--iab-ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iab-updates__excerpt { font-size: 14.5px; color: var(--iab-muted); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iab-updates__cta { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--iab-primary); }
.iab-updates__cta-arrow { display: inline-flex; transition: transform .15s ease; }
.iab-updates__foot { margin-top: 30px; }

.iab-actueel__kaart { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; background: var(--iab-surface); border: 1px solid var(--iab-border); border-radius: 20px; box-shadow: var(--iab-shadow-1); padding: 36px 40px; }
.iab-actueel__badge { display: inline-block; background: var(--iab-tint-2); color: var(--iab-primary); font-weight: 700; font-size: .85rem; border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; }
.iab-actueel__kop { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 0 0 14px; }
.iab-actueel__main p { color: var(--iab-text); }
.iab-actueel__zij { border-left: 1px solid var(--iab-border); padding-left: 32px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.iab-actueel__expert { display: flex; align-items: center; gap: 12px; }
.iab-actueel__expert img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.iab-actueel__naam { display: block; color: var(--iab-ink); font-weight: 700; }
.iab-actueel__rol { color: var(--iab-muted); font-size: .88rem; }
.iab-actueel__zijtekst { color: var(--iab-muted); font-size: .92rem; margin: 0; }
.iab-actueel__zij .iab-actueel__cta { text-align: center; white-space: normal; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }
.iab-actueel__link { font-weight: 700; color: var(--iab-primary); }
@media (max-width: 860px) {
	.iab-actueel__kaart { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px; }
	.iab-actueel__zij { border-left: 0; border-top: 1px solid var(--iab-border); padding-left: 0; padding-top: 20px; }
}

.iab-providerstrip .iab-logostrip__kop { text-transform: none; font-size: .92rem; }
.iab-providerstrip .iab-logos-carousel { overflow: visible; }
.iab-providerstrip .iab-logos-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 16px; width: auto; }
.iab-providerstrip .iab-logos__item {
	width: 184px; height: 84px; flex: 0 0 auto;
	display: grid; place-items: center;
	background: var(--iab-card); border: 1px solid var(--iab-border);
	border-radius: var(--iab-radius-sm); padding: 12px 16px;
	box-shadow: var(--iab-shadow-1);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.iab-providerstrip a.iab-logos__item:hover { transform: translateY(-2px); border-color: var(--iab-primary); box-shadow: var(--iab-shadow-2); }
.iab-providerstrip .iab-logos__item img { height: 44px; width: 100%; max-width: 148px; object-fit: contain; filter: none; opacity: 1; }
.iab-providerstrip .iab-logos__initials { font-size: 15px; font-weight: 700; color: var(--iab-ink); white-space: nowrap; }
.iab-providerstrip .iab-logos__fallback { font-size: 15px; font-weight: 700; color: var(--iab-muted); white-space: nowrap; }
@media (max-width: 600px) { .iab-providerstrip .iab-logos-track { gap: 10px; } .iab-providerstrip .iab-logos__item { width: calc(50% - 5px); height: 68px; } .iab-providerstrip .iab-logos__item img { height: 34px; max-width: 130px; } }

.iab-meer-links__grid { align-items: start; }
.iab-meer-links__kop { font-size: 13px; font-weight: 700; color: var(--iab-muted); margin: 0 0 16px; font-family: var(--iab-font-body); }
.iab-meer-links__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.iab-meer-links__col a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dotted var(--iab-border); color: var(--iab-text); font-weight: 600; font-size: .95rem; }
.iab-meer-links__col a:hover { color: var(--iab-primary); text-decoration: none; border-bottom-color: var(--iab-accent); }
.iab-meer-links__col a:hover .iab-ml-link__arrow { transform: translateX(4px); }
.iab-meer-links__foot { margin-top: 38px; }

.iab-kb-topics { margin-top: 36px; }
.iab-kb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.iab-kb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--iab-border); border-radius: 999px; background: var(--iab-card); color: var(--iab-ink); font-weight: 700; font-size: .92rem; }
.iab-kb-chip:hover { border-color: var(--iab-primary); color: var(--iab-primary); text-decoration: none; }
.iab-kb-chip__count { background: var(--iab-tint-1); color: var(--iab-primary); border-radius: 999px; padding: 1px 8px; font-size: .78rem; font-weight: 700; }
.iab-kb-section { margin-bottom: 44px; padding-top: 12px; scroll-margin-top: 90px; }
.iab-kb-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.iab-kb-section__head h2 { margin: 0; }
.iab-kb-section__all { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.iab-kb-section__desc { color: var(--iab-muted); margin: 0 0 18px; max-width: 70ch; }

.iab-contact { max-width: var(--iab-content); }
.iab-contact__melding { padding: 16px 18px; border-radius: var(--iab-radius-sm); font-weight: 600; margin-bottom: 24px; }
.iab-contact__melding--ok { background: var(--iab-tint-3); color: var(--iab-success); border: 1px solid var(--iab-success); }
.iab-contact__melding--fout { background: var(--iab-tint-2); color: var(--iab-danger); border: 1px solid var(--iab-danger); }
.iab-contact__form { display: flex; flex-direction: column; gap: 18px; }
.iab-contact__row { display: flex; flex-direction: column; gap: 6px; }
.iab-contact__row label { font-weight: 700; font-size: .92rem; color: var(--iab-ink); }
.iab-contact__row input, .iab-contact__row select, .iab-contact__row textarea {
	padding: 12px 14px;
	border: 1px solid var(--iab-border);
	border-radius: var(--iab-radius-sm);
	font: inherit;
	font-size: .98rem;
	color: var(--iab-text);
	background: var(--iab-card);
}
.iab-contact__row input:focus, .iab-contact__row select:focus, .iab-contact__row textarea:focus {
	outline: none;
	border-color: var(--iab-primary);
}
.iab-contact__row textarea { resize: vertical; min-height: 140px; }
.iab-contact__hp { position: absolute; left: -9999px; top: -9999px; }
.iab-contact__form .iab-btn { align-self: flex-start; }


/* =========================================================================
   99. Site-signatuur internet-abonnement.com
   -------------------------------------------------------------------------
   Deze sectie legt de drie merkelementen (vouw-hoek, rechte accentstreep,
   stap-badge) over de generieke kit-componenten heen. Alles hier gebruikt
   uitsluitend tokens uit het :root-blok bovenaan dit bestand.
   ========================================================================= */

/* --- Knoppen: marineblauw is de standaard, oranje is de uitroepteken. -----
   De meeste knoppen op de site zijn navigatie ("Bekijken", "Vergelijken")
   en horen rustig te zijn. Alleen .iab-btn--accent is oranje: de knop die
   echt om een actie vraagt. */
.iab-btn,
.iab-btn--primary { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-btn:hover,
.iab-btn--primary:hover { background: var(--iab-primary-dark); color: var(--iab-on-primary); }
.iab-btn--marine { background: var(--iab-primary); color: var(--iab-on-primary); }
.iab-btn--marine:hover { background: var(--iab-primary-dark); }
/* Dubbele klasse: wint ook van de plugin-basisknop (.iab-btn), die na deze
   stylesheet laadt. */
.iab-btn.iab-btn--accent { background: var(--iab-cta); color: var(--iab-on-primary); }
.iab-btn.iab-btn--accent:hover { background: var(--iab-cta-dark); color: var(--iab-on-primary); opacity: 1; }

/* --- Dragende kaarten: rustige kaart, geen vouw-hoek meer. -------------- */
.iab-herocheck__card,
.iab-help3__card,
.iab-aanrader,
.iab-topdeal,
.iab-deal-blok,
.iab-prijstabel,
.iab-sidebar__cta,
.iab-expert,
.iab-authorcard,
.iab-rcard--top {
  position: relative;
}
.iab-herocheck__card::before,
.iab-help3__card::before,
.iab-aanrader::before,
.iab-topdeal::before,
.iab-deal-blok::before,
.iab-prijstabel::before,
.iab-sidebar__cta::before,
.iab-expert::before,
.iab-authorcard::before,
.iab-rcard--top::before { content: none; }

/* --- Rechte accentstreep voor de sectiekoppen. ---------------------------
   De kit centreert homepage-koppen (.iab-shead--center); daar hoort de
   streep boven de kop, niet ernaast. */
.iab-shead--center .iab-section-heading { padding-left: 0; padding-top: 18px; }
.iab-shead--center .iab-section-heading::before {
  left: 50%;
  top: 0;
  bottom: auto;
  width: 48px;
  height: 5px;
  transform: translateX(-50%);
}

/* --- Stap-badge met nummer. ---------------------------------------------- */
.iab-stap__num {
  background: var(--iab-primary);
  color: var(--iab-on-primary);
  border: 0;
  border-radius: 50%;
  font-family: var(--iab-font-head);
  font-weight: 700;
}

/* --- Koppen: iets strakker letterspatie, past bij Albert Sans. ------------ */
h1, h2, h3 { letter-spacing: -0.005em; }

/* --- Kaartranden: net iets zichtbaarder, degelijker dan een pure schaduw. - */
.iab-help3__card,
.iab-postcard,
.iab-authorcard,
.iab-pillar { border: 1px solid var(--iab-border); }

/* De golfrand onder de hero is vervallen: de hero eindigt met een dunne
   lijn en witruimte, zoals bij de Nederlandse vergelijkers gebruikelijk. */
.iab-hero__inner { position: relative; z-index: 2; }

/* --- Keuzehulp per situatie (template-parts/home/situaties.php). ---------- */
.iab-situaties {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.iab-situatie {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--iab-card);
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius);
  padding: 24px 22px 22px;
  box-shadow: var(--iab-shadow-1);
  transition: transform .12s ease, box-shadow .15s ease;
}
.iab-situatie::before { content: none; }
.iab-situatie:hover { border-color: var(--iab-primary); box-shadow: var(--iab-shadow-2); }
/* Klein "advies"-label linksboven, los van de adviesvouw rechtsboven
   (sectie 100): laat de kaart als adviesblad lezen. Twee woorden, dus
   hoofdletters mogen. */
.iab-situatie__advies { align-self: flex-start; display: inline-flex; background: var(--iab-tint-2); color: var(--iab-accent); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.iab-situatie__titel { margin: 4px 0 0; font-size: 1.12rem; }
.iab-situatie__tekst { margin: 0; color: var(--iab-text); font-size: .97rem; flex: 1 1 auto; }
.iab-situatie__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-weight: 700;
  color: var(--iab-primary);
  text-decoration: none;
}
.iab-situatie__link:hover { color: var(--iab-cta); text-decoration: underline; }
.iab-situaties__voet { margin-top: 26px; text-align: center; color: var(--iab-muted); }

@media (max-width: 860px) {
  .iab-situaties { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .iab-situaties { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Contentvisuals in de kennisbank en op de moneypages
   -------------------------------------------------------------------------
   .iab-figure is de drager van elke in-tekst-visual: een datatabel of een
   uitleg-schema, altijd met een bijschrift. Het schema (.iab-schema) is een
   genummerde lijst waarin het nummer in de oranje accentkleur voor de regel
   hangt, zodat een fasering of stappenvolgorde in een oogopslag leesbaar is.
   Geen enkele kleur hier is een letterlijke hex: alles loopt via de tokens.
   ========================================================================= */
.iab-prose .iab-figure { margin: 2em 0; padding: 0; }
.iab-prose .iab-figure > table { margin: 0; background: var(--iab-card); }
.iab-prose .iab-figure > figcaption {
  margin-top: 10px;
  font-size: .92rem;
  color: var(--iab-muted);
  border-left: 3px solid var(--iab-accent);
  padding-left: 12px;
}
.iab-prose .iab-schema {
  list-style: none;
  counter-reset: iabschema;
  margin: 0;
  padding: 0;
  border: 1px solid var(--iab-border);
  border-radius: var(--iab-radius);
  background: var(--iab-card);
  overflow: hidden;
}
.iab-prose .iab-schema > li {
  counter-increment: iabschema;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 14px;
  align-items: start;
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--iab-border);
}
.iab-prose .iab-schema > li:first-child { border-top: 0; }
.iab-prose .iab-schema > li::before {
  content: counter(iabschema);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--iab-tint-oranje);
  color: var(--iab-accent-dark);
  font-family: var(--iab-font-head);
  font-weight: 700;
  font-size: .95rem;
}
.iab-prose .iab-schema > li > strong { color: var(--iab-ink); font-family: var(--iab-font-head); }
.iab-prose .iab-schema > li > span { grid-column: 2; color: var(--iab-text); }

/* CTA-regel direct onder een live datablok. */
.iab-prose .iab-datablok-voet { margin: 18px 0 32px; }

@media (max-width: 600px) {
  .iab-prose .iab-schema > li { grid-template-columns: 32px 1fr; padding: 14px 14px; gap: 4px 10px; }
  .iab-prose .iab-schema > li::before { width: 28px; height: 28px; font-size: .85rem; }
}

/* Afsluitende leestekst op de homepage: rustig vlak, leesbreedte van een
   artikel, iets kleiner gezet dan de secties erboven. */
.iab-section--seo { background: var(--iab-bg); border-top: 1px solid var(--iab-border); }
.iab-section--seo .iab-prose > h2 { margin-top: 0; }
.iab-section--seo .iab-prose > h3 { margin-top: 1.8em; }

/* Verwijzing naar een verwant artikel, midden in de lopende tekst. */
.iab-prose .iab-leesook {
  background: var(--iab-tint-blauw);
  border-left: 4px solid var(--iab-accent);
  border-radius: 0 var(--iab-radius-sm) var(--iab-radius-sm) 0;
  padding: 14px 18px;
  margin: 1.6em 0;
  font-size: .96rem;
}
.iab-prose .iab-leesook strong { color: var(--iab-ink); }

/* -------------------------------------------------------------------------
   Leeskolom mag nooit breder worden dan zijn kolom.
   .iab-prose is een grid-item met auto-marges; die combinatie maakt de breedte
   fit-content, waardoor een breed live datablok (de prijstabel op een
   landingspagina) het item boven de kolombreedte kon duwen en de pagina op
   mobiel horizontaal liet scrollen. Met min() blijft de leesbreedte op desktop
   gelijk en krimpt de kolom op smalle schermen gewoon mee.
   ------------------------------------------------------------------------- */
.iab-prose { max-width: min(var(--iab-content), 100%); }
.iab-prose--wide { max-width: 100%; }

/* =========================================================================
   100. Adviseur-vormtaal internet-abonnement.com
   -------------------------------------------------------------------------
   De identiteit van deze site is "de adviseur": keuzehulp-eerst, gidsend en
   stapsgewijs. De drie dragers van die vormtaal:
   (1) de situatietegel: een witte tegel met lijnicoon, titel en pijl, als
       eerste stap van de keuzehulp (hero) en als snelfilter (vergelijker);
   (2) het kompas-motief: een klein oranje driehoekje dat naar rechtsboven
       wijst, voor elke sectiekop en footerkop (zelfde naald als in het logo);
   (3) rust in de kaarten: wit, 1px rand, schaduw alleen bij hover.
   Alles hier gebruikt uitsluitend tokens uit het :root-blok bovenaan.
   ========================================================================= */

/* --- (2) Kompas-motief: kleine gecentreerde sectiekop met ondertitel. ----
   Het adviseur-stramien voor homepage- en sectiekoppen: het oranje
   kompas-driehoekje klein gecentreerd BOVEN de kop, daaronder een bewust
   kleiner gehouden kop en een gecentreerde ondertitel (.iab-lead). Links
   uitgelijnde paginakoppen (artikelen, archieven) gebruiken .iab-shead--left
   en houden het driehoekje links van de kop. */
.iab-shead { margin-bottom: 34px; }
.iab-shead--center { text-align: center; }
.iab-shead--center .iab-lead { margin-inline: auto; font-size: 1.05rem; }
.iab-shead--center .iab-section-heading {
	padding-left: 0;
	padding-top: 24px;
	text-align: center;
	font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem);
}
.iab-shead--center .iab-section-heading::before {
	left: 50%;
	right: auto;
	top: 0;
	bottom: auto;
	width: 13px;
	height: 13px;
	border-radius: 2px;
	background: var(--iab-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateX(-50%) rotate(-45deg);
}
.iab-shead--left .iab-section-heading,
.iab-article-head .iab-section-heading,
.iab-section-heading {
	padding-left: 26px;
}
.iab-section-heading::before {
	left: 0;
	right: auto;
	top: .3em;
	bottom: auto;
	width: 13px;
	height: 13px;
	border-radius: 2px;
	background: var(--iab-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: rotate(-45deg);
}

/* Footerkoppen krijgen hetzelfde driehoekje, iets kleiner. */
.iab-footer h4 { position: relative; padding-left: 20px; }
.iab-footer h4::before {
	content: "";
	position: absolute;
	left: 0;
	top: .32em;
	width: 10px;
	height: 10px;
	border-radius: 1px;
	background: var(--iab-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: rotate(-45deg);
}

/* --- (3) Kaarten: zachte schaduw, geen rand (zie ook sectie 101). -------- */
.iab-situatie { border: 0; box-shadow: var(--iab-shadow-soft); }
.iab-situatie:hover { border: 0; box-shadow: var(--iab-shadow-soft-lg); transform: translateY(-2px); }
.iab-situaties__voet { text-align: center; }

/* --- Hero "de adviseur": kop links, situatietegels rechts (3x2). --------- */
.iab-hero--advies { background: var(--iab-hero-tint); border-bottom: 1px solid var(--iab-border); }
.iab-hero--advies .iab-hero__advies {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
	padding-block: clamp(44px, 5vw, 72px) clamp(40px, 5vw, 64px);
}
.iab-hero--advies .iab-hero__kop { max-width: 560px; }
.iab-hero--advies h1 { margin-bottom: .4em; }
.iab-hero--advies .iab-hero__sub { margin-bottom: 0; max-width: 52ch; }
.iab-hero--advies .iab-hero__trust { margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 10px; }

/* --- (1) Situatietegels: zachte staande tegels, 3 kolommen x 2 rijen. ---- */
.iab-heroteg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 0;
}
.iab-heroteg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	background: var(--iab-card);
	border: 0;
	border-radius: var(--iab-radius);
	padding: 20px 18px 16px;
	color: var(--iab-ink);
	text-decoration: none;
	box-shadow: var(--iab-shadow-soft);
	transition: transform .12s ease, box-shadow .15s ease;
}
.iab-heroteg:hover,
.iab-heroteg:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--iab-shadow-soft-lg);
	text-decoration: none;
}
.iab-heroteg__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--iab-tint-1);
	color: var(--iab-primary);
	display: grid;
	place-items: center;
}
.iab-heroteg__titel {
	flex: 0 0 auto;
	font-family: var(--iab-font-head);
	font-weight: 600;
	font-size: 1.02rem;
	min-width: 0;
}
.iab-heroteg__pijl { display: inline-flex; color: var(--iab-accent); margin-top: auto; align-self: flex-end; }
.iab-heroteg:hover .iab-heroteg__pijl { transform: translateX(2px); }
.iab-heroteg__pijl { transition: transform .12s ease; }

/* Compacte snelfilter-variant boven de vergelijker-resultaten. */
.iab-heroteg-grid--compact {
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin: 4px 0 24px;
}
.iab-heroteg-grid--compact .iab-heroteg { flex-direction: row; align-items: center; padding: 10px 12px; gap: 10px; border-radius: var(--iab-radius-sm); }
.iab-heroteg-grid--compact .iab-heroteg__titel { flex: 1; }
.iab-heroteg-grid--compact .iab-heroteg__icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; }
.iab-heroteg-grid--compact .iab-heroteg__icon svg { width: 17px; height: 17px; }
.iab-heroteg-grid--compact .iab-heroteg__titel { font-size: .9rem; }
.iab-heroteg-grid--compact .iab-heroteg__pijl { display: none; }

/* --- Adrescheck: eigen brede sectie direct onder de hero. ---------------- */
.iab-adressectie { background: var(--iab-bg); padding-block: clamp(22px, 3vw, 34px); }
.iab-adresbalk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--iab-card);
	border: 0;
	border-radius: var(--iab-radius);
	box-shadow: var(--iab-shadow-soft);
	padding: 18px 24px;
	margin: 0;
}
.iab-adresbalk__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--iab-font-head);
	font-weight: 600;
	color: var(--iab-ink);
	flex: 1 1 280px;
}
.iab-adresbalk__labelicon {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--iab-tint-2);
	color: var(--iab-accent-dark);
	flex: 0 0 34px;
}
.iab-adresbalk__velden { display: flex; gap: 10px; flex-wrap: wrap; }
.iab-adresbalk input {
	border: 1px solid var(--iab-border);
	border-radius: var(--iab-radius-sm);
	padding: 11px 14px;
	font-size: 1rem;
	font-family: var(--iab-font-body);
	width: 130px;
	background: var(--iab-card);
	color: var(--iab-ink);
}
.iab-adresbalk__nr { width: 92px; }
.iab-adresbalk input:focus { outline: 2px solid var(--iab-primary); outline-offset: 0; border-color: var(--iab-primary); }
.iab-adresbalk--zonder { justify-content: flex-start; }

/* --- Formuliervelden: marine focus-rand, overal. ------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--iab-primary); outline-offset: 1px; }

/* --- "Past bij jou als"-regel bij de aanraderkaart. ----------------------
   Bestaande introzin van de sectie, opgemaakt als adviesregel die aan de
   kaart vastzit (zelfde breedte, gedeelde rand). */
.iab-aanrader-wrap { max-width: 640px; }
.iab-pastbij {
	position: relative;
	display: block;
	margin: 0;
	background: var(--iab-tint-1);
	border: 1px solid var(--iab-primary);
	border-bottom: 0;
	border-radius: var(--iab-radius) var(--iab-radius) 0 0;
	padding: 14px 20px 14px 44px;
	font-size: .95rem;
	color: var(--iab-text);
}
.iab-pastbij::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 1.25em;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--iab-accent);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: rotate(-45deg);
}
.iab-pastbij em { font-style: italic; }
.iab-aanrader-wrap .iab-app .iab-aanrader {
	margin-inline: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	max-width: none;
}

/* De aanrader-sectie is links uitgelijnd, zoals alles bij de adviseur. */
.iab-section--aanrader .iab-container { text-align: left; }

/* --- Responsief. --------------------------------------------------------- */
@media (max-width: 860px) {
	.iab-hero--advies .iab-hero__advies { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.iab-hero--advies .iab-hero__trust { flex-direction: row; gap: 14px 18px; margin-top: 18px; }
	.iab-heroteg-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.iab-heroteg-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.iab-heroteg-grid { grid-template-columns: repeat(2, 1fr); }
	.iab-heroteg-grid--compact { grid-template-columns: repeat(2, 1fr); }
	.iab-adresbalk { align-items: stretch; flex-direction: column; gap: 12px; }
	.iab-adresbalk__velden { width: 100%; }
	.iab-adresbalk__velden input { flex: 1 1 110px; min-width: 0; width: auto; }
	.iab-adresbalk__velden .iab-btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
	.iab-heroteg-grid { gap: 10px; }
	.iab-heroteg { gap: 10px; padding: 16px 14px 12px; }
	.iab-heroteg__icon { width: 40px; height: 40px; }
	.iab-heroteg__titel { font-size: .96rem; }
	.iab-heroteg-grid--compact .iab-heroteg { flex-direction: row; align-items: center; }
	.iab-heroteg-grid--compact .iab-heroteg__icon { width: 32px; height: 32px; }
}

/* =========================================================================
   101. Adviseur-vormtaal, ronde 3: zachte ruime vormen sitebreed
   -------------------------------------------------------------------------
   De layout-identiteit van internet-abonnement.com ("de adviseur") in vier
   regels, consequent op elke pagina:
   (1) kaarten: grote radius (16px, token --iab-radius), zachte schaduw en
       GEEN rand; hover verdiept de schaduw in plaats van een rand te kleuren;
   (2) knoppen: ruim afgerond (12px, token --iab-radius-btn), gevuld marine;
       oranje alleen voor de allerbelangrijkste actie per scherm;
   (3) header: logo links, menu in het midden, rechts een rustige outline-CTA,
       met een dun kruimelpad onder de header op alle subpagina's;
   (4) sectieritme: afwisselend wit en zeer licht blauw, met een kleine
       gecentreerde sectiekop plus ondertitel.
   Alles hier gebruikt uitsluitend tokens uit het :root-blok bovenaan.
   ========================================================================= */

/* --- (2) Knoppen: 12px radius, overal. -----------------------------------
   Met body-prefix zodat dit ook wint van de plugin-stylesheet, die na deze
   stylesheet laadt en dezelfde klassen definieert. */
body .iab-btn,
body .iab-btn-cta,
body .iab-btn-submit { border-radius: var(--iab-radius-btn); }
.iab-help3__btn,
.iab-loadmore,
.iab-waarom__toggle,
.iab-readertools__btn,
.iab-share__btn,
.iab-google-source { border-radius: var(--iab-radius-btn); }

/* Outline-CTA in de header: rustig, marine rand, vult pas bij hover. */
.iab-btn.iab-btn--hdr {
	background: transparent;
	color: var(--iab-primary);
	border: 1.5px solid var(--iab-primary);
}
.iab-btn.iab-btn--hdr:hover {
	background: var(--iab-primary);
	color: var(--iab-on-primary);
}

/* --- (3) Header: menu gecentreerd tussen logo en CTA. -------------------- */
.iab-nav { margin-inline: auto; }

/* Dun kruimelpad onder de header, op alle subpagina's (header.php). */
.iab-crumbbar { background: var(--iab-bg); border-bottom: 1px solid var(--iab-border); }
.iab-crumbbar .iab-breadcrumbs {
	margin: 0;
	padding: 9px 0;
	font-size: .84rem;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.iab-crumbbar .iab-breadcrumbs::-webkit-scrollbar { display: none; }

/* --- (4) Sectieritme: alle getinte banen zijn zeer licht blauw. ----------
   De klassen tint-2/3/4 (oranje/groen/grijs uit de kit) verwijzen op deze
   site naar dezelfde lichtblauwe baan; de afwisseling wit/blauw zit in de
   templates. De tokens zelf blijven ongemoeid voor semantisch kleurgebruik
   (succes- en foutmeldingen). */
.iab-tint-2,
.iab-tint-3,
.iab-tint-4 { background: var(--iab-tint-1); }

/* Kennisbank-kaartcovers volgen dezelfde blauwe beeldtaal. */
.iab-updates__cover--1 { background: linear-gradient(135deg, var(--iab-tint-blauw), var(--iab-hero-tint)); }
.iab-updates__cover--2 { background: linear-gradient(135deg, var(--iab-hero-tint), var(--iab-wit)); }
.iab-updates__cover--3 { background: linear-gradient(135deg, var(--iab-wit), var(--iab-tint-blauw)); }
.iab-updates__cover--4 { background: linear-gradient(135deg, var(--iab-hero-tint), var(--iab-tint-blauw)); }
body .iab-expert { background: var(--iab-tint-1); }
body .iab-rev-cta { background: var(--iab-tint-1); }
body .iab-actueel__badge { background: var(--iab-tint-1); }

/* --- (1) Kaarten: zachte schaduw, geen rand. -----------------------------
   Eerst de themakaarten, dan de kaarten van de vergelijker-plugin. */
body .iab-tilecard,
body .iab-postcard,
body .iab-pillar,
body .iab-help3__card,
body .iab-statblok__card,
body .iab-top3__card,
body .iab-waarom__card,
body .iab-updates__card,
body .iab-actueel__kaart,
body .iab-sidebar__block,
body .iab-sidebar__cta,
body .iab-widget,
body .iab-faq details,
body .iab-prose > details:not(.iab-toc-box),
body .iab-toc-box,
body .iab-author,
body .iab-authorcard,
body .iab-team__lid,
body .iab-postnav__item,
body .iab-cta-banner-theme,
body .iab-providerstrip .iab-logos__item,
body .iab-filters,
body .iab-gegevens,
body .iab-filters__mobtoggle,
body .iab-rcard,
body .iab-herocheck__card,
body .iab-aanrader,
body .iab-topdeal,
body .iab-review-card,
body .iab-top5,
body .iab-card,
body .iab-datablok {
	border-color: transparent;
	box-shadow: var(--iab-shadow-soft);
}
/* Hovers: schaduw verdiept, nooit een gekleurde rand. */
body a.iab-tilecard:hover,
body .iab-postcard:hover,
body .iab-pillar:hover,
body .iab-updates__card:hover,
body .iab-postnav__item:hover,
body .iab-providerstrip a.iab-logos__item:hover,
body a.iab-card:hover,
body .iab-heroteg:hover {
	border-color: transparent;
	box-shadow: var(--iab-shadow-soft-lg);
}

/* Uitgelichte kaarten houden hun marine markering als binnenring. */
body .iab-rcard--top {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--iab-primary) inset, var(--iab-shadow-soft);
}
body .iab-top3__card--featured {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--iab-primary) inset, var(--iab-shadow-soft-lg);
}

/* Aanrader plus "past bij jou"-regel: zacht blok zonder marine rand. */
body .iab-aanrader { border-color: transparent; }
body .iab-pastbij { border: 0; background: var(--iab-tint-1); }

/* Logo-wells in kaarten: vlak grijs, geen rand. De resultaatkaart staat hier
   bewust niet meer tussen: daar staat het logo vrij op de kaart, zonder tegel
   eromheen (zie .iab-rcard__logo in de plugin-CSS). */
body .iab-topdeal__logo,
body .iab-top3__logo,
body .iab-ptable-logo,
body .iab-aanrader__logo,
body .iab-rev-header__logo { border-color: transparent; background: var(--iab-surface); }

/* Kleine binnenrijen (top 3 in de sidebar): vlak, lijnloos. */
.iab-sidebar__top3-row { border-color: transparent; box-shadow: var(--iab-shadow-1); }
.iab-sidebar__top3-row:hover { border-color: transparent; box-shadow: var(--iab-shadow-soft); }

/* --- Beeldtaal: ronde icoonvlakken, overal dezelfde zachte cirkel. ------- */
.iab-help3__icon,
.iab-waarom__iconwrap,
.iab-waarom__iconwrap--groot,
.iab-pillar__icon,
.iab-kb-row__icon,
.iab-tilecard__icon { border-radius: 50%; }

/* De adviseur toont reviews en het statblok op een blauwe baan: de kaarten
   erop blijven wit met zachte schaduw, dat is genoeg contrast. */
body .iab-review-card { background: var(--iab-card); }

/* Aanrader: rustig label (geen kapitalen) en gecentreerde kaartkolom. */
body .iab-aanrader__label { text-transform: none; letter-spacing: .01em; }
.iab-aanrader-wrap { margin-inline: auto; }

/* ------------------------------------------------------------------ *
 * Onderwerptags onder een artikel. Zachte pillen in de rustige
 * marine/amber-verhouding van de site: neutraal in rust, amber-rand bij
 * hover, zodat ze niet met de CTA-knoppen concurreren.
 * ------------------------------------------------------------------ */
.iab-posttags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 14px;
	margin: 28px 0 0;
	padding: 18px 20px;
	background: var(--iab-tint-1);
	border: 1px solid var(--iab-border);
	border-radius: 14px;
}
.iab-posttags__label {
	font-weight: 600;
	color: var(--iab-muted);
	font-size: .92rem;
}
.iab-posttags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.iab-posttags__tag {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid var(--iab-border);
	border-radius: 999px;
	background: var(--iab-surface);
	color: var(--iab-primary);
	font-size: .88rem;
	line-height: 1.35;
	text-decoration: none;
}
.iab-posttags__tag:hover,
.iab-posttags__tag:focus-visible {
	border-color: var(--iab-accent);
	color: var(--iab-accent);
}
@media (max-width: 600px) {
	.iab-posttags { padding: 15px 16px; border-radius: 12px; }
}

/* ------------------------------------------------------------------ *
 * Tabel in de SEO-contentsectie op de homepage. Rustige rijen, zachte
 * radius, en op smalle schermen zijwaarts scrollbaar (de scrollhint
 * van iab-scrollhint.js pakt .iab-scrollable op).
 * ------------------------------------------------------------------ */
.iab-seo-tabel { margin: 26px 0; }
/* De tabel zelf is nooit de scrollcontainer: dat is uitsluitend de wrapper
   .iab-seo-tabel__scroll. Zou de tabel display:block met overflow:hidden
   houden (dat erft hij van .iab-prose table plus de radius-clip hieronder),
   dan valt de laatste kolom op mobiel weg zonder dat je er nog bij kunt.
   Kader en radius zitten daarom op de wrapper, de tabel blijft een tabel. */
.iab-seo-tabel table {
	display: table;
	width: 100%;
	border-collapse: collapse;
	font-size: .94rem;
	background: var(--iab-surface);
	border: 0;
	border-radius: 0;
	overflow: visible;
	white-space: normal;
}
.iab-seo-tabel caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: var(--iab-ink);
	padding: 0 0 10px;
}
.iab-seo-tabel th,
.iab-seo-tabel td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--iab-border);
	line-height: 1.5;
}
.iab-seo-tabel thead th {
	background: var(--iab-tint-1);
	color: var(--iab-ink);
	font-weight: 700;
	font-size: .88rem;
}
.iab-seo-tabel tbody tr:last-child th,
.iab-seo-tabel tbody tr:last-child td { border-bottom: 0; }
.iab-seo-tabel tbody th { font-weight: 700; color: var(--iab-primary); white-space: nowrap; }
.iab-seo-tabel figcaption {
	margin-top: 10px;
	color: var(--iab-muted);
	font-size: .88rem;
	line-height: 1.55;
}
/* Onder 860px is de tabel breder dan het scherm. Hij scrollt dan binnen zijn
   eigen kader (de pagina zelf scrollt nooit zijwaarts) en iab-scrollhint.js
   zet er via .iab-scrollable een zichtbare veeghint en fade bij. */
.iab-seo-tabel__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--iab-border);
	border-radius: 14px;
}
@media (max-width: 860px) {
	.iab-seo-tabel table { min-width: 640px; }
}

/* ------------------------------------------------------------------ *
 * Headerbalk: het menu telt vijf ingangen (abonnement kiezen, aanbieders,
 * adviescentrum, speedtest, over ons); de situatie-, uitleg- en
 * contactpagina's hangen als uitklapper onder die vijf. Zo past de balk op
 * een regel en blijft de header even hoog als bij de zustersites. Op desktop
 * nemen menu en merk daarnaast iets minder ruimte in, zodat de knop rechts
 * niet buiten de container valt; onder 860px staat het menu in de
 * uitklapper.
 * ------------------------------------------------------------------ */
@media (min-width: 861px) {
	.iab-header__bar { gap: 12px; min-width: 0; }
	.iab-nav { min-width: 0; }
	.iab-brand__mark { width: 178px; }
	.iab-nav a { padding: 10px 8px; font-size: .9rem; }
	.iab-header__cta .iab-btn { padding-inline: 16px; }
	/* Vlak boven de 860px-grens is de ruimte het krapst. Laat het menu daar
	   netjes op een tweede regel afbreken in plaats van buiten de container
	   te steken; op ruimere schermen blijft alles op een regel staan. */
	.iab-nav ul { flex-wrap: wrap; justify-content: flex-end; }
}

/* =========================================================================
   100. Keuzehulp: adviseur-hero, adviesvouw en stappenpad
   -------------------------------------------------------------------------
   De handtekening van internet-abonnement.com is de adviesvouw: een kaart
   met een omgevouwen oranje hoek rechtsboven, zoals een aangekruiste pagina
   in een adviesmap. Hij zit op de keuzehulp, de aanrader en de
   situatiekaarten. Beweging beperkt zich tot een zachte reveal.
   ========================================================================= */
.iab-vouw { position: relative; overflow: hidden; }
.iab-vouw::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 34px 34px 0; border-color: transparent var(--iab-hero-tint) transparent transparent; z-index: 2; }
.iab-vouw::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(225deg, transparent 50%, var(--iab-accent) 50%); z-index: 1; }
.iab-hero--keuzehulp .iab-vouw::before { border-color: transparent var(--iab-hero-tint) transparent transparent; }

.iab-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 700; color: var(--iab-primary); background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: 999px; padding: 6px 12px; margin-bottom: 16px; }
.iab-kicker svg { color: var(--iab-accent); }

.iab-hero--keuzehulp { background: var(--iab-hero-tint); border-bottom: 1px solid var(--iab-border); }
.iab-hero__kh { display: grid; grid-template-columns: minmax(0, 1.05fr) 440px; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 6vw, 84px) clamp(40px, 5vw, 60px); }
.iab-hero__kh .iab-hero__kop { max-width: 560px; }
.iab-hero__kh h1 { margin-bottom: .4em; }
.iab-hero__kh .iab-hero__trust { margin-top: 22px; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Keuzehulp-kaart */
.iab-keuzehulp { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); box-shadow: var(--iab-shadow-soft-lg); padding: 22px 24px 22px; }
.iab-keuzehulp__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-right: 28px; }
.iab-keuzehulp__label { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--iab-accent); }
.iab-keuzehulp__stippen { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.iab-keuzehulp__stippen li { width: 22px; height: 6px; border-radius: 3px; background: var(--iab-border); transition: background .2s; }
.iab-keuzehulp__stippen li.is-actief { background: var(--iab-primary); }
.iab-keuzehulp__stippen li.is-klaar { background: var(--iab-accent); }
.iab-keuzehulp__stap { border: 0; margin: 0; padding: 0; min-width: 0; }
.iab-keuzehulp__vraag { font-family: var(--iab-font-head); font-weight: 700; font-size: 1.2rem; color: var(--iab-ink); margin: 0 0 14px; padding: 0; display: flex; align-items: center; gap: 10px; }
.iab-keuzehulp__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--iab-primary); color: var(--iab-on-primary); font-size: .9rem; flex: 0 0 auto; }
.iab-keuzehulp__opties { display: grid; gap: 8px; }
.iab-keuzehulp__optie { text-align: left; background: var(--iab-card); border: 1.5px solid var(--iab-border); border-radius: var(--iab-radius-sm); padding: 12px 14px; font-family: var(--iab-font-body); font-weight: 600; font-size: 1rem; color: var(--iab-ink); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.iab-keuzehulp__optie::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--iab-muted); border-bottom: 2px solid var(--iab-muted); transform: rotate(-45deg); flex: 0 0 auto; opacity: .6; }
.iab-keuzehulp__optie:hover { border-color: var(--iab-primary); background: var(--iab-tint-1); transform: translateX(2px); }
.iab-keuzehulp__optie[aria-pressed="true"] { border-color: var(--iab-primary); background: var(--iab-tint-1); }
.iab-keuzehulp__terug { background: none; border: 0; padding: 10px 0 0; color: var(--iab-muted); font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.iab-keuzehulp__terug:hover { color: var(--iab-primary); }
.iab-keuzehulp__advies-label { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--iab-accent); margin: 0 0 6px; }
.iab-keuzehulp__advies-kop { font-family: var(--iab-font-head); font-size: 1.45rem; line-height: 1.2; color: var(--iab-ink); margin: 0 0 8px; }
.iab-keuzehulp__advies-kop span { display: block; font-size: 1.05rem; color: var(--iab-text); font-weight: 600; margin-top: 4px; }
.iab-keuzehulp__advies-uitleg { font-size: .95rem; color: var(--iab-text); margin: 0 0 12px; line-height: 1.5; }
.iab-keuzehulp__advies-teller { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--iab-radius-sm); background: var(--iab-tint-3); font-size: .9rem; color: var(--iab-text); }
.iab-keuzehulp__advies-teller strong { color: var(--iab-positief); font-size: 1.05rem; }
.iab-keuzehulp__advies .iab-keuzehulp__terug { display: block; margin-top: 8px; }
.iab-btn--block { width: 100%; }

/* Situatiekaarten en aanrader krijgen dezelfde vouw. */
.iab-situatie, .iab-app .iab-aanrader { position: relative; overflow: hidden; }
.iab-situatie::after, .iab-app .iab-aanrader::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, transparent 50%, var(--iab-accent) 50%); }
.iab-situatie::before, .iab-app .iab-aanrader::before { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 28px 28px 0; border-color: transparent var(--iab-bg) transparent transparent; z-index: 1; }

/* Stappen als genummerd pad met een stippellijn ertussen. */
.iab-stappen__pad { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.iab-stappen__pad::before { content: ""; position: absolute; left: 10%; right: 10%; top: 20px; border-top: 2px dashed var(--iab-border); }
.iab-stap { position: relative; }
.iab-stap__nr { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--iab-primary); color: var(--iab-on-primary); font-family: var(--iab-font-head); font-weight: 700; margin-bottom: 12px; }
@media (max-width: 860px) {
  .iab-stappen__pad { grid-template-columns: 1fr 1fr; }
  .iab-stappen__pad::before { display: none; }
}
@media (max-width: 480px) { .iab-stappen__pad { grid-template-columns: minmax(0, 1fr); } }

.iab-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.iab-reveal.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .iab-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1080px) { .iab-hero__kh { grid-template-columns: minmax(0, 1fr) 400px; } }
@media (max-width: 860px) {
  .iab-hero__kh { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .iab-hero__kh .iab-hero__kop { max-width: none; }
}
@media (max-width: 480px) { .iab-keuzehulp { padding: 18px 16px; } }

/* =========================================================================
   101. Aanvullingen op de keuzehulp/adviesvouw (sectie 100 blijft ongewijzigd)
   -------------------------------------------------------------------------
   Alleen toevoegingen: kleine correcties die nodig zijn om de pad-markup uit
   sectie 100 en de nieuwe onderdelen elders in dit bestand goed te laten
   renderen, zonder sectie 100 zelf aan te raken.
   ========================================================================= */

/* (a) .iab-stappen__pad is een <ol>: zonder reset toont de browser eigen
   nummering/inspringing naast de cirkel uit sectie 100. En de kit-stijl van
   de plugin (.iab-stap { padding-left: 60px }, voor de oude naast-elkaar
   opmaak) blijft anders ook meetellen binnen de nieuwe pad-markup. */
.iab-stappen__pad { list-style: none; margin: 0; padding: 0; }
.iab-stappen__pad .iab-stap { padding-left: 0; }

/* (b) Naar-boven-knop: vast rechtsonder, verschijnt na 600px scroll (JS in
   assets/js/iab-theme.js), verborgen zolang de mobiele filter-sheet
   (.iab-filters.is-open, plugin-CSS) open staat. */
.iab-totop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 250;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--iab-card);
	border: 1px solid var(--iab-border);
	border-radius: var(--iab-radius-sm);
	color: var(--iab-primary);
	box-shadow: var(--iab-shadow-soft);
	cursor: pointer;
	transition: box-shadow .15s ease, transform .12s ease;
}
.iab-totop:hover { box-shadow: var(--iab-shadow-soft-lg); transform: translateY(-2px); }
.iab-totop[hidden] { display: none; }
@media (max-width: 600px) { .iab-totop { right: 14px; bottom: 14px; } }

/* Interne-linkfase (interlinks.py): "Verder lezen"-blok voor de FAQ. */
.iab-verder { margin: 32px 0; padding: 20px 24px; background: var(--iab-tint-blauw); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); }
.iab-verder p { margin: 0 0 8px; }
.iab-verder ul { margin: 0; padding-left: 20px; }
.iab-verder li { margin: 6px 0; }

/* Inline CTA's in artikelen (inc/cta.php). */
.iab-cta-inline { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 32px 0; padding: 22px 26px; background: var(--iab-tint-1, var(--iab-surface)); border: 1px solid var(--iab-border); border-left: 5px solid var(--iab-primary); border-radius: var(--iab-radius, 10px); }
.iab-cta-inline__tekst { flex: 1 1 auto; min-width: 0; }
.iab-cta-inline__tekst p { margin: 0; }
.iab-cta-inline__kop { font-family: var(--iab-font-head); font-weight: 800; font-size: 1.15rem; color: var(--iab-ink); margin-bottom: 4px !important; }
.iab-cta-inline .iab-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) { .iab-cta-inline { flex-direction: column; align-items: flex-start; padding: 18px; } .iab-cta-inline .iab-btn { width: 100%; text-align: center; white-space: normal; } }

/* Hero met foto (assets/img/hero.jpg, Replicate): foto rechts, tint links
   zodat kop en tekst leesbaar blijven. */
.iab-hero--foto { background-image: linear-gradient(90deg, var(--iab-hero-tint) 0%, var(--iab-hero-tint) 34%, var(--iab-hero-tint-9) 46%, var(--iab-hero-tint-0) 72%), url("assets/img/hero.jpg"); background-size: cover; background-position: 100% 30%; }
.iab-hero--foto .iab-vezels { display: none; }
@media (max-width: 860px) { .iab-hero--foto { background-image: linear-gradient(180deg, var(--iab-hero-tint) 0%, var(--iab-hero-tint) 60%, var(--iab-hero-tint-9) 100%), url("assets/img/hero.jpg"); background-position: center; } }

/* Mobiele polish (sweep 22-09) */
/* Adresbalk op de homepage: .iab-adresbalk__label had flex: 1 1 280px, bedoeld
   als breedte-basis in de rij-indeling. Zodra de balk bij 600px kantelt naar
   flex-direction: column wordt diezelfde 280px de hoogte-basis, waardoor het
   label uitrekte en er een grote lege ruimte boven het icoon ontstond. */
@media (max-width: 600px) {
	.iab-adresbalk__label { flex: 0 0 auto; }
}

/* ===== Mobiele UX-laag (23-09) ===== */
/* Naar het model van overstappen.nl op mobiel: rustig ritme, grote koppen,
   een kaart per blok, compacte lijsten, swipebare kaarten. Alleen tokens. */
@media (max-width: 600px) {
  /* 1. Ritme en typografie */
  .iab-section, .iab-section--tight { padding-block: 52px; }
  .iab-container { padding-inline: 20px; }
  h2, .iab-section-heading { font-size: 26px; line-height: 1.18; letter-spacing: -.01em; }
  .iab-kicker, .iab-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
  .iab-lead { font-size: 16px; line-height: 1.55; }
  
  .iab-shead { margin-bottom: 26px; }

  /* 1b. Hero: grote, strakke kop en rustige intro */
  .iab-hero h1 { font-size: 30px; line-height: 1.12; letter-spacing: -.015em; }
  .iab-hero__sub, .iab-hero__lead, .iab-hero p.iab-lead { font-size: 16px; line-height: 1.5; }

  /* 2. Knoppen: een duidelijke primaire knop per blok, volle breedte */
  .iab-section .iab-btn--lg { display: flex; width: 100%; justify-content: center; min-height: 52px; padding-block: 14px; }

  /* 3. Statblok als compacte strook van drie in plaats van drie kaarten onder elkaar */
  .iab-statblok { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .iab-statblok__card { padding: 14px 8px !important; text-align: center; min-width: 0; }
  .iab-statblok__cijfer { font-size: 22px !important; line-height: 1.1; }
  .iab-statblok__label { font-size: 11px !important; line-height: 1.3; }

  /* 4. Providerstrip als swipebaar lint (een rij) */
  .iab-providerstrip .iab-logos-track { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -20px; padding: 4px 20px 12px; scrollbar-width: none; }
  .iab-providerstrip .iab-logos-track::-webkit-scrollbar { display: none; }
  .iab-providerstrip .iab-logos__item { flex: 0 0 136px; width: 136px; height: 64px; scroll-snap-align: start; }
  .iab-providerstrip .iab-logos__item img { height: 30px; max-width: 108px; }
  .iab-providerstrip .iab-logostrip__kop { text-align: left; }

  /* 5. Reviews als swipebare kaarten met de score gecentreerd erboven */
  .iab-reviews__summary, .iab-reviews__side { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px; margin-bottom: 18px; }
  .iab-reviews__avg { font-size: 44px; }
  .iab-reviews__grid { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -20px; padding: 4px 20px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .iab-reviews__grid::-webkit-scrollbar { display: none; }
  .iab-reviews__grid .iab-review-card { flex: 0 0 82%; scroll-snap-align: start; }

  /* 6. Prijstabel als lijst: geen zijwaarts scrollen, geen kop, rij = kaartregel */
  .iab-table-scroll:has(.iab-prijstabel) { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .iab-table-scroll:has(.iab-prijstabel)::before, .iab-table-scroll:has(.iab-prijstabel)::after { display: none; }
  .iab-table-scroll:has(.iab-prijstabel) + .iab-scrollhint, .iab-scrollhint:has(+ .iab-table-scroll .iab-prijstabel) { display: none; }
  .iab-prijstabel { display: block; min-width: 0 !important; width: 100%; }
  .iab-prijstabel thead { display: none; }
  .iab-prijstabel tbody { display: block; }
  .iab-prijstabel tbody td { display: block; padding: 0 !important; border: 0 !important; white-space: normal !important; background: none !important; }
  .iab-prijstabel tbody tr:first-child { border-top: 1px solid var(--iab-border); }
  .iab-prijstabel .iab-ptable-provider-flex { display: flex; align-items: center; gap: 10px; }
  .iab-prijstabel .iab-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; }
  .iab-prijstabel .iab-ptable-best-badge { display: inline-block; margin-bottom: 4px; font-size: 10px; }
  .iab-prijstabel .iab-btn--sm { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .iab-prijstabel tbody tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--iab-border); }
  .iab-prijstabel tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; font-weight: 800; font-size: 12px; color: var(--iab-muted); text-align: center; }
  .iab-prijstabel tbody td:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .iab-prijstabel tbody td:nth-child(3) { grid-area: 2 / 2 / 3 / 3; font-size: 13px; color: var(--iab-muted); }
  .iab-prijstabel tbody td:nth-child(3)::after { content: " Mb/s"; }
  .iab-prijstabel tbody td:nth-child(4) { grid-area: 3 / 2 / 4 / 3; font-size: 13px; color: var(--iab-muted); }
  .iab-prijstabel tbody td:nth-child(5) { grid-area: 1 / 3 / 2 / 4; font-weight: 800; font-size: 17px; color: var(--iab-ink); text-align: right; white-space: nowrap; }
  .iab-prijstabel tbody td:nth-child(5)::after { content: "eerste jaar"; display: block; font-weight: 600; font-size: 11px; color: var(--iab-muted); }
  .iab-prijstabel tbody td:nth-child(6) { grid-area: 2 / 3 / 4 / 4; text-align: right; }

  /* 6b. Aanrader-kaart: logo en score op een rij, tekst eronder over de volle breedte */
  .iab-aanrader__body { display: grid !important; grid-template-columns: auto 1fr; grid-template-areas: "logo score" "info info"; align-items: center; gap: 12px; text-align: left; }
  .iab-aanrader__logo { grid-area: logo; flex: none; }
  .iab-aanrader__score { grid-area: score; justify-self: end; }
  .iab-aanrader__info { grid-area: info; }
  .iab-aanrader__usps { text-align: left; }
  .iab-aanrader__name { text-align: left; }

  /* 7. Ingeklapte blokken (SEO-tekst, lange tabellen): JS zet de klasse */
  .iab-inklap { position: relative; }
  .iab-inklap.is-dicht { max-height: var(--iab-inklap-max, 560px); overflow: hidden; mask-image: linear-gradient(to bottom, currentColor 72%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, currentColor 72%, transparent 100%); }
  .iab-inklap__knop { display: flex; width: 100%; justify-content: center; align-items: center; gap: 8px; min-height: 48px; margin: 12px 0 0; padding: 12px 18px; background: var(--iab-card); color: var(--iab-primary); border: 2px solid var(--iab-primary); border-radius: var(--iab-radius-sm); font-weight: 800; font-family: var(--iab-font-head); font-size: 15px; cursor: pointer; }
  .iab-inklap__knop svg { transition: transform .2s; }
  .iab-inklap__knop.is-open svg { transform: rotate(180deg); }

  /* 9. Conversie eerst: hero zonder ballast (geen intro-alinea, geen losse
     vanaf-pil, geen lijst met vinkjes boven de kaart), kaart direct onder de kop */
  body .iab-hero__inner, body .iab-hero__grid { padding-top: 26px; padding-bottom: 28px; gap: 16px; }
  body .iab-hero h1 { font-size: 27px; margin-bottom: 12px; }
  body .iab-hero__sub { display: none; }
  body .iab-herocheck__badge { display: none; }
  body .iab-hero__trust, body .iab-herocheck__usps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12px; font-weight: 600; opacity: .85; }
  body .iab-hero__trust li, body .iab-herocheck__usps li { display: inline !important; padding: 0 !important; margin: 0 !important; }
  body .iab-hero__trust svg, body .iab-herocheck__usps svg, body .iab-hero__trust li::before { display: none; }
  body .iab-hero__kaart { margin-bottom: 0 !important; }
  body .iab-hero__copy { padding-bottom: 0 !important; }
  body .iab-herocheck__row { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; align-items: stretch !important; }
  body .iab-herocheck__row .iab-herocheck__field { flex: 1 1 calc(50% - 8px) !important; min-width: 0; }
  body .iab-herocheck__row .iab-herocheck__submit, body .iab-herocheck__row .iab-btn--block { flex: 1 1 100% !important; width: 100% !important; }
  body .iab-herocheck__usps { display: flex !important; }

  /* 10. Vergelijker: kop klein, geen intro, geen kruimelpad, adresregel compact,
     resultatenbalk in twee regels, eerste kaart binnen een scherm */
  body.iab-body--vergelijker .iab-breadcrumbs, body.iab-body--vergelijker .iab-crumbbar { display: none; }
  body.iab-body--vergelijker h1 { font-size: 22px; line-height: 1.2; margin: 14px 0 10px; }
  body.iab-body--vergelijker .iab-article-head, body.iab-body--vergelijker .iab-vergelijken-head { margin-bottom: 8px; padding-bottom: 0; }
  body.iab-body--vergelijker main .iab-container > p, body.iab-body--vergelijker .iab-vergelijken-lead, body.iab-body--vergelijker .iab-article-head + p { display: none; }
  body.iab-body--vergelijker .iab-heroteg-grid { display: flex !important; grid-template-columns: none !important; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -20px 10px; padding: 2px 20px 8px; scrollbar-width: none; }
  body.iab-body--vergelijker .iab-heroteg-grid::-webkit-scrollbar { display: none; }
  body.iab-body--vergelijker .iab-heroteg { flex: 0 0 auto; padding: 8px 12px; min-height: 0; }
  body .iab-gegevens, body .iab-adresblok { padding: 12px !important; margin-bottom: 10px; }
  body .iab-gegevens__title, body .iab-adresblok__title, body .iab-gegevens__hulp, body .iab-adresblok__label { display: none; }
  body .iab-gegevens__row, body .iab-adresblok__row { display: flex; gap: 8px; margin: 0; }
  body .iab-gegevens__row input, body .iab-adresblok__row input { min-width: 0; min-height: 44px; }
  body .iab-gegevens__row input[name="postcode"], body .iab-adresblok__row input[name="postcode"] { flex: 1 1 110px; }
  body .iab-gegevens__row input[name="huisnr"], body .iab-adresblok__row input[name="huisnr"] { flex: 0 1 64px; }
  body .iab-gegevens__row .iab-btn, body .iab-adresblok__row .iab-btn { flex: 0 0 auto !important; width: auto !important; min-height: 44px; padding-inline: 14px; white-space: nowrap; font-size: 14px; }
  body .iab-results__bar { margin-bottom: 10px !important; padding: 0 !important; gap: 8px !important; align-items: center !important; }
  body .iab-results__left { flex: 1 1 auto !important; gap: 4px !important; }
  body .iab-results__count { font-size: 13px !important; }
  body .iab-results__toolbar { gap: 8px !important; }
  body .iab-contractduur-switch { display: none; }
  body .iab-results__bar { display: flex !important; flex-wrap: wrap !important; }
  body .iab-results__toolbar { flex: 1 1 100% !important; display: flex !important; align-items: center; }
  body .iab-filters__mobtoggle { flex: 0 0 auto; min-height: 40px; }
  body .iab-results__sort { margin-left: 0 !important; flex: 1 1 auto !important; font-size: 13px; }
  body .iab-results__sort select { flex: 1 1 auto; padding: 8px 10px; }
  body .iab-bespaarregel { font-size: 13px !important; padding: 10px 12px !important; margin-bottom: 10px !important; }

  /* 11. Resultaatkaart: logo links, prijs groot rechts met doorgestreepte prijs en
     kortingbadge, naam en kenmerken eronder, knop over de volle breedte, voet met
     vergelijk-vinkje en details. De prijsblok-kinderen worden losse grid-items. */
  body .iab-rcard {
    display: grid !important; position: relative;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "logo badge" "price price" "jaar daarna" "body body" "cta cta" "cmp more" "details details" !important; justify-items: stretch !important;
    column-gap: 12px !important; row-gap: 8px !important; align-items: center !important;
    padding: 16px 16px 14px !important; margin-top: 10px;
  }
  body .iab-rcard__logo { grid-area: logo !important; align-self: center; display: block; padding-top: 2px; }
  body .iab-rcard__logo img { width: auto !important; max-width: 170px !important; height: 44px !important; object-fit: contain; object-position: left center; }
  body .iab-rcard__price { display: contents !important; }
  body .iab-rcard__badge { grid-area: badge !important; justify-self: end; margin: 0 0 6px !important; font-size: 11px !important; padding: 4px 9px !important; white-space: nowrap; }
  body .iab-rcard__priceline { grid-area: price !important; display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: 6px !important; margin: 6px 0 0 !important; padding-top: 12px !important; border-top: 1px solid var(--iab-border); }
  body .iab-rcard__price-old { font-size: 13px !important; }
  body .iab-rcard__bedrag { font-size: 28px !important; line-height: 1 !important; }
  body .iab-rcard__per { font-size: 13px !important; }
  body .iab-rcard__dash { display: none !important; }
  body .iab-rcard__jaar { grid-area: jaar !important; justify-self: start; text-align: left; font-size: 14px !important; margin: 4px 0 0 !important; white-space: nowrap; }
  body .iab-rcard__jaar span { font-size: 12px !important; }
  body .iab-rcard__daarna { grid-area: daarna !important; justify-self: end; text-align: right; font-size: 12px !important; margin: 2px 0 0 !important; white-space: nowrap; }
  body .iab-rcard__body { grid-area: body !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--iab-border); min-width: 0;  justify-self: stretch !important; width: auto !important;}
  body .iab-rcard__name { font-size: 17px !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
  body .iab-rcard__dealtekst { display: none !important; }
  body .iab-rcard__titlerow { gap: 6px !important; }
  body .iab-rcard__meta { gap: 6px 12px !important; font-size: 13px !important; margin: 0 0 8px !important; }
  body .iab-rcard__benefits { margin: 0 !important; gap: 4px !important; font-size: 14px !important; }
  body .iab-rcard__benefits li:nth-child(n+3) { display: none !important; }
  body .iab-rcard__cashback { font-size: 12px !important; }
  body .iab-rcard__cta-btn { grid-area: cta !important; width: 100% !important; max-width: none !important; margin: 14px 0 0 !important; min-height: 50px; display: flex !important; align-items: center; justify-content: center; font-size: 16px !important; }
  body .iab-rcard__foot { grid-area: auto !important; grid-column: 1 / -1 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 12px 0 0 !important; padding: 0 !important; border: 0 !important; }
  body .iab-rcard__comparecb { grid-area: cmp !important; justify-self: start; margin: 12px 0 0 !important; font-size: 13px !important; }
  body .iab-rcard__more { grid-area: more !important; justify-self: end; margin: 8px 0 0 !important; padding: 8px 14px !important; border: 1px solid var(--iab-border) !important; border-radius: 999px !important; background: var(--iab-card) !important; font-size: 13px !important; font-weight: 700 !important; }
  body .iab-rcard__foot .iab-rcard__comparecb, body .iab-rcard__foot .iab-rcard__more { grid-area: auto !important; margin-top: 0 !important; }
  body .iab-rcard__comparecb, body .iab-rcard__more { position: static !important; transform: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
  body .iab-rcard__details { grid-area: details !important; grid-column: auto !important; margin-top: 12px !important; }
  body .iab-rcard__rank { position: absolute !important; top: -12px !important; left: -10px !important; width: 26px; height: 26px; display: grid !important; place-items: center; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: 50%; font-size: 12px !important; font-weight: 800; z-index: 2; margin: 0 !important; }
  body .iab-rcard__aanraderpill { position: absolute !important; top: -13px !important; left: 22px !important; z-index: 2; margin: 0 !important; }
  body .iab-rcard__titlerow .iab-rcard__aanraderpill { position: static !important; display: inline-block; margin: 4px 6px 0 0 !important; }
  body .iab-rcard--top { padding-left: 16px !important; }

  /* 8. Footer compacter */
  .iab-footer { margin-top: 32px; }
  .iab-footer .iab-container { padding-block: 36px 20px; }
  .iab-footer__disclaimer { font-size: 12px; line-height: 1.5; }
}

/* USP-regels in de hero weg (Rinze 23-09): de kop en de kaart dragen de hero,
   vertrouwen staat lager op de pagina (statblok, reviews, methode). */
.iab-hero .iab-hero__trust, .iab-hero .iab-herocheck__usps { display: none !important; }

/* Popi-linkblok: shortcode draait altijd mee op de homepage, maar zonder
   links neemt de sectie geen ruimte in (hij blijft wel in de HTML staan). */
.iab-extlinks--leeg { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.iab-extlinks--leeg .iab-container { padding-block: 0 !important; }

/* Leeshulpbalk altijd op een regel: compacte knoppen, geen terugloop, en bij
   te weinig ruimte zijwaarts schuiven in plaats van een tweede rij. */
.iab-readertools { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.iab-readertools::-webkit-scrollbar { display: none; }
.iab-readertools__group { flex-wrap: nowrap; gap: 6px; }
.iab-readertools__btn { white-space: nowrap; padding: 7px 11px; font-size: .8rem; flex: 0 0 auto; }
.iab-readertools__sz { min-width: 36px; }
@media (max-width: 600px) { .iab-readertools { margin-inline: -20px; padding-inline: 20px; } }

/* ===== Linkhub: chiprijen en tellers (05-10) ===== */
.iab-linkhub__n { font-size: .78rem; font-weight: 600; color: var(--iab-muted); margin-left: 2px; }
.iab-linkhub__rij { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--iab-border); }
.iab-linkhub__rijkop { flex: 0 0 180px; font-size: .9rem; font-weight: 700; color: var(--iab-ink); padding-top: 6px; }
.iab-linkhub__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iab-linkhub__chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--iab-border); border-radius: 999px; background: var(--iab-card); color: var(--iab-ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.iab-linkhub__chip:hover { border-color: var(--iab-primary); color: var(--iab-primary); text-decoration: none; }
@media (max-width: 600px) {
	.iab-linkhub__rij { flex-direction: column; gap: 10px; }
	.iab-linkhub__rijkop { flex: 0 0 auto; padding-top: 0; }
}

/* ===== 404 als reddingspagina (08-10) =====
 * Links kop, "Bedoelde je misschien" en zoeken; rechts de adrescheck.
 * Daaronder routekaarten en de beoordeelde aanbieders. Gegenereerd door
 * _vergelijker-kit/scripts/vier-nul-vier.py. */
.iab-404v2 { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.iab-404v2__top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.iab-404v2__illu { width: auto; max-width: 260px; margin: 0 0 14px; }
.iab-404v2__illu svg, .iab-404v2__illu img { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; object-position: left center; }
.iab-404v2__main h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; text-align: left; }
.iab-404v2__lead { margin: 0 0 26px; font-size: 1.08rem; color: var(--iab-muted); max-width: 56ch; }
.iab-404v2__sug h2, .iab-404v2__routes h2, .iab-404v2__prov h2 { margin: 0 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iab-muted); text-align: left; }
.iab-404v2__sug ul { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); overflow: hidden; }
.iab-404v2__sug li + li { border-top: 1px solid var(--iab-border); }
.iab-404v2__sug a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: var(--iab-ink); }
.iab-404v2__sug a:hover { background: var(--iab-surface); }
.iab-404v2__sug a:hover .iab-404v2__pijl { color: var(--iab-primary); transform: translateX(3px); }
.iab-404v2__sugtekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iab-404v2__soort { font-size: .76rem; font-weight: 600; color: var(--iab-primary); }
.iab-404v2__sugtekst strong { font-size: 1rem; line-height: 1.35; }
.iab-404v2__pijl { flex: 0 0 auto; color: var(--iab-muted); display: inline-flex; transition: transform .15s ease, color .15s ease; }
.iab-404v2__zoek { display: flex; align-items: center; gap: 8px; max-width: 520px; padding: 6px 6px 6px 14px; border: 1px solid var(--iab-border); border-radius: 999px; background: var(--iab-card); }
.iab-404v2__zoekicoon { color: var(--iab-muted); display: inline-flex; }
.iab-404v2__zoek input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: 8px 4px; color: var(--iab-ink); outline: none; }
.iab-404v2__zoek .iab-btn { border-radius: 999px; padding: 9px 18px; }
.iab-404v2__check .iab-app, .iab-404v2__check .iab-herocheck { display: block; margin: 0; padding: 0; background: none; }
.iab-404v2__check .iab-herocheck__card { margin: 0; width: 100%; max-width: none; }
.iab-404v2__check .iab-herocheck__row { display: grid !important; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
.iab-404v2__check .iab-herocheck__field { min-width: 0; width: auto; flex: none; }
.iab-404v2__check .iab-herocheck__field input { width: 100%; min-width: 0; box-sizing: border-box; }
.iab-404v2__routes { margin-top: clamp(40px, 5vw, 64px); }
.iab-404v2__kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.iab-404v2__kaart { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); color: var(--iab-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.iab-404v2__kaart:hover { border-color: var(--iab-primary); transform: translateY(-2px); text-decoration: none; }
.iab-404v2__kaarticoon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: var(--iab-tint-1); color: var(--iab-primary); }
.iab-404v2__kaart strong { font-size: 1.05rem; }
.iab-404v2__kaart span:last-child { font-size: .9rem; line-height: 1.5; color: var(--iab-muted); }
.iab-404v2__prov { margin-top: clamp(32px, 4vw, 48px); }
.iab-404v2__logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.iab-404v2__logos a { display: grid; place-items: center; height: 60px; padding: 10px 12px; border: 1px solid var(--iab-border); border-radius: 12px; background: var(--iab-card); text-decoration: none; color: var(--iab-ink); font-weight: 700; font-size: .85rem; }
.iab-404v2__logos a:hover { border-color: var(--iab-primary); }
.iab-404v2__logos img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 860px) {
	.iab-404v2__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.iab-404v2__kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iab-404v2__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.iab-404v2__illu { max-width: 180px; }
	.iab-404v2__illu svg, .iab-404v2__illu img { max-height: 92px; }
	.iab-404v2__main h1 { font-size: 1.7rem; }
	.iab-404v2__lead { font-size: 1rem; margin-bottom: 20px; }
	.iab-404v2__sug a { padding: 12px 14px; }
	.iab-404v2__kaarten { gap: 10px; }
	.iab-404v2__kaart { padding: 16px 14px; }
	.iab-404v2__kaart span:last-child { display: none; }
	.iab-404v2__logos { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
	.iab-404v2__logos a { flex: 0 0 104px; scroll-snap-align: start; }
}

/* llms.txt in de onderbalk van de footer (08-10): klein, in de tekstkleur van de balk. */
.iab-footer__llms { color: inherit; opacity: .75; text-decoration: none; font-size: .8rem; }
.iab-footer__llms:hover { opacity: 1; text-decoration: underline; }

/* Footer-onderbalk: cookies, cookie-instellingen en llms.txt naast elkaar (19-10). */
.iab-footer__links { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }

/* =========================================================================
 * Mobiele correcties (31-10): geen horizontaal scrollen, ruimere tikdoelen,
 * invoervelden van 16px (iOS zoomt anders in bij focus), labels leesbaar.
 * ========================================================================= */
@media (max-width: 600px) {
	.iab-btn--lg { white-space: normal; max-width: 100%; text-align: center; }
	.iab-sidebar__post-cat { font-size: .75rem; }
	.iab-breadcrumbs a { display: inline-block; padding-block: 4px; }
	[class*="toc-list"] a { display: inline-block; padding-block: 5px; }
	.iab-footer__links a, .iab-footer ul a { display: inline-block; padding-block: 5px; }
	html body input:is([type="text"], [type="search"], [type="email"], [type="tel"], [type="number"]), html body select, html body textarea { font-size: 16px !important; }
	.iab-sp__sluit { min-width: 36px; min-height: 36px; }
	.iab-postcard__meta a { display: inline-block; padding-block: 4px; }
	.iab-rev-cta__knoppen { flex-wrap: wrap; }
	.iab-results__sort > label, .iab-results__sort > span { white-space: nowrap; }
	html.iab-menu-open, html.iab-menu-open body { overflow: hidden; }
	.iab-nav { overscroll-behavior: contain; }
	.iab-rev-cta__knoppen .iab-btn { white-space: normal; max-width: 100%; text-align: center; }
}

@media (max-width: 860px) {
	.iab-nav[data-open] { top: var(--iab-nav-top, 64px); max-height: var(--iab-nav-maxh, calc(100dvh - 64px)); }
}

/* ===== Footer: internet vergelijk netwerk (uitklapper met de vijf sites) ===== */
.iab-netwerk { padding-block: 14px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.iab-netwerk__uitklap > summary { cursor: pointer; font-weight: 700; color: inherit; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; }
.iab-netwerk__uitklap > summary::-webkit-details-marker { display: none; }
.iab-netwerk__uitklap > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.iab-netwerk__uitklap[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.iab-netwerk__lijst { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px; }
.iab-netwerk__lijst li { display: flex; flex-direction: column; gap: 2px; }
.iab-netwerk__naam { color: inherit; font-weight: 600; text-decoration: none; }
a.iab-netwerk__naam:hover { text-decoration: underline; }
.iab-netwerk__naam.is-huidig::after { content: " (deze site)"; font-weight: 400; opacity: .7; }
.iab-netwerk__oms { font-size: .85rem; color: inherit; opacity: .75; }

.iab-antispam { margin: 4px 0 12px; font-size: .85rem; color: var(--iab-muted); }
.iab-antispam.is-ok { color: var(--iab-success, #16A34A); }
.iab-antispam.is-ok::before { content: "\2713  "; }

/* ===== Stadspagina's (21-10) =====
 * Gegenereerd door _vergelijker-kit/scripts/plaatsen/stadspagina.py. Alleen
 * themakleuren via tokens, zodat elke site haar eigen uitstraling houdt. */
.iab-stadhero { background: var(--iab-surface); border-bottom: 1px solid var(--iab-border); padding-block: clamp(28px, 4vw, 52px); }
.iab-stadhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; grid-template-areas: "kop check" "intro check"; column-gap: 40px; row-gap: 0; align-items: start; }
.iab-stadhero__tekst { grid-area: kop; }
.iab-stadhero__intro { grid-area: intro; }
.iab-stadhero__check { grid-area: check; }
.iab-stadhero h1 { margin: 10px 0 12px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; }
.iab-stadhero .iab-stad__tekst { font-size: 1.08rem; color: var(--iab-text); max-width: 62ch; }
.iab-stadhero__bron { margin: 12px 0 0; font-size: .85rem; color: var(--iab-muted); }
.iab-stadhero__check .iab-app, .iab-stadhero__check .iab-herocheck { display: block; margin: 0; padding: 0; background: none; }
.iab-stadhero__check .iab-herocheck__card { margin: 0; width: 100%; max-width: none; }
.iab-stadhero__check .iab-herocheck__row { display: grid !important; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.iab-stadhero__check .iab-herocheck__field { min-width: 0; width: auto; flex: none; }
.iab-stadhero__check .iab-herocheck__row > button, .iab-stadhero__check .iab-herocheck__submit { grid-column: 1 / -1; width: 100%; white-space: normal; }
.iab-stadhero__check .iab-herocheck__field input { width: 100%; min-width: 0; box-sizing: border-box; }
.iab-stad__inhoud { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.iab-stad__blok h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.iab-stad__blok h3 { margin: 22px 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--iab-muted); }
.iab-stad__tekst p { margin: 0 0 12px; line-height: 1.65; max-width: 70ch; }
.iab-stad__blok--twee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.iab-stad__voetnoot { margin: 10px 0 0; font-size: .82rem; color: var(--iab-muted); max-width: 80ch; }
.iab-stad__cta { margin: -20px 0 0; }
.iab-stad__cta .iab-btn { white-space: normal; max-width: 100%; text-align: center; text-wrap: balance; }
.iab-stadslot { max-width: 860px; padding: 22px 26px; border-radius: var(--iab-radius); background: var(--iab-card); border: 1px solid var(--iab-border); border-left: 4px solid var(--iab-primary); }
.iab-stadslot h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.iab-stadslot .iab-stad__tekst p:last-child { margin-bottom: 0; }
.iab-stadwijk__gepland { display: inline; font-size: .8rem; color: var(--iab-muted); }
.iab-stadwijk__legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: .84rem; color: var(--iab-muted); }
.iab-stadwijk__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.iab-stadwijk__legenda .aan { background: var(--iab-primary); }
.iab-stadwijk__legenda .half { background: var(--iab-accent); }
.iab-stadwafel { justify-items: center; text-align: center; }

.iab-stadkern { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.iab-stadkern__tegel { padding: 18px 20px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); display: flex; flex-direction: column; gap: 4px; }
.iab-stadkern__tegel strong { font-family: var(--iab-font-head); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; color: var(--iab-primary); }
.iab-stadkern__tegel span { font-size: .88rem; color: var(--iab-muted); line-height: 1.4; }

.iab-stadbalk { display: flex; flex-direction: column; gap: 10px; }
.iab-stadbalk__rij { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; font-size: .92rem; }
.iab-stadbalk__label { color: var(--iab-ink); font-weight: 600; }
.iab-stadbalk__spoor { display: block; height: 10px; border-radius: 999px; background: var(--iab-tint-1); overflow: hidden; }
.iab-stadbalk__vul { display: block; height: 100%; border-radius: inherit; background: var(--iab-primary); }
.iab-stadbalk__rij--kabel .iab-stadbalk__vul { background: var(--iab-accent); }
.iab-stadbalk__rij--dsl .iab-stadbalk__vul { background: var(--iab-muted); }
.iab-stadbalk--prijs .iab-stadbalk__vul { background: var(--iab-accent); }
.iab-stadbalk__waarde { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--iab-ink); white-space: nowrap; text-align: right; }

.iab-staddonut { margin: 0; display: grid; justify-items: center; gap: 12px; }
.iab-staddonut svg { width: min(240px, 100%); height: auto; }
.iab-staddonut__basis { fill: none; stroke: var(--iab-tint-1); stroke-width: 18; }
.iab-staddonut__seg { fill: none; stroke-width: 18; }
.iab-staddonut__seg--aan { stroke: var(--iab-primary); }
.iab-staddonut__seg--half { stroke: var(--iab-accent); }
.iab-staddonut__seg--uit { stroke: var(--iab-border); }
.iab-staddonut__getal { text-anchor: middle; font-family: var(--iab-font-head); font-size: 26px; font-weight: 800; fill: var(--iab-ink); }
.iab-staddonut__sub { text-anchor: middle; font-size: 11px; fill: var(--iab-muted); }
.iab-staddonut figcaption { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: .88rem; color: var(--iab-muted); }
.iab-staddonut__leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.iab-staddonut__dot--aan { background: var(--iab-primary); }
.iab-staddonut__dot--half { background: var(--iab-accent); }
.iab-staddonut__dot--uit { background: var(--iab-border); }

.iab-stadwafel { margin: 0; display: grid; gap: 12px; }
.iab-stadwafel svg { width: min(260px, 100%); height: auto; }
.iab-stadwafel__aan { fill: var(--iab-primary); }
.iab-stadwafel__half { fill: var(--iab-accent); }
.iab-stadwafel__uit { fill: var(--iab-border); }
.iab-stadwafel figcaption { font-size: .92rem; color: var(--iab-text); max-width: 40ch; line-height: 1.5; }

.iab-stadtabel, .iab-stadwijk { border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); overflow: hidden; margin-top: 8px; }
.iab-stadtabel__kop, .iab-stadtabel__rij { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, 1.1fr); gap: 14px; padding: 14px 18px; align-items: center; }
.iab-stadwijk__kop, .iab-stadwijk__rij { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, .6fr) minmax(0, .7fr) minmax(0, .7fr); gap: 14px; padding: 12px 18px; align-items: center; }
.iab-stadtabel__kop, .iab-stadwijk__kop { background: var(--iab-surface); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--iab-muted); }
.iab-stadtabel__rij + .iab-stadtabel__rij, .iab-stadwijk__rij + .iab-stadwijk__rij { border-top: 1px solid var(--iab-border); }
.iab-stadtabel__naam { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.iab-stadtabel__naam img { width: auto; max-width: 72px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.iab-stadtabel__naam a { color: var(--iab-ink); }
.iab-stadtabel__bereik { display: block; height: 8px; border-radius: 999px; background: var(--iab-tint-1); overflow: hidden; margin-bottom: 4px; }
.iab-stadtabel__bereik span { display: block; height: 100%; background: var(--iab-primary); }
.iab-stadtabel small, .iab-stadwijk small { display: block; font-size: .8rem; color: var(--iab-muted); line-height: 1.35; }
.iab-stadwijk__meter { display: flex; height: 10px; border-radius: 999px; background: var(--iab-tint-1); overflow: hidden; margin-bottom: 4px; }
.iab-stadwijk__meter .aan { background: var(--iab-primary); }
.iab-stadwijk__meter .half { background: var(--iab-accent); }

.iab-stadprijzen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.iab-stadprijs { padding: 18px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); display: flex; flex-direction: column; gap: 6px; }
.iab-stadprijs__soort { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--iab-muted); }
.iab-stadprijs__wie { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.iab-stadprijs__wie img { width: auto; max-width: 64px; height: 24px; object-fit: contain; }
.iab-stadprijs strong { font-family: var(--iab-font-head); font-size: 1.6rem; color: var(--iab-ink); }
.iab-stadprijs strong small { font-size: .85rem; font-weight: 600; color: var(--iab-muted); }
.iab-stadprijs__klein { font-size: .84rem; color: var(--iab-muted); line-height: 1.45; }

.iab-stadhuis { display: flex; flex-direction: column; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); overflow: hidden; margin-top: 8px; }
.iab-stadhuis__rij { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; padding: 14px 18px; align-items: center; }
.iab-stadhuis__rij + .iab-stadhuis__rij { border-top: 1px solid var(--iab-border); }
.iab-stadhuis__wie strong { display: block; }
.iab-stadhuis__wie span, .iab-stadhuis small { font-size: .84rem; color: var(--iab-muted); }
.iab-stadhuis__prijs strong { display: block; font-family: var(--iab-font-head); font-size: 1.2rem; }

.iab-stadfaq { display: flex; flex-direction: column; gap: 8px; }
.iab-stadfaq__item { border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); padding: 0 18px; }
.iab-stadfaq__item summary { cursor: pointer; padding: 15px 34px 15px 0; font-weight: 700; color: var(--iab-ink); list-style: none; position: relative; }
.iab-stadfaq__item summary::-webkit-details-marker { display: none; }
.iab-stadfaq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--iab-tint-1); color: var(--iab-primary); font-weight: 700; }
.iab-stadfaq__item[open] summary::after { content: "\2212"; }
.iab-stadfaq__item div p { max-width: 75ch; }
.iab-stadfaq__item div { padding-bottom: 12px; }
.iab-stadmethode { padding: 22px 24px; border-radius: var(--iab-radius); background: var(--iab-surface); border: 1px solid var(--iab-border); display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); column-gap: 32px; }
.iab-stadmethode h2 { grid-row: span 2; }
.iab-stadmethode h2 { font-size: 1.1rem; }
.iab-stadmethode p { margin: 0 0 8px; font-size: .92rem; line-height: 1.6; color: var(--iab-text); max-width: 80ch; }
.iab-stadburen > div { display: flex; flex-wrap: wrap; gap: 8px; }
.iab-stadburen__link { padding: 8px 14px; border: 1px solid var(--iab-border); border-radius: 999px; background: var(--iab-card); color: var(--iab-ink); font-weight: 600; text-decoration: none; }
.iab-stadburen__link small { color: var(--iab-muted); font-weight: 500; }
.iab-stadburen__link:hover { border-color: var(--iab-primary); color: var(--iab-primary); }
.iab-stedenzoek { margin: 0 0 20px; padding: 18px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); }
.iab-stedenzoek label { display: block; font-weight: 700; color: var(--iab-ink); margin-bottom: 8px; }
.iab-stedenzoek input { width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid var(--iab-border); border-radius: var(--iab-radius-sm, 10px); background: var(--iab-bg, #fff); color: var(--iab-ink); }
.iab-stedenzoek input:focus { outline: none; border-color: var(--iab-primary); }
.iab-stedenzoek__aantal { margin: 8px 0 0; font-size: .85rem; color: var(--iab-muted); }
.iab-stedenzoek__geen { margin: 8px 0 0; }
.iab-stedenlijst__kaart[hidden] { display: none; }
.iab-stedenlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.iab-stedenlijst__kaart { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); color: var(--iab-ink); text-decoration: none; }
.iab-stedenlijst__kaart:hover { border-color: var(--iab-primary); }
.iab-stedenlijst__kaart strong { font-size: 1.15rem; }
.iab-stedenlijst__prov, .iab-stedenlijst__cijfer { font-size: .84rem; color: var(--iab-muted); }

.iab-stadkaart { border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); padding: 16px; }
.iab-stadkaart__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.iab-stadkaart__knop { border: 1px solid var(--iab-border); background: var(--iab-surface); color: var(--iab-ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.iab-stadkaart__knop[aria-pressed="true"] { background: var(--iab-primary); border-color: var(--iab-primary); color: var(--iab-card); }
.iab-stadkaart__vlak { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.iab-stadkaart svg { width: 100%; height: auto; display: block; }
.iab-stadkaart__wijk { stroke: var(--iab-card); stroke-width: 1.2; transition: opacity .15s; cursor: pointer; outline: none; }
.iab-stadkaart__wijk.is-leeg { fill: url(#iab-kaart-leeg); cursor: default; }
.iab-stadkaart__arcering-grond { fill: var(--iab-surface); }
.iab-stadkaart__arcering-lijn { stroke: var(--iab-border); stroke-width: 3; }
.iab-stadkaart__wijk.b0, .iab-stadkaart__schaal .b0 { fill: color-mix(in srgb, var(--iab-primary) 16%, var(--iab-card)); background: color-mix(in srgb, var(--iab-primary) 16%, var(--iab-card)); }
.iab-stadkaart__wijk.b1, .iab-stadkaart__schaal .b1 { fill: color-mix(in srgb, var(--iab-primary) 32%, var(--iab-card)); background: color-mix(in srgb, var(--iab-primary) 32%, var(--iab-card)); }
.iab-stadkaart__wijk.b2, .iab-stadkaart__schaal .b2 { fill: color-mix(in srgb, var(--iab-primary) 52%, var(--iab-card)); background: color-mix(in srgb, var(--iab-primary) 52%, var(--iab-card)); }
.iab-stadkaart__wijk.b3, .iab-stadkaart__schaal .b3 { fill: color-mix(in srgb, var(--iab-primary) 74%, var(--iab-card)); background: color-mix(in srgb, var(--iab-primary) 74%, var(--iab-card)); }
.iab-stadkaart__wijk.b4, .iab-stadkaart__schaal .b4 { fill: var(--iab-primary); background: var(--iab-primary); }
.iab-stadkaart__wijk:hover, .iab-stadkaart__wijk:focus, .iab-stadkaart__wijk.is-actief { stroke: var(--iab-ink); stroke-width: 2.5; }
.iab-stadkaart__info { padding: 14px; border-radius: var(--iab-radius); background: var(--iab-surface); font-size: .9rem; min-height: 120px; }
.iab-stadkaart__info strong { display: block; font-size: 1.05rem; margin-bottom: 6px; color: var(--iab-ink); }
.iab-stadkaart__info span { color: var(--iab-muted); }
.iab-stadkaart__info dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; }
.iab-stadkaart__info dt { color: var(--iab-muted); }
.iab-stadkaart__info dd { margin: 0; font-weight: 700; color: var(--iab-ink); text-align: right; }
.iab-stadkaart__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; font-size: .82rem; color: var(--iab-muted); }
.iab-stadkaart__schaal { display: inline-flex; }
.iab-stadkaart__schaal i { width: 28px; height: 10px; display: block; }
.iab-stadkaart__labels { display: inline-flex; gap: 6px; }
.iab-stadkaart__labels span + span::before { content: "tot "; }
.iab-stadkaart__leeg i { display: inline-block; width: 14px; height: 10px; background: repeating-linear-gradient(45deg, var(--iab-surface) 0 3px, var(--iab-border) 3px 5px); margin-right: 6px; vertical-align: -1px; }

.iab-stadwijkblok { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.iab-stadwijkblok__item { padding: 16px 18px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); }
.iab-stadwijkblok__item:not(.is-kort) { grid-column: span 2; }
.iab-stadwijkblok__item h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--iab-ink); }
.iab-stadwijkblok__cijfers { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: .86rem; color: var(--iab-muted); }
.iab-stadwijkblok__cijfers strong { color: var(--iab-primary); font-size: 1rem; }
.iab-stadwijkblok__cbs { margin: 0 0 6px; font-size: .82rem; color: var(--iab-text); }
.iab-stadwijkblok__cbs span, .iab-stadwijkblok__buurten span { color: var(--iab-muted); }
.iab-stadbron { margin-top: 18px; }
.iab-stadbron ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.iab-stadbron li { padding: 10px 14px; border-left: 3px solid var(--iab-accent); background: var(--iab-card); font-size: .9rem; }
.iab-stadbron q { font-style: italic; color: var(--iab-ink); }
.iab-stadbron cite { display: block; margin-top: 2px; font-style: normal; font-size: .78rem; color: var(--iab-muted); }
.iab-stadacm { margin-top: 18px; padding: 16px 18px; border-radius: var(--iab-radius); background: var(--iab-surface); border: 1px solid var(--iab-border); }
.iab-stadacm h3 { margin-top: 0; }
.iab-stadacm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.iab-stadacm strong { color: var(--iab-primary); }
.iab-stadwijkblok__buurten { margin: 8px 0 0; font-size: .78rem; color: var(--iab-muted); }

.iab-stadvergelijk, .iab-stadmatrix { width: 100%; border-collapse: collapse; background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: var(--iab-radius); overflow: hidden; font-size: .92rem; margin-top: 8px; }
.iab-stadvergelijk th, .iab-stadvergelijk td, .iab-stadmatrix th, .iab-stadmatrix td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--iab-border); vertical-align: top; }
.iab-stadvergelijk thead th, .iab-stadmatrix thead th { background: var(--iab-surface); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--iab-muted); border-top: 0; }
.iab-stadvergelijk tbody th, .iab-stadmatrix tbody th { font-weight: 600; color: var(--iab-ink); }
.iab-stadvergelijk__plaats { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .84rem; background: color-mix(in srgb, var(--iab-primary) calc(var(--deel) * 100%), var(--iab-tint-1)); color: var(--iab-ink); }
.iab-stadmatrix__rol { overflow-x: auto; }
.iab-stadmatrix td strong { display: block; color: var(--iab-ink); white-space: nowrap; }
.iab-stadmatrix td small { display: block; font-size: .76rem; color: var(--iab-muted); }
.iab-stadmatrix__geen { color: var(--iab-muted); }

.iab-stadbuurt__feiten { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.iab-stadbuurt__feiten li { padding: 12px 14px; border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); font-size: .84rem; color: var(--iab-muted); line-height: 1.35; }
.iab-stadbuurt__feiten strong { display: block; font-size: 1.5rem; color: var(--iab-primary); line-height: 1.1; margin-bottom: 2px; }
.iab-stadbuurt__zin { margin: 0 0 10px; font-size: .92rem; }
.iab-stadbuurt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.iab-stadbuurt__wijk { border: 1px solid var(--iab-border); border-radius: var(--iab-radius); background: var(--iab-card); scroll-margin-top: 90px; }
.iab-stadbuurt__wijk > summary { cursor: pointer; padding: 11px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.iab-stadbuurt__wijk > summary span { font-size: .84rem; color: var(--iab-muted); }
.iab-stadbuurt__wijk[open] > summary { border-bottom: 1px solid var(--iab-border); }
.iab-stadbuurt__rij { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; padding: 9px 16px; align-items: center; font-size: .88rem; }
.iab-stadbuurt__rij + .iab-stadbuurt__rij { border-top: 1px solid var(--iab-border); }
.iab-stadbuurt__rij.is-kop { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--iab-muted); }
.iab-stadbuurt__rij small { display: block; font-size: .76rem; color: var(--iab-muted); }
@media (max-width: 860px) {
	.iab-stadhero__grid, .iab-stad__blok--twee { grid-template-columns: 1fr; gap: 24px; }
	.iab-stadhero__grid { grid-template-areas: "kop" "check" "intro"; gap: 20px; }
	.iab-stadkern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.iab-stadprijzen { grid-template-columns: 1fr; }
	.iab-stadtabel__kop, .iab-stadwijk__kop { display: none; }
	.iab-stadtabel__rij { grid-template-columns: 1fr auto; grid-template-areas: "naam snel" "bereik bereik" "prijs prijs"; row-gap: 8px; }
	.iab-stadtabel__rij > span:nth-child(1) { grid-area: naam; }
	.iab-stadtabel__rij > span:nth-child(2) { grid-area: bereik; }
	.iab-stadtabel__rij > span:nth-child(3) { grid-area: snel; font-size: .85rem; color: var(--iab-muted); text-align: right; }
	.iab-stadtabel__rij > span:nth-child(4) { grid-area: prijs; text-align: left; }
	.iab-stadwijk__rij { grid-template-columns: 1fr 1fr; row-gap: 8px; align-items: start; }
	.iab-stadwijk__rij > span:nth-child(1) { grid-column: 1 / -1; }
	.iab-stadbuurt__rij { grid-template-columns: 1fr 1fr; row-gap: 6px; }
	.iab-stadbuurt__rij > span:nth-child(1) { grid-column: 1 / -1; }
	.iab-stadbuurt__rij.is-kop { display: none; }
	.iab-stadwijk__rij > span[data-label]::before, .iab-stadbuurt__rij > span[data-label]::before, .iab-stadtabel__rij > span[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--iab-muted); margin-bottom: 2px; }
	.iab-stadtabel__rij > span:nth-child(3)::before { display: inline; margin-right: 6px; }
	.iab-stadmethode { grid-template-columns: 1fr; }
	.iab-stadmethode h2 { grid-row: auto; }
	.iab-stadkaart__vlak { grid-template-columns: 1fr; }
	.iab-stadwijkblok__item:not(.is-kort) { grid-column: auto; }
	.iab-stadvergelijk th, .iab-stadvergelijk td { padding: 9px 10px; font-size: .85rem; }
	.iab-stadhuis__rij { grid-template-columns: 1fr auto; }
	.iab-stadhuis__prijs { text-align: right; }
	.iab-stadhuis__bereik { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
	.iab-stadhero h1 { font-size: 1.75rem; }
	.iab-stadkern__tegel { padding: 14px; }
	.iab-stadbalk__rij { grid-template-columns: 1fr auto; }
	.iab-stadbalk__rij .iab-stadbalk__spoor { grid-column: 1 / -1; grid-row: 2; }
}

/* ===== Vormgeving 2 (27-10): zelfde inhoud, meer ritme =====
 * Kleurrijke hero met kerncijfers eroverheen, inhoudsbalk, secties als kaarten,
 * buurtzoeker. Alleen tokens, dus elke site houdt haar eigen kleuren. */
.iab-stad { --stad-hero-1: color-mix(in srgb, var(--iab-primary) 62%, #0b0620); --stad-schaduw: var(--iab-shadow-1, 0 2px 10px rgba(20,16,40,.06)); --stad-schaduw-2: var(--iab-shadow-2, 0 14px 34px rgba(20,16,40,.12)); background: var(--iab-bg, var(--iab-surface)); }
.iab-stadhero { position: relative; overflow: hidden; border: 0; color: #fff; padding-block: clamp(30px, 4.5vw, 56px) clamp(84px, 9vw, 120px);
	background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--iab-primary) 55%, #fff 0%) 0%, transparent 55%), linear-gradient(135deg, var(--stad-hero-1) 0%, var(--iab-primary) 100%); }
.iab-stadhero::after { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--iab-accent) 35%, transparent) 0%, transparent 65%); pointer-events: none; }
.iab-stadhero__grid { position: relative; z-index: 1; }
.iab-stadhero h1 { color: #fff; letter-spacing: -.015em; }
.iab-stadhero .iab-breadcrumbs, .iab-stadhero .iab-breadcrumbs a { color: rgba(255,255,255,.75); }
.iab-stadhero .iab-breadcrumbs a:hover { color: #fff; }
.iab-stadhero .iab-stad__tekst, .iab-stadhero .iab-stad__tekst p { color: rgba(255,255,255,.92); }
.iab-stadhero .iab-stad__tekst a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.iab-stadhero .iab-stad__tekst strong { color: #fff; }
.iab-stadhero__bron { color: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); }
.iab-stadhero__bron::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--iab-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iab-accent) 30%, transparent); }
.iab-stadhero__check .iab-herocheck__card { box-shadow: var(--stad-schaduw-2); color: var(--iab-text); }

/* Kerncijfers vallen over de hero heen */
.iab-stad__inhoud { padding-top: 0; }
.iab-stad__inhoud > .iab-stadkern:first-child { margin-top: calc(-1 * clamp(56px, 6vw, 80px)); position: relative; z-index: 2; }
.iab-stadkern__tegel { position: relative; overflow: hidden; padding: 20px 22px 18px; box-shadow: var(--stad-schaduw-2); border-color: transparent; }
.iab-stadkern__tegel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--iab-primary), var(--iab-accent)); }
.iab-stadkern__tegel strong { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.02em; }

/* Inhoudsbalk */
.iab-stadtoc { position: sticky; top: calc(var(--iab-header-h, 0px) + 8px); z-index: 20; border-radius: 999px; background: color-mix(in srgb, var(--iab-card) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--iab-border); box-shadow: var(--stad-schaduw); }
.iab-stadtoc .iab-container { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 6px; max-width: none; }
.iab-stadtoc .iab-container::-webkit-scrollbar { display: none; }
.iab-stadtoc a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--iab-text); text-decoration: none; transition: background .15s, color .15s; }
.iab-stadtoc a:hover { background: var(--iab-tint-1); color: var(--iab-ink); }
.iab-stadtoc a.is-actief { background: var(--iab-primary); color: #fff; }
.iab-stad .iab-stad__blok[id] { scroll-margin-top: calc(var(--iab-header-h, 0px) + 70px); }

/* Secties als kaarten */
.iab-stad__inhoud { gap: clamp(20px, 3vw, 32px); padding-top: clamp(24px, 3vw, 36px); }
.iab-stad__inhoud > .iab-stadkern:first-child + * { margin-top: clamp(4px, 1vw, 12px); }
.iab-stad__inhoud > .iab-stad__blok[id] { background: var(--iab-card); border: 1px solid var(--iab-border); border-radius: calc(var(--iab-radius) + 4px); padding: clamp(22px, 3.4vw, 40px); box-shadow: var(--stad-schaduw); }
.iab-stad__blok[id] > h2, .iab-stad__blok--twee > div > h2:first-child { position: relative; padding-top: 18px; font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.01em; }
.iab-stad__blok[id] > h2::before, .iab-stad__blok--twee > div > h2:first-child::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--iab-primary), var(--iab-accent)); }
.iab-stad__blok--twee { gap: clamp(24px, 4vw, 48px); }
.iab-stad__blok--twee > figure, .iab-stad__blok--twee > div:last-child:not(:first-child) > figure:first-child { background: var(--iab-surface); border-radius: var(--iab-radius); padding: 22px; }
.iab-stad__tekst p { line-height: 1.75; }
.iab-stad__blok[id] > .iab-stad__tekst > p:first-child, .iab-stad__blok--twee .iab-stad__tekst > p:first-child { font-size: 1.08em; color: var(--iab-ink); }
.iab-stad__blok h3 { display: flex; align-items: center; gap: 10px; }
.iab-stad__blok h3::after { content: ""; flex: 1; height: 1px; background: var(--iab-border); }
.iab-stad__cta { margin: 0; display: flex; justify-content: center; }
.iab-stad__cta .iab-btn { box-shadow: 0 10px 24px color-mix(in srgb, var(--iab-cta, var(--iab-accent)) 35%, transparent); }

/* Balken, tabellen en kaart */
.iab-stadbalk__spoor, .iab-stadwijk__meter, .iab-stadtabel__bereik { background: color-mix(in srgb, var(--iab-primary) 9%, var(--iab-card)); }
.iab-stadbalk__vul, .iab-stadwijk__meter .aan, .iab-stadtabel__bereik span { background: linear-gradient(90deg, color-mix(in srgb, var(--iab-primary) 75%, #fff), var(--iab-primary)); }
.iab-stadtabel, .iab-stadwijk, .iab-stadvergelijk, .iab-stadmatrix { box-shadow: none; }
.iab-stadtabel__rij, .iab-stadwijk__rij { transition: background .15s; }
.iab-stadtabel__rij:hover, .iab-stadwijk__rij:hover, .iab-stadmatrix tbody tr:hover, .iab-stadvergelijk tbody tr:hover { background: color-mix(in srgb, var(--iab-primary) 4%, var(--iab-card)); }
.iab-stadkaart { background: var(--iab-surface); border: 0; padding: clamp(14px, 2vw, 22px); }
.iab-stadkaart__info { background: var(--iab-card); box-shadow: var(--stad-schaduw); }
.iab-stadkaart__knop { background: var(--iab-card); }

/* Wijken */
.iab-stadwijkblok__item { position: relative; transition: transform .15s, box-shadow .15s, border-color .15s; border-top: 4px solid var(--iab-primary); }
.iab-stadwijkblok__item:hover { transform: translateY(-2px); box-shadow: var(--stad-schaduw-2); }
.iab-stadwijkblok__cijfers li { background: var(--iab-surface); border-radius: 10px; padding: 8px 10px; }
.iab-stadwijkblok__cijfers strong { display: block; font-family: var(--iab-font-head); font-size: 1.2rem; }

/* Buurten en buurtzoeker */
.iab-stadbuurt__feiten li { position: relative; overflow: hidden; background: var(--iab-surface); border: 0; }
.iab-stadbuurt__feiten strong { font-family: var(--iab-font-head); font-size: 1.9rem; }
.iab-stadbuurt__zoek { margin: 18px 0 6px; padding: 16px; border-radius: var(--iab-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--iab-primary) 10%, var(--iab-card)), color-mix(in srgb, var(--iab-accent) 10%, var(--iab-card))); }
.iab-stadbuurt__zoek label { display: block; font-weight: 700; color: var(--iab-ink); margin-bottom: 8px; }
.iab-stadbuurt__zoek input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; border: 1px solid var(--iab-border); border-radius: 999px; font: inherit; background: var(--iab-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") 16px 50% no-repeat; }
.iab-stadbuurt__zoek input:focus { outline: none; border-color: var(--iab-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--iab-primary) 18%, transparent); }
.iab-stadbuurt__geen { margin: 10px 0 0; font-size: .9rem; color: var(--iab-muted); }
.iab-stadbuurt__wijk { transition: border-color .15s; }
.iab-stadbuurt__wijk > summary { list-style: none; position: relative; padding-right: 44px; }
.iab-stadbuurt__wijk > summary::-webkit-details-marker { display: none; }
.iab-stadbuurt__wijk > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--iab-muted); border-bottom: 2px solid var(--iab-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.iab-stadbuurt__wijk[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.iab-stadbuurt__wijk[open] { border-color: color-mix(in srgb, var(--iab-primary) 40%, var(--iab-border)); }
.iab-stadbuurt__wijk > summary:hover { background: color-mix(in srgb, var(--iab-primary) 4%, var(--iab-card)); }
.iab-stadbuurt__rij.is-raak { background: color-mix(in srgb, var(--iab-accent) 18%, var(--iab-card)); box-shadow: inset 4px 0 0 var(--iab-accent); }

/* Bronnen, ACM, vragen, slot, buren */
.iab-stadbron li { border-left: 0; border-radius: var(--iab-radius-sm, 12px); background: var(--iab-surface); position: relative; padding: 14px 16px 12px 46px; }
.iab-stadbron li::before { content: "\201C"; position: absolute; left: 14px; top: 4px; font: 800 2.2rem/1 var(--iab-font-head); color: var(--iab-accent); }
.iab-stadacm { background: linear-gradient(135deg, var(--iab-surface), var(--iab-card)); }
.iab-stadfaq__item { transition: box-shadow .15s, border-color .15s; }
.iab-stadfaq__item[open] { border-color: color-mix(in srgb, var(--iab-primary) 40%, var(--iab-border)); box-shadow: var(--stad-schaduw); }
.iab-stadfaq__item summary::after { transition: transform .2s; }
.iab-stadslot { max-width: none; border: 0; border-radius: calc(var(--iab-radius) + 4px); padding: clamp(24px, 3.4vw, 40px); color: #fff; background: linear-gradient(135deg, var(--stad-hero-1), var(--iab-primary)); box-shadow: var(--stad-schaduw-2); }
.iab-stad .iab-stadslot h2, .iab-stad .iab-stadslot .iab-stad__tekst p, .iab-stad .iab-stadslot strong { color: #fff; }
.iab-stadslot .iab-stad__tekst p { opacity: .92; max-width: 75ch; }
.iab-stadslot a { color: #fff; }
.iab-stadmethode { border: 0; background: color-mix(in srgb, var(--iab-primary) 5%, var(--iab-card)); }
.iab-stadburen > div { gap: 10px; }
.iab-stadburen__link { padding: 10px 16px; background: var(--iab-card); box-shadow: var(--stad-schaduw); border-color: transparent; transition: transform .15s, box-shadow .15s; }
.iab-stadburen__link:hover { transform: translateY(-2px); box-shadow: var(--stad-schaduw-2); }

div.iab-stad__cta { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: clamp(20px, 3vw, 28px) clamp(22px, 3.4vw, 36px); border-radius: calc(var(--iab-radius) + 4px); background: linear-gradient(135deg, color-mix(in srgb, var(--iab-primary) 10%, var(--iab-card)), color-mix(in srgb, var(--iab-accent) 14%, var(--iab-card))); border: 1px solid var(--iab-border); }
div.iab-stad__cta p { margin: 0; flex: 1 1 320px; font-size: 1.08rem; font-weight: 600; color: var(--iab-ink); }
@media (max-width: 860px) {
	.iab-stadhero { padding-bottom: 80px; }
	.iab-stad__inhoud > .iab-stad__blok[id] { border-radius: var(--iab-radius); }
}
@media (max-width: 600px) {
	.iab-stad__inhoud > .iab-stad__blok[id] { padding: 20px 16px; margin-inline: -4px; }
	.iab-stadbuurt__feiten { grid-template-columns: 1fr 1fr; }
	.iab-stadvergelijk { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.iab-stadzweef__knop { font-size: .9rem; padding-inline: 14px; }
	.iab-stadbuurt__feiten strong { font-size: 1.5rem; }
	.iab-stadkern { gap: 10px; }
	.iab-stadkern__tegel strong { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.iab-stadwijkblok__item, .iab-stadburen__link, .iab-stadtoc a { transition: none; }
}

/* Wijkverkenner: wijkblokken als tabbladen (alleen met JS; zonder JS blijft het raster) */
.iab-stadwijkblok.is-tabs { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 0; margin-top: 22px; border: 1px solid var(--iab-border); border-radius: calc(var(--iab-radius) + 2px); overflow: hidden; background: var(--iab-card); }
.iab-stadwijkblok__tabs { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--iab-surface); max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.iab-stadwijkblok__tabs button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: .92rem; color: var(--iab-text); cursor: pointer; transition: background .15s; }
.iab-stadwijkblok__tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.iab-stadwijkblok__tabs button b { font-variant-numeric: tabular-nums; color: var(--iab-primary); }
.iab-stadwijkblok__tabs button i { grid-column: 1 / -1; display: block; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--iab-primary) 12%, var(--iab-card)); overflow: hidden; }
.iab-stadwijkblok__tabs button s { display: block; height: 100%; background: var(--iab-primary); border-radius: inherit; }
.iab-stadwijkblok__tabs button:hover { background: color-mix(in srgb, var(--iab-primary) 7%, var(--iab-card)); }
.iab-stadwijkblok__tabs button[aria-selected="true"] { background: var(--iab-card); box-shadow: var(--stad-schaduw); color: var(--iab-ink); }
.iab-stadwijkblok__tabs button:focus-visible { outline: 2px solid var(--iab-primary); outline-offset: 1px; }
.iab-stadwijkblok.is-tabs .iab-stadwijkblok__item { grid-column: 2; grid-row: 1; border: 0; border-radius: 0; padding: clamp(18px, 2.6vw, 30px); box-shadow: none; transform: none; }
.iab-stadwijkblok.is-tabs .iab-stadwijkblok__item h3 { font-size: 1.3rem; }
.iab-stadwijkblok.is-tabs .iab-stadwijkblok__cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@keyframes iab-wijkin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Zwevende adrescheck */
.iab-stadzweef { position: fixed; z-index: 90; right: 20px; bottom: 20px; width: min(340px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 18px 16px; border-radius: calc(var(--iab-radius) + 2px); color: #fff; background: linear-gradient(135deg, var(--stad-hero-1, var(--iab-primary)), var(--iab-primary)); box-shadow: 0 18px 40px rgba(20,16,40,.28); animation: iab-zweefin .25s ease; }
.iab-stadzweef[hidden] { display: none; }
.iab-stadzweef__tekst strong { display: block; font-family: var(--iab-font-head); font-size: 1.02rem; line-height: 1.3; padding-right: 22px; color: #fff; }
.iab-stadzweef__tekst span { font-size: .86rem; opacity: .8; }
.iab-stadzweef__tekst em { display: none; font-style: normal; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.iab-stadzweef__knop { justify-content: center; width: 100%; }
.iab-stadzweef__dicht { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.iab-stadzweef__dicht:hover { background: rgba(255,255,255,.26); }
@keyframes iab-zweefin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
	.iab-stadwijkblok.is-tabs { grid-template-columns: 1fr; }
	.iab-stadwijkblok__tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 8px; scrollbar-width: none; }
	.iab-stadwijkblok__tabs::-webkit-scrollbar { display: none; }
	.iab-stadwijkblok__tabs button { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px; }
	.iab-stadwijkblok.is-tabs .iab-stadwijkblok__item { grid-column: 1; grid-row: 2; }
	.iab-stadwijkblok.is-tabs .iab-stadwijkblok__cijfers { grid-template-columns: 1fr 1fr; }
	.iab-stadzweef { left: 0; right: 0; bottom: 0; width: auto; border-radius: 18px 18px 0 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
	.iab-stadzweef__tekst strong { display: none; }
	.iab-stadzweef__tekst em { display: block; }
	.iab-stadzweef__tekst span, .iab-stadzweef__dicht { display: none; }
	.iab-stadzweef__knop { width: auto; padding-inline: 16px; white-space: nowrap; }
	body.has-stadzweef { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .iab-stadzweef, .iab-stadwijkblok.is-tabs .iab-stadwijkblok__item { animation: none; } }

/* Zolang de cookiemelding open staat geen zwevende adrescheck: die zouden elkaar overlappen. */
body:has(> .iab-cookiebanner) .iab-stadzweef { display: none; }