@charset "utf-8";
/* ==========================================================================
   TAXI ROGIS - ONTWERPSYSTEEM
   Een stylesheet (contract paragraaf 2). Een tokenblok, een typografische
   schaal, een breekpuntenladder, een spacingschaal, een motionschaal.

   Opbouw van dit bestand
     0  tokens            - kleur, type, ruimte, maat, motion
     1  grondslag         - reset, typografie, focus, links
     2  pagina-onderdelen - container, knoppen, kopbalk, hero, kaarten, voet
     3  blokkenbibliotheek .trb-* (29 Nexora-bouwblokken)
     4  slim kaartenraster (uitvullen van de laatste rij)
     5  motion            - fade-in bij scrollen, hover
     6  browserterugval   - @supports voor wat nog niet overal werkt
     7  donkere modus

   Afspraken die nooit gebroken mogen worden (uit 11-toegankelijkheid.md):
     - tekst op geel is #0B1A33, nooit wit. Wit op #FFCC00 haalt 1,51:1.
     - geel is nooit de enige focuskleur op licht: #FFCC00 op wit is 1,27:1.
       De focusring is donker met een witte scheiding en een gele buitenring,
       zodat hij op wit, op geel en op donkerblauw zichtbaar is.
     - randen die de enige begrenzing van een bedienbaar element zijn, halen
       minstens 3:1 (--rand-sterk #8A99AD = 3,06:1 op wit).
   ========================================================================== */


/* ==========================================================================
   0 - TOKENS
   ========================================================================== */

/* --------------------------------------------------------------------------
   0.1 Breekpuntenladder - EEN ladder, nergens 767 naast 768.
   De live site had er twee (767 van Elementor, 768 van de Site Kit); precies
   op die breedte sprong de opmaak. Hieronder staat de ladder die in dit hele
   bestand geldt. De grenswaarden zijn .98px zodat een max-width-regel en de
   bijbehorende min-width-regel elkaar niet overlappen en niet overslaan.

     apparaat                  breedte      querie
     kleine telefoon           320-389      (basis, geen querie)
     telefoon                  390-480      (max-width: 479.98px)
     grote telefoon liggend    481-767      (max-width: 767.98px)
     tablet staand             768-1023     (max-width: 1023.98px)
     tablet liggend            1024-1279    (max-width: 1279.98px)
     laptop                    1280-1439    (max-width: 1439.98px)
     desktop                   1440-1919    (min-width: 1440px)
     breed                     1920+        (min-width: 1920px)

   Kolommen in een kaartenraster volgen dezelfde ladder:
     >=1280     k kolommen (zoals ingesteld)
     1024-1279  hoogstens 3
     768-1023   hoogstens 2
     <768       1
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   0.2 Spacingschaal - 4 8 12 16 24 32 48 64 96. Geen losse waarden meer.
   Alles wat afstand heet komt hieruit; dat is wat "strak uitgelijnd" in de
   praktijk betekent. --ritme is de verticale maat van een sectie en is overal
   gelijk, zodat secties onder elkaar hetzelfde ademen.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   0.3 Typografische schaal - een definitie per niveau.
   Elke h2 op de site is daarna dezelfde h2, in welk blok hij ook staat.
   Per niveau ligt vast: grootte (clamp, vloeiend van 360px tot 1440px),
   regelhoogte, gewicht, letterafstand, ondermarge en text-wrap.

   De clamp is geschreven als clamp(min, rem + vw, max). Het rem-deel zorgt
   dat de tekst blijft meeschalen als de bezoeker zijn lettergrootte vergroot;
   een clamp met alleen vw doet dat niet en valt daarmee onder WCAG 1.4.4.

     niveau   360px    768px    1024px   1440px+   gewicht  regelhoogte
     h1       32,0     40,3     45,5     54,0      900      1,08
     h2       25,0     29,9     33,0     38,0      800      1,16
     h3       21,0     23,3     24,7     27,0      800      1,25
     h4       18,0     19,2     19,9     21,0      700      1,32
     h5       16,5     17,1     17,4     18,0      700      1,38
     h6       15,0     15,0     15,0     15,0      700      1,42
     lopend   16,0     16,0     16,0     16,0      400      1,62
     lood     16,5     17,3     17,7     18,5      400      1,58
     kaart    15,0     15,0     15,0     15,0      400      1,60
     klein    14,0     14,0     14,0     14,0      400      1,55
     bijschr  13,0     13,0     13,0     13,0      400      1,50
     eyebrow  12,5     12,5     12,5     12,5      800      1,40
     label    11,5     11,5     11,5     11,5      800      1,30

   De verhouding tussen de niveaus is ongeveer 1,42 (h1:h2) en 1,41 (h2:h3) op
   desktop en loopt op mobiel terug naar 1,28 / 1,19, zodat een h1 op een
   telefoon niet de halve eerste schermhoogte opeet.

   h5 is het niveau van elke kaarttitel. In de blokkenbibliotheek stonden die
   op 16,5 / 17 / 17,5 en 18px door elkaar; nu zijn ze alle 29 blokken door
   identiek. Een kaarttitel staat in de opmaak als h3, maar is visueel h5:
   het is een titel binnen een sectie, niet een sectiekop.
   -------------------------------------------------------------------------- */

:root{
  /* ---- merkkleuren (contract paragraaf 3) ------------------------------ */
  --blauw:#123A7A;        /* 10,98:1 op wit  */
  --blauw-diep:#0F2447;
  --blauw-nacht:#0B1A33;  /* 17,85:1 op wit  */
  --nacht:#0B1A33;        /* alias, in gebruik op bestaande pagina's */
  --diep:#0F2447;         /* alias, in gebruik op bestaande pagina's */
  --geel:#FFCC00;         /* alleen als vlak, nooit als tekst op licht */
  --geel-rand:#D9AE00;
  --geel-op:#F0BE00;      /* hover van een gele knop */
  --geel-zacht:#FFF4C2;
  --inkt:#1D2A3A;         /* 14,54:1 op wit  */
  --gedempt:#55657A;      /*  6,11:1 op wit  */
  --rand:#DBE2EA;         /* decoratieve scheiding, valt niet onder 1.4.11 */
  --rand-sterk:#8A99AD;   /*  3,06:1 op wit - begrenzing van bedienbare dingen */
  --veld:#F6F8FB; --zacht:#E8EEF8; --vlak:#FFFFFF;
  --goed:#17457F; --fout:#B42323;
  /* Geen groen in het palet. De opdrachtgever wil uitsluitend
     donkerblauw, wit, grijs, zwart en geel. --whatsapp en --goed
     bestaan nog als naam omdat .knop-groen en .vink op 190 paginas
     staan, maar beide geven nu donkerblauw. */
  --whatsapp:#0F2447;
  --op-donker:#CEDCEE;    /* lopende tekst op donkerblauw: 12,4:1 op #0B1A33 */
  --ring-binnen:#FFFFFF;  /* scheidingsring in de focusindicator */
  --ring-donker:#0B1A33;

  /* ---- maat ------------------------------------------------------------ */
  --breed:1440px;   /* inhoud nooit breder; achtergronden wel full width */
  --rand-zij:clamp(16px,4vw,28px);  /* een zijmarge, overal dezelfde */
  --lees:65ch;                      /* leesbreedte lopende tekst */
  --r:12px; --rg:18px; --r-groot:18px; --r-pil:999px;
  --schaduw:0 1px 2px rgba(11,26,51,.06),0 8px 28px rgba(18,58,122,.08);
  --schaduw-op:0 2px 6px rgba(11,26,51,.09),0 18px 46px rgba(18,58,122,.17);

  /* ---- spacingschaal --------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --ritme:clamp(56px,7vw,128px);    /* verticale maat van een sectie */
  --ritme-krap:clamp(32px,4vw,64px);
  --ritme-ruim:clamp(80px,10vw,168px);
  --hero-lucht:clamp(48px,6.5vw,112px);
  --hero-min:600px;                 /* zodat de videoachtergrond beeld is,
                                       geen strook */

  /* ---- motion ---------------------------------------------------------- */
  --duur-1:150ms; --duur-2:200ms; --duur-3:250ms;
  --soepel:cubic-bezier(.2,.7,.2,1);   /* dezelfde easing als de live site */

  /* ---- lettertypen ----------------------------------------------------- */
  --font-kop:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-tekst:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* ---- typografische schaal: een definitie per niveau ------------------ */
  --h1-fs:clamp(2.125rem,calc(1.667rem + 2.04vw),3.5rem);
  --h1-lh:1.05; --h1-fw:900; --h1-ls:-.022em; --h1-mb:.42em; --h1-mt:0;
  --h2-fs:clamp(1.625rem,calc(1.333rem + 1.3vw),2.5rem);
  --h2-lh:1.15; --h2-fw:800; --h2-ls:-.014em; --h2-mb:.46em; --h2-mt:1.35em;
  --h3-fs:clamp(1.3125rem,calc(1.167rem + .65vw),1.75rem);
  --h3-lh:1.22; --h3-fw:800; --h3-ls:-.006em; --h3-mb:.5em;  --h3-mt:1.5em;
  --h4-fs:clamp(1.125rem,calc(1.042rem + .37vw),1.375rem);
  --h4-lh:1.3; --h4-fw:700; --h4-ls:0;       --h4-mb:.5em;  --h4-mt:1.5em;
  --h5-fs:clamp(1.03125rem,calc(1rem + .14vw),1.125rem);
  --h5-lh:1.4; --h5-fw:700; --h5-ls:.005em;  --h5-mb:.4em;  --h5-mt:1.4em;
  --r-klein:6px;
  /* drie regelhoogtes: strak voor koppen en labels, krap voor kleine
     tekst, ruim voor lopende tekst. Alles wat eerder op 1.3, 1.35,
     1.45 of 1.55 stond valt nu op een van deze drie. */
  --lh-strak:1.2; --lh-krap:1.45; --lh-ruim:1.7;
  /* drie vloeiende tussenruimtes en twee vloeiende paddings. Er stonden
     elf verschillende clamp-gaps en zes clamp-paddings in dit bestand;
     het verschil tussen clamp(22px,3vw,44px) en clamp(24px,3.4vw,54px)
     ziet niemand als keuze, alleen als slordigheid. */
  --vloei-1:clamp(20px,2.4vw,32px);
  --vloei-2:clamp(24px,3.2vw,48px);
  --vloei-3:clamp(32px,4.5vw,80px);
  --pad-kaart:clamp(20px,2.1vw,28px);
  --pad-vlak:clamp(24px,3.4vw,48px);
  /* drie vloeiende tussenruimtes en twee vloeiende paddings. Er stonden
     elf verschillende clamp-gaps en zes clamp-paddings in dit bestand;
     het verschil tussen var(--vloei-2) en var(--vloei-2)
     ziet niemand als keuze, alleen als slordigheid. */
  --vloei-1:clamp(20px,2.4vw,32px);
  --vloei-2:var(--vloei-2);
  --vloei-3:var(--vloei-3);
  --pad-kaart:var(--pad-kaart);
  --pad-vlak:var(--pad-vlak);
  --r-klein:6px;
  /* drie regelhoogtes: strak voor koppen en labels, krap voor kleine
     tekst, ruim voor lopende tekst. Alles wat eerder op 1.3, 1.35,
     1.45 of 1.55 stond valt nu op een van deze drie. */
  --lh-strak:1.2; --lh-krap:1.45; --lh-ruim:1.7;
  /* drie vloeiende tussenruimtes en twee vloeiende paddings. Er stonden
     elf verschillende clamp-gaps en zes clamp-paddings in dit bestand;
     het verschil tussen clamp(22px,3vw,44px) en clamp(24px,3.4vw,54px)
     ziet niemand als keuze, alleen als slordigheid. */
  --vloei-1:clamp(20px,2.4vw,32px);
  --vloei-2:clamp(24px,3.2vw,48px);
  --vloei-3:clamp(32px,4.5vw,80px);
  --pad-kaart:clamp(20px,2.1vw,28px);
  --pad-vlak:clamp(24px,3.4vw,48px);
  --h6-fs:.9375rem;
  --h6-lh:1.45; --h6-fw:700; --h6-ls:.01em;   --h6-mb:.4em;  --h6-mt:1.4em;

  --tekst-fs:1rem;      --tekst-lh:1.7;   --tekst-mb:.9em;
  --lood-fs:clamp(1.0625rem,calc(1rem + .28vw),1.25rem); --lood-lh:1.6;
  --kaart-fs:.9375rem;  --kaart-lh:1.65;
  --klein-fs:.875rem;   --klein-lh:1.55;
  --bijschrift-fs:.8125rem; --bijschrift-lh:1.55;
  --eyebrow-fs:.78125rem; --eyebrow-lh:1.4; --eyebrow-fw:800; --eyebrow-ls:.12em;
  --label-fs:.71875rem;   --label-lh:1.3;   --label-fw:800;   --label-ls:.07em;
}

/* Boven 1440 groeit alleen de zijmarge mee, niet de inhoudskolom. */
@media (min-width:1600px){ :root{ --rand-zij:40px } }

/* ---- donkere modus: alleen de vlakken draaien om -----------------------
   Geel blijft geel en de tekst erop blijft donkerblauw; dat is de enige
   leesbare combinatie. Blauw wordt lichter, want #123A7A op #101B26 haalt
   maar 1,5:1 en is als linkkleur onbruikbaar.

   LET OP - dit stond eerder fout. De regel :root:not([data-theme=light])
   stond verderop in het bestand BUITEN een prefers-color-scheme-querie.
   Daardoor was elke pagina altijd donker, ook voor een bezoeker met een
   lichte systeeminstelling, en was elke donkerblauwe link op een donkere
   achtergrond onleesbaar. De querie staat er nu weer omheen.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blauw:#8FB6F2;      /* 8,10:1 op #101B26 */
    --inkt:#E9F0F8;       /* 15,24:1 op #101B26 */
    --gedempt:#A9BCD2;    /*  8,51:1 op #101B26 */
    --rand:#2B3F57; --rand-sterk:#6E86A2;
    --veld:#16222F; --zacht:#172637; --vlak:#101B26;
    --goed:#9EC2F7; --fout:#FF9B9B; --whatsapp:#1E4E96;
    --geel-op:#FFD633;
    --schaduw:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.34);
    --schaduw-op:0 2px 6px rgba(0,0,0,.45),0 18px 46px rgba(0,0,0,.45);
    --ring-binnen:#0B1A33; --ring-donker:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --blauw:#8FB6F2;
  --inkt:#E9F0F8;
  --gedempt:#A9BCD2;
  --rand:#2B3F57; --rand-sterk:#6E86A2;
  --veld:#16222F; --zacht:#172637; --vlak:#101B26;
  --goed:#9EC2F7; --fout:#FF9B9B; --whatsapp:#1E4E96;
  --geel-op:#FFD633;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.34);
  --schaduw-op:0 2px 6px rgba(0,0,0,.45),0 18px 46px rgba(0,0,0,.45);
  --ring-binnen:#0B1A33; --ring-donker:#FFFFFF;
}


/* ==========================================================================
   1 - GRONDSLAG
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--vlak);color:var(--inkt);
  font-family:var(--font-tekst);font-size:var(--tekst-fs);line-height:var(--tekst-lh);
  font-weight:400;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

/* ---- de zes kopniveaus: elk precies een keer gedefinieerd --------------
   .trb-titel-xl, .trb-titel en .trb-titel-sm zijn de blokvarianten van h1,
   h2 en h3; ze staan hier in dezelfde regel zodat een kop in een blok niet
   kan afwijken van dezelfde kop daarbuiten.
   ------------------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6{font-family:var(--font-kop);overflow-wrap:break-word}
h1,.trb .trb-titel-xl{font-size:var(--h1-fs);line-height:var(--h1-lh);
  font-weight:var(--h1-fw);letter-spacing:var(--h1-ls);margin:var(--h1-mt) 0 var(--h1-mb)}
h2,.trb .trb-titel{font-size:var(--h2-fs);line-height:var(--h2-lh);
  font-weight:var(--h2-fw);letter-spacing:var(--h2-ls);margin:0 0 var(--h2-mb)}
h3,.trb .trb-titel-sm{font-size:var(--h3-fs);line-height:var(--h3-lh);
  font-weight:var(--h3-fw);letter-spacing:var(--h3-ls);margin:0 0 var(--h3-mb)}
h4{font-size:var(--h4-fs);line-height:var(--h4-lh);font-weight:var(--h4-fw);
  letter-spacing:var(--h4-ls);margin:0 0 var(--h4-mb)}
h5{font-size:var(--h5-fs);line-height:var(--h5-lh);font-weight:var(--h5-fw);
  letter-spacing:var(--h5-ls);margin:0 0 var(--h5-mb)}
h6{font-size:var(--h6-fs);line-height:var(--h6-lh);font-weight:var(--h6-fw);
  letter-spacing:var(--h6-ls);margin:0 0 var(--h6-mb)}

/* verticaal ritme binnen lopende tekst: alleen daar krijgt een kop bovenmarge */
.inhoud h2,.trb-tekst-body h2{margin-top:var(--h2-mt)}
.inhoud h3,.trb-tekst-body h3{margin-top:var(--h3-mt)}
.inhoud h4,.trb-tekst-body h4{margin-top:var(--h4-mt)}
.inhoud>:first-child,.inhoud>h2:first-child,
.inhoud section:first-child h2,.trb-tekst-body>:first-child{margin-top:0}

p{margin:0 0 var(--tekst-mb);max-width:var(--lees)}
ul,ol{margin:0 0 var(--tekst-mb);padding-left:var(--s5);max-width:var(--lees)}
li{margin-bottom:var(--s2)}
.lood{font-size:var(--lood-fs);line-height:var(--lood-lh);color:var(--gedempt);
  max-width:var(--lees)}

/* ---- eyebrow: een definitie, twee kleuren ------------------------------
   Op een lichte ondergrond donkerblauw (10,98:1); op een donkere ondergrond
   geel (11,48:1 op #0B1A33). Geel op wit haalt 1,51:1 en komt daarom op licht
   nooit voor.
   ------------------------------------------------------------------------ */
.eyebrow{display:inline-block;font-family:var(--font-kop);
  font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase;
  color:var(--blauw);margin:0 0 var(--s3)}
.hero .eyebrow,.band .eyebrow,footer .eyebrow{color:var(--geel)}

a{color:var(--blauw)}

/* ---- focus: donkere ring + witte scheiding + gele buitenring ------------
   Geen enkele variant berust op geel alleen. De ring wordt verderop in dit
   bestand nergens meer uitgezet; dat gebeurde eerder twee keer en maakte de
   indicator op witte pagina's 1,27:1.
   ------------------------------------------------------------------------ */
:where(a,button,input,select,textarea,summary,details,[tabindex]):focus-visible{
  outline:3px solid var(--ring-donker);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--ring-binnen),0 0 0 7px var(--geel);
  border-radius:var(--r-klein)}
.hero :focus-visible,footer :focus-visible,.band :focus-visible,.spoed :focus-visible{
  outline-color:#fff;box-shadow:0 0 0 2px #0B1A33,0 0 0 7px var(--geel)}

/* ---- skip-link --------------------------------------------------------- */
.overslaan{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--geel);color:var(--blauw-nacht);font-weight:700;
  padding:var(--s3) var(--s4);border-radius:0 0 var(--r) 0;text-decoration:none}
.overslaan:focus{left:0}


/* ==========================================================================
   2 - PAGINA-ONDERDELEN
   ========================================================================== */

/* ---- container: een breedte, een zijmarge ------------------------------ */
.container{max-width:var(--breed);margin-inline:auto;padding-inline:var(--rand-zij);
  width:100%}
section{padding-block:var(--ritme)}
.zacht{background:var(--zacht)}

/* ---- knoppen: 50px hoog, radius 12, gewicht 700 (contract paragraaf 3) - */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:50px;padding:0 var(--s5);border-radius:var(--r);font-weight:700;
  font-family:var(--font-kop);font-size:var(--tekst-fs);line-height:var(--lh-strak);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  white-space:nowrap;text-align:center;
  transition:background-color var(--duur-1) var(--soepel),
             border-color var(--duur-1) var(--soepel),
             color var(--duur-1) var(--soepel),
             box-shadow var(--duur-2) var(--soepel),
             transform var(--duur-1) var(--soepel)}
.knop-geel,.geel{background:var(--geel);color:var(--blauw-nacht);border-color:var(--geel-rand)}
.knop-rand{background:transparent;color:var(--blauw);border-color:var(--rand-sterk)}
.wit{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .knop-rand,.band .knop-rand{color:#fff;border-color:rgba(255,255,255,.6)}
.knop svg{width:19px;height:19px;flex:none;fill:currentColor}
.bel{display:inline-flex;align-items:center;min-height:46px;padding:0 var(--s5);
  border-radius:var(--r-pil);background:var(--blauw);color:#fff;font-weight:700;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--duur-1) var(--soepel)}
/* knoppen in een rij lijnen op de onderkant uit */
.knoppen{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:flex-end;margin-top:var(--s5)}

/* ---- spoedbalk: bovenaan elke pagina, boven de vouw --------------------- */
.spoed{background:var(--blauw-nacht);color:#fff;padding-block:var(--s3)}
.spoed .container{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.spoed strong{font-family:var(--font-kop);font-weight:700;font-size:var(--kaart-fs);
  line-height:var(--lh-strak);flex:1 1 auto;min-width:0}
.spoed .knop{min-height:44px;font-size:var(--kaart-fs);padding:0 var(--s4)}
.spoed a{color:#fff}
.spoed .knop-geel,.spoed .geel{color:var(--blauw-nacht)}

/* ---- kopbalk ----------------------------------------------------------- */
header.balk{position:sticky;top:0;z-index:50;background:var(--vlak);
  border-bottom:1px solid var(--rand)}
.balk .container{display:flex;align-items:center;gap:var(--s5);min-height:70px}
.merk{font-family:var(--font-kop);font-weight:900;font-size:var(--h4-fs);line-height:1;
  color:var(--blauw);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.merk span{color:#8A6A00}
.merk img{display:block;width:120px;height:60px;object-fit:contain}
nav.hoofd{display:flex;gap:var(--s5);margin-left:var(--s3);flex:1;flex-wrap:wrap}
nav.hoofd a{color:var(--inkt);text-decoration:none;font-weight:700;
  font-size:var(--kaart-fs);padding:var(--s1) 0}
nav.hoofd a[aria-current]{color:var(--blauw)}
.balk .knop{min-height:44px;font-size:var(--kaart-fs)}

/* ---- hero -------------------------------------------------------------- */
.hero{position:relative;color:#fff;padding-block:clamp(40px,6vw,80px);
  background:
  radial-gradient(900px 420px at 86% 12%,rgba(18,58,122,.75),transparent 70%),
  linear-gradient(158deg,var(--blauw-diep) 0%,var(--blauw-nacht) 72%)}
.hero .container{position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  gap:var(--vloei-2);align-items:start}
.hero h1,.hero h2,.hero h3{color:#fff}
.hero p,.hero .lood{color:var(--op-donker)}
.hero p{font-size:var(--lood-fs);line-height:var(--lood-lh)}
.hero a{color:var(--geel)}
.bewijs,.feiten{display:flex;gap:var(--s5) var(--s6);flex-wrap:wrap;margin-top:var(--s6);
  padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.22)}
.bewijs div b,.feiten div b{display:block;font-family:var(--font-kop);font-weight:900;
  font-size:var(--h3-fs);line-height:var(--lh-strak);color:var(--geel)}
.bewijs div span,.feiten div span{font-size:var(--bijschrift-fs);color:var(--op-donker)}
.kruim{font-size:var(--bijschrift-fs);color:#C9D6E8;margin-bottom:var(--s3)}
.kruim a{color:#C9D6E8}
.eerste{padding-top:clamp(26px,3vw,40px)}


/* ---- formulierblok ----------------------------------------------------- */
.boeker{background:var(--vlak);color:var(--inkt);border-radius:var(--r-groot);
  padding:var(--s5);box-shadow:var(--schaduw-op);border:1px solid var(--rand)}
.boeker h2{font-size:var(--h4-fs);line-height:var(--h4-lh);margin-bottom:var(--s1)}
label{display:block;font-weight:700;font-size:var(--bijschrift-fs);margin-bottom:var(--s1)}
.veld{width:100%;min-width:0;height:50px;padding:0 var(--s3);margin-bottom:var(--s3);
  border:1.5px solid var(--rand-sterk);border-radius:var(--r);
  background:var(--veld);color:var(--inkt);font:inherit;
  transition:border-color var(--duur-1) var(--soepel)}
textarea.veld{height:auto;min-height:120px;padding:var(--s3);line-height:var(--lh-krap)}
.veld:hover{border-color:var(--blauw)}
.veld:focus{outline:3px solid var(--ring-donker);outline-offset:1px;
  border-color:var(--blauw);box-shadow:0 0 0 2px var(--ring-binnen),0 0 0 7px var(--geel)}
.veld::placeholder{color:var(--gedempt);opacity:1}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.twee>*{min-width:0}
.hint{font-size:var(--bijschrift-fs);color:var(--gedempt);
  margin:calc(-1 * var(--s2)) 0 var(--s3)}
.verplicht{color:var(--fout);font-weight:700}
fieldset{border:0;margin:0;padding:0}

/* ---- kaarten ----------------------------------------------------------- */
/* .raster staat in paragraaf 4 (slim kaartenraster) */
.kaart{background:var(--vlak);border:1.5px solid var(--rand);
  border-radius:var(--r-groot);padding:var(--s5);box-shadow:var(--schaduw);
  text-decoration:none;color:inherit;display:block;min-width:0;
  transition:box-shadow var(--duur-2) var(--soepel),
             border-color var(--duur-2) var(--soepel),
             transform var(--duur-2) var(--soepel)}
.kaart p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:var(--gedempt);
  margin:0;max-width:none}
.kaart h2,.kaart h3,.kaart h4{font-size:var(--h5-fs);line-height:var(--h5-lh);
  font-weight:var(--h5-fw);letter-spacing:var(--h5-ls);margin:0 0 var(--h5-mb);
  color:var(--blauw)}
.kaart .pijl{color:var(--blauw);font-weight:700;font-size:var(--klein-fs);
  margin-top:var(--s3);display:block}

/* ---- tabellen ---------------------------------------------------------- */
.tabelhoes{overflow-x:auto;border:1.5px solid var(--rand);
  border-radius:var(--r-groot);background:var(--vlak)}
table{width:100%;border-collapse:collapse;min-width:430px}
caption{text-align:left;padding:var(--s4) var(--s4) 0;font-weight:700;font-size:var(--kaart-fs)}
th{text-align:left;font-family:var(--font-kop);font-size:var(--label-fs);
  line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);
  text-transform:uppercase;color:var(--gedempt);padding:var(--s3) var(--s4);
  border-bottom:1.5px solid var(--rand);vertical-align:bottom}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--rand);vertical-align:top}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
td+td,th+th{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th[scope="row"],tbody th{text-transform:none;letter-spacing:0;font-size:var(--kaart-fs);
  color:var(--inkt);border-bottom:1px solid var(--rand);font-weight:700;text-align:left}

/* ---- faq --------------------------------------------------------------- */
details{border:1.5px solid var(--rand);border-radius:var(--r);background:var(--vlak);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
details[open]{box-shadow:var(--schaduw)}
summary{font-weight:700;cursor:pointer;list-style:none;padding-right:var(--s6);
  position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:-2px;color:var(--blauw);
  font-weight:900;font-size:var(--h4-fs)}
details[open] summary::after{content:"\2212"}
details p{margin:var(--s3) 0 0;font-size:var(--kaart-fs);color:var(--gedempt)}
.faq p{margin:var(--s3) 0 0;color:var(--gedempt);font-size:var(--kaart-fs)}

/* ---- cta-band ---------------------------------------------------------- */
.band{background:var(--blauw);color:#fff;border-radius:var(--r-groot);
  padding:var(--pad-vlak);display:flex;gap:var(--s5) var(--s6);align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.band h2{margin:0 0 var(--s2);color:#fff}
.band p{color:var(--op-donker);margin:0}
.band .knoppen{margin:0}

.kruimels{border-bottom:1px solid var(--rand);background:var(--veld)}
.kruimels ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;
  padding:var(--s3) 0;font-size:var(--bijschrift-fs);color:var(--gedempt);max-width:none}
.kruimels li{margin:0}
.kruimels li+li::before{content:"\203A";margin-right:var(--s2);color:var(--gedempt)}
.kruimels a{color:var(--gedempt);text-decoration:none}
.kruimels [aria-current]{font-weight:700;color:var(--inkt)}

/* ---- voet -------------------------------------------------------------- */
footer{background:var(--blauw-nacht);color:var(--op-donker);
  padding:var(--s7) 0 var(--s5);margin-top:var(--ritme)}
footer h2,footer h3{color:#fff;font-family:var(--font-kop);
  font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase;margin:0 0 var(--s3)}
footer a{color:var(--op-donker);text-decoration:none;display:block;padding:var(--s1) 0}
footer p{font-size:var(--klein-fs);color:var(--op-donker)}
.voetraster,.voet{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--s6) var(--s5);align-items:start}
.onderbalk,.onder{margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;font-size:var(--bijschrift-fs)}
.onderbalk a,.onder a{display:inline}


/* ==========================================================================
   2.9 - RESPONSIEF: de ladder uit 0.1, op de pagina-onderdelen
   ========================================================================== */

@media (max-width:1279.98px){
  .hero .container{gap:var(--s6)}
}
@media (max-width:1023.98px){
  header.balk{position:static}
  .balk .container{flex-wrap:wrap;padding-top:var(--s3);gap:var(--s3);min-height:0}
  nav.hoofd{order:3;flex:1 1 100%;margin:0 0 var(--s2);gap:var(--s1) var(--s3)}
  nav.hoofd a{font-size:var(--klein-fs);padding:var(--s1) 0}
  .hero .container{grid-template-columns:1fr}
  .voetraster,.voet{grid-template-columns:1fr 1fr}
}
@media (max-width:767.98px){
  .spoed .container{gap:var(--s2)}
  .spoed strong{flex:1 1 100%;margin-bottom:var(--s1)}
  .spoed .knop{flex:0 1 auto;min-height:46px;font-size:var(--klein-fs);padding:0 var(--s3)}
}
@media (max-width:479.98px){
  .knoppen .knop,.knoppen .knop-groot{flex:1 1 100%}
  .bewijs,.feiten{gap:var(--s4) var(--s5)}
  .twee{grid-template-columns:1fr}
  .voetraster,.voet{grid-template-columns:1fr}
}

/* ==========================================================================
   BLOKKENBIBLIOTHEEK TAXI ROGIS
   Hoort bij: config/blokken-taxirogis.json · api/lib/nx-blokken-tr.php
              admin/blokken-tr.js · templates/blok-voorbeeld.html
   --------------------------------------------------------------------------
   29 Nexora-bouwblokken in de eigen naamruimte `trb-` (taxi rogis blok), zodat
   niets van de paginaklassen hierboven (.hero .kaart .knop .faq .voet .band)
   wordt overschreven of overschrijft.

   Afspraken binnen deze naamruimte:
   - tekst op geel is altijd #0B1A33, nooit wit — wit op geel haalt 1,51:1;- focus is een donkere ring met een witte scheiding en een gele buitenring,zodat hij op wit, op geel en op donkerblauw zichtbaar is;- de opmaak werkt zonder JavaScript: carrousels met scroll-snap, accordeon
     en mobiel menu met <details>, bolletjes als ankerlinks, de kaart op de
     contactpagina laadt pas na een klik;- prefers-reduced-motion zet de logo-carrousel, het vloeiend scrollen en
     alle overgangen uit;- elk inhoudsblok heeft dezelfde sectie-instellingen: achtergrond (wit,lichtblauw, lichtgrijs, donkerblauw, nacht of foto), inhoud in een kaart
     die over de sectierand mag steken, en de hoeveelheid ruimte;- breekpunten 1024 / 768 / 620 / 480, één ladder.
   ========================================================================== */

.trb{/* merk */
  --trb-blauw:#123A7A; --trb-diep:#0F2447; --trb-nacht:#0B1A33;--trb-geel:#FFCC00;  --trb-geelrand:#D9AE00; --trb-geelzacht:#FFF4C2;--trb-groen:#0F2447;   /* geen groen, zie paragraaf 0 */
  /* tekst */
  --trb-inkt:#1D2A3A; --trb-stil:#55657A;/* vlakken */
  --trb-wit:#FFFFFF; --trb-zacht:#E8EEF8; --trb-veld:#F4F7FB;--trb-lijn:#D3DCE7; --trb-lijnsterk:#8295AC;/* kaart binnen een blok: blijft wit, ook op een donkere sectie */
  --trb-kaartvlak:#FFFFFF; --trb-kaartinkt:#1D2A3A; --trb-kaartstil:#55657A;--trb-kaartlijn:#D3DCE7;/* maat - overgenomen uit het globale tokenblok, zodat de blokken dezelfde
     containerbreedte, dezelfde zijmarge en hetzelfde verticale ritme hebben
     als de rest van de pagina. Eerder stonden hier eigen waarden (1240 naast
     .container 1140) en lagen de linkerranden van kopbalk, hero en inhoud
     niet op een lijn. */
  --trb-breed:var(--breed); --trb-rand:var(--rand-zij);--trb-lucht:var(--ritme);--trb-r:var(--r); --trb-r-g:var(--r-groot); --trb-r-pil:var(--r-pil);--trb-schaduw:0 1px 2px rgba(11,26,51,.06),0 8px 28px rgba(18,58,122,.08);--trb-schaduwop:0 2px 6px rgba(11,26,51,.09),0 18px 46px rgba(18,58,122,.17);--trb-kleef:96px;position:relative;background:var(--trb-wit);color:var(--trb-inkt);padding:var(--trb-lucht) var(--trb-rand);font-family:var(--font-tekst);font-size:var(--tekst-fs);line-height:var(--tekst-lh);font-weight:400;
}
.trb *,.trb *::before,.trb *::after{box-sizing:border-box}
.trb-in{max-width:var(--trb-breed);margin-inline:auto;width:100%;position:relative}

/* ---- sectieachtergronden ----------------------------------------------- */
.trb-v-zacht {background:var(--trb-zacht)}
.trb-v-veld  {background:var(--trb-veld)}
/* Let op: niet var(--trb-blauw). Dat is in donkere modus de lichte
   accentkleur, en dan wordt deze sectie lichtblauw met witte tekst
   erop (2,07:1). Een donkere sectie hoort in beide thema's donker. */
.trb-v-donker{background:var(--trb-donkervlak,#123A7A)}
.trb-v-nacht {background:linear-gradient(170deg,#0F2447 0%,#0B1A33 68%,#071226 100%)}
.trb-v-beeld {background:#0B1A33;overflow:hidden;isolation:isolate}
.trb-v-beeldfoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.trb-v-beeld::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(7,17,38,.95) 0%,rgba(9,22,45,.9) 45%,rgba(11,26,51,.76) 100%)}
.trb-v-donker,.trb-v-nacht,.trb-v-beeld{color:#FFFFFF;--trb-inkt:#FFFFFF;--trb-stil:#CEDCEE;--trb-lijn:rgba(255,255,255,.22);--trb-lijnsterk:rgba(255,255,255,.5)}
.trb-ruimte-ruim {padding-block:var(--ritme-ruim)}
.trb-ruimte-krap {padding-block:var(--ritme-krap)}
.trb-ruimte-geen {padding-block:0}

/* ---- inhoud in een kaart over de sectieachtergrond ---------------------- */
.trb-vlakkaart{max-width:var(--trb-breed);margin-inline:auto;border-radius:var(--trb-r-g);padding:var(--pad-vlak);box-shadow:var(--trb-schaduwop);position:relative}
.trb-vlakkaart-wit  {background:var(--trb-kaartvlak);color:var(--trb-kaartinkt)}
.trb-vlakkaart-zacht{background:var(--trb-zacht);color:var(--trb-kaartinkt)}
.trb-vlakkaart>.trb-in{max-width:none;padding:0}
.trb-vlakkaart-wit,.trb-vlakkaart-zacht{--trb-inkt:var(--trb-kaartinkt);--trb-stil:var(--trb-kaartstil);--trb-lijn:var(--trb-kaartlijn);--trb-lijnsterk:var(--trb-lijnsterk)}

.trb-vlakkaart-wit .trb-knop-rand,.trb-vlakkaart-zacht .trb-knop-rand{color:var(--trb-blauw);border-color:#8295AC}
.trb-vlakkaart-uit{margin-block:calc(-1 * clamp(18px,3vw,40px))}
@media (max-width:767.98px){.trb-vlakkaart{padding:var(--s5) var(--s4);border-radius:var(--trb-r)}
  .trb-vlakkaart-uit{margin-block:0}
}

/* ---- typografie --------------------------------------------------------- */
.trb h1,.trb h2,.trb h3,.trb h4{font-family:Lato,system-ui,-apple-system,"Segoe UI",sans-serif;color:inherit;margin:0;text-wrap:balance}
.trb p{margin:0;max-width:none;color:inherit}
.trb img{display:block;max-width:100%;height:auto}
/* Basisregel voor elk pictogram in een blok. Zonder deze regel valt een SVG
   zonder eigen klasse terug op de standaardwaarden: zwarte vulling en
   300x150px. Paden die wel gevuld horen te zijn (ster, Facebook) zetten fill
   en stroke als attribuut op het pad zelf en winnen daarmee van deze regel. */
.trb svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb ul,.trb ol,.trb dl,.trb dd{margin:0;padding:0;max-width:none;list-style:none}
.trb li{margin:0}
/* De drie titelklassen zijn h1, h2 en h3 van de schaal; de maten staan in
   paragraaf 1 (grondslag) zodat ze niet twee keer gedefinieerd zijn.
   .trb h3 is het kaarttitelniveau h5: in alle 29 blokken dezelfde maat.
   Eerder stond dat op 16,5 / 17 / 17,5 / 18px door elkaar. */
.trb h3,.trb h4{font-size:var(--h5-fs);line-height:var(--h5-lh);font-weight:var(--h5-fw);letter-spacing:var(--h5-ls)}
.trb h2:not([class]){font-size:var(--h2-fs);line-height:var(--h2-lh);font-weight:var(--h2-fw);letter-spacing:var(--h2-ls)}
/* eyebrow in een blok: dezelfde maat, gewicht en letterafstand als .eyebrow
   daarbuiten; alleen de gele streep ervoor is extra. */
.trb-kicker{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);font-family:var(--font-kop);font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-blauw)}
.trb-kicker::before{content:"";width:22px;height:3px;border-radius:var(--r-klein);flex:none;background:var(--trb-geel)}
.trb-v-donker .trb-kicker,.trb-v-nacht .trb-kicker,.trb-v-beeld .trb-kicker,
.trb-hero .trb-kicker,.trb-banner .trb-kicker,.trb-cta-beeld .trb-kicker{color:var(--trb-geel)}
/* Staat bewust NA de regel hierboven: een witte of lichtblauwe kaart in
   een donkere sectie is zelf licht, dus de eyebrow erin is blauw. Geel
   op wit haalt 1,51:1. */
.trb-vlakkaart-wit .trb-kicker,.trb-vlakkaart-zacht .trb-kicker{color:var(--trb-blauw)}
.trb-intro{font-size:var(--lood-fs);line-height:var(--lood-lh);color:var(--trb-stil);max-width:var(--lees);margin:var(--s3) 0 0}
.trb-noot{font-size:var(--bijschrift-fs);line-height:var(--bijschrift-lh);color:var(--trb-stil);margin:var(--s3) 0 0;max-width:var(--lees)}
.trb-kop{margin:0 0 var(--vloei-1);max-width:var(--lees)}
.trb-kop-breed{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4) var(--s6);align-items:end;max-width:none}
.trb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:767.98px){.trb-kop-breed{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---- focus -------------------------------------------------------------- */
.trb :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--trb-nacht);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px var(--trb-geel);border-radius:var(--r-klein)}
.trb-v-donker :is(a,button,summary):focus-visible,
.trb-v-nacht  :is(a,button,summary):focus-visible,
.trb-v-beeld  :is(a,button,summary):focus-visible,
.trb-hero     :is(a,button,summary):focus-visible,
.trb-banner   :is(a,button,summary):focus-visible,
.trb-footer   :is(a,button,summary):focus-visible,
.trb-cta-beeld :is(a,button,summary):focus-visible{outline-color:#FFFFFF;box-shadow:0 0 0 2px #0B1A33,0 0 0 7px var(--trb-geel)}
.trb-vlakkaart-wit :is(a,button,summary):focus-visible,
.trb-vlakkaart-zacht :is(a,button,summary):focus-visible{outline-color:var(--trb-nacht);box-shadow:0 0 0 2px #fff,0 0 0 7px var(--trb-geel)}
.trb-skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--trb-geel);color:#0B1A33;font-weight:700;padding:var(--s3) var(--s4);text-decoration:none;border-radius:0 0 var(--trb-r) 0}
.trb-skip:focus{left:0}

/* ---- knoppen ------------------------------------------------------------ */
.trb-knop{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:50px;padding:0 var(--s5);border-radius:var(--trb-r);font:700 var(--kaart-fs)/var(--lh-strak) Lato,system-ui,-apple-system,sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center;transition:filter .15s ease,background-color .15s ease,border-color .15s ease}
.trb-knop:hover{filter:brightness(1.07)}
.trb-knop svg{width:19px;height:19px;flex:none}
.trb-knop-geel {background:var(--trb-geel);color:#0B1A33;border-color:var(--trb-geelrand)}
.trb-knop-blauw{background:var(--trb-knopblauw,var(--trb-blauw));color:#FFFFFF}
.trb-knop-groen{background:var(--trb-groen);color:#FFFFFF}
.trb-knop-wit  {background:var(--trb-knopwit,#FFFFFF);color:var(--trb-knopwitinkt,var(--trb-blauw));border-color:var(--trb-knopwit,#FFFFFF)}
.trb-knop-rand {background:transparent;color:var(--trb-blauw);border-color:var(--trb-lijnsterk)}
.trb-v-donker .trb-knop-rand,.trb-v-nacht .trb-knop-rand,.trb-v-beeld .trb-knop-rand,
.trb-hero .trb-knop-rand,.trb-banner .trb-knop-rand,.trb-cta-beeld .trb-knop-rand{color:#FFFFFF;border-color:rgba(255,255,255,.62)}
.trb-knop-sm{min-height:42px;padding:0 var(--s4);font-size:var(--klein-fs);border-radius:var(--r)}
.trb-knop-lg{min-height:58px;padding:0 var(--s5);font-size:var(--h5-fs)}
.trb-acties{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.trb-acties:empty{display:none}
.trb-acties-midden{justify-content:center;margin-top:clamp(24px,3vw,38px)}
@media (max-width:479.98px){.trb-acties{flex-direction:column;align-items:stretch}
  .trb-acties>.trb-knop{width:100%}
}

/* ---- atomen ------------------------------------------------------------- */
.trb-kaart{background:var(--trb-kaartvlak);color:var(--trb-kaartinkt);border:1.5px solid var(--trb-kaartlijn);border-radius:var(--trb-r-g);padding:var(--pad-kaart);box-shadow:var(--trb-schaduw);min-width:0;overflow-wrap:break-word;position:relative}
.trb-kaart h3{color:var(--trb-blauw)}
.trb-kaart p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:var(--trb-kaartstil);margin:var(--s2) 0 0}
/* Een kaart die een link is, is een blok - behalve de kaartsoorten die hun
   inhoud verticaal uit elkaar zetten. Die moeten flex blijven, anders doet
   margin-top:auto op de onderste regel niets en verspringt "Bekijk dienst"
   per kaart. Deze selector is een tandje specifieker dan .trb-dienst zelf,
   want a.trb-kaart won daarvan en zette display terug op block. */
a.trb-kaart.trb-dienst,a.trb-kaart.trb-tegel,a.trb-kaart.trb-nieuws,
a.trb-kaart.trb-case,a.trb-kaart.trb-tarief{display:flex;flex-direction:column}
a.trb-kaart{display:block;text-decoration:none;color:var(--trb-kaartinkt);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
a.trb-kaart:hover{box-shadow:var(--trb-schaduwop);border-color:var(--trb-blauw);transform:translateY(-2px)}
.trb-badge{width:46px;height:46px;flex:none;border-radius:var(--trb-r);display:grid;place-items:center;background:var(--trb-badgevlak,var(--trb-zacht));color:var(--trb-badgeinkt,var(--trb-blauw));position:relative}
.trb-badge::after{content:"";position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;background:var(--trb-geel);border:2px solid var(--trb-kaartvlak)}
.trb-badge svg{width:22px;height:22px}
.trb-ic{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-chip{display:inline-flex;align-items:baseline;gap:var(--s2);padding:var(--s2) var(--s4);border-radius:var(--trb-r-pil);background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);color:var(--trb-blauw);font-weight:700;font-size:var(--klein-fs);text-decoration:none}
.trb-chip svg{align-self:center}
a.trb-chip:hover{background:var(--trb-geelzacht);border-color:#8A6D00;color:#0B1A33}
.trb-chip small{font-weight:400;font-size:var(--bijschrift-fs);color:var(--trb-kaartstil)}
a.trb-chip:hover small{color:#0B1A33}
.trb-sterren{display:inline-flex;gap:var(--s1);color:var(--trb-ster,#8A6200);line-height:0}
.trb-hero .trb-sterren,.trb-v-donker .trb-sterren,.trb-v-nacht .trb-sterren,
.trb-v-beeld .trb-sterren{color:var(--trb-geel)}
.trb-kaart .trb-sterren,.trb-vlakkaart-wit .trb-sterren{color:var(--trb-ster,#8A6200)}
.trb-sterren svg{width:17px;height:17px;fill:currentColor;stroke:none}
.trb-vulin{display:inline-block;background:var(--trb-geel);color:#0B1A33;font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);padding:var(--s1) var(--s2);border-radius:var(--r-klein);border:1.5px solid #8A6D00;white-space:nowrap;vertical-align:1px}
/* Een tussenkop is een kop, geen vetgedrukte eerste regel van de alinea.
   Hij krijgt daarom ruimte boven zich; die ruimte moet groter zijn dan de
   regelafstand eronder, anders hoort hij optisch bij de verkeerde alinea.
   De selector is .trb-tekst-body .trb-tussenkop omdat .trb-tekst-body>*+*
   anders wint - dat was de reden dat de bovenmarge op /prijzen/ 0 was. */
.trb-tussenkop,
.trb-tekst-body .trb-tussenkop{font-size:var(--h4-fs);line-height:var(--h4-lh);font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--trb-blauw);margin-top:var(--s7);margin-bottom:var(--s2)}
.trb-tekst-body>.trb-tussenkop:first-child{margin-top:0}
.trb-v-donker .trb-tussenkop,.trb-v-nacht .trb-tussenkop{color:var(--trb-geel)}
.trb-vlakkaart-wit .trb-tussenkop{color:var(--trb-blauw)}

/* gele pillen met label en waarde */
.trb-pillen{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.trb-pil{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--trb-r-pil);background:var(--trb-geel);color:#0B1A33;font-size:var(--bijschrift-fs);line-height:var(--lh-strak);max-width:100%}
.trb-pil svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.trb-pil b{font:700 var(--bijschrift-fs)/var(--lh-strak) Lato,system-ui,sans-serif}
.trb-pil span{opacity:.85}

/* deelknoppen */
.trb-deelrij{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.trb-deelkop{font-family:var(--font-kop);font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-stil)}
.trb-deelrij ul{display:flex;flex-wrap:wrap;gap:var(--s2)}
.trb-deel{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--trb-r-pil);border:1.5px solid var(--trb-lijn);background:var(--trb-badgevlak,var(--trb-wit));color:var(--trb-badgeinkt,var(--trb-blauw));font:700 var(--bijschrift-fs)/var(--lh-strak) Lato,system-ui,sans-serif;text-decoration:none}
.trb-deel svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-deel:hover{background:var(--trb-blauw);border-color:var(--trb-blauw);color:#FFFFFF}
.trb-v-donker .trb-deel,.trb-v-nacht .trb-deel{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#FFFFFF}

/* ---- raster -------------------------------------------------------------- */
/* het raster zelf staat in paragraaf 4 (slim kaartenraster) */

/* ---- carrousel: scroll-snap, zonder JavaScript -------------------------- */
.trb-spoor{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--z,3) - 1) * 16px) / var(--z,3));gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--s3);scrollbar-color:#123A7A #E1E8F2}
.trb-spoor>*{scroll-snap-align:start;min-width:0;scroll-margin-top:120px}
.trb-spoor::-webkit-scrollbar{height:8px}
.trb-spoor::-webkit-scrollbar-track{background:#E1E8F2;border-radius:var(--r-pil)}
.trb-spoor::-webkit-scrollbar-thumb{background:#123A7A;border-radius:var(--r-pil)}
.trb-v-nacht .trb-spoor,.trb-v-donker .trb-spoor{scrollbar-color:#FFCC00 rgba(255,255,255,.2)}
.trb-v-nacht .trb-spoor::-webkit-scrollbar-track,
.trb-v-donker .trb-spoor::-webkit-scrollbar-track{background:rgba(255,255,255,.2)}
.trb-v-nacht .trb-spoor::-webkit-scrollbar-thumb,
.trb-v-donker .trb-spoor::-webkit-scrollbar-thumb{background:#FFCC00}
@media (max-width:1023.98px){.trb-spoor{--z:2.1}}
@media (max-width:767.98px) {.trb-spoor{--z:1.12}}
/* bolletjes = ankerlinks, dus bruikbaar zonder JavaScript en met toetsenbord */
.trb-bolletjes{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s4)}
.trb-bolletjes a{display:block;width:11px;height:11px;border-radius:50%;background:var(--trb-lijnsterk);position:relative}
.trb-bolletjes a::before{content:"";position:absolute;inset:-9px}
.trb-bolletjes a:hover{background:var(--trb-blauw)}
.trb-bolletjes li:first-child a{background:var(--trb-blauw);width:26px;border-radius:var(--r-pil)}
.trb-v-donker .trb-bolletjes li:first-child a,
.trb-v-nacht .trb-bolletjes li:first-child a{background:var(--trb-geel)}

@media (prefers-reduced-motion:reduce){.trb *,.trb *::before,.trb *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .trb-spoor{scroll-behavior:auto}
}

/* ======================= 01 · kopbalk ==================================== */
.trb-header{padding:0;border-bottom:1px solid var(--trb-lijn);position:sticky;top:0;z-index:60;background:var(--trb-wit)}
.trb-header-in{max-width:var(--trb-breed);margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);min-height:78px;padding:10px var(--trb-rand)}
.trb-logo{display:block;flex:none}
.trb-logo img{height:50px;width:auto;object-fit:contain}
.trb-nav>ul{display:flex;flex-wrap:wrap;gap:var(--s1)}
.trb-nav a{display:block;padding:var(--s2) var(--s3);border-radius:var(--r);text-decoration:none;color:var(--trb-inkt);font:700 var(--klein-fs)/var(--lh-strak) Lato,system-ui,sans-serif;white-space:nowrap}
.trb-nav a:hover{background:var(--trb-zacht);color:var(--trb-blauw)}
.trb-nav a[aria-current]{color:var(--trb-blauw);box-shadow:inset 0 -3px 0 var(--trb-geel)}
.trb-header-acties{display:flex;align-items:center;gap:var(--s2)}
.trb-header-tel{display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--trb-blauw);font:700 var(--klein-fs)/1 Lato,system-ui,sans-serif;white-space:nowrap}
.trb-header-tel:hover{text-decoration:underline;text-underline-offset:4px}
.trb-menu{display:none;border:0;padding:0;margin:0;background:none}
.trb-menu>summary{display:inline-flex;align-items:center;gap:var(--s2);min-height:46px;padding:0 var(--s4);border-radius:var(--r);border:2px solid var(--trb-lijnsterk);background:var(--trb-wit);color:var(--trb-blauw);font:700 var(--kaart-fs)/1 Lato,system-ui,sans-serif;cursor:pointer;list-style:none}
.trb-menu>summary::-webkit-details-marker{display:none}
.trb-menu>summary::after{content:none}
.trb-menu-streep{display:grid;gap:var(--s1);width:17px}
.trb-menu-streep i{display:block;height:2.5px;border-radius:var(--r-klein);background:currentColor}
.trb-menu[open]>summary{background:var(--trb-blauw);color:#FFFFFF;border-color:var(--trb-blauw)}
.trb-oc{position:absolute;left:0;right:0;top:100%;background:var(--trb-wit);border-top:1px solid var(--trb-lijn);box-shadow:0 18px 44px rgba(11,26,51,.22);padding:18px var(--trb-rand) 24px;max-height:calc(100vh - 78px);overflow-y:auto;z-index:61}
.trb-oc ul{display:grid;gap:var(--s1);margin-bottom:var(--s4);align-content:start}
.trb-oc a{display:block;padding:var(--s3) var(--s3);border-radius:var(--r);text-decoration:none;color:var(--trb-inkt);font:700 var(--tekst-fs)/var(--lh-strak) Lato,system-ui,sans-serif}
.trb-oc a:hover{background:var(--trb-zacht);color:var(--trb-blauw)}
.trb-oc .trb-acties{margin:0}
.trb-oc .trb-knop{width:100%}
@media (max-width:1279.98px){.trb-nav{display:none}.trb-menu{display:block}}
@media (max-width:767.98px){.trb-header-in{min-height:64px;gap:var(--s2)}
  .trb-logo img{height:40px}
  .trb-header-tel span{display:none}
  .trb-header-acties>.trb-knop-geel{display:none}
}

/* ======================= 02 · broodkruimels ============================== */
.trb-kruimels{padding:0;background:var(--trb-veld);border-bottom:1px solid var(--trb-lijn)}
.trb-kruimels ol{max-width:var(--trb-breed);margin-inline:auto;padding:11px var(--trb-rand);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--bijschrift-fs);line-height:var(--lh-krap);color:var(--trb-stil)}
.trb-kruimels li{display:flex;align-items:center;gap:var(--s2)}
.trb-kruimels li+li::before{content:"\203A";color:var(--trb-lijnsterk);font-weight:700}
.trb-kruimels a{color:var(--trb-stil);text-decoration:none}
.trb-kruimels a:hover{color:var(--trb-blauw);text-decoration:underline;text-underline-offset:3px}
.trb-kruimels [aria-current]{color:var(--trb-inkt);font-weight:700}

/* ======================= 03 · hero ======================================= */
.trb-hero{color:#FFFFFF;overflow:hidden;isolation:isolate;background:#0B1A33;padding-block:var(--hero-lucht);min-height:var(--hero-min);display:flex;flex-direction:column;justify-content:center;--trb-inkt:#FFFFFF;--trb-stil:#D4E0F0;--trb-lijn:rgba(255,255,255,.24);--trb-lijnsterk:rgba(255,255,255,.5)}
/* Foto of video vult de hele hero. De poster van de video staat als
   poster-attribuut in de opmaak en is dus meteen zichtbaar; het laden van
   media/video/hero.mp4 zelf is een taak van de paginabouwer (zie verslag:
   Network Information API en prefers-reduced-motion). */
.trb-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
video.trb-hero-bg{pointer-events:none}
@media (prefers-reduced-motion:reduce){video.trb-hero-bg{display:none}}
.trb-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(6,15,34,.97) 0%,rgba(9,22,45,.93) 44%,rgba(11,26,51,.72) 100%)}
/* De twee kolommen beginnen op dezelfde hoogte. Eerder stond hier
   align-items:center; dan steekt de boekkaart boven de tekst uit zodra zij
   hoger is, en dat leest als een fout in plaats van als een keuze. */
.trb-hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:var(--vloei-3);align-items:start}
/* Een hero zonder tweede kolom houdt de tekst links, net als op elke
   andere pagina. Hier stond margin-inline:auto 0, en dat duwde de hele
   hero naar rechts; op /prijzen/ was dat goed te zien. */
.trb-hero-enkel{grid-template-columns:minmax(0,1fr);max-width:min(var(--trb-breed),900px);margin-inline:0 auto}
.trb-hero-tekst{min-width:0}
.trb-hero .trb-intro{color:#D4E0F0;max-width:54ch}
.trb-hero-usps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s5);margin-top:var(--s5);max-width:62ch}
.trb-hero-usps li{display:flex;align-items:flex-start;gap:var(--s2);min-width:0;font-size:var(--klein-fs);line-height:var(--lh-krap);font-weight:600;color:#EAF1FA}
.trb-hero-usps svg{width:19px;height:19px;flex:none;margin-top:var(--s1);color:var(--trb-geel);stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.trb-hero-bewijs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.24);font-size:var(--klein-fs);color:#D4E0F0}
.trb-hero-bewijs b{color:#FFFFFF;font-weight:700}
.trb-hero-media{min-width:0}
.trb-hero-foto img{width:100%;border-radius:var(--trb-r-g);aspect-ratio:9/7;object-fit:cover;box-shadow:0 22px 60px rgba(4,12,28,.5);border:1px solid rgba(255,255,255,.14)}
.trb-module{background:var(--trb-kaartvlak);color:var(--trb-kaartinkt);border-radius:var(--trb-r-g);padding:var(--pad-kaart);box-shadow:0 22px 60px rgba(4,12,28,.5);border:1px solid rgba(255,255,255,.2);display:flex;flex-direction:column;gap:var(--s3)}
.trb-module-kop{font:700 var(--h4-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-blauw)}
.trb-module-stappen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);counter-reset:trbm}
.trb-module-stappen li{display:flex;flex-direction:column;gap:var(--s1);min-width:0;font:700 var(--label-fs)/var(--lh-strak) Lato,system-ui,sans-serif;letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--trb-kaartstil)}
.trb-module-stappen li::before{counter-increment:trbm;content:counter(trbm);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--trb-zacht);color:var(--trb-blauw);font:700 var(--bijschrift-fs)/1 Lato,system-ui,sans-serif}
.trb-module-stappen li:first-child{color:var(--trb-blauw)}
.trb-module-stappen li:first-child::before{background:var(--trb-blauw);color:#fff}
.trb-module-veld{height:44px;border-radius:var(--r);background:var(--trb-veld);border:1.5px dashed var(--trb-lijn);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);font-size:var(--klein-fs);color:var(--trb-kaartstil)}
.trb-module-veld svg{width:18px;height:18px;color:var(--trb-blauw)}
.trb-module-twee{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.trb-module-noot{font-size:var(--eyebrow-fs);line-height:var(--lh-krap);color:var(--trb-kaartstil);margin-top:-2px}
.trb-module code{font:600 var(--label-fs)/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--trb-zacht);padding:var(--s1) var(--s1);border-radius:var(--r-klein);color:var(--trb-blauw)}
@media (max-width:1023.98px){.trb-hero{min-height:480px}
  .trb-hero-in{grid-template-columns:minmax(0,1fr)}
  .trb-hero-media{order:-1;max-width:540px}
}
@media (max-width:767.98px){.trb-hero{min-height:420px}
  .trb-hero-media{order:0;max-width:none}
}
@media (max-width:479.98px){.trb-hero-usps{grid-template-columns:minmax(0,1fr)}}

/* ======================= 04 · gele USP-balk ============================== */
.trb-quickfacts{padding:0;background:var(--trb-geel);color:#0B1A33}
.trb-quickfacts ul{max-width:var(--trb-breed);margin-inline:auto;display:grid;grid-template-columns:repeat(var(--k,4),minmax(0,1fr));padding-inline:var(--trb-rand)}
.trb-quickfacts li{display:flex;align-items:center;gap:var(--s3);min-width:0;padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid rgba(11,26,51,.24)}
.trb-quickfacts li+li{padding-left:var(--s4)}
.trb-quickfacts li:last-child{border-right:0}
.trb-quickfacts svg{width:25px;height:25px;flex:none;stroke:#0B1A33;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-quickfacts strong{display:block;font:700 var(--klein-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:#0B1A33}
.trb-quickfacts small{display:block;font-size:var(--eyebrow-fs);line-height:var(--lh-krap);color:#243C5E;margin-top:var(--s1)}
@media (max-width:1023.98px){.trb-quickfacts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trb-quickfacts li,.trb-quickfacts li+li{padding:var(--s3) var(--s4) var(--s3) 0;border-right:0;border-bottom:1px solid rgba(11,26,51,.24)}
  .trb-quickfacts li:nth-child(odd){border-right:1px solid rgba(11,26,51,.24)}
  .trb-quickfacts li:nth-child(even){padding-left:var(--s4)}
  .trb-quickfacts li:nth-last-child(-n+2):nth-child(odd),.trb-quickfacts li:last-child{border-bottom:0}
}
@media (max-width:479.98px){.trb-quickfacts ul{grid-template-columns:minmax(0,1fr)}
  .trb-quickfacts li,.trb-quickfacts li+li,.trb-quickfacts li:nth-child(odd){padding:var(--s3) 0;border-right:0;border-bottom:1px solid rgba(11,26,51,.24)}
  .trb-quickfacts li:nth-child(even){padding-left:0}
  .trb-quickfacts li:nth-last-child(-n+2):nth-child(odd){border-bottom:1px solid rgba(11,26,51,.24)}
  .trb-quickfacts li:last-child{border-bottom:0}
}

/* ======================= 05 · logo-carrousel ============================= */
.trb-logobalk{padding-block:clamp(30px,3.6vw,52px);border-bottom:1px solid var(--trb-lijn)}
.trb-logobalk-kop{text-align:center;font:700 clamp(17px,1.8vw,22px)/1.3 Lato,system-ui,sans-serif;color:var(--trb-blauw);margin:0 0 var(--s5)}
.trb-v-donker .trb-logobalk-kop,.trb-v-nacht .trb-logobalk-kop{color:#FFFFFF}
.trb-logospoor{display:flex;gap:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.trb-logospoor .trb-logobalk-rij{flex:0 0 auto;justify-content:space-around;min-width:100%;animation:trb-schuif calc(var(--n,6) * 5s) linear infinite}
.trb-logospoor:hover .trb-logobalk-rij{animation-play-state:paused}
@keyframes trb-schuif{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.trb-logobalk-rij{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--vloei-3);padding-inline:var(--vloei-1)}
.trb-logobalk-stil{flex-wrap:wrap;justify-content:center;row-gap:var(--s4)}
.trb-logobalk-rij img{max-height:46px;width:auto;object-fit:contain}
.trb-logobalk-naam{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap;font:700 var(--kaart-fs)/var(--lh-strak) Lato,system-ui,sans-serif;letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-logonaam,#2B4061)}
.trb-logobalk-naam svg{width:23px;height:23px;color:var(--trb-blauw);stroke-width:1.8}
.trb-v-donker .trb-logobalk-naam,.trb-v-nacht .trb-logobalk-naam{color:#DCE7F5}
.trb-v-donker .trb-logobalk-naam svg,.trb-v-nacht .trb-logobalk-naam svg{color:var(--trb-geel)}
@media (prefers-reduced-motion:reduce){.trb-logospoor{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .trb-logospoor .trb-logobalk-rij{animation:none}
  .trb-logospoor .trb-logobalk-rij[aria-hidden]{display:none}
}

/* ======================= 06 · dienstenraster ============================= */
.trb-diensten-in{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(0,2.22fr);gap:var(--vloei-2);align-items:start}
.trb-diensten-kop{position:sticky;top:var(--trb-kleef)}
.trb-diensten-kop .trb-titel{max-width:13ch}
.trb-dienst{display:flex;flex-direction:column;overflow:hidden;padding:0;min-width:0}
.trb-dienst>img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trb-dienst-body{display:grid;grid-template-columns:38px minmax(0,1fr) 14px;gap:var(--s3);padding:var(--s5) var(--s5) var(--s5);align-items:stretch;flex:1}
/* de middenkolom is een flexkolom, zodat "Bekijk dienst" altijd op de
   onderrand van de kaart hangt en de links in een rij op een lijn staan */
.trb-dienst-body>div{display:flex;flex-direction:column;min-width:0}
.trb-dienst-ic,.trb-dienst-pijl{align-self:start}
.trb-dienst-plat .trb-dienst-body{padding:var(--s5)}
.trb-dienst-body h3{color:var(--trb-blauw)}
.trb-dienst-body p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);margin-top:var(--s1)}
.trb-dienst-ic{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;background:var(--trb-zacht);color:var(--trb-blauw)}
.trb-dienst-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-dienst-pijl{color:var(--trb-blauw);font-weight:700;font-size:var(--h4-fs);line-height:var(--lh-strak)}
.trb-dienst-meer{display:inline-block;margin-top:auto;padding-top:var(--s3);align-self:flex-start;font:700 var(--bijschrift-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-blauw);text-decoration:underline;text-decoration-color:var(--trb-geel);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:1023.98px){.trb-diensten-in{grid-template-columns:minmax(0,1fr)}
  .trb-diensten-kop{position:static}
  .trb-diensten-kop .trb-titel{max-width:none}
}

/* ======================= 07 · populaire ritten =========================== */
.trb-route{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:var(--s4);align-items:stretch;padding:var(--s4) var(--s5)}
.trb-route>.trb-badge{align-self:center}
.trb-route-mid{align-self:center}
.trb-route-mid{min-width:0}
.trb-route-lijn{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1);font-size:var(--kaart-fs);line-height:var(--lh-krap);color:var(--trb-kaartstil)}
.trb-route-lijn b{color:var(--trb-blauw);font-weight:700}
.trb-route-pijl{width:16px;height:16px;color:var(--trb-lijnsterk)}
.trb-route-meta{font-size:var(--bijschrift-fs);color:var(--trb-kaartstil);margin-top:var(--s1);font-variant-numeric:tabular-nums}
/* de knop hangt onderaan, zodat twee kaarten naast elkaar hun knop op
   dezelfde lijn hebben, ook als de tekst erboven verschilt in lengte */
.trb-route-prijs{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);text-align:right;justify-content:flex-start}
.trb-route-prijs>.trb-knop{margin-top:auto}
.trb-route-prijs b{font:700 var(--h5-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-blauw);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Geen !important: een extra klasse in de selector wint van
   .trb-route-prijs b, dat is genoeg. */
.trb-route-prijs b.trb-route-opaanvraag{font-size:var(--klein-fs);font-weight:700;color:var(--trb-kaartstil)}
.trb-route-prijs small{font-size:var(--label-fs);color:var(--trb-kaartstil)}
@media (max-width:479.98px){.trb-route{grid-template-columns:46px minmax(0,1fr)}
  .trb-route-prijs{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding-top:var(--s3);border-top:1px solid var(--trb-kaartlijn)}
  .trb-route-prijs small{display:none}
}

/* ======================= 08 · banner 50/50 =============================== */
.trb-banner{padding:0;background:#081F40;color:#FFFFFF;overflow:hidden;--trb-inkt:#FFFFFF;--trb-stil:#CBDAEE;--trb-lijnsterk:rgba(255,255,255,.5);--trb-marge:max(var(--trb-rand),calc((100% - var(--trb-breed)) / 2))}
.trb-banner-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:400px;align-items:stretch}
.trb-banner-tekst{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(34px,4.4vw,66px);padding-left:var(--trb-marge);padding-right:var(--vloei-2)}
.trb-banner .trb-intro{color:#CBDAEE;max-width:48ch}
.trb-banner-plus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.trb-banner-plus>div{display:flex;align-items:center;gap:var(--s2);min-width:0}
.trb-banner-plus span{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--trb-geel);color:#081F40}
.trb-banner-plus svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-banner-plus strong{display:block;font:700 var(--bijschrift-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:#FFFFFF}
.trb-banner-plus small{display:block;font-size:var(--eyebrow-fs);color:#CBDAEE;line-height:var(--lh-krap)}
.trb-banner-foto img{width:100%;height:100%;min-height:400px;object-fit:cover}
.trb-banner-rev .trb-banner-tekst{order:2;padding-left:var(--vloei-2);padding-right:var(--trb-marge)}
@media (max-width:1023.98px){.trb-banner-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .trb-banner-tekst,.trb-banner-rev .trb-banner-tekst{order:2;padding-inline:var(--trb-rand);padding-block:var(--s6)}
  .trb-banner-foto img{min-height:230px;max-height:300px}
}
@media (max-width:479.98px){.trb-banner-plus{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* ======================= 09 · tekst met knoppen ========================== */
.trb-tk-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--vloei-2);align-items:stretch}
/* beide kolommen eindigen op dezelfde hoogte en hun knoppenrij staat
   onderaan, zodat de knoppen links en rechts op een lijn liggen */
.trb-tk-in>*{display:flex;flex-direction:column;min-width:0}
.trb-tk-in .trb-acties,.trb-tk-in .trb-deelrij{margin-top:auto}
.trb-tk-enkel{grid-template-columns:minmax(0,1fr)}
@media (max-width:1023.98px){.trb-tk-in{grid-template-columns:minmax(0,1fr)}}

/* ======================= 10 · deelknoppen (los blok) ===================== */
.trb-share .trb-deelrij{margin-top:0}

/* ======================= 11 · cijferbalk ================================= */
.trb-cijfer{padding:var(--s4) var(--s4);border-radius:var(--trb-r-g);min-width:0;display:flex;align-items:center;gap:var(--s3)}
.trb-cijfer b{font:900 clamp(30px,3.4vw,42px)/1 Lato,system-ui,sans-serif;letter-spacing:-.025em;font-variant-numeric:tabular-nums;flex:none}
.trb-cijfer span{font-size:var(--klein-fs);line-height:var(--lh-krap)}
.trb-cijfers-donker .trb-cijfer{background:var(--trb-diep);color:#FFFFFF}
.trb-cijfers-donker .trb-cijfer b{color:#FFFFFF}
.trb-cijfers-donker .trb-cijfer span{color:#C7D6EA}
.trb-cijfers-licht .trb-cijfer{background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);box-shadow:var(--trb-schaduw)}
.trb-cijfers-licht .trb-cijfer b{color:var(--trb-blauw)}
.trb-cijfers-licht .trb-cijfer span{color:var(--trb-kaartstil)}
.trb-cijfers-geel .trb-cijfer{background:var(--trb-geel);color:#0B1A33}
.trb-cijfers-geel .trb-cijfer b,.trb-cijfers-geel .trb-cijfer span{color:#0B1A33}

/* ======================= 12 · stappenplan ================================ */
.trb-stappen-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vloei-2);position:relative}
.trb-stappen-rij::before{content:"";position:absolute;top:23px;left:15%;right:15%;height:2px;background:repeating-linear-gradient(90deg,#A9BDD4 0 7px,transparent 7px 14px);z-index:0}
.trb-stap{position:relative;z-index:1;min-width:0}
.trb-stap-kop{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
/* Reparatie: het cijfer is een eigen rondje met een ring in de sectiekleur,zodat de verbindingslijn er onderdoor loopt en het cijfer leesbaar blijft. */
.trb-stap-n{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--trb-knopblauw,var(--trb-blauw));color:#FFFFFF;font:900 var(--h4-fs)/1 Lato,system-ui,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 0 0 7px var(--trb-ring,#FFFFFF),0 4px 14px rgba(18,58,122,.28)}
.trb-stap-ic{width:38px;height:38px;flex:none;border-radius:var(--r);display:grid;place-items:center;background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);color:var(--trb-stapinkt,var(--trb-blauw))}
.trb-stap-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-stap h3{color:var(--trb-blauw)}
.trb-stap p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:var(--trb-stil);margin-top:var(--s2)}
.trb-stap-hint{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s2);padding:var(--s1) var(--s3);border-radius:var(--trb-r-pil);background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);font:700 var(--eyebrow-fs)/var(--lh-krap) Lato,system-ui,sans-serif;color:var(--trb-stapinkt,#2E4262)}
.trb-stap-hint svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trb-v-zacht .trb-stappen-rij,.trb-vlakkaart-wit .trb-stappen-rij{--trb-ring:#FFFFFF}
.trb-vlakkaart-zacht{--trb-ring:#E8EEF8}
.trb-v-donker .trb-stap h3,.trb-v-nacht .trb-stap h3{color:var(--trb-geel)}
.trb-v-donker .trb-stap-n,.trb-v-nacht .trb-stap-n{background:var(--trb-geel);color:#0B1A33;box-shadow:0 0 0 7px rgba(255,255,255,.1),0 4px 14px rgba(0,0,0,.35)}
@media (max-width:1023.98px){.trb-stappen-rij{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .trb-stappen-rij::before{top:14px;bottom:14px;left:22px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,#A9BDD4 0 7px,transparent 7px 14px)}
  .trb-stap{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 var(--s3)}
  .trb-stap-kop{display:contents}
  .trb-stap-ic{display:none}
  .trb-stap h3,.trb-stap p,.trb-stap .trb-stap-hint{grid-column:2}
  .trb-stap h3{align-self:center;min-height:46px;display:flex;align-items:center}
}

/* ======================= 13 · tekst met beeld ============================ */
.trb-tekstbeeld-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--vloei-2);align-items:center}
.trb-tekstbeeld-tekst{min-width:0}
.trb-tekstbeeld-foto img{width:100%;border-radius:var(--trb-r-g);aspect-ratio:4/3;object-fit:cover;box-shadow:var(--trb-schaduwop)}
.trb-tekstbeeld-rev .trb-tekstbeeld-foto{order:-1}
/* foto steekt buiten de kaart: het laagjes-effect van de live site */
.trb-vlakkaart .trb-tekstbeeld-uit .trb-tekstbeeld-foto{margin:calc(-1 * var(--pad-vlak)) 0;margin-right:calc(-1 * var(--pad-vlak) - min(var(--rand-zij),24px))}
.trb-vlakkaart .trb-tekstbeeld-uit .trb-tekstbeeld-foto img{aspect-ratio:auto;height:100%;min-height:clamp(260px,32vw,420px);border-radius:0 var(--trb-r-g) var(--trb-r-g) 0}
.trb-vlakkaart .trb-tekstbeeld-uit.trb-tekstbeeld-rev .trb-tekstbeeld-foto{margin-right:0;margin-left:calc(-1 * var(--pad-vlak) - min(var(--rand-zij),24px))}
.trb-vlakkaart .trb-tekstbeeld-uit.trb-tekstbeeld-rev .trb-tekstbeeld-foto img{border-radius:var(--trb-r-g) 0 0 var(--trb-r-g)}
.trb-lijst{display:grid;gap:var(--s3);margin-top:var(--s5);align-content:start}
.trb-lijst li{display:grid;grid-template-columns:21px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:var(--kaart-fs);line-height:var(--kaart-lh)}
.trb-lijst svg{width:20px;height:20px;margin-top:var(--s1);color:var(--trb-blauw);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.trb-v-donker .trb-lijst svg,.trb-v-nacht .trb-lijst svg,.trb-v-beeld .trb-lijst svg{color:var(--trb-geel)}
.trb-vlakkaart-wit .trb-lijst svg,.trb-vlakkaart-zacht .trb-lijst svg{color:var(--trb-blauw)}
@media (max-width:1023.98px){.trb-tekstbeeld-in{grid-template-columns:minmax(0,1fr)}
  .trb-tekstbeeld-rev .trb-tekstbeeld-foto{order:0}
  .trb-vlakkaart .trb-tekstbeeld-uit .trb-tekstbeeld-foto,.trb-vlakkaart .trb-tekstbeeld-uit.trb-tekstbeeld-rev .trb-tekstbeeld-foto{margin:0}
  .trb-vlakkaart .trb-tekstbeeld-uit .trb-tekstbeeld-foto img{aspect-ratio:16/10;min-height:0;border-radius:var(--trb-r)}
}

/* ======================= 14 · wat u mag verwachten ======================= */
/* De rechterkolom heeft een eigen kicker en tussenkop boven de kaarten.
   Hoe hoog die is hangt af van de tekstlengte, dus een vaste bovenmarge
   voor de linkerkolom zou maar bij een zin kloppen. Daarom staan de twee
   kolommen optisch gecentreerd ten opzichte van elkaar. Wil de
   opdrachtgever de kop strak op de eerste kaartrij, dan moet de kicker en
   de tussenkop uit de rechterkolom naar een gedeelde kop - dat is een
   wijziging in de blokopmaak, niet in deze stylesheet. */
.trb-verwacht-in{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,1.9fr);gap:var(--vloei-2);align-items:center}
.trb-verwacht-merk img{height:60px;width:auto;margin-bottom:var(--s4)}
.trb-verwacht-merk .trb-titel{max-width:16ch}
.trb-verwacht-rechts .trb-titel-sm{margin-bottom:var(--s4);max-width:30ch}
.trb-verwacht-kaart{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#FFFFFF;box-shadow:none;padding:var(--s4)}
.trb-verwacht-kaart h3{color:var(--trb-geel)}
.trb-verwacht-kaart p{color:#CEDCEE;font-size:var(--kaart-fs);line-height:var(--kaart-lh)}
.trb-verwacht-kaart .trb-badge{background:rgba(255,255,255,.14);color:var(--trb-geel);margin-bottom:var(--s3);width:42px;height:42px}
.trb-verwacht-kaart .trb-badge::after{border-color:#152C50}
@media (max-width:1023.98px){.trb-verwacht-in{grid-template-columns:minmax(0,1fr)}}

/* ======================= 15 · usp-kaarten ================================ */
.trb-usp{display:grid;grid-template-columns:46px minmax(0,1fr);gap:var(--s3);align-items:start}
.trb-usp h3{color:var(--trb-blauw)}
.trb-usp p{margin-top:var(--s1)}

/* ======================= 16 · tekstblok met feitenkaart ================== */
/* De hoofdkolom is zo breed als de leesmaat (65ch) plus wat lucht; de
   zijkaart neemt de rest. Eerder was de hoofdkolom 892px terwijl de tekst
   erin op 561px stopte: een gat van 330px waar de bezoeker niets ziet. */
.trb-tekst-in{display:grid;grid-template-columns:minmax(0,calc(var(--lees) + 6ch)) minmax(280px,1fr);gap:var(--vloei-2);align-items:start}
.trb-tekst-enkel{grid-template-columns:minmax(0,1fr)}
.trb-tekst-main{min-width:0}
.trb-tekst-body{font-size:var(--tekst-fs);line-height:var(--tekst-lh);color:var(--trb-inkt);max-width:var(--lees)}
.trb-tekst-body>*+*{margin-top:var(--s4)}
.trb-tekst-body ul{display:grid;gap:var(--s3)}
.trb-tekst-body ul li{position:relative;padding-left:var(--s5)}
.trb-tekst-body ul li::before{content:"";position:absolute;left:0;top:.56em;width:9px;height:9px;border-radius:50%;background:var(--trb-geel);box-shadow:0 0 0 2.5px rgba(18,58,122,.32)}
.trb-tekst-body a{color:var(--trb-blauw);text-decoration:underline;text-decoration-color:var(--trb-geel);text-decoration-thickness:2px;text-underline-offset:3px}
.trb-v-donker .trb-tekst-body a,.trb-v-nacht .trb-tekst-body a{color:var(--trb-geel)}
.trb-citaat{margin:var(--s4) 0 0;padding:var(--s4) var(--s4);border-left:5px solid var(--trb-geel);background:var(--trb-zacht);border-radius:0 var(--trb-r) var(--trb-r) 0;font-size:var(--h5-fs);line-height:var(--lh-krap);font-weight:600;color:var(--trb-citaatinkt,#16305C)}
.trb-citaat p{margin:0}
.trb-citaat footer{margin-top:var(--s2);font-size:var(--bijschrift-fs);font-weight:700;color:inherit;opacity:.78}
.trb-citaat-zacht{border-left-color:#8FB3E0}
.trb-citaat-geel {border-left-color:var(--trb-geel);background:var(--trb-vbvlak,var(--trb-geelzacht));color:var(--trb-vbinkt,#3A2E00)}
.trb-citaat-blauw{border-left-color:var(--trb-blauw)}
.trb-zijkaart{padding:var(--s4) var(--s5)}
.trb-zijkaart-kleef{position:sticky;top:var(--trb-kleef)}
.trb-zijkaart-kop{font-family:var(--font-kop);font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-blauw);padding-bottom:var(--s3);border-bottom:1.5px solid var(--trb-kaartlijn)}
.trb-zijkaart dl>div{display:grid;align-content:start;grid-template-columns:22px minmax(0,1fr);gap:var(--s1) var(--s3);padding:var(--s3) 0;border-bottom:1px solid #E6ECF4}
.trb-zijkaart dl>div:last-child{border-bottom:0}
.trb-zijkaart svg{width:20px;height:20px;grid-row:span 2;margin-top:var(--s1);color:var(--trb-blauw);stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-zijkaart dt{font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--trb-kaartstil)}
.trb-zijkaart dd{font-size:var(--klein-fs);line-height:var(--lh-krap);color:var(--trb-kaartinkt);font-weight:600}
@media (max-width:1023.98px){.trb-tekst-in{grid-template-columns:minmax(0,1fr)}
  .trb-zijkaart-kleef{position:static}
}

/* ======================= 17 · uitgelicht kader =========================== */
.trb-uitgelicht .trb-citaat{margin:0;font-size:var(--h5-fs)}

/* ======================= 18 · prijstabel ================================= */
.trb-tarief{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden}
.trb-tarief-top{border-color:var(--trb-blauw);box-shadow:var(--trb-schaduwop)}
.trb-tarief-kop{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s4) var(--s4);background:var(--trb-zacht);border-bottom:1.5px solid var(--trb-kaartlijn)}
.trb-tarief-kop h3{color:var(--trb-blauw);min-width:0}
.trb-tarief-kop .trb-badge{width:40px;height:40px;background:var(--trb-kaartvlak)}
.trb-tarief-kop small{width:100%;font-size:var(--bijschrift-fs);color:var(--trb-kaartstil)}
.trb-tarief-uit{background:var(--trb-geel);color:#0B1A33;font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--trb-r-pil);margin-left:auto}
.trb-tarief dl{padding:var(--s1) var(--s4) var(--s3)}
.trb-tarief dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid #E6ECF4;flex-wrap:wrap}
.trb-tarief dl>div:last-child{border-bottom:0}
.trb-tarief dt{font-size:var(--klein-fs);color:var(--trb-kaartstil);min-width:0}
.trb-tarief dd{font:700 var(--h4-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-blauw);font-variant-numeric:tabular-nums;white-space:nowrap}
.trb-tarief .trb-tarief .trb-tarief-voet{margin-top:auto;padding:var(--s3) var(--s4);border-top:1.5px solid var(--trb-kaartlijn);background:var(--trb-veld);font-size:var(--bijschrift-fs);line-height:var(--lh-krap)}
.trb-tarief-vb{margin-top:var(--s4);padding:var(--s4) var(--s4);border-radius:var(--trb-r);border:1.5px solid var(--trb-vblijn,#8A6D00);border-left-width:5px;background:var(--trb-vbvlak,#FFF9E3);color:var(--trb-vbinkt,#30260A)}
.trb-tarief-vb strong{display:block;font:700 var(--kaart-fs)/var(--lh-strak) Lato,system-ui,sans-serif;margin-bottom:var(--s1);color:inherit}
.trb-tarief-vb p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:inherit}

/* ======================= 19 · gebiedenlijst ============================== */
.trb-gebieden-rij{display:flex;flex-wrap:wrap;gap:var(--s2)}
.trb-gebieden-rij li{min-width:0}

/* ======================= 20 · veelgestelde vragen ======================== */
.trb-faq-in{display:grid;grid-template-columns:minmax(300px,1fr) minmax(0,1.9fr);gap:var(--vloei-2);align-items:start}
.trb-faq-kop{position:sticky;top:var(--trb-kleef)}
.trb-faq-lijst{display:grid;gap:var(--s2);align-content:start}
.trb-faq-lijst details{border:1.5px solid var(--trb-kaartlijn);border-radius:var(--trb-r);background:var(--trb-kaartvlak);padding:0;margin:0;overflow:hidden}
.trb-faq-lijst details[open]{border-color:#A9BDD4;box-shadow:var(--trb-schaduw)}
.trb-faq-lijst summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s4);cursor:pointer;list-style:none;font:700 var(--kaart-fs)/var(--lh-krap) Lato,system-ui,sans-serif;color:var(--trb-blauw)}
.trb-faq-lijst summary::-webkit-details-marker{display:none}
.trb-faq-lijst summary::after{content:"";width:11px;height:11px;flex:none;position:static;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s ease;font-size:0}
.trb-faq-lijst details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.trb-faq-lijst summary:hover{background:var(--trb-veld)}
.trb-faq-a{padding:0 var(--s4) var(--s4);max-width:var(--lees)}
.trb-faq-a p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:var(--trb-kaartstil);margin:0}
.trb-faq-a p+p{margin-top:var(--s2)}
@media (max-width:1023.98px){.trb-faq-in{grid-template-columns:minmax(0,1fr)}
  .trb-faq-kop{position:static}
}

/* ======================= 21 · cases-carrousel ============================ */
.trb-case{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px;border-radius:var(--trb-r-g);overflow:hidden;background:#0F2447;padding:0;border:0;color:#FFFFFF;text-decoration:none}
.trb-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trb-case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,22,45,.1) 22%,rgba(9,22,45,.8) 60%,rgba(6,15,34,.96) 100%)}
.trb-case-body{position:relative;z-index:1;padding:var(--s4) var(--s4) var(--s4)}
.trb-case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
.trb-case-cat{background:var(--trb-geel);color:#0B1A33;font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--trb-r-pil)}
.trb-case-meta time{font-size:var(--eyebrow-fs);color:#E2EBF7}
.trb-case h3{color:#FFFFFF}
.trb-case p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:#E2EBF7;margin-top:var(--s2)}
.trb-case-meer{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s3);font:700 var(--bijschrift-fs)/1 Lato,system-ui,sans-serif;color:var(--trb-geel)}
.trb-case-meer svg{width:16px;height:16px}
a.trb-case:hover img{filter:brightness(1.1)}

/* ======================= 22 · nieuwscarrousel ============================ */
.trb-nieuws{display:flex;flex-direction:column;overflow:hidden;padding:0;min-width:0}
.trb-nieuws>img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trb-nieuws-body{padding:var(--pad-kaart);display:flex;flex-direction:column;flex:1}
.trb-nieuws-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-bottom:var(--s2);font-size:var(--eyebrow-fs);color:var(--trb-kaartstil)}
.trb-nieuws-cat{background:var(--trb-labelvlak,var(--trb-zacht));color:var(--trb-labelinkt,#16305C);font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);text-transform:uppercase;padding:var(--s1) var(--s2);border-radius:var(--trb-r-pil)}
.trb-nieuws h3{color:var(--trb-blauw)}
.trb-nieuws p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);margin-top:var(--s2)}
.trb-nieuws-meer{margin-top:auto;padding-top:var(--s3);font:700 var(--bijschrift-fs)/1 Lato,system-ui,sans-serif;color:var(--trb-blauw);text-decoration:underline;text-decoration-color:var(--trb-geel);text-decoration-thickness:2px;text-underline-offset:3px}

/* ======================= 23 · beoordelingen ============================== */
.trb-review-score{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--trb-r-g);background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);box-shadow:var(--trb-schaduw);margin-bottom:var(--s4)}
.trb-review-cijfer{font:900 var(--h3-fs)/1 Lato,system-ui,sans-serif;color:var(--trb-blauw);font-variant-numeric:tabular-nums}
.trb-review-score p{font-size:var(--klein-fs);color:var(--trb-kaartstil);margin-top:var(--s1)}
.trb-review-score strong{display:block;font-size:var(--kaart-fs);color:var(--trb-kaartinkt)}
.trb-review{display:flex;flex-direction:column;gap:var(--s2)}
.trb-review blockquote{margin:0;font-size:var(--kaart-fs);line-height:var(--kaart-lh);color:var(--trb-kaartinkt)}
.trb-review figcaption{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s3);border-top:1px solid #E6ECF4;font-size:var(--bijschrift-fs);color:var(--trb-kaartstil)}
.trb-review-avatar{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--trb-knopblauw,var(--trb-blauw));color:#FFFFFF;font:700 var(--kaart-fs)/1 Lato,system-ui,sans-serif}
.trb-review figcaption b{color:var(--trb-kaartinkt);display:block}

/* ======================= 24 · kaartenraster ============================== */
.trb-tegel{display:flex;flex-direction:column;min-width:0;padding:0;overflow:hidden}
.trb-tegel>img{width:100%;aspect-ratio:3/2;object-fit:cover}
.trb-tegel-body{padding:var(--pad-kaart);display:flex;flex-direction:column;flex:1;align-items:flex-start}
.trb-tegel .trb-badge{margin-bottom:var(--s3)}
.trb-tegel h3{color:var(--trb-blauw)}
.trb-tegel .trb-tegel-label{font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);text-transform:uppercase;color:var(--trb-labelinkt,#16305C);background:var(--trb-labelvlak,var(--trb-zacht));padding:var(--s1) var(--s2);border-radius:var(--trb-r-pil);margin:0 0 var(--s3)}
.trb-tegel .trb-tegel-prijs{font:700 var(--h5-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-blauw);margin-top:var(--s3);font-variant-numeric:tabular-nums}
.trb-tegel-meer{margin-top:auto;padding-top:var(--s3);font:700 var(--bijschrift-fs)/1 Lato,system-ui,sans-serif;color:var(--trb-blauw);text-decoration:underline;text-decoration-color:var(--trb-geel);text-decoration-thickness:2px;text-underline-offset:3px}

/* ======================= 25 · cta-banner ================================= */
.trb-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6)}
.trb-cta-in>div:first-child{min-width:0;flex:1 1 400px}
.trb-cta .trb-intro{margin-top:var(--s2)}
.trb-cta .trb-acties{margin:0;flex:0 1 auto}
.trb-cta-geel{background:var(--trb-geel);color:#0B1A33;--trb-inkt:#0B1A33;--trb-stil:#2B4166;--trb-lijnsterk:rgba(11,26,51,.45)}
.trb-cta-geel .trb-kicker{color:#0B1A33}
.trb-cta-geel .trb-kicker::before{background:#0B1A33}
.trb-cta-geel .trb-knop-rand{color:#0B1A33;border-color:rgba(11,26,51,.5)}
.trb-cta-beeld{color:#FFFFFF;overflow:hidden;isolation:isolate;background:#0B1A33;--trb-inkt:#FFFFFF;--trb-stil:#D4E0F0;--trb-lijnsterk:rgba(255,255,255,.5)}
.trb-cta-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.trb-cta-beeld::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(92deg,rgba(6,15,34,.94) 0%,rgba(9,22,45,.84) 42%,rgba(11,26,51,.42) 100%)}
.trb-cta{padding-block:clamp(40px,4.6vw,66px)}

/* ======================= 26 · gerelateerde links ========================= */
.trb-gerel-rij a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s4) var(--s4);border-radius:var(--trb-r);background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);text-decoration:none;color:var(--trb-kaartinkt);transition:border-color .16s ease,box-shadow .16s ease}
.trb-gerel-rij a:hover{border-color:var(--trb-blauw);box-shadow:var(--trb-schaduw)}
.trb-gerel-rij strong{display:block;font:700 var(--kaart-fs)/var(--lh-krap) Lato,system-ui,sans-serif;color:var(--trb-blauw)}
.trb-gerel-rij small{display:block;font-size:var(--bijschrift-fs);color:var(--trb-kaartstil);margin-top:var(--s1)}
.trb-gerel-pijl{color:var(--trb-blauw);font-weight:700;font-size:var(--h4-fs)}

/* ======================= 27 · contactgegevens ============================ */
.trb-contact-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--vloei-2);align-items:start}
.trb-contact-lijst{display:grid;gap:var(--s2);margin-top:var(--s5);font-style:normal;
  align-content:start}
.trb-contact-lijst a,.trb-contact-lijst div{display:grid;grid-template-columns:42px minmax(0,1fr);gap:var(--s3);align-items:center;padding:var(--s3) var(--s3);border-radius:var(--trb-r);background:var(--trb-veld);border:1.5px solid var(--trb-lijn);text-decoration:none;color:var(--trb-inkt)}
.trb-contact-lijst a:hover{border-color:var(--trb-blauw);background:var(--trb-wit)}
.trb-contact-lijst .trb-badge{width:42px;height:42px;background:var(--trb-wit)}
.trb-contact-lijst .trb-badge::after{border-color:var(--trb-veld)}
.trb-contact-lijst b{display:block;font:700 var(--kaart-fs)/var(--lh-krap) Lato,system-ui,sans-serif;overflow-wrap:break-word}
.trb-contact-lijst small{display:block;font-size:var(--bijschrift-fs);color:var(--trb-stil);margin-top:var(--s1)}
/* kaart laadt pas na een klik: geen externe verbinding en geen cookie vooraf */
.trb-kaartvlak{min-height:var(--h,360px);border-radius:var(--trb-r-g);overflow:hidden;border:1.5px solid var(--trb-lijn);background:var(--trb-zacht);background-image:linear-gradient(0deg,rgba(18,58,122,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(18,58,122,.08) 1px,transparent 1px);background-size:34px 34px;display:grid;padding:0}
.trb-kaartvlak>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);text-align:center;padding:var(--s5);min-height:var(--h,360px);cursor:pointer;list-style:none;color:var(--trb-inkt)}
.trb-kaartvlak>summary::-webkit-details-marker{display:none}
.trb-kaartvlak>summary::after{content:none}
.trb-kaartvlak>summary b{font:700 var(--kaart-fs)/var(--lh-krap) Lato,system-ui,sans-serif;max-width:34ch}
.trb-kaartvlak>summary small{font-size:var(--bijschrift-fs);line-height:var(--lh-krap);color:var(--trb-stil);max-width:40ch}
.trb-kaartvlak[open]>summary{min-height:0;padding:var(--s3) var(--s4);flex-direction:row;flex-wrap:wrap;background:var(--trb-wit);border-bottom:1.5px solid var(--trb-lijn)}
.trb-kaartvlak[open]>summary .trb-badge{display:none}
.trb-kaartvlak iframe{width:100%;height:var(--h,360px);border:0;display:block}
@media (max-width:1023.98px){.trb-contact-in{grid-template-columns:minmax(0,1fr)}}

/* ======================= 28 · zwevende reserveertab ====================== */
.trb-zijtab{position:fixed;top:50%;z-index:55;padding:0;background:none}
.trb-zijtab-rechts{right:0;transform:translateY(-50%)}
.trb-zijtab-links {left:0;transform:translateY(-50%)}
.trb-zijtab-knop{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--trb-geel);color:#0B1A33;text-decoration:none;font:700 var(--bijschrift-fs)/1 Lato,system-ui,sans-serif;white-space:nowrap;box-shadow:-6px 0 20px rgba(11,26,51,.22)}
.trb-zijtab-knop svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trb-zijtab-rechts .trb-zijtab-knop{transform-origin:100% 100%;transform:rotate(-90deg) translateX(-50%);border-radius:var(--trb-r) var(--trb-r) 0 0}
.trb-zijtab-links .trb-zijtab-knop{transform-origin:0 100%;transform:rotate(90deg) translateX(-50%);border-radius:var(--trb-r) var(--trb-r) 0 0}
@media (max-width:1023.98px){.trb-zijtab{display:none}}
@media (pointer:coarse){.trb-zijtab{display:none}}

/* ======================= 29 · voettekst ================================== */
.trb-footer{background:linear-gradient(180deg,#0F2447 0%,#0B1A33 58%,#071226 100%);color:#FFFFFF;padding-block:clamp(46px,5.4vw,78px) 26px;--trb-inkt:#FFFFFF;--trb-stil:#C7D6EA}
.trb-footer-grid{display:grid;grid-template-columns:1.6fr repeat(var(--k,4),minmax(0,1fr));gap:var(--s6) var(--s5);align-items:start}
.trb-footer-merk img{height:56px;width:auto;object-fit:contain}
.trb-footer-merk p{margin-top:var(--s3);font-size:var(--klein-fs);line-height:var(--kaart-lh);color:#C7D6EA;max-width:40ch}
.trb-footer-merk .trb-acties{margin-top:var(--s4)}
.trb-footer h3{font-family:var(--font-kop);font-size:var(--eyebrow-fs);line-height:var(--eyebrow-lh);font-weight:var(--eyebrow-fw);letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-geel);padding-bottom:var(--s2);border-bottom:1px solid rgba(255,255,255,.2);margin-bottom:var(--s3)}
/* De items beginnen bovenaan met een vaste tussenruimte. Zonder
   align-content:start rekt de lijst mee met de langste kolom ernaast en
   staan vier links uitgesmeerd over de hoogte van acht. */
.trb-footer-kolom ul{display:grid;gap:var(--s1);align-content:start}
.trb-footer-kolom a{display:block;padding:var(--s1) 0;font-size:var(--klein-fs);line-height:var(--lh-krap);color:#DCE7F5;text-decoration:none}
.trb-footer-kolom a:hover{color:var(--trb-geel);text-decoration:underline;text-underline-offset:3px}
.trb-footer-contact{margin-top:clamp(26px,3vw,40px);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.18)}
.trb-footer-contact h3{border:0;padding:0;margin-bottom:var(--s3)}
.trb-footer-contact address{font-style:normal;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);font-size:var(--klein-fs);color:#DCE7F5}
.trb-footer-contact address>div{display:flex;align-items:center;gap:var(--s2);min-width:0}
.trb-footer-contact svg{width:18px;height:18px;flex:none;color:var(--trb-geel);stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-footer-contact a{color:#DCE7F5;text-decoration:none;overflow-wrap:break-word}
.trb-footer-contact a:hover{color:var(--trb-geel);text-decoration:underline}
.trb-footer-sociaal{display:flex;gap:var(--s2);margin-top:var(--s4)}
.trb-footer-sociaal a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#FFFFFF}
.trb-footer-sociaal a:hover{background:var(--trb-geel);color:#0B1A33}
.trb-footer-sociaal svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-footer-onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5);margin-top:clamp(26px,3.4vw,44px);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.2);font-size:var(--bijschrift-fs);color:#C7D6EA}
.trb-footer-onder nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.trb-footer-onder a{color:#C7D6EA;font-size:var(--bijschrift-fs);text-decoration:none}
.trb-footer-onder a:hover{color:var(--trb-geel);text-decoration:underline}
.trb-footer-betaal{display:flex;flex-wrap:wrap;gap:var(--s2)}
.trb-footer-betaal span{padding:var(--s1) var(--s3);border-radius:var(--r-klein);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);font-family:var(--font-kop);font-size:var(--label-fs);line-height:var(--label-lh);font-weight:var(--label-fw);letter-spacing:var(--label-ls);color:#FFFFFF}
.trb-footer-slot{display:flex;justify-content:center;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12)}
.trb-footer-slot img{height:52px;width:auto;opacity:.85}
@media (max-width:1279.98px){.trb-footer-grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
  .trb-footer-merk{grid-column:1/-1}
  .trb-footer-merk p{max-width:56ch}
}
@media (max-width:767.98px){.trb-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.trb-footer-grid{grid-template-columns:minmax(0,1fr)}}



/* ==========================================================================
   3B - MEGAMENU EN GOOGLE-RECENSIES
   Overgenomen uit het <style>-blok in templates/blok-voorbeeld.html, waar de
   paginabouwer het had klaargezet met de notitie "VOORSTEL VOOR
   assets/tr.css". Twee componenten die nog niet in de bibliotheek zaten en
   waarvan de opmaak anders alleen op de proefpagina zou werken.
   Overgenomen met de maten op de schaal uit paragraaf 0; inhoudelijk
   ongewijzigd, behalve de kleuren die nu uit tokens komen zodat ze ook in
   donkere modus kloppen.
   ========================================================================== */
/* ======================= 02 · megamenu =================================== */
/* Hoort in assets/tr.css, direct achter blok 01 (kopbalk).
   Het paneel staat bewust IN de tekststroom en niet absoluut over de pagina
   heen: tr-megamenu is een eigen blok onder de kopbalk, en een absoluut
   paneel zou buiten de begrenzing van het blok vallen en in de Studio over
   het volgende blok heen hangen. Daardoor is er ook geen z-index nodig en
   loopt het paneel op een telefoon nergens buiten beeld. */
.trb-mega{padding:0;background:var(--trb-wit);border-bottom:1px solid var(--trb-lijn)}
.trb-mega-d{border:0;margin:0;padding:0;background:none}
/* De zijmarge valt buiten de inhoudsbreedte, net als bij .trb + .trb-in:
   `max-width:var(--trb-breed)` met padding erbinnen maakt de kolom 2x de
   zijmarge te smal. Dat is precies waar .trb-header-in nu nog in zit; zie de
   correctie onderaan. */
.trb-mega-knop{max-width:calc(var(--trb-breed) + 2 * var(--trb-rand));
  margin-inline:auto;display:flex;align-items:center;
  gap:var(--s2);min-height:52px;padding:0 var(--trb-rand);cursor:pointer;list-style:none;
  font:700 var(--klein-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-inkt)}
.trb-mega-knop::-webkit-details-marker{display:none}
.trb-mega-knop::after{content:none}
.trb-mega-knop:hover{color:var(--trb-blauw)}
.trb-mega-pijl{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.trb-mega-d[open]>.trb-mega-knop{color:var(--trb-blauw);box-shadow:inset 0 -3px 0 var(--trb-geel)}
.trb-mega-d[open] .trb-mega-pijl{transform:rotate(180deg)}

.trb-mega-paneel{background:var(--trb-wit);border-top:1px solid var(--trb-lijn);
  box-shadow:0 22px 44px -28px rgba(11,26,51,.45)}
.trb-mega-in{max-width:calc(var(--trb-breed) + 2 * var(--trb-rand));margin-inline:auto;
  padding:var(--pad-vlak) var(--trb-rand) var(--pad-vlak);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,284px);
  gap:var(--vloei-2);align-items:start}
.trb-mega-kolom{min-width:0}
.trb-mega .trb-mega-eyebrow{margin:0 0 var(--s3);font:700 var(--eyebrow-fs)/var(--lh-strak) Lato,system-ui,sans-serif;
  letter-spacing:var(--eyebrow-ls);text-transform:uppercase;color:var(--trb-stil)}
/* LET OP bij het overnemen: assets/tr.css bevat op regel 639 en 647
   `.trb p{margin:0;color:inherit}` en `.trb ul,...{margin:0;padding:0}`.
   Die element-selectors wegen zwaarder dan een losse klasse, dus elke
   regel hieronder die margin, padding of color op een <p> of <ul> zet,
   heeft de ouderklasse .trb-mega ervoor nodig. Zonder die ouderklasse
   wordt de grijze eyebrow zwart en de lichtblauwe actietekst wit. */
/* De dunne lijnen tussen kolommen en rijen zijn randen op de cellen zelf.
   Het raster schuift zijn buitenste randen 1px buiten het vak, dat ze afknipt.
   Zo klopt het bij 2, 3 of 4 kolommen en krijgt een lege plek in de laatste
   rij geen lijn. */
.trb-mega-vak{overflow:hidden}
/* De marge moet .trb ul,.trb ol{margin:0} op regel 647 verslaan; vandaar de
   ouderklasse ervoor in plaats van !important. */
.trb-mega .trb-mega-rooster{display:grid;
  grid-template-columns:repeat(var(--k,3),minmax(0,1fr));margin:0 -1px -1px 0;padding:0}
.trb-mega-rooster>li{min-width:0;border-right:1px solid var(--trb-lijn);
  border-bottom:1px solid var(--trb-lijn)}
.trb-mega-rooster a,.trb-mega-item{display:flex;align-items:center;gap:var(--s3);height:100%;
  padding:var(--s3) var(--s4) var(--s3) var(--s1);text-decoration:none;color:var(--trb-inkt);min-width:0}
/* Het gele stipje van .trb-badge is een accent voor kaarten; in een menurij
   met negen pictogrammen naast elkaar wordt het ruis. */
.trb-mega-rooster .trb-badge::after{content:none}
.trb-mega-rooster a{border-radius:var(--r)}
.trb-mega-rooster a:hover{background:var(--trb-veld)}
.trb-mega-rooster a:hover b{color:var(--trb-blauw)}
.trb-mega-rooster .trb-badge{width:38px;height:38px;border-radius:var(--r-klein)}
.trb-mega-rooster .trb-badge svg{width:20px;height:20px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trb-mega-tekst{min-width:0}
.trb-mega-tekst b{display:block;font:700 var(--kaart-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-inkt)}
.trb-mega-tekst small{display:block;margin-top:var(--s1);font-size:var(--bijschrift-fs);line-height:var(--lh-krap);
  color:var(--trb-stil)}

.trb-mega-actie{background:var(--trb-donkervlak,#123A7A);color:#FFFFFF;border-radius:var(--trb-r-g);
  padding:var(--pad-kaart);display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--s3)}
.trb-mega .trb-mega-actiekop{margin:0;
  font:700 clamp(20px,1.7vw,25px)/1.16 Lato,system-ui,sans-serif;
  color:#FFFFFF;text-wrap:balance}
.trb-mega .trb-mega-actietekst{margin:0;font-size:var(--klein-fs);line-height:var(--lh-krap);color:#DCE7F5}
.trb-mega-actie .trb-knop{width:100%}

/* De ouderklasse staat er ook hier voor: zonder die klasse verliezen deze
   regels van de basisregel hierboven, hoe smal het scherm ook is. */
@media (max-width:1023.98px){
  .trb-mega-in{grid-template-columns:minmax(0,1fr)}
  .trb-mega .trb-mega-rooster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .trb-mega-knop{min-height:48px}
  .trb-mega .trb-mega-rooster{grid-template-columns:minmax(0,1fr);margin-right:0}
  .trb-mega-rooster>li{border-right:0}
  .trb-mega-rooster a,.trb-mega-item{padding:var(--s3) var(--s1)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .trb-mega-actie{background:#16263A;
    border:1px solid #2B3F57}
}
[data-theme="dark"] .trb-mega-actie{background:#16263A;border:1px solid #2B3F57}

/* ======================= 25 · google-beoordelingen ======================= */
/* Links een vast blok dat niet meeschuift, rechts de veegrij. Op mobiel komt
   het vaste blok erboven.
   LET OP bij het overnemen: `.trb p{margin:0;color:inherit}` op regel 639 van
   assets/tr.css weegt zwaarder dan een losse klasse. Elke regel hieronder die
   margin of color op een <p> zet heeft daarom .trb-grev ervoor staan. */
.trb-grev-in{display:grid;grid-template-columns:minmax(0,276px) minmax(0,1fr);
  gap:var(--vloei-2);align-items:start;margin-top:var(--s5,24px)}
.trb-grev-breed,.trb-grev-alleen{grid-template-columns:minmax(0,1fr)}
.trb-grev-alleen{max-width:420px}
.trb-grev-rij{min-width:0}

.trb-grev-vast{background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);
  border-radius:var(--trb-r-g);padding:var(--pad-kaart);
  box-shadow:0 1px 2px rgba(11,26,51,.06),0 8px 28px rgba(18,58,122,.08);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);color:var(--trb-kaartinkt)}
.trb-grev .trb-grev-merk{display:flex;align-items:center;gap:var(--s2);margin:0;
  font:700 var(--kaart-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-kaartinkt)}
.trb-gmerk{width:20px;height:20px;flex:none}
.trb-grev .trb-grev-cijfer{margin:0;font:900 clamp(34px,3.4vw,44px)/1 Lato,system-ui,sans-serif;
  color:var(--trb-kaartinkt)}
.trb-grev .trb-grev-aantal{margin:0;font-size:var(--klein-fs);line-height:var(--lh-krap);color:var(--trb-kaartstil)}
.trb-grev-link{margin-top:var(--s1);font:700 var(--klein-fs)/var(--lh-krap) Lato,system-ui,sans-serif;
  color:var(--trb-blauw);text-decoration:underline;text-underline-offset:3px}

/* Sterren: dezelfde gouden tint als .trb-sterren, want #FBBC04 van Google
   haalt 1,76:1 op wit. De baseline-uitlijning komt van vertical-align op de
   svg zelf, niet van de regelhoogte van de ouder. */
.trb-gster{display:inline-flex;align-items:center;gap:var(--s1);line-height:0}
.trb-gster svg{width:19px;height:19px;flex:none;overflow:visible;vertical-align:-3px}
.trb-gster-vol path{fill:var(--trb-ster,#8A6200);stroke:none}
.trb-gster-leeg path{fill:var(--trb-lijn);stroke:none}
.trb-v-donker .trb-gster-vol path,.trb-v-nacht .trb-gster-vol path,
.trb-v-beeld .trb-gster-vol path{fill:var(--trb-geel)}
.trb-v-donker .trb-gster-leeg path,.trb-v-nacht .trb-gster-leeg path{fill:rgba(255,255,255,.3)}

/* Kaarten. Alle kaarten even hoog: .trb-spoor is een grid met één rij, dus de
   items rekken vanzelf mee met de hoogste. De kaart is een flexkolom en de
   voet met naam en datum wordt met margin-top:auto naar onderen geduwd, zodat
   een korte review niet boven in de kaart blijft hangen. De reviewtekst zelf
   is afgekapt op --r regels; daardoor kan één lange review de hele rij niet
   oprekken. */
.trb-grev-kaart{background:var(--trb-kaartvlak);border:1.5px solid var(--trb-kaartlijn);
  border-radius:var(--trb-r-g);padding:var(--pad-kaart);
  box-shadow:0 1px 2px rgba(11,26,51,.06),0 8px 28px rgba(18,58,122,.08);
  display:flex;flex-direction:column;gap:var(--s2);min-width:0;height:100%;
  color:var(--trb-kaartinkt);transition:box-shadow .18s ease,border-color .18s ease}
.trb-grev-kaart:hover{box-shadow:0 2px 6px rgba(11,26,51,.09),0 18px 46px rgba(18,58,122,.17);
  border-color:var(--trb-lijnsterk)}
.trb-grev-tekst{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--r,7);
  line-clamp:var(--r,7);overflow:hidden}
.trb-grev-kaart .trb-grev-tekst p{font-size:var(--kaart-fs);line-height:var(--kaart-lh);
  color:var(--trb-kaartinkt)}
.trb-grev-meer{font:700 var(--bijschrift-fs)/var(--lh-krap) Lato,system-ui,sans-serif;color:var(--trb-blauw);
  text-decoration:underline;text-underline-offset:3px}
.trb-grev-reactie{border-left:3px solid var(--trb-lijn);padding:var(--s1) 0 var(--s1) var(--s3);
  margin-left:2px}
.trb-grev-reactie b{display:block;font:700 var(--eyebrow-fs)/var(--lh-strak) Lato,system-ui,sans-serif;
  color:var(--trb-blauw);margin-bottom:var(--s1)}
.trb-grev-kaart .trb-grev-reactie p{font-size:var(--bijschrift-fs);line-height:var(--lh-krap);color:var(--trb-kaartstil)}
/* background, color, padding en margin moeten hier expliciet terug: de
   stylesheet heeft op regel 464 een kale `footer{background:...;padding:...}`
   voor de paginavoet, en die raakt ook een <footer> binnen een kaart. Zonder
   deze regel krijgt de naam-en-datumbalk een donkerblauw vlak. */
.trb-grev-wie{margin:auto 0 0;padding:var(--s3) 0 0;background:none;color:inherit;
  border-top:1px solid var(--trb-lijn);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3)}
.trb-grev-wie b{font:700 var(--klein-fs)/var(--lh-strak) Lato,system-ui,sans-serif;color:var(--trb-kaartinkt)}
.trb-grev-wie time{font-size:var(--bijschrift-fs);line-height:var(--lh-krap);color:var(--trb-kaartstil)}

.trb-grev-raster{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:var(--s4)}

@media (max-width:1023.98px){
  .trb-grev-in{grid-template-columns:minmax(0,1fr)}
  .trb-grev-vast{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4)}
  .trb-grev-cijfer{font-size:var(--h3-fs)}
  .trb-grev-link{margin-top:0;margin-left:auto}
  .trb-grev-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .trb-grev-raster{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .trb-gster-leeg path{fill:#2B3F57}
}
[data-theme="dark"] .trb-gster-leeg path{fill:#2B3F57}

/* ---- derde correctie: de veegrijen zijn op mobiel te smal ----------------
   assets/tr.css zet `.trb-spoor{--z:2.1}` onder 1024px en `--z:1.12` onder
   768px, maar de blokken schrijven `--z` als inline stijl op het element
   (`style="--z:4"`), en inline wint altijd van een stylesheet. Daardoor staan
   op een telefoon van 390px vier cases-kaarten van 78px naast elkaar in
   plaats van er een met een stukje van de volgende. Dit raakt tr-cases,
   tr-nieuws en tr-google-reviews allemaal.
   Deze twee regels zetten dat recht; !important is hier het enige middel dat
   van een inline stijl wint. Mooier is de inline waarde `--zb` te noemen en
   in de stylesheet `.trb-spoor{--z:var(--zb,3)}` te zetten, want dan is er
   geen !important nodig; dat vraagt een wijziging in beide bestanden
   tegelijk en staat in het verslag.
   -------------------------------------------------------------------------- */
@media (max-width:1023.98px){.trb-spoor{--z:2.1!important}}
@media (max-width:767.98px) {.trb-spoor{--z:1.12!important}}

/* ---- correctie op een bestaande regel, geen nieuw blok -------------------
   assets/tr.css regel 889 zet op .trb-hero-enkel `margin-inline:auto 0`.
   Dat is marge LINKS automatisch en rechts nul, dus de smalle kolom wordt
   naar de rechterrand geduwd en de linkermarge van de pagina blijft leeg.
   .trb-hero-enkel komt alleen voor bij de hero-variant met een lege
   rechterkolom (media="geen"); die variant stond nog nergens op de site, dus
   is het niemand opgevallen. Hij hoort links uit te lijnen met de rest van
   de pagina. Deze regel staat hier alleen zolang de eigenaar van
   assets/tr.css hem nog niet heeft overgenomen.
   -------------------------------------------------------------------------- */
.trb-hero-enkel{margin-inline:0 auto}

/* ---- tweede correctie op een bestaande regel ----------------------------
   assets/tr.css regel 827 geeft .trb-header-in `max-width:var(--trb-breed)`
   met `padding:10px var(--trb-rand)` erbinnen. De zijmarge gaat daardoor van
   de inhoudsbreedte af in plaats van eromheen. Onder 1920px valt dat niet op
   omdat de max-width daar toch niet knelt, maar op 1920px staat het logo op
   280px terwijl de hero en alle inhoudsblokken op 240px beginnen. De
   opmerking boven de token --trb-breed zegt dat juist die linkerranden op
   een lijn moeten liggen. Het megamenu hierboven rekent al goed; met deze
   regel doet de kopbalk mee.
   -------------------------------------------------------------------------- */
.trb-header-in{max-width:calc(var(--trb-breed) + 2 * var(--trb-rand))}

/* ==========================================================================
   4 - SLIM KAARTENRASTER
   "alle card grids smart, dat je ze kunt instellen en dat oneven rijen
   uitgevuld kunnen worden" - 5 kaarten in 3 kolommen wordt 3+2 over de volle
   breedte, 7 in 4 wordt 4+3.

   Waarom flexbox en geen grid: grid legt de kolombreedte vast voor het hele
   raster, dus houdt de laatste rij een gat rechts. Flexbox lost het met twee
   eigenschappen op. Elke kaart krijgt flex-basis (100% - (k-1)*gap)/k, dus
   een volle rij telt exact k kaarten en houdt niets over; de laatste rij
   houdt wel ruimte over en flex-grow:1 verdeelt die gelijk. De kaarten in
   die rij worden daarmee exact even breed, de tussenruimte blijft overal
   gelijk, en align-items:stretch maakt ze even hoog.

   De bovengrens: blijft er precies EEN kaart over, dan houdt die de breedte
   van een gewone kolom en staat hij links, in de kolom waar het oog hem
   verwacht - niet gecentreerd, want dan valt hij juist op als fout, en niet
   uitgerekt, want dan trekt de foto erin uit verhouding. Twee of meer
   overgebleven kaarten vullen samen de volle breedte. Zo'n alleenstaande
   kaart herken je aan :last-child:nth-child(kn+1).

   Kolommen per breekpunt: >=1280 k, 1024-1279 hoogstens 3, 768-1023
   hoogstens 2, daaronder 1. Het ingestelde aantal komt uit de inline
   eigenschap --k die de blokkenrenderer al schrijft (style="--k:3").
   .trb-rij-links zet het uitvullen uit en lijnt links uit, voor de beheerder
   die liever een gat rechts heeft dan twee brede kaarten.

   De -.02px is opzet: zonder die marge kan k*basis + (k-1)*gap door
   afronding een fractie boven 100% uitkomen en wipt de laatste kaart van een
   volle rij naar de volgende regel. flex-grow geeft het meteen terug.
   ========================================================================== */

.trb-raster,.trb-diensten-rij,.trb-cijfers-rij,.trb-routes-rij,.trb-tarief-rij,.trb-gerel-rij,.trb-rij{--rg-gap:var(--s4);--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px);display:flex;flex-wrap:wrap;
gap:var(--rg-gap);align-items:stretch;justify-content:flex-start;margin:0;padding:0;list-style:none}
.trb-raster>*,.trb-diensten-rij>*,.trb-cijfers-rij>*,.trb-routes-rij>*,.trb-tarief-rij>*,.trb-gerel-rij>*,.trb-rij>*{flex:1 1 var(--rg-basis);min-width:0;max-width:100%;margin:0}
.trb-raster>:only-child,.trb-diensten-rij>:only-child,.trb-cijfers-rij>:only-child,.trb-routes-rij>:only-child,.trb-tarief-rij>:only-child,.trb-gerel-rij>:only-child,.trb-rij>:only-child{max-width:100%}
.trb-rij-links{justify-content:flex-start}
.trb-rij-links>*{flex-grow:0;max-width:var(--rg-basis)}
@media (min-width:1280px){
.trb-routes-rij,.trb-tarief-rij,.trb-gerel-rij{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
.trb-raster,.trb-diensten-rij,.trb-rij{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
.trb-cijfers-rij{--rg-basis:calc((100% - 3*var(--rg-gap))/4 - .02px)}
[style*="--k:1"]{--rg-basis:100%}
[style*="--k:2"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:3"]{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
[style*="--k:4"]{--rg-basis:calc((100% - 3*var(--rg-gap))/4 - .02px)}
[style*="--k:5"]{--rg-basis:calc((100% - 4*var(--rg-gap))/5 - .02px)}
[style*="--k:6"]{--rg-basis:calc((100% - 5*var(--rg-gap))/6 - .02px)}
.trb-raster:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-diensten-rij:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-cijfers-rij:not([style*="--k:"])>:last-child:nth-child(4n+1){max-width:var(--rg-basis)}
.trb-routes-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-tarief-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-gerel-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-rij:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:2"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:3"]>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:4"]>:last-child:nth-child(4n+1){max-width:var(--rg-basis)}
[style*="--k:5"]>:last-child:nth-child(5n+1){max-width:var(--rg-basis)}
[style*="--k:6"]>:last-child:nth-child(6n+1){max-width:var(--rg-basis)}
.trb-rij-links>:last-child{max-width:var(--rg-basis)}
}
@media (min-width:1024px) and (max-width:1279.98px){
.trb-routes-rij,.trb-tarief-rij,.trb-gerel-rij{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
.trb-raster,.trb-diensten-rij,.trb-cijfers-rij,.trb-rij{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
[style*="--k:1"]{--rg-basis:100%}
[style*="--k:2"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:3"]{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
[style*="--k:4"]{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
[style*="--k:5"]{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
[style*="--k:6"]{--rg-basis:calc((100% - 2*var(--rg-gap))/3 - .02px)}
.trb-raster:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-diensten-rij:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-cijfers-rij:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-routes-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-tarief-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-gerel-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-rij:not([style*="--k:"])>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:2"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:3"]>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:4"]>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:5"]>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
[style*="--k:6"]>:last-child:nth-child(3n+1){max-width:var(--rg-basis)}
.trb-rij-links>:last-child{max-width:var(--rg-basis)}
}
@media (min-width:768px) and (max-width:1023.98px){
.trb-raster,.trb-diensten-rij,.trb-cijfers-rij,.trb-routes-rij,.trb-tarief-rij,.trb-gerel-rij,.trb-rij{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:1"]{--rg-basis:100%}
[style*="--k:2"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:3"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:4"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:5"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
[style*="--k:6"]{--rg-basis:calc((100% - 1*var(--rg-gap))/2 - .02px)}
.trb-raster:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-diensten-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-cijfers-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-routes-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-tarief-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-gerel-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-rij:not([style*="--k:"])>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:2"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:3"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:4"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:5"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
[style*="--k:6"]>:last-child:nth-child(2n+1){max-width:var(--rg-basis)}
.trb-rij-links>:last-child{max-width:var(--rg-basis)}
}
@media (max-width:767.98px){
.trb-raster,.trb-diensten-rij,.trb-cijfers-rij,.trb-routes-rij,.trb-tarief-rij,.trb-gerel-rij,.trb-rij{--rg-basis:100%}
.trb-raster>*,.trb-diensten-rij>*,.trb-cijfers-rij>*,.trb-routes-rij>*,.trb-tarief-rij>*,.trb-gerel-rij>*,.trb-rij>*{max-width:100%;flex-grow:1}
}

/* .raster kent geen vast aantal kolommen: de browser legt er zoveel naast
   elkaar als passen bij --raster-min. De CSS kan dan niet weten of de laatste
   kaart alleen staat, dus dit raster krijgt geen bovengrens; elke rij wordt
   wel volledig uitgevuld. */
.raster{--raster-min:246px;--rg-gap:var(--s4);display:flex;flex-wrap:wrap;gap:var(--rg-gap);align-items:stretch;margin:0;padding:0;list-style:none}
.raster>*{flex:1 1 var(--raster-min);min-width:0;margin:0}
@media (max-width:767.98px){.raster{--raster-min:100%}}


/* ==========================================================================
   5 - MOTION
   --------------------------------------------------------------------------
   Drie soorten beweging, verder niets:
     1. fade-in als een sectie of een kaart in beeld scrollt;
     2. hover op kaarten, knoppen en links;
     3. de logo-carrousel (die staat bij blok 05).

   Alle overgangen duren 150 tot 250 ms en gebruiken dezelfde easing,
   cubic-bezier(.2,.7,.2,1). Dat is de easing die de live site al hanteert:
   snel op gang, zacht uit. Geen enkele overgang gebruikt `all`, want dan
   animeert ook layout en krijg je de schokkerige sprongen.

   De fade-in gaat met scroll-driven animations (animation-timeline: view()),
   niet met een JavaScript-bibliotheek en niet met IntersectionObserver.
   Reden: zonder JavaScript is er niets dat kan falen, en de browser kan de
   animatie op de compositor afhandelen. In browsers die het nog niet kennen
   gebeurt er niets en staat alles gewoon zichtbaar op de pagina - dat is de
   terugval, en die is precies goed: een fade-in is versiering, geen inhoud.
   Daarom staat de regel in @supports en niet andersom.
   ========================================================================== */

@keyframes tr-opkomst{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}
@keyframes tr-opkomst-zacht{
  from{opacity:0}
  to  {opacity:1}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* secties komen op als ze het beeld binnenkomen */
    .trb>.trb-in,
    .trb>.trb-vlakkaart,
    section>.container{
      animation:tr-opkomst linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 45%;
    }
    /* kaarten in een rij komen iets later op dan de sectie eromheen, zodat
       het een beweging is en geen schok */
    .trb-raster>*,.trb-diensten-rij>*,.trb-cijfers-rij>*,.trb-routes-rij>*,
    .trb-tarief-rij>*,.trb-gerel-rij>*,.trb-rij>*,.raster>*{
      animation:tr-opkomst-zacht linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 50%;
    }
    /* de horizontale carrousel is zelf een scrollvlak; een view()-tijdlijn
       daarbinnen meet de verkeerde as, dus die blijft eruit */
    .trb-spoor>*{animation:none}
  }
}

/* ---- hover: kaarten lichten op en komen iets omhoog --------------------- */
a.kaart:hover,a.kaart:focus-visible{
  box-shadow:var(--schaduw-op);border-color:var(--blauw);transform:translateY(-3px)}
a.trb-kaart:hover,a.trb-kaart:focus-visible{
  box-shadow:var(--trb-schaduwop);border-color:var(--trb-blauw);transform:translateY(-3px)}
a.trb-case:hover img{transform:scale(1.04)}
.trb-case img{transition:transform var(--duur-3) var(--soepel)}
.trb-gerel-rij a:hover{border-color:var(--trb-blauw);box-shadow:var(--trb-schaduw);
  transform:translateY(-2px)}
.trb-gerel-rij a{transition:border-color var(--duur-2) var(--soepel),
  box-shadow var(--duur-2) var(--soepel),transform var(--duur-2) var(--soepel)}
.trb-contact-lijst a{transition:border-color var(--duur-2) var(--soepel),
  background-color var(--duur-2) var(--soepel)}
.trb-chip,.trb-deel{transition:background-color var(--duur-1) var(--soepel),
  border-color var(--duur-1) var(--soepel),color var(--duur-1) var(--soepel)}

/* ---- hover: knoppen veranderen van kleur, niet van helderheid ----------
   filter:brightness() maakte de gele knop lichtgeel en daarmee de tekst
   erop slechter leesbaar. Een expliciete hoverkleur houdt het contrast op
   peil: #0B1A33 op #F0BE00 is 6,33:1.
   ------------------------------------------------------------------------ */
.knop:hover,.trb-knop:hover{transform:translateY(-1px)}
.knop:active,.trb-knop:active{transform:translateY(0)}
.knop-geel:hover,.geel:hover,.trb-knop-geel:hover{
  background:var(--geel-op);border-color:#B8940B;color:var(--blauw-nacht)}
.trb-knop-blauw:hover{
  background:var(--blauw-diep);border-color:var(--blauw-diep);color:#fff}
.trb-knop-groen:hover{background:var(--blauw-nacht);border-color:var(--blauw-nacht);color:#fff}
.knop-rand:hover,.trb-knop-rand:hover{background:var(--zacht);border-color:var(--blauw);
  color:var(--blauw)}
.hero .knop-rand:hover,.band .knop-rand:hover,
.trb-v-donker .trb-knop-rand:hover,.trb-v-nacht .trb-knop-rand:hover,
.trb-v-beeld .trb-knop-rand:hover,.trb-hero .trb-knop-rand:hover,
.trb-banner .trb-knop-rand:hover,.trb-cta-beeld .trb-knop-rand:hover{
  background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.trb-knop-wit:hover{background:#E6EEFA;border-color:#E6EEFA;color:var(--trb-blauw)}
.bel:hover{background:var(--blauw-diep)}

/* ---- hover: links krijgen een onderstreping die uitgroeit ---------------
   Geen text-decoration maar een achtergrondlijn, want alleen die kan van
   links naar rechts uitgroeien. De lijn is 2px en staat op de basislijn.
   ------------------------------------------------------------------------ */
nav.hoofd a,.trb-nav a,.trb-footer-kolom a,.trb-footer-onder a,.trb-kruimels a,
.kruimels a,.brood a,footer a,.trb-header-tel,.trb-footer-contact a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 calc(100% - 2px);
  background-size:0% 2px;
  transition:background-size var(--duur-3) var(--soepel),
             color var(--duur-1) var(--soepel);
}
nav.hoofd a:hover,.trb-nav a:hover,.trb-footer-kolom a:hover,.trb-footer-onder a:hover,
.trb-kruimels a:hover,.kruimels a:hover,.brood a:hover,footer a:hover,
.trb-header-tel:hover,.trb-footer-contact a:hover{background-size:100% 2px}
nav.hoofd a[aria-current],.trb-nav a[aria-current]{background-size:100% 3px}
/* de uitgroeiende lijn vervangt de oude text-decoration op hover */
nav.hoofd a:hover,nav.hoofd a[aria-current],.trb-footer-kolom a:hover,
.trb-footer-onder a:hover,.trb-kruimels a:hover,.kruimels a:hover,
.brood a:hover,footer a:hover,.trb-header-tel:hover,
.trb-footer-contact a:hover{text-decoration:none}
nav.hoofd a:hover{color:var(--blauw)}
/* inline links in lopende tekst houden hun gele onderstreping en krijgen er
   alleen een kleurwisseling bij */
.trb-tekst-body a,.inhoud p a,.inhoud li a{
  transition:color var(--duur-1) var(--soepel),
             text-decoration-color var(--duur-1) var(--soepel)}
.trb-tekst-body a:hover,.inhoud p a:hover,.inhoud li a:hover{
  color:var(--blauw-nacht);text-decoration-color:var(--blauw)}
.trb-v-donker .trb-tekst-body a:hover,.trb-v-nacht .trb-tekst-body a:hover{color:#FFE066}

/* ---- details openen/sluiten -------------------------------------------- */
summary{transition:background-color var(--duur-1) var(--soepel),
  color var(--duur-1) var(--soepel)}

/* ==========================================================================
   5.9 - prefers-reduced-motion
   Alles uit. Niet half uit: geen fade-in, geen lift, geen uitgroeiende lijn,
   geen vloeiend scrollen, geen logo-carrousel. De live site had dit al goed
   geregeld en dat niveau houden we vast. De onderstreping op hover blijft
   wel zichtbaar, hij verschijnt alleen zonder beweging.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    transition-delay:0ms!important;
    animation-timeline:auto!important;
    scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .trb-spoor{scroll-behavior:auto}
  .trb-logospoor{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
  .trb-logospoor .trb-logobalk-rij{animation:none}
  .trb-logospoor .trb-logobalk-rij[aria-hidden]{display:none}
  a.kaart:hover,a.trb-kaart:hover,.trb-gerel-rij a:hover,
  .knop:hover,.trb-knop:hover,a.trb-case:hover img{transform:none}
  nav.hoofd a,.trb-nav a,.trb-footer-kolom a,.trb-footer-onder a,.trb-kruimels a,
  .kruimels a,.brood a,footer a,.trb-header-tel,.trb-footer-contact a{
    background-size:0 2px}
  nav.hoofd a:hover,.trb-nav a:hover,.trb-footer-kolom a:hover,
  .trb-footer-onder a:hover,.trb-kruimels a:hover,.kruimels a:hover,
  .brood a:hover,footer a:hover,.trb-header-tel:hover,
  .trb-footer-contact a:hover{background-size:100% 2px}
}


/* ==========================================================================
   6 - BROWSERTERUGVAL
   --------------------------------------------------------------------------
   Voor elke eigenschap die nog niet overal werkt staat hier een @supports met
   een werkende terugval. De peildatum is oktober 2026; de genoemde versies
   zijn de eerste waarin de eigenschap zonder vlag werkt.
   ========================================================================== */

/* ---- text-wrap:balance -------------------------------------------------
   Chrome 114, Safari 17.5, Firefox 121. Een browser die de waarde niet kent
   gooit de hele declaratie weg, dus de terugval is vanzelf `wrap`. Hij staat
   toch in @supports, zodat de bijbehorende maximumbreedte alleen geldt waar
   er geen balancering is: zonder balance houdt een lange kop anders een
   weeskind op de laatste regel.
   ------------------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6,.trb-titel,.trb-titel-xl,.trb-titel-sm{max-width:28ch}
.trb-kop h1,.trb-kop h2,.trb-kop .trb-titel,.trb-kop .trb-titel-xl{max-width:24ch}
@supports (text-wrap:balance){
  h1,h2,h3,h4,h5,h6,.trb-titel,.trb-titel-xl,.trb-titel-sm{
    text-wrap:balance;max-width:none}
  .trb-kop h1,.trb-kop h2,.trb-kop .trb-titel,.trb-kop .trb-titel-xl{max-width:none}
}
@supports (text-wrap:pretty){
  p,.lood,.trb-intro,.trb-tekst-body{text-wrap:pretty}
}

/* ---- :has() ------------------------------------------------------------
   Chrome 105, Safari 15.4, Firefox 121. Alles hieronder is verfijning: zonder
   :has() blijft de opmaak kloppen, alleen minder slim. Een browser die
   :has() niet kent gooit de hele selector weg - ook de geldige delen - dus
   er staat geen enkele basisregel in dit blok.
   ------------------------------------------------------------------------ */
@supports selector(:has(*)){
  /* een kaart die met een foto begint heeft geen padding nodig */
  .trb-kaart:has(>img:first-child){padding:0;overflow:hidden}
  /* een knoppenrij met een knop op volle breedte zet alles onder elkaar */
  .knoppen:has(.knop-breed),.trb-acties:has(.trb-knop-breed){
    flex-direction:column;align-items:stretch}
  /* twee secties met dezelfde achtergrond onder elkaar: een ritme, niet twee */
  .trb-v-zacht:has(+.trb-v-zacht),.trb-v-veld:has(+.trb-v-veld),
  .trb-v-donker:has(+.trb-v-donker),.trb-v-nacht:has(+.trb-v-nacht){padding-bottom:0}
  /* een veldgroep met een fout markeert zichzelf, zonder extra klasse */
  .twee:has(.veld[aria-invalid="true"]) label{color:var(--fout)}
  /* een sectie zonder kop hoeft bovenin geen ruimte voor die kop vrij te houden */
  .trb-kop:not(:has(h1,h2,h3,.trb-titel,.trb-titel-xl,.trb-titel-sm)){margin-bottom:var(--s5)}
}

/* ---- subgrid -----------------------------------------------------------
   Chrome 117, Safari 16, Firefox 71. Gebruikt om de kolomkoppen in de voet
   op een lijn te krijgen, ook als een kop over twee regels loopt. Zonder
   subgrid staan de koppen gewoon bovenaan hun eigen kolom, zoals nu.
   De kaartenrasters uit paragraaf 4 kunnen subgrid niet gebruiken: die zijn
   flexbox, omdat alleen flexbox de laatste rij kan uitvullen. Daar zorgt
   margin-top:auto op de onderste regel voor dezelfde uitlijning.
   ------------------------------------------------------------------------ */
@supports (grid-template-rows:subgrid){
  .trb-footer-grid{grid-template-rows:auto 1fr}
  .trb-footer-merk{grid-row:span 2}
  /* .trb-footer-kolom bestaat uit precies twee kinderen, h3 en ul; daarom
     mag die twee rijen van de ouder overnemen. Kolommen met een andere
     opbouw doen niet mee, want een derde kind zou dan buiten de twee
     gereserveerde rijen vallen. */
  .trb-footer-kolom{display:grid;grid-row:span 2;grid-template-rows:subgrid;
    align-content:start}
}
/* knop, link of prijs onderaan de kaart: werkt met en zonder subgrid */
.trb-dienst-meer,.trb-nieuws-meer,.trb-tegel-meer,.trb-case-meer{margin-top:auto}
.trb-dienst-body,.trb-tegel-body,.trb-nieuws-body{min-height:0}

/* ---- container queries -------------------------------------------------
   Chrome 105, Safari 16, Firefox 110. Een kaart kijkt naar haar eigen
   breedte in plaats van naar die van het scherm. Dat is wat je wilt zodra
   dezelfde kaart in een rij van twee en in een rij van vier kan staan: bij
   vier kolommen op een laptop is de kaart net zo smal als bij een kolom op
   een telefoon, en moet het pictogram dus boven de tekst in plaats van
   ernaast. Een mediaquery kan dat onderscheid niet maken.
   ------------------------------------------------------------------------ */
@supports (container-type:inline-size){
  .trb-dienst,.trb-tegel,.trb-nieuws,.trb-kaart{
    container-type:inline-size;container-name:trbkaart}
  @container trbkaart (max-width:250px){
    .trb-dienst-body{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
    .trb-dienst-pijl{display:none}
    .trb-tegel-body,.trb-nieuws-body{padding:var(--s4)}
  }
}

/* ---- color-mix ---------------------------------------------------------
   Chrome 111, Safari 16.2, Firefox 113. Alleen voor hovertinten. De vaste
   hexwaarden hierboven blijven staan en zijn de terugval; color-mix maakt de
   tint alleen nauwkeuriger wanneer de merkkleur via een token wordt
   overschreven, bijvoorbeeld in donkere modus.
   ------------------------------------------------------------------------ */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .knop-rand:hover,.trb-knop-rand:hover{
    background:color-mix(in srgb,var(--blauw) 9%,transparent)}
  a.trb-kaart:hover,a.kaart:hover{
    background:color-mix(in srgb,var(--blauw) 3%,var(--vlak))}
  .trb-faq-lijst summary:hover{
    background:color-mix(in srgb,var(--trb-blauw) 6%,var(--trb-kaartvlak))}
}

/* ---- gap in flexbox, oudere Safari -------------------------------------
   Safari kent gap in flexbox pas vanaf 14.1. In dezelfde versie kwam ook de
   eigenschap `inset`, en die is wel in @supports te testen. Een browser
   zonder `inset` krijgt daarom negatieve marges in plaats van gap. De
   kaartenrasters uit paragraaf 4 rekenen met var(--rg-gap) in hun breedte,
   dus die blijven kloppen.
   ------------------------------------------------------------------------ */
@supports not (inset:0){
  .trb-raster,.trb-diensten-rij,.trb-cijfers-rij,.trb-routes-rij,
  .trb-tarief-rij,.trb-gerel-rij,.trb-rij,.raster,
  .knoppen,.trb-acties,.bewijs,.feiten,.trb-pillen,.trb-gebieden-rij,
  .usps .container,.spoed .container,.onderbalk,.onder{
    margin:calc(-1 * var(--s4) / 2);width:auto}
  .trb-raster>*,.trb-diensten-rij>*,.trb-cijfers-rij>*,.trb-routes-rij>*,
  .trb-tarief-rij>*,.trb-gerel-rij>*,.trb-rij>*,.raster>*,
  .knoppen>*,.trb-acties>*,.bewijs>*,.feiten>*,.trb-pillen>*,.trb-gebieden-rij>*,
  .usps .container>*,.spoed .container>*,.onderbalk>*,.onder>*{
    margin:calc(var(--s4) / 2)}
}

/* ---- overflow-x:clip ---------------------------------------------------
   Chrome 90, Safari 16, Firefox 81. Safari 15 en ouder vallen terug op
   hidden; dat kost position:sticky in de kopbalk, dus daar staat een
   expliciete terugval.
   ------------------------------------------------------------------------ */
@supports not (overflow:clip){
  body{overflow-x:hidden}
  header.balk,.trb-header{position:-webkit-sticky;position:sticky}
}

/* ---- aspect-ratio ------------------------------------------------------
   Overal ondersteund sinds 2021, maar de foto's in kaarten mogen nooit
   uitrekken als het toch misgaat.
   ------------------------------------------------------------------------ */
@supports not (aspect-ratio:1){
  .trb-dienst>img,.trb-tegel>img,.trb-nieuws>img{height:190px;object-fit:cover}
  .trb-hero-foto img,.trb-tekstbeeld-foto img{height:340px;object-fit:cover}
}

/* ---- regelhoogte op donker ---------------------------------------------
   Lichte tekst op een donkere ondergrond oogt compacter dan dezelfde tekst
   in het omgekeerde: de letters stralen optisch uit en vullen de witruimte.
   Een halve stap extra regelhoogte heft dat op.
   ------------------------------------------------------------------------ */
.trb-v-donker,.trb-v-nacht,.trb-v-beeld,.trb-hero,.trb-banner,.trb-cta-beeld,
.trb-footer,.hero,footer{--tekst-lh:1.78;--kaart-lh:1.72;--lood-lh:1.66}
:is(.trb-v-donker,.trb-v-nacht,.trb-v-beeld,.trb-hero,.trb-banner,.trb-cta-beeld,
    .trb-footer,.hero,footer) :is(p,li,dd,blockquote){
  line-height:var(--tekst-lh)}
:is(.trb-v-donker,.trb-v-nacht,.trb-v-beeld,.trb-hero,.trb-banner,.trb-cta-beeld,
    .trb-footer,.hero,footer) .trb-intro{line-height:var(--lood-lh)}

/* ==========================================================================
   7 - DONKERE MODUS
   Alleen de lichte vlakken draaien om. Geel blijft geel en de tekst erop
   blijft donkerblauw, want dat is de enige leesbare combinatie (wit op geel
   is 1,51:1). Alles hieronder is een token: de componentregels staan boven
   in het bestand en lezen deze waarden, zodat dit blok niet voor elke
   component herhaald hoeft te worden.
   De lijst staat twee keer omdat een @media-querie en een attribuutselector
   niet in een selector te combineren zijn: de eerste volgt de instelling van
   het besturingssysteem, de tweede de themaschakelaar op de site.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .trb{
  --trb-wit:#0E1A28; --trb-zacht:#17293E; --trb-veld:#13202F;
  --trb-inkt:#E9F0F8; --trb-stil:#A9BCD2;
  --trb-lijn:#2B3F57; --trb-lijnsterk:#6E86A2;
  --trb-kaartvlak:#16263A; --trb-kaartinkt:#E9F0F8; --trb-kaartstil:#A9BCD2;
  --trb-kaartlijn:#2B3F57;
  --trb-blauw:#8FB6F2; --trb-groen:#1E4E96; --trb-donkervlak:#15294A;
  --trb-knopblauw:#1E4E96; --trb-knopwit:#E9F0F8; --trb-knopwitinkt:#0B1A33;
  --trb-vbvlak:#2E2708; --trb-vbinkt:#FFECB3; --trb-vblijn:#C8A200;
  --trb-citaatinkt:#DCE8F7;
  --trb-labelvlak:#20354C; --trb-labelinkt:#CFE0F5;
  --trb-badgevlak:#20354C; --trb-badgeinkt:#9EC2F7;
  --trb-stapinkt:#C2D7F5; --trb-logonaam:#C2D2E6; --trb-ster:#FFCC00;
  --trb-ring:#16263A;
  --trb-schaduw:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.34);
  --trb-schaduwop:0 2px 6px rgba(0,0,0,.45),0 18px 46px rgba(0,0,0,.45);
  }
  :root:not([data-theme="light"]) .trb-logo img,
  :root:not([data-theme="light"]) .trb-footer-slot img,
  :root:not([data-theme="light"]) .merk img{filter:brightness(0) invert(1)}
}
[data-theme="dark"] .trb{
  --trb-wit:#0E1A28; --trb-zacht:#17293E; --trb-veld:#13202F;
  --trb-inkt:#E9F0F8; --trb-stil:#A9BCD2;
  --trb-lijn:#2B3F57; --trb-lijnsterk:#6E86A2;
  --trb-kaartvlak:#16263A; --trb-kaartinkt:#E9F0F8; --trb-kaartstil:#A9BCD2;
  --trb-kaartlijn:#2B3F57;
  --trb-blauw:#8FB6F2; --trb-groen:#1E4E96; --trb-donkervlak:#15294A;
  --trb-knopblauw:#1E4E96; --trb-knopwit:#E9F0F8; --trb-knopwitinkt:#0B1A33;
  --trb-vbvlak:#2E2708; --trb-vbinkt:#FFECB3; --trb-vblijn:#C8A200;
  --trb-citaatinkt:#DCE8F7;
  --trb-labelvlak:#20354C; --trb-labelinkt:#CFE0F5;
  --trb-badgevlak:#20354C; --trb-badgeinkt:#9EC2F7;
  --trb-stapinkt:#C2D7F5; --trb-logonaam:#C2D2E6; --trb-ster:#FFCC00;
  --trb-ring:#16263A;
  --trb-schaduw:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.34);
  --trb-schaduwop:0 2px 6px rgba(0,0,0,.45),0 18px 46px rgba(0,0,0,.45);
}
/* Het zwarte logo verdwijnt op een donkere ondergrond. De juiste oplossing
   is assets/logo/Logo-white-copy.webp in de opmaak (contract paragraaf 3);
   zolang de opmaak het zwarte bestand laadt, maakt dit filter het wit. */
[data-theme="dark"] .trb-logo img,
[data-theme="dark"] .trb-footer-slot img,
[data-theme="dark"] .merk img{filter:brightness(0) invert(1)}

/* ---------------------------------------------------------------------------
   Oneven rijen vullen uit.
   De regels hierboven kapten een laatste kaart die alleen op zijn rij staat af
   op één kolombreedte. Dat laat een gat van twee derde achter en dat is precies
   wat er niet moet gebeuren: een rij hoort vol te lopen. Flexbox doet dat uit
   zichzelf zodra de max-width eraf gaat.
   Moet een blok toch de vaste kolombreedte houden, dan zet je er de klasse
   trb-rij-strak op; de oude afkapping staat daar nog.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .trb-raster:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(3n+1),
  .trb-diensten-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(3n+1),
  .trb-cijfers-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(4n+1),
  .trb-routes-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(2n+1),
  .trb-tarief-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(2n+1),
  .trb-gerel-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(2n+1),
  .trb-rij:not(.trb-rij-strak):not([style*="--k:"]) > :last-child:nth-child(3n+1),
  [style*="--k:2"]:not(.trb-rij-strak) > :last-child:nth-child(2n+1),
  [style*="--k:3"]:not(.trb-rij-strak) > :last-child:nth-child(3n+1),
  [style*="--k:4"]:not(.trb-rij-strak) > :last-child:nth-child(4n+1) {
    max-width: 100%;
  }
}

/* Tussenkoppen niet in kapitalen.
   Hoofdletterwoorden missen het silhouet waarop je leest, dus een bezoeker
   scant ze langzamer — juist op pagina's waar de tussenkop de weg moet wijzen.
   De nadruk komt nu van gewicht, kleur en ruimte in plaats van van kapitalen. */
.trb-tussenkop,
.trb-tekst-body .trb-tussenkop {
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: var(--h3-fs, var(--h4-fs));
  line-height: var(--h3-lh, 1.22);
}

/* Het aanvraagnummer op de bedankpagina: groot genoeg om voor te lezen aan de
   telefoon, en met cijfers op vaste breedte zodat het rustig oogt. */
.trb-ref {
  font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.2 var(--font-kop, inherit);
  color: var(--trb-blauw, #0F2447);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s3);
}

/* Plaatsenlijst op de werkgebiedpagina: 85 namen moeten te scannen zijn, dus
   kolommen die meebewegen met de breedte in plaats van één lange rij. */
.trb-plaatsenlijst {
  columns: 16rem auto;
  column-gap: var(--vloei-2, 2rem);
  list-style: none;
  margin: var(--s5, 1.5rem) 0 0;
  padding: 0;
  max-width: none;
}
.trb-plaatsenlijst li { break-inside: avoid; margin: 0 0 .35rem; }
.trb-plaatsenlijst a {
  display: block;
  padding: .3rem 0;
  color: var(--trb-blauw, #0F2447);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .18em;
}
.trb-plaatsenlijst a:hover { text-decoration-color: currentColor; }



/* ---------------------------------------------------------------------------
   Eén ritme tussen de blokken.
   Secties sluiten direct op elkaar aan en brengen allebei hun eigen lucht mee.
   Tussen twee blokken op dezelfde achtergrond werd dat 100,8 + 100,8 = ruim
   200 pixels leegte, terwijl het na een gekleurde band de helft was. Dat leest
   als rommel: dezelfde soort overgang hoort er overal hetzelfde uit te zien.
   Staan twee blokken op dezelfde (witte) grond achter elkaar, dan laat de
   bovenste zijn onderste lucht vallen en bepaalt de onderste de afstand.
   Gaat het blok over op een andere kleur, dan blijft de lucht van beide staan:
   daar is de ruimte juist nodig om de kleurvlakken te laten ademen.
   -------------------------------------------------------------------------- */
section.trb:not([class*="trb-v-"]):not(.trb-hero):not(.trb-quickfacts):not(.trb-kruimels):has(+ section.trb:not([class*="trb-v-"]):not(.trb-hero):not(.trb-quickfacts)) {
  padding-bottom: 0;
}

/* Kaartvlak zonder API-sleutel.
   De Google-embed bleef leeg omdat de sleutel buiten de site om wordt
   geweigerd; een bezoeker ziet dan een grijs vlak en dat is erger dan geen
   kaart. OpenStreetMap heeft geen sleutel nodig en kan dus niet omvallen.
   De routeknop gaat wel naar Google Maps: daar wil de bezoeker uiteindelijk
   naartoe, en een gewone link heeft geen sleutel nodig. */
.trb-kaartvlak {
  position: relative;
  height: var(--h, 360px);
  border-radius: var(--trb-r-g, 16px);
  overflow: hidden;
  border: 1px solid var(--trb-lijn);
  background: var(--trb-veld);
}
.trb-kaartvlak-voet {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--trb-wit, #fff) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--bijschrift-fs);
}

/* ===========================================================================
   Beweging, deel twee: terugval en verfijning
   ======================================================================== */

/* De fade-in hierboven draait op animation-timeline: view(). Dat is de nette
   oplossing, maar hij bestaat alleen in Chrome en Edge; in Safari en Firefox
   kwam er helemaal geen beweging. Onderstaande klasse doet hetzelfde met een
   IntersectionObserver, en boeker.js zet hem alleen aan wanneer de CSS-variant
   ontbreekt. Zo draait er nooit twee keer een animatie over hetzelfde blok. */
.trb-js-opkomst .trb-op {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.trb-js-opkomst .trb-op.trb-op-zichtbaar {
  opacity: 1;
  transform: none;
}
/* Kaarten binnen een blok lopen iets achter elkaar aan: dat leest als één
   beweging in plaats van als losse sprongetjes. Meer dan zes trappen niet,
   anders wacht de onderste kaart merkbaar lang. */
.trb-js-opkomst .trb-op:nth-child(2)  { transition-delay: .06s }
.trb-js-opkomst .trb-op:nth-child(3)  { transition-delay: .12s }
.trb-js-opkomst .trb-op:nth-child(4)  { transition-delay: .18s }
.trb-js-opkomst .trb-op:nth-child(5)  { transition-delay: .24s }
.trb-js-opkomst .trb-op:nth-child(n+6){ transition-delay: .3s }

@media (prefers-reduced-motion: reduce) {
  .trb-js-opkomst .trb-op {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- hover: iets meer leven, zonder dat het druk wordt ------------------- */

/* De kaart lichtte al op; de afbeelding erin stond stil. Een foto die heel
   licht meebeweegt maakt duidelijk dat de hele kaart aanklikbaar is. */
.trb-kaart, .trb-tegel { transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease }
.trb-kaart img, .trb-tegel img { transition: transform .45s cubic-bezier(.22,.61,.36,1) }
.trb-kaart:hover img, .trb-tegel:hover img,
.trb-kaart:focus-within img, .trb-tegel:focus-within img { transform: scale(1.035) }
/* De foto mag niet buiten zijn hoek kruipen. */
.trb-kaart, .trb-tegel { overflow: hidden }

/* Een kaart die je met het toetsenbord bereikt, hoort hetzelfde te doen als
   een kaart waar de muis op staat. */
.trb-kaart:focus-within, .trb-tegel:focus-within {
  box-shadow: var(--trb-schaduwop);
  border-color: var(--trb-blauw);
  transform: translateY(-2px);
}

/* Links in lopende tekst: de onderstreping komt op in plaats van er altijd
   vol te staan. Rustiger in een alinea, net zo duidelijk bij aanwijzen. */
.trb-tekst-body a:not(.trb-knop) {
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .16em;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.trb-tekst-body a:not(.trb-knop):hover { text-decoration-color: currentColor }

/* De pijl in een "lees verder" schuift mee met de blik. */
.trb-dienst-pijl, .trb-tegel .trb-pijl { transition: transform .25s cubic-bezier(.22,.61,.36,1) }
.trb-kaart:hover .trb-dienst-pijl, .trb-tegel:hover .trb-pijl,
.trb-kaart:focus-within .trb-dienst-pijl { transform: translateX(3px) }

@media (prefers-reduced-motion: reduce) {
  .trb-kaart, .trb-tegel, .trb-kaart img, .trb-tegel img,
  .trb-dienst-pijl, .trb-tegel .trb-pijl { transition: none }
  .trb-kaart:hover img, .trb-tegel:hover img { transform: none }
}

/* Tegels in een volledig overzicht.
   De kop was een gewone onderstreepte link; naast de tegels elders op de site
   leest dat als een lijst met losse links in plaats van als kaarten. De link
   vult nu de hele tegel, zodat de bezoeker overal kan klikken en niet op het
   woord hoeft te mikken. */
.trb-diensten .trb-tegel { position: relative }
.trb-diensten .trb-tegel h3 {
  margin: 0 0 var(--s2);
  font-size: var(--kaart-fs, 1.0625rem);
  line-height: 1.3;
}
.trb-diensten .trb-tegel h3 a {
  color: var(--trb-blauw);
  text-decoration: none;
  font-weight: 700;
}
/* De hele tegel is het klikvlak; de link blijft de toegankelijke drager. */
.trb-diensten .trb-tegel h3 a::after { content: ""; position: absolute; inset: 0 }
.trb-diensten .trb-tegel h3 a:hover { text-decoration: underline; text-underline-offset: .16em }
.trb-diensten .trb-tegel p {
  margin: 0;
  color: var(--trb-stil);
  font-size: var(--bijschrift-fs);
  line-height: 1.6;
}

/* De zijkaart loopt mee met de lezer.
   Bij een lange tekst eindigde het kaartje na een paar honderd pixels en bleef
   de rechterhelft daarna leeg; op /diensten/zakelijk-vervoer/ is dat ruim 1400
   pixels niets naast een smalle kolom tekst. Dat leest als een fout in de
   opmaak. Kleven houdt de kerngegevens in beeld precies zolang de tekst duurt,
   en kost niets zodra de tekst korter is dan het kaartje: dan kleeft hij nooit.
   Op smalle schermen staat de kaart onder de tekst en is kleven zinloos. */
@media (min-width: 1024px) {
  .trb-tekst-in > .trb-zijkaart,
  .trb-tekst-in > aside {
    position: sticky;
    top: var(--trb-kleef, 96px);
    align-self: start;
    /* nooit hoger dan het scherm, anders valt de onderkant weg */
    max-height: calc(100dvh - var(--trb-kleef, 96px) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Aanvraagblok onder de meelopende zijkaart.
   Het staat binnen de aside, dus het kleeft mee en blijft in beeld zolang de
   tekst duurt. Bewust rustig: geen tweede hero, maar één regel met twee
   knoppen, zodat het de tekst niet overschreeuwt. */
.trb-zijcta {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--trb-lijn);
  border-radius: var(--trb-r-g, 16px);
  background: var(--trb-veld);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: flex-start;
}
.trb-zijcta-kop {
  margin: 0;
  font: 700 var(--kaart-fs, 1.0625rem)/1.3 var(--font-kop, inherit);
  color: var(--trb-blauw);
}
.trb-zijcta-tekst {
  margin: 0;
  font-size: var(--bijschrift-fs);
  line-height: 1.6;
  color: var(--trb-stil);
  max-width: none;
}
.trb-zijcta .trb-knop { width: 100% }

/* Verwijzing naar een tweelingpagina: bestaat nog voor oude links, maar hoort
   niet net zo zwaar te wegen als de eigen inhoud. Vandaar klein en onderaan. */
.trb-tweeling {
  margin: var(--s4) 0 0;
  font-size: var(--bijschrift-fs);
  color: var(--trb-stil);
}
.trb-tweeling a { color: inherit }

/* Contactgegevens in de voettekst als blok, niet als streep.
   Het was één flexrij; op een breed scherm stonden vijf gegevens naast elkaar
   uitgesmeerd over 1360 pixels. Dat leest niet: je oog moet de hele breedte af
   voor vijf korte regels. In kolommen van leesbare breedte staan ze bij
   elkaar en scan je ze in één blik. */
.trb-footer-contact address {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--s3) var(--s6);
  max-width: 780px;
  align-items: start;
}
.trb-footer-contact address > div { align-items: flex-start }
/* Het adres is de langste regel en mag over twee kolommen. */
.trb-footer-contact address > div:nth-child(4) { grid-column: span 2 }
@media (max-width: 640px) {
  .trb-footer-contact address > div:nth-child(4) { grid-column: auto }
}

/* Gegevenstabel in lopende tekst.
   Afstanden en rijtijden stonden als opsomming, waardoor je ze regel voor
   regel moest lezen om te vergelijken. In kolommen zie je in één blik welke
   bestemming het dichtstbij is. Getallen rechts uitgelijnd en op vaste
   cijferbreedte, zodat de kommas onder elkaar staan. */
.trb-gegevens {
  margin: var(--s4) 0 var(--s5);
  overflow-x: auto;              /* smalle schermen: schuiven in plaats van breken */
  -webkit-overflow-scrolling: touch;
}
.trb-gegevens table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bijschrift-fs);
}
.trb-gegevens th,
.trb-gegevens td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--trb-lijn);
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}
.trb-gegevens th {
  font-weight: 700;
  color: var(--trb-inkt);
  white-space: normal;           /* plaatsnamen mogen afbreken */
  padding-left: 0;
}
.trb-gegevens td {
  color: var(--trb-stil);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trb-gegevens tr:last-child th,
.trb-gegevens tr:last-child td { border-bottom: 0 }
.trb-gegevens tbody tr:hover th,
.trb-gegevens tbody tr:hover td { background: var(--trb-veld) }
.trb-gegevens-noot {
  margin: calc(-1 * var(--s3)) 0 var(--s4);
  font-size: var(--bijschrift-fs);
  color: var(--trb-stil);
}

/* ---------------------------------------------------------------------------
   Twee blokken die boven 1440 buiten de kolom liepen.

   1. De hero met één kolom (.trb-hero-enkel) kapte zichzelf op 900 pixels en
      zette margin-inline:0 auto, dus hij plakte aan de linkerrand. Op een
      scherm van 1920 begon de titel op 40 px terwijl de rest van de pagina op
      233 begint. De leesbreedte van 900 is goed; die hoort alleen op de tekst
      te staan en niet op de container, anders verschuift de hele kolom.

   2. De koeriersbanner rekende zijn zijmarge met calc((100% - breed) / 2),
      maar die 100% is de breedte van de tekstkolom van de banner, niet van de
      pagina. In een halve kolom is die uitkomst negatief, dus viel hij terug
      op de kleine marge en begon de tekst op 40 px. De berekening hoort op de
      volle banner te staan; daar klopt 100% wel.
   -------------------------------------------------------------------------- */
.trb-hero-enkel {
  max-width: var(--trb-breed);
  margin-inline: auto;
}
.trb-hero-enkel > .trb-hero-tekst { max-width: 900px }

.trb-banner-in { padding-left: max(var(--trb-rand), calc((100% - var(--trb-breed)) / 2)) }
.trb-banner-tekst { padding-left: 0 }

/* Kruimelpad en snelle feiten dragen hun zijmarge binnen hun eigen container,
   net als de kopbalk. Dan hoort de container 1440 plus tweemaal die marge
   breed te zijn, anders komt de inhoud twee marges naar binnen te staan en
   ligt hij 40 pixels rechts van de rest. De kopbalk deed dit al goed. */
.trb-kruimels ol,
.trb-quickfacts ul {
  max-width: calc(var(--trb-breed) + 2 * var(--trb-rand));
}