/* 365OPTIMIZERS klantcases. Laadt na stijl.css en sub.css; overschrijft alleen wat een klantcase anders doet.
   Een klantcase is een verhaal in drie hoofdstukken (zo ging het, wat we deden, wat het opleverde),
   met per case één productbeeld: het ding waar de case over gaat, in een donker glazen kader.
   Arcering betekent overal "zoals het was" of "nog niet"; licht met gloed betekent "nu". */

.sub--case { --kop2: clamp(32px, 3.3vw, 48px); --arc: linear-gradient(100deg, rgba(171, 225, 246, .95), rgba(94, 151, 255, .9) 52%, rgba(146, 104, 240, .95)); }
/* koppen: h1 en h2 lagen te dicht bij elkaar (1,1x); nu ±1,5x */
.sub--case .s-kop2 { font-size: var(--kop2); line-height: 1.08; max-width: 18ch; }
.sub--case .s-slot .s-kop2 { font-size: clamp(34px, 3.4vw, 48px); }
.sub--case .s-slot__binnen { max-width: 880px; }

/* open punten uit ronde 5: kaders optisch midden, eerste regels van de oplossingen op één hoogte.
   Kaders en kaarten volgen hun eigen inhoud (niet uitgerekt): zo staat de inhoud in het midden van zijn rand
   en de eerste regels naast elkaar op één hoogte. */
.sub--case .s-kaders { align-items: start; }
.sub--case .s-kader { padding: 32px; }
.sub--case .s-kader > p:first-child { margin-top: 0; }

/* ── Sfeer: een fijne nevel aan de rand, nooit achter leestekst ───────── */
/* Elk beeld blijft binnen de pagina: het vak is wat je ziet, het beeld loopt erin uit via object-fit en object-position
   (geen negatieve marges meer). Schuine en gespiegelde varianten staan als eigen bestand in assets/sub/klantcases. */
.c-nevel { position: absolute; z-index: 0; pointer-events: none; user-select: none; max-width: none; object-fit: cover; opacity: .9; }
/* HEMA: poollicht naast de kop, de melkweg als band achter het dashboard */
.c-nevel--open.c-nevel--poollicht-ver { left: 40vw; width: 58vw; height: 33.9vw; top: 16%; opacity: .75; }
.c-nevel--moment.c-nevel--melkweg { left: 0; width: 100vw; height: 49.2vw; top: 25%; object-position: 96% 50%; opacity: .6; }
/* FMI: een horizon die opgloeit (de dag dat een contract afloopt) */
.c-nevel--open.c-nevel--schemering { left: 14vw; width: 86vw; height: 31.2vw; top: 40%; object-position: 0 50%; opacity: .55; }
/* Anculus: de melkweg schuin door de opening; achter de titel dooft hij uit, zodat de tekst op een rustig vlak staat */
.c-nevel--open.c-nevel--melkweg { left: 7.2vw; width: 92.8vw; height: 49.3vw; top: 0; object-position: 0 50%; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) 34%, #000 62%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .18) 34%, #000 62%); }
/* ÆVO: een wolkendek onder de satelliet, en een verre wolkenrand onder het register */
.c-nevel--open.c-nevel--wolkendek { left: 30vw; width: 70vw; height: 23vw; top: 58%; object-position: 0 50%; opacity: .5; }
.c-nevel--moment.c-nevel--wolkendek-ver { left: 0; width: 100vw; height: 21.3vw; top: auto; bottom: 0; object-position: 38% 50%; opacity: .42; }
/* nevels die aan de linkerrand beginnen lopen daar zacht uit, in plaats van als afgesneden vlek tegen de rand te staan */
.c-nevel--moment.c-nevel--melkweg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(0deg, transparent 0, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 45%), linear-gradient(0deg, transparent 0, #000 25%, #000 75%, transparent 100%);
  mask-composite: intersect;
}
.s-open > .s-open__binnen, .s-slot__binnen { z-index: 1; }

/* ── Neon-arcering met verloop ────────────────────────────────────────── */
/* de lijnen dragen het verloop van de laagreeks (lichtblauw, blauw, paars) en een zachte neongloed */
.arc { position: relative; filter: drop-shadow(0 0 3px rgba(123, 74, 226, .55)) drop-shadow(0 0 1px rgba(171, 225, 246, .35)); }
.arc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--arc); opacity: .62;
  -webkit-mask-image: repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 7px);
  mask-image: repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px 7px);
}
.arc--rand { box-shadow: inset 0 0 0 1px rgba(146, 140, 240, .38); }
.licht { background: linear-gradient(90deg, var(--ijs), var(--hemelblauw) 60%, #9a7cf0); box-shadow: 0 0 14px 1px rgba(94, 151, 255, .5); }

/* ── Hoofdstukken van het verhaal ─────────────────────────────────────── */
.c-hst { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--tekst-2); }
.c-hst i { position: relative; display: block; width: 56px; height: 6px; border-radius: 1px; flex: none; }
.c-hst--deden i { background: linear-gradient(90deg, rgba(171, 225, 246, .2), rgba(171, 225, 246, .9) 62%); }
.c-hst--nu i { height: 2px; }

/* ── Het productbeeld: gedeelde taal ──────────────────────────────────── */
.c-beeld { position: relative; z-index: 1; margin-top: 56px; }
.c-beeld__kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.c-beeld__wat { font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--tekst-2); max-width: none; }
.c-wissel { display: inline-flex; padding: 0; gap: 0; overflow: hidden; border: 1px solid var(--lijn); border-radius: var(--r); background: rgba(4, 10, 27, .6); }
.c-wissel button {
  position: relative; min-height: 40px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; color: var(--tekst-3);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color var(--t3) var(--erin), background-color var(--t3) var(--erin);
}
.c-wissel button:hover { color: var(--wit); }
.c-wissel button[aria-pressed="true"] { color: var(--wit); background: rgba(var(--laag), .16); }
.c-wissel button + button { box-shadow: inset 1px 0 0 var(--lijn); }
/* "In kaart" en "Sterrenbeeld" hebben hoge stokken (k, l, b): 3 px extra boven zet de letters optisch in het midden */
.c-wissel--stijgers button { padding-top: 3px; }

.pb {
  position: relative; border: 1px solid rgba(var(--laag), .24); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(17, 29, 60, .92), rgba(7, 14, 34, .96) 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 0 rgba(4, 10, 27, .8), 0 50px 90px -50px rgba(var(--laag), .45);
  color: var(--wit); font-size: 14px; isolation: isolate;
}
/* licht dat op de bovenrand van het glas valt */
.pb::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(var(--laag), 0), rgba(230, 240, 255, .75), rgba(var(--laag), 0)); pointer-events: none; }
/* zachte gloed onder het kader */
.pb::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -70px; height: 140px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--laag), .16), rgba(var(--laag), .07) 40%, rgba(var(--laag), .02) 70%, rgba(var(--laag), 0)); }
.pb__balk { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(var(--laag), .14); font-size: 13px; color: var(--tekst-2); }
.pb__app { display: inline-flex; align-items: center; gap: 9px; color: var(--wit); font-weight: 600; }
.pb__app svg { width: 14px; height: 14px; fill: rgb(var(--laag)); }
.pb__waar { color: var(--tekst-3); }
.pb__waar::before { content: ""; display: inline-block; width: 1px; height: 12px; margin-right: 14px; vertical-align: -1px; background: var(--lijn); }
/* officieel Microsoft-icoon in de titelbalk: gedeelde klasse .ms uit sub.css, hier alleen in de regel gezet */
.pb__waar--ms { display: inline-flex; align-items: center; gap: 10px; }
.pb__waar--ms::before { margin-right: 4px; }
.pb__waar .ms { font-weight: 500; color: var(--tekst-2); }
.pb__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--wit); font-weight: 600; }
.pb__live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--blauw); box-shadow: 0 0 10px 2px rgba(143, 211, 240, .55); }
.pb__live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(143, 211, 240, .7); opacity: 0; }
.pb.is-loopt .pb__live i::after { animation: c-ping 2.4s var(--erin) infinite; }
.pb__tijd { color: var(--tekst-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.pb__vlak { position: relative; padding: 20px; }
.pb__noot { margin-top: 18px; font-size: 13px; color: var(--tekst-3); }
@keyframes c-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

/* twee standen in één kader: zoals het was (gearceerd) en nu (licht) */
.pb__stand { transition: opacity 420ms var(--erin), transform 420ms var(--erin); }
.pb__stand--was { position: absolute; inset: 20px; }
/* na elkaar, niet door elkaar: eerst gaat de oude stand weg, dan komt de nieuwe (anders lopen twee beelden over elkaar) */
.pb[data-stand="nu"] .pb__stand--was { opacity: 0; transform: translate3d(0, 6px, 0); pointer-events: none; visibility: hidden; transition: opacity 180ms var(--erin), transform 180ms var(--erin), visibility 0s linear 180ms; }
.pb[data-stand="was"] .pb__stand--nu { opacity: 0; transform: scale(.985); pointer-events: none; transition: opacity 180ms var(--erin), transform 180ms var(--erin); }
.pb[data-stand="nu"] .pb__stand--nu, .pb[data-stand="was"] .pb__stand--was { transition: opacity 320ms var(--erin) 180ms, transform 320ms var(--erin) 180ms; }
/* de titelbalk wisselt mee: in "was" een rekenblad, in "nu" het dashboard */
.pb[data-stand="nu"] .pb__was, .pb[data-stand="was"] .pb__nu { display: none; }
.pb__live.pb__was { color: var(--tekst-3); font-weight: 500; }

/* ── HEMA: het dashboard ──────────────────────────────────────────────── */
.db__rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.db__periode { display: inline-flex; gap: 0; padding: 0; overflow: hidden; border-radius: var(--r); border: 1px solid rgba(var(--laag), .16); background: rgba(4, 10, 27, .5); }
.db__periode button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--tekst-3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color var(--t3) var(--erin), background-color var(--t3) var(--erin); }
.db__periode button:hover { color: var(--wit); }
.db__periode button[aria-pressed="true"] { color: var(--wit); background: rgba(var(--laag), .16); }
.db__bron { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-3); }
.db__bron svg { width: 14px; height: 14px; }

.db__tegels { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.db-tegel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-rows: auto auto auto; column-gap: 12px; padding: 13px 16px 18px; border-radius: 4px; border: 1px solid rgba(var(--laag), .13); background: linear-gradient(180deg, rgba(var(--laag), .07), rgba(var(--laag), .015)); overflow: hidden; }
.db-tegel > span { font-size: 13px; color: var(--tekst-2); font-weight: 600; }
.db-tegel strong { margin-top: 6px; font-family: var(--kop); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.025em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-tegel em { margin-top: 6px; font-style: normal; font-size: 12px; color: var(--tekst-3); }
.db-tegel em b { font-weight: 600; color: rgb(var(--laag)); }
.db-tegel svg { grid-column: 2; grid-row: 1 / 4; align-self: end; width: 96px; height: 40px; overflow: visible; }
.db-tegel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--laag), .55), inset 0 0 22px rgba(var(--laag), .16); opacity: 0; transition: opacity 900ms var(--erin); pointer-events: none; }
.db-tegel.is-nieuw::after { opacity: 1; transition-duration: 120ms; }

.db__grafieken { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 12px; }
.db-blok { margin: 0; padding: 16px 16px 12px; border-radius: 4px; border: 1px solid rgba(var(--laag), .13); background: rgba(4, 10, 27, .35); }
.db-blok figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.db-legenda { display: inline-flex; gap: 14px; font-weight: 500; color: var(--tekst-3); font-size: 12px; }
.db-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.db-legenda i { width: 12px; height: 2px; border-radius: 1px; }
.db-vlak { position: relative; height: 176px; margin-top: 14px; }
.db-vlak svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.db-vlak .lijn { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.db-vlak .raster { stroke: rgba(163, 176, 202, .09); vector-effect: non-scaling-stroke; }
.db-later { position: absolute; top: 0; bottom: 0; right: 0; border-left: 1px dashed rgba(196, 200, 255, .35); }
.db-later.arc::before { opacity: .13; }
.db-later span { position: absolute; top: 8px; right: 8px; font-size: 12px; line-height: 1.3; color: var(--tekst-3); background: rgba(7, 14, 34, .92); padding: 4px 8px; border-radius: 2px; }
.db-stip { position: absolute; width: 0; height: 0; transition: transform 380ms var(--erin); }
.db-stip::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(var(--laag), .25), 0 0 16px 4px rgba(var(--laag), .6); }
.db-stip::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(220, 224, 255, .8); opacity: 0; }
.pb.is-loopt .db-stip::after { animation: c-ping 2.4s var(--erin) infinite; }
.db-as { position: relative; height: 18px; margin-top: 8px; font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.db-as span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.db-as span:first-child { transform: none; }
.db-as span:last-child { transform: translateX(-100%); }
.db-as .is-nu { color: var(--wit); }
.db-staven { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.db-staaf { position: relative; flex: 1; height: 100%; transform-origin: bottom; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(var(--laag), .75), rgba(var(--laag), .18)); transition: transform 380ms var(--erin); }
.db-staaf.is-later { background: none; }
.db-staaf.is-later.arc::before { opacity: .3; }
/* de staaf van nu: een eigen laag die naar zijn plek glijdt, in de kleur van de omzetlijn; de gloed blijft zacht zodat hij opgaat in de lijnen */
.db-staaf-nu { position: absolute; left: 0; bottom: 0; width: calc((100% - 87px) / 30); height: 100%; transform-origin: bottom; border-radius: 2px 2px 0 0; pointer-events: none;
  background: linear-gradient(180deg, #dfe1ff, rgba(var(--laag), .45) 70%, rgba(var(--laag), .2)); box-shadow: 0 0 10px rgba(160, 166, 255, .28); transition: transform 380ms var(--erin); }
/* het label van nu glijdt mee: een vak zo breed als de as schuift met transform, de tekst staat gecentreerd op zijn linkerrand */
.db-staaf-as { overflow-x: clip; }
.db-staaf-as span.is-nu { left: 0; width: 100%; transition: transform 380ms var(--erin); }
.db-staaf-as span.is-nu i { display: inline-block; font-style: normal; transform: translateX(-50%); }
.db-wissel { transition: opacity 180ms linear; }
.db-wissel.is-weg { opacity: 0; }

/* zoals het was: een rekenblad, met de hand bijgewerkt, en een rapportage die nog niet binnen is */
.xl { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.xl__blad { position: relative; display: grid; grid-template-columns: 36px repeat(6, minmax(0, 1fr)); grid-auto-rows: 36px; align-content: start; border-top: 1px solid rgba(163, 176, 202, .14); border-left: 1px solid rgba(163, 176, 202, .14); overflow: hidden; border-radius: 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent); }
.xl__blad > * { border-right: 1px solid rgba(163, 176, 202, .14); border-bottom: 1px solid rgba(163, 176, 202, .14); padding: 0 8px; display: flex; align-items: center; font-size: 12px; color: var(--tekst-3); }
.xl__voet { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--tekst-2); }
.xl__sleutel { display: inline-flex; align-items: center; gap: 10px; }
.xl__sleutel i { display: block; flex: none; width: 28px; height: 14px; border-radius: 2px; }
.xl__wacht { color: var(--tekst-3); }
.xl__blad > .h { justify-content: center; padding: 0; background: rgba(163, 176, 202, .05); }
.xl__blad b { display: block; height: 4px; border-radius: 2px; background: rgba(163, 176, 202, .28); }
.xl__blad .arc { background: none; }
.xl__blad .arc::before { opacity: .26; }

/* moment: het woord, het beeld en het citaat */
.c-moment .s-woord { position: relative; z-index: 1; }
.c-na { position: relative; z-index: 1; margin-top: 72px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; }
.c-na .s-citaat { grid-column: 2; }
h2.c-hst { font-family: inherit; letter-spacing: .01em; }

/* ── FMI Improvia: contractmodule met de workflow die een verlenging meldt ── */
.cm { --cm-kol: minmax(0, 1.5fr) minmax(0, 1.1fr) 116px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cm__lijst { border: 1px solid rgba(var(--laag), .12); border-radius: 4px; background: rgba(4, 10, 27, .35); overflow: hidden; }
.cm__kop { display: grid; grid-template-columns: var(--cm-kol); gap: 12px; padding: 12px 16px; font-size: 12px; color: var(--tekst-3); border-bottom: 1px solid rgba(163, 176, 202, .1); }
.cm__kop span:last-child { text-align: right; }
.cm__rij {
  width: 100%; display: grid; grid-template-columns: var(--cm-kol); align-items: center; gap: 12px; min-height: 60px; padding: 9px 16px 7px;
  border: 0; border-bottom: 1px solid rgba(163, 176, 202, .08); background: transparent; color: var(--wit); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background-color var(--t3) var(--erin);
}
.cm__rijen li:last-child .cm__rij { border-bottom: 0; }
.cm__rij:hover { background: rgba(var(--laag), .05); }
.cm__rij[aria-pressed="true"] { background: rgba(var(--laag), .09); box-shadow: inset 2px 0 0 rgb(var(--laag)); }
.cm__rij:focus-visible { outline-offset: -3px; }
.cm__naam { min-width: 0; font-weight: 600; }
.cm__naam b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.cm__status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--tekst-2); box-shadow: inset 0 0 0 1px var(--lijn); white-space: nowrap; }
.cm__status:not(.arc)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(163, 176, 202, .6); }
.cm__status--getekend { color: var(--wit); box-shadow: inset 0 0 0 1px rgba(var(--laag), .45); }
.cm__status--getekend:not(.arc)::before { background: rgb(var(--laag)); box-shadow: 0 0 8px 1px rgba(var(--laag), .7); }
.cm__status--nog i { display: block; flex: none; width: 16px; height: 10px; border-radius: 2px; }
.cm__status--nog::before { display: none; }
.cm__datum { font-size: 13px; color: var(--tekst-2); text-align: right; font-variant-numeric: tabular-nums; }
.cm__rij.is-binnen .cm__datum { color: rgb(var(--laag)); }

.cm__flow {
  position: relative; display: flex; flex-direction: column; padding: 18px 18px 18px; border: 1px solid rgba(var(--laag), .14); border-radius: 4px;
  background: radial-gradient(120% 70% at 0% 0%, rgba(var(--laag), .07), rgba(var(--laag), 0) 60%), rgba(4, 10, 27, .35);
}
.cm__flowkop { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.cm__flowkop svg { width: 14px; height: 14px; flex: none; }
/* de stappen verdelen de hoogte van de kolom, zodat er onder de flow geen leeg vak overblijft */
.cm__stappen { position: relative; flex: 1 1 auto; display: grid; gap: 22px; align-content: space-between; margin: 20px 0 24px; }
.cm__stappen::before { content: ""; position: absolute; left: 9.5px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(var(--laag), .4), rgba(var(--laag), .12)); }
.cm__stap { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; }
.cm__stap > i { position: relative; display: block; width: 20px; height: 20px; border-radius: 50%; background: #0a1430; box-shadow: inset 0 0 0 1px rgba(var(--laag), .4); }
.cm__stap > i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 12px 2px rgba(var(--laag), .65); opacity: 0; transform: scale(.4); transition: opacity 260ms var(--erin), transform 260ms var(--erin); }
.cm__stap.is-aan > i::after { opacity: 1; transform: none; }
.cm__stap > i.arc::after { display: none; }
.cm__stap b { display: block; font-size: 12px; font-weight: 600; color: var(--tekst-3); }
.cm__stap em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: var(--wit); transition: opacity 200ms linear; }
.cm__stap.is-nee em { color: var(--tekst-3); }
.cm__puls { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(var(--laag), .75); opacity: 0; pointer-events: none; transition: transform 560ms var(--erin), opacity 200ms linear; }
.cm__puls.is-aan { opacity: 1; }
.cm__bericht {
  margin-top: auto; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 4px;
  background: rgba(var(--laag), .08); box-shadow: inset 0 0 0 1px rgba(var(--laag), .32), 0 14px 30px -14px rgba(var(--laag), .55);
  opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 320ms var(--erin), transform 320ms var(--erin);
}
.cm__bericht.is-aan { opacity: 1; transform: none; }
.cm__bericht svg { width: 20px; height: 20px; }
.cm__bericht b { display: block; font-size: 14px; }
.cm__bericht em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: var(--tekst-2); }

/* ── Anculus: de kansenhemel; dezelfde zeventien sterren als het sterrenbeeld bovenaan.
   Acht heldere sterren dragen werk dat in de verkenning aan bod kwam. De andere negen zijn stippen zonder naam.
   Een lens volgt de muis en vergroot wat eronder staat; zonder muis loopt hij langs de acht namen. ── */
.kh { position: relative; height: 400px; overflow: hidden; border-radius: 4px;
  background: radial-gradient(60% 70% at 62% 46%, rgba(123, 74, 226, .16), rgba(123, 74, 226, .04) 60%, rgba(123, 74, 226, 0)), radial-gradient(40% 50% at 18% 70%, rgba(94, 151, 255, .08), rgba(94, 151, 255, 0) 70%), rgba(4, 10, 27, .4);
  box-shadow: inset 0 0 0 1px rgba(var(--laag), .1); cursor: crosshair; touch-action: pan-y; }
.kh__hemel { position: absolute; inset: 34px 72px 46px 44px; }
.kh__lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kh__lijnen line { stroke: rgb(208, 196, 255); stroke-opacity: .3; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kh__sterren { position: absolute; inset: 0; }
.kh__stip, .kh__ster { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.kh__stip { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: rgba(216, 208, 255, .5); }
.kh__ster { width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; font: inherit; cursor: pointer; }
.kh__punt { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f1edff; box-shadow: 0 0 0 3px rgba(var(--laag), .14), 0 0 16px 5px rgba(var(--laag), .42); transition: transform var(--t3) var(--erin); }
.kh__ster--helder .kh__punt { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; box-shadow: 0 0 0 4px rgba(var(--laag), .18), 0 0 24px 9px rgba(var(--laag), .5); }
/* de kruisglans van het sterrenbeeld bovenaan, bij elke ster met naam */
.kh__punt::before, .kh__punt::after { content: ""; position: absolute; left: 50%; top: 50%; }
.kh__punt::before { width: 22px; height: 1px; margin: -.5px 0 0 -11px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.kh__punt::after { width: 1px; height: 22px; margin: -11px 0 0 -.5px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.kh__ster--helder .kh__punt::before { width: 30px; margin-left: -15px; }
.kh__ster--helder .kh__punt::after { height: 30px; margin-top: -15px; }
.kh__naam { position: absolute; width: max-content; max-width: 12.5em; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--tekst-2); text-align: left; pointer-events: none; transition: color var(--t3) var(--erin), opacity 320ms var(--erin); }
.kh__ster--b .kh__naam { left: 50%; top: calc(100% - 6px); transform: translateX(-50%); text-align: center; }
.kh__ster--o .kh__naam { left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%); text-align: center; }
.kh__ster--r .kh__naam { left: calc(100% - 4px); top: 50%; transform: translateY(-50%); }
.kh__ster--l .kh__naam { right: calc(100% - 4px); top: 50%; transform: translateY(-50%); text-align: right; }
.kh__ster:hover .kh__punt, .kh__ster[aria-pressed="true"] .kh__punt { transform: scale(1.3); }
.kh__ster[aria-pressed="true"] .kh__naam { color: var(--wit); }
.kh__ster:focus-visible { outline: 2px solid rgb(var(--laag)); outline-offset: 2px; }
/* de lens: een vergrote kopie van de hemel, rond uitgesneden; de rand is glas met een dunne lichtrand */
.kh__lens-beeld { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 260ms var(--erin);
  background: radial-gradient(60% 70% at 62% 46%, rgba(123, 74, 226, .24), rgba(123, 74, 226, .07) 60%, rgba(123, 74, 226, 0)), #070f27;
  clip-path: circle(0 at 50% 50%); }
.kh__lens-beeld .kh__naam { display: none; }
/* de naam van de ster onder de lens hangt als bijschrift onder de ring; de naam op de hemel zelf wijkt dan */
.kh__lens-naam { position: absolute; left: 50%; top: calc(100% + 10px); width: max-content; max-width: 15em; padding: 5px 10px; border-radius: 2px; transform: translateX(-50%);
  background: rgba(4, 10, 27, .88); box-shadow: inset 0 0 0 1px rgba(var(--laag), .28); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--wit); text-align: center; opacity: 0; transition: opacity 200ms var(--erin); }
.kh.is-raak .kh__lens-naam { opacity: 1; }
.kh.is-boven .kh__lens-naam { top: auto; bottom: calc(100% + 10px); }
.kh.is-lens.is-raak .kh__ster[aria-pressed="true"] .kh__naam { opacity: 0; transition-delay: 0s; }
/* een buurnaam die half onder het glas zou vallen, vervaagt zolang de lens erbij staat */
.kh.is-lens .kh__naam.is-onder { opacity: 0; }
.kh__lens-beeld .kh__lijnen line { stroke-opacity: .55; }
.kh__lens { position: absolute; left: 0; top: 0; width: 136px; height: 136px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 0 22px rgba(196, 178, 255, .2), 0 0 0 6px rgba(196, 178, 255, .05), 0 0 34px -2px rgba(123, 74, 226, .55);
  transition: opacity 260ms var(--erin); will-change: transform; }
/* licht dat op de bovenkant van het glas valt */
.kh__lens::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 34% at 38% 14%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
/* staat de lens op een ster met naam, dan krijgt de rand het verloop van lichtblauw naar paars */
.kh__lens::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px; background: var(--hemel); opacity: 0; transition: opacity 220ms var(--erin);
  -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); }
.kh.is-raak .kh__lens::after { opacity: 1; }
.kh.is-lens .kh__lens, .kh.is-lens .kh__lens-beeld { opacity: 1; }
/* stand "was": alleen het sterrenbeeld; daarna komen de namen er snel een voor een bij */
.pb[data-stand="was"] .kh__naam { opacity: 0; }
.pb[data-stand="nu"] .kh__naam { transition-delay: 0s, calc(var(--i) * 40ms + 100ms); }
.pb[data-stand="was"] .kh__punt { transform: scale(.55); }
.kh__onder { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-top: 16px; min-height: 48px; }
.kh__keus { display: grid; gap: 3px; }
.kh__keus b { font-family: var(--kop); font-size: 19px; font-weight: 500; line-height: 1.25; color: var(--wit); }
.kh__keus span { font-size: 13px; color: var(--tekst-3); }
.kh__sleutel { display: flex; gap: 22px; font-size: 13px; color: var(--tekst-3); }
.kh__sleutel span { display: inline-flex; align-items: center; gap: 10px; }
.kh__teken { position: relative; width: 14px; height: 14px; }
.kh__teken::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f1edff; box-shadow: 0 0 10px 3px rgba(var(--laag), .5); }
.kh__teken--stip::before { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: rgba(216, 208, 255, .5); box-shadow: none; }

/* ── Anculus: de Discovery; de vraag links, de drie stappen in een vak van glas rechts, met banen erachter ── */
.c-sectie--discovery { position: relative; overflow: hidden; }
.c-banen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.c-banen ellipse { fill: none; stroke: rgba(196, 178, 255, .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-banen ellipse:first-child { stroke: rgba(196, 178, 255, .2); }
.c-banen .c-banen__maan { fill: url(#an-planeet); stroke: none; }
.c-banen .c-banen__gloed { fill: url(#an-ringgloed); stroke: none; }
.c-sectie--discovery .s-binnen { position: relative; z-index: 1; }
.c-discovery__vraag .s-vraag { margin-top: 40px; }
.c-baan { position: relative; padding: 32px 36px 34px; border: 1px solid rgba(var(--laag), .2); border-radius: var(--r);
  background: radial-gradient(90% 60% at 100% 0%, rgba(var(--laag), .1), rgba(var(--laag), 0) 60%), linear-gradient(180deg, rgba(17, 29, 60, .88), rgba(7, 14, 34, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 50px 90px -50px rgba(var(--laag), .45); }
.c-baan::before { content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, rgba(var(--laag), 0), rgba(230, 240, 255, .75), rgba(var(--laag), 0)); }
.c-baan__kop { font-family: var(--kop); font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; color: var(--wit); }
.c-baan__wat { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--tekst-2); }
.c-baan .c-route { margin-top: 28px; gap: 24px; }

/* ── ÆVO: het issueregister; app, Power Automate en het overzicht in SharePoint ── */
.ir { --ir-kol: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1.05fr) 52px 120px; display: grid; grid-template-columns: 264px 236px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ir__app { display: flex; justify-content: center; }
.tf {
  position: relative; width: 100%; padding: 22px 14px 16px; border-radius: 22px; border: 1px solid rgba(var(--laag), .3);
  background: linear-gradient(180deg, #0e1a38, #081128 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 4px rgba(4, 10, 27, .55), 0 30px 60px -30px rgba(var(--laag), .55);
}
.tf::before { content: ""; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px; margin-left: -22px; border-radius: 2px; background: rgba(163, 176, 202, .22); }
.tf__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px 6px; }
.tf__kop span { font-size: 15px; font-weight: 600; color: var(--wit); }
.tf__kop small { font-size: 12px; color: var(--tekst-3); }
.tf__veld { margin-top: 12px; }
.tf__label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--tekst-3); }
.tf__keus { display: flex; gap: 4px; }
.tf__keus button { flex: 1 1 auto; min-height: 34px; padding: 0 8px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--tekst-2); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--t3) var(--erin), background-color var(--t3) var(--erin), box-shadow var(--t3) var(--erin); }
.tf__keus button:hover { color: var(--wit); }
.tf__keus button[aria-pressed="true"] { color: var(--wit); background: rgba(var(--laag), .16); box-shadow: inset 0 0 0 1px rgba(var(--laag), .55); }
.tf__invoer { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: 4px; background: rgba(4, 10, 27, .6); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 13px; color: var(--wit); }
.tf__invoer svg { width: 12px; height: 12px; flex: none; color: rgb(var(--laag)); }
.tf__waarde { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 150ms linear; }
.tf__waarde.is-weg { opacity: 0; }
.tf__melden {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 42px; margin-top: 18px; border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(var(--laag), .16); box-shadow: inset 0 0 0 1px rgba(var(--laag), .6), 0 0 22px -4px rgba(var(--laag), .55); color: var(--wit); font: inherit; font-size: 14px; font-weight: 600;
  transition: background-color var(--t3) var(--erin);
}
.tf__melden:hover { background: rgba(var(--laag), .26); }
.tf__melden > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; transition: opacity 200ms linear, transform 200ms var(--erin); }
.tf__melden svg { width: 12px; height: 12px; }
.tf__klaar { opacity: 0; transform: translate3d(0, 4px, 0); }
.tf__melden.is-gemeld .tf__nog { opacity: 0; transform: translate3d(0, -4px, 0); }
.tf__melden.is-gemeld .tf__klaar { opacity: 1; transform: none; }
.ir__flow .cm__stappen { margin-bottom: 0; }

.ir__lijst { min-width: 0; border: 1px solid rgba(var(--laag), .12); border-radius: 4px; background: rgba(4, 10, 27, .35); overflow: hidden; }
.ir__lijstkop { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(163, 176, 202, .1); }
.ir__lijstkop svg { width: 14px; height: 14px; flex: none; }
.ir__lijstkop span { font-size: 13px; font-weight: 600; color: var(--wit); }
.ir__lijstkop small { margin-left: auto; font-size: 12px; color: var(--tekst-3); }
.ir__kop { display: grid; grid-template-columns: var(--ir-kol); gap: 12px; padding: 10px 16px; font-size: 12px; color: var(--tekst-3); border-bottom: 1px solid rgba(163, 176, 202, .08); }
.ir__rijen { position: relative; }
.ir__rij {
  display: grid; grid-template-columns: var(--ir-kol); align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid rgba(163, 176, 202, .08);
  font-size: 13px; color: var(--tekst-2); transition: background-color 1200ms var(--erin), box-shadow 1200ms var(--erin);
}
.ir__rij:last-child { border-bottom: 0; }
.ir__issue { min-width: 0; color: var(--wit); font-weight: 600; }
.ir__issue b { display: block; margin-bottom: 2px; font-size: 12px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.ir__waar, .ir__wie { min-width: 0; }
.ir__dl { font-variant-numeric: tabular-nums; }
.ir__st { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--tekst-2); box-shadow: inset 0 0 0 1px var(--lijn); }
.ir__st:not(.ir__st--open)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(163, 176, 202, .6); }
.ir__st--klaar::before { background: rgba(var(--laag), .7); }
.ir__st--open i { display: block; flex: none; width: 16px; height: 10px; border-radius: 2px; }
.ir__st--nieuw { color: var(--wit); box-shadow: inset 0 0 0 1px rgba(var(--laag), .55); }
.ir__st--nieuw::before { background: rgb(var(--laag)) !important; box-shadow: 0 0 8px 1px rgba(var(--laag), .75); }
.ir__rij.is-nieuw { background: rgba(var(--laag), .1); box-shadow: inset 2px 0 0 rgb(var(--laag)); transition-duration: 200ms; }
.ir__rij.is-schuif { transition: transform 420ms var(--erin), opacity 420ms var(--erin), background-color 1200ms var(--erin), box-shadow 1200ms var(--erin); }
/* de nieuwe rij komt pas op als de andere rijen opzij zijn geschoven, zodat twee rijen nooit over elkaar heen staan */
.ir__rij.is-nieuw.is-schuif { transition: transform 300ms var(--erin) 400ms, opacity 300ms var(--erin) 400ms, background-color 1200ms var(--erin), box-shadow 1200ms var(--erin); }

/* toen: een rekenblad en een stapel mails */
.ir-was { height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 20px; overflow: hidden; }
.ir-mail { display: grid; align-content: start; gap: 10px; }
.ir-mail li { padding: 14px 16px; border-radius: 4px; border: 1px solid rgba(163, 176, 202, .14); background: rgba(4, 10, 27, .45); }
.ir-mail li:nth-child(2) { margin-left: 14px; }
.ir-mail li:nth-child(3) { margin-left: 6px; }
.ir-mail li:nth-child(4) { margin-left: 20px; }
.ir-mail b { display: block; font-size: 13px; font-weight: 600; color: var(--tekst-2); }
.ir-mail span { display: grid; gap: 6px; margin-top: 10px; }
.ir-mail i { display: block; height: 4px; border-radius: 2px; background: rgba(163, 176, 202, .2); }

/* ── Neon-verloop: per case een andere vorm ──
   FMI: de lijn van de workflow; ÆVO: de rand van het productbeeld en "enkele minuten"; HEMA: het licht dat door de keten loopt.
   Lijn en rand alleen in de stand "nu": licht met gloed = nu. */
.pb[data-pb="fmi"] .cm__stappen::before {
  width: 2px; left: 9px; background: linear-gradient(180deg, var(--ijs), var(--blauw) 24%, var(--hemelblauw) 58%, var(--paars));
  box-shadow: 0 0 10px 0 rgba(94, 151, 255, .45), 0 0 2px 0 rgba(171, 225, 246, .5);
}
.pb[data-pb="aevo"][data-stand="nu"] { border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 24px -4px rgba(94, 151, 255, .34), 0 50px 90px -50px rgba(var(--laag), .45); }
.pb[data-pb="aevo"]::before {
  left: -1px; right: -1px; top: -1px; bottom: -1px; height: auto; z-index: 3; border-radius: inherit; padding: 1px;
  background: var(--hemel);
  -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);
  transition: opacity 600ms var(--erin);
}
.pb[data-pb="aevo"][data-stand="was"] { border-color: rgba(var(--laag), .24); }
.pb[data-pb="aevo"][data-stand="was"]::before { opacity: 0; }

/* ── Compositie (Gökhan 11 nov: elk scherm als ingelijst beeld) ──
   minder dode band rond de scheidslijnen, het productbeeld komt hoger in het scherm */
.sub--case { --sectie: clamp(80px, 10vh, 104px); }
.sub--case .c-moment { padding-top: clamp(64px, 8vh, 88px); }

/* ── Hoofdstukken als schermen (ronde 7) ──
   Op een scherm van normale hoogte is elk hoofdstuk één beeld: de inhoud staat in het midden van wat onder de kop
   overblijft. De oplossing en het slot houden hun eigen maat. */
.c-kern { position: relative; z-index: 1; display: grid; }
/* ÆVO: het verschil als poster in het midden, het citaat eronder */
.c-kern--verschil { justify-items: center; text-align: center; gap: 56px; }
.c-kern--verschil .s-verschil { justify-items: center; }
.c-kern--verschil .s-citaat p { margin-inline: auto; max-width: 30em; }
.c-kern--verschil .s-citaat footer { justify-content: center; }
.c-moment--beeld .c-beeld, .s-binnen > .c-beeld:first-child { margin-top: 0; }
/* de rij met de andere cases staat los van de onderrand */
.sub--case .s-lagen--cases { bottom: 40px; padding-bottom: 0; }
.sub--case .s-open__binnen { padding-bottom: 168px; }
@media (min-width: 901px) and (min-height: 700px) {
  .sub--case main > .s-sectie {
    min-height: 100svh; display: grid; align-content: center;
    padding-top: calc(var(--kop-h, 92px) + 40px); padding-bottom: 72px;
  }
  .sub--case main > .s-sectie > .s-binnen { width: 100%; }
  .sub--case main > .s-sectie::before { display: none; }
  .sub--case .s-slot .s-kop2--breed { max-width: 32ch; }
  /* het slot is een beeld: de vraag met de knoppen, de oplossing als voetregel; samen met de voet vult het precies een scherm.
     --voet-h zet case.js op de echte hoogte van de voet */
  .sub--case .s-slot {
    min-height: calc(100svh - var(--voet-h, 418px)); display: grid; align-content: center;
    padding-top: calc(var(--kop-h, 92px) + 24px); padding-bottom: 32px;
  }
}
@media (min-width: 901px) and (min-height: 700px) and (max-height: 860px) {
  /* lage schermen: vraag, knoppen en oplossing dichter op elkaar */
  /* het productbeeld met zijn kop en voetregel past dan nog in een scherm */
  /* --kop-h is 92, de kopbalk eindigt op 84: zo blijft er 12 px lucht onder de kopbalk */
  .sub--case main > .s-sectie { padding-top: calc(var(--kop-h, 92px) + 4px); padding-bottom: 8px; }
  /* het slot met de voet in een scherm: vraag, knoppen en oplossing dichter op elkaar */
  .sub--case .s-slot { padding-top: calc(var(--kop-h, 92px) + 12px); padding-bottom: 16px; }
  .sub--case .s-slot .s-acties { margin-top: 20px; }
  .sub--case .s-slot .c-oplos { margin-top: 16px; padding-top: 12px; }
  .sub--case .s-slot .c-oplos a { min-height: 32px; }
  .c-beeld__kop { margin-bottom: 12px; }
  .c-beeld__onder { margin-top: 16px; }
  .db-vlak { height: 140px; }
  .kh { height: 330px; }
}
.c-beeld__onder > .c-zegt { flex: 1 1 24em; }
@media (max-width: 900px) {
  /* smal past de voet er niet bij: het slot is dan een eigen scherm */
  .sub--case .s-slot { min-height: 100svh; display: grid; align-content: center; padding-top: calc(var(--kop-h, 78px) + 24px); padding-bottom: 48px; }
}

/* ── Het slot: de oplossing als rustige voetregel onder de vraag ── */
.c-oplos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 14px; color: var(--tekst-3); }
.c-oplos > span { margin-right: 4px; }
.c-oplos a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tekst-2); font-weight: 600; text-decoration: none; transition: color var(--t3) var(--erin); }
.c-oplos a:hover { color: var(--wit); }
.c-oplos i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--k)); box-shadow: 0 0 10px 1px rgba(var(--k), .7); }

/* ── HEMA ── */
/* onder het dashboard: wat HEMA erover zegt, en de noot */
.c-beeld__onder { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-top: 24px; }
.c-beeld__onder .pb__noot { margin-top: 0; }
/* bij de kaart staan zin en noot naast elkaar, zo past de kaart in een scherm */
.c-beeld__onder--naast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.c-zegt { margin: 0; max-width: 46em; }
.c-zegt p { font-family: var(--kop); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.35; letter-spacing: -.01em; color: var(--wit); }
.c-zegt footer { margin-top: 6px; font-size: 13px; color: var(--tekst-3); }
p.c-zegt--tekst { font-size: 15px; line-height: 1.5; color: var(--tekst-2); max-width: 36em; }
/* kop en uitleg naast elkaar, de keten als beeld eronder */
.s-duo--kop { align-items: end; }
.s-duo--kop .s-tekst p { margin-top: 0; }
/* de keten: van de systemen naar het dashboard naar de mensen; er loopt licht doorheen */
.c-keten { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
.c-keten::before { content: ""; position: absolute; left: 4%; right: 4%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(var(--laag), .1), rgba(var(--laag), .55) 60%, rgba(var(--laag), .2)); }
.c-keten::after {
  content: ""; position: absolute; left: 4%; top: 50%; width: 120px; height: 3px; margin-top: -1px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(171, 225, 246, 0), rgba(220, 230, 255, .95), rgba(146, 104, 240, 0)); filter: blur(.5px);
  animation: c-keten 5.6s cubic-bezier(.45, 0, .25, 1) infinite; opacity: 0;
}
@keyframes c-keten { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(calc(min(1100px, 82vw) - 120px), 0, 0); opacity: 0; } }
.c-keten li {
  position: relative; z-index: 1; display: grid; align-content: center; justify-items: start; gap: 8px; min-height: 152px; padding: 25px 22px 19px;
  border: 1px solid rgba(var(--laag), .16); border-radius: var(--r); background: linear-gradient(180deg, #0d1834, #081129);
}
.c-keten li svg, .c-keten li img { width: 28px; height: 28px; margin-bottom: 6px; }
.c-keten b { font-size: 16px; font-weight: 600; color: var(--wit); }
.c-keten span { font-size: 14px; line-height: 1.45; color: var(--tekst-2); }
.c-keten__hier { border-color: rgba(var(--laag), .55) !important; background: radial-gradient(120% 90% at 0% 0%, rgba(var(--laag), .18), rgba(var(--laag), 0) 60%), linear-gradient(180deg, #111f42, #0a1430) !important; box-shadow: 0 0 34px -8px rgba(var(--laag), .55); }

/* het verhaal van HEMA naast een beeld: het Excel-blad van toen ligt achter, de keten van nu ervoor; er loopt licht door de keten */
.c-hema { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 80px; align-items: center; }
.c-hema__tekst p { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--tekst-2); }
.c-hema__tekst p.c-hema__in { margin-top: 22px; font-size: 19px; color: var(--wit); }
.c-hema .s-citaat { margin-top: 28px; }
.c-taf { position: relative; min-height: 480px; }
.c-taf__vel { position: absolute; left: 0; top: 0; width: 64%; height: 300px; overflow: hidden; border: 1px solid rgba(163, 176, 202, .2); border-radius: var(--r);
  background: linear-gradient(180deg, #0c162f, #081027); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); opacity: .72; transform: rotate(-4deg); }
.c-taf__vel-kop { display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 12px; border-bottom: 1px solid rgba(163, 176, 202, .16); font-size: 13px; color: var(--tekst-3); }
.c-taf__vel-kop svg { width: 14px; height: 14px; }
.c-taf__vel-blad { position: absolute; inset: 34px 0 0; background-image: linear-gradient(rgba(163, 176, 202, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 176, 202, .1) 1px, transparent 1px); background-size: 24% 24px; background-position: 0 0, -1px 0; }
.c-taf__vel-blad i { position: absolute; height: 22px; }
.c-taf__vel-blad i.arc::before { opacity: .35; }
.c-taf__vel-wacht { position: absolute; left: 12px; bottom: 12px; padding: 4px 8px; border-radius: 2px; background: rgba(7, 14, 34, .92); font-size: 12px; color: var(--tekst-3); }
.c-keten.c-keten--stroom { position: absolute; right: 0; bottom: 0; width: 60%; grid-template-columns: 1fr; gap: 10px; margin: 0; }
.c-keten.c-keten--stroom::before { display: block; left: 33px; right: auto; top: 30px; bottom: 30px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(var(--laag), .15), rgba(var(--laag), .6) 70%, rgba(var(--laag), .25)); }
.c-keten.c-keten--stroom::after { display: block; left: 32px; top: 30px; width: 3px; height: 90px; margin: 0; background: linear-gradient(180deg, rgba(171, 225, 246, 0), rgba(220, 230, 255, .95), rgba(146, 104, 240, 0)); animation-name: c-stroom; }
@keyframes c-stroom { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(0, 240px, 0); opacity: 0; } }
.c-keten.c-keten--stroom li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; min-height: 0; padding: 14px 18px 14px 20px; background: linear-gradient(180deg, rgba(13, 24, 52, .96), rgba(8, 17, 41, .96)); }
.c-keten--stroom li svg, .c-keten--stroom li img { grid-row: 1 / 3; margin: 0; }
.c-keten--stroom b { align-self: end; }
.c-keten--stroom span { align-self: start; }
.c-keten--stroom .c-keten__hier { transform: translateX(-18px); }

/* ── FMI: het citaat is het zwaartepunt van het verhaal ── */
/* FMI: links het citaat, rechts een maand met deadlines waar niemand zeker van is; daarna Teams achter, SharePoint ervoor */
.c-taf::before { content: ""; position: absolute; inset: -12% -6% -12% -6%; background: radial-gradient(50% 50% at 60% 55%, rgba(var(--laag), .14), rgba(var(--laag), 0) 70%); pointer-events: none; }
.c-fmi { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 72px; align-items: center; }
.c-fmi--bouw { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.c-fmi__onder { columns: 2; column-gap: 28px; margin-top: 44px; }
.c-fmi__onder p { break-inside: avoid; }
.c-fmi__onder p, .c-fmi--bouw .c-fmi__tekst > p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tekst-2); }
.c-fmi--bouw .c-fmi__tekst > p { margin-top: 24px; color: var(--wit); }
.c-fmi--bouw .s-lijst { margin-top: 14px; }
.c-taf--maand { min-height: 0; padding: 30px 0 46px; }
.c-maand { position: relative; padding: 18px 20px 22px; border: 1px solid rgba(163, 176, 202, .2); border-radius: var(--r); background: linear-gradient(180deg, #0c162f, #081027); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); transform: rotate(2.5deg); }
.c-maand__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.c-maand__kop em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--tekst-3); }
.c-maand__dagen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.c-maand__dagen i { aspect-ratio: 1; border-radius: 3px; background: rgba(163, 176, 202, .07); box-shadow: inset 0 0 0 1px rgba(163, 176, 202, .1); }
.c-maand__dagen i.is-weg { background: none; box-shadow: none; }
.c-maand__dagen i.is-vraag { background: none; box-shadow: none; border: 1px dashed rgba(171, 225, 246, .7); }
.c-maand__vraag { position: absolute; right: 8%; bottom: 0; padding: 7px 12px 4px; border-radius: 2px; background: rgba(7, 14, 34, .94); box-shadow: inset 0 0 0 1px rgba(171, 225, 246, .3); font-size: 14px; color: var(--wit); transform: rotate(-2deg); }
.c-taf--fmi { min-height: 460px; }
.c-venster { position: absolute; border: 1px solid rgba(163, 176, 202, .2); border-radius: var(--r); background: linear-gradient(180deg, #0d1834, #081129); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.c-venster__kop { display: flex; align-items: center; gap: 10px; height: 44px; padding-inline: 16px; border-bottom: 1px solid rgba(163, 176, 202, .14); font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.c-venster__kop img { width: 20px; height: 20px; }
.c-venster--teams { left: 0; top: 0; width: 58%; height: 280px; opacity: .6; transform: rotate(-3deg); }
.c-venster__lijst { display: grid; gap: 16px; padding: 22px 18px; }
.c-venster__lijst i { display: block; height: 8px; border-radius: 4px; background: rgba(163, 176, 202, .16); }
.c-venster--sp { right: 0; bottom: 0; width: 72%; padding-bottom: 22px; border-color: rgba(var(--laag), .4); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 40px -12px rgba(var(--laag), .45); }
.c-venster__wat { padding: 18px 22px 0; font-size: 16px; line-height: 1.45; color: var(--wit); }
.c-venster__punten { display: grid; gap: 10px; margin-top: 14px; padding: 0 22px; }
.c-venster__punten li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--tekst-2); }
.c-venster__punten li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 10px 1px rgba(var(--laag), .6); }
.c-citaat--groot { margin: 0; max-width: 62rem; }
.sub--case .c-citaat--groot p { font-size: clamp(28px, 3vw, 44px); line-height: 1.2; letter-spacing: -.015em; max-width: 30ch; color: var(--wit); }
.c-los__onder { margin-top: 56px; }
.c-los__onder .s-tekst p { margin-top: 0; font-size: 16px; }

/* ── Anculus: de route van de Discovery ── */
.s-duo--route { align-items: center; }
.c-route { position: relative; display: grid; gap: 36px; padding-left: 44px; }
.c-route::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, rgba(var(--laag), .7), rgba(var(--laag), .15)); }
.c-route li { position: relative; }
.c-route li::before { content: ""; position: absolute; left: -44px; top: 7px; width: 15px; height: 15px; border-radius: 50%; background: #0a1430; box-shadow: inset 0 0 0 1px rgba(var(--laag), .6); }
.c-route li:last-child::before { background: rgb(var(--laag)); box-shadow: 0 0 0 4px rgba(var(--laag), .16), 0 0 18px 3px rgba(var(--laag), .5); }
.c-route h3 { font-family: var(--kop); font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; color: var(--wit); }
.c-route p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--tekst-2); max-width: 36em; }

/* ── ÆVO: het verhaal naast een stapel mails die op elkaar antwoorden ── */
.c-aevo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px 80px; align-items: center; }
.c-aevo__tekst p { margin-top: 18px; max-width: 36em; font-size: 17px; line-height: 1.55; color: var(--tekst-2); }
.c-aevo__tekst p.c-aevo__in { margin-top: 0; font-family: var(--kop); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.01em; color: var(--wit); }
.c-aevo .s-citaat { margin-top: 32px; }
.c-taf--post { min-height: 380px; }
.c-post { position: absolute; left: 0; right: 0; display: grid; gap: 10px; padding: 18px 20px 20px; border: 1px solid rgba(163, 176, 202, .2); border-radius: var(--r); background: linear-gradient(180deg, #0d1834, #081129); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.c-post b { font-size: 15px; font-weight: 600; color: var(--wit); }
.c-post i { display: block; height: 8px; border-radius: 4px; background: rgba(163, 176, 202, .16); }
.c-post--3 { top: 0; margin-inline: 12% 0; opacity: .45; transform: rotate(3deg); }
.c-post--2 { top: 96px; margin-inline: 5% 6%; opacity: .7; transform: rotate(-2deg); }
.c-post--1 { top: 196px; margin-inline: 0 12%; }
.c-post__bijlage { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(163, 176, 202, .25); font-size: 13px; color: var(--tekst-2); }
.c-post__bijlage svg { width: 14px; height: 14px; }

/* ÆVO: de meting als klok. Eerst draait de wijzer een half uur rond, daarna licht het stukje van nu op */
.c-klok { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px 88px; align-items: center; max-width: 1080px; margin-inline: auto; }
.c-klok__wijzerplaat { width: 100%; height: auto; overflow: visible; }
.c-klok .ring { fill: none; stroke: rgba(163, 176, 202, .22); stroke-width: 1; }
.c-klok .streep { stroke: rgba(163, 176, 202, .45); stroke-width: 1.2; }
.c-klok .streep--groot { stroke: rgba(245, 245, 247, .7); stroke-width: 1.6; }
.c-klok .eerst { fill: url(#ak-arcering); }
.c-klok .nu { fill: url(#ak-licht); filter: drop-shadow(0 0 8px rgba(94, 151, 255, .7)); }
.c-klok .wijzer { transform-box: view-box; transform-origin: 140px 140px; }
.c-klok .wijzer line { stroke-linecap: round; }
.c-klok .wijzer--eerst { transform: rotate(180deg); opacity: .4; }
.c-klok .wijzer--eerst line { stroke: var(--tekst-2); stroke-width: 1.5; }
.c-klok .wijzer--nu { transform: rotate(24deg); }
.c-klok .wijzer--nu line { stroke: var(--wit); stroke-width: 2; }
.c-klok .as { fill: var(--wit); }
/* eerst vult in ±450 ms, nu volgt direct: de eindstand staat er na ±950 ms */
.c-klok.is-in .eerst { animation: c-klok-in 450ms linear 150ms both; }
.c-klok.is-in .nu { animation: c-klok-in 300ms var(--erin) 600ms both; }
.c-klok.is-in .wijzer--eerst { animation: c-klok-eerst 450ms cubic-bezier(.45, 0, .55, 1) 150ms both, c-klok-dim 250ms 600ms both; }
.c-klok.is-in .wijzer--nu { animation: c-klok-nu 350ms var(--erin) 600ms both; }
.c-klok.is-in .rij--eerst { animation: c-klok-in 300ms var(--erin) 150ms both; }
.c-klok.is-in .rij--nu { animation: c-klok-in 300ms var(--erin) 600ms both; }
@keyframes c-klok-in { from { opacity: 0; } }
@keyframes c-klok-eerst { from { transform: rotate(0deg); } }
@keyframes c-klok-dim { from { opacity: 1; } }
@keyframes c-klok-nu { from { transform: rotate(0deg); opacity: 0; } 20% { opacity: 1; } }
.c-klok__kop { display: grid; gap: 18px; font: inherit; }
.c-klok .rij { display: grid; gap: 2px; }
.c-klok .rij > span { font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: .02em; color: var(--tekst-3); }
.c-klok .rij strong { font-family: var(--kop); font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; color: var(--wit); }
.c-klok .rij--eerst strong { color: var(--tekst-2); }
.c-klok .rij .neon { padding: 0 0 .05em; }
.c-klok .s-citaat { margin-top: 36px; }

/* ── ÆVO: wat er gebouwd is, met de Microsoft-producten erbij ── */
.c-bouw { display: grid; }
.c-bouw li { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24px; align-items: center; padding: 24px 0 20px; border-bottom: 1px solid var(--lijn); }
.c-bouw li:first-child { border-top: 1px solid var(--lijn); }
.c-bouw__logo { grid-row: 1 / 3; display: flex; align-items: center; gap: 8px; }
.c-bouw__logo img { width: 40px; height: 40px; }
.c-bouw b { align-self: end; font-family: var(--kop); font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.2; color: var(--wit); }
.c-bouw li > span:last-child { align-self: start; margin-top: 4px; font-size: 15px; color: var(--tekst-2); }

/* "Zo ging het": de inleiding links is het zwaartepunt (wit), de toelichting of vraag rechts begint op dezelfde lijn */
.sub--case .s-sectie--los .s-duo > .s-groot { color: var(--wit); }
.sub--case .s-duo > .s-vraag { margin-top: 0; padding-top: 10px; max-width: none; }

/* ── Breedtes ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .db-tegel { grid-template-columns: minmax(0, 1fr) 72px; }
  .db-tegel svg { width: 72px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* app, flow en register blijven naast elkaar; zonder de kolom "verantwoordelijke" past het register */
  .ir { grid-template-columns: 244px 204px minmax(0, 1fr); gap: 12px; --ir-kol: minmax(0, .9fr) minmax(0, 1.3fr) 56px 124px; }
  .ir__kop span:nth-child(3), .ir__wie { display: none; }
  /* de keten in twee rijen van twee: elke tegel houdt zijn tekst op een regel */
  .c-keten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
  .c-keten::before, .c-keten::after { display: none; }
  .c-keten li { min-height: 120px; }
  .ir__rij, .ir__kop { padding-inline: 12px; gap: 10px; }
}
@media (max-width: 900px) {
  .ir { grid-template-columns: 264px minmax(0, 1fr); }
  .ir__lijst { grid-column: 1 / -1; }
  .c-beeld__onder--naast { grid-template-columns: 1fr; }
  /* smal: elke sectie begint onder de kopbalk, zodat de eerste regel nooit onder het glas staat */
  .sub--case main > .s-sectie { padding-top: calc(var(--kop-h, 78px) + 24px); padding-bottom: 32px; }
}
@media (max-width: 900px) {
  .db__grafieken { grid-template-columns: 1fr; }
  .c-na { grid-template-columns: 1fr; }
  .c-na .s-citaat { grid-column: 1; }
  .c-keten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
  .c-keten::before, .c-keten::after { display: none; }
  .sub--case .s-open__binnen { padding-bottom: 104px; }
  /* aanraakdoelen op tablet en telefoon */
  .c-wissel button, .db__periode button, .tf__keus button { min-height: 44px; }
  /* smal: de nevels worden breder en schuiven naar de rand; open beelden blijven onder de kop en de titel weg */
  .c-nevel--open.c-nevel--poollicht-ver { left: 10vw; width: 90vw; height: 70.2vw; top: 0; object-position: 0 50%; }
  .c-nevel--moment.c-nevel--melkweg { width: 91.3vw; height: 45.4vw; top: 32%; object-position: 100% 50%; }
  .c-nevel--open.c-nevel--schemering { left: 0; width: 100vw; height: 36vw; top: auto; bottom: 6%; object-position: 30% 50%; }
  .c-nevel--open.c-nevel--melkweg { left: 8.1vw; width: 91.9vw; height: 51.4vw; top: 0; }
  .c-nevel--open.c-nevel--wolkendek { left: 0; width: 100vw; height: 34vw; top: 30%; object-position: 30% 50%; }
  .c-nevel--moment.c-nevel--wolkendek-ver { height: 19.4vw; object-position: 60% 50%; }
  .cm { grid-template-columns: 1fr; }
  .cm__bericht { margin-top: 0; }
  /* HEMA: tekst boven, het beeld eronder; de keten schuift over de onderrand van het Excel-blad */
  .c-hema { grid-template-columns: 1fr; gap: 40px; }
  .c-taf { min-height: 0; }
  .c-taf__vel { position: relative; width: 82%; height: 190px; }
  .c-keten.c-keten--stroom { position: relative; width: auto; max-width: 440px; margin: -64px 0 0 auto; }
  .c-fmi, .c-fmi--bouw { grid-template-columns: 1fr; gap: 40px; }
  .c-fmi__onder { columns: 1; margin-top: 32px; }
  .c-fmi__onder p + p { margin-top: 16px; }
  .c-taf--maand { max-width: 420px; }
  .c-taf--fmi { min-height: 0; }
  .c-venster--teams { position: relative; width: 70%; height: 150px; }
  .c-venster--sp { position: relative; width: auto; margin: -70px 0 0 12%; }
  .c-aevo { grid-template-columns: 1fr; gap: 40px; }
  .c-taf--post { min-height: 300px; max-width: 460px; }
  .c-post--2 { top: 80px; }
  .c-post--1 { top: 160px; }
  .c-klok { grid-template-columns: 1fr; justify-items: start; gap: 32px; }
  .c-klok__wijzerplaat { max-width: 260px; }
}
@media (max-width: 560px) {
  .sub--case .s-kader { padding: 28px 24px; }
  /* smal: de oplossingen onder elkaar, geen losse regel over */
  .c-oplos { flex-direction: column; gap: 0; }
  /* de opening past dan precies in een telefoonscherm van 844 hoog */
  .sub--case .s-open__binnen { padding-bottom: 96px; }
  /* stijl.css trekt het logo 3 px de kop in; op smal staat het dan 5 px van de rand */
  .sub--case .kop__merk:has(img.logo) { margin-block: 0; }
  .c-beeld { margin-top: 40px; margin-left: -8px; margin-right: -8px; }
  .c-beeld__kop { flex-wrap: wrap; }
  .pb__vlak { padding: 14px; }
  .pb__stand--was { inset: 14px; }
  .pb__waar, .pb__waar--ms { display: none; }
  .pb__tijd { display: none; }
  .db__bron { display: none; }
  .db__tegels { grid-template-columns: 1fr; gap: 8px; }
  .db-tegel { padding: 11px 14px 16px; grid-template-columns: minmax(0, 1fr) 88px; }
  .db-tegel svg { width: 88px; height: 34px; }
  .db-vlak { height: 140px; }
  .db-lijn .db-as span:nth-child(even) { display: none; }
  .xl__blad { grid-template-columns: 28px repeat(4, minmax(0, 1fr)); }
  .xl__blad > .x5, .xl__blad > .x6 { display: none; }
  /* kolomkoppen als "Einddatum" breken anders midden in het woord */
  .xl__blad > * { padding: 0 5px; font-size: 11px; overflow-wrap: normal; word-break: normal; }
  .c-na { margin-top: 48px; }
  .cm { --cm-kol: minmax(0, 1fr) auto; }
  .cm__kop span:nth-child(2) { display: none; }
  .cm__rij { padding: 8px 14px 12px; row-gap: 8px; }
  .cm__status { grid-row: 2; grid-column: 1; }
  .cm__datum { grid-row: 1; grid-column: 2; align-self: start; padding-top: 18px; }
  .kh { height: 300px; }
  .kh__hemel, .kh__lens-beeld .kh__hemel { inset: 20px 18px 24px 18px; }
  .kh__naam { display: none; }
  .kh__lens { width: 132px; height: 132px; }
  .ir { grid-template-columns: 1fr; --ir-kol: minmax(0, 1fr) 52px auto; }
  .ir__kop span:nth-child(2), .ir__kop span:nth-child(3), .ir__waar, .ir__wie { display: none; }
  .ir__rij { padding: 8px 14px; }
  .ir-was { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ir-mail { order: -1; }
  .tf { max-width: 320px; }
  .c-keten { grid-template-columns: 1fr; }
  .c-keten li { min-height: 0; }
  .c-keten--stroom .c-keten__hier { transform: none; }
  .c-taf__vel { width: 92%; height: 150px; }
  .c-taf__vel-wacht { top: 46px; bottom: auto; }
  /* ÆVO smal: twee mails in de stapel; de klok naast de meting, het citaat eronder */
  .c-taf--post { min-height: 214px; }
  .c-post--3 { display: none; }
  .c-post--2 { top: 0; }
  .c-post--1 { top: 74px; }
  .c-klok { grid-template-columns: 112px minmax(0, 1fr); gap: 24px 20px; align-items: center; }
  .c-klok__tekst { display: contents; }
  .c-klok .rij strong { font-size: 30px; }
  .c-klok__kop { gap: 10px; }
  .c-klok .s-citaat { grid-column: 1 / -1; margin-top: 4px; }
  .c-fmi, .c-fmi--bouw { gap: 28px; }
  .c-taf--maand { max-width: 244px; padding: 8px 0 34px; }
  .c-venster--teams { height: 96px; }
  .c-venster--teams .c-venster__lijst { padding-block: 14px; gap: 10px; }
  .c-venster--sp { margin: -60px 0 0 8%; }
  .c-bouw li { grid-template-columns: 1fr; row-gap: 10px; }
  .c-bouw__logo { grid-row: auto; }
  .c-bouw b { align-self: start; }
  .c-beeld__onder { display: grid; }
  .c-oplos { gap: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .pb__stand, .db-stip, .db-staaf, .db-staaf-nu, .db-staaf-as span.is-nu, .db-tegel::after, .db-wissel, .cm__stap > i::after, .cm__puls, .cm__bericht, .kh__punt, .kh__naam, .kh__lens, .kh__lens::after, .kh__lens-beeld, .kh__lens-naam, .pb[data-pb="aevo"], .pb[data-pb="aevo"]::before, .tf__waarde, .tf__melden > span, .ir__rij, .ir__rij.is-schuif, .ir__rij.is-nieuw.is-schuif { transition: none; }
  .pb.is-loopt .pb__live i::after, .pb.is-loopt .db-stip::after, .c-keten::after, .c-keten.c-keten--stroom::after, .c-klok.is-in .eerst, .c-klok.is-in .nu, .c-klok.is-in .wijzer, .c-klok.is-in .rij { animation: none; }
  .c-keten::after, .c-keten.c-keten--stroom::after { display: none; }
  /* de standwissel heeft eigen, sterkere regels; ook die zonder beweging */
  .pb[data-stand] .pb__stand--was, .pb[data-stand] .pb__stand--nu { transition: none; transform: none; }
}

/* ── FMI: het slot van het verhaal als één productbeeld ──
   Achter: een nevel en de baan uit de opening. Tussen: het dashboard, gedempt. Midden: het contract dat net is
   ondertekend, het enige lichte vlak. Voor: de melding dat de verlenging eraan komt. Maten in cqw, zodat het beeld
   op elke breedte dezelfde compositie houdt. */
.c-teken { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 56px; align-items: end; }
.c-teken__tekst .c-hst { margin-bottom: 24px; }
.sub--case .c-teken .c-citaat--groot p { max-width: 17ch; font-size: clamp(24px, 2.2vw, 32px); }
.ct { position: relative; margin: 0; container-type: inline-size; }
.ct__vak { position: relative; aspect-ratio: 10 / 9; }
.ct__nevel { position: absolute; left: -6%; top: -12%; width: 112%; height: 124%; max-width: none; object-fit: cover; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.ct__baan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(var(--laag), .3); stroke-width: 1; }
.ct__baan .ct__baan-ver { stroke: rgba(var(--laag), .16); stroke-dasharray: 1 6; stroke-linecap: round; }
.ct__dash {
  position: absolute; left: 0; top: 5%; width: 52%; padding: 3.6cqw; border: 1px solid rgba(163, 176, 202, .18); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(15, 27, 56, .94), rgba(7, 14, 34, .96)); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75);
  opacity: .66; transform: rotate(-4deg);
}
.ct__kop { display: flex; align-items: center; gap: 8px; font-size: clamp(11px, 2.1cqw, 13px); font-weight: 600; color: var(--tekst-2); }
.ct__kop svg { width: 14px; height: 14px; flex: none; }
.ct__dashbody { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 3.6cqw; align-items: center; margin-top: 3cqw; }
.ct__ring { width: 100%; height: auto; transform: rotate(-90deg); }
.ct__ring circle { fill: none; stroke-width: 9; }
.ct__ring .ct__ring-baan { stroke: rgba(163, 176, 202, .12); }
.ct__ring .ct__ring-loopt { stroke: rgba(var(--laag), .5); }
.ct__ring .ct__ring-binnen { stroke: rgb(var(--laag)); }
.ct__ring .ct__ring-nog { stroke: rgba(146, 104, 240, .55); }
.ct__lijnen { display: grid; }
.ct__lijnen li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.4cqw; align-items: center; padding: 1.2cqw 0; }
.ct__lijnen b { font-size: clamp(10px, 1.8cqw, 12px); font-weight: 600; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.ct__lijnen i { display: block; height: 4px; border-radius: 2px; background: rgba(163, 176, 202, .28); transform-origin: left; transform: scaleX(var(--w)); }
.ct__lijnen .is-hier b { color: var(--wit); }
.ct__lijnen .is-hier i { background: rgb(var(--laag)); box-shadow: 0 0 8px rgba(var(--laag), .6); }
.ct__doc {
  position: absolute; left: 38%; top: 12%; width: 44%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 3cqw; padding: 4.2cqw 4cqw;
  border: 1px solid rgba(var(--laag), .5); border-radius: var(--r);
  background: radial-gradient(120% 60% at 30% 0%, rgba(var(--laag), .16), rgba(var(--laag), 0) 62%), linear-gradient(180deg, #152a55, #0b1838);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(var(--laag), .55), 0 0 70px -14px rgba(var(--laag), .3);
  transform: rotate(2.5deg);
}
.ct__dockop { font-size: clamp(12px, 2.4cqw, 15px); font-weight: 600; line-height: 1.3; color: var(--wit); }
.ct__dockop b { display: block; margin-bottom: 2px; font-size: clamp(10px, 1.9cqw, 12px); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.ct__regels { display: grid; gap: 1.9cqw; }
.ct__regels i { display: block; height: 3px; border-radius: 2px; background: rgba(163, 176, 202, .2); }
.ct__hand { display: block; margin-top: auto; overflow: hidden; padding-bottom: .8cqw; border-bottom: 1px solid rgba(var(--laag), .5); }
.ct__hand > span, .ct__hand svg { display: block; }
.ct__hand svg { width: 82%; height: auto; overflow: visible; }
.ct__hand path { fill: none; stroke: #eaf7fd; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(var(--laag), .8)); }
.ct__getekend { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(11px, 2.1cqw, 13px); font-weight: 600; color: rgb(var(--laag)); }
.ct__getekend svg { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 0 4px rgba(var(--laag), .7)); }
.ct__melding {
  position: absolute; left: 8%; top: 72%; width: 50%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.6cqw; align-items: start;
  padding: 3cqw 3.4cqw; border: 1px solid rgba(var(--laag), .28); border-radius: var(--r); color: rgb(var(--laag));
  background: linear-gradient(180deg, #111f42, #0a1430); box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(4, 10, 27, .5);
}
.ct__melding svg { width: 20px; height: 20px; }
.ct__melding b { display: block; font-size: clamp(12px, 2.3cqw, 14px); font-weight: 600; color: var(--wit); }
.ct__melding em { display: block; margin-top: 3px; font-style: normal; font-size: clamp(11px, 2.1cqw, 13px); color: var(--tekst-2); }
.ct .pb__noot { margin-top: 12px; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .ct__doc, .ct__melding, .ct__getekend { transition: opacity 340ms var(--erin), transform 340ms var(--erin); }
  .ct__hand > span, .ct__hand svg { transition: transform 340ms var(--erin) 360ms; }
  .ct__getekend { transition-delay: 640ms; }
  .ct__melding { transition-delay: 760ms; }
  .js .ct:not(.is-in) .ct__doc { opacity: 0; transform: translate3d(0, 18px, 0) rotate(2.5deg); }
  .js .ct:not(.is-in) .ct__hand > span { transform: translate3d(-100%, 0, 0); }
  .js .ct:not(.is-in) .ct__hand svg { transform: translate3d(100%, 0, 0); }
  .js .ct:not(.is-in) .ct__getekend { opacity: 0; }
  .js .ct:not(.is-in) .ct__melding { opacity: 0; transform: translate3d(0, 14px, 0); }
}

/* ── ÆVO: het register als vlak in de diepte, met een afwijking die binnenkomt ──
   Achter: de melkweg langs de horizon van het vlak. Tussen: het register in SharePoint, gedempt en schuin weggelegd.
   Midden: een lichtstraal en de nieuwe afwijking, het enige lichte vlak, rechtop boven de vrije plek in de lijst. */
.c-sectie--register { overflow: hidden; }
.c-reg { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 64px; align-items: center; }
.c-reg__tekst .s-tekst { margin-top: 20px; }
.c-bouw--klein { margin-top: 36px; }
.c-bouw--klein li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 14px 0 12px; }
.c-bouw--klein .c-bouw__logo { gap: 6px; }
.c-bouw--klein .c-bouw__logo img { width: 28px; height: 28px; }
.c-bouw--klein b { font-size: 18px; }
.c-bouw--klein li > span:last-child { margin-top: 2px; font-size: 14px; }
.rg { position: relative; margin: 0; container-type: inline-size; }
.rg__vak { position: relative; aspect-ratio: 7 / 6.6; }
/* de melkweg ligt breed en vol achter de horizon van het register; uitgesneden uit het midden, zodat de band dik is */
.rg__nevel { position: absolute; left: -20%; top: -10%; width: 120%; height: 84%; max-width: none; object-fit: cover; object-position: 58% 50%; opacity: .78; pointer-events: none; transform: rotate(-14deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, transparent 100%); }
.rg__vlak {
  position: absolute; left: 2%; right: 0; top: 22%; height: 74%; padding: 3cqw 3.6cqw; border: 1px solid rgba(var(--laag), .34); border-radius: var(--r);
  background: radial-gradient(70% 50% at 50% 0%, rgba(var(--laag), .14), rgba(var(--laag), 0) 70%), linear-gradient(180deg, rgba(20, 38, 82, .9), rgba(14, 28, 64, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(4, 10, 27, .5), 0 60px 90px -40px rgba(var(--laag), .45);
  transform: perspective(1200px) rotateX(46deg) rotateZ(-8deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 60%, rgba(0, 0, 0, .7) 100%); mask-image: linear-gradient(0deg, #000 60%, rgba(0, 0, 0, .7) 100%);
}
.rg__vlakkop { display: flex; align-items: center; gap: 10px; padding-bottom: 2cqw; border-bottom: 1px solid rgba(163, 176, 202, .2); font-size: clamp(12px, 2.2cqw, 17px); font-weight: 600; color: var(--wit); }
.rg__vlakkop img { width: 16px; height: 16px; }
.rg__rijen li { display: grid; grid-template-columns: 7em minmax(0, 1fr) 6em; gap: 3cqw; align-items: center; height: 7cqw; border-bottom: 1px solid rgba(163, 176, 202, .14); font-size: clamp(11px, 2cqw, 15px); color: var(--tekst-2); }
.rg__rijen b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--wit); }
.rg__rijen i { display: block; height: 5px; border-radius: 3px; background: rgba(163, 176, 202, .3); }
.rg__rijen span { text-align: right; }
/* de vrije plek bovenaan de lijst, waar de nieuwe afwijking landt */
.rg__rijen .rg__vrij > * { display: none; }
.rg__rijen .rg__vrij { border-radius: 2px; background: rgba(var(--laag), .24); box-shadow: inset 0 0 0 1px rgba(var(--laag), .8), 0 0 34px 4px rgba(var(--laag), .55); }
/* de landing: een lichtplas op het register precies onder de kaart */
.rg__straal { position: absolute; left: 10%; top: 50%; width: 80%; height: 22%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--laag), .42), rgba(var(--laag), .14) 55%, rgba(var(--laag), 0));
  transform: rotate(-8deg); }
/* de kaart staat rechts naast en boven de kop van het register, zodat "Afwijkingsregister" heel leesbaar blijft */
.rg__kaart {
  position: absolute; left: 28.5%; top: 34%; width: 54%; display: grid; gap: 1.6cqw; padding: 2.8cqw 3cqw;
  border: 1px solid rgba(var(--laag), .55); border-radius: var(--r);
  background: radial-gradient(120% 80% at 20% 0%, rgba(var(--laag), .2), rgba(var(--laag), 0) 60%), linear-gradient(180deg, #16295a, #0c1a3e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 34px 60px -24px rgba(0, 0, 0, .8), 0 0 60px -12px rgba(var(--laag), .45);
}
.rg__kaartkop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rg__kaartkop b { font-size: clamp(11px, 1.8cqw, 13px); font-weight: 600; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.rg__nieuw { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(10px, 1.7cqw, 12px); font-weight: 600; color: rgb(var(--laag)); }
.rg__nieuw::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--laag)); box-shadow: 0 0 8px 1px rgba(var(--laag), .8); }
.rg__wat { font-family: var(--kop); font-size: clamp(15px, 2.6cqw, 20px); font-weight: 500; line-height: 1.2; color: var(--wit); }
.rg__velden { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3cqw; margin: .6cqw 0 0; padding-top: 1.6cqw; border-top: 1px solid rgba(163, 176, 202, .14); }
.rg__velden dt { font-size: clamp(10px, 1.6cqw, 12px); color: var(--tekst-3); white-space: nowrap; }
.rg__velden dd { margin: 2px 0 0; font-size: clamp(11px, 1.8cqw, 13px); color: var(--wit); }
.rg .pb__noot { margin-top: 12px; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .rg__kaart { transition: opacity 340ms var(--erin), transform 340ms var(--erin); transition-delay: 300ms; }
  .rg__straal { transition: opacity 300ms var(--erin) 120ms; }
  /* de gloed gaat in één keer aan, op hetzelfde moment: een invallende wazige gloed in het gemaskeerde 3D-vlak liet elk frame het hele vlak opnieuw tekenen (hapering) */
  .rg__rijen .rg__vrij { transition: opacity 0s linear 560ms; }
  .js .rg:not(.is-in) .rg__kaart { opacity: 0; transform: translate3d(0, -32px, 0); }
  .js .rg:not(.is-in) .rg__straal, .js .rg:not(.is-in) .rg__rijen .rg__vrij { opacity: 0; }
}
@media (min-width: 901px) {
  /* het beeld staat links en groot, het citaat rechts op de grondlijn: anders dan het eerste scherm, waar het citaat leidt */
  .c-teken__tekst { grid-column: 2; grid-row: 1; padding-bottom: 13%; }
  .c-teken .ct { grid-column: 1; grid-row: 1; }
}
@media (max-width: 900px) {
  .c-teken, .c-reg { grid-template-columns: 1fr; gap: 40px; }
  .ct { max-width: 560px; }
  .rg { max-width: 640px; }
}
@media (max-width: 560px) {
  .c-teken, .c-reg { gap: 24px; }
  .c-teken__tekst .c-hst { margin-bottom: 16px; }
  .sub--case .c-teken .c-citaat--groot p { max-width: none; font-size: 23px; }
  .c-teken .c-citaat--groot footer { margin-top: 12px; }
  .c-teken { gap: 8px; }
  /* beide schermen lopen door uit het moment ervoor; minder aanloop onder de kop */
  .sub--case main > .c-moment--teken, .sub--case main > .c-sectie--register { padding-top: calc(var(--kop-h, 78px) - 8px); }
  .sub--case main > .c-moment--teken { padding-bottom: 0; }
  .ct__vak { aspect-ratio: 10 / 7.5; }
  .ct__dash { width: 54%; top: 2%; }
  .ct__doc { left: 44%; top: 4%; width: 52%; }
  /* smal: de melding eindigt voor het vinkje en het begin van de handtekening */
  .ct__melding { left: 0; width: 45%; top: 62%; }
  .rg__vak { aspect-ratio: 7 / 4.6; }
  .rg__nevel { left: -22%; width: 140%; }
  .ct .pb__noot, .rg .pb__noot { margin-top: 6px; }
  /* smal: de kaart hoger en het register iets lager, zodat de kop van het register vrij onder de kaart staat */
  .rg__kaart { left: 10%; width: 80%; top: 6%; }
  .rg__vlak { top: 28%; height: 70%; }
  .rg__rijen li { grid-template-columns: 6em minmax(0, 1fr); }
  .rg__rijen span { display: none; }
  .rg__rijen li:nth-child(n+6) { display: none; }
  .c-reg__tekst .s-tekst { margin-top: 14px; }
  .c-bouw--klein { margin-top: 24px; }
  .c-bouw--klein li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 0; padding: 12px 0 10px; }
  .c-bouw--klein .c-bouw__logo { grid-row: 1 / 3; }
  .c-bouw--klein b { align-self: end; }
  .c-bouw--klein .c-bouw__logo img { width: 24px; height: 24px; }
  .c-bouw--klein b { font-size: 17px; }
}