/* aanbod.css, spoor mix: sectie 2, "Drie manieren om je handwerk kwijt te raken", in de vorm van de productkaarten van
   Other Stuff (21 oktober 2026, ../../twee-sporen/BRIEF-aanbod.md). Komt na stijl.css en kennismaken.css en gebruikt
   daaruit de kleuren, de letters, .label, .label-sm, .kop, .intro, .sectie-in, .kop-rij en .pijl. Alles wat nieuw is,
   heet ab-. Geen prijzen, nergens cursief, geen kapitalen, geen mono, niets schuin of in perspectief.

   Sinds 25 oktober 2026 zijn de drie vensters gelijk (Huub: "dat het allemaal in dezelfde stijl is, en dat het echt
   aansluit"): dezelfde browser met adresbalk, dezelfde maat en plek, dezelfde schaduw, letters en dichtheid, en binnenin
   hetzelfde ritme: een kopregel, één scène en onderaan een strook.

   De beelden in beeld/aanbod/ zijn uitsnedes van 4 bij 3 (1000 x 750, webp) uit de landschappen van de mix, warmer
   gegradeerd, zo gekozen dat de horizon in alle drie op ongeveer 14,5 procent van de hoogte ligt, net boven het venster:
   partner-zon uit mix-vallei-zon-midden (vanaf x 675, y 632, 1200 breed; de zon op 60 procent van de breedte),
   maatwerk-nevel uit mix-vallei-nevel (vanaf x 800, y 499, 1300 breed, met een warm verloop van boven naar onder) en
   training-heuvels uit mix-heuvels-ochtend (vanaf x 0, y 495, 1380 breed). Onderaan staat in een eigen blok de naad
   tussen kennismaken, de zin en de voet. */

/* ============ 2. Het aanbod: drie kaarten zoals bij Other Stuff ============ */
/* De sectie zelf (inkt, de ronde rand over de opening, de ruimte onderaan voor de trechter) blijft uit stijl.css. Hier
   alleen een iets bredere maat, zodat de kaarten en hun vensters groot genoeg zijn. */
.aanbod .ab-in { --ab-rand: min(var(--rand), 40px); max-width: calc(1280px + 2 * var(--ab-rand)); padding: 0 var(--ab-rand); }
.ab-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ab-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-kaart { display: flex; flex-direction: column; min-width: 0; padding: clamp(18px, 1.7vw, 24px); border-radius: 12px;
  background: #0f1829; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); }

/* Het beeld: de foto met daarop het venster. Het beeld is de maat voor alles in het venster (container). */
.ab-beeld { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; isolation: isolate; container-type: inline-size; background: #1b2436; }
.ab-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* De tekst onder het beeld: label, kop van twee regels, één of twee zinnen, wat je houdt en de witte knop. */
.ab-lijf { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 2.1vw, 30px) 2px 2px; }
.ab-soort { color: var(--hemel); }
.ab-kop { margin-top: 16px; font-family: var(--kop); font-weight: 500; font-size: clamp(21px, 1.62vw, 24px); line-height: 1.14; letter-spacing: -0.018em; color: #fff; text-wrap: balance; }
.ab-tekst { margin-top: 14px; font-size: 15.5px; line-height: 1.52; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.ab-voet { margin-top: auto; padding-top: 20px; }
.ab-houd { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.ab-knop { margin-top: 20px; display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--inkt);
  font-weight: 500; font-size: 14.5px; line-height: 1; white-space: nowrap; transition: background 0.2s ease; }
.ab-knop:hover { background: var(--tint); }
.ab-knop:hover .pijl, .ab-knop:focus-visible .pijl { width: 10px; margin-left: 10px; }
.ab-knop:focus-visible { outline-color: var(--hemel); }

/* ============ Het venster: één vorm voor alle drie ============ */
/* Alles in het venster is gemeten in --px: één pixel van een beeld dat 680 px breed (en dus 510 hoog) is. Zo blijft het
   scherm op elke breedte in verhouding, als een echte schermafbeelding die kleiner is gemaakt, en blijven de letters
   scherp. --h is een haarlijn. Het venster is 624 x 385 en staat 28 van de zijkanten en de onderrand; boven blijft een
   band van 97 vrij voor de lucht, het licht en de horizon. Diepte alleen door schaduw. */
.ab-app { --px: calc(100cqw / 680); --h: max(0.5px, calc(1 * var(--px)));
  position: absolute; z-index: 1; left: calc(28 * var(--px)); top: calc(97 * var(--px)); width: calc(624 * var(--px)); height: calc(385 * var(--px));
  display: flex; flex-direction: column; overflow: hidden; background: #fbfbf9; color: var(--inkt);
  border-radius: calc(12 * var(--px)); font-family: var(--tekst); font-size: calc(10 * var(--px)); line-height: 1.3; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 var(--h) rgba(255, 255, 255, 0.6), 0 calc(34 * var(--px)) calc(64 * var(--px)) calc(-20 * var(--px)) rgba(28, 16, 4, 0.55), 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(28, 16, 4, 0.16); }
.ab-app svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* De browser: drie stipjes, het adres met het slotje (waar het draait) en de chip voorbeeld. */
.ab-browser { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(25 * var(--px)); padding: 0 calc(10 * var(--px));
  background: linear-gradient(180deg, #f4f5f6, #eef0f2); border-bottom: var(--h) solid rgba(11, 18, 32, 0.08); }
.ab-stippen { display: flex; gap: calc(5 * var(--px)); }
.ab-stippen i { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: #d3d7dd; }
.ab-adres { display: inline-flex; align-items: center; gap: calc(5 * var(--px)); padding: calc(3 * var(--px)) calc(40 * var(--px)); border-radius: calc(6 * var(--px)); background: #fff;
  box-shadow: inset 0 0 0 var(--h) rgba(11, 18, 32, 0.07); font-size: calc(9.5 * var(--px)); color: var(--leisteen); white-space: nowrap; }
.ab-adres svg { width: calc(9 * var(--px)); height: calc(9 * var(--px)); color: var(--mist); }
.ab-vb { justify-self: end; padding: calc(2 * var(--px)) calc(8 * var(--px)); border-radius: 999px; background: #e4e8ee; color: var(--mist); font-size: calc(9 * var(--px)); font-weight: 500; white-space: nowrap; }

/* De kop van de app: het teken en de naam van de klant, de tabs, zoeken en wie er is ingelogd. */
.ab-appkop { flex: none; display: flex; align-items: stretch; gap: calc(20 * var(--px)); height: calc(33 * var(--px)); padding: 0 calc(14 * var(--px)); background: #fff; border-bottom: var(--h) solid rgba(11, 18, 32, 0.08); }
.ab-merk { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); font-family: var(--kop); font-weight: 600; font-size: calc(12 * var(--px)); letter-spacing: -0.01em; white-space: nowrap; }
.ab-merk i { width: calc(18 * var(--px)); height: calc(18 * var(--px)); border-radius: calc(5 * var(--px)); display: grid; place-items: center; background: var(--inkt); color: #fff; font-style: normal; font-size: calc(10 * var(--px)); font-weight: 600; }
.ab-tabs { display: flex; gap: calc(15 * var(--px)); font-size: calc(10 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-tabs > * { display: flex; align-items: center; }
.ab-tabs b { font-weight: 500; color: var(--inkt); box-shadow: inset 0 calc(-2 * var(--px)) 0 var(--blauw); }
.ab-appkop-r { margin-left: auto; display: flex; align-items: center; gap: calc(11 * var(--px)); color: var(--mist); }
.ab-appkop-r svg { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.ab-av { flex: none; width: calc(20 * var(--px)); height: calc(20 * var(--px)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(7.5 * var(--px)); font-weight: 600; line-height: 1;
  background: #dbe8ff; color: var(--blauw-diep); }
.ab-av-2 { background: #e0f2fe; color: #0369a1; }
.ab-av-3 { background: #e9edf3; color: var(--leisteen); }
.ab-av-4 { background: var(--inkt); color: #fff; }
.ab-av-5 { background: #c7dafc; color: var(--blauw-diep); }

/* De inhoud, in alle drie hetzelfde ritme: een kopregel (teken, titel, een regel eronder en rechts één ding), één
   scène die de ruimte vult, en onderaan een strook van dezelfde hoogte. */
.ab-inhoud { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--px)); padding: calc(13 * var(--px)) calc(14 * var(--px)) calc(14 * var(--px)); }
.ab-kopregel { flex: none; display: flex; align-items: center; gap: calc(10 * var(--px)); min-width: 0; }
.ab-kr-ic { flex: none; width: calc(30 * var(--px)); height: calc(30 * var(--px)); border-radius: calc(8 * var(--px)); display: grid; place-items: center; background: var(--tint); color: var(--blauw); }
.ab-kr-ic svg { width: calc(15 * var(--px)); height: calc(15 * var(--px)); }
.ab-kr-tekst { flex: 1; min-width: 0; }
.ab-titel { font-family: var(--kop); font-weight: 500; font-size: calc(18 * var(--px)); line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.ab-sub { display: flex; align-items: center; gap: calc(4 * var(--px)); margin-top: calc(4 * var(--px)); font-size: calc(9 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-sub svg { width: calc(10 * var(--px)); height: calc(10 * var(--px)); color: var(--blauw); stroke-width: 1.9; }
.ab-kr-rechts { flex: none; margin-left: auto; }
.ab-scene { position: relative; flex: 1; min-height: 0; }
.ab-strook { flex: none; height: calc(42 * var(--px)); display: flex; align-items: center; gap: calc(10 * var(--px)); padding: 0 calc(6 * var(--px)) 0 calc(10 * var(--px)); border-radius: calc(9 * var(--px));
  background: #fff; box-shadow: inset 0 0 0 var(--h) rgba(11, 18, 32, 0.09), 0 calc(1 * var(--px)) calc(2 * var(--px)) rgba(11, 18, 32, 0.03); }

/* Een wit kaartje binnen de scène: de stappen, de rit, de tabel en de mensen. */
.ab-stap-kaart, .ab-tabel2, .ab-mens { border-radius: calc(9 * var(--px)); background: #fff; box-shadow: inset 0 0 0 var(--h) rgba(11, 18, 32, 0.09), 0 calc(1 * var(--px)) calc(2 * var(--px)) rgba(11, 18, 32, 0.03); }

/* Labels en stipjes. Groen alleen voor live en in gebruik; volgende, voorstel en getest in de blauwtrap. */
.ab-pil { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--px)); padding: calc(3 * var(--px)) calc(8 * var(--px)) calc(3 * var(--px)) calc(7 * var(--px)); border-radius: 999px;
  font-size: calc(8.5 * var(--px)); font-weight: 600; white-space: nowrap; }
.ab-pil::before { content: ""; flex: none; width: calc(5 * var(--px)); height: calc(5 * var(--px)); border-radius: 50%; background: currentColor; }
.ab-pil-blauw { background: var(--tint); color: var(--blauw); }
.ab-pil-groen { background: #e6f6ee; color: #0b8459; }
.ab-pil-groen::before { background: var(--groen); }
.ab-pil-grijs { background: #eef1f5; color: var(--leisteen); }
.ab-pil-grijs::before { background: #a3adbd; }
.ab-stip { position: relative; flex: none; width: calc(6 * var(--px)); height: calc(6 * var(--px)); border-radius: 50%; }
.ab-stip-live, .ab-stip-groen { background: var(--groen); }
.ab-stip-volgende { box-shadow: inset 0 0 0 calc(1.4 * var(--px)) var(--blauw); }
.ab-stip-blauw { background: var(--blauw); }
.ab-stip-grijs { background: #a3adbd; }
/* Het enige dat beweegt: de stipjes bij live ademen, elk op een eigen moment. */
.ab-stip-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--groen); opacity: 0; animation: ab-adem 3.2s ease-out infinite; }
.ab-klussen li:nth-child(2) .ab-stip-live::after { animation-delay: 1.1s; }
.ab-klussen li:nth-child(3) .ab-stip-live::after { animation-delay: 2.2s; }
@keyframes ab-adem { 0% { transform: scale(1); opacity: 0.5; } 60%, 100% { transform: scale(2.8); opacity: 0; } }

/* ============ Venster 1: de automatisering van Polderpad, als stroom ============ */
/* Kopregel: de automatisering, de ochtendronde van Dailight en rechts Live met de schakelaar aan. */
.ab-nagelopen { color: var(--leisteen); }
.ab-live { display: inline-flex; align-items: center; gap: calc(7 * var(--px)); padding: calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(10 * var(--px)); border-radius: 999px;
  background: #e6f6ee; color: #0b8459; font-size: calc(10 * var(--px)); font-weight: 600; }
.ab-schakel { position: relative; width: calc(24 * var(--px)); height: calc(14 * var(--px)); border-radius: 999px; background: var(--groen); }
.ab-schakel::after { content: ""; position: absolute; top: calc(2 * var(--px)); right: calc(2 * var(--px)); width: calc(10 * var(--px)); height: calc(10 * var(--px)); border-radius: 50%;
  background: #fff; box-shadow: 0 calc(1 * var(--px)) calc(2 * var(--px)) rgba(6, 60, 40, 0.3); }

/* De scène: drie stappen aan een lijn van licht, familie van de draad van de agent in sectie 5, maar klein en stil.
   De lijn loopt van het midden van het eerste icoon naar dat van het laatste; de iconen staan erop. */
.ab-stroom { --ab-ic: calc(30 * var(--px)); --ab-gat: calc(22 * var(--px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: var(--ab-gat); }
.ab-stroom::before { content: ""; position: absolute; z-index: 0; top: calc(var(--ab-ic) / 2 - 1 * var(--px)); height: calc(2 * var(--px));
  left: calc((100% - 2 * var(--ab-gat)) / 6); right: calc((100% - 2 * var(--ab-gat)) / 6); border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, var(--blauw) 50%, #93c5fd); box-shadow: 0 0 calc(6 * var(--px)) rgba(96, 165, 250, 0.75); }
.ab-stap { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ab-stap-ic { flex: none; width: var(--ab-ic); height: var(--ab-ic); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blauw);
  box-shadow: 0 0 0 calc(1.5 * var(--px)) rgba(37, 99, 235, 0.5), 0 0 0 calc(5 * var(--px)) rgba(96, 165, 250, 0.13), 0 0 calc(14 * var(--px)) rgba(96, 165, 250, 0.5); }
.ab-stap-ic svg { width: calc(15 * var(--px)); height: calc(15 * var(--px)); }
.ab-stap-ic-agent { background: var(--blauw); color: #fff; box-shadow: 0 0 0 calc(1.5 * var(--px)) var(--blauw), 0 0 0 calc(5 * var(--px)) rgba(96, 165, 250, 0.22), 0 0 calc(16 * var(--px)) rgba(37, 99, 235, 0.6); }
.ab-stap-kaart { align-self: stretch; flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: calc(10 * var(--px)); padding: calc(9 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px)); }
.ab-door { position: absolute; z-index: 2; top: calc(var(--ab-ic) / 2 - 7 * var(--px)); right: calc(-1 * var(--ab-gat) / 2 - 7 * var(--px)); width: calc(14 * var(--px)); height: calc(14 * var(--px));
  border-radius: 50%; display: grid; place-items: center; background: #fbfbf9; color: var(--blauw); }
.ab-door svg { width: calc(11 * var(--px)); height: calc(11 * var(--px)); stroke-width: 2; }
.ab-stap-naam { display: flex; align-items: baseline; justify-content: space-between; gap: calc(6 * var(--px)); font-size: calc(10.5 * var(--px)); font-weight: 600; white-space: nowrap; }
.ab-stap-naam time { font-size: calc(8.5 * var(--px)); font-weight: 400; color: var(--mist); }
.ab-stap-wie { display: flex; align-items: center; gap: calc(6 * var(--px)); margin-top: calc(8 * var(--px)); white-space: nowrap; }
.ab-stap-wie > span { display: grid; min-width: 0; font-size: calc(8.5 * var(--px)); line-height: 1.25; color: var(--mist); }
.ab-stap-wie b { font-size: calc(9.5 * var(--px)); font-weight: 600; color: var(--inkt); }
.ab-bubbel { margin-top: calc(6 * var(--px)); padding: calc(6 * var(--px)) calc(8 * var(--px)); border-radius: calc(3 * var(--px)) calc(9 * var(--px)) calc(9 * var(--px)) calc(9 * var(--px)); background: #f1f3f6;
  font-size: calc(9.5 * var(--px)); line-height: 1.35; text-wrap: pretty; }
.ab-bubbel + .ab-bubbel { margin-top: calc(4 * var(--px)); }
.ab-bubbel-uit { margin-left: calc(12 * var(--px)); border-radius: calc(9 * var(--px)) calc(3 * var(--px)) calc(9 * var(--px)) calc(9 * var(--px)); background: var(--tint); }
.ab-vinken { display: grid; gap: calc(7 * var(--px)); margin-top: calc(9 * var(--px)); }
.ab-vinken li { display: flex; align-items: flex-start; gap: calc(6 * var(--px)); font-size: calc(9.5 * var(--px)); line-height: 1.3; text-wrap: balance; }
.ab-vinken svg { width: calc(12 * var(--px)); height: calc(12 * var(--px)); padding: calc(2 * var(--px)); border-radius: 50%; background: #e6f6ee; color: #0b8459; stroke-width: 2.2; }
.ab-stap-rit { margin-top: calc(8 * var(--px)); padding: calc(6 * var(--px)) calc(8 * var(--px)); border-radius: calc(6 * var(--px)); background: #f1f6ff; box-shadow: inset 0 0 0 var(--h) rgba(37, 99, 235, 0.35); }
.ab-stap-rit > span { display: grid; gap: calc(1 * var(--px)); font-size: calc(8.5 * var(--px)); color: var(--mist); }
.ab-stap-rit b { font-size: calc(9.5 * var(--px)); font-weight: 600; color: var(--inkt); }
.ab-stap-kaart .ab-pil { align-self: flex-start; margin-top: auto; }
.ab-stap-kaart .ab-bubbel-uit { margin-bottom: calc(8 * var(--px)); }

/* De strook: de vier automatiseringen van Polderpad, de open klus gemarkeerd. */
.ab-klussen { gap: calc(4 * var(--px)); padding: calc(4 * var(--px)); list-style: none; }
.ab-klussen li { position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: calc(3 * var(--px)); padding: 0 calc(8 * var(--px)); border-radius: calc(6 * var(--px)); }
.ab-klussen li + li::before { content: ""; position: absolute; left: calc(-2.5 * var(--px)); top: 26%; bottom: 26%; width: var(--h); background: rgba(11, 18, 32, 0.09); }
.ab-klussen .ab-klus-open + li::before { display: none; }
.ab-klussen b { font-size: calc(9 * var(--px)); font-weight: 500; white-space: nowrap; }
.ab-klussen span { display: flex; align-items: center; gap: calc(4 * var(--px)); font-size: calc(8 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-klussen small { font-size: inherit; }
.ab-klus-open { background: var(--tint); box-shadow: inset 0 0 0 var(--h) rgba(37, 99, 235, 0.28); }
.ab-klus-open b { color: var(--blauw-diep); }

/* ============ Venster 2: de planner van Polderpad, op een eigen domein ============ */
.ab-kies { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); padding: calc(5 * var(--px)) calc(7 * var(--px)) calc(5 * var(--px)) calc(10 * var(--px)); border-radius: calc(7 * var(--px));
  background: #fff; box-shadow: inset 0 0 0 var(--h) rgba(11, 18, 32, 0.12); font-size: calc(9.5 * var(--px)); font-weight: 500; color: var(--leisteen); white-space: nowrap; }
.ab-kies svg { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
/* De scène: links de rit met het kaartje, rechts de dagplanning met het voorstel als blauwe rij. */
.ab-planner { display: grid; grid-template-columns: calc(168 * var(--px)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: calc(14 * var(--px)); }
.ab-rit { min-width: 0; display: flex; flex-direction: column; }
.ab-kaartje { position: relative; flex: 1 1 calc(82 * var(--px)); min-height: calc(64 * var(--px)); border-radius: calc(8 * var(--px)); overflow: hidden; box-shadow: inset 0 0 0 var(--h) rgba(11, 18, 32, 0.08); }
.ab-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-map text { font-family: var(--tekst); font-weight: 500; }
.ab-app .ab-map { stroke: none; }
.ab-rit-naam { margin-top: calc(9 * var(--px)); font-family: var(--kop); font-weight: 500; font-size: calc(12.5 * var(--px)); line-height: 1.15; letter-spacing: -0.01em; }
.ab-rit-sub { margin-top: calc(2 * var(--px)); font-size: calc(8.5 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-details { margin-top: calc(7 * var(--px)); list-style: none; }
.ab-details li { display: flex; align-items: center; gap: calc(5 * var(--px)); padding: calc(4.6 * var(--px)) 0; border-top: var(--h) solid rgba(11, 18, 32, 0.06); font-size: calc(8.8 * var(--px)); white-space: nowrap; }
.ab-details svg { width: calc(10 * var(--px)); height: calc(10 * var(--px)); color: #94a3b8; }
.ab-details span { color: var(--mist); }
.ab-details b { margin-left: auto; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

.ab-tabel2 { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.ab-tabel2 ul { flex: 1; display: grid; grid-auto-rows: minmax(calc(26 * var(--px)), 1fr); list-style: none; }
.ab-t2-kop, .ab-tabel2 li { display: grid; grid-template-columns: calc(72 * var(--px)) minmax(0, 1.15fr) minmax(0, 1fr) calc(56 * var(--px)); align-items: center; gap: calc(6 * var(--px)); padding: 0 calc(9 * var(--px)); }
.ab-t2-kop { height: calc(22 * var(--px)); background: #f7f8fa; border-bottom: var(--h) solid rgba(11, 18, 32, 0.07); font-size: calc(8.5 * var(--px)); color: #8b95a7; }
.ab-tabel2 li { font-size: calc(9.5 * var(--px)); white-space: nowrap; }
.ab-tabel2 li + li { border-top: var(--h) solid rgba(11, 18, 32, 0.06); }
.ab-tabel2 li > span { overflow: hidden; text-overflow: ellipsis; }
.ab-tabel2 li > span:first-child { color: var(--leisteen); }
.ab-t2-st { justify-self: end; display: inline-flex; align-items: center; gap: calc(3 * var(--px)); font-size: calc(8.5 * var(--px)); color: var(--mist); }
.ab-t2-st svg { width: calc(9 * var(--px)); height: calc(9 * var(--px)); color: #94a3b8; stroke-width: 1.8; }
.ab-tabel2 .ab-t2-nieuw { background: #f1f6ff; box-shadow: inset 0 0 0 var(--h) rgba(37, 99, 235, 0.35); border-radius: calc(5 * var(--px)); }
.ab-tabel2 .ab-t2-nieuw + li { border-top-color: transparent; }
.ab-t2-nieuw > span:nth-child(2) { font-weight: 600; }
.ab-t2-nieuw .ab-t2-st { padding: calc(2 * var(--px)) calc(7 * var(--px)); border-radius: 999px; background: var(--blauw); color: #fff; font-weight: 500; }
.ab-t2-vrij > span { color: #a3adbd !important; }

/* De strook: het voorstel en de knop Akkoord, het moment vóór het ja. */
.ab-vs-kop { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--px)); font-size: calc(9.5 * var(--px)); font-weight: 600; color: var(--blauw); }
.ab-vs-kop svg { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }
.ab-vs-tekst { flex: 1; min-width: 0; font-size: calc(9.5 * var(--px)); line-height: 1.35; }
.ab-akkoord { flex: none; display: inline-flex; align-items: center; gap: calc(5 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); border-radius: calc(7 * var(--px));
  background: var(--blauw); color: #fff; font-size: calc(10 * var(--px)); font-weight: 500; box-shadow: 0 calc(4 * var(--px)) calc(10 * var(--px)) calc(-4 * var(--px)) rgba(37, 99, 235, 0.7); }
.ab-akkoord svg { width: calc(10 * var(--px)); height: calc(10 * var(--px)); }

/* ============ Venster 3: de workshop van Noordkaap Zorg ============ */
/* De scène: een bord met alle negen deelnemers, elk met een eigen taak en hoe ver die is, in drie stappen: workshop,
   getest, in gebruik. Vier staan er met naam; de andere vijf samen in één tegel, met hun voorletters. */
.ab-groep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--px)); }
.ab-mens { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: calc(8 * var(--px));
  padding: calc(10 * var(--px)) calc(10 * var(--px)) calc(9 * var(--px)); }
.ab-mens > .ab-av { width: calc(26 * var(--px)); height: calc(26 * var(--px)); font-size: calc(9 * var(--px)); }
.ab-mens-tekst { display: grid; align-content: center; gap: calc(2 * var(--px)); min-width: 0; white-space: nowrap; }
.ab-mens-tekst b { font-size: calc(10.5 * var(--px)); font-weight: 600; }
.ab-mens-tekst span { font-size: calc(9.5 * var(--px)); color: var(--leisteen); }
.ab-stand { grid-column: 1 / -1; grid-row: 3; display: flex; gap: calc(3 * var(--px)); margin-top: calc(10 * var(--px)); }
.ab-stand i { flex: 1; height: calc(4 * var(--px)); border-radius: 999px; background: #e9edf3; }
.ab-mens-gebruik .ab-stand i { background: var(--groen); }
.ab-mens-getest .ab-stand i:nth-child(-n + 2) { background: var(--blauw); }
.ab-mens-workshop .ab-stand i:first-child { background: #a3adbd; }
.ab-mens-voet { grid-column: 1 / -1; grid-row: 4; display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--px)); margin-top: calc(8 * var(--px)); font-size: calc(8.5 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-mens-rest { grid-column: span 2; }
.ab-rest-gezichten { display: flex; align-items: center; padding-left: calc(5 * var(--px)); }
.ab-rest-gezichten .ab-av { width: calc(26 * var(--px)); height: calc(26 * var(--px)); margin-left: calc(-5 * var(--px)); font-size: calc(8.5 * var(--px)); box-shadow: 0 0 0 calc(1.5 * var(--px)) #fff; }
.ab-mens-rest .ab-mens-voet { justify-content: flex-start; }

/* De strook: de bibliotheek, waarin het team bewaart wat werkt. */
.ab-bieb-ic { flex: none; width: calc(26 * var(--px)); height: calc(26 * var(--px)); border-radius: calc(7 * var(--px)); display: grid; place-items: center; background: var(--tint); color: var(--blauw); }
.ab-bieb-ic svg { width: calc(13 * var(--px)); height: calc(13 * var(--px)); }
.ab-bieb-tekst { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: calc(6 * var(--px)); font-size: calc(9.5 * var(--px)); white-space: nowrap; }
.ab-bieb-tekst b { font-weight: 600; }
.ab-bieb-tel { flex: none; display: flex; gap: calc(10 * var(--px)); padding-right: calc(6 * var(--px)); font-size: calc(8.5 * var(--px)); color: var(--mist); white-space: nowrap; }
.ab-bieb-tel > span { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }

/* ============ Van 760 tot 1180 px: elke kaart liggend, het beeld links en de tekst rechts ============ */
@media (max-width: 1179px) {
  .ab-rij { grid-template-columns: 1fr; gap: 16px; }
  .ab-kaart { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3.4vw, 44px); padding: 18px; }
  .ab-lijf { padding: 10px 14px 10px 0; flex: none; height: 100%; justify-content: center; }
  .ab-voet { margin-top: 0; padding-top: 22px; }
  .ab-kop { max-width: 17em; }
}
/* ============ Smaller dan 760 px: de kaarten onder elkaar, het beeld over de volle breedte van de kaart ============ */
@media (max-width: 759px) {
  .aanbod .ab-in { --ab-rand: var(--rand); }
  .ab-rij { gap: 14px; }
  .ab-kaart { display: flex; align-items: stretch; width: 100%; max-width: 600px; margin: 0 auto; padding: 10px; }
  .ab-lijf { padding: 22px 10px 12px; height: auto; }
  .ab-voet { padding-top: 18px; }
  .ab-kop { max-width: none; font-size: clamp(21px, 5.8vw, 24px); }
  .ab-tekst { font-size: 15px; }
  .ab-knop { margin-top: 18px; }
}
/* ============ De telefoon: het beeld vierkant, de vensters gelijk en groter ============ */
/* Onder 600 px wordt het beeld vierkant en meet het venster in een beeld van 490 px breed: de letters worden zo ruim een
   derde groter. Alle drie de vensters houden dezelfde maat en plek (450 x 377, 20 van de zijkanten en de onderrand, 93
   van boven) en hetzelfde ritme. Wat dan niet past, valt weg: de derde tab, in de stroom per stap een regel (het
   tweede appje, twee vinkjes, het antwoord) en in de strook de status naast de stipjes, in de planner de kolom met de
   rit (die staat ook in de tabel en in het voorstel), in de workshop de tegel met de vijf collega's (de kop noemt nog
   alle negen). */
@media (max-width: 599px) {
  .ab-beeld { aspect-ratio: 1 / 1; }
  .ab-app { --px: calc(100cqw / 490); left: calc(20 * var(--px)); top: calc(93 * var(--px)); width: calc(450 * var(--px)); height: calc(377 * var(--px)); }
  .ab-app .ab-tab-extra, .ab-app .ab-smal-weg { display: none; }
  .ab-browser { grid-template-columns: auto 1fr auto; gap: calc(8 * var(--px)); }
  .ab-adres { justify-self: center; padding: calc(3 * var(--px)) calc(16 * var(--px)); }
  /* Venster 1: per stap de kern; in de strook de vier namen met hun stipje, zonder de status ernaast. */
  .ab-stroom { --ab-gat: calc(16 * var(--px)); }
  .ab-klussen li { flex-direction: row; align-items: center; gap: calc(5 * var(--px)); padding: 0 calc(6 * var(--px)); }
  .ab-klussen span { order: -1; }
  .ab-klussen small { display: none; }
  .ab-klussen b { white-space: normal; line-height: 1.2; text-wrap: balance; }
  /* Venster 2: de dagplanning over de hele breedte; de rit zelf staat in de tabel en in het voorstel. */
  .ab-planner { grid-template-columns: minmax(0, 1fr); }
  .ab-rit { display: none; }
  /* Venster 3: de vier deelnemers met naam twee aan twee, zodat elke taak naast het gezicht past. */
  .ab-groep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============ Naad onderaan: kennismaken, de zin in het licht en de voet (21 oktober 2026) ============ */
/* Sinds de quote (12) en de studio (14) uit de mix zijn, staat de zin direct onder het warme papier van kennismaken.
   De quote zorgde voor de overgang van papier naar nachtblauw; nu doet de zin dat zelf: hij schuift met dezelfde
   ronde rand als de andere vellen over het papier. En de voet begint in de kleur waarin de muur van de zin eindigt,
   met de korrel die vlak voor de naad uitdooft, zodat daar geen streep meer staat. */
.zin { z-index: 8; margin-top: -34px; border-radius: 34px 34px 0 0; box-shadow: 0 -24px 50px -30px rgba(10, 18, 41, 0.5); }
.zin > .korrel { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
@media (max-width: 819px) {
  .zin { margin-top: -26px; border-radius: 26px 26px 0 0; }
}

/* ============ Op het veld (27 oktober 2026): drie witte kaarten in plaats van een donker blok ============ */
/* Besluit 14 van BRIEF-veld-mix.md (Huub, 20:48: "zoals nu is er dan ineens een donker blok, we moeten die stijl gewoon
   goed over de hele website doortrekken"). De sectie heeft geen eigen grond meer en geen ronde rand over de opening; de
   kaarten zijn wit met de schaduw en de dunne rand van de dienstenkaarten, de tekst in inkt en leisteen, het label in
   het diepe blauw van de labels op het veld, en de knop een randknop in de blauwtrap (wit op wit zou wegvallen). De foto
   met het venster erin blijft zoals hij was. */
.op-veld .aanbod { background: transparent; color: var(--inkt); border-radius: 0; margin-top: 0; box-shadow: none; padding-bottom: clamp(48px, 4.6vw, 64px); }
.op-veld .aanbod .label { color: #1d3ca6; }
.op-veld .aanbod .label::before { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.op-veld .aanbod .intro { color: var(--leisteen); }
.op-veld .aanbod .bron { color: var(--mist); }
.op-veld .ab-kaart { background: #fff; border: 0; box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
/* De soort als chip in de vorm van een knop (Huub, 28 oktober 08:5x: "dit mogen eigenlijk ook meer een soort van buttons
   zijn, dat het iets meer opvalt"): een pil in de lichte blauwtrap met een stip, op de meest gekozen een witte pil. */
.op-veld .ab-soort { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: rgba(37, 99, 235, 0.09); color: var(--blauw-diep); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22); font-size: 13.5px; line-height: 1; }
.op-veld .ab-soort::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blauw); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
.op-veld .ab-kop { color: var(--inkt); }
.op-veld .ab-tekst { color: var(--leisteen); }
.op-veld .ab-houd { color: #1b2436; }
.op-veld .ab-knop { background: transparent; color: var(--blauw-diep); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.op-veld .ab-knop:hover { background: var(--blauw); color: #fff; box-shadow: inset 0 0 0 1px var(--blauw); }
.op-veld .ab-knop:focus-visible { outline-color: var(--blauw); }
.op-veld .ab-app { box-shadow: 0 0 0 var(--h) rgba(255, 255, 255, 0.6), 0 calc(34 * var(--px)) calc(64 * var(--px)) calc(-20 * var(--px)) rgba(28, 16, 4, 0.45), 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(28, 16, 4, 0.14); }
@media (max-width: 819px) { .op-veld .aanbod { margin-top: 0; border-radius: 0; padding-bottom: 48px; } }

/* ============ Kleur op de kaarten (27 oktober 2026, 20:57; 28 oktober 08:42 de meest gekozen in het midden) ============ */
/* Besluit 17 van BRIEF-veld-mix.md (Huub: "niet overal witte stukken ... speel met wat sexy kleuren") en Huub op 28 oktober:
   "ik wil juist de middelste, de automation partner, dat dat als een soort meest gekozen wordt en dat die dan dus opvalt
   in kleur, maar dan iets subtieler". De twee buitenste kaarten zijn licht (wit met een blauwe gloed van onder, en
   ochtendlicht naar hemelblauw), de middelste staat op een licht blauw veld in de blauwtrap met een blauwe rand, een
   blauwe schaduw, een gevulde blauwe knop en bovenin het kenmerk Meest gekozen. De tekst blijft inkt, zodat de kaart
   opvalt zonder het felle blauwe blok van 27 oktober. Op smalle schermen staat hij bovenaan. */
.op-veld .ab-rij > .ab-kaart:nth-child(1) { background: radial-gradient(90% 60% at 72% 112%, rgba(96, 165, 250, 0.42), rgba(96, 165, 250, 0) 70%), linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #f2f7ff 100%); }
.op-veld .ab-rij > .ab-kaart:nth-child(3) { background: radial-gradient(70% 60% at 0% 100%, rgba(255, 214, 150, 0.62), rgba(255, 214, 150, 0) 62%), radial-gradient(60% 55% at 100% 62%, rgba(191, 219, 254, 0.95), rgba(191, 219, 254, 0) 66%), linear-gradient(160deg, #f6f9ff 0%, #fdf7ee 100%);
  box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }

.ab-kaart-gekozen { position: relative; }
.op-veld .ab-kaart-gekozen { background: radial-gradient(80% 45% at 50% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%), radial-gradient(90% 60% at 60% 112%, rgba(96, 165, 250, 0.5), rgba(96, 165, 250, 0) 70%), linear-gradient(180deg, #e9f1ff 0%, #dbe8ff 100%);
  box-shadow: 0 44px 90px -48px rgba(37, 99, 235, 0.55), 0 2px 8px -4px rgba(29, 78, 216, 0.18), inset 0 0 0 1.5px rgba(37, 99, 235, 0.42); }
.op-veld .ab-kaart-gekozen .ab-soort { background: #fff; color: var(--blauw-diep); box-shadow: 0 8px 18px -10px rgba(29, 78, 216, 0.55), inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
.op-veld .ab-kaart-gekozen .ab-knop { background: var(--blauw); color: #fff; box-shadow: 0 12px 26px -14px rgba(29, 78, 216, 0.75); }
.op-veld .ab-kaart-gekozen .ab-knop:hover { background: var(--blauw-diep); color: #fff; box-shadow: 0 12px 26px -14px rgba(29, 78, 216, 0.75); }
.ab-gekozen { position: absolute; z-index: 2; top: calc(clamp(18px, 1.7vw, 24px) + 12px); right: calc(clamp(18px, 1.7vw, 24px) + 12px); margin: 0; padding: 7px 12px; border-radius: 999px;
  background: var(--blauw); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: 0.005em; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(29, 78, 216, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
@media (max-width: 1179px) {
  .ab-kaart-gekozen { order: -1; }
  .ab-gekozen { top: 30px; right: 30px; }
}
@media (max-width: 759px) {
  .ab-gekozen { top: 22px; right: 22px; }
}