/* graasboerriek.nl: feest in de kleur, traditie in de vorm.

   De drie kleuren van het wapen dragen de pagina: de rode kopbalk met de nar,
   de gele zonnestralen in de hero, het groen voor de sponsorstrook en de
   confetti, en donkergroen als grond voor het aftelblok, de voet en de hele
   donkere stand. Roomwit is de paginagrond op licht, wit is voor kaarten.
   De uitleg staat in docs/huisstijl.md.

   Kleuren komen uit tokens.css (gegenereerd uit tools/tokens.py). Hier staan
   rollen, geen kleuren: de primitieven --gb-* alleen waar de reden erbij
   staat. */

:root {
  --wrap: 72rem;
  --sectie: clamp(3rem, 6vw, 5.5rem);
  --display: clamp(2rem, 1rem + 4.6vw, 4.5rem);
  /* De zonnestralen: vierentwintig stralen in twee gelen vanuit een punt
     onderaan het midden, in beide standen hetzelfde geel, want het is het
     vlak van het wapen en niet van de pagina. */
  --stralen: conic-gradient(from 180deg at 50% 100%,
    var(--gb-geel) 0 15deg, var(--gb-geel2) 15deg 30deg, var(--gb-geel) 30deg 45deg,
    var(--gb-geel2) 45deg 60deg, var(--gb-geel) 60deg 75deg, var(--gb-geel2) 75deg 90deg,
    var(--gb-geel) 90deg 105deg, var(--gb-geel2) 105deg 120deg, var(--gb-geel) 120deg 135deg,
    var(--gb-geel2) 135deg 150deg, var(--gb-geel) 150deg 165deg, var(--gb-geel2) 165deg 180deg,
    var(--gb-geel) 180deg 195deg, var(--gb-geel2) 195deg 210deg, var(--gb-geel) 210deg 225deg,
    var(--gb-geel2) 225deg 240deg, var(--gb-geel) 240deg 255deg, var(--gb-geel2) 255deg 270deg,
    var(--gb-geel) 270deg 285deg, var(--gb-geel2) 285deg 300deg, var(--gb-geel) 300deg 315deg,
    var(--gb-geel2) 315deg 330deg, var(--gb-geel) 330deg 345deg, var(--gb-geel2) 345deg 360deg);
  /* Het lichte groen van de confetti, tussen het groen en het geel in. */
  --gb-groenlicht: #8BE23A;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------------------------------------------------------------
   Lettertypen: Baloo 2 voor de koppen, Lato voor de tekst. Twee subsets
   per gewicht; latin-ext laadt alleen als er een teken uit staat.
   --------------------------------------------------------------- */
@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/baloo-2-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/baloo-2-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap;
  src: url(/assets/fonts/baloo-2-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lato; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/lato-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lato; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/lato-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap;
  src: url(/assets/fonts/lato-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lato; font-weight: 400; font-style: italic; font-display: swap;
  src: url(/assets/fonts/lato-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Lato; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/lato-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Lato; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/lato-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------
   Basis
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Alleen voor de schermlezer, dezelfde truc als de kit voor de menuschakel. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
           overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-text-accent); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2.5px; } }
.wrap { width: min(100% - var(--space-8), var(--wrap)); margin-inline: auto; }

/* Toetsenbordgebruikers eerst. */
.skip { position: absolute; left: -9999px; background: var(--gb-geel); color: var(--gb-dgroen);
        padding: var(--space-3) var(--space-4); z-index: 10; font-weight: 700; }
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* Koppen in Baloo 2, zinskast, nooit kapitalen: de letter is al feestelijk. */
h1, h2, h3, h4 { font-family: var(--font-family-kop); text-wrap: balance; margin: 0 0 var(--space-3);
                 font-weight: var(--text-h2-weight); hyphens: manual; }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking); font-weight: var(--text-h1-weight); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); }
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); font-weight: var(--text-h4-weight); }
p  { margin: 0 0 var(--space-4); }
.lead { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.eyebrow { font-family: var(--font-family-kop); font-size: var(--text-overline-size);
           line-height: var(--text-overline-line); letter-spacing: var(--text-overline-tracking);
           text-transform: uppercase; font-weight: var(--text-overline-weight);
           color: var(--color-text-accent); margin: 0 0 var(--space-3); }
.prose p, .prose li { hyphens: auto; -webkit-hyphens: auto; }
.cijfers, time, .jaar { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   De kop: de rode balk van de oude site, met de nar links en het menu
   rechts in de kopletter. Rood in beide standen: het is het schild.
   --------------------------------------------------------------- */
.kop { background: var(--gb-rood); color: var(--gb-wit);
       --color-focus-ring: var(--gb-geel); }
.kop-in { display: flex; align-items: center; justify-content: space-between;
          gap: var(--space-6); padding-block: var(--space-2); min-height: 4.5rem; }
.merk { display: flex; align-items: center; line-height: 0; }
/* De nar op 64 px hoog: de maat waarop zijn lach nog te zien is. Een
   bestand voor beide standen, dus de donkere kopie blijft weg. */
.merk img { height: 64px; width: auto; }
.merk-donker { display: none; }

/* Het menu van de kit: checkbox, label en lijst, zonder javascript. */
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav-schakel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
               overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-knop { display: none; align-items: center; gap: var(--space-2); cursor: pointer;
            padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
            font-family: var(--font-family-kop); font-weight: 700; font-size: 1.2rem; }
/* Boven 60rem bestaat het mobiele menu niet; zonder deze regel blijft de
   onzichtbare checkbox een tabstop zonder focusring. */
@media (min-width: 60.0625rem) {
  .nav-schakel { display: none; }
  /* De themaknop achteraan het menu (Mike, 28 oktober 2026); de kit zet hem
     ervoor. Op smal scherm blijft hij naast de menuknop staan. */
  .nav-thema { order: 10; margin-left: var(--space-2); }
}
.nav-schakel:focus-visible + .nav-thema + .nav-knop { outline: var(--focus-width) solid var(--gb-geel); outline-offset: 2px; }
.nav-icoon-dicht, .nav-tekst-dicht { display: none; }
.nav-schakel:checked ~ .nav-knop .nav-icoon-dicht,
.nav-schakel:checked ~ .nav-knop .nav-tekst-dicht { display: inline; }
.nav-schakel:checked ~ .nav-knop .nav-icoon-open,
.nav-schakel:checked ~ .nav-knop .nav-tekst-open { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
          gap: var(--space-1); align-items: center; }
/* Wit op rood haalt 4,15 en dat is alleen genoeg voor grote tekst. Vet telt
   als groot vanaf 14 pt, dus 18,66 px; 1.2rem is 19,2 px. Niet kleiner maken. */
.nav ul a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
            color: var(--gb-wit); text-decoration: none; font-family: var(--font-family-kop);
            font-weight: 700; font-size: 1.2rem; line-height: 1.2; white-space: nowrap;
            transition: background-color var(--motion-fast) var(--motion-ease); }
.nav ul a[aria-current="page"] { background: rgb(0 0 0 / .18); }
@media (hover: hover) { .nav ul a:hover { background: rgb(0 0 0 / .22); } }
.nav ul a.knop { margin-left: var(--space-2); }
.nav-thema { display: flex; align-items: center; }
.nav-thema:has(> .thema[hidden]) { display: none; }

@media (max-width: 60rem) {
  .nav { position: relative; }
  .nav-knop { display: inline-flex; }
  .nav ul { display: none; position: absolute; right: 0; top: calc(100% + var(--space-2));
            z-index: 20; flex-direction: column; align-items: stretch; min-width: 14rem;
            padding: var(--space-2); background: var(--gb-rood); border-radius: var(--radius-md);
            box-shadow: var(--shadow-3); }
  .nav-schakel:checked ~ ul { display: flex; }
  .nav ul a { white-space: normal; }
}

/* De themaknop van de kit: een icoon, de naam weggeklipt maar aanwezig. */
.thema { flex: 0 0 auto; display: grid; place-items: center;
         inline-size: 2.75rem; block-size: 2.75rem; padding: 0; cursor: pointer;
         color: var(--gb-wit); background: transparent; border: 0;
         border-radius: var(--radius-md);
         transition: background-color var(--motion-fast) var(--motion-ease),
                     transform var(--motion-fast) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) { .thema:hover { background: rgb(0 0 0 / .22); } }
.thema:active { transform: scale(.94); }
.thema-tekst { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
               overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.thema .thema-zon, .thema .thema-maan { display: none; }
.thema .thema-maan { display: block; }
:root[data-theme="dark"] .thema .thema-maan { display: none; }
:root[data-theme="dark"] .thema .thema-zon { display: block; }

/* ---------------------------------------------------------------
   Knoppen: geel met donkergroen, de sterkste combinatie van het merk
   (10:1). De stille knop is een lijn.
   --------------------------------------------------------------- */
.knop { display: inline-block; padding: var(--space-3) var(--space-6);
        border-radius: var(--radius-md); text-decoration: none;
        font-family: var(--font-family-kop); font-weight: 700; font-size: 1.0625rem;
        line-height: 1.2; white-space: nowrap;
        transition: background-color var(--motion-fast) var(--motion-ease),
                    border-color var(--motion-fast) var(--motion-ease),
                    color var(--motion-fast) var(--motion-ease),
                    transform var(--motion-fast) var(--motion-ease); }
.knop:active { transform: scale(.97); }
.knop-primair { background: var(--button-primary-bg); color: var(--button-primary-fg);
                box-shadow: var(--shadow-1); }
@media (hover: hover) {
  .knop-primair:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-fg-hover); }
}
.knop-stil { background: var(--button-quiet-bg); color: var(--button-quiet-fg);
             border: 2px solid var(--button-quiet-border); }
@media (hover: hover) { .knop-stil:hover { background: var(--button-quiet-bg-hover); } }
.acties { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

/* ---------------------------------------------------------------
   De hero: zonnestralen met het wapen. Op de startpagina de volle
   variant; elders een smalle band met alleen de titel. Inkt op geel
   (12:1), de kop in donkergroen (10:1), de link in diep rood (6:1).
   --------------------------------------------------------------- */
.hero { background: var(--stralen); color: var(--gb-inkt);
        --color-text-accent: var(--gb-rooddiep);
        --color-focus-ring: var(--gb-dgroen);
        --button-quiet-bg: transparent;
        --button-quiet-fg: var(--gb-dgroen);
        --button-quiet-border: var(--gb-dgroen);
        --button-quiet-bg-hover: rgb(255 255 255 / .35); }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
           gap: var(--space-10); align-items: center;
           padding-block: var(--space-12) var(--sectie); }
.hero-tekst > * { max-width: 44rem; }
.hero .eyebrow { color: var(--gb-dgroen); }
.hero h1 { font-size: var(--display); line-height: 1.0; color: var(--gb-dgroen);
           margin-bottom: var(--space-5); overflow-wrap: anywhere; hyphens: auto; }
.hero .lead { max-width: 52ch; margin-bottom: var(--space-8); }
.hero-wapen { width: min(100%, 24rem); justify-self: center;
              filter: drop-shadow(0 18px 28px rgb(18 56 21 / .35)); }
.hero-eenvoudig .hero-in { grid-template-columns: 1fr; padding-block: var(--space-10); }
.hero-eenvoudig h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); margin-bottom: 0; }
@media (max-width: 48rem) {
  .hero-in { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  .hero-wapen { width: min(60%, 16rem); order: -1; justify-self: start; }
}

/* ---------------------------------------------------------------
   Lopende tekst. Smal, want tekst leest smal. Sectiekoppen dragen een
   rood streepje, dezelfde vorm als de accentlijn op kaarten.
   --------------------------------------------------------------- */
.prose { max-width: 62ch; padding-block: var(--space-8) var(--sectie); }
.prose h2 { margin-top: var(--space-10); }
.prose h2:first-child { margin-top: 0; }
.prose h2::before { content: ""; display: block; width: 3rem; height: 5px;
                    border-radius: var(--radius-full); background: var(--color-graphic-accent);
                    margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-1); }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-6); font-size: var(--text-body-sm-size); }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3);
                       border-bottom: 1px solid var(--color-border); vertical-align: top; }
.prose th { font-family: var(--font-family-kop); font-weight: 700; }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-5);
                    border-left: 5px solid var(--gb-geel); background: var(--color-surface-sunken); }
.prose img { border-radius: var(--radius-sm); }
/* Groen haalt op licht geen 3:1 en is dus een vlak, geen lijn; de streep is
   het accent, zoals boven de koppen. */
.prose hr { border: 0; height: 5px; width: 3rem; border-radius: var(--radius-full);
            background: var(--color-graphic-accent); margin: var(--space-8) 0; }

/* ---------------------------------------------------------------
   Formulieren van de kit (vrundj, optoch). Velden op het verhoogde
   vlak, de fout in de feedbackkleur, de knop geel.
   --------------------------------------------------------------- */
.formulier { padding-block: var(--space-4) var(--sectie); }
.formulier-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-10); }
@media (max-width: 48rem) { .formulier-in { grid-template-columns: 1fr; } }
.veld { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
.veld label { font-weight: 700; }
.veld .optioneel { color: var(--color-text-muted); font-weight: 400; }
.veld input, .veld textarea, .veld select {
  font: inherit; width: 100%; padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--input-bg); color: var(--input-fg); border: 2px solid var(--input-border); }
.veld input:hover, .veld textarea:hover { border-color: var(--input-border-hover); }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"] { border-color: var(--input-border-error); }
.veld-hint, .veld-uitleg { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.veldfout { color: var(--color-feedback-danger-fg); font-weight: 700; font-size: var(--text-body-sm-size); }
.verplicht { color: var(--color-text-accent); }
.honeypot { position: absolute; left: -9999px; }
.melding { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.melding-fout { background: var(--color-feedback-danger-bg); color: var(--color-feedback-danger-fg); }
.melding-goed { background: var(--color-feedback-success-bg); color: var(--color-feedback-success-fg); }
.formulier button.knop { border: 0; cursor: pointer; font: inherit; font-family: var(--font-family-kop); font-weight: 700; }
/* Het blok naast het formulier: op het verhoogde vlak, met dezelfde korte
   streep als boven een sectiekop in plaats van een gekleurde rand. */
.geruststelling, .gerust-vlak { background: var(--color-surface-raised); padding: var(--space-5);
                                box-shadow: var(--shadow-1); }
.geruststelling::before, .gerust-vlak::before { content: ""; display: block; width: 3rem; height: 5px;
                                                border-radius: var(--radius-full);
                                                background: var(--color-graphic-accent); margin-bottom: var(--space-4); }

/* ---------------------------------------------------------------
   De confettistrook en de voet. Groen, dan donkergroen met roomwit en
   geel. In de donkere stand is de pagina al donkergroen; dan zakt de
   voet een laag dieper zodat de naad blijft.
   --------------------------------------------------------------- */
.confetti { display: block; width: 100%; height: 56px; background: var(--gb-groen); }
.voet { background: var(--gb-dgroen); color: var(--gb-room);
        --color-text-accent: var(--gb-geellicht); --color-focus-ring: var(--gb-geel); }
:root[data-theme="dark"] .voet { background: var(--color-surface-sunken); }
.voet-in { display: grid; gap: var(--space-8); grid-template-columns: 2fr 1fr 1.4fr;
           padding-block: var(--sectie) var(--space-8); }
@media (max-width: 48rem) { .voet-in { grid-template-columns: 1fr; gap: var(--space-6); } }
.voet h2 { font-size: var(--text-overline-size); line-height: var(--text-overline-line);
           letter-spacing: var(--text-overline-tracking); text-transform: uppercase;
           color: var(--gb-geel); margin-bottom: var(--space-3); }
.voet address { font-style: normal; line-height: 1.7; }
.voet ul { list-style: none; margin: 0; padding: 0; line-height: 1.7; }
.voet a { color: var(--color-text-accent); }
.voet-bestuur ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-4); }
.voet-functie { display: block; font-family: var(--font-family-kop); font-weight: 700; color: var(--gb-geel); }
.voet-juridisch { margin-top: var(--space-4); }
.voet-onder { padding-block: var(--space-5); border-top: 1px solid rgb(255 251 230 / .14);
              color: var(--gb-mutedopdonker); font-size: var(--text-body-sm-size);
              display: flex; flex-wrap: wrap; justify-content: space-between;
              align-items: center; gap: var(--space-4); }
.voet-onder p { margin: 0; }
.voet-onder > p:first-child { margin-right: auto; }
.voet-maker a { display: inline-flex; align-items: center; gap: var(--space-3);
                color: var(--gb-mutedopdonker); text-decoration: none; }
.voet-maker a:hover span { text-decoration: underline; }
.voet-maker img { display: block; height: 38px; width: auto; }
.voet-leden { display: flex; gap: var(--space-6); align-items: center; }
.voet-leden li a { display: block; line-height: 0; }
.voet-leden img { display: block; height: 38px; width: auto; }

/* ===============================================================
   De modules (fase 3): aftelblok, nuuts, heersers, galerij, programma,
   sjlager, sponsors, formulieren. Zelfde tokens, zelfde vormen: de korte
   accentstreep, het verhoogde vlak, de kopletter voor jaartallen.
   =============================================================== */

.sectie-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
              gap: var(--space-4); margin-bottom: var(--space-6); }
.sectie-kop h2 { margin: 0; }
.sectie-kop h2::before { content: ""; display: block; width: 3rem; height: 5px; border-radius: var(--radius-full);
                         background: var(--color-graphic-accent); margin-bottom: var(--space-3); }

/* ---------------------------------------------------------------
   Aftelblok: donkergroen, geel, de 11 groot erachter. Direct onder de hero.
   --------------------------------------------------------------- */
.aftel { background: var(--gb-dgroen); color: var(--gb-room); position: relative; overflow: hidden;
         --color-text-accent: var(--gb-geellicht); --color-focus-ring: var(--gb-geel);
         --button-quiet-bg: transparent; --button-quiet-fg: var(--gb-geel);
         --button-quiet-border: var(--gb-geel); --button-quiet-bg-hover: rgb(255 233 8 / .12); }
:root[data-theme="dark"] .aftel { background: var(--color-surface-sunken); }
.aftel-in { position: relative; padding-block: var(--space-10); display: grid; gap: var(--space-6); }
.aftel-elf { position: absolute; right: -0.1em; top: -0.35em; font-family: var(--font-family-kop); font-weight: 800;
             font-size: clamp(10rem, 30vw, 22rem); line-height: 1; color: var(--gb-geel); opacity: .07;
             pointer-events: none; user-select: none; }
.aftel .eyebrow { color: var(--gb-geel); }
.aftel-kop h2 { color: var(--gb-wit); margin: 0; }
.aftel-eerste { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center;
                position: relative; }
.aftel-tel { margin: 0; display: grid; justify-items: center; align-content: center; min-width: 7.5rem;
             padding: var(--space-3) var(--space-4); border: 4px solid var(--gb-geel); color: var(--gb-geel); }
.aftel-num { font-family: var(--font-family-kop); font-weight: 800; font-size: clamp(2.8rem, 8vw, 3.8rem);
             line-height: .95; font-variant-numeric: tabular-nums; }
.aftel-lab { font-family: var(--font-family-kop); font-weight: 700; font-size: .8rem; letter-spacing: .12em;
             text-transform: uppercase; margin-top: var(--space-1); }
.aftel-wat h3 { color: var(--gb-wit); font-size: var(--text-h2-size); line-height: var(--text-h2-line); margin-bottom: var(--space-1); }
.aftel-wat p { color: var(--gb-geel); margin-bottom: var(--space-3); }
.aftel-volgende { list-style: none; margin: 0; padding: var(--space-5) 0 0; display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-5);
                  border-top: 1px solid rgb(255 251 230 / .18); }
.aftel-volgende li { display: flex; gap: var(--space-4); align-items: center; }
.aftel-datum { display: grid; justify-items: center; min-width: 3.6rem; padding: var(--space-1) var(--space-2);
               background: rgb(255 233 8 / .12); color: var(--gb-geel); font-family: var(--font-family-kop);
               font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; line-height: 1.1; }
.aftel-datum b { font-size: 1.6rem; font-weight: 800; letter-spacing: 0; }
.aftel-item { color: var(--gb-room); font-size: var(--text-body-sm-size); line-height: 1.4; }
.aftel-item strong { font-family: var(--font-family-kop); font-size: 1.05rem; color: var(--gb-wit); }
@media (max-width: 36rem) { .aftel-eerste { grid-template-columns: 1fr; } .aftel-tel { justify-self: start; } }

/* ---------------------------------------------------------------
   Nuuts: kaarten op roomwit, wit vlak met de rode streep, beeld in 4:3.
   --------------------------------------------------------------- */
.nuuts, .heersers, .galerij, .program, .sjlager, .logowand { padding-block: var(--sectie); }
.nuuts + .heersers, .heersers + .wrap { padding-top: 0; }
.nuuts-seizoen { margin: var(--space-8) 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-h4-size); }
.nuuts-seizoen:first-of-type { margin-top: 0; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-6); }
.kaart { background: var(--card-bg); box-shadow: var(--card-shadow); display: grid; grid-template-rows: auto 1fr;
         transition: box-shadow var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); }
@media (hover: hover) { .kaart:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } }
.kaart-beeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface-sunken); }
.kaart-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.kaart-tekst { padding: var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.kaart-datum { margin: 0; font-family: var(--font-family-kop); font-weight: 700; font-size: var(--text-body-sm-size);
               color: var(--color-text-accent); }
.kaart h3 { margin: 0; font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
.kaart h3 a { color: inherit; text-decoration: none; }
.kaart h3 a::after { content: ""; position: absolute; inset: 0; }
.kaart { position: relative; }
.kaart h3 a:focus-visible { outline: none; }
.kaart:has(h3 a:focus-visible) { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: var(--focus-offset); }
.kaart p { margin: 0; color: var(--color-text-muted); font-size: var(--text-body-sm-size); }

/* ---------------------------------------------------------------
   Heersers: het drietal, staand 3:4, de naam over het beeld.
   --------------------------------------------------------------- */
.heersers-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 48rem) { .heersers-rij { grid-template-columns: 1fr; max-width: 24rem; } }
.heerser a { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--gb-dgroen);
             box-shadow: var(--shadow-2); color: var(--gb-wit); text-decoration: none; }
.heerser img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
               transition: transform var(--motion-base) var(--motion-ease); }
@media (hover: hover) { .heerser a:hover img { transform: scale(1.03); } }
.heerser-naam { position: absolute; inset: auto 0 0 0; padding: var(--space-8) var(--space-5) var(--space-5);
                /* Effen tot aan de bovenrand (space-8), daar pas het verloop: de
                   tekst staat op 92% donkergroen, geel erop haalt 10,5. */
                background: linear-gradient(to top, rgb(18 56 21 / .92) calc(100% - var(--space-8)), rgb(18 56 21 / 0));
                font-family: var(--font-family-kop); font-weight: 800; font-size: var(--text-h3-size); line-height: 1.1; }
.heerser-naam .eyebrow { display: block; color: var(--gb-geel); margin-bottom: var(--space-1); }

/* ---------------------------------------------------------------
   Galerij: hoogheden en raod. Jaartal groot in de kopletter.
   --------------------------------------------------------------- */
.galerij { padding-top: 0; }
.galerij-rij { list-style: none; margin: 0; padding: 0; display: grid;
               grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-6) var(--space-5); }
.galerij-item { display: grid; gap: var(--space-1); align-content: start; }
.galerij-item picture, .galerij-leeg { display: block; aspect-ratio: 3 / 4; overflow: hidden;
                                       background: var(--color-surface-raised); box-shadow: var(--shadow-1); }
.galerij-item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.galerij-leeg { display: grid; place-items: center; background: var(--color-surface-sunken); }
.galerij-leeg img { width: 5rem; height: auto; opacity: .5; }
.galerij-jaar { margin: var(--space-2) 0 0; font-family: var(--font-family-kop); font-weight: 800;
                font-size: var(--text-h3-size); line-height: 1; color: var(--color-text-accent);
                font-variant-numeric: tabular-nums; }
.galerij-naam { margin: 0; font-weight: 700; line-height: 1.3; }
.galerij-achternaam { display: block; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
.galerij-functie { margin: 0; color: var(--color-text-accent); font-family: var(--font-family-kop); font-weight: 700;
                   font-size: var(--text-body-sm-size); }
.galerij-raod .galerij-item picture, .galerij-raod .galerij-leeg { aspect-ratio: 2 / 3; }
/* De foto als link naar het grote beeld; met script een lichtbak (dialog). */
.galerij-knop { display: block; color: inherit; }
.galerij-knop:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: 3px; }
@media (hover: hover) { .galerij-knop:hover img { opacity: .9; } }
.lichtbak { border: 0; padding: 0; margin: auto; background: transparent; color: var(--gb-wit);
            max-width: min(100vw - 2rem, 60rem); max-height: 100vh; overflow: visible; }
.lichtbak::backdrop { background: rgb(18 56 21 / .94); }
/* Ruimte opzij voor de pijlen, zodat ze naast het beeld staan en er niet overheen. */
.lichtbak-in { position: relative; display: grid; justify-items: center; padding: var(--space-12) 4.25rem var(--space-6); }
.lichtbak-figuur { margin: 0; display: grid; justify-items: center; gap: var(--space-3); }
.lichtbak-beeld { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 9rem); box-shadow: var(--shadow-3); }
.lichtbak-tekst { font-family: var(--font-family-kop); font-weight: 700; font-size: var(--text-h4-size); text-align: center; }
.lichtbak-teller { color: var(--gb-geel); font-weight: 400; }
.lichtbak-knop { position: absolute; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--radius-full);
                 background: var(--gb-geel); color: var(--gb-dgroen); font: 700 1.5rem/1 var(--font-family-kop); cursor: pointer; }
.lichtbak-knop:focus-visible { outline: var(--focus-width) solid var(--gb-wit); outline-offset: 3px; }
.lichtbak-sluit { top: var(--space-3); right: 0; }
.lichtbak-vorige { left: 0; top: 50%; }
.lichtbak-volgende { right: 0; top: 50%; }
@media (max-width: 48rem) {
  .lichtbak-vorige, .lichtbak-volgende { top: auto; bottom: 0; }
  .lichtbak-vorige { left: var(--space-2); } .lichtbak-volgende { right: var(--space-2); }
  .lichtbak-in { padding: var(--space-12) 0 var(--space-12); }
}
.galerij-groep { margin: var(--space-10) 0 0; }
.galerij-groep img { box-shadow: var(--shadow-2); }
.galerij-groep figcaption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-body-sm-size); }

/* ---------------------------------------------------------------
   Programma: de tijdlijn van het programmablok, in de tokens. Een groene
   lijn met per dag een gele stip; wat voorbij is dooft.
   --------------------------------------------------------------- */
.program { --lijn: 4px; --datumkolom: 4.75rem; --inspring: 7.5rem; padding-top: 0; }

/* Een uitgelicht bericht: affiche links, tekst rechts; onder 48rem gestapeld. */
.uitgelicht { padding-block: var(--sectie); }
.uitgelicht-in { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.uitgelicht-beeld { display: block; }
.uitgelicht-beeld img { width: 100%; height: auto; box-shadow: var(--shadow-3); border-radius: var(--radius-md); }
.uitgelicht-beeld:focus-visible { outline: var(--focus-width) solid var(--color-focus-ring); outline-offset: 3px; }
.uitgelicht-tekst .eyebrow { color: var(--color-text-accent); }
.uitgelicht-tekst h2 { margin: var(--space-2) 0 var(--space-4); }
.uitgelicht-prose { padding-block: 0; }
.uitgelicht + .wrap > .prose:first-child { padding-top: 0; }
@media (max-width: 48rem) { .uitgelicht-in { grid-template-columns: 1fr; } .uitgelicht-beeld { max-width: 22rem; } }

/* Direct onder de hero overal dezelfde lucht, wat er ook volgt: een
   tekstblok, het programma, een galerij of een lijst. De modules zelf houden
   padding-top 0 voor als ze ná een tekstblok komen (prinse: eerst de vraag
   om foto's, dan de galerij). Specifieker dan die regels, dus dit wint. */
.hero + .prose, .hero + .program, .hero + .galerij, .hero + .nuuts, .hero + .heersers,
.hero + .sjlager, .hero + .logowand, .hero + .formulier, .hero + .wrap, .hero + section, .hero + div,
.hero + .uitgelicht { padding-top: var(--sectie); }
/* De binnenste blokken brengen dan geen eigen bovenruimte meer mee. */
.hero + .wrap > .prose:first-child { padding-top: 0; }
.hero + .aftel .aftel-in { padding-top: 0; }
.program-kop { margin-bottom: var(--space-8); }
.program-bereik { color: var(--color-text-muted); }
.program-maand { position: relative; padding-left: var(--inspring); margin-bottom: var(--space-8); }
.program-maand::before { content: ""; position: absolute; left: calc(var(--datumkolom) / 2 - var(--lijn) / 2);
                         top: 0; bottom: 0; width: var(--lijn); background: var(--gb-groen); border-radius: var(--radius-full); }
.program-maandnaam { font-size: var(--text-overline-size); letter-spacing: var(--text-overline-tracking);
                     text-transform: uppercase; color: var(--gb-dgroen); margin: 0 0 var(--space-5) calc(-1 * var(--inspring));
                     padding-left: var(--inspring); position: relative; }
:root[data-theme="dark"] .program-maandnaam { color: var(--gb-groenlicht); }
.program-dagen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.program-dag { position: relative; }
.program-datum { position: absolute; left: calc(-1 * var(--inspring)); top: 0; width: var(--datumkolom); margin: 0;
                 display: grid; justify-items: center; line-height: 1; font-family: var(--font-family-kop);
                 /* Een geel schild achter de datum: op de groene lijn en op de donkere
                    stand was de datum slecht leesbaar. Donkergroen op geel haalt 10,5. */
                 color: var(--gb-dgroen); background: var(--gb-geel); padding: var(--space-2) var(--space-1);
                 border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.program-datum::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 12px;
                        transform: translateX(-50%); border-radius: 50%; background: var(--gb-geel);
                        border: 3px solid var(--gb-groen); }
.program-dow { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.program-dnum { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; margin: 2px 0; }
.program-mon { font-size: .8rem; font-weight: 700; }
.program-events { display: grid; gap: var(--space-3); }
.program-event { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center;
                 padding: var(--space-4) var(--space-5); background: var(--card-bg); box-shadow: var(--card-shadow);
                 border-left: 5px solid var(--gb-geel); }
.program-event h4 { margin: 0 0 var(--space-1); font-size: var(--text-h4-size); }
.program-plek { margin: 0; display: flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted);
                font-size: var(--text-body-sm-size); }
.program-uur { margin: 0; font-family: var(--font-family-kop); font-weight: 800; font-size: 1.25rem;
               font-variant-numeric: tabular-nums; white-space: nowrap; }
.program-uur-open { font-weight: 700; font-size: var(--text-body-sm-size); color: var(--color-text-muted); }
.program-ics { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3);
               border-radius: var(--radius-md); background: var(--button-primary-bg); color: var(--button-primary-fg);
               text-decoration: none; font-family: var(--font-family-kop); font-weight: 700; font-size: var(--text-body-sm-size); }
@media (hover: hover) { .program-ics:hover { background: var(--button-primary-bg-hover); } }
/* Geen opacity: dan zakt de tekst onder de norm. Een verzonken vlak en
   gedempte datum, plus "Geweest" voor de schermlezer in de partial. */
.program-dag.voorbij .program-event { background: var(--color-surface-sunken); }
.program-dag.voorbij .program-datum { color: var(--color-text); background: var(--color-surface-sunken); box-shadow: none; }
.program-dag.voorbij .program-datum::after { background: var(--gb-groen); }
.program-dag.volgende .program-datum::after { background: var(--gb-rood); border-color: var(--gb-geel); }
.program-dag.volgende .program-event { border-left-color: var(--gb-rood); }
.program-voet { color: var(--color-text-muted); font-size: var(--text-body-sm-size); }
@media (max-width: 36rem) {
  .program { --datumkolom: 3.5rem; --inspring: 4.5rem; }
  .program-event { grid-template-columns: 1fr; gap: var(--space-2); }
  .program-ics { justify-self: start; }
}
@media print {
  .kop, .voet, .confetti, .strook, .program-kop .acties, .program-ics, .hero { display: none !important; }
  .program { --inspring: 0; } .program-maand::before, .program-datum::after { display: none; }
  .program-datum { position: static; width: auto; justify-self: start; justify-items: start; grid-auto-flow: column;
                   align-items: baseline; gap: .4em; padding: var(--space-1) var(--space-3); }
  .program-event { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .program-dag.voorbij { opacity: 1; }
  body { background: #fff; color: #000; }
}

/* ---------------------------------------------------------------
   Sjlager: de tabel.
   --------------------------------------------------------------- */
.sjlager { padding-top: 0; }
.tabelwrap { overflow-x: auto; }
.tabel { border-collapse: collapse; width: 100%; }
.tabel th, .tabel td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.tabel th { font-family: var(--font-family-kop); font-weight: 700; background: var(--color-surface-raised); }
.tabel td.jaar { font-family: var(--font-family-kop); font-weight: 800; color: var(--color-text-accent); }

/* ---------------------------------------------------------------
   Sponsors: de logowand op wit op groen, en de strook onder elke pagina.
   Een logo is het merk van een ander: op zijn eigen kleuren, nooit omgekleurd.
   --------------------------------------------------------------- */
.logowand { background: var(--gb-groen); padding-block: var(--space-10); }
.logowand-rij { list-style: none; margin: 0; padding: var(--space-6); background: var(--gb-wit); display: grid;
                grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-6); }
.logowand-tegel { display: grid; place-items: center; min-height: 7rem; padding: var(--space-3); }
.logowand-tegel img, .strook img { max-width: 100%; max-height: 6rem; width: auto; height: auto; object-fit: contain; }
.logowand-tegel a { display: grid; place-items: center; }
.strook { background: var(--gb-groen); color: var(--gb-inkt); padding-block: var(--space-8);
          --color-text-accent: var(--gb-dgroen); --color-focus-ring: var(--gb-dgroen); }
.strook h2 { font-size: var(--text-h4-size); margin: 0 0 var(--space-5); text-align: center; color: var(--gb-inkt); }
.strook-baan { overflow: hidden; display: flex; gap: var(--space-8); background: var(--gb-wit);
               padding-block: var(--space-6); margin-bottom: var(--space-4); }
/* Zonder script, of met minder beweging: alle logo's in een omlopende rij. */
.strook-rij { list-style: none; margin: 0; padding: 0 var(--space-4); width: 100%;
              display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: center; }
.strook-rij li { flex: 0 0 auto; }
.strook img { max-height: 4.25rem; }
/* Met script: de rij staat er twee keer en schuift een hele rij plus de
   tussenruimte naar links, dan begint hij naadloos opnieuw. Duur zet het
   script op de breedte, zodat de snelheid overal gelijk is. Stil bij hover,
   bij focus in de rij en bij prefers-reduced-motion. */
.strook-baan.loopt .strook-rij { flex: 0 0 auto; flex-wrap: nowrap; width: auto; justify-content: flex-start;
                                 animation: strook-loop var(--strook-duur, 60s) linear infinite; }
/* In de band krimpt niets: de rij niet, de logo's niet. Anders schuiven de
   logo's over elkaar zodra de twee rijen samen breder zijn dan het scherm. */
.strook-baan.loopt .strook-rij li { flex: 0 0 auto; width: auto; }
.strook-baan.loopt .strook-rij img { max-width: none; width: auto; height: 4.25rem; }
.strook-baan.loopt:hover .strook-rij, .strook-baan.loopt:focus-within .strook-rij { animation-play-state: paused; }
@keyframes strook-loop { to { transform: translateX(calc(-100% - var(--space-8))); } }
@media (prefers-reduced-motion: reduce) { .strook-baan.loopt .strook-rij { animation: none; } }
.strook p { text-align: center; margin: 0; font-weight: 700; }
.strook a { color: var(--gb-inkt); }

/* ---------------------------------------------------------------
   Eigen formulieren: groepen, keuzelijsten, vinkjes, korte velden.
   --------------------------------------------------------------- */
.formulier-eigen { padding-top: 0; scroll-margin-top: var(--space-6); }
.formulier-velden { max-width: 40rem; background: var(--color-surface-raised); padding: var(--space-6);
                    box-shadow: var(--shadow-1); margin-top: var(--space-5); }
.formulier-groep { margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.veld-kort input { max-width: 8rem; }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
               linear-gradient(135deg, currentColor 50%, transparent 50%);
               background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat;
               padding-right: var(--space-10); }
.veld-vink { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: start; }
.veld-vink input { width: 1.25rem; height: 1.25rem; margin-top: .2em; accent-color: var(--gb-rooddiep); }
.veld-vink label { font-weight: 400; }
.veld-vink .veldfout { grid-column: 2; }
.melding ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.melding a { color: inherit; }

/* ---------------------------------------------------------------
   Artikel: het beeld groot, de kop in de band, de tekst smal.
   --------------------------------------------------------------- */
.artikel-kop { background: var(--stralen); color: var(--gb-inkt); --color-text-accent: var(--gb-rooddiep); --color-focus-ring: var(--gb-dgroen); }
.artikel-kop .wrap { padding-block: var(--space-10); }
.artikel-kop .eyebrow { color: var(--gb-dgroen); }
.artikel-kop .eyebrow a { color: inherit; text-decoration: none; }
.artikel-kop h1 { color: var(--gb-dgroen); max-width: 24ch; margin-bottom: var(--space-3); }
.artikel-meta { margin: 0; font-family: var(--font-family-kop); font-weight: 700; }
.artikel-noot { color: var(--color-text-muted); font-family: var(--font-family); font-weight: 400; font-size: var(--text-body-sm-size); }
.artikel-in { display: grid; grid-template-columns: minmax(0, 62ch) minmax(16rem, 1fr); gap: var(--space-10); align-items: start; padding-top: var(--space-8); }
.artikel-beeld { margin: 0; grid-column: 2; grid-row: 1; position: sticky; top: var(--space-6); }
.artikel-beeld img { box-shadow: var(--shadow-2); width: 100%; }
.artikel-in .prose { grid-column: 1; grid-row: 1; padding-top: 0; }
@media (max-width: 56rem) {
  .artikel-in { grid-template-columns: 1fr; gap: var(--space-6); }
  .artikel-beeld { grid-column: 1; grid-row: 1; position: static; max-width: 28rem; }
  .artikel-in .prose { grid-row: 2; }
}