/*
 * Public site — reset, typography, layout primitives and shared components.
 *
 * Replaces templatemo-festava-live.css (1486 lines), Bootstrap 5 (190 kB) and
 * Bootstrap Icons (88 kB). No framework, no preprocessor: plain CSS with
 * custom properties and native nesting. Icons are inline SVG.
 *
 * Layout is carried by four primitives instead of a grid framework:
 *   .wrap   centred max-width with gutters   (was .container)
 *   .grid   auto-fitting columns             (was .row + .col-*)
 *   .stack  vertical rhythm between children (was the mb-* ladder)
 *   .split  two columns that fold            (was .row with two .col-lg-6)
 *
 * Motion lives behind prefers-reduced-motion; nothing here is required to
 * read the page.
 */

/* ---------------------------------------------------------------- reset -- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; }

:target { scroll-margin-top: 6rem; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ----------------------------------------------------------- typography -- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Small caps-ish label. The letterspacing is what makes it read as a label
   rather than as shouting. */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}

a {
  color: var(--action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s var(--ease);

  &:hover { color: var(--action-hover); }
}

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-m);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

/* --min sets the smallest a column may get before the row rewraps. */
.grid {
  display: grid;
  gap: var(--gap, var(--sp-m));
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 17rem), 1fr));
}

/*
 * Verticale ritmiek. gap, niet marges op de kinderen — en dat is geen detail.
 *
 * Met `.stack > * + * { margin-block-start: var(--flow) }` resolveert --flow op
 * het KIND. Een geneste .stack zet --flow voor zijn eigen kinderen en
 * verkleinde daarmee ook zijn eigen afstand tot het blok erboven: de
 * knoppengroep op /trekkertrek stond op 8px van de kaart erboven, krapper dan
 * de 24px tussen de kaarten onderling. Dat trof tien geneste stacks.
 *
 * gap staat op de container en kan dus niet lekken.
 */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--flow, var(--sp-s));
}

.split {
  display: grid;
  gap: var(--gap, var(--sp-xl));
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .split { grid-template-columns: var(--ratio, 1fr 1fr); }
  .split--wide-left { --ratio: 1.35fr 1fr; }
  .split--wide-right { --ratio: 1fr 1.35fr; }
}

/*
 * .split centreert verticaal, wat klopt bij een foto naast tekst. Bij een hoge
 * kolom naast een korte kaart zakt die kaart daardoor naar het midden — op
 * /tickets stond de QR-kaart 162px lager dan de prijskaarten ernaast.
 */
.split--top { align-items: start; }

.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }

/* Alternating surfaces give the long pages a rhythm without extra markup. */
.section--zacht { background-color: var(--surface-soft); }
.section--licht { background-color: var(--surface); }

.section--dark {
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse);
  /* Eigen stapelcontext, zodat een .overlap__kaart hierbinnen boven de foto
     landt zonder de rest van de pagina te raken. */
  position: relative;
  isolation: isolate;

  & h1, & h2, & h3 { color: var(--text-on-inverse-strong); }
  & .lead { color: var(--text-on-inverse-muted); }
  & .eyebrow { color: var(--accent-light); }
  & a { color: var(--text-on-inverse); }
  & a:hover { color: var(--accent-light); }
}

/* -------------------------------------------------------------- overlap -- */

/*
 * Een foto met een tekstkaart die er deels over valt. Dit is wat de site
 * speelser maakt dan een nette kolommenrij: het beeld en de tekst raken
 * elkaar in plaats van naast elkaar te staan.
 *
 * Onder 48rem stapelt het gewoon — een tekstkaart over een foto is op een
 * telefoon onleesbaar, en de negatieve marge zou de foto vrijwel volledig
 * bedekken.
 */
.overlap { display: grid; }

.overlap__media {
  border-radius: var(--radius-media);
  overflow: hidden;

  & img {
    display: block;
    inline-size: 100%;
    object-fit: cover;
  }
}

.overlap__kaart {
  background-color: var(--surface);
  color: var(--text);
  border-radius: var(--radius-card);
  padding: var(--sp-m);
}

/*
 * Een lichte kaart in een donkere sectie is een eiland: .section--dark zet via
 * afstammelingen álle koppen, leads en links op de lichte set, en zonder deze
 * terugzetting wordt een witte kop op een witte kaart onzichtbaar.
 * Nagerekend op wit: --text 17.13 · --text-muted 7.80 · --brand 5.43 ·
 * --action 5.07.
 */
.section--dark .overlap__kaart {
  & h1, & h2, & h3 { color: var(--text); }
  & .lead { color: var(--text-muted); }
  & .eyebrow { color: var(--brand); }
  & a { color: var(--action); }
  & a:hover { color: var(--action-hover); }
}

@media (min-width: 48rem) {
  .overlap__kaart {
    /* position, zodat de kaart binnen de stapelcontext van de sectie boven
       de foto landt zonder een z-index nodig te hebben. */
    position: relative;
    margin-block-start: calc(var(--sp-xl) * -1);
    margin-inline-end: var(--sp-xl);
    justify-self: start;
    max-inline-size: 34rem;
    padding: var(--sp-l);
    box-shadow: var(--shadow-l);
  }

  .overlap--rechts .overlap__kaart {
    justify-self: end;
    margin-inline: var(--sp-xl) 0;
  }
}

/* ------------------------------------------------------------- sectiekop -- */

.section-head {
  max-width: 44rem;
  margin-block-end: var(--sp-l);
}

.section-head--centred {
  margin-inline: auto;
  text-align: center;
}

/* Een kort groen streepje onder een kop, goedkoper dan een hele rand. */
.section-head h2::after {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 5px;
  border-radius: var(--radius-pill);
  background-color: var(--brand-bright);
  margin-block-start: var(--sp-s);
}

.section-head--centred h2::after { margin-inline: auto; }

/* --------------------------------------------------------------- knoppen -- */

/*
 * Een rij acties: knoppen naast elkaar, met een secundaire tekstlink erachter
 * in plaats van eronder. Dat is hoe een inlogblok er hoort uit te zien.
 *
 * align-items: center lijnt de link op het midden van de knop uit; de losse
 * <p>-per-knop die hier eerst stond kon dat niet, en wrap zorgt dat het op
 * smalle schermen netjes afbreekt in plaats van uit te lopen.
 */
.acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-s);
}

.btn {
  --btn-bg: var(--action);
  --btn-fg: var(--text-on-action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out-back),
              box-shadow 0.16s var(--ease),
              background-color 0.16s var(--ease);
  box-shadow: var(--shadow-s);

  &:hover {
    background-color: var(--action-hover);
    color: var(--btn-fg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-m);
  }

  &:active { transform: translateY(0); }

  & svg { flex: none; inline-size: 1.15em; block-size: 1.15em; }
}

/* Donkere tekst op het oranje: wit haalt er 3.50:1 en faalt dus.
   --accent-text haalt 4.89:1. */
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-text);

  &:hover { background-color: var(--accent-light); }
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--action);
  box-shadow: inset 0 0 0 2px var(--action);

  &:hover {
    --btn-fg: var(--text-on-action);
    background-color: var(--action);
  }
}

.section--dark .btn--ghost {
  --btn-fg: var(--text-on-inverse);
  box-shadow: inset 0 0 0 2px var(--text-on-inverse);

  &:hover {
    --btn-fg: var(--surface-inverse);
    background-color: var(--text-on-inverse);
  }
}

/*
 * Over de herofoto wit, niet de blauwe actiekleur. Blauw haalt op een donkere
 * ondergrond 3.34:1 en valt daar dus zo goed als weg. De hero is geen
 * .section--dark en viel daarom buiten de regel hierboven.
 *
 * Wit en niet --text-on-inverse: achter een foto is er geen vaste
 * achtergrondkleur om een tint op af te stemmen, en wit is al de tekstkleur
 * van de hero zelf.
 */
.hero .btn--ghost {
  --btn-fg: var(--text-on-media);
  box-shadow: inset 0 0 0 2px var(--text-on-media);

  &:hover {
    --btn-fg: var(--surface-inverse);
    background-color: var(--text-on-media);
  }
}

/* --------------------------------------------------------------- badges -- */

/*
 * Styled after an old enamel sign: a heavy rim with a lighter inner line.
 * Used for dates, prices and lane numbers.
 */
.emaille {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-surface);
  color: var(--text-on-brand);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}

.emaille--accent {
  background-color: var(--accent);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px rgb(7 33 24 / 0.25);
}

.emaille--live {
  background-color: var(--live);
  color: var(--text-on-action);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4);
}

/* The pulse marks a stream that is actually running right now. */
.pulse {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.6s var(--ease) infinite; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}

/* --------------------------------------------------------------- kaarten -- */

.card {
  background-color: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--sp-m);
  box-shadow: var(--shadow-m);
  border: 1px solid var(--border);
}

.section--dark .card {
  background-color: var(--surface-inverse-raised);
  border-color: var(--border-on-inverse);
  color: var(--text-on-inverse);
}

/* A card that is a link. The whole surface is clickable and it lifts. */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);

  &:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--shadow-l);
  }
}

/*
 * Tile: the four-up entry into the themed pages. Image with the label sitting
 * on a gradient, so the text stays readable whatever the photo does.
 */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: var(--text-on-media);
  box-shadow: var(--shadow-m);

  & img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgb(7 33 24 / 0.8) 0%,
      rgb(7 33 24 / 0.1) 55%,
      transparent 100%
    );
  }

  &:hover img { transform: scale(1.06); }
  &:hover .tile__title { color: var(--accent-light); }
}

.tile__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: var(--sp-m);
}

.tile__title {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--fs-h3);
  color: var(--text-on-media);
  transition: color 0.2s var(--ease);
}

.tile__meta {
  font-size: var(--fs-small);
  color: var(--text-on-inverse-muted);
}

/* ----------------------------------------------------------- prijskaart -- */

.prijs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
}

/*
 * Titel boven, bedrag eronder — altijd, ongeacht de kaartbreedte.
 *
 * Dit stond eerst als rij met space-between, en dat brak op twee manieren: het
 * bedrag liep uit smalle kaarten, en met flex-wrap als vangnet hing het per
 * kaart ergens anders (naast "Zondag ROXX" wel, onder "Zaterdag Donders
 * piratenband" niet). Titels zijn hier een of twee regels en de kaarten mogen
 * tot 12rem smal worden, dus naast elkaar is nooit voorspelbaar.
 */
.prijs__top {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--sp-2xs);
}

/*
 * Niet elke kaart heeft een ondertitel ("Bijrijders" wel een titel, geen sub),
 * en dan staat het bedrag een regel hoger dan bij de buren in dezelfde rij.
 * Dit reserveert die regel. Leeg, geen &nbsp;, zodat schermlezers niets extra's
 * te horen krijgen; zonder lh-ondersteuning valt het terug op de oude situatie
 * in plaats van te breken.
 */
.prijs__top h3:not(:has(.prijs__sub))::after {
  content: "";
  display: block;
  font-size: var(--fs-small);
  block-size: 1lh;
}

.prijs__bedrag {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--fs-bedrag);
  color: var(--brand);
  white-space: nowrap;
}

.section--dark .prijs__bedrag { color: var(--brand-bright); }

.prijs__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.section--dark .prijs__list { color: var(--text-on-inverse-muted); }

/* A tick drawn in CSS rather than pulled from an icon font. */
.prijs__list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
}

.prijs__list li::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.28rem;
  margin-block-start: 0.55em;
  border-inline-start: 2px solid var(--brand);
  border-block-end: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------- fotogrid -- */

/*
 * Masonry-ish without JS: a dense grid where a few cells span two rows. Keeps
 * the wall of photos from reading as a uniform contact sheet.
 */
.film { margin: 0; }
.film__label { margin: 0; color: var(--text-muted); font-size: var(--step--1, 0.875rem); }
.film__label--regel { display: block; }
.fotos-kop { margin-block-end: var(--sp-s); }

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  grid-auto-rows: 11rem;
  gap: var(--sp-2xs);
  /* Dense flow lets the smaller photos backfill the holes the spanning cells
     leave, so the wall stays solid whatever the photo count is. */
  grid-auto-flow: dense;
}

.fotos img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: var(--radius-media);
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

.fotos a { display: block; overflow: hidden; border-radius: var(--radius-media); }

.fotos a:hover img { transform: scale(1.05); filter: saturate(1.1); }

.fotos > :nth-child(5n + 1) { grid-row: span 2; grid-column: span 2; }

/*
 * In de brede muur krijgt een staande foto BEWUST geen hogere cel. Gemeten:
 * dat scheelt maar 33% -> 26% weggesneden, terwijl de muur er flink holler van
 * wordt (de homepage zakte van 72% naar 53% gevuld). grid-auto-flow: dense kan
 * het gat alleen dichten als er genoeg foto's na komen, en dat is hier niet zo.
 * Een muur op vierkante cellen mag kaderen; dat is wat een contactvel doet.
 *
 * In .fotos--kolom ligt dat anders — zie daar.
 */

/* --------------------------------------------------------------- tabel -- */

.tabel-scroll { overflow-x: auto; }

.tabel {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-inline-size: 34rem;
}

.tabel th, .tabel td {
  padding: var(--sp-xs) var(--sp-s);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

.tabel thead th {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--fs-body);
  color: var(--brand);
  border-block-end: 2px solid var(--brand);
  white-space: nowrap;
}

.tabel tbody th {
  font-weight: 600;
  color: var(--text-subtle);
  white-space: nowrap;
}

.section--dark .tabel th,
.section--dark .tabel td { border-block-end-color: var(--border-on-inverse); }

.section--dark .tabel thead th {
  color: var(--text-on-inverse);
  border-block-end-color: var(--brand-bright);
}

.section--dark .tabel tbody th { color: var(--text-on-inverse-muted); }

/* ------------------------------------------------------------- sponsors -- */

.sponsor-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-m);
  padding: var(--sp-m);
  background-color: var(--surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
}

.sponsor-rij img {
  max-block-size: 3.5rem;
  inline-size: auto;
  /* Logos arrive in every colour and format; a light desaturation at rest
     keeps the row calm, full colour on hover rewards the sponsor. */
  filter: saturate(0.15) opacity(0.75);
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}

.sponsor-rij a:hover img {
  filter: none;
  transform: scale(1.05);
}

.sponsor-oproep {
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
}

.sponsor-namen {
  columns: 3 12rem;
  column-gap: var(--sp-m);
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ------------------------------------------------------------ countdown -- */

.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s);
  list-style: none;
  justify-content: center;
}

.countdown li {
  min-inline-size: 5rem;
  padding: var(--sp-s);
  border-radius: var(--radius-card);
  background-color: var(--surface-inverse-raised);
  box-shadow: inset 0 0 0 1px var(--border-on-inverse);
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-inverse-muted);
}

.countdown span {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
  color: var(--text-on-inverse-strong);
  /* Tabular figures stop the numbers jittering as they tick. */
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- motion -- */

/*
 * One orchestrated entrance beats scattered micro-animations. Children of
 * .reveal-group fade up in sequence; scroll-driven reveals use
 * animation-timeline where supported. Content is visible without either.
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal-group > * {
    animation: rise 0.7s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise 0.8s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }

    /* Het beeld zelf schuift binnen zijn kader, in plaats van dat het kader
       opkomt. Daarom staat de animatie op de <img> en niet op de houder: die
       heeft overflow: hidden, dus de foto beweegt achter een vaste rand. */
    .reveal--media > img {
      animation: schuif-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes schuif-in {
  from { scale: 1.12; translate: 0 2rem; }
  to { scale: 1; translate: 0 0; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- iconen -- */

.icon {
  display: inline-block;
  vertical-align: -0.14em;
  flex: none;
}

.icon--big { font-size: 1.4em; }

/* --------------------------------------------------------- skip-link -- */

.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-s);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--sp-2xs) var(--sp-s);
  border-radius: var(--radius-s);
  background-color: var(--surface-inverse);
  color: var(--text-on-inverse-strong);
  font-size: var(--fs-small);

  &:focus { inset-block-start: var(--sp-s); color: var(--text-on-inverse-strong); }
}

/* ----------------------------------------------------------------- kop -- */

.kop {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border);
}

.kop__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  min-block-size: 4.5rem;
}

.kop__merk {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  text-decoration: none;
  color: var(--text);
  margin-inline-end: auto;

  &:hover { color: var(--text); }
  &:hover .kop__naam-onder { color: var(--brand); }
}

.kop__logo { inline-size: 2.75rem; block-size: auto; }

.kop__naam {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  line-height: 1;
}

.kop__naam-boven {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.kop__naam-onder {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--brand);
  transition: color 0.18s var(--ease);
}

.kop__lijst {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  list-style: none;
}

.kop__link {
  position: relative;
  display: block;
  padding: 0.4rem 0.15rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;

  /* De blauwe onderstreping groeit vanaf de startrand bij hover, en staat
     vast onder de pagina waar je bent. */
  &::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 3px;
    inline-size: 0;
    border-radius: var(--radius-pill);
    background-color: var(--action);
    transition: inline-size 0.22s var(--ease);
  }

  &:hover { color: var(--action); }
  &:hover::after { inline-size: 100%; }

  &[aria-current="page"] {
    color: var(--action);
    font-weight: 600;
  }

  &[aria-current="page"]::after { inline-size: 100%; }
}

.kop__acties {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}

.kop__cta { padding: 0.6rem 1.2rem; }

/* On a phone the Tickets or Live button and the menu leave no room for the name next to the logo. */
@media (max-width: 28rem) {
  .kop__inner:has(.kop__cta) .kop__naam { display: none; }
}

/* Desktop shows the inline nav, mobile shows the disclosure. */
.kop__nav { display: none; }

/* The language switch sits in the header on wide screens and in the menu on small ones. */
.taal--header { display: none; }

@media (min-width: 62rem) {
  .kop__nav { display: block; }
  .menu { display: none; }
  .taal--header { display: block; }
}

/* ------------------------------------------------------- mobiel menu -- */

/*
 * A <details> disclosure. This is what replaced Bootstrap's collapse plugin,
 * and with it the only reason bootstrap.min.js was on the page. <summary> is
 * focusable and toggles on Enter and Space by itself.
 */
.menu { position: relative; }

.menu__knop {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--action);
  color: var(--text-on-action);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker { display: none; }
}

.menu__icoon { display: flex; font-size: 1.15rem; }
.menu__icoon--dicht { display: none; }

.menu[open] .menu__icoon--open { display: none; }
.menu[open] .menu__icoon--dicht { display: flex; }

.menu__paneel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.6rem);
  min-inline-size: 14rem;
  padding: var(--sp-2xs);
  border-radius: var(--radius-card);
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-l);
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu__paneel { animation: rise 0.2s var(--ease) both; }
}

.menu__lijst { list-style: none; }

.menu__link {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-s);
  color: var(--text);
  font-weight: 500;
  text-decoration: none;

  &:hover { background-color: var(--surface-soft); color: var(--action); }

  &[aria-current="page"] {
    background-color: var(--surface-soft);
    color: var(--action);
    font-weight: 600;
  }
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: min(82vh, 44rem);
  padding-block: var(--sp-2xl) var(--sp-xl);
  overflow: hidden;
  background-color: var(--surface-inverse);
  color: var(--text-on-media);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;

  & video, & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* Two layers: a dark wash for legibility and a green tint so the photography
   sits inside the palette instead of fighting it. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Eén neutrale scrim, geen groene tintlaag: de foto houdt zijn eigen kleur.
     Bovenaan volledig transparant, zodat het beeld daar onaangeroerd blijft. */
  background: linear-gradient(
    to top,
    rgb(7 33 24 / 0.82) 0%,
    rgb(7 33 24 / 0.25) 45%,
    transparent 70%
  );
}

.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow { color: var(--accent-light); }

.hero__titel {
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--text-on-media);
  margin-block: var(--sp-xs) var(--sp-s);
  max-width: 22ch;
}

.hero__lead {
  color: var(--text-on-inverse);
  max-width: 46ch;
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-block-start: var(--sp-m);
}

.hero__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-m);
  margin-block-start: var(--sp-l);
  padding-block-start: var(--sp-m);
  border-block-start: 1px solid var(--border-on-inverse);
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-on-inverse);
}

.hero__feiten li { display: flex; align-items: center; gap: var(--sp-3xs); }

.hero__feiten .icon { color: var(--brand-bright); font-size: 1.15rem; }

/* --------------------------------------------------------------- voet -- */

.voet { padding-block-end: var(--sp-m); }

.voet__inner {
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: 1fr;
  padding-block: var(--sp-xl);
}

@media (min-width: 44rem) {
  .voet__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 68rem) {
  .voet__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.voet__titel {
  font-size: var(--fs-h3);
  color: var(--text-on-inverse-strong);
  line-height: 1.15;
}

.voet__claim {
  margin-block-start: var(--sp-2xs);
  color: var(--text-on-inverse-muted);
  font-size: var(--fs-small);
}

.voet__kop {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-block-end: var(--sp-2xs);
}

.voet__kop--tweede { margin-block-start: var(--sp-m); }

.voet__lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
  font-size: var(--fs-small);
}

.voet__lijst a { color: var(--text-on-inverse); text-decoration: none; }
.voet__lijst a:hover { color: var(--accent-light); text-decoration: underline; }

.voet__tekst { font-size: var(--fs-small); color: var(--text-on-inverse); }

.sociaal {
  display: flex;
  gap: var(--sp-2xs);
  list-style: none;
  margin-block-start: var(--sp-m);
}

.sociaal__link {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background-color: var(--surface-inverse-raised);
  color: var(--text-on-inverse);
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px var(--border-on-inverse);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              transform 0.18s var(--ease-out-back);

  &:hover {
    background-color: var(--brand-bright);
    color: var(--surface-inverse);
    transform: translateY(-2px);
  }
}

.voet__onder {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-m);
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--sp-m);
  border-block-start: 1px solid var(--border-on-inverse);
  font-size: var(--fs-small);
  color: var(--text-on-inverse-muted);
}

.voet__klein {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-m);
  list-style: none;
}

.voet__klein a { color: var(--text-on-inverse-muted); text-decoration: none; }
.voet__klein a:hover { color: var(--accent-light); text-decoration: underline; }

/* --------------------------------------------------------- losse stukken -- */

.video-kader {
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background-color: var(--surface-inverse);

  & iframe {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
  }
}

.kaart-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--action);

  & .icon { transition: transform 0.2s var(--ease); }
}

.section--dark .kaart-cta { color: var(--accent-light); }

.card-link:hover .kaart-cta .icon { transform: translateX(4px); }

.sponsor-kop {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

.sponsor-naam {
  font-weight: 600;
  color: var(--text-muted);
}

.countdown-wrap { margin-block-start: var(--sp-m); }

/* ------------------------------------------------------------ paginakop -- */

.pagina-kop {
  padding-block: var(--sp-xl) var(--sp-l);
  background-color: var(--surface);

  & h1 { margin-block: var(--sp-2xs) var(--sp-s); }
  & .lead { max-width: 52ch; }
}

/* Anchor list for the long Trekkertrek page. Plain links, no scroll-spy —
   scroll-behavior and scroll-margin do the rest. */
.pagina-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-block-start: var(--sp-m);

  & a {
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    background-color: var(--surface-soft);
    color: var(--brand);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;

    &:hover { background-color: var(--action); color: var(--text-on-action); }
  }
}

/* ------------------------------------------------------------ hulpklassen -- */

.klein {
  font-size: var(--fs-small);
  color: var(--text-subtle);
}

.section--dark .klein { color: var(--text-on-inverse-muted); }

.visueel-verborgen {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * A tighter two-column variant of the photo wall for use beside body text.
 *
 * De rijhoogte is instelbaar omdat de kolombreedte per plek verschilt: naast
 * een brede tekstkolom is een cel hier ~217px breed, naast een smalle ~295px.
 * Met een vaste 9rem is de eerste 1.51 (past op de foto's van 1.50) en de
 * tweede 2.05, en dan sneed die 27% van elke liggende foto weg.
 */
.fotos--kolom {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: var(--rij, 9rem);
}

.fotos--kolom > :nth-child(5n + 1) { grid-row: auto; grid-column: auto; }

/*
 * Hier is de winst het grootst: de cel was 2.05 breed tegen een foto van 0.67,
 * wat 67% wegsneed. Twee rijen hoog maakt de cel vierkant en halveert dat.
 *
 * order: -1 hoort erbij. Deze grids hebben maar drie foto's, dus als de staande
 * als laatste geplaatst wordt laat zijn hogere cel een gat van een halve grid
 * achter — grid-auto-flow: dense kan dat niet vullen, want er komt niets meer
 * na. Vooraan geplaatst vullen de twee liggende foto's de kolom ernaast.
 * Alleen hier, niet in de brede muur: daar heeft dense genoeg foto's om mee te
 * schuiven en zou order de gekozen volgorde overhoop gooien.
 *
 * order laat de visuele volgorde afwijken van de DOM-volgorde, en dat is
 * meestal een toegankelijkheidsprobleem. Hier niet: dit zijn decoratieve
 * foto's met een lege alt, geen links en niet focusbaar, dus er is geen
 * lees- of tabvolgorde die uit de pas kan lopen.
 */
.fotos--kolom > .foto--staand { grid-row: span 2; order: -1; }

/* ---------------------------------------------------------------- tabel -- */

.tabel caption {
  caption-side: top;
  text-align: start;
  padding-block-end: var(--sp-2xs);
}

.tabel__leeg { color: var(--text-subtle); }

/* --------------------------------------------------------------- baan -- */

.baan__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2xs);
  justify-content: space-between;
}

.baan__truck {
  font-size: var(--fs-small);
  color: var(--text-on-inverse-muted);
}

/* White edge-to-edge strip with a fixed height, so every logo is legible and the cards line up. */
.baan__spandoek {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 4rem;
  margin-inline: calc(-1 * var(--sp-s));
  padding: 0.5rem var(--sp-s);
  background-color: #fff;

  & a { display: flex; align-items: center; justify-content: center; block-size: 100%; inline-size: 100%; }
  & img { max-block-size: 100%; max-inline-size: 100%; inline-size: auto; object-fit: contain; }
}

.baan__sponsor-naam {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-on-inverse-muted);

  & strong { color: var(--text-on-inverse); }
}

.banen {
  display: grid;
  gap: var(--sp-s);
}

/* Three columns whose rows line up: head, round 1, break, round 2. */
@media (min-width: 48rem) {
  .banen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rijen), auto);
  }

  .banen > .baan {
    display: grid;
    grid-row: span var(--rijen);
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.baan {
  overflow: hidden;
  padding: var(--sp-s);
}

.baan__hoofd {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.baan__ronde { padding-block-start: var(--sp-s); }

/* The start time first, like a small display. */
.baan-ronde {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin: 0 0 var(--sp-3xs);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.baan-klok {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border-on-inverse);
  border-radius: 0.375rem;
  background-color: rgb(0 0 0 / 0.25);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-on-inverse);
}

.baan-pauze {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin: var(--sp-s) calc(-1 * var(--sp-s)) 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-inverse-muted);

  &::before,
  &::after {
    content: "";
    flex: 1;
    border-block-start: 2px dashed var(--border-on-inverse);
  }
}

.baan__leeg { margin: 0; color: var(--text-on-inverse-muted); }

.baan__klassen {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.baan__klassen li {
  padding-block: 0.3rem;
  line-height: 1.35;
  border-block-end: 1px dashed var(--border-on-inverse);
}

.baan__klassen li:last-child { border-block-end: 0; }

/* ------------------------------------------------------------- stappen -- */

/*
 * The four registration steps. The number comes from a counter rather than an
 * <ol> marker so it can be styled as an enamel disc.
 */
.stappen {
  list-style: none;
  counter-reset: stap;
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
}

.stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  /* Rij- en kolomafstand apart, want de inhoud staat onder elkaar in kolom 2. */
  gap: var(--sp-2xs) var(--sp-s);
}

/*
 * Het cijfer vast in kolom 1, alle inhoud in kolom 2.
 *
 * Zonder deze twee regels plaatst het grid automatisch: het cijfer en de <h3>
 * vullen samen rij 1, en de <p> daarna valt terug naar kolom 1 — 2.75rem
 * breed. De tekst brak daar middenin woorden af. Elke stap met meer dan één
 * element na de kop had dat.
 */
.stappen li > * { grid-column: 2; }

.stappen li::before {
  content: counter(stap);
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-size: 1.35rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgb(7 33 24 / 0.25);
}

.prijs__sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-subtle);
}

.section--dark .prijs__sub { color: var(--text-on-inverse-muted); }

/* ------------------------------------------------------------- artiesten -- */

.artiest { padding: 0; overflow: hidden; }

.artiest__foto {
  aspect-ratio: 4 / 3;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

.artiest__body { padding: var(--sp-m); }

/* ----------------------------------------------------------------- qr -- */

.qr {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  align-items: start;
  /* De code is 250px in het origineel en wordt niet opgerekt — verder zou hij
     alleen wazig worden. De kaart blijft daarom compact in plaats van zijn
     halve kolom te vullen; anders staat er ~280px lege ruimte naast. */
  max-inline-size: 19rem;

  & img {
    inline-size: 100%;
    max-inline-size: 15rem;
    block-size: auto;
    border-radius: var(--radius-media);
  }
}

/* ---------------------------------------------------------------- kaart -- */

.kaart-kader {
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-l);
  background-color: var(--surface-soft);

  & iframe {
    inline-size: 100%;
    block-size: 26rem;
    border: 0;
  }
}

.kaart-kader__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-block-size: 16rem;
  padding: var(--sp-m);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
}

/* --------------------------------------------------------------- feiten -- */

.feiten {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-s);
}

.feiten li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--sp-2xs);
  align-items: start;
}

.feiten .icon {
  font-size: 1.35rem;
  color: var(--brand);
  margin-block-start: 0.15em;
}

.section--dark .feiten .icon { color: var(--brand-bright); }

/* ---------------------------------------------------------------- prose -- */

/*
 * Long-form legal text: the privacy statement and the terms. These pages were
 * styled by .privacy and .tickets rules inside the vendor template, so they
 * needed a home of their own once that file went.
 */
.prose {
  & h2 {
    font-size: var(--fs-h3);
    margin-block: var(--sp-l) var(--sp-2xs);
  }

  & h3 {
    font-size: var(--fs-body);
    font-family: var(--font-body);
    font-weight: 600;
    margin-block: var(--sp-m) var(--sp-3xs);
  }

  & p { margin-block-end: var(--sp-s); }

  & ul, & ol {
    margin-block-end: var(--sp-s);
    padding-inline-start: var(--sp-m);
  }

  & li { margin-block-end: var(--sp-3xs); }

  & table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-block-end: var(--sp-m);
    font-size: var(--fs-small);
  }

  & td, & th {
    padding: var(--sp-2xs) var(--sp-xs);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--border);
  }

  /* The originals lean on <b>, <i> and <br> rather than structure; keep them
     legible instead of rewriting a legal text. */
  & b, & strong { font-weight: 600; }
  & i, & em { font-style: italic; }
}

.live-kolom {
  max-width: 60rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------- handschrift -- */

/*
 * Nagerekend contrast, zodat dit niet stil wegzakt. .hand rendert op ~25px,
 * dus de grens is 3:1 (grote tekst), niet 4.5:1:
 *   --accent op --surface            3.50:1  (AA grote tekst)
 *   --accent op --surface-soft       3.22:1  (AA grote tekst)
 *   --accent-light op --surface-inverse  8.27:1  (AA)
 *   --accent-light op --surface-inverse-raised  5.99:1  (AA)
 * Zet --accent nooit op lopende tekst; daar is --text of --brand voor.
 */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  /* Caveat heeft een lage x-hoogte, dus hij moet groter staan om even zwaar te
     wegen als de tekst ernaast. */
  font-size: 1.45em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
}

.section--dark .hand,
.hero .hand {
  color: var(--accent-light);
}

/* De CoastFest-truc: schuin, half over de displaytype heen. */
.hand--over {
  display: inline-block;
  margin-block-start: -0.15em;
}

@media (prefers-reduced-motion: no-preference) {
  .hand--over { rotate: -4deg; }
}

/* --------------------------------------------------------- penseelstrepen -- */

/*
 * Met de hand getrokken onderstreping voor korte, belangrijke stukjes tekst.
 * Een losse klasse, want .section-head h2::after is al bezet door de bestaande
 * accentstreep. De kleur staat als kale hex in de data-URI: een data-URI kan
 * geen custom property lezen, dus --accent (#E85D04) is hier gedupliceerd.
 */
.streep {
  padding-block-end: 0.26em;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none'><path d='M2 8 Q30 2 58 7 T118 5' stroke='%23E85D04' stroke-width='5' stroke-linecap='round'/><path d='M6 11 Q36 6 62 10 T114 9' stroke='%23E85D04' stroke-width='2.5' stroke-linecap='round' opacity='.5'/></svg>");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.42em;
}

/* De handschriftregel in de hero hangt net onder de titel, iets ingesprongen,
   zodat hij als losse pennenstreek leest en niet als ondertitel. */
.hero__hand {
  margin-block: -0.6em 0.4em;
  margin-inline-start: 0.6em;
  font-size: clamp(1.4rem, 3.2vw, 2.4rem);
}

/* Language switch in the header: offers the other language. */
.taal {
  position: relative;
  margin: 0;
}

.taal__knop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.taal__knop::-webkit-details-marker { display: none; }

.taal__knop:hover,
.taal[open] .taal__knop {
  border-color: currentColor;
}

.taal__pijl {
  width: 0.6rem;
  transition: transform 0.15s;
}

.taal[open] .taal__pijl { transform: rotate(180deg); }

.taal__vlag {
  width: 1.25rem;
  height: auto;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}

.taal__paneel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.4rem);
  z-index: 20;
  min-inline-size: 11rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background-color: var(--surface);
  box-shadow: var(--shadow-l);
}

.taal__formulier { margin: 0; }

.taal__optie {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  inline-size: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-label);
  text-align: start;
  cursor: pointer;
}

.taal__optie:hover { background-color: var(--surface-soft, #F1F7F3); }

.taal__optie--actief,
.taal__optie:disabled {
  font-weight: 700;
  cursor: default;
}

.taal__optie--actief::after {
  content: "✓";
  margin-inline-start: auto;
}

/* In the mobile menu both languages sit side by side; the current one is filled. */
.taal--menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-top: var(--sp-2xs);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--border);
}

.taal--menu .taal__optie {
  justify-content: center;
  border: 1px solid var(--border);
}

.taal--menu .taal__optie--actief {
  border-color: transparent;
  background-color: var(--surface-soft, #F1F7F3);
}

.taal--menu .taal__optie--actief::after { content: none; }

.taal-melding {
  margin: var(--sp-m) 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--surface-soft, #F1F7F3);
  font-size: 0.9375rem;
}

/* Welcome after switching to Achterhoeks: appears, waits, fades away. */
.welkom-dialect {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  z-index: 50;
  max-inline-size: min(22rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-l);
  pointer-events: none;
  animation: welkom-dialect 6s ease both;
}

.welkom-dialect__groet {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
}

.welkom-dialect__vertaling {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

@keyframes welkom-dialect {
  0% { opacity: 0; transform: translateY(0.75rem); }
  8%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes welkom-dialect {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }
}

/* A dialect word you can tap, hover or tab to for its Dutch meaning. */
.dialect {
  position: relative;
  display: inline;
}

.dialect__woord {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: help;
}

.dialect__uitleg {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: calc(100% + 0.4rem);
  z-index: 30;
  padding: 0.3rem 0.6rem;
  border-radius: 0.5rem;
  background-color: var(--surface-inverse, #072118);
  color: #fff;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
}

.dialect__uitleg::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  border: 0.3rem solid transparent;
  border-top-color: var(--surface-inverse, #072118);
  transform: translateX(-50%);
}

.dialect:hover .dialect__uitleg,
.dialect__woord:focus-visible + .dialect__uitleg,
.dialect__woord:focus + .dialect__uitleg {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------ terreinkaart -- */
.terreinkaart {
  display: grid;
  gap: var(--sp-m);
  align-items: start;
}

@media (min-width: 900px) {
  .terreinkaart { grid-template-columns: 2fr 1fr; }
}

.terreinkaart__foto {
  position: relative;
  margin: 0;
}

.terreinkaart__foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}

/* Each pin sits on its spot by its centre. */
.terreinkaart__pin {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 2px solid var(--n-0);
  border-radius: var(--radius-pill);
  background-color: var(--brand-surface);
  color: var(--text-on-brand);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  cursor: pointer;
  transition: scale 0.15s ease, background-color 0.15s ease;
}

@media (max-width: 599px) {
  .terreinkaart__pin { inline-size: 1.3rem; block-size: 1.3rem; font-size: 0.65rem; border-width: 1.5px; }
}

.terreinkaart__pin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.terreinkaart__pin.is-actief {
  scale: 1.3;
  background-color: var(--accent);
  color: var(--accent-text);
  z-index: 1;
}

.terreinkaart__legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.terreinkaart__legenda li {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-s);
}

.terreinkaart__legenda li.is-actief { background-color: var(--surface); }

.terreinkaart__nr {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--brand-surface);
  color: var(--text-on-brand);
  font-size: 0.75rem;
  font-weight: 700;
}

.terreinkaart__legenda li.is-actief .terreinkaart__nr {
  background-color: var(--accent);
  color: var(--accent-text);
}

/* ------------------------------------------------- goed om te weten -- */
.vragen { border-top: 1px solid var(--border); }

.vraag { border-bottom: 1px solid var(--border); }

.vraag summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-s);
  padding: var(--sp-s) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker { display: none; }
  &::after { content: "+"; color: var(--brand); font-weight: 700; }
}

.vraag[open] summary::after { content: "–"; }

.vraag p {
  margin: 0;
  padding-block-end: var(--sp-s);
  color: var(--text-muted);
}

/* Share button above the live results. */
.deel-knop {
  display: flex;
  justify-content: flex-end;
  margin: var(--sp-s) 0;
}