/* =====================================================================
   Dienstenblok (punt B4) - stijl
   ---------------------------------------------------------------------
   Alles hangt aan variabelen met het voorvoegsel --db-. Een palet zet
   alleen die variabelen om; geen enkele regel hieronder noemt een kleur
   rechtstreeks. Daardoor wisselt een klik het hele blok in een keer.
   Uitzondering met opzet: de kleurstalen op de vier knopjes. Die moeten
   het palet tonen waar je naartoe gaat, dus die kleuren staan los
   vastgelegd in --p1- tot en met --p4-, eenmalig bovenin.
   Contrast: elke combinatie die tekst draagt haalt minimaal 4,5 op 1
   (gemeten, zie het rapport). De gloedkleur haalt dat niet overal en
   wordt daarom nooit voor tekst gebruikt, alleen voor lijnen en vlakken.
   ===================================================================== */
.dienstenblok,
.dienstenblok *,
.dienstenblok *::before,
.dienstenblok *::after {
  box-sizing: border-box;
}
.dienstenblok {
  /* --- stalen voor de knopjes: vast, want ze tonen de andere paletten --- */
  --p1-bg: #ffffff;   --p1-accent: #0091ff;  --p1-gloed: #ff0099;
  --p2-bg: #0b0e13;   --p2-accent: #37e6b0;  --p2-gloed: #7b5cff;
  --p3-bg: #f1f1ef;   --p3-accent: #1a1a18;  --p3-gloed: #7a7a72;
  --p4-bg: #fff4ee;   --p4-accent: #ff5a3c;  --p4-gloed: #00a6a0;
  /* --- maten en ritme: gelijk voor alle paletten --- */
  --db-ruimte-1: 0.5rem;
  --db-ruimte-2: 1rem;
  --db-ruimte-3: 1.5rem;
  --db-ruimte-4: 2rem;
  --db-gat: clamp(1rem, 1.5vw, 1.75rem);
  --db-duur: 0.45s;
  --db-soepel: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* --- de beeldtaal van clarixagent.com, hier in drie variabelen ---
     Op de home komt de identiteit uit drie dingen: het verloop blauw naar
     paars naar magenta dat over het woordmerk loopt, een raster van kleine
     afgeronde vierkantjes dat alleen oplicht waar de muis is, en de kleurlijn
     onder de kop. Die drie komen hieronder terug in de scenes.
     Het verloop is standaard opgebouwd uit het accent en de gloed van het
     palet zelf. Zo werkt hetzelfde element in Nacht (mint naar paars), in
     Stil (grafiet naar grijs, dus geen kleur) en in Zomer (koraal naar teal).
     Palet 1 zet er de volledige reeks van de site overheen; zie daar. */
  --db-verloop: linear-gradient(90deg, var(--db-accent), var(--db-gloed));
  --db-verloop-v: linear-gradient(180deg, var(--db-accent), var(--db-gloed));
  /* De nevel: een kleurvlek die naar niets uitloopt, zoals de blob op de home
     die het raster laat oplichten. Elke scene zet zelf waar hij staat met
     --db-nevel-x en --db-nevel-y, altijd weg bij de tekst vandaan.
     LET OP, hier ging het een keer mis: alleen de KLEURSTOPS staan in deze
     variabele, niet de hele radial-gradient. Een var() binnen een custom
     property wordt ingevuld op het element waar die property is opgeschreven,
     niet waar hij gebruikt wordt. Zat de plaatsing hierin, dan las de browser
     --db-nevel-x op .dienstenblok (leeg, dus de standaardwaarde) en deed geen
     enkele scene-instelling nog iets. Gemeten op de afdruk van kaart 2, waar
     de vlek rechtsboven bleef staan terwijl hij linksonder hoorde. */
  --db-nevel-stops: var(--db-accent) 0%, var(--db-gloed) 42%, transparent 72%;
  /* Het raster als masker: een tegel van 16 px met een afgerond vierkantje van
     5 px, dezelfde vorm als de shader op de home (een vierkantje met een ronde
     hoek per rastercel). Inline SVG, dus er wordt niets van internet geladen.
     Eerste poging was een tegel van 14 met een vierkant van 7: op de afdruk
     van 3440 px was dat behang in plaats van een hint. IJler en zwakker. */
  --db-raster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='5.5' y='5.5' width='5' height='5' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
  --db-raster-kracht: 0.09;
  /* Dekking van de kleurlijn onder elke scene, gelijk aan .kleurlijn in
     stijl.css. Palet 3 zet hem lager: daar is het verloop grafiet naar grijs,
     en op 0,55 werd dat een dikke grijze streep in een palet dat juist om zijn
     nauwelijks zichtbare haarlijnen bestaat. */
  --db-kleurlijn-dekking: 0.55;
  /* Waar de muisaanwijzer in scene 01 blijft staan: het midden van de knop,
     in procenten van het browservenster. Staat als variabele omdat de knop op
     een ultrabrede kaart naar de rechterrand verhuist en de aanwijzer dan mee
     moet; zie "ultrabreed" onderaan. */
  --db-knop-x: 76%;
  /* De basisbreedte van een kaart. Staat hier als variabele omdat zowel de
     breedte van de kaart als de hoogtegrens van de scene eraan hangt; zie
     "schermmaten" onderaan. */
  --db-kaart-basis: 860px;
  position: relative;
  isolation: isolate;
  /* Geen eigen achtergrond meer op de sectie. Ali, 25 aug 2026: "al deze blocks
     staan in een soort venster en dat hele venster verandert ook mee, dus die
     is wit. Ik wil dat je dat venster weghaalt en dat je gewoon echt
     daadwerkelijk die block ziet."
     De kaarten houden hun eigen kleur en veranderen nog steeds mee met het
     palet; alleen het vlak eromheen is weg, zodat de kaarten op de pagina
     zelf staan. Wil je het venster terug: zet hier weer background:
     var(--db-bg). */
  background: transparent;
  color: var(--db-ink);
  font-family: var(--db-font);
  font-weight: var(--db-gewicht-tekst);
  letter-spacing: var(--db-spatiering);
  line-height: 1.6;
  /* Het omzetten van een palet gaat met een korte overgang, zodat de sprong
     niet als een flits aankomt. Alleen kleur, geen beweging. */
  transition: background-color var(--db-duur) var(--db-soepel),
              color var(--db-duur) var(--db-soepel);
}
/* ---------- Palet 1: Helder. Het huidige palet van clarixagent.com ---------- */
.dienstenblok[data-palet="1"] {
  --db-bg: #ffffff;
  --db-vlak: #f6fafe;
  --db-vlak-2: #ffffff;
  --db-ink: #000000;
  --db-ink-zacht: #46525e;
  --db-accent: #0091ff;
  --db-accent-tekst: #0069bd;   /* donkerder, alleen waar accent tekst is */
  --db-op-accent: #001325;      /* tekst op een accentvlak */
  --db-gloed: #ff0099;
  --db-lijn: rgba(0, 0, 0, 0.10);
  --db-lijn-sterk: rgba(0, 0, 0, 0.24);
  --db-font: 'Sarabun', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --db-font-label: 'Sarabun', ui-sans-serif, system-ui, sans-serif;
  --db-gewicht-titel: 200;
  --db-gewicht-tekst: 400;
  --db-spatiering: -0.01em;
  --db-rond: 2.5rem;            /* pillen */
  --db-rond-kaart: 1.75rem;
  --db-rond-klein: 0.75rem;
  --db-schaduw: 0 1px 2px rgba(0, 0, 0, 0.04);
  /* De volledige reeks van clarixagent.com: blauw, cyaan, paars, magenta.
     Letterlijk dezelfde vier kleuren als .kleurlijn in stijl.css en als het
     verloop over het woordmerk op de home. Alleen palet 1 krijgt deze reeks;
     de andere drie houden hun eigen twee kleuren. */
  --db-verloop: linear-gradient(90deg, #0091ff 0%, #00aaff 26%, #8000ff 64%, #ff0099 100%);
  --db-verloop-v: linear-gradient(180deg, #0091ff 0%, #00aaff 26%, #8000ff 64%, #ff0099 100%);
  --db-nevel-stops: #0091ff 0%, #8000ff 38%, #ff0099 58%, transparent 74%;
}
/* ---------- Palet 2: Nacht. Donker, technisch, monospace labels ---------- */
.dienstenblok[data-palet="2"] {
  --db-bg: #0b0e13;
  --db-vlak: #151b24;
  --db-vlak-2: #1c242f;
  --db-ink: #eef3f8;
  --db-ink-zacht: #9aa8b8;
  --db-accent: #37e6b0;
  --db-accent-tekst: #37e6b0;
  --db-op-accent: #06140f;
  --db-gloed: #7b5cff;
  --db-lijn: rgba(255, 255, 255, 0.12);
  --db-lijn-sterk: rgba(255, 255, 255, 0.30);
  --db-font: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --db-font-label: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --db-gewicht-titel: 300;
  --db-gewicht-tekst: 400;
  --db-spatiering: 0;
  --db-rond: 0.5rem;
  --db-rond-kaart: 0.5rem;
  --db-rond-klein: 0.25rem;
  --db-schaduw: 0 0 0 1px rgba(255, 255, 255, 0.04);
  /* Op een donkere ondergrond verdwijnt het raster bij 0,09, dus iets sterker.
     Niet sterker dan 0,12: bij 0,16 zakte het contrast van .db-kpi-label en
     .db-bandtekst (beide --db-ink-zacht) naar 4,45 op een rastervierkantje
     midden in de nevel, en de eis is 4,5. Gemeten met contrast-scenes.mjs. */
  --db-raster-kracht: 0.12;
}
/* ---------- Palet 3: Stil. Minimaal: grijs vlak, witte kaarten, geen kleur ----------
   Hier is alles weggehaald wat niet nodig is: geen accentkleur, geen schaduw,
   bijna geen ronding, een hairline die je pas ziet als je hem zoekt. Wat
   overblijft is ruimte en zwarte tekst.
   De accentkleur is met opzet de inktkleur zelf. Daardoor blijft elk gevuld
   vlak (de knop in de browser, de hoogste staaf, de antwoordbubbel) een rustig
   grafietvlak in plaats van een kleurvlek, en klopt de contrasteis vanzelf. */
.dienstenblok[data-palet="3"] {
  --db-bg: #f1f1ef;
  --db-vlak: #ffffff;
  --db-vlak-2: #f7f7f5;
  --db-ink: #1a1a18;
  --db-ink-zacht: #5c5c56;
  --db-accent: #1a1a18;
  --db-accent-tekst: #1a1a18;
  --db-op-accent: #f7f7f5;
  --db-gloed: #7a7a72;          /* alleen lijnen: de trendlijn en de belring */
  --db-lijn: rgba(26, 26, 24, 0.09);
  --db-lijn-sterk: rgba(26, 26, 24, 0.26);
  /* Een neutrale grotesk, niet de systeemletter: dat is het enige verschil met
     palet 1 dat je op een afdruk ook echt ziet. */
  --db-font: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --db-font-label: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif;
  --db-gewicht-titel: 400;
  --db-gewicht-tekst: 400;
  --db-spatiering: -0.02em;
  --db-rond: 0.25rem;
  --db-rond-kaart: 0.125rem;
  --db-rond-klein: 0.125rem;
  --db-schaduw: none;
  /* Stil is het palet zonder kleur. Het raster mag er zijn, maar net op de
     grens van zichtbaar: sterker en het wordt een decoratie, en dat is precies
     wat hier niet hoort. */
  --db-raster-kracht: 0.06;
  --db-kleurlijn-dekking: 0.28;  /* zo zwaar als de haarlijn die hier hoorde */
}
/* ---------- Palet 4: Zomer. Warm, rond, speels zonder druk te worden ----------
   Het plezier zit in drie dingen en verder nergens in: een warme blush als
   ondergrond, koraal als accent met een teal lijn ertegenaan, en rondingen die
   overal een slag ruimer zijn (kaarten 2rem, bubbels 0,9rem).
   Bewust niet: extra beweging, meer dan twee kleuren, of een schreeuwende
   schaduw. De schaduw is een zachte warme afdruk onder de kaart, meer niet. */
.dienstenblok[data-palet="4"] {
  --db-bg: #fff4ee;
  --db-vlak: #ffffff;
  --db-vlak-2: #ffe9dd;
  --db-ink: #2b1512;
  --db-ink-zacht: #6f4a3e;
  --db-accent: #ff5a3c;
  --db-accent-tekst: #b53518;   /* donkerder koraal, alleen waar accent tekst is */
  --db-op-accent: #3a1207;      /* donkere tekst op koraal, niet wit: dat haalt 4,5 niet */
  --db-gloed: #00a6a0;
  --db-lijn: rgba(43, 21, 18, 0.12);
  --db-lijn-sterk: rgba(43, 21, 18, 0.30);
  /* Een ronde systeemletter waar die bestaat; anders gewoon de systeemletter.
     Er wordt niets van internet geladen, dus dit blijft een keuze uit wat er al
     op de machine staat. */
  --db-font: ui-rounded, "SF Pro Rounded", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --db-font-label: ui-rounded, "SF Pro Rounded", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --db-gewicht-titel: 600;
  --db-gewicht-tekst: 400;
  --db-spatiering: -0.01em;
  --db-rond: 2.5rem;
  --db-rond-kaart: 2rem;
  --db-rond-klein: 0.9rem;
  --db-schaduw: 0 10px 24px -14px rgba(43, 21, 18, 0.35);
  --db-raster-kracht: 0.10;
}
/* =====================  raamwerk  ===================== */
/* De breedte van een kaart, als variabele omdat er drie dingen aan hangen: de
   kaart zelf, de voet met de paletknoppen, en de zijmarge van de paginakop
   (titel, kleurlijn, intro) die met de kaarten mee naar het midden schuift.
   Hij staat op twee plekken: op .pagina voor de site, en op .dienstenblok voor
   demo.html, dat geen .pagina heeft. Beide zetten dezelfde waarde, dus welke
   van de twee wint maakt niet uit.
   LET OP: de 100% hierin wordt pas ingevuld waar de variabele GEBRUIKT wordt,
   niet waar hij staat. Bij .db-kaart is dat de breedte van .db-rooster, bij de
   paginakop de breedte van .pagina; dat zijn dezelfde pixels, dus de kaart en
   de kop komen op dezelfde lijn uit.
   Gemeten waarden:
     390 px  -> 360 px (de kaart vult de kolom, marge 0)
     1440 px -> 860 px  2560 px -> 860 px   3440 px -> 1189 px
   De factor 0,48 is net laag genoeg dat de ondergrens van 860 px wint tot aan
   2600 px, precies de grens waar stijl.css de paginabak laat meegroeien.
   De fallback 82rem is voor demo.html, dat stijl.css niet inlaadt: zonder
   fallback is de hele regel ongeldig en heeft de kaart geen maximum meer.
   De basismaat staat hier NOG een keer, en dat moet: op .pagina bestaat
   --db-kaart-basis niet (die hoort bij .dienstenblok), en een var() die
   nergens naar wijst maakt de hele berekening ongeldig. De marge van de titel
   werd daardoor stilletjes 0 en de kop bleef links staan. Gemeten 25 aug. */
.pagina:has(.dienstenblok),
.dienstenblok {
  --db-kaart-basis: 860px;
  --db-kaart-breedte: max(var(--db-kaart-basis), min(100%, calc(var(--pg-bak, 82rem) * 0.48)));
}
/* De kop van de pagina schuift mee met de gecentreerde kaarten. De tekst zelf
   blijft links uitgelijnd; alleen de kolom waarin hij staat verschuift, zodat
   de titel op dezelfde x begint als de kaarten eronder. Op 3440 px is dat
   644 px naar rechts, op 1440 px 62 px, op een telefoon 0 (daar is de kaart
   even breed als de kolom).
   Waarom niet gewoon text-align: center: de rest van de site lijnt alles links
   uit, en een gecentreerde titel op twee van de acht pagina's is geen keuze
   maar een uitglijder. */
.pagina:has(.dienstenblok) > .pagina-label,
.pagina:has(.dienstenblok) > .pagina-titel,
.pagina:has(.dienstenblok) > .kleurlijn,
.pagina:has(.dienstenblok) > .pagina-intro {
  margin-left: max(0px, calc((100% - var(--db-kaart-breedte)) / 2));
}
.db-binnen {
  /* Geen eigen breedte meer: het blok volgt de pagina waar het in staat.
     Met max-width 1560px binnen een pagina van 1749px sprong het blok 94 px
     naar binnen ten opzichte van de kop erboven. In de losse demo staat het
     blok alleen op de pagina en zorgt demo.html zelf voor de marge. */
  max-width: none;
  margin: 0;
  /* Zijmarge weg sinds het venster verdween: die hoorde bij het gekleurde vlak
     en zette de kaarten anders nog eens 4 rem naar binnen ten opzichte van de
     rest van de pagina. Boven en onder blijft de ruimte staan. */
  padding: clamp(3rem, 5vw, 6.5rem) 0;
}
.db-kop {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}
.db-label {
  margin: 0 0 var(--db-ruimte-2);
  font-family: var(--db-font-label);
  font-size: clamp(11px, 0.75rem, 14px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-accent-tekst);
}
.db-titel {
  margin: 0 0 var(--db-ruimte-3);
  font-size: clamp(30px, 3.6vw, 3.5rem);
  font-weight: var(--db-gewicht-titel);
  line-height: 1.08;
  letter-spacing: var(--db-spatiering);
}
.db-intro {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(15px, 1.0625rem, 19px);
  color: var(--db-ink-zacht);
}
/* Vijf kaarten. Onder 760: een kolom. Daarboven: een raster van zes kolommen,
   zodat 5 kaarten netjes verdeeld raken (3 + 2 op breed, 2 + 2 + 1 daaronder)
   in plaats van een gat aan het eind. */
.db-rooster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--db-gat);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Vijf kaarten onder elkaar, allemaal even groot. Ali, 25 aug 2026.
   Hiervoor stonden ze in een raster van zes kolommen waarin kaart 1 tot 3
   smaller waren dan 4 en 5, en dat gaf vijf verschillende maten. Nu een kolom,
   dus elke dienst krijgt evenveel ruimte en de animatie erin is op elke kaart
   even groot. */
.db-rooster { grid-template-columns: 1fr; }
.db-kaart {
  grid-column: 1 / -1;
  /* Onder elkaar en even groot, maar niet over de volle breedte: op 2560 px
     werd een kaart anders 1080 px breed en blies de animatie erin zichzelf op
     tot het formaat van een poster. 860 px is ongeveer de breedte die de kaart
     in het oude raster van drie kolommen ook had, dus de animaties zijn
     getekend voor die maat.
     ULTRABREED, 25 aug 2026. Op 3440 px stond die kaart van 860 px in een bak
     van 2327 px werkbreedte: 1467 px leeg naast de kaart, en dat was Ali's
     punt. De breedte hangt nu aan de paginabak (--pg-bak uit stijl.css) in
     plaats van aan een tweede vast getal, zodat hij meeschaalt als die bak
     ooit weer verandert. Gemeten:
       390 px  -> 360 px   (ongewijzigd, de kaart vult de kolom)
       1440 px -> 860 px   (ongewijzigd)
       2560 px -> 860 px   (ongewijzigd: 82rem * 0,48 = 840, dus de bodem wint)
       3440 px -> 1189 px  (2476,8 * 0,48)
     De factor 0,48 is met opzet net laag genoeg dat de ondergrens van 860 px
     wint tot aan 2600 px, precies de grens waar stijl.css de bak laat
     meegroeien. Daaronder verandert er dus letterlijk niets.
     De hoogte van de scene groeit NIET mee; die zit vast op de laptopmaat
     (zie max-height op .db-scene). De kaart wordt breder, geen poster.
     De fallback 82rem is voor demo.html, dat stijl.css niet inlaadt: zonder
     fallback is de hele regel ongeldig en valt de kaart terug op geen
     maximum. */
  max-width: var(--db-kaart-breedte);
  width: 100%;
  /* GECENTREERD. Ali, 25 aug 2026: "ze staan een beetje links van het scherm,
     dus ze mogen wel gecentreerd staan, die punten. Ik denk dat dat mooier
     staat op zo'n scherm."
     Hier stond het omgekeerde: links uitlijnen, omdat gecentreerde kaarten
     350 px verder naar rechts begonnen dan de kop erboven. Die eis vervalt
     hiermee, maar de reden erachter blijft gelden. Daarom schuift de kop van
     de pagina mee: zie de regel bij .pagina-titel verderop. Kaarten in het
     midden onder een titel die links blijft staan, oogt scheef. */
  margin-inline: auto;
}
.db-kaart {
  display: flex;
  flex-direction: column;
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn);
  border-radius: var(--db-rond-kaart);
  box-shadow: var(--db-schaduw);
  overflow: hidden;
  transition: background-color var(--db-duur) var(--db-soepel),
              border-color var(--db-duur) var(--db-soepel),
              border-radius var(--db-duur) var(--db-soepel);
}
/* Geen hairline meer tussen beeld en tekst: die rol heeft de kleurlijn
   onderaan de scene overgenomen (.db-scene::after). Twee lijnen op elkaar
   lazen als een randje dat er per ongeluk stond. */
.db-tekst {
  padding: clamp(1.125rem, 1.6vw, 1.75rem);
}
.db-nummer {
  margin: 0 0 var(--db-ruimte-1);
  font-family: var(--db-font-label);
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.16em;
  color: var(--db-ink-zacht);
}
.db-kaarttitel {
  margin: 0 0 var(--db-ruimte-1);
  font-size: clamp(18px, 1.25rem, 25px);
  font-weight: var(--db-gewicht-titel);
  line-height: 1.2;
  letter-spacing: var(--db-spatiering);
}
/* Palet 1 en 2 zetten titels dun neer; op kaartniveau is dat op kleine maten
   te fragiel, dus daar minstens 300 respectievelijk 400. */
.dienstenblok[data-palet="1"] .db-kaarttitel { font-weight: 300; }
.dienstenblok[data-palet="2"] .db-kaarttitel { font-weight: 500; }
.db-uitleg {
  margin: 0;
  font-size: clamp(14px, 0.9375rem, 17px);
  line-height: 1.55;
  color: var(--db-ink-zacht);
}
/* =====================  het toneel per dienst  ===================== */
.db-scene {
  position: relative;
  /* Eigen stapelcontext, zodat het raster hieronder met z-index -1 boven de
     achtergrond van de scene komt maar onder alles wat erin staat. Zonder
     isolatie zakt het door de kaart heen en zie je er niets van. */
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  /* Bovengrens op de hoogte, precies de hoogte die de scene op een laptop
     heeft (860 px breed, 16:9). Daardoor groeit een kaart op een ultrabreed
     scherm alleen in de breedte en wordt het beeld een bredere band in plaats
     van een poster. Zie "schermmaten" onderaan. */
  max-height: calc(var(--db-kaart-basis) * 9 / 16);
  background: var(--db-vlak-2);
  overflow: hidden;
  font-family: var(--db-font-label);
  transition: background-color var(--db-duur) var(--db-soepel);
}
/* Het raster van afgeronde vierkantjes, opgelicht door een kleurnevel. Dit is
   het element dat de acht scenes aan de home vastknoopt: daar licht hetzelfde
   raster op rond de muis, hier rond een vaste plek per scene.
   Het masker snijdt het kleurvlak in vierkantjes; de nevel loopt zelf naar
   transparant uit, dus er is geen tweede masker nodig om het te laten
   vervagen. Dat scheelt mask-composite, dat niet in elke browser hetzelfde
   doet. */
.db-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(var(--db-nevel-b, 58%) var(--db-nevel-h, 78%)
              at var(--db-nevel-x, 88%) var(--db-nevel-y, 10%),
              var(--db-nevel-stops));
  -webkit-mask-image: var(--db-raster);
  mask-image: var(--db-raster);
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: var(--db-raster-kracht);
}
/* De kleurlijn onderaan het beeld: dezelfde streep als onder de paginatitel
   (.kleurlijn in stijl.css), en tegelijk de scheiding tussen beeld en tekst. */
.db-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: var(--db-verloop);
  opacity: var(--db-kleurlijn-dekking);
}
/* De brede kaarten (4 en 5) krijgen een lagere scene, anders wordt het beeld
   op een groot scherm onnodig hoog. */
@media (min-width: 1180px) {
  .db-kaart:nth-child(4) .db-scene,
  .db-kaart:nth-child(5) .db-scene {
    aspect-ratio: 21 / 9;
    /* Zelfde redenering als de grens op .db-scene, alleen hoort bij deze twee
       de lagere band. */
    max-height: calc(var(--db-kaart-basis) * 9 / 21);
  }
}
/* Alle animaties staan stil tot het blok in beeld komt. Dat scheelt rekenwerk
   en houdt het rustig: je ziet de beweging pas als je er bent. */
.db-scene * { animation-play-state: paused; }
.dienstenblok.db-actief .db-scene * { animation-play-state: running; }
/* ============================================================
   01 WEBSITES
   Een muisaanwijzer die naar de knop loopt en klikt, en een pagina
   die zich intussen opbouwt. De beweging vertelt wat een site doet:
   een bezoeker die iets kan aanklikken.
   Cyclus: 8 s. Elk blok start 0,3 s later, daardoor de opbouw.
   ============================================================ */
/* De nevel staat rechtsboven, buiten de browser om: daar staat geen tekst. */
.db-scene--web { --db-nevel-x: 94%; --db-nevel-y: 4%; --db-nevel-b: 46%; --db-nevel-h: 62%; }
.db-scene--web .db-browser {
  position: absolute;
  inset: 9% 10%;
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn-sterk);
  border-radius: var(--db-rond-klein);
  overflow: hidden;
  transition: background-color var(--db-duur) var(--db-soepel),
              border-color var(--db-duur) var(--db-soepel);
}
.db-browserbalk {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 15%;
  min-height: 14px;
  padding: 0 8px;
  border-bottom: 1px solid var(--db-lijn);
}
.db-browserbalk i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--db-lijn-sterk);
}
.db-url {
  margin-left: 6px;
  flex: 1;
  max-width: 55%;
  height: 46%;
  min-height: 6px;
  border-radius: var(--db-rond);
  background: var(--db-vlak-2);
  border: 1px solid var(--db-lijn);
}
.db-vlak { position: absolute; inset: 15% 0 0 0; }
.db-bouwblok {
  position: absolute;
  border-radius: var(--db-rond-klein);
  background: var(--db-lijn-sterk);
  animation: db-web-in 8s var(--db-soepel) infinite both;
  animation-delay: var(--vertraging, 0s);
}
/* De kop van de pagina die gebouwd wordt, met daaronder de kleurlijn: precies
   de opbouw van elke pagina op clarixagent.com zelf, waar onder de titel een
   streep in het verloop staat. Zo is de mock herkenbaar onze eigen site.
   Het balkje zelf is met opzet WEER de inktkleur en niet het verloop: als heel
   vlak van 357 px was het verloop het luidste ding op de hele pagina. Gemeten
   op de afdruk van 1440 px, waar het de titel erboven overstemde. */
.db-bouwblok--hero   { left: 7%; top: 10%; width: 52%; height: 15%; background: var(--db-ink); --vertraging: 0s; }
.db-bouwblok--hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  height: 2px;
  background: var(--db-verloop);
  opacity: var(--db-kleurlijn-dekking);
}
.db-bouwblok--regel1 { left: 7%; top: 32%; width: 72%; height: 6%;  --vertraging: 0.3s; }
.db-bouwblok--regel2 { left: 7%; top: 43%; width: 55%; height: 6%;  --vertraging: 0.6s; }
.db-bouwblok--kaartje { top: 58%; width: 25%; height: 30%; background: var(--db-vlak-2); border: 1px solid var(--db-lijn); }
.db-bouwblok--k1 { left: 7%;  --vertraging: 0.9s; }
.db-bouwblok--k2 { left: 35%; --vertraging: 1.2s; }
/* Het derde kaartje staat er alleen op een ultrabrede kaart. Op 860 px past
   het niet naast de knop; op 1189 px bleef de onderste rij anders half leeg.
   Zie "ultrabreed" onderaan: daar wordt het zichtbaar gezet. */
.db-bouwblok--k3 { display: none; --vertraging: 1.5s; }
.db-knop {
  position: absolute;
  left: 66%;
  top: 60%;
  width: 27%;
  height: 20%;
  border-radius: var(--db-rond);
  background: var(--db-accent);
  box-shadow: inset 0 0 0 1px var(--db-accent);
  animation: db-web-knop 8s var(--db-soepel) infinite both;
}
/* De tik: een ring die opzet en vervaagt op het moment van klikken.
   De ring stond in --db-op-accent, en dat is een bijna zwarte ring op een
   blauwe knop: hard, en niet van deze site. Nu de gloedkleur, dezelfde
   magenta die op de home naast het blauw staat. */
.db-tik {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  margin: -1px 0 0 0;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  border: 2px solid var(--db-gloed);
  opacity: 0;
  animation: db-web-tik 8s ease-out infinite both;
}
.db-cursor {
  position: absolute;
  left: 80%;
  top: 68%;
  width: 13px;
  height: 19px;
  fill: var(--db-ink);
  stroke: var(--db-bg);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  animation: db-web-cursor 8s var(--db-soepel) infinite both;
}
@keyframes db-web-in {
  0%, 3%   { opacity: 0; transform: translateY(6px); }
  9%, 90%  { opacity: 1; transform: translateY(0); }
  99%, 100%{ opacity: 0; transform: translateY(0); }
}
@keyframes db-web-knop {
  0%, 15%    { opacity: 0; background-color: var(--db-vlak-2); box-shadow: inset 0 0 0 1px var(--db-lijn-sterk); }
  21%, 45%   { opacity: 1; background-color: var(--db-vlak-2); box-shadow: inset 0 0 0 1px var(--db-lijn-sterk); }
  50%, 90%   { opacity: 1; background-color: var(--db-accent); box-shadow: inset 0 0 0 1px var(--db-accent); }
  99%, 100%  { opacity: 0; background-color: var(--db-accent); box-shadow: inset 0 0 0 1px var(--db-accent); }
}
@keyframes db-web-cursor {
  0%, 20%   { opacity: 0; left: 92%; top: 96%; }
  24%       { opacity: 1; left: 90%; top: 92%; }
  45%, 52%  { opacity: 1; left: var(--db-knop-x); top: 68%; }
  56%       { opacity: 1; left: calc(var(--db-knop-x) + 0.5%); top: 68.5%; }
  92%       { opacity: 1; left: var(--db-knop-x); top: 68%; }
  100%      { opacity: 0; left: 92%; top: 96%; }
}
@keyframes db-web-tik {
  0%, 45%  { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  48%      { opacity: 0.9; }
  58%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
/* ============================================================
   02 TELEFOONASSISTENTEN
   De telefoon gaat over (twee bogen die uitzetten, het toestel dat
   even meetrilt), daarna loopt het gesprek: de geluidsgolf beweegt
   en de afspraak verschijnt als regel. Cyclus: 9 s.
   ============================================================ */
/* De nevel staat linksonder, achter het toestel: de rechterhelft draagt de
   tekst van het gesprek en die blijft schoon. */
.db-scene--telefoon { --db-nevel-x: 8%; --db-nevel-y: 92%; --db-nevel-b: 40%; --db-nevel-h: 68%; }
.db-scene--telefoon .db-telefoon {
  position: absolute;
  left: 7%;
  top: 13%;
  height: 74%;
  aspect-ratio: 1 / 1.95;
  border: 1.5px solid var(--db-ink);
  border-radius: 12%/6%;
  background: var(--db-vlak);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: db-tel-tril 9s ease-in-out infinite both;
  transition: background-color var(--db-duur) var(--db-soepel),
              border-color var(--db-duur) var(--db-soepel);
}
.db-inkeping {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 3px;
  border-radius: var(--db-rond);
  background: var(--db-lijn-sterk);
}
.db-hoorn {
  width: 44%;
  fill: var(--db-accent);
  animation: db-tel-hoorn 9s ease-in-out infinite both;
}
/* Het lampje dat aangeeft dat er verbinding is. */
.db-stip {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--db-accent);
  animation: db-tel-stip 9s ease-in-out infinite both;
}
.db-boog {
  position: absolute;
  left: 7%;
  top: 50%;
  width: 12%;
  aspect-ratio: 1;
  margin-left: -1%;
  transform: translate(-10%, -50%);
  border-radius: 50%;
  border: 1.5px solid var(--db-gloed);
  opacity: 0;
  animation: db-tel-boog 9s ease-out infinite both;
}
.db-boog--2 { animation-delay: 0.45s; }
/* Het paneel loopt niet meer door tot de rechterrand: op een kaart van 1189 px
   werd de regel met de afspraak een balk van 700 px met een halve zin erin.
   Een bovengrens houdt de regel op leesbare lengte en laat de scene ademen. */
.db-gesprekspaneel {
  position: absolute;
  left: 32%;
  right: 6%;
  max-width: 560px;              /* vaste maat, geen rem: op 3440 px is 1 rem 24 px en dan begrenst 34rem niets */
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.4rem;
}
.db-telstatus {
  grid-area: 1 / 1;
  font-size: clamp(10px, 0.75rem, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--db-accent-tekst);
}
.db-telstatus--inkomend { animation: db-tel-status-a 9s steps(1, end) infinite both; }
.db-telstatus--gesprek  { animation: db-tel-status-b 9s steps(1, end) infinite both; }
.db-telnummer {
  grid-area: 2 / 1;
  font-size: clamp(13px, 1.0625rem, 19px);
  color: var(--db-ink);
  letter-spacing: 0.02em;
}
.db-golf {
  grid-area: 3 / 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
/* De negen staafjes van de geluidsgolf dragen samen een verloop: elk staafje
   toont een negende van dezelfde kleurreeks, dus van links naar rechts loopt
   de stem van blauw naar magenta. Dat is de kleurlijn van de site, alleen in
   stukjes geknipt.
   Werking: de achtergrond is negen keer zo breed als het staafje, en de
   positie schuift per staafje een negende op. Zo hoeft er geen enkele kleur
   los in dit bestand te staan en klopt het in alle vier de paletten. */
.db-golf i {
  flex: 1;
  max-width: 4px;
  height: 100%;
  border-radius: var(--db-rond);
  background-color: var(--db-accent);
  background-image: var(--db-verloop);
  background-size: 900% 100%;
  background-repeat: no-repeat;
  transform: scaleY(0.14);
  animation: db-tel-golf 9s ease-in-out infinite both;
}
.db-golf i:nth-child(1) { animation-delay: 0.00s; background-position: 0% 0; }
.db-golf i:nth-child(2) { animation-delay: 0.09s; background-position: 12.5% 0; }
.db-golf i:nth-child(3) { animation-delay: 0.18s; background-position: 25% 0; }
.db-golf i:nth-child(4) { animation-delay: 0.27s; background-position: 37.5% 0; }
.db-golf i:nth-child(5) { animation-delay: 0.36s; background-position: 50% 0; }
.db-golf i:nth-child(6) { animation-delay: 0.45s; background-position: 62.5% 0; }
.db-golf i:nth-child(7) { animation-delay: 0.54s; background-position: 75% 0; }
.db-golf i:nth-child(8) { animation-delay: 0.63s; background-position: 87.5% 0; }
.db-golf i:nth-child(9) { animation-delay: 0.72s; background-position: 100% 0; }
/* De aangemaakte afspraak. Het randje links was een effen accentstreepje; nu
   het verloop, net als de streep links van een uitgelicht blok op de site
   (.juridisch-taal in stijl.css). Een border kan geen verloop dragen zonder
   de ronding kwijt te raken, vandaar een strookje als los vlak. */
.db-transcript {
  position: relative;
  grid-area: 4 / 1;
  font-size: clamp(11px, 0.8125rem, 15px);
  line-height: 1.35;
  color: var(--db-ink);
  padding: 0.4rem 0.6rem 0.4rem calc(0.6rem + 3px);
  background: var(--db-vlak);
  border-radius: 0 var(--db-rond-klein) var(--db-rond-klein) 0;
  animation: db-tel-transcript 9s var(--db-soepel) infinite both;
}
.db-transcript::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--db-verloop-v);
}
/* Het scherm van het toestel staat aan: een zachte kleurgloed onder het
   hoorntje. Zonder dit is de telefoon een lege omtrek. */
.db-telefoon::before {
  content: "";
  position: absolute;
  inset: 6% 4%;
  border-radius: 10%/5%;
  background: radial-gradient(70% 45% at 50% 46%, var(--db-accent) 0%, transparent 72%);
  opacity: 0.16;
  pointer-events: none;
}
@keyframes db-tel-tril {
  0%, 2%   { transform: rotate(0deg); }
  4%       { transform: rotate(-2.2deg); }
  6%       { transform: rotate(2.2deg); }
  8%       { transform: rotate(-1.6deg); }
  10%      { transform: rotate(1.6deg); }
  12%      { transform: rotate(-1deg); }
  14%, 100%{ transform: rotate(0deg); }
}
@keyframes db-tel-hoorn {
  0%, 14%  { transform: rotate(-14deg); }
  20%, 100%{ transform: rotate(0deg); }
}
@keyframes db-tel-stip {
  0%, 22%  { opacity: 0; }
  26%, 100%{ opacity: 1; }
}
@keyframes db-tel-boog {
  0%       { opacity: 0; transform: translate(-10%, -50%) scale(0.6); }
  3%       { opacity: 0.85; }
  16%      { opacity: 0; transform: translate(-10%, -50%) scale(3.4); }
  100%     { opacity: 0; transform: translate(-10%, -50%) scale(3.4); }
}
@keyframes db-tel-status-a { 0%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes db-tel-status-b { 0%, 21% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes db-tel-golf {
  0%, 22%  { transform: scaleY(0.14); }
  30%      { transform: scaleY(1); }
  38%      { transform: scaleY(0.3); }
  46%      { transform: scaleY(0.85); }
  54%      { transform: scaleY(0.22); }
  62%      { transform: scaleY(0.7); }
  70%      { transform: scaleY(0.3); }
  78%, 100%{ transform: scaleY(0.14); }
}
@keyframes db-tel-transcript {
  0%, 55%  { opacity: 0; transform: translateY(4px); }
  62%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}
/* ============================================================
   03 DASHBOARDS
   De staven lopen op, de trendlijn wordt getekend en de teller telt
   naar het getal toe (dat laatste doet dienstenblok.js). Zo zie je
   waar een dashboard voor is: een cijfer dat beweegt. Cyclus: 6 s.
   ============================================================ */
/* De nevel staat rechtsonder: onder de oplopende staven, weg van het cijfer
   linksboven. Zo helpt de kleur het verhaal ("het loopt op") in plaats van er
   dwars overheen te liggen. */
.db-scene--dashboard {
  --db-nevel-x: 94%;
  --db-nevel-y: 58%;
  --db-nevel-b: 42%;
  --db-nevel-h: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
}
.db-kpi { display: grid; gap: 0.1rem; }
.db-kpi-label {
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--db-ink-zacht);
}
.db-kpi-waarde {
  font-size: clamp(20px, 1.75rem, 34px);
  line-height: 1.15;
  color: var(--db-ink);
}
.db-teller {
  font-variant-numeric: tabular-nums;
  color: var(--db-accent-tekst);
}
.db-grafiek {
  position: relative;
  flex: 1 1 auto;
  min-height: 48px;
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.9vw, 12px);
}
.db-staaf {
  flex: 1 1 0;
  height: var(--h);
  border-radius: min(var(--db-rond-klein), 5px) min(var(--db-rond-klein), 5px) 0 0;
  background: var(--db-lijn-sterk);
  transform-origin: bottom center;
  animation: db-dash-staaf 9s var(--db-soepel) infinite both;
  animation-delay: var(--vertraging, 0s);
}
.db-staaf:nth-child(2) { --vertraging: 0s; }
.db-staaf:nth-child(3) { --vertraging: 0.08s; }
.db-staaf:nth-child(4) { --vertraging: 0.16s; }
.db-staaf:nth-child(5) { --vertraging: 0.24s; }
.db-staaf:nth-child(6) { --vertraging: 0.32s; }
/* De hoogste staaf: het verloop van onder naar boven, dus hij loopt van de
   accentkleur naar de gloedkleur. Daardoor is de magenta bovenin de grafiek
   geen losse kleur meer maar de bovenkant van de reeks die ook op het
   woordmerk staat. */
/* De hoogste staaf loopt bovenin over in de gloedkleur. Daardoor is de magenta
   van de trendlijn geen losse kleur meer maar de top van de reeks. Het verloop
   begint pas op 68 procent van de hoogte: over de hele staaf werd het een
   kleurblok van 180 px breed, en dat trok de hele kaart naar zich toe. */
.db-staaf:nth-child(7) { --vertraging: 0.4s; background: linear-gradient(0deg, var(--db-accent) 68%, var(--db-gloed) 100%); }
/* ---- de trendlijn ----
   Ali, 25 aug 2026: "als ik bij drie kijk, bij het dashboard, zie ik zo'n rare
   rode lijn; dat past er niet echt bij."
   Er zaten twee dingen fout. Ten eerste de VORM: een kale haarlijn van 1,5 px
   die drie eenheden BOVEN de koppen van de staven zweefde, los van alles.
   Zo leest hij als een streep die er per ongeluk overheen ligt. De lijn raakt
   nu de koppen van de staven (y = 44 * (1 - hoogte), zonder de aftrek van 3)
   en is 2 px dik, dus hij hoort zichtbaar bij de grafiek. En hij loopt van de
   accentkleur naar de gloedkleur in plaats van overal magenta te zijn: hij
   begint in dezelfde kleur als de staven en komt pas bovenin in de magenta
   uit, precies waar de hoogste staaf dat ook doet.
   Een vulling onder de lijn is geprobeerd en weer weggehaald: die kleurde de
   staven roze (ze zijn half doorzichtig) en achter de staven werd het een
   rij roze strepen in de tussenruimtes. Zie de afdruk van die poging.
   Ten tweede een echte fout: de lijn was ONDERBROKEN. Er stond
   stroke-dasharray: 200 samen met vector-effect: non-scaling-stroke, en dan
   staat die 200 in schermpixels terwijl het pad op een breed scherm ruim 700
   px lang is. Resultaat: streepjes van 200 px met gaten van 200 px, en de
   animatie schoof die streepjes alleen maar op. De lijn heeft zichzelf nooit
   getekend. Gemeten op de afdruk van 3440 px, voor deze wijziging.
   Het tekenen gaat nu met clip-path in plaats van met een streepjespatroon.
   Dat is onafhankelijk van de lengte van het pad, dus het kan niet opnieuw
   stukgaan als de kaart breder wordt. */
.db-trend {
  position: absolute;
  inset: 0;
  /* Boven de staven. Dat moet met een z-index: de staven hebben een transform
     (de scaleY van de animatie) en tellen daardoor mee als gestapelde laag,
     dus zonder deze regel verdween de lijn achter de staven en zag je alleen
     de stukjes in de tussenruimtes. */
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: db-dash-lijn 9s var(--db-soepel) infinite both;
}
.db-trendstop--start { stop-color: var(--db-accent); }
.db-trendstop--eind  { stop-color: var(--db-gloed); }
.db-trend polyline {
  fill: none;
  /* Terugvalkleur erachter: staat de definitie in de HTML er niet (een oudere
     kopie van het fragment), dan zou de lijn zonder deze kleur helemaal
     verdwijnen in plaats van effen te worden. */
  stroke: url(#db-trendkleur) var(--db-gloed);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Ondoorzichtig grijs in plaats van rgba(inkt, 0,24). Reden: het raster ligt
   achter de staven, en door half doorzichtige staven zie je die stippen heen
   schemeren. Dezelfde kleur op het oog, alleen dicht.
   Achter @supports, en dat is geen sierlijkheid: een color-mix() met een var()
   erin die de browser niet kent, is pas bij het berekenen ongeldig, en dan valt
   de eigenschap terug op de beginwaarde (doorzichtig) en NIET op de regel
   erboven. Zonder deze test zouden de staven in zo'n browser onzichtbaar zijn. */
@supports (background: color-mix(in srgb, red 24%, white)) {
  .db-staaf { background: color-mix(in srgb, var(--db-ink) 24%, var(--db-vlak-2)); }
}
@keyframes db-dash-staaf {
  0%, 3%    { transform: scaleY(0.02); }
  22%, 88%  { transform: scaleY(1); }
  97%, 100% { transform: scaleY(0.02); }
}
/* De grafiek wordt van links naar rechts vrijgegeven, samen met de staven die
   eronder oplopen. Lijn en vulling komen zo als een geheel tevoorschijn. */
@keyframes db-dash-lijn {
  0%, 14%   { clip-path: inset(0 100% 0 0); }
  40%, 88%  { clip-path: inset(0 0 0 0); }
  97%, 100% { clip-path: inset(0 100% 0 0); }
}
/* Punt A7 in PUNTEN.md: zonder GPU haalt de site 9 fps. Daarom beweegt de
   band met transform en niet met left; transform hoeft de pagina niet opnieuw
   in te delen. De maat cqw is 1% van de breedte van de scene zelf, dus de
   afstanden blijven kloppen op elk scherm. */
/* ============================================================
   04 ZWARE PROCESSEN
   Documenten schuiven binnen, gaan door de verwerking en komen er
   afgevinkt uit. De poort in het midden is het werk dat nu met de
   hand gebeurt. Cyclus: 8 s, om de 2 s een document.
   ============================================================ */
/* De nevel staat midden achter de poort: precies daar gebeurt het werk, dus
   daar hoort de kleur. De labels staan boven en onderaan, buiten de vlek. */
.db-scene--proces {
  --db-nevel-x: 50%;
  --db-nevel-y: 50%;
  --db-nevel-b: 13%;
  --db-nevel-h: 95%;
  overflow: hidden;
  container-type: inline-size;
}
.db-poortlabel {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-accent-tekst);
  white-space: nowrap;
}
.db-band { position: absolute; left: 0; right: 0; top: 30%; height: 40%; }
/* De poort is de verticale kleurlijn van de site: hetzelfde verloop als onder
   de paginatitel, een kwartslag gedraaid. Hij was een effen accentstreepje;
   nu loopt de kleur van boven naar beneden mee, en dat maakt van de poort het
   enige echte kleurelement van deze scene. */
.db-poort {
  position: absolute;
  left: 50%;
  top: -22%;
  bottom: -22%;
  width: 2px;
  margin-left: -1px;
  background: var(--db-verloop-v);
}
/* De zachte gloed naast de poort: een vlak met lage dekking, zodat het
   werkt op zowel een lichte als een donkere achtergrond. Nu breder en met
   een verloop naar de randen, zodat het een gloed is en geen tweede balk. */
.db-poort::after {
  content: "";
  position: absolute;
  left: -11px;
  right: -11px;
  top: 0;
  bottom: 0;
  background: var(--db-verloop-v);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  opacity: 0.30;
}
.db-doc {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0 9px;
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn-sterk);
  border-radius: min(var(--db-rond-klein), 4px);
  animation: db-proc-schuif 8s linear infinite both,
             db-proc-rand 8s linear infinite both;
  animation-delay: var(--vertraging, 0s);
}
/* De vaste plek is de stand zonder animatie (minder beweging aan): vier vellen
   verdeeld over de baan, twee voor de poort en twee erna. Draait de animatie
   wel, dan neemt die de verschuiving over. */
.db-doc--1 { --vertraging: 0s; transform: translateX(4cqw); }
.db-doc--2 { --vertraging: 2s; transform: translateX(28cqw); }
.db-doc--3 { --vertraging: 4s; transform: translateX(56cqw); }
.db-doc--4 { --vertraging: 6s; transform: translateX(80cqw); }
.db-doc i {
  height: 2px;
  border-radius: 2px;
  background: var(--db-lijn-sterk);
}
.db-doc i:nth-child(2) { width: 72%; }
.db-doc i:nth-child(3) { width: 45%; }
.db-vink {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--db-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: db-proc-vink 8s var(--db-soepel) infinite both;
  animation-delay: var(--vertraging, 0s);
}
.db-vink::after {
  content: "";
  width: 4px;
  height: 7px;
  margin-top: -2px;
  border: solid var(--db-op-accent);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.db-bandvloer {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 74%;
  border-top: 1px dashed var(--db-lijn-sterk);
}
.db-bandtekst {
  position: absolute;
  top: 78%;
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--db-ink-zacht);
}
.db-bandtekst--links  { left: 4%; }
.db-bandtekst--rechts { right: 4%; }
@keyframes db-proc-schuif {
  0%        { transform: translateX(-14cqw); opacity: 0; }
  6%        { opacity: 1; }
  94%       { opacity: 1; }
  100%      { transform: translateX(104cqw); opacity: 0; }
}
@keyframes db-proc-rand {
  0%, 48%   { border-color: var(--db-lijn-sterk); }
  53%, 100% { border-color: var(--db-accent); }
}
@keyframes db-proc-vink {
  0%, 48%   { opacity: 0; transform: scale(0.4); }
  56%, 100% { opacity: 1; transform: scale(1); }
}
/* ============================================================
   05 INTERNE AI
   Een vraag in gewone taal, de eigen documenten die worden
   doorzocht (een map licht op) en een antwoord met de bron erbij.
   Die bron is het punt: geen los verhaal maar een vindplaats.
   Cyclus: 9 s.
   ============================================================ */
/* De nevel staat links, achter de eigen documenten: daar komt het antwoord
   vandaan. De bubbels rechts blijven op een schone ondergrond staan. */
.db-scene--ai {
  --db-nevel-x: 9%;
  --db-nevel-y: 50%;
  --db-nevel-b: 15%;
  --db-nevel-h: 62%;
  display: flex;
  align-items: center;
  /* Links verankerd in plaats van gecentreerd. De vier andere scenes beginnen
     allemaal links; deze zweefde als enige in het midden, en op een brede
     kaart stond er dan aan weerskanten een leeg vlak van 350 px. */
  justify-content: flex-start;
  gap: clamp(0.9rem, 1.8vw, 1.75rem);
  padding: clamp(0.7rem, 1.5vw, 1.25rem);
  padding-left: clamp(0.9rem, 6%, 5rem);
}
/* De rail links van de mappen: dezelfde kleurlijn als onder de paginatitel,
   verticaal. Hij bindt de drie documenten tot een plank samen, zodat ze niet
   als drie losse vakjes in het midden van de scene hangen. */
.db-kennis {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 11px;
}
.db-kennis::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--db-verloop-v);
  opacity: 0.7;
}
.db-map {
  position: relative;
  width: clamp(22px, 2.4vw, 32px);
  aspect-ratio: 4 / 5;
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn-sterk);
  border-radius: min(var(--db-rond-klein), 3px);
}
/* Twee streepjes, zodat het als een document leest en niet als een leeg vakje. */
.db-map::before,
.db-map::after {
  content: "";
  position: absolute;
  left: 22%;
  height: 1px;
  background: var(--db-lijn-sterk);
}
.db-map::before { top: 34%; right: 22%; }
.db-map::after  { top: 56%; right: 45%; }
/* De middelste map is degene waar het antwoord vandaan komt. */
.db-map--2 { animation: db-ai-map 9s var(--db-soepel) infinite both; }
.db-gesprek {
  flex: 1 1 auto;
  /* Smal genoeg dat vraag en antwoord bij elkaar horen. De bovengrens ging van
     340 naar 440 px: op een brede kaart stonden twee kleine bubbels midden in
     een leeg vlak. */
  max-width: clamp(180px, 52%, 440px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.db-bubbel {
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: var(--db-rond-klein);
  font-size: clamp(11px, 0.8125rem, 15px);
  line-height: 1.35;
}
.db-bubbel--vraag {
  align-self: flex-end;
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn);
  color: var(--db-ink);
  animation: db-ai-vraag 9s var(--db-soepel) infinite both;
}
.db-bubbel--antwoord {
  background: var(--db-accent);
  color: var(--db-op-accent);
  animation: db-ai-antwoord 9s var(--db-soepel) infinite both;
}
.db-bron {
  display: block;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.db-denk {
  display: flex;
  gap: 4px;
  padding: 0.4rem 0.5rem;
  border-radius: var(--db-rond-klein);
  background: var(--db-vlak);
  border: 1px solid var(--db-lijn);
  opacity: 0;
  animation: db-ai-denk 9s steps(1, end) infinite both;
}
.db-denk i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--db-ink-zacht);
  animation: db-ai-stip 1.2s ease-in-out infinite;
}
.db-denk i:nth-child(2) { animation-delay: 0.15s; }
.db-denk i:nth-child(3) { animation-delay: 0.3s; }
@keyframes db-ai-vraag {
  0%, 3%    { opacity: 0; transform: translateY(5px); }
  9%, 92%   { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0); }
}
@keyframes db-ai-denk {
  0%, 13%   { opacity: 0; }
  14%, 33%  { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes db-ai-stip {
  0%, 100%  { transform: translateY(0); opacity: 0.45; }
  40%       { transform: translateY(-3px); opacity: 1; }
}
@keyframes db-ai-map {
  0%, 15%   { border-color: var(--db-lijn-sterk); background-color: var(--db-vlak); }
  20%, 33%  { border-color: var(--db-accent); background-color: var(--db-vlak-2); }
  40%, 100% { border-color: var(--db-accent); background-color: var(--db-vlak); }
}
@keyframes db-ai-antwoord {
  0%, 35%   { opacity: 0; transform: translateY(5px); }
  42%, 92%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(0); }
}
/* =====================  voet met de vier paletknoppen  ===================== */
.db-voet {
  /* Even breed als een kaart en op dezelfde lijn: anders staan de vier
     paletknoppen na het centreren aan de rechterrand van de hele paginabak,
     700 px buiten de kaarten. */
  max-width: var(--db-kaart-breedte);
  margin-inline: auto;
  margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--db-lijn);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--db-ruimte-3);
}
.db-voettekst {
  margin: 0;
  max-width: 28rem;
  font-size: clamp(14px, 0.9375rem, 17px);
  color: var(--db-ink-zacht);
}
.db-paletkeuze {
  display: flex;
  flex-wrap: wrap;
  gap: var(--db-ruimte-1);
}
.db-paletknop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--db-font-label);
  font-size: clamp(13px, 0.8125rem, 16px);
  line-height: 1;
  color: var(--db-ink);
  background: transparent;
  border: 1px solid var(--db-lijn-sterk);
  border-radius: var(--db-rond);
  cursor: pointer;
  transition: background-color var(--db-duur) var(--db-soepel),
              color var(--db-duur) var(--db-soepel),
              border-color var(--db-duur) var(--db-soepel),
              border-radius var(--db-duur) var(--db-soepel);
}
.db-paletknop:hover { border-color: var(--db-ink); }
.db-paletknop:focus-visible {
  outline: 2px solid var(--db-accent-tekst);
  outline-offset: 2px;
}
/* Gekozen palet: omgekeerd vlak. Dat is minstens 15 op 1 in elk palet, dus
   altijd leesbaar, en je ziet in een oogopslag welke aanstaat. */
.db-paletknop[aria-pressed="true"] {
  background: var(--db-ink);
  color: var(--db-bg);
  border-color: var(--db-ink);
}
/* De stalen tonen het palet waar de knop naartoe gaat, dus die kleuren
   veranderen niet mee. De hairline eromheen is neutraal grijs: zichtbaar op
   een lichte en op een donkere ondergrond. */
.db-stalen {
  display: flex;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.55);
}
.db-stalen i { display: block; width: 7px; height: 14px; }
.db-paletknop[data-palet-knop="1"] .db-stalen i:nth-child(1) { background: var(--p1-bg); }
.db-paletknop[data-palet-knop="1"] .db-stalen i:nth-child(2) { background: var(--p1-accent); }
.db-paletknop[data-palet-knop="1"] .db-stalen i:nth-child(3) { background: var(--p1-gloed); }
.db-paletknop[data-palet-knop="2"] .db-stalen i:nth-child(1) { background: var(--p2-bg); }
.db-paletknop[data-palet-knop="2"] .db-stalen i:nth-child(2) { background: var(--p2-accent); }
.db-paletknop[data-palet-knop="2"] .db-stalen i:nth-child(3) { background: var(--p2-gloed); }
.db-paletknop[data-palet-knop="3"] .db-stalen i:nth-child(1) { background: var(--p3-bg); }
.db-paletknop[data-palet-knop="3"] .db-stalen i:nth-child(2) { background: var(--p3-accent); }
.db-paletknop[data-palet-knop="3"] .db-stalen i:nth-child(3) { background: var(--p3-gloed); }
.db-paletknop[data-palet-knop="4"] .db-stalen i:nth-child(1) { background: var(--p4-bg); }
.db-paletknop[data-palet-knop="4"] .db-stalen i:nth-child(2) { background: var(--p4-accent); }
.db-paletknop[data-palet-knop="4"] .db-stalen i:nth-child(3) { background: var(--p4-gloed); }
/* =====================  schermmaten  ===================== */
/* De volle-breedte kaart mag niet meegroeien in hoogte, anders staat er op een
   laptop een beeld van 600 px hoog. */
@media (min-width: 760px) {
  .db-kaart:nth-child(5) .db-scene { aspect-ratio: 32 / 9; }
}
@media (min-width: 1180px) {
  .db-kaart:nth-child(5) .db-scene {
    aspect-ratio: 21 / 9;
    max-height: calc(var(--db-kaart-basis) * 9 / 21);
  }
}
/* Onder 400 px staat er weinig ruimte naast de telefoon; het paneel schuift
   dan iets op zodat de transcriptregel niet in twee woorden per regel valt. */
@media (max-width: 420px) {
  .db-scene { min-height: 200px; }
  .db-scene--telefoon .db-telefoon { left: 5%; height: 68%; top: 16%; }
  .db-gesprekspaneel { left: 30%; right: 4%; }
  .db-voet { flex-direction: column; align-items: flex-start; }
  /* Vier knopjes op een rij passen niet op 390 px; ze braken af als 3 + 1.
     Een raster van twee bij twee leest rustiger en is beter te raken. */
  .db-paletkeuze { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .db-paletknop { justify-content: center; padding: 0.6rem 0.5rem; }
}
/* =====================  ultrabreed: de tekening vult de kaart  =====================
   Ali, 25 aug 2026: "wanneer ik kijk naar de diensten en aanpak, is hij nog
   niet helemaal geoptimaliseerd voor het ultrawijde scherm. Dat is omdat de
   blokken die je hebt gemaakt of te groot zijn, of het kleine balkje of het
   kleine venster erin is niet gelijk aan de totale breedte."
   Wat er aan de hand was: de ronde ervoor maakte de KAART breder (860 -> 1189
   px op 3440) en liet de tekening erin op haar oude maat staan. Gemeten op
   3440 x 1440: het browservenster in kaart 1 was 950 px in een scene van
   1187 px, dus 118 px lucht links en 120 px rechts.
   Drie regels, en die gelden hier overal:
     1. het VENSTER (het browserkader, het gesprekspaneel) loopt door tot vlak
        bij de rand van de kaart;
     2. wat erin staat wordt NIET groter dan op een laptop. Elke maat heeft een
        bovengrens in px, gelijk aan wat hij op een kaart van 860 px is, plus
        hooguit een tiende. Een knop die twee keer zo groot wordt, ziet er
        onnozel uit, en dat schreef Ali er zelf bij;
     3. de vrijgekomen breedte wordt gevuld door de compositie te SPREIDEN, en
        waar spreiden een gat laat, door een element dat er op een breed scherm
        ook echt hoort (het derde kaartje in de mock).
   Waarom min(procent, pixels): onder deze grens wint het procent en is de
   waarde exact wat hij altijd al was, daarboven wint de pixelmaat en groeit er
   niets meer. Zo kan deze hele sectie niets breken op een smaller scherm.
   De grens ligt op 2600 px, dezelfde grens waarop stijl.css de paginabak laat
   meegroeien en waarop de kaart breder wordt dan 860 px. Op 2560, 1440 en de
   telefoon verandert er dus letterlijk niets aan de scenes; gemeten voor en na.
   De hoogte van een scene ligt boven deze grens vast (483,75 px bij 16:9 en
   368,6 px bij 21:9), dus alleen de breedte beweegt. */
@media (min-width: 2600px) {
  /* ---- 01 websites ----
     Het venster ging van 80 naar 92 procent van de scene. Wat erin staat is
     begrensd op de maat die het op 860 px heeft: de zwarte kop op 400 px, de
     twee tekstregels op 555 en 424, de kaartjes op 200 en de knop op 230.
     De onderste rij had daarmee een gat van ruim 300 px tussen het tweede
     kaartje en de knop; daar staat nu een derde kaartje. */
  .db-scene--web .db-browser { inset: 7% 4%; }
  .db-bouwblok--hero    { left: 6%; width: min(52%, 400px); }
  .db-bouwblok--regel1  { left: 6%; width: min(72%, 555px); }
  .db-bouwblok--regel2  { left: 6%; width: min(55%, 424px); }
  .db-bouwblok--kaartje { width: min(19%, 200px); }
  .db-bouwblok--k1 { left: 6%; }
  .db-bouwblok--k2 { left: 26%; }
  .db-bouwblok--k3 { display: block; left: 46%; }
  /* De knop hangt aan de RECHTERrand, zoals op de laptop ook. Met een vaste
     left zou hij midden in het venster blijven staan. */
  .db-knop { left: auto; right: 6%; width: min(27%, 230px); }
  /* En de aanwijzer gaat mee. 84 procent ligt binnen de knop over het hele
     bereik van deze media query (kaart 899 px tot 1290 px). */
  .dienstenblok { --db-knop-x: 84%; }
  /* ---- 02 telefoonassistenten ----
     Het toestel blijft precies even groot: dat is een voorwerp, geen venster.
     Het gesprekspaneel liep tot 940 px in een scene van 1187 en liet 247 px
     leeg aan de rechterkant; het loopt nu door tot de rechtermarge en de
     leegte zit tussen het toestel en het paneel in, waar hij als ruimte leest
     in plaats van als een afgekapte tekening.
     De bovengrens gaat van 560 naar 720 px. Niet hoger: bij 820 px werd de
     regel met de afspraak een balk waarin de zin nog geen derde vulde. */
  .db-scene--telefoon .db-telefoon { left: 5%; }
  .db-gesprekspaneel { left: 34%; right: 5%; max-width: 720px; }
  /* ---- 03 dashboards ----
     De staven stonden op flex: 1 en werden daardoor 178 px breed tegen 126 px
     op een laptop. Dat is precies het "te groot" uit Ali's zin. Ze houden nu
     een bovengrens van 160 px en de vrijgekomen ruimte gaat naar de tussen-
     ruimtes, dus de grafiek vult de kaart nog steeds.
     De trendlijn tekent op vaste percentages van het viewBox; door de bredere
     tussenruimtes komt hij hooguit 16 px naast het midden van een staaf uit,
     op staven van 160 px. Dat is op beeld niet te zien; gecontroleerd op de
     uitsnede van 3440 px. */
  .db-grafiek { justify-content: space-between; }
  .db-staaf { max-width: 160px; }
  /* ---- 04 zware processen ----
     Niets. De band loopt van rand tot rand en de vellen hangen aan de hoogte
     van de band, en die ligt vast. Gemeten vulling 109 procent (de vellen
     schuiven de scene in en uit), op elke schermmaat gelijk. */
  /* ---- 05 interne AI ----
     De slechtste van de vijf: 44 procent vulling op 3440 tegen 55 op een
     laptop. Oorzaak was de bovengrens van 440 px op het gesprek, samen met
     een rij die links begon. De documenten staan nu links en het gesprek
     rechts, met de leegte ertussen in plaats van erachter: dezelfde opbouw
     als scene 02, en daar werkt hij. */
  .db-scene--ai {
    justify-content: space-between;
    padding-right: clamp(0.9rem, 6%, 5rem);
  }
  .db-gesprek { max-width: min(58%, 620px); }
}
/* =====================  minder beweging  ===================== */
/* Wie in zijn systeem heeft staan dat hij minder beweging wil, krijgt het
   eindbeeld van elke animatie te zien. Daarom staat de basisstijl hierboven
   overal op de eindstand en beginnen de keyframes bij 0% verborgen. */
@media (prefers-reduced-motion: reduce) {
  .dienstenblok *,
  .dienstenblok *::before,
  .dienstenblok *::after {
    animation: none !important;
    transition: none !important;
  }
  .db-cursor { left: var(--db-knop-x); top: 68%; }
  /* De grafiek wordt getekend met clip-path; zonder animatie blijft die op de
     beginstand staan en is de hele trendlijn weg. Dus hier vrijgeven. */
  .db-trend { clip-path: none; }
  .db-golf i { transform: scaleY(0.55); }
  .db-telstatus--inkomend { opacity: 0; }
  /* De twee vellen die de poort nog niet gepasseerd zijn, horen geen vinkje
     en geen accentrand te hebben. */
  .db-doc--1, .db-doc--2 { border-color: var(--db-lijn-sterk); }
  .db-doc--1 .db-vink, .db-doc--2 .db-vink { opacity: 0; }
}