/* =========================================================
   MODA TRAVEL — eigen uitstraling
   ---------------------------------------------------------
   Deze pagina hoort niet aan te voelen als de taxi- en
   transportsite. Daarom worden hieronder de design-tokens
   opnieuw ingesteld: warme crèmetinten in plaats van koel
   grijs, een rondere kopletter en zachtere vormen. Dat geldt
   enkel hier, want dit bestand wordt alleen op /travel geladen.
   Het MODA-rood blijft voor de knoppen, zodat het samengaat
   met het logo.
   ========================================================= */
:root {
  /* Een editoriale schreefletter: een reisbureau mag lezen als een
     reismagazine, niet als een aanbiedingssite. Fraunces heeft een
     optische as, dus grote koppen zijn fijner van lijn dan kleine. */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;

  --zand:      #c8873f;   /* warm accent voor kleine details */
  --zand-licht:#e8c9a0;
  --gold:      #c8873f;

  --radius:    24px;
  --radius-sm: 16px;
  --shadow:    0 24px 60px rgba(74, 52, 30, 0.16);
  --shadow-sm: 0 12px 34px rgba(74, 52, 30, 0.10);
}

/* Licht thema: warme crème in plaats van koel grijs */
:root[data-theme="light"] {
  --bg:           #fbf7f1;
  --surface:      #f4ece1;
  --surface-2:    #ffffff;
  --surface-3:    #fffdfa;
  --surface-soft: #ffffff;
  --line:         rgba(120, 90, 60, 0.16);
  --text:         #3d3229;
  --text-strong:  #241d16;
  --muted:        #8a7965;
  --footer-bg:    #f4ece1;
  --section-dark: linear-gradient(180deg, #f6efe5, #fbf7f1);
}

/* Donker thema: warme, aardse tinten in plaats van neutraal zwart */
:root[data-theme="dark"] {
  --bg:           #17120e;
  --surface:      #1e1813;
  --surface-2:    #241d17;
  --surface-3:    #1a1410;
  --line:         rgba(232, 201, 160, 0.13);
  --muted:        #a2917d;
  --footer-bg:    #120e0b;
  --section-dark: linear-gradient(180deg, #14100c, #1c1611);
}

/* =========================================================
   Lichte balk bovenaan
   ---------------------------------------------------------
   De hero is hier crème in plaats van een donkere foto, dus de
   balk wordt licht en de tekst donker. Het logo wisselt mee met
   het thema, net zoals in de footer.
   ========================================================= */
.nav { background: rgba(251, 247, 241, .82); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.nav.is-scrolled { background: rgba(251, 247, 241, .96); }
.nav__links a { color: var(--text); }
.nav__links a:not(.nav__cta):hover { color: var(--text-strong); }
.nav__cta { color: #fff; }
.nav__switch { color: var(--text-strong); background: rgba(61, 50, 41, .06); border-color: var(--line); }
.nav__switch:hover { background: rgba(61, 50, 41, .12); border-color: rgba(61, 50, 41, .3); }
.theme-toggle { color: var(--text-strong); background: rgba(61, 50, 41, .06); border-color: var(--line); }
.theme-toggle:hover { background: rgba(61, 50, 41, .12); }
.nav__toggle span { background: var(--text-strong); }
.nav__logo--op-donker { display: none; }

/* Donker thema: balk en logo weer omdraaien */
:root[data-theme="dark"] .nav { background: rgba(23, 18, 14, .85); }
:root[data-theme="dark"] .nav.is-scrolled { background: rgba(23, 18, 14, .96); }
:root[data-theme="dark"] .nav__links a { color: var(--off); }
:root[data-theme="dark"] .nav__links a:not(.nav__cta):hover { color: #fff; }
:root[data-theme="dark"] .nav__switch,
:root[data-theme="dark"] .theme-toggle { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
:root[data-theme="dark"] .nav__toggle span { background: #fff; }
:root[data-theme="dark"] .nav__logo--op-licht { display: none; }
:root[data-theme="dark"] .nav__logo--op-donker { display: block; }

/* Uitgeklapt menu op mobiel volgt hetzelfde licht/donker */
@media (max-width: 720px) {
  .nav__links { background: rgba(251, 247, 241, .98); }
  :root[data-theme="dark"] .nav__links { background: rgba(23, 18, 14, .98); }
}

/* Rustiger koppen: reisbureaus schreeuwen niet */
/* Koppen: schreefletter, rustiger van gewicht, met optische grootte. */
.section__title {
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.08;
  font-variation-settings: "opsz" 96, "SOFT" 0;
}
.section__eyebrow {
  color: var(--zand); letter-spacing: .2em; font-size: .7rem;
  font-family: var(--font-body); font-weight: 600;
}
/* Rood is de kleur van het vervoer. Het reisbureau accentueert in warm zand. */
.text-accent { color: var(--zand); }
.section__lead a, .card p a { color: var(--zand); }
.hero__eyebrow { border-color: rgba(200,135,63,.45); color: var(--zand-licht); }

/* =========================================================
   MODA TRAVEL — Aanvullende stijl voor de reisbureau-pagina (/travel)
   ---------------------------------------------------------
   Wordt geladen ná style.css en hergebruikt al zijn design-tokens.
   Bevat enkel wat uniek is voor /travel: de bestemmingskaarten en
   de Instagram-galerij "Laatste reizen". De rest (nav, hero, secties,
   kaarten, formulier, footer) komt uit style.css.
   ========================================================= */

/* -------------------- Bestemmingskaarten -------------------- */
.trips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trip-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.trip-card:hover { transform: translateY(-8px); border-color: rgba(225,29,42,.35); box-shadow: var(--shadow); }

.trip-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.trip-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.trip-card:hover .trip-card__img img { transform: scale(1.06); }
.trip-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(12,12,14,.72); color: #fff; backdrop-filter: blur(4px);
  font-family: var(--font-head); font-weight: 600; font-size: .74rem; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 100px;
}

.trip-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.trip-card__body h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.trip-card__tagline { color: var(--red); font-weight: 600; font-size: .9rem; font-family: var(--font-head); }
.trip-card__desc { color: var(--muted); font-size: .93rem; line-height: 1.6; margin-top: 2px; }
.trip-card__foot {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border-top: 1px solid var(--line); font-size: .86rem;
}
.trip-card__price { color: var(--text-strong); font-weight: 600; }
.trip-card__cta { color: var(--red); font-weight: 600; font-family: var(--font-head); }

/* -------------------- Instagram-galerij "Laatste reizen" -------------------- */
.reisfeed__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.reisfeed__handle {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; color: var(--text-strong);
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface-2);
  transition: border-color .25s, transform .25s var(--ease);
}
.reisfeed__handle:hover { border-color: rgba(225,29,42,.4); transform: translateY(-2px); }
.reisfeed__ig {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  display: inline-grid; place-items: center; color: #fff;
}

/* De reizen-kaarten (klikbaar → detailvenster) */
.reizen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reiscard {
  position: relative; cursor: pointer; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.reiscard:hover { transform: translateY(-8px); border-color: rgba(225,29,42,.35); box-shadow: var(--shadow); }
.reiscard:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.reiscard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.reiscard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.reiscard:hover .reiscard__media img { transform: scale(1.06); }
.reiscard__ig {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px;
  border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.reiscard__count {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(12,12,14,.72); color: #fff; backdrop-filter: blur(4px);
  font-size: .72rem; font-weight: 600; padding: 4px 9px; border-radius: 100px;
}
.reiscard__badges { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.reiscard__badge {
  background: rgba(12,12,14,.80); color: #fff; backdrop-filter: blur(4px);
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  padding: 6px 11px; border-radius: 100px;
}
.reiscard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.reiscard__title { font-size: 1.18rem; letter-spacing: -0.01em; }
.reiscard__sum {
  color: var(--muted); font-size: .92rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reiscard__more { margin-top: auto; padding-top: 8px; color: var(--red); font-weight: 600; font-family: var(--font-head); font-size: .9rem; }

/* Nette statusmelding (laden / geen posts) */
.reisfeed__status { color: var(--muted); text-align: center; padding: 30px 0; grid-column: 1 / -1; }

/* Snelle contactknoppen (offerte-intro) */
.quickcontact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* -------------------- Responsive -------------------- */
@media (max-width: 980px) {
  .trips, .reizen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .trips, .reizen { grid-template-columns: 1fr; }
}


/* =========================================================
   Hero: tekst links, fotocollage rechts
   ---------------------------------------------------------
   Geen donkere foto over de volle breedte zoals bij taxi en
   transport, maar een rustige crème opbouw in twee kolommen.
   ========================================================= */
.reishero { position: relative; padding: 148px 0 84px; overflow: hidden; }
/* Zacht warm vlak achter de collage, geeft diepte zonder te schreeuwen */
.reishero::after {
  content: ''; position: absolute; top: -140px; right: -180px; width: 720px; height: 720px;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(200,135,63,.16), transparent 62%);
}
.reishero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center;
}

.reishero__eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 7px 16px; border-radius: 100px;
  border: 1px solid rgba(200,135,63,.4); color: var(--zand);
  font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
}
.reishero__titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.7rem, 6.2vw, 5rem); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--text-strong); margin-bottom: 20px;
}
/* Cursief en warm zand: het reisbureau accentueert niet in het rood van het vervoer. */
.reishero__titel em { font-style: italic; color: var(--zand); }
.reishero__lead { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.7; max-width: 30em; margin-bottom: 30px; }
.reishero__acties { display: flex; flex-wrap: wrap; gap: 12px; }

.reishero__cijfers {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line);
}
.reishero__cijfer strong { display: block; }
/* Enkel het label (rechtstreeks kind), zodat het cijfer erboven groot blijft */
.reishero__cijfer > span { color: var(--muted); font-size: .84rem; }
/* Het cijfer erft anders de centrering en de min-hoogte uit style.css */
.reishero__cijfer .stat__num {
  display: block; text-align: left; min-height: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1.6rem; color: var(--text-strong); line-height: 1.2;
}

/* De twee overlappende foto's */
.reishero__beeld { position: relative; padding-bottom: 34px; }
.reishero__foto { overflow: hidden; border-radius: 28px; box-shadow: var(--shadow); }
.reishero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reishero__foto--groot { width: 82%; margin-left: auto; aspect-ratio: 4 / 5; }
.reishero__foto--klein {
  position: absolute; left: 0; bottom: 0; width: 54%; aspect-ratio: 4 / 3;
  border: 9px solid var(--bg); border-radius: 26px;
}

/* =========================================================
   Bestemmingen als mozaïek
   ========================================================= */
.mozaiek { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.moz {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--surface-2); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.moz:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.moz:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.moz img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.moz:hover img { transform: scale(1.07); }
.moz__tekst {
  position: absolute; inset: auto 0 0 0; padding: 22px 22px 20px; color: #fff;
  background: linear-gradient(to top, rgba(8,8,10,.88) 0%, rgba(8,8,10,.35) 60%, transparent 100%);
}
.moz__naam { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
.moz__regel { font-size: .88rem; color: rgba(255,255,255,.82); margin-top: 2px; }
.moz__label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.92); color: #2b2119;
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  padding: 5px 11px; border-radius: 100px;
}
.moz--groot { grid-column: span 2; grid-row: span 2; }
.moz--breed { grid-column: span 2; }
/* Sluit de laatste rij netjes af als er anders een gat zou blijven. */
.moz--vol { grid-column: span 4; }
.moz--groot .moz__naam { font-size: 1.7rem; }

/* =========================================================
   Zigzag: foto naast tekst
   ========================================================= */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; }
.duo + .duo { margin-top: 90px; }
.duo__beeld { position: relative; }
.duo__beeld img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); display: block;
}
.duo--omgekeerd .duo__beeld { order: 2; }
.duo__tekst .section__eyebrow,
.duo__tekst .section__title,
.duo__tekst .section__lead { text-align: left; }
.duo__tekst .section__title { margin-bottom: 16px; }
.duo__tekst .btn { margin-top: 22px; }

/* Reisstijlen: lichter, zonder omkaderde blokken */
.stijlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stijl { text-align: center; }
.stijl__icoon {
  width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.7rem;
  background: rgba(200,135,63,.14); border: 1px solid rgba(200,135,63,.3);
}
.stijl h3 { font-size: 1.12rem; margin-bottom: 7px; }
.stijl p { color: var(--muted); font-size: .93rem; line-height: 1.6; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .reishero { padding: 120px 0 64px; }
  .reishero__grid { grid-template-columns: 1fr; gap: 44px; }
  .reishero__beeld { max-width: 520px; margin: 0 auto; width: 100%; }
  .duo, .duo--omgekeerd { grid-template-columns: 1fr; gap: 32px; }
  .duo--omgekeerd .duo__beeld { order: 0; }
  .duo__tekst .section__eyebrow, .duo__tekst .section__title, .duo__tekst .section__lead { text-align: left; }
  .stijlen { grid-template-columns: 1fr 1fr; gap: 34px; }
  .mozaiek { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .moz--groot { grid-column: span 2; grid-row: span 2; }
  .moz--breed, .moz--vol { grid-column: span 2; }
}
@media (max-width: 620px) {
  .reishero__foto--groot { width: 88%; aspect-ratio: 3 / 4; }
  .reishero__foto--klein { width: 56%; border-width: 7px; }
  .reishero__cijfers { gap: 16px 26px; }
  .reishero__cijfer strong { font-size: 1.3rem; }
  .stijlen { grid-template-columns: 1fr; }
  .mozaiek { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .moz--groot, .moz--breed, .moz--vol { grid-column: span 1; grid-row: span 1; }
}

/* Stappen als lijst in een smalle kolom (naast de foto) in plaats van drie kaarten */
.stappen--lijst { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
.stappen--lijst .stap {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 18px;
  background: none; border: 0; border-radius: 0; padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.stappen--lijst .stap:last-child { border-bottom: 0; padding-bottom: 0; }
.stappen--lijst .stap:hover { transform: none; box-shadow: none; }
.stappen--lijst .stap__nr {
  position: static; grid-row: span 2; width: 38px; height: 38px;
  font-size: 1rem; box-shadow: none; align-self: start;
}
.stappen--lijst .stap h3 { margin: 6px 0 2px; font-size: 1.05rem; }
.stappen--lijst .stap p { font-size: .93rem; }

/* Herstel: naam en ondertitel in de mozaïektegels zijn spans en moeten
   onder elkaar staan, niet achter elkaar. */
.moz__tekst, .moz__naam, .moz__regel { display: block; }

/* =========================================================
   Reisdetailpagina
   ========================================================= */
.reisdetail { padding-top: 132px; }
.reisdetail__terug {
  display: inline-block; margin-bottom: 22px; color: var(--muted);
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; transition: color .25s;
}
.reisdetail__terug:hover { color: var(--red); }
.reisdetail__kop { max-width: 46rem; margin-bottom: 26px; }
.reisdetail__titel {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--text-strong);
}
.reisdetail__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.6; margin-top: 10px; }

.reisdetail__hoofdfoto {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 30px;
}
.reisdetail__hoofdfoto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.reisdetail__kenmerken { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.reisdetail__kenmerk {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 18px;
}
.reisdetail__icoon { font-size: 1.15rem; }
.reisdetail__kenmerk strong { display: block; font-family: var(--font-head); font-weight: 600; color: var(--text-strong); font-size: .98rem; }
.reisdetail__kenmerk em { display: block; font-style: normal; color: var(--muted); font-size: .82rem; margin-top: 1px; }

.reisdetail__body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 52px; align-items: start; }
.reisdetail__tekst h2 { font-size: 1.5rem; margin-bottom: 14px; letter-spacing: -0.01em; }
.reisdetail__tekst p { color: var(--text); line-height: 1.75; margin-bottom: 14px; }
.reisdetail__tekst h2 + p,
.reisdetail__tekst h2 + ul { margin-top: 0; }
.reisdetail__lijst { list-style: none; margin: 0 0 14px; padding: 0; }
.reisdetail__lijst li {
  position: relative; padding-left: 28px; margin-bottom: 9px;
  color: var(--text); line-height: 1.65;
}
.reisdetail__lijst li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--zand); font-weight: 700;
}
.reisdetail__stijl {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .94rem;
}
.reisdetail__stijl a { color: var(--red); }
.reisdetail__stijl a:hover { text-decoration: underline; }

.reisdetail__kaart {
  position: sticky; top: 110px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
}
.reisdetail__kaart h3 { font-size: 1.2rem; margin-bottom: 8px; }
.reisdetail__kaart p { color: var(--muted); font-size: .94rem; line-height: 1.6; margin-bottom: 20px; }
.reisdetail__kaart .btn { margin-bottom: 10px; }
.reisdetail__insta { display: block; text-align: center; margin-top: 6px; color: var(--muted); font-size: .88rem; }
.reisdetail__insta:hover { color: var(--red); }

.reisdetail__fotos { margin-top: 64px; }
.reisdetail__fotos h2 { font-size: 1.5rem; margin-bottom: 18px; }
.reisdetail__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reisfoto {
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: var(--surface-3); aspect-ratio: 4 / 3;
  transition: transform .3s var(--ease), border-color .3s;
}
.reisfoto:hover { transform: translateY(-4px); border-color: rgba(225,29,42,.4); }
.reisfoto:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.reisfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 980px) {
  .reisdetail__body { grid-template-columns: 1fr; gap: 34px; }
  .reisdetail__kaart { position: static; }
  .reisdetail__raster { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .reisdetail { padding-top: 108px; }
  .reisdetail__raster { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   STARTPAGINA — editoriale opbouw
   ---------------------------------------------------------
   Hairlines, kleine kapitalen als label en een pijltje bij
   elke link. Rustig, met veel wit, zoals een reismagazine.
   ========================================================= */

/* -- Hero: rustiger van toon -- */
.reishero__eyebrow {
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: .2em; font-size: .7rem;
}
.reishero__titel {
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  letter-spacing: -0.025em; line-height: 1.02;
}
.reishero__cijfer .stat__num {
  font-family: var(--font-head); font-weight: 500;
  font-variation-settings: "opsz" 60;
  font-variant-numeric: tabular-nums;
}

/* -- Index: wat we voor je doen, als redactionele lijst -- */
.index { padding: clamp(80px, 10vw, 130px) 0; }
.index__kop {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 120;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08; letter-spacing: -0.025em;
  color: var(--text-strong);
  max-width: 20ch; margin: 0 0 clamp(38px, 5vw, 60px);
}
.index__kop em { font-style: italic; color: var(--zand); }

.rij {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3.5vw, 46px);
  align-items: baseline;
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: opacity .3s var(--ease);
}
.rij:last-of-type { border-bottom: 1px solid var(--line); }
.rij:hover { opacity: .62; }
.rij__nr {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rij__titel {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--text-strong); margin: 0;
}
.rij__titel .pijl { color: var(--zand); font-style: normal; margin-left: .3em; }
.rij__uitleg { color: var(--muted); line-height: 1.75; margin: 0; font-size: .97rem; }

/* -- Uitgelichte reizen -- */
.uitgelicht { padding: clamp(80px, 10vw, 130px) 0; background: var(--surface); }
.uitgelicht__balk {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 44px);
}
.uitgelicht__balk .index__kop { margin-bottom: 0; }
.uitgelicht__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 32px); }

.reisje { display: block; text-decoration: none; }
.reisje__beeld {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-sm);
  background: var(--surface-3); margin-bottom: 16px;
}
.reisje__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.reisje:hover .reisje__beeld img { transform: scale(1.05); }
.reisje__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.reisje__naam {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: 1.16rem; letter-spacing: -0.015em; color: var(--text-strong); margin: 0;
}
.reisje__naam .pijl { color: var(--zand); font-style: normal; margin-left: .25em; }
.reisje__prijs { font-size: .82rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.reisje__plaats {
  display: block; margin-top: 5px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* -- Zo werken we -- */
.werkwijze2 { padding: clamp(80px, 10vw, 130px) 0; }
.werkwijze2__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); }
.werkstap { border-top: 1px solid var(--line); padding-top: 24px; }
.werkstap__nr {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; color: var(--zand); margin-bottom: 14px;
}
.werkstap h3 {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 10px;
}
.werkstap p { color: var(--muted); line-height: 1.75; margin: 0; font-size: .97rem; }

/* -- Afsluiter -- */
.uitnodiging { padding: clamp(80px, 10vw, 136px) 0 clamp(90px, 11vw, 150px); text-align: center; }
.uitnodiging__kop {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.1rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--text-strong); margin: 0 auto 18px; max-width: 16ch;
}
.uitnodiging__kop em { font-style: italic; color: var(--zand); }
.uitnodiging__lead { color: var(--muted); max-width: 36rem; margin: 0 auto 34px; line-height: 1.75; }
.uitnodiging__acties { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

@media (max-width: 900px) {
  .uitgelicht__raster { grid-template-columns: 1fr 1fr; }
  .werkwijze2__raster { grid-template-columns: 1fr; gap: 0; }
  .werkstap { padding: 24px 0; }
}
@media (max-width: 620px) {
  .rij { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .rij__nr { margin-bottom: 2px; }
  .uitgelicht__raster { grid-template-columns: 1fr; }
  .uitnodiging__acties .btn { width: 100%; justify-content: center; }
}

/* Knoppen blijven in de gewone letter: een schreefletter op een kleine
   knop leest minder als iets waar je op klikt. */
.btn, .nav__cta, .nav__switch { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

/* Reispagina: dezelfde editoriale toon als de rest. */
.reisdetail__titel {
  font-weight: 400; font-variation-settings: "opsz" 144;
  font-size: clamp(2.3rem, 5.4vw, 4rem); letter-spacing: -0.025em; line-height: 1.03;
}
.reisdetail__tekst h2,
.reisdetail__fotos h2,
.reisdetail__kaart h3 {
  font-weight: 400; font-variation-settings: "opsz" 60; letter-spacing: -0.02em;
}
.reisdetail__stijl a { color: var(--zand); }
.reisdetail__kenmerk strong { font-family: var(--font-body); }

/* Tegels in het mozaïek en de reiskaarten. */
.moz__naam, .reiscard__title, .stijl h3, .trip-card__title {
  font-weight: 400; font-variation-settings: "opsz" 60; letter-spacing: -0.015em;
}

/* =========================================================
   REISSTIJLEN — vier rijen, foto en tekst om beurten
   ========================================================= */
.stijlkop { padding: clamp(120px, 14vw, 170px) 0 clamp(40px, 5vw, 64px); max-width: 34rem; }
.stijlkop__titel {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.03; letter-spacing: -0.03em;
  color: var(--text-strong); margin: 0 0 18px;
}
.stijlkop__titel em { font-style: italic; color: var(--zand); }
.stijlkop__lead { color: var(--muted); line-height: 1.75; margin: 0; font-size: 1.05rem; }

.stijlrij {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(44px, 6vw, 78px) 0;
  border-top: 1px solid var(--line);
}
.stijlrij:last-of-type { border-bottom: 1px solid var(--line); }
.stijlrij--gedraaid .stijlrij__beeld { order: 2; }

.stijlrij__beeld { overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-3); }
.stijlrij__beeld img { width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }

.stijlrij__nr {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; color: var(--zand); margin-bottom: 14px;
}
.stijlrij__naam {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.08;
  color: var(--text-strong); margin: 0 0 14px;
}
.stijlrij__tekst { color: var(--muted); line-height: 1.78; margin: 0 0 26px; }

/* de reizen die bij deze stijl horen */
.stijlrij__reizen { list-style: none; margin: 0 0 24px; padding: 0; }
.stijlrij__reizen li { border-top: 1px solid var(--line); }
.stijlrij__reizen a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 12px 0; text-decoration: none; transition: opacity .3s var(--ease);
}
.stijlrij__reizen a:hover { opacity: .6; }
.stijlrij__reizen strong {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: 1.02rem; color: var(--text-strong); letter-spacing: -0.01em;
}
.stijlrij__reizen .pijl { color: var(--zand); font-style: normal; margin-left: .25em; }
.stijlrij__reizen span { font-size: .84rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stijlrij__leeg { color: var(--muted); font-size: .92rem; font-style: italic; margin: 0 0 24px; }

@media (max-width: 860px) {
  .stijlrij { grid-template-columns: 1fr; gap: 24px; }
  .stijlrij--gedraaid .stijlrij__beeld { order: 0; }
}

/* Keuzelijst in het formulier: zelfde vorm als de andere velden. */
.field select {
  width: 100%; appearance: none; -webkit-appearance: none;
  font: inherit; color: var(--text);
  background-color: var(--input-bg);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 42px 13px 15px;
  transition: border-color .25s, box-shadow .25s;
}
.field select:focus {
  outline: none; border-color: var(--zand);
  box-shadow: 0 0 0 3px rgba(200,135,63,.16);
}

/* =========================================================
   VOLGBAND — compacte uitnodiging naar Instagram
   Een volle sectie met kop en lead was te leeg zolang er geen
   feed is ingesteld; dit leest als één bewuste band.
   ========================================================= */
.volgband { padding: 0 0 clamp(80px, 10vw, 128px); }
.volgband__doos {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(24px, 3.4vw, 36px) clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.volgband__kop {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: -0.02em;
  color: var(--text-strong); margin: 0 0 6px;
}
.volgband__lead { color: var(--muted); margin: 0; font-size: .96rem; line-height: 1.6; }
.volgband__knop {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  color: var(--text-strong); text-decoration: none; white-space: nowrap;
  padding: 11px 18px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface-3);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.volgband__knop:hover { border-color: var(--zand); transform: translateY(-2px); }
.volgband__ig {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 48%, #6228d7); color: #fff;
}
.volgband__knop .pijl { color: var(--zand); font-style: normal; }

/* Focus in het zand van het reisbureau in plaats van het rood van het vervoer. */
.field input:focus, .field textarea:focus {
  border-color: var(--zand);
  box-shadow: 0 0 0 3px rgba(200,135,63,.16);
}

/* =========================================================
   STARTPAGINA — volledig herzien
   Grote fotografie, schreefletter op formaat, en veel lucht.
   ========================================================= */

/* ---- Hero over het volle scherm ---- */
.thero {
  position: relative; min-height: 92svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: #17120c;
}
.thero__beeld { position: absolute; inset: 0; z-index: 0; }
.thero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; display: block; }
.thero__waas {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20,14,8,.90) 0%, rgba(20,14,8,.55) 34%, rgba(20,14,8,.10) 66%, rgba(20,14,8,.30) 100%);
}
/* Bovenaan genoeg ruimte voor de menubalk, zodat het bovenschrift niet
   onder het menu verdwijnt wanneer de tekst hoger wordt dan de hero. */
.thero__inhoud { position: relative; z-index: 2; width: 100%; padding: clamp(140px, 16vw, 190px) 0 clamp(48px, 7vw, 96px); }

.thero__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.82); margin: 0 0 26px;
}
.thero__eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--zand-licht); flex: none; }

.thero__titel {
  font-family: var(--font-head); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: 1.0; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 24px; max-width: 18ch;
  text-wrap: balance;
}
.thero__titel em { font-style: italic; color: var(--zand-licht); }

.thero__lead {
  color: rgba(255,255,255,.84); font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7; max-width: 34rem; margin: 0 0 34px;
}
.thero__acties { display: flex; flex-wrap: wrap; gap: 13px; }
.thero .btn--ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.34); backdrop-filter: blur(6px);
}
.thero .btn--ghost:hover { background: rgba(255,255,255,.22); }

/* smalle balk onderaan de hero met de cijfers */
.thero__cijfers {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 22px; margin-top: 40px;
}
.thero__cijfer { padding-right: 20px; }
.thero__cijfer strong {
  display: block; font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.thero__cijfer span { font-size: .78rem; color: rgba(255,255,255,.68); letter-spacing: .06em; }

/* ---- Openingszin ---- */
.opening { padding: clamp(90px, 12vw, 160px) 0; }
.opening__tekst {
  font-family: var(--font-head); font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.24; letter-spacing: -0.022em;
  color: var(--text-strong); max-width: 26ch; margin: 0 auto; text-align: center;
}
.opening__tekst em { font-style: italic; color: var(--zand); }
.opening__onder { text-align: center; margin-top: 30px; color: var(--muted); max-width: 42rem; margin-left: auto; margin-right: auto; line-height: 1.8; }

/* ---- Bestemmingen: groot en asymmetrisch ---- */
.bestem { padding: 0 0 clamp(90px, 11vw, 150px); }
.bestem__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.4vw, 40px); }
.bestem__raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.bestemkaart { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); text-decoration: none; background: var(--surface-3); }
.bestemkaart img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.bestemkaart:hover img { transform: scale(1.05); }
.bestemkaart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,14,8,.86) 0%, rgba(20,14,8,.24) 46%, transparent 72%);
}
.bestemkaart__tekst { position: absolute; z-index: 2; left: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); bottom: clamp(16px, 2vw, 24px); }
.bestemkaart__naam {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; color: #fff; margin: 0;
}
.bestemkaart__regel { display: block; margin-top: 4px; color: rgba(255,255,255,.78); font-size: .86rem; }
.bestemkaart__prijs {
  position: absolute; z-index: 2; top: clamp(14px, 1.8vw, 20px); right: clamp(14px, 1.8vw, 20px);
  background: rgba(255,255,255,.92); color: #241d16;
  font-family: var(--font-body); font-weight: 600; font-size: .76rem;
  padding: 6px 12px; border-radius: 100px; font-variant-numeric: tabular-nums;
}
/* de vormen van het raster */
.bestemkaart--groot { grid-column: span 7; aspect-ratio: 16 / 11; }
.bestemkaart--hoog  { grid-column: span 5; aspect-ratio: 4 / 5; }
.bestemkaart--derde { grid-column: span 4; aspect-ratio: 1 / 1; }

/* ---- Waarom bij ons ---- */
.waarom2 { padding: clamp(80px, 10vw, 130px) 0; background: var(--surface); }
.waarom2__raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(30px, 5vw, 70px); margin-top: clamp(24px, 3vw, 42px); }
.waarom2__punt { display: grid; grid-template-columns: 3.2rem 1fr; gap: 18px; padding: clamp(24px, 3vw, 32px) 0; border-top: 1px solid var(--line); }
.waarom2__nr {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; color: var(--zand); padding-top: .5em;
}
.waarom2__punt h3 {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text-strong); margin: 0 0 10px;
}
.waarom2__punt p { color: var(--muted); line-height: 1.78; margin: 0; font-size: .97rem; }

/* ---- Kom langs ---- */
.komlangs { padding: clamp(80px, 10vw, 130px) 0; }
.komlangs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.komlangs__beeld { overflow: hidden; border-radius: var(--radius); }
.komlangs__beeld img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.komlangs__lijst { list-style: none; margin: 26px 0 30px; padding: 0; }
.komlangs__lijst li { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .97rem; }
.komlangs__lijst b { color: var(--text-strong); font-weight: 600; min-width: 7.5rem; display: inline-block; }

@media (max-width: 900px) {
  .thero__cijfers { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .bestemkaart--groot, .bestemkaart--hoog, .bestemkaart--derde { grid-column: span 12; aspect-ratio: 4 / 3; }
  .waarom2__raster { grid-template-columns: 1fr; }
  .komlangs__grid { grid-template-columns: 1fr; }
  .thero__acties .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   REISPAGINA — hero over het volle scherm en een dagprogramma
   ========================================================= */
.rhero { position: relative; min-height: min(78svh, 780px); display: flex; align-items: flex-end; overflow: hidden; background: #17120c; }
.rhero__beeld { position: absolute; inset: 0; z-index: 0; }
.rhero__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rhero__waas {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(20,14,8,.92) 0%, rgba(20,14,8,.52) 36%, rgba(20,14,8,.06) 70%, rgba(20,14,8,.34) 100%);
}
.rhero__inhoud { position: relative; z-index: 2; width: 100%; padding: clamp(150px, 17vw, 200px) 0 clamp(34px, 4.5vw, 56px); }
.rhero__terug {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 26px; transition: color .25s;
}
.rhero__terug:hover { color: #fff; }
.rhero__plaats {
  font-family: var(--font-body); font-weight: 600; font-size: .72rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--zand-licht); margin: 0 0 14px;
}
.rhero__titel {
  font-family: var(--font-head); font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.4rem, 6.4vw, 5rem); line-height: 1.0; letter-spacing: -0.03em;
  color: #fff; margin: 0 0 16px; max-width: 18ch;
}
.rhero__sub { color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.65; max-width: 34rem; margin: 0; }

/* balk met de kerngegevens, direct onder de hero */
.rfeiten { background: var(--surface); border-bottom: 1px solid var(--line); }
.rfeiten__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.rfeit { padding: clamp(20px, 2.6vw, 30px) clamp(16px, 2vw, 26px); border-left: 1px solid var(--line); }
.rfeit:first-child { border-left: 0; padding-left: 0; }
.rfeit dt {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
.rfeit dd {
  margin: 0; font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: clamp(1.05rem, 2vw, 1.4rem); color: var(--text-strong); letter-spacing: -0.015em;
}
.rfeit dd small { display: block; font-family: var(--font-body); font-size: .78rem; color: var(--muted); margin-top: 3px; letter-spacing: 0; }

/* dagprogramma */
.programma { padding: clamp(70px, 9vw, 120px) 0 0; }
.dag {
  display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--line);
}
.dag:last-of-type { border-bottom: 1px solid var(--line); }
.dag__nr {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--zand); padding-top: .45em;
}
.dag__titel {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -0.02em;
  color: var(--text-strong); margin: 0 0 9px;
}
.dag__tekst { color: var(--muted); line-height: 1.78; margin: 0; }

/* wel en niet inbegrepen naast elkaar */
.inbeg { padding: clamp(70px, 9vw, 120px) 0; }
.inbeg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.inbeg__kop {
  font-family: var(--font-head); font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text-strong);
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.inbeg__lijst { list-style: none; margin: 0; padding: 0; }
.inbeg__lijst li { display: flex; gap: 12px; padding: 10px 0; color: var(--text); line-height: 1.6; font-size: .98rem; }
.inbeg__ja { color: var(--zand); font-weight: 700; flex: none; }
.inbeg__nee { color: var(--muted); font-weight: 700; flex: none; }
.inbeg__lijst--nee li { color: var(--muted); }

@media (max-width: 860px) {
  .rfeiten__grid { grid-template-columns: 1fr 1fr; }
  .rfeit { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .rfeit:nth-child(-n+2) { border-top: 0; }
  .rfeit:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .dag { grid-template-columns: 1fr; gap: 6px; }
  .inbeg__grid { grid-template-columns: 1fr; }
}