:root{
  --grm-brand:        #103A63;
  --grm-brand-600:    #0B2A49;
  --grm-brand-50:     #EDF2F8;
  --grm-brand-100:    #D3E0EF;
  /*
    De lichte kop van het merkverloop. Deze kleur stond alleen BINNEN
    --grm-brand-grad en had geen eigen naam. Een opruimactie die de tokens
    uitleest op "--naam: #hex" zag hem daardoor niet als palet en verving hem
    in het logo door de dichtstbijzijnde buur. Het merkteken kreeg zo een
    andere kleur; merkteken.pl ving dat in dezelfde run. Een kleur die in het
    logo staat hoort een naam te hebben.
  */
  --grm-brand-400:    #1A5089;
  --grm-brand-grad:   linear-gradient(135deg,#1A5089 0%,#103A63 100%);
  /*
    De achtergronden van RIJEN en secties. Er stonden 103 verschillende
    verlopen in de stylesheets, en het merendeel was dezelfde overgang in een
    andere schrijfwijze: #103A63,#0B2A49 stond er als "135deg,#103a63,#0b2a49",
    als "135deg,#103A63 0%,#0B2A49 100%" en als de var-versie daarvan. Vier
    spellingen van een verloop, en dan lijkt de ene sectie net anders dan de
    andere terwijl er hetzelfde bedoeld is. Vier namen, en daarmee is het
    overal hetzelfde.
  */
  /*
    De dertien kaartkleuren, een per hoofdgroep.

    Een kaart met dertien categorieen heeft dertien te onderscheiden markers
    nodig; dat is een eis van de kaart en geen kleurdrift. Ze stonden alleen
    los in de PHP, nergens benoemd, en drie ervan waren uit de blauwfamilie
    gelopen: een pruim, een taupe en een steengrijs. Nu staan ze hier, met een
    naam, en liggen ze alle dertien in blauw of slate.
  */
  --grm-marker-food:      #3E6E9C;
  --grm-marker-agri:      #5B7C8D;
  --grm-marker-bouw:      #5A6472;
  --grm-marker-industrie: #4F6178;
  --grm-marker-elektro:   #2E6BB0;
  --grm-marker-mode:      #6B6E93;
  --grm-marker-beauty:    #5A6BA8;
  --grm-marker-wonen:     #6E7787;
  --grm-marker-sport:     #2E7D9A;
  --grm-marker-kantoor:   #4A5A8C;
  --grm-marker-medisch:   #2E8BA6;
  --grm-marker-auto:      #5A6478;
  --grm-marker-zakelijk:  #64748B;

  /* De twee stops los, want er is een blok dat het merkverloop moet kunnen
     opbouwen met de herokleur van zijn eigen pagina erin. Dat blok schreef die
     twee kleuren met de hand over en dan staan ze op twee plekken. */
  --grm-rij-merk-1:   #103A63;
  --grm-rij-merk-2:   #0B2A49;
  --grm-rij-merk:     linear-gradient(135deg,var(--grm-rij-merk-1) 0%,var(--grm-rij-merk-2) 100%);
  --grm-rij-diep:     linear-gradient(135deg,#103A63 0%,#125AAC 100%);
  --grm-rij-licht:    linear-gradient(180deg,#FFFFFF 0%,#F5F7FA 100%);
  --grm-rij-zacht:    linear-gradient(135deg,#EDF2F8 0%,#D3E0EF 100%);
  --grm-brand-ink:    #041E42;

  --grm-accent:       #1668C7;
  --grm-accent-hover: #125AAC;
  /*
    De accentkleur op een DONKERE achtergrond. #1668C7 is daar te donker om te
    lezen, dus stonden er vier lichte blauwen naast elkaar voor precies die
    ene rol: #8FC4FF, #9CC4EE, #8FC0F5 en #93C5FD. Een naam ervoor, en het
    blijven er vier minus drie.
  */
  --grm-accent-200:   #9CC4EE;
  --grm-accent-soft:  rgba(22,104,199,.12);
  --grm-accent-text:  #0B2A49;
  --grm-accent-grad:  linear-gradient(135deg,#1668C7 0%,#125AAC 100%);

  --grm-sky:          #0060DF;
  --grm-sky-50:       #EDF2F8;
  --grm-success:      #103A63;
  --grm-success-50:   rgba(16,58,99,.12);
  --grm-success-text: #0B2A49;
  --grm-warn:         #f59e0b;
  --grm-warn-50:      #FEF7E0;
  --grm-warn-text:    #B06000;
  /*
    Er stonden 26 verschillende rode tinten in de stylesheets, van #8a1c1c tot
    #fee2e2, elk op een eigen plek verzonnen. Rood is hier de gevaarkleur en
    die had er precies een: #dc2626. Zonder een donkere en een lichte variant
    verzint elk scherm zijn eigen randje en zijn eigen vlak, en dat is hoe die
    26 zijn ontstaan. Dit zijn geen nieuwe kleuren maar de tinten van de kleur
    die er al was.
  */
  --grm-danger:       #dc2626;
  --grm-danger-700:   #A11916;
  --grm-danger-50:    #FBD5D2;
  --grm-danger-text:  #8A1C1C;

  --grm-ink:          #041E42;
  --grm-ink-700:      #33424F;
  --grm-ink-500:      #55636E;
  /*
    Tussen ink-500 en ink-300 zat een gat, en in dat gat waren zes bijna
    gelijke grijzen ontstaan: #7a8794, #7a8398, #8a97a5, #8a959e, #8e8e93 en
    #7c7c87. Dit is geen nieuwe kleur maar een naam voor de tint die er al
    veertien keer stond, zodat er niet elke keer een zevende bij komt.
  */
  --grm-ink-400:      #7A8794;
  --grm-ink-300:      #A8B4BC;
  --grm-line:         #D7DEE7;
  --grm-line-soft:    #EAEFF5;
  --grm-bg:           #F5F7FA;
  --grm-paper:        #FFFFFF;
  --grm-canvas:       #F5F7FA;

  --grm-font-display: 'Inter Tight','Inter',ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --grm-font-body:    'Inter','Inter Tight',ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  --grm-text-xs:      12px;
  --grm-text-sm:      13px;
  --grm-text-base:    15px;
  --grm-text-lg:      17px;
  --grm-text-xl:      20px;
  --grm-text-2xl:     24px;
  --grm-text-3xl:     30px;
  --grm-text-4xl:     36px;
  --grm-text-5xl:     48px;
  --grm-text-6xl:     60px;
  --grm-leading-tight:1.15;
  --grm-leading:      1.5;
  --grm-tracking-tight:-.025em;

  --grm-h1:           clamp(30px, 1.5rem + 1.9vw, 42px);
  --grm-h2:           clamp(24px, 1.3rem + 1vw, 30px);
  --grm-h3:           20px;
  --grm-h4:           17px;
  --grm-h5:           15px;
  --grm-weight-display:800;
  --grm-weight-heading:700;

  --grm-s-1:  4px;
  --grm-s-2:  8px;
  --grm-s-3:  12px;
  --grm-s-4:  16px;
  --grm-s-5:  20px;
  --grm-s-6:  24px;
  --grm-s-8:  32px;
  --grm-s-10: 40px;
  --grm-s-12: 48px;
  --grm-s-16: 64px;
  --grm-s-20: 80px;
  --grm-s-24: 96px;

  --grm-r-sm:   6px;
  --grm-r:      12px;
  --grm-r-md:   16px;
  --grm-r-lg:   24px;
  --grm-r-pill: 999px;

  --grm-shadow-xs:  0 2px 6px rgba(4,30,66,.04);
  --grm-shadow-sm:  0 2px 6px rgba(4,30,66,.06), 0 1px 2px rgba(4,30,66,.04);
  --grm-shadow:     0 8px 24px rgba(4,30,66,.07), 0 2px 6px rgba(4,30,66,.04);
  --grm-shadow-lg:  0 16px 40px rgba(4,30,66,.12), 0 6px 18px rgba(4,30,66,.06);
  --grm-shadow-xl:  0 32px 80px rgba(4,30,66,.18), 0 12px 32px rgba(4,30,66,.08);
  --grm-shadow-glow:0 0 0 4px rgba(16,58,99,.18);
  --grm-shadow-accent-glow: 0 0 0 4px rgba(22,104,199,.22);

  --grm-ease:        cubic-bezier(.22,1,.36,1);
  --grm-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --grm-dur-fast:    .12s;
  --grm-dur:         .24s;
  --grm-dur-slow:    .42s;

  --grm-z-base:     1;
  --grm-z-sticky:   100;
  --grm-z-fixed:    500;
  --grm-z-overlay:  1000;
  --grm-z-modal:    2000;
  --grm-z-toast:    3000;

  --p:        var(--grm-brand);
  --p2:       var(--grm-brand-600);
  --p-soft:   var(--grm-brand-50);
  --accent:   var(--grm-accent);
  --accent-h: var(--grm-accent-hover);
  --success:  var(--grm-success);
  --canvas:   var(--grm-canvas);
  --card:     var(--grm-paper);
  --border:   var(--grm-line);
  --text:     var(--grm-ink);
  --muted:    var(--grm-ink-500);

  --grm-offset: 64px;
}

/* Zijwaartse overloop wegknippen zonder position:sticky te slopen.

   Dit stond op html EN body als overflow-x:hidden. Een hidden op body maakt
   body de scrollcontainer, en dan plakt geen enkele sticky erbinnen meer:
   de sitekop met position:sticky scrolde gewoon het beeld uit. Gemeten op de
   live accountpagina: na 400px scrollen stond de kop op -400.

   Op html mag hidden blijven, want dat propageert naar de viewport en die
   blijft de scroller. Body krijgt clip: dat knipt net zo hard, maar maakt
   geen scrollcontainer. Een browser die clip niet kent laat de regel vallen
   en valt terug op visible, en dan knipt html nog steeds. */
html { overflow-x: hidden; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }

body.grm-chrome-active{
  font-family: var(--grm-font-body) !important;
  color: var(--grm-ink-700);
  background: var(--grm-canvas);
}
body.grm-chrome-active h1, body.grm-chrome-active h2, body.grm-chrome-active h3,
body.grm-chrome-active h4, body.grm-chrome-active h5, body.grm-chrome-active h6{
  font-family: var(--grm-font-display) !important;
  letter-spacing: var(--grm-tracking-tight);
}

:where(body.grm-chrome-active) :is(h1,h2,h3,h4,h5,h6){
  color: var(--grm-ink);
}

:where(body.grm-chrome-active) h1{ font-size: var(--grm-h1); font-weight: var(--grm-weight-display); line-height: 1.1; }
:where(body.grm-chrome-active) h2{ font-size: var(--grm-h2); font-weight: var(--grm-weight-display); line-height: 1.18; }
:where(body.grm-chrome-active) h3{ font-size: var(--grm-h3); font-weight: var(--grm-weight-heading); line-height: 1.28; }
:where(body.grm-chrome-active) h4{ font-size: var(--grm-h4); font-weight: var(--grm-weight-heading); line-height: 1.3; }
:where(body.grm-chrome-active) h5{ font-size: var(--grm-h5); font-weight: var(--grm-weight-heading); line-height: 1.35; }
body.grm-chrome-active p, body.grm-chrome-active li,
body.grm-chrome-active a, body.grm-chrome-active label, body.grm-chrome-active td,
body.grm-chrome-active th, body.grm-chrome-active input, body.grm-chrome-active textarea,
body.grm-chrome-active select, body.grm-chrome-active button{
  font-family: var(--grm-font-body) !important;
}

body.grm-chrome-active .material-symbols-rounded,
body.grm-chrome-active .material-symbols-outlined,
body.grm-chrome-active .material-icons{
  font-family: 'Material Symbols Rounded','Material Symbols Outlined','Material Icons' !important;
}
body.grm-chrome-active i.fa, body.grm-chrome-active i.fas, body.grm-chrome-active i.far,
body.grm-chrome-active i.fab, body.grm-chrome-active i.fa-solid, body.grm-chrome-active i.fa-regular,
body.grm-chrome-active i.fa-brands, body.grm-chrome-active i[class*="fa-"]{
  font-family: 'Font Awesome 6 Free','Font Awesome 6 Brands','Font Awesome 5 Free','FontAwesome' !important;
}

body.grm-chrome-active .grm-fullwrap a:not([class*="btn"]):not([class*="cta"]):not(.grm-h__logo):not([class*="chip"]){
  color: var(--grm-brand);
}

.grm-body, .grm-app, .grm-section, .grm-hero, .grm-card{
  font-family: var(--grm-font-body);
  color: var(--grm-ink-700);
}

.grm-h, .grm-display{
  font-family: var(--grm-font-display);
  color: var(--grm-ink);
  font-weight: 800;
  line-height: var(--grm-leading-tight);
  letter-spacing: var(--grm-tracking-tight);
  margin: 0;
}
.grm-display{ font-size: clamp(40px, 6vw, var(--grm-text-6xl)); }
.grm-h1{ font-size: clamp(32px, 4.4vw, var(--grm-text-5xl)); }
.grm-h2{ font-size: clamp(26px, 3.2vw, var(--grm-text-4xl)); }
.grm-h3{ font-size: var(--grm-text-2xl); font-weight:700 }
.grm-h4{ font-size: var(--grm-text-xl);  font-weight:700 }
.grm-lead{ font-size: var(--grm-text-lg); color: var(--grm-ink-500); line-height: var(--grm-leading); }
.grm-eyebrow{ display:inline-block; font-size: var(--grm-text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--grm-brand); margin-bottom: var(--grm-s-3); }

.grm-btn{
  --bg:        var(--grm-ink);
  --fg:        #fff;
  --bg-hover:  var(--grm-ink-700);
  --ring:      transparent;

  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family: var(--grm-font-body);
  font-weight:600; font-size: var(--grm-text-base);
  line-height:1; white-space:nowrap;
  padding: 12px 18px;
  border-radius: var(--grm-r);
  border: 1px solid transparent;
  background: var(--bg); color: var(--fg);
  text-decoration:none; cursor:pointer;
  transition: transform var(--grm-dur) var(--grm-ease),
              background-color var(--grm-dur) var(--grm-ease),
              box-shadow var(--grm-dur) var(--grm-ease),
              color var(--grm-dur) var(--grm-ease);
  box-shadow: var(--grm-shadow-xs);
}
.grm-btn:hover{ background: var(--bg-hover); transform: translateY(-1px); box-shadow: var(--grm-shadow-sm); }
.grm-btn:active{ transform: translateY(0); }
.grm-btn:focus-visible{ outline:0; box-shadow: var(--grm-shadow-xs), 0 0 0 4px var(--ring); }
.grm-btn .material-symbols-rounded{ font-size: 18px; }

.grm-btn--primary{
  --bg: var(--grm-brand);
  --fg: #fff;
  --bg-hover: var(--grm-brand-600);
  --ring: rgba(16,58,99,.35);
}
.grm-btn--primary:hover{ background: var(--bg-hover); }
.grm-btn--accent{
  --bg: var(--grm-accent);
  --fg: #fff;
  --bg-hover: var(--grm-accent-hover);
  --ring: rgba(22,104,199,.32);
}
.grm-btn--accent:hover{ background: var(--bg-hover); }
.grm-btn--secondary{
  --bg:#fff; --fg: var(--grm-ink); --bg-hover: var(--grm-brand-50);
  border-color: var(--grm-line);
}
.grm-btn--secondary:hover{ color: var(--grm-brand); border-color: var(--grm-brand); }
.grm-btn--ghost{
  --bg: transparent; --fg: var(--grm-ink); --bg-hover: var(--grm-brand-50);
  box-shadow:none;
}
.grm-btn--ghost:hover{ color: var(--grm-brand); }
.grm-btn--brand-soft{
  --bg: var(--grm-brand-50); --fg: var(--grm-brand);
  --bg-hover: var(--grm-brand-100);
}
.grm-btn--sm{ padding: 8px 12px; font-size: var(--grm-text-sm); border-radius: var(--grm-r-sm); }
.grm-btn--lg{ padding: 16px 24px; font-size: var(--grm-text-lg); border-radius: var(--grm-r); }
.grm-btn--block{ width:100%; }
.grm-btn[disabled], .grm-btn--disabled{ opacity:.5; pointer-events:none; }

.grm-card{
  background: var(--grm-paper);
  border: 1px solid var(--grm-line);
  border-radius: var(--grm-r-md);
  box-shadow: var(--grm-shadow-xs);
  padding: var(--grm-s-6);
  transition: transform var(--grm-dur) var(--grm-ease),
              box-shadow var(--grm-dur) var(--grm-ease),
              border-color var(--grm-dur) var(--grm-ease);
}
.grm-card--hover:hover{
  transform: translateY(-2px);
  box-shadow: var(--grm-shadow);
  border-color: var(--grm-ink-300);
}
.grm-card--accent{ border-color: var(--grm-brand); box-shadow: 0 0 0 3px rgba(16,58,99,.10); }
.grm-card--coral{ border-color: var(--grm-accent); box-shadow: 0 0 0 3px rgba(22,104,199,.12); }

.grm-stat{ display:flex; flex-direction:column; gap:6px }
.grm-stat__num{ font-family: var(--grm-font-display); font-weight:800; font-size: var(--grm-text-3xl); color: var(--grm-ink); letter-spacing: var(--grm-tracking-tight) }
.grm-stat__lbl{ font-size: var(--grm-text-sm); color: var(--grm-ink-500) }

.grm-price__label{ margin:0; font-size:14px; font-weight:700; color: var(--grm-ink-500) }
.grm-badge{ display:inline-flex; align-items:center; gap:4px; font-size: var(--grm-text-xs); font-weight:700; padding: 4px 8px; border-radius: var(--grm-r-sm); background: var(--grm-line-soft); color: var(--grm-ink); }
.grm-badge--verified{ background: var(--grm-success-50); color: var(--grm-success-text); }
.grm-badge--premium{ background: linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; }

.grm-container{ max-width:var(--grm-w,1424px); margin: 0 auto; padding: 0 var(--grm-s-6); }
.grm-container--narrow{ max-width: 920px; }
.grm-section{ padding: var(--grm-s-20) 0; }
.grm-section--tight{ padding: var(--grm-s-12) 0; }
/* Een band met een eigen kleur, en onderaan een korte overgang naar de
   pagina. Het verloop liep hiervoor over de HELE sectie uit naar niets:
   bij een sectie van achthonderd pixels is dat geen kleurvlak maar een
   vlek die nergens ophoudt, en de grens met de sectie eronder was niet te
   zien. Nu een vlakke tint met de laatste 120 pixels als overgang. */
.grm-section--brand{
  background: linear-gradient(180deg,
    var(--grm-brand-50) 0%,
    var(--grm-brand-50) calc(100% - 120px),
    var(--grm-bg, #F5F7FA) 100%);
}
.grm-section__head{ text-align:center; max-width: 720px; margin: 0 auto var(--grm-s-12); }
.grm-grid{ display:grid; gap: var(--grm-s-6); }
.grm-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grm-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grm-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .grm-grid--4, .grm-grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){ .grm-grid--4, .grm-grid--3, .grm-grid--2{ grid-template-columns: 1fr; } }

@keyframes grmFadeUp { from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes grmFadeIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes grmRiseIn { from{ opacity:0; transform: translateY(24px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes grmSlideRight { from{ opacity:0; transform: translateX(40px); } to{ opacity:1; transform:none; } }
@keyframes grmPulseGlow { 0%,100%{ box-shadow: 0 0 0 0 rgba(16,58,99,.32); } 50%{ box-shadow: 0 0 0 12px rgba(16,58,99,0); } }
@keyframes grmFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@keyframes grmShine { 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }
@keyframes grmCounterPop { 0%{ transform: scale(.96); } 100%{ transform: scale(1); } }

.grm-anim{ animation-fill-mode: both; animation-duration: var(--grm-dur-slow); animation-timing-function: var(--grm-ease); }
.grm-anim--fade-up{ animation-name: grmFadeUp; }
.grm-anim--fade-in{ animation-name: grmFadeIn; }
.grm-anim--rise-in{ animation-name: grmRiseIn; }
.grm-anim--slide-right{ animation-name: grmSlideRight; }
.grm-anim--float{ animation: grmFloat 4s ease-in-out infinite; }
.grm-anim--pulse{ animation: grmPulseGlow 2.4s ease-in-out infinite; }

.grm-anim[style*='--d']{ animation-delay: var(--d); }
.grm-stagger > *:nth-child(1){ --d: 0ms;   animation-delay: var(--d); }
.grm-stagger > *:nth-child(2){ --d: 80ms;  animation-delay: var(--d); }
.grm-stagger > *:nth-child(3){ --d: 160ms; animation-delay: var(--d); }
.grm-stagger > *:nth-child(4){ --d: 240ms; animation-delay: var(--d); }
.grm-stagger > *:nth-child(5){ --d: 320ms; animation-delay: var(--d); }
.grm-stagger > *:nth-child(6){ --d: 400ms; animation-delay: var(--d); }

@media (prefers-reduced-motion: reduce){
  .grm-anim, .grm-anim--float, .grm-anim--pulse{ animation:none !important; }
  .grm-card--hover:hover, .grm-btn:hover{ transform:none; }
}

.grm-phone{
  width: 360px; height: 740px;
  position: relative;
  background:#0f172a;
  border-radius: 48px;
  padding: 14px;
  box-shadow: var(--grm-shadow-xl);
  isolation: isolate;
}
.grm-phone__screen{
  width:100%; height:100%;
  background:#fff;
  border-radius: 36px;
  overflow:hidden;
  position:relative;
}
.grm-phone__notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:120px; height:30px; background:#0f172a; border-radius: 0 0 18px 18px; z-index:5; pointer-events:none;
}
.grm-phone--tilt{ transform: rotate(-3deg); transform-origin: center; }
.grm-phone--tilt:hover{ transform: rotate(0); transition: transform .6s var(--grm-ease); }

.grm-dot-grid{
  background-image: radial-gradient(circle at 1px 1px, var(--grm-ink-300) 1px, transparent 1px);
  background-size: 24px 24px;
}
.grm-soft-blur{
  position:absolute; pointer-events:none; filter: blur(80px); opacity:.5;
  border-radius:50%;
}

[hidden]{display:none !important}

.grm-prof,.grm-shop,.grm-branche,.grm-home,.grm-fullwrap,.grm-app,.grm-listing,.grm-auth,.grm-portal{min-width:0;max-width:100%}
.grm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:root{--grm-w:1424px;--grm-w-tekst:1200px}

:root{
  --grm-serie-1:#103A63;--grm-serie-2:#1668C7;--grm-serie-3:#0B2A49;
  --grm-serie-4:#155E9B;--grm-serie-5:#2E6BB0;--grm-serie-6:#48568C;
  --grm-serie-7:#2E7D9A;--grm-serie-8:#0E4472;--grm-serie-9:#4F6178;
}
.grm-serie>*:nth-child(9n+1){--serie:var(--grm-serie-1)}
.grm-serie>*:nth-child(9n+2){--serie:var(--grm-serie-2)}
.grm-serie>*:nth-child(9n+3){--serie:var(--grm-serie-3)}
.grm-serie>*:nth-child(9n+4){--serie:var(--grm-serie-4)}
.grm-serie>*:nth-child(9n+5){--serie:var(--grm-serie-5)}
.grm-serie>*:nth-child(9n+6){--serie:var(--grm-serie-6)}
.grm-serie>*:nth-child(9n+7){--serie:var(--grm-serie-7)}
.grm-serie>*:nth-child(9n+8){--serie:var(--grm-serie-8)}
.grm-serie>*:nth-child(9n+9){--serie:var(--grm-serie-9)}

/* Salient zet de lijstmarkering op de li ("ul li{list-style:outside disc}"),
   terwijl wij hem op de ul uitzetten. Een regel op de li wint van een regel op
   de ul, dus naast onze eigen markering verscheen overal ook nog het bolletje
   van het thema. Twee puntjes voor elke opsomming, op elke pagina. */
body.grm-chrome-active ul li{list-style:none}

/* Een opsomming zonder eigen klasse verliest daarmee zijn bolletje, dus die
   krijgt er een van ons terug. */
body.grm-chrome-active ul:not([class]) > li{position:relative;padding-left:22px}
body.grm-chrome-active ul:not([class]) > li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--grm-accent,#1668C7)}

/* Genummerde lijsten bleven hierboven met rust, en dat was te grof gedacht. Het
   thema doet bij een ol precies hetzelfde ("ol > li{list-style:outside decimal}"),
   dus overal waar wij het cijfer zelf tekenen, zoals de inhoudsopgave van een
   gids en de verificatiestappen, stond het er twee keer: ons ronde vlakje met
   een 3 erin, en daarnaast nog het kale "3." van het thema.

   Erven werkt hier niet als uitweg. Het thema zet eerst zelf "ol, ul{list-style:
   none}" op de lijst en hangt de markering daarna aan de li, dus een li die van
   zijn lijst erft komt overal op none uit en dan verdwijnt ook de nummering die
   we wel willen. Daarom hier hard uit, en hieronder terug op de plekken waar
   lopende tekst staat. */
body.grm-chrome-active ol li{list-style:none}

/* De plekken waar een genummerde lijst wel van de browser mag komen: lopende
   tekst in een pagina, een prozablok en een hoofdstuk van een gids. Daar typt
   iemand een gewone ol en hoort er 1. 2. 3. te staan. Een lijst die zijn eigen
   nummer tekent staat nooit in een van deze drie, die zit in de zijkolom of
   draagt een eigen klasse. Wie buiten deze drie toch de browser wil laten
   tellen, hangt er grm-genummerd aan. */
body.grm-chrome-active .grm-prose ol > li,
body.grm-chrome-active .grm-page ol > li,
body.grm-chrome-active .grm-gids__hoofdstuk ol > li,
body.grm-chrome-active ol.grm-genummerd > li{list-style:decimal outside}
body.grm-chrome-active .grm-prose ol,
body.grm-chrome-active .grm-page ol,
body.grm-chrome-active .grm-gids__hoofdstuk ol,
body.grm-chrome-active ol.grm-genummerd{padding-left:22px}

/* Een kaartje met het icoon NAAST de titel, en de tekst daaronder over de hele
   breedte. Het icoon stond eronder als eigen regel, waardoor titel en tekst per
   kaartje op een andere hoogte begonnen: bij een titel van twee regels schoof
   alles een regel op en stond de rij scheef.

   De kopregel houdt de hoogte van twee regels titel aan. Daardoor beginnen de
   alinea's van alle kaartjes op dezelfde hoogte, ook als de ene titel een regel
   is en de andere twee. Zonder die maat blijft het per kaartje verspringen. */
.grm-card--ikop{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;
  row-gap:10px;
  align-content:start;
}
.grm-card--ikop .grm-card__ikoon{
  grid-column:1;grid-row:1;align-self:center;
  font-size:32px;line-height:1;color:var(--grm-brand);
}
.grm-card--ikop h3{
  grid-column:2;grid-row:1;align-self:center;
  margin:0;font-size:17px;line-height:1.3;
}
.grm-card--ikop > *:first-child,
.grm-card--ikop h3{min-height:calc(2 * 1.3em)}
.grm-card--ikop h3{display:flex;align-items:center}
.grm-card--ikop p{
  grid-column:1 / -1;grid-row:2;
  margin:0;color:var(--grm-ink-500);line-height:1.6;
}
@media(max-width:600px){
  /* Op een telefoon staat er een kaartje per rij; dan hoeft de kopregel niet
     op twee regels gehouden te worden, want er is niets om mee uit te lijnen. */
  .grm-card--ikop h3,
  .grm-card--ikop > *:first-child{min-height:0}
}

/* Twee kolommen die als kaarten naast elkaar staan: titel, tekst, en de knop
   onderaan. Ze stonden op align-items:center, dus zweefde elke kolom rond zijn
   eigen midden en begon de knop van de ene op een andere hoogte dan die van de
   andere; met een lijst van drie tegen een van vier scheelde dat een regel.

   De knop wordt naar beneden geduwd, zodat hij bij allebei op dezelfde hoogte
   staat, hoe lang de tekst erboven ook is. */
.grm-grid--gelijk{align-items:stretch}
.grm-kolomkaart{display:flex;flex-direction:column;gap:var(--grm-s-4,16px)}
.grm-kolomkaart > h2{margin:0}
.grm-kolomkaart > p{margin:0;color:var(--grm-ink-500)}
.grm-kolomkaart > ul,
.grm-kolomkaart > ol{margin:0}
.grm-kolomkaart > .gm-btn{margin-top:auto;align-self:flex-start}
/* Staat er nog een regel onder de knop, dan hoort die bij de knop en niet
   onderaan de kaart. */
.grm-kolomkaart > .gm-btn + p{margin-top:0}
.grm-kolomkaart__fijn{margin:0;font-size:var(--grm-text-sm);color:var(--grm-ink-500)}