/* Publieke site van GT Cars Events.
   Zie DESIGN.md voor de afspraken. Kort samengevat: één accent (rood),
   diepte uit randen en luminantie (geen enkele schaduw), drie radiuswaarden,
   en een typografische schaal die niet per component opnieuw bedacht wordt. */

/* ── schaal ── */
:root {
  --t-display:   clamp(44px, 6.6vw, 88px);
  --t-display-s: clamp(36px, 5.2vw, 66px);
  --t-kop-groot: clamp(31px, 4.3vw, 54px);
  --t-kop:       clamp(23px, 2.1vw, 28px);
  --t-kop-klein: clamp(19px, 1.6vw, 22px);
  --t-lede:      clamp(18px, 1.55vw, 22px);
  --t-tekst:     clamp(16.5px, 1.25vw, 18px);
  --t-klein:     clamp(15px, 1.1vw, 16px);
  --t-bijschrift: 13px;

  --blok: clamp(72px, 9vw, 128px);
  --r-kaart: 16px;
  --r-knop: 4px;
}

/* ── basis ── */
.sla-over {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff; padding: 12px 18px; z-index: var(--z-nav);
}
.sla-over:focus { left: 8px; top: 8px; }

main { display: block; }
main:focus { outline: none; }

.site-container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.site-container.smal { max-width: 820px; }
.smal-tekst { max-width: 62ch; }
.midden { text-align: center; margin-left: auto; margin-right: auto; }

h1, h2, h3 {
  font-family: var(--display); font-weight: 700; margin: 0;
  /* Eén lang woord mag nooit de pagina breder maken dan het scherm. */
  overflow-wrap: break-word; hyphens: auto;
}
h1 { font-size: var(--t-display-s); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: var(--t-kop-groot); line-height: 1.05; letter-spacing: -0.015em; }
h3 { font-size: var(--t-kop-klein); line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0; font-size: var(--t-tekst); line-height: 1.6; color: var(--body); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--soft); max-width: 62ch; }

/* Een kop die er voor een schermlezer wel moet zijn maar visueel niet. */
.verborgen-kop {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

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

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

/* ── knoppen ── */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: var(--r-knop);
  font-family: var(--display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.18s var(--ease-uit), border-color 0.18s var(--ease-uit);
}
.knop-rood { background: var(--red); color: #fff; }
.knop-rood:hover { background: var(--red-hover); color: #fff; }
.knop-wit { background: #fff; color: #000; }
.knop-wit:hover { background: var(--sub); color: #000; }
.knop-geel { background: #F5D915; color: #000; }
.knop-geel:hover { background: #DCC212; color: #000; }
.knop-omlijnd { background: transparent; color: var(--text); border-color: rgba(255,255,255,0.55); }
.knop-omlijnd:hover { background: rgba(255,255,255,0.08); color: var(--text); border-color: #fff; }

/* ── navigatie ── */
.site-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid var(--line-soft);
}
.site-nav-binnen {
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px);
  height: 72px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
}
.site-nav .logo {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--text); white-space: nowrap;
  text-transform: uppercase; justify-self: start;
  /* Het woordmerk is de terugweg naar de home en wordt met een duim geraakt.
     Als tekst was het maar 20px hoog; de balk is 72px, dus dit kost geen
     enkele pixel aan de vormgeving en maakt het raakvlak wel bruikbaar. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-nav .links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); justify-self: center; }
.site-nav .acties { display: flex; align-items: center; justify-self: end; }
.site-nav .links a, .site-nav .acties a {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px;
}
.site-nav .links a { opacity: 0.82; transition: opacity 0.18s var(--ease-uit); }
.site-nav .links a:hover, .site-nav .links a.actief { opacity: 1; }
.site-nav .acties a:hover { opacity: 0.75; }
@media (max-width: 1000px) {
  .site-nav-binnen { grid-template-columns: 1fr auto; height: 64px; }
  .site-nav .links { display: none; }
}
@media (max-width: 640px) {
  /* 13px is de ondergrens uit DESIGN.md §3; kleiner wordt niet gelezen.
     De ruimte komt uit de spatiëring, niet uit de lettergrootte. */
  .site-nav .logo { font-size: 13px; letter-spacing: 0.04em; }
  .site-nav .acties a { font-size: 13px; letter-spacing: 0.04em; }
  .site-nav-binnen { padding: 0 14px; gap: 10px; }
}

/* ── blokken ── */
.blok { padding: var(--blok) 0; }
.blok.eerste { padding-top: clamp(48px, 6vw, 84px); }
.blok + .blok { padding-top: 0; }

.kop-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 20px 48px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 48px);
}
.kop-rij p { color: var(--soft); font-size: var(--t-klein); }
@media (max-width: 860px) { .kop-rij { grid-template-columns: 1fr; align-items: start; } }

.leeg { color: var(--soft); font-size: var(--t-tekst); }
.leeg a { color: var(--text); border-bottom: 1px solid var(--line); }

.kruimel { font-size: var(--t-bijschrift); color: var(--mut); margin-bottom: 14px; }
.kruimel a { color: var(--soft); }
.kruimel a:hover { color: var(--text); }

/* ── hero ── */
.hero { position: relative; min-height: min(78vh, 680px); display: flex; align-items: flex-end; }
.hero-beeld {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* De video ligt over de still en verschijnt pas als hij echt speelt. Zonder
   die klasse blijft de still staan — bij een trage verbinding, bij
   uitgezette beweging, of als de browser automatisch afspelen weigert. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  opacity: 0; transition: opacity 0.6s var(--ease-uit);
  pointer-events: none;
}
.hero-video.speelt { opacity: 1; }
/* Een donkere laag zodat de kop leesbaar blijft, hoe licht de foto ook is.
   Geen verloop als versiering: dit is functioneel contrast. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);
}
.hero-binnen {
  position: relative; z-index: 3; width: 100%;
  padding-top: clamp(80px, 14vw, 180px); padding-bottom: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px 56px; align-items: end;
}
.hero h1 { font-size: var(--t-display); line-height: 1.0; max-width: 14ch; }
.hero-zij { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-zij p { color: var(--soft); max-width: 52ch; }
@media (max-width: 860px) { .hero-binnen { grid-template-columns: 1fr; align-items: start; } }

.contact-hero { position: relative; min-height: min(42vh, 380px); display: grid; align-items: center; overflow: hidden; }
.contact-hero .hero-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-hero::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.contact-hero .site-container { position: relative; z-index: 2; text-align: center; }
.contact-hero h1 { font-size: var(--t-display); }

/* ── Michel + troeven ── */
.michel { padding: var(--blok) 0 0; }
.michel-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.michel-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.michel-beeld img { border-radius: var(--r-kaart); width: 100%; }
@media (max-width: 860px) { .michel-raster { grid-template-columns: 1fr; } }

.troeven {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; margin-top: clamp(36px, 5vw, 72px);
  background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-kaart);
  overflow: hidden;
}
.troef { background: var(--bg); padding: clamp(22px, 2.4vw, 30px); }
.troef h3 { font-size: var(--t-kop-klein); margin-bottom: 10px; }
.troef p { font-size: var(--t-klein); color: var(--soft); }

/* ── tourkaarten ── */
.tour-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.tour-kaart {
  display: block; border: 1px solid var(--line); border-radius: var(--r-kaart);
  overflow: hidden; background: var(--panel);
  transition: border-color 0.18s var(--ease-uit), background-color 0.18s var(--ease-uit);
}
.tour-kaart:hover { border-color: rgba(255,255,255,0.24); background: var(--panel-2); }
.tour-beeld { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tour-kaart.groot .tour-beeld { aspect-ratio: 21 / 9; }
.tour-beeld img { width: 100%; height: 100%; object-fit: cover; }
/* Een tour zonder omslagfoto. Zonder deze opmaak is dat een leeg zwart vlak
   met een badge die in het niets zweeft — dat leest als een kapotte kaart in
   plaats van als een kaart die nog een foto moet krijgen. Nu staat er een
   rustige diagonale structuur met het woordmerk, in de huisstijl. */
.tour-leeg {
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0.022) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, #141414 0%, #0A0A0A 100%);
  display: flex; align-items: center; justify-content: center;
}
.tour-leeg::after {
  content: 'GT'; font-family: var(--display); font-weight: 800;
  font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.03em;
  color: rgba(255,255,255,0.05);
  border-bottom: 3px solid rgba(219,4,4,0.28); padding-bottom: 4px;
}
.tour-badge {
  position: absolute; top: 16px; left: 16px; z-index: var(--z-kaart-overlay);
  background: #fff; color: #000; border-radius: var(--r-knop);
  font-size: var(--t-bijschrift); font-weight: 600; padding: 6px 12px;
}
.tour-tekst { padding: clamp(18px, 2vw, 26px); }
.tour-tekst h3 { font-family: var(--sans); font-weight: 600; font-size: var(--t-kop-klein); }
.tour-datum { font-size: var(--t-klein); color: var(--mut); margin-top: 6px; }

/* ── cijfers ── */
.cijfers h2 { max-width: 18ch; }
.cijfers .lede { margin-top: 18px; }
.cijfer-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 48px); margin: clamp(36px, 5vw, 64px) 0 0; padding: 0;
  text-align: center;
}
.cijfer dt { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.cijfer-waarde {
  font-family: var(--display); font-weight: 700; color: var(--red-bright);
  font-size: var(--t-kop-groot); line-height: 1; letter-spacing: -0.02em;
}
.cijfer-eenheid {
  font-family: var(--display); font-weight: 700; color: var(--red-bright);
  font-size: var(--t-kop); letter-spacing: -0.01em;
}
.cijfer dd { margin: 10px 0 0; font-size: var(--t-klein); color: var(--soft); }

/* ── autobanden ── */
.autos { display: block; }
.auto-band { position: relative; display: block; min-height: min(62vh, 520px); overflow: hidden; }
.auto-band img { will-change: transform; }
.auto-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auto-band::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.42);
  transition: background-color 0.2s var(--ease-uit);
}
.auto-band:hover::after { background: rgba(0, 0, 0, 0.28); }
.auto-band-tekst {
  position: relative; z-index: 2; height: 100%; min-height: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: clamp(48px, 8vw, 96px) 20px; text-align: center;
}
.auto-band-tekst h2 { font-size: var(--t-kop-groot); }
.auto-specs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--t-bijschrift); color: var(--sub);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── galerij ──
   Geen raster maar een strook die verspringt, zoals een colonne op de weg.
   Zie DESIGN.md §7. */
/* De strook schuift. Dat mag je niet moeten raden: er staan pijlen bij en de
   rand loopt zichtbaar door aan de kant waar nog meer staat. Bewust geen
   automatisch schuivende marquee — beweging is hier een reactie op de
   bezoeker, geen voorstelling (DESIGN.md §5). */
.galerij-vak { position: relative; }
.galerij-strook {
  display: flex; gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 26px clamp(16px, 3vw, 40px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.galerij-strook::-webkit-scrollbar { display: none; }

/* Alleen zichtbaar aan de kant waar nog beelden staan. Het script zet de
   klasse; zonder script staan beide randen aan, wat klopt bij een strook
   die je nog niet verschoven hebt. */
.galerij-vak::before, .galerij-vak::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(32px, 6vw, 90px);
  pointer-events: none; z-index: 1; opacity: 1; transition: opacity 0.2s var(--ease-uit);
}
.galerij-vak::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.galerij-vak::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.galerij-vak.aan-begin::before { opacity: 0; }
.galerij-vak.aan-eind::after { opacity: 0; }

.galerij-knoppen {
  display: flex; gap: 8px; justify-content: flex-end;
  max-width: 1400px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px) 4px;
}
.galerij-knop {
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text);
  border: 1px solid rgba(255,255,255,0.24);
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  transition: border-color 0.18s var(--ease-uit), background-color 0.18s var(--ease-uit);
}
.galerij-knop:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,0.08); }
.galerij-knop:disabled { color: var(--mut); border-color: var(--line-soft); cursor: default; }
.galerij-beeld {
  flex: 0 0 clamp(240px, 30vw, 420px); margin: 0; scroll-snap-align: center;
  border-radius: var(--r-kaart); overflow: hidden; border: 1px solid var(--line-soft);
}
.galerij-beeld.hoog { transform: translateY(-18px); }
.galerij-beeld.laag { transform: translateY(18px); }
.galerij-beeld img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 640px) {
  .galerij-beeld.hoog, .galerij-beeld.laag { transform: none; }
}

/* ── over ons ── */
.anders-raster {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
}
.anders-tekst { position: sticky; top: 104px; }
.anders-tekst .lede { margin-top: 18px; }
.anders-lijst { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); }
.anders-kaart {
  border: 1px solid var(--line); border-radius: var(--r-kaart);
  overflow: hidden; background: var(--panel); padding-bottom: 24px;
}
.anders-beeld { aspect-ratio: 16 / 9; overflow: hidden; }
.anders-beeld img { width: 100%; height: 100%; object-fit: cover; }
.anders-kaart h3 { padding: 22px clamp(20px, 2vw, 28px) 0; }
.anders-kaart p { padding: 10px clamp(20px, 2vw, 28px) 0; color: var(--soft); font-size: var(--t-klein); }
@media (max-width: 860px) {
  .anders-raster { grid-template-columns: 1fr; }
  .anders-tekst { position: static; }
}

.citaat { position: relative; padding: clamp(64px, 9vw, 120px) 0; overflow: hidden; }
.citaat-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.citaat::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.62); }
.citaat-binnen { position: relative; z-index: 2; }
.citaat blockquote { margin: 0 auto; max-width: 46ch; text-align: center; }
.citaat blockquote p {
  font-family: var(--display); font-weight: 600; color: var(--text);
  font-size: var(--t-kop); line-height: 1.35;
}
.citaat blockquote footer { margin-top: 20px; font-size: var(--t-klein); color: var(--sub); }

/* ── partners ── */
.partner-naam {
  font-size: var(--t-display-s); text-align: center;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.partner-beeld { border-radius: var(--r-kaart); overflow: hidden; border: 1px solid var(--line); }
.partner-beeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.partner-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px); align-items: start;
  margin-top: clamp(32px, 4vw, 56px);
}
.partner-raster > div { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.partner-raster p { color: var(--soft); }
@media (max-width: 860px) { .partner-raster { grid-template-columns: 1fr; } }

.dienst-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(36px, 5vw, 72px);
}
.dienst {
  border: 1px solid var(--line); border-radius: var(--r-kaart);
  padding: clamp(22px, 2.4vw, 30px); background: var(--panel);
}
.dienst h3 { margin-bottom: 12px; }
.dienst p { font-size: var(--t-klein); color: var(--soft); }

/* ── contact ── */
.contact-raster {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.contact-foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-kaart); }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form .veld { display: flex; flex-direction: column; gap: 8px; }
.contact-form label { font-size: var(--t-bijschrift); color: var(--soft); font-weight: 600; }
.verplicht { color: var(--red-bright); }
.contact-form input, .contact-form textarea {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-knop);
  padding: 13px 14px; font-family: var(--sans); font-size: var(--t-klein);
  min-height: 48px;
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: rgba(255,255,255,0.4); }
.contact-form .knop { align-self: flex-start; }
.melding-goed, .melding-fout {
  font-size: var(--t-klein); line-height: 1.6; border-radius: var(--r-knop);
  padding: 14px 16px; border: 1px solid;
}
.melding-goed { color: var(--green-soft); border-color: rgba(47,191,113,0.4); background: rgba(47,191,113,0.08); }
.melding-fout { color: #FFB4B4; border-color: rgba(219,4,4,0.5); background: rgba(219,4,4,0.1); }
.melding-goed a, .melding-fout a { color: inherit; border-bottom: 1px solid currentColor; }
@media (max-width: 860px) { .contact-raster { grid-template-columns: 1fr; } }

/* ── lopende tekst (privacybeleid, voorwaarden) ──
   Een tekst die Michel zelf in het beheer typt: koppen, alinea's en lijstjes,
   verder niets. Zonder deze regels plakken de blokken aan elkaar en staan de
   lijsten zonder inspringing. */
.lopende-tekst { margin-top: 28px; max-width: 68ch; }
.lopende-tekst > * + * { margin-top: 18px; }
.lopende-tekst h2 { font-size: var(--t-kop); margin-top: 42px; }
.lopende-tekst > h2:first-child { margin-top: 0; }
.lopende-tekst ul { margin-left: 0; padding-left: 22px; list-style: disc; }
.lopende-tekst li {
  font-size: var(--t-tekst); line-height: 1.6; color: var(--body); margin-top: 8px;
}
.lopende-tekst a { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.35); }

/* ── inschrijfformulier ──
   Eén formulier dat met JavaScript in stappen uiteenvalt. Zonder script staan
   alle groepen onder elkaar; daarom mag geen enkele regel hier uitgaan van een
   verborgen stap. De voortgangsbalk staat op hidden in de HTML en wordt pas
   door het script getoond. */
.iv-form { display: flex; flex-direction: column; gap: 30px; margin-top: 34px; }

.iv-voortgang { display: flex; flex-direction: column; gap: 10px; }
.iv-balk { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.iv-balk span {
  display: block; height: 100%; width: 0; background: var(--red);
  border-radius: 999px; transition: width 320ms var(--ease-uit);
}
.iv-teller {
  font-family: var(--mono); font-size: var(--t-bijschrift);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut);
}

.iv-stap { border: 0; margin: 0; padding: 0; min-width: 0; }
.iv-stap legend {
  padding: 0; font-family: var(--display); font-weight: 700;
  font-size: var(--t-kop); line-height: 1.15; letter-spacing: -0.01em; color: var(--text);
}
.iv-stap legend:focus { outline: none; }
.iv-uitleg { color: var(--mut); font-size: var(--t-klein); margin-top: 10px; max-width: 56ch; }

.iv-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.iv-veld { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.iv-rij .iv-veld { margin-top: 0; }
.iv-rij + .iv-veld, .iv-veld + .iv-rij { margin-top: 18px; }
.iv-veld label { font-size: var(--t-bijschrift); color: var(--soft); font-weight: 600; }
.iv-veld input, .iv-veld textarea {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-knop);
  padding: 13px 14px; font-family: var(--sans); font-size: var(--t-klein);
  min-height: 48px;
}
.iv-veld textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
.iv-veld input::placeholder, .iv-veld textarea::placeholder { color: var(--dim); }
.iv-veld input:focus-visible, .iv-veld textarea:focus-visible { border-color: rgba(255,255,255,0.4); }
.iv-veld.mis input, .iv-veld.mis textarea { border-color: rgba(219,4,4,0.7); }
.iv-nota { font-size: var(--t-bijschrift); color: var(--mut); }
.iv-fout { font-size: var(--t-bijschrift); color: #FFB4B4; margin-top: 8px; }

/* Keuzekaarten: tour, aantal personen. Groot genoeg om met een duim te raken. */
.iv-keuzes { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.iv-keuze {
  position: relative;
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-knop); padding: 16px 18px; min-height: 64px;
  transition: border-color 160ms var(--ease-uit), background 160ms var(--ease-uit);
}
.iv-keuze:hover { border-color: rgba(255,255,255,0.22); }
.iv-keuze.gekozen { border-color: var(--red); background: rgba(219,4,4,0.07); }
.iv-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iv-keuze input:focus-visible + .iv-keuze-tekst { outline: 2px solid var(--red-bright); outline-offset: 4px; }
.iv-keuze-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.iv-keuze-tekst .naam { font-size: var(--t-klein); font-weight: 700; color: var(--text); }
.iv-keuze-tekst .sub { font-size: var(--t-bijschrift); color: var(--mut); }
.iv-vink {
  width: 20px; height: 20px; flex: none; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
}
.iv-keuze.gekozen .iv-vink { border-color: var(--red); background: var(--red); }
.iv-prijs {
  font-family: var(--mono); font-size: var(--t-klein); color: var(--sub); flex: none;
}
.iv-prijs span + span { margin-left: 8px; }

/* Eetkeuzes: per moment, per persoon. */
.iv-eten { margin-top: 22px; display: flex; flex-direction: column; gap: 26px; }
.iv-moment h3 { font-size: var(--t-kop-klein); }
.iv-persoon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.iv-persoon:last-child { border-bottom: 0; }
.iv-wie { font-size: var(--t-bijschrift); color: var(--mut); min-width: 100px; }
.iv-opties { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-persoon.mis .iv-optie { border-color: rgba(219,4,4,0.7); }
.iv-optie {
  position: relative;
  display: inline-flex; align-items: center; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r-knop); padding: 11px 15px; min-height: 44px;
}
.iv-optie:hover { border-color: rgba(255,255,255,0.22); }
.iv-optie.gekozen { border-color: var(--red); background: rgba(219,4,4,0.07); }
.iv-optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.iv-optie > span { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-bijschrift); color: var(--soft); }
.iv-optie.gekozen > span { color: var(--text); }
.iv-optie .sub { color: var(--mut); }
.iv-optie input:focus-visible + span { outline: 2px solid var(--red-bright); outline-offset: 5px; }

.iv-factuur {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.iv-factuurkop { font-size: var(--t-bijschrift); color: var(--soft); font-weight: 600; }
.iv-factuur .iv-rij { margin-top: 14px; }

.iv-akkoord {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  margin-top: 26px; padding: 16px 18px; min-height: 56px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-knop);
}
.iv-akkoord.aan { border-color: rgba(255,255,255,0.22); }
.iv-akkoord.mis { border-color: rgba(219,4,4,0.7); }
.iv-akkoord input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--red); }
.iv-akkoord span { font-size: var(--t-klein); line-height: 1.55; color: var(--soft); }
.iv-akkoord a { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.35); }

.iv-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.iv-acties .knop { min-height: 52px; }
.iv-slotnota { font-size: var(--t-bijschrift); color: var(--mut); max-width: 60ch; }
.iv-slotnota a { color: var(--soft); border-bottom: 1px solid rgba(255,255,255,0.25); }

.iv-gelukt {
  margin-top: 26px; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 28px; border: 1px solid var(--line); border-left: 2px solid var(--red);
  border-radius: var(--r-knop); background: var(--panel-2);
}
.iv-gelukt-bel a { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.35); }

@media (max-width: 620px) {
  .iv-rij { grid-template-columns: 1fr; }
  .iv-keuze { gap: 12px; padding: 15px 16px; }
  .iv-wie { min-width: 100%; }
  .iv-acties .knop { flex: 1 1 auto; justify-content: center; }
}

.contact-gegevens {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(24px, 3vw, 48px); align-items: start;
}
.contact-gegevens h2 { margin-bottom: 14px; }
.contact-gegevens p { color: var(--soft); }
.gegevens-rij {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px; margin-top: 28px;
}
.gegevens-rij h3 {
  font-family: var(--sans); font-size: var(--t-bijschrift); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--mut); margin-bottom: 8px;
}
.gegevens-rij a { color: var(--text); border-bottom: 1px solid var(--line); }
.kaart-link { margin: 0; }
@media (max-width: 860px) { .contact-gegevens { grid-template-columns: 1fr; } }

/* ── vragen ── */
.vragen { margin-top: clamp(28px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 10px; }
.vraag { border: 1px solid var(--line); border-radius: var(--r-kaart); background: var(--panel); }
.vraag summary {
  cursor: pointer; list-style: none; padding: 18px 22px; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--display); font-weight: 600; font-size: var(--t-klein); color: var(--text);
}
.vraag summary::-webkit-details-marker { display: none; }
/* Het teken is een tekstteken en geen icoonbestand: het draait mee met de
   staat en blijft leesbaar als de opmaak niet laadt. */
.vraag summary::after {
  content: '+'; font-family: var(--display); font-size: 22px; line-height: 1;
  color: var(--mut); flex: none;
}
.vraag[open] summary::after { content: '–'; }
.antwoord { padding: 0 22px 20px; }
.antwoord p { font-size: var(--t-klein); color: var(--soft); max-width: 62ch; }

/* ── wagenpagina ── */
.wagen-beelden {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 3.5vw, 48px);
}
.wagen-beelden img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-kaart); }
.wagen-onder {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(36px, 5vw, 72px);
}
.spec-lijst {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-kaart); overflow: hidden;
}
.spec-lijst > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft);
}
.spec-lijst > div:last-child { border-bottom: 0; }
.spec-lijst dt { font-size: var(--t-bijschrift); color: var(--mut); }
.spec-lijst dd { margin: 0; font-size: var(--t-klein); color: var(--text); font-weight: 600; text-align: right; }
.wagen-tekst { display: flex; flex-direction: column; gap: 18px; }
.wagen-tekst p { color: var(--soft); max-width: 68ch; }
@media (max-width: 860px) { .wagen-onder { grid-template-columns: 1fr; } }

/* ── oproep ── */
.oproep { position: relative; padding: clamp(72px, 10vw, 140px) 0; overflow: hidden; }
.oproep-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.oproep::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.oproep-binnen {
  position: relative; z-index: 2; max-width: 680px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.oproep h2 { font-size: var(--t-kop-groot); max-width: 18ch; }
.oproep p { color: var(--soft); max-width: 52ch; }

/* ── voet ── */
.site-voet { border-top: 1px solid var(--line-soft); padding-top: clamp(48px, 6vw, 80px); }
.voet-slagzin {
  font-family: var(--display); font-weight: 700; font-size: var(--t-kop);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--text); max-width: 18ch;
}
.voet-raster {
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.6fr));
  gap: clamp(24px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px);
}
.voet-beeld img { width: 100%; max-width: 320px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-kaart); }
.voet-kolom h2 {
  font-family: var(--sans); font-size: var(--t-bijschrift); font-weight: 600;
  letter-spacing: 0.04em; color: var(--mut); margin-bottom: 12px;
}
.voet-kolom ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: var(--t-klein); color: var(--soft);
}
.voet-kolom a:hover { color: var(--text); }
.voet-klein { margin-top: clamp(32px, 4vw, 56px); font-size: var(--t-bijschrift); color: var(--mut); }
@media (max-width: 860px) {
  .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet-beeld { grid-column: 1 / -1; }
}

/* Het grote woordmerk onderaan, zoals op de bestaande site. Als vorm, zodat
   hij op elke breedte precies past in plaats van afgesneden te worden. */
.voet-woordmerk {
  display: block; width: 100%; max-width: 1400px;
  margin: clamp(28px, 4vw, 56px) auto 0;
  padding: 0 clamp(16px, 3vw, 40px);
  overflow: visible; user-select: none;
}
.voet-woordmerk text {
  font-family: var(--display); font-weight: 700; font-size: 126px;
  fill: var(--sub);
}

/* ── beweging ──
   Eén moment: blokken komen bij het scrollen één keer omhoog. Het script zet
   'zichtbaar' erop; zonder JavaScript staat alles gewoon zichtbaar. */
.onthul { opacity: 0; transform: translateY(14px); }
.onthul.zichtbaar {
  opacity: 1; transform: none;
  transition: opacity 0.3s var(--ease-uit), transform 0.3s var(--ease-uit);
}
@media (prefers-reduced-motion: reduce) {
  .onthul, .onthul.zichtbaar { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── reacties van deelnemers ──
   Een metselverband, geen raster: de ene reactie is twee regels, de andere
   tien woorden, en die ongelijkheid mag je zien. Dat is wat ze echt maakt.
   Geen sterren en geen portretjes — het zijn berichten uit een groepschat. */
.reactie-muur {
  columns: 3 300px; column-gap: clamp(14px, 1.6vw, 22px);
}
.reactie {
  break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--line); border-radius: var(--r-kaart);
  background: var(--panel); padding: clamp(20px, 2.2vw, 28px);
}
.reactie blockquote { margin: 0; }
.reactie blockquote p {
  font-size: var(--t-klein); line-height: 1.65; color: var(--soft);
}
/* Het aanhalingsteken hoort bij het citaat, niet bij de opmaak: het staat in
   de tekststroom en is dus ook voor een schermlezer een citaat. */
.reactie blockquote p::before { content: '\201C'; }
.reactie blockquote p::after { content: '\201D'; }
.reactie figcaption {
  margin-top: 14px; font-size: var(--t-bijschrift);
  font-weight: 600; color: var(--text);
}
@media (max-width: 640px) {
  .reactie-muur { columns: 1; }
}