/* =========================================================
   Wereldkaart en werelddeelpagina's
   Bouwt voort op style.css: dezelfde kleuren, letters en maten.
   De kaarten zijn statische svg in de pagina, dus ze staan er meteen,
   ook zonder JavaScript. JavaScript doet alleen het zijpaneel.
   ========================================================= */

.kaartpagina{background:var(--inkt)}
/* de bovenbalk staat vast, dus de inhoud begint eronder */
.kaartmain{padding-top:clamp(96px,12vh,136px)}

.kruimels{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zachter);
}
/* Het kruimelpad was 29px hoog. Op een telefoon wordt dat een raakvlak van
   40px zonder dat de regel er anders uitziet. */
.kruimels a{color:var(--zacht);text-decoration:none;padding-block:5px}
@media(max-width:899px){
  .kruimels a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
.kruimels a:hover{color:var(--goud-licht)}
.kruimels [aria-current]{color:var(--goud)}

/* iets kleiner dan op de homepagina: hier is de kaart de hoofdpersoon en die
   moet niet onder de vouw beginnen */
.kaartkop h1{margin:14px 0 0;color:var(--tekst);text-wrap:balance;font-size:clamp(34px,4.6vw,60px)}
.kaartkop .lood{margin-top:20px;max-width:62ch}

/* ---------------- de wereldkaart ---------------- */
.kaartveld{margin-top:clamp(30px,5vh,56px)}
.wereldsvg,.continentsvg{
  display:block;width:100%;height:auto;
  /* de kaart mag nooit hoger worden dan het scherm, anders scrol je
     halverwege een werelddeel */
  max-height:min(74vh,760px);
}
.wereldsvg{max-height:min(70vh,640px);overflow:visible}
/* De werelddeelkaart MOET klippen. De landen zijn met opzet ruimer geknipt dan
   het kader, en zodra je inzoomt valt de rest van het continent buiten de
   viewBox. Met overflow:visible tekende de browser dat gewoon door, dwars over
   de kop, de knoppen en de landenlijst heen. */
.continentsvg{overflow:hidden}

.wd{cursor:pointer}
.wd-vlak{
  fill:rgba(201,164,100,.13);
  stroke:rgba(230,206,155,.42);
  stroke-width:.7;stroke-linejoin:round;
  transition:fill .45s cubic-bezier(.22,1,.36,1),stroke .45s,stroke-width .45s;
}
.wd-naam{
  fill:var(--zand);font-family:"Jakarta",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-anchor:middle;
  paint-order:stroke;stroke:rgba(11,10,9,.85);stroke-width:3.5px;stroke-linejoin:round;
  pointer-events:none;transition:fill .45s;
}
/* de grenzen lichten op zodra je erboven komt: dat is het hele idee. Met
   kleur en een dikkere rand, zonder gloed (Quinten, 17-10-2026). */
.wd:hover .wd-vlak,.wd:focus-visible .wd-vlak,.wd.aan .wd-vlak{
  fill:rgba(201,164,100,.26);
  stroke:var(--goud-licht);
  stroke-width:1.6;
}
.wd:hover .wd-naam,.wd:focus-visible .wd-naam,.wd.aan .wd-naam{fill:var(--goud-licht)}
.wd:focus{outline:none}
.wd:focus-visible .wd-vlak{stroke-dasharray:none}

.kaartbron{margin:18px 0 0;font-size:11px;letter-spacing:.06em;color:rgba(240,231,220,.34)}

/* ---------------- lijst met werelddelen ---------------- */
.wd-lijst-blok{margin-top:clamp(48px,7vh,86px)}
.wd-lijst-kop,.landenlijst-kop{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zachter);margin:0 0 22px;
}
.wd-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.wd-lijst a{
  display:block;padding:20px 22px;text-decoration:none;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);background:rgba(255,255,255,.02);
  transition:border-color .35s,background-color .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.wd-lijst a:hover{border-color:rgba(201,164,100,.55);background:rgba(201,164,100,.07);transform:translateY(-2px)}
.wd-lijst b{display:block;font-family:"Cormorant",serif;font-weight:400;font-size:23px;color:var(--tekst)}
.wd-lijst span{display:block;margin-top:6px;font-size:13.5px;color:var(--zachter);line-height:1.6}

/* ---------------- werelddeelpagina ---------------- */
/* De kaart krijgt de volle breedte en het paneel schuift er rechts overheen
   zodra je een land kiest. Zo blijft het werelddeel zo groot mogelijk, en dat
   is precies waar je op moet kunnen mikken. */
.kaartblok{margin-top:clamp(28px,4vh,48px);position:relative}

.kaartveld-c{
  position:relative;border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:radial-gradient(120% 90% at 50% 0%,rgba(201,164,100,.07),transparent 60%),rgba(255,255,255,.015);
  padding:clamp(10px,2vw,22px);
}
/* Was 12px. Dit is geen bijschrift maar de uitleg hoe de kaart werkt;
   die moet je op een telefoon zonder moeite kunnen lezen. */
.kaart-hint{margin:10px 4px 0;font-size:13.5px;letter-spacing:.04em;color:var(--zachter)}

/* ---- de naam onder je muis ----
   Zonder dit moet je op elk land klikken om te weten wat het is. */
.kaart-tip{
  position:absolute;left:0;top:0;z-index:3;pointer-events:none;
  transform:translate(-9999px,-9999px);
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(11,10,9,.92);border:1px solid rgba(230,206,155,.45);
  color:var(--goud-licht);font-size:12.5px;letter-spacing:.03em;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.9);
  /* LET OP: hier stond margin-left:-50% om het labeltje te centreren. Een
     procent in margin rekent met de breedte van de OUDER, dus dat was -50% van
     de hele kaart en schoot het label naar de linkerrand. Het centreren zit nu
     in de transform, die rekent wel met het element zelf. */
}
/* een land zonder uitgewerkt verhaal krijgt een rustiger label */
.kaart-tip.kaal{color:var(--zand);border-color:var(--lijn)}
.kaart-tip[hidden]{display:none}

/* ---- zoekbalk ---- */
.zoekrij{margin-top:clamp(26px,3.5vh,40px);position:relative}
.zoekveld{
  display:flex;align-items:center;gap:12px;max-width:520px;
  padding:2px 16px;border:1px solid var(--lijn);border-radius:999px;
  background:rgba(255,255,255,.03);transition:border-color .3s,background-color .3s;
}
.zoekveld:focus-within{border-color:rgba(201,164,100,.6);background:rgba(201,164,100,.06)}
.zoekveld svg{width:18px;height:18px;color:var(--goud);flex:none}
/* Het invoerveld zelf was maar 21px hoog binnen een rand van 66px. Tikte je
   net naast de tekst, dan gebeurde er niets. Nu vult het veld de hele hoogte,
   zodat de rand die je ziet ook de rand is die je kunt raken. */
.zoekveld input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  font-family:inherit;font-size:15px;color:var(--tekst);
  align-self:stretch;min-height:42px;
}
.zoekveld input::placeholder{color:var(--zachter)}
.zoekveld input::-webkit-search-cancel-button{display:none}
/* Was 26x26. Dat is met een duim niet te raken; 40 is het minimum waar je
   nog blind op mikt. Het kruisje zelf blijft even klein, alleen het
   raakvlak groeit. */
.zoek-wis{
  background:transparent;border:0;cursor:pointer;color:var(--zachter);
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
}
.zoek-wis:hover{color:var(--goud-licht)}
.zoek-wis svg{width:13px;height:13px}
.zoek-telling{margin:10px 4px 0;font-size:12px;color:var(--zachter)}
.zoekuitslag{
  list-style:none;margin:8px 0 0;padding:6px;max-width:520px;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:linear-gradient(180deg,rgba(28,23,19,.98),rgba(18,16,14,.98));
  box-shadow:0 30px 60px -34px rgba(0,0,0,.95);
}
.zoekuitslag[hidden]{display:none}
.zoekuitslag a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:var(--hoek,2px);text-decoration:none;
}
.zoekuitslag a:hover,.zoekuitslag a:focus-visible{background:rgba(201,164,100,.14);outline:none}
.zoekuitslag b{font-family:"Cormorant",serif;font-weight:400;font-size:19px;color:var(--tekst)}
.zoekuitslag span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--zachter)}

/* tijdens het zoeken zakt de rest weg en licht de treffer op. Niet te ver
   wegzakken: je wilt nog wel zien waar het land ligt ten opzichte van de rest */
.land.gedimd,.stip-land.gedimd{opacity:.3}
.land.gevonden{
  fill:var(--goud);stroke:var(--goud-licht);stroke-width:1.6;
}
.stip-land.gevonden .stip-kern{
  fill:#fff;r:6;stroke:var(--goud);stroke-width:2;
}

/* ---- foto in het paneel ---- */
.paneel-beeld{margin:0 0 18px}
.paneel-beeld[hidden]{display:none}
.paneel-beeld img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:2px;background:rgba(255,255,255,.04);
}
.paneel-beeld figcaption{
  margin-top:8px;font-size:10.5px;line-height:1.5;color:rgba(240,231,220,.42);
}

/* ---- zoomknoppen ---- */
.kaartknoppen{
  position:absolute;top:clamp(16px,2vw,26px);right:clamp(16px,2vw,26px);
  display:flex;flex-direction:column;gap:8px;z-index:2;
}
.kaartknop{
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--lijn);border-radius:50%;color:var(--zacht);
  background:rgba(11,10,9,.72);backdrop-filter:blur(8px);
  transition:border-color .3s,color .3s,background-color .3s;
}
.kaartknop:hover{border-color:var(--goud);color:var(--goud-licht);background:rgba(201,164,100,.14)}
.kaartknop svg{width:17px;height:17px}
/* ingezoomd sleep je de kaart, dus dan mag de browser de veeg niet pakken */
.continentsvg.ingezoomd{cursor:grab;touch-action:none}
.continentsvg.ingezoomd:active{cursor:grabbing}
/* de lijnen mogen niet meegroeien met de zoom, anders worden het balken */
.continentsvg .land{stroke-width:calc(.55px / var(--zoom,1))}
.continentsvg .land:hover,.continentsvg .land:focus-visible{stroke-width:calc(1px / var(--zoom,1))}
.continentsvg .land.aan{stroke-width:calc(1.2px / var(--zoom,1))}

.land{
  fill:rgba(201,164,100,.10);
  stroke:rgba(230,206,155,.40);
  stroke-width:.55;stroke-linejoin:round;cursor:pointer;
  transition:fill .3s,stroke .3s,stroke-width .3s;
}
/* landen waar al een verhaal bij staat, mogen iets meer opvallen */
.land[data-uitgewerkt="ja"]{fill:rgba(201,164,100,.2);stroke:rgba(230,206,155,.6)}
.land.stil{fill:rgba(198,184,168,.05);stroke:rgba(198,184,168,.14);cursor:default;pointer-events:none}
.land:hover,.land:focus-visible{
  fill:rgba(230,206,155,.42);stroke:var(--goud-licht);stroke-width:1.4;
}
.land.aan{
  fill:var(--goud);stroke:var(--goud-licht);stroke-width:1.6;
}
.land:focus{outline:none}

.stip-land{cursor:pointer}
/* het raakvlak van een stip is met opzet veel groter dan de stip zelf, en op
   een telefoon nog een slag groter, want daar is de kaart maar 330px breed */
.stip-raak{fill:transparent}
@media(max-width:1000px){.stip-raak{r:20}}
.stip-kern{
  fill:rgba(230,206,155,.55);stroke:rgba(11,10,9,.7);stroke-width:1;
  transition:fill .3s,r .3s;
}
.stip-land[data-uitgewerkt="ja"] .stip-kern{fill:var(--goud-licht)}
.stip-land:hover .stip-kern,.stip-land:focus-visible .stip-kern{
  fill:#fff;stroke:var(--goud);stroke-width:1.5;
}
.stip-land.aan .stip-kern{fill:#fff;stroke:var(--goud);stroke-width:2}
.stip-land:focus{outline:none}

/* ---------------- het paneel rechts ---------------- */
.landpaneel{
  /* De rand als variabele, zodat het vaste knoppenblok onderin exact even
     breed kan zijn als het paneel. */
  --paneelrand:clamp(22px,2.4vw,30px);
  --paneelvlak:#12100E;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  /* DEKKEND, geen alpha. Met .97 scheen de tekst er nog doorheen achter het
     knoppenblok, en dat is precies wat er niet mag gebeuren. */
  background:linear-gradient(180deg,#1C1713,var(--paneelvlak));
  padding:var(--paneelrand);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
}
/* op een breed scherm zweeft het paneel rechts over de kaart */
@media(min-width:1001px){
  .landpaneel{
    position:fixed;top:50%;right:clamp(16px,3vw,48px);z-index:75;
    width:min(400px,34vw);max-height:min(78vh,740px);overflow-y:auto;
    backdrop-filter:blur(10px);
    transform:translate(calc(100% + 70px),-50%);opacity:0;pointer-events:none;
    transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;
  }
  .landpaneel.open{transform:translate(0,-50%);opacity:1;pointer-events:auto}
  /* de lege stand hoort bij de telefoon, op desktop staat er gewoon niets
     tot je een land kiest */
  .landpaneel-leeg{display:none}
}
.landpaneel-leeg{display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--zachter)}
/* Een eigen display-regel verslaat het hidden-attribuut van de browser, dus
   die moet je expliciet terugzetten. Anders bleef "Kies een land" achter de
   landinformatie staan. */
.landpaneel-leeg[hidden],.landpaneel-in[hidden]{display:none}
.landpaneel-leeg svg{width:30px;height:30px;color:rgba(201,164,100,.5);margin-bottom:6px}
.landpaneel-leeg p{margin:0;font-family:"Cormorant",serif;font-size:22px;color:var(--zand)}
.landpaneel-leeg span{font-size:13.5px;line-height:1.65}

.landpaneel-in{position:relative}
.paneel-dicht{
  position:absolute;top:-6px;right:-6px;width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--lijn);border-radius:50%;color:var(--zacht);cursor:pointer;
  transition:border-color .3s,color .3s;
}
.paneel-dicht:hover{border-color:var(--goud);color:var(--goud-licht)}
.paneel-dicht svg{width:15px;height:15px}
.paneel-streek{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--goud)}
.landpaneel h2{margin:8px 0 0;font-size:clamp(26px,2.6vw,34px);color:var(--tekst)}
.paneel-tekst{margin-top:16px}
.paneel-tekst p{margin:0;font-size:14.5px;line-height:1.75;color:var(--zacht)}
.paneel-feiten{margin:20px 0 0;display:grid;gap:0}
.paneel-feiten > div{padding:14px 0;border-top:1px solid var(--lijn)}
.paneel-feiten dt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--zachter);margin-bottom:6px}
.paneel-feiten dd{margin:0;font-size:14px;line-height:1.6;color:var(--tekst)}
.paneel-hoog{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.paneel-hoog li{position:relative;padding-left:20px;font-size:14px;color:var(--zacht);line-height:1.55}
.paneel-hoog li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--goud);
}
.paneel-knoppen{display:grid;gap:10px;margin-top:24px}
.paneel-knoppen .btn{width:100%;justify-content:center;padding-block:15px}

.paneel-weer{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 14px;
  border:1px solid var(--lijn);border-radius:999px;font-size:12.5px;color:var(--zacht);
}
.paneel-weer b{font-family:"Cormorant",serif;font-size:19px;font-weight:400;color:var(--goud-licht)}
.paneel-weer svg{width:17px;height:17px;color:var(--goud);flex:none}

/* op telefoon schuift het paneel van onderen in beeld, met een scherm erachter
   zodat de pagina er niet doorheen schemert en je ernaast kunt tikken om te
   sluiten */
.paneel-scherm{display:none}
@media(max-width:1000px){
  .landpaneel{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:80;border-radius:var(--hoek,2px) var(--hoek,2px) 0 0;
    border-bottom:0;max-height:82vh;overflow-y:auto;
    padding:24px var(--rand) calc(24px + env(safe-area-inset-bottom));
    transform:translateY(102%);transition:transform .45s cubic-bezier(.22,1,.36,1);
    box-shadow:0 -30px 70px -20px rgba(0,0,0,.95);min-height:0;
    /* helemaal dicht: op 97 procent las je de kop er nog doorheen */
    background:linear-gradient(180deg,#1F1A15,#131110);
  }
  .landpaneel.open{transform:translateY(0)}
  .landpaneel-leeg{display:none}
  .kaart-hint{text-align:center}
  .paneel-scherm{
    display:block;position:fixed;inset:0;z-index:79;
    background:rgba(7,6,5,.66);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .4s;
  }
  .paneel-scherm.aan{opacity:1}
  .paneel-scherm[hidden]{display:none}
  /* de pagina eronder mag niet meescrollen zolang het paneel openstaat */
  body.paneel-op{overflow:hidden}
}

/* ---------------- de landenlijst ---------------- */
.landenlijst-blok{margin-top:clamp(44px,6vh,78px)}
.landenlijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
/* min-height 44px: de knoppen waren 38 hoog en dat is net te weinig om
   betrouwbaar te raken. Op desktop verandert er niets zichtbaars. */
.land-knop{
  font-family:inherit;font-size:14px;color:var(--tekst);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  padding:9px 16px;border:1px solid var(--lijn);border-radius:999px;
  background:rgba(201,164,100,.08);
  transition:border-color .3s,background-color .3s,color .3s;
}
.land-knop:hover{border-color:var(--goud);background:rgba(201,164,100,.2)}
.land-knop.leeg{background:transparent;color:var(--zachter)}
.land-knop.leeg:hover{color:var(--tekst)}
.land-knop.aan{background:var(--goud);border-color:var(--goud);color:#1C1509;font-weight:600}

/* ---------------- afsluiter ----------------
   Heette .kaart-cta, en dat is de tweede keer dat die naam botste: op de
   bestemmingenpagina is .kaart-cta het gouden pilletje dat bij hover in een
   kaart verschijnt. kaart.css laadt na style.css, dus dit blok won en gaf het
   pilletje een doorzichtige achtergrond met 30 tot 52 pixels binnenmarge.
   Gemeten: 151 bij 119 pixels in plaats van een pil, met donkere tekst op een
   foto. Vandaar dezelfde naam als op de andere pagina's. */
.slotkaart-kaart{
  margin:clamp(56px,8vh,110px) auto clamp(60px,9vh,120px);
  padding:clamp(30px,4vw,52px);text-align:center;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:radial-gradient(120% 120% at 50% 0%,rgba(201,164,100,.1),transparent 62%);
}
.slotkaart-kaart h2{margin:0;color:var(--tekst)}
.slotkaart-kaart .lood{margin:16px auto 26px;max-width:52ch}

@media(prefers-reduced-motion:reduce){
  .wd-vlak,.land,.stip-kern,.landpaneel,.wd-lijst a{transition:none}
}

/* ---------- de knoppen blijven onderin het paneel staan ----------
   Gemeten op drie formaten: de inhoud is 945px in een paneel van 591 tot
   700px, dus "Plan deze reis" en de appknop stonden altijd onder de vouw van
   het paneel. Je moest binnen het paneel scrollen om te kunnen handelen, en
   dat ziet niemand.

   Het paneel wordt nu een kolom: alles boven de knoppen scrollt, de knoppen
   staan vast onderaan met een randje en dezelfde achtergrond eronder. */
.landpaneel-in{display:flex;flex-direction:column;min-height:0}
/* Het knoppenblok blijft onderin plakken terwijl de rest doorscrollt.
   Hier ging het mis: de achtergrond was een verloop dat bovenin op alpha 0
   begon, precies waar de eerste knop staat. Daardoor liep de tekst dwars door
   de knoppen heen.

   Nu drie dingen die dat onmogelijk maken:
   1. de achtergrond is DEKKEND, zonder alpha, dus er kan per definitie niets
      doorheen schijnen;
   2. het blok loopt met negatieve marges door tot de rand van het paneel, dus
      ook opzij komt er geen tekst langs;
   3. de vervaging zit op een eigen laag ERBOVEN (::before), zodat tekst netjes
      uitvloeit zonder dat de knoppen zelf doorschijnend hoeven te zijn. */
.landpaneel-in > .paneel-knoppen{
  position:sticky;bottom:calc(var(--paneelrand) * -1);
  margin-top:auto;
  margin-inline:calc(var(--paneelrand) * -1);
  padding:18px var(--paneelrand) var(--paneelrand);
  background:var(--paneelvlak);
  border-top:1px solid var(--lijn);
}
.landpaneel-in > .paneel-knoppen::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:46px;
  background:linear-gradient(180deg,rgba(18,16,14,0),var(--paneelvlak));
  pointer-events:none;
}
/* de sluitknop hoort boven de scrollende inhoud te blijven zweven */
/* De sluitknop.
   Twee dingen gingen mis. Als flex-item in een kolom werd hij platgedrukt tot
   36x19, en met border-radius:50% levert dat een ovaal op in plaats van een
   rondje: daarom flex:none. En hij nam een eigen regel boven de foto in, wat
   een lege strook gaf; met een negatieve ondermarge legt hij zich nu over de
   rechterbovenhoek van de foto. Sticky blijft, zodat hij in beeld blijft als
   je door een lang paneel scrollt. */
.landpaneel-in > .paneel-dicht{
  position:sticky;top:14px;align-self:flex-end;z-index:3;
  flex:none;
  margin-right:14px;margin-bottom:-36px;
  background:rgba(11,10,9,.6);
  border-color:rgba(247,242,232,.3);
  color:var(--room);
  backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}
.landpaneel-in > .paneel-dicht:hover{
  background:rgba(11,10,9,.8);border-color:var(--goud);color:var(--goud-licht);
}
@media(min-width:1001px){
  .landpaneel{display:flex;flex-direction:column}
  .landpaneel-in{flex:1;min-height:0}
}

/* ---------- reisadvies-waarschuwing in het landpaneel ----------
   Alleen bij landen met kleurcode oranje. Oranje van kleur, want dat is
   precies de kleurcode waar het over gaat, en dat leest sneller dan goud. */
.paneel-let-op{
  display:block;margin:0 0 14px;padding:12px 15px;border-radius:var(--hoek,2px);
  font-size:13.5px;line-height:1.55;
  color:#F0D9B8;background:rgba(214,128,42,.13);
  border:1px solid rgba(214,128,42,.45);
}
.paneel-let-op[hidden]{display:none}

/* ---------- landen waar Angelique niet heen boekt ----------
   Donker weggevallen met arcering eroverheen. Niet aanklikbaar, geen hover,
   geen focus: het is geen keuze, dus het hoort zich ook niet als keuze te
   gedragen. De arcering zit als <pattern> in de svg zelf. */
.continentsvg .land.nietaanbod{
  fill:url(#arcering);
  stroke:rgba(247,242,232,.10);
  stroke-width:.6;
  pointer-events:none;
  cursor:default;
}
.continentsvg .stip-land.nietaanbod{pointer-events:none}
.continentsvg .stip-land.nietaanbod .stip-kern{fill:rgba(247,242,232,.2)}

/* ---------- Waar in <land>? (kaart.js toonPlekken) ---------- */
.paneel-plekken{margin-top:26px;padding-top:22px;border-top:1px solid var(--lijn)}
.plekken-kop{margin:0 0 14px;font:500 24px/1.15 "Cormorant",Georgia,serif;color:var(--room)}
.plekken-groep+.plekken-groep{margin-top:14px}
.plekken-groepnaam{margin:0 0 8px;font:700 10.5px/1 "Jakarta",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--goud)}
.plekken-rij{display:flex;flex-wrap:wrap;gap:7px}
.plek{font:600 12.5px/1 "Jakarta",sans-serif;color:var(--tekst);background:rgba(249,243,238,.04);
  border:1px solid var(--lijn);border-radius:999px;padding:8px 12px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.plek:hover{border-color:var(--goud)}
.plek[aria-pressed="true"]{background:var(--goud);border-color:var(--goud);color:var(--inkt)}
.plek:focus-visible{outline:2px solid var(--goud-licht);outline-offset:2px}
.plekken-tip{margin:-6px 0 14px;font-size:12.5px;color:var(--zachter)}
.plek-uitleg{margin:10px 0 0;padding:12px 14px;border-radius:var(--hoek,2px);background:rgba(201,164,100,.08);
  font-size:13.5px;line-height:1.55;color:var(--zacht)}
.plek-uitleg b{color:var(--room)}

/* Eén hoek voor alles (17-10-2026), zie het slot van style.css. */
.landpaneel,.kaartveld-c,.plek-uitleg{border-radius:var(--hoek,2px)}

/* Kopje boven het zoekveld (Europa, Deel 2 punt 31) */
.zoekkop{margin-top:clamp(18px,3vw,30px)}
.zoekkop h2{font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:clamp(24px,2.4vw,32px);margin:0 0 6px;color:var(--room,#F4EDE4)}
.zoekkop p{margin:0;color:var(--zacht);font-size:15px}