/* =====================================================================
   Aanpakblok - stijl
   ---------------------------------------------------------------------
   Drie stappen als kaarten onder elkaar, in dezelfde vorm als het
   dienstenblok: een animatievlak bovenin, daaronder een nummer, een kop
   en de tekst van de stap.
   Bewust GEEN paletknoppen: dat is het punt van de dienstenpagina (laten
   zien dat we in meer stijlen werken), niet van deze pagina. Hier gelden
   gewoon de kleuren van de site.
   Bewust ook GEEN lopende animatie. Het dienstenblok herhaalt zichzelf
   eindeloos; hier bouwt elke scene zich EEN keer op zodra de kaart in
   beeld komt, en daarna staat hij stil. Drie kaarten die permanent
   bewegen worden op deze pagina onrustig, en de beweging heeft haar werk
   gedaan zodra ze de stap heeft uitgelegd.
   Alle klassen beginnen met ab- en alle variabelen met --ab-, zodat er
   niets botst met db- (dienstenblok) of met stijl.css.
   Geen venster om het blok: de sectie is doorzichtig, de kaarten staan op
   de pagina zelf. Ali, 25 aug 2026, over het dienstenblok: "ik wil dat je
   dat venster weghaalt en dat je gewoon echt daadwerkelijk die block
   ziet."
   OPBOUW VAN DIT BESTAND, en waarom het zo moet:
   elke regel hieronder beschrijft de EINDSTAND, dus hoe de scene eruit
   ziet als de opbouw klaar is. De animaties staan apart, achter
   .ab-speelt, en die klasse zet aanpakblok.js pas op een kaart die in
   beeld staat. Zonder JavaScript, en bij "minder beweging", zie je dus
   meteen het eindbeeld in plaats van een lege witte scene.
   ===================================================================== */
.aanpakblok,
.aanpakblok *,
.aanpakblok *::before,
.aanpakblok *::after {
  box-sizing: border-box;
}

.aanpakblok {
  /* Kleuren: gelijk aan palet 1 van het dienstenblok, want dat is het
     palet van clarixagent.com zelf. */
  --ab-vlak: #f6fafe;           /* de kaart */
  --ab-vlak-2: #ffffff;         /* het animatievlak */
  --ab-ink: #000000;
  --ab-ink-zacht: #46525e;
  --ab-accent: #0091ff;
  --ab-accent-tekst: #0069bd;   /* donkerder, alleen waar accent tekst is */
  --ab-op-accent: #001325;      /* tekst op een accentvlak */
  --ab-lijn: rgba(0, 0, 0, 0.10);
  --ab-lijn-sterk: rgba(0, 0, 0, 0.24);
  --ab-font: 'Sarabun', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* maten en ritme */
  --ab-ruimte-1: 0.5rem;
  --ab-gat: clamp(1rem, 1.5vw, 1.75rem);
  --ab-rond: 2.5rem;            /* pillen */
  --ab-rond-kaart: 1.75rem;
  --ab-rond-klein: 0.75rem;
  --ab-schaduw: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ab-soepel: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* --- de beeldtaal van clarixagent.com ---
     Precies dezelfde drie elementen als in het dienstenblok: het verloop van
     het woordmerk, het raster van afgeronde vierkantjes uit de 3D-scene, en de
     kleurlijn onder de kop. Hier zonder paletten, dus met de vier kleuren van
     de site zelf (gelijk aan .kleurlijn in stijl.css).
     LET OP: in deze variabelen staat geen var() naar --ab-accent en al helemaal
     geen plaatsing. Een var() binnen een custom property wordt ingevuld op het
     element waar die property staat, niet waar hij gebruikt wordt; daardoor
     zou een scene zijn eigen nevelplek niet meer kunnen zetten. */
  --ab-verloop: linear-gradient(90deg, #0091ff 0%, #00aaff 26%, #8000ff 64%, #ff0099 100%);
  --ab-verloop-v: linear-gradient(180deg, #0091ff 0%, #00aaff 26%, #8000ff 64%, #ff0099 100%);
  --ab-nevel-stops: #0091ff 0%, #8000ff 38%, #ff0099 58%, transparent 74%;
  --ab-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");
  --ab-raster-kracht: 0.09;
  /* De basisbreedte van een kaart; zowel de breedte van de kaart als de
     hoogtegrens van de scene hangt eraan. Zie "schermmaten" onderaan. */
  --ab-kaart-basis: 860px;
  /* Waar de bezoeker in scene 01 blijft staan, in procenten van de scene. */
  --ab-persoon-x: 13%;

  position: relative;
  isolation: isolate;
  background: transparent;      /* geen venster, zie de kop van dit bestand */
  color: var(--ab-ink);
  font-family: var(--ab-font);
  line-height: 1.6;
}

/* =====================  raamwerk  ===================== */
/* Geen eigen breedte en geen zijmarge: het blok volgt de pagina waar het in
   staat, zodat de kaarten links op dezelfde lijn beginnen als de paginatitel.
   Boven een beetje lucht, onder niets. Hier stond dat .cta-blok zelf 4rem
   meebracht; dat blok is op 25 aug 2026 van deze pagina gehaald. De ruimte
   onder de laatste kaart komt sindsdien van de padding-bottom van .pagina
   (6rem, dus 144 px op 3440 en 72 px op 1440). Gemeten, geen gat. */
.ab-binnen {
  max-width: none;
  margin: 0;
  padding: clamp(0.5rem, 1.5vw, 1.5rem) 0 0;
}

/* De breedte van een kaart als variabele; zie de gelijke regel in
   dienstenblok.css. Met opzet letterlijk dezelfde formule, zodat de twee
   pagina's even brede kaarten houden en op dezelfde x beginnen.
   De 100% erin wordt pas ingevuld waar de variabele gebruikt wordt: bij
   .ab-kaart is dat .ab-rooster, bij de paginakop .pagina. Dat zijn dezelfde
   pixels, dus kop en kaart komen op een lijn uit. */
/* De basismaat staat hier nog een keer omdat --ab-kaart-basis alleen op
   .aanpakblok bestaat; een var() die nergens naar wijst maakt de hele
   berekening ongeldig en dan blijft de kop stilletjes links staan. */
.pagina:has(.aanpakblok),
.aanpakblok {
  --ab-kaart-basis: 860px;
  --ab-kaart-breedte: max(var(--ab-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 verschuift. Op 3440 px is dat
   644 px, op 1440 px 62 px, op een telefoon 0. */
.pagina:has(.aanpakblok) > .pagina-label,
.pagina:has(.aanpakblok) > .pagina-titel,
.pagina:has(.aanpakblok) > .kleurlijn,
.pagina:has(.aanpakblok) > .pagina-intro {
  margin-left: max(0px, calc((100% - var(--ab-kaart-breedte)) / 2));
}

.ab-rooster {
  display: grid;
  grid-template-columns: 1fr;   /* onder elkaar, allemaal even breed */
  gap: var(--ab-gat);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-kaart {
  /* Even breed en niet over de volle pagina: op 2560 px wordt een kaart
     anders meer dan 1000 px breed en blaast de animatie erin zichzelf op.
     860 px is dezelfde maat als de kaarten van het dienstenblok, dus de
     twee pagina's tonen even grote blokken.
     ULTRABREED, 25 aug 2026: zelfde regel als in dienstenblok.css, en met
     opzet letterlijk dezelfde, zodat de twee pagina's even brede kaarten
     houden. De breedte hangt aan de paginabak (--pg-bak uit stijl.css):
       390 px -> 360, 1440 px -> 860, 2560 px -> 860, 3440 px -> 1189.
     De factor 0,48 ligt zo dat de ondergrens van 860 px wint tot 2600 px,
     precies de grens waar stijl.css de bak laat meegroeien; daaronder
     verandert er dus niets. De hoogte van de scene groeit niet mee, zie de
     max-height op .ab-scene. */
  max-width: var(--ab-kaart-breedte);
  width: 100%;
  /* GECENTREERD. Ali, 25 aug 2026: "ze mogen wel gecentreerd staan, die
     punten. (...) En ook het centreren; dat geldt voor de diensten en aanpak."
     Hier stond links uitlijnen. De kop van de pagina schuift met de kaarten
     mee naar het midden (zie de regel bij .pagina-titel hieronder), want
     kaarten in het midden onder een titel die links blijft staan, oogt
     scheef. */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--ab-vlak);
  border: 1px solid var(--ab-lijn);
  border-radius: var(--ab-rond-kaart);
  box-shadow: var(--ab-schaduw);
  overflow: hidden;
  scroll-margin-top: 6rem;      /* voor een sprong naar #quick-scan */
}

/* Geen hairline meer tussen beeld en tekst: die rol heeft de kleurlijn
   onderaan de scene overgenomen (.ab-scene::after). */
.ab-tekst {
  padding: clamp(1.125rem, 1.6vw, 1.75rem);
}
.ab-nummer {
  margin: 0 0 var(--ab-ruimte-1);
  font-size: clamp(10px, 0.6875rem, 13px);
  letter-spacing: 0.16em;
  color: var(--ab-ink-zacht);
}
.ab-kaarttitel {
  margin: 0 0 var(--ab-ruimte-1);
  font-size: clamp(18px, 1.25rem, 25px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ab-uitleg {
  margin: 0;
  font-size: clamp(14px, 0.9375rem, 17px);
  line-height: 1.55;
  color: var(--ab-ink-zacht);
}
/* De tweede alinea van een stap. Zelfde grootte, alleen ruimte ertussen:
   de hele tekst van de pagina staat in de kaarten, er valt niets weg. */
.ab-uitleg + .ab-uitleg { margin-top: 0.75rem; }

/* =====================  het toneel per stap  ===================== */
.ab-scene {
  position: relative;
  /* Eigen stapelcontext, zodat het raster hieronder (z-index -1) boven de
     achtergrond van de scene komt maar onder alles wat erin staat. */
  isolation: isolate;
  aspect-ratio: 16 / 9;
  min-height: 190px;
  background: var(--ab-vlak-2);
  overflow: hidden;
}
/* Op een breed scherm is 16:9 bij een kaart van 860 px een beeld van bijna
   500 px hoog. Deze drie scenes zijn breed opgebouwd (links wat er gebeurt,
   rechts wat het oplevert), dus daar past een lagere band beter. */
@media (min-width: 1180px) {
  .ab-scene {
    aspect-ratio: 21 / 9;
    /* Bovengrens op de hoogte, precies de hoogte die de scene op een laptop
       heeft (860 px breed, 21:9). Daardoor groeit een kaart op een ultrabreed
       scherm alleen in de breedte: een bredere band, geen poster. */
    max-height: calc(var(--ab-kaart-basis) * 9 / 21);
  }
}
/* Het raster van afgeronde vierkantjes, opgelicht door een kleurnevel. Zelfde
   element als in het dienstenblok, en om dezelfde reden: op de home licht dit
   raster op rond de muis, hier rond een vaste plek per scene. De nevel loopt
   zelf naar transparant uit, dus er is maar een masker nodig. */
.ab-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(var(--ab-nevel-b, 40%) var(--ab-nevel-h, 70%)
              at var(--ab-nevel-x, 88%) var(--ab-nevel-y, 12%),
              var(--ab-nevel-stops));
  -webkit-mask-image: var(--ab-raster);
  mask-image: var(--ab-raster);
  -webkit-mask-size: 16px 16px;
  mask-size: 16px 16px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: var(--ab-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. */
.ab-scene::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: var(--ab-verloop);
  opacity: 0.55;
}

/* Twee vormen die in meer dan een scene voorkomen. */
.ab-label {
  font-size: clamp(9px, 0.625rem, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-accent-tekst);
  line-height: 1.2;
}
.ab-woord {
  font-size: clamp(11px, 0.75rem, 14px);
  color: var(--ab-ink-zacht);
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================================
   01 QUICK SCAN - eindstand
   Iemand staat voor de deur van een bedrijfspand en rechts staat
   opgeschreven wat er opviel. Meer gebeurt er niet, want meer is
   de stap ook niet: langskomen, kijken, noteren.
   ============================================================ */
/* De nevel staat linksboven, in de lucht boven het pand: daar staat niets, en
   het geeft de gevel iets om tegen af te steken. */
.ab-scene--scan {
  --ab-nevel-x: 20%;
  --ab-nevel-y: 8%;
  --ab-nevel-b: 30%;
  --ab-nevel-h: 60%;
}
/* De grondlijn loopt alleen onder het pand door en niet onder het
   aantekenvlak: dat vlak hangt niet op straat. */
.ab-scene--scan .ab-grond {
  position: absolute;
  left: 4%;
  /* Loopt tot net voorbij het pand. Met een percentage tot de rechterrand liep
     de lijn op een brede kaart 170 px voorbij de gevel door en hing hij in het
     niets; de bovengrens houdt hem bij het gebouw. */
  width: min(42%, 380px);
  top: 86%;
  height: 1px;
  background: var(--ab-lijn);
}
.ab-pand {
  position: absolute;
  left: 7%;
  top: 17%;
  width: 34%;
  /* Bovengrens gelijk aan de breedte die het pand op een laptop heeft. Zonder
     die grens rekt de gevel op een kaart van 1189 px mee tot 404 px breed
     terwijl de hoogte vastligt, en dan is het een liggende doos in plaats van
     een pand. Onder 2600 px verandert er niets: daar is 34 procent kleiner. */
  max-width: 292px;
  height: 69%;                  /* onderkant valt samen met de grondlijn */
  background: var(--ab-vlak);
  border: 1px solid var(--ab-lijn-sterk);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
/* De luifel boven de gevel: het verschil tussen een doos en een pand.
   Staat in de HTML BINNEN .ab-pand, zodat hij de gevel volgt als die zijn
   bovengrens raakt. Als broer van het pand stond hij in procenten van de hele
   scene en schoof hij op een brede kaart naast het gebouw. */
.ab-luifel {
  position: absolute;
  left: -8.8%;
  top: -7.2%;
  width: 117.6%;
  height: 8%;
  min-height: 7px;
  background: var(--ab-vlak);
  border: 1px solid var(--ab-lijn-sterk);
  border-radius: 6px;
}
/* Vier ramen en een deur. Zonder die vijf is het een rechthoek. */
.ab-raam {
  position: absolute;
  width: 30%;
  height: 20%;
  background: var(--ab-vlak-2);
  border: 1px solid var(--ab-lijn-sterk);
  border-radius: 3px;
}
.ab-raam--1 { left: 14%; top: 12%; }
.ab-raam--2 { left: 56%; top: 12%; }
.ab-raam--3 { left: 14%; top: 38%; }
.ab-raam--4 { left: 56%; top: 38%; }
.ab-deur {
  position: absolute;
  left: 36%;
  bottom: 0;
  width: 28%;
  height: 26%;
  background: var(--ab-vlak-2);
  border: 1px solid var(--ab-lijn-sterk);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
/* De bezoeker: een hoofd en een romp, meer is het niet. Hij loopt tot naast
   de deur en blijft daar staan; hij verdwijnt niet naar binnen, want dan is
   de eindstand van deze scene een pand zonder mens erbij. */
.ab-persoon {
  position: absolute;
  /* Waar hij blijft staan: net links van de deur. Als variabele, want de gevel
     staat op een ultrabrede kaart op een andere plek in de scene en de
     bezoeker hoort daarbij te blijven; zie "ultrabreed" onderaan. */
  left: var(--ab-persoon-x);
  bottom: 14%;
  /* De maat loopt mee met de scene, niet in vaste pixels: anders is de
     bezoeker op een breed scherm half zo hoog als de deur en op een
     telefoon groter dan het pand. 14% van de scenehoogte komt ongeveer
     uit op deurhoogte, en dat is wat een mens naast een deur hoort te
     zijn. */
  height: 14%;
  aspect-ratio: 5 / 11;
}
.ab-persoon i {
  position: absolute;
  left: 50%;
  top: 0;
  height: 28%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ab-ink);
}
.ab-persoon b {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 68%;
  border-radius: 50% 50% 12% 12%;
  background: var(--ab-ink);
}
/* Het aantekenvlak rechts: wat er tijdens de scan opvalt. */
.ab-notitie {
  position: absolute;
  left: 47%;
  right: 6%;
  /* Niet breder dan een leesbare notitie: op een kaart van 1189 px werd dit
     anders een vlak van 590 px met drie woorden erin. */
  max-width: 520px;
  top: 16%;
  bottom: 16%;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* blijft midden staan, ook op een lage band */
  gap: clamp(9px, 1.1vw, 15px);
  padding: 4% 5%;
  padding-left: calc(5% + 3px);
  background: var(--ab-vlak);
  border: 1px solid var(--ab-lijn);
  border-radius: var(--ab-rond-klein);
  overflow: hidden;             /* het strookje hieronder volgt de ronding */
}
/* Het strookje links van de aantekening: dezelfde vorm als een uitgelicht blok
   op de site (.juridisch-taal in stijl.css heeft daar een accentstreep), maar
   dan in het verloop van het merk. Het maakt van het vlak een aantekening in
   plaats van een leeg kader. */
.ab-notitie::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ab-verloop-v);
}
.ab-notitie .ab-label { margin-bottom: 2px; }
.ab-notitieregel {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* De drie stippen nemen elk een deel van het verloop mee: de eerste blauw, de
   laatste magenta. Werking als bij de geluidsgolf in het dienstenblok: de
   achtergrond is drie keer zo breed als de stip en schuift per regel op. */
.ab-notitieregel i {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--ab-accent);
  background-image: var(--ab-verloop);
  background-size: 300% 100%;
  background-repeat: no-repeat;
}
.ab-notitieregel--1 i { background-position: 0% 0; }
.ab-notitieregel--2 i { background-position: 50% 0; }
.ab-notitieregel--3 i { background-position: 100% 0; }
/* De grijze streep achter het woord: zo oogt het als een geschreven regel
   en niet als drie losse woorden in een leeg vlak. */
.ab-notitieregel u {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--ab-lijn-sterk);
  opacity: 0.55;
  text-decoration: none;
}
/* ============================================================
   02 VOORSTEL EN PLAN - eindstand
   Een blad met een kop, twee regels tekst en daaronder een planning
   van drie fasen. De balken staan versprongen, zoals in een echte
   planning, dus je ziet dat het om stappen na elkaar gaat.
   ============================================================ */
/* De nevel staat rechtsonder, buiten het blad om: het blad zelf is dicht, dus
   daar zie je hem alleen langs de randen. */
.ab-scene--plan {
  --ab-nevel-x: 90%;
  --ab-nevel-y: 94%;
  --ab-nevel-b: 26%;
  --ab-nevel-h: 46%;
}
.ab-blad {
  position: absolute;
  inset: 8% 12%;
  /* Niet breder dan een blad papier: op een kaart van 1189 px werd dit anders
     een vlak van ruim 900 px en stonden de regels als slierten in het beeld. */
  max-width: 760px;
  margin-inline: auto;
  padding: 4% 5%;
  /* Kolom met de inhoud in het midden: op een telefoon is het blad hoger dan
     wat erin staat, en dan bleef er onderin een lege strook staan. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ab-vlak);
  border: 1px solid var(--ab-lijn-sterk);
  border-radius: var(--ab-rond-klein);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.ab-blad .ab-label {
  display: block;
  margin-bottom: 3.5%;
}
/* LET OP: block, niet inline. Een span met alleen een hoogte in procenten
   is een inline-element en dan doet die hoogte niets: het blad bleef leeg.
   Gemeten op de eerste afdruk, 25 aug 2026. */
.ab-bladregel {
  display: block;
  height: 5%;
  min-height: 5px;
  border-radius: 3px;
  background: var(--ab-lijn-sterk);
}
/* De titel van het voorstel: donker, want dat is de kop van het stuk. Bewust
   NIET in het verloop: dat is in deze scene de balk van fase 3, en twee
   verloopvlakken in een klein blad worden een kleurenkaart. */
.ab-bladregel--kop { width: 44%; height: 7.5%; background: var(--ab-ink); }
.ab-bladregel--r1  { width: 68%; margin-top: 3%; }
.ab-bladregel--r2  { width: 54%; margin-top: 2%; }
.ab-scheiding {
  display: block;
  height: 1px;
  margin: 4% 0;
  background: var(--ab-lijn);
}
.ab-plan {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.9vw, 12px);
}
.ab-fase {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-fase .ab-woord {
  flex: none;
  width: 20%;
  min-width: 42px;
  font-size: clamp(9px, 0.625rem, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* De baan waarin de balk staat: een lichte grondlijn, zodat je ziet dat een
   fase maar een deel van de looptijd beslaat. */
.ab-baan {
  position: relative;
  flex: 1;
  height: clamp(9px, 1.1vw, 14px);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.045);
}
.ab-balk {
  position: absolute;
  top: 0;
  height: 100%;
  left: var(--start);
  width: var(--breedte);
  border-radius: 7px;
  background: var(--ab-lijn-sterk);
  transform-origin: left center;
}
.ab-fase--1 .ab-balk { --start: 0%;  --breedte: 40%; }
.ab-fase--2 .ab-balk { --start: 30%; --breedte: 38%; }
/* De laatste fase is de oplevering, dus die krijgt als enige het verloop. De
   drie balken lopen zo van grijs, via grijs, naar de kleur van het merk: het
   plan komt ergens uit. */
.ab-fase--3 .ab-balk { --start: 62%; --breedte: 38%; background: var(--ab-verloop); }
/* ============================================================
   03 OPLEVERING - eindstand
   Links staat wat gebouwd is, af en wel, met een accentrand omdat het
   in gebruik is. Rechts drie afgevinkte controles, de melding
   "opgeleverd" en een stille stip: we zijn er daarna nog.
   ============================================================ */
/* De nevel staat linksonder, achter het opgeleverde werk. */
.ab-scene--klaar {
  --ab-nevel-x: 16%;
  --ab-nevel-y: 90%;
  --ab-nevel-b: 32%;
  --ab-nevel-h: 62%;
}
.ab-product {
  position: absolute;
  left: 7%;
  top: 14%;
  width: 33%;
  max-width: 300px;              /* zelfde reden als bij het pand in scene 01 */
  height: 72%;
  background: var(--ab-vlak);
  border: 1px solid var(--ab-accent);
  border-radius: var(--ab-rond-klein);
  overflow: hidden;
}
.ab-productbalk {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16%;
  min-height: 14px;
  padding: 0 8px;
  border-bottom: 1px solid var(--ab-lijn);
}
.ab-productbalk i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ab-lijn-sterk);
}
.ab-productvlak {
  position: absolute;
  inset: 16% 0 0 0;
  padding: 8% 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* anders staat de onderste helft leeg */
  gap: clamp(6px, 0.8vw, 11px);
}
.ab-productvlak span {
  height: 5px;
  border-radius: 3px;
  background: var(--ab-lijn-sterk);
}
.ab-productvlak span:nth-child(1) { width: 70%; height: 8px; background: var(--ab-ink); }
.ab-productvlak span:nth-child(2) { width: 88%; }
.ab-productvlak span:nth-child(3) { width: 62%; }
/* De knop in het opgeleverde scherm: het verloop van het merk, dezelfde vorm
   als de knop in scene 01 van het dienstenblok. */
.ab-productvlak span:nth-child(4) { width: 44%; height: 10px; margin-top: 3px; border-radius: 5px; background: var(--ab-verloop); }
.ab-controle {
  position: absolute;
  left: 46%;
  right: 7%;
  max-width: 520px;              /* zelfde reden als bij de aantekening */
  top: 16%;
  bottom: 16%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
}
.ab-controle .ab-label { margin-bottom: 2px; }
.ab-check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-check i {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ab-accent);
  border: 1px solid var(--ab-accent);
}
/* Het vinkje zelf: twee randen van een blokje, een kwartslag gedraaid.
   Voor een streepje van acht pixels is geen SVG nodig. */
.ab-check i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 4px;
  height: 8px;
  border: solid var(--ab-vlak-2);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
.ab-check b {
  height: 5px;
  border-radius: 3px;
  background: var(--ab-lijn-sterk);
}
.ab-check--1 b { width: 82%; }
.ab-check--2 b { width: 64%; }
.ab-check--3 b { width: 74%; }
.ab-slot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* op een telefoon onder elkaar */
  gap: 6px 12px;
  margin-top: 4px;
}
.ab-pil {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--ab-rond);
  background: var(--ab-accent);
  color: var(--ab-op-accent);
  font-size: clamp(9px, 0.625rem, 12px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.ab-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ab-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-accent);
  opacity: 0.55;
}
.ab-live .ab-woord {
  font-size: clamp(9px, 0.625rem, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* =====================================================================
   DE OPBOUW
   ---------------------------------------------------------------------
   Alles hieronder gebeurt alleen op een kaart met de klasse .ab-speelt,
   en die zet aanpakblok.js zodra de kaart in beeld komt. Scrol je weg en
   weer terug, dan bouwt de scene zich opnieuw op; blijf je kijken, dan
   staat hij stil. Elke opbouw is binnen vier seconden klaar.
   ===================================================================== */

/* De verschijnbeweging die overal terugkomt: drie pixels omhoog en
   zichtbaar worden. Het verschil zit in de vertraging, niet in de
   beweging: daardoor leest de scene als een volgorde. */
@keyframes ab-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 01 quick scan ---------- */
/* De bezoeker komt van links het beeld in en loopt naar de deur. Het pand
   zelf beweegt niet: dat staat er, net als in het echt. */
@keyframes ab-loopt {
  0%   { left: -4%; opacity: 0; }
  14%  { left: 0%;  opacity: 1; }
  100% { left: var(--ab-persoon-x); opacity: 1; }
}
.ab-speelt .ab-persoon {
  animation: ab-loopt 1.8s var(--ab-soepel) both;
}
.ab-speelt .ab-notitie {
  animation: ab-in 0.5s var(--ab-soepel) both;
  animation-delay: 1.2s;
}
.ab-speelt .ab-notitie .ab-label,
.ab-speelt .ab-notitieregel {
  animation: ab-in 0.4s var(--ab-soepel) both;
  animation-delay: var(--vertraging, 0s);
}
/* Een aantekening per keer, in het tempo waarin iemand ze opschrijft. */
.ab-notitie .ab-label   { --vertraging: 1.5s; }
.ab-notitieregel--1     { --vertraging: 1.9s; }
.ab-notitieregel--2     { --vertraging: 2.4s; }
.ab-notitieregel--3     { --vertraging: 2.9s; }
/* ---------- 02 voorstel en plan ---------- */
/* Een balk groeit vanaf zijn eigen startpunt naar rechts. */
@keyframes ab-groeit {
  from { opacity: 0; transform: scaleX(0); }
  20%  { opacity: 1; }
  to   { opacity: 1; transform: scaleX(1); }
}
.ab-speelt .ab-blad .ab-label,
.ab-speelt .ab-bladregel,
.ab-speelt .ab-scheiding,
.ab-speelt .ab-fase .ab-woord {
  animation: ab-in 0.4s var(--ab-soepel) both;
  animation-delay: var(--vertraging, 0s);
}
.ab-speelt .ab-balk {
  animation: ab-groeit 0.7s var(--ab-soepel) both;
  animation-delay: var(--vertraging, 0s);
}
.ab-blad .ab-label      { --vertraging: 0.1s; }
.ab-bladregel--kop      { --vertraging: 0.35s; }
.ab-bladregel--r1       { --vertraging: 0.6s; }
.ab-bladregel--r2       { --vertraging: 0.8s; }
.ab-scheiding           { --vertraging: 1.0s; }
/* Het woord verschijnt net voor de balk die erbij hoort. */
.ab-fase--1             { --vertraging: 1.2s; }
.ab-fase--1 .ab-balk    { --vertraging: 1.35s; }
.ab-fase--2             { --vertraging: 1.9s; }
.ab-fase--2 .ab-balk    { --vertraging: 2.05s; }
.ab-fase--3             { --vertraging: 2.6s; }
.ab-fase--3 .ab-balk    { --vertraging: 2.75s; }

/* ---------- 03 oplevering ---------- */
/* De bol vult zich op het moment van afvinken. */
@keyframes ab-vink-bol {
  0%   { opacity: 0.4; transform: scale(0.7); background-color: var(--ab-vlak-2); border-color: var(--ab-lijn-sterk); }
  60%  { opacity: 1; transform: scale(1.08); background-color: var(--ab-accent); border-color: var(--ab-accent); }
  100% { opacity: 1; transform: scale(1); background-color: var(--ab-accent); border-color: var(--ab-accent); }
}
@keyframes ab-vink-streep { from { opacity: 0; } to { opacity: 1; } }
/* De rand van het gebouwde springt op grijs tot het moment van opleveren. */
@keyframes ab-in-gebruik {
  from { border-color: var(--ab-lijn-sterk); }
  to   { border-color: var(--ab-accent); }
}
/* Twee trage hartslagen en dan rust. Dit is het laatste wat beweegt, en
   dat is precies de boodschap: na de oplevering blijven we bereikbaar. */
@keyframes ab-hartslag {
  0%, 10%  { opacity: 0.3; }
  20%      { opacity: 1; }
  35%      { opacity: 0.3; }
  50%      { opacity: 1; }
  100%     { opacity: 0.55; }
}
.ab-speelt .ab-controle .ab-label,
.ab-speelt .ab-check b,
.ab-speelt .ab-pil,
.ab-speelt .ab-live {
  animation: ab-in 0.4s var(--ab-soepel) both;
  animation-delay: var(--vertraging, 0s);
}
.ab-speelt .ab-check i {
  animation: ab-vink-bol 0.45s var(--ab-soepel) both;
  animation-delay: var(--vertraging, 0s);
}
.ab-speelt .ab-check i::after {
  animation: ab-vink-streep 0.25s var(--ab-soepel) both;
  animation-delay: calc(var(--vertraging, 0s) + 0.2s);
}
.ab-speelt .ab-product {
  animation: ab-in-gebruik 0.5s var(--ab-soepel) both;
  animation-delay: 2.9s;
}
.ab-speelt .ab-live i {
  animation: ab-hartslag 2.4s ease-in-out both;
  animation-delay: 3.3s;
}
.ab-controle .ab-label { --vertraging: 0.2s; }
.ab-check--1 { --vertraging: 0.8s; }
.ab-check--2 { --vertraging: 1.5s; }
.ab-check--3 { --vertraging: 2.2s; }
.ab-pil      { --vertraging: 2.9s; }
.ab-live     { --vertraging: 3.3s; }

/* =====================  schermmaten  ===================== */
/* Onder 420 px is een kaart ongeveer 290 px breed. Dan wordt de scene te
   krap voor twee kolommen op de oorspronkelijke maten: het pand en het
   product krimpen, de panelen rechts krijgen de ruimte. */
/* Tussen 760 en 1180 px is de kaart al breed maar de scene nog 16:9, dus
   bijna 500 px hoog. De twee panelen rechts zouden dan van boven tot onder
   uitrekken en half leeg staan; hier krijgen ze de maat die ze op een lage
   band ook hebben. */
@media (min-width: 760px) and (max-width: 1179px) {
  .ab-notitie { top: 22%; bottom: 22%; }
  .ab-controle { top: 24%; bottom: 24%; }
}
@media (max-width: 420px) {
  .ab-scene { min-height: 200px; }
  .ab-pand { left: 6%; width: 26%; }
  .ab-luifel { left: -11.5%; width: 123%; }
  .ab-notitie { left: 42%; right: 4%; padding: 5% 6%; }
  .ab-blad { inset: 7% 8%; }
  .ab-product { left: 5%; width: 30%; }
  .ab-controle { left: 42%; right: 4%; }
  .ab-fase .ab-woord { min-width: 38px; }
}

/* =====================  ultrabreed: de tekening vult de kaart  =====================
   Zelfde punt van Ali als in dienstenblok.css, 25 aug 2026, en met opzet
   dezelfde drie regels: het venster loopt door tot vlak bij de rand van de
   kaart, wat erin staat wordt niet groter dan op een laptop, en de vrijgekomen
   breedte wordt gevuld door de compositie te spreiden.
   Gemeten op 3440 x 1440, voor deze sectie: kaart 1 had een gevel van 292 px
   en een grondlijn van 380 px in een scene van 1187, en de aantekening liep
   tot 1077 terwijl de scene tot 1670 doorloopt. Kaart 2 was het duidelijkst:
   het blad stond met max-width 760 px en margin-inline auto midden in een
   scene van 1187, met 213 px leeg aan elke kant.
   De grens ligt op 2600 px, dezelfde grens waarop de kaart breder wordt dan
   860 px. Op 2560 en daaronder verandert er niets aan de scenes. De hoogte van
   een scene ligt boven die grens vast op 368,6 px, dus alleen de breedte
   beweegt. */
@media (min-width: 2600px) {
  /* ---- 01 quick scan ----
     De gevel blijft precies even groot: een pand is een voorwerp, geen kader,
     en een gebouw dat op een breed scherm anderhalf keer zo groot wordt is
     precies wat Ali "te groot" noemde. Wat wel meegroeit is de aantekening
     rechts; dat is een vlak met regels erin, en die regels mogen langer. */
  /* De grondlijn hangt aan de GEVEL en niet aan de scene: de gevel heeft een
     bovengrens in px, dus een percentage van de scene liep op 2600 px onder
     het aantekenvlak door en stak er aan de rechterkant onderuit. Nu loopt
     hij tot 16 px voorbij de gevel, waar hij ook hoort. */
  .ab-scene--scan .ab-grond { left: 4%; width: calc(1% + min(34%, 292px) + 16px); }
  .ab-pand { left: 5%; }
  /* De bezoeker staat in procenten van de SCENE, de gevel heeft een boven-
     grens in px. Zonder deze regel schuift hij op een brede kaart van 54 px
     naast de deur naar 95 px erin. 7,5 procent houdt dezelfde afstand tot de
     deur als op een laptop. */
  .aanpakblok { --ab-persoon-x: 7.5%; }
  .ab-notitie { left: 42%; right: 5%; max-width: 660px; }
  /* ---- 02 voorstel en plan ----
     Het blad vult nu de scene in plaats van als een A4'tje in het midden te
     hangen: van 760 px naar 1093 px op 3440. De regels erin krijgen wel een
     bovengrens, anders wordt de zwarte kop een balk van 433 px (258 px op een
     laptop). De planning eronder mag wel meelopen: een balk in een tijdlijn is
     langer naarmate het blad breder is, en dat is precies wat een planning
     hoort te doen. Dat is ook wat het blad vult.
     De grenzen op die drie regels staan ruimer dan bij een voorwerp: 360, 560
     en 440 px tegen 258, 399 en 317 op een laptop. Reden: dit zijn tekst-
     REGELS op een blad, en een regel op een breder blad hoort langer te zijn.
     Bij 285 px bleef de bovenste helft van het blad zichtbaar leeg; gemeten
     op de uitsnede van 3440 px. */
  .ab-blad { inset: 6% 4%; max-width: none; }
  .ab-bladregel--kop { width: min(44%, 360px); }
  .ab-bladregel--r1  { width: min(68%, 560px); }
  .ab-bladregel--r2  { width: min(54%, 440px); }
  .ab-fase .ab-woord { width: min(20%, 130px); }
  /* ---- 03 oplevering ----
     Zelfde verdeling als kaart 01: het gebouwde scherm links houdt zijn maat,
     de controlelijst rechts loopt door tot de rechtermarge. */
  .ab-product { left: 5%; }
  .ab-controle { left: 40%; right: 5%; max-width: 660px; }
}
/* =====================  minder beweging  ===================== */
/* Wie in zijn systeem heeft staan dat hij minder beweging wil, krijgt de
   kaarten stil: aanpakblok.js zet de klasse .ab-speelt dan niet, dus er
   begint niets. Deze regel is de tweede sluiting, voor het geval de klasse
   er langs een andere weg toch op komt. */
@media (prefers-reduced-motion: reduce) {
  .aanpakblok *,
  .aanpakblok *::before,
  .aanpakblok *::after {
    animation: none !important;
    transition: none !important;
  }
}