/* 365OPTIMIZERS, de vijf oplossingspagina's: wat per pagina eigen is.
   De gedeelde taal (sfeer, kader, schakelaar, arcering) staat in sub.css. Beweging alleen met transform en opacity. */

/* ── Opening met productbeeld ─────────────────────────────────────────── */
.s-open--product .s-open__binnen { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 56px; }
.s-open--product .s-open__beeld { position: relative; }
.s-open--product .s-zweef { position: relative; z-index: 1; }

/* Microsoft-product bij de stap of het beeld waar het genoemd wordt (klasse .ms uit sub.css) */
.s-kader__ms { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(163, 176, 202, .1); }
.s-product__ms { margin-top: 10px; }

/* ── Data en BI ───────────────────────────────────────────────────────── */
/* Middenplan: losse sterren links, rechts verbonden tot één figuur. De lijnen lopen achter het dashboard door. */
.db-hemel { left: -12%; width: 124%; top: -176px; aspect-ratio: 2 / 1; }
.db-hemel .zk { width: 100%; height: 100%; }

.db { container-type: inline-size; }
.db .s-scherm__inhoud { display: grid; gap: 14px; }
.db__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.db__legenda { display: flex; gap: 18px; font-size: 13px; color: var(--tekst-2); }
.db__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.db__legenda i { display: block; width: 18px; height: 8px; border-radius: 2px; }

.db__tegels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.db__tegel, .db__vak { border: 1px solid rgba(163, 176, 202, .1); border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .008)); padding: 14px; }
.db__label { font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.db__waarde { margin-top: 8px; font: 500 28px/1.05 var(--kop); letter-spacing: -.02em; color: var(--wit); font-variant-numeric: tabular-nums; }
.db__verschil { margin-top: 8px; font-size: 13px; color: var(--tekst-3); }

/* waarden per periode liggen op elkaar; alleen de gekozen periode is zichtbaar */
.db__waarde, .db__verschil, .db__as { display: grid; }
.db__waarde > span, .db__verschil > span, .db__as > span { grid-area: 1 / 1; }
/* oud verdwijnt meteen, nieuw komt op: nooit twee waarden of lijnen over elkaar */
.db [data-p] { opacity: 0; visibility: hidden; transition: none; }
.db__waarde > [data-p] { transform: translateY(6px); }
.db[data-stand="week"] [data-p="week"],
.db[data-stand="maand"] [data-p="maand"],
.db[data-stand="kwartaal"] [data-p="kwartaal"] { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--erin), transform var(--t5) var(--erin); }

/* meter in elke tegel: gearceerd = vorige periode, licht = nu. Lengte via translateX in een vak dat afsnijdt. */
.db__meter { margin-top: 12px; display: grid; gap: 4px; overflow: hidden; border-radius: 2px; }
.db__meter i { display: block; height: 6px; border-radius: 2px; transform: translateX(calc((var(--w) - 1) * 100%)); transition: transform var(--t6) var(--erin); }
.db__meter i.s-nu { height: 4px; box-shadow: 0 0 10px 0 rgba(var(--laag), .4); }
.db[data-stand="maand"] .db__meter i { transform: translateX(calc((var(--m) - 1) * 100%)); }
.db[data-stand="kwartaal"] .db__meter i { transform: translateX(calc((var(--k) - 1) * 100%)); }

.db__grafieken { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; }
.db__vak { display: flex; flex-direction: column; }
.db__lijnvak { margin-top: 12px; }
.db__lijn { display: block; width: 100%; height: auto; overflow: visible; }
.db__raster { fill: none; stroke: rgba(163, 176, 202, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.db__voor-vlak { fill: url(#db-verloop); opacity: .5; }
.db__voor-lijn { fill: none; stroke: rgba(171, 225, 246, .42); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.db__nu-gloed { fill: none; stroke: url(#db-verloop); stroke-width: 7; stroke-linecap: round; opacity: .16; }
.db__nu-lijn { fill: none; stroke: url(#db-verloop); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.db__nu-punt { fill: #fff; stroke: rgba(150, 156, 255, .4); stroke-width: 5; paint-order: stroke; }
.db__as { margin-top: 8px; font-size: 13px; color: var(--tekst-3); }
.db__as > span { display: flex; justify-content: space-between; }
.db__as b { font-weight: 500; }

.db__staven { flex: 1; min-height: 116px; margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; padding: 8px 0 14px; }
.db__staven::before { content: ""; position: absolute; left: 0; right: 0; bottom: 35px; height: 1px; background: rgba(163, 176, 202, .1); }
.db__team { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 8px 3px; }
.db__kolom { position: relative; overflow: hidden; border-radius: 2px 2px 0 0; }
.db__kolom i { position: absolute; inset: 0; border-radius: 2px 2px 0 0; transform: translateY(calc((1 - var(--w)) * 100%)); transition: transform var(--t6) var(--erin); }
.db__kolom i.s-nu { box-shadow: 0 0 12px 0 rgba(var(--laag), .35); }
.db[data-stand="maand"] .db__kolom i { transform: translateY(calc((1 - var(--m)) * 100%)); }
.db[data-stand="kwartaal"] .db__kolom i { transform: translateY(calc((1 - var(--k)) * 100%)); }
.db__team b { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--tekst-3); text-align: center; line-height: 1; }

/* binnenkomen: staven groeien, meters lopen vol, de lijn van nu tekent zich van links naar rechts */
.db__dek { transform-box: fill-box; transform-origin: left center; transition: transform 1400ms cubic-bezier(.3, .7, .2, 1) 500ms; }
.db__nu-punt { transition: opacity var(--t5) var(--erin) 1700ms; }
.js .db:not(.is-in) .db__dek { transform: scaleX(0); }
.js .db:not(.is-in) .db__nu-punt { opacity: 0; }
.js .db:not(.is-in) .db__kolom i { transform: translateY(100%); }
.js .db:not(.is-in) .db__meter i { transform: translateX(-100%); }

/* smal kader (1024 en telefoon): kleinere waarden, korter verschil; pas heel smal gaan de grafieken onder elkaar */
@container (max-width: 560px) {
  .db .s-scherm__inhoud { padding: 16px; gap: 12px; }
  .db__tegel { padding: 12px; }
  .db__waarde { font-size: 24px; }
  .db__t { display: none; }
  .db__staven { gap: 8px; }
}
@container (max-width: 420px) {
  .db__grafieken { grid-template-columns: 1fr; }
  .db__staven { min-height: 96px; }
  /* tegels worden regels: naam links, waarde rechts, meter eronder */
  .db__tegels { grid-template-columns: 1fr; gap: 6px; }
  .db__tegel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 12px; padding: 8px 12px 12px; }
  .db__waarde { grid-area: 1 / 2; margin-top: 0; font-size: 20px; }
  .db__verschil { grid-area: 1 / 3; margin-top: 0; min-width: 4.6em; text-align: right; }
  .db__meter { grid-area: 2 / 1 / 3 / -1; margin-top: 8px; }
}
/* Sturen op gevoel (ronde 8): één rommelig Excel-bestand links, de tekst rechts als bijschrift.
   Achter: een tweede export, scheef en vaag. Midden: het blad, gedempt. Voor: de opmerking bij de foute cel.
   Gedetailleerd: de foute cel en de opmerking. De rest is stil en grijs. Rijen en balken hebben een vaste hoogte,
   zodat de opmerking op de cel D5 kan wijzen. */
.db-xl { position: relative; margin: 0; --pt: 26px; padding: var(--pt) 0 104px 36px; --rij: 42px; }
.db-xl__achter {
  position: absolute; left: 0; top: 0; width: 64%; height: 78%; border-radius: var(--r);
  border: 1px solid rgba(163, 176, 202, .1); background: #081025; transform: rotate(-2.4deg); transform-origin: left top;
  background-image: linear-gradient(rgba(163, 176, 202, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 176, 202, .05) 1px, transparent 1px);
  background-size: 100% var(--rij), 88px 100%; background-position: 0 40px, 32px 0;
}
.db-xl__achter span { display: block; height: 40px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: rgba(111, 125, 156, .7); background: #081025; border-bottom: 1px solid rgba(163, 176, 202, .08); }
.db-xl__blad {
  position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid rgba(163, 176, 202, .16);
  background: #0b1328; box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .95);
  font-size: var(--xl-letter, 14px); line-height: 1.2; color: var(--tekst-3); font-variant-numeric: tabular-nums;
}
.db-xl__titel { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid rgba(163, 176, 202, .1); }
.db-xl__titel .ms { color: var(--tekst-2); }
.db-xl__titel .ms img { width: 20px; height: 20px; }
.db-xl__opslag { font-weight: 600; color: var(--tekst-3); white-space: nowrap; }
.db-xl__formule { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-bottom: 1px solid rgba(163, 176, 202, .1); white-space: nowrap; overflow: hidden; }
.db-xl__formule b { min-width: 40px; padding: 3px 6px; border: 1px solid rgba(163, 176, 202, .16); border-radius: 2px; font-weight: 600; color: var(--tekst-2); }
.db-xl__formule span { font-style: italic; color: var(--tekst-3); }
.db-xl__formule code { font: inherit; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; }
/* het raster: zeven kolommen, rijen van vaste hoogte */
.db-xl__raster { display: grid; grid-template-columns: 30px .8fr 1fr 1fr 1fr 1fr 1.6fr; grid-auto-rows: var(--rij); }
.db-xl__raster > span { display: flex; align-items: center; min-width: 0; padding: 0 9px; border-right: 1px solid rgba(163, 176, 202, .07); border-bottom: 1px solid rgba(163, 176, 202, .07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-xl__raster > .g { justify-content: flex-end; }
.db-xl__hoek, .db-xl__kol, .db-xl__nr { justify-content: center; background: rgba(255, 255, 255, .025); font-weight: 600; color: rgba(111, 125, 156, .85); }
.db-xl__raster > .db-xl__kol, .db-xl__raster > .db-xl__nr { justify-content: center; padding: 0; }
.db-xl__raster > .db-xl__kol--hier, .db-xl__raster > .db-xl__nr--hier { background: rgba(var(--laag), .16); color: var(--wit); }
.db-xl__kop { font-weight: 600; color: var(--tekst-2); }
/* rommel: een getal dat als tekst is opgeslagen (links, met een hoekje), een gemarkeerde opmerking, een lege cel */
.db-xl__raster > .db-xl__tekst { justify-content: flex-start; position: relative; }
.db-xl__tekst::before { content: ""; position: absolute; left: 0; top: 0; border-style: solid; border-width: 6px 6px 0 0; border-color: rgba(122, 170, 132, .75) transparent transparent transparent; }
.db-xl__markeer { background: rgba(171, 225, 246, .06); color: var(--tekst-2); }
.db-xl__leeg { background: repeating-linear-gradient(-45deg, rgba(163, 176, 202, .06) 0 1px, transparent 1px 6px); }
/* het zwaartepunt: één foute cel, licht met gloed */
.db-xl__raster > .db-xl__fout {
  position: relative; z-index: 1; justify-content: flex-end; font-weight: 600; color: var(--wit);
  background: rgba(var(--laag), .2); box-shadow: inset 0 0 0 2px rgb(var(--laag)), 0 0 26px 2px rgba(var(--laag), .5);
}
.db-xl__tabs { display: flex; height: 34px; border-top: 1px solid rgba(163, 176, 202, .1); white-space: nowrap; overflow: hidden; }
.db-xl__tabs span { display: flex; align-items: center; padding: 0 14px; border-right: 1px solid rgba(163, 176, 202, .07); }
.db-xl__tabs .is-hier { color: var(--wit); font-weight: 600; background: rgba(255, 255, 255, .03); box-shadow: inset 0 -2px 0 rgb(var(--laag)); }
/* de opmerking bij D5: onder het blad, met een lijn omhoog naar de cel, zodat ze geen cellen afdekt.
   Kolommen: 30px + 6,4 delen. Het blad telt 8 rijen, D5 is de zesde. */
.db-xl__notitie {
  position: absolute; z-index: 2; width: 236px; --val: calc(20px + 2px + 34px + var(--rij) * 2);
  left: calc(36px + 30px + (100% - 36px - 32px) * .594 - 24px);
  top: calc(var(--pt) + 40px + 34px + var(--rij) * 6 + var(--val));
  padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(var(--laag), .45);
  background: #121c3c; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9), 0 0 24px -6px rgba(var(--laag), .45);
  font-size: 13px; line-height: 1.45; color: var(--tekst-2);
}
.db-xl__notitie b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--wit); }
.db-xl__notitie::before { content: ""; position: absolute; left: 22px; top: calc(-1 * var(--val) - 1px); width: 1px; height: var(--val); background: linear-gradient(180deg, rgb(var(--laag)), rgba(var(--laag), .7)); }
/* binnenkomen: het achterblad schuift iets weg, de opmerking komt als laatste */
.db-xl__achter { transition: transform 900ms var(--erin); }
.db-xl__notitie { transition: opacity 500ms var(--erin) 900ms, transform 500ms var(--erin) 900ms; }
.js .db-xl:not(.is-in) .db-xl__achter { transform: none; }
.js .db-xl:not(.is-in) .db-xl__notitie { opacity: 0; transform: translateY(6px); }

/* Van losse punten naar één beeld (ronde 8): één beeld over de volle breedte. Links drie bronnen, in het midden
   het model, rechts het rapport. De lijnen ertussen zijn het neon. Achter: de melkweg als band, alleen aan de randen.
   Gedetailleerd: het rapport (rand in neon) en het model. De bronnen blijven eenvoudig. */
.db-punten { overflow-x: clip; }
.db-punten > .s-binnen { z-index: 1; }
.db-melkweg { position: absolute; z-index: 0; left: 50%; bottom: 150px; width: max(1500px, 112vw); height: auto; max-width: none; margin-left: calc(max(1500px, 112vw) / -2); opacity: .5; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.db-punten__kop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; }
.db-punten__kop .s-tekst { font-size: 18px; line-height: 1.55; }
.db-pijp { margin: 56px 0 0; }
.db-pijp__beeld { position: relative; height: 300px; display: grid; grid-template-columns: 22.2fr 9.6fr 27.2fr 7.4fr 33.6fr; }
.db-pijp__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.db-pijp__pad path { fill: none; stroke: url(#db-pijp-verloop); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(94, 151, 255, .6)); }
.db-pijp__bronnen { grid-column: 1; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; }
.db-pijp__bron {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 4px;
  border: 1px solid rgba(163, 176, 202, .14); background: #0a1229; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--tekst-2);
}
.db-pijp__bron img, .db-pijp__icoon { flex: none; width: 20px; height: 20px; }
.db-pijp__icoon { border-radius: 4px; border: 1px solid rgba(163, 176, 202, .35); background: linear-gradient(180deg, rgba(163, 176, 202, .3) 0 30%, transparent 30%); }
.db-pijp__bron small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--tekst-3); white-space: nowrap; }
.db-pijp__model, .db-pijp__rapport {
  align-self: center; position: relative; border-radius: var(--r); border: 1px solid rgba(var(--laag), .26);
  background: linear-gradient(180deg, rgba(17, 29, 60, .96), rgba(8, 15, 35, .98) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .95);
}
.db-pijp__model { grid-column: 3; height: 228px; padding: 14px 16px; display: flex; flex-direction: column; }
.db-pijp__kopje { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(163, 176, 202, .1); }
.db-pijp__model .db-pijp__kopje { justify-content: flex-start; }
.db-pijp__schema { position: relative; flex: 1; margin-top: 10px; }
.db-pijp__schema svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.db-pijp__rel path { fill: none; stroke: rgba(var(--laag), .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.db-pijp__schema svg { overflow: visible; }
.db-pijp__tabel {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%);
  padding: 5px 10px; border-radius: 3px; border: 1px solid rgba(163, 176, 202, .22); background: #0c1531;
  font-size: 13px; font-weight: 600; color: var(--tekst-2); white-space: nowrap;
}
.db-pijp__tabel--feit { padding: 8px 14px; color: var(--wit); border-color: rgb(var(--laag)); box-shadow: 0 0 20px -2px rgba(var(--laag), .55); }
.db-pijp__rapport { grid-column: 5; height: 252px; padding: 14px 18px 16px; display: flex; flex-direction: column; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 30px -6px rgba(94, 151, 255, .4), 0 40px 80px -40px rgba(0, 0, 0, .95); }
.db-pijp__ververs { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tekst-3); white-space: nowrap; }
.db-pijp__ververs i { width: 6px; height: 6px; border-radius: 50%; background: var(--ijs); box-shadow: 0 0 8px 1px rgba(171, 225, 246, .6); }
.db-pijp__rapport .db__label { margin-top: 14px; }
.db-pijp__bijschrift { display: grid; grid-template-columns: 31.8fr 34.6fr 33.6fr; margin-top: 32px; }
.db-pijp__bijschrift p { padding-right: 36px; font-size: 15px; line-height: 1.55; color: var(--tekst-2); text-wrap: pretty; }
.db-pijp__bijschrift b { font-weight: 600; color: var(--wit); }
/* binnenkomen: de lijnen tekenen van bron naar rapport */
.db-pijp__pad path { stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms cubic-bezier(.3, .7, .2, 1) 300ms; }
.js .db-pijp:not(.is-in) .db-pijp__pad path { stroke-dashoffset: 400; }

/* Iedereen kijkt naar dezelfde cijfers: tekst links, rechts hetzelfde cijfer op drie schermen.
   Een vak met vaste verhouding; schermen en sterrenbeeld staan in dezelfde maat, zodat de lijnen precies
   tussen de schermen lopen. De sterren zitten op de rand waar een lijn een scherm in gaat. */
/* Ronde 8: het beeld wint. Kop links, inleiding rechts erboven; daaronder het beeld groot rechts (7 van 11)
   en het citaat klein links, onderaan uitgelijnd. */

/* ── Apps en workflows ────────────────────────────────────────────────── */
.s-alleen-lezer { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Middenplan: de planeet rechtsboven, de satelliet draait zijn vaste baan achter app en flow door */
.ap-hemel { right: -36%; width: 104%; top: -276px; aspect-ratio: 560 / 440; }
.af .s-scherm__titel { white-space: nowrap; }

.af { container-type: inline-size; }
.af__duo { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: center; }

/* de telefoon: een apparaat, daarom rondere hoeken dan het glas van het kader */
.af__tel {
  position: relative; padding: 8px; border-radius: 28px;
  border: 1px solid rgba(var(--laag), .3);
  background: linear-gradient(160deg, #18264a, #070d22 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(0, 0, 0, .5), 0 48px 80px -40px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(var(--laag), .35);
}
.af__scherm {
  position: relative; overflow: hidden; border-radius: 21px; padding-bottom: 18px;
  border: 1px solid rgba(163, 176, 202, .1);
  background: linear-gradient(180deg, rgba(20, 34, 70, .98), rgba(8, 15, 35, .99) 75%);
}
/* luidspreker boven en thuisbalk onder: het is een telefoon */
.af__scherm::before { content: ""; position: absolute; left: 50%; top: 9px; width: 52px; height: 5px; margin-left: -26px; border-radius: 3px; background: #040a1b; box-shadow: inset 0 0 0 1px rgba(163, 176, 202, .12); }
.af__scherm::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 72px; height: 3px; margin-left: -36px; border-radius: 2px; background: rgba(163, 176, 202, .35); }
.af__appbalk { padding: 28px 16px 12px; border-bottom: 1px solid rgba(163, 176, 202, .1); font-size: 14px; font-weight: 600; }
.af__form { display: grid; gap: 8px; padding: 14px 14px 0; }
.af__veld { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgba(163, 176, 202, .14); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.af__veld span { font-size: 13px; color: var(--tekst-3); }
.af__veld b { font-size: 14px; font-weight: 500; color: var(--wit); }
.af__twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af__knop {
  margin-top: 6px; min-height: 40px; padding: 0 12px; border: 0; white-space: nowrap; border-radius: 4px; cursor: pointer;
  background: rgb(var(--laag)); color: var(--zij); font: 600 14px/1 "Instrument Sans", system-ui, sans-serif;
  box-shadow: 0 0 18px -4px rgba(var(--laag), .6); transition: transform var(--t3) var(--erin), opacity var(--t3) var(--erin), box-shadow var(--t3) var(--erin), background-color var(--t3) var(--erin);
}
.af__knop:hover { background-color: rgb(from rgb(var(--laag)) calc(r + 24) calc(g + 24) calc(b + 24)); box-shadow: 0 0 26px -2px rgba(var(--laag), .85); }
.af__knop:active { transform: scale(.98); }
.af__knop:focus-visible { outline: 2px solid var(--wit); outline-offset: 2px; }
/* de bevestiging op de telefoon komt pas als de flow klaar is */
.af__melding {
  display: flex; gap: 8px; align-items: baseline; margin: 2px 0 0; padding: 9px 10px; border-radius: 4px;
  border: 1px solid rgba(var(--laag), .35); background: rgba(var(--laag), .1); font-size: 13px; line-height: 1.35; color: var(--wit);
  opacity: 0; transform: translateY(6px);
}
.af__melding i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ijs); box-shadow: 0 0 8px 1px rgba(var(--laag), .6); transform: translateY(-1px); }
.af[data-stand="klaar"] .af__melding { opacity: 1; transform: none; transition: opacity 400ms var(--erin), transform var(--t5) var(--erin); }

/* de flow: elke stap heeft een band. Gearceerd = nog niet gebeurd, licht met gloed = gebeurd */
.af__status { display: grid; }
.af__status > span { grid-area: 1 / 1; text-align: right; }
.af [data-p] { opacity: 0; visibility: hidden; }
.af[data-stand="leeg"] [data-p="leeg"], .af[data-stand="loopt"] [data-p="loopt"], .af[data-stand="klaar"] [data-p="klaar"] { opacity: 1; visibility: visible; }
.af[data-stand="klaar"] [data-p="klaar"] { color: var(--ijs); }
.af__stappen { list-style: none; margin: 0; padding: 16px; display: grid; gap: 10px; }
.af__stap {
  position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
  padding: 11px 14px 11px 11px; border: 1px solid rgba(163, 176, 202, .1); border-radius: 4px; background: rgba(255, 255, 255, .02);
}
/* de verbinding tussen twee stappen */
.af__stap + .af__stap::before { content: ""; position: absolute; left: 15px; top: -11px; width: 1px; height: 10px; background: rgba(var(--laag), .45); }
.af__band { grid-row: 1 / 3; position: relative; border-radius: 2px; }
.af__band b { position: absolute; inset: 0; border-radius: 2px; }
.af__band .s-nu { opacity: 0; }
.af__soort { font-size: 13px; font-weight: 600; color: var(--tekst-3); }
.af__wat { font-size: 15px; font-weight: 500; color: var(--wit); }
.af__ja {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 3px; font-style: normal; font-size: 13px; font-weight: 600;
  color: var(--zij); background: var(--ijs); opacity: 0;
}
/* lopen: de stappen lichten een voor een op; terug naar leeg gaat in één keer */
.af[data-stand="loopt"] .af__band .s-nu, .af[data-stand="klaar"] .af__band .s-nu { opacity: 1; transition: opacity 420ms var(--erin) calc(var(--i) * 700ms + 300ms); }
.af[data-stand="loopt"] .af__band .s-arcering, .af[data-stand="klaar"] .af__band .s-arcering { opacity: 0; transition: opacity 420ms var(--erin) calc(var(--i) * 700ms + 300ms); }
.af[data-stand="loopt"] .af__stap, .af[data-stand="klaar"] .af__stap { border-color: rgba(var(--laag), .3); transition: border-color 420ms var(--erin) calc(var(--i) * 700ms + 300ms); }
.af[data-stand="loopt"] .af__ja, .af[data-stand="klaar"] .af__ja { opacity: 1; transition: opacity 300ms var(--erin) 1350ms; }

/* smal kader: kleinere telefoon; heel smal onder elkaar */
@container (max-width: 600px) {
  .af__duo { grid-template-columns: 188px minmax(0, 1fr); gap: 12px; }
  .af .s-scherm__balk { padding: 0 12px; }
  .af__stappen { padding: 12px; gap: 8px; }
  .af__stap + .af__stap::before { top: -9px; height: 8px; }
  .af__wat { font-size: 14px; }
}
@container (max-width: 440px) {
  .af__duo { grid-template-columns: 1fr; gap: 24px; }
  .af__tel { width: 236px; justify-self: center; }
}

/* Het werkt. Tot het misgaat (ronde 8): tekst links, rechts een mailketen die schuin wegzakt.
   Achter: de oude mails, stil en grijs. Voor: de aanvraag die blijft liggen, scheef, met gloed.
   Gedetailleerd: alleen die laatste mail. */
.ap-misgaat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; padding-bottom: 24px; }
.ap-misgaat__tekst .s-tekst { margin-top: 24px; }
.ap-post { position: relative; margin: 0; --stap: 124px; }
.ap-post__keten { position: relative; height: calc(3 * var(--stap) + 200px); }
.ap-mail {
  position: absolute; left: calc(var(--n) * 13%); top: calc(var(--n) * var(--stap)); width: 58%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; padding: 14px 18px;
  border: 1px solid rgba(163, 176, 202, .12); border-radius: var(--r); background: #0a1229;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9); font-size: 14px; line-height: 1.35; color: var(--tekst-3);
}
.ap-mail:nth-child(1) { opacity: .6; } .ap-mail:nth-child(2) { opacity: .75; } .ap-mail:nth-child(3) { opacity: .9; }
.ap-mail__van { grid-column: 1; font-weight: 600; color: var(--tekst-2); }
.ap-mail time { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--tekst-3); }
.ap-mail > b { grid-column: 1 / -1; font-weight: 600; color: var(--tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mail__regel { grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-mail__bijlage { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 10px 4px 8px; border: 1px solid rgba(163, 176, 202, .14); border-radius: 3px; font-size: 13px; color: var(--tekst-2); }
.ap-mail__bijlage img { width: 16px; height: 16px; }
/* het zwaartepunt: de aanvraag, groter, scheef, met een rand in neon */
.ap-mail--ligt {
  left: 38%; top: calc(3 * var(--stap) + 4px); width: 62%; padding: 18px 22px 20px; gap: 8px;
  border-color: rgba(143, 211, 240, .35); background: linear-gradient(180deg, #131f44, #0b1430);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 34px -6px rgba(94, 151, 255, .45), 0 40px 70px -30px rgba(0, 0, 0, .95);
  transform: rotate(4deg); transform-origin: left top; font-size: 15px; color: var(--tekst-2);
}
.ap-mail__kop { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font: 500 20px/1.2 var(--kop); letter-spacing: -.01em; color: var(--wit); }
.ap-mail__kop img { flex: none; width: 22px; height: 22px; }
.ap-mail--ligt .ap-mail__regel { white-space: normal; }
.ap-mail__status { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(163, 176, 202, .12); font-weight: 600; color: var(--wit); }
.ap-mail__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--ijs); box-shadow: 0 0 10px 2px rgba(171, 225, 246, .55); }
.ap-mail__status b { margin-left: auto; font-weight: 400; color: var(--tekst-3); }
.ap-post__noot { position: absolute; left: 0; bottom: 0; font-size: 13px; color: var(--tekst-3); }
/* binnenkomen: de mails zakken een voor een, de aanvraag kantelt als laatste */
.ap-mail { transition: translate 600ms var(--erin) calc(var(--n) * 140ms); }
.ap-mail--ligt { transition: transform 800ms cubic-bezier(.5, 0, .3, 1) 700ms, translate 600ms var(--erin) 420ms; }
.js .ap-post:not(.is-in) .ap-mail { translate: 0 -12px; }
.js .ap-post:not(.is-in) .ap-mail--ligt { transform: none; }

/* Eerst het proces (ronde 8): de baan van de satelliet als een beeld over de volle breedte, schuin.
   Achter: het poollicht ver weg rechtsboven. Midden: de achterkant van de baan, gestippeld, met planeet en satelliet.
   Voor: de voorkant van de baan in neon met de vijf stappen, oplopend van links naar rechts. */
.ap-proces { overflow-x: clip; }
.ap-proces > .s-binnen { position: relative; z-index: 1; }
.ap-poollicht { position: absolute; z-index: 0; right: 0; top: 96px; width: min(700px, 52vw); height: auto; aspect-ratio: 1197 / 760; object-fit: cover; object-position: left center; max-width: none; opacity: .45; pointer-events: none; user-select: none; }
.ap-baanbeeld { position: relative; margin: 40px 0 0; aspect-ratio: 1200 / 490; }
.ap-baanbeeld__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-baanbeeld__achter { fill: none; stroke: rgb(94, 151, 255); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ap-baanbeeld__achter--binnen { stroke-opacity: .15; }
.ap-baanbeeld__gloed { fill: none; stroke: url(#ap-baan-verloop); stroke-width: 7; stroke-linecap: round; opacity: .14; vector-effect: non-scaling-stroke; }
.ap-baanbeeld__voor { fill: none; stroke: url(#ap-baan-verloop); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(94, 151, 255, .6)); }
.ap-stations { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ap-station { position: absolute; left: var(--x); top: var(--y); width: 17.5%; }
.ap-station::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #f2f6ff; box-shadow: 0 0 0 4px rgba(94, 151, 255, .18), 0 0 14px 2px rgba(94, 151, 255, .6); }
.ap-station::after { content: ""; position: absolute; left: 0; top: 10px; width: 1px; height: calc(var(--tik) - 18px); background: linear-gradient(180deg, rgba(171, 225, 246, .5), rgba(171, 225, 246, 0)); }
.ap-station h3 { margin: var(--tik) 0 0 -1px; font-family: var(--kop); font-size: 18px; font-weight: 500; line-height: 1.25; color: var(--wit); }
.ap-station p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--tekst-2); text-wrap: pretty; }
/* binnenkomen: de voorkant tekent van links naar rechts, de stappen volgen */
.ap-baanbeeld__voor { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms cubic-bezier(.4, 0, .2, 1) 200ms; }
.js .ap-baanbeeld:not(.is-in) .ap-baanbeeld__voor { stroke-dashoffset: 1; }

/* Minder fouten, minder mail (ronde 8): tekst links met het bewijs klein eronder; rechts de satelliet groot
   op een schuine baan. Het beeld wint, het citaat ondersteunt. */
.ap-minder { overflow-x: clip; }
.ap-minder__raam { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 64px; align-items: center; }
.ap-minder__tekst .s-intro { margin-top: 24px; }
.ap-minder__bewijs { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(163, 176, 202, .12); }
.ap-minder__bewijs .s-citaat p { font-size: 20px; }
.ap-minder__bewijs .s-citaat footer { margin-top: 12px; }
.ap-minder__case { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--tekst-3); text-wrap: pretty; }
.ap-minder__bewijs .tekstlink { margin-top: 14px; }

/* ── AI voor het mkb ──────────────────────────────────────────────────── */
/* Middenplan: de planeet met ringen links achter de agent; de ringen lopen achter het kader door */
.ai-hemel { left: -36%; width: 100%; top: -250px; aspect-ratio: 560 / 440; }
/* De kop is de langste van de vijf: breder en iets kleiner, zodat hij in vier regels staat en de knop niet tegen de onderrand drukt */
@media (min-width: 901px) { .s-open:has(.ai-hemel) .s-kop1 { max-width: 18ch; font-size: min(var(--skop), 64px); } }
/* 1024: de opening van ai, governance en adoptie past met de lagenrij in één scherm (eigen override op de gedeelde .s-open__binnen) */
@media (min-width: 901px) and (max-width: 1100px) {
  .s-open:is(:has(.ai-hemel), :has(.go-hemel), :has(.am-hemel)) .s-open__binnen { padding: calc(var(--kop-h, 72px) + 24px) 0 80px; }
  .s-open:is(:has(.ai-hemel), :has(.go-hemel), :has(.am-hemel)) .lead { margin-top: 20px; }
  .s-open:is(:has(.ai-hemel), :has(.go-hemel), :has(.am-hemel)) .s-acties { margin-top: 28px; }
  .s-open:has(.ai-hemel) .s-kop1 { font-size: 46px; }
  .s-open .gv .s-scherm__inhoud { gap: 12px; }
  .s-open .gv .gv__rij { padding-top: 8px; padding-bottom: 8px; }
}
.ag .s-scherm__balk .ms { color: var(--tekst-2); }
.ag .s-scherm__inhoud { display: grid; gap: 16px; min-height: 372px; align-content: start; }
.ag .s-keuze { justify-self: start; }
/* alleen de gekozen taak staat er; bij wisselen begint het lezen opnieuw (display start de animatie opnieuw) */
.ag__taak { display: none; gap: 14px; }
.ag[data-stand="klant"] .ag__taak[data-p="klant"], .ag[data-stand="offerte"] .ag__taak[data-p="offerte"], .ag[data-stand="inwerken"] .ag__taak[data-p="inwerken"] { display: grid; }
.ag__vraag { justify-self: end; max-width: 80%; padding: 11px 14px 9px; border-radius: 4px; background: rgba(var(--laag), .22); border: 1px solid rgba(var(--laag), .4); font-size: 15px; color: var(--wit); animation: ag-op 360ms var(--erin) both; }
.ag__bezig { display: grid; font-size: 13px; color: var(--tekst-3); margin-bottom: -6px; }
.ag__bezig > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; }
.ag__leest { animation: ag-uit 200ms linear 1700ms both; }
.ag__gelezen { animation: ag-licht 300ms var(--erin) 1800ms both; }
.ag__bezig i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--laag)); animation: ag-stip 900ms var(--erin) infinite alternate; }
.ag__bezig i:nth-child(2) { animation-delay: 150ms; }
.ag__bezig i:nth-child(3) { animation-delay: 300ms; margin-right: 6px; }
.ag__bronnen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag__bronnen li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid rgba(163, 176, 202, .1); border-radius: 4px; background: rgba(255, 255, 255, .02); font-size: 14px; color: var(--tekst-2); }
.ag__band { position: relative; flex: none; width: 28px; height: 18px; border-radius: 2px; }
.ag__band b { position: absolute; inset: 0; border-radius: 2px; }
.ag__band .s-nu { animation: ag-licht 420ms var(--erin) both; animation-delay: calc(500ms + var(--i) * 450ms); }
.ag__band .s-arcering { animation: ag-uit 420ms var(--erin) both; animation-delay: calc(500ms + var(--i) * 450ms); }
.ag__antwoord { padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(163, 176, 202, .14); border-left: 2px solid rgb(var(--laag)); background: rgba(255, 255, 255, .03); font-size: 15px; line-height: 1.45; color: var(--wit); animation: ag-op 420ms var(--erin) 1900ms both; }
@keyframes ag-op { from { opacity: 0; transform: translateY(8px); } }
@keyframes ag-licht { from { opacity: 0; } }
@keyframes ag-uit { to { opacity: 0; } }
@keyframes ag-stip { from { opacity: .25; } }
/* het lezen begint pas als de agent in beeld komt */
.js .ag:not(.is-in) * { animation-play-state: paused; }

/* Een licentie is nog geen gebruik: twaalf plekken, een paar in gebruik (licht), de rest staat stil (gearceerd) */
/* Tekst links, de twaalf plekken groot rechts als een zaal stoelen: drie bezet (licht), negen leeg (gearceerd) */
.ai-licentie { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.ai-licentie__tekst .s-tekst { margin-top: 28px; max-width: 26em; }
.ai-stoelen { margin: 10px 0 0; justify-self: end; width: 100%; max-width: 700px; }
.ai-plekken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ai-plekken i { display: block; aspect-ratio: 1; border-radius: var(--r); }
/* in elke plek een stoel: hoofd en schouders, donker op licht, zacht op de arcering */
.ai-plekken i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34%; height: 34%; pointer-events: none;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ai-plekken i.s-nu { position: relative; color: rgba(4, 10, 27, .62); transition: opacity 600ms var(--erin) 600ms; }
.ai-plekken i.s-arcering { color: rgba(163, 176, 202, .16); }
.js .ai-plekken:not(.is-in) i.s-nu { opacity: .15; }
.ai-stoelen__noot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 22px; font-size: 13px; color: var(--tekst-2); }
.ai-stoelen__noot span { display: inline-flex; align-items: center; gap: 10px; }
.ai-stoelen__noot b { width: 14px; height: 14px; border-radius: 3px; }
.ai-stoelen__noot .ai-stoelen__vb { margin-left: auto; color: var(--tekst-3); }

/* Een lijst die je kunt afwerken: tekst en bewijs links, rechts de lijst zelf, met de planeet groot erachter en rechts buiten beeld */
.ai-afwerken { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 72px; align-items: center; }
.ai-lijst { position: relative; z-index: 1; background: linear-gradient(180deg, #111d3c, #080f23 70%); }
.ai-lijst .s-scherm__inhoud { display: grid; gap: 0; padding: 4px 22px 20px; }
.ai-groep { padding: 16px 0 14px; border-bottom: 1px solid rgba(163, 176, 202, .1); }
.ai-groep__kop { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.ai-groep__kop b { width: 18px; height: 6px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(163, 176, 202, .4); }
.ai-groep__kop b.s-nu { box-shadow: 0 0 10px 1px rgba(var(--laag), .45); }
.ai-groep--nu .ai-groep__kop { color: var(--wit); }
.ai-groep ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ai-groep li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--wit); }
.ai-groep li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(163, 176, 202, .32); }
.ai-groep--nu li::before { border-color: rgba(var(--laag), .7); box-shadow: 0 0 8px rgba(var(--laag), .35); }
.ai-groep--later li { color: var(--tekst-3); }
.ai-lijst .s-scherm__noot { margin-top: 16px; }
.s-fase__ms { margin-top: 16px; }
/* Ronde 8, van verkenning tot agent: op het midden. Kop en één zin gecentreerd, daaronder groot de agent die een factuur
   uitleest (het ene detail), daaronder de drie stappen als bijschrift op één lijn. Achterplan: poollicht op een verre horizon,
   gecentreerd achter het product; het lost op voordat het bij de kop komt. */
.ai-agent-sectie { overflow: hidden; }
.ai-poollicht { position: absolute; left: 50%; top: 170px; width: min(1240px, 120vw); transform: translateX(-50%) scaleX(-1); pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, transparent 6%, #000 26%, #000 50%, transparent 70%); mask-image: linear-gradient(180deg, transparent 6%, #000 26%, #000 50%, transparent 70%); }
.ai-poollicht img { display: block; width: 100%; height: auto; }
.ai-agent { display: grid; justify-items: center; }
.ai-agent__kop { text-align: center; }
.ai-agent__kop .s-kop2 { max-width: none; }
.ai-agent__kop .s-tekst { margin: 18px auto 0; max-width: 34em; }
.ai-fx { width: min(880px, 100%); margin: 34px 0 0; }
.ai-fx .s-scherm { background: linear-gradient(180deg, rgb(17, 29, 60), rgb(8, 15, 35) 70%); }
.ai-fx .s-scherm__balk .ms { color: var(--tekst-2); }
.ai-fx__inhoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
/* de factuur: een licht blad met donkere inkt, het enige lichte vlak in het beeld */
.ai-doc { position: relative; overflow: hidden; margin: 0; padding: 14px 20px 12px; border-radius: 4px; display: grid; gap: 3px; align-content: start;
  background: linear-gradient(180deg, #e3eaf4, #d3dceb); color: #16264a; font-size: 13px; line-height: 1.3;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -20px rgba(0, 0, 0, .9); }
.ai-doc p { margin: 0; }
.ai-doc__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(22, 38, 74, .16); }
.ai-doc__kop b { font-family: var(--kop); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.ai-doc__kop span { position: relative; padding: 3px 8px; margin: -3px -8px; border-radius: 3px; font-size: 12px; font-weight: 600; color: #3a4a6c; }
.ai-doc__veld { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 5px 8px; margin: 0 -8px; border-radius: 3px; }
.ai-doc__veld span { color: #4a5a7c; }
.ai-doc__veld b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* het kader dat de agent om een gevonden veld zet: neonrand met gloed */
.ai-doc__vind::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgb(94, 151, 255), 0 0 12px rgba(94, 151, 255, .55); background: rgba(94, 151, 255, .08);
  animation: ai-vind 380ms var(--erin) both; animation-delay: calc(600ms + var(--i) * 420ms); }
.ai-doc__regels { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 7px 0; margin: 4px 0; border-top: 1px solid rgba(22, 38, 74, .12); border-bottom: 1px solid rgba(22, 38, 74, .12); color: #4a5a7c; font-variant-numeric: tabular-nums; }
.ai-doc__veld--totaal b { font-size: 15px; }
/* de scan: één lichte lijn die het blad één keer van boven naar onder leest */
.ai-doc__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none; background: var(--hemel);
  box-shadow: 0 0 14px 2px rgba(94, 151, 255, .5); animation: ai-scan 1900ms cubic-bezier(.45, 0, .55, 1) 300ms both; }
.ai-fx__uit { display: grid; align-content: start; gap: 14px; }
.ai-fx__bezig { display: grid; font-size: 13px; color: var(--tekst-3); }
.ai-fx__bezig > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 5px; }
.ai-fx__leest { animation: ag-uit 200ms linear 2200ms both; }
.ai-fx__klaar { color: var(--ijs); animation: ag-licht 300ms var(--erin) 2300ms both; }
.ai-fx__bezig i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--laag)); animation: ag-stip 900ms var(--erin) infinite alternate; }
.ai-fx__bezig i:nth-child(2) { animation-delay: 150ms; }
.ai-fx__bezig i:nth-child(3) { animation-delay: 300ms; margin-right: 6px; }
.ai-fx__velden { margin: 0; display: grid; border-top: 1px solid rgba(163, 176, 202, .1); }
.ai-fx__velden > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(163, 176, 202, .1);
  animation: ag-op 360ms var(--erin) both; animation-delay: calc(760ms + var(--i) * 420ms); }
.ai-fx__velden dt { font-size: 13px; color: var(--tekst-3); }
.ai-fx__velden dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--wit); text-align: right; font-variant-numeric: tabular-nums; }
.ai-fx__stand { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(163, 176, 202, .14); border-left: 2px solid rgb(var(--laag));
  background: rgba(255, 255, 255, .03); font-size: 15px; color: var(--wit); animation: ag-op 420ms var(--erin) 2500ms both; }
.ai-fx__stand b { flex: none; width: 18px; height: 6px; border-radius: 2px; }
@keyframes ai-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(330px); opacity: 0; } }
@keyframes ai-vind { from { opacity: 0; transform: scale(1.04); } }
.js .ai-fx:not(.is-in) * { animation-play-state: paused; }
/* de drie stappen als bijschrift: één lijn, de derde licht op */
.ai-route { position: relative; list-style: none; margin: 40px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.ai-route::before { content: ""; position: absolute; left: 5px; right: 0; top: 5px; height: 1px; background: linear-gradient(90deg, var(--lijn-zacht), var(--lijn) 40%, rgba(var(--laag), .7)); }
.ai-route li { position: relative; padding-top: 26px; }
/* Funnel Display staat iets hoog in zijn regelvak: onder wat meer ruimte, zodat de gloed om de kop midden zit */
#agent .s-neon { padding-bottom: .34em; margin-bottom: -.34em; }
.ai-route li > i { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--zij); box-shadow: inset 0 0 0 1px rgba(var(--laag), .6); }
.ai-route li > i.s-nu { box-shadow: 0 0 0 4px rgba(var(--laag), .16), 0 0 14px 3px rgba(var(--laag), .55); }
.ai-route h3 { font-family: var(--kop); font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.ai-route p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tekst-2); text-wrap: pretty; }
.ai-route .ms-rij { margin-top: 14px; }
.ai-route__nu h3 { color: var(--wit); }
.ai-fx__vb { margin-left: auto; margin-right: 16px; font-size: 12px; color: var(--tekst-3); }
@media (max-width: 1100px) {
  .ai-agent__kop .s-tekst { margin-top: 12px; max-width: none; }
  .ai-fx { margin-top: 22px; }
  .ai-fx__uit { gap: 10px; }
  .ai-fx__velden > div { padding: 6px 0; }
  .ai-fx__stand { padding: 9px 12px; }
  .ai-doc { gap: 1px; }
  .ai-doc__regels { padding: 3px 0; gap: 0 12px; }
  .ai-route .ms-rij { margin-top: 8px; }
  .ai-fx .ai-fx__inhoud { padding: 16px; }
  .ai-route { grid-template-columns: minmax(0, .82fr) minmax(0, 1.04fr) minmax(0, 1.14fr); }
  .ai-route { margin-top: 30px; gap: 28px 32px; }
  .ai-route p { font-size: 14px; }
}
@media (max-width: 560px) {
  .ai-fx__vb { display: none; }
}
@media (max-width: 760px) {
  .ai-fx__inhoud { grid-template-columns: minmax(0, 1fr); }
  .ai-route { grid-template-columns: minmax(0, 1fr); padding-left: 28px; }
  .ai-route::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--lijn), rgba(var(--laag), .7)); }
  .ai-route li { padding-top: 0; }
  .ai-route li > i { left: -28px; top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-fx *, .ai-fx *::after { animation: none !important; }
  .ai-fx__leest, .ai-doc__scan { display: none !important; }
}

/* ── Microsoft 365-adoptie: middenschermen ── */
/* Een training alleen: de gebruikscurve is het toneel; de tekst staat in de stille hoek linksboven waar het gebruik nog laag is */
.ad-kost { position: relative; min-height: 580px; }
.ad-kost__tekst { position: relative; z-index: 1; width: 42%; }
.ad-kost__tekst .s-tekst { margin-top: 28px; }
.ad-kurve { position: absolute; left: 0; right: 0; top: 0; height: 580px; pointer-events: none; }
.ad-kurve svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ad-kurve path { fill: none; vector-effect: non-scaling-stroke; }
.ad-kurve__as { stroke: rgba(163, 176, 202, .22); stroke-width: 1; }
.ad-kurve__training { stroke: rgba(171, 225, 246, .45); stroke-width: 1; stroke-dasharray: 3 5; }
.ad-kurve__lijn { stroke: var(--ijs); stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(171, 225, 246, .45)); }
.ad-kurve__val { position: absolute; inset: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(58.0% 23.2%, 59.5% 23.7%, 61.1% 25.3%, 62.8% 27.9%, 64.6% 31.2%, 66.5% 35.2%, 68.5% 39.7%, 70.7% 44.6%, 73.0% 49.7%, 75.5% 54.8%, 78.3% 59.9%, 81.2% 64.8%, 84.4% 69.3%, 87.9% 73.3%, 91.6% 76.6%, 95.7% 79.1%, 100.0% 80.7%, 100% 92.9%, 58% 92.9%);
  transition: opacity 900ms var(--erin) 700ms; }
.js .ad-kurve:not(.is-in) .ad-kurve__val { opacity: 0; }
.ad-kurve__punt { position: absolute; left: 58%; top: 23.2%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #f2fbff; box-shadow: 0 0 0 4px rgba(171, 225, 246, .16), 0 0 14px 3px rgba(171, 225, 246, .5); }
.ad-kurve__label { position: absolute; font-size: 13px; font-weight: 600; color: var(--tekst-3); white-space: nowrap; }
.ad-kurve__label--gebruik { left: 0; top: calc(83.9% - 30px); }
.ad-kurve__label--training { left: 47%; top: calc(92.9% + 12px); transform: translateX(-50%); color: var(--ijs); }
.ad-kurve__label--tijd { right: 0; top: calc(92.9% + 12px); }
/* Sfeerlaag van deze pagina: een ver wolkendek aan de onderrand, met de volle maan die erboven opkomt. Nooit achter tekst. */
.ad-nacht { position: absolute; z-index: 0; left: 0; right: 0; bottom: -120px; height: 470px; pointer-events: none; }
.ad-nacht__maan { position: absolute; right: 48px; bottom: 40px; width: 280px; height: auto; filter: brightness(.88);
  /* de onderkant zakt weg in het wolkendek: de maan komt erboven op in plaats van eroverheen te liggen (geen drop-shadow: het masker zou die gloed recht afknippen) */
  -webkit-mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, .3) 70%, transparent 88%); mask-image: linear-gradient(180deg, #000 48%, rgba(0, 0, 0, .3) 70%, transparent 88%); }
.ad-nacht__wolk { position: absolute; left: 50%; bottom: 0; width: 1900px; max-width: none; height: auto; transform: translateX(-50%); opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 46%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent 18%, #000 46%, #000 72%, transparent); }
/* Zo gaan we te werk: de zes stappen langs een stijgende boog, de maan groeit van sikkel naar vol.
   De boog is één beeld met de stappen als onderschrift; de twee toelichtingen staan erna als losse kolommen. */
.ad-werk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: start; }
.ad-werk__tekst { margin-top: 4px; }
.ad-boog { --h: 190px; --m: 52px; position: relative; margin: 56px 0 0; }
.ad-boog__lijn { position: absolute; left: 0; top: calc(var(--m) / 2); width: 100%; height: var(--h); overflow: visible; pointer-events: none; }
.ad-boog__lijn path { fill: none; stroke: rgb(171, 225, 246); stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 1 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ad-boog__fasen { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.ad-boog__fasen li { margin-top: calc(var(--d) * var(--h)); padding: 0 12px; text-align: center; }
.ad-boog__maan { display: block; width: var(--m); height: var(--m); margin: 0 auto; border-radius: 50%; background: var(--zij); filter: drop-shadow(0 0 calc(4px + var(--i) * 3px) rgba(171, 225, 246, calc(.08 + var(--i) * .06))); }
.ad-boog__fasen h3 { margin-top: 16px; font-family: var(--kop); font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.ad-boog__fasen p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--tekst-2); text-wrap: balance; }
.ad-boog__zin { position: absolute; right: 0; bottom: 0; width: calc(100% / 3); padding: 0 12px; text-align: center; font-size: 16px; line-height: 1.5; color: rgb(var(--laag)); text-wrap: balance; }
.ad-boog__fasen li, .ad-boog__zin { transition: opacity 600ms var(--erin), transform 600ms var(--erin); transition-delay: calc(var(--i, 6) * 110ms); }
.js .ad-boog:not(.is-in) .ad-boog__fasen li, .js .ad-boog:not(.is-in) .ad-boog__zin { opacity: 0; transform: translateY(10px); }
@media (max-width: 1100px) {
  .ad-werk { gap: 20px 40px; }
  .ad-boog { --h: 92px; --m: 42px; margin-top: 32px; }
  .ad-boog__fasen li { padding: 0 7px; }
  .ad-boog__fasen h3 { margin-top: 12px; font-size: 16px; }
  .ad-boog__fasen p { font-size: 13px; }
  .ad-boog__zin { position: static; margin: 4px 0 0 auto; font-size: 14px; }
  .ad-nacht__maan { width: 220px; right: 24px; }
}
@media (max-width: 900px) {
  .ad-werk { grid-template-columns: minmax(0, 1fr); }
  .ad-boog { --m: 40px; margin-top: 40px; }
  .ad-boog__lijn { display: none; }
  .ad-boog__fasen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ad-boog__fasen::before { content: ""; position: absolute; left: 19.5px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(180deg, rgba(var(--laag), .12), rgba(var(--laag), .45)); }
  .ad-boog__fasen li { position: relative; margin-top: 0; padding: 0; display: grid; grid-template-columns: var(--m) minmax(0, 1fr); column-gap: 18px; text-align: left; }
  .ad-boog__maan { grid-row: 1 / 3; margin: 0; }
  .ad-boog__fasen h3 { margin-top: 6px; font-size: 19px; }
  .ad-boog__fasen p { font-size: 15px; text-wrap: pretty; }
  .ad-boog__zin { position: static; width: auto; margin: 32px 0 0 58px; padding: 0; text-align: left; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad-boog__fasen li, .ad-boog__zin { transition: none; }
  .js .ad-boog:not(.is-in) .ad-boog__fasen li, .js .ad-boog:not(.is-in) .ad-boog__zin { opacity: 1; transform: none; }
}

/* ── Governance ───────────────────────────────────────────────────────── */
/* Middenplan: het zonnestelsel rechtsboven achter het overzicht; elk bestand zijn eigen baan */
.go-hemel { right: -10%; width: 84%; top: -235px; aspect-ratio: 560 / 440;
  /* de buitenste banen lossen op voordat ze bij het menu komen: geen lijnen achter tekst */
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 44%); mask-image: linear-gradient(180deg, transparent 18%, #000 44%); }
/* Rommel wordt een risico: links de jungle (bestanden zonder label, lijnen naar te veel mensen en straks naar Copilot), rechts de tekst */
/* Twee onderdelen: symmetrisch om één as. Achter de melkweg, midden de zon met links het bestand en rechts het register, voor de twee bijschriften */
.go-twee-sectie { overflow: hidden; }
.go-melkweg { position: absolute; z-index: 0; left: 50%; top: 50%; width: 1500px; transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; opacity: .42;
  -webkit-mask-image: radial-gradient(50% 34% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(50% 34% at 50% 50%, #000 25%, transparent 100%); }
.go-melkweg img { display: block; width: 100%; height: auto; }
.go-twee { display: grid; justify-items: center; }
.go-twee__kop { text-align: center; }
.go-twee__kop .s-kop2 { max-width: none; }
.go-twee__kop .s-tekst { margin: 18px auto 0; max-width: 44em; text-wrap: balance; }
.go-as { position: relative; width: 100%; margin: 52px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: center; }
.go-as__banen { position: absolute; left: 0; top: 50%; width: 100%; height: 300px; transform: translateY(-50%); overflow: visible; pointer-events: none; }
.go-as__banen ellipse { fill: none; stroke: rgb(143, 211, 240); stroke-width: 1; vector-effect: non-scaling-stroke; }
.go-as__banen ellipse:nth-child(1) { stroke-opacity: .32; }
.go-as__banen ellipse:nth-child(2) { stroke-opacity: .2; }
.go-as__banen ellipse:nth-child(3) { stroke-opacity: .12; }
.go-as__zon { position: relative; z-index: 1; width: 200px; height: 200px; }
.go-as__lijn { position: absolute; top: 50%; height: 1px; z-index: 0; }
.go-as__lijn--l { left: 25%; right: 50%; transform-origin: right; }
.go-as__lijn--r { left: 50%; right: 25%; transform-origin: left; }
.go-plaat { position: relative; z-index: 1; margin: 0; background: linear-gradient(180deg, rgb(17, 29, 60), rgb(8, 15, 35) 70%); }
.go-plaat .s-scherm__titel { white-space: nowrap; }
.go-plaat__meta { font-size: 13px; color: var(--tekst-3); }
.go-plaat__inhoud { padding: 18px 20px 20px; display: grid; gap: 16px; }
.go-plaat__naam { display: grid; gap: 4px; }
.go-plaat__naam b { font-size: 16px; font-weight: 600; color: var(--wit); }
.go-plaat__naam span { font-size: 13px; color: var(--tekst-3); }
.go-plaat__velden { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(163, 176, 202, .1); }
.go-plaat__velden dt { font-size: 12px; color: var(--tekst-3); }
.go-plaat__velden dd { margin: 5px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--wit); white-space: nowrap; }
.go-plaat__stip { width: 14px; height: 6px; border-radius: 2px; }
.go-plaat__regel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(163, 176, 202, .12); border-left: 2px solid rgb(143, 211, 240); font-size: 13px; color: var(--tekst-2); }
.go-as__noot { grid-column: 1 / -1; justify-self: center; margin-top: 18px; font-size: 13px; color: var(--tekst-3); }
.go-bij { width: 100%; margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); }
.go-bij__l { grid-column: 1; }
.go-bij__r { grid-column: 3; }
.go-bij h3 { font-family: var(--kop); font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.go-bij p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--tekst-2); max-width: 30em; }
/* bij binnenkomst trekt de lijn vanuit beide platen naar de zon */
.go-as__lijn { transition: transform 900ms var(--erin) 300ms, opacity 400ms linear 300ms; }
.js .go-as:not(.is-in) .go-as__lijn { transform: scaleX(0); opacity: 0; }
@media (max-width: 1100px) {
  .go-as, .go-bij { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
  .go-as__zon { width: 120px; height: 120px; }
  .go-as { margin-top: 32px; }
  .go-plaat__inhoud { padding: 14px 16px 16px; gap: 12px; }
  .go-bij p { font-size: 14px; }
}
@media (max-width: 760px) {
  /* smal: elk bijschrift direct onder zijn eigen plaat */
  .go-as, .go-bij { display: contents; }
  .go-as__zon, .go-as__lijn, .go-as__banen, .go-melkweg { display: none; }
  .go-twee__kop { text-align: left; }
  .go-twee { justify-items: stretch; }
  .go-plaat--l { order: 1; margin-top: 32px; }
  .go-bij__l, .go-bij__r, .go-as__noot { grid-column: 1 / -1; }
  .go-bij__l { order: 2; margin-top: 16px; }
  .go-plaat--r { order: 3; margin-top: 40px; }
  .go-bij__r { order: 4; margin-top: 16px; }
  .go-as__noot { order: 5; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .go-as__lijn { transition: none; }
  .js .go-as:not(.is-in) .go-as__lijn { transform: none; opacity: 1; }
}
/* Eén dashboard: tekst links als bijschrift, het dashboard groot rechts over de volle hoogte, het zonnestelsel rechtsboven erachter */
.go-dash { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px 64px; align-items: start; }
.go-dash__beeld { position: relative; margin-top: 6px; }
.go-isms { position: relative; z-index: 1; margin: 0; background: linear-gradient(180deg, rgb(17, 29, 60), rgb(8, 15, 35) 70%); }
.go-isms .s-scherm__titel { white-space: nowrap; }
.go-isms__meta { margin-left: auto; margin-right: 16px; font-size: 12px; color: var(--tekst-3); }
.go-isms__inhoud { display: grid; gap: 12px; }
.go-isms__tegels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.go-isms__tegel { display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px 18px; border: 1px solid rgba(163, 176, 202, .12); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.go-isms__vakken { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.go-isms__vak { position: relative; padding: 14px 18px 16px; border: 1px solid rgba(163, 176, 202, .12); border-radius: 4px; background: rgba(255, 255, 255, .02); }
.go-isms__vakkop { font-size: 13px; font-weight: 600; color: var(--tekst-2); margin-bottom: 12px; }
.go-isms__lijn { display: block; width: 100%; height: auto; overflow: visible; }
.go-isms__lijn circle { fill: #cfe9f7; }
.go-isms__lijn .go-isms__nu { fill: #f2fbff; filter: drop-shadow(0 0 5px rgba(123, 74, 226, .9)); }
.go-isms__pad { fill: none; stroke: url(#go-lijnverloop); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(94, 151, 255, .55)); }
.go-isms__doel { stroke: rgba(163, 176, 202, .35); stroke-dasharray: 3 4; stroke-width: 1; }
.go-isms__as { stroke: rgba(163, 176, 202, .18); stroke-width: 1; }
.go-isms__assen { display: flex; justify-content: space-evenly; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--tekst-3); }
.go-isms__doeltekst { position: absolute; right: 18px; top: 14px; font-size: 12px; color: var(--tekst-3); }
.go-isms__staven { margin: 0; display: grid; gap: 12px; }
.go-isms__staven > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; }
.go-isms__staven dt { color: var(--tekst-3); }
.go-isms__staven dd { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--wit); font-variant-numeric: tabular-nums; }
.go-isms__staaf { height: 12px; width: calc(var(--n) * 24%); border-radius: 2px; background: rgba(171, 225, 246, .45); }
.go-isms__staaf--midden { background: linear-gradient(90deg, rgb(171, 225, 246), rgb(94, 151, 255)); }
.go-isms__staaf--hoog { background: linear-gradient(90deg, rgb(171, 225, 246), rgb(123, 74, 226)); box-shadow: 0 0 12px 1px rgba(123, 74, 226, .5); }
.go-isms__open ul { list-style: none; margin: 0; padding: 0; }
.go-isms__open li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 112px; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(163, 176, 202, .1); font-size: 13px; color: var(--tekst-2); }
.go-isms__open li > span:first-child { color: var(--wit); }
.go-isms__open li > span:last-child { text-align: right; color: var(--tekst-3); }
.go-isms__tegel span { display: block; font-size: 13px; color: var(--tekst-3); }
.go-isms__tegel > b { display: block; margin-top: 8px; font-family: var(--kop); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--wit); }
.go-isms__tegel small { font-size: 14px; font-weight: 500; color: var(--tekst-3); letter-spacing: 0; }
.go-isms__balk { display: flex; gap: 3px; height: 8px; margin-top: 14px; }
.go-isms__balk i { border-radius: 2px; }
.go-isms__balk .s-nu { flex: 38; }
.go-isms__balk .s-arcering { flex: 14; }
.go-isms__cyclus { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.go-isms__cyclus li { position: relative; padding: 14px 0 2px; font-size: 13px; font-weight: 600; color: var(--tekst-3); }
.go-isms__cyclus li[aria-current] { color: var(--wit); }
.go-isms__cyclus li i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(163, 176, 202, .14); }
.go-isms__cyclus li b { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.go-isms__vb { margin-right: 16px; font-size: 12px; color: var(--tekst-3); white-space: nowrap; }
.go-isms__open li > span:last-child { white-space: nowrap; }
.gv { container-type: inline-size; }
.gv .s-scherm__titel { white-space: nowrap; }
.gv .s-scherm__inhoud { display: grid; gap: 16px; }
.gv .s-keuze { justify-self: start; }
/* voor en na staan op dezelfde plek gestapeld: wisselen verschuift niets */
.gv__wissel { display: grid; }
/* nooit twee teksten door elkaar: de oude verdwijnt snel, daarna komt de nieuwe. Elke rij een tel later (--d) */
.gv { --d: 0ms; }
.gv__rij:not(.gv__rij--kop) { --d: calc(300ms + var(--i) * 260ms); }
.gv__stand { --d: 1340ms; }
.gv__wissel > [data-p] { grid-area: 1 / 1; transition: opacity 120ms linear var(--d), visibility 0s linear calc(var(--d) + 120ms); }
.gv[data-stand="voor"] .gv__wissel > [data-p="na"], .gv[data-stand="na"] .gv__wissel > [data-p="voor"] { opacity: 0; visibility: hidden; }
.gv[data-stand="voor"] .gv__wissel > [data-p="voor"], .gv[data-stand="na"] .gv__wissel > [data-p="na"] { transition: opacity 300ms var(--erin) calc(var(--d) + 120ms), visibility 0s linear calc(var(--d) + 120ms); }
/* voordat het overzicht in beeld komt staat het nog zonder afspraken; bij binnenkomst krijgt elk bestand na elkaar zijn label */
.js .gv:not(.is-in) .gv__wissel > [data-p="na"] { opacity: 0; visibility: hidden; }
.js .gv:not(.is-in) .gv__wissel > [data-p="voor"] { opacity: 1; visibility: visible; }
/* één raster voor alle rijen (subgrid), zodat de kolommen precies onder elkaar staan */
.gv__tabel { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content max-content; column-gap: 24px; border-top: 1px solid rgba(163, 176, 202, .1); }
.gv__rij { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 11px 4px; border-bottom: 1px solid rgba(163, 176, 202, .1); font-size: 14px; color: var(--tekst-2); }
.gv__rij > [role="cell"]:not(.gv__bestand) { white-space: nowrap; }
.gv__rij--kop { padding: 9px 4px; font-size: 13px; font-weight: 600; color: var(--tekst-3); }
.gv__bestand { display: grid; gap: 3px; min-width: 0; }
.gv__bestand b { font-weight: 600; color: var(--wit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv__bestand small { font-size: 13px; color: var(--tekst-3); }
.gv__label { display: flex; align-items: center; gap: 10px; color: var(--wit); }
.gv__band { position: relative; flex: none; width: 22px; height: 14px; border-radius: 2px; }
.gv__band b { position: absolute; inset: 0; border-radius: 2px; }
/* Toon per niveau: vertrouwelijk licht het sterkst op (diepste laagkleur), publiek is rustig */
.gv__band--hoog .s-nu { background: linear-gradient(90deg, rgb(171, 225, 246), rgb(123, 74, 226)); box-shadow: 0 0 16px 2px rgba(123, 74, 226, .55); }
.gv__band--midden .s-nu { background: linear-gradient(90deg, rgb(171, 225, 246), rgb(94, 151, 255)); box-shadow: 0 0 12px 1px rgba(94, 151, 255, .4); }
.gv__band--laag .s-nu { background: rgba(171, 225, 246, .5); box-shadow: none; }
/* het moment: bij binnenkomst krijgt elk bestand na elkaar zijn label; terug naar zonder afspraken geeft de arcering terug */
.gv__band .s-nu, .gv__band .s-arcering { transition: opacity 420ms var(--erin) calc(var(--d) + 60ms); }
.gv[data-stand="voor"] .gv__band .s-nu, .js .gv:not(.is-in) .gv__band .s-nu { opacity: 0; }
.gv[data-stand="na"] .gv__band .s-arcering { opacity: 0; }
.js .gv:not(.is-in) .gv__band .s-arcering { opacity: 1; }
.gv__stand { font-size: 13px; color: var(--tekst-3); }
.gv[data-stand="na"] .gv__stand { color: var(--ijs); }
/* smal kader: bestand over de hele breedte, de rest eronder */
@container (max-width: 600px) {
  .gv__tabel { grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 16px; }
  .gv__rij { row-gap: 8px; }
  .gv__bestand { grid-column: 1 / -1; }
  .gv__rij--kop span:first-child { display: none; }
}

/* ── Microsoft 365-adoptie ────────────────────────────────────────────── */
/* Middenplan: één volle maan achter de rechterbovenhoek van de afdelingen, met zachte gloed; vrij van de kopbalk */
.am-hemel { right: -64px; top: -118px; width: 260px; aspect-ratio: 1; }
.am-hemel::before { content: ""; position: absolute; inset: -55%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(171, 225, 246, .2), rgba(171, 225, 246, .09) 38%, rgba(171, 225, 246, .03) 66%, rgba(171, 225, 246, 0)); }
.am-hemel__maan { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(171, 225, 246, .28)); }
.ad { container-type: inline-size; }
.ad .s-scherm__titel { white-space: nowrap; }
/* bewijs op de AI-pagina: het getal begint op dezelfde hoogte als de klantnaam ernaast */
/* rustig vlak: de maanfasen erachter schijnen niet door de tabel heen */
.ad .s-scherm, .gv .s-scherm, .af .s-scherm { background: linear-gradient(180deg, rgb(17, 29, 60), rgb(8, 15, 35) 70%); }
.ad .s-scherm__inhoud { display: grid; gap: 14px; }
.ad .s-keuze { justify-self: start; }
/* alleen de gekozen afdeling staat er; bij wisselen groeit alles opnieuw (display start de animatie opnieuw) */
.ad__lijst { display: none; list-style: none; margin: 0; padding: 0; }
.ad[data-stand="financien"] .ad__lijst[data-p="financien"], .ad[data-stand="hr"] .ad__lijst[data-p="hr"], .ad[data-stand="verkoop"] .ad__lijst[data-p="verkoop"] { display: grid; }
.ad__kop, .ad__lijst li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 228px; column-gap: 14px; align-items: center; }
@container (min-width: 560px) {
  .ad__kop, .ad__lijst li { grid-template-columns: 22px minmax(0, 1fr) 270px; }
}
/* kolomkoppen altijd op één regel, zodat Vaardigheid en de drie stappen op één lijn staan */
.ad__kop .ad__stappen > * { white-space: nowrap; }
@container (min-width: 471px) and (max-width: 559px) {
  .ad__kop, .ad__lijst li { grid-template-columns: 22px minmax(0, 1fr) 246px; }
  .ad__kop { font-size: 12px; }
}
.ad__kop { align-items: end; padding: 4px 0 9px; border-bottom: 1px solid rgba(163, 176, 202, .1); font-size: 13px; font-weight: 600; color: var(--tekst-3); }
.ad__kop > span:first-child { grid-column: 1 / 3; }
.ad__stappen, .ad__spoor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ad__lijst li { padding: 13px 0; border-bottom: 1px solid rgba(163, 176, 202, .1); }
.ad__maan { display: block; width: 22px; height: 22px; }
.ad__naam { font-size: 14px; color: var(--wit); }
.ad__spoor b { display: block; height: 6px; border-radius: 1px; }
/* het moment: het licht groeit per vaardigheid van links naar rechts, tot waar de afdeling nu is */
.ad__spoor .s-neon-lijn { transform-origin: left center; animation: ad-groei 520ms var(--erin) both; animation-delay: calc(40ms + var(--i) * 90ms + var(--s) * 150ms); }
@keyframes ad-groei { from { transform: scaleX(0); } }
.js .ad:not(.is-in) * { animation-play-state: paused; }
@container (max-width: 470px) {
  .ad__kop, .ad__lijst li { grid-template-columns: 22px minmax(0, 1fr); row-gap: 10px; }
  .ad__kop > span:first-child { display: none; }
  .ad__stappen, .ad__spoor { grid-column: 2; }
}

/* Nevel alleen aan de linkerrand, nooit achter de leestekst rechts */
.s-sfeer--links::before { right: auto; left: -40%; top: 4%; width: 58%; height: 80%; }
.s-sfeer--links::after { display: none; }
.s-sfeer--rechts::before { right: -40%; top: -10%; width: 56%; height: 90%; }
.s-sfeer--rechts::after { display: none; }
/* ── Breedtes ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .go-dash { gap: 32px 40px; }
  .go-isms .s-scherm__inhoud { padding: 14px; }
  .go-isms__meta { display: none; }
  .go-isms__vb { margin-left: auto; }
  .go-isms__cyclus { margin-top: 6px; }
  .go-isms__tegel { padding: 12px 14px 14px; }
  .go-isms__tegel > b { font-size: 30px; }
  .go-isms__vak { padding: 12px 14px 12px; }
  .go-isms__vakkop { margin-bottom: 8px; }
  .go-isms__open li { grid-template-columns: minmax(0, 1fr) 52px 100px; padding: 6px 0; }
  .ai-afwerken { gap: 40px 48px; }
  .ai-afwerken .s-bewijs__naam + p { max-width: 30em; }
  .db-hemel { top: -120px; }
  .ai-hemel { top: -190px; }
  .ap-hemel { top: -240px; }
  /* lager scherm: het Excel-blad iets compacter, zodat blad en bijschrift in één beeld passen */
  .db-xl { --rij: 30px; --pt: 20px; padding: var(--pt) 0 100px 24px; --xl-letter: 13px; }
  .db-xl__raster > :nth-child(7n) { display: none; }
  .db-xl__raster { grid-template-columns: 26px .8fr 1fr 1fr 1fr 1fr; }
  .db-xl__notitie { left: calc(24px + 26px + (100% - 24px - 26px) * .583 - 24px); width: 210px; }
  .db-pijp { margin-top: 40px; }
  .db-pijp__beeld { height: 270px; grid-template-columns: 24fr 7fr 28fr 6fr 35fr; }
  .db-pijp__model { height: 210px; }
  .db-pijp__rapport { height: 230px; }
  .db-pijp__bijschrift { grid-template-columns: 31fr 34fr 35fr; margin-top: 24px; }
  .db-pijp__bijschrift p { padding-right: 24px; font-size: 14px; }
  .go-hemel { top: -175px; right: -26%; width: 96%; }
  .am-hemel { top: -64px; right: -14px; width: 170px; }
  .ap-misgaat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 48px; }
  .ap-post { --stap: 112px; }
  .ap-poollicht { top: 166px; }
  .af__knop { padding: 0 8px; font-size: 13px; }
  .ap-minder__bewijs { margin-top: 32px; }
  .ap-minder__bewijs .s-citaat p { font-size: 18px; }
  .ap-mail { width: 64%; left: calc(var(--n) * 11%); }
  .ap-mail--ligt { left: 30%; width: 70%; }
  .ap-baanbeeld { margin-top: 32px; }
  .ap-station { width: 18.5%; }
  .ap-station h3 { font-size: 16px; }
  .ap-station p { font-size: 14px; line-height: 1.45; }
  .ap-minder__raam { gap: 32px 40px; }
}
/* apps-opening op een laag scherm: de kop telt vier regels, dus kop en lead iets kleiner en minder lucht boven, zodat de lagenbalk heel in beeld staat */
@media (min-width: 901px) and (max-width: 1100px) {
  .s-open:has(.ap-hemel) .s-open__binnen { padding-top: calc(var(--kop-h, 72px) + 32px); }
  .s-open:has(.ap-hemel) .s-kop1 { font-size: 46px; }
  .s-open:has(.ap-hemel) .s-open__tekst p { margin-top: 22px; font-size: 17px; }
  /* tussen kopbalk en kaart is hier maar ±40 px: de planeet iets kleiner, en hij komt boven de kaart op met ±12 px lucht onder de kopbalk */
  .ap-hemel { width: 78%; right: -24%; top: calc(24px - 16.7vw); }
}
@media (max-width: 900px) {
  .ai-licentie, .ai-afwerken { grid-template-columns: minmax(0, 1fr); }
  .go-dash { grid-template-columns: minmax(0, 1fr); }
  .ad-kost { min-height: 0; }
  .ad-kost__tekst { width: auto; }
  .ad-kurve { position: relative; left: auto; right: auto; height: 340px; margin-top: 48px; }
  .go-dash__beeld { margin-top: 56px; max-width: 620px; }
  .ai-stoelen { justify-self: start; max-width: 560px; }
  .ai-afwerken__tekst { display: contents; }
  .ai-hemel { left: -20%; width: 90%; top: -170px; }
  .go-hemel { right: -20%; width: 100%; top: -200px; }
  /* smal: kop, dan het blad, dan de tekst als bijschrift */
  .db-punten__kop { grid-template-columns: minmax(0, 1fr); }
  /* smal: de pijplijn staat rechtop, bron boven, rapport onder */
  .db-pijp__lijnen { display: none; }
  .db-pijp__beeld { height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .db-pijp__bronnen { display: flex; flex-wrap: wrap; gap: 8px; }
  .db-pijp__beeld > * { position: relative; }
  .db-pijp__model::before, .db-pijp__rapport::before { content: ""; position: absolute; left: 50%; top: -28px; width: 1px; height: 28px; background: linear-gradient(180deg, rgba(171, 225, 246, .2), rgb(var(--laag))); }
  .db-pijp__model { height: 200px; }
  .db-pijp__rapport { height: 220px; }
  .db-pijp__bijschrift { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .db-pijp__bijschrift p { padding-right: 0; }
  /* smal: kop, dan de mailketen, dan de tekst als bijschrift */
  .ap-misgaat { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .ap-misgaat__tekst { display: contents; }
  .ap-misgaat__tekst .s-kop2 { order: -1; }
  .ap-misgaat__tekst .s-tekst { order: 1; margin-top: 0; }
  /* smal: de baan bovenaan als beeld, de stappen eronder als rechte lijn */
  .ap-baanbeeld { aspect-ratio: auto; }
  .ap-baanbeeld__svg { position: relative; height: auto; aspect-ratio: 1200 / 490; }
  .ap-stations { position: relative; display: grid; gap: 22px; margin-top: 28px; padding-left: 4px; }
  .ap-station { position: relative; left: auto; top: auto; width: auto; padding-left: 28px; }
  .ap-station::before { left: 0; top: 6px; }
  .ap-station::after { left: 4.5px; top: 20px; height: calc(100% + 8px); background: linear-gradient(180deg, rgba(171, 225, 246, .35), rgba(171, 225, 246, .05)); }
  .ap-station:last-child::after { display: none; }
  .ap-station h3 { margin: 0; }
  .ap-minder__raam { grid-template-columns: minmax(0, 1fr); }
  .ap-minder__tekst { display: contents; }
  .ap-minder__bewijs { order: 2; margin-top: 0; }
  .s-open--product .s-open__binnen { grid-template-columns: 1fr; gap: 0; }
  .s-open--product .s-open__beeld { order: 0; width: 100%; justify-self: stretch; margin: 120px 0 0; }
  .db-hemel { top: -150px; left: -6%; width: 112%; }
}
@media (max-width: 560px) {
  /* smal: het blad met vier kolommen (A tot D), de opmerking onder het blad */
  .db-xl { padding: 16px 0 0 14px; }
  .db-xl__achter span { visibility: hidden; }
  .db-xl__tabs span:nth-child(1), .db-xl__tabs span:nth-child(4) { display: none; }
  .db-xl__raster > .db-xl__fout { padding: 0 8px; font-size: 12px; }
  .db-xl__raster > :nth-child(7n+6) { display: none; }
  .db-xl__raster { grid-template-columns: 24px .8fr 1fr 1fr 1fr; }
  .db-xl__raster > span { padding: 0 7px; }
  .db-xl__opslag { display: none; }
  .db-xl__notitie { position: relative; left: auto; top: auto; width: auto; margin: 14px 0 0 30%; }
  .db-xl__notitie::before { left: 40%; top: -13px; height: 12px; }
  /* smal: de mails steiler onder elkaar, de aanvraag bijna over de volle breedte */
  .ap-post { --stap: 110px; }
  .ap-poollicht { display: none; }
  .ap-mail { width: 84%; left: calc(var(--n) * 5%); padding: 12px 14px; }
  .ap-mail--ligt { left: 4%; width: 94%; transform: rotate(2.5deg); padding: 16px 18px 18px; }
  .ap-mail__kop { font-size: 18px; }
  .ap-post__keten { height: calc(3 * var(--stap) + 200px); }
  .s-open--product .s-open__beeld { margin-top: 96px; }
  .db-hemel { top: -112px; left: -10%; width: 130%; }
  /* op de vouw: kop, periodeknoppen en legenda heel in beeld, de eerste tegel net eronder */
  .s-open--product .s-open__beeld:has(.db-hemel) { margin-top: 124px; }
  .s-open--product .s-open__beeld:has(.ap-hemel) { margin-top: 230px; }
  .ap-hemel { top: -290px; right: -20%; width: 100%; }
  /* de productregel van de opening mag in rust niet net onder de kopbalk uitsteken */
  .s-open:has(.ap-hemel) .s-open__binnen { padding-bottom: 120px; }
  .ai-hemel { left: -6%; width: 98%; top: -270px; }
  .ai-plekken { gap: 10px; }
  .ad-kurve { height: 280px; }
  .go-isms__tegel > b { font-size: 26px; }
  .go-isms__tegels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .go-isms__tegel--breed { grid-column: 1 / -1; }
  .go-isms__vakken { grid-template-columns: minmax(0, 1fr); }
  .go-isms__open li { grid-template-columns: minmax(0, 1fr) auto; }
  .go-isms__open li > span:nth-child(2) { display: none; }
  .go-isms .s-scherm__balk { flex-wrap: wrap; height: auto; row-gap: 2px; padding-block: 10px; }
  .go-isms__vb { order: 3; flex-basis: 100%; margin: 0 0 0 16px; }
  .ai-stoelen__noot .ai-stoelen__vb { margin-left: 0; flex-basis: 100%; }
  .s-open--product .s-open__beeld:has(.ai-hemel) { margin-top: 230px; }
  .go-hemel { right: -30%; width: 130%; top: -320px; }
  .s-open--product .s-open__beeld:has(.go-hemel) { margin-top: 270px; }
  .am-hemel { right: 6px; width: 140px; top: -214px; }
  .ad-nacht { bottom: -90px; }
  .ad-nacht__maan { width: 150px; right: 16px; bottom: 30px; }
  .ad-nacht__wolk { width: 1100px; }
  .s-open--product .s-open__beeld:has(.am-hemel) { margin-top: 236px; }
}

@media (prefers-reduced-motion: reduce) {
  .db-xl__achter, .db-xl__notitie, .db-pijp__pad path { transition: none; }
  .js .db-xl:not(.is-in) .db-xl__achter { transform: rotate(-2.4deg); }
  .js .db-xl:not(.is-in) .db-xl__notitie { opacity: 1; transform: none; }
  .js .db-pijp:not(.is-in) .db-pijp__pad path { stroke-dashoffset: 0; }
  .af .af__band b, .af .af__stap, .af .af__ja, .af .af__melding { transition: none !important; }
  .af__melding { transform: none; }
  .ag *, .ag *::before { animation: none !important; }
  .ag__leest { display: none !important; }
  .ag__band .s-arcering { opacity: 0; }
  .ai-plekken i.s-nu { transition: none; }
  .ad-kurve__val { transition: none; }
  .js .ad-kurve:not(.is-in) .ad-kurve__val { opacity: 1; }
  .gv__band b, .gv__wissel > [data-p] { transition: none !important; }
  .ad * { animation: none !important; }
  .ap-mail, .ap-baanbeeld__voor { transition: none; }
  .js .ap-post:not(.is-in) .ap-mail { translate: none; }
  .js .ap-post:not(.is-in) .ap-mail--ligt { transform: rotate(4deg); }
  .js .ap-baanbeeld:not(.is-in) .ap-baanbeeld__voor { stroke-dashoffset: 0; }
  .db [data-p], .db__meter i, .db__kolom i { transition: opacity 200ms linear, visibility 0s; }
  .db__waarde > [data-p] { transform: none; }
  .db__dek, .db__nu-punt { transition: none; }
  .js .db:not(.is-in) .db__dek { transform: none; }
  .js .db:not(.is-in) .db__nu-punt { opacity: 1; }
}

/* Ronde 9: lichtvlek die de muis volgt op een kaart (overgenomen uit smaak/demo/beweging/bw-kaart-vlek).
   Zet data-vlek op een kaart; oplossingen.js voegt de vlek en de rand toe. Kleur volgt de laag van de pagina. */
:where([data-vlek]) { position: relative; }
[data-vlek] { isolation: isolate; }
.vlek-vak { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.vlek { position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--laag), .26), rgba(var(--laag), .1) 50%, rgba(var(--laag), 0));
  opacity: 0; scale: 0; transition: opacity 240ms var(--erin, ease-out), scale 240ms var(--erin, ease-out); will-change: transform; }
.vlek-rand { position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  -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 exclude, linear-gradient(#000 0 0);
  background: radial-gradient(190px circle at var(--vx, 50%) var(--vy, 50%), rgba(225, 240, 255, .95), rgba(var(--laag), .42) 45%, rgba(var(--laag), 0) 75%);
  opacity: 0; transition: opacity 240ms var(--erin, ease-out); }
@media (hover: hover) and (pointer: fine) {
  [data-vlek]:hover > .vlek-vak .vlek, [data-vlek]:hover > .vlek-rand { opacity: 1; }
  /* de vlek komt op vanuit de muis: hij groeit uit het punt onder de cursor en dooft daar ook weer uit */
  [data-vlek]:hover > .vlek-vak .vlek { scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .vlek, .vlek-rand { transition: none; } }

/* Herstel: als de hero smal wordt, staat het product dicht op de onderrand van de hero (overflow hidden).
   De gloed onder het product eindigt dan op de onderkant van het product, zodat hij niet recht wordt afgeknipt. */
@media (max-width: 1100px) { .s-open .s-product::before { bottom: 0; height: 150px; } }