/* Van Leest, huisstijl van de site. Maten naar de OOAK-meting van 05-09-2026 (zwart #000, SUSE Light
   voor koppen, tekst wit met dekking, container 1200, secties 128/64, radius 4 tot 6, zwevende pil).
   Tekst in Helvetica Neue. Gedeeld door alle pagina's sinds 27-09-2026. */
@font-face { font-family: "SUSE"; src: url("fonts/SUSE-wght-latin.woff2") format("woff2"), url("fonts/SUSE-wght-latin.woff") format("woff"), url("fonts/SUSE-wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
:root {
  --grond: #000;
  --glas: rgba(255,255,255,.05);
  --rand: rgba(255,255,255,.12);
  --rand-nav: rgba(255,255,255,.20);
  --t: #fff;
  --t85: rgba(255,255,255,.85);
  --t60: rgba(255,255,255,.6);
  --t40: rgba(255,255,255,.5);
  --groen: #86B99A;
  --container: 1200px;
  --breed: 1152px;   /* inhoudsbreedte van .c: alles wat breed is lijnt hierop uit */
  --smal: 760px;
  --marge: 24px;
  --sectie: 96px;
  --entree: 1.6s cubic-bezier(.22,1,.36,1);
  --hover: 150ms cubic-bezier(.4,0,.2,1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--grond); }
body {
  background: var(--grond); color: var(--t);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.c { max-width: var(--container); margin: 0 auto; padding: 0 var(--marge); }
section { padding: var(--sectie) 0 0; scroll-margin-top: 40px; }
section.laatst { padding-bottom: var(--sectie); }

h1, h2, .getal, .strip dt, .stap b, .persoon strong, .bio { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; }
h1, h2 { font-weight: 300; letter-spacing: -.043em; text-wrap: balance; }
h1 { font-size: 70px; line-height: 1.1; }
h2 { font-size: 48px; line-height: 1.12; }
h3 { font-size: 18px; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; }
.kop { text-align: center; max-width: 900px; margin: 0 auto; }
.kop p { margin: 22px auto 0; max-width: 672px; color: var(--t60); }
.kop .link, .duo .link { display: inline-block; margin-top: 22px; font-size: 15px; color: var(--t60); border-bottom: 1px solid var(--rand-nav); }
.kop .link:hover, .duo .link:hover { color: #fff; }
.kicker { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t40); margin-bottom: 22px; }

/* knop: wit vlak, geen verloop (keuze 06-09) */
.knop {
  display: inline-block; background: #fff; color: #000;
  font-size: 17px; font-weight: 500; line-height: 28.8px;
  padding: 12px 28px; border-radius: 6px;
  transition: opacity var(--hover);
}
.knop:hover { opacity: .88; }
button.knop { font-family: inherit; border: 0; cursor: pointer; }

/* nav: zwevende pil */
.pil {
  position: fixed; z-index: 20; top: 40px; left: 50%; transform: translateX(-50%);
  width: min(740px, calc(100% - 24px));
  display: flex; align-items: center; gap: 22px;
  padding: 8px 8px 8px 18px;
  background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--rand-nav); border-radius: 4px;
}
.pil img { height: 14px; display: block; }
.pil ul { list-style: none; display: flex; gap: 22px; margin-left: auto; font-size: 15px; color: var(--t60); }
.pil ul a { transition: color var(--hover); }
.pil ul a:hover, .pil ul a.hier { color: #fff; }
.pil .knop { font-size: 14px; line-height: 20px; padding: 8px 14px; border-radius: 3px; white-space: nowrap; }

/* verloop: de monochrome banner met korrel (hero en slot) */
.verloop { position: absolute; inset: 0; pointer-events: none; }
.verloop i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.verloop .a { width: 62vw; height: 62vw; left: -14vw; top: -30vw; background: rgba(255,255,255,.52); animation: drijf-a 38s ease-in-out 1 forwards; }
.verloop .b { width: 46vw; height: 46vw; right: -10vw; top: 2vw; background: rgba(255,255,255,.26); animation: drijf-b 46s ease-in-out 1 forwards; }
.verloop .c2 { width: 40vw; height: 30vw; left: 26vw; top: 24vw; background: rgba(255,255,255,.10); animation: drijf-a 52s ease-in-out 1 reverse forwards; }
@keyframes drijf-a { to { transform: translate3d(9vw, 5vw, 0) scale(1.08); } }
@keyframes drijf-b { to { transform: translate3d(-8vw, 7vw, 0) scale(.94); } }
.korrel {
  position: absolute; inset: 0; opacity: .38; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.uitloop { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, #000 100%); }

/* hero met verloop (home) */
.hero {
  position: relative; overflow: hidden;
  min-height: min(max(560px, 72vh), 780px);
  display: flex; align-items: center; text-align: center;
  padding: 140px 0 56px;
}
.hero .c { position: relative; }
.hero h1 { max-width: 982px; margin: 0 auto; }
.hero .intro { max-width: 680px; margin: 30px auto 0; font-size: 18px; line-height: 1.625; color: var(--t85); }
.hero .actie { margin-top: 44px; }

/* kop van een subpagina: alleen tekst, gecentreerd */




/* cijferstrip */
.strip { padding: 0 0 var(--sectie); }
.strip dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; margin: 0 auto; text-align: center; }
.strip dt { font-size: 41px; line-height: 1.25; letter-spacing: -.03em; font-weight: 300; }
.strip dd { margin-top: 4px; font-size: 15px; font-weight: 500; letter-spacing: -.03em; color: var(--t60); }

/* kaart: zwart met rand, radius 6 (OOAK) */
.kaart {
  background: #000; border: 1px solid var(--rand); border-radius: 6px; padding: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 50px rgba(0,0,0,.4);
  scroll-margin-top: 120px;
}

/* vier kaarten met nummer (wat ik doe) */
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.vier .kaart { padding: 22px 22px 26px; }
.vier .nr { font-size: 12px; font-weight: 500; color: var(--t40); }
.vier h3 { margin-top: 64px; }
.vier p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--t60); }

/* diensten: groepen als kaarten met een lijst */

.groep h3 { font-size: 21px; font-weight: 300; letter-spacing: -.02em; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.groep ul { list-style: none; margin-top: 18px; }
.groep li { font-size: 14px; line-height: 1.6; color: var(--t60); padding: 11px 0; border-top: 1px solid var(--rand); }

/* zes kaarten met een groot getal (wat ik tegenkom) */
.zes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.zes .kaart { padding: 22px 22px 26px; }
.zes .getal { font-size: 48px; line-height: 1; letter-spacing: -.04em; font-weight: 300; }
.zes .getal small { font-size: 15px; letter-spacing: 0; color: var(--t40); margin-left: .3em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.zes h3 { margin-top: 40px; }
.zes p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--t60); }

/* cases */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.cases.twee { grid-template-columns: 1fr 1fr; max-width: var(--breed); margin-left: auto; margin-right: auto; }
.case .seg { font-size: 12px; font-weight: 500; letter-spacing: -.02em; color: var(--t60); display: flex; justify-content: space-between; gap: 12px; }
.case .seg span:last-child { white-space: nowrap; color: var(--t40); }
.case h3 { margin-top: 36px; font-size: 21px; font-weight: 300; letter-spacing: -.02em; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.case .getal { margin-top: 18px; font-size: 44px; line-height: 1.05; letter-spacing: -.045em; font-weight: 300; }
.case .getal b { font-weight: 300; color: var(--t40); padding: 0 .1em; }
.case .eenheid { margin-top: 12px; font-size: 13px; color: var(--t60); padding-bottom: 22px; border-bottom: 1px solid var(--rand); }
.case dl { margin-top: 22px; display: grid; gap: 14px; }
.case dt { font-size: 12px; font-weight: 500; color: var(--t); margin-bottom: 3px; }
.case dd { font-size: 14px; line-height: 1.6; color: var(--t60); }
.case[hidden] { display: none; }





/* tegels: tekst naast een verloop-paneel, om en om (Mastermind "The Location") */














/* drie kolommen (afspraken, stappen) */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 64px 0 0; }
.stap { border-top: 1px solid var(--rand-nav); padding: 22px 0 0; }
.stap b { display: block; font-size: 41px; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--t40); }
.stap h3 { margin-top: 28px; }
.stap p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--t60); max-width: 30em; }

/* vragen: accordeon */
.vragen { max-width: 760px; margin: 56px auto 0; display: grid; gap: 8px; }
.vragen details { border: 1px solid rgba(255,255,255,.08); background: #101010; border-radius: 6px; padding: 0 22px; }
.vragen summary { list-style: none; cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 500; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; color: #fff; font-weight: 300; font-size: 20px; }
.vragen details[open] summary::after { content: "–"; }
.vragen p { padding: 0 0 24px; font-size: 15px; line-height: 1.65; color: var(--t60); max-width: 60ch; }

/* lopende tekst: gecentreerde kolom, tekst links */


/* over: persoonskaart naast bio */
.over .rij { display: grid; grid-template-columns: 400px 1fr; gap: 72px; align-items: center; max-width: var(--breed); margin: 0 auto; }
.persoon { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; background: #0c0c0c; }
.persoon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; opacity: .9; display: block; transition: opacity 500ms ease-out, transform 500ms ease-out; }
.persoon:hover img { opacity: 1; transform: scale(1.03); }
.persoon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.2) 45%, transparent 100%); }
.persoon figcaption { position: absolute; z-index: 1; left: 20px; bottom: 18px; }
.persoon figcaption small { display: block; font-size: 12px; font-weight: 500; color: var(--t60); }
.persoon figcaption strong { display: block; margin-top: 4px; font-size: 21.5px; font-weight: 300; letter-spacing: -.02em; }
.bio { font-size: 26px; line-height: 1.34; letter-spacing: -.03em; font-weight: 300; color: var(--t85); }
.bio + p { margin-top: 22px; color: var(--t60); }
.bio + p a, .over .link { border-bottom: 1px solid var(--rand-nav); }





/* slot: banner met verloop, als kader */
.banner {
  position: relative; overflow: hidden; text-align: center;
  border: 1px solid var(--rand); border-radius: 6px;
  padding: 88px 24px 80px; margin-top: 0;
}
.banner .verloop .a { width: 70%; height: 150%; left: -18%; top: -110%; background: rgba(255,255,255,.5); }
.banner .verloop .b { width: 52%; height: 120%; right: -14%; top: -60%; background: rgba(255,255,255,.22); }
.banner .uitloop { background: linear-gradient(rgba(0,0,0,.35) 0%, rgba(0,0,0,.2) 40%, #000 100%); }
.banner > div:not(.verloop):not(.korrel):not(.uitloop) { position: relative; }
.banner p { max-width: 640px; margin: 26px auto 40px; font-size: 17px; line-height: 1.65; color: var(--t85); }
.banner .adres { display: block; margin-top: 18px; font-size: 14px; color: var(--t60); }

/* contact */


footer { padding: 16px 0 40px; margin-top: 0; }
footer .c { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; font-size: 14px; color: var(--t40); padding-top: 24px; background: linear-gradient(var(--rand), var(--rand)) top center / calc(100% - 2 * var(--marge)) 1px no-repeat; }
footer img { height: 12px; display: block; }
footer a:hover { color: #fff; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }


/* ---- foto's (sinds 27-09 avond, OOAK-opbouw) ---- */
/* hero met foto: full-bleed, gedimd, verloop naar zwart onderaan */
.hero.foto { background: #000 center / cover no-repeat; }
.hero.foto .uitloop { background: linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 50%, #000 100%); }
.hero.foto .intro { color: var(--t85); }
.hero.kort { min-height: 0; padding: 160px 0 40px; }

/* lopende band met kanalen en gereedschap (de logowand) */


@keyframes loop { to { transform: translateX(-50%); } }

/* fotokaart: beeld boven, tekst eronder (OOAK "Brands that stand out", "Blueprint") */






















/* drie persoonskaarten naast elkaar (OOAK "The Founders") */
.personen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--breed); margin: 64px auto 0; }
.personen .persoon { aspect-ratio: 4 / 5; }
.personen .actie { grid-column: 1 / -1; text-align: center; margin-top: 24px; }

/* galerij: tegels 2:3 zonder radius (OOAK beeldtegels) */




/* tegel met foto in plaats van verloop */





/* kleine kaarten zonder beeld (OOAK "Inside Advisory") */
.klein { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.klein .kaart { padding: 22px 22px 24px; }
.klein p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--t60); }

@media (max-width: 900px) {
  .hero.kort { min-height: 380px; padding: 112px 0 40px; }
  
  .personen { grid-template-columns: 1fr; max-width: 360px; }
  
  .klein { grid-template-columns: 1fr; gap: 12px; }}


/* logorij: platformen waarmee ik werk (OOAK "Our Brands"), monochrome iconen */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: var(--breed); margin: 0 auto; }
.logos div { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 12px 24px; border: 1px solid var(--rand); border-radius: 6px; }
.logos img { height: 30px; width: 80px; object-fit: contain; opacity: .75; transition: opacity var(--hover); }
.logos div:hover img { opacity: 1; }
.logos span { font-size: 13px; color: var(--t60); }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(2, 1fr); gap: 8px; } .logos div { padding: 20px 8px 18px; } .logos img { height: 24px; }}


/* ---- twee kolommen: tekst naast een eigen interface-venster (20-09, terug op 27-09) ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.duo h2 { text-align: left; }
.duo .kicker { text-align: left; }
.duo .tekst { display: grid; gap: 1.2em; margin-top: 28px; font-size: 17px; line-height: 1.65; color: var(--t85); }
@keyframes pols { 50% { opacity: .25; } }
@keyframes erin { from { opacity: 0; transform: translateY(-14px); } }












@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 40px; }}


.vier .nr { margin-top: 22px; }




/* ---- homepage 27-09 (nacht): ondertitel, illustratieblokken, orbit, formulier ---- */



@keyframes stroom { to { stroke-dashoffset: -28; } }

/* orbit: platformen rond het monogram */
.orbit { position: relative; width: min(720px, 100%); aspect-ratio: 1; margin: 56px auto 0; }
.orbit .kern { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border: 1px solid var(--rand-nav); border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 0 0 12px rgba(255,255,255,.03), 0 0 0 24px rgba(255,255,255,.015); }
.orbit .kern img { width: 44px; height: 44px; border-radius: 50%; }
.orbit .ring { position: absolute; left: 50%; top: 50%; border: 1px solid var(--rand); border-radius: 50%; }
.orbit .ring.r1 { width: 46%; height: 46%; margin: -23% 0 0 -23%; }
.orbit .ring.r2 { width: 84%; height: 84%; margin: -42% 0 0 -42%; }
.orbit .item { position: absolute; left: calc(50% + 50% * cos(var(--a))); top: calc(50% + 50% * sin(var(--a))); transform: translate(-50%, -50%); }

.orbit .ik { width: 54px; height: 54px; border: 1px solid var(--rand); border-radius: 14px; background: #000; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.5); }
.orbit .ik img { width: 22px; height: 22px; }
.orbit .ik.tekst { width: auto; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12px; color: var(--t85); white-space: nowrap; }
@keyframes draai { to { transform: rotate(360deg); } }
@keyframes draai-terug { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit .ring, .orbit .ik { animation: none !important; }}



/* formulier */
.formulier { max-width: 720px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.formulier label { display: grid; gap: 6px; font-size: 13px; color: var(--t60); }
.formulier label.breed { grid-column: 1 / -1; }
.formulier input, .formulier select, .formulier textarea { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.05); border: 1px solid var(--rand); border-radius: 6px; padding: 12px 14px; width: 100%; }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { outline: none; border-color: rgba(255,255,255,.5); }
.formulier select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-opacity='.6' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
.formulier select option { color: #000; }
.formulier textarea { min-height: 110px; resize: vertical; }
.formulier .actie { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.formulier .actie small { font-size: 13px; color: var(--t40); }
.formulier .knop { margin: 0; }
@media (max-width: 900px) {
  
  .formulier { grid-template-columns: 1fr; }
  .orbit .ik { width: 42px; height: 42px; border-radius: 11px; } .orbit .ik img { width: 18px; height: 18px; } .orbit .ik.tekst { height: 28px; font-size: 11px; padding: 0 9px; }
  .orbit .kern { width: 72px; height: 72px; } .orbit .kern img { width: 34px; height: 34px; }}


/* ---- ronde 3, 28-09 ---- */
/* duo: 'om' zet het tweede blok links, wat het ook is */
.duo.om > :last-child { order: -1; }
/* breed blok: kop gecentreerd, venster over de volle breedte */
.breed .vs { max-width: var(--breed); margin: 56px auto 0; }
/* cases-kaarten */
.case .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.case .plat { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--t85); }
.case .plat img { width: 14px; height: 14px; }
.case .pilletje { font-size: 11px; color: var(--t60); border: 1px solid var(--rand); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.case .check { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t40); margin-top: 12px; }
.case .check svg { width: 12px; height: 12px; }
/* orbit: alle logo's wit, woordmerken breder */
/* logo's in merkkleur sinds 03-10-2026 (img/logo/kleur/); geen witfilter meer */
.orbit .ik.woord { width: auto; padding: 0 12px; } .orbit .ik.woord img { width: auto; height: 14px; max-width: 70px; }



/* ---- cases-pagina afgemaakt (28-09) ---- */
.case .top .rechts { display: flex; align-items: center; gap: 8px; }
.case .ver { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t60); }
.case .ver svg { width: 11px; height: 11px; }
.case.vol h3 { margin-top: 28px; font-size: 24px; }
.case.vol .getal { margin-top: 16px; font-size: 48px; }
.case.vol .eenheid { padding-bottom: 20px; }
.case.vol .uitleg { margin-top: 20px; display: grid; gap: 0; }
.case.vol .uitleg > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); }
.case.vol .uitleg dt { font-size: 12px; font-weight: 500; color: var(--t60); margin: 0; padding-top: 2px; }
.case.vol .uitleg dd { font-size: 14px; line-height: 1.6; color: var(--t85); }
@media (max-width: 900px) { .case.vol .getal { font-size: 36px; } .case.vol .uitleg > div { grid-template-columns: 1fr; gap: 4px; }}

/* entree: traag en hard uitlopend */
html.js .in { opacity: 0; transform: translateY(26px); transition: opacity var(--entree), transform var(--entree); }
html.js .in.zicht { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .in { opacity: 1; transform: none; transition: none; }
  .verloop i { animation: none !important; }}

@media (max-width: 900px) {
  :root { --sectie: 64px; }
  h1 { font-size: 44px; letter-spacing: -.04em; }
  h2 { font-size: 36px; }
  
  
  .pil { top: 12px; gap: 12px; }
  .pil ul { display: none; }
  .pil .knop { margin-left: auto; }
  .hero { min-height: 0; padding: 112px 0 48px; }
  .hero .intro { font-size: 16px; }
  .verloop i { filter: blur(60px); }
  .verloop .a { width: 120vw; height: 120vw; top: -60vw; left: -40vw; }
  .verloop .b { width: 90vw; height: 90vw; }
  .strip dl { gap: 12px; }
  .strip dt { font-size: 26px; }
  .strip dd { font-size: 13px; }
  .vier { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
  .vier .kaart { padding: 18px; }
  .vier h3 { margin-top: 40px; }
  .zes { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; }
  
  .cases, .cases.twee { grid-template-columns: 1fr; margin-top: 48px; }
  .case .getal { font-size: 34px; white-space: normal; }
  
  
  
  
  
  .stappen { margin-top: 48px; gap: 36px; grid-template-columns: 1fr; }
  .over .rij { grid-template-columns: 1fr; gap: 36px; }
  .persoon { max-width: 360px; }
  .bio { font-size: 21px; }
  
  .banner { padding: 72px 20px 64px; }}

/* 03-10-2026: vier cases naast elkaar op desktop, één kolom op mobiel (de inline stijl brak mobiel); werkwijze-kaarten op mobiel onder elkaar */
.cases.vier-kol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cases.vier-kol { grid-template-columns: 1fr; } .vier { grid-template-columns: 1fr; }}

/* 03-10-2026: zacht groen als enige signaalkleur, alleen voor 'dit gaat goed' (proefvel variant 3, Jips keuze) */
.case .getal b { color: var(--groen); }

/* 03-10-2026: 'Wat je kunt verwachten' op de homepage, plat: lijn en kop, zoals de jaartallen op Over (proefvel variant 2) */
.vier.voordelen { gap: 40px; }
.voordelen .punt { border-top: 1px solid var(--rand-nav); padding-top: 24px; }
.vier.voordelen h3 { margin-top: 0; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: -.03em; }
.vier.voordelen p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--t60); }
@media (max-width: 900px) { .vier.voordelen { gap: 28px; }}

/* ---- OOAK-ronde, 03-10-2026 (Jips keuze na scan van ooakbrands.com) ---- */
/* cijfers: label in een pilletje boven het getal, getal in een rechte letter */
.strip dl { display: flex; justify-content: center; gap: 96px; max-width: none; }
.strip dl > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; }
.strip dt { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 50px; line-height: 1; letter-spacing: -.02em; }
.strip dd { margin-top: 0; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.2; color: #fff; background: #1c1c1c; border: 1px solid rgba(255,255,255,.07); border-radius: 5px; padding: 6px 12px; }
/* werkwijze: twee grote kaarten per rij, zodat de illustraties leesbaar zijn */
.vier.twee-kol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: var(--breed); margin-left: auto; margin-right: auto; }
.twee-kol .kaart { padding: 24px 28px 30px; }
.twee-kol h3 { margin-top: 28px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.twee-kol p { font-size: 15px; }
/* persoonskaart: functie als labeltje linksboven, onderin alleen de naam */
.persoon .tag { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 12px; line-height: 1.2; color: #fff; background: rgba(20,20,20,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 5px 10px; }
.persoon figcaption strong { margin-top: 0; }
/* slotblok: formulier in een kader */
.c.kader { max-width: 900px; border: 1px solid var(--rand); border-radius: 8px; padding: 72px 80px 64px; background: #050505; }
@media (max-width: 900px) {
  .strip dl { justify-content: space-between; align-items: flex-start; gap: 10px; }
  .strip dl > div { gap: 10px; }
  .strip dt { font-size: 32px; }
  .strip dd { font-size: 11px; padding: 4px 7px; white-space: nowrap; }
  .vier.twee-kol { grid-template-columns: 1fr; gap: 12px; }
  .twee-kol .kaart { padding: 18px 18px 24px; }
  .c.kader { margin: 0 16px; padding: 40px 20px 36px; }}

/* 03-10-2026: groene zweem in het verloop (hero-proefvel variant 2, Jips keuze); geldt ook voor de slotbanners */
.verloop .b { background: rgba(134,185,154,.42); }
.verloop .c2 { background: rgba(134,185,154,.14); }
.banner .verloop .b { background: rgba(134,185,154,.36); }

/* 03-10-2026: het formulierkader sluit af met hetzelfde verloop als de hero (groene zweem), net als de slotbanners op de andere pagina's */
.c.kader { position: relative; overflow: hidden; }
.kader > .kop, .kader > form { position: relative; z-index: 1; }
.kader .verloop .a { width: 70%; height: 55%; left: -18%; top: -28%; background: rgba(255,255,255,.42); }
.kader .verloop .b { width: 52%; height: 45%; right: -14%; top: -14%; background: rgba(134,185,154,.36); }
.kader .uitloop { background: linear-gradient(rgba(0,0,0,.3) 0%, rgba(0,0,0,.55) 30%, #050505 62%); }

/* Diensten 03-10-2026: uitkomstzin per pijler, groene vinkjes, logo's in kleur */



.logos img { opacity: 1; }
.logos img.woord { width: 110px; }
/* Cases 03-10-2026: vier vondsten op één rij */


/* Contact 03-10-2026: gegevens links, formulier rechts (zoals Flatline) */
.contact-rij { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.contact-rij .formulier { margin: 0; max-width: none; }
.gegevens h2 { font-size: clamp(32px, 4vw, 48px); }
.gegevens > p { margin-top: 16px; color: var(--t60); line-height: 1.6; max-width: 380px; }
.gegevens dl { margin-top: 36px; display: grid; gap: 0; }
.gegevens dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rand); font-size: 14px; }
.gegevens dt { color: var(--t40); }
.gegevens dd a { color: var(--t); }
@media (max-width: 900px) { .contact-rij { grid-template-columns: 1fr; gap: 40px; }}
/* Over: certificering met groen vinkje */
.over .cert { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--t); }
.over .cert svg { width: 13px; height: 13px; color: var(--groen); }

/* Aanpak 03-10-2026: vier stappen, vier sectievormen. 01 = productshot */
.stap-groot { padding-top: var(--sectie); }
.stap-kop { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; max-width: var(--breed); margin: 0 auto; }
.stap-kop .nr { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 15px; color: var(--groen); letter-spacing: .02em; }
.stap-kop h2 { margin-top: 10px; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; }
.stap-kop .tekst p { font-size: 16px; line-height: 1.65; color: var(--t60); }
.stap-kop .tekst p + p { margin-top: 14px; }

.scherm { max-width: var(--breed); margin: 56px auto 0; border: 1px solid var(--rand); border-radius: 12px; background: #070707; overflow: hidden; font-variant-numeric: tabular-nums; position: relative; }
.scherm .balk { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--rand); font-size: 13px; }
.scherm .balk b { font-weight: 500; color: var(--t); }
.scherm .balk span { color: var(--t40); }


.scherm .kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rand); }
.scherm .kpis > div { padding: 22px 22px 24px; border-left: 1px solid var(--rand); position: relative; }
.scherm .kpis > div:first-child { border-left: 0; }
.scherm .kpis small { display: block; font-size: 12px; color: var(--t40); }
.scherm .kpis strong { display: block; margin-top: 8px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 34px; letter-spacing: -.03em; color: var(--t); }
.scherm .kpis em { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--t40); }

.scherm table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.scherm th { text-align: left; font-weight: 400; font-size: 11.5px; color: var(--t40); padding: 14px 22px 10px; border-bottom: 1px solid var(--rand); position: relative; }
.scherm td { padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--t60); position: relative; }
.scherm td:first-child { color: var(--t); }
.scherm .r { text-align: right; }
.scherm tr.min td:first-child { color: var(--t40); }
.scherm tr.totaal td { border-bottom: 0; border-top: 1px solid var(--rand); color: var(--t); font-weight: 500; }
.scherm .winst { color: var(--t); }
.scherm .plus { color: var(--groen); }

/* ROAS tegen drempel */
.scherm .meter { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; min-width: 220px; }
.scherm .meter b { font-weight: 500; color: var(--t); }
.scherm .meter .as { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); }
.scherm .meter .as i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: rgba(255,255,255,.28); }
.scherm .meter .as i.boven { background: linear-gradient(90deg, rgba(134,185,154,.35), var(--groen)); }
.scherm .meter .as u { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #fff; text-decoration: none; }
.scherm .meter .as u::after { content: attr(data-be); position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--t40); white-space: nowrap; }
.scherm tr td.met-meter { padding-bottom: 24px; }

.scherm .besluit { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--rand); color: var(--t60); white-space: nowrap; }
.scherm .besluit.op { border-color: rgba(134,185,154,.5); color: var(--groen); }
.scherm .besluit.uit { color: var(--t40); border-style: dashed; }

/* annotaties */
.scherm .an { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: var(--groen); color: #000; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }

@media (max-width: 900px) {
  .stap-kop { grid-template-columns: 1fr; gap: 20px; }
  .scherm { margin-top: 40px; border-radius: 10px; }
  .scherm .balk { flex-wrap: wrap; gap: 4px 10px; padding: 14px 16px; }
  
  .scherm .kpis { grid-template-columns: 1fr 1fr; }
  .scherm .kpis > div { padding: 16px; }
  .scherm .kpis > div:nth-child(3) { border-left: 0; }
  .scherm .kpis > div:nth-child(n+3) { border-top: 1px solid var(--rand); }
  .scherm .kpis strong { font-size: 26px; }
  .scherm .mob-weg { display: none; }
  .scherm th, .scherm td { padding-left: 14px; padding-right: 14px; }
  .scherm .meter { min-width: 0; grid-template-columns: 28px 1fr; gap: 8px; }
}
.scherm .mob { display: none; }
.scherm .winst { white-space: nowrap; }
@media (max-width: 900px) {
  .scherm .mob { display: inline; }
  .scherm .meter { display: block; }
  .scherm .meter .as { display: none; }
  .scherm .meter small.mob { display: block; margin-top: 2px; font-size: 10.5px; color: var(--t40); white-space: nowrap; }
  .scherm tr td.met-meter { padding-bottom: 15px; }
  .scherm table { font-size: 13px; }
  .scherm .besluit { padding: 3px 8px; font-size: 11px; }}
/* app-kader: één eigen programma, vier tabbladen */
.scherm .app { display: flex; align-items: center; gap: 22px; padding: 12px 18px; border-bottom: 1px solid var(--rand); background: #0b0b0b; font-size: 12.5px; }
.scherm .app .merk { display: flex; align-items: center; gap: 8px; color: var(--t); font-weight: 500; letter-spacing: .04em; font-size: 11.5px; }
.scherm .app .merk img { height: 16px; width: auto; }
.scherm .app .klant { margin-left: auto; color: var(--t40); }

@media (max-width: 900px) {
  .scherm .app { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .scherm .app .klant { margin-left: 0; width: 100%; order: 3; }
  }
.scherm .an.in-tekst { position: relative; display: inline-block; margin-left: 10px; vertical-align: 1px; }
.scherm .app b { font-weight: 500; color: var(--t); font-size: 13px; }
.scherm .app .merk img { height: 18px; }

/* 02: licht vlak, groot en typografisch */
section.licht { --t: #0b0b0b; --t85: rgba(0,0,0,.85); --t60: rgba(0,0,0,.66); --t40: rgba(0,0,0,.6); --rand: rgba(0,0,0,.14); --groen: #2F6446;
  background: #E3E3E3; color: var(--t); padding-bottom: var(--sectie); margin-top: var(--sectie); }   /* 10-10-2026: neutraal grijs, was beige #DDDAD3 */
.licht .meting-kop { max-width: var(--breed); margin: 56px auto 0; display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--t40); padding-bottom: 14px; border-bottom: 1px solid var(--rand); }
.licht .meting-kop span:first-child { color: var(--t); font-weight: 500; }
.platformen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.platform { padding: 40px 32px 44px 0; }
.platform + .platform { padding-left: 32px; border-left: 1px solid var(--rand); }
.platform .naam { font-size: 14px; font-weight: 500; }
.platform .groot { margin-top: 18px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(44px, 5.4vw, 74px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.platform .was { color: rgba(0,0,0,.45); }
.platform .pijl { color: var(--groen); font-size: .55em; margin: 0 .18em; vertical-align: .22em; }
.platform .staaf { margin-top: 26px; }
.platform .staaf + .staaf { margin-top: 14px; }
.platform .staaf i { display: block; height: 14px; border-radius: 3px; background: rgba(0,0,0,.14); }
.platform .staaf.na i { background: var(--groen); }
.platform .staaf small { display: block; margin-top: 7px; font-size: 12px; color: var(--t40); }
.wat-veranderde { max-width: var(--breed); margin: 8px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--rand); padding-top: 28px; }
.wat-veranderde p { font-size: 14.5px; line-height: 1.6; color: var(--t60); }
.wat-veranderde b { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--t); }

/* 03: band met het groene verloop */
section.verloopband { position: relative; overflow: hidden; padding-bottom: var(--sectie); }
section.verloopband > .c { position: relative; }
.verloopband .verloop .a { width: 60vw; height: 60vw; left: -18vw; top: -26vw; background: rgba(255,255,255,.30); }
.verloopband .verloop .b { width: 54vw; height: 54vw; right: -14vw; top: 10vw; background: rgba(134,185,154,.42); }
.verloopband .uitloop { background: linear-gradient(#000 0%, rgba(0,0,0,.35) 22%, rgba(0,0,0,.15) 60%, #000 100%); }
.verloopband .korrel { position: absolute; inset: 0; pointer-events: none; }
.test { max-width: var(--breed); margin: 56px auto 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: start; }
.varianten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.varianten figure { margin: 0; }
.varianten figcaption { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t60); margin-bottom: 12px; }
.varianten figcaption span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rand-nav); display: grid; place-items: center; font-size: 11px; color: var(--t); }
.schets-pagina { border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); overflow: hidden; }
.schets-pagina.b { border-color: rgba(134,185,154,.55); }
.schets-pagina .bovenbalk { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.schets-pagina .bovenbalk i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); width: 34px; }
.schets-pagina .bovenbalk i:first-child { width: 54px; background: rgba(255,255,255,.3); }
.schets-pagina .product { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px 16px 22px; }
.schets-pagina .foto { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); }
.schets-pagina .info { display: flex; flex-direction: column; gap: 8px; }
.schets-pagina .info i { display: block; height: 7px; border-radius: 3px; background: rgba(255,255,255,.16); }
.schets-pagina .info .t1 { width: 90%; height: 10px; background: rgba(255,255,255,.4); }
.schets-pagina .info .t2 { width: 64%; }
.schets-pagina .info .prijs { width: 36%; height: 12px; background: rgba(255,255,255,.55); margin-top: 4px; }
.schets-pagina .info .t3 { width: 80%; margin-top: 6px; } .schets-pagina .info .t4 { width: 58%; }
.schets-pagina .knopje { margin-top: 4px; padding: 7px 0; border-radius: 5px; background: #fff; color: #000; font-size: 10px; font-weight: 500; text-align: center; }
.schets-pagina .regel { font-size: 10px; color: var(--groen); border: 1px dashed rgba(134,185,154,.7); border-radius: 4px; padding: 4px 6px; }
.uitslag { margin-top: 14px; font-size: 12px; color: var(--t60); }
.uitslag b { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 44px; letter-spacing: -.04em; color: var(--t); line-height: 1.05; }
.uitslag.win b { color: var(--groen); }
.testkaart { border-radius: 10px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); padding: 6px 22px; }
.testkaart div { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.testkaart div:last-child { border-bottom: 0; }
.testkaart dt { font-size: 11px; color: var(--t40); }
.testkaart dd { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--t85); }
.testkaart .uitkomst dd { color: var(--groen); }


/* 04: donkergrijs vlak met weekraster */
section.vlak { background: #0d0d0d; padding-bottom: var(--sectie); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.week { max-width: var(--breed); margin: 56px auto 0; }
.week-kop { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; color: var(--t40); padding-bottom: 14px; border-bottom: 1px solid var(--rand); }
.week-kop span:first-child { color: var(--t); font-weight: 500; }
.raster { margin-top: 18px; display: grid; gap: 10px; }
.raster-kop, .raster-rij { display: grid; grid-template-columns: 130px repeat(7, 1fr); gap: 10px; align-items: center; }
.raster-kop span { font-size: 12px; color: var(--t40); text-align: center; }
.raster-rij .wat { font-size: 13.5px; color: var(--t85); }
.raster .dag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-radius: 6px; background: rgba(255,255,255,.03); }
.raster .dag i { height: 26px; border-radius: 3px; background: rgba(134,185,154,.55); position: relative; }
.raster .dag i.melding { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.raster .dag i.melding::after { content: attr(data-nr); position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #000; font-size: 10px; font-weight: 600; line-height: 18px; text-align: center; }
.legenda { display: flex; gap: 24px; margin-top: 18px; font-size: 12px; color: var(--t40); }
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; background: rgba(134,185,154,.55); }
.legenda i.melding { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.meldingen { max-width: var(--breed); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.melding-kaart { position: relative; border: 1px solid var(--rand); border-radius: 8px; padding: 22px 22px 24px; background: #000; }
.melding-kaart .nr { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #000; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.melding-kaart small { font-size: 12px; color: var(--t40); }
.melding-kaart p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--t85); }

@media (max-width: 900px) {
  section.licht { margin-top: 96px; }
  .licht .meting-kop { flex-direction: column; gap: 4px; margin-top: 56px; }
  .platformen { grid-template-columns: 1fr; }
  .platform, .platform + .platform { padding: 28px 0 30px; border-left: 0; border-top: 1px solid var(--rand); }
  .platform:first-child { border-top: 0; }
  .wat-veranderde { grid-template-columns: 1fr; gap: 18px; }
  .test { grid-template-columns: 1fr; margin-top: 48px; }
  .varianten { gap: 12px; }
  .schets-pagina .product { grid-template-columns: 1fr; padding: 12px; gap: 10px; }
  .uitslag b { font-size: 34px; }
  .week { margin-top: 48px; }
  .week-kop { flex-direction: column; gap: 4px; }
  .raster-kop, .raster-rij { grid-template-columns: 64px repeat(7, 1fr); gap: 4px; }
  .raster-rij .wat { font-size: 11px; }
  .raster .dag { grid-template-columns: repeat(2, 1fr); padding: 4px; gap: 3px; }
  .raster .dag i { height: 12px; }
  .raster .dag i.melding::after { width: 14px; height: 14px; line-height: 14px; font-size: 9px; top: -7px; right: -7px; }
  .meldingen { grid-template-columns: 1fr; gap: 12px; }}
.varianten figure { display: flex; flex-direction: column; } .varianten .schets-pagina { flex: 1; }
@media (max-width: 900px) {
  .scherm table { table-layout: fixed; }
  .scherm th, .scherm td { padding-left: 10px; padding-right: 10px; }
  .scherm th:first-child, .scherm td:first-child { width: 30%; padding-left: 14px; }
  .scherm .besluit { padding: 2px 7px; font-size: 10.5px; }}



/* Aanpak 03-10-2026 (avond): gewone zin bovenaan, label Voorbeeld, regel In het echt */
.stap-kop .tekst p.kern { font-size: 21px; line-height: 1.4; color: var(--t); letter-spacing: -.01em; margin-bottom: 18px; }
.voorbeeld { max-width: var(--breed); margin: 48px auto 0; display: flex; }
.voorbeeld span { font-size: 11.5px; letter-spacing: .02em; color: var(--t60); border: 1px dashed var(--rand-nav, rgba(255,255,255,.2)); border-radius: 999px; padding: 5px 12px; }
.licht .voorbeeld span { border-color: rgba(0,0,0,.25); }
.voorbeeld + .scherm, .voorbeeld + .meting-kop, .voorbeeld + .test, .voorbeeld + .week { margin-top: 16px; }
.stappen.drie-stappen { grid-template-columns: repeat(3, 1fr); }

/* Certificeringen als kaarten (Over) */
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--breed); margin: 48px auto 0; }
.cert { position: relative; overflow: hidden; border: 1px solid var(--rand); border-radius: 12px; padding: 28px 26px 26px; background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.06), transparent 60%), #050505; }
.cert::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(134,185,154,.16), transparent); }
.cert .logo { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.cert .logo img { width: 30px; height: 30px; object-fit: contain; }
.cert small { display: block; margin-top: 26px; font-size: 12px; color: var(--t40); }
.cert b { display: block; margin-top: 4px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 24px; letter-spacing: -.03em; line-height: 1.2; }
.cert .status { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 12px; color: var(--groen); }
.cert .status svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
  .stappen.drie-stappen { grid-template-columns: 1fr; }
  .certs { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .stap-kop .tekst p.kern { font-size: 19px; }
  .voorbeeld { margin-top: 40px; }
}
/* Formulier 03-10-2026: verborgen veld tegen bots, privacyregel */
.formulier .weg { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier .privacyregel { grid-column: 1 / -1; font-size: 12px; color: var(--t40); }
.formulier .privacyregel a { color: var(--t60); text-decoration: underline; text-underline-offset: 2px; }


/* Diensten 03-10-2026: Voor wie */
.voorwie { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; max-width: var(--breed); margin: 48px auto 0; }
.voorwie .past { border: 1px solid var(--rand); border-radius: 10px; padding: 28px 28px 30px; background: #050505; }
.voorwie .past:first-child { border-color: rgba(134,185,154,.35); }
.voorwie h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; letter-spacing: -.03em; }
.voorwie ul { list-style: none; margin-top: 18px; }
.voorwie li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--rand); font-size: 15px; line-height: 1.5; color: var(--t85); }
.voorwie li svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--groen); }
.voorwie .minder li { color: var(--t60); }
.voorwie .minder li i { flex: none; width: 10px; height: 1.5px; margin: 11px 2px 0; background: var(--t40); }

/* Diensten: Bureau of Van Leest */
.vergelijk-tabel { max-width: var(--breed); margin: 48px auto 0; border: 1px solid var(--rand); border-radius: 10px; overflow: hidden; }
.vergelijk-tabel .rij { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr; }
.vergelijk-tabel .rij + .rij { border-top: 1px solid var(--rand); }
.vergelijk-tabel span { padding: 18px 22px; font-size: 15px; line-height: 1.5; }
.vergelijk-tabel .wat { color: var(--t40); font-size: 13px; padding-top: 20px; }
.vergelijk-tabel .bureau { color: var(--t60); }
.vergelijk-tabel .ik { color: var(--t); background: rgba(134,185,154,.07); border-left: 1px solid rgba(134,185,154,.25); }
.vergelijk-tabel .kop-rij span { font-size: 12px; font-weight: 500; color: var(--t40); padding-top: 16px; padding-bottom: 14px; }
.vergelijk-tabel .kop-rij .ik { color: var(--groen); }

/* Contact: Wat je krijgt, met voorbeeldanalyse */
.krijgt { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; max-width: var(--breed); margin: 56px auto 0; }
.krijgt .feiten div { padding: 18px 0; border-top: 1px solid var(--rand); }
.krijgt .feiten div:last-child { border-bottom: 1px solid var(--rand); }
.krijgt .feiten dt { font-size: 12px; font-weight: 500; color: var(--t40); }
.krijgt .feiten dd { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--t85); }
.krijgt .feiten div:first-child dd { color: var(--groen); }
.analyse-vel .voorbeeld-label { display: inline-block; font-size: 11.5px; color: var(--t60); border: 1px dashed rgba(255,255,255,.2); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.vel { background: #E2DFD8; color: #0b0b0b; border-radius: 10px; padding: 34px 34px 30px; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: rotate(-.6deg); }
.vel-kop span { font-size: 11px; font-weight: 500; color: #2F6446; }
.vel-kop b { display: block; margin-top: 6px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 28px; letter-spacing: -.03em; line-height: 1.15; }
.vel-kop small { display: block; margin-top: 4px; font-size: 12px; color: rgba(0,0,0,.45); }
.vel .samenvatting { margin-top: 18px; padding: 14px 16px; border-radius: 6px; background: rgba(47,100,70,.10); font-size: 14px; line-height: 1.5; color: #0b0b0b; }
.vel ol { list-style: none; margin-top: 8px; counter-reset: b; }
.vel li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid rgba(0,0,0,.1); counter-increment: b; }
.vel li::before { content: counter(b); position: absolute; left: 0; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: #0b0b0b; color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
.vel li .soort { font-size: 11px; font-weight: 500; color: rgba(0,0,0,.45); }
.vel li b { display: block; margin-top: 2px; font-size: 15.5px; font-weight: 500; }
.vel li p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: rgba(0,0,0,.62); }
.vel li em { display: inline-block; margin-top: 8px; font-style: normal; font-size: 12px; font-weight: 500; color: #2F6446; }
.vel .eerst { margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: rgba(0,0,0,.75); }
.vel .eerst span { display: block; font-size: 11px; font-weight: 500; color: rgba(0,0,0,.45); margin-bottom: 4px; }

@media (max-width: 900px) {
  .voorwie { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .voorwie .past { padding: 22px 20px 24px; }
  .vergelijk-tabel { margin-top: 40px; }
  .vergelijk-tabel .rij { grid-template-columns: 1fr 1fr; }
  .vergelijk-tabel .wat { grid-column: 1 / -1; padding: 14px 16px 0; }
  .vergelijk-tabel .kop-rij .wat { display: none; }
  .vergelijk-tabel span { padding: 10px 16px 14px; font-size: 14px; }
  .krijgt { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; }
  .vel { padding: 24px 20px 22px; transform: none; }
  .vel-kop b { font-size: 23px; }}

/* Contact: de analyse als stapel vellen en twaalf onderdelen (03-10-2026, laat) */
.stapel { position: relative; padding: 18px 0 0 18px; }
.stapel .vel { position: relative; }
.stapel .vel.achter { position: absolute; inset: 0 18px 18px 0; padding: 22px 26px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.stapel .vel.achter .vel-kop b { font-size: 18px; }
.stapel .vel.een { transform: rotate(2.2deg) translate(10px, -6px); background: #D4D1CA; }
.stapel .vel.twee { transform: rotate(4.4deg) translate(22px, -10px); background: #C7C4BC; }
.onderdelen-kop { max-width: var(--breed); margin: 64px auto 0; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rand); }
.onderdelen-kop h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 28px; letter-spacing: -.03em; }
.onderdelen-kop span { font-size: 13px; color: var(--t40); }
.onderdelen { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.onderdeel { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--rand); }
.onderdeel:not(:nth-child(4n+1)) { padding-left: 20px; border-left: 1px solid var(--rand); }
.onderdeel .nr { font-size: 11px; color: var(--groen); font-weight: 500; }
.onderdeel b { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; }
.onderdeel p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--t60); }
@media (max-width: 900px) {
  .stapel { padding: 10px 0 0 6px; }
  .stapel .vel.een { transform: rotate(1.5deg) translate(4px, -4px); }
  .stapel .vel.twee { transform: rotate(3deg) translate(8px, -6px); }
  .onderdelen-kop { flex-direction: column; gap: 4px; margin-top: 48px; }
  .onderdelen { grid-template-columns: 1fr 1fr; }
  .onderdeel, .onderdeel:not(:nth-child(4n+1)) { padding: 16px 12px 18px 0; border-left: 0; }
  .onderdeel:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--rand); }}
.analyse-vel .voorbeeld-label { position: relative; z-index: 2; margin-bottom: 22px; }
/* Certificaten per platform (03-10-2026) */
.cert ul { list-style: none; margin-top: 14px; display: grid; gap: 6px; }
.cert li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--t85); }
.cert li svg { flex: none; width: 12px; height: 12px; color: var(--groen); }
.certs + * { margin-top: 0; }
.klein.kolom4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .klein.kolom4 { grid-template-columns: 1fr; }}

/* Cases: uitgelichte case met echte maandcijfers (03-10-2026) */
.uitgelicht { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start; padding: 32px 30px 30px; max-width: var(--breed); margin: 0 auto 20px; }
.uitgelicht h2 { margin-top: 24px; font-size: 36px; line-height: 1.1; }
.uitgelicht .getal { font-size: 56px !important; }
@media (max-width: 900px) {
  .uitgelicht { grid-template-columns: 1fr; gap: 28px; padding: 22px 18px; }
  .uitgelicht h2 { font-size: 28px; }
  .uitgelicht .getal { font-size: 44px !important; }
}
.uitgelicht + .cases { margin-top: 0; }

/* Diensten 03-10-2026: vier onderdelen als brede rijen, vergelijking op een licht vlak */
.pijlerrijen { max-width: var(--breed); margin: 48px auto 0; border-bottom: 1px solid var(--rand); }
.pijlerrij { display: grid; grid-template-columns: 90px 1fr 1.1fr; gap: 32px; padding: 36px 0; border-top: 1px solid var(--rand); align-items: start; }
.pijlerrij .nr { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 44px; line-height: 1; letter-spacing: -.04em; color: var(--groen); }
.pijlerrij h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 32px; letter-spacing: -.03em; line-height: 1.1; }
.pijlerrij .kern p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--t85); max-width: 30em; }
.pijlerrij ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding-top: 6px; }
.pijlerrij li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--t60); }
.pijlerrij li svg { flex: none; width: 12px; height: 12px; margin-top: 5px; color: var(--groen); }
@media (max-width: 900px) {
  .pijlerrij { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .pijlerrij .nr { font-size: 32px; }
  .pijlerrij h3 { font-size: 26px; }
  .pijlerrij ul { grid-template-columns: 1fr; }}
/* Pijltje tussen voor en na (03-10-2026): lucht eromheen, iets kleiner, op de middellijn */
.case .getal b { display: inline-block; padding: 0 .2em; letter-spacing: 0; font-size: .78em; transform: translateY(-.06em); }


/* Cases: cijfers achter een klik (03-10-2026) */
.case .cijfers { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.case .cijfers summary { list-style: none; cursor: pointer; padding: 14px 0 2px; font-size: 13px; font-weight: 500; color: var(--groen); display: flex; align-items: center; gap: 8px; }
.case .cijfers summary::-webkit-details-marker { display: none; }
.case .cijfers summary::after { content: "+"; font-weight: 400; font-size: 16px; line-height: 1; }
.case .cijfers[open] summary::after { content: "−"; }
.case .cijfers .periode { margin-top: 10px; font-size: 12px; color: var(--t40); }
.case .cijfers .maat { margin-top: 16px; }
.case .cijfers .naam { display: block; font-size: 12.5px; color: var(--t85); margin-bottom: 6px; }
.case .cijfers .paar { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; margin-top: 4px; }
.case .cijfers .paar .l { font-size: 11.5px; color: var(--t40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case .cijfers .paar i { display: block; height: 10px; border-radius: 2px; min-width: 2px; }
.case .cijfers .paar i.oud { background: rgba(255,255,255,.22); }
.case .cijfers .paar i.nieuw { background: var(--groen); }
.case .cijfers .paar b { font-size: 12.5px; font-weight: 500; color: var(--t); min-width: 64px; text-align: right; }
.case .cijfers .paar { grid-template-columns: 74px minmax(0, 1fr) 72px; }

/* Cases: zes van ruim honderd, branches en "Vraag het" (03-10-2026) */
.meer-kop { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: end; }
.meer-kop p { font-size: 17px; line-height: 1.55; color: var(--t85); }
.branches { max-width: var(--breed); margin: 40px auto 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; border-top: 1px solid var(--rand); padding-top: 28px; }
.branches h3 { font-size: 13px; font-weight: 500; color: var(--t40); }
.branches ul { list-style: none; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.branches li { font-size: 14px; color: var(--t85); border: 1px solid var(--rand); border-radius: 999px; padding: 6px 12px; }
.vraag { position: relative; overflow: hidden; max-width: var(--breed); margin: 40px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 40px; border: 1px solid var(--rand); border-radius: 10px; background: #050505; }
.vraag > div:not(.verloop):not(.korrel):not(.uitloop), .vraag > .knop { position: relative; }
.vraag .verloop .a { width: 60%; height: 220%; left: -20%; top: -150%; background: rgba(255,255,255,.28); }
.vraag .verloop .b { width: 50%; height: 200%; right: -10%; top: -40%; background: rgba(134,185,154,.32); }
.vraag .uitloop { background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.55)); }
.vraag h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 28px; line-height: 1.2; letter-spacing: -.03em; max-width: 560px; }
.vraag p { margin-top: 8px; font-size: 15px; color: var(--t85); }
.vraag .knop { flex: none; }
@media (max-width: 900px) {
  .meer-kop { grid-template-columns: 1fr; gap: 14px; }
  .branches { grid-template-columns: 1fr; gap: 22px; }
  .vraag { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .vraag h3 { font-size: 23px; }}
.cases.twee { align-items: start; }
.vraag p a { color: var(--t); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }


/* ===== Review 04-10-2026 (designer, prospect) ===== */
/* D2 mobiel menu: alleen onder 900px */
.pil .menu { display: none; }
@media (max-width: 900px) {
  .pil .menu { display: block; position: relative; }
  .pil .menu summary { list-style: none; cursor: pointer; width: 38px; height: 36px; display: grid; place-content: center; gap: 5px; border-radius: 4px; }
  .pil .menu summary::-webkit-details-marker { display: none; }
  .pil .menu summary i { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform var(--hover); }
  .pil .menu[open] summary i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .pil .menu[open] summary i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .pil .menu-lijst { position: absolute; right: -8px; top: calc(100% + 14px); min-width: 220px; display: grid; padding: 8px; border: 1px solid var(--rand-nav); border-radius: 8px; background: #0b0b0b; }
  .pil .menu-lijst a { padding: 12px 14px; font-size: 16px; color: var(--t85); border-radius: 4px; }
  .pil .menu-lijst a:active { background: rgba(255,255,255,.06); }
  .pil .knop { padding: 8px 12px; }
}
/* footer met paginalinks */
footer .voetlinks { display: flex; gap: 18px; flex-wrap: wrap; }
footer .voetlinks a { color: var(--t60); }
@media (max-width: 900px) { footer .c { flex-direction: column; align-items: flex-start; gap: 14px; } }
/* D5 focus en huidige pagina */
:focus-visible { outline: 2px solid var(--groen); outline-offset: 3px; border-radius: 2px; }
.formulier input:focus-visible, .formulier select:focus-visible, .formulier textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(134,185,154,.35); }
/* D7 losse woorden en regellengte */
h3, .bio { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
.kop p { max-width: 34em; margin-left: auto; margin-right: auto; }
.banner p { max-width: 36em; margin-left: auto; margin-right: auto; }
.stap-kop .tekst p { max-width: 38em; }
/* D9 cijferrij in dezelfde letter als alle grote cijfers */
.strip dt { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; }
/* 3: groen alleen voor 'dit gaat goed' */
.pijlerrij .nr, .stap-kop .nr { color: var(--t40); }
.case .cijfers summary { color: var(--t); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); }
.krijgt .feiten div:first-child dd { color: var(--t); }
.vergelijk-tabel .kop-rij .ik { color: var(--t); }
/* 3: kaarttitels in één stijl */
.klein h3, .zes h3, .stap h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 21px; letter-spacing: -.02em; }
.stap-kop h2 { font-size: clamp(36px, 4.4vw, 52px); }
/* 3: secundaire knop */
.knop.tweede { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.knop.tweede:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
/* 3: een mens in de slotbanner */
.banner .wie { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; color: var(--t85); }
.banner .wie img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.banner .wie b { font-weight: 500; color: #fff; }
@media (max-width: 900px) { .strip dd { white-space: normal; text-align: center; max-width: 118px; line-height: 1.3; } }
@media (max-width: 900px) { .strip dl { align-items: flex-end; } }
.vier.voordelen.drie { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .vier.voordelen.drie { grid-template-columns: 1fr; } }

/* Contact: de analyse als presentatie (04-10-2026), 16:9 */
.deck { position: relative; padding: 18px 0 0 18px; }
.dia { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: #E2DFD8; color: #0b0b0b; box-shadow: 0 30px 80px rgba(0,0,0,.5); container-type: inline-size; }
.dia.achter { position: absolute; inset: 0 18px auto 0; padding: 5cqw 6cqw; }
.dia.een { transform: rotate(2.2deg) translate(10px, -6px); background: #D4D1CA; }
.dia.twee { transform: rotate(4.4deg) translate(22px, -10px); background: #C7C4BC; }
.dia.achter .dia-label { font-size: 2.2cqw; color: rgba(0,0,0,.5); }
.dia.achter b { display: block; margin-top: 1cqw; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 4.4cqw; }
.dia.voor { padding: 4.4cqw 5.2cqw 0; display: flex; flex-direction: column; overflow: hidden; }
.dia-top { display: flex; justify-content: space-between; font-size: 2cqw; color: rgba(0,0,0,.5); }
.dia-kop { margin-top: 2.6cqw; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 5cqw; line-height: 1.1; letter-spacing: -.03em; }
.dia-drie { margin-top: 3.4cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; }
.dia-drie > div { border-top: 1px solid rgba(0,0,0,.18); padding-top: 1.8cqw; }
.dia-drie span { font-size: 1.9cqw; color: rgba(0,0,0,.55); }
.dia-drie strong { display: block; margin-top: .6cqw; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 6.4cqw; line-height: 1; letter-spacing: -.04em; color: #2F6446; }
.dia-drie p { margin-top: 1cqw; font-size: 2.1cqw; line-height: 1.35; color: rgba(0,0,0,.7); }
.dia-eerst { margin-top: auto; margin-bottom: 4cqw; font-size: 2.2cqw; line-height: 1.4; color: rgba(0,0,0,.8); }
.dia-eerst span { display: inline-block; margin-right: 1.2cqw; padding: .3cqw 1.2cqw; border-radius: 999px; background: #0b0b0b; color: #fff; font-size: 1.8cqw; }
.dia-voortgang { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.1); }
.dia-voortgang i { display: block; height: 100%; background: #0b0b0b; }
@media (max-width: 900px) { .deck { padding: 10px 0 0 6px; } .dia.een { transform: rotate(1.5deg) translate(4px, -4px); } .dia.twee { transform: rotate(3deg) translate(8px, -6px); } }
/* Slotbanner: twee knoppen (04-10-2026) */
.banner .knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Diensten: prijsblok (04-10-2026) */
.prijs { max-width: var(--breed); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center; padding: 36px 40px; border: 1px solid var(--rand); border-radius: 10px; background: #070707; }
.prijs .bedrag small { display: block; font-size: 13px; color: var(--t60); }
.prijs .bedrag strong { display: block; margin-top: 6px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 64px; line-height: 1; letter-spacing: -.045em; }
.prijs .bedrag span { display: block; margin-top: 8px; font-size: 14px; color: var(--t60); }
.prijs ul { list-style: none; display: grid; gap: 10px; }
.prijs li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--t85); }
.prijs li svg { flex: none; width: 13px; height: 13px; margin-top: 5px; color: var(--groen); }
@media (max-width: 900px) { .prijs { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; } .prijs .bedrag strong { font-size: 52px; } .prijs .knop { justify-self: start; } }


/* ---- werkwijze-kaarten: beelden plat, elk een eigen opbouw (10-10-2026) ----
   Gekozen op proef-visuals/: kaart 1-3 uit versie 5, kaart 4 optie B. Geen 3D-transform, blend-modes of CSS-filters
   op svg (Safari hapert); bijsnijden met clip-path. Klassen in de svg zijn kort, dus altijd onder .scene text. */
.met-scene .kaart { padding: 14px 14px 30px; }
.met-scene .nr, .met-scene h3, .met-scene p { padding: 0 12px; }
.met-scene .nr { margin-top: 26px; }
.scene { position: relative; height: 300px; border-radius: 4px; overflow: hidden; clip-path: inset(0 round 4px);
  background: #000; border: 1px solid rgba(255,255,255,.06); }
.scene .lichtval { position: absolute; inset: 0;
  background: radial-gradient(90% 85% at var(--lx, 50%) -30%, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(60% 60% at calc(100% - var(--lx, 50%)) 0%, rgba(134,185,154,.10), rgba(134,185,154,0) 70%); }
.scene .uitval { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,.7) 92%, #000 100%); }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.scene text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; fill: rgba(255,255,255,.6); }
.scene text.z { fill: rgba(255,255,255,.5); }
.scene text.w { fill: rgba(255,255,255,.88); }
.scene text.n { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 17px; letter-spacing: -.02em; fill: #fff; }
.scene text.n.dim { fill: rgba(255,255,255,.45); }
.scene text.n.reus { font-size: 34px; }
.scene text.g { fill: var(--groen); font-weight: 500; }
.scene text.cat { fill: rgba(0,0,0,.55); font-weight: 500; }
.scene text.zw { fill: #000; font-weight: 500; }
.scene text.bol { font-size: 11px; }
@media (max-width: 900px) {
  .scene { height: 230px; }
  .scene text { font-size: 16px; } .scene text.n { font-size: 19px; } .scene text.n.reus { font-size: 36px; }
  .scene.s-pagina text { font-size: 14px; } .scene.s-pagina text.n { font-size: 19px; } .scene text.bol { font-size: 13px; }
  .scene.s-tracking text:not(.n) { font-size: 13px; }   /* "Bestellingen · Google Ads" past dan naast het vinkje */
}

/* ---- vensters op Home in de stijl van de werkwijze-kaarten (10-10-2026, proef-visuals/vensters.html) ----
   Prefix vs-. Strategie, Experimenten en Dagelijks beheer zijn HTML; het trackingschema is svg met een eigen
   versie voor de telefoon (.vs-stapel). */
.vs { position: relative; border: 1px solid var(--rand); border-radius: 6px; background: #000; overflow: hidden; isolation: isolate; }
.vs::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 55% at var(--lx, 50%) -16%, rgba(255,255,255,.17), rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 72%),
    radial-gradient(55% 40% at calc(100% - var(--lx, 50%)) 0%, rgba(134,185,154,.09), rgba(134,185,154,0) 70%); }
.vs-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 26px 0; font-size: 12px; color: rgba(255,255,255,.5); }
.vs-voet { display: block; padding: 16px 26px 20px; font-size: 11px; color: var(--t40); }
.vs b, .vs small, .vs em, .vs i { font-style: normal; }
.vs-cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 26px 8px; }
.vs-cijfers b { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
.vs-cijfers small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.5); }
.vs-rij { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 14px; font-size: 13px; }
.vs-rij > span { color: rgba(255,255,255,.88); }
.vs-rij small { font-size: 12px; color: rgba(255,255,255,.5); }
.vs .g { color: var(--groen); }

/* banen (Strategie en Experimenten) */
.vs-baan { position: relative; height: 2px; background: rgba(255,255,255,.10); border-radius: 1px; }
.vs-vul { position: absolute; top: -2px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); transform-origin: left center;
  transition: transform 1.6s cubic-bezier(.22,1,.36,1) .25s; }
html.js .in:not(.zicht) .vs-vul { transform: scaleX(0); }

/* Strategie: winst per €1, nullijn op 40% */
.vs-as { position: relative; height: 14px; margin: 26px 26px 0; font-size: 11px; color: rgba(255,255,255,.45); }
.vs-as span { position: absolute; top: 0; line-height: 14px; }
.vs-as span:first-child { right: calc(60% + 10px); }
.vs-as span:last-child { left: calc(40% + 10px); }
.vs-as::before { content: ""; position: absolute; left: 40%; top: 0; bottom: -10px; width: 1px; background: rgba(255,255,255,.3); }
.vs-winst { list-style: none; padding: 10px 26px 0; }
.vs-winst li { padding: 16px 0 20px; border-top: 1px solid rgba(255,255,255,.07); }
.vs-winst em { font-size: 11px; padding: 3px 10px; border: 1px solid var(--rand); border-radius: 999px; color: rgba(255,255,255,.75); min-width: 92px; text-align: center; }
.vs-winst .op em { color: var(--groen); border-color: rgba(134,185,154,.55); }
.vs-winst .uit .vs-rij > span, .vs-winst .uit em { color: rgba(255,255,255,.4); }
.vs-staaf { position: relative; height: 10px; margin-top: 18px; }
.vs-staaf::before { content: ""; position: absolute; left: 40%; top: -9px; bottom: -9px; width: 1px; background: rgba(255,255,255,.3); }
.vs-staaf i { position: absolute; top: 0; height: 10px; transform-origin: left center; transition: transform 1.4s cubic-bezier(.22,1,.36,1) .25s; }
.vs-winst .op .vs-staaf i, .vs-winst .houd .vs-staaf i { background: var(--groen); border-radius: 0 3px 3px 0; box-shadow: 0 0 12px rgba(134,185,154,.45); }
.vs-winst .uit .vs-staaf i { background: rgba(255,255,255,.22); border-radius: 3px 0 0 3px; transform-origin: right center; }
html.js .in:not(.zicht) .vs-staaf i { transform: scaleX(0); }
.vs-staaf b { position: absolute; top: 50%; transform: translateY(-50%); font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.vs-winst .uit .vs-staaf b { color: rgba(255,255,255,.5); }

/* Tracking */
.vs-schema { display: block; width: 100%; height: auto; padding: 18px 20px 0; }
.vs-schema text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; fill: rgba(255,255,255,.5); }
.vs-schema text.w { fill: rgba(255,255,255,.9); font-size: 14px; }
.vs-schema text.p { font-size: 11px; fill: rgba(255,255,255,.75); }
.vs-stroom { stroke: var(--groen); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 12; }
.vs-stapel { display: none; }
@media (prefers-reduced-motion: reduce) { .vs-stroom { animation: none; } }

/* Experimenten */
.vs-split { display: grid; grid-template-columns: 1fr 1fr; margin: 20px 26px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; position: relative; }
.vs-split::after { content: "A | B"; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-size: 10px; color: rgba(255,255,255,.6);
  background: #000; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.vs-helft { padding: 14px 16px 18px; }
.vs-helft + .vs-helft { border-left: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.vs-helft > small { display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 12px; }
.vs-helft.b > small { color: var(--groen); }
.vs-pg { display: grid; grid-template-columns: 52px 1fr; gap: 12px; }
.vs-foto { display: block; height: 64px; border-radius: 4px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.vs-pg span { display: block; font-size: 12px; color: rgba(255,255,255,.88); }
.vs-pg b { display: block; margin-top: 4px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 16px; }
.vs-knop { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 500; color: #000; background: #fff; border-radius: 3px; padding: 5px 9px; }
.vs-pg mark { display: block; margin-top: 8px; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.9); background: rgba(134,185,154,.1);
  border: 1px solid rgba(134,185,154,.6); border-radius: 4px; padding: 4px 7px; box-shadow: 0 0 14px rgba(134,185,154,.25); }
.vs-uitslag { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 26px 0; }
.vs-uitslag small { display: block; font-size: 12px; color: rgba(255,255,255,.5); }
.vs-uitslag b { display: inline-block; margin-top: 6px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 34px; letter-spacing: -.03em; }
.vs-uitslag b.dim { color: rgba(255,255,255,.45); }
.vs-uitslag em { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--groen); }
.vs-zeker { padding: 24px 26px 0; }
.vs-zeker .vs-rij { grid-template-columns: 1fr auto; }
.vs-zeker .vs-rij b { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; }
.vs-zeker .vs-baan { margin: 14px 0 10px; }
.vs-zeker .vs-vul { background: var(--groen); box-shadow: 0 0 12px rgba(134,185,154,.45); }
.vs-grens { position: absolute; top: -8px; width: 1px; height: 18px; background: #fff; }
.vs-zeker .onder { grid-template-columns: 1fr auto; }
.vs-zeker .onder small.g { color: var(--groen); }

/* Dagelijks beheer */
.vs-actief { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.88); }
.vs-actief i { width: 6px; height: 6px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 8px rgba(134,185,154,.8); }
.vs-tijdlijn { list-style: none; position: relative; height: 320px; overflow: hidden; margin-top: 14px; padding: 0 26px; }
.vs-tijdlijn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(0,0,0,0), #000); pointer-events: none; }
.vs-tijdlijn li { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: baseline; padding: 13px 0 13px 24px; font-size: 13px; line-height: 1.4; }
.vs-tijdlijn li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.12); }
.vs-tijdlijn li::after { content: ""; position: absolute; left: 1px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: #000; border: 1px solid rgba(255,255,255,.45); }
.vs-tijdlijn li.nieuw { animation: erin .9s cubic-bezier(.22,1,.36,1); }
.vs-tijdlijn time { color: var(--t40); font-size: 12px; }
.vs-tijdlijn span { color: var(--t85); }
.vs-tijdlijn em { font-size: 11px; color: var(--t60); border: 1px solid var(--rand); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.vs-tijdlijn li.hi span { color: #fff; }
.vs-tijdlijn li.hi em { color: var(--groen); border-color: rgba(134,185,154,.6); }
.vs-tijdlijn li.hi::after { background: var(--groen); border-color: var(--groen); box-shadow: 0 0 10px rgba(134,185,154,.9); }

@media (max-width: 900px) {
  .vs-kop, .vs-cijfers, .vs-winst, .vs-uitslag, .vs-zeker, .vs-voet { padding-left: 18px; padding-right: 18px; }
  .vs-as { margin-left: 18px; margin-right: 18px; }
  .vs-winst .vs-rij { grid-template-columns: 1fr auto; } .vs-winst .vs-rij small { display: none; }
  .vs-split { margin-left: 18px; margin-right: 18px; }
  .vs-tijdlijn { padding: 0 18px; }
  .vs-cijfers b { font-size: 24px; }
  .vs-pg { grid-template-columns: 1fr; }
  .vs-foto { height: 44px; }
  .vs-tijdlijn li { grid-template-columns: 40px 1fr; }
  .vs-tijdlijn em { display: none; }
  .vs-schema { display: none; }
  .vs-stapel { display: block; padding: 20px 18px 0; }
  .vs-stapel ul { list-style: none; display: grid; gap: 10px; }
  .vs-stapel li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
  .vs-stapel li em { font-size: 11px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
  .vs-stapel b { display: block; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.9); }
  .vs-stapel small { display: block; font-size: 12px; color: rgba(255,255,255,.5); }
  .vs-tegel { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #050505; }
  .vs-tegel img, .vs-tegel svg { width: 20px; height: 20px; }
  .vs-tegel.groot { width: 56px; height: 56px; border-radius: 14px; border-color: rgba(134,185,154,.7); box-shadow: 0 0 18px rgba(134,185,154,.35); margin: 0 auto 10px; }
  .vs-tegel.groot img { width: 26px; height: 26px; }
  .vs-hub { text-align: center; }
  .vs-pijl { width: 1px; height: 34px; margin: 10px auto; background: repeating-linear-gradient(180deg, var(--groen) 0 2px, transparent 2px 9px); }
}

/* ---- mobiel (10-10-2026): gesimuleerd op iPhone SE, 13 en 15 Pro Max, Galaxy S9+, Pixel 7 en iPad mini ----
   Tikdoelen minimaal 44 px (Apple HIG), niets afgesneden op 320-360 px, leesbare tekst in grafiek en auditdia. */
@media (max-width: 900px) {
  .pil > a:first-child { display: flex; align-items: center; min-height: 44px; padding-right: 6px; }
  .pil .knop { padding: 12px 14px; }
  .pil .menu summary { width: 44px; height: 44px; }
  footer .voetlinks a, footer .links a { display: inline-flex; align-items: center; min-height: 44px; }
  .kop .link, .duo .link { padding: 13px 0 7px; }
  .case .cijfers summary { min-height: 44px; padding-bottom: 12px; }
  .case .pilletje, .case .ver, .case .check, .vs-winst em, .vs-tijdlijn em { font-size: 12px; }
  /* auditdia op Contact: vaste maten in plaats van cqw, de drie blokken onder elkaar */
  .dia.voor { aspect-ratio: auto; padding: 18px 16px 0; }
  .dia.achter { aspect-ratio: auto; inset: 0 6px 0 0; }
  .dia-top { font-size: 11px; }
  .dia-kop { margin-top: 10px; font-size: 21px; }
  .dia-drie { margin-top: 14px; grid-template-columns: 1fr; gap: 12px; }
  .dia-drie > div { padding-top: 10px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; }
  .dia-drie span { font-size: 11px; grid-column: 1; }
  .dia-drie strong { font-size: 26px; grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .dia-drie p { font-size: 13px; grid-column: 1; margin-top: 2px; }
  .dia-eerst { margin: 16px 0 18px; font-size: 13px; }
  .dia-eerst span { font-size: 11px; padding: 2px 8px; margin-right: 6px; }
}
@media (max-width: 400px) {
  .case .top .ver { font-size: 0; gap: 0; }            /* alleen het vinkje, zodat "Google Ads" niet breekt */
  .case .plat { min-width: 0; }
  .case .top { align-items: flex-start; }
  .case.vol .getal { font-size: 38px; }
  .vs-helft { padding: 12px 10px 14px; }
  .vs-knop { white-space: nowrap; padding: 5px 7px; }
  .vs-cijfers b { font-size: 21px; white-space: nowrap; }
  .vs-uitslag b { font-size: 28px; }
  .varianten > * { min-width: 0; }                     /* A/B-schetsen op Aanpak blijven binnen de kolom */
  .scherm th, .scherm td { padding-left: 7px; padding-right: 7px; }
  .scherm th:first-child, .scherm td:first-child { padding-left: 10px; width: 27%; }
  .scherm td { font-size: 12.5px; }
  .scherm th:nth-child(5), .scherm td:nth-child(5) { width: 22%; }
  .scherm th:nth-child(6), .scherm td:nth-child(6) { width: 22%; }
  .scherm th:nth-child(7), .scherm td:nth-child(7) { width: 29%; padding-right: 6px; }
  .scherm .besluit { font-size: 10.5px; padding: 2px 6px; }
  .scherm td .an.in-tekst { display: none; }                    /* bolletje 2 valt op 320 px over het besluit */
}

/* platformcirkel (10-10-2026): op telefoons tot 480 px een buitenring met alleen de twaalf vierkante logo's */
.orbit .ring.r2.mob { display: none; }
@media (max-width: 480px) {
  .orbit .ring.r2:not(.mob) { display: none; }
  .orbit .ring.r2.mob { display: block; }
}

/* cases op Home (10-10-2026): hele kaart klikbaar naar de case op Cases; op de telefoon twee cases en werkwijze-kaarten zonder beeld */
.case.klik { position: relative; transition: border-color var(--hover); }
.case.klik:hover { border-color: var(--rand-nav); }
.case .kaart-link { position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.case.klik .check { display: flex; }
.case .check .naar { margin-left: auto; color: var(--t60); }
.case.klik:hover .check .naar { color: #fff; }
@media (max-width: 600px) {
  .cases .alleen-groot { display: none !important; }   /* de kaart heeft display:flex in het style-attribuut */
  .met-scene .scene { display: none; }
  .met-scene .kaart { padding: 4px 14px 24px; }
}


/* bronlabel (10-10-2026): kaarten op Home gelijk laten lopen als een label over twee regels gaat */
.cases.vier-kol .case .top { min-height: 40px; align-items: flex-start; }
@media (max-width: 900px) { .cases.vier-kol .case .top { min-height: 0; align-items: center; } }

/* uitgelichte case: nagebouwd Google Ads-overzicht (10-10-2026), wit vlak zoals het echte overzicht */
.gads { margin: 0; background: #fff; color: #202124; border-radius: 8px; padding: 16px 18px 12px; font-family: "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif; }
.gads-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #dadce0; }
.gads-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; }
.gads-logo img { width: 18px; height: 18px; }
.gads-datum { text-align: right; font-size: 13px; color: #202124; }
.gads-datum small { display: block; font-size: 11px; color: #5f6368; margin-top: 2px; }
.gads-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 14px 0 6px; border: 1px solid #dadce0; border-radius: 6px; overflow: hidden; }
.gads-k { padding: 10px 12px 10px; border-top: 4px solid transparent; border-right: 1px solid #dadce0; background: #f8f9fa; }
.gads-k:last-child { border-right: 0; }
.gads-k.blauw { border-top-color: #1a73e8; background: #fff; }
.gads-k small { display: flex; justify-content: space-between; font-size: 12px; color: #5f6368; }
.gads-k small i { font-style: normal; font-size: 10px; }
.gads-k b { display: block; margin-top: 4px; font-size: 22px; font-weight: 400; letter-spacing: -.01em; }
.gads-k em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: #5f6368; }
.gads-k em.goed { color: #188038; }
.gads-svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.uitgelicht .gads-svg text, .gads-svg text { font-family: "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif; font-size: 11px; font-weight: 400; fill: #5f6368; }
.gads-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #5f6368; padding: 4px 0 2px; }
.gads-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gads-legenda i { display: inline-block; width: 18px; height: 0; border-top: 2.4px solid #1a73e8; }
.gads-legenda i.stip { border-top: 2px dashed rgba(26,115,232,.5); }
.gads-bron { margin-top: 10px; font-size: 11px; color: var(--t40); }
@media (max-width: 600px) { .uitgelicht .gads-svg text, .gads-svg text { font-size: 19px; } }
@media (max-width: 420px) { .gads { padding: 12px 12px 10px; } .gads-k { padding: 8px 8px; } .gads-k b { font-size: 17px; } .gads-k small { font-size: 10.5px; } .gads-datum { font-size: 11px; } }

/* 10-10-2026: alles speelt één keer af als het in beeld komt (Jip: niet te afleidend) */
@keyframes draai-1x { from { transform: rotate(-36deg); } to { transform: rotate(0); } }
@keyframes draai-1x-terug { from { transform: rotate(36deg); } to { transform: rotate(0); } }
.orbit.zicht .ring.r1, .orbit.zicht .r2 .ik { animation: draai-1x 9s cubic-bezier(.22,1,.36,1) 1 both; }
.orbit.zicht .ring.r2, .orbit.zicht .r1 .ik { animation: draai-1x-terug 9s cubic-bezier(.22,1,.36,1) 1 both; }
@keyframes stroom-1x { to { stroke-dashoffset: -112; } }
.vs.zicht .vs-stroom { animation: stroom-1x 6s cubic-bezier(.4,0,.2,1) 1 both; }
@media (prefers-reduced-motion: reduce) { .orbit.zicht .ring, .orbit.zicht .ik, .vs.zicht .vs-stroom { animation: none !important; } }

/* Diensten, Daarnaast: kaarten met beeld, 2 bij 2, beeld verborgen op de telefoon (10-10-2026) */
.daarnaast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: var(--breed); margin: 48px auto 0; }
.daarnaast .kaart { padding: 14px 14px 28px; }
.daarnaast h3 { margin-top: 24px; padding: 0 10px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 21px; letter-spacing: -.02em; }
.daarnaast p { margin-top: 8px; padding: 0 10px; font-size: 14px; line-height: 1.6; color: var(--t60); }
.scene.dn text.dn-klein { font-size: 11px; } .scene.dn text.dn-mini { font-size: 9.5px; }
.scene.dn text.dn-titel { font-size: 15px; fill: #8ab4f8; }
.scene.dn text.n.dn-bedrag { font-size: 17px; } .scene.dn text.n.dn-groot { font-size: 30px; }
@media (max-width: 900px) { .daarnaast { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 600px) { .daarnaast .scene { display: none; } .daarnaast .kaart { padding: 4px 14px 22px; } .daarnaast h3 { margin-top: 18px; } }

/* vergelijking met een bureau op het lichtgrijze vlak (10-10-2026): kolom 'Bij mij' als iets donkerder grijs vlak */
section.licht.vergelijk-vlak .vergelijk-tabel { background: #EDEDED; }
section.licht.vergelijk-vlak .vergelijk-tabel .ik { background: rgba(0,0,0,.06); border-left-color: rgba(0,0,0,.16); }


/* platformcirkel: tijdens de eenmalige draai niet buiten het scherm laten steken (10-10-2026, iPhone werd 435 px breed) */
#platformen { overflow-x: hidden; overflow-x: clip; }

/* 10-10-2026, na de review: A/B-schetsen op Aanpak binnen hun kolom; footerregels op dezelfde hoogte op de telefoon */
.varianten > *, .varianten figure { min-width: 0; }
.varianten .schets-pagina { overflow: hidden; }
@media (max-width: 900px) { footer .links > span { display: inline-flex; align-items: center; min-height: 44px; } }

.schets-pagina .product > * { min-width: 0; }
.schets-pagina .regel, .schets-pagina .knopje { white-space: normal; overflow-wrap: anywhere; }

/* ---------- 07-11-2026: klantlogo's als één doorschuivende rij, portret bij de audit ---------- */
#klanten { padding-top: 72px; }
.klanten-kop { font-size: 15px; font-weight: 400; letter-spacing: 0; color: rgba(255,255,255,.78); margin: 0 0 32px; font-family: inherit; text-align: center; }
.klanten-band { display: flex; overflow: hidden; padding: 14px 0; max-width: 1440px; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.klanten-rij { display: flex; align-items: center; flex: 0 0 auto; gap: 64px; padding: 0 32px; margin: 0; list-style: none;
  animation: klanten-schuif 55s linear infinite; }
.klanten-band:hover .klanten-rij { animation-play-state: paused; }
.klanten-rij li { flex: 0 0 auto; display: flex; align-items: center; height: 60px; }
.klanten-rij img { display: block; height: 34px; width: auto; max-width: 170px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .8; transition: opacity 200ms ease-out; }
.klanten-rij li:hover img { opacity: 1; }
.klanten-rij .tonen img { filter: grayscale(1) brightness(1.25); opacity: .9; }
.klanten-rij .stapel img { height: 46px; }
.klanten-rij .schild img { height: 52px; filter: grayscale(1); opacity: .9; }
@keyframes klanten-schuif { to { transform: translateX(-100%); } }
@media (max-width: 600px) {
  #klanten { padding-top: 48px; }
  .klanten-rij { gap: 40px; padding: 0 20px; animation-duration: 40s; }
  .klanten-rij img { height: 28px; max-width: 130px; }
  .klanten-rij .stapel img { height: 34px; } .klanten-rij .schild img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .klanten-band { -webkit-mask-image: none; mask-image: none; }
  .klanten-rij { animation: none; flex-wrap: wrap; justify-content: center; gap: 24px 40px; flex: 1 1 auto; }
  .klanten-rij[aria-hidden="true"] { display: none; }
}
/* auditkop: portret als glazen pil met naam, zelfde vorm als de pil in de hero (07-11, Jip vond het losse bolletje lelijk) */
#analyse .audit-pil { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 5px; margin-bottom: 24px;
  border-radius: 999px; background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
#analyse .audit-foto { display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden; background: #111; }
#analyse .audit-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#analyse .audit-naam { font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; }
#analyse .audit-streep { width: 1px; height: 12px; background: rgba(255,255,255,.22); }
#analyse .audit-rol { font-size: 13px; color: rgba(255,255,255,.62); white-space: nowrap; }
@media (max-width: 600px) { #analyse .audit-streep, #analyse .audit-rol { display: none; } #analyse .audit-pil { padding-right: 14px; } }
/* 07-11: Over mij op de homepage direct na de cijfers, compacter; op de telefoon foto naast de tekst */
#over-mij { padding-top: 24px; }
#over-mij .rij { grid-template-columns: 320px 1fr; gap: 64px; }
@media (max-width: 600px) {
  #over-mij { padding-top: 8px; }
  #over-mij .rij { grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
  #over-mij .persoon { aspect-ratio: 4 / 5; }
  #over-mij .persoon .tag, #over-mij .persoon figcaption, #over-mij .persoon::after { display: none; }
  #over-mij .bio { font-size: 18px; line-height: 1.4; }
  #over-mij .bio + p { font-size: 15px; }
  #over-mij .actie { margin-top: 18px !important; }
}

/* ---------- 07-11-2026: header. Actieve pagina, donkerder glas na scrollen, mobiel menu schermvullend ---------- */
.pil ul a { position: relative; }
.pil ul a.hier::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; }
.pil { transition: background-color 250ms ease-out, border-color 250ms ease-out; }
.pil.gescrold { background: rgba(8, 8, 8, .82); border-color: rgba(255, 255, 255, .12); }
.menu-knop { display: none; }
.menu-scherm { display: none; }
@media (max-width: 900px) {
  .menu-knop { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; margin: 0;
    background: none; border: 0; border-radius: 4px; cursor: pointer; color: #fff; }
  .menu-knop i { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform var(--hover); }
  .menu-open .menu-knop i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-open .menu-knop i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .menu-open .pil .knop { visibility: hidden; }
  .menu-open .pil { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open, .menu-open body { overflow: hidden; }
  .menu-scherm { display: flex; flex-direction: column; justify-content: space-between; position: fixed; inset: 0; z-index: 19;
    padding: 120px 24px calc(32px + env(safe-area-inset-bottom)); background: #000;
    opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .menu-open .menu-scherm { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
  .menu-items { display: flex; flex-direction: column; }
  .menu-items a { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 300; letter-spacing: -.02em; color: rgba(255, 255, 255, .88);
    opacity: 0; transform: translateY(8px); transition: opacity 300ms ease-out, transform 300ms ease-out, color var(--hover); }
  .menu-open .menu-items a { opacity: 1; transform: none; }
  .menu-open .menu-items a:nth-child(2) { transition-delay: 40ms; } .menu-open .menu-items a:nth-child(3) { transition-delay: 80ms; } .menu-open .menu-items a:nth-child(4) { transition-delay: 120ms; }
  .menu-items a.hier { color: #fff; }
  .menu-items a.hier::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 12px; vertical-align: middle; border-radius: 50%; background: #fff; }
  .menu-voet { display: grid; gap: 16px; }
  .menu-cta { display: block; text-align: center; font-size: 16px; padding: 16px; border-radius: 4px; }
  .menu-mail { text-align: center; font-size: 14px; color: var(--t60); padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) { .menu-scherm, .menu-items a { transition: none !important; } }
/* 07-11: lage-resolutie bronlogo's niet groter tonen dan ze scherp zijn (bron ≥ 2x de getoonde hoogte) */
.klanten-rij .logo-klein img { height: 30px; }
.klanten-rij .stapel.logo-klein img { height: 34px; }
.klanten-rij .logo-blok { width: 53px; overflow: hidden; }
.klanten-rij .logo-blok img { height: 44px; max-width: none; object-fit: cover; object-position: left center; }
@media (max-width: 600px) {
  .klanten-rij .logo-klein img { height: 26px; } .klanten-rij .stapel.logo-klein img { height: 30px; }
  .klanten-rij .logo-blok { width: 45px; } .klanten-rij .logo-blok img { height: 37px; }
}

/* 07-11 (2): mobiel. De auditknop in de header pas tonen als de knop in de hero uit beeld is; het menuscherm in
   hetzelfde donkere glas als de header in plaats van vlak zwart. */
@media (max-width: 900px) {
  .js .pil .knop { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
  .js.hero-knop-zicht .pil .knop { opacity: 0; visibility: hidden; }
  .js:not(.hero-knop-zicht) .pil .knop { transition: opacity 200ms ease-out; }
  .menu-scherm { background: #0a0a0a; -webkit-backdrop-filter: none; backdrop-filter: none; }  /* effen: vervaging met transparantie liet in WebKit de pagina doorschijnen */
}
@media (max-width: 900px) {
  .pil .knop { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .32); padding: 10px 13px; font-size: 14px; font-weight: 500; }
  .pil .knop:hover { opacity: 1; border-color: rgba(255, 255, 255, .6); }
}

/* ---------- 07-11-2026: Over mij, tijdlijn ---------- */
.tijdlijn { list-style: none; margin: 48px auto 0; padding: 0; max-width: 820px; }
.tijdlijn li { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--rand-nav); }
.tijdlijn li:last-child { border-bottom: 1px solid var(--rand-nav); }
.tijdlijn .jaar { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 32px; letter-spacing: -.03em; line-height: 1; color: var(--t60); }
.tijdlijn h3 { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 22px; letter-spacing: -.02em; }
.tijdlijn p { margin-top: 8px; color: var(--t60); line-height: 1.6; max-width: 560px; }
@media (max-width: 600px) {
  .tijdlijn { margin-top: 32px; }
  .tijdlijn li { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .tijdlijn .jaar { font-size: 24px; }
}

/* ---------- 07-11-2026: mobiel minder tekst (Jip: onderdelen houden, beschrijvingen beperken) ---------- */
@media (max-width: 600px) {
  /* Over mij direct onder de cijfers: rond portret, tekst ernaast, link in plaats van grote knop */
  #over-mij .rij { grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
  #over-mij .persoon { aspect-ratio: 1; border-radius: 50%; }
  #over-mij .bio { font-size: 17px; line-height: 1.45; }
  #over-mij .bio + p { font-size: 15px; margin-top: 8px; }
  #over-mij .actie { margin-top: 12px !important; }
  #over-mij .knop.tweede { display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
    font-size: 15px; font-weight: 500; color: #fff; }
  #over-mij .knop.tweede::after { content: "→"; margin-left: 8px; }
  /* Wat je kunt verwachten (08-11, Jip): één kolom, kop met korte uitleg, dunne lijn ertussen */
  #voordelen .voordelen { display: grid; grid-template-columns: 1fr; gap: 0; }
  #voordelen .punt { padding: 18px 0; border-top: 1px solid var(--rand); }
  #voordelen .punt:last-child { border-bottom: 1px solid var(--rand); }
  #voordelen .punt h3 { font-size: 20px; line-height: 1.25; min-height: 0 !important; }
  #voordelen .punt p { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; }
  /* Werkwijze: nummer en kop, de uitleg staat op Diensten */
  /* werkwijze op mobiel (08-11, Jip): veegrij met de tekening en alleen nummer + kop, geen uitleg */
  #doe .kaart > p { display: none; }
  /* 24/7: alleen de eerste zin, het venster laat de rest zien */
  .duo .tekst .lang { display: none; }
}

/* ---------- 07-11-2026: 10/10-ronde homepage ---------- */
/* één knoppensysteem: wit alleen voor de audit, vervolgacties als tekstlink met pijl (zoals 'Meer over de aanpak') */
#over-mij .knop.tweede, #doe .actie .knop.tweede, .ext .actie .knop.tweede, #werk .actie .knop.tweede {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; font-size: 15px; font-weight: 500; color: #fff; }
#over-mij .knop.tweede::after, #doe .actie .knop.tweede::after, .ext .actie .knop.tweede::after, #werk .actie .knop.tweede::after {
  content: "→"; margin-left: 8px; transition: transform var(--hover); }
#over-mij .knop.tweede:hover::after, #doe .actie .knop.tweede:hover::after, .ext .actie .knop.tweede:hover::after, #werk .actie .knop.tweede:hover::after { transform: translateX(3px); }
/* één hoekenschaal: 6 px knoppen, kaarten en velden; 10 px grote kaders; pillen rond */
.pil { border-radius: 6px; }
.pil .knop { border-radius: 6px; }
.c.kader { border-radius: 10px; }
.ext .lp-podium .venster { border-radius: 6px; }
/* werkwijze: nummer en kop op één regel */
#doe .kaart .nr { display: inline-block; margin: 26px 10px 0 0; vertical-align: baseline; }
#doe .kaart h3 { display: inline-block; margin-top: 0; }
#doe .kaart h3 + p { margin-top: 10px; }
/* voordelen: koppen even hoog, zodat de uitleg op één lijn staat */
@media (min-width: 901px) { #voordelen .punt h3 { min-height: 2.5em; } }
/* eenvoudige casekaart: sector, resultaat, pijl */
.case-simpel { display: flex; flex-direction: column; gap: 14px; min-height: 190px; }
.case-simpel .seg { font-size: 13px; color: var(--t60); }
.case-simpel h3 { font-size: 24px; line-height: 1.25; }
.case-simpel .naar { margin-top: auto; align-self: flex-end; font-size: 18px; color: var(--t60); transition: color var(--hover), transform var(--hover); }
.case-simpel:hover .naar { color: #fff; transform: translateX(3px); }
@media (max-width: 600px) { .case-simpel { min-height: 0; } .case-simpel h3 { font-size: 21px; } }
/* formulier rustiger: verzendknop over de volle breedte */
.formulier .actie { display: block; }
.formulier .actie .knop { width: 100%; justify-content: center; text-align: center; }
.formulier .actie small { display: block; margin-top: 14px; }
.case-simpel .seg { margin: 0; padding: 0; border: 0; }
.case-simpel h3 { margin-top: 4px; }
#doe .kaart .nr { width: auto; min-width: 0; margin-right: 8px; }

/* ---------- 07-11-2026: header ronde 2 ---------- */
@media (min-width: 901px) {
  /* logo links, links in het midden, knop rechts */
  .pil { display: grid; grid-template-columns: 1fr auto 1fr; transition: width 300ms ease-out, padding 300ms ease-out, background-color 250ms ease-out, border-color 250ms ease-out; }
  .pil > a:first-child { justify-self: start; }
  .pil ul { margin: 0; justify-self: center; position: relative; }
  .pil > .knop { justify-self: end; }
  /* krimpt bij scrollen */
  .pil.gescrold { width: min(680px, calc(100% - 24px)); padding-top: 6px; padding-bottom: 6px; }
  /* zacht vlak dat meeschuift achter de link onder de muis */
  .pil ul a { z-index: 1; }
  .nav-vlak { position: absolute; left: 0; top: 50%; height: 32px; margin-top: -16px; border-radius: 6px; background: rgba(255, 255, 255, .07);
    opacity: 0; pointer-events: none; transition: transform 220ms cubic-bezier(.4, 0, .2, 1), width 220ms cubic-bezier(.4, 0, .2, 1), opacity 160ms ease-out; }
  .vlak-aan .nav-vlak { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .nav-vlak { transition: opacity 160ms ease-out; } }
@media (max-width: 900px) {
  /* menu: nummer, pijl, en zachter openen */
  .menu-items { counter-reset: mi; }
  .menu-items a { display: flex; align-items: baseline; gap: 14px; }
  .menu-items a::before { counter-increment: mi; content: counter(mi, decimal-leading-zero); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--t40); min-width: 20px; }
  .menu-items a::after, .menu-items a.hier::after { content: "→"; display: inline; width: auto; height: auto; margin-left: auto; border-radius: 0; background: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 20px; color: var(--t40); vertical-align: baseline; }
  .menu-items a.hier::before, .menu-items a.hier::after { color: #fff; }
  .menu-scherm { transform: translateY(-8px); transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms; }
  .menu-open .menu-scherm { transform: none; transition: opacity 250ms ease-out, transform 250ms ease-out; }
}
@media (prefers-reduced-motion: reduce) { .menu-scherm { transform: none !important; } }

/* ---------- 08-11-2026: footer versie D (drie groepen, onderste regel, grote mail, woordmerk) ---------- */
footer.vt { padding: 56px 0 0; overflow: hidden; }
footer.vt .c { display: block; padding-top: 40px; font-size: inherit; color: inherit; }
.vt-rij { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.vt-wie img { height: 13px; display: block; }
.vt-wie p { margin-top: 14px; font-size: 14px; color: var(--t60); }
.vt h2 { font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t40); margin-bottom: 14px; }
.vt-lijst { display: grid; gap: 4px; justify-items: start; }
.vt-lijst a { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; color: var(--t85); transition: color var(--hover); }
.vt-lijst a:hover { color: #fff; }
.vt-lijst a.vt-mail { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; letter-spacing: -.02em; color: #fff; }
.vt-onder { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin-top: 48px; padding: 20px 0 32px; border-top: 1px solid var(--rand); font-size: 13px; color: var(--t40); }
.vt-onder a { color: var(--t40); } .vt-onder a:hover { color: #fff; }
.vt-onder .rechts { display: flex; gap: 20px; }
.vt-merk { padding: 8px var(--marge) 0; max-width: 1440px; margin: 0 auto; }
.vt-merk img { display: block; width: 100%; height: auto; opacity: .07; transform: translateY(18%); }
@media (max-width: 760px) {
  .vt-rij { grid-template-columns: 1fr; gap: 32px; }
  .vt-rij nav .vt-lijst { display: flex; flex-wrap: wrap; gap: 0 20px; }
  .vt-lijst a { min-height: 44px; }
  .vt-lijst a.vt-mail { font-size: 22px; }
  .vt-onder { flex-direction: column; }
  .vt-onder a, .vt-onder span { min-height: 0; }
  .vt-onder .rechts a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 08-11: nummers uit het mobiele menu (Jip: overbodig, het menu is geen volgorde); pijlen blijven */
@media (max-width: 900px) { .menu-items a::before { content: none; } }
@media (max-width: 760px) { .vt-onder .rechts { align-items: center; } }
/* 08-11: in de footer de naam in plaats van het kleine logo (het merk staat groot onderaan) */
.vt-wie strong { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.vt-wie p { margin-top: 6px; }
/* 08-11: footer zonder 'wie'-kolom; Contact links, Pagina's rechts */
.vt-rij { grid-template-columns: 1fr auto; gap: 40px 96px; }
@media (max-width: 760px) { .vt-rij { grid-template-columns: 1fr; gap: 32px; } }

/* 08-11-2026: cijferbalk met de labels als vlakje boven het getal (Jip), gecentreerd; iets minder ruimte naar Over mij */
html body .strip { padding-bottom: 56px !important; }
@media (max-width: 900px) { html body .strip { padding-bottom: 40px !important; } }
.strip dd .kort { display: none; }
@media (max-width: 600px) { .strip dd .lang { display: none; } .strip dd .kort { display: inline; } html body .strip dd { white-space: nowrap !important; } }

/* 08-11-2026: Over mij op mobiel onder elkaar: fotokaart over de volle breedte, daaronder kop, tekst en link */
@media (max-width: 600px) {
  #over-mij .rij { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
  #over-mij .persoon { aspect-ratio: 5 / 4 !important; border-radius: 6px !important; }
  #over-mij .persoon img { object-position: 50% 18%; }
  #over-mij .persoon .tag, #over-mij .persoon figcaption, #over-mij .persoon::after { display: block !important; }
  #over-mij .bio { font-size: 24px !important; line-height: 1.3 !important; }
  #over-mij .bio + p { font-size: 15px !important; margin-top: 12px !important; }
}
#over-mij .bio + p { max-width: 540px; }
/* 08-11: 'Meer over de aanpak' in dezelfde stijl als de andere vervolglinks (tekst + pijl, geen onderstreping) */
.duo .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; border: 0 !important; font-size: 15px; font-weight: 500; color: #fff; }
.duo .link::after { content: "→"; margin-left: 8px; transition: transform var(--hover); }
.duo .link:hover::after { transform: translateX(3px); }
@media (max-width: 600px) { #over-mij .lang { display: none; } }  /* 08-11: op mobiel alleen de eerste zin (Jip) */
@media (min-width: 901px) { #voordelen .punt h3 { min-height: 2.5em; line-height: 1.25; } #voordelen .punt h3 + p { margin-top: 12px !important; } }
@media (min-width: 901px) { html body #voordelen .punt h3 { min-height: 0 !important; } html body #voordelen .punt h3 + p { margin-top: 10px !important; } }

/* ---------- 08-11-2026: werkwijze ---------- */
#doe .kaart .nr { margin-right: 6px !important; }
@media (max-width: 900px) {
  #doe .vier { display: flex !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--marge)); padding: 0 var(--marge) 8px; scrollbar-width: none; }
  #doe .vier::-webkit-scrollbar { display: none; }
  #doe .vier > .kaart { flex: 0 0 82%; scroll-snap-align: start; padding: 10px 10px 18px !important; }
  #doe .met-scene .scene { display: block !important; }
  #doe .kaart .nr { margin-top: 16px !important; margin-left: 6px; }
  #doe .kaart h3 { font-size: 20px !important; white-space: nowrap; }
}
@media (max-width: 900px) {
  html body #doe .vier { margin: 28px -20px 0 !important; padding: 0 20px 8px !important; scroll-padding-left: 20px; }
  html body #doe .kaart .nr { width: auto !important; min-width: 0 !important; margin: 16px 8px 0 6px !important; }
  html body #doe .kaart h3 { margin-left: 0 !important; }
}
@media (min-width: 901px) { html body #doe .kaart .nr { width: auto !important; min-width: 0 !important; margin-right: 8px !important; } }
html body #doe .kaart .nr, html body #doe .kaart .nr + h3 { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 901px) { html body #doe .kaart .nr { padding-left: 12px !important; } }  /* gelijk met de tekst eronder (p heeft 12px binnenruimte) */

/* 08-11: tekeningen op mobiel als verkleind plaatje (ontworpen op 536 x 300). Op hun eigen maat tekenen en schalen,
   anders breekt alle tekst erin af. --sch wordt door een klein script op de kaartbreedte gezet. */
@media (max-width: 900px) {
  html body #doe .met-scene .scene { width: 536px !important; height: 300px !important; max-width: none !important;
    transform-origin: 0 0; transform: scale(var(--sch, .48)); margin-bottom: calc(300px * (var(--sch, .48) - 1)) !important; }
  html body #doe .vier > .kaart { overflow: hidden; }
}
@media (max-width: 900px) { html body #doe .vier > .kaart { flex-basis: 90% !important; padding: 8px 8px 16px !important; } }

/* ---------- 08-11-2026: live bewaking als glazen logboek op zwart (zelfde glas als header en werkwijze) ---------- */
.vs-glas { background: radial-gradient(120% 80% at 80% 0%, rgba(134,185,154,.10), rgba(0,0,0,0) 60%), #050606;
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px -40px rgba(0,0,0,.9); }
.vs-glas .vs-kop { padding: 22px 24px 4px; font-size: 13px; color: var(--t60); }
.vs-glas .vs-actief { color: #fff; font-weight: 500; }
.vs-glas .vs-tijdlijn { height: 372px; margin-top: 14px; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.vs-glas .vs-tijdlijn::after { background: linear-gradient(rgba(5,6,6,0), #050606); height: 90px; }
.vs-glas .vs-tijdlijn li { grid-template-columns: 44px 1fr auto; padding: 11px 14px; border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.vs-glas .vs-tijdlijn li::before { display: none; }
.vs-glas .vs-tijdlijn li::after { display: none; }
.vs-glas .vs-tijdlijn em { border-color: rgba(255,255,255,.12); }
.vs-glas .vs-tijdlijn li.auto em { color: var(--groen); border-color: rgba(134,185,154,.45); padding-left: 20px; position: relative; }
.vs-glas .vs-tijdlijn li.auto em::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--groen); box-shadow: 0 0 6px rgba(134,185,154,.9); }
.vs-glas .vs-voet { display: flex; align-items: center; gap: 8px; padding: 14px 24px 20px; }
.vs-auto-stip { width: 5px; height: 5px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 6px rgba(134,185,154,.9); }
@media (max-width: 600px) {
  .vs-glas .vs-kop { padding: 18px 16px 2px; font-size: 12px; }
  .vs-glas .vs-tijdlijn { height: 236px; padding: 0 10px; gap: 6px; }
  .vs-glas .vs-tijdlijn li { grid-template-columns: 38px 1fr; padding: 10px 12px; font-size: 12.5px; }
  .vs-glas .vs-tijdlijn li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vs-glas .vs-tijdlijn em { display: none; }
  .vs-glas .vs-tijdlijn li.auto time { color: var(--groen); }
  .vs-glas .vs-voet { padding: 12px 16px 16px; font-size: 10.5px; }
}
@media (max-width: 600px) {
  .vs-glas .vs-tijdlijn { height: 280px; }
  .vs-glas .vs-tijdlijn li span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
  .vs-glas .vs-tijdlijn li { align-items: start; }
}
.vs-glas .vs-kop b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.vs-glas .vs-voet .vs-ill { margin-left: auto; color: var(--t40); }
/* 08-11: grijs verloop zoals de werkwijzetekeningen (groen alleen voor 'automatisch'); 5 zichtbare regels */
.vs-glas { background: radial-gradient(120% 80% at 80% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), #050606 !important; }
@media (min-width: 601px) { .vs-glas .vs-tijdlijn { height: 296px; } }
/* 08-11: verticaal ritme gelijk (96 px desktop, 64 px mobiel tussen de inhoud van de secties) */
.klanten-band { padding-bottom: 0 !important; }
@media (max-width: 900px) { html body #doe .vier { padding-bottom: 0 !important; } #doe { padding-top: calc(var(--sectie) - 18px) !important; } }  /* laatste punt van 'verwachten' heeft 18px onderruimte */

/* ---------- 08-11-2026: casekaart met platformlogo en verificatie ---------- */
.case-simpel .cs-top { display: flex; align-items: center; gap: 10px; }
.case-simpel .cs-logo { height: 16px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.case-simpel .cs-top .seg { font-size: 13px; color: var(--t60); }
.case-simpel .cs-voet { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rand); }
.case-simpel .cs-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t60); }
.case-simpel .cs-check svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; color: #0b0b0b; background: var(--groen); box-sizing: border-box; }
.case-simpel .cs-voet .naar { margin: 0; align-self: center; }
.case-simpel .cs-logo { filter: none !important; opacity: 1 !important; }

/* ---------- 08-11-2026: auditformulier ---------- */
.formulier fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulier legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--t60); }
.budget-pillen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.budget-pillen label, .budget-weet { display: block; cursor: pointer; }
.budget-pillen input, .budget-weet input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.budget-pillen span { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 6px; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.05); border: 1px solid var(--rand); transition: background var(--hover), border-color var(--hover); }
.budget-pillen label:hover span { border-color: rgba(255,255,255,.35); }
.budget-pillen input:checked + span { background: #fff; color: #000; border-color: #fff; }
.budget-pillen input:focus-visible + span, .budget-weet input:focus-visible + span { outline: 2px solid var(--groen); outline-offset: 2px; }
.budget-weet { margin-top: 10px; font-size: 13px; color: var(--t40); }
.budget-weet span { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.budget-weet span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rand-nav); box-sizing: border-box; }
.budget-weet input:checked + span { color: #fff; } .budget-weet input:checked + span::before { border: 4px solid #fff; }
.formulier .optioneel { color: var(--t40); }
.formulier textarea[rows="2"] { min-height: 72px; }
@media (max-width: 600px) { .budget-pillen { grid-template-columns: 1fr 1fr; } }
.formulier fieldset.breed { width: 100%; grid-column: 1 / -1; }

/* ---------- 08-11-2026: snelheid ---------- */
/* hero direct in beeld (was 1,6 s infaden: de kop stond pas na 2,1 s); overige secties 0,6 s */
:root { --entree: .6s cubic-bezier(.22,1,.36,1); }
html.js .hero .in { opacity: 1 !important; transform: none !important; transition: none !important; }
html.js .in { transform: translateY(14px); }
@media (max-width: 600px) { html body #analyse .c.kader { margin-left: 12px !important; margin-right: 12px !important; width: auto !important; } }  /* 08-11: kader niet tegen de schermrand */

/* ---------- 08-11-2026: crisp en soepel scrollen (Jip: "alles vaagt een beetje") ---------- */
/* 1. geen in-fade/opschuiven meer: elke sectie staat direct en scherp (.zicht blijft voor de kleine animaties in de tekeningen) */
html.js .in, html.js .in.zicht { opacity: 1 !important; transform: none !important; transition: none !important; }
/* 2. hero-verloop staat stil: grote, sterk vervaagde lagen die 38-52 s bewegen kostten bij elk scrollframe */
.verloop i { animation: none !important; will-change: auto !important; }
/* 3. glaswaas alleen waar iets achter zit (header, mobiel menu). Kaarten, kaders en logregels staan op effen zwart:
      daar deed backdrop-filter niets zichtbaars maar kostte het wel rekenwerk bij scrollen */
.kaart, .c.kader, .vs, .vs-glas .vs-tijdlijn li, .orbit .ik, .ext-kaart { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* 4. de doorschuivende logorij en de bol krijgen een eigen laag, zodat de rest van de pagina niet opnieuw getekend hoeft */
.klanten-rij { will-change: transform; }
.hb-bol { contain: layout paint; }

/* ---------- 08-11-2026: Diensten gelijk met het brandboek ---------- */
/* opsomming per onderdeel: desktop altijd open, mobiel inklapbaar */
.pijler-meer > summary { display: none; }
.pijler-meer > ul { margin: 0; }
@media (min-width: 901px) { .pijler-meer > ul { display: grid !important; } }
@media (max-width: 900px) {
  .pijler-meer > summary { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; cursor: pointer; list-style: none;
    font-size: 15px; font-weight: 500; color: #fff; }
  .pijler-meer > summary::-webkit-details-marker { display: none; }
  .pijler-meer > summary::after { content: "+"; margin-left: 10px; font-weight: 300; font-size: 20px; color: var(--t60); }
  .pijler-meer[open] > summary::after { content: "–"; }
  .pijler-meer:not([open]) > ul { display: none; }
}
/* prijsblok zonder bedrag */
.prijs .bedrag strong.geen-bedrag { font-size: 30px; line-height: 1.15; letter-spacing: -.02em; max-width: 260px; display: block; }
/* daarnaast: fotokaarten (creatives en landingspagina's), gedempt tot hover, zoals op de homepage */
.dn-foto { position: relative; height: 300px; border-radius: 6px; background: #070707; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 24px; align-items: start; }
.dn-foto img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 6px; filter: saturate(.3) brightness(.82); transition: filter 700ms ease; }
.dn-foto img:nth-child(2) { margin-top: 20px; } .dn-foto img:nth-child(3) { margin-top: 40px; }
.dn-foto.dn-lp { display: block; }
.dn-foto.dn-lp img { position: absolute; width: 76%; aspect-ratio: auto; border: 1px solid rgba(255,255,255,.14); }
.dn-foto.dn-lp img:nth-child(1) { left: 24px; top: 24px; margin: 0; } .dn-foto.dn-lp img:nth-child(2) { right: 24px; bottom: -30px; width: 56%; margin: 0; }
.dn-ill { position: absolute; left: 24px; bottom: 10px; font-size: 9px; font-style: italic; color: var(--t40); z-index: 2; }
@media (hover: hover) { .daarnaast .kaart:hover .dn-foto img { filter: none; } }
.dn-foto img { height: auto !important; max-height: none !important; min-height: 0 !important; }
.dn-foto.dn-lp img { height: auto !important; }
@media (max-width: 600px) {
  .daarnaast .dn-foto { display: none !important; }
  /* mobiel kort, zoals de homepage: alleen de koppen in 2 kolommen */
  .daarnaast { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .daarnaast .kaart { padding: 16px 14px 18px !important; }
  .daarnaast .kaart p { display: none; }
  .daarnaast h3 { margin-top: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.25; }
}
@media (max-width: 600px) {
  .logos { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; margin-top: 32px !important; }
  .logos > div { padding: 14px 6px !important; min-height: 0 !important; gap: 8px !important; }
  .logos > div img { height: 20px !important; }
  .logos > div span { font-size: 11px !important; }
}

/* ---------- 08-11-2026: Waarmee ik werk als twee doorschuivende rijen ---------- */
.platformrijen .pf-band { display: flex; overflow: hidden; max-width: 1440px; margin: 0 auto; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.platformrijen .kop + * { margin-top: 0; }
.platformrijen .c + .pf-band { margin-top: 40px; }
.pf-rij { display: flex; flex: 0 0 auto; gap: 12px; padding: 0 6px; margin: 0; list-style: none; animation: klanten-schuif 60s linear infinite; will-change: transform; }
.pf-terug .pf-rij { animation-direction: reverse; animation-duration: 70s; }
.pf-band:hover .pf-rij { animation-play-state: paused; }
.pf-rij li { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--rand); background: rgba(255,255,255,.02); font-size: 14px; color: var(--t85); white-space: nowrap; }
.pf-rij img { height: 20px; width: auto; }
.pf-rij img[src*="/logo/"]:not([src*="/kleur/"]) { filter: brightness(0) invert(1); opacity: .85; }
@media (max-width: 600px) { .pf-rij li { height: 44px; padding: 0 14px; font-size: 13px; } .pf-rij img { height: 17px; } .pf-rij { animation-duration: 45s; } .pf-terug .pf-rij { animation-duration: 52s; } }
@media (prefers-reduced-motion: reduce) { .pf-rij { animation: none; flex-wrap: wrap; justify-content: center; } .pf-rij[aria-hidden="true"] { display: none; } .pf-band { -webkit-mask-image: none; mask-image: none; } }

/* ---------- 08-11-2026: Daarnaast-beelden in de werkwijzestijl ---------- */
.scene.dg { position: relative; height: 300px; border-radius: 6px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(90% 110% at 20% 0%, #6a6c6b 0%, rgba(106,108,107,0) 62%), radial-gradient(70% 90% at 100% 100%, #3d3f3e, rgba(61,63,62,0) 60%), linear-gradient(165deg, #434544, #1f2020); }
.dg-raster { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 40%, #000, transparent); }
.dg-glas { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.25); }
.dg-paneel { position: absolute; left: 8%; right: 8%; top: 13%; z-index: 2; padding: 14px 16px 8px; font-size: 12px; color: #fff; }
.dg-kop { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #fff; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.dg-kop img { height: 14px; width: auto; }
.dg-r { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.6); }
.dg-r b { color: #fff; font-weight: 500; }
.dg-rij { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 10px 8px; margin: 6px -8px 0; border-radius: 8px; color: rgba(255,255,255,.75); }
.dg-rij b { font-weight: 500; color: #fff; }
.dg-rij em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); }
.dg-rij.top { background: linear-gradient(90deg, rgba(134,185,154,.14), rgba(134,185,154,.45)); border: 1px solid rgba(160,210,180,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.dg-rij.top em { border-color: rgba(160,210,180,.7); color: #fff; background: rgba(0,0,0,.25); }
.dg-oud { font-size: 11px; color: rgba(255,255,255,.45); text-decoration: line-through; } .dg-pijl { color: rgba(255,255,255,.45); }
.dg-tabel { display: grid; grid-template-columns: 1.1fr 1fr .8fr .7fr; gap: 10px; align-items: center; padding: 10px 8px 4px; font-size: 11px; color: rgba(255,255,255,.55); }
.dg-tabel.dg-rij { font-size: 12px; color: rgba(255,255,255,.85); padding: 10px 8px; }
.dg-tabel b img { height: 15px; width: auto; vertical-align: middle; }
.dg-bol { font-style: normal; font-weight: 700; font-size: 13px; color: #fff; background: #0000a4; padding: 2px 6px; border-radius: 4px; letter-spacing: -.02em; }
.dg-twee { position: absolute; inset: 14% 6% auto; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dg-kaartje { padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #fff; }
.dg-kaartje .dg-kop { padding-bottom: 8px; margin-bottom: 2px; }
.dg-kaartje small { font-size: 10.5px; color: rgba(255,255,255,.55); }
.dg-link { font-weight: 500; font-size: 14px; color: #a9c7ff; }
.dg-chip { align-self: flex-start; font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.dg-chip.top { border-color: rgba(160,210,180,.7); background: rgba(134,185,154,.25); color: #fff; }
.dg-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.dg-live i { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 8px rgba(134,185,154,.9); }
.dg-t { font-size: 11px; color: rgba(255,255,255,.55); } .dg-x { grid-column: span 2; }
.daarnaast .kaart:has(.dg) { padding-top: 14px; }

/* ---------- 08-11-2026: header en kop op alle pagina's gelijk aan de homepage ---------- */
/* glazen balk (stond alleen in enkel-glas.css van de homepage; subpagina's hadden een bijna zwarte balk) */
:root {
  --glas-vulling: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.055));
  --glas-rand: rgba(255,255,255,.14);
  --glas-lichtlijn: inset 0 1px 0 rgba(255,255,255,.22);
  --glas-schaduw: 0 18px 40px -30px rgba(0,0,0,.9);
  --glas-waas: blur(22px) saturate(1.25) brightness(1.06);
}
.pil { background: var(--glas-vulling); border: 1px solid var(--glas-rand); box-shadow: var(--glas-lichtlijn), var(--glas-schaduw);
  -webkit-backdrop-filter: var(--glas-waas); backdrop-filter: var(--glas-waas); }
.pil.gescrold { background: rgba(8, 8, 8, .82); border-color: rgba(255,255,255,.12); }
/* korte kop op subpagina's: zachtere overgang naar zwart (er zat een harde band halverwege), lichtplas achter de kop */
.hero.kort .uitloop { background:
  radial-gradient(60% 50% at 50% 48%, rgba(0,0,0,.42), rgba(0,0,0,.12) 60%, rgba(0,0,0,0) 80%),
  linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.85) 86%, #000 100%); }
.hero.kort { padding-bottom: 96px; }
@media (max-width: 900px) { .hero.kort { padding-bottom: 64px; } }
/* 08-11 (Jip): geen stipje onder de actieve pagina */
.pil ul a.hier::after { content: none !important; }
@media (max-width: 900px) { .menu-items a::after, .menu-items a.hier::after { content: "→" !important; display: inline !important; width: auto !important; height: auto !important; margin-left: auto !important; background: none !important; border-radius: 0 !important; } }

/* ---------- 09-11-2026: Aanpak (opbouw A): vier stappen als op home, beelden in glas, tekst kort ---------- */
.ap-duo { display: grid; grid-template-columns: 1fr 1.12fr; gap: 72px; align-items: center; }
.ap-duo.om { grid-template-columns: 1.12fr 1fr; }
.ap-duo.om > .ap-tekst { order: 2; }
.ap-duo h2 { text-align: left; }
.ap-label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.ap-kern { margin-top: 22px; font-size: 19px; line-height: 1.45; color: var(--t); max-width: 30em; }
.ap-alinea { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--t60); max-width: 34em; }
.ap-krijgt { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rand); font-size: 15px; color: var(--t85); max-width: 34em; }
.ap-krijgt span { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }

.ap-scene { position: relative; margin: 0; min-height: 380px; padding: 44px 40px 44px; display: flex; flex-direction: column; justify-content: center;
  border-radius: 10px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.08); color: #fff;
  background: radial-gradient(90% 110% at 20% 0%, #6a6c6b 0%, rgba(106,108,107,0) 62%), radial-gradient(70% 90% at 100% 100%, #3d3f3e, rgba(61,63,62,0) 60%), linear-gradient(165deg, #434544, #1f2020); }
.ap-scene figcaption { position: absolute; right: 14px; bottom: 10px; z-index: 3; font-size: 9px; font-style: italic; color: rgba(255,255,255,.5); }
.ap-paneel { position: relative; z-index: 2; padding: 14px 18px 10px; font-size: 12.5px; }
.ap-paneel .dg-r img { height: 13px; }
.ap-pf { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ap-pf img { height: 14px; width: auto; }
.ap-scene em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); justify-self: start; white-space: nowrap; }
.ap-scene .top { background: linear-gradient(90deg, rgba(134,185,154,.14), rgba(134,185,154,.45)); border: 1px solid rgba(160,210,180,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); color: #fff; }
.ap-scene .top em { border-color: rgba(160,210,180,.7); color: #fff; background: rgba(0,0,0,.25); }

/* 01 winst per categorie */
.ap-mrij { display: grid; grid-template-columns: 92px 1fr 64px 70px 86px; gap: 12px; align-items: center; padding: 10px 8px; margin: 4px -8px 0; border-radius: 8px; border: 1px solid transparent; color: rgba(255,255,255,.82); }
.ap-mrij b { font-weight: 500; }
.ap-mkop { font-size: 10.5px; color: rgba(255,255,255,.5); padding-bottom: 2px; }
.ap-mkop span:nth-child(2) { grid-column: span 2; }
.ap-mkop span:nth-child(3) { display: none; }
.ap-meter { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.ap-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: rgba(255,255,255,.45); }
.ap-meter u { position: absolute; top: -5px; bottom: -5px; width: 1.5px; background: #fff; }
.ap-mrij.top .ap-meter i { background: #86B99A; }
.ap-roas small { display: block; font-size: 10px; color: rgba(255,255,255,.55); }
.ap-mrij.min { color: rgba(255,255,255,.55); }
.ap-mrij.min b { color: rgba(255,255,255,.7); }

/* 02 tracking */
.ap-trij { display: grid; grid-template-columns: 116px 1fr 96px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ap-balk { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.ap-balk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.ap-balk .na { background: #86B99A; }
.ap-balk .voor { background: rgba(255,255,255,.4); }
.ap-pct { text-align: right; white-space: nowrap; }
.ap-pct s { font-size: 11px; color: rgba(255,255,255,.45); margin-right: 8px; }
.ap-pct b { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; }
.ap-erbij { display: flex; align-items: center; gap: 8px; margin: 12px -8px 4px; padding: 10px 8px; border-radius: 8px; }
.ap-erbij i { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 8px rgba(134,185,154,.9); }
.ap-erbij b { margin-left: auto; font-weight: 500; }

/* 03 campagnes */
.ap-crij { display: grid; grid-template-columns: 1fr 48px 78px 96px; gap: 10px; align-items: center; padding: 9px 8px; margin: 4px -8px 0; border-radius: 8px; border: 1px solid transparent; color: rgba(255,255,255,.82); }
.ap-crij small { font-size: 10px; color: rgba(255,255,255,.55); }
.ap-ckop { font-size: 10.5px; color: rgba(255,255,255,.5); padding-bottom: 2px; }
.ap-crij.uit { opacity: .45; }

/* 04 conversie */
.ap-ab { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ap-var { display: grid; grid-template-rows: auto 1fr auto; }
.ap-pp-knop { margin-top: auto; }
.ap-lt { display: block; margin-bottom: 8px; font-size: 11px; color: rgba(255,255,255,.7); }
.ap-pp { height: 196px; padding: 10px; display: flex; flex-direction: column; gap: 7px; border-radius: 10px; }
.ap-pp.b { border-color: rgba(160,210,180,.6); }
.ap-pp-top { display: flex; gap: 4px; } .ap-pp-top i { width: 16px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.ap-pp-foto { flex: 1; min-height: 60px; border-radius: 6px; background: rgba(255,255,255,.1); }
.ap-l1, .ap-l2 { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.28); } .ap-l1 { width: 78%; } .ap-l2 { width: 46%; }
.ap-regel { font-size: 10px; padding: 5px 7px; border-radius: 6px; border: 1px dashed rgba(160,210,180,.75); background: rgba(134,185,154,.2); color: #fff; }
.ap-pp-knop { padding: 7px; border-radius: 6px; background: #fff; color: #0b0b0b; font-size: 10.5px; font-weight: 500; text-align: center; }
.ap-uit { margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.6); }
.ap-uit b { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; color: #fff; }
.ap-var.win .ap-uit b { color: #86B99A; }
.ap-winst { position: relative; z-index: 2; align-self: flex-start; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 12px;
  background: linear-gradient(90deg, rgba(134,185,154,.14), rgba(134,185,154,.45)); border: 1px solid rgba(160,210,180,.45); }
.ap-winst i { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 8px rgba(134,185,154,.9); }

/* dashboard */
.ap-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; }
.ap-kpis > div { padding: 10px; border-radius: 8px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.1); }
.ap-kpis small { display: block; font-size: 10.5px; color: rgba(255,255,255,.55); }
.ap-kpis b { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 22px; }
.ap-kpis .op { border-color: rgba(160,210,180,.55); }
.ap-kpis .op em { margin-left: 6px; padding: 0; border: 0; font-size: 10.5px; color: #86B99A; }
.ap-lijn { display: block; width: 100%; height: 86px; }
.ap-update { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; color: rgba(255,255,255,.75); }

/* samenwerken: één kader, drie kolommen (idee van ooakbrands.com/mastermind4, eigen uitvoering) */
.ap-drie { max-width: var(--breed); margin: 48px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rand); border-radius: 10px; }
.ap-drie > div { padding: 30px 28px 32px; }
.ap-drie > div + div { border-left: 1px solid var(--rand); }
.ap-drie .ap-label { margin-bottom: 0; color: var(--groen); }
.ap-drie h3 { margin-top: 12px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 23px; }
.ap-drie p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--t60); }

@media (max-width: 900px) {
  .ap-duo, .ap-duo.om { grid-template-columns: 1fr; gap: 32px; }
  .ap-duo.om > .ap-tekst { order: 0; }
  .ap-drie { grid-template-columns: 1fr; }
  .ap-drie > div + div { border-left: 0; border-top: 1px solid var(--rand); }
}
@media (max-width: 600px) {
  .ap-alinea, .ap-krijgt { display: none; }   /* mobiel: kop + één zin + beeld (brandboek §3) */
  .ap-kern { margin-top: 16px; font-size: 17px; }
  .ap-scene { min-height: 0; padding: 22px 12px 30px; }
  .ap-paneel { padding: 12px 12px 6px; font-size: 11.5px; }
  .ap-mrij { grid-template-columns: 74px 1fr 46px 62px; gap: 8px; }
  .ap-mrij em, .ap-mkop span:nth-child(5) { display: none; }
  .ap-trij { grid-template-columns: 92px 1fr 74px; gap: 10px; }
  .ap-pct s { margin-right: 4px; } .ap-pct b { font-size: 17px; }
  .ap-crij { grid-template-columns: 1fr 34px 82px; gap: 8px; }
  .ap-crij > :nth-child(3) { display: none; }
  .ap-pf { gap: 6px; } .ap-pf img { height: 12px; }
  .ap-ab { gap: 10px; } .ap-pp { height: auto; } .ap-pp-foto { flex: none; height: 64px; min-height: 0; } .ap-lt { font-size: 10px; }
  .ap-regel { font-size: 9.5px; padding: 4px 6px; }
  .ap-uit b { font-size: 22px; }
  .ap-winst { font-size: 11px; }
  .ap-kpis { grid-template-columns: repeat(3, 1fr); } .ap-kpis .mob-weg { display: none; } .ap-kpis b { font-size: 18px; }
  .ap-drie > div { padding: 22px 20px 24px; }
}

/* ---------- 09-11-2026: Aanpak v2, stijlproef (proef-aanpak.html): beeld op zwart, loopt buiten beeld, vervaagt ---------- */
.v2-tijdlijn ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.v2-tijdlijn ol::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--rand); }
.v2-tijdlijn a { position: relative; display: block; padding-top: 24px; color: var(--t); font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 22px; }
.v2-tijdlijn a i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.v2-tijdlijn li:first-child a i { background: #86B99A; box-shadow: 0 0 10px rgba(134,185,154,.8); }
.v2-tijdlijn .v2-nr { display: block; margin-bottom: 6px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.v2-tijdlijn a:hover { color: var(--t85); }

.v2-stap { overflow: hidden; }
.v2-kop { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; }
.v2-kop h2 { text-align: left; }
.v2-kop .ap-kern { margin-top: 0; }
.v2-beeld [hidden] , .v2-beeld[hidden], .v2-notitie[hidden], .v2-paneel[hidden] { display: none !important; }

.v2-beeld { position: relative; margin: 56px calc(50% - 50vw) 0 0; padding-bottom: 96px; }
.v2-app { position: relative; width: 1240px; border: 1px solid var(--rand); border-radius: 10px; font-size: 14px; color: var(--t85);
  background: radial-gradient(760px 380px at 18% -12%, rgba(255,255,255,.075), rgba(255,255,255,0) 62%), radial-gradient(520px 260px at 30% 34%, rgba(134,185,154,.07), rgba(134,185,154,0) 70%), #060606;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 170px), transparent), linear-gradient(to bottom, #000 62%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 calc(100% - 170px), transparent), linear-gradient(to bottom, #000 62%, transparent); mask-composite: intersect; }
.v2-app::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55) 22%, rgba(255,255,255,.12) 60%, rgba(255,255,255,0)); }
.v2-bar { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--rand); }
.v2-bar img { height: 18px; width: auto; }
.v2-bar b { font-weight: 500; color: #fff; }
.v2-logos { margin-left: 4px; display: inline-flex; gap: 10px; } .v2-logos img { height: 15px; }
.v2-wissel { position: relative; z-index: 2; margin-left: 28px; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.03); }
.v2-wissel button { font: inherit; font-size: 12.5px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--t60); cursor: pointer; transition: color var(--hover), background var(--hover); }
.v2-wissel button:hover { color: #fff; }
.v2-wissel button[aria-pressed="true"] { background: #fff; color: #000; }
.v2-wissel button:focus-visible { outline: 2px solid #86B99A; outline-offset: 2px; }
.v2-periode { margin-left: auto; margin-right: 360px; font-size: 12.5px; color: var(--t60); }
.v2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rand); }
.v2-kpis > div { padding: 22px 22px 22px; }
.v2-kpis > div + div { border-left: 1px solid var(--rand); }
.v2-kpis small { font-size: 12px; color: var(--t60); }
.v2-kpis .op small::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 8px rgba(134,185,154,.9); vertical-align: 1px; }
.v2-kpis strong { display: block; margin-top: 8px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 40px; line-height: 1.1; color: #fff; }
.v2-kpis em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--t40); }
.v2-rij { position: relative; display: grid; grid-template-columns: 140px 100px 100px 70px 1fr 110px 120px; gap: 22px; align-items: center; padding: 15px 22px; border-bottom: 1px solid rgba(255,255,255,.06); transition: background var(--hover); }
.v2-rij:not(.v2-kop):hover { background: rgba(255,255,255,.04); }
.v2-rij b { font-weight: 500; color: #fff; }
.v2-rij.v2-kop { font-size: 12px; color: var(--t40); padding-top: 14px; padding-bottom: 12px; }
.v2-formule { font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.2); font-size: 11px; color: var(--t60); white-space: nowrap; }
.v2-meter { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.v2-meter small { font-size: 14px; color: #fff; }
.v2-as { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.v2-as i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; background: rgba(255,255,255,.4); transition: width 1.1s cubic-bezier(.22,1,.36,1), background var(--hover); }
html.js .v2-beeld:not(.loopt) .v2-as i { width: 0; }
.v2-rij:nth-of-type(3) .v2-as i { transition-delay: .06s; } .v2-rij:nth-of-type(4) .v2-as i { transition-delay: .12s; } .v2-rij:nth-of-type(5) .v2-as i { transition-delay: .18s; }
.v2-rij:nth-of-type(6) .v2-as i { transition-delay: .24s; } .v2-rij:nth-of-type(7) .v2-as i { transition-delay: .3s; } .v2-rij:nth-of-type(8) .v2-as i { transition-delay: .36s; }
.v2-as u { position: absolute; top: -6px; bottom: -6px; width: 1.5px; background: #fff; }
.v2-as u::after { content: attr(data-g); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  font-size: 10.5px; text-decoration: none; color: #fff; background: #000; border: 1px solid rgba(255,255,255,.22); opacity: 0; transition: opacity var(--hover), transform var(--hover); pointer-events: none; }
.v2-rij:hover .v2-as u::after { opacity: 1; transform: translate(-50%, 0); }
.v2-rij:hover .v2-as i { background: rgba(255,255,255,.65); }
.v2-rij.top { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; }
.v2-rij.top .v2-as i, .v2-rij.top:hover .v2-as i { background: #86B99A; }
.v2-rij:not(.min):not(.v2-kop) .v2-w { color: #86B99A; }
.v2-rij.min { color: var(--t60); } .v2-rij.min b { color: var(--t85); }
.v2-spark { width: 64px; height: 18px; }
.v2-spark polyline { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.v2-rij:not(.min) .v2-spark polyline { stroke: #86B99A; }
.v2-rij em { justify-self: start; font-style: normal; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rand); color: var(--t85); }
.v2-rij em.op { border-color: rgba(134,185,154,.6); color: #86B99A; }
.v2-rij em.uit { color: var(--t40); }
.v2-notitie { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border-radius: 10px; background: rgba(13,13,13,.92); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 24px 60px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12); font-size: 12px; }
.v2-notitie b { display: block; font-size: 13px; font-weight: 500; color: #fff; }
.v2-notitie span { color: var(--t60); }
.v2-notitie i { flex: none; margin-top: 5px; width: 7px; height: 7px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 10px rgba(134,185,154,.9); }
.v2-n1 { left: 930px; top: -24px; }
.v2-n3 { left: 600px; top: 560px; }
.v2-notitie.grijs { opacity: .85; }
.v2-beeld figcaption { position: absolute; left: 0; bottom: 66px; font-size: 9px; font-style: italic; color: var(--t40); }

@media (max-width: 900px) {
  .v2-kop { grid-template-columns: 1fr; gap: 16px; }
}
/* aanbeveling als eigen kaartje (09-11, Jip: "meer echt een aanbeveling") */
.v2-advies { position: absolute; z-index: 2; left: 960px; top: 452px; width: 290px; padding: 16px 18px 14px; border-radius: 12px; background: #0f0f0f;
  border: 1px solid rgba(255,255,255,.2); box-shadow: 0 30px 70px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1); font-size: 12.5px; color: var(--t85); }
.v2-advies-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.v2-advies-top span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #86B99A; }
.v2-advies-top i { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; }
.v2-advies-top small { font-size: 11px; color: var(--t40); }
.v2-advies b { display: block; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 19px; color: #fff; }
.v2-advies p { margin-top: 6px; line-height: 1.5; color: var(--t60); }
.v2-advies-effect { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 10px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.v2-advies-effect span { font-size: 11.5px; color: var(--t40); }
.v2-advies-effect strong { font-weight: 500; color: #86B99A; }
.v2-advies-knoppen { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.v2-advies-knoppen span { font-size: 12px; color: var(--t40); }
.v2-doe { font: inherit; font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; cursor: pointer; transition: border-color var(--hover), background var(--hover); }
.v2-doe:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.v2-doe.gedaan { border-color: rgba(134,185,154,.6); color: #86B99A; cursor: default; background: none; }
.v2-doe:focus-visible { outline: 2px solid #86B99A; outline-offset: 2px; }
.v2-advies[hidden] { display: none !important; }

/* rekenstrook Strategie (09-11): binnen de inhoudsbreedte, geen uitloop naar rechts */
.v2-reken { margin-right: 0; padding-bottom: 8px; }
.v2-reken figcaption { position: static; display: block; margin-top: 10px; }
.v2-reken .v2-app { width: auto; -webkit-mask-image: none; mask-image: none; }
.v2-reken .v2-periode { margin-right: 0; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 22px 6px; }
.v2-chips button { font: inherit; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand); background: none; color: var(--t60); cursor: pointer; transition: color var(--hover), border-color var(--hover), background var(--hover); }
.v2-chips button:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.v2-chips button[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.07); }
.v2-chips button:focus-visible { outline: 2px solid #86B99A; outline-offset: 2px; }
.v2-chips[hidden] { display: none !important; }
.v2-strook { padding: 10px 22px 8px; }
.v2-srij { display: grid; grid-template-columns: 240px 1fr 120px; gap: 20px; align-items: center; padding: 9px 0; }
.v2-srij > span:first-child { color: var(--t60); }
.v2-srij > b { text-align: right; font-weight: 500; color: var(--t85); white-space: nowrap; }
.v2-srij > b small { margin-left: 6px; font-size: 12px; font-weight: 400; color: inherit; opacity: .75; }
.v2-sbaan { position: relative; height: 22px; }
.v2-sbaan i { position: absolute; top: 0; bottom: 0; border-radius: 4px; transition: left .55s cubic-bezier(.22,1,.36,1), width .55s cubic-bezier(.22,1,.36,1); }
.v2-srij.basis > span:first-child { color: #fff; } .v2-srij.basis b { color: #fff; }
.v2-srij.basis i { background: rgba(255,255,255,.24); }
.v2-srij.kost i { background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.28); }
.v2-srij.kost b { color: var(--t60); font-weight: 400; }
.v2-srij.over { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rand); }
.v2-srij.over > span:first-child { color: #fff; font-weight: 500; }
.v2-srij.over i { background: #86B99A; }
.v2-srij.over b { color: #86B99A; }
.v2-uitkomst { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 10px; padding: 20px 22px 24px; border-top: 1px solid var(--rand); }
.v2-u-label { display: block; font-size: 12px; color: var(--t60); }
.v2-u-getal { font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 48px; line-height: 1.05; color: #fff; }
.v2-u-som { margin-left: 14px; font-size: 13px; color: var(--t60); }
.v2-u-nu { font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand); color: var(--t60); white-space: nowrap; }
.v2-kort { display: none; }
.v2-u-nu.goed { border-color: rgba(134,185,154,.6); color: #86B99A; }
@media (prefers-reduced-motion: reduce) { .v2-sbaan i { transition: none; } }
@media (max-width: 600px) {
  .v2-chips { flex-wrap: nowrap; overflow-x: auto; padding: 12px 14px 4px; scrollbar-width: none; }
  .v2-chips button { flex: none; }
  .v2-strook { padding: 8px 14px 6px; }
  .v2-srij { grid-template-columns: 92px 1fr 66px; gap: 10px; font-size: 12.5px; }
  .v2-srij > b small, .v2-lang { display: none; } .v2-kort { display: inline; }
  .v2-sbaan { height: 16px; }
  .v2-uitkomst { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 14px 18px; }
  .v2-u-getal { font-size: 36px; } .v2-u-som { display: block; margin: 4px 0 0; }
}

/* 02 Tracking (09-11): lichtgrijs vlak, drie kolommen, blokjes = orders */
.v2-meet { margin: 56px 0 0; }
.v2-meet-kop { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rand); font-size: 13px; color: var(--t60); }
.v2-meet-kop > span:first-child { color: var(--t); font-weight: 500; }
.v2-wissel.licht { margin-left: 0; border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.03); }
.v2-wissel.licht button { color: rgba(0,0,0,.55); }
.v2-wissel.licht button:hover { color: #000; }
.v2-wissel.licht button[aria-pressed="true"] { background: #0b0b0b; color: #fff; }
.v2-pfs { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-pf { padding: 34px 32px 34px 0; }
.v2-pf + .v2-pf { padding-left: 32px; border-left: 1px solid var(--rand); }
.v2-pf-naam { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.v2-pf-naam img { height: 16px; width: auto; }
.v2-pf-pct { margin-top: 14px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(48px, 5.6vw, 78px); line-height: 1; letter-spacing: -.04em; }
.v2-pf-pct .v2-toon-voor { color: rgba(0,0,0,.45); }
.v2-meet[data-stand="voor"] .v2-toon-na, .v2-meet[data-stand="na"] .v2-toon-voor { display: none; }
.v2-blok { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 250px; margin-top: 22px; }
.v2-blok i { aspect-ratio: 1; border-radius: 2px; border: 1px solid rgba(0,0,0,.2); transition: background .45s ease, border-color .45s ease; }
.v2-meet[data-stand="voor"] .v2-blok i.v { background: rgba(0,0,0,.6); border-color: transparent; }
.v2-meet[data-stand="na"] .v2-blok i.n { background: var(--groen); border-color: transparent; }
.v2-pf small { display: block; margin-top: 12px; font-size: 12px; color: var(--t60); }
.v2-setup { padding-top: 22px; border-top: 1px solid var(--rand); }
.v2-setup > small { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.v2-setup > div { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-setup span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.16); font-size: 12.5px; color: rgba(0,0,0,.42); transition: color .4s, border-color .4s; }
.v2-setup i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.2); transition: background .4s; }
.v2-setup span.altijd { color: var(--t); border-color: rgba(0,0,0,.35); } .v2-setup span.altijd i { background: #0b0b0b; }
.v2-meet[data-stand="na"] .v2-setup span { color: var(--groen); border-color: rgba(47,100,70,.5); }
.v2-meet[data-stand="na"] .v2-setup i { background: var(--groen); }
.v2-meet figcaption { margin-top: 16px; font-size: 9px; font-style: italic; color: var(--t40); }
@media (prefers-reduced-motion: reduce) { .v2-blok i, .v2-setup span, .v2-setup i { transition: none; } }
@media (max-width: 900px) {
  .v2-pfs { grid-template-columns: 1fr; }
  .v2-pf, .v2-pf + .v2-pf { display: grid; grid-template-columns: 1fr 140px; column-gap: 16px; align-items: center; padding: 22px 0; border-left: 0; }
  .v2-pf + .v2-pf { border-top: 1px solid var(--rand); }
  .v2-pf-naam { grid-column: 1; grid-row: 1; }
  .v2-pf-pct { grid-column: 1; grid-row: 2; margin-top: 8px; font-size: 44px; }
  .v2-pf small { grid-column: 1; grid-row: 3; margin-top: 8px; }
  .v2-blok { grid-column: 2; grid-row: 1 / 4; margin-top: 0; gap: 3px; }
}
@media (max-width: 600px) {
  .v2-meet { margin-top: 28px; }
  .v2-meet-kop { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v2-meet-kop > span:first-child { font-size: 12.5px; }
  .v2-setup span { font-size: 12px; padding: 5px 10px; }
}

/* ruimte (09-11, Jip: "veel ruimte, met name op mobiel"): hero → eerste sectie 128/≈100 i.p.v. 192/165; licht vlak op mobiel 64 */
main > .v2-stap:first-child { padding-top: 32px; }
@media (max-width: 900px) { section.v2-stap.licht { margin-top: var(--sectie); } }
@media (max-width: 600px) { main > .v2-stap:first-child { padding-top: 0; } }

/* 03 Campagnes (09-11): account vóór (14, rommelig) en na (5, op marge) */
.v2-camp { margin: 56px 0 0; }
.v2-camp .v2-app { width: auto; -webkit-mask-image: none; mask-image: none; }
.v2-camp[data-stand="voor"] .v2-toon-na, .v2-camp[data-stand="na"] .v2-toon-voor { display: none !important; }
.v2-camp .v2-wissel { margin-left: auto; }
.v2-camp-kpi { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rand); }
.v2-camp-kpi > div { padding: 20px 22px; } .v2-camp-kpi > div + div { border-left: 1px solid var(--rand); }
.v2-camp-kpi small { font-size: 12px; color: var(--t60); }
.v2-camp-kpi strong { display: block; margin-top: 6px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 40px; line-height: 1.1; color: #fff; }
.v2-camp[data-stand="na"] .v2-camp-kpi strong { color: #86B99A; }
.v2-camp ul { list-style: none; padding: 14px 22px 20px; min-height: 300px; }
.v2-camp-voor { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
.v2-camp-voor li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13.5px; color: var(--t40); }
.v2-camp-voor li img { height: 13px; opacity: .5; filter: grayscale(1); }
.v2-camp-na li { display: grid; grid-template-columns: 18px 300px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
.v2-camp-na li:last-child, .v2-camp-voor li:nth-last-child(-n+2) { border-bottom: 0; }
.v2-camp-na li img { height: 15px; }
.v2-camp-na b { font-weight: 500; color: #fff; }
.v2-camp-na span { color: var(--t60); }
.v2-camp-na li:first-child { margin: 0 -22px; padding: 14px 22px; background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; }
.v2-camp figcaption { margin-top: 10px; font-size: 9px; font-style: italic; color: var(--t40); }
@media (max-width: 600px) {
  .v2-camp { margin-top: 28px; }
  .v2-camp .v2-wissel { order: 0; width: auto; margin-left: auto; } .v2-camp .v2-wissel button { flex: none; padding: 6px 14px; }
  .v2-camp-kpi > div { padding: 14px; } .v2-camp-kpi strong { font-size: 30px; }
  .v2-camp ul { padding: 8px 14px 14px; min-height: 330px; }
  .v2-camp-voor { grid-template-columns: 1fr; } .v2-camp-voor li:nth-child(n+9) { display: none; } .v2-camp-voor li:nth-child(8) { border-bottom: 0; }
  .v2-camp-voor li { font-size: 12.5px; padding: 7px 0; }
  .v2-camp-na li { grid-template-columns: 16px 1fr; row-gap: 2px; padding: 12px 0; font-size: 13px; }
  .v2-camp-na li span { grid-column: 2; font-size: 12px; }
  .v2-camp-na li:first-child { margin: 0 -14px; padding: 12px 14px; }
}

/* 03 Campagnes als kader + kanalen, 04 Conversie als uitslag, 24/7 weekraster (09-11) */
.v2-drie { margin-top: 56px; }
.v2-kanalen { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 22px; }
.v2-kanalen > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.v2-kanalen small { margin-right: 4px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--t60); }
.v2-kanalen span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rand); font-size: 13.5px; color: var(--t85); }
.v2-kanalen img { height: 15px; width: auto; }

.v2-ab { margin: 56px 0 0; }
.v2-ab-twee { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.v2-ab-twee > div { position: relative; padding: 30px 32px 32px 56px; }
.v2-ab-twee > div + div { border-left: 1px solid var(--rand); }
.v2-ab-lt { position: absolute; left: 0; top: 30px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); display: grid; place-items: center; font-size: 12px; font-weight: 500; }
.v2-ab-twee > div + div .v2-ab-lt { left: 24px; }
.v2-ab-twee > div + div { padding-left: 80px; }
.v2-ab-twee small { display: block; font-size: 13px; color: var(--t60); min-height: 2.6em; }
.v2-ab-twee strong { display: block; margin-top: 10px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(52px, 6vw, 84px); line-height: 1; letter-spacing: -.04em; color: rgba(0,0,0,.45); }
.v2-ab-twee .win strong { color: var(--groen); }
.v2-ab-twee .win .v2-ab-lt { background: var(--groen); border-color: var(--groen); color: #fff; }
.v2-ab-twee em { display: block; margin-top: 8px; font-style: normal; font-size: 12.5px; color: var(--t60); }
.v2-ab-uit { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14px; color: var(--t); }
.v2-ab-uit i { width: 7px; height: 7px; border-radius: 50%; background: var(--groen); }
.v2-ab figcaption, .v2-week figcaption { margin-top: 12px; font-size: 9px; font-style: italic; color: var(--t40); }

.v2-week { margin: 56px 0 0; }
.v2-week .v2-app { width: auto; -webkit-mask-image: none; mask-image: none; }
.v2-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: #fff; padding-right: 8px; border-right: 1px solid var(--rand); }
.v2-live i { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; }
.v2-week .v2-periode { margin-right: 0; }
.v2-wr { padding: 18px 22px 8px; }
.v2-wr-rij { display: grid; grid-template-columns: 110px repeat(7, 1fr); gap: 10px; align-items: center; padding: 5px 0; }
.v2-wr-kop span { font-size: 12px; color: var(--t60); text-align: center; }
.v2-wat { font-size: 13px; color: var(--t85); }
.v2-dag { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.v2-dag i { height: 22px; border-radius: 3px; background: rgba(134,185,154,.32); position: relative; transition: background var(--hover), box-shadow var(--hover); }
.v2-dag i.m { background: none; box-shadow: inset 0 0 0 1.5px #fff; cursor: default; }
.v2-dag i.m::after { content: attr(data-nr); position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 50%; background: #fff; color: #000; font-size: 9.5px; font-weight: 600; line-height: 15px; text-align: center; }
.v2-dag i.m.aan { background: rgba(255,255,255,.18); }
.v2-meld { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border-top: 1px solid var(--rand); }
.v2-meld li { position: relative; padding: 18px 22px 20px 52px; transition: background var(--hover); }
.v2-meld li + li { border-left: 1px solid var(--rand); }
.v2-meld li.aan { background: rgba(255,255,255,.04); }
.v2-meld .v2-nr { position: absolute; left: 22px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #000; font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; }
.v2-meld small { font-size: 12px; color: var(--t60); }
.v2-meld p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--t85); }
.v2-samen { margin-top: 48px; }

@media (max-width: 900px) {
  .v2-meld { grid-template-columns: 1fr; } .v2-meld li + li { border-left: 0; border-top: 1px solid var(--rand); }
}
@media (max-width: 600px) {
  .v2-drie { margin-top: 28px; }
  .v2-drie p { display: none; }
  .v2-kanalen { gap: 12px; } .v2-kanalen span { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .v2-ab { margin-top: 28px; }
  .v2-ab-twee > div, .v2-ab-twee > div + div { padding: 20px 10px 22px 0; }
  .v2-ab-twee > div + div { padding-left: 14px; }
  .v2-ab-lt { position: static; display: inline-grid; width: 24px; height: 24px; margin-bottom: 10px; font-size: 11px; }
  .v2-ab-twee small { display: none; }
  .v2-ab-twee strong { font-size: 44px; }
  .v2-ab-uit { font-size: 12.5px; align-items: flex-start; } .v2-ab-uit i { margin-top: 6px; flex: none; }
  .v2-week { margin-top: 28px; }
  .v2-week .v2-bar { flex-wrap: nowrap; } .v2-week .v2-periode { display: none; }
  .v2-wr { padding: 12px 12px 6px; }
  .v2-wr-rij { grid-template-columns: 62px repeat(7, 1fr); gap: 5px; }
  .v2-wat { font-size: 11px; }
  .v2-wr-kop span { font-size: 10.5px; }
  .v2-dag { grid-template-columns: 1fr 1fr; gap: 2px; }
  .v2-dag i { height: 9px; border-radius: 2px; }
  .v2-dag i.m { box-shadow: inset 0 0 0 1px #fff; }
  .v2-dag i.m::after { top: -9px; right: -9px; width: 13px; height: 13px; font-size: 8.5px; line-height: 13px; }
  .v2-meld li { padding: 14px 14px 16px 44px; } .v2-meld .v2-nr { left: 14px; top: 14px; }
  .v2-samen { margin-top: 28px; }
}

/* 09-11 (Jip): pillen spaarzaam. Schakelaars 6px, categorieën als tabs, status als tekst met stip, lijstjes zonder rand */
.v2-wissel { border-radius: 6px; } .v2-wissel button { border-radius: 4px; }
.v2-chips { gap: 4px 22px; padding-top: 14px; }
.v2-chips button, .v2-chips button[aria-pressed="true"] { padding: 6px 0; border: 0; border-radius: 0; border-bottom: 1px solid transparent; background: none; }
.v2-chips button[aria-pressed="true"] { border-bottom-color: #fff; }
.v2-u-nu, .v2-u-nu.goed { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; }
.v2-u-nu::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); }
.v2-u-nu.goed::before { background: #86B99A; }
.v2-setup > div { gap: 10px 26px; }
.v2-setup span, .v2-meet[data-stand="na"] .v2-setup span { padding: 0; border: 0; border-radius: 0; }
.v2-kanalen span { height: auto; padding: 0; border: 0; border-radius: 0; font-size: 14px; }
.v2-kanalen > div { gap: 22px; }
.v2-kanalen .hoofd span { color: #fff; font-weight: 500; }
.v2-kanalen small { margin-right: 0; }

/* kleine beelden in de Campagnes-kolommen */
.v2-drie > div { padding-top: 0; overflow: hidden; }
.v2-mini-vak { position: relative; height: 130px; margin: 0 -28px 22px; padding: 22px 28px 0; border-bottom: 1px solid var(--rand); overflow: hidden;
  background: radial-gradient(80% 120% at 20% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.25)); mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,.25)); }
.v2-mini { list-style: none; font-size: 12.5px; }
.v2-mini-weg li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--t40); }
.v2-mini-weg s { text-decoration-color: rgba(255,255,255,.5); }
.v2-mini-weg li.blijft { color: #fff; border-bottom: 0; }
.v2-mini-weg li.blijft::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #86B99A; vertical-align: 1px; }
.v2-mini-marge { position: relative; display: grid; gap: 12px; padding-top: 4px; }
.v2-mini-marge > div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; color: var(--t60); }
.v2-mini-marge i { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
.v2-mini-marge b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: rgba(255,255,255,.4); }
.v2-mini-marge .op { color: #fff; } .v2-mini-marge .op b { background: #86B99A; }
.v2-mini-marge .onder b { background: rgba(255,255,255,.18); }
.v2-mini-marge u { position: absolute; top: -2px; bottom: -4px; left: calc(130px + 12px + (100% - 142px) * .5); width: 1px; background: rgba(255,255,255,.55); }
.v2-mini-lijn { position: relative; height: 90px; }
.v2-mini-lijn svg { width: 100%; height: 66px; display: block; }
.v2-mini-lijn polyline { fill: none; stroke: #86B99A; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.v2-mini-lijn .nu { position: absolute; right: -4px; top: calc(22 / 80 * 66px - 4px); width: 8px; height: 8px; border-radius: 50%; background: #86B99A; box-shadow: 0 0 0 4px rgba(134,185,154,.18); }
.v2-mini-lijn .dagen { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--t40); }
.v2-mini-lijn .dagen span:last-child { color: #86B99A; }
@media (max-width: 900px) { .v2-mini-vak { margin: 0 -20px 18px; padding: 18px 20px 0; height: 120px; } .v2-drie > div { padding-top: 0; } }
@media (max-width: 600px) {
  .v2-kanalen > div { gap: 16px; } .v2-kanalen span { font-size: 13px; }
  .v2-mini-marge > div { grid-template-columns: 120px 1fr; } .v2-mini-marge u { left: calc(120px + 12px + (100% - 132px) * .5); }
}

/* 24/7 als weekkalender (09-11): één blokje per controle per dag, legenda bovenin */
.v2-week .v2-dag { grid-template-columns: 1fr; }
.v2-week .v2-dag i { height: 30px; border-radius: 4px; }
.v2-legenda { margin-left: auto; display: inline-flex; gap: 18px; font-size: 12px; color: var(--t60); }
.v2-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.v2-legenda i { width: 12px; height: 12px; border-radius: 3px; background: rgba(134,185,154,.32); }
.v2-legenda i.m { background: none; box-shadow: inset 0 0 0 1.5px #fff; }
@media (max-width: 600px) {
  .v2-week .v2-bar { flex-wrap: wrap; } .v2-legenda { margin-left: 0; width: 100%; gap: 14px; font-size: 11.5px; }
  .v2-week .v2-dag { grid-template-columns: 1fr; } .v2-week .v2-dag i { height: 18px; border-radius: 3px; }
  .v2-week .v2-dag i.m { box-shadow: inset 0 0 0 1.5px #fff; }
  .v2-week .v2-dag i.m::after { top: -7px; right: -7px; }
}

/* 09-11 ronde 2: Campagnes-beelden als kleine panelen, platformrij, Conversie als testoverzicht */
.v2-mini-vak { height: 168px; padding-top: 20px; background: none; }
.v2-mp { border: 1px solid var(--rand); border-radius: 6px; background: radial-gradient(120% 90% at 15% -20%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), #070707; font-size: 12px; }
.v2-mp-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--rand); color: var(--t60); font-size: 11px; }
.v2-mp-bar b { font-weight: 500; font-size: 12px; color: #fff; }
.v2-mp-groen { color: #86B99A !important; }
.v2-mp-rij { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--t85); }
.v2-mp-rij em { font-style: normal; color: var(--t60); }
.v2-mp-rij small { width: 64px; text-align: right; font-size: 10.5px; color: var(--t40); }
.v2-mp-rij.weg span { color: var(--t40); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.4); }
.v2-mp-rij.top { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; color: #fff; }
.v2-mp-rij.top small, .v2-mp-rij.top em { color: #86B99A; }
.v2-mp-rij:has(i) { grid-template-columns: 128px 1fr 48px; }
.v2-mp-rij i { position: relative; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); }
.v2-mp-rij i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: rgba(255,255,255,.4); }
.v2-mp-rij.top i b { background: #86B99A; }
.v2-mp-rij:has(i) em { text-align: right; }
.v2-mp-lijn { display: block; width: calc(100% - 24px); height: 70px; margin: 12px 12px 0; }
.v2-mp-lijn polyline { fill: none; stroke: #86B99A; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.v2-mp-as { display: flex; justify-content: space-between; padding: 6px 12px 10px; font-size: 10.5px; color: var(--t40); }
.v2-kanalen { margin-top: 26px; }
.v2-kanalen > div { gap: 14px 30px; }
.v2-kanalen span { color: var(--t85); font-weight: 400; }
.v2-kanalen .dg-bol { font-size: 11px; padding: 1px 5px; }

.v2-test { margin: 56px 0 0; }
.v2-test .v2-app { width: auto; -webkit-mask-image: none; mask-image: none; }
.v2-test .v2-periode { margin-right: 0; }
.v2-test-rij { display: grid; grid-template-columns: 32px 150px 1fr 70px; gap: 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--t85); }
.v2-test-lt { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,.35); color: #fff; }
.v2-test-rij i { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.v2-test-rij i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: rgba(255,255,255,.4); }
.v2-test-rij strong { text-align: right; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 26px; color: var(--t60); }
.v2-test-rij.win { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; color: #fff; }
.v2-test-rij.win .v2-test-lt { background: #86B99A; border-color: #86B99A; color: #000; }
.v2-test-rij.win i b { background: #86B99A; } .v2-test-rij.win strong { color: #86B99A; }
.v2-test-voet { display: grid; grid-template-columns: repeat(3, 1fr); }
.v2-test-voet > div { padding: 18px 22px 22px; } .v2-test-voet > div + div { border-left: 1px solid var(--rand); }
.v2-test-voet small { display: block; font-size: 12px; color: var(--t60); }
.v2-test-voet strong { display: block; margin-top: 6px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 30px; color: #fff; }
.v2-test-voet .uit strong { color: #86B99A; }
.v2-zeker { display: block; position: relative; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(255,255,255,.08); }
.v2-zeker b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #fff; }
.v2-test figcaption { margin-top: 12px; font-size: 9px; font-style: italic; color: var(--t40); }
@media (max-width: 900px) { .v2-mini-vak { height: 150px; } }
@media (max-width: 600px) {
  .v2-mini-vak { height: 160px; padding-top: 16px; }
  .v2-mp-rij:has(i) { grid-template-columns: 118px 1fr 44px; }
  .v2-kanalen > div { gap: 12px 20px; }
  .v2-test { margin-top: 28px; }
  .v2-test .v2-bar { flex-wrap: nowrap; } .v2-test .v2-periode { display: none; }
  .v2-test-rij { grid-template-columns: 26px 1fr 54px; gap: 10px; padding: 13px 14px; }
  .v2-test-rij i { grid-column: 2 / 4; grid-row: 2; }
  .v2-test-rij strong { font-size: 22px; }
  .v2-test-voet > div { padding: 14px 12px 16px; } .v2-test-voet strong { font-size: 22px; white-space: nowrap; } .v2-test-voet .uit strong { font-size: 17px; margin-top: 10px; } .v2-test-voet small { font-size: 11px; }
}

/* donker paneel op een licht vlak: eigen (lichte) tekstkleuren */
section.licht .v2-app { --t: #fff; --t85: rgba(255,255,255,.85); --t60: rgba(255,255,255,.6); --t40: rgba(255,255,255,.5); --rand: rgba(255,255,255,.12); color: var(--t85); }

/* 09-11: formuleregel onder de winstgrens weg (niet te diep) */
.v2-u-som { display: none !important; }

/* 09-11 opbouw per sectie afwisselen (Jip, naar OOAK): Strategie en Conversie naast elkaar, 24/7 gecentreerd */
.v2-zij { display: grid; grid-template-columns: .78fr 1.22fr; gap: 64px; align-items: center; }
.v2-zij.om { grid-template-columns: 1.22fr .78fr; } .v2-zij.om .v2-zij-tekst { order: 2; }
.v2-zij-tekst h2 { text-align: left; }
.v2-zij-tekst .ap-kern { margin-top: 22px; }
.v2-zij-beeld > figure { margin-top: 0 !important; }
.v2-zij .v2-srij { grid-template-columns: 150px 1fr 84px; gap: 14px; }
.v2-zij .v2-u-getal { font-size: 42px; }
.v2-zij .v2-test-rij { grid-template-columns: 28px 120px 1fr 60px; gap: 12px; padding: 14px 18px; }
.v2-zij .v2-test-voet > div { padding: 16px 18px 18px; } .v2-zij .v2-test-voet strong { font-size: 26px; }
.v2-midden { text-align: center; max-width: 760px; margin: 0 auto; }
.v2-midden h2 { font-size: 72px; line-height: 1; margin-top: 6px; }   /* gelijk aan de hero-kop (brandboek §6: 70), niet groter */
.v2-midden .ap-kern { margin: 22px auto 0; }
.v2-midden .ap-alinea { margin: 12px auto 0; }
@media (max-width: 900px) {
  .v2-zij, .v2-zij.om { grid-template-columns: 1fr; gap: 28px; }
  .v2-zij.om .v2-zij-tekst { order: 0; }
}
@media (max-width: 600px) {
  .v2-zij-tekst .ap-alinea, .v2-midden .ap-alinea { display: none; }
  .v2-zij-tekst .ap-kern { margin-top: 16px; }
  .v2-zij .v2-srij { grid-template-columns: 92px 1fr 66px; gap: 10px; }
  .v2-zij .v2-test-rij { grid-template-columns: 26px 1fr 54px; gap: 10px; padding: 13px 14px; }
  .v2-midden h2 { font-size: 52px; }
}

/* slotblok op subpagina's gelijk aan het auditvak op home (09-11, Jip: randen te breed): 900 px breed, 72/80/64; mobiel 12 px van de rand, 40/20/36 */
section.laatst .banner { max-width: 900px; margin-left: auto; margin-right: auto; padding: 72px 80px 64px; }
@media (max-width: 600px) { section.laatst .banner { margin-left: calc(12px - var(--marge, 20px)); margin-right: calc(12px - var(--marge, 20px)); padding: 40px 20px 36px; } }

/* 09-11 eindcheck: slotblok 10px zoals het auditvak op home; bijschrift Campagnes; 24/7-balk; Campagnes op mobiel als veegrij (zoals de werkwijze op home) */
.banner { border-radius: 10px; }
.v2-cap { margin-top: 10px; font-size: 9px; font-style: italic; color: var(--t40); }
.v2-week .v2-live { padding-right: 0; padding-left: 10px; border-right: 0; border-left: 1px solid var(--rand); }
.v2-kanalen .dg-bol { display: inline-grid; place-items: center; height: 15px; padding: 0 3px; border-radius: 3px; font-size: 9px; line-height: 1; }
@media (max-width: 600px) {
  .v2-drie { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; border-radius: 0;
    margin-left: calc(-1 * var(--marge, 20px)); margin-right: calc(-1 * var(--marge, 20px)); padding: 0 var(--marge, 20px); scrollbar-width: none; }
  .v2-drie { scroll-padding-left: var(--marge, 20px); }
  .v2-drie::-webkit-scrollbar { display: none; }
  .v2-drie .v2-mp-rij small { display: none; } .v2-drie .v2-mp-rij { grid-template-columns: 1fr auto; } .v2-drie .v2-mp-rij:has(i) { grid-template-columns: 112px 1fr 44px; }
  .v2-drie > div, .v2-drie > div + div { flex: 0 0 84%; scroll-snap-align: start; border: 1px solid var(--rand); border-radius: 10px; padding: 0 20px 22px; }
}
/* ruimte onder de korte hero op alle subpagina's gelijk aan Aanpak: 128 desktop / ≈100 mobiel */
.hero.kort + main > section:first-child { padding-top: 32px !important; }
@media (max-width: 600px) { .hero.kort + main > section:first-child { padding-top: 0 !important; } }

/* 09-11 ronde "net wat beter": arcering en verbindingslijnen in de rekenstrook, schaal onder de winstgrens,
   lijngrafiek in de A/B-test, samenvatting/labels/tooltip in 24/7 */
.v2-srij.kost i { background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 1.5px, rgba(255,255,255,0) 1.5px 6px); border: 1px solid rgba(255,255,255,.24); }
.v2-verb { position: absolute; bottom: 100%; width: 0; border-left: 1px dashed rgba(255,255,255,.28); text-decoration: none; pointer-events: none; }
.v2-uitkomst { align-items: center; }
.v2-schaal { position: relative; flex: 1; max-width: 300px; padding: 14px 0 18px; }
.v2-sc-as { position: relative; display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.v2-sc-as u { position: absolute; top: -7px; bottom: -7px; width: 1.5px; margin-left: -.75px; background: #fff; transition: left .55s cubic-bezier(.22,1,.36,1); }
.v2-sc-as i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 0 0 3px #060606; transition: left .55s cubic-bezier(.22,1,.36,1), background .3s; }
.v2-sc-as i.goed { background: #86B99A; }
.v2-sc-min, .v2-sc-max { position: absolute; bottom: 0; font-size: 10.5px; color: var(--t40); }
.v2-sc-min { left: 0; } .v2-sc-max { right: 0; }

.v2-test-leg { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 16px 22px 4px; font-size: 13px; color: var(--t60); }
.v2-test-leg span { display: inline-flex; align-items: center; gap: 8px; }
.v2-test-leg i { width: 14px; height: 2px; background: #86B99A; } .v2-test-leg i.a { background: rgba(255,255,255,.45); }
.v2-test-leg b { margin-left: 4px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; color: var(--t85); }
.v2-test-leg .win b { color: #86B99A; }
.v2-grafiek { position: relative; padding: 10px 22px 6px 58px; }
.v2-grafiek svg { display: block; width: 100%; height: 150px; overflow: visible; }
.v2-grafiek .rst line { stroke: rgba(255,255,255,.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v2-grafiek polyline { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.v2-grafiek polyline.a { stroke: rgba(255,255,255,.4); } .v2-grafiek polyline.b { stroke: #86B99A; }
.v2-g-y { position: absolute; left: 22px; margin-top: 4px; transform: translateY(-50%); font-size: 10.5px; color: var(--t40); }
.v2-g-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--t40); }
.v2-test-voet { border-top: 1px solid var(--rand); }

.v2-samenv { margin-left: 12px; font-size: 12px; color: var(--t60); }
.v2-live i { animation: v2-puls 2.4s ease-in-out infinite; }
@keyframes v2-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(134,185,154,.55); } 50% { box-shadow: 0 0 0 5px rgba(134,185,154,0); } }
.v2-meld small { display: flex; align-items: center; gap: 10px; }
.v2-meld em { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 11px; color: var(--t60); }
.v2-meld em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.v2-meld em.auto { color: #86B99A; } .v2-meld em.auto::before { background: #86B99A; }
.v2-dag { position: relative; }
.v2-dag::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); z-index: 3; white-space: nowrap; padding: 4px 8px; border-radius: 4px;
  font-size: 11px; color: #fff; background: #000; border: 1px solid rgba(255,255,255,.22); opacity: 0; pointer-events: none; transition: opacity var(--hover), transform var(--hover); }
.v2-dag:hover::after { opacity: 1; transform: translate(-50%, 0); }
.v2-dag:hover i:not(.m) { background: rgba(134,185,154,.5); }
@media (prefers-reduced-motion: reduce) { .v2-live i { animation: none; } .v2-sc-as u, .v2-sc-as i { transition: none; } }
@media (hover: none) { .v2-dag::after { display: none; } }
@media (max-width: 600px) {
  .v2-schaal { width: 100%; max-width: none; }
  .v2-uitkomst { align-items: flex-start; }
  .v2-samenv { display: none; }
  .v2-test-leg { padding: 12px 14px 2px; gap: 6px 18px; font-size: 12px; } .v2-test-leg b { font-size: 17px; }
  .v2-grafiek { padding: 8px 14px 4px 46px; } .v2-grafiek svg { height: 110px; } .v2-g-y { left: 14px; }
  .v2-meld em { font-size: 10.5px; }
}

/* 09-11: verbindingslijnen doorlopend en zacht, schuiven mee met de balken; geen lichtval achter A/B-test en 24/7 */
.v2-verb { border-left: 0 !important; width: 1px !important; background: rgba(255,255,255,.22); transition: left .55s cubic-bezier(.22,1,.36,1), height .3s ease; }
.v2-test .v2-app, .v2-week .v2-app { background: #060606; }
@media (prefers-reduced-motion: reduce) { .v2-verb { transition: none; } }

/* 09-11: geen verbindingslijnen; rand licht op bij hover (recept van .kaart op home, enkel-glas.css) */
.v2-verb { display: none !important; }
.v2-reken .v2-app, .v2-test .v2-app, .v2-week .v2-app, .v2-mp { position: relative; border-color: transparent; }
.v2-reken .v2-app::after, .v2-test .v2-app::after, .v2-week .v2-app::after, .v2-mp::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.30), rgba(255,255,255,.11) 46%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; transition: opacity 260ms; }
.v2-reken .v2-app:hover::after, .v2-test .v2-app:hover::after, .v2-week .v2-app:hover::after, .v2-mp:hover::after {
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.50), rgba(255,255,255,.13) 46%, rgba(255,255,255,.08)); }

/* 09-11: twee zwarte secties na elkaar krijgen meer lucht (geen kleurwissel die de grens aangeeft) */
.v2-stap:not(.licht) + .v2-stap:not(.licht) { padding-top: 128px; }
@media (max-width: 600px) { .v2-stap:not(.licht) + .v2-stap:not(.licht) { padding-top: 88px; } }

/* Over mij (09-11): portret dat naar zwart vervaagt (zoals de portretten op ooakbrands.com), LinkedIn-link, certificeringen als badgeraster */
#over-intro .persoon { border: 0; border-radius: 10px; background: none; }
#over-intro .persoon::after { background: linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,0) 55%); }
#over-intro .persoon img { filter: grayscale(1); }
#over-intro .rij { grid-template-columns: 380px 1fr; }   /* 09-11: foto iets kleiner, tekst krijgt meer gewicht */
.naar-li { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-size: 15px; font-weight: 500; color: #fff; }
.naar-li::after { content: "→"; margin-left: 8px; transition: transform var(--hover); }
.naar-li:hover::after { transform: translateX(3px); }
.cbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: var(--breed); margin: 48px auto 0; }
.cb { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 14px 22px; border-radius: 10px; background: #060606; }
.cb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.30), rgba(255,255,255,.11) 46%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.cb:hover::after { background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.50), rgba(255,255,255,.13) 46%, rgba(255,255,255,.08)); }
.cb-beeld { height: 84px; display: grid; place-items: center; }
.cb-beeld img.echt { max-height: 84px; max-width: 100%; object-fit: contain; }
.cb-beeld .plek { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rand); }
.cb-beeld .plek img { width: 28px; height: 28px; object-fit: contain; }
.cb b { margin-top: 16px; font-family: "SUSE", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; line-height: 1.25; }
.cb small { margin-top: 6px; font-size: 12px; color: var(--t60); }
@media (max-width: 900px) { .cbs { grid-template-columns: repeat(3, 1fr); } .over .rij { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cbs { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 32px; } .cb { padding: 20px 10px 18px; } .cb-beeld { height: 72px; } .cb-beeld img.echt { max-height: 72px; } .cb b { font-size: 16px; } #over-intro .persoon { max-width: 300px; } }

/* certificaten als rustige lijst onder de naam (09-11) */
.cb ul { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
.cb li { font-size: 13px; line-height: 1.45; color: var(--t60); }
.cb li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 7px; border-radius: 50%; background: rgba(255,255,255,.35); vertical-align: 2px; }
.cb { justify-content: flex-start; }

/* Over mij spacing (09-11): het portret vervaagt onderaan naar zwart, dus de zichtbare ruimte tot Certificeringen
   was groter dan 96; daarom 72 / 48 (brandboek §7: bewust krapper waar het bij elkaar hoort). Mobiel: foto en intro gecentreerd. */
#certificeringen { padding-top: 72px; }
@media (max-width: 600px) {
  #certificeringen { padding-top: 48px; }
  #over-intro .persoon { margin-left: auto; margin-right: auto; }
  #over-intro .rij > div:not(.persoon) { text-align: center; }
  #over-intro .naar-li { justify-content: center; }
}

/* uitgelichte case (09-11, Jip: "meer op Google Ads laten lijken"): app-balk, zijrail, datumkiezer, tooltip */
.gads { padding: 0; overflow: hidden; }
.gads-logo { flex-direction: row !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; font-weight: 500 !important; }
.gads-app { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #dadce0; }
.gads-merk { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #3c4043; white-space: nowrap; }
.gads-merk img { width: 20px; height: 20px; }
.gads-zoek { flex: 1; max-width: 280px; margin-left: 10px; padding: 7px 12px 7px 32px; border-radius: 6px; background: #f1f3f4; font-size: 12px; color: #5f6368; position: relative; white-space: nowrap; overflow: hidden; }
.gads-zoek::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border: 1.6px solid #5f6368; border-radius: 50%; }
.gads-zoek::after { content: ""; position: absolute; left: 20px; top: 50%; width: 5px; height: 1.6px; margin-top: 4px; background: #5f6368; transform: rotate(45deg); }
.gads-ava { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: #1a73e8; flex: none; }
.gads-lijf { display: grid; grid-template-columns: 76px 1fr; }
.gads-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; border-right: 1px solid #dadce0; font-size: 10px; color: #3c4043; }
.gads-rail .plus { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 22px; font-weight: 300; color: #1a73e8; background: #fff; box-shadow: 0 1px 3px rgba(60,64,67,.3); }
.gads-rail span:not(.plus) { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gads-rail i { width: 32px; height: 22px; border-radius: 11px; position: relative; }
.gads-rail i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 3px; border: 1.6px solid #5f6368; }
.gads-rail .aan i { background: #e8f0fe; } .gads-rail .aan i::after { border-color: #1a73e8; } .gads-rail .aan { color: #1a73e8; font-weight: 500; }
.gads-hoofd { padding: 14px 18px 12px; min-width: 0; }
.gads-logo { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 20px; font-weight: 400; color: #202124; }
.gads-logo small { font-size: 11px; color: #5f6368; }
.gads-pil { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #dadce0; border-radius: 6px; font-size: 12px; color: #5f6368; white-space: nowrap; }
.gads-pil b { font-weight: 500; color: #202124; }
.gads-tip text.t1 { font-size: 11px; fill: #202124; font-weight: 500; }
.gads-tip text.t2 { font-size: 10.5px; fill: #5f6368; }
.gads-tip text.t3 { font-size: 11px; fill: #202124; }
.gads-tip rect { filter: drop-shadow(0 1px 2px rgba(60,64,67,.3)); }
@media (max-width: 900px) { .gads-lijf { grid-template-columns: 1fr; } .gads-rail { display: none; } }
@media (max-width: 600px) {
  .gads-zoek { display: none; } .gads-hoofd { padding: 12px 12px 10px; }
  .gads-kop { flex-direction: column; } .gads-datum { text-align: left; } .gads-logo { font-size: 17px; }
  .gads-tip text.t1, .gads-tip text.t2, .gads-tip text.t3 { font-size: 17px; }
  .gads-tip { display: none; }
}

.branches li.meer-pil { border-style: dashed; color: var(--t60); }

.gads-hov { opacity: 0; transition: opacity 120ms; pointer-events: none; }
.gads-hov.aan { opacity: 1; }
.gads-vang { cursor: crosshair; }
@media (max-width: 600px) { .gads-tip { display: block !important; } }

/* Cases (09-11): het vraagblok is nu de hoofdoproep, dus meer lucht erboven */
.meer .vraag { margin-top: 72px !important; }
@media (max-width: 600px) { .meer .vraag { margin-top: 48px !important; } }

/* uitgelichte case: .eenheid en de eerste uitlegregel gaven samen een dubbele lijn (09-11) */
.uitgelicht .uitleg > div:first-child { border-top: 0; }
@media (max-width: 600px) { .branches .groep + .groep { margin-top: 28px; } }

/* 09-11 (Jip): het Google Ads-overzicht niet op mobiel; het grote vóór/na-getal zegt daar genoeg */
@media (max-width: 600px) { .uitgelicht .gads-vak { display: none; } }

/* Contact (09-11): auditvoorbeeld als zwart paneel in de stijl van Aanpak, hover-rand; mobiel formulier eerst; onderdelen compact */
.dia { background: #060606; color: #fff; border: 1px solid var(--rand); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dia.een { background: #0b0b0b; } .dia.twee { background: #101010; }
.dia.achter .dia-label { color: var(--t40); }
.dia-top { color: var(--t60); }
.dia-drie > div { border-top-color: var(--rand); }
.dia-drie span { color: var(--t60); }
.dia-drie strong { color: #86B99A; }
.dia-drie p { color: var(--t60); }
.dia-eerst { color: var(--t85); }
.dia-eerst span { background: #86B99A; color: #000; }
.dia-voortgang { background: rgba(255,255,255,.08); } .dia-voortgang i { background: #86B99A; }
.dia.voor { border-color: transparent; }
.dia.voor::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.30), rgba(255,255,255,.11) 46%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.dia.voor:hover::after { background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.50), rgba(255,255,255,.13) 46%, rgba(255,255,255,.08)); }
@media (max-width: 900px) { .contact-rij .formulier { order: -1; } }
@media (max-width: 600px) { .onderdeel p { display: none; } .onderdeel { padding-top: 14px !important; padding-bottom: 14px !important; } }

.onderdeel.extra b { color: var(--t60); font-weight: 400; }
@media (max-width: 600px) { .onderdeel.extra { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; } }

/* auditvoorbeeld in de opmaak van de OOAK-presentaties (09-11, Jip): grotesk met één cursief serif accentwoord,
   gecentreerd, kleine kapitalen met ruime spatiëring. Serif = systeemletter (geen webfont), alleen in dit voorbeeld. */
.deck.ooak .dia { text-align: center; }
.deck.ooak .dia.voor { padding: 22px 28px 0; }   /* cqw in de eigen padding rekende tegen het venster: 63px */
.deck.ooak em { font-family: "Iowan Old Style", "Palatino", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.deck.ooak .dia.achter { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.deck.ooak .dia.achter .dia-label, .deck.ooak .dia-top { font-size: 1.7cqw; letter-spacing: .18em; text-transform: uppercase; }
.deck.ooak .dia.achter b, .deck.ooak .dia-kop { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: -.035em; }
.deck.ooak .dia.achter b { font-size: 5cqw; }
.deck.ooak .dia-kop { margin-top: auto; font-size: 5.6cqw; line-height: 1.1; }
.deck.ooak .dia-drie { margin-top: 5cqw; gap: 0; }
.deck.ooak .dia-drie > div { border-top: 0; padding: 0 2cqw; }
.deck.ooak .dia-drie > div + div { border-left: 1px solid var(--rand); }
.deck.ooak .dia-drie strong { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 6cqw; letter-spacing: -.05em; color: #fff; }
.deck.ooak .dia-drie span { display: block; margin-top: 1.2cqw; font-size: 1.9cqw; line-height: 1.4; color: var(--t60); }
.deck.ooak .dia-drie span b { font-weight: 500; color: #fff; }
.deck.ooak .dia-eerst { margin-top: auto; margin-bottom: 4.4cqw; font-size: 1.7cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--t60); }
.deck.ooak .dia-eerst span { margin: 0 0 0 .6cqw; padding: 0; background: none; color: var(--t60); font-size: inherit; }
@media (max-width: 600px) {
  .deck.ooak .dia-top, .deck.ooak .dia-eerst { font-size: 10px; letter-spacing: .14em; }
  .deck.ooak .dia-kop { margin-top: 18px; font-size: 24px; }
  .deck.ooak .dia-drie { margin-top: 18px; grid-template-columns: 1fr; gap: 0; }
  .deck.ooak .dia-drie > div { display: block; padding: 12px 0; text-align: center; } .deck.ooak .dia-drie > div + div { border-left: 0; border-top: 1px solid var(--rand); }
  .deck.ooak .dia-drie strong { font-size: 30px; } .deck.ooak .dia-drie span { font-size: 13px; margin-top: 4px; }
  .deck.ooak .dia-eerst { margin: 14px 0 18px; } .deck.ooak .dia-kop { margin-top: 18px; }
}

/* OOAK-opmaak verfijnd na hun Instagram (09-11): koppen strak gespatieerd (Inter-achtig), cursief serif accent
   (EB Garamond-achtig), korte onderregel met vet woord, klein woordmerk onderaan in het midden met stippen i.p.v. balk */
.deck.ooak .dia-kop, .deck.ooak .dia.achter b { letter-spacing: -.055em; word-spacing: .04em; }
.deck.ooak em { font-size: 1.06em; letter-spacing: -.02em; }
.deck.ooak .dia-drie strong { letter-spacing: -.06em; }
.dia-onder { margin-top: 3.4cqw; font-size: 2cqw; color: var(--t60); letter-spacing: -.01em; }
.dia-onder b { color: #fff; font-weight: 500; }
.dia-voet { margin-top: auto; padding-bottom: 3cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.dia-merk { font-size: 1.6cqw; font-weight: 500; letter-spacing: .02em; color: var(--t60); }
.dia-merk sup { font-size: .5em; }
.dia-stip { display: inline-flex; gap: .8cqw; } .dia-stip i { width: .9cqw; height: .9cqw; border-radius: 50%; background: rgba(255,255,255,.25); } .dia-stip i.aan { background: #fff; }
@media (max-width: 600px) { .deck.ooak .dia-top .lang { display: none; } .deck.ooak .dia-top { white-space: nowrap; } .dia-onder { margin-top: 10px; font-size: 13px; } .dia-voet { padding: 14px 0 14px; gap: 8px; } .dia-merk { font-size: 10px; } .dia-stip { gap: 5px; } .dia-stip i { width: 5px; height: 5px; } }

/* twaalf kernonderdelen op mobiel (09-11, Jip: niet mooi): één genummerde lijst, geen raster met lijnen */
@media (max-width: 600px) {
  .onderdelen { display: block; counter-reset: ond; }
  .onderdeel, .onderdeel:not(:nth-child(4n+1)), .onderdeel:nth-child(2n) { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 !important; border-left: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .onderdeel:not(.extra)::before { counter-increment: ond; content: counter(ond, decimal-leading-zero); flex: none; width: 22px; font-size: 11px; font-weight: 500; color: var(--t40); }
  .onderdeel b { margin-top: 0; font-size: 15px; font-weight: 400; }
  .onderdeel.extra { border-bottom: 0; padding-left: 36px !important; }
  .onderdeel.extra b { font-size: 14px; }
}

/* kop 'Twaalf kernonderdelen' oogde op mobiel grijs: SUSE Light op 28px is dun; iets voller en gelijk aan de andere kopjes */
@media (max-width: 600px) { .onderdelen-kop h3 { font-weight: 400; font-size: 26px; } }

.dia-ill { margin-top: 14px; font-size: 9px; font-style: italic; color: var(--t40); }

/* Diensten, Daarnaast (09-11): zwarte panelen zoals op Aanpak i.p.v. grijs glas, hover-rand */
.scene.dg { background: #060606; border: 0; position: relative; }
.scene.dg .dg-raster { display: none; }
.dg-glas { background: #0a0a0a; border: 1px solid var(--rand); box-shadow: none; }
.dg-rij.top { background: rgba(134,185,154,.07); border: 0; box-shadow: inset 2px 0 0 #86B99A; }
.scene.dg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.30), rgba(255,255,255,.11) 46%, rgba(255,255,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.scene.dg:hover::after { background: radial-gradient(60% 120% at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.50), rgba(255,255,255,.13) 46%, rgba(255,255,255,.08)); }
/* vergelijking op mobiel: per onderwerp Bureau en Bij mij onder elkaar (10-11, Jip: het verschil moet zichtbaar blijven) */
@media (max-width: 600px) {
  .vergelijk-tabel .kop-rij { display: none !important; }
  .vergelijk-tabel .rij { grid-template-columns: 1fr !important; padding: 20px 18px 22px; }
  .vergelijk-tabel .rij span { padding: 0 !important; }
  .vergelijk-tabel .wat { margin-bottom: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
  .vergelijk-tabel .bureau, .vergelijk-tabel .ik { display: grid !important; grid-template-columns: 58px 1fr; column-gap: 12px; font-size: 14px; line-height: 1.5; }
  .vergelijk-tabel .ik { margin-top: 12px; padding-top: 12px !important; border-top: 1px dashed rgba(0,0,0,.1) !important; border-left: 0 !important; background: none !important; font-weight: 500; }
  .vergelijk-tabel .rij .ik { margin-top: 10px; padding-top: 10px !important; }
  .vergelijk-tabel .bureau::before, .vergelijk-tabel .ik::before { font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--t40); }
  .vergelijk-tabel .bureau::before { content: "Bureau"; }
  .vergelijk-tabel .ik::before { content: "Bij mij"; font-weight: 500; color: var(--t); }
}

/* Diensten 'Wat ik doe' (09-11) */
.wat-ik-doe .kaart.breed { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 40px; align-items: center; }
.wat-ik-doe .kaart.breed .scene { grid-row: 1 / 5; }
.wat-ik-doe .kaart.breed { align-content: center; } .wat-ik-doe .kaart.breed > :not(.scene) { align-self: start; }
.wat-ik-doe .kaart.breed h3 { margin-top: 0; font-size: 30px; }
.wd-link { margin-top: 14px; }
.wd-pfs { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 16px 4px 10px; }
.wd-pf { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t85); }
.wd-pf img { height: 15px; width: auto; }
.wd-pf .dg-bol { font-size: 9px; padding: 1px 4px; }
.wd-trij { display: grid; grid-template-columns: 110px 1fr 44px; gap: 12px; align-items: center; padding: 11px 0; font-size: 12.5px; color: var(--t85); border-bottom: 1px solid rgba(255,255,255,.06); }
.wd-trij span { display: inline-flex; align-items: center; gap: 8px; } .wd-trij img { height: 13px; }
.wd-trij i { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); }
.wd-trij b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #86B99A; }
.wd-trij em { font-style: normal; text-align: right; }
/* Waarmee ik werk: geen pillen meer (Jip 09-11: pillen spaarzaam), alleen logo + naam; 'En nog veel meer' eronder */
.pf-rij li { border: 0 !important; background: none !important; height: 40px !important; padding: 0 14px !important; }
.pf-rij { gap: 22px; }
.pf-meer { margin-top: 26px; text-align: center; font-size: 15px; color: #fff; }
@media (max-width: 900px) { .wat-ik-doe .kaart.breed { display: block; } .wat-ik-doe .kaart.breed h3 { font-size: 24px; margin-top: 18px; } }
@media (max-width: 600px) { .wat-ik-doe .kaart.breed { grid-column: 1 / -1; } .wat-ik-doe .wd-link { display: none; } }

/* 'Wat ik doe' panelen (09-11): Aanpak-stijl */
.wd-vak { margin: 0; padding: 22px 22px 0; height: 288px; border-radius: 6px; background: #060606; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.wd-vak.breed { height: 320px; }
.wat-ik-doe .kaart.breed { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto auto; align-content: center; }
.wat-ik-doe .kaart.breed .wd-vak { grid-column: 1; grid-row: 1 / span 3; }
.wat-ik-doe .kaart.breed h3, .wat-ik-doe .kaart.breed p, .wat-ik-doe .kaart.breed .wd-link { grid-column: 2; }
.wat-ik-doe .kaart.breed h3 { align-self: end; } .wat-ik-doe .kaart.breed .wd-link { align-self: start; }
.wd-app { font-size: 12.5px; }
.wd-titel { display: inline-flex; align-items: center; gap: 8px; } .wd-titel img { height: 14px; }
.wd-titel ~ span { display: inline-flex; align-items: center; gap: 6px; }
.wd-rij { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--t85); }
.wd-rij:last-child { border-bottom: 0; }
.wd-rij img { height: 14px; width: auto; }
.wd-rij em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--t60); font-size: 11.5px; }
.wd-rij.top { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; color: #fff; } .wd-rij.top em { color: #86B99A; }
.wd-ok { width: 6px; height: 6px; border-radius: 50%; background: #86B99A; }
.wd-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.06); }
.wd-tegel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 92px; background: #070707; }
.wd-tegel img { height: 22px; width: auto; } .wd-tegel small { font-size: 11px; color: var(--t60); }
.wd-tegel .dg-bol { font-size: 12px; } .wd-plus { font-size: 22px; font-weight: 300; color: var(--t60); line-height: 22px; }
.wd-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.wd-fotos.lp { grid-template-columns: 1.3fr 1fr; }
.wd-fotos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; filter: saturate(.3) brightness(.82); transition: filter 700ms ease; }
.wd-fotos.lp img { aspect-ratio: 4 / 3; object-position: top; }
.wat-ik-doe .kaart:hover .wd-fotos img { filter: none; }
.wd-ill { position: absolute; left: 14px; bottom: 6px; font-size: 9px; font-style: italic; color: var(--t40); }
.wd-app { position: relative; }
@media (max-width: 900px) { .wat-ik-doe .kaart.breed h3, .wat-ik-doe .kaart.breed p, .wat-ik-doe .kaart.breed .wd-link { grid-column: auto; } }
@media (max-width: 600px) { .wat-ik-doe .wd-vak { display: none; } .wat-ik-doe .kaart.breed .wd-vak { display: block; height: auto; padding: 14px 0 0; margin-bottom: 16px; } }

/* Wat ik doe, ronde 2 (09-11): Google-campagnetypes als mini-voorbeelden, Meta-post + story, feed met productfoto's */
.wdg-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.06); }
.wdg-vak { background: #070707; padding: 10px 12px 12px; min-height: 92px; }
.wdg-kop { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t60); margin-bottom: 8px; } .wdg-kop img { height: 11px; }
.wdg-search small { display: block; font-size: 9.5px; font-weight: 600; color: var(--t85); }
.wdg-search b { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #a9c7ff; }
.wdg-search span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--t60); }
.wdg-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wdg-shop span { display: flex; flex-direction: column; gap: 4px; } .wdg-shop img { width: 100%; height: 34px; object-fit: cover; border-radius: 3px; filter: saturate(.3) brightness(.85); transition: filter 700ms ease; } .wat-ik-doe .kaart:hover .wdg-shop img { filter: none; }
.wdg-shop b { font-size: 10.5px; font-weight: 500; color: var(--t85); }
.wdg-yt { position: relative; height: 54px; border-radius: 4px; background: linear-gradient(135deg, #1a1a1a, #0d0d0d); border: 1px solid rgba(255,255,255,.08); }
.wdg-yt .play { position: absolute; left: 50%; top: 50%; width: 22px; height: 16px; margin: -10px 0 0 -11px; border-radius: 4px; background: #fff; }
.wdg-yt .play::after { content: ""; position: absolute; left: 9px; top: 4px; border-left: 6px solid #000; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.wdg-yt small { position: absolute; left: 6px; bottom: 4px; font-size: 9px; color: #f5d26b; }
.wdg-pmax { display: flex; flex-wrap: wrap; gap: 5px; } .wdg-pmax span { font-size: 10px; padding: 3px 7px; border-radius: 3px; background: rgba(255,255,255,.07); color: var(--t85); }
.wdm { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; padding: 12px; align-items: start; }
.wdm-post { border: 1px solid rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; background: #0a0a0a; }
.wdm-kop { display: flex; align-items: center; gap: 7px; padding: 6px 8px; } .wdm-kop i { width: 18px; height: 18px; border-radius: 50%; background: #3a3a3a; }
.wdm-kop span { display: flex; flex-direction: column; line-height: 1.15; } .wdm-kop b { font-size: 10.5px; font-weight: 600; color: #fff; } .wdm-kop small { font-size: 9px; color: var(--t60); }
.wdm-post img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.wdm-cta { display: flex; justify-content: space-between; padding: 6px 8px; font-size: 10.5px; color: #fff; background: rgba(255,255,255,.05); }
.wdm-story { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 9 / 16; }
.wdm-story img { width: 100%; height: 100%; object-fit: cover; }
.wdm-balk { position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: rgba(255,255,255,.35); } .wdm-balk i { display: block; width: 40%; height: 100%; background: #fff; }
.wdm-swipe { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 9.5px; color: #fff; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.45); white-space: nowrap; }
.wdm img, .wdf-rij img { filter: saturate(.3) brightness(.85); transition: filter 700ms ease; }
.wat-ik-doe .kaart:hover .wdm img, .wat-ik-doe .kaart:hover .wdf-rij img { filter: none; }
.wdf-rij { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.wdf-rij:last-child { border-bottom: 0; }
.wdf-rij img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.wdf-rij span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wdf-rij s { font-size: 10px; color: var(--t40); } .wdf-rij b { font-size: 11.5px; font-weight: 400; color: var(--t85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdf-rij em { font-style: normal; font-size: 10.5px; color: var(--t60); }
.wdf-rij.top { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; } .wdf-rij.top em, .wdf-rij.top b { color: #86B99A; } .wdf-rij.top b { color: #fff; }

/* ronde 3 (09-11): Shopping als echte productkaarten, PMax met officiële netwerkiconen, story met adverteerder en CTA */
.wdg-gesp { display: block; font-size: 9.5px; font-weight: 600; color: var(--t85); margin-bottom: 5px; }
.wdg-sks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wdg-sk { display: flex; flex-direction: column; gap: 1px; padding: 4px; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.wdg-sk img { width: 100%; height: 30px; object-fit: cover; border-radius: 3px; margin-bottom: 2px; }
.wdg-sk .t { font-size: 9px; color: var(--t85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdg-sk b { font-size: 10px; font-weight: 600; color: #fff; } .wdg-sk .w { font-size: 8.5px; color: var(--t60); } .wdg-sk .r { font-size: 8.5px; color: #f5d26b; }
.wdg-shop span img { height: 30px; }
.wdg-pmax span { display: inline-flex; align-items: center; gap: 5px; }
.wdg-pmax img { height: 11px; width: auto; }
.wdm-sk { position: absolute; left: 7px; top: 13px; display: flex; align-items: center; gap: 5px; }
.wdm-sk > i { width: 16px; height: 16px; border-radius: 50%; background: #3a3a3a; border: 1px solid rgba(255,255,255,.6); }
.wdm-sk span { display: flex; flex-direction: column; line-height: 1.1; } .wdm-sk b { font-size: 9px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.wdm-sk small { font-size: 8px; color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.wdm-swipe { display: inline-flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 12px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; bottom: 10px; }
.wdm-swipe i { font-style: normal; font-size: 8px; line-height: 6px; }
.wdm-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 25%, transparent 70%, rgba(0,0,0,.45)); pointer-events: none; }
.wdm-sk, .wdm-swipe, .wdm-balk { z-index: 2; }

.wdg-shop { display: block !important; }
.wd-vak { height: 312px; }
.wdg-vak { min-height: 0; }
.wdg-sk .w { display: none; }

.wdm-story { aspect-ratio: auto; height: 236px; } .wdm-post img { aspect-ratio: 4 / 3; }

.wd-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; border: 0 !important; font-size: 15px; font-weight: 500; color: #fff; }
.wd-link::after { content: "→"; margin-left: 8px; transition: transform var(--hover); } .wd-link:hover::after { transform: translateX(3px); }

@media (max-width: 900px) { section.licht { margin-top: var(--sectie); } }

/* spacing 'Wat ik doe' (09-11): tekst in de brede kaart als één blok in het midden; panelen verticaal gecentreerd, h3 overal op dezelfde afstand */
.wat-ik-doe .kaart.breed { grid-template-rows: 1fr auto auto auto 1fr !important; row-gap: 0; }
.wat-ik-doe .kaart.breed .wd-vak { grid-row: 1 / -1 !important; }
.wat-ik-doe .kaart.breed h3 { grid-row: 2; align-self: end; margin: 0; }
.wat-ik-doe .kaart.breed p { grid-row: 3; margin-top: 12px; }
.wat-ik-doe .kaart.breed .wd-link { grid-row: 4; margin: 10px 0 0 10px; }   /* zelfde inspringing als kop en tekst (padding 10px) */
.wat-ik-doe .kaart:not(.breed) .wd-vak { display: flex; flex-direction: column; justify-content: center; padding-top: 0; height: 300px; -webkit-mask-image: none; mask-image: none; }
.wat-ik-doe .kaart:not(.breed) h3 { margin-top: 22px; }
@media (max-width: 900px) { .wat-ik-doe .kaart.breed { display: block; } .wat-ik-doe .kaart.breed h3 { margin-top: 20px; } }
@media (max-width: 600px) { .wat-ik-doe .kaart.breed .wd-vak { margin-bottom: 0; } .wat-ik-doe .kaart.breed h3 { margin-top: 28px !important; } .wat-ik-doe .kaart:not(.breed) h3 { margin-top: 0; } .wat-ik-doe .kaart:not(.breed) .wd-vak { display: none !important; } }

/* creatives als advertenties met overlay (09-11) */
.wdc { position: relative; display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 5; }
.wdc img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; border-radius: 0 !important; }
.wdc.pack img { object-fit: contain; padding: 30% 14% 20%; box-sizing: border-box; background: #ece9e2; }
.wdc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 35%, transparent 65%, rgba(0,0,0,.35)); pointer-events: none; }
.wdc.pack::after { display: none; }
.wdc-tag { position: absolute; z-index: 2; left: 6px; top: 6px; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; background: #000; color: #fff; padding: 2px 4px; border-radius: 2px; }
.wdc-kop { position: absolute; z-index: 2; left: 7px; right: 7px; top: 8px; font-size: 10.5px; font-weight: 700; line-height: 1.1; color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.wdc-tag + .wdc-kop { top: 22px; } .wdc-kop.donker { color: #000; text-shadow: none; }
.wdc-knop { position: absolute; z-index: 2; right: 6px; bottom: 6px; font-style: normal; font-size: 8px; font-weight: 700; background: #fff; color: #000; padding: 4px 6px; border-radius: 3px; white-space: nowrap; }
.wdc-knop.donker { background: #000; color: #fff; }
.wat-ik-doe .kaart:hover .wdc img { filter: none; }

.wdm-story { height: 188px !important; } .wdm-post img { aspect-ratio: 16 / 10 !important; } .wdm { padding: 10px 12px; }
.wd-app .wd-ill { position: static; display: block; padding: 0 12px 8px; }

/* audit-kaart (breed, gespiegeld) en bewijslink (09-11) */
.wat-ik-doe .kaart.breed.om { grid-template-columns: 1fr 1.2fr; }
.wat-ik-doe .kaart.breed.om .wd-vak { grid-column: 2; }
.wat-ik-doe .kaart.breed.om h3, .wat-ik-doe .kaart.breed.om p, .wat-ik-doe .kaart.breed.om .wd-link { grid-column: 1; }
.wda-rij { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.wda-rij:last-child { border-bottom: 0; }
.wda-nr { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; border: 1px solid rgba(255,255,255,.3); color: #fff; }
.wda-rij span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; } .wda-rij b { font-weight: 500; color: #fff; font-size: 12.5px; } .wda-rij small { font-size: 11px; color: var(--t60); }
.wda-rij em { font-style: normal; font-size: 11px; color: var(--t60); }
.wda-rij.top { background: rgba(134,185,154,.07); box-shadow: inset 2px 0 0 #86B99A; } .wda-rij.top .wda-nr { background: #86B99A; border-color: #86B99A; color: #000; } .wda-rij.top em { color: #86B99A; }
.wd-bewijs { margin-top: 28px; text-align: center; } .wd-bewijs .wd-link { margin: 0 !important; }
@media (max-width: 900px) { .wat-ik-doe .kaart.breed.om .wd-vak, .wat-ik-doe .kaart.breed.om h3, .wat-ik-doe .kaart.breed.om p, .wat-ik-doe .kaart.breed.om .wd-link { grid-column: auto; } }
@media (max-width: 600px) { .wat-ik-doe .kaart.breed.om .wd-vak { display: none !important; } .wat-ik-doe .kaart.breed.om h3 { margin-top: 0 !important; } .wd-bewijs { margin-top: 20px; } }

/* creatives per merk een eigen overlay (09-11) */
.wdc.up img { object-fit: contain; padding: 40% 12% 6%; box-sizing: border-box; background: #ece9e2; }
.up-kop { position: absolute; z-index: 2; left: 8px; top: 8px; font: 900 15px/0.92 "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.03em; color: #111; }
.up-sub { position: absolute; z-index: 2; left: 8px; top: 54px; font-size: 7.5px; font-weight: 600; color: #111; }
.up-knop { position: absolute; z-index: 2; right: 0; bottom: 0; font-style: normal; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #111; color: #fff; padding: 5px 8px; }
.wdc.cp::after { background: linear-gradient(to top, rgba(40,90,160,.55), transparent 45%); }
.cp-wolk { position: absolute; z-index: 2; right: 6px; top: 6px; font-size: 7.5px; font-weight: 700; line-height: 1.1; text-align: center; color: #2b6fd6; background: #fff; padding: 6px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.cp-kop { position: absolute; z-index: 2; left: 0; right: 0; bottom: 9px; text-align: center; font: 700 11.5px/1.1 "Avenir Next", "Nunito", "Helvetica Neue", sans-serif; color: #fff; letter-spacing: -.01em; }
.wdc.pl::after { background: linear-gradient(to right, rgba(20,40,28,.75), transparent 70%); }
.pl-merk { position: absolute; z-index: 2; left: 8px; top: 8px; font: 700 9px "Helvetica Neue", sans-serif; letter-spacing: -.02em; color: #d8f0c8; }
.pl-kop { position: absolute; z-index: 2; left: 8px; top: 50%; transform: translateY(-50%); font: 300 12px/1.05 "Helvetica Neue", sans-serif; letter-spacing: -.02em; color: #fff; }
.pl-knop { position: absolute; z-index: 2; left: 8px; bottom: 8px; font-style: normal; font-size: 8px; font-weight: 600; color: #1f3b2a; background: #d8f0c8; padding: 4px 8px; border-radius: 999px; }
.wdc.up::after, .wdc.cp::after { } .wdc.up::after { display: none; }
/* audit-dia in de brede kaart */
.wd-vak.wd-dia { background: none; padding: 18px 10px 18px 26px; -webkit-mask-image: none; mask-image: none; height: auto; display: flex; align-items: center; }
.wd-dia .deck { width: 100%; }
.wd-dia .rij3 { margin-top: 5cqw; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.wd-dia .rij3 > div { padding: 0 2cqw; } .wd-dia .rij3 > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.wd-dia .rij3 small { display: block; font-size: 1.7cqw; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.wd-dia .rij3 strong { display: block; margin-top: 1.4cqw; font: 400 4.6cqw "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.05em; color: #fff; }
.wd-dia .rij3 span { display: block; margin-top: 1cqw; font-size: 1.9cqw; line-height: 1.4; color: rgba(255,255,255,.6); } .wd-dia .rij3 span b { color: #fff; font-weight: 500; }
.wd-dia .rij3 .g strong { color: #86B99A; }
/* datastroom tracking */
.wdt { display: grid; grid-template-columns: 1fr 36px 1.1fr 36px 1fr; align-items: center; padding: 22px 16px; }
.wdt-kol { display: flex; flex-direction: column; gap: 8px; }
.wdt-b { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: #0b0b0b; font-size: 12px; color: var(--t85); }
.wdt-b img { height: 14px; width: auto; } .wdt-w { width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid rgba(255,255,255,.6); }
.wdt-pijl { display: flex; flex-direction: column; gap: 30px; align-items: center; }
.wdt-pijl i { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(134,185,154,.2), #86B99A); position: relative; }
.wdt-pijl i::after { content: ""; position: absolute; right: 0; top: -3px; border-left: 5px solid #86B99A; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.wdt-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 8px; border: 1px solid rgba(134,185,154,.5); background: rgba(134,185,154,.06); text-align: center; }
.wdt-mid img { height: 20px; } .wdt-mid b { font-size: 12.5px; font-weight: 500; color: #fff; } .wdt-mid small { font-size: 10px; color: var(--t60); }
@media (max-width: 600px) { .wdt { grid-template-columns: 1fr 20px 1fr 20px 1fr; padding: 14px 10px; } .wdt-b { font-size: 10.5px; padding: 7px; gap: 5px; } .wdt-b img { height: 11px; } .wdt-mid { padding: 10px 6px; } .wdt-mid b { font-size: 10.5px; } .wdt-mid small { font-size: 8.5px; } .wdt-pijl { gap: 24px; } }

.nf-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px; }
@media (max-width: 600px) { .nf-links { flex-direction: column; align-items: center; } }

/* spacing-check 09-11 */
.v2-zij > * { min-width: 0; }                                   /* Aanpak 360: kolommen liepen 10 px buiten beeld */
@media (max-width: 370px) { .hero h1 { font-size: 39px; } .hero .c { min-width: 0; max-width: 100%; } }   /* home 360: 'advertentiebudget.' tegen de rand */
.v2-meet, .v2-camp, .v2-drie, .v2-week, .v2-test, .v2-beeld { margin-top: 48px; }
.v2-zij-beeld > figure, .v2-reken { margin-top: 0 !important; }
@media (max-width: 600px) { .v2-meet, .v2-camp, .v2-drie, .v2-week, .v2-test { margin-top: 40px !important; } .v2-zij-beeld > figure { margin-top: 0 !important; } }
@media (max-width: 600px) { #voordelen .vier { padding-bottom: 20px; } #certificeringen .cbs { margin-top: 40px; } }
.platformrijen .kop + * , .platformrijen .pf-band:first-of-type { margin-top: 48px; }
.meer .branches { margin-top: 48px; }

/* mobiele check 09-11 */
.case .uitleg > div:first-child { border-top: 0; }                 /* dubbele lijn onder .eenheid in de cases */
.pil.gescrold { background: rgba(8,8,8,.92) !important; }        /* koppen schemerden door de header heen */
.voordelen.drie .punt:last-child, .vier.voordelen .punt:last-child { border-bottom: 0; }

/* desktopcheck 09-11 */
.dia.voor::after { inset: 0 !important; }                                   /* rand werd door overflow:hidden weggeknipt */
.wat-ik-doe .kaart:not(.breed) .wd-vak { height: auto !important; min-height: 300px; padding-top: 22px !important; padding-bottom: 22px; }
.v2-mini-vak { height: 196px; }
.cases.twee { align-items: stretch; }
@media (min-width: 901px) and (max-width: 1180px) { .scene.ev { zoom: .86; } }   /* home Conversie op ~1024: punt 3 over de knop */

/* 09-11 laat: Safari knipt afgeronde hoeken niet af als er vervaagde lagen in zitten (grijze hoekjes) */
.banner, .vraag, .c.kader { -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }

/* mobiel: eigen opzet, niets buiten beeld (09-11, Jip: "op mobiel ziet het er niet uit") */
@media (max-width: 600px) {
  .v2-kop .ap-alinea { display: none; }
  .v2-tijdlijn ol { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .v2-tijdlijn a { padding-top: 18px; font-size: 14px; }
  .v2-tijdlijn .v2-nr { display: none; }
  .v2-beeld { margin: 28px 0 0; padding-bottom: 8px; }
  .v2-app { width: auto; font-size: 13px;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
  .v2-bar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .v2-logos { margin-left: auto; }
  .v2-wissel { order: 3; margin-left: 0; width: 100%; } .v2-wissel button { flex: 1; padding: 7px 0; font-size: 13px; }
  .v2-periode { display: none; }
  .v2-kpis { grid-template-columns: 1fr 1fr; } .v2-kpis > div:nth-child(-n+2) { display: none; }
  .v2-kpis > div { padding: 14px; } .v2-kpis > div:nth-child(4) { border-left: 1px solid var(--rand); }
  .v2-kpis strong { font-size: 28px; } .v2-kpis em { font-size: 11px; }
  .v2-rij { grid-template-columns: 92px 1fr 64px; gap: 12px; padding: 13px 14px; }
  .v2-mob-weg, .v2-formule, .v2-rij em, .v2-kop > span:last-child { display: none; }
  .v2-rij.v2-kop > span:nth-child(5) { font-size: 0; } .v2-rij.v2-kop > span:nth-child(5)::before { content: "ROAS · winstgrens"; font-size: 12px; }
  [data-modus="dienst"] .v2-rij.v2-kop > span:nth-child(5)::before { content: "Per aanvraag · maximum"; }
  .v2-meter { grid-template-columns: 36px 1fr; gap: 10px; } .v2-meter small { font-size: 13px; }
  .v2-rij.top { box-shadow: inset 2px 0 0 #86B99A; }
  .v2-advies { position: relative; left: auto; top: auto; width: auto; margin-top: 12px; box-shadow: none; }
  .v2-beeld figcaption { position: static; display: block; margin-top: 8px; }
}

/* Diensten, Wat ik doe: op mobiel uitklaprijen (09-11, Jip: optie B, duidelijk dat je erop kunt tikken) */
.wd-knop { all: unset; display: inline; cursor: text; }
.wd-open { display: none; }
@media (max-width: 600px) {
  #wat-ik-doe .daarnaast.wat-ik-doe { grid-template-columns: 1fr !important; gap: 10px !important; }
  #wat-ik-doe .wat-ik-doe .kaart, .wat-ik-doe .kaart.breed, .wat-ik-doe .kaart.breed.om { display: flex !important; flex-direction: column; grid-column: 1 / -1; padding: 0 !important; }
  #wat-ik-doe .wat-ik-doe .kaart h3 { order: -2; align-self: stretch; width: 100%; margin: 0 !important; font-size: 21px !important; }
  #wat-ik-doe .wat-ik-doe .kaart > p { order: -1; }
  .wd-knop { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px;
             padding: 14px 14px 14px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .wd-knop:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
  .wd-open { display: block; flex: none; position: relative; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
             transition: transform 260ms ease, background-color 260ms ease, border-color 260ms ease; }
  .wd-open::before, .wd-open::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: #fff; }
  .wd-open::after { transform: rotate(90deg); }
  #wat-ik-doe .wat-ik-doe .kaart.open .wd-open { transform: rotate(45deg); background: #fff; border-color: #fff; }
  #wat-ik-doe .wat-ik-doe .kaart.open .wd-open::before, .wat-ik-doe .kaart.open .wd-open::after { background: #000; }
  #wat-ik-doe .wat-ik-doe .kaart:not(.open) > :not(h3) { display: none !important; }
  #wat-ik-doe .wat-ik-doe .kaart.open > p { display: block !important; margin: 0 !important; padding: 0 16px 16px; }
  #wat-ik-doe .wat-ik-doe .kaart.open > .wd-vak { display: flex !important; height: auto !important; min-height: 0 !important; margin: 0 12px 14px !important; padding: 16px 10px !important; }
  #wat-ik-doe .wat-ik-doe .kaart.open > .wd-link { display: inline-flex !important; align-self: flex-start; margin: -6px 16px 8px !important; }
}
/* auditdia op mobiel: smalle versie, rijen onder elkaar (09-11, zelfde opzet als de dia op Contact) */
@media (max-width: 600px) {
  #wat-ik-doe .wat-ik-doe .kaart.breed.om.open > .wd-vak.wd-dia { display: block !important; align-self: stretch; padding: 0 !important; margin: 0 12px 14px !important; }
  .wd-dia .dia.achter { display: none !important; }
  .wd-dia .deck.ooak .dia.voor { position: relative; aspect-ratio: auto; padding: 18px 16px 0; }
  .wd-dia .deck.ooak .dia-top { justify-content: center; font-size: 9.5px; letter-spacing: .1em; }
  .wd-dia .deck.ooak .dia-top span + span { display: none; }
  .wd-dia .deck.ooak .dia-kop { margin-top: 18px; font-size: 24px; }
  .wd-dia .rij3 { margin-top: 14px; grid-template-columns: 1fr; }
  .wd-dia .rij3 > div { padding: 12px 0; } .wd-dia .rij3 > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .wd-dia .rij3 small { font-size: 10px; letter-spacing: .14em; }
  .wd-dia .rij3 strong { margin-top: 4px; font-size: 26px; }
  .wd-dia .rij3 span { margin-top: 4px; font-size: 13px; }
  .wd-dia .dia-voet { margin: 6px 0 14px; }
  .wd-vak.wd-dia .wd-ill { position: static; display: block; padding: 8px 8px 0; }
}
.wd-vak.wd-dia { position: relative; } .wd-vak.wd-dia .wd-ill { left: 26px; bottom: 0; }

/* 10-11-2026: toestemmingsmelding voor Google Analytics (alleen als GTM_ID gevuld is) */
.toestemming { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 6px; background: #0b0b0b; border: 1px solid var(--rand); color: var(--t85);
  font-size: 14px; line-height: 21px; }
.toestemming[hidden] { display: none; }
.toestemming p { margin: 0; flex: 1; }
.toestemming a { color: var(--t); text-decoration: underline; text-underline-offset: 2px; }
.toestemming-knoppen { display: flex; gap: 8px; flex-shrink: 0; }
.toestemming .knop { font-size: 14px; line-height: 20px; padding: 8px 14px; }
.toestemming-nee { font: inherit; font-size: 14px; line-height: 20px; padding: 8px 14px; border-radius: 6px;
  background: transparent; color: var(--t); border: 1px solid var(--rand-nav); cursor: pointer; }
@media (max-width: 560px) { .toestemming { flex-direction: column; align-items: stretch; }
  .toestemming-knoppen > * { flex: 1; } }