/* home.css - stijl van de vernieuwde homepage (1-op-1 uit Figma "Optima
   Administratie Brand Identiteit", frames Homepage Desktop 1440 / Tablet 768 /
   Mobiel 390). Tokens komen uit de Figma-collecties (naam in commentaar); de
   overige pagina's draaien nog op style.css tot ook zij zijn omgezet.

   LET OP - deze namen zijn met opzet NIET meegegaan in de rol-hernoeming van
   het klantportaal (2026-08-10, Primair/Secundair -> Actie/Gevaar/Merk). Op de
   openbare site is merk-rood WEL de hoofdactieknop, dus daar loopt de naam niet
   uit de pas met het gebruik. Deze lijst is bovendien een met de hand
   overgetypte kopie met vaste hexwaarden, geen export. De commentaarregels
   verwijzen wel naar de nieuwe Figma-tokennamen. */

:root{
  /* Kleur/Vlak */
  --vlak-pagina:#FAF8F5;        /* Kleur/Vlak/Pagina */
  --vlak-kaart:#FFFFFF;         /* Kleur/Vlak/Kaart */
  --vlak-primair:#C4181E;       /* Kleur/Vlak/Merk (was Vlak/Primair) */
  --vlak-primair-hover:#A7161B; /* Kleur/Vlak/Merk-hover */
  --vlak-primair-zacht:#F6E3E2; /* Kleur/Vlak/Merk-zacht */
  --vlak-omgekeerd:#2E2C29;     /* Kleur/Vlak/Omgekeerd */
  --vlak-secundair:#2C4066;     /* Kleur/Vlak/Secundair (Inktblauw, VOF-set) */
  /* Kleur/Tekst */
  --tekst-standaard:#2E2C29;    /* Kleur/Tekst/Standaard */
  --tekst-gedempt:#5C5955;      /* Kleur/Tekst/Gedempt */
  --tekst-placeholder:#7A7670;  /* Kleur/Tekst/Placeholder */
  --tekst-omgekeerd:#FFFFFF;    /* Kleur/Tekst/Omgekeerd */
  --tekst-op-omgekeerd:#FAF8F5; /* Kleur/Tekst/Op-omgekeerd */
  --tekst-primair:#A7161B;      /* Kleur/Tekst/Merk (was Tekst/Primair) */
  --tekst-fout:#8C3012;         /* Kleur/Tekst/Fout */
  --tekst-succes:#1F4A32;       /* Kleur/Tekst/Succes */
  /* Kleur/Icoon en Rand */
  --icoon-primair:#C4181E;      /* Kleur/Icoon/Merk */
  --rand-standaard:#E8E4DE;     /* Kleur/Rand/Standaard */
  --rand-fout:#C2481F;          /* Kleur/Rand/Fout */
  /* Merk-accenten */
  --primair-100:#F6E3E2;        /* Kleur/Primair/100 */
  --primair-600:#C4181E;        /* Kleur/Primair/600 */
  /* Maten */
  --knop-radius:10px;           /* Maat/Knop/Radius */
  --kaart-radius:6px;           /* Radius/Klein (inhoudskaarten) */
  --marge:120px;                /* paginamarge desktop */
  /* Schaduwen (effect-stijlen) als box-shadow. Bewust GEEN filter:drop-shadow:
     drop-shadow over de clip-path-kaarten liet de browser die kaarten bij elk
     scroll-frame opnieuw tekenen (schokkerig scrollen). box-shadow is goedkoop
     te compositen en scrollt vloeiend. */
  --schaduw-zweef:0 2px 6px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.10);
  --schaduw-modal:0 4px 12px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.16);
  /* Fonts */
  --font-kop:'Fraunces',Georgia,serif;         /* Font/Kop */
  --font-tekst:'Public Sans',system-ui,sans-serif; /* Font/Tekst */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Ankerdoelen (#pakketten = .prijzen, #offerte = .formulier) landen niet strak
   tegen de bovenrand: 24px lucht erboven. De bovenbalk scrollt gewoon mee (niet
   sticky), dus er hoeft geen balkhoogte gecompenseerd te worden. */
#pakketten,#offerte{scroll-margin-top:24px}
body{font-family:var(--font-tekst);color:var(--tekst-standaard);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;line-height:1.2}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.punt{color:var(--primair-600)}
.ico{width:16px;height:16px;flex:0 0 auto}

/* Knoppen (component Knop, Soort=Primair, Maat=Standaard 40) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;
  background:var(--vlak-primair);color:var(--tekst-omgekeerd);font:600 14px/1 var(--font-tekst);
  border:0;border-radius:var(--knop-radius);cursor:pointer;transition:background .15s}
.knop:hover{background:var(--vlak-primair-hover)}
.knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}

/* Merkstreepje + eyebrow (signatuur) */
.streepje{width:40px;height:3px;border-radius:1.5px;background:var(--vlak-primair)}
.eyebrow{font:400 12px/16px var(--font-tekst);letter-spacing:.96px;color:var(--tekst-primair);text-transform:uppercase}

/* ===== Navigatie ===== */
.nav{background:#fff;border-bottom:1px solid var(--rand-standaard)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:96px}
.nav .logo{height:28px;width:auto}
.nav-logo{margin-right:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font:400 13px/1 var(--font-tekst);color:var(--tekst-gedempt)}
.nav-links a:hover{color:var(--tekst-primair)}
/* Twee keer hetzelfde secundaire recept (wit vlak, rand, radius): de
   portal-inlogknop met tekst (component Knop, Soort=Secundair) op desktop, en
   de portaal-icoonknop (kit-component Icoonknop, Maat=Standaard) vanaf tablet.
   Het gedeelde deel staat daarom een keer; daaronder alleen de verschillen. */
a.nav-portal,.nav-portaal-ico{align-items:center;justify-content:center;
  background:var(--vlak-kaart);border:1px solid var(--rand-standaard);border-radius:var(--knop-radius);
  color:var(--tekst-standaard)}
a.nav-portal:hover,.nav-portaal-ico:hover{background:var(--vlak-pagina)}
a.nav-portal:focus-visible,.nav-portaal-ico:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
a.nav-portal{display:inline-flex;gap:8px;height:40px;padding:0 20px;font:600 14px/1 var(--font-tekst)}
.nav-portal .ico{width:18px;height:18px}
/* de icoonknop is vierkant zonder tekst en verschijnt pas als de navlinks
   wijken; op desktop staat de tekstknop hierboven er al */
.nav-portaal-ico{display:none;width:40px;height:40px}
.nav-portaal-ico .ico{width:16px;height:16px}
/* Contact-uitklapper: knop met drie directe acties (WhatsApp, bellen, mailen).
   Zelfde kaartrecept als de andere witte vlakken: Kleur/Vlak/Kaart, Rand/
   Standaard, Radius/Klein en de zweefschaduw. */
.contact-uitklap{position:relative;display:flex}
.contact-knop{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;
  cursor:pointer;font:400 13px/1 var(--font-tekst);color:var(--tekst-gedempt)}
.contact-knop:hover{color:var(--tekst-primair)}
.contact-knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:4px;border-radius:2px}
.contact-knop .pijltje{width:14px;height:14px;transition:transform .15s}
.contact-knop[aria-expanded="true"] .pijltje{transform:rotate(180deg)}
.contact-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);z-index:90;
  min-width:236px;padding:6px;display:flex;flex-direction:column;
  background:var(--vlak-kaart);border:1px solid var(--rand-standaard);
  border-radius:var(--kaart-radius);box-shadow:var(--schaduw-zweef)}
.contact-menu[hidden]{display:none}
/* twee regels per actie: wat het doet + het nummer of adres zelf. Het icoon
   staat in een eigen kolom en overspant beide regels. */
.contact-menu a{display:grid;grid-template-columns:18px 1fr;column-gap:10px;row-gap:2px;
  align-content:center;min-height:52px;padding:0 12px;
  border-radius:var(--knop-radius);font:400 16px/24px var(--font-tekst);color:var(--tekst-standaard)}
.contact-menu a:hover{background:var(--vlak-pagina)}
.contact-menu a:focus-visible{outline:2px solid var(--primair-600);outline-offset:-2px}
.contact-menu .ico{width:18px;height:18px;grid-row:span 2;align-self:center;color:var(--icoon-primair)}
.contact-menu .detail{font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt)}
@media(prefers-reduced-motion:reduce){.contact-knop .pijltje{transition:none}}

/* In het donkere zijmenu klapt dezelfde uitklapper INLINE open: geen zwevend
   kaartje in een smal paneel, maar een ingesprongen lijstje. */
.zijmenu .contact-uitklap{display:block}
.zijmenu .contact-knop{width:100%;height:48px;justify-content:flex-start;gap:6px;
  font:400 16px/24px var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-knop:hover{color:#fff}
.zijmenu .contact-menu{position:static;transform:none;min-width:0;padding:0 0 8px 8px;
  background:none;border:0;border-radius:0;box-shadow:none}
.zijmenu .contact-menu a{min-height:52px;padding:0 8px;color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-menu a:hover{background:rgba(255,255,255,.08)}
.zijmenu .contact-menu .ico{color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-menu .detail{color:rgba(250,248,245,.7)}

/* hamburger: pas zichtbaar zodra de tekstlinks verdwijnen */
.menu-knop{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  border:0;background:none;cursor:pointer;color:var(--tekst-standaard);border-radius:var(--knop-radius)}
.menu-knop .ico{width:24px;height:24px}
.menu-knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}

/* ===== Zijmenu (tablet/mobiel): donker paneel, schermhoog, vanaf links ===== */
.zijmenu-overlay{position:fixed;inset:0;z-index:100;background:rgba(46,44,41,.55);
  opacity:0;transition:opacity .3s ease}
.zijmenu-overlay.open{opacity:1}
.zijmenu-overlay[hidden]{display:none}
.zijmenu{position:absolute;left:0;top:0;bottom:0;width:320px;max-width:85vw;
  background:var(--vlak-omgekeerd);padding:20px 24px 32px;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .35s cubic-bezier(.25,.6,.3,1)}
.zijmenu-overlay.open .zijmenu{transform:none}
.zijmenu-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.zijmenu-kop img{height:26px;width:auto}
.zijmenu-sluit{border:0;background:none;cursor:pointer;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--tekst-op-omgekeerd);border-radius:var(--knop-radius)}
.zijmenu-sluit .ico{width:20px;height:20px}
.zijmenu-sluit:focus-visible,.zijmenu a:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
.zijmenu>a:not(.knop):not(.zijmenu-portaal){display:flex;align-items:center;height:48px;
  font:400 16px/24px var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu>a:not(.knop):not(.zijmenu-portaal):hover{color:#fff}
.zijmenu-lijn{height:1px;background:rgba(255,255,255,.12);margin:12px 0 20px}
.zijmenu .knop{width:100%}
.zijmenu-portaal{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;
  margin-top:10px;background:#fff;color:var(--tekst-standaard);font:600 14px/1 var(--font-tekst);
  border-radius:var(--knop-radius)}
.zijmenu-portaal .ico{width:18px;height:18px}
.zijmenu-portaal:hover{background:var(--vlak-pagina)}
/* watermerk linksonder (zoals de versieregel in de portal-zijbalk) */
.zijmenu-watermerk{margin-top:auto;font:400 12px/16px var(--font-tekst);color:rgba(250,248,245,.45)}
@media(prefers-reduced-motion:reduce){
  .zijmenu-overlay,.zijmenu{transition:none}
}

/* ===== Lichte hero met offerteformulier ===== */
.hero{position:relative;
  /* twee lagen over de kantoorfoto: een ivoor-verloop (Kleur/Vlak/Pagina #FAF8F5
     met alpha) en rechts een rode gloed (Kleur/Primair/600 #C4181E met alpha) */
  background:linear-gradient(90deg,rgba(196,24,30,0) 0%,rgba(196,24,30,0) 42%,rgba(196,24,30,.28) 100%),
             linear-gradient(90deg,rgba(250,248,245,.95) 0%,rgba(250,248,245,.86) 45%,rgba(250,248,245,.5) 72%,rgba(250,248,245,.18) 100%),
             url('/assets/hero-kantoor.jpg') center/cover no-repeat}
.hero .wrap{display:flex;align-items:center;justify-content:space-between;gap:56px;padding-top:72px;padding-bottom:72px;min-height:640px}
.hero-tekst{max-width:644px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-tekst h1{font-size:48px;line-height:56px;color:var(--tekst-standaard)}
/* responsieve regelbreuken in de herotitel (Figma Tablet 768 en Mobiel 390:
   tablet breekt voor "Op tijd", mobiel na "Persoonlijk") */
.hero-tekst h1 br{display:none}
.hero-tekst .sub{font:400 16px/24px var(--font-tekst);color:var(--tekst-gedempt)}
.hero-bullets{list-style:none;display:flex;flex-direction:column;gap:10px}
.hero-bullets li{display:flex;align-items:center;gap:8px;font:400 12px/20px var(--font-tekst);color:var(--tekst-standaard)}
.hero-bullets .ico{color:var(--icoon-primair)}
/* het cijferstatement: een serif-regel waarin de cijfers meelopen (Figma: Cijferstatement) */
.cijfer-statement{font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:20px;line-height:28px;color:var(--tekst-standaard);margin-top:6px}
.cijfer-statement b{font-weight:600;color:var(--vlak-secundair)}

/* het formulier (zwevende kaart met rand en hoeksnede, zelfde 3-laags
   snijconstructie als de prijskaarten) */
.formulier{width:400px;flex:0 0 auto;box-shadow:var(--schaduw-modal);border-radius:12px;overflow:hidden}
/* de offerteknoppen zetten de focus hierop (zie index.html); merkring i.p.v. de
   standaardomlijning van de browser */
.formulier:focus-visible{outline:2px solid var(--primair-600);outline-offset:3px}
.formulier-rand,.flow-rand{background:var(--rand-standaard);clip-path:polygon(0 0,100% 0,100% calc(100% - 37.2px),calc(100% - 1.1px) calc(100% - 33.1px),calc(100% - 19.8px) calc(100% - 1.9px),calc(100% - 23.3px) 100%,0 100%);
  padding:1px;border-radius:12px}
.formulier-vlak,.flow-vlak{background:var(--vlak-kaart);clip-path:polygon(0 0,100% 0,100% calc(100% - 37.2px),calc(100% - 1.1px) calc(100% - 33.1px),calc(100% - 19.8px) calc(100% - 1.9px),calc(100% - 23.3px) 100%,0 100%);
  border-radius:11px;padding:28px;display:flex;flex-direction:column;gap:14px;color:var(--tekst-standaard)}
.formulier h2{font-size:20px;line-height:28px}
.formulier .sub{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt)}
.veld input,.veld select{height:40px;padding:0 12px;border:1px solid var(--rand-standaard);border-radius:var(--knop-radius);
  font:400 16px/24px var(--font-tekst);color:var(--tekst-standaard);background:#fff;width:100%}
.veld input::placeholder{color:var(--tekst-placeholder)}
.veld input:focus,.veld select:focus{outline:none;border-color:var(--primair-600);box-shadow:0 0 0 2px var(--primair-100)}
.veld.fout input{border-color:var(--rand-fout)}
.formulier .knop{width:100%;font-size:15px}
.formulier .privacy{font:400 11px/16px var(--font-tekst);color:var(--tekst-gedempt);text-align:center}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Donkere klantenstrip: Onze [merken] klanten. ===== */
.merkenstrip{background:var(--vlak-omgekeerd);overflow:hidden}
.merkenstrip .wrap{display:flex;align-items:center;justify-content:center;gap:28px;min-height:92px;padding-top:18px;padding-bottom:18px}
.merkenstrip .zin{font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;font-size:32px;line-height:40px;color:var(--tekst-omgekeerd);flex:0 0 auto}
/* Logo-marquee: labels vast aan de zijkanten, logo's schuiven rechts -> links in een geclipte baan */
.merken-baan{flex:1 1 auto;min-width:0;overflow:hidden}
.merken-spoor{display:flex;width:max-content;animation:merken-schuif 28s linear infinite}
.merkenstrip:hover .merken-spoor{animation-play-state:paused}
.merken-set{display:flex;align-items:center;gap:52px;padding-right:52px;flex:0 0 auto}
.merk-logo{height:44px;width:auto;display:block;flex:0 0 auto;opacity:.6}
@keyframes merken-schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.merken-spoor{animation:none}}

/* ===== Secties algemeen ===== */
.sectie-kop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sectie-kop.links{align-items:flex-start;text-align:left}
.sectie-kop h2{font-size:32px;line-height:40px}
.sectie-kop .intro{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt)}

/* ===== Diensten ===== */
.diensten{background:var(--vlak-pagina);padding:64px 0}
.diensten-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.snijkaart{position:relative;border-radius:var(--kaart-radius);overflow:hidden;box-shadow:var(--schaduw-zweef)}
.snijkaart-vlak{position:relative;background:var(--vlak-kaart);height:100%;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 37.2px),calc(100% - 1.1px) calc(100% - 33.1px),calc(100% - 19.8px) calc(100% - 1.9px),calc(100% - 23.3px) 100%,0 100%);
  padding:20px;display:flex;flex-direction:column;gap:10px}
.dienst .chip{width:40px;height:40px;border-radius:8px;background:var(--vlak-primair-zacht);display:flex;align-items:center;justify-content:center;color:var(--icoon-primair)}
.dienst .chip .ico{width:18px;height:18px}
.dienst h3{font-size:16px;line-height:24px}
.dienst p{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt);flex:1}

/* ===== Zo werkt het (donkere fotoband, opgaande trap van snijkaarten) ===== */
.werkwijze{position:relative;padding:64px 0;
  /* scrim: Kleur/Vlak/Omgekeerd #2E2C29 op 88% over de kantoorfoto */
  background:linear-gradient(rgba(46,44,41,.88),rgba(46,44,41,.88)),url('/assets/kantoor-warm.jpg') center/cover no-repeat}
.werkwijze .eyebrow{color:var(--primair-100)}
.werkwijze h2{color:var(--tekst-omgekeerd)}
/* de rij begint 20px boven de onderkant van de sectiekop (Figma: rij op
   kop-hoogte, kaart 3 gelijk met de kop) en trapt op naar rechts */
/* de kaarten zijn even hoog (grid-stretch); de trap ontstaat met translateY,
   de padding-bottom vangt de laagste kaart op */
.werkwijze-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:-20px;padding-bottom:72px}
.traphouder{display:flex}
.traphouder .snijkaart{width:100%}
.traphouder.trap-1{transform:translateY(72px)}
.traphouder.trap-2{transform:translateY(36px)}
.stap .snijkaart-vlak,.snijkaart.stap{min-height:176px}
.stap .snijkaart-vlak{padding:24px}
/* regelafstand 148px = het Figma-tekstvak (120px Fraunces, regelafstand "normal");
   line-height:1 zette het cijfer 14px te hoog t.o.v. Figma */
.stap-nummer{position:absolute;top:-6px;right:90px;transform:translateX(100%);
  font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:120px;line-height:148px;color:var(--primair-600);opacity:.08;pointer-events:none}
.duur-chip{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:999px;
  background:var(--vlak-primair-zacht);font:400 12px/16px var(--font-tekst);color:var(--tekst-primair)}
.stap h3{font-size:16px;line-height:24px}
.stap p{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt)}

/* ===== Prijzen (vier pakketten: Eenmanszaak rood, VOF inktblauw) ===== */
.prijzen{background:#fff;padding:64px 0}
.prijzen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.prijskaart{position:relative;border-radius:12px;box-shadow:var(--schaduw-zweef)}
.prijskaart-knip{border-radius:12px;overflow:hidden;height:100%}
.prijskaart-rand{background:var(--rand-standaard);clip-path:polygon(0 0,100% 0,100% calc(100% - 37.2px),calc(100% - 1.1px) calc(100% - 33.1px),calc(100% - 19.8px) calc(100% - 1.9px),calc(100% - 23.3px) 100%,0 100%);padding:1px;border-radius:12px;height:100%}
.prijskaart.uitgelicht .prijskaart-rand{background:var(--primair-600);padding:1.5px}
.prijskaart.vof.uitgelicht .prijskaart-rand{background:var(--vlak-secundair)}
.prijskaart-vlak{background:var(--vlak-kaart);clip-path:polygon(0 0,100% 0,100% calc(100% - 37.2px),calc(100% - 1.1px) calc(100% - 33.1px),calc(100% - 19.8px) calc(100% - 1.9px),calc(100% - 23.3px) 100%,0 100%);
  border-radius:11px;padding:20px;height:100%;display:flex;flex-direction:column;gap:8px}
.prijskaart .badge{position:absolute;top:-11px;left:16px;z-index:1;color:#fff;font:600 11px/1 var(--font-tekst);padding:5px 12px;border-radius:999px;background:var(--vlak-primair)}
.prijskaart.vof .badge{background:var(--vlak-secundair)}
.prijskaart .pakket{font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt)}
.prijs{font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;font-size:32px;line-height:40px}
.prijs small{font:400 12px var(--font-tekst);color:var(--tekst-gedempt)}
.prijs .vanaf{font-size:16px;margin-right:4px}
.prijskaart ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.prijskaart li{display:flex;align-items:center;gap:8px;font:400 12px/18px var(--font-tekst)}
.prijskaart .ico{color:var(--icoon-primair);width:14px;height:14px}
.prijskaart.vof .ico{color:var(--vlak-secundair)}
.prijskaart .knop{width:100%;margin-top:auto}
.prijskaart.vof .knop{background:var(--vlak-secundair)}
.prijskaart.vof .knop:hover{background:#233450} /* Secundair een tint donkerder */

/* ===== CTA-band ===== */
.cta{background:var(--vlak-omgekeerd)}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:36px;padding-bottom:36px}
.cta p{font:400 12px/20px var(--font-tekst);color:rgba(255,255,255,.75)}
.cta .knop{font-size:15px}

/* ===== Footer (linkkolommen links, merkkolom rechts, onderbalk) ===== */
footer{background:var(--vlak-omgekeerd);color:var(--tekst-op-omgekeerd);border-top:1px solid rgba(255,255,255,.08)} /* Merklijn */
footer .wrap{padding-top:40px;padding-bottom:28px}
.footer-kolommen{display:flex;justify-content:space-between;gap:64px}
.footer-links{display:flex;gap:64px;flex-wrap:wrap}
.footer-kolom h3{font:600 12px/16px var(--font-tekst);font-family:var(--font-tekst);margin-bottom:5px;color:var(--tekst-op-omgekeerd)}
.footer-kolom ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.footer-kolom a,.footer-kolom li{font:400 12px/16px var(--font-tekst);color:rgba(250,248,245,.7)}
.footer-kolom a{display:inline-block;padding:4px 0}
.footer-kolom a:hover{color:#fff}
.footer-merk{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.footer-merk img{height:26px;width:auto}
.footer-merk p{font:400 12px/16px var(--font-tekst);color:rgba(250,248,245,.7);text-align:right}
.footer-onderbalk{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.footer-onderbalk p{font:400 12px/16px var(--font-tekst);color:rgba(250,248,245,.7)}

/* De snijkaart-canon: snede 21x35 met afgeronde snijhoeken (boven r8, onder r4:
   de onderhoek is scherper en zou bij gelijke radius ronder OGEN; zo lijken
   beide gelijk) en een schaduw die de snede volgt. Browsers met clip-path:shape()
   krijgen dit alles hieronder; oudere (o.a. Firefox) houden de polygon hierboven,
   die de snijhoek-rondingen benadert met afgeschuinde punten (de boog wijkt daar
   minder dan een halve pixel af), met de gewone box-shadow van de basisregels. */
@supports (clip-path: shape(from 0 0, line to 100% 100%)){
  /* ALLE bogen expliciet 'cw' (snijhoeken 'small cw'): het pad loopt met de
     klok mee (boven -> rechterrand -> snede -> onder -> links), dus elke bolle,
     naar buiten wijzende hoekronding is een rechtsdraai = cw. 'ccw' geeft hier
     een HOLLE boog (ronding naar binnen, het haakje rechtsonder) - en ccw is
     ook de spec-default, dus de woorden weglaten geeft dezelfde bug. De
     buitenhoeken (r6/r11/r12) zitten IN de shape, omdat de omhullende kaart
     voor de schaduwlagen hieronder overflow:visible moet zijn (overflow:hidden
     zou de schaduw van de pseudo-elementen wegknippen). */
  .snijkaart{overflow:visible;box-shadow:none}
  .snijkaart-vlak{
    clip-path:shape(from 6px 0,
      line to calc(100% - 6px) 0,arc to 100% 6px of 6px cw,
      line to 100% calc(100% - 37.2px),
      arc to calc(100% - 1.1px) calc(100% - 33.1px) of 8px small cw,
      line to calc(100% - 19.8px) calc(100% - 1.9px),
      arc to calc(100% - 23.3px) 100% of 4px small cw,
      line to 6px 100%,arc to 0 calc(100% - 6px) of 6px cw,
      line to 0 6px,arc to 6px 0 of 6px cw,
      close)}
  .prijskaart{box-shadow:none}
  .prijskaart-rand{
    clip-path:shape(from 12px 0,
      line to calc(100% - 12px) 0,arc to 100% 12px of 12px cw,
      line to 100% calc(100% - 37.2px),
      arc to calc(100% - 1.1px) calc(100% - 33.1px) of 8px small cw,
      line to calc(100% - 19.8px) calc(100% - 1.9px),
      arc to calc(100% - 23.3px) 100% of 4px small cw,
      line to 12px 100%,arc to 0 calc(100% - 12px) of 12px cw,
      line to 0 12px,arc to 12px 0 of 12px cw,
      close)}
  .prijskaart-vlak{
    clip-path:shape(from 11px 0,
      line to calc(100% - 11px) 0,arc to 100% 11px of 11px cw,
      line to 100% calc(100% - 37.2px),
      arc to calc(100% - 1.1px) calc(100% - 33.1px) of 8px small cw,
      line to calc(100% - 19.8px) calc(100% - 1.9px),
      arc to calc(100% - 23.3px) 100% of 4px small cw,
      line to 11px 100%,arc to 0 calc(100% - 11px) of 11px cw,
      line to 0 11px,arc to 11px 0 of 11px cw,
      close)}
  .formulier{overflow:visible;box-shadow:none;position:relative}
  /* de flow-modal blijft absolute (JS-positionering op het formulier-kaartje) */
  .flow-modal{overflow:visible;box-shadow:none}
  .formulier-rand,.flow-rand{
    clip-path:shape(from 12px 0,
      line to calc(100% - 12px) 0,arc to 100% 12px of 12px cw,
      line to 100% calc(100% - 37.2px),
      arc to calc(100% - 1.1px) calc(100% - 33.1px) of 8px small cw,
      line to calc(100% - 19.8px) calc(100% - 1.9px),
      arc to calc(100% - 23.3px) 100% of 4px small cw,
      line to 12px 100%,arc to 0 calc(100% - 12px) of 12px cw,
      line to 0 12px,arc to 12px 0 of 12px cw,
      close)}
  .formulier-vlak,.flow-vlak{
    clip-path:shape(from 11px 0,
      line to calc(100% - 11px) 0,arc to 100% 11px of 11px cw,
      line to 100% calc(100% - 37.2px),
      arc to calc(100% - 1.1px) calc(100% - 33.1px) of 8px small cw,
      line to calc(100% - 19.8px) calc(100% - 1.9px),
      arc to calc(100% - 23.3px) 100% of 4px small cw,
      line to 11px 100%,arc to 0 calc(100% - 11px) of 11px cw,
      line to 0 11px,arc to 11px 0 of 11px cw,
      close)}

  /* Schaduw die de snede volgt ZONDER filter in het scroll-pad. filter:
     drop-shadow op de kaarten liet het scrollen op tragere machines schokken,
     ook met will-change (twee keer bevestigd). Daarom tekent een ::before
     achter elke kaart de schaduw als border-image 9-slice van een vooraf
     gebakken SVG (assets/snijkaart-schaduw-*.svg) met exact de kaartvorm
     inclusief snede. Een SVG als border-image wordt als afbeelding gecachet;
     zijn interne filter draait alleen bij (her)rasteren (nieuwe tiles, zoom,
     DPI-wissel) op de raster-threads en dus nooit per scrollframe op de main
     thread. De vier hoek-slices staan vast,
     de randen rekken mee - het schaduwprofiel langs een rechte rand is
     constant, dus rekken is exact en er bestaan geen naden (alles komt uit
     een gebakken bron). Slices ruim om de hoekinvloed (radius + 3 sigma blur):
     zweef 56/72/88/56 op canvas 208 (kaart 160 + 24px uitloop), modal
     112/124/140/112 op canvas 364 (kaart 260 + 52px uitloop).
     isolation:isolate houdt de z-index:-1-laag binnen de kaart. */
  .snijkaart,.prijskaart{position:relative;isolation:isolate}
  .formulier,.flow-modal{isolation:isolate}
  /* de ::before-lagen steken 24/52px buiten de kaarten; op mobiel (marge 20px)
     zou dat horizontale scroll geven. overflow-x:clip knipt puur visueel (geen
     scroll-container) en kost hooguit een onzichtbaar stukje blur-staart aan de
     schermrand. */
  .hero,.diensten,.werkwijze,.prijzen{overflow-x:clip}
  .snijkaart::before,.prijskaart::before,.formulier::before,.flow-modal::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    border:0 solid transparent;border-image-repeat:stretch}
  .snijkaart::before,.prijskaart::before{inset:-24px;
    border-image-slice:56 72 88 56;border-image-width:56px 72px 88px 56px}
  .snijkaart::before{border-image-source:url('/assets/snijkaart-schaduw-r6-zweef.svg')}
  .prijskaart::before{border-image-source:url('/assets/snijkaart-schaduw-r12-zweef.svg')}
  .formulier::before,.flow-modal::before{inset:-52px;
    border-image-slice:112 124 140 112;border-image-width:112px 124px 140px 112px;
    border-image-source:url('/assets/snijkaart-schaduw-r12-modal.svg')}
}

/* ===== Offerte-flow: modal-wizard die vanuit het hero-formulier opengroeit
   (Figma: PROEF Offerte-flow, vraag per pagina). De modal deelt de
   snijconstructie van het formulier (.flow-rand/.flow-vlak liften mee op de
   formulier-regels hierboven). Zonder JS bestaat de flow niet en verstuurt
   het hero-formulier gewoon direct. ===== */
.flow-overlay{position:fixed;inset:0;z-index:100;background:rgba(46,44,41,.55);
  opacity:0;transition:opacity .3s ease}
.flow-overlay.open{opacity:1}
.flow-overlay[hidden]{display:none}
/* de kaart wordt door JS exact op de plek en maat van het formulier-kaartje
   gelegd (left/top/width/height), zodat hij er op elk formaat naadloos
   overheen valt (Figma: PROEF Offerte-flow) */
.flow-modal{position:absolute;box-shadow:var(--schaduw-modal);border-radius:12px}
.flow-rand{height:100%}
.flow-vlak{position:relative;height:100%;padding:36px 40px 48px;gap:0;overflow:auto}
/* groot watermerk-cijfer rechtsboven, achter de inhoud (zelfde recept als
   .stap-nummer). Het cijfer blijft groot; de vraag- en subtekst houden via
   padding-right hieronder een vaste vrije hoek, zodat de kop er niet meer
   overheen loopt. Uitzondering op stap 10: "10" is twee keer zo breed als een
   enkel cijfer en het woord "bedrijfsgegevens." kan niet verder afbreken, dus
   daar kruist de kop het cijfer bewust (keuze gebruiker, Figma 2026-08-04). */
.flow-watermerk{position:absolute;top:2px;right:28px;
  font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:120px;line-height:148px;color:var(--primair-600);opacity:.08;pointer-events:none}
.flow-kop{display:flex;align-items:center;gap:12px;margin-top:8px}
.flow-voortgang{flex:1;height:4px;border-radius:2px;background:var(--vlak-primair-zacht)}
.flow-voortgang b{display:block;height:4px;border-radius:2px;background:var(--vlak-primair);
  transition:width .4s ease}
.flow-stapregel{font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt);margin-top:12px}
/* titel bovenaan, balk onderaan: de stap vult de resthoogte, zodat de voet
   (Terug) en daaronder stapregel + balk tegen de onderrand gepind staan */
.flow-stap{flex:1;display:flex;flex-direction:column;min-height:0;
  transition:opacity .17s ease,transform .17s ease}
.flow-stap.wissel{opacity:0;transform:translateX(-10px)}
.flow-stap.wissel.terug{transform:translateX(10px)}
.flow-vraag{font-family:var(--font-kop);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:24px;line-height:32px;color:var(--tekst-standaard);padding-right:56px}
.flow-sub{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt);margin-top:6px;padding-right:56px}
/* de gelukt-kaart is gecentreerd en heeft geen watermerk: geen vrije hoek nodig */
.flow-klaar .flow-vraag,.flow-klaar p{padding-right:0}
/* antwoorden gestapeld op volle breedte, op elk formaat (Figma) */
.flow-antwoorden{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.keuzevak{width:100%;height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;background:var(--vlak-kaart);border:1px solid var(--rand-standaard);
  border-radius:var(--knop-radius);font:400 12px/16px var(--font-tekst);color:var(--tekst-gedempt);
  cursor:pointer;transition:border-color .15s,background .15s}
.keuzevak:hover{border-color:var(--primair-600)}
.keuzevak:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
.keuzevak.gekozen{background:var(--vlak-primair-zacht);border:1.5px solid var(--primair-600);
  color:var(--tekst-primair);font-weight:600}
.flow-stap .veld{margin-top:10px}
.flow-veldenrij{display:flex;gap:10px}
.flow-veldenrij .veld{flex:1}
.flow-voet{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px}
.flow-terug,.flow-volgende{border:0;background:none;cursor:pointer;font:600 16px/24px var(--font-tekst);
  color:var(--tekst-primair);padding:8px 0}
.flow-terug:hover,.flow-volgende:hover{text-decoration:underline}
.flow-terug:focus-visible,.flow-volgende:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
/* Volgende doet pas mee als er een antwoord gekozen is */
.flow-volgende[disabled]{color:var(--tekst-gedempt);cursor:default}
.flow-volgende[disabled]:hover{text-decoration:none}
.flow-stap .knop{width:100%;margin-top:18px;height:44px;font-size:15px}
.flow-privacy{font:400 11px/16px var(--font-tekst);color:var(--tekst-gedempt);text-align:center;margin-top:10px}
.flow-melding{font:400 12px/18px var(--font-tekst);color:var(--tekst-fout);text-align:center;margin-top:10px;display:none}
.flow-melding.zichtbaar{display:block}
/* gelukt-kaart: foto boven, boodschap gecentreerd, Sluiten tegen de onderrand */
.flow-klaar{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center}
/* de foto loopt tot de boven- en zijranden van de kaart (het kaartvlak zelf
   rondt de hoeken af via zijn overflow); negatieve marges heffen de padding op */
.flow-klaar-foto{width:calc(100% + 80px);height:168px;object-fit:cover;flex:none;
  margin:-36px -40px 22px}
.flow-klaar .flow-vraag{margin-top:14px}
.flow-klaar p{font:400 12px/20px var(--font-tekst);color:var(--tekst-gedempt);margin-top:8px}
.flow-klaar .knop{width:100%;margin-top:auto}
/* stap 10 (bedrijfsgegevens): compactere velden zodat alles binnen de kaart past */
.stap-bedrijf .veld{margin-top:6px}
.stap-bedrijf .veld input{height:36px}
.stap-bedrijf .knop{margin-top:10px}
.flow-vink{width:64px;height:64px;border-radius:999px;background:var(--vlak-primair-zacht);
  display:inline-flex;align-items:center;justify-content:center;color:var(--icoon-primair)}
.flow-vink .ico{width:26px;height:26px}
/* gelukt-popup: de kaart glijdt naar het midden; balk, stapregel en watermerk doen niet mee */
.flow-modal.flow-klaar-modus{transition:left .5s cubic-bezier(.25,.6,.3,1),top .5s cubic-bezier(.25,.6,.3,1),
  width .5s cubic-bezier(.25,.6,.3,1),height .5s cubic-bezier(.25,.6,.3,1)}
.flow-klaar-modus .flow-kop,.flow-klaar-modus .flow-stapregel,.flow-klaar-modus .flow-watermerk{display:none}
@media(prefers-reduced-motion:reduce){
  .flow-overlay,.flow-stap,.flow-voortgang b,.flow-modal.flow-klaar-modus{transition:none}
}
@media(max-width:860px){
  /* tablet en mobiel: kaartpadding 28 rondom (Figma); de Terug-knop staat
     links en blijft zo vrij van de snede rechtsonder. De vrije hoek voor het
     watermerk groeit mee: de kaartpadding is hier 12px smaller dan desktop */
  .flow-vlak{padding:28px}
  .flow-vraag,.flow-sub{padding-right:68px}
  .flow-klaar-foto{width:calc(100% + 56px);margin:-28px -28px 22px}
}

/* ===== Responsief (Figma-frames Tablet 768 en Mobiel 390) ===== */
@media(max-width:1180px){
  :root{--marge:48px}
  /* de smallere kolom kan de titel niet meer op een regel kwijt: breek bewust
     voor "Op tijd." (Figma Tablet 768) in plaats van willekeurig te wrappen */
  .hero-tekst h1 br.br-tablet{display:inline}
  .diensten-grid{grid-template-columns:repeat(2,1fr)}
  .prijzen-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  /* tablet: compacte header met hamburger (Figma Navigatiebalk Formaat=Compact) */
  .nav-links{display:none}
  .menu-knop{display:inline-flex}
  /* de tekstknop "Inloggen" valt met de navlinks weg; de portaal-icoonknop
     neemt hem over, vlak voor "Offerte aanvragen" (Figma Tablet 768 v3) */
  .nav-portaal-ico{display:inline-flex}
  .nav .wrap{gap:16px} /* Figma Navigatiebalk Formaat=Compact: tussenruimte 16 */
  /* tablet: tekst en formulier blijven naast elkaar, formulier smaller (Figma Tablet 768) */
  .hero .wrap{gap:24px;padding-top:48px;padding-bottom:48px}
  .formulier{width:320px}
  .cta .wrap{flex-direction:column;align-items:flex-start}
  .merkenstrip .wrap{min-height:80px} /* Figma Tablet 768 en Mobiel 390: strip 80 hoog */
  .merken-set{gap:48px;padding-right:48px} /* Figma Tablet 768: logo-tussenruimte 48 */
  .footer-kolommen{flex-direction:column;gap:32px}
  .footer-merk{align-items:flex-start}
  .footer-merk p{text-align:left}
}
@media(max-width:640px){
  :root{--marge:20px}
  /* mobiel: kleiner logo; de offerteknop vervalt uit de balk (Figma Mobiel 390
     v3). De offerte-actie blijft bereikbaar via het formulier in de hero, de
     CTA-sectie, de footer en het zijmenu. */
  .nav .wrap{gap:12px}
  .nav .logo{height:22px}
  .nav>.wrap>.knop{display:none}
  .zijmenu{width:300px}
  /* mobiel: de rode gloed loopt verticaal (transparant boven, rood onder) zodat
     de herotekst leesbaar blijft (Figma Mobiel 390) */
  .hero{background:linear-gradient(180deg,rgba(196,24,30,0) 0%,rgba(196,24,30,0) 55%,rgba(196,24,30,.28) 100%),
             linear-gradient(90deg,rgba(250,248,245,.95) 0%,rgba(250,248,245,.86) 45%,rgba(250,248,245,.5) 72%,rgba(250,248,245,.18) 100%),
             url('/assets/hero-kantoor.jpg') center/cover no-repeat}
  .hero .wrap{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:48px}
  .hero-tekst{max-width:none}
  .formulier{width:100%}
  /* op mobiel stapelt de trap verticaal met smallere kaarten (310/350) die per
     stap 20px naar rechts verspringen (Figma Mobiel 390) */
  .werkwijze-grid{grid-template-columns:1fr;margin-top:22px;padding-bottom:0}
  .traphouder.trap-1,.traphouder.trap-2{transform:none}
  .traphouder .snijkaart{width:calc(100% - 40px)}
  .traphouder.trap-2 .snijkaart{margin-left:20px}
  .traphouder.trap-3 .snijkaart{margin-left:40px}
  .diensten-grid{grid-template-columns:1fr}
  .prijzen-grid{grid-template-columns:1fr}
  .hero-tekst h1{font-size:36px;line-height:44px}
  /* mobiel breekt na "Persoonlijk."; de tablet-breuk gaat hier weer uit */
  .hero-tekst h1 br.br-tablet{display:none}
  .hero-tekst h1 br.br-mobiel{display:inline}
  .sectie-kop h2{font-size:28px;line-height:36px}
  .prijs{font-size:28px;line-height:36px}
  .merkenstrip .wrap{gap:16px;padding-top:14px;padding-bottom:14px}
  .merkenstrip .zin{font-size:28px;line-height:36px}
  .merken-set{gap:40px;padding-right:40px} /* Figma Mobiel 390: logo-tussenruimte 40 */
  .merk-logo{height:36px}
  .footer-links{gap:32px}
}

/* ===== Scroll/open-animaties (subtiel, per sectie de gekozen variant) =====
   Elementen starten verborgen; zodra hun SECTIE het venster binnenkomt speelt
   de hele sectie in een golf af (het reveal-script in index.html zet .in op
   de sectie en op alle elementen tegelijk; de sectie-.in ontgrendelt ook de
   wrap en de klantenstrip-choreografie). De hero speelt bij het openen.
   Zonder JS blijft alles gewoon zichtbaar; 'verminderde beweging' zet alles
   direct zichtbaar. De trap-offset van Werkwijze blijft staan omdat alleen de
   kaart (.stap) beweegt, niet de traphouder. */
@media (prefers-reduced-motion: no-preference){
  /* Vóór het reveal-script onderaan draait zet het kopscript in index.html al
     html.anim: de INHOUD (.wrap) van de animatie-secties staat zo vanaf de
     allereerste verf onzichtbaar klaar - de sectie-achtergronden (zoals de
     donkere klantenstrip-balk en de herofoto) blijven gewoon staan. Anders kan
     de tekst bij trage lading eerst 'gewoon' in beeld springen en dan wegfaden.
     Zonder JS ontbreekt html.anim en blijft alles zichtbaar. */
  html.anim :is(.hero,.merkenstrip,.diensten,.werkwijze,.prijzen):not(.in) .wrap{opacity:0}

  /* Binnen de sectie-golf faden de elementen na elkaar in: --i is de
     volgorde en --step het tempo, per sectie klaargezet bij de init. De
     poort ligt op de SECTIE: staat die echt in beeld (de 30%-regel in
     index.html), dan spelen alle elementen in een keer af, ook wat nog
     onder de vouw staat. */
  .anim-sec .reveal,
  .anim-sec .reveal-item{opacity:0}
  /* De transitie staat op de .in-staat, niet op de startstand: op een lange
     pagina verft de browser de hero al voordat het reveal-script onderaan
     draait, en dan zou de sprong naar opacity 0 zelf traag wegtransitionen
     en de hele golf maskeren. Zo is verbergen instant en animeert alleen
     het onthullen. */
  .anim-sec .reveal.in,
  .anim-sec .reveal-item.in{opacity:1;transform:none;
    transition:opacity 1.26s ease, transform 1.35s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}
  .anim-sec .reveal{transform:translateY(14px)}          /* kop/lead: rustig omhoog */

  /* Hero: van onderen infaden (formulier faadt mee omhoog). De hero-golf loopt
     20% langzamer dan de andere secties; de titel opent hem en staat even alleen
     (volgorde via --i/--step in index.html) zodat de kernzin de nadruk krijgt. */
  .hero .reveal-item{transform:translateY(18px)}
  .hero .reveal-item.in{
    transition:opacity 1.575s ease, transform 1.6875s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}

  /* Klantenstrip als gordijn, compositor-vriendelijk: de indeling staat vanaf
     het begin in de EINDstand, er animeert alleen transform en opacity - geen
     gap/max-width meer, dus geen layout+paint per frame tijdens het scrollen.
     'Onze klanten.' faadt gecentreerd in (beide woorden staan met transform
     --schuif naar het midden geschoven; index.html meet die afstand) en
     schuift daarna naar de zijkanten, terwijl twee donkere panelen
     (::before/::after op de baan) als gordijnen van de logo's af schuiven.
     Het paneel loopt 12px voor op het woord en eindigt op de gap (28px),
     dezelfde opening-afstand als de oude gap-animatie.
     De marquee wacht tot de strip in beeld is. */
  .merkenstrip.anim-sec .zin{opacity:0;z-index:2}
  .merkenstrip.anim-sec:not(.in) .zin:first-child{transform:translateX(var(--schuif,0px))}
  .merkenstrip.anim-sec:not(.in) .zin:last-child{transform:translateX(calc(-1*var(--schuif,0px)))}
  /* de transform-transitie staat alleen op de .in-staat: zo schakelt een
     hermeting van --schuif (fonts.ready/resize) in de startstand direct,
     zonder een micro-transitie die de vertraging van de echte reveal opeet */
  .merkenstrip.anim-sec.in .zin{opacity:1;
    transition:opacity .5s ease, transform 1.8s cubic-bezier(.45,.05,.25,1) .5s}
  .merkenstrip.anim-sec .merken-baan{position:relative}
  .merkenstrip.anim-sec .merken-baan::before,
  .merkenstrip.anim-sec .merken-baan::after{content:"";position:absolute;top:0;bottom:0;
    width:calc(50% + 1px);background:var(--vlak-omgekeerd);z-index:1;
    transition:transform 1.8s cubic-bezier(.45,.05,.25,1) .5s}
  .merkenstrip.anim-sec .merken-baan::before{left:0}
  .merkenstrip.anim-sec .merken-baan::after{right:0}
  .merkenstrip.anim-sec.in .merken-baan::before{transform:translateX(-100%)}
  .merkenstrip.anim-sec.in .merken-baan::after{transform:translateX(100%)}

  .merkenstrip:not(.in) .merken-spoor{animation-play-state:paused}

  /* Diensten: zacht omhoog */
  .diensten .reveal-item{transform:translateY(14px)}

  /* Werkwijze: van links + heel licht omhoog (alleen de kaart beweegt) */
  .werkwijze .reveal-item{transform:translateX(-18px) translateY(8px)}

  /* Prijzen: zacht omhoog; de 'Meest gekozen'-badge faadt met zijn eigen
     kaart mee (erft --i en --step van de kaart, dus kaart en badge blijven
     synchroon) */
  .prijzen .reveal-item{transform:translateY(16px)}
  .prijzen .prijskaart .badge{opacity:0;transform:translateY(-6px);
    transition:opacity 1.26s ease, transform 1.35s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}
  .prijzen .prijskaart.in .badge{opacity:1;transform:none}
}