/* YellowBriks brik-kit v1 (1.34) — huisstijl voor het portaal én elke brik.
   1.34: .yb-weetje in Werktafel en Nachttafel in gewone letters, niet meer in
        handschrift.
   1.33: .yb-weetje loopt over de hele breedte door (geen grens van 68 tekens);
        de bron mag mee afbreken.
   1.32: .yb-weetje, één regel met een cijfer en een bron onder de begroeting
        (.yb-bron): gedempt in Licht en Donker, handschrift in Werktafel en
        Nachttafel, typemachine in Riso-zine.
   1.31: in de standaardthema's valt het label Actief op de tegel weg; een
        proefperiode, Beschikbaar en In ontwikkeling blijven staan.
   1.30: in de standaardthema's is de hele tegel de link: de knop Openen ligt
        er onzichtbaar overheen, zoals in Werktafel en Riso-zine. Het icoon is
        groter (56px). Aanvragen en Nog niet beschikbaar blijven knoppen.
   1.29: ook in de standaardthema's (Licht, Donker, systeem; geen data-yb-stijl)
        heeft een tegel op het startscherm het icoon van de brik: linksboven in
        een afgerond vierkant in de gele familie, het label rechts ernaast. Het
        dienstmerk valt op de tegel weg, zoals in de andere thema's met een
        icoon; elders blijft het staan.
   1.28: het merk (trap en woordmerk) houdt zijn eigen kleuren in elk thema:
        geel #FFC803 en inkt #15171C, op een donkere basis wit. Het volgde de
        accent- en tekstkleur van het thema en werd zo blauw, paars of grijs.
   1.27: Werktafel ook in grijs, licht (werktafel-grijs) en donker
   (nachttafel-grijs).
   1.26: de link over een tegel (.yb-tegellink) heeft een expliciete breedte,
        hoogte en align-self: stretch. Met align-self: flex-start uit het
        portaal was hij 0px hoog en de tegel niet aan te klikken.
   1.25: tegels op het startscherm (.yb-tegel, met .yb-tegelbeeld, .yb-tegelkop
        en .yb-tegellink). In Werktafel en Nachttafel (alle veertien) een
        polaroid met het icoon in een fotovlak, in Riso-zine een appraster: een
        afgerond vierkant met het icoon, de naam eronder. Daar is de hele tegel
        de link en vallen dienstmerk en het label Actief weg. Andere roosters
        (.yb-rooster zonder .yb-tegel) en andere thema's blijven gelijk;
        .yb-tegelbeeld staat buiten deze thema's uit.
   1.24: Werktafel donker, in alle zeven kleuren (nachttafel, nachttafel-rood …
        -paars), op een donkere basis. De regels van Werktafel gelden voor
        werktafel* én nachttafel* (:is(...)).
   1.23: Werktafel in zes kleuren van de regenboog (werktafel-rood, -oranje,
        -groen, -blauw, -indigo, -paars). Alle regels van Werktafel gelden voor
        elke variant ([data-yb-stijl^="werktafel"]); de variant zet alleen de
        kleuren, ook de accentkleur van de kit. Vaste kleuren in Werktafel zijn
        daarvoor tokens geworden (--wt-op-honing, --wt-kaartje, --wt-rgb,
        --wt-schaduw-rgb).
   1.22: .yb-knop.yb-bewaard: na een geslaagde bewaaractie wordt de knop een
        paar seconden groen met een vinkje (yb.js 1.7 zet de klasse). Nieuw
        token --yb-op-groen voor de tekst op dat groen.
   1.21: .yb-kopregel en .yb-kopacties: de kop van elke brik zoals bij de Dossier
        Scanner — naam links, de schermen als knoppen rechts, op de volle breedte.
   1.20: .yb-voetversie zet versie en klok onder elkaar in plaats van naast
        elkaar met een scheidingsteken; op 232px pasten ze toch niet samen.
   1.19: .yb-voetversie: versie en bouwmoment naast elkaar in de zijvoet, die
        samen afbreken in plaats van middenin. Losse naam, want .yb-versieregel
        is al de versie onder de <h1> van een brik (mono, negatieve marge).
   1.18: elke brik heeft een dienstmerk. Plek én tint samen wijzen de brik aan,
        zodat er 16 merken zijn in plaats van 4; de tint is altijd een bestaand
        eigen token (--yb-merk-1 t/m -4), per thema vastgelegd.
        .yb-geel op een vakje blijft werken als alias van .yb-merk-1.
   1.17: thema Graffiti (data-yb-stijl="graffiti"), de eerste speelse stijl op
        een donkere basis; onderaan dit bestand.
   1.16: thema Snoepwinkel (data-yb-stijl="snoep"): schepsnoep in glazen potten
        op de plank; onderaan dit bestand.
   1.15: Riso-zine: zijbalk risoblauw (#1D3D8F) in plaats van zwart; koppen als
        risodruk (donkerblauw met roze en cyaan ernaast), op het startscherm
        een grote BRIKS!! en de naam in losse geplakte letters (.yb-naam).
   1.14: Riso-zine: zijbalk inktzwart in plaats van lichtblauw, zodat het merk
        (geel op licht) goed leesbaar is.
   1.13: thema Riso-zine, een tweede speelse stijl naast Werktafel
        (data-yb-stijl="riso"); onderaan dit bestand.
   1.12: thema Werktafel. Een speels, licht thema dat de gebruiker in het
        portaal kiest (Mijn instellingen). thema.js zet data-yb-stijl=
        "werktafel" op <html>; onderaan dit bestand staat wat dat verandert.
        Portaal en briks volgen het samen; een brik hoeft niets te doen.
   1.9: let op is geel. Nieuwe tokens --yb-let-op (vlak, geel) en
        --yb-let-op-tekst (diepgeel); .yb-badge.yb-let-op krijgt een geel vlak
        en een gele rand; nieuw lampje .yb-lamp (.yb-goed, .yb-let-op, .yb-fout),
        zodat briks geen eigen stoplicht meer bouwen. --yb-oranje blijft als
        alias voor bestaande briks.
   1.8: ingebed blijven de schermen van de brik bereikbaar: de zijbalk wordt een
        tabbalk boven de inhoud (zonder merk, context en voet, die het portaal al
        toont). Een brik met één scherm krijgt geen balk.
   1.6: een brik laadt de kit van het portaal in plaats van een kopie (contract
        2.0) en tekent zijbalk en merk met <yb-zijbalk> en <yb-merk> uit yb.js.
   1.5: volgens het YellowBriks-stijlboek 1.1: logo (de trap), statuslabels als
        omlijnde pil, velden op een grijs vlak, kaarten met zachte schaduw,
        dienstmerken per brik, radii 999/12/18/24, afstanden in veelvouden van 4,
        akkoord #2F7A4C en stop #B3402E, geen oranje.
   1.4: de zijbalk blijft staan als de inhoud scrolt; de voet van de zijbalk
        (uitloggen, thema, versie) blijft altijd in beeld.
   1.3: ingebed draaien in een frame van het portaal (data-yb-ingebed): geen
        eigen zijbalk en themaknop, de schil is die van het portaal.
   1.2: licht/donker als keuze van de gebruiker (thema.js + .yb-thema in de
        voet van de zijbalk), naast de systeemvoorkeur.
   1.1: de schil (zijbalk + inhoud) zit in de kit; het portaal gebruikt
        ditzelfde bestand, zodat portaal en briks niet uit elkaar kunnen lopen.
        .yb-balk (kopbalk) blijft werken maar is vervangen door .yb-zijbalk.
   Bron: YellowBriks-stijlboek 1.1 (september 2026), dat de Yellow55-huisstijl
   ongewijzigd overneemt (Y55_StandaardDocs/YellowBriks/).
   Een brik laadt dit bestand van het portaal ({portaal}/brik-kit/v1/) en
   neemt geen kopie op; hij wijzigt hem niet (BriksAfspraken 2.0, §6).
   Alle tokens en klassen hebben het voorvoegsel yb-, zodat ze een bestaande
   stylesheet in de brik niet in de weg zitten.

   Regels die hierin verwerkt zijn en die een brik niet mag omzeilen:
   - één accent: geel (#FFC803) is vlak- en knopkleur, nooit tekstkleur op
     licht; geel als tekst is diepgeel (#6B4E00). Status in akkoord, let op en
     stop; let op is geel (vlak) met diepgeel als tekst. Geen andere
     accentkleur, ook niet per brik.
   - Inter, koppen 800 met negatieve spatiëring, lopende tekst 400 in grijs
   - rond, nooit hard: knop en label 999, veld 12, kaart 18, groot vlak 24;
     één pixel rand en een zachte schaduw, geen zware lijnen
   - het merk is de trap met "yellowbriks" (.yb-merk uit zijbalk.html); niet
     nabouwen, niet uitrekken, geen schaduw of verloop op het merk
   - licht en donker volgen de voorkeur van de gebruiker */

:root {
  --yb-bg: #F6F6F4;
  --yb-vlak: #FFFFFF;
  --yb-vlak-2: #EDEEEA;
  --yb-lijn: #DEDFDA;
  --yb-lijn-zacht: #EAEBE7;
  --yb-tekst: #15171C;
  --yb-gedempt: #5A5F68;
  --yb-vaag: #6B7078;
  --yb-goud: #6B4E00;
  --yb-geel: #FFC803;
  --yb-geel-dim: #FFF3CC;
  --yb-geel-lijn: #F0DFA0;
  /* Tinten van het dienstmerk (kit 1.18). Eigen tokens, want --yb-goud en
     --yb-geel-dim betekenen per thema iets anders en vallen in het donkere
     thema samen; een merk mag niet van thema tot thema van brik wisselen.
     Licht: vier waarden die al in het palet staan. */
  --yb-merk-1: #FFC803;  /* vol geel  */
  --yb-merk-2: #6B4E00;  /* goud      */
  --yb-merk-3: #F0DFA0;  /* zacht     */
  --yb-merk-4: #FFF3CC;  /* licht     */
  --yb-op-geel: #15171C;
  --yb-groen: #2F7A4C;   /* akkoord */
  --yb-op-groen: #FFFFFF;
  --yb-let-op: #FFC803;        /* let op, als vlak: geel (kit 1.9) */
  --yb-let-op-tekst: #6B4E00;  /* let op, als tekst: diepgeel */
  --yb-oranje: #6B4E00;  /* alias van --yb-let-op-tekst; het palet kent geen oranje */
  --yb-rood: #B3402E;    /* stop */
  --yb-schaduw: 0 8px 24px rgba(21, 23, 28, .10);
  --yb-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --yb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --yb-r-sm: 8px; --yb-r-md: 12px; --yb-r-lg: 18px; --yb-r-xl: 24px; --yb-r-pil: 999px;
  color-scheme: light;
}

/* Drie standen: systeem (niets gezet), licht, donker. thema.js zet
   data-yb-thema op <html> vóór de eerste paint, uit localStorage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-yb-thema="light"]) {
    --yb-bg: #0A0B0D; --yb-vlak: #15171C; --yb-vlak-2: #1D2026;
    --yb-lijn: #24262C; --yb-lijn-zacht: #1B1E23;
    --yb-tekst: #E8E9EC; --yb-gedempt: #A3A9B2; --yb-vaag: #8A9099;
    --yb-goud: #FFC803;
    --yb-geel-dim: rgba(255, 200, 3, .14); --yb-geel-lijn: rgba(255, 200, 3, .3);
    --yb-merk-1: #FFC803; --yb-merk-2: rgba(255, 200, 3, .70);
    --yb-merk-3: rgba(255, 200, 3, .45); --yb-merk-4: rgba(255, 200, 3, .22);
    --yb-groen: #6FCF97; --yb-op-groen: #0B2A18; --yb-oranje: #FFC803; --yb-rood: #FF8A78;
    --yb-let-op-tekst: #FFC803;
    --yb-schaduw: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-yb-thema="dark"] {
    --yb-bg: #0A0B0D; --yb-vlak: #15171C; --yb-vlak-2: #1D2026;
    --yb-lijn: #24262C; --yb-lijn-zacht: #1B1E23;
    --yb-tekst: #E8E9EC; --yb-gedempt: #A3A9B2; --yb-vaag: #8A9099;
    --yb-goud: #FFC803;
    --yb-geel-dim: rgba(255, 200, 3, .14); --yb-geel-lijn: rgba(255, 200, 3, .3);
    --yb-merk-1: #FFC803; --yb-merk-2: rgba(255, 200, 3, .70);
    --yb-merk-3: rgba(255, 200, 3, .45); --yb-merk-4: rgba(255, 200, 3, .22);
    --yb-groen: #6FCF97; --yb-op-groen: #0B2A18; --yb-oranje: #FFC803; --yb-rood: #FF8A78;
    --yb-let-op-tekst: #FFC803;
    --yb-schaduw: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* ---------- basis ---------- */
.yb-pagina, body.yb-pagina {
  margin: 0; background: var(--yb-bg); color: var(--yb-tekst);
  font-family: var(--yb-font); font-size: 16px; line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}
.yb-pagina a { color: var(--yb-goud); }
/* Een link die als knop of merk is opgemaakt, is geen tekstlink meer. */
.yb-pagina a.yb-knop { color: var(--yb-op-geel); text-decoration: none; }
.yb-pagina a.yb-knop.yb-stil { color: var(--yb-tekst); }
.yb-pagina a.yb-merk { color: var(--yb-merk-inkt); text-decoration: none; }
.yb-pagina h1, .yb-pagina h2, .yb-pagina h3 { color: var(--yb-tekst); }
/* Stijlboek §7: sectiekop 36/41 ExtraBold −2%, kaartkop 20/26 Bold −1%,
   tussenkop 16 SemiBold. */
.yb-pagina h1 { font-size: 2.25rem; line-height: 1.14; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.yb-pagina h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.yb-pagina h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; margin: 0 0 8px; }
.yb-pagina :is(td, .yb-cijfer) { font-variant-numeric: tabular-nums; }
/* Markering boven een kop: kapitaal, diepgeel, met // ervoor. */
.yb-markering { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yb-goud); margin-bottom: 8px; }
.yb-markering::before { content: "// "; color: var(--yb-geel); }
.yb-pagina code { font-family: var(--yb-mono); font-size: .85em; }

/* De inhoud gebruikt de breedte van het scherm (kit 1.10, 21-09-2026). Tot dan
   stond hij op 1160px: op een breed scherm bleef dan de halve monitor leeg,
   terwijl juist tabellen (objecten, agenda, logboek) die ruimte nodig hebben.
   Lopende tekst blijft wél smal; daarvoor is .yb-doc. */
.yb-inhoud { padding: 32px 32px 64px; max-width: none; }
@media (max-width: 520px) { .yb-inhoud { padding: 24px 16px 48px; } }
.yb-kop-tekst p { color: var(--yb-gedempt); margin: 0; max-width: 68ch; }

/* ---------- de schil ----------
   Zijbalk links, inhoud rechts; op een smal scherm boven elkaar. Dit is
   exact de opbouw van het portaal. Een brik vult de zijbalk met zijn eigen
   navigatie; merk, kantoor, gebruiker en versie komen uit het token. */
.yb-schil { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
@media (max-width: 780px) { .yb-schil { grid-template-columns: 1fr; } }

.yb-zijbalk {
  background: var(--yb-vlak); border-right: 1px solid var(--yb-lijn);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 24px;
}
@media (max-width: 780px) { .yb-zijbalk { border-right: 0; border-bottom: 1px solid var(--yb-lijn); } }
.yb-zijbalk .yb-merk .yb-woordmerk { font-size: 1.125rem; }
.yb-zijbalk .yb-merk .yb-dot { width: 9px; height: 9px; }
.yb-zijbalk .yb-merk .yb-streep { width: 11px; height: 20px; }
/* Vaste opbouw van de zijbalk, in portaal en brik gelijk:
   merk → context (waar ben ik, welk kantoor, wie) → nav (schermen) → voet (één
   actie + versienummer). */
.yb-zijbalk .yb-context { font-size: .85rem; color: var(--yb-gedempt); line-height: 1.4; }
.yb-zijbalk .yb-context .yb-brik { display: block; font-weight: 700; color: var(--yb-tekst); margin-bottom: 2px; }

.yb-nav { display: flex; flex-direction: column; gap: 2px; }
.yb-nav a {
  display: block; padding: 8px 12px; border-radius: var(--yb-r-md);
  color: var(--yb-tekst); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.yb-nav a:hover { background: var(--yb-vlak-2); }
.yb-nav a[aria-current="page"] { background: var(--yb-geel-dim); color: var(--yb-goud); font-weight: 600; }

/* Tabbladen boven de inhoud: de modules van een brik naast elkaar (kit 1.11).
   Anders dan .yb-nav, dat de zijbalk is: die staat onder elkaar en hoort bij de
   schil. Deze balk hoort bij het scherm. */
.yb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; border-bottom: 1px solid var(--yb-lijn-zacht); padding-bottom: 12px; }
.yb-tabs a {
  display: inline-block; padding: 8px 16px; border-radius: var(--yb-r-md);
  border: 1px solid var(--yb-lijn-zacht); background: var(--yb-vlak);
  color: var(--yb-tekst); text-decoration: none; font-size: .93rem; font-weight: 500;
}
.yb-tabs a:hover { background: var(--yb-vlak-2); }
.yb-tabs a[aria-current="page"] { background: var(--yb-geel); border-color: var(--yb-geel); color: var(--yb-zwart); font-weight: 600; }

.yb-zijvoet { margin-top: auto; font-size: .78rem; color: var(--yb-vaag); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.yb-zijvoet .yb-knop { font-size: .875rem; padding: 8px 16px; }
/* Versie en klok onder elkaar (kit 1.20). Stonden tot 1.19 naast elkaar en
   braken af zodra ze niet meer pasten — op de zijbalk van 232px was dat bijna
   altijd, dus de tweede regel was eerder regel dan uitzondering. Nu staat de
   klok er vast onder, en is er geen scheidingsteken meer nodig.
   Elke regel blijft heel: liever een regel die uitsteekt en opvalt dan een
   datum die middenin afbreekt. */
.yb-voetversie { display: flex; flex-direction: column; row-gap: 1px; max-width: 100%; }
.yb-voetversie > span { white-space: nowrap; }

/* De zijbalk blijft staan terwijl de inhoud rechts scrolt (kit 1.4). Is de
   navigatie langer dan het scherm, dan scrolt alléén die lijst: merk, context
   en voet staan vast, zodat uitloggen, thema en versienummer altijd in beeld
   zijn. De scroll zit daarom op .yb-nav en niet op de balk — met de scroll op
   de balk zelf zou de voet juist wél wegschuiven.
   `overflow: hidden auto` op de balk is de uitweg voor het uiterste geval: op
   een laag maar breed scherm (liggende telefoon, klein venster) passen merk,
   context en voet samen al niet meer, en .yb-nav is dan tot niets geslonken.
   Met `hidden` op beide assen zou de voet daar onbereikbaar zijn — erger dan
   vóór deze wijziging, toen hij tenminste nog met de pagina meescrolde.
   `box-sizing` staat er expliciet bij: de kit zet dat niet globaal, en zonder
   dat komt de padding bovenop 100dvh en valt de voet onder de rand.
   De voorwaarde is het exacte spiegelbeeld van de `max-width: 780px` hierboven.
   `min-width: 781px` lijkt hetzelfde maar laat een gat: bij een gebroken
   vensterbreedte (zoom, niet-gehele pixelverhouding) is 780,5px geen van beide
   en verdwijnt het sticky-gedrag stilzwijgend. */
@media not all and (max-width: 780px) {
  .yb-zijbalk {
    position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh;
    box-sizing: border-box; overflow: hidden auto;
  }
  .yb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .yb-zijvoet { flex: 0 0 auto; }
}

.yb-kop { margin-bottom: 24px; }
.yb-kop p { color: var(--yb-gedempt); margin: 0; max-width: 68ch; }
.yb-kop p.yb-weetje { margin-top: 10px; font-size: .92rem; max-width: none; }
.yb-weetje .yb-bron { font-style: italic; }
.yb-weetje .yb-bron a { color: inherit; }
/* De kopregel (1.21): de indeling van de Dossier Scanner voor elke brik. Links
   .yb-kop (naam, met versie of ondertitel), rechts .yb-kopacties met de schermen
   of acties als knoppen: de hoofdactie .yb-knop, de rest .yb-knop.yb-stil, en
   het scherm dat openstaat met aria-current="page". Past het niet op één regel,
   dan lopen de knoppen door naar een regel eronder, rechts uitgelijnd. */
.yb-kopregel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.yb-kopregel > .yb-kop { margin: 0; }
.yb-kopregel > .yb-kop h1 { margin: 0; }
.yb-kopacties { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yb-kopacties a.yb-knop { text-decoration: none; }
.yb-kopacties .yb-knop.yb-stil[aria-current="page"] { background: var(--yb-geel-dim); border-color: var(--yb-geel-lijn); }

/* ---------- themakeuze (kit 1.2) ----------
   Segment met drie knoppen in de voet van de zijbalk. thema.js koppelt ze;
   een brik bouwt geen eigen schakelaar. */
.yb-thema { display: inline-flex; border: 1px solid var(--yb-lijn); border-radius: var(--yb-r-pil); overflow: hidden; background: var(--yb-vlak-2); }
.yb-thema button {
  border: 0; background: none; color: var(--yb-gedempt); font: inherit; font-size: .74rem;
  font-weight: 600; padding: 4px 10px; cursor: pointer; line-height: 1.4;
}
.yb-thema button + button { border-left: 1px solid var(--yb-lijn); }
.yb-thema button[aria-pressed="true"] { background: var(--yb-geel); color: var(--yb-op-geel); }
.yb-thema button:focus-visible { outline: 2px solid var(--yb-goud); outline-offset: -2px; }

/* ---------- ingebed in het portaal (kit 1.3, 1.8) ----------
   thema.js zet data-yb-ingebed op <html> als de brik in een frame draait. Het
   portaal toont dan zijn eigen zijbalk met merk, kantoor en gebruiker; die van de
   brik hoeft dat niet nog eens. Maar de schermen van de brik (zijn nav) moeten
   bereikbaar blijven, anders kan iemand in het frame nergens heen (1.8). De
   zijbalk wordt daarom een tabbalk boven de inhoud, die blijft staan bij
   scrollen. Heeft de brik maar één scherm, dan is er niets te kiezen en geen balk. */
html[data-yb-ingebed] .yb-schil { grid-template-columns: 1fr; min-height: 0; }
html[data-yb-ingebed] .yb-thema { display: none; }
html[data-yb-ingebed] .yb-zijbalk {
  position: sticky; top: 0; z-index: 5; height: auto; overflow: visible;
  flex-direction: row; align-items: center; gap: 0;
  padding: 8px 28px; border-right: 0; border-bottom: 1px solid var(--yb-lijn);
}
html[data-yb-ingebed] .yb-zijbalk > .yb-merk,
html[data-yb-ingebed] .yb-zijbalk > .yb-context,
html[data-yb-ingebed] .yb-zijbalk > .yb-zijvoet { display: none; }
html[data-yb-ingebed] .yb-zijbalk .yb-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; overflow: visible; }
html[data-yb-ingebed] .yb-zijbalk .yb-nav a { padding: 6px 14px; border-radius: var(--yb-r-pil); }
html[data-yb-ingebed] .yb-zijbalk:not(:has(.yb-nav a + a)) { display: none; }
@media (max-width: 520px) { html[data-yb-ingebed] .yb-zijbalk { padding: 8px 16px; } }
html[data-yb-ingebed] .yb-inhoud { padding: 24px 28px 48px; }

/* Het frame in het portaal vult de hele inhoud, zonder de gebruikelijke
   marge en maximale breedte; scrollen gebeurt in het frame. */
.yb-inhoud:has(> .yb-brikpagina) { padding: 0; max-width: none; }
.yb-brikpagina { display: flex; flex-direction: column; height: 100vh; }
.yb-brikpagina .yb-brikbalk { display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  border-bottom: 1px solid var(--yb-lijn); background: var(--yb-vlak); font-size: .9rem; }
.yb-brikframe { flex: 1; width: 100%; border: 0; display: block; background: var(--yb-bg); }

/* ---------- kopbalk (1.0, vervangen door de zijbalk) ---------- */
.yb-balk {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--yb-vlak);
  border-bottom: 1px solid var(--yb-lijn); border-top: 3px solid var(--yb-geel);
  font-size: .88rem;
}
.yb-balk a { text-decoration: none; }
/* Het merk (stijlboek §3/§4): de trap en "yellowbriks". Stenen 54×28 in een
   raster van 100, 23 opzij en 33 omhoog, radius 4. De onderste twee volgen de
   tekstkleur (inkt, in donker wit = de inverse versie), de bovenste is geel.
   "yellow" in inkt, "briks" in geel. Minimaal 22px beeldmerk. */
/* Het merk volgt geen thema (1.28): vaste merkkleuren, alleen inkt of wit
   naar de basis van het thema. --yb-merk-geel en --yb-merk-inkt worden door
   geen enkele stijl overschreven. */
:root { --yb-merk-geel: #FFC803; --yb-merk-inkt: #15171C; }
html[data-yb-thema="dark"] { --yb-merk-inkt: #FFFFFF; }
@media (prefers-color-scheme: dark) { html:not([data-yb-thema="light"]) { --yb-merk-inkt: #FFFFFF; } }
.yb-merk { display: inline-flex; align-items: center; gap: 10px; color: var(--yb-merk-inkt); text-decoration: none; }
.yb-beeldmerk { width: 28px; height: 28px; flex: none; display: block; }
.yb-beeldmerk .yb-steen { fill: var(--yb-merk-inkt); }
.yb-beeldmerk .yb-steen-geel { fill: var(--yb-merk-geel); }
.yb-woordmerk { font-weight: 800; font-size: 1.25rem; line-height: 1; letter-spacing: -.045em; color: var(--yb-merk-inkt); }
.yb-woordmerk b { font-weight: inherit; color: var(--yb-merk-geel); }
/* Oude markup (punt + streep, kit ≤ 1.4) blijft werken voor briks die nog niet bij zijn. */
.yb-merk .yb-dot { width: 8px; height: 8px; border-radius: var(--yb-r-pil); background: var(--yb-merk-geel); }
.yb-merk .yb-streep { width: 10px; height: 18px; background: var(--yb-merk-geel); transform: skewX(-18deg); border-radius: 2px; }
.yb-balk .yb-brik { font-weight: 700; }
.yb-balk .yb-scheiding { color: var(--yb-lijn); }
.yb-balk .yb-context { color: var(--yb-gedempt); margin-left: auto; }
.yb-balk .yb-versie { color: var(--yb-vaag); font-size: .78rem; }

/* ---------- onderdelen ---------- */
.yb-kaart { background: var(--yb-vlak); border: 1px solid var(--yb-lijn); border-radius: var(--yb-r-lg); padding: 24px; box-shadow: var(--yb-schaduw); }
.yb-kaart p { color: var(--yb-gedempt); }
.yb-rooster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); }
/* Het grote beeld van een tegel (kit 1.25): alleen in Werktafel, Nachttafel en Riso-zine. */
.yb-tegelbeeld { display: none; }
/* Standaardthema's (kit 1.29): het icoon linksboven in een vierkant van 44px,
   goud op lichtgeel (licht) of geel op gedimd geel (donker), via --yb-goud.
   Het label (Actief, Proef …) staat rechts op dezelfde hoogte; het dienstmerk
   valt op de tegel weg, want het icoon wijst de brik nu aan. */
/* Een raster: icoon en label naast elkaar op de eerste rij, daaronder naam,
   uitleg (die de ruimte vult) en eventueel Aanvragen. Zo duwt een lang label
   (Proef tot …) het icoon niet weg maar breekt het af. */
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 8px;
  transition: border-color .15s, transform .15s;
}
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel > * { grid-column: 1 / -1; justify-self: start; }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel:has(.yb-tegellink:not(.yb-stil)):is(:hover, :focus-within) { border-color: var(--yb-geel-lijn); transform: translateY(-2px); }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld {
  grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: var(--yb-r-md);
  background: var(--yb-geel-dim); border: 1px solid var(--yb-geel-lijn); color: var(--yb-goud);
}
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld svg { width: 34px; height: 34px; }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel > .yb-tegelkop { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; min-width: 0; }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel > .yb-tegelkop .yb-badge { white-space: normal; text-align: center; }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel > p { margin: 0; }
/* De hele tegel is de link (kit 1.30): Openen ligt er onzichtbaar overheen. */
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:not(.yb-stil) {
  /* grid-column/-row auto: dan is het vlak de hele tegel, ook de rand, niet alleen de kolommen. */
  grid-column: auto; grid-row: auto;
  position: absolute; inset: 0; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
  z-index: 2; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; color: transparent; font-size: 0; box-shadow: none; filter: none; transform: none;
}
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:focus-visible { outline: 3px solid var(--yb-geel); outline-offset: 3px; }
html:root:not([data-yb-stijl]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop > :is(.yb-dienstmerk, .yb-badge.yb-aan) { display: none; }

.yb-knop {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--yb-geel); color: var(--yb-op-geel); font-family: var(--yb-font);
  font-weight: 600; font-size: 1rem; line-height: 1; padding: 12px 20px; border-radius: var(--yb-r-pil);
  text-decoration: none;
}
.yb-knop:hover { background: #FFDD4A; }
/* Stijlboek §9: één gele knop per scherm; de rest is de witte pil. */
.yb-knop.yb-stil { background: var(--yb-vlak); color: var(--yb-tekst); border: 1px solid var(--yb-lijn); }
.yb-knop.yb-stil:hover { border-color: var(--yb-tekst); background: var(--yb-vlak); }
.yb-knop.yb-rond { width: 40px; height: 40px; padding: 0; justify-content: center; }
/* a.yb-tekstlink: moet zwaarder wegen dan .yb-pagina a (diepgeel). */
.yb-pagina a.yb-tekstlink, .yb-tekstlink { color: var(--yb-tekst); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yb-geel);
  text-decoration-thickness: 2px; text-underline-offset: 6px; }
.yb-knop:disabled { opacity: .5; cursor: not-allowed; }
/* Bewaard (1.22): het akkoordgroen van de statuslabels, als vlak. Ook op een
   stille knop en in elke stijl (Werktafel, Graffiti); daarom !important: het
   is een stand van een paar seconden, die altijd boven de stijl gaat. */
.yb-knop.yb-bewaard, .yb-knop.yb-stil.yb-bewaard, .yb-knop.yb-bewaard:hover {
  background: var(--yb-groen) !important; color: var(--yb-op-groen) !important; border-color: var(--yb-groen) !important;
  animation: yb-bewaard .3s ease-out;
}
.yb-knop.yb-bewaard::before { content: "✓"; font-weight: 700; }
@keyframes yb-bewaard { from { transform: scale(.96); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .yb-knop.yb-bewaard { animation: none; } }

/* Statuslabel (stijlboek §9): omlijnde pil, kapitaal. Akkoord = groen
   (.yb-aan, .yb-goed), in aanbouw of let op = diepgeel, fout = stop, de rest
   grijs. Geen gevulde labels. */
.yb-badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.4; padding: 4px 10px; border-radius: var(--yb-r-pil); border: 1px solid var(--yb-lijn);
  background: transparent; color: var(--yb-vaag); white-space: nowrap;
}
.yb-badge.yb-aan, .yb-badge.yb-goed { color: var(--yb-groen); border-color: currentColor; }
/* Let op is geel (1.9): diepgeel voor de tekst, want geel als tekst op licht is
   onleesbaar, en een geel vlak met gele rand zodat het label ook geel óógt. */
.yb-badge.yb-let-op { color: var(--yb-let-op-tekst); border-color: var(--yb-let-op); background: var(--yb-geel-dim); }
.yb-badge.yb-fout { color: var(--yb-rood); border-color: currentColor; }

/* Lampje (1.9): de status van een punt als bolletje, in dezelfde drie kleuren
   als het statuslabel. Het gele lampje krijgt een diepgele ring, anders valt
   het op een wit vlak weg. Zonder modifier grijs: niet van toepassing. */
.yb-lamp { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--yb-lijn); vertical-align: middle; }
.yb-lamp.yb-goed { background: var(--yb-groen); }
.yb-lamp.yb-let-op { background: var(--yb-let-op); box-shadow: inset 0 0 0 1px var(--yb-let-op-tekst); }
.yb-lamp.yb-fout { background: var(--yb-rood); }

/* Dienstmerk (stijlboek §10, uitgebreid in kit 1.18): vier vakken, één gekleurd.
   Plek én tint samen zijn de brik — vier plekken x vier tinten = 16 merken, want
   met vijftien briks kan één plek alleen niet meer onderscheiden. De tinten blijven
   binnen de geel/goud-familie van het palet: géén oranje (dat kent het palet niet)
   en géén akkoord of stop, want die twee betekenen al iets. Zo blijft de regel
   "geen eigen kleuren per dienst" overeind: een brik kiest niets, hij krijgt een
   plek en een tint toegewezen. */
.yb-dienstmerk { display: inline-grid; grid-template-columns: repeat(2, 1fr); gap: 3px; width: 32px; height: 32px; flex: none; }
.yb-dienstmerk > span { border-radius: 3px; background: var(--yb-tekst); }
.yb-dienstmerk > span.yb-merk-1,
.yb-dienstmerk > span.yb-geel { background: var(--yb-merk-1); }
.yb-dienstmerk > span.yb-merk-2 { background: var(--yb-merk-2); }
.yb-dienstmerk > span.yb-merk-3 { background: var(--yb-merk-3); }
.yb-dienstmerk > span.yb-merk-4 { background: var(--yb-merk-4); }
/* De twee zwakste tinten vallen weg: op wit tegen het vlak, op donker tegen de
   drie vakken die daar juist bijna wit zijn. Een dunne rand in --yb-goud houdt
   het vakje zichtbaar, en werkt in beide themas: goud is licht op donker. */
.yb-dienstmerk > span.yb-merk-3,
.yb-dienstmerk > span.yb-merk-4 { box-shadow: inset 0 0 0 1px var(--yb-goud); }
.yb-dienstmerk.yb-leeg > span { background: var(--yb-lijn); }

.yb-tabel { border-collapse: collapse; width: 100%; font-size: .92rem; }
.yb-tabel th {
  text-align: left; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yb-vaag); border-bottom: 1px solid var(--yb-lijn); padding: 0 12px 8px 0;
}
.yb-tabel td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--yb-lijn-zacht); vertical-align: top; }
.yb-tabelwrap { overflow-x: auto; }

/* Veld (stijlboek §9): label erboven, nooit als grijze tekst in het veld. */
.yb-pagina label { display: block; font-size: .8rem; font-weight: 600; color: var(--yb-gedempt); margin-bottom: 8px; }
.yb-pagina input:not([type=checkbox]):not([type=radio]), .yb-pagina select, .yb-pagina textarea {
  width: 100%; font-family: var(--yb-font); font-size: 1rem; color: var(--yb-tekst);
  background: var(--yb-vlak-2); border: 1px solid var(--yb-lijn);
  border-radius: var(--yb-r-md); padding: 12px 14px; box-sizing: border-box;
}
.yb-pagina :is(input, select, button, a):focus-visible { outline: 2px solid var(--yb-goud); outline-offset: 2px; }
.yb-veld { margin-bottom: 16px; }
.yb-rij { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }

.yb-melding { border-radius: var(--yb-r-md); padding: 12px 16px; font-size: .9rem; margin-bottom: 16px;
  background: var(--yb-geel-dim); border: 1px solid var(--yb-geel-lijn); color: var(--yb-tekst); }
.yb-leeg { color: var(--yb-gedempt); font-size: .92rem; }

/* De goedkeurbak: een AI-voorstel is altijd herkenbaar als voorstel. */
.yb-voorstel { border-left: 4px solid var(--yb-geel); padding-left: 14px; }
.yb-voorstel .yb-bron { font-size: .8rem; color: var(--yb-vaag); }

/* De payoff (stijlboek §2): twee zinnen, eerste in inkt, tweede in grijs.
   Eén keer per stuk, onder het logo. */
/* Dubbele klasse: moet zwaarder wegen dan .yb-kaart p (grijs). */
.yb-pagina .yb-payoff, .yb-payoff { font-size: 1.75rem; line-height: 1.14; font-weight: 800; letter-spacing: -.03em; color: var(--yb-tekst); margin: 0; }
.yb-pagina .yb-payoff span, .yb-payoff span { color: var(--yb-gedempt); }

/* ---------- onderdelen uit yb.js (kit 1.6) ----------
   De host-elementen doen niet mee in de opmaak; wat yb.js erin zet wel. Tot
   het onderdeel getekend is, houdt de zijbalk zijn plek vast (geen sprong in
   de schil) en blijven de ruwe nav-links onzichtbaar. */
yb-merk { display: contents; }
yb-zijbalk[data-yb-klaar] { display: contents; }
yb-zijbalk:not([data-yb-klaar]) { display: block; background: var(--yb-vlak); border-right: 1px solid var(--yb-lijn); min-height: 100vh; }
yb-zijbalk:not([data-yb-klaar]) > * { display: none; }
@media (max-width: 780px) { yb-zijbalk:not([data-yb-klaar]) { min-height: 0; border-right: 0; } }
/* Ingebed: zolang yb.js nog niet getekend heeft geen lege balk. Daarna doet de
   host niet mee (display: contents) en maakt de regel bij "ingebed in het
   portaal" van de zijbalk een tabbalk (1.8). */
html[data-yb-ingebed] yb-zijbalk:not([data-yb-klaar]) { display: none; }

/* ---------- thema Werktafel (kit 1.12) ----------
   Het bureau van de makelaar: kraftpapier, papier met een zachte schaduw,
   navigatie als systeemkaartjes en koppen in handschrift. Geldt voor het
   portaal én elke brik: thema.js zet data-yb-stijl="werktafel" (met
   data-yb-thema="light") zodra de gebruiker dit thema koos, ook ingebed via
   ?thema=werktafel en postMessage. Kleuren blijven in de gele familie met warme
   neutralen; de statuskleuren (akkoord, let op, stop) veranderen niet, zodat
   een status overal herkenbaar blijft. De selectors zijn bewust zwaar
   (html:root[…]) zodat ze winnen van de rest van de kit en van een brik die
   dezelfde klassen nog eens opmaakt. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) {
  --yb-bg: #D9C7A0;
  --yb-vlak: #FFF8E6;
  --yb-vlak-2: #F3E6C4;
  --yb-lijn: #CDB88C;
  --yb-lijn-zacht: #E4D5B0;
  --yb-tekst: #2A1F05;
  --yb-gedempt: #5A4A28;
  --yb-vaag: #6E5E3A;
  --yb-schaduw: 0 14px 18px -10px rgb(var(--wt-schaduw-rgb) / .45);
  --yb-r-lg: 3px;
  --yb-r-md: 6px;
  --wt-honing: #FFC803;
  --wt-boter: #FFE58A;
  --wt-room: #FFF8E6;
  --wt-inkt: #2A1F05;
  --wt-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  /* Sinds 1.23 als tokens, zodat de kleurvarianten ze kunnen vervangen. */
  --wt-op-honing: #2A1F05;
  --wt-kaartje: #FFFDF6;
  --wt-rgb: 107 78 0;      /* vezels, randen en lijntjes, met doorzichtigheid */
  --wt-schaduw-rgb: 42 31 5;
}

/* Het blad: kraftpapier met fijne vezels. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) body.yb-pagina,
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-pagina {
  background-color: var(--yb-bg);
  background-image:
    radial-gradient(rgb(var(--wt-rgb) / .10) 1px, transparent 1.2px),
    radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.2px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

/* Zijbalk: een schrijfblok met een rode kantlijn; de inhoud rechts ervan. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-zijbalk {
  background:
    linear-gradient(90deg, transparent 22px, rgba(179, 64, 46, .35) 22px 24px, transparent 24px),
    repeating-linear-gradient(0deg, transparent 0 27px, rgb(var(--wt-rgb) / .12) 27px 28px),
    var(--wt-room);
  border-right: 0;
  padding-left: 34px;
  box-shadow: 6px 0 18px -10px rgb(var(--wt-schaduw-rgb) / .5);
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-zijbalk .yb-context .yb-brik {
  font-family: var(--wt-hand); font-size: 1.5rem; font-weight: 700; line-height: 1;
}

/* Navigatie en tabbladen als systeemkaartjes. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav { gap: 6px; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a,
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-tabs a {
  background: var(--wt-kaartje); border: 0;
  border-radius: 10px 4px 4px 10px;
  box-shadow: -2px 2px 0 rgb(var(--wt-rgb) / .15);
  font-weight: 600; color: var(--yb-gedempt);
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a { transform: translateX(6px); transition: transform .2s ease; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a:hover,
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-tabs a:hover { background: var(--wt-boter); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a:hover { transform: translateX(2px); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a[aria-current="page"],
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-tabs a[aria-current="page"] {
  background: var(--wt-honing); color: var(--wt-op-honing); font-weight: 800; transform: none;
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-tabs { border-bottom-color: var(--yb-lijn); }

/* Ingebed is de zijbalk van een brik een tabbalk (kit 1.8): dan geen
   schrijfblok maar kaartjes op het bureau. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"])[data-yb-ingebed] .yb-zijbalk {
  background: var(--yb-bg); box-shadow: none; padding-left: 28px; border-bottom: 1px solid var(--yb-lijn);
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"])[data-yb-ingebed] .yb-zijbalk .yb-nav a { transform: none; border-radius: 10px 10px 4px 4px; }

/* Koppen in handschrift. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-inhoud h1 {
  font-family: var(--wt-hand); font-weight: 700; font-size: 2.9rem; letter-spacing: 0; line-height: 1.05;
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-markering { color: var(--yb-gedempt); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-markering::before { content: "✎ "; color: var(--yb-gedempt); }

/* Kaarten: papier op het bureau. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-kaart { background: var(--wt-room); border: 0; box-shadow: var(--yb-schaduw); }

/* Tegels in een rooster zijn memoblaadjes: afwisselend boter, honing en room,
   een beetje scheef, met een stukje plakband. Aanwijzen legt ze recht. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster { gap: 32px 26px; padding-top: 12px; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart { position: relative; padding-top: 32px; transition: transform .3s ease; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart:nth-child(3n + 1) { background: var(--wt-boter); transform: rotate(-2deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart:nth-child(3n + 2) { background: var(--wt-memo, var(--wt-honing)); transform: rotate(1.5deg) translateY(10px); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart:nth-child(3n) { background: var(--wt-room); transform: rotate(-1deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart:hover { transform: rotate(0) translateY(-4px); z-index: 1; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 88px; height: 24px; margin-left: -44px;
  background: rgba(255, 248, 230, .62); border: 1px solid rgba(255, 255, 255, .5); transform: rotate(-4deg);
}
/* Op een honinggeel blaadje is een gele knop onzichtbaar: daar wordt hij inkt. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart:nth-child(3n + 2) .yb-knop:not(.yb-stil) {
  background: var(--wt-inkt); color: var(--wt-room);
}
/* Een label als stempel. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-badge { background: transparent; border-width: 2px; border-radius: 6px; font-weight: 800; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster .yb-badge { transform: rotate(-3deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-badge.yb-let-op { background: var(--yb-geel-dim); }

@media (prefers-reduced-motion: reduce) {
  html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-nav a,
  html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart { transition: none; }
}

/* ---------- Werktafel in kleur (kit 1.23) ----------
   Zes varianten van Werktafel in de kleuren van de regenboog: rood, oranje,
   groen, blauw, indigo en paars (de gewone Werktafel is geel). Alles van
   Werktafel geldt ([data-yb-stijl^="werktafel"]); hier wisselen alleen de
   kleuren: het bureau, het papier, de memoblaadjes en de accentkleur van de
   kit (--yb-geel: knoppen, aanwijzers, vandaag). De statuskleuren (akkoord,
   let op, stop) en het merk blijven gelijk, zodat een status overal
   herkenbaar blijft. Tekst op het papier haalt AA; --wt-op-honing is de
   tekstkleur op de accentkleur. */
html:root[data-yb-stijl="werktafel-rood"] {
  --yb-bg: #E3B9B2; --yb-vlak: #FFF5F2; --yb-vlak-2: #F7DDD7; --yb-lijn: #D49C93; --yb-lijn-zacht: #EBC8C1;
  --yb-tekst: #3A0D08; --yb-gedempt: #6B2C24; --yb-vaag: #7A3D35;
  --wt-honing: #C63D2B; --wt-op-honing: #FFFFFF; --wt-boter: #F7BDB3; --wt-room: #FFF5F2; --wt-inkt: #3A0D08;
  --wt-kaartje: #FFFAF8; --wt-rgb: 120 30 20; --wt-schaduw-rgb: 58 13 8;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #F4A397;
}
html:root[data-yb-stijl="werktafel-oranje"] {
  --yb-bg: #E8C6A4; --yb-vlak: #FFF7EE; --yb-vlak-2: #F8E2CA; --yb-lijn: #D6A97C; --yb-lijn-zacht: #ECD0B2;
  --yb-tekst: #3A1E05; --yb-gedempt: #6B4321; --yb-vaag: #7A5333;
  --wt-honing: #F08A24; --wt-op-honing: #2A1503; --wt-boter: #FFD2A6; --wt-room: #FFF7EE; --wt-inkt: #3A1E05;
  --wt-kaartje: #FFFBF6; --wt-rgb: 120 60 10; --wt-schaduw-rgb: 58 30 5;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #F9B878;
}
html:root[data-yb-stijl="werktafel-groen"] {
  --yb-bg: #BCD1AB; --yb-vlak: #F6FBF0; --yb-vlak-2: #DEEBD2; --yb-lijn: #9DB98A; --yb-lijn-zacht: #C9DCBA;
  --yb-tekst: #10260A; --yb-gedempt: #34502A; --yb-vaag: #45603A;
  --wt-honing: #7BC043; --wt-op-honing: #10260A; --wt-boter: #CFE8B4; --wt-room: #F6FBF0; --wt-inkt: #10260A;
  --wt-kaartje: #FBFDF7; --wt-rgb: 40 80 20; --wt-schaduw-rgb: 16 38 10;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #A6D67B;
}
html:root[data-yb-stijl="werktafel-blauw"] {
  --yb-bg: #B2C6DE; --yb-vlak: #F3F7FD; --yb-vlak-2: #D9E5F2; --yb-lijn: #91AACB; --yb-lijn-zacht: #C4D5E8;
  --yb-tekst: #0A1A33; --yb-gedempt: #2C4366; --yb-vaag: #3D5476;
  --wt-honing: #2F6FD0; --wt-op-honing: #FFFFFF; --wt-boter: #BCD5F5; --wt-room: #F3F7FD; --wt-inkt: #0A1A33;
  --wt-kaartje: #F9FBFE; --wt-rgb: 20 50 100; --wt-schaduw-rgb: 10 26 51;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #9DBEEE;
}
html:root[data-yb-stijl="werktafel-indigo"] {
  --yb-bg: #BCBBDF; --yb-vlak: #F6F5FD; --yb-vlak-2: #DFDDF3; --yb-lijn: #9D9BCB; --yb-lijn-zacht: #CCCAE9;
  --yb-tekst: #12103A; --yb-gedempt: #35326B; --yb-vaag: #46437A;
  --wt-honing: #4B44B8; --wt-op-honing: #FFFFFF; --wt-boter: #CDCAF3; --wt-room: #F6F5FD; --wt-inkt: #12103A;
  --wt-kaartje: #FAFAFE; --wt-rgb: 40 36 110; --wt-schaduw-rgb: 18 16 58;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #B1ADEE;
}
html:root[data-yb-stijl="werktafel-paars"] {
  --yb-bg: #CFB7DB; --yb-vlak: #FAF4FD; --yb-vlak-2: #EBDBF3; --yb-lijn: #B696C8; --yb-lijn-zacht: #DCC7E8;
  --yb-tekst: #2A0B3A; --yb-gedempt: #55306B; --yb-vaag: #65407A;
  --wt-honing: #8E3FB5; --wt-op-honing: #FFFFFF; --wt-boter: #E3C6F2; --wt-room: #FAF4FD; --wt-inkt: #2A0B3A;
  --wt-kaartje: #FDFAFE; --wt-rgb: 80 30 110; --wt-schaduw-rgb: 42 11 58;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #D6ABEE;
}
/* Grijs (kit 1.27): neutraal leigrijs, voor wie geen kleur wil maar wel het bureau. */
html:root[data-yb-stijl="werktafel-grijs"] {
  --yb-bg: #C9CBCF; --yb-vlak: #F7F7F8; --yb-vlak-2: #E3E4E7; --yb-lijn: #A9ADB4; --yb-lijn-zacht: #D2D4D8;
  --yb-tekst: #16181C; --yb-gedempt: #3F444C; --yb-vaag: #50555E;
  --wt-honing: #5A606B; --wt-op-honing: #FFFFFF; --wt-boter: #D3D6DB; --wt-room: #F7F7F8; --wt-inkt: #16181C;
  --wt-kaartje: #FBFBFC; --wt-rgb: 60 66 76; --wt-schaduw-rgb: 22 24 28;
  /* het middelste memoblaadje: lichter dan de accentkleur, zodat de tekst erop leesbaar blijft */
  --wt-memo: #B4B9C1;
}
/* De accentkleur van de kit volgt de variant: knoppen, aanwijzers en vandaag. */
html:root:is([data-yb-stijl^="werktafel-"], [data-yb-stijl^="nachttafel"]) {
  --yb-geel: var(--wt-honing);
  --yb-op-geel: var(--wt-op-honing);
  --yb-geel-dim: rgb(var(--wt-rgb) / .12);
  --yb-geel-lijn: rgb(var(--wt-rgb) / .30);
  --yb-goud: var(--yb-gedempt);
}
/* Het merk blijft YellowBriks-geel, in elke kleur: sinds 1.28 via --yb-merk-geel. */
/* De kit kleurt een knop bij aanwijzen lichtgeel; in kleur: iets lichter. */
html:root:is([data-yb-stijl^="werktafel-"], [data-yb-stijl^="nachttafel"]) .yb-knop:not(.yb-stil):not(.yb-bewaard):hover { background: var(--yb-geel); filter: brightness(1.08); }

/* ---------- Werktafel donker (kit 1.24) ----------
   Elke kleur van Werktafel ook donker: nachttafel (geel), nachttafel-rood,
   -oranje, -groen, -blauw, -indigo en -paars. Een korte naam, omdat briks bij
   het inloggen alleen themanamen tot 20 tekens doorlaten. De basis is donker
   (data-yb-thema="dark", thema.js), zodat de donkere statuskleuren van de kit
   gelden; alle regels van Werktafel gelden ook hier, met een donker bureau,
   donker papier, donkere memoblaadjes en een heldere accentkleur. Tekst haalt
   overal AA (4,5:1 of meer, ook de gedempte tekst op de memoblaadjes). */
html:root[data-yb-stijl="nachttafel"] {
  --yb-bg: #1E1A12; --yb-vlak: #2A2418; --yb-vlak-2: #332C1D; --yb-lijn: #4A402B; --yb-lijn-zacht: #3A3222;
  --yb-tekst: #F3ECDB; --yb-gedempt: #CDBF9F; --yb-vaag: #B2A585;
  --wt-honing: #FFC803; --wt-op-honing: #1E1A12; --wt-boter: #3D3418; --wt-memo: #5A4A10; --wt-room: #2A2418; --wt-inkt: #F3ECDB;
  --wt-kaartje: #332C1D; --wt-rgb: 255 230 160; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-rood"] {
  --yb-bg: #1F1312; --yb-vlak: #2B1A18; --yb-vlak-2: #35201D; --yb-lijn: #57322D; --yb-lijn-zacht: #432723;
  --yb-tekst: #F6E7E4; --yb-gedempt: #D8B3AD; --yb-vaag: #C09A93;
  --wt-honing: #FF7A66; --wt-op-honing: #1F1312; --wt-boter: #45221D; --wt-memo: #6A2A20; --wt-room: #2B1A18; --wt-inkt: #F6E7E4;
  --wt-kaartje: #35201D; --wt-rgb: 255 170 160; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-oranje"] {
  --yb-bg: #1F1710; --yb-vlak: #2B2016; --yb-vlak-2: #35281B; --yb-lijn: #57412A; --yb-lijn-zacht: #433220;
  --yb-tekst: #F7ECE0; --yb-gedempt: #D9BE9F; --yb-vaag: #C1A585;
  --wt-honing: #FFA24A; --wt-op-honing: #1F1710; --wt-boter: #45301A; --wt-memo: #6A4318; --wt-room: #2B2016; --wt-inkt: #F7ECE0;
  --wt-kaartje: #35281B; --wt-rgb: 255 200 150; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-groen"] {
  --yb-bg: #121A12; --yb-vlak: #19251A; --yb-vlak-2: #1F2E20; --yb-lijn: #334B35; --yb-lijn-zacht: #273A28;
  --yb-tekst: #E7F2E5; --yb-gedempt: #B5CDB1; --yb-vaag: #9AB596;
  --wt-honing: #8FD16A; --wt-op-honing: #121A12; --wt-boter: #233A22; --wt-memo: #2F5228; --wt-room: #19251A; --wt-inkt: #E7F2E5;
  --wt-kaartje: #1F2E20; --wt-rgb: 180 240 170; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-blauw"] {
  --yb-bg: #10161F; --yb-vlak: #17202D; --yb-vlak-2: #1C2838; --yb-lijn: #2F4361; --yb-lijn-zacht: #24344B;
  --yb-tekst: #E5EDF8; --yb-gedempt: #AFC2DC; --yb-vaag: #94A9C6;
  --wt-honing: #6FA8FF; --wt-op-honing: #10161F; --wt-boter: #1F3150; --wt-memo: #28437A; --wt-room: #17202D; --wt-inkt: #E5EDF8;
  --wt-kaartje: #1C2838; --wt-rgb: 170 200 255; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-indigo"] {
  --yb-bg: #14131F; --yb-vlak: #1D1B2D; --yb-vlak-2: #242238; --yb-lijn: #3B3861; --yb-lijn-zacht: #2E2C4B;
  --yb-tekst: #ECEBF8; --yb-gedempt: #BEBBE0; --yb-vaag: #A4A1C9;
  --wt-honing: #9C95FF; --wt-op-honing: #14131F; --wt-boter: #2A2752; --wt-memo: #3D3880; --wt-room: #1D1B2D; --wt-inkt: #ECEBF8;
  --wt-kaartje: #242238; --wt-rgb: 190 185 255; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-paars"] {
  --yb-bg: #1A121F; --yb-vlak: #26192D; --yb-vlak-2: #2F1F38; --yb-lijn: #4B3261; --yb-lijn-zacht: #3B274B;
  --yb-tekst: #F3E7F8; --yb-gedempt: #CFB4DE; --yb-vaag: #B89AC8;
  --wt-honing: #D08CFF; --wt-op-honing: #1A121F; --wt-boter: #3B2350; --wt-memo: #5A2F7A; --wt-room: #26192D; --wt-inkt: #F3E7F8;
  --wt-kaartje: #2F1F38; --wt-rgb: 230 180 255; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
html:root[data-yb-stijl="nachttafel-grijs"] {
  --yb-bg: #141518; --yb-vlak: #1C1E22; --yb-vlak-2: #23262B; --yb-lijn: #3A3E46; --yb-lijn-zacht: #2C2F35;
  --yb-tekst: #ECEDEF; --yb-gedempt: #B9BDC4; --yb-vaag: #9EA3AB;
  --wt-honing: #C3C8D0; --wt-op-honing: #141518; --wt-boter: #2C3036; --wt-memo: #3F444C; --wt-room: #1C1E22; --wt-inkt: #ECEDEF;
  --wt-kaartje: #23262B; --wt-rgb: 200 205 215; --wt-schaduw-rgb: 0 0 0;
  color-scheme: dark;
}
/* Donker: het plakband op de memoblaadjes minder fel. */
html:root[data-yb-stijl^="nachttafel"] .yb-rooster > .yb-kaart::before { background: rgba(255, 248, 230, .22); border-color: rgba(255, 255, 255, .18); }

/* ---------- Werktafel en Nachttafel: tegels als polaroids (kit 1.25) ----------
   Alleen de tegels van het startscherm (.yb-tegel); andere roosters blijven
   memoblaadjes. Een lichte polaroidrand, ook bij Nachttafel, met bovenin een
   fotovlak in de kleuren van het thema en het icoon van de brik. Tekst op de
   polaroid is altijd donker (#15171C, uitleg #4A4E57: 8:1 op de rand). De
   lijnkleur van het icoon volgt de lichtheid van het vlak: donker op een licht
   vlak, wit op een donker (--wt-foto-lijn, --wt-honing-lijn). */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) { --wt-foto-lijn: #15171C; --wt-honing-lijn: #15171C; }
html:root:is([data-yb-stijl="werktafel-rood"], [data-yb-stijl="werktafel-blauw"], [data-yb-stijl="werktafel-indigo"], [data-yb-stijl="werktafel-paars"], [data-yb-stijl="werktafel-grijs"]) { --wt-honing-lijn: #FFFFFF; }
html:root[data-yb-stijl^="nachttafel"] { --wt-foto-lijn: #FFFFFF; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel {
  display: flex; flex-direction: column; gap: 8px;
  background: #FBF9F3; color: #15171C; padding: 12px 12px 16px; border-radius: 0;
  box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .5);
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 1) { background: #FBF9F3; transform: rotate(-2deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 2) { background: #FBF9F3; transform: rotate(1.5deg) translateY(8px); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 3) { background: #FBF9F3; transform: rotate(-1deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 4) { background: #FBF9F3; transform: rotate(2.5deg); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n) { background: #FBF9F3; transform: rotate(-1.5deg) translateY(6px); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:is(:hover, :focus-within) { transform: rotate(0) translateY(-4px); z-index: 1; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel::before {
  top: -12px; width: 80px; height: 22px; margin-left: -40px; z-index: 3;
  background: rgba(255, 248, 230, .6); border: 0;
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld {
  display: flex; align-items: center; justify-content: center; height: 134px;
  background: var(--wt-boter); color: var(--wt-foto-lijn);
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 2) .yb-tegelbeeld { background: var(--wt-memo, var(--wt-honing)); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 3) .yb-tegelbeeld { background: var(--wt-room); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 4) .yb-tegelbeeld { background: var(--wt-honing); color: var(--wt-honing-lijn); }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld svg { width: 60px; height: 60px; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel h2 { font-family: var(--wt-hand); font-size: 25px; font-weight: 700; line-height: 1.05; letter-spacing: 0; color: #15171C; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel p { margin: 0; font-size: 13px; line-height: 1.45; color: #4A4E57; }
/* Dienstmerk en het label Actief vallen weg; een proefperiode blijft als stempel op de foto. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop { position: absolute; top: 20px; right: 20px; z-index: 1; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop > :not(.proef) { display: none; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop .yb-badge.proef { background: #FBF9F3; color: #15171C; border-color: #15171C; }
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-stil { align-self: flex-start; background: #FBF9F3; color: #15171C; border-color: #4A4E57; }
/* De hele polaroid is de link: de knop Openen ligt er onzichtbaar overheen.
   Breedte, hoogte en align-self expliciet (kit 1.26): het portaal zet
   align-self: flex-start op het laatste kind van een tegel, en dan werd de link
   0px hoog en was de tegel niet aan te klikken. */
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:not(.yb-stil) {
  position: absolute; inset: 0; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
  z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: transparent; font-size: 0; box-shadow: none; filter: none; transform: none;
}
html:root:is([data-yb-stijl^="werktafel"], [data-yb-stijl^="nachttafel"]) .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:focus-visible { outline: 3px solid var(--wt-honing); outline-offset: 4px; }

/* ---------- thema Riso-zine (kit 1.13) ----------
   Een zelfgemaakt blaadje uit de risoprinter: gebroken wit papier, fluoroze en
   blauw die net niet op elkaar vallen, rasterpunten, stickers en koppen in een
   dikke blokletter. Zelfde afspraken als Werktafel: geldt voor portaal en
   briks, altijd licht, statuskleuren blijven. Leesbaarheid eerst: lopende
   tekst blijft Inter in bijna-zwart; de koppen zijn inkt met een roze en een
   blauwe 'misdruk' ernaast, niet roze op wit. */
html:root[data-yb-stijl="riso"] {
  --yb-bg: #F4EFE6;
  --yb-vlak: #FFFFFF;
  --yb-vlak-2: #EFE8DA;
  --yb-lijn: #1D1D1B;
  --yb-lijn-zacht: #D8CFBE;
  --yb-tekst: #1D1D1B;
  --yb-gedempt: #45423C;
  --yb-vaag: #5E5A52;
  --yb-geel: #FFE800;
  --yb-geel-dim: #FFF6A8;
  --yb-geel-lijn: #E6D200;
  --yb-goud: #0068A6;
  --yb-op-geel: #1D1D1B;
  --yb-schaduw: 5px 5px 0 #0078BF;
  --yb-r-lg: 0;
  --yb-r-md: 0;
  --rz-roze: #FF48B0;
  --rz-blauw: #0078BF;
  --rz-geel: #FFE800;
  --rz-inkt: #1D1D1B;
  --rz-blok: 'Rubik Mono One', 'Arial Black', sans-serif;
  --rz-typ: 'Special Elite', 'Courier New', monospace;
}

/* Papier met een roze rasterveld in de rechterbovenhoek van het venster: het
   papier dekt alles af behalve een kwartcirkel, daaronder ligt het raster.
   Beide lagen staan vast aan het venster, anders dekt het papier alleen de
   hoogte van de inhoud af en loopt het raster eronder door. */
html:root[data-yb-stijl="riso"] .yb-pagina { background-color: var(--yb-bg); }
html:root[data-yb-stijl="riso"] body.yb-pagina {
  background-image:
    radial-gradient(circle at 100% 0, transparent 0 260px, var(--yb-bg) 261px),
    radial-gradient(rgba(255, 72, 176, .55) 30%, transparent 32%);
  background-size: 100% 100%, 12px 12px;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
}

/* Zijbalk: een strook in zwarte inkt met typemachineletters (kit 1.14). Op het
   lichtblauw van 1.13 viel het gele "briks" van het merk weg; op inkt staat het
   merk zoals in het donkere thema: lichte stenen, fluogeel woord. Alleen de
   tekstkleuren wisselen hier; de kaartjes van de navigatie blijven wit papier.
   Ingebed is de zijbalk een tabbalk op het papier en blijft hij licht. */
html:root[data-yb-stijl="riso"] .yb-zijbalk {
  background: #FFFFFF; border-right: 3px solid var(--rz-inkt);
}
html:root[data-yb-stijl="riso"]:not([data-yb-ingebed]) .yb-zijbalk {
  --yb-merk-inkt: #FFFFFF;   /* inktzwarte zijbalk op een lichte basis (1.28) */
  --yb-tekst: #F4EFE6;
  --yb-gedempt: #E3DACA;
  --yb-vaag: #C9C0AF;
  background:
    radial-gradient(rgba(255, 72, 176, .35) 30%, transparent 32%) 0 100% / 10px 10px no-repeat,
    #1D3D8F;
  border-right: 3px solid var(--rz-roze);
}
html:root[data-yb-stijl="riso"] .yb-zijbalk .yb-context { font-family: var(--rz-typ); color: var(--yb-tekst); }
html:root[data-yb-stijl="riso"] .yb-zijbalk :is(select, input) { color: var(--rz-inkt); background: #FFFFFF; }
html:root[data-yb-stijl="riso"] .yb-zijbalk .yb-context .yb-brik {
  font-family: var(--rz-blok); font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--rz-roze);
}

/* Navigatie en tabbladen: losse letters op papier; de actieve is een roze strook. */
html:root[data-yb-stijl="riso"] .yb-nav a,
html:root[data-yb-stijl="riso"] .yb-tabs a {
  font-family: var(--rz-typ); font-weight: 400; color: var(--rz-inkt);
  background: #FFFFFF; border: 2px solid var(--rz-inkt); border-radius: 0;
}
html:root[data-yb-stijl="riso"] .yb-nav { gap: 6px; }
html:root[data-yb-stijl="riso"] .yb-nav a:hover,
html:root[data-yb-stijl="riso"] .yb-tabs a:hover { background: var(--rz-geel); }
html:root[data-yb-stijl="riso"] .yb-nav a[aria-current="page"],
html:root[data-yb-stijl="riso"] .yb-tabs a[aria-current="page"] {
  background: var(--rz-roze); color: var(--rz-inkt); font-weight: 400; transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--rz-blauw);
}
html:root[data-yb-stijl="riso"][data-yb-ingebed] .yb-zijbalk { background: var(--yb-bg); border-right: 0; border-bottom: 3px solid var(--rz-inkt); }

/* Koppen: dikke blokletter in inkt, met roze en blauw er net naast. */
/* Koppen als risodruk (kit 1.15): waar roze en blauw over elkaar vallen wordt
   het donkerblauw, en aan de randen steekt de ene of de andere kleur uit. De
   kern is donker, dus de kop blijft goed leesbaar. */
html:root[data-yb-stijl="riso"] .yb-inhoud h1 {
  font-family: var(--rz-blok); font-weight: 400; font-size: 2.4rem; line-height: 1.1;
  letter-spacing: .02em; text-transform: uppercase; color: #2B2D7A;
  text-shadow: -4px -2px 0 var(--rz-roze), 4px 3px 0 #22A7DC;
}

/* Het startscherm (.yb-groet): "Briks" wordt de grote BRIKS!! uit het blaadje,
   de begroeting een getypte regel met de naam in losse geplakte letters. */
html:root[data-yb-stijl="riso"] .yb-groet .yb-markering {
  display: block; font-family: var(--rz-blok); font-size: 4.2rem; line-height: 1; letter-spacing: .04em;
  text-transform: uppercase; color: #2B2D7A; margin: 4px 0 18px;
  text-shadow: -6px -3px 0 var(--rz-roze), 6px 4px 0 #22A7DC; transform: rotate(-2deg); transform-origin: left;
}
html:root[data-yb-stijl="riso"] .yb-groet .yb-markering::before { content: none; }
html:root[data-yb-stijl="riso"] .yb-groet .yb-markering::after { content: "!!"; }
html:root[data-yb-stijl="riso"] .yb-groet h1 {
  font-family: var(--rz-typ); font-size: 1.35rem; text-transform: lowercase; letter-spacing: .06em;
  color: var(--rz-inkt); text-shadow: none; line-height: 2.6;
}
html:root[data-yb-stijl="riso"] .yb-naam { display: inline-flex; gap: 4px; text-transform: none; vertical-align: middle; margin: 0 2px; }
html:root[data-yb-stijl="riso"] .yb-naam .yb-letter {
  display: inline-block; font-family: var(--rz-blok); font-size: 2rem; line-height: 1; padding: 4px 8px 6px;
  text-transform: uppercase; background: var(--rz-inkt); color: #F4EFE6;
}
html:root[data-yb-stijl="riso"] .yb-naam .yb-letter:nth-child(4n + 2) { background: var(--rz-geel); color: var(--rz-inkt); transform: rotate(6deg); }
html:root[data-yb-stijl="riso"] .yb-naam .yb-letter:nth-child(4n + 3) { background: #0078BF; color: #F4EFE6; transform: rotate(-4deg); }
html:root[data-yb-stijl="riso"] .yb-naam .yb-letter:nth-child(4n) { background: var(--rz-roze); color: var(--rz-inkt); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; transform: rotate(3deg); }
html:root[data-yb-stijl="riso"] .yb-inhoud h2 { font-family: var(--rz-blok); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; }
html:root[data-yb-stijl="riso"] .yb-markering { font-family: var(--rz-typ); color: var(--rz-inkt); letter-spacing: .08em; }
html:root[data-yb-stijl="riso"] .yb-markering::before { content: "✂ "; color: var(--rz-roze); }

/* Kaarten: wit papier met een blauwe misdruk als schaduw. */
html:root[data-yb-stijl="riso"] .yb-kaart { background: #FFFFFF; border: 2px solid var(--rz-inkt); border-radius: 0; box-shadow: var(--yb-schaduw); }

/* Tegels in een rooster: gescheurde papiertjes in roze, blauw en geel. */
html:root[data-yb-stijl="riso"] .yb-rooster { gap: 30px 24px; padding-top: 8px; }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart {
  position: relative; border: 0; box-shadow: none; padding-bottom: 30px;
  clip-path: polygon(0 3%, 8% 0, 20% 2%, 34% 0, 50% 2%, 66% 0, 80% 2%, 92% 0, 100% 2%, 99% 40%, 100% 70%, 98% 100%, 84% 98%, 68% 100%, 52% 97%, 36% 100%, 20% 98%, 6% 100%, 0 97%, 1% 60%);
  transition: transform .2s ease;
}
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart:nth-child(3n + 1) { background: #FFD1EA; transform: rotate(-1.5deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart:nth-child(3n + 2) { background: #CFE6F5; transform: rotate(1deg) translateY(8px); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart:nth-child(3n) { background: #FFF6A8; transform: rotate(-.8deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart:hover { transform: rotate(0) scale(1.02); }

/* Knoppen: fluogeel met een zwarte rand en een blauwe misdruk. */
html:root[data-yb-stijl="riso"] .yb-knop {
  background: var(--rz-geel); color: var(--rz-inkt); border: 2px solid var(--rz-inkt);
  border-radius: 0; box-shadow: 3px 3px 0 var(--rz-blauw);
}
html:root[data-yb-stijl="riso"] .yb-knop:hover { background: var(--rz-roze); }
html:root[data-yb-stijl="riso"] .yb-knop.yb-stil { background: #FFFFFF; box-shadow: none; }

/* Labels als ronde stickers. */
html:root[data-yb-stijl="riso"] .yb-badge { font-family: var(--rz-typ); border-width: 2px; border-radius: 999px; background: #FFFFFF; }
html:root[data-yb-stijl="riso"] .yb-rooster .yb-badge { transform: rotate(-6deg); }
html:root[data-yb-stijl="riso"] .yb-badge.yb-let-op { background: var(--yb-geel-dim); }

/* Velden: getypt. */
html:root[data-yb-stijl="riso"] .yb-pagina :is(input, select, textarea) { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart { transition: none; }
}

/* ---------- Riso-zine: tegels als appraster (kit 1.25) ----------
   Alleen de tegels van het startscherm (.yb-tegel); andere roosters blijven
   gescheurde papiertjes. Geen kaartvlak: per brik een afgerond vierkant in de
   riso-kleuren met de blauwe misdruk, het icoon erin (wit op fluoroze), de naam
   in blokletters en de uitleg getypt eronder. De tekst staat op het papier
   (#1D1D1B en #45423C op #F4EFE6: 15:1 en 9:1). */
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel {
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: transparent; clip-path: none; box-shadow: none; padding: 8px; transform: none;
}
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:is(:nth-child(3n + 1), :nth-child(3n + 2), :nth-child(3n)) { background: transparent; transform: none; }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:hover { transform: none; }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 132px; height: 132px; border-radius: 36px; background: #FFD1EA; color: var(--rz-inkt);
  box-shadow: 5px 5px 0 var(--rz-blauw); transform: rotate(-1deg); transition: transform .2s ease;
}
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 2) .yb-tegelbeeld { background: #CFE6F5; transform: rotate(.8deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 3) .yb-tegelbeeld { background: #FFF6A8; transform: rotate(-.5deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n + 4) .yb-tegelbeeld { background: var(--rz-roze); color: #FFFFFF; transform: rotate(1deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:nth-child(5n) .yb-tegelbeeld { background: var(--rz-geel); transform: rotate(-.8deg); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel:is(:hover, :focus-within) .yb-tegelbeeld { transform: rotate(0) scale(1.04); }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld svg { width: 62px; height: 62px; stroke-width: 1.6; }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel h2 {
  font-family: var(--rz-blok); font-weight: 400; font-size: 19px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .02em; color: var(--rz-inkt);
}
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel p { margin: 0; font-family: var(--rz-typ); font-size: 13.5px; line-height: 1.5; color: var(--yb-gedempt); }
/* Dienstmerk en het label Actief vallen weg; een proefperiode blijft als sticker. */
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop { position: absolute; top: 0; right: 0; z-index: 1; }
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-tegelkop > :not(.proef) { display: none; }
/* De hele tegel is de link: de knop Openen ligt er onzichtbaar overheen. */
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:not(.yb-stil) {
  position: absolute; inset: 0; width: 100%; height: 100%; align-self: stretch; justify-self: stretch;
  z-index: 2; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: transparent; font-size: 0; box-shadow: none;
}
html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-knop.yb-tegellink:focus-visible { outline: 3px solid var(--rz-blauw); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html:root[data-yb-stijl="riso"] .yb-rooster > .yb-kaart.yb-tegel .yb-tegelbeeld { transition: none; }
}

/* ---------- thema Snoepwinkel (kit 1.16) ----------
   Schepsnoep in glazen potten op de plank (lab: /lab/portaal/snoep/#potten):
   roze met stippen, een gestreepte luifel boven de inhoud en een roze toonbank
   eronder, koppen in Chewy, tegels als snoeppotten met een gekleurde deksel en
   snoep onderin. Zelfde afspraken als de andere stijlen: portaal en briks,
   altijd licht, statuskleuren blijven. Contrast: tekst 10,6:1, knoppen (wit op
   kersenrood) 5,6:1, de grote kop 3,5:1. */
html:root[data-yb-stijl="snoep"] {
  --yb-bg: #FFE3EE;
  --yb-vlak: #FFFFFF;
  --yb-vlak-2: #FFF0F6;
  --yb-lijn: #F5B8D2;
  --yb-lijn-zacht: #FAD3E3;
  --yb-tekst: #5B1A3A;
  --yb-gedempt: #8A3A62;
  --yb-vaag: #8F4D6E;
  --yb-goud: #B0174A;
  --yb-schaduw: 0 10px 22px -12px rgba(91, 26, 58, .45);
  --yb-r-lg: 24px;
  --yb-r-md: 999px;
  --sn-roze: #FF6FB5;
  --sn-kers: #C81E54;
  --sn-munt: #7FE3C4;
  --sn-lila: #B79CFF;
  --sn-citroen: #FFF27A;
  --sn-kop: #E8305A;
  --sn-hout: #C98B5A;
  --sn-rond: 'Chewy', 'Comic Sans MS', cursive;
  --sn-letter: 'Fredoka', 'Inter', system-ui, sans-serif;
}
html:root[data-yb-stijl="snoep"] body.yb-pagina,
html:root[data-yb-stijl="snoep"] .yb-pagina {
  font-family: var(--sn-letter);
  background-color: var(--yb-bg);
  background-image: radial-gradient(#FFC4DD 3px, transparent 3.5px);
  background-size: 28px 28px;
}

/* Zijbalk: een wit schap met een roze-witte rand. */
html:root[data-yb-stijl="snoep"] .yb-zijbalk {
  background: #FFFFFF;
  border-right: 8px solid transparent;
  border-image: repeating-linear-gradient(180deg, var(--sn-roze) 0 24px, #FFFFFF 24px 48px) 8;
}
html:root[data-yb-stijl="snoep"] .yb-zijbalk .yb-context .yb-brik { font-family: var(--sn-rond); font-weight: 400; font-size: 1.4rem; color: var(--sn-kop); }
html:root[data-yb-stijl="snoep"] .yb-nav { gap: 6px; }
html:root[data-yb-stijl="snoep"] .yb-nav a,
html:root[data-yb-stijl="snoep"] .yb-tabs a { border-radius: 999px; font-weight: 600; color: var(--yb-tekst); background: var(--yb-vlak-2); border: 0; }
html:root[data-yb-stijl="snoep"] .yb-nav a:hover,
html:root[data-yb-stijl="snoep"] .yb-tabs a:hover { background: #FFD6E8; }
html:root[data-yb-stijl="snoep"] .yb-nav a[aria-current="page"],
html:root[data-yb-stijl="snoep"] .yb-tabs a[aria-current="page"] { background: var(--sn-roze); color: #3B0F24; font-weight: 700; box-shadow: 0 3px 0 #D94F95; }

/* Luifel boven de inhoud en de toonbank eronder. Niet bij een geopende brik
   (die vult het scherm) en niet ingebed (dan hangt de luifel al in het portaal). */
html:root[data-yb-stijl="snoep"]:not([data-yb-ingebed]) .yb-inhoud:not(:has(> .yb-brikpagina)) { position: relative; padding-top: 104px; }
html:root[data-yb-stijl="snoep"]:not([data-yb-ingebed]) .yb-inhoud:not(:has(> .yb-brikpagina))::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 66px;
  background: repeating-linear-gradient(90deg, var(--sn-roze) 0 60px, #FFFFFF 60px 120px);
  -webkit-mask: radial-gradient(30px at 30px 100%, transparent 98%, #000) 0 0 / 60px 100%;
  mask: radial-gradient(30px at 30px 100%, transparent 98%, #000) 0 0 / 60px 100%;
}
html:root[data-yb-stijl="snoep"]:not([data-yb-ingebed]) .yb-inhoud:not(:has(> .yb-brikpagina))::after {
  content: ""; display: block; height: 56px; margin: 56px -32px -64px;
  background: var(--sn-roze); box-shadow: inset 0 10px 0 #FF9FCB;
}

/* Koppen als het bord van de winkel. */
html:root[data-yb-stijl="snoep"] .yb-inhoud h1 {
  font-family: var(--sn-rond); font-weight: 400; font-size: 2.9rem; letter-spacing: .01em; line-height: 1.05;
  color: var(--sn-kop); text-shadow: 3px 3px 0 #FFFFFF, 6px 6px 0 var(--sn-lila);
}
html:root[data-yb-stijl="snoep"] .yb-inhoud h2 { font-family: var(--sn-rond); font-weight: 400; letter-spacing: .01em; }
html:root[data-yb-stijl="snoep"] .yb-markering { color: var(--yb-gedempt); }
html:root[data-yb-stijl="snoep"] .yb-markering::before { content: "♥ "; color: var(--sn-roze); }

/* Kaarten: rond en zacht. Knoppen: kersenrood met witte letters. */
html:root[data-yb-stijl="snoep"] .yb-kaart { border: 0; box-shadow: var(--yb-schaduw); }
html:root[data-yb-stijl="snoep"] .yb-knop { background: var(--sn-kers); color: #FFFFFF; box-shadow: 0 4px 0 #8E1239; font-weight: 700; }
html:root[data-yb-stijl="snoep"] .yb-pagina a.yb-knop:not(.yb-stil) { color: #FFFFFF; }
html:root[data-yb-stijl="snoep"] .yb-knop:hover { background: #A8164A; }
html:root[data-yb-stijl="snoep"] .yb-knop.yb-stil { background: #FFFFFF; color: var(--yb-tekst); box-shadow: none; border: 2px solid var(--yb-lijn); }

/* Tegels in een rooster zijn glazen snoeppotten op een houten plank: een
   gekleurde deksel, glas met een glans, snoep onderin, en een label als
   ronde sticker. Aanwijzen laat de pot wiebelen. */
html:root[data-yb-stijl="snoep"] .yb-rooster { gap: 44px 28px; padding: 26px 8px 30px; }
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart {
  --deksel: var(--sn-roze); --snoep-a: #FF6FB5; --snoep-b: #FFF27A;
  position: relative; overflow: visible; min-height: 300px; padding: 30px 22px 128px;
  border-radius: 30px 30px 44px 44px; border: 4px solid #FFFFFF;
  background:
    radial-gradient(circle at 20% 30%, var(--snoep-a) 0 12px, transparent 13px) left bottom / 64px 56px repeat-x,
    radial-gradient(circle at 70% 60%, var(--snoep-b) 0 11px, transparent 12px) left bottom / 64px 56px repeat-x,
    radial-gradient(circle at 45% 40%, var(--sn-munt) 0 11px, transparent 12px) 20px calc(100% - 50px) / 64px 56px repeat-x,
    radial-gradient(circle at 80% 30%, var(--sn-lila) 0 12px, transparent 13px) 10px calc(100% - 50px) / 64px 56px repeat-x,
    radial-gradient(circle at 30% 50%, var(--snoep-b) 0 11px, transparent 12px) 30px calc(100% - 88px) / 64px 40px repeat-x,
    radial-gradient(circle at 75% 50%, var(--snoep-a) 0 10px, transparent 11px) 4px calc(100% - 88px) / 64px 40px repeat-x,
    radial-gradient(circle at 50% 50%, var(--sn-roze) 0 10px, transparent 11px) 40px calc(100% - 24px) / 64px 40px repeat-x,
    linear-gradient(0deg, rgba(255, 255, 255, .35) 0 112px, transparent 112px),
    rgba(255, 255, 255, .72);
  box-shadow: inset 12px 0 0 rgba(255, 255, 255, .6), 0 14px 18px -12px rgba(91, 26, 58, .4);
  transform-origin: 50% 100%;
}
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart:nth-child(3n + 2) { --deksel: var(--sn-munt); --snoep-a: #34C9A0; --snoep-b: #FF9A3C; }
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart:nth-child(3n) { --deksel: var(--sn-lila); --snoep-a: #9B7BFF; --snoep-b: #E8305A; }
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart:hover { animation: yb-snoep-wiebel .6s ease-in-out; }
@keyframes yb-snoep-wiebel { 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
/* de deksel */
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart::before {
  content: ""; position: absolute; left: 15%; right: 15%; top: -26px; height: 24px;
  border-radius: 10px 10px 4px 4px; background: var(--deksel); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12);
}
/* de plank onder elke pot; naast elkaar lopen ze door tot één plank */
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart::after {
  content: ""; position: absolute; left: -18px; right: -18px; bottom: -26px; height: 18px;
  background: var(--sn-hout); border-radius: 4px; box-shadow: inset 0 -6px 0 #A96E43;
}
html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart h2 { color: var(--yb-tekst); }
/* het label als ronde sticker op de pot */
html:root[data-yb-stijl="snoep"] .yb-rooster .yb-badge {
  position: absolute; top: -14px; right: -14px; z-index: 1; border: 0; border-radius: 50%;
  width: 62px; height: 62px; display: grid; place-items: center; padding: 0; text-align: center;
  background: var(--sn-kers); color: #FFFFFF; font-weight: 700; font-size: .7rem; transform: rotate(12deg);
  box-shadow: 0 4px 0 #8E1239;
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-yb-stijl="snoep"] .yb-rooster > .yb-kaart:hover { animation: none; }
}

/* ---------- thema Graffiti (kit 1.17) ----------
   Een bakstenen muur vol tags (lab: /lab/portaal/extreem/#x-28): de eerste
   speelse stijl op een donkere basis. thema.js zet data-yb-thema="dark", dus
   alle donkere kleuren van de kit gelden (tekst, tabellen, formulieren,
   statuskleuren); hier komen alleen de muur, een zwart geverfde zijbalk,
   stickers als navigatie, koppen als tag met druppels en neongroene knoppen
   bij. Tegels in een rooster zijn geplakte posters op licht papier; daarbinnen
   gelden de lichte tekst- en statuskleuren. Contrast: tekst op de muur 10,3:1,
   op een paneel 14,8:1, knoppen 16:1, poster 15,4:1. */
html:root[data-yb-stijl="graffiti"] {
  --yb-bg: #5E271C;
  --yb-vlak: #1E1C1B;
  --yb-vlak-2: #2A2725;
  --yb-lijn: #3A3532;
  --yb-lijn-zacht: #2E2A28;
  --yb-tekst: #F2EFE9;
  --yb-gedempt: #C9C2B8;
  --yb-vaag: #A89F94;
  --yb-goud: #7CF3FF;
  --yb-r-lg: 6px;
  --yb-r-md: 4px;
  --yb-schaduw: 6px 6px 0 rgba(0, 0, 0, .45);
  --gf-roze: #FF2E88;
  --gf-groen: #C6FF3D;
  --gf-cyaan: #3FF0FF;
  --gf-geel: #FFE600;
  --gf-inkt: #111111;
  --gf-poster: #F4F1EA;
  --gf-tag: 'Permanent Marker', 'Marker Felt', cursive;
  --gf-stencil: 'Saira Stencil One', 'Impact', sans-serif;
}

/* De muur: bakstenen met voegen, iets donkerder gemaakt zodat tekst erop leesbaar is. */
html:root[data-yb-stijl="graffiti"] body.yb-pagina,
html:root[data-yb-stijl="graffiti"] .yb-pagina { background-color: var(--yb-bg); }
html:root[data-yb-stijl="graffiti"] body.yb-pagina {
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(20, 5, 0, .15), rgba(20, 5, 0, .55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Crect width='64' height='32' fill='%236B2C20'/%3E%3Crect x='2' y='2' width='28' height='12' fill='%23763223'/%3E%3Crect x='34' y='18' width='28' height='12' fill='%2363281D'/%3E%3Cpath d='M0 15.5H64M0 31.5H64M32 0V16M0 16V32M64 16V32' stroke='%233F1A12' stroke-width='3'/%3E%3C/svg%3E");
  background-size: 100% 100%, 64px 32px;
  background-attachment: fixed, scroll;
}

/* Zijbalk: een zwart geverfd paneel met een neonroze spuitrand. */
html:root[data-yb-stijl="graffiti"] .yb-zijbalk {
  background: #151412; border-right: 4px solid var(--gf-roze); box-shadow: 4px 0 14px -2px rgba(255, 46, 136, .55);
}
html:root[data-yb-stijl="graffiti"][data-yb-ingebed] .yb-zijbalk { border-right: 0; border-bottom: 4px solid var(--gf-roze); box-shadow: 0 4px 14px -4px rgba(255, 46, 136, .55); }
html:root[data-yb-stijl="graffiti"] .yb-zijbalk .yb-context .yb-brik { font-family: var(--gf-stencil); font-weight: 400; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }

/* Navigatie en tabbladen als stickers op de muur. */
html:root[data-yb-stijl="graffiti"] .yb-nav { gap: 8px; }
html:root[data-yb-stijl="graffiti"] .yb-nav a,
html:root[data-yb-stijl="graffiti"] .yb-tabs a {
  font-family: var(--gf-tag); font-weight: 400; background: var(--gf-poster); color: var(--gf-inkt);
  border: 0; border-radius: 4px; box-shadow: 2px 3px 0 rgba(0, 0, 0, .5);
}
html:root[data-yb-stijl="graffiti"] .yb-nav a:nth-child(odd) { transform: rotate(-1.2deg); }
html:root[data-yb-stijl="graffiti"] .yb-nav a:nth-child(even) { transform: rotate(.8deg); }
html:root[data-yb-stijl="graffiti"] .yb-nav a:hover,
html:root[data-yb-stijl="graffiti"] .yb-tabs a:hover { background: var(--gf-geel); color: var(--gf-inkt); }
html:root[data-yb-stijl="graffiti"] .yb-nav a[aria-current="page"],
html:root[data-yb-stijl="graffiti"] .yb-tabs a[aria-current="page"] { background: var(--gf-roze); color: var(--gf-inkt); }
html:root[data-yb-stijl="graffiti"] .yb-tabs { border-bottom-color: rgba(255, 255, 255, .15); }

/* Koppen als tag, met verfdruppels eronder. */
html:root[data-yb-stijl="graffiti"] .yb-inhoud h1 {
  position: relative; display: block; width: fit-content; font-family: var(--gf-tag); font-weight: 400; font-size: 3rem;
  letter-spacing: .01em; line-height: 1.1; color: #F2EFE9; transform: rotate(-2deg); transform-origin: left;
  text-shadow: 3px 3px 0 var(--gf-inkt), 0 0 18px rgba(255, 46, 136, .85);
}
html:root[data-yb-stijl="graffiti"] .yb-inhoud h1::after {
  content: ""; position: absolute; left: 6%; right: 30%; top: 92%; height: 16px; pointer-events: none;
  background: radial-gradient(ellipse 3px 9px at 50% 0, var(--gf-roze) 98%, transparent) 0 0 / 41px 16px repeat-x,
    radial-gradient(ellipse 2px 6px at 50% 0, var(--gf-roze) 98%, transparent) 17px 0 / 53px 12px repeat-x;
}
html:root[data-yb-stijl="graffiti"] .yb-inhoud h2 { font-family: var(--gf-tag); font-weight: 400; letter-spacing: .01em; }
html:root[data-yb-stijl="graffiti"] .yb-markering { font-family: var(--gf-stencil); color: #E0D6CA; letter-spacing: .12em; }
html:root[data-yb-stijl="graffiti"] .yb-markering::before { content: "✱ "; color: var(--gf-groen); }
html:root[data-yb-stijl="graffiti"] .yb-kop p { color: #E0D6CA; }

/* Kaarten: zwart geverfde panelen met een harde schaduw. */
html:root[data-yb-stijl="graffiti"] .yb-kaart { border: 2px solid var(--yb-lijn); }

/* Knoppen: neongroen met zwarte letters. */
html:root[data-yb-stijl="graffiti"] .yb-knop {
  background: var(--gf-groen); color: var(--gf-inkt); border: 2px solid var(--gf-inkt); border-radius: 4px;
  box-shadow: 3px 3px 0 #000; font-weight: 800;
}
html:root[data-yb-stijl="graffiti"] .yb-pagina a.yb-knop:not(.yb-stil) { color: var(--gf-inkt); }
html:root[data-yb-stijl="graffiti"] .yb-knop:hover { background: var(--gf-cyaan); }
html:root[data-yb-stijl="graffiti"] .yb-knop.yb-stil { background: transparent; color: var(--yb-tekst); border-color: var(--yb-gedempt); box-shadow: none; }

/* Tegels in een rooster: geplakte posters met een gespoten kleurband en
   druppels. Binnen de poster gelden lichte kleuren, ook voor de status. */
html:root[data-yb-stijl="graffiti"] .yb-rooster { gap: 30px 24px; padding-top: 6px; }
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart {
  --yb-tekst: #1A1A1A; --yb-gedempt: #4A4541; --yb-vaag: #5C5650; --yb-lijn: #D8D2C6; --yb-vlak: #FFFFFF; --yb-vlak-2: #EFEAE0;
  --yb-goud: #8A1F4E; --yb-groen: #2F7A4C; --yb-rood: #B3402E; --yb-let-op-tekst: #6B4E00; --yb-geel-dim: #FFF3CC;
  --spuit: var(--gf-roze);
  position: relative; color-scheme: light; background: var(--gf-poster); color: var(--yb-tekst);
  border: 0; border-radius: 2px; padding-top: 44px; box-shadow: 4px 6px 0 rgba(0, 0, 0, .5);
  transform: rotate(-1.5deg); transition: transform .2s ease;
}
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart:nth-child(3n + 2) { --spuit: var(--gf-groen); transform: rotate(1.2deg) translateY(8px); }
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart:nth-child(3n) { --spuit: var(--gf-cyaan); transform: rotate(-.6deg); }
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart:hover { transform: rotate(0) scale(1.02); }
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none;
  background:
    linear-gradient(var(--spuit), var(--spuit)) 0 0 / 100% 14px no-repeat,
    radial-gradient(ellipse 4px 11px at 50% 0, var(--spuit) 98%, transparent) 6px 12px / 37px 20px repeat-x,
    radial-gradient(ellipse 3px 7px at 50% 0, var(--spuit) 98%, transparent) 24px 12px / 53px 14px repeat-x;
}
html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart h2 { color: var(--yb-tekst); }
html:root[data-yb-stijl="graffiti"] .yb-rooster .yb-badge {
  background: var(--gf-geel); color: var(--gf-inkt); border: 2px solid var(--gf-inkt); border-radius: 4px;
  font-family: var(--gf-tag); font-weight: 400; transform: rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  html:root[data-yb-stijl="graffiti"] .yb-rooster > .yb-kaart { transition: none; }
}

/* Weetje van de dag (1.32): in Riso-zine getypt. In Werktafel en Nachttafel
   gewone letters (1.34): het handschrift las als een aantekening. */
html:root[data-yb-stijl="riso"] .yb-kop p.yb-weetje { font-family: var(--rz-typ); font-size: .9rem; letter-spacing: .02em; color: var(--rz-inkt); }