/* Roots & Roads, de aanbodpagina's van Rwanda en Oeganda.
   Gedeelde stijl. Beide landpagina's laden dit bestand, zodat ze niet uit elkaar groeien. */

:root{
  /* Het bospalet, gekozen door Wim op 09-09-2026 na de kleurproef in website/KLEURPROEF.html.

     Waarom het oude palet weg is: terracotta, mosterd en geelcreme zijn de kleuren van rood
     stof, droog gras en acaciahout. Dat is de savanne, en dus Kenia en Tanzania, precies de
     landen die de concurrent verkoopt en wij niet. Bwindi heet Impenetrable Forest en Rwanda
     is het land van duizend heuvels: bergregenwoud, mist en nat blad. Een site die eruitziet
     als elke andere safarisite ondergraaft de claim dat wij twee landen kennen die de anderen
     erbij doen, nog voor er een woord gelezen is.

     Mosterd is vervallen als vijfde kleur. Twee warme accenten naast elkaar nemen de terracotta
     zijn functie af, en terracotta betekent hier uitsluitend "aangeduid". Wat cultuur nodig had
     is een gedempte schorstint die niet roept.

     De namen zijn meeverhuisd: olive heette naar een kleur die er niet meer is.

     Twee tinten zijn na de proef donkerder gezet omdat ze de leesbaarheidsnorm niet haalden
     met cremekleurige tekst erop (WCAG AA, 4,5:1): schors kwam op 4,45 en de mistkleur zelfs
     op 3,24. Ze staan nu op 4,67 en 4,68. De mistkleur is daarmee de kleur van natte rots
     geworden en heet ook zo, want een naam die niet klopt is de volgende die iemand misleidt. */
  --paper:#F2EFE6;         /* lezen: papier van een dagboek, zonder de gele zweem */
  --paper-alt:#E3E2D6;
  --cream-card:#FAF8F2;
  --ink:#1C231C;
  --ink-soft:#4A5347;
  --line: rgba(28,35,28,.16);
  --clay:#B8502C;          /* aangeduid, en niets anders */
  --clay-dark:#943F22;
  --forest:#26382A;        /* doen: nat bos in de schaduw */
  --moss:#5A7052;          /* vult het gat tussen papier en bos */
  --bark:#866B38;          /* was mosterd, nu gedempt zodat het niet met clay vecht */
  --stone:#647175;         /* natte rots onder het bladerdak */
  --radius: 4px;
  --maxw: 1180px;
  --bar-h: 78px;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom: var(--bar-h);
}
/* height:auto erbij (22-09-2026): maak-publiek.py zet op elke foto width en height, zodat de
   pagina niet verspringt tijdens het laden. Zonder height:auto zou een foto die smaller
   getoond wordt dan zijn attribuut, zijn volle hoogte houden en uitrekken. */
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{
  font-family:'Newsreader', serif;
  font-weight:500;
  line-height:1.1;
  margin:0;
  color:var(--ink);
}
.kicker{
  font-family:'Work Sans', sans-serif;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clay-dark);
}
p{margin:0 0 1em 0;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:15px;
  padding:13px 22px;
  border-radius:2px;
  text-decoration:none;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn.solid{ background:var(--clay); border-color:var(--clay); color:#FBF6EA; }
.btn.solid:hover{ background:var(--clay-dark); border-color:var(--clay-dark); }

/* ---------- interne notitiebalk (verdwijnt op de echte site) ---------- */
.dev-note{
  background:#2A241C; color:#E5D9C2; font-size:13px; text-align:center;
  padding:8px 16px;
}
.dev-note b{ color:#E8B27E; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,236,220,.94);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center;
  padding-top:12px; padding-bottom:12px;
  /* breder dan de inhoud eronder: op een groot scherm zit het logo anders
     ver van de rand. de inhoud blijft op --maxw staan */
  max-width:1440px;
}
/* merkteken en woordmerk naast elkaar. de link is zelf de flexbox en de tekst
   zit in één span: zo zijn er precies twee items en kan er niets tussenuit
   vallen. de naam staat bewust alleen als tekst, niet ook nog in de tekening.
   de kleine negatieve marge vangt de transparante rand van de uitsnede op */
.logo{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--ink); margin-left:-4px;
}
.logo .mark{ height:72px; width:auto; display:block; flex:none; }
.logo .wordmark{
  font-family:'Newsreader', serif; font-style:italic; font-weight:500; font-size:22px;
  white-space:nowrap;
}
.logo .wordmark em{ color:var(--clay); font-style:normal; }
@media (max-width:520px){
  .logo{ gap:10px; margin-left:-3px; }
  .logo .mark{ height:54px; }
  .logo .wordmark{ font-size:18px; }
}
/* OP EEN SMAL SCHERM WIJKT HET WOORDMERK (22-09-2026). Sinds de menuknop erbij staat, passen
   merkteken, naam, "Menu" en "Je aanvraag" niet meer naast elkaar op 390 px: de knop schoof
   over de naam en de aanvraagknop liep van het scherm. Het merkteken blijft, de naam staat op
   elke pagina in de voet en in de titel. Onder 600 px, want tussen 520 en 600 was het ook krap
   zodra de teller in de aanvraagknop verschijnt. */
@media (max-width:600px){
  .logo .wordmark{ display:none; }
}
/* de navigatie schuift zelf naar rechts, zodat het zegel er meteen op volgt
   in plaats van dat de drie delen over de balk verspreid raken */
nav.main-nav{ display:flex; gap:28px; align-items:center; margin-left:auto; }

nav.main-nav a{ font-size:14px; font-weight:500; text-decoration:none; color:var(--ink-soft); position:relative; }
nav.main-nav a.current{ color:var(--clay-dark); border-bottom:1px solid var(--clay-dark); padding-bottom:2px; }
nav.main-nav a:hover{ color:var(--ink); }
/* teller naast het andere land in de navigatie */
nav.main-nav .nav-count{
  display:none; margin-left:6px; font-size:12px; font-weight:700;
  background:var(--forest); color:#FBF6EA; border-radius:20px; padding:1px 7px;
}
nav.main-nav .nav-count.on{ display:inline-block; }

/* "Je aanvraag" is geen sectie maar een actie, dus staat het er als knop.
   Blijft ook op gsm staan: het is de weg terug naar wat je verzameld hebt. */
nav.main-nav .nav-request{
  padding:7px 15px; border:1.5px solid var(--ink); border-radius:20px;
  color:var(--ink); font-weight:600;
}
nav.main-nav .nav-request:hover{ background:var(--ink); color:var(--paper); }
nav.main-nav .nav-request.current{
  background:var(--ink); color:var(--paper); border-color:var(--ink); border-bottom-color:var(--ink);
}
nav.main-nav .nav-request .nav-count{ background:var(--clay); }
nav.main-nav .nav-request.current .nav-count{ background:var(--paper); color:var(--ink); }

/* De aanvraagknop blijft op een regel, ook met de teller erin (22-09-2026, screening A7):
   op 390 px sprong het bolletje naar een tweede regel en werd de knop twee keer zo hoog. */
nav.main-nav .nav-request{ white-space:nowrap; }

/* De links zitten in een eigen doos, .nav-links, zodat ze op gsm samen een uitklapmenu
   kunnen worden. Op een breed scherm is die doos onzichtbaar (display:contents): de links
   staan dan gewoon in de rij, met dezelfde tussenruimte als voorheen. */
nav.main-nav .nav-links{ display:contents; }
nav.main-nav .nav-toggle{ display:none; }

/* HET MENU OP GSM (22-09-2026, screening A1). Onder 720 px verdwenen zeven van de acht
   links en bleef alleen "Je aanvraag" over; er was geen menuknop. Wie op een telefoon
   binnenkwam, kon alleen via de voettekst naar Prijs of Contact. Nu staat er een knop
   "Menu" die de links onder de kopbalk uitklapt; reis.js zet de klasse open. */
@media (max-width:720px){
  nav.main-nav{ gap:10px; }
  nav.main-nav .nav-toggle{
    display:inline-flex; align-items:center; gap:8px;
    background:none; border:1.5px solid var(--line); border-radius:20px;
    padding:7px 13px; font-size:14px; font-weight:600; color:var(--ink);
  }
  nav.main-nav .nav-toggle .streepjes{
    display:inline-block; width:16px; height:2px; background:currentColor;
    box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  nav.main-nav .nav-toggle[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  nav.main-nav .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--cream-card); border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(28,35,28,.12);
    padding:6px 0 10px;
  }
  nav.main-nav.open .nav-links{ display:flex; }
  nav.main-nav .nav-links a{
    display:block; padding:13px 24px; font-size:16px;
    border-bottom:1px solid var(--line);
  }
  nav.main-nav .nav-links a:last-child{ border-bottom:none; }
  nav.main-nav .nav-links a.current{ border-bottom:1px solid var(--line); padding-bottom:13px; color:var(--clay-dark); }
  nav.main-nav .nav-links a.current::before{ content:"> "; }
}
@media (max-width:400px){ nav.main-nav .nav-request{ padding:7px 11px; font-size:13px; } }

/* ---------- page hero ---------- */
.page-hero{ position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden; background:#23201a;}
.page-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }

/* PARALLAX OP HET OPENINGSBEELD (20-09-2026). De foto krijgt dertig procent extra hoogte en
   staat vijftien procent hoger dan zijn kader; die speling is wat er te schuiven valt. De
   verschuiving zelf zet reis.js, op de scrollpositie.

   De klasse komt van het script en niet uit de HTML: draait het script niet, dan blijft het
   beeld gewoon staan zoals het altijd stond. */
.page-hero.diepte img,
.hero-big.diepte img{
  height:130%; top:-15%; bottom:auto;
  will-change:transform;
}
/* Op een smal scherm is de hero in een tel voorbij: het effect is er niet en het rekenwerk
   wel. En wie beweging liever niet heeft, krijgt ze hier ook niet. */
@media (max-width:760px){
  .page-hero.diepte img, .hero-big.diepte img{ height:100%; top:0; transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .page-hero.diepte img, .hero-big.diepte img{ height:100%; top:0; transform:none !important; }
}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,12,.1) 0%, rgba(20,17,12,.78) 100%);
}
/* Zijmarge 24 px erbij (22-09-2026, screening A8): deze regel overschreef de zijmarge van .wrap,
   en op gsm stond de titel van drie pagina's tegen het glas. */
.page-hero-content{ position:relative; z-index:2; color:#FBF6EA; padding:52px 24px 40px; }
.page-hero-content .kicker{ color:#E7C8AA; }
.page-hero-content h1{ color:#FBF6EA; font-size:clamp(2.1rem,5vw,3.4rem); margin:12px 0 12px; }
.page-hero-content p{ max-width:52ch; color:#EFE6D3; font-size:16px; margin:0; }

section{ padding:56px 0; }
section.alt{ background:var(--paper-alt); }
.section-head{ max-width:640px; margin-bottom:32px; }
.section-head h1, .section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:8px; }
.section-head p{ color:var(--ink-soft); margin-top:12px; font-size:15.5px; }

/* ---------- stap: hoeveel dagen ---------- */
.days-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.day-opt{
  background:var(--cream-card);
  border:1.5px solid var(--line);
  border-radius:2px;
  padding:12px 20px;
  font-size:15px; font-weight:600; color:var(--ink);
  transition:border-color .16s ease, background .16s ease;
}
.day-opt:hover{ border-color:var(--ink-soft); }
/* GEKOZEN IS BOSGROEN (Wim, 23-09-2026): tot vandaag was een gekozen knop een lichte tint die
   naast de andere niet opviel. Nu gevuld in het bosgroen met cremekleurige tekst (11,6:1) en
   een vinkje ervoor, zodat de keuze ook zonder kleur te zien is. De focusring blijft: buiten
   de knop, in inkt op papier. */
.day-opt[aria-pressed="true"]{ border-color:var(--forest); background:var(--forest); color:#FBF6EA; }
.day-opt[aria-pressed="true"]::before{ content:"\2713 "; }
.day-opt[aria-pressed="true"]:focus-visible,
.drift-opt[aria-pressed="true"]:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.day-custom.gekozen{ border-color:var(--forest); border-width:2px; color:var(--ink); }
.day-custom.gekozen::before{ content:"\2713"; color:var(--forest); font-weight:700; }
.day-custom.gekozen input, .day-custom.gekozen select{ border-bottom-color:var(--forest); }
.day-custom{
  display:flex; align-items:center; gap:8px;
  background:var(--cream-card); border:1.5px solid var(--line); border-radius:2px;
  padding:8px 14px; font-size:14px; color:var(--ink-soft);
}
.day-custom input{
  width:62px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  border:0; border-bottom:1.5px solid var(--line); background:transparent; padding:3px 2px;
  text-align:center;
}
.day-custom input:focus{ outline:none; border-bottom-color:var(--clay); }

/* drie vragen in één stap: dagen, met hoeveel, wanneer. Zelfde knoppen, eigen kop. */
.stap-blok{ margin-top:36px; padding-top:28px; border-top:1px dotted var(--line); }
.stap-blok:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
/* De ruimte onder de titel hoort bij de titel en niet bij de zin eronder (19-09-2026).
   Stond de ruimte op de zin, dan plakten de keuzeknoppen tegen de titel zodra die zin
   geschrapt werd. */
.stap-blok h3{ font-size:1.15rem; margin:0 0 16px; }
.stap-blok p{ color:var(--ink-soft); margin:0 0 20px; font-size:15.5px; max-width:640px; }
/* EEN VOETNOOT STAAT NA DE KEUZEKNOPPEN (19-09-2026, Wim: "plakt tegen de blokjes").
   De regel hierboven is specifieker dan .prijs-voetnoot en nam er de bovenmarge van weg, dus
   stond die zin op nul pixels van de knoppen. Gemeten met website/controleer-witruimte.js:
   0 zonder deze regel, 24 ermee. */
.stap-blok .prijs-voetnoot{ margin-top:24px; margin-bottom:0; }

.day-custom select{
  font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);
  border:0; border-bottom:1.5px solid var(--line); background:transparent; padding:3px 2px;
}
.day-custom select:focus{ outline:none; border-bottom-color:var(--clay); }

/* ---------- waarom kost een reis wat ze kost ---------- */
.kost-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.kost-grid > div{
  background:var(--cream-card); border:1.5px solid var(--line); border-radius:2px;
  padding:14px 16px; font-size:14.5px; line-height:1.55; color:var(--ink-soft);
}
.kost-grid b{ display:block; color:var(--ink); font-size:15px; margin-bottom:4px; }
/* de doorverwijzing onder een kost-grid: de uitleg staat elders, niet nog eens hier */
.kost-meer{ margin:18px 0 0; font-size:15px; }

/* ---------- wat de parkbeheerder vraagt (20-09-2026) ----------
   Staat los van het reisbedrag en in dezelfde crème, want het is lezen en geen actie. De
   post-voor-post-opsomming is het punt: elk bedrag hier is na te kijken in het tarievenboek
   van UWA of het RDB, en dat is het bewijs dat er niets bovenop komt. */
.ov-permits{
  margin-top:14px; padding:16px 18px;
  background:var(--cream-card); border:1.5px solid var(--line); border-radius:2px;
}
.perm-kop{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.perm-lijst{ list-style:none; margin:0; padding:0; }
.perm-lijst li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:6px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft);
}
.perm-lijst li:first-child{ border-top:0; }
.perm-lijst b{ color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.perm-noot{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
/* Wat na het prijs- of permitvak komt, begint aan een nieuwe vraag en hoort niet tegen
   die vakken te plakken (20-09-2026). */
.ov-prijs + .section-head,
.ov-permits + .section-head{ margin-top:40px; }

/* ---------- de treden binnen Luxe (20-09-2026) ----------
   Een tweede keuze die pas verschijnt als het lodgeboek meer dan een trede kan dragen. Zelfde
   knopvorm als het comfortniveau erboven, alleen iets ingesprongen zodat te zien is dat ze
   erbij hoort. */
.trede-box{ margin-top:14px; padding-left:16px; border-left:2px solid var(--line); }
.trede-kop{
  margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft);
}
.trede-opt{
  text-align:left; background:var(--paper); border:1.5px solid var(--line); border-radius:2px;
  padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:border-color .18s ease, background .18s ease;
}
.trede-opt .lvl{ font-weight:700; color:var(--ink); font-size:15px; }
.trede-opt .expect{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }
.trede-opt:hover{ border-color:var(--forest); }
.trede-opt[aria-pressed="true"]{ border-color:var(--forest); background:var(--cream-card); }
.kost-meer a{ color:var(--clay); font-weight:600; text-decoration:none; border-bottom:1.5px solid currentColor; padding-bottom:1px; }
.kost-meer a:hover{ color:var(--forest); }

/* ---------- richtprijzen (referentiereis) ---------- */
.prijs-voetnoot{ color:var(--ink-soft); font-size:14.5px; max-width:640px; margin-top:16px; }

/* De rekenhulp die hier stond (19-09 tot 23-09) is weg: er is nog een rekenhulp, op de
   aanvraag. De uitleg op prijs.html: de knop in de kop en de drie niveaukaarten. */
.section-head .kop-knop{ margin-top:18px; }
.prijs-kop{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-top:8px; }
.prijs-intro{ color:var(--ink-soft); font-size:15.5px; max-width:64ch; margin:10px 0 18px; }
.niveau-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .niveau-grid{ grid-template-columns:1fr; } }
.niveau-kaart{
  background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px;
}
.niveau-kaart b{ display:block; font-family:'Newsreader', serif; font-weight:500; font-size:1.25rem; margin-bottom:6px; }
.niveau-kaart p{ margin:0; color:var(--ink-soft); font-size:15px; }
/* De koersregel (22-09-2026): euro is de hoofdprijs, de dollar staat erbij, en de datum van de
   ECB-koers hoort erbij te staan. reis.js vult elk [data-koers-noot]. */
.koers-noot{ font-size:13px; color:var(--ink-soft); margin:10px 0 0; max-width:64ch; }
/* in een richtprijsknop staat de dollar klein op een tweede regel; op een regel liep de
   knop op 390 px van het scherm (gemeten: 414 px breed) */
.day-opt .usd-klein{ display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:2px; }
.day-opt[aria-pressed="true"] .usd-klein{ color:rgba(251,246,234,.8); }
.nowrap{ white-space:nowrap; }
/* Wims twee boodschappen op de prijspagina (23-09-2026): naast elkaar op een breed scherm,
   onder elkaar op gsm. */
.prijs-uitleg{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; }
@media (max-width:820px){ .prijs-uitleg{ grid-template-columns:1fr; } }
.prijs-uitleg h3{ font-size:1.15rem; margin:0 0 10px; }
.prijs-uitleg p{ margin:0 0 .9em; }
.prijs-uitleg p:last-child{ margin-bottom:0; }
/* de aanvraag: het voorbehoud bij de permits, de samen-regel, het vrije budgetveld */
/* het merkteken bij een tarief dat voor de reisdatum afloopt: klein, geen rood */
.perm-teken{ font-size:11px; margin-left:2px; color:var(--ink-soft); font-weight:600; }
.perm-uitleg{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); }
.practical .praktisch-noot{ margin:8px 0 12px; font-size:12.5px; }
/* de zin op de plaats van het lege permitblok */
.perm-leeg{ max-width:64ch; margin:0 0 30px; font-size:15.5px; color:var(--ink-soft); }
.ov-prijs + .perm-leeg{ margin-top:18px; }
.ov-samen{ max-width:64ch; margin:22px 0 40px; padding-left:14px; border-left:2px solid var(--forest);
  font-size:15.5px; color:var(--ink-soft); }
/* het vrije bedrag in de budgetrij: dezelfde vorm als "of 11 dagen", met een breder veld */
.day-custom.budget-vrij input{ width:11em; text-align:left; font-weight:500; }
@media (max-width:420px){ .day-custom.budget-vrij{ flex-wrap:wrap; } }
.ov-prijs .koers-noot{ color:rgba(242,239,230,.78); }

/* Het prijsvak op de aanvraagpagina (19-09-2026; sinds 23-09 het enige op de site). */
.ov-prijs{
  background:var(--forest); color:var(--paper);
  border-radius:var(--radius); padding:24px 28px; margin-bottom:32px;
}
.ov-prijs[hidden]{ display:none; }
.ov-prijs-keuze{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,239,230,.72); margin:0;
}
/* HET TOTAAL OP DE AANVRAAG (23-09-2026): drie regels met dezelfde noemer, de som groot. */
.ot-regels{ margin:16px 0 0; }
.ot-regel{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:10px 0; border-top:1px solid rgba(242,239,230,.18); margin:0;
}
.ot-regel dt{ font-size:15px; color:rgba(242,239,230,.92); }
.ot-sub{ display:block; font-size:12.5px; color:rgba(242,239,230,.62); margin-top:1px; }
.ot-regel dd{
  margin:0; text-align:right; font-family:'Newsreader', serif; font-size:1.3rem;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ot-regel dd.klein{
  font-family:'Work Sans', sans-serif; font-size:13.5px; white-space:normal;
  color:rgba(242,239,230,.75); max-width:22ch;
}
.ot-usd{ display:block; font-family:'Work Sans', sans-serif; font-size:12.5px; font-weight:400; color:rgba(242,239,230,.72); }
.ot-som{ border-top:2px solid rgba(242,239,230,.55); margin-top:8px; padding-top:16px; }
.ot-som dt{ font-size:16px; font-weight:600; color:var(--paper); }
.ot-som dd{ font-size:clamp(1.7rem,4vw,2.3rem); font-weight:600; }
.ot-som[hidden]{ display:none; }
@media (max-width:560px){
  .ot-regel{ flex-direction:column; align-items:flex-start; gap:2px; }
  .ot-regel dd{ text-align:left; }
}
.ov-permits{ margin-top:18px; }



/* EEN ROUTE DIE ZICH TEKENT (20-09-2026). De gestippelde lijn van de huisstijl, maar dan als
   iets dat gebeurt in plaats van iets dat er staat. Zie de uitleg in reis.js. */
.routelijn{ display:block; width:100%; height:34px; overflow:visible; }
.routelijn path{
  fill:none; stroke:var(--ink-soft); stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:3 9;
  stroke-dashoffset:var(--lengte, 1200);
  opacity:.55;
}
/* De klasse komt van het script: zonder script staat de lijn er gewoon, volledig getekend. */
.routelijn.tekent path{
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1);
}
.routelijn.getekend path{ stroke-dashoffset:0; }
.routelijn .punt{ fill:var(--clay); stroke:none; opacity:0; transition:opacity .5s ease .9s; }
.routelijn.getekend .punt{ opacity:.85; }
@media (prefers-reduced-motion: reduce){
  .routelijn path{ stroke-dashoffset:0; }
  .routelijn .punt{ opacity:.85; }
}

/* ---------- landpagina's: redenen als beeld-tekstblokken ----------
   De verhaalboog: elk blok is beeld naast tekst, om en om gespiegeld, zonder
   carrousel of klik. Een verstopte foto is een dode foto (Wim, 27-08-2026). */
.landblokken{ display:flex; flex-direction:column; gap:clamp(36px,5vw,60px); }
.landblok{ display:grid; grid-template-columns:5fr 4fr; gap:clamp(24px,4vw,48px); align-items:center; }
.landblok .lb-beeld{ margin:0; }
.landblok .lb-beeld img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.landblok.spiegel .lb-beeld{ order:2; }
.landblok h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin-bottom:10px; }
.landblok p{ color:var(--ink-soft); font-size:15.5px; max-width:52ch; }
.landblok p:last-child{ margin-bottom:0; }
.landblok a{ color:var(--clay-dark); font-weight:600; }
.landblok .photo-slot{ aspect-ratio:4/3; }
/* Valt het beeldvak weg omdat de foto er nog niet is, dan krijgt de tekst de volle breedte.
   Zonder deze regel blijft de tweede kolom van het grid als een gat naast de tekst staan
   (19-09-2026, zie de opruiming van de lege kaders in reis.js). */
.landblok.zonder-beeld{ grid-template-columns:1fr; }
@media (max-width:760px){
  .landblok{ grid-template-columns:1fr; gap:14px; }
  .landblok.spiegel .lb-beeld{ order:0; }
}

/* EEN BAND IN PLAATS VAN DRIE PLAATJES (20-09-2026, Wim: "kan dit geen banner van foto's
   worden?"). Ze stonden in de leeskolom met gaten van veertien pixels en ronde hoeken, en dan
   leest het als drie losse beelden. Zonder naden en over de volle breedte is het een adempauze
   tussen twee stukken tekst, en daar zijn ze voor.

   De hoogte staat vast en schaalt mee met het scherm: vierkant zou op een breed scherm een
   band van vijfhonderd pixels hoog geven, en dan is het geen pauze meer maar een onderbreking. */
.fotobanner{ padding:0; }
.fotostrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.fotostrip img{
  width:100%; height:clamp(200px,24vw,360px);
  object-fit:cover; border-radius:0; display:block;
}
@media (max-width:640px){
  .fotostrip{ grid-template-columns:1fr; }
  .fotostrip img{ height:clamp(180px,42vw,260px); }
}

/* de mensen: tekst met één sterk beeld ernaast */
.mensenblok{ display:grid; grid-template-columns:4fr 5fr; gap:clamp(24px,4vw,48px); align-items:start; }
.mensenblok .lb-beeld{ margin:0; }
.mensenblok .lb-beeld img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
@media (max-width:760px){ .mensenblok{ grid-template-columns:1fr; } }
.periode-link{ font-size:14.5px; color:var(--forest); text-decoration:none; border-bottom:1px solid transparent; }
.periode-link:hover{ border-bottom-color:currentColor; }

.days-advice{
  margin-top:20px; padding:16px 20px;
  border-left:3px solid var(--forest);
  background:var(--cream-card);
  font-size:15px; color:var(--ink-soft);
  max-width:62ch;
}
.days-advice[hidden]{ display:none; }
.days-advice b{ color:var(--ink); font-weight:600; }
.days-advice .adv-link{
  display:inline-block; margin-top:8px; font-weight:600; font-size:14px;
  color:var(--clay-dark); text-decoration:none; border-bottom:1px solid currentColor;
}

/* ---------- stap: comfort ---------- */
.comfort-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:820px){ .comfort-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .comfort-grid{ grid-template-columns:1fr; } }
.comfort-opt{
  background:var(--cream-card);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 20px;
  text-align:left;
  display:flex; flex-direction:column; gap:11px;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.comfort-opt:hover{ transform:translateY(-2px); }
.comfort-opt .lvl{
  font-family:'Newsreader', serif; font-size:1.2rem; display:block;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.comfort-opt .desc{ font-size:13.5px; color:var(--ink-soft); display:block; }

/* Wat je mag verwachten per niveau. Elke kaart draagt dezelfde drie punten,
   zodat de niveaus onderling te vergelijken zijn */
.comfort-same{
  max-width:74ch; font-size:14.5px; color:var(--ink-soft);
  margin:0 0 22px; padding-left:14px; border-left:2px solid var(--forest);
}
.comfort-same strong{ color:var(--ink); font-weight:600; }

.comfort-opt .expect{ display:flex; flex-direction:column; gap:7px; }
.comfort-opt .expect span{
  display:block; position:relative; padding-left:13px;
  font-size:13px; line-height:1.45; color:var(--ink-soft);
}
.comfort-opt .expect span::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:1px; background:var(--ink-soft); opacity:.6;
}
.comfort-opt[aria-pressed="true"] .expect span{ color:var(--ink); }
.comfort-opt[aria-pressed="true"]{
  border-color:var(--clay); background:#FBEFE4;
}
.comfort-opt[aria-pressed="true"] .lvl{ color:var(--clay-dark); }
.comfort-opt[aria-pressed="true"] .lvl::before{ content:"✓ "; }

/* uitschieter: een paar nachten anders */
.drift{ margin-top:26px; }
.drift[hidden]{ display:none; }
.drift-q{
  font-size:15px; font-weight:600; color:var(--ink); margin:0 0 4px;
}
/* de toelichting hing op vier pixels van de vraag erboven (gemeten 19-09-2026) */
.drift-why{ font-size:14px; color:var(--ink-soft); margin:10px 0 14px; max-width:60ch; }
.drift-opts{ display:flex; flex-wrap:wrap; gap:10px; }
.drift-opt{
  background:transparent; border:1.5px solid var(--line); border-radius:20px;
  padding:8px 16px; font-size:14px; font-weight:500; color:var(--ink-soft);
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.drift-opt:hover{ border-color:var(--ink-soft); color:var(--ink); }
.drift-opt[aria-pressed="true"]{
  border-color:var(--forest); background:var(--forest); color:#FBF6EA;
}
.drift-opt[aria-pressed="true"]::before{ content:"\2713 "; }

.comfort-readback{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-family:'Newsreader', serif; font-style:italic; font-size:1.15rem;
  color:var(--ink); max-width:60ch;
}
.comfort-readback[hidden]{ display:none; }
.comfort-readback::before{ content:"\""; }
.comfort-readback::after{ content:"\""; }

/* ---------- categorieën ---------- */
.cat-list{ display:grid; gap:20px; }
.cat{
  background:var(--cream-card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  scroll-margin-top:90px; /* de sticky header mag de titel niet afdekken */
}
.cat-head{
  display:grid;
  grid-template-columns:140px 1fr auto;
  align-items:center;
  gap:20px;
  padding:16px 20px;
}
@media (max-width:640px){
  .cat-head{ grid-template-columns:64px 1fr auto; padding:14px; gap:14px; }
}

/* de foto is nu een eigen knop: opent de beeldenreeks */
.cat-thumb{
  width:140px; height:96px; border-radius:3px; overflow:hidden; flex-shrink:0;
  position:relative; padding:0; border:0; background:none; display:block;
}
@media (max-width:640px){ .cat-thumb{ width:64px; height:64px; } }
.cat-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
/* Een staand beeld in een breed kader verliest meer dan de helft van zijn hoogte, en bij
   een midden-uitsnede gaat dat voor de helft van bovenaf. Staat het onderwerp hoog in het
   beeld (een kop, een top), dan snijdt deze klasse vanaf boven. (20-09-2026, Wim: "de
   gorillakop staat er maar half op".) */
img.toon-boven{ object-position:center 18%; }
/* thumbnail waarvoor nog geen foto bestaat */
.cat-thumb.ph{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, #221E18, #221E18 10px, #262119 10px, #262119 20px);
}
.cat-thumb.ph span{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#E8B27E; line-height:1.4;
}
.cat-thumb.ph::after{ content:"Beelden"; }
.cat-thumb::after{
  content:"Beelden";
  position:absolute; inset:auto 0 0 0;
  background:linear-gradient(to top, rgba(20,17,12,.82), rgba(20,17,12,0));
  color:#FBF6EA; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 6px 5px;
  opacity:0; transition:opacity .2s ease;
}
.cat-thumb:hover img, .cat-thumb:focus-visible img{ transform:scale(1.06); }
.cat-thumb:hover::after, .cat-thumb:focus-visible::after{ opacity:1; }
@media (max-width:640px){ .cat-thumb::after{ opacity:1; font-size:9px; padding:10px 2px 3px; } }

.cat-open{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px;
  grid-column:2 / 4;
  background:none; border:0; padding:0; text-align:left; width:100%;
}
@media (max-width:640px){ .cat-open{ gap:10px; } }
.cat-title-block .dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px;
}
.cat-title-block h3{ font-size:1.4rem; display:inline; }
.cat-title-block .teaser{ display:block; color:var(--ink-soft); font-size:14px; margin-top:6px; }
.cat-chev{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft);
  white-space:nowrap;
}
.cat-chev .arrow{
  display:inline-block; width:9px; height:9px; border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(45deg); transition:transform .2s ease;
}
.cat[data-open="true"] .cat-chev .arrow{ transform:rotate(-135deg); }
.cat-count{
  font-size:12px; font-weight:700; color:#fff; background:var(--ink-soft);
  border-radius:20px; padding:2px 8px; min-width:20px; text-align:center;
}
@media (max-width:640px){ .cat-chev .label{ display:none; } }

.cat-panel{
  max-height:0; overflow:hidden; transition:max-height .32s ease;
  border-top:1px solid transparent;
}
.cat[data-open="true"] .cat-panel{ border-top:1px solid var(--line); }
.cat-panel-inner{ padding:26px 20px 30px; display:grid; grid-template-columns:1.5fr 1fr; gap:32px; }
@media (max-width:820px){ .cat-panel-inner{ grid-template-columns:1fr; gap:24px; } }
@media (max-width:640px){ .cat-panel-inner{ padding:20px 14px 26px; } }

.activity{
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 0; border-top:1px solid var(--line);
}
.activity:first-child{ border-top:0; padding-top:0; }
.activity-text h4{ font-size:1.02rem; margin-bottom:4px; }
.activity-text .loc{ font-size:12px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.activity-text p{ font-size:14px; color:var(--ink-soft); margin:4px 0 0; }
.activity-text .meta{ font-size:12.5px; color:var(--ink-soft); opacity:.85; margin:6px 0 0; }

.stamp-btn{
  flex-shrink:0;
  width:46px; height:46px; border-radius:50%;
  border:1.5px dashed var(--ink-soft);
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:19px; line-height:1; color:var(--ink-soft);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  position:relative;
}
/* EEN WOORD ONDER DE KNOP (20-09-2026, Wim: het plusje alleen was niet duidelijk). Hetzelfde
   woord als de telling onderaan, zodat knop en teller elkaar uitleggen. Na het stempelen
   wordt het "gezet": de knop vertelt dan wat er gebeurd is. */
.stamp-btn::after{
  content:"kies";
  position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%);
  font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint, var(--ink-soft)); white-space:nowrap;
}
.stamp-btn[aria-pressed="true"]::after{
  content:"gekozen";
  transform:translateX(-50%) rotate(8deg);
}
.stamp-btn:hover{ border-color:var(--ink); color:var(--ink); }
.stamp-btn[aria-pressed="true"]{
  border-style:solid; color:#FBF6EA;
  transform:rotate(-8deg) scale(1.04);
}
@keyframes stampPress{
  0%{ transform:rotate(0deg) scale(1); }
  45%{ transform:rotate(-14deg) scale(1.22); }
  100%{ transform:rotate(-8deg) scale(1.04); }
}
.stamp-btn.just-stamped{ animation: stampPress .32s ease; }

.practical{
  background:var(--paper-alt); border-radius:3px; padding:20px 22px; align-self:start;
}
.practical h4{
  font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);
  margin-bottom:14px; font-family:'Work Sans', sans-serif; font-weight:700;
}
.practical dl{ margin:0; }
.practical dt{ font-size:12.5px; font-weight:700; color:var(--ink); margin-top:12px; }
.practical dt:first-child{ margin-top:0; }
.practical dd{ margin:2px 0 0; font-size:13.5px; color:var(--ink-soft); }
.practical .see-images{
  display:inline-block; margin-top:16px; font-size:13.5px; font-weight:600;
  color:var(--clay-dark); background:none; border:0; padding:0;
  border-bottom:1px solid currentColor;
}

/* accentkleuren per categorie */
.cat[data-cat="primates"] .cat-title-block .dot{ background:var(--clay); }
.cat[data-cat="safari"] .cat-title-block .dot{ background:var(--moss); }
.cat[data-cat="cultuur"] .cat-title-block .dot{ background:var(--bark); }
.cat[data-cat="avontuur"] .cat-title-block .dot{ background:var(--stone); }
.cat[data-cat="primates"] .stamp-btn[aria-pressed="true"]{ background:var(--clay); border-color:var(--clay); }
.cat[data-cat="safari"] .stamp-btn[aria-pressed="true"]{ background:var(--moss); border-color:var(--moss); }
.cat[data-cat="cultuur"] .stamp-btn[aria-pressed="true"]{ background:var(--bark); border-color:var(--bark); }
.cat[data-cat="avontuur"] .stamp-btn[aria-pressed="true"]{ background:var(--stone); border-color:var(--stone); }
.cat[data-cat="primates"] .cat-count{ background:var(--clay); }
.cat[data-cat="safari"] .cat-count{ background:var(--moss); }
.cat[data-cat="cultuur"] .cat-count{ background:var(--bark); }
.cat[data-cat="avontuur"] .cat-count{ background:var(--stone); }

/* categorie waarvan de inhoud nog ontbreekt */
.cat.todo{ border-style:dashed; background:transparent; }
.cat.todo .cat-head{ grid-template-columns:1fr; }
.cat.todo .todo-body{ padding:0 20px 22px; font-size:14px; color:var(--ink-soft); max-width:70ch; }
.cat.todo .todo-body strong{ color:var(--ink); }

/* ---------- beeldenreeks (dialog) ---------- */
.story-modal{
  border:0; padding:0; background:var(--cream-card); color:var(--ink);
  width:min(1040px, 94vw); max-width:94vw;
  max-height:92vh; overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(20,17,12,.6);
}
.story-modal::backdrop{ background:rgba(20,17,12,.86); }
.sm-inner{ display:flex; flex-direction:column; max-height:92vh; overflow-y:auto; }

.sm-stage{
  position:relative; background:#17140F; aspect-ratio:16/9; width:100%;
  flex-shrink:0;
}
@media (max-width:640px){ .sm-stage{ aspect-ratio:4/3; } }
.slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden; transition:opacity .35s ease;
}
.slide.on{ opacity:1; visibility:visible; }
.slide img{ width:100%; height:100%; object-fit:cover; }

/* plaatshouder = tegelijk de brief voor Freia: welke foto hier nog moet komen */
.slide.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:32px;
  background:repeating-linear-gradient(45deg, #221E18, #221E18 14px, #262119 14px, #262119 28px);
  color:#C9BCA3;
}
.slide.placeholder .ph-label{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#E8B27E;
}
.slide.placeholder .ph-wish{
  font-family:'Newsreader', serif; font-style:italic; font-size:clamp(1.05rem,2.4vw,1.5rem);
  max-width:34ch; line-height:1.35; color:#F0E5D2;
}
.slide.placeholder .ph-spec{ font-size:12.5px; color:#9C8F79; }

.slide-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:56px 28px 22px;
  background:linear-gradient(to top, rgba(15,13,9,.9), rgba(15,13,9,0));
  color:#F3EBDA;
  font-family:'Newsreader', serif; font-style:italic;
  font-size:clamp(1.05rem,2.2vw,1.45rem); line-height:1.35;
}
.slide.placeholder .slide-caption{ display:none; }

.sm-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(20,17,12,.5);
  color:#F3EBDA; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease;
}
.sm-nav:hover{ background:rgba(20,17,12,.85); }
.sm-prev{ left:14px; }
.sm-next{ right:14px; }

.sm-dots{
  position:absolute; top:16px; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:6px;
}
.sm-dot{
  width:26px; height:3px; border-radius:2px; border:0; padding:0;
  background:rgba(255,255,255,.32);
  transition:background .2s ease;
}
.sm-dot.on{ background:#E8B27E; }

.sm-close{
  position:absolute; top:14px; right:14px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(20,17,12,.55);
  color:#F3EBDA; font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.sm-close:hover{ background:rgba(20,17,12,.9); }

.sm-body{ padding:30px 34px 34px; }
@media (max-width:640px){ .sm-body{ padding:24px 20px 28px; } }
.sm-body .kicker{ display:block; margin-bottom:10px; }
.sm-body h3{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:14px; }
.sm-body p{ color:var(--ink-soft); font-size:15.5px; max-width:64ch; }
.sm-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- uitnodiging naar het andere land ---------- */
/* olijfgroen om dezelfde reden als .next-step: dit blok sluit de aanbodpagina's
   af en raakt de footer, dus het mag niet dezelfde kleur hebben */
.cross{
  background:var(--forest); color:#F3EBDA; padding:60px 0;
}
/* Drie kolommen sinds 20-09: het land waarheen de uitnodiging wijst, krijgt een gezicht.
   Het blok blijft bosgroen (doen), het beeld is klein en rond zodat de knop de baas blijft. */
.cross .wrap{ display:grid; grid-template-columns:auto 1.4fr auto; gap:36px; align-items:center; }
.cross-beeld{ margin:0; }
.cross-beeld img{
  width:150px; height:150px; object-fit:cover; border-radius:50%;
  border:3px solid rgba(243,235,218,.35); display:block;
}
@media (max-width:820px){
  .cross .wrap{ grid-template-columns:1fr; gap:24px; }
  .cross-beeld img{ width:110px; height:110px; }
}
.cross .kicker{ color:#E8B27E; }
.cross h2{ color:#FBF6EA; font-size:clamp(1.6rem,3vw,2.2rem); margin:10px 0 12px; }
.cross p{ color:#DFE4D1; font-size:15.5px; max-width:56ch; margin:0; }
.cross p a{ color:#F0C79C; font-weight:600; }
.cross .btn{ border-color:#F3EBDA; color:#F3EBDA; white-space:nowrap; }
.cross .btn:hover{ background:#F3EBDA; color:var(--forest); }
/* de doorreisknop is dezelfde actie als op de landenpagina's, dus ook gevuld */
.cross .btn.solid{ background:var(--clay); border-color:var(--clay); color:#FBF6EA; }
.cross .btn.solid:hover{ background:var(--clay-dark); border-color:var(--clay-dark); color:#FBF6EA; }

/* ---------- journaalbalk ---------- */
.journal-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#211D16; color:#F3EBDA;
  border-top:1px solid rgba(255,255,255,.08);
}
.journal-bar .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:14px; padding-bottom:14px; min-height:var(--bar-h);
}
.jb-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.jb-count{
  font-family:'Newsreader', serif; font-style:italic; font-size:1.15rem; white-space:nowrap; color:#F3EBDA;
}
.jb-count b{ font-style:normal; color:#E8B27E; }
.jb-count .split{ font-style:normal; font-family:'Work Sans',sans-serif; font-size:12.5px; color:#9C8F79; display:block; }
.jb-chips{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin;
}
.jb-chip{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:6px 8px 6px 12px; font-size:12.5px; white-space:nowrap;
}
.jb-chip .flag{ font-size:12px; color:#9C8F79; text-transform:uppercase; letter-spacing:.06em; }
.jb-chip button{
  background:none; border:0; color:#F3EBDA; opacity:.7; font-size:14px; line-height:1; padding:2px;
}
.jb-chip button:hover{ opacity:1; }
.jb-empty{ font-size:14px; color:#B8AD95; }
.jb-cta{ flex-shrink:0; }
.jb-cta .btn{ border-color:#F3EBDA; color:#F3EBDA; }
.jb-cta .btn.solid{ background:var(--clay); border-color:var(--clay); color:#FBF6EA; }
.jb-cta .btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

@media (max-width:720px){
  .journal-bar .wrap{ flex-direction:column; align-items:stretch; gap:10px; padding-top:12px; padding-bottom:12px; }
  .jb-left{ order:1; }
  .jb-cta{ order:2; }
  .jb-cta .btn{ width:100%; justify-content:center; }
}

/* ---------- overzichtsstap ---------- */
body.no-bar{ padding-bottom:0; }
body.no-bar footer{ margin-bottom:0; }

.ov-top{ padding:64px 0 40px; }
.ov-top h1{ font-size:clamp(2rem,4.6vw,3rem); margin:12px 0 16px; }
.ov-lede{ color:var(--ink-soft); font-size:16.5px; max-width:58ch; margin:0; }

.ov-list{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:820px){ .ov-list{ grid-template-columns:1fr; } }

.ov-group{
  background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px 20px;
  display:flex; flex-direction:column; gap:14px;
}
.ov-group.empty{ background:transparent; border-style:dashed; }

.ov-group-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.ov-group-head h3{ font-size:1.35rem; }
.ov-n{ font-size:12.5px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }

.ov-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.ov-items li{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
  font-size:15px;
}
.ov-items li:last-child{ border-bottom:0; }
.ov-rm{
  flex:none; background:none; border:0; padding:2px 0;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.ov-rm:hover{ color:var(--clay-dark); border-bottom-color:currentColor; }

.ov-back{
  font-size:14px; font-weight:600; color:var(--clay-dark);
  text-decoration:none; border-bottom:1px solid transparent; align-self:flex-start;
}
.ov-back:hover{ border-bottom-color:currentColor; }

.ov-empty{
  margin-top:24px; padding:20px 22px;
  border-left:3px solid var(--bark); background:var(--cream-card);
  color:var(--ink-soft); font-size:15px; max-width:62ch;
}

.ov-send{ background:#211D16; color:#F3EBDA; text-align:center; }
.ov-send h2{ color:#FBF6EA; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px; }
.ov-send p{ color:#CFC3AC; font-size:15.5px; max-width:52ch; margin:0 auto 24px; }
.ov-send .btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

/* Naam en adres bij de aanvraag (22-09-2026). Zolang de knop een mailto opende, kwam de
   aanvraag uit het mailprogramma van de bezoeker en stond zijn adres er vanzelf op. Nu de
   server ze verstuurt, staat er niemand meer bij: zonder deze twee velden komt er een
   aanvraag binnen waar niet op geantwoord kan worden. Het vak staat boven de knop en niet
   eronder, want het is een stap in dezelfde handeling. */
.ov-velden{ max-width:32rem; margin:0 auto 26px; text-align:left; }
.ov-velden label{ display:block; font-size:13px; font-weight:600; color:#E6DCC6; margin-bottom:5px; }
.ov-velden .field{ background:#FBF6EA; border-color:#4A4235; }
.ov-velden .field:focus{ border-color:var(--clay); }
.ov-privacy{ font-size:13.5px; color:#A79B84; margin:22px auto 0; }

/* ---------- Over ons ---------- */
.story{ max-width:36rem; margin:0 auto; display:flex; flex-direction:column; gap:52px; }

/* De feitenstrip leest snel en toont bekwaamheid zonder het te beweren */
.facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
@media (max-width:760px){ .facts{ grid-template-columns:1fr 1fr; } }
.fact{ padding:20px 22px; border-left:1px solid var(--line); }
.fact:first-child{ border-left:0; }
@media (max-width:760px){
  .fact:nth-child(odd){ border-left:0; }
  .fact:nth-child(n+3){ border-top:1px solid var(--line); }
}
.fact .n{
  display:block; font-family:'Newsreader', serif; font-size:1.75rem;
  line-height:1.1; color:var(--clay-dark); margin-bottom:5px;
}
.fact .t{ display:block; font-size:13.5px; color:var(--ink-soft); line-height:1.45; }


/* "Hoe we werken" bestaat uit drie korte punten in plaats van drie secties proza */
.how{ display:flex; flex-direction:column; gap:0; margin:0; }
.how > div{ padding:20px 0; border-top:1px solid var(--line); }
.how > div:first-child{ border-top:0; padding-top:6px; }
.how dt{
  font-family:'Newsreader', serif; font-size:1.15rem; color:var(--ink); margin-bottom:6px;
}
.how dd{ margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.65; }

.story-block{ display:flex; flex-direction:column; gap:16px; }

.story-block h2{
  font-size:clamp(1.45rem,3vw,1.85rem);
  color:var(--ink);
  text-wrap:balance;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.story-block p{ margin:0; font-size:17px; line-height:1.75; color:var(--ink-soft); }
.story-block p.first{ color:var(--ink); font-size:18.5px; }

/* de openingszin van de pagina, groter gezet */
.story-open{
  font-family:'Newsreader', serif; font-style:italic;
  font-size:clamp(1.25rem,2.8vw,1.6rem); line-height:1.45;
  color:var(--ink); margin:0; text-wrap:balance;
}

/* wat nog van Wim en Freia moet komen */
.needs{
  background:var(--paper-alt); border:1px dashed var(--ink-soft);
  padding:16px 18px; font-size:14px; line-height:1.6; color:var(--ink-soft);
  margin:0;
}
.needs b{ color:var(--ink); display:block; margin-bottom:4px; font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; }

.story-baseline{
  font-family:'Newsreader', serif; font-style:italic;
  font-size:clamp(1.3rem,3vw,1.7rem); color:var(--clay-dark);
  margin:8px 0 0; text-wrap:balance;
}
.signoff{
  font-family:'Newsreader', serif; font-size:1.1rem; color:var(--ink-soft); margin:0;
}

/* een echt beeld in de verhaalblokken van Over ons, op de plek waar eerst een
   plaatshouder stond (eerste eigen beelden geleverd op 29-08-2026) */
.story-beeld{ margin:26px 0 0; }
.story-beeld img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius); display:block;
}

/* plaatshouder voor een foto die er nog niet is */
.photo-slot{
  aspect-ratio:3/2; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:28px;
  background:repeating-linear-gradient(45deg, #221E18, #221E18 14px, #262119 14px, #262119 28px);
  color:#C9BCA3; border-radius:var(--radius);
}
.photo-slot .ph-label{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#E8B27E;
}
.photo-slot .ph-wish{
  font-family:'Newsreader', serif; font-style:italic;
  font-size:clamp(1rem,2.2vw,1.3rem); max-width:32ch; line-height:1.4; color:#F0E5D2;
}

/* olijfgroen en niet hetzelfde bijna-zwart als de footer: anders lopen de twee
   in elkaar over tot een blok van een halve schermhoogte, en leest de oproep
   als behang in plaats van als uitnodiging */
.next-step{ background:var(--forest); color:#F3EBDA; text-align:center; }
.next-step h2{ color:#FBF6EA; font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px; }
.next-step p{ color:#DFE4D1; font-size:15.5px; max-width:50ch; margin:0 auto 24px; }
.next-step .btn{ border-color:#F3EBDA; color:#F3EBDA; }
.next-step .btn:hover{ background:#F3EBDA; color:var(--forest); }
/* knoppen naar het aanbod zijn overal gevuld terracotta, ook op de olijfgroene afsluiters */
.next-step .btn.solid{ background:var(--clay); border-color:var(--clay); color:#FBF6EA; }
.next-step .btn.solid:hover{ background:var(--clay-dark); border-color:var(--clay-dark); color:#FBF6EA; }
.next-step .btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- landpagina's: het land zelf ---------- */

/* Een hero zonder foto krijgt dezelfde plaatshouder-taal als de beeldenreeksen,
   zodat meteen zichtbaar is welk beeld hier nog moet komen */
.page-hero.ph{
  background:repeating-linear-gradient(45deg, #221E18, #221E18 14px, #262119 14px, #262119 28px);
}
.page-hero.ph::after{
  background:linear-gradient(180deg, rgba(20,17,12,0) 0%, rgba(20,17,12,.6) 100%);
}
.page-hero .ph-note{
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding:10px 24px; text-align:center;
  background:rgba(20,17,12,.55);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#E8B27E;
}
.page-hero .ph-note span{
  display:block; letter-spacing:.02em; text-transform:none; font-weight:500; font-size:12.5px;
  color:#C9BCA3; margin-top:3px;
}

/* Het land en het aanbod zijn twee kanten van dezelfde bestemming.
   Bewust vormgegeven als een schakelaar en niet als een kruimelpad:
   uit de eerste versie bleek dat bezoekers niet zagen dat je hier kon wisselen. */
.land-tabs .wrap{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding-top:20px; padding-bottom:20px;
}
.lt-label{
  margin:0; font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
}
.land-tabs .lt-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0;
  width:100%; max-width:680px;
  background:var(--cream-card); border:1px solid var(--line); border-radius:4px;
  overflow:hidden;
}
.land-tabs a{
  display:flex; flex-direction:column; gap:3px;
  text-decoration:none; color:var(--ink-soft);
  padding:14px 20px; white-space:normal;
  transition:background .16s ease, color .16s ease;
}
.land-tabs a + a{ border-left:1px solid var(--line); }
.land-tabs a .lt-t{ font-weight:700; font-size:15.5px; color:var(--ink); }
.land-tabs a .lt-s{ font-size:13px; line-height:1.4; }
.land-tabs a:hover{ background:var(--paper-alt); }
.land-tabs a.current{ background:var(--ink); }
.land-tabs a.current .lt-t{ color:var(--paper); }
.land-tabs a.current .lt-s{ color:rgba(244,236,220,.75); }
@media (max-width:560px){
  .land-tabs .lt-switch{ grid-template-columns:1fr; }
  .land-tabs a + a{ border-left:0; border-top:1px solid var(--line); }
}

/* De redenen per land als brede donkere banner. De pagina is verder papierkleurig,
   dus dit blok onderbreekt het ritme en leest als één geheel in plaats van als lijst. */
.reasons-band{ background:#211D16; color:#F3EBDA; padding:64px 0; }
.reasons-band .kicker{ color:#E8B27E; }
.reasons-band h2{ color:#FBF6EA; }
.reasons-band .section-head{ margin-bottom:40px; }
.reasons-band .section-head p{ color:#CFC3AC; }
.reasons-band .story-open{ color:#F3EBDA; }

/* kop en pijlen op één lijn */
.reasons-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:34px;
}
.reasons-head .section-head{ margin-bottom:0; }
.reasons-nav{ display:flex; gap:10px; flex:none; }
@media (max-width:760px){ .reasons-nav{ display:none; } }
.rn-btn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:transparent;
  color:#F3EBDA; font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, opacity .18s ease;
}
.rn-btn:hover{ background:rgba(255,255,255,.12); }
.rn-btn[disabled]{ opacity:.28; cursor:default; }
.rn-btn[disabled]:hover{ background:transparent; }

/* de kaarten zelf: horizontaal doorschuiven, met de volgende half in beeld
   zodat zichtbaar is dat er meer staat */
.reasons{
  display:flex; gap:20px; margin:0; counter-reset:reason;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin; padding-bottom:16px;
}
.reasons > div{
  counter-increment:reason;
  flex:0 0 320px; scroll-snap-align:start;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:24px 26px 26px;
}
@media (max-width:560px){ .reasons > div{ flex-basis:82%; } }
.reasons > div::before{
  content:counter(reason, decimal-leading-zero);
  display:block;
  font-family:'Newsreader', serif; font-size:2rem; line-height:1;
  color:#E8B27E; margin-bottom:14px;
}
.reasons dt{
  font-family:'Newsreader', serif; font-size:1.25rem; line-height:1.2;
  color:#FBF6EA; margin-bottom:9px;
}
.reasons dd{ margin:0; font-size:14.5px; line-height:1.65; color:#CFC3AC; }
.reasons dd a{ color:#E8B27E; }

/* twee of drie kaarten naast elkaar */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:820px){
  .duo, .trio{ grid-template-columns:1fr; }
}
.card{
  background:var(--cream-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px;
}
.card h3{ font-size:1.3rem; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.card .when{ font-size:12.5px; font-weight:600; color:var(--clay-dark); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:10px; }
.card p{ font-size:15px; color:var(--ink-soft); margin:0 0 .8em; }
.card p:last-child{ margin-bottom:0; }
.card ul{ margin:0; padding-left:18px; font-size:15px; color:var(--ink-soft); }
.card li{ margin-bottom:6px; }
.card li:last-child{ margin-bottom:0; }

/* een sprong naar een kop mag niet onder de vaste balk verdwijnen */
h2[id], h3[id]{ scroll-margin-top:90px; }

/* het blok over de reisduur, met de stap naar het aanbod ernaast:
   wie tot hier leest, weet genoeg over de landen en wil kiezen */
.with-cta{
  display:grid; grid-template-columns:minmax(0,auto) auto;
  justify-content:start; align-items:center; gap:40px;
}
@media (max-width:900px){
  .with-cta{ grid-template-columns:1fr; justify-content:stretch; align-items:start; gap:24px; }
}
.cta-stack{ display:flex; flex-direction:column; gap:12px; }
.cta-stack .btn{ justify-content:center; }
.cta-stack .cta-label{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 2px;
}

/* een verwijzing en geen sectie: onderwerpen die voor beide landen gelden
   staan op één plek, de landenpagina's wijzen er enkel naartoe */
.pointer{
  margin:0; max-width:64ch;
  font-size:15.5px; color:var(--ink-soft);
  padding-left:16px; border-left:2px solid var(--clay);
}
.pointer a{ color:var(--clay-dark); font-weight:600; }

/* een blok dat iets toegeeft in plaats van iets belooft */
.note-block{
  border-left:3px solid var(--clay); background:var(--cream-card);
  padding:22px 26px; max-width:64ch;
}
.note-block h3{ font-size:1.3rem; margin-bottom:12px; }
.note-block p{ font-size:15.5px; color:var(--ink-soft); margin:0 0 .8em; }
.note-block p:last-child{ margin:0; }
.note-block strong{ color:var(--ink); font-weight:600; }
.note-block a{ color:var(--clay-dark); font-weight:600; }

/* beste reisperiode per maand */
.months{ display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin-top:8px; }
@media (max-width:820px){ .months{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:420px){ .months{ grid-template-columns:repeat(4,1fr); } }
.month{
  text-align:center; padding:10px 2px; border-radius:2px;
  background:var(--cream-card); border:1px solid var(--line);
}
.month .m{ display:block; font-family:'Newsreader', serif; font-size:1rem; color:var(--ink); }
.month .r{ display:block; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
.month[data-rating="top"]{ background:var(--forest); border-color:var(--forest); }
.month[data-rating="top"] .m, .month[data-rating="top"] .r{ color:#FBF6EA; }
.month[data-rating="goed"]{ background:#DBE0CD; border-color:#C4CBB0; }
.month[data-rating="rustig"]{ background:var(--paper-alt); }
.months-legend{ font-size:13.5px; color:var(--ink-soft); margin:14px 0 0; }

/* ---------- contact ---------- */

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

.contact-list{ margin:0; }
.contact-list dt{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:20px;
}
.contact-list dt:first-child{ margin-top:0; }
.contact-list dd{ margin:5px 0 0; font-size:16px; color:var(--ink); }
.contact-list dd a{ color:var(--clay-dark); }

/* Nog in te vullen door Wim en Freia. Bewust opvallend, want dit mag niet stil blijven staan */
.tofill{
  display:inline-block;
  font-size:13px; font-weight:600; color:#8A5A2B;
  background:#F6E6CE; border:1px dashed #C89A5E; border-radius:2px;
  padding:2px 9px;
}

.form-grid{ display:grid; gap:16px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .row2{ grid-template-columns:1fr; } }
.form-grid label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.form-grid label .opt{ font-weight:500; color:var(--ink-soft); }
.field{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--cream-card); border:1.5px solid var(--line); border-radius:2px;
  padding:11px 13px;
}
.field:focus{ outline:none; border-color:var(--clay); }
textarea.field{ min-height:130px; resize:vertical; }
.form-foot{ font-size:13.5px; color:var(--ink-soft); margin:0; }

/* Het lokvakje tegen spamrobots (22-09-2026). Het staat buiten beeld in plaats van op
   display:none, want een robot die de stijl leest, slaat een verborgen veld over en trapt er
   dan niet in. Zo blijft het veld voor hem gewoon een veld dat "website" heet. Een bezoeker
   ziet het niet staan en komt er met de tabtoets niet in; zie verstuur.php. */
.lokvak{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- veelgestelde vragen ---------- */

.faq{ max-width:74ch; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:18px 0;
  font-family:'Newsreader', serif; font-size:1.15rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none;
  font-family:'Work Sans', sans-serif; font-size:20px; font-weight:500; color:var(--ink-soft);
}
.faq details[open] summary::after{ content:"-"; }
.faq .a{ padding:0 0 22px; font-size:15.5px; color:var(--ink-soft); max-width:66ch; }
.faq .a p{ margin:0 0 .8em; }
.faq .a p:last-child{ margin:0; }
.faq .a ul{ margin:0 0 .8em; padding-left:20px; }
.faq .a ul:last-child{ margin:0; }
.faq .a li{ margin:0 0 .35em; }
.faq .a a{ color:var(--clay-dark); }

footer{ background:#211D16; color:#D9CFBB; padding:44px 0 24px; margin-bottom:var(--bar-h); }
footer a{ text-decoration:none; color:#D9CFBB; }
footer a:hover{ color:#E8B27E; }

/* drie kolommen: het merk, en twee reeksen links. de onderste balk is ook een
   .wrap maar geen kolommenrij, vandaar de uitzondering */
footer .wrap:not(.foot-bottom){
  display:grid; grid-template-columns:1.5fr 1fr 1.1fr; gap:44px; align-items:start;
}
@media (max-width:820px){
  footer .wrap:not(.foot-bottom){ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:520px){
  footer .wrap:not(.foot-bottom){ grid-template-columns:1fr; gap:26px; }
}

footer h5{
  font-family:'Work Sans', sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#9C8F79; margin:0 0 14px;
}
/* elke link op zijn eigen regel; zonder dit lopen ze aan elkaar */
footer .flinks{ display:flex; flex-direction:column; gap:9px; align-items:start; }
footer .flinks a{ font-size:14.5px; }
footer p{ font-size:14.5px; color:#B8AD95; margin:0; }

/* sociale kanalen als iconen. de svg's staan in de pagina zelf en volgen met
   currentColor de tekstkleur, zodat er niets extern geladen hoeft te worden */
footer .socials{ display:flex; gap:12px; margin-top:20px; }
footer .socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); color:#D9CFBB;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
footer .socials a:hover{ background:#E8B27E; border-color:#E8B27E; color:#211D16; }
footer .socials svg{ width:18px; height:18px; display:block; }
/* nog geen adres bekend: zichtbaar onaf, zodat het niet zo online gaat */
footer .socials a.todo{ border-style:dashed; opacity:.45; }

/* in de footer staat het volledige zegel: daar is plaats, en op deze maat is
   het woordmerk in de tekening leesbaar, dus er hoeft geen tekst naast */
footer .logo{ margin-left:0; }
footer .logo .mark{ height:96px; }
@media (max-width:520px){ footer .logo .mark{ height:72px; } }

footer .foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px;
  margin-top:40px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:13px; color:#8F8470;
}
/* de twee regels blijven heel: is er te weinig plaats, dan gaan ze onder
   elkaar staan in plaats van dat de zin midden in een woordgroep breekt */
footer .foot-bottom span{ white-space:nowrap; }
@media (max-width:720px){
  footer .foot-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  footer .foot-bottom span{ white-space:normal; }
}