/* Ailex — kleurlaag (23-10-2026, klus "Ailex kleurrijk ontwerp en kaartjes", Camila; ontwerp: werk-os/bestanden/werk2/martha/ailex-kleurrijk-ontwerp.md).
   Alex 23-10: "Het ziet er allemaal zo simpel uit", "alles moet kleurrijk worden, net als een app", "neem je tijd en maak het mooi".
   Echt de laatste stylesheet (index.html), wint van styles.css, speelgoed.css en gamekaart.css. Eén laag tokens:
   - --ax-*  het oppervlak (kaart, tekst, lijn, schaduw), licht en donker (html[data-thema="donker"]);
   - --f-*   de kleurfamilie van één kaartje, gezet op .vb[data-gk] (gamekaart.js kiest de familie per soort):
             a = begin van de kop, b = eind van de kop, t = tekst op de kop, diep = soortkleur als tekst op wit,
             zacht = getinte achtergrond, rand = zachte lijn, gloed = gekleurde schaduw.
   Geen zwart lint en geen inktrand meer: een kop met verloop, icoon in een wit muntje, glans; zachte schaduw in de soortkleur.
   Binnen een kaartje wijzen de oude kleurnamen (--ink, --yellow, --paper ...) naar de familie, zodat ook de ruim 90 onderdelen van
   de demokaartjes (voorbeelden.js) meekleuren zonder dat er nog ergens zwart-geel in staat.
   Contrast (WCAG AA 4,5:1): elke kop haalt met zijn tekstkleur minstens 4,5:1 op de lichtste kant (proef: kaartjes_proef, gamekaart_proef).
   Beweging: alleen transform/opacity, tik = even indeuken (120 ms); uit bij prefers-reduced-motion, .ju-rustig en .m3g-rustig. */

:root {
  --ax-oppervlak: #FFFFFF; --ax-oppervlak-2: #F4F5FF; --ax-tekst: #262A4D; --ax-tekst-zacht: #5A5F8C; --ax-lijn: rgba(38, 42, 77, .10);
  --ax-schaduw-vast: 0 1px 2px rgba(20, 22, 60, .08); --ax-glans: rgba(255, 255, 255, .55);
  --ax-r-kaart: 20px; --ax-r-knop: 14px; --ax-letter: var(--sg-letter, 'SgRond', system-ui, sans-serif);
  --ax-tik: transform 120ms ease, box-shadow 120ms ease, opacity 200ms ease;
}

/* ---------- kleurfamilies (licht); "info" is de standaard, ook voor een kaartje dat nog geen familie heeft ---------- */
.vb, .vb[data-gk="info"] { --f-a: #4F5FF0; --f-b: #3341B8; --f-t: #FFFFFF; --f-diep: #3341B8; }
.vb[data-gk="weer"]    { --f-a: #C2410C; --f-b: #9A3412; --f-t: #FFFFFF; --f-diep: #9A3412; }
.vb[data-gk="agenda"]  { --f-a: #4C5BE8; --f-b: #2B37A8; --f-t: #FFFFFF; --f-diep: #2B37A8; }
.vb[data-gk="lijst"]   { --f-a: #0B7F61; --f-b: #075E48; --f-t: #FFFFFF; --f-diep: #086B52; }
.vb[data-gk="route"]   { --f-a: #7A50D6; --f-b: #5530A8; --f-t: #FFFFFF; --f-diep: #5530A8; }
.vb[data-gk="recept"]  { --f-a: #D6336C; --f-b: #A21D4C; --f-t: #FFFFFF; --f-diep: #A21D4C; }
.vb[data-gk="geld"]    { --f-a: #FFD45C; --f-b: #FFAE1F; --f-t: #3A2600; --f-diep: #8A5A00; }
.vb[data-gk="taak"]    { --f-a: #2B7A3B; --f-b: #1E6B30; --f-t: #FFFFFF; --f-diep: #1E6B30; }
.vb[data-gk="keuze"]   { --f-a: #1971C2; --f-b: #1561A6; --f-t: #FFFFFF; --f-diep: #1561A6; }
.vb[data-gk="media"]   { --f-a: #E03131; --f-b: #AE2222; --f-t: #FFFFFF; --f-diep: #AE2222; }
.vb[data-gk="melding"] { --f-a: #8A43D6; --f-b: #6A2BB0; --f-t: #FFFFFF; --f-diep: #6A2BB0; }
.vb[data-gk="nieuws"]  { --f-a: #0B7A8F; --f-b: #075B6B; --f-t: #FFFFFF; --f-diep: #075B6B; }
/* een open slot en een klaargezet WhatsApp-bericht zijn goed nieuws: groen */
.vb.vb-slot.open, .vb.vb-klaar.wa { --f-a: #2B7A3B; --f-b: #1E6B30; --f-t: #FFFFFF; --f-diep: #1E6B30; }

/* afgeleide kleuren, licht en donker */
.vb {
  --f-zacht: color-mix(in srgb, var(--f-a) 11%, #FFFFFF); --f-inkt: var(--f-diep);
  --f-rand: color-mix(in srgb, var(--f-a) 28%, transparent); --f-gloed: color-mix(in srgb, var(--f-b) 50%, transparent);
  /* de oude namen binnen een kaartje: geen zwart en geel meer, maar de familie */
  --ink: var(--f-inkt); --yellow: var(--f-zacht); --yellow-hi: var(--f-zacht); --yellow-lo: var(--f-a);
  --paper: var(--ax-oppervlak); --paper-2: var(--f-zacht); --text: var(--ax-tekst); --text-dim: var(--ax-tekst-zacht);
  --gk-inkt: var(--ax-tekst); --rand: 0 0 0 0 transparent;
}

/* ---------- het kaartje ---------- */
html .vb, html .vb[data-gk] {
  position: relative; border: 1px solid var(--ax-lijn); border-radius: var(--ax-r-kaart); color: var(--ax-tekst); font-family: var(--ax-letter);
  background: linear-gradient(180deg, var(--f-zacht) 0, var(--ax-oppervlak) 90px) var(--ax-oppervlak);
  box-shadow: var(--ax-schaduw-vast), 0 14px 28px -16px var(--f-gloed);
}
html .vb .vb-in { padding: 12px 14px 14px; }

/* de kop: verloop in de soortkleur, icoon in een wit muntje, een zachte glans en één bel als versiering (staat stil) */
html .vb .vb-kopje {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; margin: 0; padding: 9px 14px 9px 10px; border: 0;
  background: var(--f-a) linear-gradient(135deg, var(--f-a) 0%, var(--f-b) 100%); color: var(--f-t);
  font: 800 14px/1.25 var(--ax-letter); letter-spacing: .01em; text-transform: none; overflow-wrap: anywhere;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .vb .vb-kopje::before { content: ""; position: absolute; right: -26px; top: -38px; width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); pointer-events: none; }
html .vb .vb-kopje::after { content: ""; position: absolute; inset: 0 0 45% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }
html .vb .vb-kopje > span { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; }
html .vb .vb-kopje > .vb-ic:first-child { position: relative; z-index: 1; box-sizing: border-box; width: 30px; height: 30px; padding: 5px; flex: 0 0 auto;
  border: 0; border-radius: 50%; background: #FFFFFF; color: var(--f-diep); stroke-width: 2.6;
  box-shadow: 0 2px 6px rgba(20, 22, 60, .22), inset 0 -2px 0 rgba(20, 22, 60, .08); }
html .vb .vb-kopje > .vb-ic.mi:first-child { padding: 3px; }
html .vb .vb-kopje > em { position: relative; z-index: 1; flex: 0 0 auto; padding: 1px 9px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .24); color: var(--f-t); font-style: normal; font-size: 11px; font-weight: 800; box-shadow: none; }
html .vb .vb-kopje > em i { background: currentColor; border: 0; }

/* ---------- tekst in het kaartje ---------- */
html .vb .vb-titel { font-size: 16px; font-weight: 800; color: var(--ax-tekst); }
html .vb .vb-groot { font-size: 34px; font-weight: 900; color: var(--f-inkt); letter-spacing: -.01em; }
html .vb .vb-regel { font-size: 13px; color: var(--ax-tekst-zacht); }
html .vb .vb-regel em, html .vb .vb-kop { color: var(--f-inkt); }
html .vb .vb-vraag { font-size: 15px; color: var(--ax-tekst); }

/* alles wat nog een harde inktrand had: een zachte lijn in de soortkleur */
.vb[data-gk] * { border-color: var(--f-rand); }

/* ---------- lijsten ---------- */
html .vb .vb-lijst li { padding: 6px 0; font-weight: 700; }
html .vb .vb-lijst li + li { border-top: 1px solid var(--ax-lijn); }
html .vb .vb-lijst i { width: 22px; height: 22px; border: 2px solid var(--f-a); border-radius: 8px; background: var(--ax-oppervlak); color: var(--f-t); }
html .vb .vb-lijst li.af i { border-color: transparent; background: linear-gradient(135deg, var(--f-a), var(--f-b)); box-shadow: 0 2px 6px -2px var(--f-gloed); }
html .vb .vb-lijst li.af span { color: var(--ax-tekst-zacht); text-decoration-color: var(--f-a); }

/* ---------- knoppen en keuzes ---------- */
html .vb .vb-knop {
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--ax-r-knop); background: var(--f-zacht); color: var(--f-inkt);
  font: 800 14px var(--ax-letter); box-shadow: inset 0 0 0 1.5px var(--f-rand), 0 2px 0 var(--f-rand); transition: var(--ax-tik);
}
html .vb .vb-knop.geel, html .vb .vb-knop.groen, html .vb .vb-knop.gekozen {
  background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px var(--f-gloed);
}
html .vb .vb-knop.groen { background: linear-gradient(135deg, #2B7A3B, #1E6B30); color: #FFFFFF; }
html .vb .vb-knop.gekozen { box-shadow: 0 0 0 3px var(--ax-oppervlak), 0 0 0 5px var(--f-a); transform: none; }
html .vb .vb-knop:active:not(:disabled) { transform: scale(.96); box-shadow: inset 0 0 0 1.5px var(--f-rand); }
html .vb .vb-knop:disabled { opacity: .45; }
html .vb .vb-knop:focus-visible, html .vb .ak-tegel:focus-visible, html .vb a:focus-visible { outline: 3px solid var(--f-a); outline-offset: 2px; }
html .vb .vb-keuzevraag + .vb-keuzevraag { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ax-lijn); }
html .vb .vb-later, html .vb .vb-stempel { border: 1.5px solid var(--f-rand); background: var(--ax-oppervlak); color: var(--f-inkt); }
html .vb .vb-later.gekozen { border-color: transparent; background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); }

/* ---------- chips, prijzen, labels ---------- */
html .vb .vb-chips span { border: 0; border-radius: 999px; padding: 3px 10px; background: var(--f-zacht); color: var(--f-inkt); font-size: 12px; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-chips span.wit { background: var(--ax-oppervlak-2); color: var(--ax-tekst); }
html .vb .vb-prijs { border: 0; border-radius: 999px; padding: 1px 10px; background: linear-gradient(135deg, #FFD45C, #FFAE1F); color: #3A2600;
  box-shadow: 0 2px 6px -2px rgba(196, 135, 0, .6); }
html .vb .vb-label { border: 0; border-radius: 999px; padding: 1px 8px; background: var(--f-zacht); color: var(--f-inkt); }
html .vb .vb-label.vol { background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); }

/* ---------- recept, tijdlijn, vergelijking, agenda-blaadje, route ---------- */
html .vb .vb-ingr li::marker { color: var(--f-a); }
html .vb .vb-stap li { padding: 4px 0; }
html .vb .vb-stap i { width: 24px; height: 24px; border: 0; background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); font-weight: 900;
  box-shadow: 0 2px 6px -2px var(--f-gloed); }
html .vb .vb-tijd li::before { border: 3px solid var(--f-a); background: var(--ax-oppervlak); }
html .vb .vb-tijd li::after { background: var(--f-rand); }
html .vb .vb-tijd b { color: var(--f-inkt); }
html .vb .vb-verg > div { border: 0; border-radius: 16px; background: var(--f-zacht); box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-blad { border: 0; border-radius: 14px; background: var(--ax-oppervlak); box-shadow: 0 4px 12px -6px var(--f-gloed), inset 0 0 0 1px var(--f-rand); }
html .vb .vb-blad b { background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); }
html .vb .vb-blad span { color: var(--f-inkt); }
html .vb .vb-vannaar .vb-ic { color: var(--f-a); }

/* ---------- beeld: video, foto's, producten, nieuws ---------- */
html .vb .vb-thumb { border-bottom: 0; }
html .vb .vb-play { border: 0; background: rgba(255, 255, 255, .94); color: var(--f-diep); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html .vb .vb-duur { background: rgba(20, 22, 60, .72); color: #FFFFFF; }
html .vb .vb-fotobijs { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #262A4D; }
html .vb .vb-pthumb, html .vb .vb-nthumb { border: 0; border-radius: 14px; box-shadow: 0 4px 12px -6px var(--f-gloed); }
html .vb .vb-rondknop { border: 0; background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); box-shadow: 0 4px 12px -4px var(--f-gloed); }
html .vb .vb-bijlage > .vb-ic { border: 0; background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); }
html .vb .vb-prodrij + .vb-prodrij { border-top: 1px solid var(--ax-lijn); }
.ak .ak-foto { border: 0; border-radius: 14px; background: var(--f-zacht, #EEF0FF); box-shadow: 0 4px 12px -6px var(--f-gloed, rgba(20, 22, 60, .4)); }
.ak .ak-bericht + .ak-bericht { border-top: 1px solid var(--ax-lijn); }
.ak .ak-bericht b { color: var(--ax-tekst); }
/* het eerste nieuwsbericht groot, met de foto over de hele breedte, zoals een nieuwsapp */
.ak .vb-nieuws > .ak-bericht:first-child:has(.ak-foto) { flex-direction: column; }
.ak .vb-nieuws > .ak-bericht:first-child .ak-foto { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ak .vb-nieuws > .ak-bericht:first-child b { font-size: 16px; }
html .vb a.ak-bericht { border-radius: 12px; transition: var(--ax-tik); }
html .vb a.ak-bericht:active { transform: scale(.98); }

/* ---------- boodschappencatalogus: tegels ---------- */
html .vb .ak-tegel { border: 0; border-radius: 16px; background: var(--ax-oppervlak); color: var(--ax-tekst); transition: var(--ax-tik);
  box-shadow: inset 0 0 0 1.5px var(--f-rand), 0 6px 14px -10px var(--f-gloed); }
html .vb .ak-tegel:active { transform: scale(.95); }
html .vb .ak-plaatje.letter { border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--f-a), var(--f-b)); color: var(--f-t); }
html .vb .ak-tegel.af { background: var(--ax-oppervlak-2); box-shadow: none; transform: none; }
html .vb .ak-tegel.af .ak-naam { color: var(--ax-tekst-zacht); }
html .vb .ak-vink { border: 2px solid var(--ax-oppervlak); background: linear-gradient(135deg, #2B7A3B, #1E6B30); box-shadow: 0 2px 6px -2px rgba(20, 22, 60, .4); }

/* ---------- rijtjes in de demokaartjes (regels, termijnen, advies) hadden een vaste witte achtergrond: nu het oppervlak, ook in donker ---------- */
html .vb .vb-regels li, html .vb .vb-termijn li { border: 0; border-radius: 12px; background: var(--ax-oppervlak-2); box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-regels li.krap, html .vb .vb-termijn li.rood { background: var(--f-zacht); box-shadow: inset 0 0 0 1.5px var(--f-a); }
html .vb .vb-advies { border: 0; border-radius: 12px; background: var(--f-zacht); }
html .vb .vb-zeker, html .vb .vb-klok { border: 0; background: var(--ax-oppervlak-2); }
html .vb .vb-klok { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-zeker i { background: linear-gradient(90deg, var(--f-a), var(--f-b)); }

/* ---------- code en kopieerknop blijven donker (leesbaar), maar zonder inktrand ---------- */
html .vb .vb-code { background: #1E2142; }
html .vb .vb-kopieer { border: 0; border-radius: 12px; background: rgba(255, 255, 255, .92); color: #262A4D; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
html .vb .vb-kabel .vb-kopje > span { flex: 1 1 auto; min-width: 0; }

/* ---------- het denk-kaartje (Moppie bezig) en de systeemmelding ---------- */
html .sg-bezig { border: 1px solid color-mix(in srgb, var(--lila) 40%, transparent); border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lila) 20%, var(--kaart)), var(--kaart) 70%);
  box-shadow: var(--ax-schaduw-vast), 0 14px 30px -16px color-mix(in srgb, var(--blauw) 70%, transparent); }
html .sg-bezig-t b { color: var(--ax-tekst); }
html .vb-melding > .vb-ic { border: 0; background: #FFFFFF; box-shadow: 0 2px 6px rgba(20, 22, 60, .2); }

/* ---------- tegels op de volle pagina's (Privé, Werk, Bedrijf): een tint en zachte diepte in de wereldkleur ---------- */
/* 23-10 Gustavo: het felle verloop per tegel (speelgoed.css --tg-a/--tg-b, zes kleuren) blijft; alleen de harde onderrand wordt zachte diepte.
   (Eerder stond hier een bijna witte tint over de tegel: de tegels werden kaal en de status haalde 1:1, verbeter_proef.) */
html[data-vorm="plat"] .sheet-body .pl-tegel {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(20, 22, 60, .10), 0 14px 24px -12px var(--tg-d);
  transition: var(--ax-tik);
}
html[data-vorm="plat"] .sheet-body .pl-tegel:active { transform: scale(.97); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 12px -8px var(--tg-d); }

/* ---------- voorbeeldkaartje bij de kleurkeuze (schermen.js) en het nieuwsscherm in dezelfde stijl ---------- */
.sch-voorbeeld { border: 1px solid var(--ax-lijn); background: var(--kaart); box-shadow: var(--ax-schaduw-vast), 0 14px 28px -16px color-mix(in srgb, var(--blauw) 70%, transparent); }
.sch-vb-kopje { background: linear-gradient(135deg, var(--blauw), var(--blauwdd)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.sch-vb-knoppen i { border: 0; box-shadow: 0 4px 10px -6px rgba(20, 22, 60, .5); }

/* ---------- minder beweging: alles staat stil, kleur blijft ---------- */
@media (prefers-reduced-motion: reduce) {
  html .vb .vb-knop, html .vb .ak-tegel, html .vb a.ak-bericht, html[data-vorm="plat"] .sheet-body .pl-tegel, .sch-bericht { transition: none; }
  html .vb .vb-knop:active, html .vb .ak-tegel:active, html .vb a.ak-bericht:active, html[data-vorm="plat"] .sheet-body .pl-tegel:active, .sch-bericht:active { transform: none; }
}
.ju-rustig .vb .vb-knop, .ju-rustig .vb .ak-tegel, .m3g-rustig .vb .vb-knop, .m3g-rustig .vb .ak-tegel { transition: none; }

/* ===================== Schermen (23-10-2026, klus "Ailex kleurrijk schermen", Gustavo) =====================
   De oude inktstijl (dikke var(--ink)-rand, harde "0 4px 0"-schaduw, zwart/geel lint) is in styles.css, planning.css, lampjes.css,
   kaartjes.css, schermen.css, game.css, speelgoed.css, startscherm.css en rust.css vervangen door de tokens hieronder.
   Elk blad krijgt een eigen kleurfamilie (--s-*): #sheet[data-blad] (interactions.js openSheet) en #sheet[data-wereld] (Privé/Werk/Bedrijf).
   Tekst op een verloop haalt minstens 4,5:1 op de lichtste kant (zelfde families als de kaartjes, Camila). */
:root {
  --ax-a: #4F5FF0; --ax-b: #3341B8; --ax-kop: linear-gradient(135deg, #4F5FF0, #3341B8);
  --ax-rand: rgba(68, 83, 224, .16); --ax-rand-sterk: #7F86C2; --ax-ring: #3341B8; --ax-gloed: rgba(51, 65, 184, .30);
  --ax-diep: 0 1px 2px rgba(20, 22, 60, .08), 0 12px 24px -14px rgba(51, 65, 184, .45);
  --ax-diep-klein: 0 1px 2px rgba(20, 22, 60, .10), 0 4px 10px -5px rgba(51, 65, 184, .40);
}
/* binnen een kaartje volgen de randen en de ring de soortkleur */
.vb { --ax-rand: var(--f-rand); --ax-rand-sterk: color-mix(in srgb, var(--f-a) 60%, transparent); --ax-ring: var(--f-diep);
  --ax-kop: linear-gradient(135deg, var(--f-a), var(--f-b)); --ax-gloed: var(--f-gloed); }

/* kleurfamilie per blad: a/b = verloop, t = tekst op het verloop, diep = soortkleur als tekst op de kaart */
#sheet, .sg-menu-lijst, .kl-lijst, .m3d-start { --s-a: #4F5FF0; --s-b: #3341B8; --s-t: #FFFFFF; --s-diep: #3341B8; }
#sheet:is([data-blad="tools"], [data-blad="taken"]) { --s-a: #2B7A3B; --s-b: #1E6B30; --s-diep: #1E6B30; }
#sheet:is([data-blad="radio"], [data-blad="media"]) { --s-a: #E03131; --s-b: #AE2222; --s-diep: #AE2222; }
#sheet:is([data-blad="setup"], [data-blad="systeem"], [data-blad="agent"]) { --s-a: #8A43D6; --s-b: #6A2BB0; --s-diep: #6A2BB0; }
#sheet:is([data-blad="archief"], [data-blad="home"]) { --s-a: #4C5BE8; --s-b: #2B37A8; --s-diep: #2B37A8; }
#sheet[data-blad="terminal"]                        { --s-a: #1971C2; --s-b: #1561A6; --s-diep: #1561A6; }
#sheet[data-wereld="prive"]                         { --s-a: #1E7B3C; --s-b: #145A2B; --s-diep: #145A2B; }   /* 30-10-2026: Privé groen (was roze-rood, las als fout) */
#sheet[data-wereld="werk"]                          { --s-a: #1971C2; --s-b: #1561A6; --s-diep: #1561A6; }
#sheet[data-wereld="bedrijf"]                       { --s-a: #7A50D6; --s-b: #5530A8; --s-diep: #5530A8; }
#sheet, .sg-menu-lijst, .kl-lijst, .m3d-start {
  --s-kop: linear-gradient(135deg, var(--s-a), var(--s-b)); --s-zacht: color-mix(in srgb, var(--s-a) 12%, var(--kaart, #FFFFFF));
  --s-rand: color-mix(in srgb, var(--s-a) 26%, transparent); --s-gloed: color-mix(in srgb, var(--s-b) 45%, transparent);
  --s-diepte: 0 1px 2px rgba(20, 22, 60, .08), 0 14px 26px -16px var(--s-gloed);
}

/* blad: zachte kleurband bovenin, titel in de soortkleur met een verloopstreepje eronder */
html #sheet .sheet-head { position: relative; background: linear-gradient(180deg, var(--s-zacht), transparent); border-bottom: 0; }
html #sheet .sheet-head::after { content: ""; position: absolute; left: 14px; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--s-kop) var(--s-a); }
html #sheet #sheetTitle { color: var(--s-diep); }

/* kaarten op de schermen: haarlijn, getinte bovenkant, gekleurde schaduw */
html #sheet :is(.sch-melding, .sch-geluid, .sch-voorbeeld, .pl-paneel, .m3d-account, .sch-deed) {
  border: 1px solid var(--ax-rand); border-radius: 20px;
  background: linear-gradient(180deg, var(--s-zacht) 0, var(--kaart, #FFFFFF) 72px) var(--kaart, #FFFFFF); box-shadow: var(--s-diepte); }
html #sheet .sch-deed { box-shadow: none; }
html #sheet :is(.pl-rij, .pl-pr, .pl-ballon) {
  border: 1px solid var(--s-rand) !important; background: var(--s-zacht); box-shadow: var(--ax-diep-klein); }
html #sheet .sch-kop .mi.groot { box-sizing: content-box; padding: 8px; border-radius: 16px; background: var(--ax-oppervlak);
  box-shadow: 0 0 0 1px var(--s-rand), var(--s-diepte); }
html #sheet :is(.sch-kop b) { color: var(--s-diep); }

/* lintjes, tabs en hoofdknoppen: verloop in de soortkleur in plaats van geel met inktrand */
html #sheet .pl-lint { border: 0 !important; border-radius: 999px; padding: 3px 12px 4px; background: var(--s-kop) var(--s-a); color: var(--s-t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px var(--s-gloed); }
html #sheet :is(.pl-tab, .pl-k) { border: 1px solid var(--s-rand) !important; background: var(--ax-oppervlak); color: var(--ax-tekst); box-shadow: var(--ax-diep-klein); }
html #sheet :is(.pl-tab.aan, .pl-k.aan) { border-color: transparent !important; background: var(--s-kop) var(--s-a); color: var(--s-t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 16px -10px var(--s-gloed); }
html #sheet :is(.pl-rij, .pl-pr) .pl-ic { border: 0 !important; background: var(--s-kop) var(--s-a) !important; color: var(--s-t) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -6px var(--s-gloed); }
html #sheet .pl-tijdlijn { border-left: 3px solid var(--s-rand); }
html #sheet :is(.pl-voortgang, .sch-balk) { border: 0; background: color-mix(in srgb, var(--s-a) 16%, var(--ax-oppervlak)); }
html #sheet :is(.pl-voortgang, .sch-balk) > :is(i, b, span) { background: var(--s-kop) var(--s-a); }
html #sheet .pl-inv { border: 1.5px solid var(--ax-rand-sterk); background: var(--ax-oppervlak); color: var(--ax-tekst); }
html #sheet .pl-inv:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 1px; }
html #sheet :is(.sch-skin) { border: 1px solid var(--s-rand); box-shadow: var(--s-diepte); }

/* menu, lijst bij de lampjes, puntenboekje en meldingen */
.sg-menu-lijst { background: linear-gradient(180deg, var(--s-zacht), var(--kaart) 90px) var(--kaart); border: 1px solid var(--ax-rand); }
.sg-menu-lijst [data-sg-doe] .mi { box-sizing: content-box; padding: 5px; border-radius: 12px; background: var(--ax-oppervlak); box-shadow: 0 0 0 1px var(--s-rand), var(--ax-diep-klein); }
html .kl-lijst { background: linear-gradient(180deg, var(--s-zacht), var(--paper, #FFFFFF) 80px) var(--paper, #FFFFFF); box-shadow: var(--s-diepte); }
html .kl-kop h2, html .sheet-head h2.kl-titel { border: 0; border-radius: 999px; background: var(--s-kop) var(--s-a); color: var(--s-t); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px var(--s-gloed); }
html .kl-snel button, html .kl-snel a { border: 1px solid var(--ax-rand); box-shadow: var(--ax-diep-klein); }
html .logo { border: 0; background: var(--ax-kop) var(--ax-a); color: #FFFFFF; box-shadow: var(--ax-diep-klein); }
html .logo-bol { background: #FFFFFF; color: var(--ax-b); }
html .toast { border: 1px solid var(--ax-rand); border-radius: 16px; background: var(--ax-oppervlak); color: var(--ax-tekst); box-shadow: var(--ax-diep);
  border-left: 6px solid var(--ax-a); }
html .toast.warn { border-left-color: #FFAE1F; } html .toast.err { border-left-color: #E03131; } html .toast.info { border-left-color: #0B7A8F; }

/* startscherm en aanmelden: verloop achter de kaart, knop in verloop */
html .m3d-start { background: linear-gradient(160deg, #3341B8 0%, #6A2BB0 55%, #A21D4C 100%); }
html .m3d-start .m3d-start-kaart { border: 1px solid var(--ax-rand); border-radius: 24px; background: var(--ax-oppervlak); color: var(--ax-tekst);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 30px 60px -24px rgba(0, 0, 0, .55); }
html .m3d-start .m3d-start-titel { color: var(--s-diep); }
html .m3d-start .m3d-start-veld { border: 1.5px solid var(--ax-rand-sterk); background: var(--ax-oppervlak-2); color: var(--ax-tekst); }
html .m3d-start .m3d-start-veld:focus-visible { outline: 3px solid var(--ax-ring); outline-offset: 1px; }
html .m3d-start .m3d-start-knop { border: 0; background: var(--s-kop) var(--s-a); color: var(--s-t); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 20px -10px var(--s-gloed); }
html .m3d-start :is(.m3d-start-link, .m3d-start-terug) { color: var(--s-diep); }
/* 25-10-2026 Camila (nr 4): tabbladen van het aanmelden in dezelfde stijl als de hoofdknop, niet meer geel-zwart */
html .m3d-start .m3d-start-tabs { border-color: var(--ax-rand-sterk); background: var(--ax-oppervlak-2); }
html .m3d-start .m3d-start-tab[aria-selected="true"] { background: var(--s-kop) var(--s-a); color: var(--s-t);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

@media (prefers-reduced-motion: reduce) { html #sheet :is(.pl-k, .pl-tab) { transition: none; } }

/* ===================== Contrast (23-10-2026, klus "Ailex contrast", Gustavo) =====================
   Celeste's eindtest 1.8.0 mat tekst die niet of nauwelijks te lezen was. Oorzaken: speelgoed.css zet --m3g-wit én --m3g-kaart op
   var(--kaart) (tekst = achtergrond, 1,00); button.row bleef #fff ook in donker (lichte tekst op wit, 1,13); de gekozen keuzeknop en
   "Later" in het voorbeeldkaartje hadden witte tekst op lichtroze (2,72); wereldkleur als tekst/knop op wit (2,58).
   Alles nu in de kleurfamilie van het blad (--s-*), minstens 4,5:1 in licht en donker; proef: test/contrast_proef.py. */
html button.row { background: var(--ax-oppervlak); color: var(--ax-tekst); }
html button.row small { color: var(--ax-tekst-zacht); }
html .m3g-leeg h3 { color: var(--s-diep, var(--ax-tekst)); }
html .m3g-leeg p { color: var(--ax-tekst-zacht); }
html .m3g-leeg .m3g-zeg { color: var(--ax-tekst); }
html .m3g-leeg-ic { background: var(--s-kop, var(--ax-kop)) var(--s-a, var(--ax-a)); color: var(--s-t, #FFFFFF); }
html .m3g-knop:not(.stil) { border-color: transparent; background: var(--s-kop, var(--ax-kop)) var(--s-a, var(--ax-a)); color: var(--s-t, #FFFFFF);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 var(--lift) 0 0 var(--s-b, var(--ax-b)); }
html .m3g-knop.stil { background: var(--ax-oppervlak); color: var(--ax-tekst); border-color: var(--ax-rand-sterk); box-shadow: 0 var(--lift) 0 0 var(--s-rand, var(--ax-rand)); }
html .m3g-link { color: var(--ax-tekst-zacht); }
html .sg-keuze button[aria-pressed="true"] { background: var(--s-kop, var(--ax-kop)) var(--s-a, var(--ax-a)); color: var(--s-t, #FFFFFF);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--s-b, var(--ax-b)); }
html .sch-vb-knoppen i, html .sch-vb-knoppen i + i { color: #262A4D; }
/* bijschriften (--text-dim) op de lichte achtergrond (--bg1 #DDE6FF) haalden maar 3,86: een tint donkerder, zelfde blauwgrijs */
html[data-vorm="plat"] { --text-dim: #4E5380; --m3g-dim: #4E5380; }
/* rondje bij je eigen bericht: witte letter op --blauw haalde 4,17; nu de donkerste tint van het thema (ook zon/zee/bos ...) */
html[data-vorm="plat"] .msg.alex .av { background: var(--blauwdd); color: #FFFFFF; }
/* "NOS" naast de kop Nieuws stond op 70% doorzichtig (3,41); nu vol in het zachte tekstgrijs */
/* invoerhint in de invulvakjes  was in donker 2,97 */
html :is(.pl-inv, .m3d-start-veld)::placeholder { color: var(--ax-tekst-zacht); opacity: 1; }
/* voorbeeldkaartje bij Kleuren: moet in alle zes thema's leesbaar blijven (zon/nacht/bes zakten onder 3), dus de donkerste tinten */
html .sch-vb-kopje { background: linear-gradient(135deg, var(--blauwdd), color-mix(in srgb, var(--blauwdd) 80%, #000)); color: #FFFFFF; }
html .sch-vb-knoppen i + i { background: var(--rozedd); color: #FFFFFF; }

/* ==========================================================================================================================
   Kaartontwerp (25-10-2026, klus "Ailex kaarten mooi ontwerp", Camila). Alex 25-10: "bij het weer krijg ik leuk de graden in
   grote letters, bij tijd zie je de tijd heel klein, of simpel plaatje met tekst alleen, dat is amateuristisch ... zo van wooow".
   Eén ontwerpsysteem voor alle kaartjes, alleen css (geen andere html, geen andere data):
   - maat: kaart 22px rond, kop 12/16px, binnenkant 14/16/16px; schaal 12 (klein) · 13,5 (bijregel) · 15 (tekst) · 17-20 (titel) · 34-64 (kerngetal);
   - diepte: twee schaduwen, één zachte in de soortkleur (--f-gloed) en één vaste korte;
   - helden: weer en weerweek op een avondrood-verloop met witte letters (AA: wit op #B93A0B 5,7:1; dagtegels donkerder, nooit lichter);
     nieuws met grote eerste foto, agenda met een tijdpil, route groot van -> naar, recept en taak met duidelijke titel;
   - kleine tekst nergens meer onder 12px (laatste blok, gemaakt met klein.py uit alle css-regels van de kaartjes).
   ========================================================================================================================== */
html .vb { border-radius: 22px; box-shadow: 0 14px 32px -16px var(--f-gloed, rgba(20, 22, 60, .45)), 0 2px 6px rgba(20, 22, 60, .10); }
html .vb .vb-kopje { padding: 11px 16px 11px 12px; font-size: 15px; gap: 10px; }
html .vb .vb-kopje > .vb-ic:first-child { width: 32px; height: 32px; }
html .vb .vb-kopje > em { font-size: 12px; padding: 2px 10px; }
html .vb .vb-in { padding: 14px 16px 16px; }
html .vb .vb-titel { display: block; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; }
html .vb .vb-regel { font-size: 13.5px; line-height: 1.45; }
html .vb .vb-regel em, html .vb .vb-kop { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
html .vb .vb-kop { display: block; margin: 12px 0 6px; }
html .vb .vb-titel + .vb-kop { margin-top: 10px; }

/* kleine tekst nooit onder 12px: per oude regel uit de css (klein.py, 25-10-2026) één regel met html:root ervoor, net iets sterker dan het origineel */
html:root .ak-blad small:first-child { font-size: 12px; }
html:root .ak-blad small:last-child { font-size: 12px; }
html:root .ak-naam { font-size: 12px; }
html:root .vb-ab > span > b { font-size: 12px; }
html:root .vb-advies em { font-size: 12px; }
html:root .vb-advies small { font-size: 12px; }
html:root .vb-agenda small { font-size: 12px; }
html:root .vb-alskop small { font-size: 12px; }
html:root .vb-as { font-size: 12px; }
html:root .vb-bericht em { font-size: 12px; }
html:root .vb-bestand small { font-size: 12px; }
html:root .vb-bestel small { font-size: 12px; }
html:root .vb-bijlage small { font-size: 12px; }
html:root .vb-blad b { font-size: 12px; }
html:root .vb-blad small { font-size: 12px; }
html:root .vb-blad.klein b { font-size: 12px; }
html:root .vb-btw small { font-size: 12px; }
html:root .vb-bundel i { font-size: 12px; }
html:root .vb-codes em { font-size: 12px; }
html:root .vb-codes small { font-size: 12px; }
html:root .vb-dagrij em { font-size: 12px; }
html:root .vb-dagrij small { font-size: 12px; }
html:root .vb-dagrij time { font-size: 12px; }
html:root .vb-diff { font-size: 12px; }
html:root .vb-docs { font-size: 12px; }
html:root .vb-docs > b { font-size: 12px; }
html:root .vb-docs > em { font-size: 12px; }
html:root .vb-duur { font-size: 12px; }
html:root .vb-ext { font-size: 12px; }
html:root .vb-fotobijs { font-size: 12px; }
html:root .vb-groepen em { font-size: 12px; }
html:root .vb-groepen small { font-size: 12px; }
html:root .vb-gtrend { font-size: 12px; }
html:root .vb-guit span { font-size: 12px; }
html:root .vb-kenteken i { font-size: 12px; }
html:root .vb-klokrij em { font-size: 12px; }
html:root .vb-kloktekst > small { font-size: 12px; }
html:root .vb-klussen small { font-size: 12px; }
html:root .vb-kop { font-size: 12px; }
html:root .vb-kopieerrij small { font-size: 12px; }
html:root .vb-kv em { font-size: 12px; }
html:root .vb-label { font-size: 12px; }
html:root .vb-lagen small { font-size: 12px; }
html:root .vb-later { font-size: 12px; }
html:root .vb-legenda { font-size: 12px; }
html:root .vb-letter { font-size: 12px; }
html:root .vb-live { font-size: 12px; }
html:root .vb-medi small { font-size: 12px; }
html:root .vb-medi time { font-size: 12px; }
html:root .vb-meet span small { font-size: 12px; }
html:root .vb-meet strong small { font-size: 12px; }
html:root .vb-melding small { font-size: 12px; }
html:root .vb-mknop button { font-size: 12px; }
html:root .vb-naam small { font-size: 12px; }
html:root .vb-nep { font-size: 12px; }
html:root .vb-nieuws small { font-size: 12px; }
html:root .vb-nuop em { font-size: 12px; }
html:root .vb-periode em { font-size: 12px; }
html:root .vb-procent small { font-size: 12px; }
html:root .vb-prodrij small { font-size: 12px; }
html:root .vb-regel em { font-size: 12px; }
html:root .vb-regels .vb-chips span { font-size: 12px; }
html:root .vb-regels li > span:last-child > small { font-size: 12px; }
html:root .vb-rooster b { font-size: 12px; }
html:root .vb-rooster small { font-size: 12px; }
html:root .vb-rooster span { font-size: 12px; }
html:root .vb-sbar em { font-size: 12px; }
html:root .vb-stalen b { font-size: 12px; }
html:root .vb-stalen small { font-size: 12px; }
html:root .vb-stand { font-size: 12px; }
html:root .vb-standen button { font-size: 12px; }
html:root .vb-stap i { font-size: 12px; }
html:root .vb-stapjes span { font-size: 12px; }
html:root .vb-stempel { font-size: 12px; }
html:root .vb-stempelvak small { font-size: 12px; }
html:root .vb-stip { font-size: 12px; }
html:root .vb-stukken b { font-size: 12px; }
html:root .vb-stukken small { font-size: 12px; }
html:root .vb-tab > b { font-size: 12px; }
html:root .vb-tafels small { font-size: 12px; }
html:root .vb-tegels em { font-size: 12px; }
html:root .vb-term { font-size: 12px; }
html:root .vb-termijn span small { font-size: 12px; }
html:root .vb-termijn strong small { font-size: 12px; }
html:root .vb-tijdje small { font-size: 12px; }
html:root .vb-traject em { font-size: 12px; }
html:root .vb-traject small { font-size: 12px; }
html:root .vb-treffer { font-size: 12px; }
html:root .vb-treffer > em { font-size: 12px; }
html:root .vb-veld em { font-size: 12px; }
html:root .vb-ver small { font-size: 12px; }
html:root .vb-vergunning em { font-size: 12px; }
html:root .vb-vergunning small { font-size: 12px; }
html:root .vb-vkop span { font-size: 12px; }
html:root .vb-voorblad em { font-size: 12px; }
html:root .vb-vvoet { font-size: 12px; }
html:root .vb-week b { font-size: 12px; }
html:root .vb-week small { font-size: 12px; }
html:root .vb-ytkanaal i { font-size: 12px; }
html:root .vb-ytmelding small { font-size: 12px; }
html:root .vb-yttijd { font-size: 12px; }
html:root .vb-zoekres small { font-size: 12px; }
html:root .vb-zoekres span { font-size: 12px; }
html:root .vb-zstap small { font-size: 12px; }

/* ---------- weer: één doorlopend paneel, avondrood met een zon die gloeit ---------- */
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) {
  position: relative; overflow: hidden; color: #FFFFFF; background-color: #8E2F10;   /* AX-08 P2: grond onder het verloop (anders wit op wit) */
  background-image: radial-gradient(80px 80px at 92% 0%, rgba(255, 214, 102, .40), rgba(255, 214, 102, 0) 70%),
              linear-gradient(160deg, #B93A0B 0%, #8E2F10 55%, #6A2310 100%);
}
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) .vb-kopje { background: transparent; box-shadow: none; color: #FFFFFF; }
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) .vb-kopje::before { background: rgba(255, 230, 150, .16); }
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) .vb-kopje > .vb-ic:first-child { color: #B93A0B; }
html .vb[data-gk="weer"] .vb-in.vb-rij { gap: 16px; padding: 4px 18px 20px; align-items: center; }
html .vb[data-gk="weer"] .vb-groot { font-size: 64px; line-height: .95; font-weight: 900; color: #FFFFFF; letter-spacing: -.04em;
  text-shadow: 0 4px 18px rgba(60, 14, 0, .45); flex: 0 0 auto; white-space: nowrap; }
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) .vb-rij .vb-regel { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: #FFFFFF; }
html .vb[data-gk="weer"]:is(:has(.vb-groot), :has(.vb-week)) .vb-rij .vb-regel + .vb-regel { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .22);
  font-weight: 600; color: rgba(255, 255, 255, .92); }
/* weerweek: glazen dagtegels op hetzelfde paneel, vandaag licht uitgelicht */
html .vb[data-gk="weer"] .vb-week { gap: 6px; padding: 2px 12px 16px; }
html .vb[data-gk="weer"] .vb-week > span { gap: 4px; padding: 10px 0 9px; border: 0; border-radius: 16px; color: #FFFFFF;
  background: rgba(0, 0, 0, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
html .vb[data-gk="weer"] .vb-week > span:first-child { background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 2px rgba(255, 224, 138, .85); }
html .vb[data-gk="weer"] .vb-week b { font-size: 12.5px; font-weight: 900; letter-spacing: .06em; color: #FFFFFF; }
html .vb[data-gk="weer"] .vb-week .vb-ic { width: 28px; height: 28px; color: #FFE08A; stroke: #FFE08A; }
html .vb[data-gk="weer"] .vb-week strong { font-size: 19px; font-weight: 900; color: #FFFFFF; }
html .vb[data-gk="weer"] .vb-week small { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .90); }

/* ---------- nieuws: eerste bericht als voorpagina (grote foto), daarna nette rijen ---------- */
html .vb .vb-nieuws li { gap: 12px; padding: 10px 0; }
html .vb .vb-nieuws li + li { border-top: 1px solid var(--ax-lijn); }
html .vb .vb-nieuws .vb-nthumb { width: 64px; height: 64px; border-radius: 14px; }
html .vb ul.vb-nieuws li:first-child { flex-direction: column; align-items: stretch; padding-top: 0; }
html .vb ul.vb-nieuws li:first-child .vb-nthumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
html .vb .vb-nieuws b { font-size: 15px; line-height: 1.3; font-weight: 800; color: var(--ax-tekst); }
html .vb ul.vb-nieuws li:first-child b, .ak .vb-nieuws > .ak-bericht:first-child b { font-size: 18px; line-height: 1.25; }
html .vb .vb-nieuws small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ax-tekst-zacht); }
.ak .ak-bericht small { opacity: 1; }

/* ---------- agenda en afspraak: groot datumblad, tijd in een pil ---------- */
html .vb .vb-agenda li { gap: 14px; padding: 10px 0; }
html .vb .vb-agenda li + li { border-top: 1px solid var(--ax-lijn); }
html .vb .vb-blad.klein { width: 52px; border-radius: 14px; }
html .vb .vb-blad b { padding: 3px 0 2px; line-height: 1.2; }
html .vb .vb-blad.klein span { font-size: 21px; line-height: 1.15; padding: 2px 0 4px; }
html .vb .vb-agenda li > span:last-child > b { font-size: 16px; line-height: 1.25; color: var(--ax-tekst); }
html .vb .vb-agenda li > span:last-child > small { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 10px 3px 8px;
  border-radius: 999px; background: var(--f-zacht); color: var(--f-inkt); font-size: 13.5px; font-weight: 900; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-agenda li > span:last-child > small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-a); }

/* ---------- route: van -> naar groot, chips als vaste maat ---------- */
html .vb .vb-vannaar { font-size: 20px; gap: 10px; }
html .vb .vb-vannaar b { font-weight: 900; color: var(--ax-tekst); }
html .vb .vb-chips { gap: 8px; margin-top: 12px; }
html .vb .vb-chips span { padding: 5px 12px; font-size: 13.5px; }

/* ---------- recept en lijst ---------- */
html .vb .vb-ingr li { font-size: 15px; padding: 2px 0; }
html .vb .vb-stap li { font-size: 15px; align-items: flex-start; }
html .vb .vb-lijst li { padding: 9px 0; font-size: 15px; }

/* ---------- verkenner: bestandsmerkje breed genoeg voor 12px (XLSX), donkere letter op de pasteltint ---------- */
html .vb .vb-ext { width: auto; min-width: 36px; height: 32px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; color: #262A4D; letter-spacing: 0; }

/* ---------- media: foto/video met zachte rand en ronde hoeken in het paneel ---------- */
html .vb .vb-ytduur, html .vb .vb-duur, html .vb .vb-fotobijs { font-size: 12px; }

/* ---------- ronde 2 (25-10-2026, klus "Ailex kaarten wauw ronde 2") ----------
   1) het weer krijgt een lucht per weertype (data-lucht uit kaartjes.js); wit op elke kleur haalt AA (minstens 5,4:1);
   2) de gewone KAART: kerngetal groot (ak-feit), "Tijd"/"Klok" als klokkaart (ak-klok), losse tekst met een leesregel (ak-tekst). */
html .vb.ak-weer[data-lucht] { --lu-a: #B93A0B; --lu-b: #8E2F10; --lu-c: #6A2310; --lu-gloed: rgba(255, 214, 102, .32); --lu-deco: none; }
html .vb.ak-weer[data-lucht="zon"]     { --lu-a: #0A66BA; --lu-b: #0A4E96; --lu-c: #08386E; --lu-gloed: rgba(255, 210, 74, .45);
  --lu-deco: radial-gradient(150px 150px at 100% 0%, rgba(255, 236, 160, .28), rgba(255, 236, 160, 0) 70%); }
html .vb.ak-weer[data-lucht="bewolkt"] { --lu-a: #4F5D73; --lu-b: #3E4A5E; --lu-c: #2C3647; --lu-gloed: rgba(255, 255, 255, .22);
  --lu-deco: radial-gradient(70px 34px at 72% 18%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%), radial-gradient(90px 40px at 96% 30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }
html .vb.ak-weer[data-lucht="regen"]   { --lu-a: #1F5F7A; --lu-b: #174A63; --lu-c: #0F3347; --lu-gloed: rgba(160, 220, 255, .22);
  --lu-deco: repeating-linear-gradient(105deg, rgba(190, 230, 255, 0) 0 14px, rgba(190, 230, 255, .10) 14px 16px); }
html .vb.ak-weer[data-lucht="onweer"]  { --lu-a: #4A2A8C; --lu-b: #33196B; --lu-c: #1F0F45; --lu-gloed: rgba(255, 220, 90, .45);
  --lu-deco: linear-gradient(115deg, rgba(255, 230, 120, 0) 70%, rgba(255, 230, 120, .16) 70.5%, rgba(255, 230, 120, 0) 76%); }
html .vb.ak-weer[data-lucht="sneeuw"]  { --lu-a: #3D6491; --lu-b: #2E5079; --lu-c: #213C5E; --lu-gloed: rgba(255, 255, 255, .30);
  --lu-deco: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .38) 0 1.5px, transparent 2px) 0 0 / 34px 30px,
             radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .25) 0 1.2px, transparent 1.8px) 0 0 / 26px 24px; }
html .vb.ak-weer[data-lucht="mist"]    { --lu-a: #5C6573; --lu-b: #4A525F; --lu-c: #363C47; --lu-gloed: rgba(255, 255, 255, .18);
  --lu-deco: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, .07) 18px 26px); }
html .vb.ak-weer[data-lucht="nacht"]   { --lu-a: #27306B; --lu-b: #1A2050; --lu-c: #0D1233; --lu-gloed: rgba(220, 225, 255, .32);
  --lu-deco: radial-gradient(circle, rgba(255, 255, 255, .75) 0 1px, transparent 1.6px) 6px 8px / 41px 37px,
             radial-gradient(circle, rgba(255, 255, 255, .45) 0 .8px, transparent 1.4px) 19px 21px / 29px 33px; }
html .vb[data-gk="weer"].ak-weer[data-lucht]:has(.vb-groot) {
  background: radial-gradient(80px 80px at 92% 0%, var(--lu-gloed), rgba(255, 255, 255, 0) 70%), var(--lu-deco),
              linear-gradient(160deg, var(--lu-a) 0%, var(--lu-b) 55%, var(--lu-c) 100%);
}
html .vb[data-gk="weer"].ak-weer[data-lucht]:has(.vb-groot) .vb-kopje > .vb-ic:first-child { color: var(--lu-b); }
html .vb[data-gk="weer"].ak-weer[data-lucht]:not([data-lucht="zon"]):not([data-lucht=""]) .vb-groot { text-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
html .vb[data-gk="weer"].ak-weer[data-lucht="nacht"] .vb-kopje::before { background: radial-gradient(circle at 35% 40%, rgba(255, 255, 255, 0) 0 30px, rgba(240, 236, 200, .20) 31px); }

/* gewone KAART met een kerngetal: het getal groot in de soortkleur, een bedrag in de geldkleuren */
html .vb.ak-feit.ak-geld[data-gk] { --f-a: #FFD45C; --f-b: #FFAE1F; --f-t: #3A2600; --f-diep: #8A5A00; }
html .vb.ak-feit .vb-in { display: flex; flex-direction: column; gap: 0; padding: 12px 16px 16px; }
html .vb.ak-feit .ak-kernlabel { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--f-inkt); }
html .vb.ak-feit .ak-kern { display: block; font-weight: 900; line-height: 1.02; letter-spacing: -.03em; color: var(--f-inkt);
  font-variant-numeric: tabular-nums; overflow-wrap: break-word; margin: 2px 0 8px; }
html .vb.ak-feit .ak-kern.ak-xl { font-size: 60px; }
html .vb.ak-feit .ak-kern.ak-l  { font-size: 48px; }
html .vb.ak-feit .ak-kern.ak-m  { font-size: 36px; }
html .vb.ak-feit .ak-kern.ak-s  { font-size: 30px; }
html .vb.ak-feit.ak-datum .ak-kern { letter-spacing: -.02em; }
html .vb.ak-feit .vb-regel { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ax-tekst); }
html .vb.ak-feit .vb-regel + .vb-regel { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--f-rand); font-weight: 500; color: var(--ax-tekst-zacht); }

/* klokkaart: één nachtblauw paneel, de tijd groot met een knipperloze dubbele punt, ernaast een wijzerplaat op dezelfde tijd */
html .vb.ak-klok[data-gk] { --f-a: #3D4BD6; --f-b: #2B37A8; --f-t: #FFFFFF; --f-diep: #2B37A8; overflow: hidden; color: #FFFFFF;
  background: radial-gradient(120px 120px at 100% 0%, rgba(150, 170, 255, .30), rgba(150, 170, 255, 0) 70%),
              linear-gradient(160deg, #3D4BD6 0%, #2B37A8 55%, #1B2370 100%); }
html .vb.ak-klok .vb-kopje { background: transparent; box-shadow: none; color: #FFFFFF; }
html .vb.ak-klok .vb-in { padding: 2px 16px 18px; }
html .vb.ak-klok .ak-klokrij { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html .vb.ak-klok .ak-tijd { font-size: 60px; line-height: 1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #FFFFFF;
  text-shadow: 0 4px 18px rgba(10, 14, 60, .45); white-space: nowrap; }
html .vb.ak-klok .ak-tijd i { font-style: normal; opacity: .75; padding: 0 1px; position: relative; top: -.06em; }
html .vb.ak-klok .ak-plaat { flex: 0 0 auto; width: 58px; height: 58px; fill: none; stroke: #FFFFFF; stroke-linecap: round; }
html .vb.ak-klok .ak-plaat > circle:first-child { fill: rgba(255, 255, 255, .12); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
html .vb.ak-klok .ak-plaat line { stroke-width: 1.6; stroke: rgba(255, 255, 255, .7); }
html .vb.ak-klok .ak-plaat .ak-uur { stroke-width: 4; stroke: #FFFFFF; }
html .vb.ak-klok .ak-plaat .ak-min { stroke-width: 2.6; stroke: #FFD45C; }
html .vb.ak-klok .ak-plaat .ak-as { fill: #FFD45C; stroke: none; }
html .vb.ak-klok .vb-regel { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
html .vb.ak-klok .vb-regel.ak-dag { font-size: 17px; font-weight: 800; color: #FFFFFF; }
html .vb.ak-klok .vb-regel.ak-dag::first-letter { text-transform: uppercase; }
html .vb.ak-klok .vb-regel + .vb-regel { margin-top: 2px; }

/* losse tekst: de eerste regel leest als een zin met een streep in de soortkleur, de rest eronder */
html .vb.ak-tekst .vb-in { display: flex; flex-direction: column; padding: 14px 16px 16px; }
html .vb.ak-tekst .vb-regel { display: block; font-size: 14px; line-height: 1.4; color: var(--ax-tekst-zacht); }
html .vb.ak-tekst .vb-regel.ak-lead { padding-left: 12px; border-left: 4px solid var(--f-a); border-radius: 2px; font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--ax-tekst); }
html .vb.ak-tekst .vb-regel + .vb-regel { margin-top: 10px; }
/* 25-10-2026 (klus "Ailex tijdkaart nu"): een kort feit als eerste regel groot en zwaar, de kop blijft het lint erboven */
html .vb.ak-tekst .vb-regel.ak-lead-groot { padding-left: 14px; border-left-width: 5px; font-size: 24px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
html .vb.ak-feit .ak-kernlabel { overflow-wrap: anywhere; }
html .vb.ak-tekst .vb-regel + .vb-regel + .vb-regel { margin-top: 4px; }

/* 25-10-2026 Camila (controle uiterlijk nr 1): de tijd op de afspraak- en taakkaart groot, als de tijdpil van de agenda */
html .vb .vb-regel.ak-wanneer { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 8px; padding: 5px 12px;
  border-radius: 999px; background: var(--f-zacht); color: var(--f-inkt); font-size: 18px; font-weight: 900;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--f-rand); }
html .vb .vb-regel.ak-wanneer em { font-size: 12px; }