@charset "utf-8";
/* All American Weekend — stijlblad
   Alle kleuren, letters, maten en beeldverhoudingen staan als variabele op
   :root. Wie de huisstijl wil bijstellen hoeft alleen dat blok aan te raken.
   `maak-illustraties.py` leest de kleuren hieronder letterlijk uit, dus een
   wijziging in het rood of het nachtblauw werkt door in de tekeningen. */

:root {
  /* ---- kleur ----------------------------------------------------------
     Gemeten op de vier ontwerpbestanden zelf (blokgemiddelde per vlak),
     niet op het oog geschat. */
  --kleur-nacht:        #101b23;   /* kopbalk, voet, donkere banden */
  --kleur-nacht-diep:   #0a1219;   /* onderbalk van de voet */
  --kleur-nacht-vak:    #18262f;   /* vakken op een donkere ondergrond */
  --kleur-rood:         #c33f2c;   /* knoppen, accenten, actieve staat */
  --kleur-rood-diep:    #a53321;
  --kleur-papier:       #f3eee5;   /* paginakleur */
  --kleur-papier-diep:  #e9e3d7;   /* tweede vlak op papier */
  --kleur-wit:          #ffffff;
  --kleur-staal:        #566a77;   /* nieuwsbriefband */
  --kleur-staal-diep:   #465863;
  --kleur-tekst:        #17222b;
  --kleur-tekst-zacht:  #56636d;
  --kleur-lijn:         #ddd6c8;
  --kleur-lijn-licht:   #e9e3d8;
  --kleur-lijn-donker:  rgba(255, 255, 255, .15);

  /* ---- letters --------------------------------------------------------
     De koppen in de ontwerpen zijn zwaar, smal en in kapitalen; Oswald komt
     daar het dichtst bij van wat Google Fonts levert. De lopende tekst is een
     neutrale grotesk (Inter). De handgeschreven regels zijn Caveat. */
  --font-kop:  "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  --maat-mini:   .75rem;
  --maat-klein:  .875rem;
  --maat-basis:  1rem;
  --maat-lead:   1.125rem;
  --maat-h3:     1.375rem;
  --maat-h2:     clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
  --maat-h1:     clamp(2.1rem, 1.2rem + 3.4vw, 3.75rem);
  --maat-hero:   clamp(2.35rem, 1.05rem + 5.1vw, 4.5rem);

  --regelhoogte:      1.68;
  --regelhoogte-kop:  1.04;
  --letterspatie-label: .18em;
  --letterspatie-kop:   .01em;

  /* ---- ritme ---------------------------------------------------------- */
  --omhulsel:      1180px;
  --omhulsel-smal: 760px;
  --goot:  clamp(1rem, .35rem + 2.2vw, 2.25rem);
  --blok:  clamp(2.75rem, 1.4rem + 4.2vw, 5.5rem);
  --radius:       .25rem;
  --radius-groot: .5rem;
  --radius-pil:   999px;

  /* ---- beeldverhoudingen (uit de ontwerpen) --------------------------- */
  --verhouding-hero:     2.7 / 1;
  --verhouding-breed:    2 / 1;
  --verhouding-kaart:    16 / 10;
  --verhouding-strook:   4 / 5;
  --verhouding-vierkant: 1 / 1;
}

/* ---------------------------------------------------------------- basis --- */

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

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

body {
  margin: 0;
  background: var(--kleur-papier);
  color: var(--kleur-tekst);
  font-family: var(--font-ui);
  font-size: var(--maat-basis);
  line-height: var(--regelhoogte);
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 600;
  line-height: var(--regelhoogte-kop);
  letter-spacing: var(--letterspatie-kop);
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--kleur-rood); color: var(--kleur-wit);
  padding: .75rem 1.25rem; z-index: 100; font-weight: 600;
}
.overslaan:focus { left: 0; }

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

.enkel-voorlezer {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.omhulsel {
  width: 100%;
  max-width: calc(var(--omhulsel) + 2 * var(--goot));
  margin-inline: auto;
  padding-inline: var(--goot);
}

.omhulsel--smal { max-width: calc(var(--omhulsel-smal) + 2 * var(--goot)); }

/* ---------------------------------------------------------------- tekst --- */

.label {
  font-family: var(--font-ui);
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: var(--letterspatie-label);
  text-transform: uppercase;
  color: var(--kleur-rood);
  margin: 0 0 .65rem;
}
.label--licht { color: var(--kleur-wit); opacity: .85; }

.streep {
  width: 3.5rem; height: 3px;
  background: var(--kleur-rood);
  border: 0; margin: 1rem 0 1.35rem;
}
.streep--licht { background: var(--kleur-rood); }

.lead {
  font-size: var(--maat-lead);
  color: var(--kleur-tekst-zacht);
}

.hand {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  line-height: 1.02;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.klein { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); }

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

.knop {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui);
  font-size: var(--maat-klein);
  font-weight: 600;
  letter-spacing: .02em;
  padding: .8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knop--rood { background: var(--kleur-rood); color: var(--kleur-wit); }
.knop--rood:hover { background: var(--kleur-rood-diep); }
.knop--lijn {
  background: transparent; color: var(--kleur-wit);
  border-color: rgba(255, 255, 255, .8);
}
.knop--lijn:hover { background: rgba(255, 255, 255, .12); }
.knop--donker { background: var(--kleur-nacht); color: var(--kleur-wit); }
.knop--donker:hover { background: #1c2c37; }
.knop[disabled] { cursor: not-allowed; opacity: .78; }

.tekstlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: var(--maat-klein);
  color: var(--kleur-rood);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
}
.tekstlink:hover { text-decoration-thickness: 2px; }

.pijl { flex: none; }

/* --------------------------------------------------------------- kopbalk -- */

.kopbalk {
  background: var(--kleur-nacht);
  color: var(--kleur-wit);
  position: relative;
  z-index: 20;
}
.kopbalk__binnen {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
  padding-block: .6rem;
}

.merk {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--kleur-wit);
  flex: none;
}
.merk__vleugel { width: 2.6rem; height: auto; color: var(--kleur-rood); flex: none; }
.merk__naam {
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.merk__naam span { display: block; }

.menuknop {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn-donker);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font: inherit; font-size: var(--maat-klein); font-weight: 600;
  cursor: pointer;
}

.hoofdmenu { margin-left: auto; }
.hoofdmenu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem;
}
.hoofdmenu a {
  display: inline-block;
  text-decoration: none;
  font-size: var(--maat-klein);
  font-weight: 500;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, .88);
}
.hoofdmenu a:hover { color: var(--kleur-wit); }
.hoofdmenu a[aria-current="page"] {
  color: var(--kleur-wit);
  border-bottom-color: var(--kleur-rood);
}

.kopbalk__acties { display: flex; align-items: center; gap: 1.25rem; flex: none; }

.leus {
  font-family: var(--font-kop);
  font-size: .6rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.leus span { display: block; }

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

.hero {
  position: relative;
  background: var(--kleur-nacht);
  color: var(--kleur-wit);
  overflow: hidden;
}
.hero__beeld { position: absolute; inset: 0; }
.hero__beeld img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero__sluier {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 18, 25, .93) 0%, rgba(10, 18, 25, .82) 32%,
                    rgba(10, 18, 25, .38) 62%, rgba(10, 18, 25, .28) 100%);
}
.hero__binnen {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7.5rem);
  max-width: 44rem;
}
.hero__titel {
  font-size: var(--maat-hero);
  font-weight: 700;
  margin: 0 0 1rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero__onder {
  font-family: var(--font-ui);
  font-size: var(--maat-klein);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
  color: rgba(255, 255, 255, .92);
}
.hero__tekst { max-width: 34rem; margin-bottom: 1.75rem; color: rgba(255, 255, 255, .9); }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__hand {
  position: absolute; right: var(--goot); top: clamp(1.25rem, 3vw, 3rem);
  color: var(--kleur-wit);
  text-align: right;
  max-width: 9rem;
  transform: rotate(-4deg);
  opacity: .95;
  display: none;
}
.hero--klein .hero__binnen { padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem); }

.kruimelpad {
  position: relative;
  font-size: var(--maat-klein);
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .8);
}
.kruimelpad ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.kruimelpad li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.kruimelpad a { text-decoration: none; }
.kruimelpad a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- secties -- */

.blok { padding-block: var(--blok); }
.blok--papier { background: var(--kleur-papier); }
.blok--diep   { background: var(--kleur-papier-diep); }
.blok--nacht  { background: var(--kleur-nacht); color: var(--kleur-wit); }
.blok--strak  { padding-block: 0; }

.blok--nacht .lead,
.blok--nacht .klein { color: rgba(255, 255, 255, .78); }

.koppel { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
@media (min-width: 62rem) {
  .koppel--2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .koppel--intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .koppel--zij { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}

.kolommen { display: grid; gap: 1.75rem; }
@media (min-width: 46rem) { .kolommen--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .kolommen--2 { grid-template-columns: repeat(2, 1fr); } }

.kolom__kop {
  font-size: var(--maat-h3);
  margin: 1rem 0 .75rem;
}
.kolom + .kolom { border-left: 0; }
@media (min-width: 46rem) {
  .kolommen--gescheiden .kolom + .kolom {
    border-left: 1px solid var(--kleur-lijn);
    padding-left: 1.75rem;
  }
}

.icoon-vak { color: var(--kleur-nacht); }
.icoon-vak svg { width: 3rem; height: 3rem; }
.blok--nacht .icoon-vak { color: var(--kleur-wit); }

.sectiekop { max-width: 34rem; }
.sectiekop h2 { font-size: var(--maat-h2); }

/* ------------------------------------------------------------ scheidslijn -- */

.strepenregel {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
  font-family: var(--font-ui);
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: var(--letterspatie-label);
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
  padding-block: 1.5rem;
  flex-wrap: wrap;
  text-align: center;
}
.strepenregel .ster { color: var(--kleur-rood); }

/* --------------------------------------------------------------- beelden -- */

.beeld { overflow: hidden; background: var(--kleur-papier-diep); }
.beeld img { width: 100%; height: 100%; object-fit: cover; }
.beeld--hero     { aspect-ratio: var(--verhouding-hero); }
.beeld--breed    { aspect-ratio: var(--verhouding-breed); }
.beeld--kaart    { aspect-ratio: var(--verhouding-kaart); }
.beeld--strook   { aspect-ratio: var(--verhouding-strook); }
.beeld--vierkant { aspect-ratio: var(--verhouding-vierkant); }
.beeld--tekening { background: var(--kleur-papier); }
.beeld--tekening img { object-fit: contain; }
.beeld--vrij { aspect-ratio: auto; }
.beeld--vrij img { height: auto; }

.strook { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
@media (min-width: 52rem) { .strook { grid-template-columns: repeat(4, 1fr); } }

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

.kaartraster { display: grid; gap: 1.75rem; }
@media (min-width: 44rem) { .kaartraster--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .kaartraster--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .kaartraster--3 { grid-template-columns: repeat(3, 1fr); } }

.kaart { display: flex; flex-direction: column; }
.kaart__kop { font-size: var(--maat-h3); margin: 1.1rem 0 0; }
.kaart__tekst { margin-top: .75rem; color: var(--kleur-tekst-zacht); font-size: var(--maat-klein); }
.kaart__voet { margin-top: auto; padding-top: 1rem; color: var(--kleur-rood); }

.infokaart {
  background: var(--kleur-wit);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  padding: 1.5rem 1.35rem;
}
.infokaart h3 { font-size: 1.1rem; margin: 1rem 0 .65rem; }
.infokaart p { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); }

/* ------------------------------------------------------------- filterbalk -- */

.filterbalk {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 2.25rem;
}
.filterknop {
  font: inherit;
  font-size: var(--maat-klein); font-weight: 600;
  padding: .7rem 1.6rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
  cursor: pointer;
}
.filterknop[aria-pressed="true"] {
  background: var(--kleur-rood);
  border-color: var(--kleur-rood);
  color: var(--kleur-wit);
}

/* ------------------------------------------------------------ dagindeling -- */

.dagkop { font-size: var(--maat-h3); margin-bottom: 1.25rem; }
.dagtegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.dagtegel {
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-groot);
  background: var(--kleur-wit);
  padding: 1.25rem .85rem;
  text-align: center;
  font-size: var(--maat-klein);
  font-weight: 500;
}
.dagtegel svg { width: 2rem; height: 2rem; margin: 0 auto .6rem; color: var(--kleur-nacht); }

.melding {
  display: grid; gap: 1.25rem;
  border: 1px solid var(--kleur-rood);
  border-radius: var(--radius-groot);
  background: rgba(195, 63, 44, .05);
  padding: 1.5rem;
  margin-top: 2.5rem;
  align-items: center;
}
@media (min-width: 52rem) {
  .melding { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.melding h3 { font-size: 1.05rem; color: var(--kleur-rood); margin-bottom: .4rem; }
.melding p { font-size: var(--maat-klein); color: var(--kleur-tekst-zacht); margin: 0; }
.melding svg { width: 2.25rem; height: 2.25rem; color: var(--kleur-rood); }

/* --------------------------------------------------------------- citaat --- */

.citaat h2 { font-size: var(--maat-h3); }
.citaat p { color: var(--kleur-tekst-zacht); }

.watermerk {
  position: relative;
  display: grid; place-items: center;
  color: var(--kleur-tekst);
  opacity: .12;
}
.watermerk svg { width: 100%; max-width: 18rem; height: auto; }

/* ---------------------------------------------------------------- banden -- */

.band {
  position: relative;
  background: var(--kleur-nacht);
  color: var(--kleur-wit);
  overflow: hidden;
}
.band__beeld { position: absolute; inset: 0; }
.band__beeld img { width: 100%; height: 100%; object-fit: cover; }
.band__sluier {
  position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(10, 18, 25, .96) 0%, rgba(10, 18, 25, .86) 38%,
                              rgba(10, 18, 25, .42) 78%, rgba(10, 18, 25, .35) 100%);
}
.band__binnen {
  position: relative;
  padding-block: clamp(3rem, 1.75rem + 5vw, 5.5rem);
  max-width: 34rem;
}
.band__titel { font-size: var(--maat-h2); margin-bottom: 1rem; }

/* ----------------------------------------------------------- nieuwsbrief -- */

.nieuwsbrief { background: var(--kleur-staal); color: var(--kleur-wit); }
.nieuwsbrief__binnen {
  display: grid; gap: 1.5rem;
  padding-block: clamp(2rem, 1.25rem + 2.5vw, 3rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .nieuwsbrief__binnen { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); }
}
.nieuwsbrief__kop { display: flex; align-items: center; gap: 1rem; }
.nieuwsbrief__kop svg { width: 1.75rem; height: 1.75rem; flex: none; }
.nieuwsbrief__kop h2 { font-size: 1.35rem; }
.nieuwsbrief p { font-size: var(--maat-klein); color: rgba(255, 255, 255, .85); }

.aanmelding { display: flex; flex-wrap: wrap; gap: .6rem; }
.aanmelding input {
  flex: 1 1 12rem; min-width: 0;
  font: inherit; font-size: var(--maat-klein);
  padding: .8rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--kleur-wit);
  color: var(--kleur-tekst);
}
.aanmelding .knop { flex: none; }

.melding-eerlijk {
  font-size: var(--maat-mini);
  line-height: 1.5;
  margin-top: .6rem;
  color: rgba(255, 255, 255, .8);
  flex-basis: 100%;
}

/* -------------------------------------------------------------- formulier -- */

.formulier { display: grid; gap: 1.1rem; }
.formulier__rij { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .formulier__rij { grid-template-columns: 1fr 1fr; } }

.veld { display: grid; gap: .4rem; }
.veld > span {
  font-size: var(--maat-mini);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.veld .vereist { color: var(--kleur-rood); }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: var(--maat-klein);
  width: 100%; min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  color: var(--kleur-wit);
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld select option { color: var(--kleur-tekst); }

.sociaal { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sociaal li {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--kleur-wit);
  color: var(--kleur-nacht);
}
.sociaal svg { width: 1.35rem; height: 1.35rem; }

/* ------------------------------------------------------------------ faq --- */

.faq { display: grid; gap: .6rem; margin-top: 1.5rem; }
.faq details {
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  background: var(--kleur-wit);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem;
  font-size: var(--maat-klein);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: .85rem; height: .85rem; flex: none; transition: transform .15s ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .antwoord {
  padding: 0 1.1rem 1.1rem;
  font-size: var(--maat-klein);
  color: var(--kleur-tekst-zacht);
}

/* ------------------------------------------------------------- linkpartners */

.partnerlijst { list-style: none; margin: 0; padding: 0; }
.partnerlijst li { border-bottom: 1px solid var(--kleur-lijn-licht); }
.partnerlijst a {
  display: block;
  padding: .65rem .25rem;
  font-size: var(--maat-klein);
  text-decoration: none;
  color: var(--kleur-tekst);
}
.partnerlijst a:hover { color: var(--kleur-rood); text-decoration: underline; }
.partnerlijst .domein {
  display: block;
  font-size: var(--maat-mini);
  color: var(--kleur-tekst-zacht);
}

.letterkop {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  color: var(--kleur-rood);
  border-bottom: 3px solid var(--kleur-rood);
  padding-bottom: .35rem;
  margin: 1.75rem 0 .85rem;
}
.letterkop:first-child { margin-top: 0; }

.voorbehoud {
  border-left: 4px solid var(--kleur-rood);
  background: var(--kleur-wit);
  padding: 1.25rem 1.35rem;
  font-size: var(--maat-klein);
  color: var(--kleur-tekst-zacht);
  border-radius: 0 var(--radius) var(--radius) 0;
}

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

.voet { background: var(--kleur-nacht); color: var(--kleur-wit); }
.voet__binnen {
  display: grid; gap: 2rem;
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .voet__binnen { grid-template-columns: auto minmax(0, 1fr) auto; }
}
.voetmenu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.voetmenu a { font-size: var(--maat-klein); text-decoration: none; color: rgba(255, 255, 255, .85); }
.voetmenu a:hover { color: var(--kleur-wit); text-decoration: underline; }

.voet__rechts { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.voet .sociaal li { background: var(--kleur-nacht-vak); color: var(--kleur-wit); }

.voet__onder {
  border-top: 1px solid var(--kleur-lijn-donker);
  background: var(--kleur-nacht-diep);
}
.voet__onder .omhulsel {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1rem;
  font-size: var(--maat-mini);
  color: rgba(255, 255, 255, .62);
}
.voet__onder .leusregel { letter-spacing: .12em; text-transform: uppercase; }

/* ------------------------------------------------------------------- 404 -- */

.foutpagina { text-align: center; max-width: 36rem; margin-inline: auto; }
.foutpagina .beeld { margin: 0 auto 2rem; max-width: 28rem; }
.foutpagina .knoppen { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

/* --------------------------------------------------------------- media ---- */

@media (max-width: 63.99rem) {
  .kopbalk__acties .knop--rood { display: none; }
  .leus { display: none; }
}

@media (min-width: 64rem) {
  .menuknop { display: none; }
  .hero__hand { display: block; max-width: 11rem; }
}

@media (max-width: 63.99rem) {
  .hoofdmenu {
    flex-basis: 100%; margin-left: 0;
    border-top: 1px solid var(--kleur-lijn-donker);
    padding-top: .75rem; margin-top: .25rem;
  }
  .kopbalk__binnen { flex-wrap: wrap; }
  .hoofdmenu ul { flex-direction: column; gap: 0; }
  .hoofdmenu li { border-bottom: 1px solid var(--kleur-lijn-donker); }
  .hoofdmenu li:last-child { border-bottom: 0; }
  .hoofdmenu a { display: block; padding: .8rem 0; border-bottom: 0; }
  .hoofdmenu a[aria-current="page"] { color: var(--kleur-rood); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ======================================================================
   Onderdelen die uit de vier ontwerpen volgen
   ====================================================================== */

/* ---- drieluik op de eventpagina: tekst, merkteken, citaat --------------- */
@media (min-width: 62rem) {
  .koppel--3 { grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1fr); }
}
.middenmerk { display: grid; place-items: center; gap: 1rem; text-align: center; }
.middenmerk .watermerk { opacity: .16; }
.middenmerk .watermerk svg { max-width: 15rem; }
.middenmerk .hand { color: var(--kleur-tekst); }
@media (min-width: 62rem) {
  .middenmerk { position: relative; }
  .middenmerk .hand { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-5deg); }
  .middenmerk .watermerk { justify-self: start; }
}

/* ---- merkteken: adelaar met kleinkapitalen regel ------------------------ */
.merkteken {
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  margin-top: 2rem;
}
.merkteken .watermerk { flex: none; width: 7rem; }
.merkteken__regel {
  font-family: var(--font-kop);
  font-size: var(--maat-mini);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
  max-width: 7rem;
  margin: 0;
}

/* ---- afwisselende beeld/tekstblokken op de eventpagina ------------------ */
.wissel { display: grid; }
@media (min-width: 62rem) {
  .wissel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
  .wissel--om { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.wissel__tekst {
  background: var(--kleur-papier);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) var(--goot);
  display: flex; flex-direction: column; justify-content: center;
}
.wissel__beeld .beeld { height: 100%; aspect-ratio: auto; min-height: 15rem; }
.wissel__beeld img { height: 100%; }
@media (max-width: 61.99rem) {
  .wissel__beeld .beeld { aspect-ratio: var(--verhouding-breed); min-height: 0; }
}
@media (min-width: 62rem) {
  .wissel__tekst { padding-inline: clamp(2rem, 4vw, 4.5rem); }
  .wissel:nth-of-type(even) .wissel__tekst { background: var(--kleur-papier-diep); }
}

/* ---- galerij op de eventpagina ----------------------------------------- */
.galerijblok { padding-block: 0; }
.galerij { display: grid; gap: 1.5rem; align-items: center; padding-block: 0; }
@media (min-width: 62rem) {
  .galerij { grid-template-columns: minmax(0, .8fr) minmax(0, 3fr); gap: 2rem; }
  .galerij > div:first-child { padding-block: 2rem; }
}
.galerij__beelden { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
@media (min-width: 52rem) { .galerij__beelden { grid-template-columns: repeat(4, 1fr); } }

/* ---- dagindeling -------------------------------------------------------- */
.dagen { display: grid; gap: 2rem; }
@media (min-width: 46rem) { .dagen { grid-template-columns: repeat(2, 1fr); } }
.dagtegels { list-style: none; margin: 0; padding: 0; }
.dagtegel span { display: block; }

/* ---- filterbalk met merkteken ernaast ----------------------------------- */
.filterkop { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 62rem) {
  .filterkop { grid-template-columns: minmax(0, 1fr) auto; }
  .filterkop .merkteken { margin-top: 0; }
}
.filterkop .filterbalk { margin-bottom: 0; }
@media (max-width: 61.99rem) { .filterkop .merkteken { display: none; } }

/* ---- praktische info ---------------------------------------------------- */
.kaartraster--info { gap: 1rem; margin-top: 1.75rem; }
.faqblok { margin-top: 2.5rem; }
.strook--een { grid-template-columns: 1fr; gap: 0; }
.strook--een .beeld { aspect-ratio: 5 / 1; }
@media (max-width: 52rem) { .strook--een .beeld { aspect-ratio: 2 / 1; } }

/* ---- contactblok -------------------------------------------------------- */
.koppel--contact { gap: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 64rem) {
  .koppel--contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr) minmax(0, .8fr); }
}
.schildmerk { margin-top: 2rem; }
.schildmerk .watermerk { opacity: .22; color: var(--kleur-wit); justify-items: start; }
.schildmerk .watermerk svg { max-width: 7rem; }
.leus--groot {
  font-size: var(--maat-mini);
  letter-spacing: .16em;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kleur-lijn-donker);
  display: block;
  color: rgba(255, 255, 255, .75);
}

/* ---- donkere band ------------------------------------------------------- */
.band__knop { margin-top: 1.75rem; margin-bottom: 0; }
.band__hand {
  position: absolute; right: var(--goot); top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  color: var(--kleur-wit); text-align: right; max-width: 10rem;
  display: none;
}
@media (min-width: 64rem) { .band__hand { display: block; } }

/* ---- linkpartners ------------------------------------------------------- */
.partnerkolommen { columns: 1; column-gap: 2.5rem; }
@media (min-width: 46rem) { .partnerkolommen { columns: 2; } }
@media (min-width: 72rem) { .partnerkolommen { columns: 3; } }
.partnerkolommen .letterkop { break-after: avoid; break-inside: avoid; }
.partnerkolommen .partnerlijst { margin-bottom: 1.5rem; }
.partnerlijst li { break-inside: avoid; }

/* ---- correcties na de eerste afdrukken ---------------------------------- */
/* Een beeld binnen een hero of band vult het vlak; de verhouding van het
   beeldvak mag daar niet meer de hoogte bepalen. */
.hero__beeld .beeld, .band__beeld .beeld {
  height: 100%; width: 100%; aspect-ratio: auto; background: transparent;
}
.merk__vleugel { width: 1.9rem; }
.merk { gap: .45rem; }
.merkteken .watermerk { opacity: .2; }
.filterkop { margin-bottom: 2.25rem; }
/* De tekstkolom van een wissel-blok lijnt links uit met het paginaraster; het
   beeld loopt wél door tot de rand, net als in het ontwerp. */
@media (min-width: 62rem) {
  .wissel--om .wissel__tekst {
    padding-left: max(var(--goot), calc((100vw - var(--omhulsel)) / 2));
  }
  .wissel:not(.wissel--om) .wissel__tekst {
    padding-right: max(var(--goot), calc((100vw - var(--omhulsel)) / 2));
  }
}