/* ==========================================================================
   Kuvela — main.css
   Alles wat theme.json niet kan: layout van de secties, beweging, en de
   componenten die geen core-blok zijn.

   Kleur, lettergrootte en lettertype komen uit theme.json. Hieronder staan
   ze één keer onder de naamgeving van CLAUDE.md sectie 6, en daarna wordt
   er uitsluitend via var() naar verwezen. Nergens een losse hex-waarde.
   ========================================================================== */

:root {
  /* -- Kleur — zes tokens, gekoppeld aan het palet in theme.json.
     Afgeleid uit design-input/logo-kuvela.png; #C0515A en #E8956A zijn de
     toegankelijke afstemming daarvan uit designrichting.md. -- */
  --color-primary: var(--wp--preset--color--koraal);
  --color-accent: var(--wp--preset--color--oranje);
  --color-peach: var(--wp--preset--color--perzik);
  --color-sand: var(--wp--preset--color--zand);
  --color-white: var(--wp--preset--color--wit);
  --color-ink: var(--wp--preset--color--aubergine);

  /* Afgeleiden: mengsels van bovenstaande, geen nieuwe kleuren. */
  --primary-hover: color-mix(in srgb, var(--color-primary) 84%, var(--color-ink));
  --primary-diep: color-mix(in srgb, var(--color-primary) 84%, var(--color-ink));
  /* 86% gaf 4,21:1 voor aubergine tekst op de hoverkleur. Op 98% is dat
     5,01:1. De hover wordt daarmee subtieler, maar leesbaar. */
  --accent-hover: color-mix(in srgb, var(--color-accent) 98%, var(--color-ink));
  --color-muted: color-mix(in srgb, var(--color-ink) 74%, var(--color-white));
  --muted-op-donker: color-mix(in srgb, var(--color-sand) 74%, var(--color-ink));
  --hairline: color-mix(in srgb, var(--color-ink) 12%, transparent);
  --hairline-donker: color-mix(in srgb, var(--color-sand) 20%, transparent);

  /* De perzikondergrond van de hero. Alle drie de stops komen uit
     --color-peach; geen losse hexcodes meer (CLAUDE.md sectie 6). */
  --hero-grond: linear-gradient(118deg,
    color-mix(in srgb, var(--color-peach) 78%, var(--color-white)) 0%,
    var(--color-peach) 46%,
    color-mix(in srgb, var(--color-peach) 86%, var(--color-white)) 100%);

  /* -- Lettertype en groottes -- */
  --font-heading: var(--wp--preset--font-family--hoofding);
  --font-body: var(--wp--preset--font-family--tekst);

  --size-xs: var(--wp--preset--font-size--xs);
  --size-sm: var(--wp--preset--font-size--klein);
  --size-base: var(--wp--preset--font-size--basis);
  --size-lg: var(--wp--preset--font-size--medium);
  --size-xl: var(--wp--preset--font-size--groot);
  --size-2xl: var(--wp--preset--font-size--xl);

  /* -- Ruimte — zeven stappen -- */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* -- Radius -- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* -- Schaduw — vier niveaus, warm getint, nooit koel grijs -- */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--color-ink) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--color-ink) 5%, transparent);
  --shadow-2: 0 2px 6px color-mix(in srgb, var(--color-ink) 7%, transparent), 0 8px 18px color-mix(in srgb, var(--color-ink) 9%, transparent);
  --shadow-3: 0 4px 12px color-mix(in srgb, var(--color-ink) 9%, transparent), 0 18px 38px color-mix(in srgb, var(--color-ink) 12%, transparent);
  --shadow-4: 0 8px 20px color-mix(in srgb, var(--color-ink) 11%, transparent), 0 32px 64px color-mix(in srgb, var(--color-ink) 17%, transparent);

  /* -- Beweging — één taal voor de hele site (CLAUDE.md sectie 7) -- */
  --ease-in-uit: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-uit: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.5, 1);
  --duur-kort: 140ms;
  --duur-basis: 180ms;
  --duur-lang: 220ms;

  /* Pijl naar rechts, als masker zodat hij currentColor aanneemt. */
  --pijl-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Basis
   ========================================================================== */

html { scroll-behavior: smooth; }

body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }

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

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

/* R2 — de focusring staat via theme.json in koraal, en dat haalt op de
   aubergine vlakken maar 2,63:1. Op de drie donkere onderdelen dus perzik:
   6,69:1. Alleen de kleur wisselt; dikte en afstand blijven gelijk. */
.balk :focus-visible,
.bewijs :focus-visible,
.voet :focus-visible {
  outline-color: var(--color-peach);
}

/* De balk ligt vast bovenaan; ankers moeten daaronder uitkomen. */
[id] { scroll-margin-top: calc(var(--balk-hoog-vast) + var(--space-md)); }

/* Skip-link uit inc/toegankelijkheid.php. */
.kuvela-skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 999999;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  text-decoration: none;
}
.kuvela-skip-link:focus { left: 0; }

.kuvela-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Omhulsel voor markup die buiten de layout van een core-blok valt (de
   balk en de voettekst zitten in een wp:html-blok). Zelfde maat als de
   constrained secties: 1060px kolom binnen 1140px inclusief zijmarge.

   PUNT 7a — de zijmarge stond hier niet. useRootPaddingAwareAlignments
   staat al aan en de root-padding staat al op 24px, maar een wp:html-blok
   valt buiten de layout van core en krijgt die padding dus niet. Daardoor
   plakten de balk en de voettekst op smalle schermen tegen de schermrand
   terwijl de secties eronder wel 24px inspringen.

   box-sizing blijft bewust content-box: de max-width slaat dan op de
   kolom van 1060px, precies zoals bij de constrained secties, en de
   padding komt daar buiten. */
.kuvela-omhulsel {
  box-sizing: content-box;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--50);
}

/* ==========================================================================
   Knoppen — core/button met een eigen variant per klasse
   ========================================================================== */

/* box-sizing expliciet: een knop met een breedte mag nooit buiten zijn
   houder vallen. Zonder dit telt de browser padding en rand bij de breedte
   op — bij width: 100% is dat meteen 30px overloop. */
.wp-block-button__link,
.knop {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* Eén knoppatroon voor de hele site. Twee maten, en verder niets:
     standaard, en compact waar de knop in een kaart of naast beeld staat.
     Contexten zetten alleen deze twee waarden om, nooit padding of hoogte
     los — anders lopen ze weer uiteen zoals ze deden. */
  min-height: var(--knop-hoog, 48px);
  padding: var(--knop-pad-y, 0.75rem) var(--knop-pad-x, 1.5rem);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--size-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duur-basis) var(--ease-in-uit),
    background-color var(--duur-basis) var(--ease-uit),
    border-color var(--duur-basis) var(--ease-uit),
    color var(--duur-basis) var(--ease-uit),
    box-shadow var(--duur-basis) var(--ease-uit);
}

/* De compacte maat: in de hero naast het beeld, en in de prijskaarten. */
.hero,
.pakket__voet {
  --knop-hoog: 44px;
  --knop-pad-y: 0.6rem;
  --knop-pad-x: 1.25rem;
}

/* Pijl achter het label, alleen waar de knop hem vraagt. */
.knop--pijl .wp-block-button__link::after,
a.knop--pijl::after {
  content: "";
  width: 1em; height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--pijl-rechts) center / contain no-repeat;
  mask: var(--pijl-rechts) center / contain no-repeat;
  transition: transform var(--duur-basis) var(--ease-in-uit);
}
.knop--pijl:hover .wp-block-button__link::after,
.knop--pijl:focus-visible .wp-block-button__link::after,
a.knop--pijl:hover::after,
a.knop--pijl:focus-visible::after { transform: translateX(2px); }

.knop--primair > .wp-block-button__link,
a.knop--primair {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-2);
}
.knop--primair > .wp-block-button__link:hover,
a.knop--primair:hover {
  background: var(--primary-hover);
  transform: scale(1.02);
  box-shadow: var(--shadow-3);
}
.knop--primair > .wp-block-button__link:active,
a.knop--primair:active { transform: scale(0.99); }

/* Coral met witte tekst haalt 2.28:1. Het label is daarom --color-ink. */
.knop--accent > .wp-block-button__link,
a.knop--accent {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: var(--shadow-2);
}
.knop--accent > .wp-block-button__link:hover,
a.knop--accent:hover {
  background: var(--accent-hover);
  transform: scale(1.02);
  box-shadow: var(--shadow-3);
}

.knop--lijn > .wp-block-button__link,
a.knop--lijn {
  background: transparent;
  /* R1 — 28% gaf een rand van 1,74:1. In de prijskaarten is die rand het
     enige dat er een knop van maakt, dus die moet 3:1 halen. Op 57% is het
     3,53:1. */
  border-color: color-mix(in srgb, var(--color-ink) 57%, transparent);
  color: var(--color-ink);
}
.knop--lijn > .wp-block-button__link:hover,
a.knop--lijn:hover {
  background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  border-color: var(--color-ink);
  transform: scale(1.02);
}

/* In de hero staat de lijnknop op perzik; daar leest een lichte pil beter. */
.hero .knop--lijn > .wp-block-button__link,
.hero a.knop--lijn {
  background: color-mix(in srgb, var(--color-white) 55%, transparent);
  border-color: color-mix(in srgb, var(--color-white) 85%, transparent);
}
.hero .knop--lijn > .wp-block-button__link:hover,
.hero a.knop--lijn:hover {
  background: color-mix(in srgb, var(--color-white) 78%, transparent);
  border-color: var(--color-white);
}

/* Tekstlink met eigen onderlijn — animeert op transform, niet op width.

   De onderlijn zit op ::before en niet op ::after. Reden: .knop--pijl zet
   zijn pijl op ::after, en een element heeft er daarvan maar één. Bij
   "tekstlink knop--pijl" vochten die twee regels om hetzelfde
   pseudo-element; de pijl won op specificiteit maar erfde de absolute
   positionering van de onderlijn, en hing daardoor als los teken ónder de
   link. Dat was de klacht bij "Bekijk de volledige werkwijze".

   De onderlijn staat absoluut en is dus geen flex-item; de volgorde
   before/after verandert visueel niets. */
.tekstlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}
/* CONTRASTFIX 7 — koraal haalt op wit 4,60:1 maar op zand 4,17:1. Op de
   zandsecties dus een tint donkerder: 80% koraal met aubergine, 5,04:1. */
.has-zand-background-color a,
.has-zand-background-color .tekstlink {
  color: color-mix(in srgb, var(--color-primary) 80%, var(--color-ink));
}
.tekstlink::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform var(--duur-lang) var(--ease-in-uit);
}
.tekstlink:hover::before,
.tekstlink:focus-visible::before { transform: scaleX(1); }

/* ==========================================================================
   Sectiekader
   ========================================================================== */

.sectie { position: relative; padding-block: var(--space-2xl); }
@media (min-width: 1024px) { .sectie { padding-block: var(--space-3xl); } }

/* Eén stap minder lucht, voor secties met weinig tekst. Bewust een
   modifier en geen wijziging van .sectie zelf: die maat geldt voor de
   acht andere secties en die zijn niet aan de orde. */
.sectie--compact { padding-block: var(--space-xl); }
@media (min-width: 1024px) { .sectie--compact { padding-block: var(--space-2xl); } }

/* Kicker: streepje plus label. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-primary);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 28px; height: 3px;
  flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.kicker--accent { color: var(--color-accent); }

/* ==========================================================================
   Navigatiebalk — twee toestanden
   ==========================================================================

   De balk staat op position: fixed en niet op sticky. Dat is nodig omdat
   hij bij het scrollen van 72px naar 60px krimpt: een sticky balk staat in
   de flow, dus die krimp zou de hele pagina 12px omhoog laten springen op
   het moment dat je scrolt. Fixed staat buiten de flow, dus krimpen kost
   geen herberekening van de layout.

   De ruimte die hij daardoor niet meer inneemt, geeft .wp-site-blocks terug
   als padding-top. De hero haalt die padding met een negatieve marge weer
   weg, zodat het perzikverloop tot de bovenkant van het scherm doorloopt en
   de balk er transparant overheen ligt.
   ========================================================================== */

:root {
  --balk-hoog: var(--wp--custom--balk--hoogte-mobiel);
  --balk-hoog-vast: var(--wp--custom--balk--hoogte-mobiel);
}
@media (min-width: 1024px) {
  :root {
    --balk-hoog: var(--wp--custom--balk--hoogte);
    /* De hoogte die de layout reserveert blijft die van de ruststand; de
       gescrolde toestand mag daar niet aan rekenen. */
    --balk-hoog-vast: var(--wp--custom--balk--hoogte);
  }
}

.wp-site-blocks { padding-top: var(--balk-hoog-vast); }

/* WordPress zet block-gap als margin-block-start op de directe kinderen van
   .wp-site-blocks en van main. Onze secties regelen hun eigen ruimte met
   padding-block, dus die marge levert alleen witte naden op — zichtbaar als
   een strook van 24px tussen de balk en de hero. */
.wp-site-blocks > *,
.wp-site-blocks main > * { margin-block-start: 0; }

.balk {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--color-ink);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--duur-lang) var(--ease-uit),
    border-color var(--duur-lang) var(--ease-uit),
    box-shadow var(--duur-lang) var(--ease-uit);
}

/* Ruststand boven een hero: geen eigen achtergrond, zodat het perzikverloop
   doorloopt tot bovenaan het scherm. Alleen op pagina's die een hero hebben
   — main.js zet dat vlaggetje. */
.balk[data-over-hero="ja"]:not([data-gescrold="ja"]) {
  background: transparent;
  border-bottom-color: transparent;
}

.balk[data-gescrold="ja"] {
  background: color-mix(in srgb, var(--color-ink) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-ink) 22%, transparent);
}
/* Geen doorschijnende balk waar de browser dat niet kan waarmaken. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .balk[data-gescrold="ja"] { background: var(--color-ink); }
}

.balk__binnen {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--balk-hoog);
  transition: min-height var(--duur-lang) var(--ease-uit);
}
@media (min-width: 1024px) {
  .balk[data-gescrold="ja"] .balk__binnen {
    min-height: var(--wp--custom--balk--hoogte-gescrold);
  }
}

/* --- Merk: variant D ---------------------------------------------------
   De lotus staat op een eigen vlak in zand. Het donkere hartblad haalt op
   de aubergine balk maar 1,65:1 en verdwijnt daar; op zand steekt het af.
   Zo hoeft het logo zelf niet aangepast te worden voor donkere vlakken. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  text-decoration: none;
}
.balk .merk { margin-right: var(--space-lg); }

/* Het vlak draagt het hele logo, niet alleen de lotus. In de ruststand is
   de balk transparant over de perzik hero; een wit woordmerk zou daar
   verdwijnen en een aubergine woordmerk verdwijnt in de gescrolde
   toestand. Op een eigen vlak speelt dat niet en blijft het merk overal
   identiek — dat is de hele reden voor variant D. */
.merk__vlak {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-md);
  background: var(--color-sand);
  transition: transform var(--duur-lang) var(--ease-uit);
}
.merk__lotus {
  display: block;
  height: 40px;
  width: auto;
  transition: transform 420ms var(--ease-pop);
}
.merk__woord {
  display: block;
  height: 22px;
  width: auto;
  transition: transform var(--duur-lang) var(--ease-uit);
}
.merk:hover .merk__lotus { transform: translateY(-3px) rotate(-6deg); }

/* Op mobiel: lotus 32px zoals gevraagd, woordmerk mee omlaag. */
@media (max-width: 1023px) {
  .merk__vlak { padding: 5px 7px; border-radius: var(--radius-sm); }
  .merk__lotus { height: 32px; }
  .merk__woord { height: 18px; }
}

/* In de gescrolde toestand krimpt het merk mee met de balk. Een transform,
   geen hoogtewijziging: dat is de enige manier waarop dit niet elke frame
   een herberekening van de layout kost. */
@media (min-width: 1024px) {
  .balk[data-gescrold="ja"] .merk__vlak {
    transform: scale(0.86);
    transform-origin: left center;
  }
}

/* Ruststand boven de hero: de balk is dan transparant en de ondergrond is
   licht perzik, dus wit leest daar niet. Aubergine haalt er 6,69:1; in de
   gescrolde toestand haalt wit op aubergine 12,08:1. */
.balk[data-over-hero="ja"]:not([data-gescrold="ja"]) .balk__link,
.balk[data-over-hero="ja"]:not([data-gescrold="ja"]) .menuknop {
  color: var(--color-ink);
}
.balk[data-over-hero="ja"]:not([data-gescrold="ja"]) .menuknop {
  border-color: color-mix(in srgb, var(--color-ink) 45%, transparent);
}

.balk__nav { display: none; }
@media (min-width: 1024px) {
  .balk__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
    margin-inline: auto;
  }
}

/* Zwaarder en iets ruimer gespatieerd dan lopende tekst; de waarden staan
   als token in theme.json onder settings.custom.navigatie. */
.balk__link {
  position: relative;
  padding: 0.45rem 0;
  color: var(--color-white);
  font-size: 0.875rem;
  font-weight: var(--wp--custom--navigatie--gewicht);
  letter-spacing: var(--wp--custom--navigatie--letterafstand);
  text-decoration: none;
  opacity: 0.82;
  transition: opacity var(--duur-basis) var(--ease-uit);
}
.balk__link:hover,
.balk__link:focus-visible { opacity: 1; }

/* Actief item: een streep van 2px in koraal. Bij hover schuift diezelfde
   streep van links in — één beweging, één richting, overal hetzelfde. */
.balk__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duur-lang) var(--ease-in-uit);
}
.balk__link:hover::after,
.balk__link:focus-visible::after { transform: scaleX(1); }
.balk__link[aria-current="page"] {
  opacity: 1;
  font-weight: var(--wp--custom--navigatie--gewicht);
}
.balk__link[aria-current="page"]::after { transform: scaleX(1); }

.balk__cta { display: none; }
@media (min-width: 1024px) { .balk__cta { display: inline-flex; margin-left: auto; } }

/* De CTA in koraal, met wit label. In de gescrolde toestand iets kleiner,
   zodat de balk compacter oogt zonder van kleur te wisselen. */
/* De balk is de enige gedocumenteerde uitzondering op de twee maten: de
   feedback vroeg expliciet om een compactere CTA in een balk van 60-72px. */
.balk {
  --knop-hoog: 40px;
  --knop-pad-y: 0.45rem;
  --knop-pad-x: 1.15rem;
}
.balk a.knop--primair {
  font-size: 0.875rem;
  box-shadow: none;
  transition:
    transform var(--duur-lang) var(--ease-uit),
    background-color var(--duur-basis) var(--ease-uit),
    box-shadow var(--duur-basis) var(--ease-uit);
}
.balk a.knop--primair:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
@media (min-width: 1024px) {
  .balk[data-gescrold="ja"] a.knop--primair { transform: scale(0.9); }
}

.menuknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-sand) 55%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--duur-basis) var(--ease-uit),
              border-color var(--duur-basis) var(--ease-uit);
}
.menuknop:hover {
  background: color-mix(in srgb, var(--color-white) 12%, transparent);
  border-color: var(--color-accent);
}
@media (min-width: 1024px) { .menuknop { display: none; } }

.menuknop__streep {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duur-lang) var(--ease-in-uit),
              opacity var(--duur-kort) var(--ease-uit);
}
.menuknop__streep + .menuknop__streep { margin-top: 5px; }
.menuknop[aria-expanded="true"] .menuknop__streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep:nth-child(2) { opacity: 0; }
.menuknop[aria-expanded="true"] .menuknop__streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobielmenu {
  display: grid;
  gap: var(--space-xs);
  padding-bottom: var(--space-md);
  background: color-mix(in srgb, var(--color-ink) 96%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  max-height: calc(100dvh - var(--balk-hoog));
  overflow-y: auto;
}
.mobielmenu[hidden] { display: none; }
.mobielmenu a:not(.knop) {
  padding: 0.7rem 0;
  color: var(--color-white);
  font-size: var(--size-lg);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-donker);
  transition: color var(--duur-basis) var(--ease-uit),
              padding-left var(--duur-basis) var(--ease-in-uit);
}
.mobielmenu a:not(.knop):hover { color: var(--color-accent); padding-left: 6px; }
.mobielmenu .knop { margin-top: var(--space-sm); align-self: start; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--hero-grond);
  overflow: hidden;
  isolation: isolate;
  /* .wp-site-blocks reserveert bovenaan de balkhoogte, omdat de balk zelf
     op fixed staat. De hero neemt die ruimte terug met een negatieve marge
     en geeft hem als padding weer aan zijn eigen inhoud. Netto-effect: het
     perzikverloop loopt door tot de bovenrand van het scherm en de balk
     ligt er transparant overheen, terwijl de kop er niet onder verdwijnt. */
  padding-block-start: var(--balk-hoog-vast);
}

/* Deze selector moet zwaarder wegen dan de block-gap-reset hierboven
   (.wp-site-blocks main > *), anders wint die reset en begint de hero
   alsnog onder de balk in plaats van eronderdoor. */
.wp-site-blocks main > .hero {
  margin-block-start: calc(var(--balk-hoog-vast) * -1);
}

.hero__blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.hero__blob--a {
  top: -34%; left: -22%;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  animation: kuvela-drijf 22s ease-in-out infinite alternate;
}
.hero__blob--b {
  bottom: -26%; left: 24%;
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
  animation: kuvela-drijf 28s ease-in-out infinite alternate-reverse;
}

@keyframes kuvela-drijf {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -5%, 0) scale(1.08); }
}

/* Op smal scherm staat het beeld ONDER de tekst, van rand tot rand, en
   lost het onderaan op in de herogrond. De negatieve marge heft precies de
   root-padding van de sectie op — geen 100vw, want dat telt op een
   desktopbrowser de breedte van de scrollbalk mee en geeft dan overloop. */
.hero > .hero__beeld {
  position: relative;
  z-index: 1;
  /* De randloze breedte komt van de klasse alignfull op het element zelf.
     Dat is het mechanisme van WordPress: de constrained layout zet
     margin-left en -right op auto met !important, dus een eigen negatieve
     marge verliest daar altijd van. Met alignfull plus
     useRootPaddingAwareAlignments trekt WordPress de root-padding er zelf
     weer af. De block-gap moet wel apart uit. */
  margin-block: 0;
  aspect-ratio: 2150 / 1780;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

/* Onder 480px het beeldvlak begrenzen, zodat de kop en de knoppen boven de
   vouw blijven staan. */
@media (max-width: 480px) {
  .hero > .hero__beeld {
    aspect-ratio: auto;
    height: 40vh;
    max-height: 320px;
  }
}

@media (min-width: 900px) {
  .hero > .hero__beeld {
    position: absolute;
    inset: 0 0 0 auto;
    margin: 0;
    width: 52%;
    height: 100%;
    aspect-ratio: auto;
    /* Het beeld lost naar links op in transparantie, zodat de herogrond
       eronder doorloopt. Een gekleurde overlay zou hier een naad geven:
       die kleur kan de schuine gradient eronder nooit exact volgen. */
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.7) 26%, #000 42%);
    mask-image: linear-gradient(90deg,
      transparent 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.7) 26%, #000 42%);
  }
}

.hero__still,
.hero__doek {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 44%;
}
/* Op smal scherm wordt er veel meer weggesneden. De uitsnede schuift dan
   naar Vela's hoofd toe. Nagemeten op screenshot: 62/16, 70/20, 55/10 en
   66/8 naast elkaar gelegd; 70/20 houdt het hoofd volledig in beeld en
   zet de laptop links in het kader. */
@media (max-width: 899px) {
  .hero__still,
  .hero__doek { object-position: 70% 20%; }
}
.hero__doek { opacity: 0; transition: opacity var(--duur-lang) var(--ease-uit); }
.hero__doek[data-klaar="ja"] { opacity: 1; }

.hero__binnen {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl) var(--space-2xl);
}
@media (min-width: 900px) { .hero__binnen { padding-block: var(--space-xl); } }

.hero__tekst { max-width: 34rem; }
@media (min-width: 900px) { .hero__tekst { max-width: 37rem; } }

/* CONTRASTFIX 2 — koraal haalde op perzik 2,96:1 bij 13px. Om met koraal
   aan 5:1 te komen moet je naar 30% koraal, en dan is het visueel gewoon
   aubergine. De tekst wordt dus aubergine (6,69:1) en het streepje ervoor
   blijft koraal: daar geldt geen leesbaarheidseis, en het accent blijft. */
.hero .kicker { color: var(--color-ink); }
.hero .kicker::before { background: var(--color-primary); }

.hero__titel {
  max-width: 30rem;
  margin-bottom: var(--space-md);
}
/* CONTRASTFIX 1 — vol koraal haalde op perzik 2,55:1. Dit is 50px op
   gewicht 700 en telt dus als grote tekst, norm 3,5. Een mengsel van 65%
   koraal met aubergine haalt 3,54:1 en houdt de koraaltoon vast.

   Geen presetklasse in de markup: die schrijft WordPress met !important
   uit en dan is deze regel kansloos. Zie de uitleg in home-hero.php. */
.hero__titel .hero__accent {
  background-color: transparent;
  color: color-mix(in srgb, var(--color-primary) 65%, var(--color-ink));
}

.hero__intro {
  margin-bottom: var(--space-md);
  max-width: 33rem;
  /* 88% haalde 4,83:1 — genoeg voor WCAG, te weinig voor onze eigen norm
     van 5,0. Op 90% is het 5,10:1. */
  color: color-mix(in srgb, var(--color-ink) 90%, var(--color-white));
  font-size: var(--size-base);
  line-height: 1.6;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) 0.75rem;
  margin-bottom: var(--space-lg);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.95rem;
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  font-size: var(--size-xs);
  font-weight: 600;
  transition: transform var(--duur-basis) var(--ease-in-uit),
              box-shadow var(--duur-basis) var(--ease-uit),
              background-color var(--duur-basis) var(--ease-uit);
}
.chip:hover { transform: translateY(-2px); background: var(--color-white); box-shadow: var(--shadow-2); }
.chip__stip {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Op smal scherm staan de knoppen onder elkaar op volle breedte, en niet
   de een breed en de ander half. Geldt voor elke knoppenrij op de site,
   niet alleen de hero. */
@media (max-width: 560px) {
  .wp-block-buttons,
  .slot .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .wp-block-buttons > .wp-block-button,
  .wp-block-buttons > .wp-block-button > .wp-block-button__link,
  .wp-block-buttons > a.knop {
    width: 100%;
  }
}

.hero .wp-block-buttons { gap: var(--space-sm); }
.hero .wp-block-button__link { font-size: var(--size-sm); }

.hero__noot {
  margin-top: var(--space-md);
  max-width: 40ch;
  /* CONTRASTFIX 3 en 4 — 78% haalde 3,58:1 op de donkerste herostop en
     4,08:1 op de lichtste. Vol aubergine haalt 6,69:1. */
  color: var(--color-ink);
  font-size: var(--size-sm);
}

.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--size-xs);
}
.hero__hint svg { width: 15px; height: 15px; flex: none; }

/* ==========================================================================
   Probleemsectie
   ========================================================================== */

.probleem__raster { display: grid; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .probleem__raster {
    /* 5/7: vijf twaalfden voor de kop, zeven voor de tekst. */
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-2xl);
    /* Op de basislijn en niet op de bovenkant: de kop staat op 44px en de
       tekst op 17px, dus bovenkant-uitlijning geeft een zichtbare trap. */
    align-items: baseline;
  }
}

/* text-wrap: balance verdeelt de regels van de kop gelijkmatig, zodat er
   geen los woord ("klopt") als derde regel achterblijft. Browsers die het
   niet kennen breken gewoon zoals voorheen. */
.probleem__kop h2 { margin-block: 0; text-wrap: balance; }

.probleem__tekst > :first-child { margin-block-start: 0; }
.probleem__tekst p { color: var(--color-muted); }

/* Afsluiting van de sectie: een volledig kader in koraal in plaats van de
   losse streep links, met twee stappen ruimte erboven zodat het bij de
   tekst hoort maar er niet tegenaan plakt. */
.accent {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--color-primary) 38%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-ink);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.3;
}

/* ==========================================================================
   Drie zekerheden
   ========================================================================== */

.zekerheden { display: grid; gap: var(--space-md); }
@media (min-width: 768px) { .zekerheden { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.zeker {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform var(--duur-lang) var(--ease-in-uit),
              box-shadow var(--duur-lang) var(--ease-uit);
}
.zeker::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--kaartkleur, var(--color-primary));
}
.zeker--prijs     { --kaartkleur: var(--color-primary); }
.zeker--termijn   { --kaartkleur: var(--color-accent); }
.zeker--eigendom  { --kaartkleur: var(--color-peach); }

.zeker:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow-4); }

.zeker__badge {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: color-mix(in srgb, var(--kaartkleur) 18%, var(--color-white));
  color: color-mix(in srgb, var(--kaartkleur) 72%, var(--color-ink));
  transition: background-color var(--duur-lang) var(--ease-uit),
              color var(--duur-lang) var(--ease-uit),
              transform var(--duur-lang) var(--ease-pop);
}
.zeker__badge svg { width: 26px; height: 26px; }
.zeker:hover .zeker__badge { background: var(--kaartkleur); color: var(--color-ink); transform: scale(1.08); }
.zeker--prijs:hover .zeker__badge { color: var(--color-white); }

.zeker p { color: var(--color-muted); font-size: var(--size-sm); }

/* ==========================================================================
   Stappenplan
   ========================================================================== */

/* De <ol> houdt zijn semantiek — een schermlezer moet horen dat dit vier
   genummerde stappen zijn — maar niet zijn eigen nummering. Die tekende de
   browser als "1." "2." "3." "4." naast de munt waar hetzelfde cijfer al in
   staat. Dit is de bron uitzetten, niet het symptoom verbergen: er komt
   geen display: none aan te pas. */
.stappen {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
}
@media (min-width: 1024px) {
  .stappen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* De lijn loopt van munt naar munt, achter de munten door. */
  .stap:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 68px;
    right: calc(var(--space-md) * -1 - 12px);
    height: 2px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--color-primary) 45%, transparent),
      color-mix(in srgb, var(--color-accent) 60%, transparent));
    z-index: 0;
  }
}

.stap { position: relative; }
.stap__munt, .stap h3, .stap p { position: relative; z-index: 1; }

.stap__munt {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 40%, transparent);
  font-family: var(--font-heading);
  font-size: var(--size-lg);
  font-weight: 700;
  transition: transform var(--duur-lang) var(--ease-pop),
              box-shadow var(--duur-lang) var(--ease-uit);
}
.stap:hover .stap__munt {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 48%, transparent);
}

.stap p { color: var(--color-muted); font-size: var(--size-sm); }

/* ==========================================================================
   Prijsoverzicht — drie kaarten, één vergelijking
   ==========================================================================

   Hier stond een <table> in een container met overflow-x: auto. Gemeten
   overloop: 485px op 390, 221px op 768 en zelfs 9px op 1440. En omdat
   alleen overflow-x gezet was rekende overflow-y mee naar auto, wat de
   verticale scrollbalk van 1px verklaarde.

   Nu: drie kaarten, dezelfde opbouw op elke breedte. Vanaf 1024px lijnen
   ze rij voor rij uit met subgrid, zodat "Design" in alle drie de kaarten
   op dezelfde hoogte staat — anders is het geen vergelijking meer.

   Subgrid werkt in Chrome 117+, Firefox 71+ en Safari 16+. Daaronder
   vallen de kaarten terug op hun eigen hoogte: lelijker, volledig
   leesbaar, en nog steeds zonder scrollbalk.
   ========================================================================== */

.prijskop {
  align-items: baseline;
  margin-bottom: var(--space-lg);
}
.prijskop h2 { margin: 0; }
.prijskop p { margin: 0; }

.prijzen {
  display: grid;
  gap: var(--space-md);
}

.pakket {
  display: grid;
  gap: 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

@media (min-width: 1024px) {
  .prijzen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* De ouder bepaalt de rijen; de kaarten nemen ze over met subgrid. */
    grid-template-rows: repeat(var(--pakket-rijen, 7), auto);
    gap: var(--space-sm);
  }
  .pakket {
    grid-row: span var(--pakket-rijen, 7);
    grid-template-rows: subgrid;
  }
  /* De kenmerkenlijst is zelf ook een subgrid, zodat elk kenmerk één rij
     van de buitenste rooster pakt. Zo hoeft de <dl> niet op
     display: contents — dat sloopt bij een deel van de schermlezers de
     lijstsemantiek. */
  .pakket__lijst {
    grid-row: span calc(var(--pakket-rijen, 7) - 2);
    grid-template-rows: subgrid;
  }
}

.pakket--uitgelicht {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-white));
  box-shadow: var(--shadow-3);
}

/* --- Kop van de kaart --------------------------------------------------- */

.pakket__kop { padding-bottom: var(--space-md); }

.lint {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-xs);
  padding: 0.2rem 0.65rem;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pakket__naam {
  margin: 0 0 0.15rem;
  color: var(--color-muted);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pakket__prijs {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.pakket__prijs .vanaf {
  margin-right: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}
.pakket__omvang {
  margin: 0.3rem 0 0;
  color: var(--color-muted);
  font-size: var(--size-sm);
}

/* De pakketnaam in de uitgelichte kaart haalde in koraal 4,21:1 bij 13px.
   Een mengsel met aubergine brengt dat op 5,01:1. Het prijsbedrag is 32px
   op gewicht 700 en telt als grote tekst; dat blijft ongemoeid. */
.pakket--uitgelicht .pakket__naam {
  color: color-mix(in srgb, var(--color-primary) 81%, var(--color-ink));
}

/* --- Kenmerken ---------------------------------------------------------- */

.pakket__lijst {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.pakket__rij {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--hairline);
}

.pakket__label {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pakket__waarde {
  margin: 0;
  font-size: var(--size-sm);
  line-height: 1.45;
}

/* --- Knop --------------------------------------------------------------- */

.pakket__voet {
  display: grid;
  align-content: end;
  padding-top: var(--space-md);
}
/* Geen width: 100% — de knop is een rasteritem en rekt vanzelf op. */
.pakket__voet .knop { font-size: var(--size-sm); }

/* --- Voettekst van de sectie -------------------------------------------- */

.prijs__voet { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 768px) { .prijs__voet { grid-template-columns: 1fr auto; align-items: center; } }
.prijs__voet p { margin: 0; color: var(--color-muted); font-size: var(--size-sm); }

/* ==========================================================================
   Bewijs
   ========================================================================== */

.bewijs {
  position: relative;
  padding-block: var(--space-2xl);
  background:
    radial-gradient(72% 120% at 18% 20%, color-mix(in srgb, var(--color-primary) 45%, var(--color-ink)) 0%, transparent 62%),
    radial-gradient(60% 110% at 88% 84%, color-mix(in srgb, var(--color-primary) 62%, var(--color-ink)) 0%, transparent 66%),
    var(--color-ink);
  color: var(--color-sand);
  overflow: hidden;
}
@media (min-width: 1024px) { .bewijs { padding-block: var(--space-3xl); } }

.bewijs__gloed {
  position: absolute;
  width: 52vw; height: 52vw; max-width: 700px; max-height: 700px;
  top: -14%; right: -8%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  filter: blur(90px);
  pointer-events: none;
  animation: kuvela-drijf 26s ease-in-out infinite alternate;
}

.bewijs__raster { position: relative; z-index: 1; display: grid; gap: var(--space-xl); }
@media (min-width: 900px) {
  .bewijs__raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.84fr);
    gap: var(--space-2xl);
    align-items: center;
  }
}
.bewijs :where(h2, h3) { color: var(--color-sand); }
.bewijs p { color: var(--muted-op-donker); }
.bewijs__slot { color: var(--color-white); font-size: var(--size-lg); font-weight: 600; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }

.stat {
  padding: var(--space-md);
  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  border: 1px solid var(--hairline-donker);
  border-radius: var(--radius-md);
  transition: background-color var(--duur-lang) var(--ease-uit),
              transform var(--duur-lang) var(--ease-in-uit);
}
.stat:hover { background: color-mix(in srgb, var(--color-white) 14%, transparent); transform: translateY(-4px); }
.stat__cijfer {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 2.4vw + 1rem, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-peach);
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; color: var(--muted-op-donker); font-size: var(--size-sm); }

/* ==========================================================================
   Vergelijking
   ========================================================================== */

.vergelijk {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) { .vergelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cel {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-white);
  transition: background-color var(--duur-lang) var(--ease-uit),
              transform var(--duur-lang) var(--ease-in-uit);
}
.cel:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-white)); transform: translateY(-3px); }
.cel h3 { color: var(--color-primary); }
.cel p { color: var(--color-muted); font-size: var(--size-sm); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__raster { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) {
  .faq__raster {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .faq__kop { position: sticky; top: 96px; }
}

.faq__lijst { display: grid; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }

.faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  min-height: 48px;
  font-family: var(--font-heading);
  font-size: var(--size-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--duur-basis) var(--ease-uit);
}
.faq__vraag::-webkit-details-marker { display: none; }
.faq__vraag:hover { color: var(--color-primary); }

.faq__plus {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  transition: transform var(--duur-lang) var(--ease-in-uit);
}
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
}
.faq__plus::before { width: 16px; height: 2px; }
.faq__plus::after  { width: 2px; height: 16px; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }

.faq__antwoord { padding: 0 0 var(--space-md); color: var(--color-muted); font-size: var(--size-sm); }

/* ==========================================================================
   Slot
   ========================================================================== */

.slot { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .slot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.slotkaart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  transition: transform var(--duur-lang) var(--ease-in-uit),
              box-shadow var(--duur-lang) var(--ease-uit);
}
.slotkaart:hover { transform: translateY(-5px); }
.slotkaart p { margin-bottom: var(--space-md); font-size: var(--size-sm); }
.slotkaart .wp-block-buttons { margin-top: auto; }

/* CONTRASTFIX 5 en 6 — het verloop liep door tot 88% koraal met wit, en
   daar haalde witte tekst nog maar 3,76:1. De lopende tekst stond
   bovendien op 86% wit gemengd met koraal: 3,84:1. Het verloop stopt nu
   bij vol koraal en de tekst is vol wit; de donkerste stop is 91% koraal
   met aubergine, waarop wit 5,01:1 haalt. */
.slotkaart--primair {
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary) 78%, var(--color-ink)) 0%,
    color-mix(in srgb, var(--color-primary) 91%, var(--color-ink)) 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-4);
}
.slotkaart--primair :where(h2, h3) { color: var(--color-white); }
.slotkaart--primair p { color: var(--color-white); }
.slotkaart--primair:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--color-ink) 20%, transparent),
    0 40px 70px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.slotkaart--primair > * { position: relative; z-index: 1; }

.slotkaart--wit {
  background: var(--color-white);
  border: 2px dashed var(--color-accent);
}
.slotkaart--wit p { color: var(--color-muted); }
.slotkaart--wit:hover { box-shadow: var(--shadow-3); }

/* Lotus als watermerk in de koraalkaart. */
.slotkaart__merk {
  position: absolute;
  right: -8%;
  bottom: -46%;
  width: 260px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Voettekst
   ========================================================================== */

.voet {
  position: relative;
  padding-block: var(--space-xl) var(--space-lg);
  background: linear-gradient(160deg,
    var(--color-ink) 0%,
    color-mix(in srgb, var(--color-ink) 82%, var(--color-primary)) 58%,
    var(--color-ink) 100%);
  color: var(--color-sand);
  overflow: hidden;
}
.voet__gloed {
  position: absolute;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  left: 50%; bottom: -46%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  filter: blur(100px);
  pointer-events: none;
}

.voet__raster { position: relative; z-index: 1; display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .voet__raster { grid-template-columns: 1.25fr 1fr 1fr; gap: var(--space-xl); } }

.voet .merk { font-size: 1.375rem; }
.voet .merk__lotus { width: 30px; }
.voet__baseline { margin-top: var(--space-md); color: var(--muted-op-donker); font-size: var(--size-sm); }

.voet h2, .voet h3, .voet h4 {
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.voet__lijst { display: grid; gap: 0.45rem; font-size: var(--size-sm); list-style: none; padding: 0; margin: 0; }
.voet__lijst li { margin: 0; }
.voet__lijst a, .voet__lijst span { color: var(--muted-op-donker); }
.voet__lijst a {
  display: inline-block;
  text-decoration: none;
  transition: color var(--duur-basis) var(--ease-uit),
              transform var(--duur-basis) var(--ease-in-uit);
}
.voet__lijst a:hover { color: var(--color-white); transform: translateX(3px); }

.voet__onder {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--hairline-donker);
  color: var(--muted-op-donker);
  font-size: var(--size-xs);
}
.voet__onder nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.voet__onder a { color: inherit; text-decoration: none; transition: color var(--duur-basis) var(--ease-uit); }
.voet__onder a:hover { color: var(--color-white); }

/* ==========================================================================
   Beweging: onthullen bij binnenscrollen (assets/js/main.js)
   ========================================================================== */

.kuvela-fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duur-lang) var(--ease-uit),
              transform 320ms var(--ease-in-uit);
  transition-delay: var(--fade-vertraging, 0ms);
}
.kuvela-fade-in.is-zichtbaar { opacity: 1; transform: none; }

.kuvela-fade-in--pop { transform: translateY(16px) scale(0.96); transition-timing-function: var(--ease-pop); }
.kuvela-fade-in--pop.is-zichtbaar { transform: none; }

/* ==========================================================================
   Verminderde beweging — verplicht (CLAUDE.md sectie 7)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kuvela-fade-in { opacity: 1; transform: none; }
  /* De balk wisselt nog wel van kleur, maar krimpt niet meer. */
  .balk[data-gescrold="ja"] .balk__binnen { min-height: var(--balk-hoog); }
  .balk[data-gescrold="ja"] .merk__vlak,
  .balk[data-gescrold="ja"] .merk__woord,
  .balk[data-gescrold="ja"] a.knop--primair { transform: none; }
  .hero__blob, .bewijs__gloed { animation: none; }
}