/* Timmermans Web Development · de site. Ontstaan uit de ontwerprondes (docs/vernieuwing.md): look "Groen vlak, in
   beweging" (ronde 5, go 27-09-2026). Alles uit het logo (gemeten 27-09-2026):
   - kleuren: groen #18d26e en inkt; vorm: twee puntsymmetrische balken, 45°-snede, een halve hoogte verschoven;
   - letter: Open Sans (woordmerk = Open Sans SemiBold 600).
   Contrast (WCAG 2.2): groen op wit 2,0:1 → groen nooit als tekst op licht; zwart op groen en groen op zwart 10,5:1.
   Beweging: alleen transform en opacity (web.dev); niets beweegt vanzelf langer dan 5 s (WCAG 2.2.2); alles stil bij
   prefers-reduced-motion (WCAG 2.3.3). */
@font-face { font-family: "Open Sans"; src: url("/fonts/open-sans.woff2") format("woff2"); font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; }
/* Terugvalletter met de maten van Open Sans, zodat de tekst niet verspringt als het lettertype binnenkomt (CLS).
   Uitgerekend uit de fontbestanden (hhea en de breedte van Nederlandse tekst, Open Sans ten opzichte van Arial). */
@font-face { font-family: "Open Sans terugval"; font-weight: 300 700; src: local("Arial"), local("Liberation Sans"); size-adjust: 104.98%; ascent-override: 101.81%; descent-override: 27.91%; line-gap-override: 0%; }
/* De koppen (800, smal): Arial Bold op de breedte van Open Sans 800 bij 78% (88,5%, gemeten op de kop van de
   homepage). Zonder deze versprong de kop op een trage verbinding naar minder regels (live CLS 0,137). */
@font-face { font-family: "Open Sans terugval"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 88.5%; ascent-override: 120.77%; descent-override: 33.1%; line-gap-override: 0%; }

:root {
  --groen: #18d26e;
  --sans: "Open Sans", "Open Sans terugval", system-ui, sans-serif;
  --breed: 76rem;
  --snede: 1.25rem;      /* de 45°-snede op kaarten en knoppen */
}
.thema-licht { --bg: #fff; --vlak: #f3f4f2; --inkt: #000; --tekst: #0a0a0a; --zacht: #5b5f66; --op-inkt: #fff; --lijn: rgb(0 0 0 / .12); color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; } /* vaste kop dekt ankers en focus niet af (WCAG 2.4.11) */
body { margin: 0; background: var(--bg); color: var(--tekst); font: 400 1.0625rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--groen); text-decoration-thickness: 3px; }
/* focus: inkt + groene rand, haalt 3:1 op elke achtergrond (WCAG 1.4.11) */
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; box-shadow: 0 0 0 6px var(--groen); }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--groen); color: #000; padding: .6rem 1rem; z-index: 10; }
.skip:focus { top: 1rem; }

/* ---- het logo in HTML/SVG */
.merk__groen { fill: var(--groen); }
.merk__inkt { fill: var(--inkt); }
.logo { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.logo__merk { height: 2.4rem; width: auto; }
.logo__woord { display: grid; font-weight: 600; line-height: 1.05; font-size: .98rem; }
.logo__woord span:first-child { padding-bottom: .22em; border-bottom: .16em solid var(--groen); margin-bottom: .2em; } /* de lijn over de volle breedte, zoals in het logo */
.logo--groot .logo__merk { height: 3.6rem; }
.logo--groot .logo__woord { font-size: 1.45rem; }

/* ---- knoppen: de 45°-snede rechtsonder (inktbalk). De vorm zit op ::before, zodat de focusring niet wordt afgeknipt. */
.knop { position: relative; isolation: isolate; display: inline-block; color: #000; text-decoration: none; font-family: inherit; line-height: inherit; cursor: pointer; font-weight: 700; padding: .9rem 1.6rem .9rem 1.3rem; background: none; border: 0; font-size: 1rem; }
.knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--snede)), calc(100% - var(--snede)) 100%, 0 100%); transition: clip-path .2s ease; }
.knop:hover { text-decoration: none; }
.knop:hover::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - .35rem), calc(100% - .35rem) 100%, 0 100%); }
.knop--lijn { color: var(--tekst); }
.knop--lijn::before { background: transparent; box-shadow: inset 0 0 0 2px var(--inkt); clip-path: none; }
.knop--lijn:hover::before { background: var(--inkt); clip-path: none; }
.knop--lijn:hover { color: var(--op-inkt); }
.knop--klein { padding: .5rem 1.1rem .5rem .9rem; --snede: .7rem; font-size: .95rem; }
.knop[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- vaste kop (NN/g, Sticky Headers, 2021: laag, dekkend, hoog contrast, geen animatie) */
.kopbalk { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--lijn); }

/* ---- navigatie */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--breed); margin: 0 auto; padding: .75rem 1.5rem; }
.nav__lijst { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; font-weight: 600; font-size: .95rem; }
.nav__lijst a:not(.knop) { text-decoration: none; }
.nav__lijst a:not(.knop):hover { box-shadow: inset 0 -3px 0 var(--groen); }
@media (max-width: 40rem) { .logo__woord { display: none; } .nav__lijst { gap: 1rem; } .nav__lijst li:nth-child(3) { display: none; } }

/* ---- held: het beeldmerk groot, de balken schuiven op hun plek */
.held { overflow: clip; }
.held__raam { max-width: var(--breed); margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) 1.5rem clamp(3rem, 8vw, 7rem); display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem; align-items: center; }
.kicker { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 1.4rem; display: flex; align-items: center; gap: .8rem; }
.kicker::before { content: ""; width: 2.5rem; height: .3rem; background: var(--groen); }
.held__kop { font-weight: 800; font-stretch: 78%; font-size: clamp(3rem, 7.8vw, 6.6rem); line-height: .93; letter-spacing: -.015em; margin: 0; text-transform: none; }
.held__lead { font-size: clamp(1.1rem, 1.5vw, 1.28rem); max-width: 33rem; margin: 1.9rem 0 0; color: var(--zacht); text-wrap: pretty; }
.held__acties { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.3rem 0 0; }
.held__merk { justify-self: center; width: 100%; max-width: 26rem; }
.held__beeld { width: 100%; height: auto; overflow: visible; }
/* telefoon: het merk staat al in de navigatie; twee keer vlak onder elkaar is dubbel */
@media (max-width: 52rem) { .held__raam { grid-template-columns: 1fr; } .held__merk { display: none; } }
.held__beeld polygon { transform-box: fill-box; will-change: transform; }
.held__beeld .merk__groen { animation: van-boven 1s cubic-bezier(.2,.8,.1,1) both; transform: translateY(var(--uit, 0px)); }
.held__beeld .merk__inkt { animation: van-onder 1s cubic-bezier(.2,.8,.1,1) .12s both; transform: translateY(calc(var(--uit, 0px) * -1)); }
@keyframes van-boven { from { transform: translateY(-38%); opacity: 0; } }
@keyframes van-onder { from { transform: translateY(38%); opacity: 0; } }

/* ---- secties */
section { max-width: var(--breed); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) 1.5rem; }
.sectie-kop { font-weight: 800; font-stretch: 82%; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.01em; margin: 0 0 2.75rem; }
.sectie-kop::before { content: ""; display: block; width: 3rem; height: .3rem; background: var(--groen); margin-bottom: 1.2rem; }

/* kaarten: afwisselend de snede van de groene balk (linksboven) en van de inktbalk (rechtsonder) */
.snede-lb { clip-path: polygon(var(--snede) 0, 100% 0, 100% 100%, 0 100%, 0 var(--snede)); }
.snede-ro { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--snede)), calc(100% - var(--snede)) 100%, 0 100%); }

.beloftes__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.belofte { --snede: 2rem; background: var(--vlak); padding: 2rem 1.75rem 1.9rem; clip-path: polygon(var(--snede) 0, 100% 0, 100% 100%, 0 100%, 0 var(--snede)); transition: clip-path .25s ease; }
.belofte:nth-child(even) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--snede)), calc(100% - var(--snede)) 100%, 0 100%); }
.belofte__nr { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; background: var(--groen); color: #000; font-weight: 800; font-size: .85rem;
  clip-path: polygon(0 35%, 35% 0, 100% 0, 100% 100%, 0 100%); }
.belofte__titel { font-weight: 800; font-stretch: 85%; font-size: 1.45rem; margin: 1.1rem 0 .45rem; }
.belofte p { margin: 0; color: var(--zacht); }

.case { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 60rem) { .case { grid-template-columns: 1fr; } }
.case__beelden { position: relative; padding: 0 1rem 3rem 0; }
.case__beelden::before { /* groene balk achter het beeld, een halve stap verschoven, zoals in het merk */
  content: ""; position: absolute; left: -1.25rem; top: -1.25rem; width: 38%; height: 70%; background: var(--groen); clip-path: polygon(0 3.5rem, 3.5rem 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.case__beelden { isolation: isolate; }
.case figure { margin: 0; }
.case__desktop img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), calc(100% - 2.5rem) 100%, 0 100%); }
.case__mobiel { position: absolute; right: 0; bottom: 0; width: 26%; }
.case__mobiel img { border: 5px solid var(--inkt); border-radius: 16px; background: var(--inkt); }
.case__soort { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.case__naam { font-weight: 800; font-stretch: 82%; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; margin: .5rem 0 1rem; }
.case__tekst > p { color: var(--zacht); }
.case__tekst > p.case__soort { color: var(--tekst); }
.case__scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.75rem 0 .5rem; }
.score { background: var(--vlak); padding: .8rem .9rem .9rem; border-top: .3rem solid var(--groen); }
.score dt { font-size: .78rem; color: var(--zacht); }
.score dd { margin: .1rem 0 0; font-weight: 800; font-stretch: 80%; font-size: 2.2rem; line-height: 1.1; }
.case__bron { font-size: .8rem; }
.case__feiten { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .5rem; }
.case__feiten li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; padding-top: .5rem; border-top: 1px solid var(--lijn); color: var(--zacht); }
.case__feiten strong { color: var(--tekst); font-weight: 800; font-stretch: 80%; font-size: 1.35rem; white-space: nowrap; }
.link-pijl { font-weight: 700; }
.link-pijl::after { content: " →"; }

/* werkwijze: een trap, elke stap een halve stap lager, zoals de verschoven balken */
.werkwijze__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: stap; }
@media (max-width: 60rem) { .werkwijze__lijst { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .werkwijze__lijst { grid-template-columns: 1fr; } }
.stap { counter-increment: stap; position: relative; padding: 1.5rem 1.4rem 1.6rem; background: var(--vlak); border-top: .3rem solid var(--inkt); }
.stap:last-child { background: var(--groen); color: #000; border-top-color: #000; }
.stap:last-child p { color: #000; }
@media (min-width: 60.01rem) { .stap:nth-child(2) { margin-top: 2rem; } .stap:nth-child(3) { margin-top: 4rem; } .stap:nth-child(4) { margin-top: 6rem; } }
.stap::before { content: counter(stap, decimal-leading-zero); font-weight: 800; font-stretch: 80%; font-size: 2.4rem; line-height: 1; }
.stap__titel { font-weight: 800; font-size: 1.15rem; margin: .8rem 0 .35rem; }
.stap p { margin: 0; color: var(--zacht); }

.prijzen__intro { margin: -1.6rem 0 2.75rem; color: var(--zacht); }
.pakketten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; }
.pakket { --snede: 2.25rem; position: relative; background: var(--vlak); padding: 2rem 1.75rem; display: flex; flex-direction: column;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--snede)), calc(100% - var(--snede)) 100%, 0 100%); }
.pakket--uitgelicht { background: var(--inkt); color: var(--op-inkt); padding-top: 3.25rem; clip-path: polygon(var(--snede) 0, 100% 0, 100% 100%, 0 100%, 0 var(--snede)); }
.pakket--uitgelicht::before { content: ""; position: absolute; left: 0; top: 0; width: 4.5rem; height: 4.5rem; background: var(--groen); clip-path: polygon(0 var(--snede), var(--snede) 0, 100% 0, 0 100%); }
.pakket--uitgelicht .pakket__excl, .pakket--uitgelicht .pakket__voor { color: var(--op-inkt); opacity: .75; }
.pakket__naam { margin: 0; font-weight: 700; font-size: 1.1rem; }
.pakket__prijs { font-weight: 800; font-stretch: 78%; font-size: 3.4rem; line-height: 1; margin: 1rem 0 0; }
.pakket__vanaf { font-weight: 400; font-stretch: 100%; font-size: 1rem; }
.pakket__excl { font-size: .8rem; color: var(--zacht); margin: .4rem 0 1rem; }
.pakket__voor { color: var(--zacht); margin: 0 0 1.2rem; }
.pakket__lijst { margin: auto 0 0; padding: 1.1rem 0 0; list-style: none; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); }
.pakket__lijst li { padding: .3rem 0 .3rem 1.4rem; position: relative; }
.pakket__lijst li::before { content: ""; position: absolute; left: 0; top: .78rem; width: .6rem; height: .6rem; background: var(--groen); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 100%); }
.extra { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 2rem; }
.extra__item { display: grid; padding-top: .9rem; border-top: .2rem solid var(--inkt); }
.extra__naam { font-weight: 700; }
.extra__prijs { font-weight: 800; }
.extra__uitleg { color: var(--zacht); font-size: .95rem; }
.prijzen__noot { color: var(--zacht); font-size: .95rem; margin-top: 1.5rem; }

/* calculator: een inktvlak met de groene balk */
.calc { --snede: 3rem; margin-top: 3rem; background: var(--inkt); color: var(--op-inkt); padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem;
  clip-path: polygon(var(--snede) 0, 100% 0, 100% calc(100% - var(--snede)), calc(100% - var(--snede)) 100%, 0 100%, 0 var(--snede)); }
@media (max-width: 52rem) { .calc { grid-template-columns: 1fr; } }
.calc__kop { grid-column: 1 / -1; margin: 0; font-weight: 800; font-stretch: 80%; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; }
.calc__kop::after { content: ""; display: block; width: 3rem; height: .3rem; background: var(--groen); margin-top: .9rem; }
.calc__groep { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; align-content: start; }
.calc legend, .calc__groep > label { font-weight: 700; margin-bottom: .2rem; padding: 0; }
.calc__keuze { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border: 2px solid color-mix(in srgb, var(--op-inkt) 25%, transparent); cursor: pointer; }
.calc__keuze:has(input:checked) { border-color: var(--groen); }
.calc input[type="radio"], .calc input[type="checkbox"] { accent-color: var(--groen); width: 1.1rem; height: 1.1rem; }
.calc__stapper { display: inline-flex; border: 2px solid color-mix(in srgb, var(--op-inkt) 35%, transparent); width: max-content; }
.calc__stapper button { font: inherit; font-size: 1.3rem; font-weight: 700; width: 3rem; background: transparent; color: inherit; border: 0; cursor: pointer; }
.calc__stapper button:hover { background: var(--groen); color: #000; }
.calc__stapper input { width: 3.5rem; text-align: center; font: inherit; font-weight: 700; color: inherit; background: transparent; border: 0; border-inline: 2px solid color-mix(in srgb, var(--op-inkt) 35%, transparent); -moz-appearance: textfield; }
.calc__stapper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc__vink { display: flex; gap: .7rem; align-items: center; align-self: start; }
.calc__uitkomst { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--op-inkt) 25%, transparent); }
.calc__bedrag { display: grid; }
.calc__label { font-size: .85rem; opacity: .75; }
.calc__bedrag [data-eenmalig], .calc__bedrag [data-maand] { font-weight: 800; font-stretch: 78%; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; }
.calc__bedrag [data-eenmalig] { color: var(--groen); }
.calc__noot { grid-column: 1 / -1; margin: 0; font-size: .85rem; opacity: .75; }

/* over: het portret in de vorm van de inktbalk, met de groene balk erachter (het merk) */
.over { display: grid; grid-template-columns: minmax(0, 23rem) 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (max-width: 48rem) { .over { grid-template-columns: 1fr; } }
.over__foto { margin: 0; position: relative; isolation: isolate; padding: 2.5rem 0 0 2.5rem; }
.over__foto::before { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 72%; background: var(--groen); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%); z-index: -1; }
.over__foto img { clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.over__tekst p { max-width: 36rem; font-size: 1.15rem; color: var(--zacht); }

/* contact: omgekeerd vlak */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); background: var(--inkt); color: var(--op-inkt); max-width: none;
  padding-inline: max(1.5rem, calc((100% - var(--breed)) / 2 + 1.5rem)); }
@media (max-width: 52rem) { .contact { grid-template-columns: 1fr; } }
.contact .sectie-kop { color: var(--op-inkt); }
.contact__intro p { opacity: .8; }
.contact__direct { opacity: 1 !important; font-weight: 700; line-height: 1.9; }
.contact a:focus-visible, .contact input:focus-visible, .contact textarea:focus-visible, .contact .knop:focus-visible { outline-color: var(--op-inkt); }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 36rem) { .formulier { grid-template-columns: 1fr; } }
.formulier__veld { display: grid; gap: .35rem; margin: 0 0 1rem; }
.formulier__veld--breed, .formulier__actie { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .95rem; }
.optioneel { font-weight: 400; opacity: .75; }
input, textarea { font: inherit; color: var(--tekst); background: var(--bg); border: 2px solid transparent; padding: .7rem .8rem; border-radius: 0; }
input:focus-visible, textarea:focus-visible { border-color: var(--groen); }
.formulier__noot { display: block; margin-top: .6rem; font-size: .8rem; opacity: .75; }

.voet { max-width: var(--breed); margin: 0 auto; padding: 3.5rem 1.5rem 4rem; display: grid; grid-template-columns: auto 1fr; gap: 2rem 4rem; align-items: start; font-size: .92rem; color: var(--zacht); }
@media (max-width: 48rem) { .voet { grid-template-columns: 1fr; } }
.voet .logo { color: var(--tekst); }
.voet__gegevens { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 2rem; }
.voet__gegevens p { margin: 0; }
.voet__klein { grid-column: 1 / -1; font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .held__beeld .merk__groen, .held__beeld .merk__inkt { animation: none; transform: none; }
  .knop::before, .belofte { transition: none; }
}

/* ---- look "Groen vlak": uitgesproken. De opening is één groen vlak; het merk daarop in wit en zwart (groen valt weg
   op groen). Zwart op groen 10,5:1. De onderrand van het vlak heeft de 45°-snede van de inktbalk. */
.look-vlak .kopbalk { background: var(--groen); border-bottom-color: transparent; color: #000; }
.look-vlak .kopbalk .merk__groen, .look-vlak .held .merk__groen { fill: #fff; }
.look-vlak .kopbalk .merk__inkt, .look-vlak .held .merk__inkt { fill: #000; }
.look-vlak .kopbalk .logo__woord span:first-child { border-bottom-color: #fff; }
.look-vlak .kopbalk .knop::before, .look-vlak .held .knop:not(.knop--lijn)::before { background: #000; }
.look-vlak .kopbalk .knop, .look-vlak .held .knop:not(.knop--lijn) { color: #fff; }
.look-vlak .kopbalk .nav__lijst a:not(.knop):hover { box-shadow: inset 0 -3px 0 #000; }
.look-vlak .held { --tekst: #000; --zacht: #000; --inkt: #000; --op-inkt: var(--groen); background: var(--groen); color: #000;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7rem 100%, 0 calc(100% - 7rem)); }
.look-vlak .held .kicker::before { background: #000; }
.look-vlak .held__lead { color: #000; }
.look-vlak .held .knop--lijn { color: #000; }
.look-vlak .held .knop--lijn:hover { color: var(--groen); }
.look-vlak .held :focus-visible { outline-color: #000; box-shadow: 0 0 0 6px #fff; }
/* donkere band voor de beloftes, over de volle breedte */
.look-vlak .beloftes { --bg: #000; --vlak: #151615; --tekst: #f4f5f4; --zacht: #a1a6ae; --inkt: #fff; --op-inkt: #000;
  background: #000; color: var(--tekst); box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); margin-top: 4rem; }
/* de snede onderaan het groene vlak mag nooit inhoud raken: ruimte eronder, en kleiner op een telefoon */
.look-vlak .held__raam { padding-bottom: calc(clamp(3rem, 8vw, 7rem) + 5rem); }
@media (max-width: 52rem) { .look-vlak .held { clip-path: polygon(0 0, 100% 0, 100% 100%, 3.5rem 100%, 0 calc(100% - 3.5rem)); } .look-vlak .held__raam { padding-bottom: 5.5rem; } }

/* nadruk: één woord in de kop op een balk met de 45°-snede, die er bij het laden in veegt */
.nadruk { position: relative; z-index: 0; display: inline-block; padding: 0 .3em 0 .1em; margin: 0 -.04em 0 -.02em; color: #000; } /* rechts ruimte voor de snede */
.nadruk::before { content: ""; position: absolute; z-index: -1; inset: .1em 0 0; background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .3em), calc(100% - .3em) 100%, 0 100%);
  transform-origin: left; animation: veeg .55s .3s cubic-bezier(.2,.8,.1,1) both; }
.look-vlak .held .nadruk { color: var(--groen); }            /* groen op zwart: 10,5:1 */
.look-vlak .held .nadruk::before { background: #000; }
@keyframes veeg { from { transform: scaleX(0); } }

/* ---- look "Groen vlak, in beweging" */
.look-beweging, .look-beweging body { overflow-x: clip; }    /* de volle-breedtebanden hieronder mogen niet laten scrollen */
/* het vlak zit op een eigen laag, zodat het merk eruit kan steken */
.look-beweging .held { clip-path: none; background: none; overflow: visible; position: relative; isolation: isolate; }
.look-beweging .held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7rem), calc(100% - 7rem) 100%, 0 100%); }
.look-beweging .held__raam { padding-bottom: clamp(4rem, 9vw, 8rem); }
.look-beweging .held__merk { max-width: 30rem; margin-bottom: -9rem; position: relative; z-index: 1; }
@media (max-width: 52rem) { .look-beweging .held::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), calc(100% - 3.5rem) 100%, 0 100%); } }

/* banden over de volle breedte met de sneden van het merk: linksboven (groene balk) en rechtsonder (inktbalk) */
.look-beweging .beloftes, .look-beweging .werkwijze { position: relative; isolation: isolate; box-shadow: none; clip-path: none; background: none;
  padding-block: clamp(6rem, 12vw, 9rem); }
.look-beweging .beloftes::after, .look-beweging .werkwijze::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  clip-path: polygon(0 5rem, 5rem 0, 100% 0, 100% calc(100% - 5rem), calc(100% - 5rem) 100%, 0 100%); }
.look-beweging .beloftes { margin-top: 7rem; }
.look-beweging .beloftes::after { background: #000; }
.look-beweging .werkwijze { --vlak: rgb(255 255 255 / .55); --zacht: #1f2a22; }
.look-beweging .werkwijze::after { background: var(--groen); }
.look-beweging .werkwijze .sectie-kop::before { background: #000; }
.look-beweging .stap:last-child { background: #000; color: #fff; }
.look-beweging .stap:last-child p { color: #fff; }
.look-beweging .contact { clip-path: polygon(0 5rem, 5rem 0, 100% 0, 100% 100%, 0 100%); padding-top: clamp(6rem, 12vw, 9rem); }

/* kaarten schuiven schuin omhoog bij hover */
.look-beweging .belofte, .look-beweging .pakket { transition: transform .25s cubic-bezier(.2,.8,.1,1); }
@media (hover: hover) { .look-beweging .belofte:hover, .look-beweging .pakket:hover { transform: translate(-4px, -4px); } }
/* knop: pijl die meebeweegt */
.look-beweging .knop:not(.knop--klein)::after { content: "→"; display: inline-block; margin-left: .55rem; transition: transform .2s ease; }
.look-beweging .knop:hover::after { transform: translateX(4px); }

/* binnenkomen langs de diagonaal (logo.js zet .verschijn en daarna .is-zichtbaar); zonder JS staat alles er gewoon */
.js .verschijn { opacity: 0; transform: translate(-22px, 22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.1,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .verschijn.is-zichtbaar { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .nadruk::before { animation: none; }
  .js .verschijn { opacity: 1; transform: none; transition: none; }
  .look-beweging .held__beeld .merk__groen, .look-beweging .held__beeld .merk__inkt { transform: none; }
  .look-beweging .belofte, .look-beweging .pakket, .look-beweging .knop::after { transition: none; }
}

/* ================================================================ de site: pagina's, formulier, extra's */

.logo__woord > span { display: block; }
.nav__lijst a[aria-current="page"]:not(.knop) { box-shadow: inset 0 -3px 0 #000; }

/* subpagina: het groene vlak, lager */
.held--pagina .held__raam { grid-template-columns: 1fr; padding-top: clamp(2rem, 5vw, 4rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); }
.held--pagina .held__kop { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.held--pagina .held__lead { max-width: 42rem; }

.sectie-kop--los { margin-top: 4.5rem; }
.pakket__omvang { display: block; font-weight: 400; font-size: .95rem; opacity: .75; }
.calc__omvang { opacity: .75; font-size: .9rem; margin-left: .3rem; }
.prijzen__meer, .case__links { margin-top: 2rem; }

/* case-pagina */
.werk--pagina { padding-top: clamp(3rem, 6vw, 5rem); }
.onderdelen__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.onderdelen__credits { color: var(--zacht); font-size: .9rem; margin-top: 2rem; }

/* veelgestelde vragen: <details>, werkt met toetsenbord en zonder JS */
.faq__lijst { display: grid; gap: .6rem; max-width: 48rem; }
.faq__item { background: var(--vlak); padding: 0 1.4rem; }
.faq__item summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 1.1rem 2rem 1.1rem 0; list-style: none; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 0; top: .9rem; font-size: 1.4rem; font-weight: 800; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { margin: 0 0 1.3rem; color: var(--zacht); max-width: 40rem; }

.doorgaan { text-align: left; }
.doorgaan p { max-width: 40rem; color: var(--zacht); }
.doorgaan .knop { margin: .4rem .6rem 0 0; }

/* lopende tekst (privacy) */
.proza { max-width: 46rem; }
.proza h2 { font-weight: 800; font-size: 1.4rem; margin: 2.5rem 0 .6rem; }
.proza h2:first-child { margin-top: 0; }
.proza p { color: var(--zacht); margin: 0 0 1rem; }

/* formulier: meldingen per veld (WCAG 3.3.1), status na versturen */
.formulier__pot { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.veld__fout { font-size: .9rem; font-weight: 700; color: #ff9f9f; min-height: 0; }  /* op zwart: 8,5:1 */
.veld__fout:empty { display: none; }
[aria-invalid="true"] { border-color: #ff9f9f; }
.formulier__altcha { grid-column: 1 / -1; min-height: 0; }
.formulier__altcha:not(:empty) { margin-bottom: 1rem; }
.formulier__status { grid-column: 1 / -1; margin: .8rem 0 0; font-weight: 700; }
.formulier__status:empty { display: none; }
.formulier__status[data-soort="klaar"] { color: var(--groen); }
.formulier__status[data-soort="fout"] { color: #ff9f9f; }
.formulier__noot { grid-column: 1 / -1; font-size: .85rem; opacity: .8; margin: .6rem 0 0; }
.contact .formulier__noot a { color: inherit; }
.knop[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* ALTCHA op het donkere vlak: eigen kleuren via de custom properties van de widget */
altcha-widget { --altcha-color-base: #151615; --altcha-color-base-content: #f4f5f4; --altcha-color-primary: var(--groen); --altcha-color-primary-content: #000; --altcha-border-color: rgb(255 255 255 / .35); --altcha-border-radius: 0; --altcha-max-width: 100%; }

.voet__gegevens a { color: inherit; }