/* De Peppers — Uitbreken: de affiche als website. Foundry-gietsel `depeppers` (design-engine v4.2), v2.1 van 11-10-2026 18:36.
   Indeling van de poster "Uitbreken" (vier vakken, bandleden breken uit hun vak, DE PEPPERS zwaar en recht over de naad),
   in de drie inkten van de vorige site: Peppers-rood, podiumzwart, botwit. Alles vlak gedrukt: geen enkel verloop.
   Signatuur: figuren die uit hun vak breken + halftoonraster (losse punten). Fonts: Anybody (display + labels) · Bespoke Sans. */

@font-face { font-family: 'Anybody'; src: url('/fonts/anybody.woff2') format('woff2'); font-weight: 700 900; font-stretch: 50% 100%; font-display: swap; }
@font-face { font-family: 'Bespoke Sans'; src: url('/fonts/bespoke-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bespoke Sans'; src: url('/fonts/bespoke-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* metrisch passende terugval, zodat het wisselen van font de opmaak niet laat verspringen (CLS 0) */
@font-face { font-family: 'Anybody-terug'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 78%; ascent-override: 98%; descent-override: 26%; }

:root {
  /* drie inkten, vlak gedrukt (Daan 11-10 18:36: terug naar rood/zwart/bot, geen verloop) */
  --rood: #ED1C24;        /* Peppers-rood: knoppen, grote cijfers, datum, merkvlak */
  --rood-diep: #B5121A;   /* rood vlak met lopende tekst (botwit erop: AA 6:1) */
  --bloed: #7E0B11;
  --ossenbloed: #3D0609;
  --podium: #121212;      /* zwart: vakken, tekst op papier, footer */
  --as: #2A2A2A;
  --bot: #F2EDE4;         /* botwit papier */
  --bot-2: #E3DACB;
  /* halftoonraster als losse punten (SVG), geen verloop */
  --raster-zwart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Ccircle cx='2.5' cy='2.5' r='0.9' fill='%23121212' fill-opacity='.12'/%3E%3C/svg%3E");
  --raster-foto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='0.8' fill='%23121212' fill-opacity='.9'/%3E%3C/svg%3E");

  --f-display: 'Anybody', 'Anybody-terug', 'Arial Narrow', sans-serif;
  --f-tekst: 'Bespoke Sans', 'Segoe UI', Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --veer: cubic-bezier(0.34, 1.56, 0.64, 1);
  --snel: 160ms;

  --m-l: 6vw; --m-r: 4vw;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;
  --r: 2px;
  --rand: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  --schaduw: 0 22px 44px -18px rgba(18, 18, 18, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--podium); overflow-x: clip; scrollbar-color: var(--rood) var(--podium); scrollbar-width: thin; }
body {
  margin: 0; font: 400 1.0625rem/1.62 var(--f-tekst); color: var(--bot); background: var(--podium);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
p { margin: 0 0 1em; text-wrap: pretty; max-width: 65ch; }
h1, h2, h3 { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
::selection { background: var(--rood); color: var(--bot); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--bot); color: var(--podium); padding: 12px 18px; font-weight: 700; }
.skip:focus { top: 12px; }
[data-placeholder] { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.25em; }

/* ── vlakken: hard wisselend botwit / zwart / rood, zoals de vorige site ─────────────
   v-rood = rood vlak (rood-diep, botwit tekst AA) · v-bloed = bloedrood · v-zwart = podium · v-bot = papier · v-merk = Peppers-rood */
.v-rood { background-color: var(--rood-diep); color: var(--bot); }
.v-merk { background-color: var(--rood); color: var(--podium); }
.v-bloed { background-color: var(--bloed); color: var(--bot); }
.v-zwart { background-color: var(--podium); color: var(--bot); }
.v-bot { background-color: var(--bot); color: var(--podium); }
/* halftoonkorrel op de rode vlakken, zoals zeefdruk op karton (losse punten, geen verloop) */
.v-rood, .v-bloed, .v-merk { background-image: var(--raster-zwart); background-size: 5px 5px; }
.v-bot a:not(.tape):not(.knop) { text-decoration-color: var(--rood); }
.v-bot a:not(.tape):not(.knop):hover { color: var(--rood-diep); }
.fontein { position: relative; }

/* ── maatvoering ─────────────────────────────────────────────────────── */
main { overflow-x: clip; }
main > section { position: relative; }
.sectie { padding-block: clamp(56px, 6vw, 104px); }
.sectie--dicht { padding-block: clamp(28px, 4vw, 48px); }
.breed { max-width: 1400px; margin-inline: var(--m-l) var(--m-r); }
@media (min-width: 1600px) { .breed { margin-inline: auto; } }
.smal { max-width: 700px; margin-inline: var(--m-l) auto; padding-right: var(--m-r); }
.vol { padding-inline: 4vw; }
@media (max-width: 720px) {
  :root { --m-l: 20px; --m-r: 20px; }
  .smal { padding-right: 0; margin-inline: 20px; }
  .vol { padding-inline: 20px; }
}

/* ── typografie ──────────────────────────────────────────────────────── */
.kicker, .label { font: 800 0.875rem/1.25 var(--f-display); font-stretch: condensed; letter-spacing: 0.08em; text-transform: uppercase; }
.kicker { margin: 0 0 var(--s4); display: flex; gap: 0.75em; align-items: baseline; flex-wrap: wrap; }
.kicker b { font-weight: 900; color: inherit; }
.v-bot .kicker b { color: var(--rood-diep); }
.v-rood .kicker b, .v-bloed .kicker b, .v-merk .kicker b { color: inherit; }
.h2 { font: 900 clamp(2.6rem, 6.4vw, 6rem)/0.9 var(--f-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: -0.005em; margin-bottom: var(--s5); }
.h2--reus { font-size: clamp(3.4rem, 11vw, 11rem); line-height: 0.84; }
.h3 { font: 700 1.3rem/1.25 var(--f-tekst); margin: 0 0 var(--s2); }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; max-width: 40ch; }
.mono { font: 800 0.9rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: 0.06em; text-transform: uppercase; }
.cijfer { font-variant-numeric: tabular-nums; }
.inkt-tekst { color: var(--rood); }

/* ── knoppen: vlak rood blok met zwarte tekst (≥ 19 px vet = groot schrift, AA 4,2:1) en een zwarte rand ── */
.tape, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 56px; padding: 0.8em 1.45em 0.75em;
  font: 900 1.25rem/1 var(--f-display); font-stretch: condensed; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: var(--podium); background: var(--rood); border: 2px solid var(--podium); border-radius: var(--r); cursor: pointer;
  transition: transform var(--snel) var(--ease), background-color var(--snel) linear;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.v-zwart .tape, .v-zwart .knop, .voet .tape, .kop.dicht .tape, .sticky-boek .tape, .menu .tape { border-color: var(--rood); }
.v-rood .tape, .v-bloed .tape, .v-merk .tape { color: var(--podium); background: var(--bot); border-color: var(--podium); }
.tape .pijl, .knop .pijl { display: inline-block; transition: transform 200ms var(--ease); }
.tape:active, .knop:active { transform: translateY(2px) scale(0.98); transition-duration: 90ms; }
@media (hover: hover) and (pointer: fine) {
  .tape:hover, .knop:hover { transform: translateY(-2px); }
  .tape:hover .pijl, .knop:hover .pijl { transform: translateX(5px); }
}
/* secundair: lijnknop in de tekstkleur */
.tape--bot, .knop--lijn { color: currentColor !important; background: transparent !important; border-color: currentColor !important; }
.v-bot .knop--lijn, .v-bot .tape--bot { color: var(--podium) !important; }
@media (hover: hover) and (pointer: fine) { .tape--bot:hover, .knop--lijn:hover { background: var(--podium) !important; color: var(--bot) !important; } .v-zwart .tape--bot:hover, .sticky-boek .tape--bot:hover { background: var(--bot) !important; color: var(--podium) !important; } }
.tape--klein { min-height: 48px; font-size: 1.2rem; padding: 0.6em 1.05em 0.55em; }
.knop small, .tape small { font: 900 1.2rem/1 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── foto's: rood/zwarte duotoon met halftoonraster (zoals de poster, in de vorige inkten) ── */
.duo { position: relative; margin: 0; overflow: hidden; isolation: isolate; background: var(--rood); }
.duo picture { display: block; height: 100%; mix-blend-mode: multiply; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.45) brightness(1.12); }
.duo::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; opacity: 0.35; background-image: var(--raster-foto); background-size: 4px 4px; }
.duo--zwart { background: var(--bot); }
.duo figcaption { position: absolute; left: 0; bottom: 0; z-index: 3; font: 700 0.75rem/1.3 var(--f-tekst); padding: 4px 8px; background: var(--podium); color: var(--bot); }

/* ── kop ─────────────────────────────────────────────────────────────── */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 72px; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding-inline: 4vw; color: var(--bot); transition: height 260ms var(--ease), background-color 200ms linear; view-transition-name: kop;
}
.kop.op-papier { color: var(--podium); }
.kop.dicht { height: 60px; background-color: var(--podium); color: var(--bot); box-shadow: 0 1px 0 rgba(242, 237, 228, .08); }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.merk img { width: 32px; height: 32px; }
.merk span { white-space: nowrap; font: 900 1.55rem/1 var(--f-display); font-stretch: extra-condensed; letter-spacing: 0.01em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .merk:hover img { transform: rotate(45deg); transition: transform 500ms var(--veer); } .merk img { transition: transform 400ms var(--ease); } }
.hoofdnav { display: flex; gap: clamp(8px, 1.6vw, 24px); }
.hoofdnav a { position: relative; font: 800 1rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hoofdnav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 260ms var(--ease); }
.hoofdnav a:hover::after, .hoofdnav a[aria-current]::after { transform: scaleX(1); }
.talen { display: flex; gap: 2px; font: 800 0.85rem/1 var(--f-display); font-stretch: condensed; letter-spacing: 0.06em; }
.talen a { display: inline-grid; place-items: center; min-width: 40px; min-height: 44px; text-decoration: none; opacity: .7; }
.talen a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.talen a:hover { opacity: 1; }
.menuknop { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 4px; background: none; border: 0; color: inherit; font: 800 1.05rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.menuknop i { display: grid; gap: 5px; width: 22px; flex: 0 0 22px; }
.menuknop i::before, .menuknop i::after { content: ''; height: 2px; background: currentColor; }
.kop .tape { min-height: 44px; font-size: 1.2rem; padding: 0.5em 1em 0.45em; }
.kop .tape small { display: inline; }
@media (max-width: 1100px) { .hoofdnav { display: none; } }
@media (max-width: 860px) { .kop .talen { display: none; } .kop { height: 60px; padding-inline: 16px; gap: 10px; } .merk span { font-size: 1.35rem; } .kop .tape .lang { display: none; } .kop .tape .kort { display: inline; font: inherit; opacity: 1; } .menuknop span { display: none; } .kop .cta-tk .lang { display: inline; } .kop .cta-tk .kort { display: none; } }
@media (max-width: 380px) { .merk span { display: none; } }

/* menu-overlay: twee doelgroepen naast elkaar */
.menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding: 96px var(--m-r) 48px var(--m-l); display: grid; gap: var(--s6); align-content: start; }
.menu[hidden] { display: none; }
.menu-sluit { position: fixed; top: 12px; right: 4vw; z-index: 2; }
.menu-groepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
.menu h2 { font: 800 0.9rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .1em; text-transform: uppercase; color: var(--rood); margin-bottom: var(--s3); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu nav a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font: 900 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; text-decoration: none; }
.menu nav .klein a { font: 700 1.05rem/1.3 var(--f-tekst); text-transform: none; min-height: 40px; }
.menu nav a:hover, .menu nav a[aria-current] { color: var(--rood); }
.menu-voet { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; font: 800 1rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .05em; text-transform: uppercase; }
.menu-voet a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 860px) { .menu { padding-top: 80px; } .menu-groepen { grid-template-columns: 1fr; gap: var(--s5); } }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menuIn 380ms var(--ease) both; }
  .menu:not([hidden]) .menu-groepen > * { animation: omhoog 520ms var(--ease) both; }
  .menu:not([hidden]) .menu-groepen > :nth-child(2) { animation-delay: 60ms; }
  .menu:not([hidden]) .menu-groepen > :nth-child(3) { animation-delay: 120ms; }
}
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes schuif { from { transform: translateY(14px); } to { transform: none; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── home: de affiche (poster "Uitbreken") ─────────────────────────────────
   Vier vierkante zwarte vakken (2×2) op botwit papier, elk bandlid breekt boven uit zijn eigen vak,
   DE PEPPERS zwaar en recht over de naad. Desktop: het tekstblok van de poster staat ernaast. */
.held { padding: 92px var(--m-r) clamp(32px, 4vw, 56px) var(--m-l); overflow: visible; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) clamp(32px, 4vw, 72px); align-items: end; }
.affiche { position: relative; container-type: inline-size; width: min(56vw, calc((100svh - 150px) / 1.1), 900px); }
/* maten in cqw (breedte van de affiche): vak 49,15 cqw vierkant, goot 1,7 cqw, uitbraak 9,7 cqw erboven.
   De beelden zijn 17,3 % breder en 19,7 % hoger dan hun vak: de bandleden breken er boven en opzij uit. */
.vakken { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7cqw; padding-top: 9.7cqw; }
.vak { position: relative; margin: 0; aspect-ratio: 1; }
.vak::before { content: ''; position: absolute; inset: 0.4cqw; background: var(--podium); }
.vak picture { position: absolute; left: -8.65%; bottom: 0; width: 117.3%; max-width: none; }
.vak img { width: 100%; max-width: none; height: auto; }
/* de verticale goot onder het woord is dicht (zwart), zodat het woord overal op zwart staat */
.goot { position: absolute; z-index: 2; left: 48.6cqw; width: 2.8cqw; top: 33cqw; height: 25.8cqw; background: var(--podium); pointer-events: none; }
.woordmerk {
  position: absolute; z-index: 3; left: 0; right: 0; top: 58.85cqw; margin: 0; pointer-events: none; transform: translateY(-100%);
  font: 900 33.5cqw/0.74 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; color: var(--bot); letter-spacing: -0.012em; text-align: center;
}
.woordmerk .reg { display: block; }
.woordmerk .de { position: absolute; left: 0.03em; bottom: 100%; font-size: 0.34em; line-height: 0.78; margin-bottom: 0.05em; }
.woordmerk .pep { display: block; white-space: nowrap; }
.affiche-info { container-type: inline-size; display: grid; gap: 4px; align-content: end; padding-bottom: 1cqw; }
.affiche-info .trib { margin: 0 0 8px; font: 900 clamp(1rem, 1.5vw, 1.4rem)/1.1 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; }
.affiche-info .datum { margin: 0; font: 900 min(34cqw, calc(236cqw / var(--n, 8)))/0.8 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.affiche-info .plek { margin: 6px 0 0; font: 900 13cqw/0.88 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; }
.affiche-info .acties { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; margin-top: var(--s4); }
.affiche-info .prijs { font: 700 0.95rem/1.35 var(--f-tekst); margin: 0; }
.affiche-info .prijs b { font: 900 1.2rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .03em; text-transform: uppercase; }
.affiche-info--leeg .lead { margin: 0; }
.held .snelbalk { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .held { grid-template-columns: minmax(0, 1fr); padding-top: 76px; }
  .affiche { width: min(100%, calc((100svh - 150px) / 1.1)); min-width: min(100%, 520px); }
  .affiche-info { grid-template-columns: 1fr auto; column-gap: var(--s3); }
  .affiche-info .trib, .affiche-info .acties { grid-column: 1 / -1; }
  .affiche-info .datum { font-size: min(21cqw, calc(152cqw / var(--n, 8))); }
  .affiche-info .plek { font-size: 7.6cqw; text-align: right; align-self: end; }
  .affiche-info .acties { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; margin-top: var(--s3); }
  .affiche-info .acties .knop:first-child { grid-column: 1 / -1; }
  .affiche-info .acties .knop--lijn { min-height: 48px; padding: 0.55em 1em; }
}

/* drukken: vakken landen één voor één, het woordmerk klikt in register */
@media (prefers-reduced-motion: no-preference) {
  .js .vak { animation: plakHeld 640ms var(--ease) both; }
  .js .vak:nth-child(2) { animation-delay: 70ms; } .js .vak:nth-child(3) { animation-delay: 140ms; } .js .vak:nth-child(4) { animation-delay: 210ms; }
  .js .woordmerk .reg { animation: register 700ms var(--ease) 120ms both; transform-origin: 30% 80%; }
  .js .affiche-info > * { animation: schuif 700ms var(--ease) both; animation-delay: 120ms; }
}
@keyframes plakHeld { from { transform: translateY(18px) rotate(-1deg); } to { transform: none; } }
@keyframes plak { from { opacity: 0; transform: translateY(26px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
/* alleen transform (compositor): het woord wordt als een drukblok op het vel gezet */
@keyframes register { from { transform: translate(-0.03em, -0.04em) scale(1.03); } to { transform: none; } }

/* showticker: de data lopen als een affichestrook */
/* de strook hangt onderaan de opening en loopt schuin over de grens met de volgende sectie (data-bewust) */
.ticker { grid-column: 1 / -1; overflow: hidden; background: var(--podium); color: var(--bot); position: relative; z-index: 5; margin: var(--s4) calc(-1 * var(--m-r) - 3vw) calc(-1 * clamp(32px, 4vw, 56px) - 24px) calc(-1 * var(--m-l) - 3vw); transform: rotate(-1.4deg); }
.ticker-band { margin: 0; }
.ticker-band { display: flex; width: max-content; }
.ticker-band > span { display: inline-flex; align-items: center; gap: 1.1em; padding: 14px 0.55em; white-space: nowrap; font: 900 clamp(1.3rem, 2.4vw, 2rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em; }
.ticker-band i { font-style: normal; color: var(--rood); }
.ticker a { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-band { animation: loop 38s linear infinite; }
  .ticker:hover .ticker-band, .ticker:focus-within .ticker-band { animation-play-state: paused; }
}
@keyframes loop { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-band > span[aria-hidden] { display: none; } }

/* snelbalk (mobiel): fans in één tik naar agenda / luisteren / volgen */
.snelbalk { display: none; }
@media (max-width: 860px) {
  .snelbalk { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; margin: var(--s4) 0 0; }
  .snelbalk a { display: grid; place-items: center; min-height: 52px; text-decoration: none; font: 900 1.05rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .05em; text-transform: uppercase; border-right: var(--rand); }
  .snelbalk a:last-child { border-right: 0; }
}

/* ── zeefdruk-registratie voor koppen (tweede inktlaag) ── */
.reg { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .titel .reg { animation: registerKop 700ms var(--ease) 80ms both; }
}
@keyframes registerKop { from { transform: translate(-0.04em, -0.03em); } to { transform: none; } }

/* ── subpagina-kopvlak ───────────────────────────────────────────────── */
.kopvlak { padding: 116px 0 clamp(48px, 5vw, 80px); }
.kopvlak .titel { font: 900 clamp(3.3rem, 12.5vw, 13rem)/0.84 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; letter-spacing: -0.01em; padding-inline: calc(var(--m-l) - 0.04em) var(--m-r); overflow-wrap: anywhere; hyphens: manual; }
.kopvlak .titel--lang { font-size: clamp(2.5rem, 9.6vw, 9rem); }
.kopvlak .titel--kort { font-size: clamp(5rem, 24vw, 26rem); line-height: 0.8; }
.kopvlak .titel--middel { font-size: clamp(3.4rem, 14vw, 16rem); }
.kopvlak div.breed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s6); align-items: end; margin-top: var(--s5); }
.kopvlak .lead { margin: 0; }
.kopvlak .kicker { margin-inline: var(--m-l) var(--m-r); }
.kopvlak-foto { position: relative; aspect-ratio: 16 / 10; margin-bottom: calc(-1 * clamp(96px, 10vw, 150px)); z-index: 5; box-shadow: var(--schaduw); }
.kopvlak-foto .duo { position: absolute; inset: 0; }
.kopvlak-foto { box-shadow: 10px 10px 0 var(--podium); }
.v-bot .kopvlak-foto, .v-merk .kopvlak-foto { box-shadow: 10px 10px 0 var(--podium); }
.kruimel { font: 800 0.85rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; padding-inline: var(--m-l) var(--m-r); margin-bottom: var(--s4); }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kruimel li + li::before { content: '/'; margin-right: 6px; opacity: .55; }
.kruimel a { text-decoration: none; opacity: .78; display: inline-block; padding-block: 6px; } .kruimel a:hover { opacity: 1; text-decoration: underline; }
@media (max-width: 860px) {
  .kopvlak { padding-top: 92px; }
  .kopvlak div.breed { grid-template-columns: 1fr; }
  .kopvlak-foto { margin-bottom: -72px; max-width: 520px; }
}
.na-foto { padding-top: clamp(120px, 11vw, 170px); }
@media (max-width: 860px) { .na-foto { padding-top: 108px; } }

/* ── onthullen bij scrollen (IntersectionObserver zet .zicht; zonder JS of met reduced-motion: gewoon zichtbaar) ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-onthul]:not(.zicht) { opacity: 0; transform: translateY(28px); }
  .js [data-onthul] { transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
  .js [data-onthul="rij"] > * { transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
  .js [data-onthul="rij"]:not(.zicht) > * { opacity: 0; transform: translateY(24px); }
  .js [data-onthul="rij"]:not(.zicht) { opacity: 1; transform: none; }
  .js [data-onthul="rij"] > :nth-child(2) { transition-delay: 70ms; } .js [data-onthul="rij"] > :nth-child(3) { transition-delay: 140ms; } .js [data-onthul="rij"] > :nth-child(4) { transition-delay: 210ms; } .js [data-onthul="rij"] > :nth-child(5) { transition-delay: 280ms; }
}

/* ── setlist op papier ───────────────────────────────────────────────── */
.setlist-wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.setlist {
  position: relative; background: var(--bot); color: var(--podium); padding: clamp(32px, 4vw, 52px) clamp(22px, 4vw, 52px) clamp(26px, 3vw, 40px);
  transform: rotate(1.2deg); box-shadow: 8px 8px 0 var(--podium); z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='44'%3E%3Crect y='43' width='8' height='1' fill='%23ED1C24' fill-opacity='.25'/%3E%3C/svg%3E");
}
.v-bot .setlist { box-shadow: 8px 8px 0 var(--podium); }
.setlist .kop-l { display: flex; justify-content: space-between; gap: 12px; font: 800 0.85rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .08em; text-transform: uppercase; color: var(--rood-diep); margin-bottom: 18px; }
.setlist ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.setlist li { counter-increment: s; display: grid; grid-template-columns: 2.4em 1fr auto; align-items: baseline; gap: 8px; padding: 2px 0; }
.setlist li::before { content: counter(s, decimal-leading-zero); font: 800 0.9rem/1 var(--f-display); font-stretch: condensed; color: var(--rood-diep); font-variant-numeric: tabular-nums; }
.setlist li b { font: 900 clamp(1.6rem, 2.6vw, 2.4rem)/1.2 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; letter-spacing: .005em; }
.setlist li small { font: 700 0.8rem/1 var(--f-tekst); opacity: .65; white-space: nowrap; }
@media (max-width: 860px) {
  .setlist-wrap { grid-template-columns: 1fr; }
  .setlist { transform: rotate(0.6deg); }
  .setlist li small { display: none; }
  .setlist li { grid-template-columns: 2.2em 1fr; }
}
.setlist-wrap--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.setlist-wrap--gelijk .setlist li b { font-size: clamp(1.4rem, 2vw, 2rem); }
@media (max-width: 860px) { .setlist-wrap--gelijk { grid-template-columns: 1fr; } }
.plak { position: relative; }

/* ── live-strook en agenda ───────────────────────────────────────────── */
.livestrook { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5); align-items: center; }
.livestrook .label { display: inline-flex; align-items: center; gap: 10px; color: var(--rood); }
.livestrook .label::before { content: ''; width: 10px; height: 10px; background: var(--rood); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .livestrook .label::before { animation: puls 1.6s steps(2, jump-none) infinite; } }
@keyframes puls { 50% { opacity: .25; } }
.livestrook .wat { font: 900 clamp(1.6rem, 3vw, 2.6rem)/1.05 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.livestrook .wat small { display: block; font: 400 .95rem/1.4 var(--f-tekst); text-transform: none; opacity: .85; margin-top: 4px; }
.livestrook a.mono { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 720px) { .livestrook { grid-template-columns: 1fr; gap: var(--s3); } }

.agenda { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.agenda li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: var(--s4); align-items: center; padding: var(--s4) 0; border-bottom: var(--rand); }
.agenda .dag { font: 900 clamp(2rem, 3.2vw, 2.9rem)/1 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.agenda .dag small { display: block; font: 800 .8rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .08em; opacity: .75; margin-top: 6px; }
.agenda .waar b { font: 900 clamp(1.5rem, 2.3vw, 2rem)/1.1 var(--f-display); font-stretch: condensed; text-transform: uppercase; display: block; }
.agenda .waar span { opacity: .85; }
.agenda .leeg { grid-template-columns: 1fr; padding: var(--s5) 0; font-size: 1.15rem; }
@media (max-width: 720px) { .agenda li { grid-template-columns: 1fr; gap: 6px; align-items: start; } }

/* ── statement ───────────────────────────────────────────────────────── */
.statement { font: 900 clamp(2.8rem, 7.6vw, 8.6rem)/0.9 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; max-width: 17ch; margin: 0; }

/* ── redenen (drie echte feiten, als affichestroken met groot cijfer — geen kaarten) ── */
/* ronde Daan 11-10: drie gelijke kolommen op één bovenlijn; cijfer, kop, tekst en link staan per rij op dezelfde hoogte (subgrid) */
.redenen { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: r; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 clamp(20px, 3vw, 48px); }
.redenen li { counter-increment: r; padding-top: var(--s4); border-top: 2px solid currentColor; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s3); align-content: start; }
.redenen li > a { align-self: end; justify-self: start; }
.redenen li::before { content: counter(r, decimal-leading-zero); font: 900 clamp(4rem, 8vw, 7.5rem)/0.8 var(--f-display); font-stretch: extra-condensed; color: var(--rood); }
.redenen h3 { font: 900 clamp(1.8rem, 2.8vw, 2.6rem)/0.95 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.redenen p { margin: 0; }
.redenen a { font: 800 1rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .05em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; gap: 0.4em; }
@media (max-width: 860px) { .redenen { grid-template-columns: 1fr; grid-template-rows: none; } .redenen li { grid-row: auto; grid-template-rows: none; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: var(--s3); padding-bottom: var(--s4); } .redenen li + li { border-top-width: 1px; } .redenen li::before { font-size: 3.6rem; grid-row: span 3; } }

/* ── luisteren: eigen studio-opnames, laden pas na een klik ── */
.luister { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 2px solid currentColor; }
.luister li { border-bottom: var(--rand); }
.luister button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s4); align-items: center; width: 100%; min-height: 76px; padding: 10px 0; }
.luister button:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }
.luister .knopje { width: 56px; height: 56px; display: grid; place-items: center; background: var(--rood); color: var(--podium); border-radius: 50%; transition: transform var(--snel) var(--ease); }
.luister .knopje svg { width: 22px; height: 22px; margin-left: 3px; }
.luister [aria-pressed="true"] .knopje svg { margin-left: 0; }
.luister button:active .knopje { transform: scale(0.92); }
.luister b { font: 900 clamp(1.8rem, 3.2vw, 2.8rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.luister small { font: 800 .85rem/1 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; opacity: .75; font-variant-numeric: tabular-nums; }
.luister .balk { grid-column: 2 / -1; height: 3px; background: color-mix(in srgb, currentColor 16%, transparent); position: relative; overflow: hidden; margin-top: -2px; }
.luister .balk i { position: absolute; inset: 0; background: var(--rood); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.luister .golf { display: inline-flex; gap: 3px; align-items: end; height: 18px; margin-left: 10px; vertical-align: middle; opacity: 0; transition: opacity 200ms linear; }
.luister .golf i { width: 3px; height: 100%; background: currentColor; transform-origin: bottom; transform: scaleY(.3); }
.luister [aria-pressed="true"] .golf { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .luister [aria-pressed="true"] .golf i { animation: golf 900ms ease-in-out infinite alternate; }
  .luister [aria-pressed="true"] .golf i:nth-child(2) { animation-delay: -300ms; } .luister [aria-pressed="true"] .golf i:nth-child(3) { animation-delay: -600ms; }
}
@keyframes golf { to { transform: scaleY(1); } }

/* ── bandleden als affichestroken ───────────────────────────────────── */
.leden { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin-top: var(--s7); }
.lid { display: block; text-decoration: none; color: inherit; }
.lid:nth-child(2) { margin-top: 72px; } .lid:nth-child(3) { margin-top: 24px; } .lid:nth-child(4) { margin-top: 104px; }
.lid .duo { aspect-ratio: 3 / 4; }
.lid .naam { display: block; font: 900 clamp(2.4rem, 4vw, 3.8rem)/0.92 var(--f-display); font-stretch: condensed; text-transform: uppercase; margin-top: var(--s3); }
.lid .rol { font: 800 .9rem/1.3 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
@media (hover: hover) and (pointer: fine) {
  .lid .duo img { transition: transform 600ms var(--ease); }
  .lid:hover .duo img { transform: scale(1.04); }
  .lid:hover .naam { color: var(--rood); }
  .v-bot .lid:hover .naam { color: var(--rood-diep); }
}
@media (max-width: 860px) { .leden { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lid:nth-child(n) { margin-top: 0; } .lid:nth-child(even) { margin-top: 40px; } }
/* scroll-gestuurd (waar de browser het kan): de strook schuift een fractie mee */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lid .duo picture { overflow: hidden; }
    .lid .duo img { scale: 1.12; animation: mee linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes mee { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

/* ── genummerde lijst met grote cijfers ─────────────────────────────── */
.nummers { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: n; border-top: 2px solid currentColor; }
.nummers li { counter-increment: n; display: grid; grid-template-columns: clamp(4rem, 9vw, 8.5rem) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: var(--rand); }
.nummers li::before { content: counter(n, decimal-leading-zero); font: 900 clamp(3rem, 7vw, 6.5rem)/0.82 var(--f-display); font-stretch: extra-condensed; color: var(--rood); font-variant-numeric: tabular-nums; }
.v-bot .nummers li::before { color: var(--rood-diep); }
.nummers .t { font: 900 clamp(1.7rem, 2.7vw, 2.5rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.nummers p { margin: 0; }
.nummers a.door { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 2px solid currentColor; border-radius: var(--r); text-decoration: none; font: 900 1.4rem/1 var(--f-display); transition: background-color 160ms linear, color 160ms linear, transform var(--snel) var(--ease); }
.nummers a.door:hover { background: var(--bot); color: var(--podium); }
.v-bot .nummers a.door:hover { background: var(--podium); color: var(--bot); }
.nummers a.door:active { transform: scale(.94); }
.nummers .dur { font: 800 .9rem/1.4 var(--f-display); font-stretch: condensed; }
@media (max-width: 860px) { .nummers li { grid-template-columns: 3.6rem minmax(0, 1fr) 52px; gap: 8px 16px; } .nummers li > .t { grid-column: 2; grid-row: 1; align-self: center; } .nummers li > a.door { grid-column: 3; grid-row: 1; } .nummers li > p, .nummers li > .dur { grid-column: 2 / 4; } }

/* ── stappen ─────────────────────────────────────────────────────────── */
.stappen { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: st; display: grid; }
.stappen li { counter-increment: st; display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: var(--rand); }
.stappen li::before { content: counter(st); font: 900 3.6rem/0.82 var(--f-display); font-stretch: extra-condensed; color: var(--rood); }
.v-bot .stappen li::before { color: var(--rood-diep); }
.stappen b { display: block; font: 700 1.15rem/1.3 var(--f-tekst); margin-bottom: 4px; }
.stappen p { margin: 0; }

/* ── tekstblokken, feiten, faq, tabellen ─────────────────────────────── */
.tekst h2 { font: 900 clamp(2rem, 3.6vw, 3.2rem)/0.95 var(--f-display); font-stretch: condensed; text-transform: uppercase; margin: var(--s5) 0 var(--s3); }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { font: 700 1.25rem/1.3 var(--f-tekst); margin: var(--s5) 0 var(--s2); }
.feiten { display: grid; grid-template-columns: minmax(8rem, 0.45fr) 1fr; margin: 0; border-top: 2px solid currentColor; }
.feiten dt, .feiten dd { margin: 0; padding: 14px 0; border-bottom: var(--rand); }
.feiten dt { font: 800 .9rem/1.5 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; opacity: .8; padding-right: 16px; }
.faq { border-top: 2px solid currentColor; }
.faq details { border-bottom: var(--rand); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 44px; gap: 16px; align-items: center; padding: 20px 0; font: 700 clamp(1.1rem, 1.6vw, 1.35rem)/1.35 var(--f-tekst); min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 900 2.2rem/1 var(--f-display); justify-self: end; transition: transform 300ms var(--ease); color: var(--rood); }
.v-bot .faq summary::after { color: var(--rood-diep); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .antw { padding: 0 56px 22px 0; }
.faq .antw p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .faq details[open] .antw { animation: omhoog 360ms var(--ease) both; } }
.tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabel th, .tabel td { text-align: left; padding: 12px 12px 12px 0; border-bottom: var(--rand); vertical-align: top; }
.tabel th { font: 800 .85rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid currentColor; }
.tabel tbody th { font: 900 1.5rem/1.05 var(--f-display) !important; font-stretch: extra-condensed; text-transform: uppercase; letter-spacing: 0; }
.tabel-wrap { overflow-x: auto; }
.pijlers { display: grid; gap: var(--s5); margin-top: var(--s5); counter-reset: p; }
.pijlers > div { border-top: 2px solid currentColor; padding-top: var(--s3); counter-increment: p; display: grid; grid-template-columns: 3.4rem 1fr; gap: 8px var(--s4); }
.pijlers > div::before { content: counter(p, decimal-leading-zero); font: 900 1.4rem/1.2 var(--f-display); color: var(--rood); grid-row: span 2; }
.v-bot .pijlers > div::before { color: var(--rood-diep); }
.pijlers h3 { font: 900 clamp(1.6rem, 2.5vw, 2.2rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; margin: 0; }
.pijlers p { margin: 0; }

.duo-kol { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.duo-kol--om { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.plakt-mee { position: sticky; top: 92px; }
@media (max-width: 860px) { .duo-kol, .duo-kol--om { grid-template-columns: 1fr; } .plakt-mee { position: static; } }

/* ── socials als grote woorden ───────────────────────────────────────── */
.socials-groot { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 4vw, 56px); }
.socials-groot a { font: 900 clamp(2.6rem, 5.6vw, 5.8rem)/1 var(--f-display); font-stretch: extra-condensed; display: inline-block; text-transform: uppercase; text-decoration: none; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color 200ms linear; padding-bottom: 4px; }
.socials-groot a:hover, .socials-groot a:focus-visible { text-decoration-color: currentColor; }
.socials-groot a span { display: block; font: 800 .9rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .06em; opacity: .8; text-transform: none; }

/* organisatoren-snelpad (home) */
.orgpad { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s6); align-items: start; }
.orgpad ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.orgpad li a { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 64px; border-bottom: var(--rand); text-decoration: none; font: 900 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.orgpad li a .pijl { transition: transform 200ms var(--ease); }
.orgpad li a:hover .pijl { transform: translateX(6px); }
.orgpad li:last-child a { color: var(--rood-diep); }
@media (max-width: 860px) { .orgpad { grid-template-columns: 1fr; gap: var(--s4); } }

/* spotify / video-gevel */
.gevel { position: relative; display: grid; place-items: center; width: 100%; border: 0; padding: 0; cursor: pointer; color: var(--bot); background: var(--podium); }
.gevel--spotify { min-height: 120px; padding: 24px; grid-template-columns: auto 1fr; gap: 20px; text-align: left; justify-items: start; }
.gevel .speel { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--rood); color: var(--podium); transition: transform var(--snel) var(--ease); }
.gevel:active .speel { transform: scale(.92); }
.gevel .speel svg { width: 26px; height: 26px; margin-left: 4px; }
.gevel b { font: 900 1.6rem/1.05 var(--f-display); font-stretch: condensed; text-transform: uppercase; display: block; }
.gevel small { font: 400 .9rem/1.4 var(--f-tekst); opacity: .8; }
/* video's zijn staand (9:16): het kader heeft die vorm, naast de tekst op desktop, op mobiel nooit hoger dan het scherm */
.video-kader { position: relative; aspect-ratio: 9 / 16; width: 100%; background: var(--podium); }
.video-kader > .gevel, .video-kader > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-kader > video { object-fit: contain; }
.video-gevel .duo { position: absolute; inset: 0; }
.video-rij { --vk: min(400px, 40vw, calc((100svh - 150px) * 9 / 16)); display: grid; grid-template-columns: var(--vk) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); align-items: center; margin-bottom: clamp(56px, 7vw, 104px); }
.video-rij--om { grid-template-columns: minmax(0, 1fr) var(--vk); }
.video-rij--om .video-kader { order: 2; }
.video-tekst .h2 { overflow-wrap: anywhere; }
@media (max-width: 720px) { .video-rij, .video-rij--om { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .video-rij--om .video-kader { order: 0; } .video-kader { width: min(100%, calc((100svh - 150px) * 9 / 16)); margin-inline: auto; } }
.artikel .video-kader { width: min(100%, 400px, calc((100svh - 150px) * 9 / 16)); }
.video-gevel .speel { position: relative; z-index: 3; width: 96px; height: 96px; }
.video-gevel .speel svg { width: 34px; height: 34px; }
@media (hover: hover) and (pointer: fine) { .gevel:hover .speel { transform: scale(1.06); } }
iframe.spotify { width: 100%; height: 352px; border: 0; display: block; }
video { width: 100%; background: var(--podium); }

/* ── galerij ─────────────────────────────────────────────────────────── */
.galerij { columns: 3 300px; column-gap: 20px; }
.galerij button { display: block; width: 100%; margin: 0 0 20px; padding: 0; border: 0; background: none; cursor: zoom-in; break-inside: avoid; }
@media (hover: hover) and (pointer: fine) { .galerij button .duo img { transition: transform 600ms var(--ease); } .galerij button:hover .duo img { transform: scale(1.03); } }
dialog.groot { border: 0; padding: 0; max-width: min(1400px, 94vw); max-height: 92vh; background: var(--podium); color: var(--bot); }
dialog.groot::backdrop { background: rgba(18, 18, 18, 0.92); }
dialog.groot img { max-height: 82vh; width: auto; margin: 0 auto; }
dialog.groot p { margin: 0; padding: 10px 14px; font: 700 .85rem/1.4 var(--f-tekst); }
dialog.groot .tape { position: absolute; top: 10px; right: 10px; }

/* ── formulier ──────────────────────────────────────────────────────── */
.formulier { display: grid; gap: var(--s4); max-width: 680px; }
.veld { display: grid; gap: 6px; }
.veld label { font: 700 1rem/1.3 var(--f-tekst); }
.veld label small { font: 400 .85rem/1 var(--f-tekst); opacity: .7; margin-left: 6px; }
.veld .hulp { font-size: .9rem; opacity: .8; margin: 0; }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; font: 400 1.0625rem/1.4 var(--f-tekst); color: var(--podium);
  background: var(--bot); border: 2px solid var(--podium); border-radius: var(--r); appearance: none; transition: box-shadow var(--snel) var(--ease);
}
.veld textarea { min-height: 150px; resize: vertical; }
.veld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E"); background-position: calc(100% - 16px) 50%; background-size: 12px 8px; background-repeat: no-repeat; padding-right: 44px; }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--rood); }
.veld .fout { color: var(--rood-diep); font: 700 .9rem/1.3 var(--f-tekst); margin: 0; }
.v-rood .veld .fout, .v-zwart .veld .fout { color: var(--rood); }
.veld .fout:empty { display: none; }
.veld[data-fout] input, .veld[data-fout] select, .veld[data-fout] textarea { border-color: var(--rood-diep); background: var(--bot); }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .twee { grid-template-columns: 1fr; } }
.honing { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.verstuur { display: grid; gap: 12px; justify-items: start; margin-top: var(--s2); }
.verstuur p { font-size: .92rem; margin: 0; opacity: .85; }
.melding { padding: 16px 18px; border: 2px solid var(--rood-diep); background: var(--bot); color: var(--podium); }
.melding:empty { display: none; }
.dank { padding: clamp(28px, 4vw, 48px); background: var(--podium); color: var(--bot); box-shadow: 8px 8px 0 var(--rood); }
.dank h2 { font: 900 clamp(2.8rem, 6vw, 4.6rem)/0.92 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; margin-bottom: 12px; color: var(--rood); }
.dank[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .dank:not([hidden]) { animation: plak 600ms var(--ease) both; } }

/* ── column (artikel) ────────────────────────────────────────────────── */
.artikel { font-size: 1.125rem; }
.artikel .meta { font: 800 .9rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: var(--s5); }
.artikel h2 { font: 900 clamp(2rem, 3.2vw, 2.8rem)/0.98 var(--f-display); font-stretch: condensed; text-transform: uppercase; margin: var(--s6) 0 var(--s3); }
.colrij { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.colrij li { border-bottom: var(--rand); }
.colrij a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 140px; gap: var(--s5); align-items: center; padding: var(--s4) 0; text-decoration: none; }
.colrij .d { font: 800 .9rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.colrij b { display: block; font: 900 clamp(1.6rem, 2.7vw, 2.4rem)/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.colrij span.i { display: block; margin-top: 6px; opacity: .88; max-width: 60ch; }
.colrij .duo { aspect-ratio: 4 / 3; }
@media (hover: hover) and (pointer: fine) { .colrij a:hover b { color: var(--rood-diep); } }
@media (max-width: 720px) { .colrij a { grid-template-columns: 1fr 96px; } .colrij .d { grid-column: 1 / -1; } }

.stageplot { width: 100%; max-width: 760px; color: var(--podium); }

/* ── slot-CTA, sticky balk, footer ───────────────────────────────────── */
.slot { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--s6); align-items: end; }
.slot .h2 { margin-bottom: var(--s3); }
.slot .acties { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
@media (max-width: 860px) { .slot { grid-template-columns: 1fr; } }
.krabbel { display: none; }

.sticky-boek { position: fixed; inset: auto 0 0 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--podium); display: none; gap: 10px; box-shadow: 0 -1px 0 rgba(242, 237, 228, .1); transform: translateY(110%); transition: transform 320ms var(--ease); }
.sticky-boek .tape { flex: 1 1 0; justify-content: center; min-height: 52px; font-size: 1.1rem; padding-inline: 0.6em; box-shadow: 3px 3px 0 var(--podium); }
.sticky-boek .tape--bot { flex: 0 1 auto; color: var(--bot); box-shadow: inset 0 0 0 2px currentColor; }
/* smalle telefoons (360-400 px): beide knoppen passen altijd naast elkaar, niets steekt buiten beeld */
.sticky-boek .tape { min-width: 0; gap: 0.4em; }
@media (max-width: 420px) { .sticky-boek { gap: 8px; padding-inline: 10px; } .sticky-boek .tape { font-size: 1rem; padding-inline: 0.5em; } .sticky-boek .tape .pijl { display: none; } }
.sticky-boek.aan { transform: none; }
@media (max-width: 860px) { .sticky-boek { display: flex; } body.heeft-sticky { padding-bottom: 76px; } }

.voet { background: var(--podium); color: var(--bot); padding: clamp(64px, 8vw, 112px) 0 0; overflow: hidden; }
.voet-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
.voet h2 { font: 800 .9rem/1.4 var(--f-display); font-stretch: condensed; letter-spacing: .1em; text-transform: uppercase; color: var(--rood); margin-bottom: var(--s3); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; opacity: .88; font-size: .95rem; }
.voet li a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--rood); }
.voet .tag { font-size: 1.05rem; max-width: 30ch; }
.voet-klein { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid rgba(242, 237, 228, .12); font: 400 .85rem/1.5 var(--f-tekst); opacity: .8; }
.voet-klein a { text-decoration: underline; display: inline-block; padding-block: 13px; }
.voet-klein .talen a { min-height: 44px; }
.voet-woord { font: 900 25vw/0.76 var(--f-display); font-stretch: extra-condensed; text-transform: uppercase; white-space: nowrap; margin: var(--s6) 0 0; padding-inline: 1.2vw; transform: translateY(0.1em); user-select: none; color: var(--rood); letter-spacing: -0.01em; }
@media (max-width: 1000px) { .voet-grid { grid-template-columns: 1fr 1fr; } .voet-grid > :first-child { grid-column: 1 / -1; } }

/* ── 404 ─────────────────────────────────────────────────────────────── */
.vier { min-height: 100svh; display: grid; align-content: center; }
.vier .titel { font-size: clamp(3rem, 12vw, 13rem); }

/* ── paginaovergangen: cross-document View Transitions (progressieve verbetering) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms var(--ease) both vtUit; }
::view-transition-new(root) { animation: 360ms var(--ease) both vtIn; }
@keyframes vtUit { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(18px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
@media print { .kop, .sticky-boek, .menu, .ticker { display: none !important; } body { background: var(--bot); color: var(--podium); } }

/* op rode vlakken worden de rode accenten zwart (rood op rood leest niet) */
.v-rood .redenen li::before, .v-rood .nummers li::before, .v-rood .stappen li::before, .v-rood .pijlers > div::before, .v-rood .faq summary::after,
.v-bloed .redenen li::before, .v-bloed .nummers li::before, .v-bloed .stappen li::before, .v-bloed .faq summary::after,
.v-merk .nummers li::before, .v-merk .stappen li::before { color: var(--podium); }
.v-rood .luister .knopje, .v-rood .gevel .speel { background: var(--bot); color: var(--podium); }
/* kleine kopjes op zwart: botwit (rood op zwart haalt alleen AA bij groot schrift) */
.voet h2, .menu h2 { color: var(--bot); opacity: .75; }
.livestrook .label { color: var(--bot); }
/* bandfoto's: de eigen foto's zijn donker (blauw podiumdoek) — lichter afdrukken zodat het rood draagt */
.duo img { filter: grayscale(1) brightness(1.55) contrast(1.35); }
/* ronde Daan 11-10: de duotoon is vooraf gebakken per foto (schaduwen opgelicht, gezicht met eigen toonbereik), dus geen
   css-filter en geen multiply meer. Hover/focus/tik: de originele kleurfoto (tweede laag, pas geladen bij interactie)
   komt er met een korte opacity-wissel overheen (alleen compositor-werk). */
.duo--gebakken { background: var(--podium); }
.duo--gebakken picture { mix-blend-mode: normal; }
.duo--gebakken img, .duo-kleur img { filter: none; }
.duo-kleur { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease); }
.duo-kleur img { width: 100%; height: 100%; object-fit: cover; }
.duo::after { transition: opacity 280ms var(--ease); }
.duo.kleur-aan .duo-kleur.klaar { opacity: 1; }
.duo.kleur-aan::after { opacity: 0; }


/* ── fragment tickets ── */
/* ── tickets (frag-tickets.js) ── */
.tk-kop-extra{display:grid;gap:var(--s3);margin-top:var(--s4)}
.tk-prijzen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:var(--s3)}
.tk-prijs{display:grid;gap:2px;padding:var(--s3) var(--s3) 14px;border:2px solid currentColor;border-radius:var(--r)}
.tk-prijs--voor{background:var(--rood);color:var(--podium);border-color:transparent}
.tk-prijs b{font:900 clamp(2.4rem,5vw,3.4rem)/.95 var(--f-display);font-stretch:condensed;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tk-prijs small{font:600 .85rem/1.3 var(--f-tekst);opacity:.85}
.tk-nog{font:800 .95rem/1.3 var(--f-display);font-stretch:condensed;letter-spacing:.05em;text-transform:uppercase}
.tk-nog--groot{font-size:1.15rem;margin:0}
.tk-nog::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--rood);margin-right:.5em;vertical-align:.05em}
.tk-form .h3{margin-bottom:0}
.tk-stap{display:grid;grid-template-columns:56px minmax(0,7rem) 56px;gap:8px;align-items:stretch}
.tk-stap input{text-align:center;font:900 1.6rem/1 var(--f-display);font-stretch:condensed;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.tk-stap input::-webkit-inner-spin-button,.tk-stap input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tk-stapknop{min-height:56px;border:2px solid currentColor;background:transparent;color:inherit;font:900 1.6rem/1 var(--f-display);border-radius:var(--r);cursor:pointer;touch-action:manipulation}
.tk-stapknop:active{transform:translate(2px,2px)}
.tk-stapknop:disabled{opacity:.3;cursor:default}
.tk-form .veld input{min-height:56px;font-size:1.125rem}
.tk-vink{display:flex;gap:12px;align-items:flex-start;font:400 1rem/1.45 var(--f-tekst);cursor:pointer}
.tk-vink input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--rood)}
.tk-totaal{display:flex;align-items:baseline;gap:12px;margin:0;font:800 1rem/1 var(--f-display);font-stretch:condensed;letter-spacing:.06em;text-transform:uppercase}
.tk-totaal b{font:900 2.2rem/1 var(--f-display);font-stretch:condensed;font-variant-numeric:tabular-nums;letter-spacing:0}
.tk-verstuur .tape{width:100%;justify-content:center}
@media (min-width:700px){.tk-verstuur .tape{width:auto}}
.tk-klein{font-size:.9rem;opacity:.85}
.tk-fout{display:none;margin:0;padding:14px 16px;border:2px solid var(--rood-diep);background:var(--bot);color:var(--podium);font-weight:700}
.tk-fout:target{display:block}
.tk-staat{padding:var(--s4);border:2px solid currentColor;border-radius:var(--r)}
.tk-staat p{max-width:52ch}
.tk-noot{margin:var(--s3) 0 0;padding:12px 14px;border-left:4px solid var(--rood);font-size:.95rem}
.tk-zij-kop{margin-top:var(--s5)}
.tk-shows{list-style:none;margin:0;padding:0;border-top:2px solid currentColor}
.tk-showrij{display:grid;grid-template-columns:8rem minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:var(--rand)}
.tk-showdatum b{display:block;font:900 clamp(2rem,3.2vw,2.9rem)/1 var(--f-display);font-stretch:extra-condensed;text-transform:uppercase}
.tk-showdatum small{display:block;font:700 .8rem/1.3 var(--f-tekst);opacity:.75;margin-top:4px}
.tk-showwat{display:grid;gap:4px}.tk-showwat a{text-decoration:none}
.tk-showwat b{font:900 clamp(1.4rem,2.4vw,2rem)/1.05 var(--f-display);font-stretch:condensed;text-transform:uppercase}
@media (max-width:640px){.tk-showrij{grid-template-columns:1fr}.tk-showrij .tape{justify-self:start}}
.tk-teaser{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;padding:14px 18px;background:var(--rood);color:var(--podium);text-decoration:none;border-radius:var(--r)}
.tk-teaser-datum{grid-row:span 2;font:900 1.6rem/1 var(--f-display);font-stretch:condensed;text-transform:uppercase}
.tk-teaser-datum b{display:block;font-size:.85rem;letter-spacing:.08em}
.tk-teaser-wat b{font:900 1.15rem/1.1 var(--f-display);font-stretch:condensed;text-transform:uppercase}
.tk-teaser-prijs{grid-column:2;font:600 .9rem/1.3 var(--f-tekst)}
.tk-teaser-knop{grid-row:1/span 2;grid-column:3;font:900 1.1rem/1 var(--f-display);font-stretch:condensed;text-transform:uppercase;letter-spacing:.04em}
.tk-teaser:hover .pijl,.tk-teaser:focus-visible .pijl{transform:translateX(4px)}
.tk-teaser .pijl{display:inline-block;transition:transform 200ms var(--ease)}
.tk-teaser--balk{border-radius:0;padding:10px 16px}
.tk-teaser--regel{display:inline-flex;flex-wrap:wrap;gap:6px 12px;padding:8px 12px}
.tk-teaser--regel .tk-teaser-datum{font-size:1rem}.tk-teaser--regel .tk-teaser-datum b{display:inline;font-size:1rem}
@media (prefers-reduced-motion:reduce){.tk-teaser .pijl{transition:none}}

/* ── fragment nieuwsbrief ── */
.nb{max-width:620px}
.nb-kicker{font:800 .78rem/1.3 var(--f-display);font-stretch:condensed;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .6rem}
.nb-kop{font-family:var(--f-display);font-weight:900;font-stretch:condensed;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.6rem);line-height:.95;margin:0 0 .7rem}
.nb-tekst{font-size:1.125rem;margin:0 0 1.4rem;max-width:44ch}
.nb-kop-klein{font-family:var(--f-display);font-weight:900;font-stretch:condensed;text-transform:uppercase;font-size:1.5rem;line-height:1;margin:0 0 .35rem}
.nb-tekst-klein{margin:0 0 1rem;max-width:40ch}
.nb-label{display:block;font:600 .75rem/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem}
.nb-rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:stretch}
.nb-rij input{flex:1 1 15rem;min-width:0;min-height:54px;padding:.85rem 1rem;font:inherit;font-size:1.0625rem;color:#121212;background:#F2EDE4;border:2px solid #121212;border-radius:0;-webkit-appearance:none;appearance:none}
.nb-rij input::placeholder{color:#2A2A2A}
.nb-rij input:focus-visible,.nb-form button:focus-visible{outline:3px solid #ED1C24;outline-offset:3px}
.nb-rij button{flex:0 0 auto;min-height:54px;cursor:pointer}
.nb-rij button[disabled]{opacity:.65;cursor:progress}
.nb--compact .nb-rij input{min-height:48px;flex-basis:12rem}
.nb--compact .nb-rij button{min-height:48px}
.nb-uitleg{font-size:.875rem;line-height:1.5;opacity:.85;margin:.8rem 0 0;max-width:52ch}
.nb-uitleg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.nb-honing{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.nb-melding{margin:.9rem 0 0;padding:.8rem 1rem;font-weight:700;line-height:1.45;border-left:6px solid currentColor;max-width:52ch}
.nb-melding.is-ok{background:#121212;color:#F2EDE4;border-color:#ED1C24}
.nb-melding.is-fout{background:#F2EDE4;color:#7E0B11;border-color:#ED1C24}
.nb-form.is-klaar .nb-rij,.nb-form.is-klaar .nb-label{display:none}
.nb-fout{display:none;margin:0 0 1rem;padding:.8rem 1rem;background:#F2EDE4;color:#7E0B11;border-left:6px solid #ED1C24;font-weight:700}
.nb-fout:target{display:block}
.nb-duo{display:grid;gap:clamp(32px,6vw,80px);grid-template-columns:1fr}
@media (min-width:900px){.nb-duo{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.nb-duo--voorbeeld{align-items:center}.nb-duo--voorbeeld .nb-mock{position:relative;z-index:2;margin-top:-150px;transform:rotate(-1.5deg)}}
.nb-zij .h3{margin-top:0}.nb-zij .h3+dl,.nb-zij p{margin-bottom:2rem}
.nb-mock{background:#F2EDE4;color:#121212;max-width:360px;justify-self:center;width:100%;box-shadow:12px 12px 0 #ED1C24;font-family:var(--f-display)}
.nb-mock-top{display:flex;justify-content:space-between;background:#121212;color:#F2EDE4;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem .9rem}
.nb-mock-kop{background:#ED1C24;padding:.7rem .9rem .8rem;font-family:var(--f-display);font-weight:900;font-stretch:condensed;line-height:.85}
.nb-mock-kop b{display:block;font-weight:400;font-size:1.3rem;color:#121212}
.nb-mock-kop strong{display:block;font-weight:400;font-size:clamp(3.4rem,15vw,4.6rem);color:#F2EDE4}
.nb-mock-show{display:flex;gap:1rem;align-items:flex-end;background:#121212;color:#F2EDE4;padding:1rem .9rem .6rem;font-size:.7rem;letter-spacing:.14em}
.nb-mock-dag{display:flex;flex-direction:column;line-height:1}
.nb-mock-dag b{font-family:var(--f-display);font-weight:900;font-stretch:condensed;font-size:3.6rem;line-height:.9;color:#ED1C24;letter-spacing:0}
.nb-mock-zaal{font-family:var(--f-display);font-size:1.6rem;letter-spacing:0;text-transform:uppercase;border-left:3px solid #ED1C24;padding-left:.7rem;line-height:1}
.nb-mock-zaal small{display:block;font-family:var(--f-display);font-size:.62rem;letter-spacing:.14em;color:#E3DACB;margin-top:.3rem}
.nb-mock-knop{background:#121212;padding:.2rem .9rem 1rem}
.nb-mock-knop span{display:inline-block;background:#ED1C24;color:#121212;font:700 .72rem/1 'Bespoke Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.6rem .8rem}
.nb-mock-set{list-style:none;margin:0;padding:.8rem .9rem 1rem;background:#B5121A;color:#F2EDE4;counter-reset:s}
.nb-mock-set li{counter-increment:s;font-family:var(--f-display);text-transform:uppercase;font-size:1.05rem;border-top:1px solid #7E0B11;padding:.3rem 0}
.nb-mock-set li:before{content:counter(s,decimal-leading-zero);font:.6rem var(--f-display);margin-right:.8rem;color:#E3DACB}
/* ══ KOPPEL-OVERRIDES — alles hieronder komt NA de css van de fragmenten (tickets, nieuwsbrief), zodat het
   huisontwerp wint zonder in hun bestanden te schrijven. Alleen rood / zwart / botwit. ══ */

/* tickets (frag-tickets) */
.tk-prijs--voor { background: var(--rood-diep); color: var(--bot); border-color: var(--rood-diep); }
.v-rood .tk-prijs--voor { border-color: var(--bot); }
.tk-nog::before { background: var(--rood); }
.tk-vink input { accent-color: var(--rood); }
.tk-fout { border-color: var(--rood-diep); background: var(--bot); color: var(--podium); }
.tk-noot { border-left-color: var(--rood); }
.tk-teaser { background: var(--bot); color: var(--podium); border: 2px solid var(--podium); }

/* nieuwsbrief-blok (frag-nieuwsbrief) */
.nb-kicker, .nb-label { font: 800 0.875rem/1.3 var(--f-display); font-stretch: condensed; letter-spacing: .08em; text-transform: uppercase; }
.nb-kop { font: 900 clamp(2.6rem, 6vw, 4.6rem)/0.9 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.nb-kop-klein { font: 900 1.7rem/1 var(--f-display); font-stretch: condensed; text-transform: uppercase; }
.nb-rij input { color: var(--podium); background: var(--bot); border: 2px solid var(--podium); border-radius: var(--r); }
.nb-rij input::placeholder { color: var(--as); opacity: .75; }
.nb-rij input:focus-visible, .nb-form button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.v-zwart .nb-rij input, .v-rood .nb-rij input, .voet .nb-rij input { border-color: var(--bot); }
.nb-melding.is-ok { background: var(--podium); color: var(--bot); border-color: var(--rood); }
.nb-melding.is-fout, .nb-fout { background: var(--bot); color: var(--rood-diep); border-color: var(--rood-diep); }
.voet .nb { margin-top: var(--s4); }
.voet .nb-kop-klein { color: var(--bot); }
.nb-mock { background: var(--bot); color: var(--podium); box-shadow: 12px 12px 0 var(--rood); font-family: var(--f-tekst); }
.nb-mock-top, .nb-mock-show, .nb-mock-knop { background: var(--podium); color: var(--bot); }
.nb-mock-kop { background: var(--rood); font-family: var(--f-display); font-weight: 900; font-stretch: extra-condensed; text-transform: uppercase; }
.nb-mock-kop b { color: var(--podium); font-weight: 900; }
.nb-mock-kop strong { color: var(--bot); font-weight: 900; text-shadow: none; }
.nb-mock-dag b, .nb-mock-zaal, .nb-mock-set li { font-family: var(--f-display); font-weight: 900; font-stretch: extra-condensed; }
.nb-mock-dag b { color: var(--rood); }
.nb-mock-zaal { border-left-color: var(--rood); }
.nb-mock-zaal small { font-family: var(--f-tekst); color: var(--bot-2); }
.nb-mock-knop span { background: var(--rood); color: var(--podium); }
.nb-mock-set { background: var(--rood-diep); color: var(--bot); }
.nb-mock-set li { border-top-color: var(--rood); }
.nb-mock-set li:before { font-family: var(--f-display); color: var(--bot-2); }

/* ronde Daan 11-10: tikdoelen ≥ 44 px voor losse links (agenda, downloads, showlijst) */
.agenda a.mono { min-height: 44px; display: inline-flex; align-items: center; }
.tekst li > a:only-child { display: inline-block; padding-block: 11px; }
.tk-showwat > a { display: inline-flex; align-items: center; min-height: 44px; }
/* speelknop onderin het staande kader: gezichten zitten bovenin de poster */
.video-kader .video-gevel { align-items: end; padding-bottom: 16%; }