/* Schakel Online · schakelonline.nl, helemaal opgebouwd vanuit het Studio-ontwerp "Vloeiend" (29 okt 2026, naar From Fauna).
   Crème pagina met een dun kader en labels in de hoeken, menu als ronde knop, grote dunne koppen als een zin,
   vlekken in de hero, kaarten als post-it, foto's in een organische vorm, dunne omlijnde knoppen in hoofdletters.
   Kleuren: ALLEEN het palet "Room / matcha", met transparantie of mengsels ervan. */

:root {
  --cta: #A5D5A7;     /* primary / hoofdkleur */
  --pbg: #FEF7E6;     /* background */
  --ink: #0E0E0E;     /* text */
  --accent: #ACD084;  /* accent en tint */
  --ctaink: var(--ink);
  --blend: #F0E9D8;   /* achtergrond min tekst: met mix-blend-mode difference wordt de hero-tekst op de room weer --ink */

  --gedempt: color-mix(in srgb, var(--ink) 72%, var(--pbg));
  --lijn: color-mix(in srgb, var(--ink) 14%, transparent);
  --hl: color-mix(in srgb, var(--accent) 45%, var(--ink));     /* accentwoord: donker mengsel van de accentkleur, leesbaar op room */
  --cijfer: color-mix(in srgb, var(--cta) 55%, var(--ink));    /* cijfers en stapnummers */
  --postit: color-mix(in srgb, var(--accent) 45%, var(--pbg)); /* omlijsting tekstvakken: notitie / post-it */

  --font: Manrope, Arial, sans-serif;
  --breed: 1120px;
  --smal: 760px;
  --rand: clamp(24px, 5vw, 72px);
  --kader: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- achtergrond (letterlijk uit de Studio: geen verloop, alleen bovenaan, 60% / 70% / korrel 0%) ---------- */
body{position:relative;isolation:isolate;background:#FEF7E6}
.site-bg{position:absolute;inset:0 0 auto;height:100svh;min-height:560px;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);z-index:-1;overflow:hidden;pointer-events:none}
.site-bg__layer{position:absolute;inset:0;opacity:0.60;filter:blur(39px)}
.site-bg__b{position:absolute;aspect-ratio:1;translate:-50% -50%;border-radius:50%;will-change:transform}
@media (prefers-reduced-motion:reduce){.site-bg__b{animation:none!important;transform:none!important;transition:none!important}}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; color: var(--ink); font: 300 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
b, strong { font-weight: 600; }
::selection { background: var(--cta); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wrap { width: min(var(--breed), 100% - 2 * var(--rand)); margin-inline: auto; }
.wrap.smal { width: min(var(--smal), 100% - 2 * var(--rand)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--pbg); padding: 10px 14px; border-radius: 99px; z-index: 100; }
.skip:focus { left: 12px; }
.sv-defs { position: absolute; width: 0; height: 0; }

h1, h2, h3 { font-family: var(--font); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-weight: 300; }
.hl { font-style: normal; color: var(--hl); }
.klein-label { display: inline-block; font-size: 13px; font-weight: 400; color: var(--gedempt); }
.klein-label::before { content: ""; display: inline-block; width: 18px; height: 1px; background: currentColor; opacity: .7; vertical-align: middle; margin-right: 9px; }

/* ---------- intro: cirkel die volloopt met de naam erin, daarna opent de pagina ---------- */
.sv-loader { display: none; }
.sv-intro .sv-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--pbg); transition: opacity .6s, visibility .6s; }
.sv-loader.weg { opacity: 0; visibility: hidden; }
.sv-ring { width: 180px; height: 180px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; position: relative; }
.sv-ring i { position: absolute; left: -10%; right: -10%; bottom: 0; height: 115%; background: color-mix(in srgb, var(--accent) 30%, var(--pbg)); border-radius: 45% 55% 0 0; animation: sv-fill 1.8s cubic-bezier(.6, 0, .2, 1) both; }
.sv-loader b { font: 300 15px var(--font); letter-spacing: .06em; margin-top: -118px; position: relative; }
@keyframes sv-fill { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- kader met labels in de hoeken (labels liggen boven het menu) ---------- */
.frame { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.frame::before { content: ""; position: absolute; inset: var(--kader); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.frame-labels a { position: fixed; z-index: 60; font-size: 11px; line-height: 1.4; padding: 3px 8px; background: var(--pbg); color: var(--gedempt); text-decoration: none; transition: color .3s; }
.frame-labels a:hover { color: var(--ink); }
.fr-t { top: 12px; left: 46px; background: linear-gradient(color-mix(in srgb, var(--accent) 35%, var(--pbg)), color-mix(in srgb, var(--accent) 35%, var(--pbg))) 0 0 / var(--sv-p, 0%) 100% no-repeat var(--pbg) !important; }
.fr-b { bottom: 12px; right: 46px; }
.fr-r { right: 12px; top: 46px; writing-mode: vertical-rl; padding: 8px 3px !important; }
.fr-l { left: 12px; bottom: 46px; writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 3px !important; }

/* ---------- menu: merknaam en een ronde knop met ≡ (onder het bovenste kaderlabel) ---------- */
.nav { position: fixed; top: calc(var(--kader) + 14px); left: var(--kader); right: var(--kader); z-index: 50; transition: transform .6s var(--ease); }
.nav.weg { transform: translateY(-180%); }
.nav-in { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 clamp(18px, 3vw, 36px); }
.nav.vast:not(.open) .nav-in { background: color-mix(in srgb, var(--pbg) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 300 17px/1 var(--font); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.logo svg { width: 32px; height: 20px; flex: none; }
.logo .spoor-vorm { fill: var(--cta); }
.logo .knopje { fill: var(--ink); }
.menu-knop { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-knop span, .menu-knop span::before, .menu-knop span::after { display: block; width: 15px; height: 1px; background: currentColor; position: relative; transition: transform .4s var(--ease); }
.menu-knop span::before, .menu-knop span::after { content: ""; position: absolute; left: 0; }
.menu-knop span::before { top: -5px; } .menu-knop span::after { top: 5px; }
.nav.open .menu-knop span { background: transparent; }
.nav.open .menu-knop span::before { transform: translateY(5px) rotate(45deg); }
.nav.open .menu-knop span::after { transform: translateY(-5px) rotate(-45deg); }
.nav-links { position: fixed; inset: var(--kader); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--pbg); font: 300 clamp(26px, 4vw, 46px)/1.25 var(--font); letter-spacing: -.02em; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s; overflow-y: auto; padding: 96px 20px 40px; }
.nav.open .nav-links { opacity: 1; visibility: visible; }
.nav-links > a { text-decoration: none; position: relative; }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--cijfer); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actie { margin-top: 28px; font-size: 16px; }

/* ---------- knoppen: dunne omlijnde pil in hoofdletters, pijl schuift bij hover op ---------- */
.knop { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 99px; background: transparent; color: var(--ink); border: 1px solid var(--ink); text-decoration: none; font: 500 12px/1.2 var(--font); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.knop:hover { background: var(--ink); color: var(--pbg); }
.knop .pijl { display: inline-block; letter-spacing: 0; transition: transform .25s; }
.knop:hover .pijl, .knop:focus-visible .pijl { transform: translateX(4px); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knoppen.midden { justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- hero: grote dunne kop in het midden, vlekken erachter, tekst kleurt om op de vlek ---------- */
.hero { position: relative; isolation: isolate; background: var(--pbg); min-height: 94svh; display: grid; align-content: center; padding: clamp(140px, 18vh, 190px) 0 clamp(70px, 9vw, 110px); text-align: center; overflow: hidden; }
.hero.klein { min-height: 78svh; }
.hero > :not(.deco) { position: relative; }
.hero h1, .hero-onder p, .hero > .wrap > .klein-label { mix-blend-mode: difference; color: var(--blend); }
.hero h1 .hl { color: inherit; }
.hero h1 { font-weight: 300; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(40px, 6.4vw, 100px); max-width: 15ch; margin: 18px auto 0; }
.hero.klein h1 { font-size: clamp(38px, 5.6vw, 84px); }
.regel { display: block; overflow: hidden; padding-bottom: .06em; }
.regel > span { display: inline-block; }
.hero-onder { margin-top: clamp(24px, 3vw, 40px); display: grid; justify-items: center; }
.hero-onder p { max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); margin: 0; }
.hero .knoppen { justify-content: center; }

.deco { position: absolute; inset: 0; z-index: 0; filter: url(#sv-goo); pointer-events: none; }
.deco i { position: absolute; display: block; background: var(--cta); border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; animation: faunablob 14s ease-in-out infinite alternate; }
.deco i:nth-child(1) { left: 20%; top: 8%; width: 24%; height: 56%; rotate: -12deg; }
.deco i:nth-child(2) { left: 47%; top: 34%; width: 30%; height: 58%; border-radius: 45% 55% 38% 62% / 58% 40% 60% 42%; animation-delay: -5s; }
.deco i:nth-child(3) { left: 26%; top: 68%; width: 56px; height: 56px; border-radius: 50%; animation: none; }
.deco .sv-drop { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; animation: none; rotate: none; }
.deco .sv-drop:nth-child(n+6) { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@keyframes faunablob { to { transform: translate(4%, -5%) scale(1.06); border-radius: 44% 56% 48% 52% / 60% 44% 56% 40%; } }

/* ---------- secties: klein label, grote dunne kop als een zin ---------- */
.sectie { padding-block: clamp(80px, 10vw, 140px); }
.sectie-kop { margin-bottom: clamp(36px, 5vw, 64px); }
.sectie-kop h2, .over h2, .contact h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.3; margin-top: 12px; }
.sectie-kop p { color: var(--gedempt); max-width: 56ch; margin: 18px 0 0; }
.zin { font: 300 clamp(26px, 3.4vw, 44px)/1.3 var(--font); letter-spacing: -.02em; margin: 0; }
.sectie h3 { font-size: clamp(20px, 1.8vw, 26px); }

/* cijfers, gescheiden door dunne lijnen */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats > div { padding: 8px 28px; }
.stats > div + div { border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.stats b { display: block; font: 300 clamp(40px, 4.4vw, 64px)/1.1 var(--font); color: var(--cijfer); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.stats span { font-size: 15px; color: var(--gedempt); }

/* stappen: dunne lijn erboven, nummer in de hoofdkleur */
.stappen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 32px; list-style: none; margin: 0; padding: 0; }
.stap { border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding-top: 16px; }
.stap b { display: block; font: 300 30px/1 var(--font); color: var(--cijfer); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.stap h3 { margin-bottom: 8px; }
.stap p { margin: 0; color: var(--gedempt); font-size: 16px; }

/* diensten in detail: tekst links, vinkjes op een post-it rechts */
.blok { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: clamp(40px, 5vw, 64px); }
.blok + .blok { border-top: 1px solid var(--lijn); }
.blok h3 { font-weight: 300; font-size: clamp(26px, 3vw, 40px); margin: 12px 0 16px; }
.blok > div > p { color: var(--gedempt); max-width: 44ch; margin: 0 0 24px; }
.blok .kaart { min-height: 0; }
.vinkjes { list-style: none; margin: 0 0 28px; padding: 0; }
.vinkjes li { position: relative; padding: 11px 0 11px 28px; border-bottom: 1px solid var(--lijn); }
.vinkjes li:last-child { border-bottom: 0; }
.vinkjes li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 6px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.prijsregel { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.prijsregel b { font: 300 clamp(32px, 3.2vw, 46px)/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prijsregel span { color: var(--gedempt); font-size: 15px; }

/* ---------- foto's: organische vorm ---------- */
.beeld { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--cta), var(--accent)); border-radius: 46% 54% 42% 58% / 55% 45%; }
.beeld img { width: 100%; height: 100%; object-fit: cover; }

/* tekst met foto ernaast: de foto staat rechts en schuift van rechts binnen, nooit over de tekst */
.over { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.over p { color: var(--gedempt); max-width: 46ch; }
.over .foto { aspect-ratio: 4 / 5; width: 100%; max-width: 460px; justify-self: end; }
.over .foto img { object-position: 50% 30%; }
.sectie:has(.over) { overflow-x: clip; }

/* galerij (portfolio): foto's in organische vorm met een onderschrift */
.galerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.project { text-decoration: none; display: block; }
.project .beeld { aspect-ratio: 4 / 3; }
.project .beeld img { object-position: top; }
.project .onder { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 15px; }
.project .onder span { color: var(--gedempt); }
.project p { margin: 6px 0 0; color: var(--gedempt); font-size: 15px; }

/* ---------- tekstvakken (kaarten, prijsblokken): notitie / post-it ---------- */
.kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.kaarten.twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaarten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaart, .pakket { position: relative; text-align: left; background: var(--postit); border: 0; border-radius: 2px 2px 18px; box-shadow: 0 12px 18px -10px color-mix(in srgb, var(--ink) 40%, transparent); rotate: -1.5deg; transition: translate .45s ease-out, box-shadow .45s, opacity .9s ease-out, transform .9s ease-out; }
.kaart:nth-child(2n), .pakket:nth-child(2n) { rotate: 1.2deg; }
.kaart::before, .pakket::before { content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; translate: -50%; rotate: -3deg; background: color-mix(in srgb, var(--pbg) 55%, transparent); }
.kaart { min-height: 220px; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; text-decoration: none; }
.kaart h3 { margin: 10px 0 12px; }
.kaart p { color: color-mix(in srgb, var(--ink) 80%, var(--postit)); margin: 0 0 16px; font-size: 16px; }
.kaart .klein-label { color: color-mix(in srgb, var(--ink) 70%, var(--postit)); }
.kaart .vinkjes { margin-bottom: 0; }
.kaart .vinkjes li { border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
.kaart > .pijl { font-size: 20px; transition: transform .25s; }
a.kaart:hover > .pijl { transform: translateX(4px); }
@media (hover: hover) {
  .kaart:hover, .pakket:hover { translate: 0 -7px; box-shadow: 0 20px 26px -12px color-mix(in srgb, var(--ink) 40%, transparent); }
}

/* rij met kaarten die horizontaal meeschuift met het scrollen (site.js, alleen grote schermen) */
.sv-row { display: flex !important; gap: 28px; transition: transform .15s linear; padding-block: 16px; }
.sv-row > .kaart { flex: 0 0 min(40%, 420px); min-height: 280px; transform: perspective(700px) rotateY(-6deg); }
.sv-row > .project { flex: 0 0 min(40%, 420px); }

/* pakketten */
.pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.pakket { padding: clamp(28px, 3.4vw, 40px); display: flex; flex-direction: column; }
.pakket.uitgelicht { background: color-mix(in srgb, var(--cta) 70%, var(--pbg)); }
.pakket h3 { font-size: clamp(30px, 3vw, 42px); font-weight: 300; }
.pakket > p { color: color-mix(in srgb, var(--ink) 80%, var(--postit)); margin: 10px 0 24px; }
.pakket .prijsregel b { font-size: clamp(38px, 3.4vw, 56px); }
.pakket .prijsregel span, .pakket .termijn { color: color-mix(in srgb, var(--ink) 75%, var(--postit)); }
.pakket .termijn { margin: -12px 0 24px; }
.pakket .vinkjes { flex: 1; }
.pakket .vinkjes li { border-color: color-mix(in srgb, var(--ink) 12%, transparent); }
.vlag { position: absolute; top: -12px; right: 22px; background: var(--ink); color: var(--pbg); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; border-radius: 99px; z-index: 1; }
.uitleg { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); margin-top: clamp(56px, 7vw, 88px); }
.uitleg h3 { margin-bottom: 14px; }
.uitleg p { color: var(--gedempt); margin: 0 0 16px; }
.noot { margin-top: 32px; color: var(--gedempt); font-size: 15px; }

/* ---------- gegevens en contact ---------- */
.gegevens { list-style: none; margin: 16px 0 0; padding: 0; }
.gegevens li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.gegevens li > span:first-child { color: var(--gedempt); }
.gegevens a { text-decoration: none; }
.gegevens a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact p { color: var(--gedempt); max-width: 48ch; }

.sectoren { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; margin: 0; padding: 0; }
.sectoren li { font-size: 15px; padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 99px; }

/* ---------- gekleurde actiebalk: opent als groeiende cirkel vanaf de onderkant ---------- */
.oproep { margin: clamp(40px, 6vw, 80px) var(--rand) var(--rand); background: var(--cta); color: var(--ctaink); text-align: center; transition: clip-path .15s linear; }
.oproep-in { padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 80px); display: grid; justify-items: center; gap: 22px; }
.oproep h2 { font-size: clamp(32px, 5vw, 72px); line-height: 1.15; max-width: 18ch; }
.oproep p { margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--ink) 82%, var(--cta)); }
.oproep .klein-label { color: color-mix(in srgb, var(--ink) 75%, var(--cta)); }
.oproep .knoppen { justify-content: center; margin-top: 6px; }

/* ---------- formulier: alleen een lijn onder de velden ---------- */
.form-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.veld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.veld.vol { grid-column: 1 / -1; }
.veld label { font-size: 14px; color: var(--gedempt); }
.veld input, .veld select, .veld textarea { font: 400 16px/1.4 var(--font); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 0; padding: 10px 0; width: 100%; }
.veld textarea { min-height: 110px; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.valstrik { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-voet { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.form-voet p { margin: 0; font-size: 14px; color: var(--gedempt); }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status.ok, .form-status.err, .form-status.busy { padding: 14px 16px; border: 1px solid var(--lijn); background: var(--postit); }
.form-status.err { border: 2px solid var(--ink); }
form.sent .velden { opacity: .5; pointer-events: none; }
.verwacht { position: sticky; top: 130px; }
.verwacht h3 { margin-bottom: 14px; }

/* ---------- juridische tekst ---------- */
.tekst { max-width: var(--smal); }
.tekst h2 { font-size: clamp(24px, 2.4vw, 32px); margin: 52px 0 12px; }
.tekst h3 { font-size: 20px; margin: 30px 0 10px; }
.tekst p, .tekst li { color: var(--gedempt); }
.tekst strong { color: var(--ink); }
.tekst a { text-underline-offset: 3px; }

/* ---------- voet ---------- */
.voet { padding: clamp(56px, 7vw, 96px) 0 calc(56px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.voet-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--lijn); }
.voet-raster p { color: var(--gedempt); max-width: 36ch; margin: 16px 0 0; }
.voet h4 { font: 400 13px/1.4 var(--font); color: var(--gedempt); margin: 0 0 14px; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.voet ul a { text-decoration: none; }
.voet ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet-onder { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; color: var(--gedempt); font-size: 14px; }

/* ---------- beweging: rustig in beeld (fade-rise), tekst kantelt licht mee met de scrollsnelheid ---------- */
.js .onthul { opacity: 0; transform: translateY(24px); transition: opacity .9s ease-out, transform .9s ease-out, translate .45s ease-out, box-shadow .45s; }
.js .onthul.zichtbaar { opacity: 1; transform: none; }
.js .hero .regel > span { transform: translateY(105%); transition: transform 1.4s var(--ease); }
.js .hero .regel:nth-child(2) > span { transition-delay: .1s; }
.js .hero .regel:nth-child(3) > span { transition-delay: .2s; }
.hero-in .hero .regel > span { transform: none !important; }
.sv-on .sectie > .wrap { transform: skewY(var(--sv-skew, 0deg)); }
.sv-on .over .foto { transition: translate .2s linear; }

@media (max-width: 900px) {
  :root { --kader: 10px; }
  .fr-r, .fr-b, .fr-l { display: none; }
  .fr-t { top: 1px; left: 22px; font-size: 10px; padding: 1px 6px !important; }
  .nav { top: calc(var(--kader) + 10px); }
  .nav-in { height: 58px; }
  .hero { min-height: 82svh; } .hero.klein { min-height: 0; }
  .hero h1, .hero-onder p, .hero > .wrap > .klein-label { mix-blend-mode: normal; color: var(--ink); }  /* op mobiel gewoon zwart: omkleuren op de vlek was slecht leesbaar (Koen, 29 okt) */
  .over, .contact, .blok, .pakketten, .uitleg, .form-raster, .kaarten, .kaarten.twee, .kaarten:has(> :nth-child(4):last-child), .galerij, .voet-raster { grid-template-columns: 1fr; }
  .over .foto { justify-self: center; max-width: 360px; }
  .kaarten, .pakketten { gap: 32px; }
  .kaart { min-height: 0; }
  .verwacht { position: static; }
  .stats { grid-template-columns: 1fr; }
  .stats > div { padding: 22px 0; }
  .stats > div + div { border-left: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .deco i:nth-child(1) { left: 6%; top: 10%; width: 46%; height: 42%; }
  .deco i:nth-child(2) { left: 44%; top: 40%; width: 52%; height: 44%; }
  .deco i:nth-child(3) { left: 18%; top: 72%; }
}
@media (max-width: 560px) {
  .logo { font-size: 15px; }
  .velden { grid-template-columns: 1fr; }
  .gegevens li { flex-direction: column; gap: 2px; }
  .knop { padding: 14px 20px; letter-spacing: .14em; }
  .oproep { margin-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .deco i, .sv-ring i { animation: none; }
  .js .onthul, .js .hero .regel > span { opacity: 1; transform: none; }
  .sv-loader { display: none !important; }
  * { transition-duration: .01ms !important; }
}