/* =============================================================================
   msl.css — huisstijl MainStage Live #1 — Eerste Rij
   Afdeling Design · Studio MainStage Vision · voorstel
   -----------------------------------------------------------------------------
   GEBRUIK IN ELKE PAGINA VAN HET PROJECT (bestanden in out/)

     <link rel="stylesheet" href="assets/msl.css">

   - Standaard is een pagina ZAALZWART met papierkleurige tekst.
     Zet class="op-papier" op <body> of op een <section> voor de lichte variant
     (affichepapier met zwarte tekst). Alle tokens schakelen dan mee om, ook de
     focusring, de accentkleur voor tekst en de rand van sponsorvakken.
   - Eigen pagina-CSS mag, maar gebruik ALTIJD de tokens hieronder
     (var(--msl-…)); nooit eigen hexcodes, nooit andere lettertypes.
   - Woordmerk (volledig in paden, ook het label "#1 — EERSTE RIJ"):
       op zwart:  <img class="woordmerk" src="assets/woordmerk.svg"
                       alt="MainStage Live #1" width="1300" height="152">
       op papier: <img class="woordmerk" src="assets/woordmerk-papier.svg" … >
       inline (kleur volgt de CSS): kopieer de <svg> uit woordmerk.svg in de
       pagina en zet class="woordmerk"; de letters zijn currentColor, de
       podiumlijn is var(--msl-wm-lijn), het label var(--msl-wm-label).
       Alt-tekst altijd "MainStage Live #1" (nooit met underscores).
   - Pakketnavigatie: direct na de skiplink, met aria-current="page" op de
       eigen link (markup: zie concept.html#gebruik). Verdwijnt op papier.
   - Klassen (details bij elke klasse verderop):
       .pakketnav
       .zoeker  .zoeker--af  .zoeker--amber  .zoeker--papier
       .podiumlijn  .podiumlijn--diep  .podiumlijn--los
       .exif
       .fotovlak  .fotovlak--1x1|3x2|4x5|9x16|16x9  .fotovlak--tegenlicht
         .fotovlak__label
       .sponsorvak  .sponsorvak--a|b|c   (schaal met --sv-mm)
       .voet-voorstel
       .tabel  .tabel-scroll  .getal
       .knop  .knop--magenta
       .tegenlicht  .halftone  .woordmerk  .label  .lead  .wrap
       .op-papier  .visueel-verborgen  .skiplink  .print-exact  .niet-printen
   - Mobile first: basisregels gelden voor de gsm, @media (min-width: …)
     breidt uit. Beweging enkel binnen prefers-reduced-motion: no-preference.
   - Contrastregels (WCAG 2.x, eigen berekening) staan bij de tokens.
     Kort: amber en grijs NOOIT als tekst op papier; #e91e63 enkel voor
     grote tekst, lijnen en kaders.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. Display-letter: de smalle snit van de grotesk die het toestel al heeft.
      Niets wordt gedownload: enkel local()-bronnen.
      Volgorde: macOS/iOS (Helvetica Neue Condensed) → Windows met Office
      (Arial Narrow) → Windows 10/11 zonder Office (Bahnschrift Condensed) →
      Android/ChromeOS (Roboto Condensed) → Linux (Liberation Sans Narrow,
      DejaVu Sans Condensed). Is er niets van, dan volgt --msl-display met
      system-ui in gewicht 800 en font-stretch: condensed — nooit een
      vreemde zware noodletter met een ander beeld.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "MSL Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: local("HelveticaNeue-CondensedBlack"),
       local("Helvetica Neue Condensed Black"),
       local("HelveticaNeue-CondensedBold"),
       local("Helvetica Neue Condensed Bold"),
       local("ArialNarrow-Bold"),
       local("Arial Narrow Bold"),
       local("Bahnschrift Bold Condensed"),
       local("Bahnschrift SemiBold Condensed"),
       local("RobotoCondensed-Bold"),
       local("Roboto Condensed Bold"),
       local("LiberationSansNarrow-Bold"),
       local("Liberation Sans Narrow Bold"),
       local("DejaVuSansCondensed-Bold"),
       local("DejaVu Sans Condensed Bold");
}


/* ---------------------------------------------------------------------------
   2. Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Palet — exact, niets bijmengen voor tekst */
  --msl-magenta:      #e91e63;  /* FOH-magenta: lijnen, kaders, grote display */
  --msl-magenta-diep: #c2185b;  /* tekst op papier, knop met witte tekst */
  --msl-amber:        #f59e0b;  /* tegenlicht: tekst op zwart, knop met zwarte tekst */
  --msl-zwart:        #0a0b0f;  /* zaalzwart */
  --msl-papier:       #f2eee6;  /* affichepapier */
  --msl-grijs:        #a0a0a8;  /* zoekergrijs: labels op zwart */
  --msl-wit:          #ffffff;  /* enkel op magenta diep (knop) */

  /* Contrast (tekst):
     elke grootte  papier/zwart 17,0 · amber/zwart 9,2 · grijs op zwart 7,6 ·
                   wit op magenta diep 5,9 · magenta diep op papier 5,1
     enkel groot   magenta op zwart 4,5 · wit op magenta 4,3 · papier op
                   magenta 3,8 · magenta op papier 3,8 · magenta diep op zwart 3,3
     nooit         amber op papier 1,9 · grijs op papier 2,2                  */

  /* Letters */
  --msl-display: "MSL Display", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, system-ui, sans-serif;
  --msl-display-gewicht: 800;  /* MSL Display tekent 700–900; system-ui (laatste fallback) krijgt zo 800 */
  --msl-tekst:   "Helvetica Neue", Arial, Roboto, "Liberation Sans", system-ui, sans-serif;
  --msl-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;

  /* Thema: zwart (standaard) */
  --msl-bg:           var(--msl-zwart);
  --msl-fg:           var(--msl-papier);
  --msl-fg-2:         var(--msl-grijs);      /* labels, bijschriften */
  --msl-accent-tekst: var(--msl-amber);      /* uren, prijzen, nadruk */
  --msl-lijn:         var(--msl-magenta);    /* podiumlijn, zoekerhoeken */
  --msl-focus:        var(--msl-amber);
  --msl-rand:         rgba(242, 238, 230, .2);

  /* Woordmerk (inline SVG): podiumlijn en label "#1 — EERSTE RIJ" (paden).
     --msl-wm-label: standaard de kleur van de letters; amber mag op zwart. */
  --msl-wm-lijn:  var(--msl-magenta);
  --msl-wm-label: currentColor;

  /* Maten */
  --msl-maat:       68ch;
  --msl-rand-breed: clamp(1rem, 4.5vw, 3.5rem);
  --msl-breed:      84rem;
}

/* Thema: papier */
.op-papier {
  --msl-bg:           var(--msl-papier);
  --msl-fg:           var(--msl-zwart);
  --msl-fg-2:         var(--msl-zwart);      /* grijs op papier mag nooit */
  --msl-accent-tekst: var(--msl-magenta-diep);
  --msl-lijn:         var(--msl-magenta);    /* als lijn/kader: 3,8 ≥ 3,0 */
  --msl-focus:        var(--msl-magenta-diep);
  --msl-rand:         rgba(10, 11, 15, .22);
  background: var(--msl-bg);
  color: var(--msl-fg);
}


/* ---------------------------------------------------------------------------
   3. Basis
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
}
html:has(body.op-papier) { color-scheme: light; }

body {
  margin: 0;
  background: var(--msl-bg);
  color: var(--msl-fg);
  font-family: var(--msl-tekst);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.display {
  font-family: var(--msl-display);
  font-weight: var(--msl-display-gewicht);
  font-stretch: condensed;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .004em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 1.4rem + 6.2vw, 7.5rem); }
h2 { font-size: clamp(2.1rem, 1.25rem + 3.8vw, 4.75rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1; }
h4 { font-size: 1.15rem; line-height: 1.1; letter-spacing: .02em; }

p, ul, ol, dl, blockquote, figure, table { margin: 0 0 1.1em; }
p, li { max-width: var(--msl-maat); text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--msl-lijn);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 700; }
small { font-size: .8125em; }
code, kbd, samp, pre { font-family: var(--msl-mono); font-size: .875em; }
pre {
  overflow-x: auto;
  padding: 1rem 1.1rem;
  border: 1px solid var(--msl-rand);
  line-height: 1.5;
  tab-size: 2;
}
hr { border: 0; border-top: 1px solid var(--msl-rand); margin: 2rem 0; }
img { max-width: 100%; height: auto; }
svg { max-width: 100%; }

::selection { background: var(--msl-amber); color: var(--msl-zwart); }


/* ---------------------------------------------------------------------------
   4. Focus (WCAG 2.2 AA: zichtbaar, ≥ 3:1 tegen de achtergrond)
      Op zwart: amber 3 px (9,2:1). Op papier: magenta diep (5,1:1).
      Rond een knop volgt de ring de paginakleur (papier op zwart, zwart op papier).
   --------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--msl-focus);
  outline-offset: 2px;
}
.knop:focus-visible { outline-color: var(--msl-fg); outline-offset: 3px; }

.skiplink {
  position: absolute;
  left: .75rem;
  top: -10rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--msl-amber);
  color: var(--msl-zwart);
  font: 700 .875rem/1 var(--msl-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
.skiplink:focus { top: .75rem; }

/* .pakketnav — gedeelde navigatie tussen de onderdelen van het pakket.
   Eén compacte balk bovenaan, direct na de skiplink:
     <nav class="pakketnav niet-printen" aria-label="Onderdelen van MainStage Live #1">
       <a href="index.html">Portaal</a> … <a href="concept.html" aria-current="page">Concept</a> …
     </nav>
   Horizontaal scrollbaar op gsm (geen afbreking), op brede schermen in rijen.
   De eigen pagina: aria-current="page" → amber (op papier magenta diep) met
   een magenta lijn eronder. Doelgrootte 36 px hoog (≥ 24 px, WCAG 2.2).
   Op papier en in print verborgen. */
.pakketnav {
  display: flex;
  gap: 0 .15rem;
  margin: 0;
  padding: 0 var(--msl-rand-breed);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--msl-fg-2) transparent;
  background: var(--msl-bg);
  border-bottom: 1px solid var(--msl-rand);
  font-family: var(--msl-mono);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pakketnav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 .55rem;
  color: var(--msl-fg-2);
  text-decoration: none;
}
.pakketnav a:hover { color: var(--msl-fg); text-decoration: underline; text-decoration-color: var(--msl-lijn); }
.pakketnav a:focus-visible { outline-offset: -3px; }
.pakketnav a[aria-current="page"] {
  color: var(--msl-accent-tekst);
  box-shadow: inset 0 -3px 0 var(--msl-lijn);
}
@media (min-width: 72rem) {
  .pakketnav { flex-wrap: wrap; overflow: visible; }
}
@media (forced-colors: active) {
  .pakketnav a[aria-current="page"] { box-shadow: none; border-bottom: 3px solid CanvasText; }
}

.visueel-verborgen {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   5. Hulpklassen voor opmaak
   --------------------------------------------------------------------------- */
/* .wrap — gecentreerde kolom met de standaard zijmarge */
.wrap {
  width: 100%;
  max-width: var(--msl-breed);
  margin-inline: auto;
  padding-inline: var(--msl-rand-breed);
}

/* .label — kleine mono-kapitalen voor rubrieken, uren, niveaus */
.label {
  font-family: var(--msl-mono);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msl-fg-2);
}

/* .lead — inleidende alinea */
.lead {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  line-height: 1.45;
}

/* .woordmerk — het woordmerk als <img> of inline <svg>; schaalt mee, nooit vervormd */
.woordmerk {
  display: block;
  width: 100%;
  max-width: var(--wm-max, 100%);
  height: auto;
  color: var(--msl-fg);
}
/* minimummaat volledig woordmerk op scherm: 280 px breed */
.woordmerk { min-width: min(280px, 100%); }


/* ---------------------------------------------------------------------------
   6. Beeldtaal
   --------------------------------------------------------------------------- */

/* .zoeker — vier zoekerhoeken rond een element (positioneert relatief).
   Regelbaar per element:
     --zk-kleur  (standaard var(--msl-lijn) = magenta)
     --zk-arm    lengte van een hoekarm
     --zk-dikte  lijndikte (standaard 3px)
     --zk-inzet  afstand van de rand naar binnen (standaard 0)
   Regel van Foto & Video: een hoek of AF-punt valt nooit over een gezicht. */
.zoeker,
.fotovlak {
  --zk-kleur: var(--msl-lijn);
  --zk-arm:   clamp(14px, 5vmin, 44px);
  --zk-dikte: 3px;
  --zk-inzet: 0px;
  position: relative;
}
.zoeker::before,
.fotovlak::before {
  --zk-c: linear-gradient(var(--zk-kleur), var(--zk-kleur));
  content: "";
  position: absolute;
  inset: var(--zk-inzet);
  z-index: 2;
  pointer-events: none;
  background:
    var(--zk-c) left  top    / var(--zk-arm)   var(--zk-dikte),
    var(--zk-c) left  top    / var(--zk-dikte) var(--zk-arm),
    var(--zk-c) right top    / var(--zk-arm)   var(--zk-dikte),
    var(--zk-c) right top    / var(--zk-dikte) var(--zk-arm),
    var(--zk-c) left  bottom / var(--zk-arm)   var(--zk-dikte),
    var(--zk-c) left  bottom / var(--zk-dikte) var(--zk-arm),
    var(--zk-c) right bottom / var(--zk-arm)   var(--zk-dikte),
    var(--zk-c) right bottom / var(--zk-dikte) var(--zk-arm);
  background-repeat: no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* .zoeker--af — AF-scherpstelpunt; hoogte met --zk-af-y (standaard 50%), maat met --zk-af */
.zoeker--af::after,
.fotovlak--af::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--zk-af-y, 50%);
  width: var(--zk-af, clamp(12px, 3.2vmin, 22px));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--zk-kleur);
  z-index: 2;
  pointer-events: none;
}
/* .zoeker--amber — hoeken in tegenlicht-amber (enkel op zwart) */
.zoeker--amber  { --zk-kleur: var(--msl-amber); }
/* .zoeker--papier — hoeken in papierkleur (op foto of magenta) */
.zoeker--papier { --zk-kleur: var(--msl-papier); }

/* .podiumlijn — zet een element OP de magenta podiumrand (lijn eronder).
   Dikte met --pl-dikte. Werkt op koppen, lijstitems, bandnamen.
   hr.podiumlijn of .podiumlijn--los = een losse lijn. */
.podiumlijn {
  --pl-dikte: max(4px, .085em);
  padding-bottom: calc(var(--pl-dikte) + .2em);
  background: linear-gradient(var(--msl-lijn), var(--msl-lijn)) left bottom / 100% var(--pl-dikte) no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* .podiumlijn--diep — magenta diep (op papier, riso-look van affiche 2) */
.podiumlijn--diep { background-image: linear-gradient(var(--msl-magenta-diep), var(--msl-magenta-diep)); }
hr.podiumlijn,
.podiumlijn--los {
  --pl-dikte: 6px;
  display: block;
  height: var(--pl-dikte);
  border: 0;
  padding: 0;
  margin: 1.75rem 0;
  background-size: 100% 100%;
}

/* .exif — mono-strook met de opnamegegevens van de avond.
   Gebruik een <ul class="exif"> met <li>-items; scheidingspunten komen vanzelf.
   <b> of <strong> in een item = amber (op zwart) of magenta diep (op papier). */
.exif {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: .3em;
  margin: 0;
  padding: .6em 0;
  list-style: none;
  border-block: 1px solid var(--msl-rand);
  font-family: var(--msl-mono);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--msl-fg-2);
}
.exif > li { max-width: none; }
.exif > * + *::before {
  content: "·";
  content: "·" / "";
  padding-inline: .65em;
  color: var(--msl-lijn);
  font-weight: 700;
}
.exif b, .exif strong { color: var(--msl-accent-tekst); font-weight: 700; }
.exif--los { border-block: 0; padding: 0; }

/* .fotovlak — zwart vlak met zoekerhoeken + mono-label: plaatshouder voor
   een foto van Gunther of de beeldploeg, met de fotobriefing erin.
   <figure class="fotovlak fotovlak--4x5">
     <figcaption class="fotovlak__label"><b>FOTO 04</b> Silhouet in tegenlicht …</figcaption>
   </figure>
   Verhouding: modifier of eigen --fv-ratio. Blijft zwart, ook op papier. */
.fotovlak {
  --zk-inzet: clamp(6px, 3.5%, 16px);
  --zk-kleur: var(--msl-magenta);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  aspect-ratio: var(--fv-ratio, 4 / 5);
  padding: clamp(.9rem, 7%, 1.75rem);
  overflow: hidden;
  background: var(--msl-zwart);
  color: var(--msl-papier);
  outline: 1px solid rgba(160, 160, 168, .28);
  outline-offset: -1px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.fotovlak--1x1  { --fv-ratio: 1 / 1; }
.fotovlak--3x2  { --fv-ratio: 3 / 2; }
.fotovlak--4x5  { --fv-ratio: 4 / 5; }
.fotovlak--9x16 { --fv-ratio: 9 / 16; }
.fotovlak--16x9 { --fv-ratio: 16 / 9; }
/* .fotovlak--tegenlicht — amber tegenlicht van achter het podium */
.fotovlak--tegenlicht {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(245, 158, 11, .42), rgba(245, 158, 11, .1) 45%, transparent 70%),
    var(--msl-zwart);
}
/* .fotovlak__label — de briefing, in mono */
.fotovlak__label {
  position: relative;
  z-index: 3;
  font-family: var(--msl-mono);
  font-size: .75rem;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--msl-grijs);
}
.fotovlak__label b,
.fotovlak__label strong {
  display: block;
  margin-bottom: .3em;
  color: var(--msl-papier);
  letter-spacing: .12em;
}

/* .tegenlicht — achtergrond: amber licht van boven in het zaalzwart */
.tegenlicht {
  background:
    radial-gradient(120% 70% at 50% -12%, rgba(245, 158, 11, .5), rgba(245, 158, 11, .12) 42%, transparent 68%),
    var(--msl-zwart);
  color: var(--msl-papier);
}

/* .halftone — drukrasterlaag in amber (decoratief, nooit achter tekst) */
.halftone {
  background-image: radial-gradient(circle, var(--msl-amber) 0 32%, transparent 36%);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 35%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 35%, transparent 72%);
}


/* ---------------------------------------------------------------------------
   7. Sponsorvakken — vaste vakken, logo's altijd monochroom.
      Zonder logo: gestippeld vak met mono-label "TYPE SPONSOR — …".
      <div class="sponsorvak sponsorvak--a"><span>Type sponsor — Presenting</span></div>
      Verhoudingen = affichematen A2 (mm): A 90×30 · B 50×20 · C 30×12.
      --sv-mm bepaalt de schaal: 3.6px op scherm (standaard),
      1mm voor A2 op ware grootte, .711mm voor A3.
   --------------------------------------------------------------------------- */
.sponsorvak {
  --sv-mm: 3.6px;
  display: inline-grid;
  place-items: center;
  width: calc(var(--sv-b) * var(--sv-mm));
  max-width: 100%;
  aspect-ratio: var(--sv-b) / var(--sv-h);
  padding: .3em .5em;
  border: 1.5px dashed var(--msl-fg-2);
  color: var(--msl-fg-2);
  font-family: var(--msl-mono);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
}
.sponsorvak > * { max-width: 100%; }
.sponsorvak img, .sponsorvak svg { max-height: 100%; width: auto; }
/* --a: Presenting partner (1) — direct onder het woordmerk */
.sponsorvak--a { --sv-b: 90; --sv-h: 30; }
/* --b: Contentpartner (2) — sponsorband */
.sponsorvak--b { --sv-b: 50; --sv-h: 20; }
/* --c: Lokale partner (4) en ruilpartner (max 1) — sponsorband */
.sponsorvak--c { --sv-b: 30; --sv-h: 12; font-size: .5625rem; letter-spacing: .04em; padding: .2em .3em; }


/* ---------------------------------------------------------------------------
   8. Tabellen
      <div class="tabel-scroll" role="region" aria-label="…" tabindex="0">
        <table class="tabel"> … </table>
      </div>
      .getal = rechts uitgelijnd, mono, tabelcijfers.
   --------------------------------------------------------------------------- */
.tabel-scroll { overflow-x: auto; margin: 0 0 1.5rem; }
.tabel-scroll > .tabel { margin: 0; }
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
}
.tabel caption {
  caption-side: top;
  text-align: left;
  padding-bottom: .6rem;
  font-family: var(--msl-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msl-fg-2);
}
.tabel th,
.tabel td {
  padding: .7rem .9rem .7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--msl-rand);
}
.tabel thead th {
  font-family: var(--msl-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--msl-fg-2);
  border-bottom: 2px solid var(--msl-lijn);
  white-space: nowrap;
}
.tabel tbody th { font-weight: 700; }
.tabel .getal {
  text-align: right;
  font-family: var(--msl-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   9. Knoppen — zwart op amber (9,2:1) of wit op magenta diep (5,9:1).
      Doelgrootte ≥ 44 px. Werkt op <a> en <button>.
   --------------------------------------------------------------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 44px;
  padding: .75em 1.35em .7em;
  border: 0;
  border-radius: 0;
  background: var(--msl-amber);
  color: var(--msl-zwart);
  font-family: var(--msl-display);
  font-stretch: condensed;
  font-weight: var(--msl-display-gewicht);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.knop:hover { background: var(--msl-fg); color: var(--msl-bg); }
.knop--magenta { background: var(--msl-magenta-diep); color: var(--msl-wit); }
.knop[aria-disabled="true"], .knop:disabled {
  background: transparent;
  color: var(--msl-fg-2);
  outline: 1.5px dashed var(--msl-fg-2);
  outline-offset: -1.5px;
  cursor: not-allowed;
}


/* ---------------------------------------------------------------------------
   10. Voet — op elke pagina, onderaan:
       <footer class="voet-voorstel">
         <span>Voorstel · voorbeeldpagina</span><span>MainStage Vision · Studio</span>
       </footer>
   --------------------------------------------------------------------------- */
.voet-voorstel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  margin-top: 0;
  padding: 1.25rem var(--msl-rand-breed) 1.75rem;
  border-top: 1px solid var(--msl-rand);
  font-family: var(--msl-mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--msl-fg-2);
}


/* ---------------------------------------------------------------------------
   11. Beweging — enkel als de bezoeker dat niet uitzette
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .knop, a { transition: background-color .15s ease, color .15s ease, text-decoration-color .15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Hoog-contrastmodus: achtergrond-lijnen verdwijnen, dus randen als vangnet */
@media (forced-colors: active) {
  .fotovlak, .zoeker { outline: 2px solid CanvasText; }
  .podiumlijn { border-bottom: 4px solid CanvasText; background: none; }
  .knop { border: 2px solid ButtonText; }
}


/* ---------------------------------------------------------------------------
   12. Print-basis (documenten, dossiers op A4)
       Standaard drukt alles zwart op wit papier, zonder zaalzwart.
       Zet class="print-exact" op <html> voor affiches/visuals die hun kleuren
       moeten houden; zij definiëren hun eigen @page (formaat + afloop).
       .niet-printen verbergt navigatie en knoppen op papier.
   --------------------------------------------------------------------------- */
@page { margin: 14mm 14mm 16mm; }

@media print {
  html:not(.print-exact) body,
  html:not(.print-exact) .op-papier,
  html:not(.print-exact) .tegenlicht {
    --msl-bg: #fff;
    --msl-fg: var(--msl-zwart);
    --msl-fg-2: var(--msl-zwart);
    --msl-accent-tekst: var(--msl-magenta-diep);
    --msl-rand: rgba(10, 11, 15, .3);
    background: #fff;
    color: var(--msl-zwart);
  }
  html.print-exact { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; line-height: 1.45; }
  h1, h2, h3 { break-after: avoid; }
  figure, table, .fotovlak, .sponsorvak, pre { break-inside: avoid; }
  p { orphans: 3; widows: 3; }
  a { text-decoration: none; }
  html:not(.print-exact) a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .niet-printen, .skiplink, .pakketnav { display: none !important; }
}