/* ============================================================
   IKAg Bureaugroeigids 2026/2027 - vormgeving
   ------------------------------------------------------------
   De tokens komen uit de skill ikag-design en zijn dezelfde als
   in www/barometer/barometer.css. Verzin hier geen hexwaarde die
   daar niet in staat.

   DE LETTERTYPES ZIJN DE CANONIEKE STACK, EN NIETS ANDERS.
   Koppen Libre Caslon Display, tussenkoppen Libre Caslon Text 700,
   body Instrument Sans, accent Instrument Serif italic, en Georgia
   of sans-serif als systeemfallback. Alle vier zijn ze zelf gehost;
   de definities en de reden staan in /assets/fonts/fonts.css.

   Hier stond tot 21 augustus 2026 'Libre Caslon Condensed' en
   'PP Agrandir' vooraan in de stack, omdat de opdracht daarom vroeg.
   Die twee bestaan hier niet en zijn nooit geladen. Ze zijn eruit:
   een naam vooraan in een stack die nergens gedefinieerd is, is geen
   voorbereiding maar een stille fout. Zet er alleen een familie in
   die in fonts.css staat.
   ============================================================ */

:root{
  /* Merkkern */
  --ikag-red:#FC3D39;
  --ikag-red-ink:#C9211D;
  --ikag-bordeaux:#8D0402;
  --ikag-bordeaux-deep:#6E0301;
  --ikag-black:#140100;

  /* Violet: de handtekening */
  --ikag-purple:#B499FF;
  --ikag-purple-ink:#4b3a86;
  --ikag-violet:#ECE5FF;

  /* Neutralen */
  --ikag-cream:#F5F2EC;
  --ikag-cream-2:#EFEAE0;
  --ikag-grey:#EFEFEF;
  --ikag-white:#ffffff;

  /* Kaartpastels */
  --ikag-sage:#DEE8DA;
  --ikag-lavender:#ECE5FF;
  --ikag-pink:#FAE5E9;
  --ikag-sand:#F1E7D6;

  --text-body:#3a2422;
  --text-heading:var(--ikag-black);
  --text-muted:#7a5e5c;
  --text-on-dark:#fdeceb;
  --border-hairline:rgba(20,1,0,.08);

  /* De meterkleuren. Groen en oranje staan niet in de merkkern, want
     een stoplicht heeft ze nodig en het merk niet. Ze zijn op
     verzadiging afgestemd op het rood zodat ze naast elkaar niet
     schreeuwen, en op contrast tegen crème (>= 4.5:1 voor de tekst). */
  --meter-groen:#2F6B4F;
  --meter-groen-vlak:#DDEAE2;
  --meter-oranje:#9A5B12;
  --meter-oranje-vlak:#F6E7D3;
  --meter-rood:var(--ikag-red-ink);
  --meter-rood-vlak:#FAE0DF;

  --font-display:'Libre Caslon Display',Georgia,serif;
  --font-accent:'Instrument Serif',Georgia,serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;

  --text-hero:clamp(2.6rem,6vw,5rem);
  --text-h1:clamp(2.1rem,4.6vw,3.6rem);
  --text-h2:clamp(1.6rem,3vw,2.4rem);
  --text-h3:clamp(1.24rem,2vw,1.6rem);
  --text-lead:clamp(1.08rem,1.6vw,1.32rem);

  --radius-input:14px;
  --radius-card:22px;
  --radius-panel:30px;
  --radius-pill:999px;

  --shadow-header:0 6px 26px rgba(20,1,0,.09);
  --shadow-chip:0 8px 22px rgba(141,4,2,.10);
  --shadow-card-hover:0 18px 40px rgba(141,4,2,.12);
  --shadow-cta:0 18px 40px rgba(141,4,2,.26);

  --ease-out:cubic-bezier(.2,.7,.3,1);

  --container:1120px;
  --leesbreedte:74ch;
  --gutter:clamp(18px,5vw,64px);
  --section-y:clamp(3rem,6vw,5.5rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.gg{
  margin:0;
  background:var(--ikag-cream);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:clamp(1rem,.4vw + .94rem,1.09rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---- Basisritme ---- */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:400;line-height:1.12;margin:0 0 .5em}
h1{font-size:var(--text-h1);letter-spacing:-.015em}
h2{font-size:var(--text-h2);margin-top:2.2em;letter-spacing:-.01em}
h3{font-size:var(--text-h3);margin-top:1.8em}
h4{font-size:1.06rem;font-family:var(--font-body);font-weight:600}
p{margin:0 0 1.15em}
strong{font-weight:600;color:var(--text-heading)}
em{font-style:italic}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--ikag-grey);padding:.1em .35em;border-radius:5px}

a{color:var(--ikag-red-ink);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--ikag-bordeaux)}

:focus-visible{outline:3px solid var(--ikag-purple-ink);outline-offset:2px;border-radius:4px}

.gg-overslaan{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ikag-black);color:#fff;padding:.7em 1.2em;border-radius:0 0 var(--radius-input) 0;
}
.gg-overslaan:focus{left:0}

/* ============================================================
   Knoppen: afgerond, altijd met pijl
   ============================================================ */
.gg-knop{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-size:.97rem;font-weight:600;line-height:1;
  padding:.85em 1.5em;border-radius:var(--radius-pill);border:0;cursor:pointer;
  background:var(--ikag-red);color:#fff;text-decoration:none;
  box-shadow:var(--shadow-chip);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background .22s var(--ease-out);
}
.gg-knop:hover{background:var(--ikag-red-ink);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-cta)}
.gg-knop:active{transform:translateY(0)}
.gg-knop span[aria-hidden]{transition:transform .22s var(--ease-out)}
.gg-knop:hover span[aria-hidden]{transform:translateX(3px)}

.gg-knop-groot{font-size:1.05rem;padding:1em 1.9em}
.gg-knop-klein{font-size:.85rem;padding:.6em 1.1em;box-shadow:none}
.gg-knop-tweede{background:var(--ikag-purple);color:var(--ikag-black)}
.gg-knop-tweede:hover{background:#a184ff;color:var(--ikag-black)}

@media (prefers-reduced-motion:reduce){
  .gg-knop,.gg-knop span[aria-hidden]{transition:none}
  .gg-knop:hover{transform:none}
}

/* ============================================================
   Kop en voortgang
   ============================================================ */
.gg-kop{
  position:sticky;top:0;z-index:40;
  background:rgba(245,242,236,.92);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border-hairline);
}
.gg-kop-binnen{
  max-width:var(--container);margin:0 auto;padding:.7rem var(--gutter);
  display:flex;align-items:center;gap:1.2rem;
}
.gg-merk{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text-heading);flex:0 0 auto}
.gg-merk img{display:block;height:22px;width:auto}
.gg-merk-tekst{font-family:var(--font-display);font-size:1.02rem;white-space:nowrap}
@media (max-width:640px){.gg-merk-tekst{display:none}}

.gg-hoofdnav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.gg-hoofdnav::-webkit-scrollbar{display:none}
.gg-hoofdnav ol{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.gg-hoofdnav a{
  display:block;padding:.4em .68em;border-radius:var(--radius-pill);
  font-size:.83rem;font-weight:600;text-decoration:none;color:var(--text-muted);white-space:nowrap;
}
.gg-hoofdnav a:hover{background:var(--ikag-violet);color:var(--ikag-purple-ink)}
.gg-hoofdnav li[aria-current] a{background:var(--ikag-black);color:#fff}

.gg-voortgang{height:3px;background:var(--border-hairline)}
.gg-voortgang-vul{display:block;height:100%;width:0;background:var(--ikag-red);transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.gg-voortgang-vul{transition:none}}

/* ============================================================
   Bladindeling
   ============================================================ */
.gg-blad{max-width:var(--container);margin:0 auto;padding:0 var(--gutter) var(--section-y)}
.gg-romp,.gg-hoofdstukkop{max-width:var(--leesbreedte)}
.gg-romp > h2:first-child{margin-top:1.4em}

.gg-hoofdstukkop{padding:clamp(2.4rem,5vw,4rem) 0 1rem}
.gg-oog{
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ikag-red);margin:0 0 .9em;
}
.gg-inleiding{font-size:var(--text-lead);color:var(--text-muted);max-width:60ch}

/* Het praktijklabel. Zandkleur en niet violet: violet is in deze gids de kleur
   van invoer, en dit vraagt niets van de lezer. Het zegt alleen waar dit
   hoofdstuk op staat. */
.gg-register{
  margin:1.8em 0 0;padding:1.1em 1.4em;
  background:var(--ikag-sand);border-radius:var(--radius-card);
  border-left:4px solid var(--ikag-bordeaux);
  max-width:70ch;
}
.gg-register-kop{
  margin:0 0 .3em;font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ikag-bordeaux);
}
.gg-register p:last-child{margin-bottom:0;font-size:.94rem}

.gg-inhoud{
  margin:2rem 0 0;padding:1.2rem 1.5rem;background:var(--ikag-white);
  border-radius:var(--radius-card);border:1px solid var(--border-hairline);
}
.gg-inhoud-kop{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .6em}
.gg-inhoud ol{margin:0;padding-left:1.3em;columns:2;column-gap:2rem}
.gg-inhoud li{margin:.25em 0;break-inside:avoid}
.gg-inhoud a{text-decoration:none;color:var(--text-body)}
.gg-inhoud a:hover{color:var(--ikag-red-ink);text-decoration:underline}
@media (max-width:640px){.gg-inhoud ol{columns:1}}

/* ============================================================
   Tabellen
   ============================================================ */
.gg-tabelwrap{overflow-x:auto;margin:1.8em 0;border-radius:var(--radius-card);background:var(--ikag-white);border:1px solid var(--border-hairline)}
.gg-tabel{border-collapse:collapse;width:100%;font-size:.94rem}
.gg-tabel th,.gg-tabel td{padding:.72em .95em;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-hairline)}
.gg-tabel th{font-family:var(--font-body);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--ikag-cream-2)}
.gg-tabel tbody tr:last-child td{border-bottom:0}
.gg-tabel tr[data-meter] td:first-child{font-weight:600;color:var(--text-heading)}

/* ============================================================
   Invulvelden en meters
   ============================================================ */
/* MINSTENS 16 PIXELS, ANDERS ZOOMT IOS IN. Safari op de iPhone vergroot de
   hele pagina zodra je een invoerveld aanraakt dat kleiner staat dan 16px, en
   zoomt daarna niet vanzelf terug: de lezer blijft achter op een pagina die
   niet meer past. font:inherit alleen gaf 15,04px in de zelfdiagnosetabel,
   want daar is de omringende tekst kleiner. Gemeten op vier velden van de
   achttien in hoofdstuk 1. */
.gg-veld{
  font:inherit;font-size:max(16px,1em);font-variant-numeric:tabular-nums;
  width:6.5em;padding:.32em .6em;
  border:1.5px solid var(--ikag-purple);border-radius:var(--radius-input);
  background:var(--ikag-violet);color:var(--text-heading);
}
.gg-veld:focus{outline:3px solid var(--ikag-purple-ink);outline-offset:1px;background:#fff}

/* Een berekend veld ziet er anders uit dan een leeg vakje: geen violette rand
   die om invoer vraagt, maar een rustig vlak met een gelijkmatig cijfer. De
   lezer hoort te zien dat dit uit zijn eigen twee getallen volgt. */
.gg-veld-afgeleid.berekend{
  background:var(--meter-groen-vlak);
  border-color:transparent;
  border-left:3px solid var(--meter-groen);
  font-weight:600;color:var(--text-heading);
  font-variant-numeric:tabular-nums;cursor:default;
}
.gg-veld-afgeleid.berekend:focus{outline-color:var(--meter-groen)}

/* Een ingevulde sectorspiegel krijgt bewust NIET het groen van een afgeleid
   veld. Groen betekent in deze gids "jouw meter staat goed"; een mediaan van
   de sector is goed noch slecht, het is de lat. Dus neutraal grijs: gevuld en
   niet te bewerken, zonder een oordeel te suggereren. */
.gg-veld-spiegel.berekend{
  background:var(--ikag-grey);
  border-color:transparent;
  border-left:3px solid var(--text-muted);
  font-weight:600;color:var(--text-heading);
  font-variant-numeric:tabular-nums;cursor:default;
}
.gg-veld-spiegel.berekend:focus{outline-color:var(--text-muted)}
.gg-veld::placeholder{color:var(--text-muted)}

.gg-kleur{
  display:inline-flex;align-items:center;gap:.35em;min-width:5.5em;min-height:1.9em;
  padding:.18em .7em;border-radius:var(--radius-pill);
  font-size:.83rem;font-weight:700;
  background:var(--ikag-grey);color:var(--text-muted);
}
.gg-kleur:empty{background:repeating-linear-gradient(135deg,var(--ikag-violet),var(--ikag-violet) 6px,#fff 6px,#fff 12px)}
.gg-kleur-groen{background:var(--meter-groen-vlak);color:var(--meter-groen)}
.gg-kleur-oranje{background:var(--meter-oranje-vlak);color:var(--meter-oranje)}
.gg-kleur-rood{background:var(--meter-rood-vlak);color:var(--meter-rood)}
.gg-kleur-hand{background:none;padding:0;gap:.3em}

/* Het verschil tot de sectorgrens, onder de kleur. Een kleur zegt "oranje";
   dit zegt hoeveel euro of hoeveel procentpunt. Klein gezet, want het is een
   antwoord op het oordeel erboven en niet een tweede oordeel ernaast. */
.gg-afstand{
  margin:.35em 0 0;
  font-size:.78rem;line-height:1.35;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.gg-afstand:empty{display:none}

/* De streep van de lezer op een figuur. Violet, want dat is in deze gids de
   kleur van wat de lezer zelf invult - dezelfde als de invulvelden. Rood zou
   botsen met de mediaanreeks en groen met een oordeel dat hier niet gegeven
   wordt: de streep zegt waar je staat, niet of dat goed is. */
/* purple-ink en niet violet: --ikag-violet is de lichte vulling van de
   invulvelden en verdwijnt op een crème achtergrond. Dit is de donkere van het
   paar, dus de streep is zichtbaar en het witte label erop leesbaar. */
.gg-lezerslijn line{
  stroke:var(--ikag-purple-ink);stroke-width:2;stroke-dasharray:5 4;
}
.gg-lezerslijn rect{fill:var(--ikag-purple-ink)}
.gg-lezerslijn text{
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:12px;font-weight:700;fill:#fff;
}
.gg-lezersnoot{
  margin:.4em 0 0;font-size:.82rem;color:var(--text-muted);
}
.gg-lezersnoot:empty{display:none}

.gg-kleurknop{
  width:1.7em;height:1.7em;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;background:var(--ikag-grey);
  transition:transform .18s var(--ease-out);
}
.gg-kleurknop:hover{transform:scale(1.12)}
.gg-kleurknop-groen{background:var(--meter-groen)}
.gg-kleurknop-oranje{background:var(--meter-oranje)}
.gg-kleurknop-rood{background:var(--meter-rood)}
.gg-kleurknop:not(.aan){opacity:.32}
.gg-kleurknop.aan{border-color:var(--ikag-black)}
@media (prefers-reduced-motion:reduce){.gg-kleurknop{transition:none}.gg-kleurknop:hover{transform:none}}

/* De keuzelijst boven een zelfdiagnosetabel. */
.gg-keuze{
  margin:1.8em 0 -.6em;padding:1.2em 1.4em;
  background:var(--ikag-violet);border-radius:var(--radius-card);
  width:min(100% + 10vw,var(--container));
}
.gg-keuze label{display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.gg-keuze-label{font-weight:600;color:var(--text-heading)}
.gg-keuze-lijst{
  font:inherit;padding:.45em .8em;min-width:16em;
  border:1.5px solid var(--ikag-purple);border-radius:var(--radius-input);
  background:#fff;color:var(--text-heading);cursor:pointer;
}
.gg-keuze-lijst:focus{outline:3px solid var(--ikag-purple-ink);outline-offset:1px}
.gg-keuze-hulp{margin:.7em 0 0;font-size:.88rem;color:var(--ikag-purple-ink)}
.gg-keuze-n{margin:.5em 0 0;font-size:.86rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.gg-keuze-n:empty{display:none}
/* Onder de drempel: het valt op, want dat is het punt. */
.gg-keuze-n.dun{
  color:var(--meter-oranje);font-weight:600;
  background:var(--meter-oranje-vlak);padding:.5em .8em;border-radius:var(--radius-input);
}

/* Eén van de vier medianen oplichten. De andere drie blijven leesbaar en gaan
   niet naar grijs: de verdeling is hier de boodschap, niet alleen jouw cel. */
.gg-klasse{padding:.1em .25em;border-radius:5px;transition:background .2s var(--ease-out)}
.gg-klasse.aan{
  background:var(--ikag-purple);color:var(--ikag-black);
  font-weight:700;box-shadow:0 0 0 3px var(--ikag-violet);
}
@media (prefers-reduced-motion:reduce){.gg-klasse{transition:none}}

.gg-route{margin:1.6em 0}
.gg-route-uit,.gg-route-leeg{
  padding:1.1em 1.4em;border-radius:var(--radius-card);margin:0;
  background:var(--ikag-violet);border-left:4px solid var(--ikag-purple);
}
.gg-route-leeg{color:var(--text-muted);font-size:.95rem}

/* ============================================================
   Figuren
   ============================================================ */
.gg-figuur{
  margin:2.6em 0;padding:1.5rem clamp(1rem,2.5vw,1.8rem) 1.2rem;
  background:var(--ikag-white);border-radius:var(--radius-panel);
  border:1px solid var(--border-hairline);
  /* Breder dan de leeskolom: een figuur mag ademen. */
  width:min(100% + 10vw,var(--container));
}
.gg-figuur-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;margin-bottom:1.1rem}
.gg-figuur-code{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  background:var(--ikag-black);color:#fff;padding:.32em .7em;border-radius:var(--radius-pill);
}
.gg-figuur-titel{margin:0;font-size:1.05rem;flex:1 1 16ch}

.gg-labels{display:flex;gap:.4rem;flex-wrap:wrap}
.gg-label{
  font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.3em .7em;border-radius:var(--radius-pill);
}
.gg-label-proxy{background:var(--ikag-sand);color:#7a5210}
.gg-label-norm{background:var(--ikag-lavender);color:var(--ikag-purple-ink)}

.gg-figuur-beeld{overflow-x:auto}
.gg-svg{display:block;width:100%;height:auto;min-width:520px;font-family:var(--font-body)}

.gg-rijlabel{font-size:12.5px;fill:var(--text-heading);text-anchor:end}
.gg-rijn{font-size:10.5px;fill:var(--text-muted);text-anchor:end;font-variant-numeric:tabular-nums}
.gg-nreeks{font-size:10.5px;fill:var(--text-muted);font-variant-numeric:tabular-nums}
.gg-balkwaarde{font-size:12px;fill:var(--text-heading);font-weight:600;font-variant-numeric:tabular-nums}
.gg-aslabel{font-size:11px;fill:var(--text-muted);text-anchor:end;font-variant-numeric:tabular-nums}
.gg-aslabel.gg-midden{text-anchor:middle}
.gg-xlabel{font-size:11.5px;fill:var(--text-muted);text-anchor:middle}
.gg-legende{font-size:11.5px;fill:var(--text-body)}
.gg-reekslabel{font-size:11.5px;font-weight:600}
.gg-hulplijn{stroke:var(--border-hairline);stroke-width:1}
.gg-staart{stroke:var(--ikag-purple);stroke-width:1.5}
.gg-kwartielbalk{fill:var(--ikag-purple)}
.gg-mediaan{stroke:var(--ikag-bordeaux);stroke-width:2.5;stroke-linecap:round}
.gg-lijn{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gg-rasterkop{font-size:11px;fill:var(--text-muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gg-rastercel{font-size:12.5px;fill:var(--text-body)}
.gg-rastercel.gg-cijfer{font-variant-numeric:tabular-nums;font-weight:600;fill:var(--text-heading)}
.gg-rechts{text-anchor:end}
.gg-links{text-anchor:start}
.gg-kerncijfer{font-family:var(--font-display);font-size:40px;fill:var(--ikag-red);text-anchor:middle}
.gg-kernlabel{font-size:12px;fill:var(--text-muted);text-anchor:middle}

.gg-figuur-voet{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--border-hairline)}
.gg-bijschrift{font-size:.93rem;margin:0 0 .5em;color:var(--text-body)}
.gg-noten{margin:.4em 0;padding-left:1.1em;font-size:.83rem;color:var(--text-muted)}
.gg-noten li{margin:.2em 0}
.gg-herkomst{margin:.6em 0 0;font-size:.76rem;color:var(--text-muted);font-variant-numeric:tabular-nums}

/* De opbouwanimatie. De rusttoestand is ZICHTBAAR: zonder JavaScript en bij
   prefers-reduced-motion staat alles er meteen. De klasse 'wacht' verbergt,
   en die wordt alleen door JS gezet. */
.gg-figuur.wacht .gg-kwartielbalk,
.gg-figuur.wacht .gg-balk{transform:scaleX(.001)}
.gg-figuur.wacht .gg-lijn{stroke-dasharray:1;stroke-dashoffset:1}
.gg-figuur.wacht .gg-punt,
.gg-figuur.wacht .gg-mediaan,
.gg-figuur.wacht .gg-balkwaarde{opacity:0}

.gg-kwartielbalk,.gg-balk{transform-box:fill-box;transform-origin:left center;transition:transform .85s var(--ease-out)}
.gg-lijn{transition:stroke-dashoffset 1.1s var(--ease-out)}
.gg-punt,.gg-mediaan,.gg-balkwaarde{transition:opacity .5s var(--ease-out) .5s}
.gg-figuur.in .gg-lijn{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .gg-figuur.wacht .gg-kwartielbalk,.gg-figuur.wacht .gg-balk{transform:none}
  .gg-figuur.wacht .gg-lijn{stroke-dasharray:none;stroke-dashoffset:0}
  .gg-figuur.wacht .gg-punt,.gg-figuur.wacht .gg-mediaan,.gg-figuur.wacht .gg-balkwaarde{opacity:1}
  .gg-kwartielbalk,.gg-balk,.gg-lijn,.gg-punt,.gg-mediaan,.gg-balkwaarde{transition:none}
}

/* ============================================================
   90-dagenplan en acties
   ============================================================ */
.gg-stap{
  position:relative;margin:1em 0;padding:1.1em 1.3em 1.1em 3.2em;
  background:var(--ikag-white);border-radius:var(--radius-card);
  border:1px solid var(--border-hairline);
  transition:background .25s var(--ease-out),opacity .25s var(--ease-out);
}
.gg-stap p{margin:0}
.gg-stap.af{background:var(--meter-groen-vlak);border-color:transparent}
.gg-stap.af p{opacity:.66}

.gg-vinkhouder{position:absolute;left:1.1em;top:1.15em}
.gg-vink{width:1.35em;height:1.35em;accent-color:var(--meter-groen);cursor:pointer;margin:0}
.gg-vinklabel{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

.gg-acties{list-style:none;margin:1.4em 0;padding:0}
.gg-actie{
  display:flex;align-items:flex-start;gap:.9em;
  padding:.9em 1.2em .9em 3.2em;margin:.5em 0;
}
.gg-actietekst{flex:1 1 auto}
.gg-actiebron{
  flex:0 0 auto;font-size:.74rem;font-weight:700;letter-spacing:.06em;
  background:var(--ikag-violet);color:var(--ikag-purple-ink);
  padding:.3em .7em;border-radius:var(--radius-pill);text-decoration:none;
}
a.gg-actiebron:hover{background:var(--ikag-purple);color:var(--ikag-black)}

.gg-kwartaalkop{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.gg-kwartaalmerk{
  font-family:var(--font-body);font-size:.85rem;font-weight:700;
  background:var(--ikag-bordeaux);color:#fff;
  width:2.3em;height:2.3em;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.gg-kwartaalstand{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--text-muted)}

/* ============================================================
   Extra cijfers: de reservefiguren, dichtgeklapt
   ============================================================ */
.gg-extra{
  margin:2.6em 0 0;padding:0;
  background:var(--ikag-white);border:1px solid var(--border-hairline);
  border-radius:var(--radius-panel);
  width:min(100% + 10vw,var(--container));
}
.gg-extra > summary{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;cursor:pointer;
  padding:1.2rem clamp(1rem,2.5vw,1.8rem);border-radius:var(--radius-panel);
  list-style:none;
}
.gg-extra > summary::-webkit-details-marker{display:none}
.gg-extra > summary::after{
  content:"+";margin-left:auto;font-size:1.4rem;line-height:1;color:var(--ikag-red);
}
.gg-extra[open] > summary::after{content:"–"}
.gg-extra > summary:hover{background:var(--ikag-cream)}
.gg-extra-kop{font-family:var(--font-display);font-size:1.16rem;color:var(--text-heading)}
.gg-extra-tel{
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ikag-violet);color:var(--ikag-purple-ink);
  padding:.3em .7em;border-radius:var(--radius-pill);
}
.gg-extra-uit{
  margin:0;padding:0 clamp(1rem,2.5vw,1.8rem);
  font-size:.92rem;color:var(--text-muted);max-width:70ch;
}
/* De figuren binnen het blok dragen hun eigen paneel niet nog eens. */
.gg-extra .gg-figuur{width:auto;border:0;border-top:1px solid var(--border-hairline);border-radius:0;margin:1.4em 0 0}

/* ============================================================
   De gate
   ============================================================ */
.gg-gate{
  margin:2.8em 0;padding:clamp(1.8rem,4vw,2.8rem);
  background:var(--ikag-bordeaux);color:var(--text-on-dark);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-cta);
}
.gg-gate h2{color:#fff;margin-top:0;font-size:var(--text-h3)}
.gg-gate .gg-oog{color:var(--ikag-purple)}
.gg-gate p{color:var(--text-on-dark)}
.gg-gate-klein{font-size:.86rem;opacity:.82;margin-bottom:0}
.gg-gate .gg-knop{background:var(--ikag-red)}
.gg-gate .gg-knop:hover{background:#fff;color:var(--ikag-bordeaux)}

/* ============================================================
   Bladeren
   ============================================================ */
.gg-bladeren{
  display:flex;gap:1rem;flex-wrap:wrap;
  margin-top:var(--section-y);padding-top:2rem;border-top:1px solid var(--border-hairline);
}
.gg-blader{
  flex:1 1 260px;padding:1.2em 1.5em;text-decoration:none;
  background:var(--ikag-white);border-radius:var(--radius-card);
  border:1px solid var(--border-hairline);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.gg-blader:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.gg-blader-volgende{text-align:right}
.gg-blader-label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ikag-red);margin-bottom:.3em}
.gg-blader-titel{display:block;font-family:var(--font-display);font-size:1.12rem;color:var(--text-heading)}
@media (prefers-reduced-motion:reduce){.gg-blader{transition:none}.gg-blader:hover{transform:none}}

/* ============================================================
   Landingspagina
   ============================================================ */
.gg-landing{max-width:var(--container)}
.gg-hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,4vw,3rem);max-width:62ch}
.gg-hero h1{font-size:var(--text-hero);letter-spacing:-.02em}

/* De ondertitel: de vraag waarmee de gids binnenkomt, onder de naam. Groter
   dan de lead en kleiner dan de titel, in de accentserif, zodat ze als kop
   leest en niet als een eerste alinea. */
.gg-ondertitel{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  line-height:1.15;
  color:var(--ikag-red);
  margin:.15em 0 .8em;
}
.gg-lead{font-size:var(--text-lead);color:var(--text-muted)}
.gg-hero-knoppen{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}

.gg-kerncijfers{
  padding:clamp(1.6rem,3vw,2.4rem);background:var(--ikag-black);color:#fff;
  border-radius:var(--radius-panel);margin-bottom:var(--section-y);
}
.gg-kerncijfers ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.6rem;
}
/* Geen tabular-nums op de displayfont: Libre Caslon Display heeft geen
   tabelcijfers, dus de browser spatieert ze zelf uit en dat leest als
   letterspatiëring. Uitlijnen hoeft hier ook niet - het zijn losse cijfers
   naast elkaar en geen kolom. */
.gg-kern-getal{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.1rem);color:var(--ikag-red);line-height:1}
.gg-kern-label{display:block;font-size:.86rem;color:#d9c9c8;margin-top:.4em}
.gg-kern-voet{margin:1.8rem 0 0;font-size:.86rem;color:#d9c9c8}

.gg-haak{
  display:grid;grid-template-columns:1fr;gap:2rem;
  padding:clamp(1.8rem,4vw,3rem);background:var(--ikag-violet);
  border-radius:var(--radius-panel);margin-bottom:var(--section-y);
}
@media (min-width:900px){.gg-haak{grid-template-columns:1.1fr .9fr;align-items:center}}
.gg-haak h2{margin-top:0}
.gg-privacy{
  display:flex;gap:.6em;align-items:flex-start;
  font-size:.88rem;color:var(--ikag-purple-ink);margin-bottom:0;
}
.gg-privacy i{font-size:1.2em;flex:0 0 auto;line-height:1.3}
/* Dezelfde melding zonder icoon, op de pagina's die Phosphor niet laden. */
.gg-privacy-kaal{
  display:block;padding:1em 1.3em;border-radius:var(--radius-card);
  background:var(--ikag-violet);max-width:70ch;
}
.gg-haak-wacht{margin:0;font-size:.95rem}

.gg-delen h2{margin-bottom:1.4rem}
.gg-deel{margin-bottom:2.6rem}
.gg-deel h3{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:0}
/* Het icoonmedaillon: witte cirkel, rood icoon, en de cirkel blijft wit -
   die kleur je nooit in. Zie de huisstijl. */
.gg-medaillon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5em;height:2.5em;border-radius:50%;
  background:var(--ikag-white);box-shadow:var(--shadow-chip);
  color:var(--ikag-red);font-size:.92rem;flex:0 0 auto;
}
.gg-medaillon i{font-size:1.5em;line-height:1}
.gg-deelnr{
  font-family:var(--font-body);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  background:var(--ikag-red);color:#fff;padding:.32em .75em;border-radius:var(--radius-pill);
}
.gg-kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.gg-kaart a{
  display:flex;flex-direction:column;gap:.45em;height:100%;
  padding:1.4em 1.5em;text-decoration:none;color:var(--text-body);
  background:var(--ikag-sand);border-radius:var(--radius-card);
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
.gg-kaart:nth-child(2n) a{background:var(--ikag-sage)}
.gg-kaart:nth-child(3n) a{background:var(--ikag-pink)}
.gg-kaart-vrij a{background:var(--ikag-lavender)}
.gg-kaart a:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.gg-kaart-nr{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ikag-bordeaux)}
.gg-kaart-titel{font-family:var(--font-display);font-size:1.24rem;color:var(--text-heading);line-height:1.16}
.gg-kaart-kort{font-size:.9rem;color:var(--text-muted);flex:1 1 auto}
.gg-kaart-slot{font-size:.8rem;font-weight:700;color:var(--ikag-red-ink);margin-top:.4em}
@media (prefers-reduced-motion:reduce){.gg-kaart a{transition:none}.gg-kaart a:hover{transform:none}}

.gg-slotoproep{
  padding:clamp(2rem,4vw,3rem);background:var(--ikag-bordeaux);color:var(--text-on-dark);
  border-radius:var(--radius-panel);text-align:center;
}
.gg-slotoproep h2{color:#fff;margin-top:0}
.gg-slotoproep p{max-width:52ch;margin-left:auto;margin-right:auto}

/* ============================================================
   De aanmeldstap
   ============================================================ */
.gg-aanmelden{max-width:var(--leesbreedte)}
.gg-optin{
  margin:1.4em 0;padding:clamp(1.4rem,3vw,2rem);
  background:var(--ikag-violet);border-radius:var(--radius-panel);
}
.gg-vinkregel{
  display:flex;gap:.9em;align-items:flex-start;cursor:pointer;
  padding:1em 1.2em;background:var(--ikag-white);border-radius:var(--radius-card);
}
.gg-vinkregel .gg-vink{margin:.2em 0 0;flex:0 0 auto}
.gg-optin-klein{margin:1em 0 1.4em;font-size:.9rem;color:var(--ikag-purple-ink)}

/* ============================================================
   Jouw blad
   ============================================================ */
.gg-jouwblad{max-width:var(--leesbreedte)}
.gg-bladknoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.6em 0 2.4em}
.gg-bladblok{
  margin:1.2em 0;padding:1.3em 1.6em;background:var(--ikag-white);
  border-radius:var(--radius-card);border:1px solid var(--border-hairline);
}
.gg-bladblok h2{margin:0 0 .7em;font-size:1.16rem}
.gg-bladkleuren{list-style:none;margin:0 0 .8em;padding:0;display:flex;flex-direction:column;gap:.4em}
.gg-bladvelden,.gg-bladstappen{margin:.25em 0;font-size:.93rem}
.gg-bladwaarden{list-style:none;margin:0 0 .8em;padding:0}
.gg-bladwaarden li{
  display:flex;justify-content:space-between;gap:1em;
  padding:.35em 0;border-bottom:1px solid var(--border-hairline);font-size:.93rem;
}
.gg-bladwaarden li:last-child{border-bottom:0}
.gg-bladnaam{color:var(--text-muted)}
.gg-bladgetal{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-heading)}
.gg-bladlink{margin:.8em 0 0;font-size:.9rem}
.gg-leeg{color:var(--text-muted)}

/* ============================================================
   Controlepagina: dicht, functioneel, geen sier
   ============================================================ */
.gg-controle{max-width:none}
.gg-controletabel{font-size:.8rem}
.gg-controletabel td,.gg-controletabel th{padding:.42em .6em}
.gg-controletabel .r{text-align:right;font-variant-numeric:tabular-nums}
.gg-controletabel .k{font-size:.9em;color:var(--text-muted);background:none}
.gg-controle tr.s-geblokkeerd{background:var(--meter-rood-vlak)}
.gg-controle tr.s-reserve{background:var(--ikag-violet)}
.gg-controle tr.s-buiten-de-gids{background:var(--meter-oranje-vlak)}

/* ============================================================
   Voet
   ============================================================ */
.gg-voet{background:var(--ikag-black);color:#d9c9c8;margin-top:var(--section-y);padding:clamp(2.4rem,5vw,4rem) 0}
.gg-voet-binnen{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.gg-voet a{color:#fff}
.gg-voet p{max-width:70ch}
.gg-voet-merk img{height:26px;width:auto}
.gg-voet-klein{font-size:.82rem;color:#a89594;margin-bottom:0}