/*
Theme Name: AVO 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: avo
*/

/* =========================================================================
   1. Design tokens
   -------------------------------------------------------------------------
   allesin1vergelijken.org: vriendelijk, helder, met Otto (de groene octopus)
   als gezicht. Diep zeegroen als merkkleur, amber voor elke actieknop, lime
   voor kleine markeringen. Ronde vormen, zachte schaduwen, Nunito voor koppen.
   ========================================================================= */
:root {
  /* Merkkleur: links, koppen-accent, actieve staat, hero-vlak */
  --avo-primary: #14735F;
  /* Donkerder primary: hero-gradient, hover op primary */
  --avo-primary-dark: #0E5546;
  /* Amber: ALLE actieknoppen (bundelkiezer, prijstabel, aanrader, resultaten) */
  --avo-cta: #F5A623;
  /* Amber hover */
  --avo-cta-dark: #DB8F0F;
  /* Tekst op amber: inkt, geen wit (contrast) */
  --avo-on-cta: #14211C;
  /* Accentkleur: gelijk aan de actieknoppen */
  --avo-accent: #F5A623;
  /* Tweede accent: lime, kleine markeringen en de "1" in het logo-onderstreepje */
  --avo-accent-2: #B7E86A;
  /* Markeerkleur: het vlak achter een gemarkeerde kernzin (.avo-marker) */
  --avo-marker: #DFF5B8;
  /* Badgekleur: keurmerk- en labelvlakken */
  --avo-badge: #14735F;
  /* Donkerste tekstkleur: koppen (h1-h4) */
  --avo-ink: #14211C;
  /* Standaard leestekstkleur (body, paragrafen) */
  --avo-text: #33453E;
  /* Gedempte tekstkleur: labels, meta, bijschriften */
  --avo-muted: #66776F;
  /* Paginabackground (achter alle content) */
  --avo-bg: #FFFFFF;
  /* Sectie-achtergrond voor afwisseling met de paginabackground (mint) */
  --avo-surface: #EEF7F3;
  /* Tweede vlak: heel licht grijsgroen voor chips, hovers en rustige secties */
  --avo-surface-2: #F4F7F5;
  /* Component-achtergrond: kaarten, panelen */
  --avo-card: #FFFFFF;
  /* Herotint: volvlak in de merkkleur (gradient naar primary-dark) */
  --avo-hero-tint: #14735F;
  /* Standaard randkleur op kaarten, tabellen, invoervelden */
  --avo-border: #DCE6E1;
  /* Hairline voor sectiescheidingen (zelden gebruikt op dit merk) */
  --avo-rule: #DCE6E1;
  /* Donkere lijn voor tabelkoppen */
  --avo-rule-strong: #33453E;
  /* Kopfont met verplichte fallback-stack */
  --avo-font-head: 'Nunito', system-ui, -apple-system, sans-serif;
  /* Bodyfont met verplichte fallback-stack */
  --avo-font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  /* Basis-lettergrootte van de body */
  --avo-base-size: 17px;
  /* Standaard regelhoogte voor leesbaarheid */
  --avo-lh: 1.65;
  /* Standaard afrondingsradius (kaarten, panelen) */
  --avo-radius: 18px;
  /* Kleinere afrondingsradius (chips, inputs) */
  --avo-radius-sm: 12px;
  /* Knopvorm: pil */
  --avo-radius-pill: 999px;
  /* Maximale breedte van de pagina-container */
  --avo-container: 1180px;
  /* Maximale leesbreedte voor lopende tekst (artikelen) */
  --avo-content: 720px;
  /* Lichte schaduw: kaarten, dropdowns */
  --avo-shadow-1: 0 2px 12px rgba(20,33,28,.06);
  /* Zware schaduw: modals, uitgelichte panelen, herokaart */
  --avo-shadow-2: 0 18px 44px rgba(14,85,70,.18);
  /* Tekstkleur op een gekleurd/primary vlak (knoppen, hero) */
  --avo-on-primary: #FFFFFF;
  /* Subtielere tekstkleur op een gekleurd vlak */
  --avo-on-primary-soft: rgba(255,255,255,.82);
  /* Succeskleur: positieve score-band, bevestigingen, beste-deal */
  --avo-success: #16A34A;
  /* Waarschuwingskleur: middelmatige score-band, let-op-teksten */
  --avo-warning: #D97706;
  /* Gevaarkleur: lage score-band, foutmeldingen */
  --avo-danger: #DC2626;
  /* Sectietint 1: mint */
  --avo-tint-1: #EEF7F3;
  /* Sectietint 2: warm amber, heel licht */
  --avo-tint-2: #FFF6E5;
  /* Sectietint 3: lime, heel licht */
  --avo-tint-3: #F3FBE8;
  /* Sectietint 4: grijsgroen, heel licht */
  --avo-tint-4: #F4F7F5;
  /* Otto: de mascotte (inc/otto.php) */
  --avo-otto-body: #6CBF6B;
  --avo-otto-shade: #3F9455;
  --avo-otto-belly: #BFE6B4;
  --avo-otto-ink: #1F2D26;
  --avo-otto-cheek: #F29E97;
  /* Doorschijnende tinten: gloed onder amber knoppen, wit op de hero, focusring, schaduw onder Otto */
  --avo-cta-glow: rgba(245,166,35,.32);
  --avo-cta-glow-strong: rgba(245,166,35,.4);
  --avo-hero-glass: rgba(255,255,255,.06);
  --avo-hero-glass-line: rgba(255,255,255,.08);
  --avo-hero-glass-strong: rgba(255,255,255,.14);
  --avo-focus-ring: rgba(20,115,95,.12);
  --avo-primary-line: rgba(20,115,95,.15);
  --avo-otto-shadow: rgba(0,0,0,.22);
  --avo-success-soft: rgba(22,163,74,.1);
  --avo-danger-soft: rgba(220,38,38,.08);
}

/* =========================================================================
   2. Merk-stramien: lime-markering en bronblok
   -------------------------------------------------------------------------
   (1) .avo-marker: een limegroene baan achter een kernzin;
   (2) .avo-bron: een bronvermelding of methodenoot in een zacht mintvlak
       met een ronde hoek, het visuele signaal "hier verantwoorden wij ons".
   ========================================================================= */
.avo-marker {
  display: inline;
  background-image: linear-gradient(var(--avo-marker), var(--avo-marker));
  background-repeat: no-repeat;
  background-position: left 0 bottom .12em;
  background-size: 100% .55em;
  padding: 0 .1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.avo-bron {
  background: var(--avo-tint-1); border-radius: var(--avo-radius-sm);
  padding: 14px 18px; font-size: .92rem; color: var(--avo-text); margin: 18px 0;
}
.avo-bron__kop { display: block; font-weight: 800; font-family: var(--avo-font-head); color: var(--avo-primary-dark); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.avo-bron a { color: var(--avo-primary-dark); font-weight: 700; }
/* Het label liep in de lopende tekst door ("Bron en verdienmodel Prijzen"): eigen regel. */
.avo-bron__label { display: block; margin-bottom: 4px; font-weight: 700; color: var(--avo-ink); }

/* =========================================================================
   3. Reset / basis
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* GEEN scroll-behavior:smooth op html: in combinatie met een sticky header
   (.avo-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(--avo-font-body);
  font-size: var(--avo-base-size);
  line-height: var(--avo-lh);
  color: var(--avo-text);
  background: var(--avo-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--avo-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

h1, h2, h3, h4 {
  font-family: var(--avo-font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--avo-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(2.1rem, 1.4rem + 3vw, 3.3rem); font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
p { margin: 0 0 1em; }
::selection { background: var(--avo-marker); color: var(--avo-ink); }

/* =========================================================================
   4. Layout helpers
   ========================================================================= */
.avo-container { width: 100%; max-width: var(--avo-container); margin-inline: auto; padding-inline: 20px; }
.avo-section { padding-block: clamp(64px, 6vw, 88px); }
.avo-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.avo-surface { background: var(--avo-surface); }
/* Sectiescheiding in het ronde, vriendelijke beeld: geen lijnen tussen
   secties, maar zachte tintvlakken die het leesritme van de pagina
   markeren zonder een harde rand te trekken. */
.avo-tint-1 { background: var(--avo-tint-1); }
.avo-tint-2 { background: var(--avo-tint-2); }
.avo-tint-3 { background: var(--avo-tint-3); }
.avo-tint-4 { background: var(--avo-tint-4); }

.avo-lead { font-size: 1.15rem; color: var(--avo-muted); max-width: 60ch; }
.avo-center { text-align: center; }
.avo-center .avo-lead { margin-inline: auto; }
/* Sectiekop-stramien (avo_shead() in inc/template-tags.php): kop met een
   korte lime-streep eronder, de handtekening van dit merk. */
.avo-shead { margin-bottom: 34px; }
.avo-shead--center { text-align: center; }
.avo-shead--center .avo-lead { margin-inline: auto; }
.avo-shead > svg, .avo-shead > img { display: inline-block; margin-bottom: 10px; }
.avo-shead .avo-section-heading { margin-top: 0; position: relative; display: inline-block; padding-bottom: 12px; }
.avo-shead .avo-section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 6px; border-radius: 3px; background: var(--avo-accent-2); }
.avo-shead--center .avo-section-heading::after { left: 50%; transform: translateX(-50%); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 1000; background: var(--avo-card); padding: 10px 16px; border-radius: var(--avo-radius-sm); box-shadow: var(--avo-shadow-1); }

/* =========================================================================
   5. Knoppen: pilvorm, amber voor actie, groen voor primair
   ========================================================================= */
.avo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--avo-font-head); font-weight: 800; font-size: 1rem; line-height: 1;
  padding: 14px 26px; border-radius: var(--avo-radius-pill); border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; white-space: nowrap; background: var(--avo-primary); color: var(--avo-on-primary);
}
.avo-btn:hover { background: var(--avo-primary-dark); color: var(--avo-on-primary); text-decoration: none; transform: translateY(-1px); }
.avo-btn:active { transform: translateY(0); }
.avo-btn--primary { background: var(--avo-primary); color: var(--avo-on-primary); }
.avo-btn--cta, .avo-btn--accent { background: var(--avo-cta); color: var(--avo-on-cta); box-shadow: 0 6px 18px var(--avo-cta-glow); }
.avo-btn--cta:hover, .avo-btn--accent:hover { background: var(--avo-cta-dark); color: var(--avo-on-cta); box-shadow: 0 8px 22px var(--avo-cta-glow-strong); }
.avo-btn--ghost { background: var(--avo-card); color: var(--avo-primary-dark); border-color: var(--avo-border); }
.avo-btn--ghost:hover { background: var(--avo-tint-1); border-color: var(--avo-primary); color: var(--avo-primary-dark); }
.avo-btn--outline { background: transparent; color: var(--avo-primary-dark); border-color: var(--avo-primary); }
.avo-btn--outline:hover { background: var(--avo-primary); color: var(--avo-on-primary); }
.avo-btn--lg { font-size: 1.08rem; padding: 18px 32px; }
.avo-btn--sm { font-size: .9rem; padding: 10px 18px; }
.avo-btn--block { width: 100%; }
.avo-btn svg { flex: 0 0 auto; }

/* =========================================================================
   6. Header: een balk, logo links, menu midden, zoeken en actieknop rechts
   ========================================================================= */
.avo-header {
  position: sticky; top: 0; z-index: 100; width: 100%;
  background: var(--avo-card); border-bottom: 1px solid var(--avo-border);
  transition: box-shadow .2s ease;
  transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.avo-header.is-scrolled { box-shadow: var(--avo-shadow-1); }
.avo-header__bar { display: flex; align-items: center; gap: 14px; min-height: 72px; }
.avo-brand { display: inline-flex; align-items: center; color: var(--avo-ink); }
.avo-brand:hover { text-decoration: none; }
.avo-brand__mark { display: inline-flex; align-items: center; height: 44px; width: auto; max-width: 300px; color: var(--avo-ink); }
.avo-brand__mark svg { height: 100%; width: auto; display: block; }
.avo-brand:hover .avo-otto__hoofd { animation: avo-nod .5s ease; }
.avo-footer .avo-brand__mark { color: var(--avo-ink); }

.avo-nav { margin-inline: auto; }
.avo-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.avo-nav a { display: inline-block; padding: 10px 14px; font-weight: 700; color: var(--avo-ink); font-size: .98rem; border-radius: var(--avo-radius-pill); }
.avo-nav a:hover { text-decoration: none; color: var(--avo-primary-dark); background: var(--avo-tint-1); }
.avo-nav .current-menu-item > a { color: var(--avo-primary-dark); background: var(--avo-tint-1); }
.avo-nav li { position: relative; }
.avo-nav .sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-2); display: none; z-index: 200; }
.avo-nav > ul > .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.avo-nav li:hover > .sub-menu, .avo-nav li:focus-within > .sub-menu { display: block; }
.avo-nav .sub-menu a { display: block; white-space: nowrap; border-radius: var(--avo-radius-sm); font-weight: 600; }
.avo-nav .sub-menu .sub-menu { top: -10px; left: 100%; }
.avo-nav .sub-menu .menu-item-has-children { position: relative; }
.avo-nav .sub-menu .menu-item-has-children > a::after { content: "\203A"; }
.avo-nav .menu-item-has-children > a::after { content: "\2304"; margin-left: 5px; opacity: .55; font-size: .9em; }
.avo-nav-toggle { display: none; background: transparent; border: 0; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.avo-nav-toggle span, .avo-nav-toggle span::before, .avo-nav-toggle span::after { content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--avo-ink); position: relative; transition: .2s; }
.avo-nav-toggle span::before { position: absolute; top: -7px; }
.avo-nav-toggle span::after { position: absolute; top: 7px; }
.avo-header__cta { flex: 0 0 auto; }

.avo-search-toggle { background: var(--avo-surface-2); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--avo-ink); padding: 0; }
.avo-search-toggle:hover { background: var(--avo-tint-1); color: var(--avo-primary-dark); }
.avo-searchbar { background: var(--avo-card); border-bottom: 1px solid var(--avo-border); padding: 16px 0; box-shadow: var(--avo-shadow-1); }
.avo-searchbar form { display: flex; gap: 8px; max-width: 640px; margin: 0 auto; }
.avo-searchbar input { flex: 1; padding: 12px 18px; border: 2px solid var(--avo-border); border-radius: var(--avo-radius-pill); font-size: 1rem; background: var(--avo-card); color: var(--avo-ink); font-family: inherit; }
.avo-searchbar input:focus { outline: none; border-color: var(--avo-primary); }
.avo-searchbar__close { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--avo-muted); padding: 0 8px; }
.avo-searchbar__close:hover { color: var(--avo-ink); }

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

/* =========================================================================
   7. Hero: volvlak in de merkkleur, Otto en de bundelkiezer
   ========================================================================= */
.avo-hero { position: relative; overflow: hidden; color: var(--avo-on-primary); background: linear-gradient(135deg, var(--avo-primary) 0%, var(--avo-primary-dark) 100%); }
/* Zachte bellen op de achtergrond: Otto's habitat, heel rustig. */
.avo-hero__bubbels { position: absolute; inset: 0; pointer-events: none; }
.avo-hero__bubbels span { position: absolute; border-radius: 50%; background: var(--avo-hero-glass); border: 1px solid var(--avo-hero-glass-line); }
.avo-hero__bubbels span:nth-child(1) { width: 320px; height: 320px; right: -80px; top: -120px; }
.avo-hero__bubbels span:nth-child(2) { width: 140px; height: 140px; left: 4%; bottom: -40px; }
.avo-hero__bubbels span:nth-child(3) { width: 56px; height: 56px; left: 38%; top: 12%; }
.avo-hero__bubbels span:nth-child(4) { width: 24px; height: 24px; left: 44%; top: 30%; }
.avo-hero__bubbels span:nth-child(5) { width: 90px; height: 90px; right: 30%; bottom: 8%; }
.avo-hero__bubbels span:nth-child(6) { width: 36px; height: 36px; right: 44%; top: 8%; }

.avo-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) 440px; gap: clamp(28px, 5vw, 72px); align-items: start; padding-block: clamp(48px, 6vw, 84px) 28px; }
.avo-hero__copy { min-width: 0; position: relative; padding-bottom: 244px; }
.avo-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border-radius: var(--avo-radius-pill); background: var(--avo-hero-glass-strong); font-size: .86rem; font-weight: 700; color: var(--avo-on-primary); }
.avo-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--avo-accent-2); }
.avo-hero h1 { color: var(--avo-on-primary); max-width: 16ch; margin: 0 0 .5em; }
.avo-hero__sub { font-size: 1.15rem; color: var(--avo-on-primary-soft); max-width: 50ch; margin: 0 0 1.6rem; }
.avo-hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; font-size: .92rem; color: var(--avo-on-primary); }
.avo-hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.avo-hero__trust svg { color: var(--avo-accent-2); }

/* Otto staat rechtsonder in de tekstkolom en wijst naar de kaart; de
   tekstballon hangt links naast zijn hoofd. */
.avo-hero__otto { position: absolute; right: -14px; bottom: 0; display: flex; align-items: flex-start; gap: 4px; }
.avo-hero__otto-figuur { display: block; width: 250px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 14px 22px var(--avo-otto-shadow)); animation: avo-float 5s ease-in-out infinite; }
.avo-hero__ballon { position: relative; background: var(--avo-card); color: var(--avo-ink); border-radius: 18px 18px 4px 18px; padding: 12px 16px 14px; font-size: .9rem; font-weight: 600; line-height: 1.4; width: 250px; margin-top: 34px; box-shadow: var(--avo-shadow-1); min-height: 96px; flex: 0 0 auto; }
.avo-hero__ballon::after { content: ""; position: absolute; right: -8px; top: 26px; border: 6px solid transparent; border-left-color: var(--avo-card); border-top-color: var(--avo-card); }
.avo-hero__ballon::before { content: "Tip van Otto"; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--avo-primary); margin-bottom: 4px; }
.avo-hero__ballon p { position: absolute; left: 16px; right: 16px; top: 32px; margin: 0; opacity: 0; transition: opacity .5s ease; }
.avo-hero__ballon p.is-actief { opacity: 1; }

/* De kaart: wit, ronde hoeken, zware schaduw, licht over de onderrand van de hero heen. */
.avo-hero__kaart { position: relative; z-index: 2; margin-bottom: -40px; }
.avo-bundel { background: var(--avo-card); color: var(--avo-ink); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-2); padding: 26px 26px 22px; }
.avo-bundel__kop { font-family: var(--avo-font-head); font-weight: 800; font-size: 1.25rem; margin: 0 0 14px; color: var(--avo-ink); }
.avo-bundel__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.avo-bundel__chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: var(--avo-radius-sm); border: 2px solid var(--avo-border); background: var(--avo-card); color: var(--avo-ink); font-family: var(--avo-font-body); font-weight: 700; font-size: .92rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .12s; }
.avo-bundel__chip-icoon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--avo-surface-2); color: var(--avo-primary); flex: 0 0 auto; }
.avo-bundel__chip:hover { border-color: var(--avo-primary); transform: translateY(-1px); }
.avo-bundel__chip[aria-pressed="true"] { border-color: var(--avo-primary); background: var(--avo-tint-1); }
.avo-bundel__chip[aria-pressed="true"] .avo-bundel__chip-icoon { background: var(--avo-primary); color: var(--avo-on-primary); }
.avo-bundel__vanaf { display: flex; align-items: baseline; gap: 6px; margin: 0 0 14px; font-size: .95rem; color: var(--avo-muted); font-weight: 600; }
.avo-bundel__vanaf strong { font-family: var(--avo-font-head); font-size: 1.6rem; font-weight: 900; color: var(--avo-primary-dark); display: inline-block; }
.avo-bundel__vanaf strong.is-tik { animation: avo-tik .35s ease; }
.avo-bundel__velden { display: grid; grid-template-columns: 1fr 110px; gap: 10px; margin-bottom: 12px; }
.avo-bundel__veld { display: flex; flex-direction: column; gap: 5px; }
.avo-bundel__veld span { font-size: .78rem; font-weight: 800; color: var(--avo-muted); letter-spacing: .02em; }
.avo-bundel__veld input { padding: 13px 14px; border: 2px solid var(--avo-border); border-radius: var(--avo-radius-sm); font-size: 1.02rem; font-family: inherit; color: var(--avo-ink); background: var(--avo-card); width: 100%; }
.avo-bundel__veld input:focus { outline: none; border-color: var(--avo-primary); box-shadow: 0 0 0 4px var(--avo-focus-ring); }
.avo-bundel__noot { margin: 12px 0 0; font-size: .82rem; color: var(--avo-muted); line-height: 1.45; }

/* Ruimte onder de hero voor de overhangende kaart. */
.avo-hero + section { padding-top: calc(clamp(64px, 6vw, 88px) + 30px); }

@keyframes avo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes avo-tik { 0% { transform: scale(.85); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes avo-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes avo-zwaai { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }

@media (max-width: 1080px) {
  .avo-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .avo-hero__otto-figuur { width: 210px; }
  .avo-hero__ballon { width: 210px; margin-top: 20px; }
  .avo-hero__copy { padding-bottom: 200px; }
}
@media (max-width: 860px) {
  .avo-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 0; }
  .avo-hero__copy { padding-bottom: 0; }
  .avo-hero__otto { display: none; }
  .avo-hero__kaart { margin-bottom: -32px; }
  .avo-hero h1 { max-width: none; }
}
@media (max-width: 480px) {
  .avo-bundel { padding: 20px 18px 18px; }
  .avo-bundel__chips { grid-template-columns: minmax(0, 1fr); }
  .avo-bundel__velden { grid-template-columns: 1fr 96px; }
}

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

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

/* Post-kaarten (blog): ronde kaart met zachte schaduw, zoals de rest van
   het merkbeeld. */
.avo-postcard { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--avo-shadow-1); transition: transform .15s ease, box-shadow .15s ease; }
.avo-postcard:hover { transform: translateY(-3px); box-shadow: var(--avo-shadow-2); }
.avo-postcard__thumb { aspect-ratio: 16/9; background: var(--avo-surface-2); overflow: hidden; }
.avo-postcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.avo-postcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.avo-postcard__cat { font-size: .8rem; font-weight: 700; letter-spacing: .03em; color: var(--avo-primary); }
.avo-postcard h3 { font-size: 1.18rem; margin: 0; }
.avo-postcard h3 a { color: var(--avo-ink); }
.avo-postcard h3 a:hover { color: var(--avo-primary); text-decoration: none; }
.avo-postcard__excerpt { color: var(--avo-muted); font-size: .95rem; margin: 0; }
.avo-postcard__meta { margin-top: auto; padding-top: 10px; color: var(--avo-muted); font-size: .85rem; }

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

/* =========================================================================
   9. USP-strip
   ========================================================================= */
.avo-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.avo-usp__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius);
  padding: 22px; box-shadow: var(--avo-shadow-1);
}
.avo-usp__item .avo-outline-number {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--avo-accent-2); color: var(--avo-ink); font-family: var(--avo-font-head);
  font-weight: 800; margin-bottom: 4px;
}
.avo-usp__item h3 { margin: 0; font-size: 1.05rem; }
.avo-usp__item p { margin: 0; color: var(--avo-muted); font-size: .92rem; }
@media (max-width: 860px) { .avo-usp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .avo-usp { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   10. FAQ
   ========================================================================= */
/* FAQ als een reeks ronde kaarten, elk een eigen vraag. */
.avo-faq { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.avo-faq details { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius-sm); padding: 4px 18px; margin-bottom: 0; transition: background .15s ease; }
.avo-faq details[open] { background: var(--avo-tint-1); }
.avo-faq summary { cursor: pointer; font-family: var(--avo-font-head); font-weight: 700; font-size: 1.05rem; color: var(--avo-ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.avo-faq summary::-webkit-details-marker { display: none; }
.avo-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--avo-primary); font-weight: 700; }
.avo-faq details[open] summary::after { content: "\2212"; }
.avo-faq details > p { margin: 0 0 16px; color: var(--avo-text); }
.avo-faq-head { display: flex; align-items: center; gap: 20px; }
.avo-faq-head .avo-shead { margin-bottom: 0; flex: 1; }
@media (max-width: 600px) {
  .avo-faq-head { flex-direction: column; text-align: center; }
}

/* =========================================================================
   11. Footer: mintvlak met een ronde bovenrand, Otto zwaait
   ========================================================================= */
.avo-footer { background: var(--avo-tint-1); color: var(--avo-text); margin-top: 56px; border-radius: 40px 40px 0 0; }
.avo-footer a { color: var(--avo-text); }
.avo-footer a:hover { color: var(--avo-primary-dark); }
.avo-footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; padding-block: 56px 40px; }
.avo-footer__brand { position: relative; }
.avo-footer__brand .avo-brand { color: var(--avo-ink); }
.avo-footer__otto { margin: 14px 0 0; width: 96px; }
.avo-footer__otto svg { display: block; }
.avo-footer__otto .avo-otto__zwaaiarm { transform-origin: 192px 112px; animation: avo-zwaai 2.2s ease-in-out infinite; }
.avo-footer h4 { color: var(--avo-ink); font-size: 1rem; margin-bottom: 14px; font-family: var(--avo-font-head); font-weight: 800; }
.avo-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .95rem; }
.avo-footer__bottom { border-top: 1px solid var(--avo-primary-line); padding-block: 20px; font-size: .85rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--avo-muted); }
.avo-footer__disclaimer { font-size: .84rem; color: var(--avo-muted); max-width: 52ch; margin-top: 14px; }
@media (max-width: 860px) { .avo-footer__top { grid-template-columns: 1fr 1fr; } .avo-footer { border-radius: 28px 28px 0 0; } }
@media (max-width: 480px) { .avo-footer__top { grid-template-columns: minmax(0, 1fr); } }

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

/* =========================================================================
   13. Content / artikelen (prose)
   ========================================================================= */
.avo-page { padding-block: clamp(32px, 4vw, 60px); }
.avo-prose { max-width: var(--avo-content); margin-inline: auto; font-size: 1.05rem; }
.avo-prose--wide { max-width: none; }
.avo-prose h2 { margin-top: 1.6em; }
.avo-prose h3 { margin-top: 1.3em; }
.avo-prose img { border-radius: var(--avo-radius-sm); margin-block: 1.4em; }
.avo-prose ul, .avo-prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.avo-prose li { margin-bottom: .4em; }
/* Citaat: zacht mintvlak met een ronde hoek en een lime balk links. */
.avo-prose blockquote { border-left: 4px solid var(--avo-accent-2); background: var(--avo-tint-1); margin: 1.4em 0; padding: 14px 20px; border-radius: 0 var(--avo-radius-sm) var(--avo-radius-sm) 0; font-family: var(--avo-font-head); font-style: italic; color: var(--avo-ink); }
.avo-prose a { text-decoration: underline; }
/* Tabellen krijgen een ronde container met een mintkleurige kop. */
.avo-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); overflow: hidden; }
.avo-prose th, .avo-prose td { border: 0; border-bottom: 1px solid var(--avo-border); padding: 10px 14px; text-align: left; }
.avo-prose th { background: var(--avo-tint-1); font-family: var(--avo-font-head); font-weight: 800; color: var(--avo-ink); }
/* In tabellen wint de tabelstijl van de generieke prose-linkstijl: een
   onderstreping per cel maakt een brede tabel onleesbaar. */
.avo-prose table a { text-decoration: none; font-weight: 600; color: var(--avo-primary); }
.avo-prose table a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .avo-prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .avo-prose table th, .avo-prose table td { white-space: normal; min-width: 120px; }
  /* Verbeterpunt 71: een tabel die al in een eigen scrollcontainer zit
     (.avo-table-scroll uit de plugin) mag hier NIET op display:block worden
     gezet. De plugin zet daar overflow terug op visible, waardoor het
     tabelvak op 100 procent bleef staan terwijl de rijen doorliepen en dus
     buiten de kolom vielen. De tabel blijft nu een echte tabel op
     inhoudsbreedte; de wrapper eromheen scrollt, met veeg-hint en fade. */
  .avo-prose .avo-table-scroll > table {
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
    overflow: visible;
    white-space: normal;
  }
}

.avo-article-head { margin: 0 0 28px; }
/* Pagina-kop met Otto (kennisbank-hub, over-pagina): tintvlak, tekst links,
   Otto rechts met een korte ballon in zijn stem. */
.avo-ottokop { display: flex; align-items: center; gap: 28px; padding: 28px 32px; background: var(--avo-tint-1); border-radius: var(--avo-radius); margin-bottom: 36px; }
.avo-ottokop__tekst { flex: 1 1 auto; min-width: 0; }
.avo-ottokop__tekst h1 { margin-bottom: 10px; }
.avo-ottokop__intro { margin-bottom: 14px; }
.avo-ottokop__ballon { position: relative; display: inline-block; margin: 0; padding: 12px 16px; background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); font-weight: 600; color: var(--avo-primary-dark); font-size: .95rem; }
.avo-ottokop__ballon::after { content: ""; position: absolute; right: -9px; top: 50%; width: 14px; height: 14px; background: var(--avo-card); border-right: 1px solid var(--avo-border); border-top: 1px solid var(--avo-border); transform: translateY(-50%) rotate(45deg); }
.avo-ottokop__figuur { flex: 0 0 auto; width: 200px; filter: drop-shadow(0 12px 18px var(--avo-otto-shadow)); animation: avo-float 5s ease-in-out infinite; }
.avo-ottokop__figuur svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .avo-ottokop { padding: 22px 20px; gap: 16px; } .avo-ottokop__figuur { width: 130px; } }
@media (max-width: 600px) { .avo-ottokop { flex-direction: column-reverse; align-items: flex-start; } .avo-ottokop__figuur { width: 110px; align-self: flex-end; margin-bottom: -20px; } .avo-ottokop__ballon::after { display: none; } }
/* Werkpagina (vergelijker): compacte kop, direct gevolgd door de tool. */
.avo-page--tool { padding-top: 26px; }
.avo-toolkop { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin: 0 0 18px; }
.avo-breadcrumbs { font-size: .88rem; color: var(--avo-muted); margin-bottom: 14px; }
.avo-breadcrumbs a { color: var(--avo-muted); }
/* Artikel-byline in kleinkapitaalachtige stijl (redactiesignatuur): ook de
   leestijd-regel ("x min lezen") staat in deze regel. */
.avo-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--avo-muted); font-size: .88rem; margin-top: 10px; align-items: center; font-variant-caps: all-small-caps; letter-spacing: .07em; }
.avo-meta .avo-cat { background: var(--avo-tint-1); color: var(--avo-primary); padding: 3px 12px; border-radius: 999px; font-weight: 700; }
.avo-meta__author { color: var(--avo-primary); font-weight: 600; text-decoration: none; }
.avo-meta__author:hover { text-decoration: underline; }
.avo-meta__updated { color: var(--avo-primary); font-weight: 600; }
.avo-featured { margin: 0 0 30px; }
.avo-featured img { width: 100%; border-radius: var(--avo-radius); }
.avo-featured--page { max-width: 480px; }

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

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

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

/* =========================================================================
   14. Article layout (sidebar)
   ========================================================================= */
.avo-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. */
.avo-article-layout > * { min-width: 0; }
.avo-article-main { min-width: 0; }
.avo-article-main { min-width: 0; }
@media (max-width: 860px) { .avo-article-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================================
   25. Utility
   ========================================================================= */
.avo-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 .avo-menubar, .admin-bar .avo-header { top: 32px; }
@media (max-width: 782px) {
  #wpadminbar { position: fixed !important; }
  .admin-bar .avo-menubar, .admin-bar .avo-header { top: 46px; }
}

/* =========================================================================
   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 .avo-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.
   ========================================================================= */
.avo-prose > details:not(.avo-toc-box) { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius-sm); padding: 4px 20px; margin-bottom: 12px; }
.avo-prose > details:not(.avo-toc-box) > summary { cursor: pointer; font-weight: 700; color: var(--avo-ink); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.avo-prose > details:not(.avo-toc-box) > summary::-webkit-details-marker { display: none; }
.avo-prose > details:not(.avo-toc-box) > summary::after { content: "+"; font-size: 1.5rem; color: var(--avo-primary); font-weight: 700; }
.avo-prose > details[open]:not(.avo-toc-box) { border-color: var(--avo-primary); }
.avo-prose > details[open]:not(.avo-toc-box) > summary::after { content: "\2212"; }
.avo-prose > details:not(.avo-toc-box) > p { margin: 0 0 16px; color: var(--avo-text); }
.avo-prose > details:not(.avo-toc-box) + details:not(.avo-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/avo-scrollhint.js.
   ========================================================================= */
.avo-scrollable { position: relative; }
.avo-scrollable::before,
.avo-scrollable::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none;
  opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.avo-scrollable::before { left: 0; background: linear-gradient(to right, var(--avo-bg), transparent); }
.avo-scrollable::after { right: 0; background: linear-gradient(to left, var(--avo-bg), transparent); }
.avo-scrollable.has-left::before { opacity: 1; }
.avo-scrollable.has-right::after { opacity: 1; }
.avo-scrollhint { display: none; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .82rem; font-weight: 600; color: var(--avo-muted); }
.avo-scrollhint svg { color: var(--avo-primary); }
.avo-scrollhint.is-visible { display: flex; }
@media (min-width: 861px) { .avo-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 (.avo-team img.avatar), nooit via .avo-team__foto.
   ========================================================================= */
.avo-authorcard__expertise { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.avo-badge { display: inline-block; background: var(--avo-surface-2); color: var(--avo-primary); border: 1px solid var(--avo-border); border-radius: var(--avo-radius-sm); padding: 4px 12px; font-size: .78rem; font-weight: 600; }
.avo-team img.avatar, .avo-authorcard__avatar img, .avo-author__avatar img { border-radius: 50%; object-fit: cover; }
.avo-team__lid > a:first-child { flex: 0 0 96px; }
.avo-team img.avatar { width: 96px; height: 96px; display: block; }
@media (max-width: 600px) { .avo-team__lid > a:first-child { flex: 0 0 72px; } .avo-team img.avatar { width: 72px; height: 72px; } }

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

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

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

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

/* =========================================================================
   34. Sidebar-uitbreidingen (deal, trustbadge, tool, wist-je-dat)
   ========================================================================= */
.avo-sidebar__deal { border: 2px solid var(--avo-accent); }
.avo-sidebar__deal-kop, .avo-sidebar__deal-prijs, .avo-sidebar__deal-cta { margin-left: 20px; margin-right: 20px; }
.avo-sidebar__deal-kop { display: flex; align-items: center; gap: 10px; margin-top: 14px; margin-bottom: 8px; }
.avo-sidebar__deal-kop img { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; }
.avo-sidebar__deal-kop strong { color: var(--avo-ink); min-width: 0; }
.avo-sidebar__deal-prijs { font-family: var(--avo-font-head); font-size: 1.3rem; color: var(--avo-ink); font-weight: 700; margin-top: 0; margin-bottom: 12px; }
.avo-sidebar__deal-prijs small { font-size: .8rem; color: var(--avo-muted); font-weight: 600; }
.avo-sidebar__deal-prijs s { font-size: .9rem; color: var(--avo-muted); font-weight: 500; margin-left: 6px; }
.avo-sidebar__deal-cta { display: block; text-align: center; margin-bottom: 18px; }
.avo-sidebar__trust { text-align: center; padding: 20px; }
.avo-sidebar__trust-cijfer { display: block; font-family: var(--avo-font-head); font-size: 1.9rem; font-weight: 700; color: var(--avo-primary); }
.avo-sidebar__trust a { display: block; margin-top: 6px; font-size: .88rem; color: var(--avo-muted); }
.avo-sidebar__trust a:hover { color: var(--avo-primary); }
/* Sterrenwidget: de theme-sidebar rendert avo_stars_html() ook op pagina's
   waar de plugin-CSS niet wordt ingeladen. Zonder deze regels vallen de SVG's
   terug op hun intrinsieke formaat en een zwarte vulling. */
.avo-stars { display: inline-flex; align-items: center; justify-content: center; gap: 2px; --avo-star-size: 18px; }
.avo-star { width: var(--avo-star-size); height: var(--avo-star-size); flex: 0 0 auto; fill: var(--avo-border); }
.avo-star.is-full, .avo-star.is-half { fill: var(--avo-accent); }
.avo-sidebar__trust .avo-stars { margin: 6px 0 2px; }
.avo-sidebar__feit { background: var(--avo-tint-1); }
.avo-sidebar__feit p, .avo-sidebar__tool p { font-size: .92rem; color: var(--avo-text); margin: 12px 20px; }
.avo-sidebar__tool p { color: var(--avo-muted); }

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

/* =========================================================================
   36. 404-pagina
   ========================================================================= */
.avo-404__inner { max-width: 640px; text-align: center; }
.avo-404__inner .avo-lead { margin-inline: auto; }
.avo-404__illu svg { width: min(240px, 60%); height: auto; margin: 0 auto 18px; display: block; animation: avo-float 5s ease-in-out infinite; }
.avo-404__search { margin: 28px auto; max-width: 460px; }
.avo-404__acties { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.avo-404__links { margin-top: 44px; }
.avo-404__links h2 { font-size: 1.05rem; margin-bottom: 14px; }
.avo-404__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.avo-404__chip { display: inline-block; background: var(--avo-card); border: 2px solid var(--avo-border); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: .9rem; color: var(--avo-ink); }
.avo-404__chip:hover { border-color: var(--avo-primary); color: var(--avo-primary); }

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

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

.avo-waarom__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; align-items: stretch; }
.avo-waarom__card { position: relative; display: flex; flex-direction: column; background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-1); padding: 28px; }
.avo-waarom__iconwrap { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; margin-bottom: 16px; flex-shrink: 0; }
.avo-waarom__iconwrap svg { width: 34px; height: 34px; }
.avo-waarom__card h3 { margin: 0 0 10px; font-size: 1.19rem; font-family: var(--avo-font-head); font-weight: 700; }
.avo-waarom__body p { margin: 0 0 10px; color: var(--avo-text); font-size: .96rem; }
.avo-waarom__body p:last-child { margin-bottom: 0; }
.avo-waarom__body .avo-waarom__extra { display: none; }
.avo-waarom__body.is-open .avo-waarom__extra { display: block; }
.avo-waarom__foot { margin-top: 16px; display: flex; justify-content: flex-end; }
.avo-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: 1.5px solid var(--avo-border); background: var(--avo-card); color: var(--avo-primary); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.avo-waarom__toggle:hover { border-color: var(--avo-primary); }
.avo-waarom__toggle-label { font-size: 14px; font-weight: 700; color: var(--avo-primary); transition: color .15s; }
.avo-waarom__toggle-icon { display: grid; place-items: center; transition: transform .2s ease; }
.avo-waarom__toggle[aria-expanded="true"] { background: var(--avo-primary); border-color: var(--avo-primary); }
.avo-waarom__toggle[aria-expanded="true"] .avo-waarom__toggle-label { color: var(--avo-on-primary); }
.avo-waarom__toggle[aria-expanded="true"] .avo-waarom__toggle-icon { transform: rotate(180deg); color: var(--avo-on-primary); }
.avo-waarom__cta { margin-top: 44px; }
.avo-waarom__card--groot { padding: 32px; }
.avo-waarom__card--groot .avo-waarom__body p { line-height: 1.65; }
.avo-waarom__card--groot h3 { font-size: 20px; line-height: 1.3; }
.avo-waarom__iconwrap--groot { width: 80px; height: 80px; border-radius: 20px; }
.avo-waarom__iconwrap--groot svg { width: 40px; height: 40px; }
.avo-waarom__card--groot .avo-waarom__foot { justify-content: flex-end; align-items: center; margin-top: auto; padding-top: 16px; }
@media (max-width: 860px) { .avo-waarom__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

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

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

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

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

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

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

/* =========================================================================
   Homepage: uitlegblok testmethode (site-specifiek)
   ========================================================================= */
.avo-methode__intro { max-width: var(--avo-content); color: var(--avo-text); }
.avo-methode__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 6px;
}
.avo-methode__kaart {
  background: var(--avo-card);
  border: 1px solid var(--avo-border);
  border-left: 3px solid var(--avo-primary);
  border-radius: 0 var(--avo-radius) var(--avo-radius) 0;
  padding: 18px 20px;
}
.avo-methode__pct {
  display: inline-block;
  font-family: var(--avo-font-head);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--avo-primary-dark);
  line-height: 1.1;
}
.avo-methode__kaart h3 { margin: 4px 0 8px; font-size: 1rem; }
.avo-methode__kaart p { margin: 0; font-size: .9rem; color: var(--avo-muted); }
@media (max-width: 860px) {
  .avo-methode__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .avo-methode__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Homepage: afsluitende contentsectie (template-parts/home/seo-tekst.php)
   Twee kolommen op desktop: sticky ankernavigatie links, leestekst rechts.
   Mobiel: navigatie verborgen, tekst vol breed.
   ========================================================================== */
.avo-seo { background: var(--avo-surface-2); }
.avo-seo__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.avo-seo__nav { position: sticky; top: 96px; border-left: 3px solid var(--avo-border); padding-left: 18px; }
.avo-seo__navkop { font-family: var(--avo-font-head); font-size: .95rem; color: var(--avo-ink); margin: 0 0 10px; }
.avo-seo__nav ul { list-style: none; margin: 0; padding: 0; }
.avo-seo__nav li + li { margin-top: 8px; }
.avo-seo__nav a { color: var(--avo-muted); text-decoration: none; font-size: .9rem; line-height: 1.4; display: block; }
.avo-seo__nav a:hover, .avo-seo__nav a:focus { color: var(--avo-primary); text-decoration: underline; }
.avo-seo__body { max-width: none; min-width: 0; }
.avo-seo__body h2 { scroll-margin-top: 96px; }
.avo-seo__body h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 10px; background: var(--avo-accent-2); border-radius: 2px; }

/* Uitleg-visual in kennisbankartikelen: tabel of schema met bijschrift. */
.avo-prose figure.avo-uitleg { margin: 32px 0; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); padding: 4px 4px 0; overflow-x: auto; }
.avo-prose figure.avo-uitleg table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.avo-prose figure.avo-uitleg th, .avo-prose figure.avo-uitleg td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--avo-border); vertical-align: top; }
.avo-prose figure.avo-uitleg thead th { background: var(--avo-tint-1); font-family: var(--avo-font-head); color: var(--avo-ink); }
.avo-prose figure.avo-uitleg tbody tr:last-child td { border-bottom: 0; }
.avo-prose figure.avo-uitleg figcaption { padding: 12px 14px 14px; color: var(--avo-muted); font-size: .88rem; border-top: 1px solid var(--avo-border); }

@media (max-width: 860px) {
  /* Verbeterpunt 69: een breed datablok in de SEO-sectie duwde op mobiel de
     hele pagina zijwaarts. De kolom krijgt minmax(0, 1fr) zodat hij mag
     krimpen, en de tekstkolom een expliciete breedte van 100 procent zodat hij
     niet alsnog op de min-content-breedte van een tabel gaat staan. De tabel
     zelf scrollt binnen .avo-table-scroll, met veeg-hint en fade (punt 71). */
  .avo-seo__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .avo-seo__body { width: 100%; }
  .avo-seo__nav { display: none; }
}

/* Redactionele doorverwijzing onderaan een artikel. */
.avo-prose .avo-verderlezen { margin: 32px 0 0; padding: 14px 18px; border-left: 4px solid var(--avo-accent-2); background: var(--avo-tint-1); border-radius: 0 var(--avo-radius-sm) var(--avo-radius-sm) 0; }
.avo-prose .avo-verderlezen p { margin: 0; }

/* Pagina-template: de prose is hier zelf het grid-item. Een breed datablok
   (prijstabel) mocht daardoor de kolom oprekken en de pagina horizontaal laten
   scrollen op smalle schermen. De leeskolom blijft nu binnen zijn kolom en het
   datablok scrollt in zijn eigen container. */
.avo-article-layout > .avo-prose { min-width: 0; max-width: min(var(--avo-content), 100%); }
.avo-prose .avo-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.avo-prose .avo-prijstabel-wrap, .avo-prose .avo-app { max-width: 100%; }

/* =========================================================================
   38. Otto, beweging en merkafstemming van plugin-componenten
   -------------------------------------------------------------------------
   De selectors voor plugin-componenten lopen via .avo-app zodat ze de
   plugin-CSS altijd overtroeven, ongeacht laadvolgorde. Knoppen die tot een
   actie leiden (aanvragen, bekijken, vergelijken) zijn amber; navigatie en
   secundaire acties blijven groen of omlijnd.
   ========================================================================= */
/* Knopvorm sitebreed (dubbele class zodat de theme-regel de plugin-CSS wint). */
body .avo-btn, body .avo-btn-cta, body .avo-btn-submit { border-radius: var(--avo-radius-pill); font-family: var(--avo-font-head); font-weight: 800; }
.avo-btn.avo-btn--cta, .avo-btn.avo-btn--accent { background: var(--avo-cta); color: var(--avo-on-cta); box-shadow: 0 6px 18px var(--avo-cta-glow); }
.avo-btn.avo-btn--cta:hover, .avo-btn.avo-btn--accent:hover { background: var(--avo-cta-dark); color: var(--avo-on-cta); }
.avo-btn.avo-btn--ghost { background: var(--avo-card); color: var(--avo-primary-dark); border-color: var(--avo-border); }
.avo-btn.avo-btn--ghost:hover { background: var(--avo-tint-1); border-color: var(--avo-primary); color: var(--avo-primary-dark); }
.avo-btn.avo-btn--outline { background: transparent; color: var(--avo-primary-dark); border: 2px solid var(--avo-primary); }
.avo-btn.avo-btn--outline:hover { background: var(--avo-primary); color: var(--avo-on-primary); }

.avo-otto { display: inline-block; vertical-align: middle; }
.avo-otto__pupil { transition: transform .15s ease-out; }

/* Secties glijden zacht in beeld. */
.avo-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.avo-reveal.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .avo-reveal { opacity: 1; transform: none; transition: none; }
  .avo-hero__otto-figuur, .avo-404__illu svg, .avo-footer__otto .avo-otto__zwaaiarm { animation: none; }
}

/* Amber actieknoppen in plugin-blokken. */
.avo-app .avo-btn-cta, .avo-app .avo-btn-submit, .avo-app .avo-ptable-btn, .avo-app .avo-rcard__cta, .avo-app .avo-aanrader .avo-btn--primary, .avo-app .avo-loadmore--cta {
  background: var(--avo-cta); color: var(--avo-on-cta); border-radius: var(--avo-radius-pill); font-family: var(--avo-font-head); font-weight: 800;
}
.avo-app .avo-btn-cta:hover, .avo-app .avo-btn-submit:hover, .avo-app .avo-ptable-btn:hover, .avo-app .avo-rcard__cta:hover, .avo-app .avo-aanrader .avo-btn--primary:hover { background: var(--avo-cta-dark); color: var(--avo-on-cta); }

/* Pilvorm op alle knoppen, chips en labels in de plugin. */
.avo-app .avo-btn, .avo-app .avo-loadmore, .avo-app .avo-ptab, .avo-app .avo-chip, .avo-app .avo-chip--filter, .avo-app .avo-pill, .avo-app .avo-rcard__badge, .avo-app .avo-rcard__pill, .avo-app .avo-rcard__pakket, .avo-app .avo-mfilters-chip, .avo-app .avo-ptable-best-badge, .avo-app .avo-aanrader__label, .avo-app .avo-rcard__aanraderpill { border-radius: var(--avo-radius-pill); }
.avo-app .avo-rcard, .avo-app .avo-aanrader, .avo-app .avo-filters, .avo-app .avo-review-card, .avo-app .avo-expert { border-radius: var(--avo-radius); }
.avo-app .avo-rcard { box-shadow: var(--avo-shadow-1); }
.avo-app .avo-rcard--top { border: 2px solid var(--avo-primary); }
/* Resultatenlijst als losse kaarten (de plugin-basis is een hairline-lijst
   zonder zijpadding; met schaduw en radius uit het thema oogde dat als
   kaarten die tegen elkaar plakken). Kaartmodel: rand, padding, ruimte
   ertussen, rangnummer als chip op de hoek. */
.avo-app .avo-cards { gap: 18px; }
.avo-app .avo-rcard { background: var(--avo-card); border: 1px solid var(--avo-border); padding: 26px 28px 30px; }
.avo-app .avo-cards > .avo-rcard:first-child { border-top: 1px solid var(--avo-border); }
.avo-app .avo-rcard--top { border: 2px solid var(--avo-primary); padding-left: 28px; background: var(--avo-tint-1); }
.avo-app .avo-cards > .avo-rcard--top:first-child { border-top: 2px solid var(--avo-primary); }
.avo-app .avo-rcard__rank {
  top: -13px; left: -13px; width: 28px; height: 28px; z-index: 1;
  background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; box-shadow: var(--avo-shadow-1);
}
.avo-app .avo-rcard--top .avo-rcard__rank { left: -13px; border-color: var(--avo-primary); color: var(--avo-primary); }
.avo-app .avo-rcard__aanraderpill, .avo-app .avo-rcard--top .avo-rcard__aanraderpill { top: -14px; left: 24px; padding: 5px 14px; }
/* Resultatenbalk als tintvlak, bovenkant gelijk met de filterkaart links. */
.avo-app .avo-results__bar { align-items: center; margin-bottom: 20px; padding: 12px 18px; background: var(--avo-tint-1); border-radius: var(--avo-radius); }
.avo-app .avo-results__left { gap: 6px; }
.avo-app .avo-results__count { font-weight: 600; color: var(--avo-ink); }
@media (max-width: 860px) {
  .avo-app .avo-rcard { padding: 22px 18px 24px; }
  .avo-app .avo-rcard--top { padding-left: 18px; }
  .avo-app .avo-results__bar { padding: 12px 14px; }
}
.avo-app .avo-aanrader { box-shadow: var(--avo-shadow-2); }
.avo-app .avo-aanrader__label { background: var(--avo-accent-2); color: var(--avo-ink); }

/* Sectiekoppen in plugin-blokken volgen dezelfde lime-streep. */
.avo-app .avo-section-heading { position: relative; display: inline-block; padding-bottom: 12px; }
.avo-app .avo-section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 6px; border-radius: 3px; background: var(--avo-accent-2); }
.avo-shead--center .avo-app .avo-section-heading::after { left: 50%; transform: translateX(-50%); }

/* Sidebar-blokken als zachte kaarten. */
.avo-sidebar__block, .avo-widget { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-1); }
.avo-sidebar__heading, .avo-widget__title { font-family: var(--avo-font-head); font-weight: 800; }

/* =========================================================================
   39. Sweep vriendelijk merkbeeld: eyebrow-pil, extra token, naar-boven-knop
   -------------------------------------------------------------------------
   Alleen toevoegingen; sectie 1 t/m 7 blijven ongewijzigd. Aanvullend token
   in een eigen :root-blok, zodat sectie 1 niet aangeraakt hoeft te worden.
   ========================================================================= */

/* Eyebrow-pilletje boven een sectiekop (was .avo-tape-label / .avo-kicker). */
.avo-eyebrow {
  display: inline-block;
  background: var(--avo-tint-3);
  color: var(--avo-primary-dark);
  font-family: var(--avo-font-head);
  font-weight: 800;
  font-size: .78rem;
  border-radius: var(--avo-radius-pill);
  padding: 5px 12px;
  margin-bottom: 10px;
}

/* Amber actieknop-stijl voor plugin-CTA's naar aanbieder/aanvraag/vergelijker.
   Toegevoegd als aparte class (avo-btn--cta-stijl) zodat de bestaande
   .avo-btn--primary-stijl (groen) niet hoeft te wijzigen. */
.avo-btn.avo-btn--cta-stijl {
  background: var(--avo-cta);
  color: var(--avo-on-cta);
}
.avo-btn.avo-btn--cta-stijl:hover {
  background: var(--avo-cta-dark);
  color: var(--avo-on-cta);
}

/* Tip van Otto (sidebar, boven het toolkaartje). */
.avo-sidebar__otto-tip { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.avo-sidebar__otto-tip .avo-otto { flex: 0 0 auto; }
.avo-sidebar__otto-tip p { margin: 0; font-size: .9rem; color: var(--avo-text); }
.avo-sidebar__otto-tip p strong { color: var(--avo-primary-dark); }

/* Naar-boven-knop: rond, vast rechtsonder, blijft weg van de mobiele
   filter-sheet-voet van de vergelijker (JS: assets/js/avo-theme.js). */
.avo-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--avo-card); border: 2px solid var(--avo-border);
  box-shadow: var(--avo-shadow-2);
  display: grid; place-items: center; padding: 0; cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.avo-totop:hover { border-color: var(--avo-primary); transform: translateY(-2px); }
.avo-totop[hidden] { display: none; }
@media (max-width: 860px) {
  .avo-totop { width: 48px; height: 48px; right: 14px; bottom: 14px; }
}

/* Interne-linkfase (interlinks.py): "Lees ook"-zin in de tekst en het
   "Verder lezen"-blok voor de FAQ. */
.avo-prose .avo-leesook, .avo-leesook { margin: 18px 0; padding: 10px 16px; border-left: 3px solid var(--avo-primary); background: var(--avo-tint-1, var(--avo-surface)); font-size: .95rem; border-radius: 0 var(--avo-radius-sm, 6px) var(--avo-radius-sm, 6px) 0; }
.avo-leesook a { font-weight: 700; }
.avo-verder { margin: 32px 0; padding: 20px 24px; background: var(--avo-tint-1, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-radius, 10px); }
.avo-verder p { margin: 0 0 8px; }
.avo-verder ul { margin: 0; padding-left: 20px; }
.avo-verder li { margin: 6px 0; }

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

/* Fluffy Otto (3D-render, assets/img/otto-fluffy.png) in de hero. */
.avo-hero__otto-figuur--fluffy { width: 340px; height: auto; }
@media (max-width: 860px) { .avo-hero__otto-figuur--fluffy { width: 220px; } }

/* ===== 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 */
  .avo-section, .avo-section--tight { padding-block: 52px; }
  .avo-container { padding-inline: 20px; }
  h2, .avo-section-heading { font-size: 26px; line-height: 1.18; letter-spacing: -.01em; }
  .avo-kicker, .avo-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
  .avo-lead { font-size: 16px; line-height: 1.55; }
  
  /* Sectiekoppen gecentreerd, zoals op de referentiesite. */
  .avo-shead { text-align: center; margin-bottom: 26px; }
  .avo-shead .avo-lead { margin-inline: auto; }
  .avo-shead .avo-section-heading { text-align: center; }
  .avo-shead .avo-section-heading::after, .avo-shead .avo-section-heading::before { left: 50%; transform: translateX(-50%); }
  .avo-shead > svg, .avo-shead > img { margin-inline: auto; }

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

  /* 2. Knoppen: een duidelijke primaire knop per blok, volle breedte */
  .avo-section .avo-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 */
  .avo-statblok { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .avo-statblok__card { padding: 14px 8px !important; text-align: center; min-width: 0; }
  .avo-statblok__cijfer { font-size: 22px !important; line-height: 1.1; }
  .avo-statblok__label { font-size: 11px !important; line-height: 1.3; }

  /* 4. Providerstrip als swipebaar lint (een rij) */
  .avo-providerstrip .avo-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; }
  .avo-providerstrip .avo-logos-track::-webkit-scrollbar { display: none; }
  .avo-providerstrip .avo-logos__item { flex: 0 0 136px; width: 136px; height: 64px; scroll-snap-align: start; }
  .avo-providerstrip .avo-logos__item img { height: 30px; max-width: 108px; }
  .avo-providerstrip .avo-logostrip__kop { text-align: left; }

  /* 5. Reviews als swipebare kaarten met de score gecentreerd erboven */
  .avo-reviews__summary, .avo-reviews__side { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px; margin-bottom: 18px; }
  .avo-reviews__avg { font-size: 44px; }
  .avo-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; }
  .avo-reviews__grid::-webkit-scrollbar { display: none; }
  .avo-reviews__grid .avo-review-card { flex: 0 0 82%; scroll-snap-align: start; }

  /* 6. Prijstabel als lijst: geen zijwaarts scrollen, geen kop, rij = kaartregel */
  .avo-table-scroll:has(.avo-prijstabel) { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .avo-table-scroll:has(.avo-prijstabel)::before, .avo-table-scroll:has(.avo-prijstabel)::after { display: none; }
  .avo-table-scroll:has(.avo-prijstabel) + .avo-scrollhint, .avo-scrollhint:has(+ .avo-table-scroll .avo-prijstabel) { display: none; }
  .avo-prijstabel { display: block; min-width: 0 !important; width: 100%; }
  .avo-prijstabel thead { display: none; }
  .avo-prijstabel tbody { display: block; }
  .avo-prijstabel tbody td { display: block; padding: 0 !important; border: 0 !important; white-space: normal !important; background: none !important; }
  .avo-prijstabel tbody tr:first-child { border-top: 1px solid var(--avo-border); }
  .avo-prijstabel .avo-ptable-provider-flex { display: flex; align-items: center; gap: 10px; }
  .avo-prijstabel .avo-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; }
  .avo-prijstabel .avo-ptable-best-badge { display: inline-block; margin-bottom: 4px; font-size: 10px; }
  .avo-prijstabel .avo-btn--sm { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .avo-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(--avo-border); }
  .avo-prijstabel tbody td:nth-child(1) { grid-area: 1 / 1 / 2 / 2; font-weight: 800; font-size: 12px; color: var(--avo-muted); text-align: center; }
  .avo-prijstabel tbody td:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  .avo-prijstabel tbody td:nth-child(3) { grid-area: 2 / 2 / 3 / 3; font-size: 13px; color: var(--avo-muted); }
  .avo-prijstabel tbody td:nth-child(3)::after { content: " Mb/s"; }
  .avo-prijstabel tbody td:nth-child(4) { grid-area: 3 / 2 / 4 / 3; font-size: 13px; color: var(--avo-muted); }
  .avo-prijstabel tbody td:nth-child(5) { grid-area: 1 / 3 / 2 / 4; font-weight: 800; font-size: 17px; color: var(--avo-ink); text-align: right; white-space: nowrap; }
  .avo-prijstabel tbody td:nth-child(5)::after { content: "eerste jaar"; display: block; font-weight: 600; font-size: 11px; color: var(--avo-muted); }
  .avo-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 */
  .avo-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; }
  .avo-aanrader__logo { grid-area: logo; flex: none; }
  .avo-aanrader__score { grid-area: score; justify-self: end; }
  .avo-aanrader__info { grid-area: info; }
  .avo-aanrader__usps { text-align: left; }
  .avo-aanrader__name { text-align: left; }

  /* 7. Ingeklapte blokken (SEO-tekst, lange tabellen): JS zet de klasse */
  .avo-inklap { position: relative; }
  .avo-inklap.is-dicht { max-height: var(--avo-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%); }
  .avo-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(--avo-card); color: var(--avo-primary); border: 2px solid var(--avo-primary); border-radius: var(--avo-radius-pill); font-weight: 800; font-family: var(--avo-font-head); font-size: 15px; cursor: pointer; }
  .avo-inklap__knop svg { transition: transform .2s; }
  .avo-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 .avo-hero__inner, body .avo-hero__grid { padding-top: 26px; padding-bottom: 28px; gap: 16px; }
  body .avo-hero h1 { font-size: 27px; margin-bottom: 12px; }
  body .avo-hero__sub { display: none; }
  body .avo-herocheck__badge { display: none; }
  body .avo-hero__trust, body .avo-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 .avo-hero__trust li, body .avo-herocheck__usps li { display: inline !important; padding: 0 !important; margin: 0 !important; }
  body .avo-hero__trust svg, body .avo-herocheck__usps svg, body .avo-hero__trust li::before { display: none; }
  body .avo-hero__kaart { margin-bottom: 0 !important; }
  body .avo-hero__copy { padding-bottom: 0 !important; }
  body .avo-herocheck__row { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; align-items: stretch !important; }
  body .avo-herocheck__row .avo-herocheck__field { flex: 1 1 calc(50% - 8px) !important; min-width: 0; }
  body .avo-herocheck__row .avo-herocheck__submit, body .avo-herocheck__row .avo-btn--block { flex: 1 1 100% !important; width: 100% !important; }
  body .avo-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.avo-body--vergelijker .avo-breadcrumbs, body.avo-body--vergelijker .avo-crumbbar { display: none; }
  body.avo-body--vergelijker h1 { font-size: 22px; line-height: 1.2; margin: 14px 0 10px; }
  body.avo-body--vergelijker .avo-article-head, body.avo-body--vergelijker .avo-vergelijken-head { margin-bottom: 8px; padding-bottom: 0; }
  body.avo-body--vergelijker main .avo-container > p, body.avo-body--vergelijker .avo-vergelijken-lead, body.avo-body--vergelijker .avo-article-head + p { display: none; }
  body.avo-body--vergelijker .avo-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.avo-body--vergelijker .avo-heroteg-grid::-webkit-scrollbar { display: none; }
  body.avo-body--vergelijker .avo-heroteg { flex: 0 0 auto; padding: 8px 12px; min-height: 0; }
  body .avo-gegevens, body .avo-adresblok { padding: 12px !important; margin-bottom: 10px; }
  body .avo-gegevens__title, body .avo-adresblok__title, body .avo-gegevens__hulp, body .avo-adresblok__label { display: none; }
  body .avo-gegevens__row, body .avo-adresblok__row { display: flex; gap: 8px; margin: 0; }
  body .avo-gegevens__row input, body .avo-adresblok__row input { min-width: 0; min-height: 44px; }
  body .avo-gegevens__row input[name="postcode"], body .avo-adresblok__row input[name="postcode"] { flex: 1 1 110px; }
  body .avo-gegevens__row input[name="huisnr"], body .avo-adresblok__row input[name="huisnr"] { flex: 0 1 64px; }
  body .avo-gegevens__row .avo-btn, body .avo-adresblok__row .avo-btn { flex: 0 0 auto !important; width: auto !important; min-height: 44px; padding-inline: 14px; white-space: nowrap; font-size: 14px; }
  body .avo-results__bar { margin-bottom: 10px !important; padding: 0 !important; gap: 8px !important; align-items: center !important; }
  body .avo-results__left { flex: 1 1 auto !important; gap: 4px !important; }
  body .avo-results__count { font-size: 13px !important; }
  body .avo-results__toolbar { gap: 8px !important; }
  body .avo-contractduur-switch { display: none; }
  body .avo-results__bar { display: flex !important; flex-wrap: wrap !important; }
  body .avo-results__toolbar { flex: 1 1 100% !important; display: flex !important; align-items: center; }
  body .avo-filters__mobtoggle { flex: 0 0 auto; min-height: 40px; }
  body .avo-results__sort { margin-left: 0 !important; flex: 1 1 auto !important; font-size: 13px; }
  body .avo-results__sort select { flex: 1 1 auto; padding: 8px 10px; }
  body .avo-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 .avo-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 .avo-rcard__logo { grid-area: logo !important; align-self: center; display: block; padding-top: 2px; }
  body .avo-rcard__logo img { width: auto !important; max-width: 170px !important; height: 44px !important; object-fit: contain; object-position: left center; }
  body .avo-rcard__price { display: contents !important; }
  body .avo-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 .avo-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(--avo-border); }
  body .avo-rcard__price-old { font-size: 13px !important; }
  body .avo-rcard__bedrag { font-size: 28px !important; line-height: 1 !important; }
  body .avo-rcard__per { font-size: 13px !important; }
  body .avo-rcard__dash { display: none !important; }
  body .avo-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 .avo-rcard__jaar span { font-size: 12px !important; }
  body .avo-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 .avo-rcard__body { grid-area: body !important; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid var(--avo-border); min-width: 0;  justify-self: stretch !important; width: auto !important;}
  body .avo-rcard__name { font-size: 17px !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
  body .avo-rcard__dealtekst { display: none !important; }
  body .avo-rcard__titlerow { gap: 6px !important; }
  body .avo-rcard__meta { gap: 6px 12px !important; font-size: 13px !important; margin: 0 0 8px !important; }
  body .avo-rcard__benefits { margin: 0 !important; gap: 4px !important; font-size: 14px !important; }
  body .avo-rcard__benefits li:nth-child(n+3) { display: none !important; }
  body .avo-rcard__cashback { font-size: 12px !important; }
  body .avo-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 .avo-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 .avo-rcard__comparecb { grid-area: cmp !important; justify-self: start; margin: 12px 0 0 !important; font-size: 13px !important; }
  body .avo-rcard__more { grid-area: more !important; justify-self: end; margin: 8px 0 0 !important; padding: 8px 14px !important; border: 1px solid var(--avo-border) !important; border-radius: 999px !important; background: var(--avo-card) !important; font-size: 13px !important; font-weight: 700 !important; }
  body .avo-rcard__foot .avo-rcard__comparecb, body .avo-rcard__foot .avo-rcard__more { grid-area: auto !important; margin-top: 0 !important; }
  body .avo-rcard__comparecb, body .avo-rcard__more { position: static !important; transform: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; }
  body .avo-rcard__details { grid-area: details !important; grid-column: auto !important; margin-top: 12px !important; }
  body .avo-rcard__rank { position: absolute !important; top: -12px !important; left: -10px !important; width: 26px; height: 26px; display: grid !important; place-items: center; background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: 50%; font-size: 12px !important; font-weight: 800; z-index: 2; margin: 0 !important; }
  body .avo-rcard__aanraderpill { position: absolute !important; top: -13px !important; left: 22px !important; z-index: 2; margin: 0 !important; }
  body .avo-rcard__titlerow .avo-rcard__aanraderpill { position: static !important; display: inline-block; margin: 4px 6px 0 0 !important; }
  body .avo-rcard--top { padding-left: 16px !important; }

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

/* Kortingbadge op de resultaatkaart: limegroen vlak met donkere tekst, was lime op lichtgeel (onleesbaar). */
.avo-app .avo-rcard__badge { background: var(--avo-accent-2); color: var(--avo-primary-dark); }
.avo-app .avo-rcard__badge svg { color: var(--avo-primary-dark); }

/* 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). */
.avo-hero .avo-hero__trust, .avo-hero .avo-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). */
.avo-extlinks--leeg { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.avo-extlinks--leeg .avo-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. */
.avo-readertools { flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.avo-readertools::-webkit-scrollbar { display: none; }
.avo-readertools__group { flex-wrap: nowrap; gap: 6px; }
.avo-readertools__btn { white-space: nowrap; padding: 7px 11px; font-size: .8rem; flex: 0 0 auto; }
.avo-readertools__sz { min-width: 36px; }
@media (max-width: 600px) { .avo-readertools { margin-inline: -20px; padding-inline: 20px; } }

/* ===== Linkhub: chiprijen en tellers (05-10) ===== */
.avo-linkhub__n { font-size: .78rem; font-weight: 600; color: var(--avo-muted); margin-left: 2px; }
.avo-linkhub__rij { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--avo-border); }
.avo-linkhub__rijkop { flex: 0 0 180px; font-size: .9rem; font-weight: 700; color: var(--avo-ink); padding-top: 6px; }
.avo-linkhub__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avo-linkhub__chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--avo-border); border-radius: 999px; background: var(--avo-card); color: var(--avo-ink); font-size: .88rem; font-weight: 600; text-decoration: none; }
.avo-linkhub__chip:hover { border-color: var(--avo-primary); color: var(--avo-primary); text-decoration: none; }
@media (max-width: 600px) {
	.avo-linkhub__rij { flex-direction: column; gap: 10px; }
	.avo-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. */
.avo-404v2 { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.avo-404v2__top { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.avo-404v2__illu { width: auto; max-width: 260px; margin: 0 0 14px; }
.avo-404v2__illu svg, .avo-404v2__illu img { display: block; width: 100%; height: auto; max-height: 130px; object-fit: contain; object-position: left center; }
.avo-404v2__main h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; text-align: left; }
.avo-404v2__lead { margin: 0 0 26px; font-size: 1.08rem; color: var(--avo-muted); max-width: 56ch; }
.avo-404v2__sug h2, .avo-404v2__routes h2, .avo-404v2__prov h2 { margin: 0 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--avo-muted); text-align: left; }
.avo-404v2__sug ul { list-style: none; margin: 0 0 22px; padding: 0; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); overflow: hidden; }
.avo-404v2__sug li + li { border-top: 1px solid var(--avo-border); }
.avo-404v2__sug a { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: var(--avo-ink); }
.avo-404v2__sug a:hover { background: var(--avo-surface); }
.avo-404v2__sug a:hover .avo-404v2__pijl { color: var(--avo-primary); transform: translateX(3px); }
.avo-404v2__sugtekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.avo-404v2__soort { font-size: .76rem; font-weight: 600; color: var(--avo-primary); }
.avo-404v2__sugtekst strong { font-size: 1rem; line-height: 1.35; }
.avo-404v2__pijl { flex: 0 0 auto; color: var(--avo-muted); display: inline-flex; transition: transform .15s ease, color .15s ease; }
.avo-404v2__zoek { display: flex; align-items: center; gap: 8px; max-width: 520px; padding: 6px 6px 6px 14px; border: 1px solid var(--avo-border); border-radius: 999px; background: var(--avo-card); }
.avo-404v2__zoekicoon { color: var(--avo-muted); display: inline-flex; }
.avo-404v2__zoek input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: 8px 4px; color: var(--avo-ink); outline: none; }
.avo-404v2__zoek .avo-btn { border-radius: 999px; padding: 9px 18px; }
.avo-404v2__check .avo-app, .avo-404v2__check .avo-herocheck { display: block; margin: 0; padding: 0; background: none; }
.avo-404v2__check .avo-herocheck__card { margin: 0; width: 100%; max-width: none; }
.avo-404v2__check .avo-herocheck__row { display: grid !important; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
.avo-404v2__check .avo-herocheck__field { min-width: 0; width: auto; flex: none; }
.avo-404v2__check .avo-herocheck__field input { width: 100%; min-width: 0; box-sizing: border-box; }
.avo-404v2__routes { margin-top: clamp(40px, 5vw, 64px); }
.avo-404v2__kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.avo-404v2__kaart { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); color: var(--avo-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.avo-404v2__kaart:hover { border-color: var(--avo-primary); transform: translateY(-2px); text-decoration: none; }
.avo-404v2__kaarticoon { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 12px; background: var(--avo-tint-1); color: var(--avo-primary); }
.avo-404v2__kaart strong { font-size: 1.05rem; }
.avo-404v2__kaart span:last-child { font-size: .9rem; line-height: 1.5; color: var(--avo-muted); }
.avo-404v2__prov { margin-top: clamp(32px, 4vw, 48px); }
.avo-404v2__logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.avo-404v2__logos a { display: grid; place-items: center; height: 60px; padding: 10px 12px; border: 1px solid var(--avo-border); border-radius: 12px; background: var(--avo-card); text-decoration: none; color: var(--avo-ink); font-weight: 700; font-size: .85rem; }
.avo-404v2__logos a:hover { border-color: var(--avo-primary); }
.avo-404v2__logos img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 860px) {
	.avo-404v2__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.avo-404v2__kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.avo-404v2__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.avo-404v2__illu { max-width: 180px; }
	.avo-404v2__illu svg, .avo-404v2__illu img { max-height: 92px; }
	.avo-404v2__main h1 { font-size: 1.7rem; }
	.avo-404v2__lead { font-size: 1rem; margin-bottom: 20px; }
	.avo-404v2__sug a { padding: 12px 14px; }
	.avo-404v2__kaarten { gap: 10px; }
	.avo-404v2__kaart { padding: 16px 14px; }
	.avo-404v2__kaart span:last-child { display: none; }
	.avo-404v2__logos { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x mandatory; }
	.avo-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. */
.avo-footer__llms { color: inherit; opacity: .75; text-decoration: none; font-size: .8rem; }
.avo-footer__llms:hover { opacity: 1; text-decoration: underline; }

/* Footer-onderbalk: cookies, cookie-instellingen en llms.txt naast elkaar (19-10). */
.avo-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) {
	.avo-btn--lg { white-space: normal; max-width: 100%; text-align: center; }
	.avo-sidebar__post-cat { font-size: .75rem; }
	.avo-breadcrumbs a { display: inline-block; padding-block: 4px; }
	[class*="toc-list"] a { display: inline-block; padding-block: 5px; }
	.avo-footer__links a, .avo-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; }
	.avo-sp__sluit { min-width: 36px; min-height: 36px; }
	.avo-postcard__meta a { display: inline-block; padding-block: 4px; }
	.avo-rev-cta__knoppen { flex-wrap: wrap; }
	.avo-results__sort > label, .avo-results__sort > span { white-space: nowrap; }
	html.avo-menu-open, html.avo-menu-open body { overflow: hidden; }
	.avo-nav { overscroll-behavior: contain; }
	.avo-rev-cta__knoppen .avo-btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ===== Footer: internet vergelijk netwerk (uitklapper met de vijf sites) ===== */
.avo-netwerk { padding-block: 14px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.avo-netwerk__uitklap > summary { cursor: pointer; font-weight: 700; color: inherit; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; }
.avo-netwerk__uitklap > summary::-webkit-details-marker { display: none; }
.avo-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; }
.avo-netwerk__uitklap[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.avo-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; }
.avo-netwerk__lijst li { display: flex; flex-direction: column; gap: 2px; }
.avo-netwerk__naam { color: inherit; font-weight: 600; text-decoration: none; }
a.avo-netwerk__naam:hover { text-decoration: underline; }
.avo-netwerk__naam.is-huidig::after { content: " (deze site)"; font-weight: 400; opacity: .7; }
.avo-netwerk__oms { font-size: .85rem; color: inherit; opacity: .75; }

.avo-antispam { margin: 4px 0 12px; font-size: .85rem; color: var(--avo-muted); }
.avo-antispam.is-ok { color: var(--avo-success, #16A34A); }
.avo-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. */
.avo-stadhero { background: var(--avo-surface); border-bottom: 1px solid var(--avo-border); padding-block: clamp(28px, 4vw, 52px); }
.avo-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; }
.avo-stadhero__tekst { grid-area: kop; }
.avo-stadhero__intro { grid-area: intro; }
.avo-stadhero__check { grid-area: check; }
.avo-stadhero h1 { margin: 10px 0 12px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; }
.avo-stadhero .avo-stad__tekst { font-size: 1.08rem; color: var(--avo-text); max-width: 62ch; }
.avo-stadhero__bron { margin: 12px 0 0; font-size: .85rem; color: var(--avo-muted); }
.avo-stadhero__check .avo-app, .avo-stadhero__check .avo-herocheck { display: block; margin: 0; padding: 0; background: none; }
.avo-stadhero__check .avo-herocheck__card { margin: 0; width: 100%; max-width: none; }
.avo-stadhero__check .avo-herocheck__row { display: grid !important; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.avo-stadhero__check .avo-herocheck__field { min-width: 0; width: auto; flex: none; }
.avo-stadhero__check .avo-herocheck__row > button, .avo-stadhero__check .avo-herocheck__submit { grid-column: 1 / -1; width: 100%; white-space: normal; }
.avo-stadhero__check .avo-herocheck__field input { width: 100%; min-width: 0; box-sizing: border-box; }
.avo-stad__inhoud { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.avo-stad__blok h2 { margin: 0 0 12px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.avo-stad__blok h3 { margin: 22px 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--avo-muted); }
.avo-stad__tekst p { margin: 0 0 12px; line-height: 1.65; max-width: 70ch; }
.avo-stad__blok--twee { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.avo-stad__voetnoot { margin: 10px 0 0; font-size: .82rem; color: var(--avo-muted); max-width: 80ch; }
.avo-stad__cta { margin: -20px 0 0; }
.avo-stad__cta .avo-btn { white-space: normal; max-width: 100%; text-align: center; text-wrap: balance; }
.avo-stadslot { max-width: 860px; padding: 22px 26px; border-radius: var(--avo-radius); background: var(--avo-card); border: 1px solid var(--avo-border); border-left: 4px solid var(--avo-primary); }
.avo-stadslot h2 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.avo-stadslot .avo-stad__tekst p:last-child { margin-bottom: 0; }
.avo-stadwijk__gepland { display: inline; font-size: .8rem; color: var(--avo-muted); }
.avo-stadwijk__legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: .84rem; color: var(--avo-muted); }
.avo-stadwijk__legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.avo-stadwijk__legenda .aan { background: var(--avo-primary); }
.avo-stadwijk__legenda .half { background: var(--avo-accent); }
.avo-stadwafel { justify-items: center; text-align: center; }

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

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

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

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

.avo-stadtabel, .avo-stadwijk { border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); overflow: hidden; margin-top: 8px; }
.avo-stadtabel__kop, .avo-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; }
.avo-stadwijk__kop, .avo-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; }
.avo-stadtabel__kop, .avo-stadwijk__kop { background: var(--avo-surface); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--avo-muted); }
.avo-stadtabel__rij + .avo-stadtabel__rij, .avo-stadwijk__rij + .avo-stadwijk__rij { border-top: 1px solid var(--avo-border); }
.avo-stadtabel__naam { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.avo-stadtabel__naam img { width: auto; max-width: 72px; height: 28px; object-fit: contain; flex: 0 0 auto; }
.avo-stadtabel__naam a { color: var(--avo-ink); }
.avo-stadtabel__bereik { display: block; height: 8px; border-radius: 999px; background: var(--avo-tint-1); overflow: hidden; margin-bottom: 4px; }
.avo-stadtabel__bereik span { display: block; height: 100%; background: var(--avo-primary); }
.avo-stadtabel small, .avo-stadwijk small { display: block; font-size: .8rem; color: var(--avo-muted); line-height: 1.35; }
.avo-stadwijk__meter { display: flex; height: 10px; border-radius: 999px; background: var(--avo-tint-1); overflow: hidden; margin-bottom: 4px; }
.avo-stadwijk__meter .aan { background: var(--avo-primary); }
.avo-stadwijk__meter .half { background: var(--avo-accent); }

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

.avo-stadhuis { display: flex; flex-direction: column; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); overflow: hidden; margin-top: 8px; }
.avo-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; }
.avo-stadhuis__rij + .avo-stadhuis__rij { border-top: 1px solid var(--avo-border); }
.avo-stadhuis__wie strong { display: block; }
.avo-stadhuis__wie span, .avo-stadhuis small { font-size: .84rem; color: var(--avo-muted); }
.avo-stadhuis__prijs strong { display: block; font-family: var(--avo-font-head); font-size: 1.2rem; }

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

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

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

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

.avo-stadbuurt__feiten { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.avo-stadbuurt__feiten li { padding: 12px 14px; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); font-size: .84rem; color: var(--avo-muted); line-height: 1.35; }
.avo-stadbuurt__feiten strong { display: block; font-size: 1.5rem; color: var(--avo-primary); line-height: 1.1; margin-bottom: 2px; }
.avo-stadbuurt__zin { margin: 0 0 10px; font-size: .92rem; }
.avo-stadbuurt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.avo-stadbuurt__wijk { border: 1px solid var(--avo-border); border-radius: var(--avo-radius); background: var(--avo-card); scroll-margin-top: 90px; }
.avo-stadbuurt__wijk > summary { cursor: pointer; padding: 11px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.avo-stadbuurt__wijk > summary span { font-size: .84rem; color: var(--avo-muted); }
.avo-stadbuurt__wijk[open] > summary { border-bottom: 1px solid var(--avo-border); }
.avo-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; }
.avo-stadbuurt__rij + .avo-stadbuurt__rij { border-top: 1px solid var(--avo-border); }
.avo-stadbuurt__rij.is-kop { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--avo-muted); }
.avo-stadbuurt__rij small { display: block; font-size: .76rem; color: var(--avo-muted); }
@media (max-width: 860px) {
	.avo-stadhero__grid, .avo-stad__blok--twee { grid-template-columns: 1fr; gap: 24px; }
	.avo-stadhero__grid { grid-template-areas: "kop" "check" "intro"; gap: 20px; }
	.avo-stadkern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.avo-stadprijzen { grid-template-columns: 1fr; }
	.avo-stadtabel__kop, .avo-stadwijk__kop { display: none; }
	.avo-stadtabel__rij { grid-template-columns: 1fr auto; grid-template-areas: "naam snel" "bereik bereik" "prijs prijs"; row-gap: 8px; }
	.avo-stadtabel__rij > span:nth-child(1) { grid-area: naam; }
	.avo-stadtabel__rij > span:nth-child(2) { grid-area: bereik; }
	.avo-stadtabel__rij > span:nth-child(3) { grid-area: snel; font-size: .85rem; color: var(--avo-muted); text-align: right; }
	.avo-stadtabel__rij > span:nth-child(4) { grid-area: prijs; text-align: left; }
	.avo-stadwijk__rij { grid-template-columns: 1fr 1fr; row-gap: 8px; align-items: start; }
	.avo-stadwijk__rij > span:nth-child(1) { grid-column: 1 / -1; }
	.avo-stadbuurt__rij { grid-template-columns: 1fr 1fr; row-gap: 6px; }
	.avo-stadbuurt__rij > span:nth-child(1) { grid-column: 1 / -1; }
	.avo-stadbuurt__rij.is-kop { display: none; }
	.avo-stadwijk__rij > span[data-label]::before, .avo-stadbuurt__rij > span[data-label]::before, .avo-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(--avo-muted); margin-bottom: 2px; }
	.avo-stadtabel__rij > span:nth-child(3)::before { display: inline; margin-right: 6px; }
	.avo-stadmethode { grid-template-columns: 1fr; }
	.avo-stadmethode h2 { grid-row: auto; }
	.avo-stadkaart__vlak { grid-template-columns: 1fr; }
	.avo-stadwijkblok__item:not(.is-kort) { grid-column: auto; }
	.avo-stadvergelijk th, .avo-stadvergelijk td { padding: 9px 10px; font-size: .85rem; }
	.avo-stadhuis__rij { grid-template-columns: 1fr auto; }
	.avo-stadhuis__prijs { text-align: right; }
	.avo-stadhuis__bereik { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 600px) {
	.avo-stadhero h1 { font-size: 1.75rem; }
	.avo-stadkern__tegel { padding: 14px; }
	.avo-stadbalk__rij { grid-template-columns: 1fr auto; }
	.avo-stadbalk__rij .avo-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. */
.avo-stad { --stad-hero-1: color-mix(in srgb, var(--avo-primary) 62%, #0b0620); --stad-schaduw: var(--avo-shadow-1, 0 2px 10px rgba(20,16,40,.06)); --stad-schaduw-2: var(--avo-shadow-2, 0 14px 34px rgba(20,16,40,.12)); background: var(--avo-bg, var(--avo-surface)); }
.avo-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(--avo-primary) 55%, #fff 0%) 0%, transparent 55%), linear-gradient(135deg, var(--stad-hero-1) 0%, var(--avo-primary) 100%); }
.avo-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(--avo-accent) 35%, transparent) 0%, transparent 65%); pointer-events: none; }
.avo-stadhero__grid { position: relative; z-index: 1; }
.avo-stadhero h1 { color: #fff; letter-spacing: -.015em; }
.avo-stadhero .avo-breadcrumbs, .avo-stadhero .avo-breadcrumbs a { color: rgba(255,255,255,.75); }
.avo-stadhero .avo-breadcrumbs a:hover { color: #fff; }
.avo-stadhero .avo-stad__tekst, .avo-stadhero .avo-stad__tekst p { color: rgba(255,255,255,.92); }
.avo-stadhero .avo-stad__tekst a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.avo-stadhero .avo-stad__tekst strong { color: #fff; }
.avo-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); }
.avo-stadhero__bron::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--avo-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--avo-accent) 30%, transparent); }
.avo-stadhero__check .avo-herocheck__card { box-shadow: var(--stad-schaduw-2); color: var(--avo-text); }

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

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

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

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

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

/* Buurten en buurtzoeker */
.avo-stadbuurt__feiten li { position: relative; overflow: hidden; background: var(--avo-surface); border: 0; }
.avo-stadbuurt__feiten strong { font-family: var(--avo-font-head); font-size: 1.9rem; }
.avo-stadbuurt__zoek { margin: 18px 0 6px; padding: 16px; border-radius: var(--avo-radius); background: linear-gradient(135deg, color-mix(in srgb, var(--avo-primary) 10%, var(--avo-card)), color-mix(in srgb, var(--avo-accent) 10%, var(--avo-card))); }
.avo-stadbuurt__zoek label { display: block; font-weight: 700; color: var(--avo-ink); margin-bottom: 8px; }
.avo-stadbuurt__zoek input { width: 100%; box-sizing: border-box; padding: 13px 16px 13px 44px; border: 1px solid var(--avo-border); border-radius: 999px; font: inherit; background: var(--avo-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; }
.avo-stadbuurt__zoek input:focus { outline: none; border-color: var(--avo-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--avo-primary) 18%, transparent); }
.avo-stadbuurt__geen { margin: 10px 0 0; font-size: .9rem; color: var(--avo-muted); }
.avo-stadbuurt__wijk { transition: border-color .15s; }
.avo-stadbuurt__wijk > summary { list-style: none; position: relative; padding-right: 44px; }
.avo-stadbuurt__wijk > summary::-webkit-details-marker { display: none; }
.avo-stadbuurt__wijk > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--avo-muted); border-bottom: 2px solid var(--avo-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.avo-stadbuurt__wijk[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.avo-stadbuurt__wijk[open] { border-color: color-mix(in srgb, var(--avo-primary) 40%, var(--avo-border)); }
.avo-stadbuurt__wijk > summary:hover { background: color-mix(in srgb, var(--avo-primary) 4%, var(--avo-card)); }
.avo-stadbuurt__rij.is-raak { background: color-mix(in srgb, var(--avo-accent) 18%, var(--avo-card)); box-shadow: inset 4px 0 0 var(--avo-accent); }

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

div.avo-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(--avo-radius) + 4px); background: linear-gradient(135deg, color-mix(in srgb, var(--avo-primary) 10%, var(--avo-card)), color-mix(in srgb, var(--avo-accent) 14%, var(--avo-card))); border: 1px solid var(--avo-border); }
div.avo-stad__cta p { margin: 0; flex: 1 1 320px; font-size: 1.08rem; font-weight: 600; color: var(--avo-ink); }
@media (max-width: 860px) {
	.avo-stadhero { padding-bottom: 80px; }
	.avo-stad__inhoud > .avo-stad__blok[id] { border-radius: var(--avo-radius); }
}
@media (max-width: 600px) {
	.avo-stad__inhoud > .avo-stad__blok[id] { padding: 20px 16px; margin-inline: -4px; }
	.avo-stadbuurt__feiten { grid-template-columns: 1fr 1fr; }
	.avo-stadvergelijk { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.avo-stadzweef__knop { font-size: .9rem; padding-inline: 14px; }
	.avo-stadbuurt__feiten strong { font-size: 1.5rem; }
	.avo-stadkern { gap: 10px; }
	.avo-stadkern__tegel strong { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.avo-stadwijkblok__item, .avo-stadburen__link, .avo-stadtoc a { transition: none; }
}

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

/* Zwevende adrescheck */
.avo-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(--avo-radius) + 2px); color: #fff; background: linear-gradient(135deg, var(--stad-hero-1, var(--avo-primary)), var(--avo-primary)); box-shadow: 0 18px 40px rgba(20,16,40,.28); animation: avo-zweefin .25s ease; }
.avo-stadzweef[hidden] { display: none; }
.avo-stadzweef__tekst strong { display: block; font-family: var(--avo-font-head); font-size: 1.02rem; line-height: 1.3; padding-right: 22px; color: #fff; }
.avo-stadzweef__tekst span { font-size: .86rem; opacity: .8; }
.avo-stadzweef__tekst em { display: none; font-style: normal; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.avo-stadzweef__knop { justify-content: center; width: 100%; }
.avo-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; }
.avo-stadzweef__dicht:hover { background: rgba(255,255,255,.26); }
@keyframes avo-zweefin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
	.avo-stadwijkblok.is-tabs { grid-template-columns: 1fr; }
	.avo-stadwijkblok__tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 8px; scrollbar-width: none; }
	.avo-stadwijkblok__tabs::-webkit-scrollbar { display: none; }
	.avo-stadwijkblok__tabs button { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px; }
	.avo-stadwijkblok.is-tabs .avo-stadwijkblok__item { grid-column: 1; grid-row: 2; }
	.avo-stadwijkblok.is-tabs .avo-stadwijkblok__cijfers { grid-template-columns: 1fr 1fr; }
	.avo-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)); }
	.avo-stadzweef__tekst strong { display: none; }
	.avo-stadzweef__tekst em { display: block; }
	.avo-stadzweef__tekst span, .avo-stadzweef__dicht { display: none; }
	.avo-stadzweef__knop { width: auto; padding-inline: 16px; white-space: nowrap; }
	body.has-stadzweef { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .avo-stadzweef, .avo-stadwijkblok.is-tabs .avo-stadwijkblok__item { animation: none; } }

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