/* bundel: /css/routekaart-css-93e7d832.css /css/fotonotitie-stijl-fc9e07c5.css */

/* Het routekaartje op de foto van een voorbeeldreis. */
.rk-tegel{position:absolute;top:-12px;right:-10px;z-index:4;padding:0;border:0;background:none;
  width:var(--rk-b,min(110px,calc(130px * var(--rk-v,1))));height:auto;aspect-ratio:var(--rk-v,1);
  cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.rk-tegel svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 8px rgba(20,26,16,.42));
  transform-origin:top right;transition:transform .2s ease}
.rk-m-eiland{fill:#fff;font-family:var(--tekst,'Inter',system-ui,sans-serif);font-weight:300;letter-spacing:.05em}
.rk-m-route{fill:none;stroke:var(--cta,#c8481f);stroke-linecap:round}
.rk-m-stip{fill:var(--mos,#536144);stroke:#fff}
.rk-m-eind{fill:var(--cta,#c8481f);stroke:#fff}
/* het vergroot-icoontje verschijnt pas als je het kaartje aanwijst */
.rk-tegel-icoon{position:absolute;right:2px;bottom:-4px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:var(--cta,#c8481f);color:#fff;font-size:15px;pointer-events:none;
  box-shadow:0 3px 8px rgba(0,0,0,.25);opacity:0;transform:scale(.7);transition:opacity .18s ease,transform .18s ease}
.rk-tegel:hover svg{transform:scale(1.04)}
.rk-tegel:hover .rk-tegel-icoon,.rk-tegel:focus-visible .rk-tegel-icoon{opacity:1;transform:none}
.rk-tegel:focus-visible{outline:3px solid var(--cta,#c8481f);outline-offset:2px;border-radius:14px}
/* op een telefoon kun je niet aanwijzen, dus daar staat het icoontje er altijd */
@media(hover:none){.rk-tegel-icoon{opacity:1;transform:none;width:22px;height:22px;font-size:12px}}
/* Op een telefoon schuiven de kaartjes zijwaarts, en die rij knipt alles af wat
   boven de kaart uitsteekt. Daar staat het kaartje dus binnen de foto. */
@media(max-width:600px){.rk-tegel{top:8px;right:8px;width:calc(var(--rk-b,min(110px,calc(130px * var(--rk-v,1)))) * .8)}}

/* De routekaart in de kop van een detailpagina: een echte afbeelding, zodat
   zoekmachines hem vinden. Een klik opent de grote kaart. */
.routekaart.rk-alleen-kaart{padding:10px}
.routekaart .rk-body.rk-body-kaart{display:block}
.rk-detailkaart{position:relative;display:block;border-radius:16px;overflow:hidden;cursor:zoom-in;
  -webkit-tap-highlight-color:transparent}
.rk-detailkaart picture,.rk-detailkaart img{display:block;width:100%;height:auto}
.rk-detailkaart .rk-tegel-icoon{right:12px;bottom:12px}
.rk-detailkaart:hover .rk-tegel-icoon,.rk-detailkaart:focus-visible .rk-tegel-icoon{opacity:1;transform:none}
.rk-detailkaart:focus-visible{outline:3px solid var(--cta,#c8481f);outline-offset:3px}
/* alleen voor het tekenen van die afbeelding, in routekaart_beelden.py */
.rk-dk-vak{position:relative;display:block;overflow:hidden;background:#dce7e8}
.rk-dk-vak>svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* De grote kaart. */
.rk-dialoog{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  padding:3vmin;--rk-zee:#dce7e8}
.rk-dialoog[hidden]{display:none}
.rk-achter{position:absolute;inset:0;background:rgba(32,39,26,.74);opacity:0;transition:opacity .22s ease}
.rk-paneel{position:relative;display:flex;flex-direction:column;width:min(1200px,100%);height:min(820px,100%);
  background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px) scale(.985);transition:opacity .24s ease,transform .24s ease}
.rk-dialoog.open .rk-achter{opacity:1}
.rk-dialoog.open .rk-paneel{opacity:1;transform:none}
.rk-dkop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px 14px 24px;
  border-bottom:1px solid #ece9e4}
.rk-dkop h2{margin:0;font:700 clamp(19px,2.1vw,24px)/1.15 var(--kop,system-ui);color:var(--zwart,#20271a)}
.rk-sub{margin:0 0 5px;font:600 13.5px/1.35 var(--tekst,system-ui);color:var(--zacht,#68725a)}
.rk-sluit{flex:none;width:42px;height:42px;border:0;border-radius:50%;background:var(--steun,#f0eeed);
  color:var(--ink,#414b35);font-size:21px;display:grid;place-items:center;cursor:pointer}
.rk-sluit:hover{background:#e4e1dc}
.rk-sluit:focus-visible,.rk-stop:focus-visible{outline:3px solid var(--cta,#c8481f);outline-offset:2px}
.rk-inhoud{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 370px}
.rk-kaart{position:relative;min-height:0;background:var(--rk-zee);overflow:hidden}
.rk-kaart>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.rk-legenda{min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px 18px 22px;border-left:1px solid #ece9e4}
.rk-delen{position:absolute;left:12px;top:12px;right:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.rk-delen button{pointer-events:auto;border:0;border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.96);
  font:600 13px/1 var(--tekst,system-ui);color:var(--ink,#414b35);box-shadow:0 2px 8px rgba(0,0,0,.14);cursor:pointer}
.rk-delen button:hover{background:#fff;color:var(--cta-donker,#a93a14)}
.rk-delen button[aria-pressed="true"]{background:var(--mos-donker,#3a4430);color:#fff}
.rk-delen button:focus-visible{outline:3px solid var(--cta,#c8481f);outline-offset:2px}
.rk-beweegt .rk-gebieden{opacity:0}
.rk-kaart>svg:last-of-type{transition:opacity .15s ease}
.rk-laden{position:absolute;left:14px;bottom:12px;font:600 12.5px var(--tekst,system-ui);color:var(--zacht,#68725a)}

.rk-zee{fill:var(--rk-zee,#dce7e8)}
.rk-buur{fill:#ebe7df;stroke:#fff;stroke-width:.8;vector-effect:non-scaling-stroke}
.rk-land,.rk-eiland{fill:#fffdf8}
.rk-land{stroke:#c4d0cf;stroke-width:.8;vector-effect:non-scaling-stroke}
.rk-meer{fill:var(--rk-zee,#dce7e8)}
.rk-rivier{fill:none;stroke:#a3c3cf;stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.rk-prov{fill:none;stroke:#536144;stroke-opacity:.3;stroke-width:.9;vector-effect:non-scaling-stroke}
.rk-grens{fill:none;stroke:#536144;stroke-opacity:.55;stroke-width:1.3;vector-effect:non-scaling-stroke}
.rk-gebieden text{text-anchor:middle;font-family:var(--tekst,system-ui);pointer-events:none}
.rk-n-buur{fill:#a19b8e;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.rk-n-prov{fill:#8c957f;font-weight:600;letter-spacing:.02em}
.rk-n-zee{fill:#7b98a4;font-style:italic;font-weight:500}

.rk-been{fill:none;stroke:var(--cta,#c8481f);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rk-been.vlucht{stroke-width:2;stroke-dasharray:7 6}
.rk-been.boot{stroke-dasharray:1 6;stroke-width:3}
.rk-been.trein{stroke-dasharray:14 4}
.rk-been.aan{stroke-width:4}
.rk-badge circle{fill:#fff;stroke:var(--cta,#c8481f);stroke-width:1.5}
.rk-badge text{font-family:'tabler-icons';font-size:12px;fill:var(--cta,#c8481f);text-anchor:middle;dominant-baseline:central}
.rk-leider{stroke:var(--mos-donker,#3a4430);stroke-width:1.2;stroke-opacity:.55}
.rk-anker{fill:var(--mos-donker,#3a4430)}
.rk-stip{cursor:pointer}
.rk-stip rect{fill:var(--mos-donker,#3a4430);stroke:#fff;stroke-width:2.5;transition:fill .15s}
.rk-stip.eind rect{fill:var(--cta,#c8481f)}
.rk-stip text{fill:#fff;font:700 11.5px var(--tekst,system-ui);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.rk-stip.aan rect{fill:var(--cta-donker,#a93a14);stroke-width:3.5}
.rk-naam{font:600 13px var(--tekst,system-ui);fill:var(--zwart,#20271a);paint-order:stroke;
  stroke:rgba(255,253,248,.96);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.rk-naam.aan{fill:var(--cta-donker,#a93a14);font-weight:700}

/* Een plek die buiten de kaart valt, zoals New York bij een Canadareis of de
   Malediven bij Sri Lanka. Geen stip, wel een aanvliegroute vanaf de rand, zodat
   je ziet dat de reis daar vandaan komt of daarheen gaat. */
.rk-been.rk-hub{opacity:.75}
.rk-vliegtuig{font-family:'tabler-icons';font-size:20px;fill:var(--cta,#c8481f);
  text-anchor:middle;dominant-baseline:central}
.rk-hubnaam{font:600 12px var(--tekst,system-ui);fill:var(--grijs,#6b7363);paint-order:stroke;
  stroke:rgba(255,253,248,.96);stroke-width:4px;stroke-linejoin:round;pointer-events:none}

.rk-lijst{list-style:none;margin:0;padding:0}
.rk-stop{cursor:pointer;display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:7px 9px;
  border-radius:12px;transition:background .15s}
.rk-stop.aan{background:var(--groen-tint,#e7f1e8)}
.rk-nr{width:26px;height:26px;border-radius:50%;background:var(--mos-donker,#3a4430);color:#fff;
  font:700 12px/26px var(--tekst,system-ui);text-align:center}
.rk-stop.eind .rk-nr{background:var(--cta,#c8481f)}
.rk-plaats{font:600 15px/1.25 var(--tekst,system-ui);color:var(--zwart,#20271a)}
.rk-plaats small{display:block;font-weight:500;font-size:12.5px;color:var(--zacht,#68725a)}
.rk-nacht{font:500 13.5px var(--tekst,system-ui);color:var(--zacht,#68725a);white-space:nowrap}
.rk-reis{display:flex;align-items:center;gap:7px;margin:0 0 0 22px;padding:4px 0 4px 19px;
  border-left:2px dotted rgba(200,72,31,.45);font:500 13px/1.3 var(--tekst,system-ui);color:var(--zacht,#68725a)}
.rk-reis i{color:var(--cta,#c8481f);font-size:16px}
.rk-totaal{margin:14px 9px 0;padding-top:12px;border-top:1px solid #ece9e4;font:600 13.5px var(--tekst,system-ui);
  color:var(--ink,#414b35)}
.rk-legenda .rk-detail{display:flex;justify-content:center;margin-top:14px;width:100%}

@media(max-width:860px){
  .rk-dialoog{padding:0}
  .rk-paneel{width:100%;height:100%;border-radius:0}
  .rk-inhoud{grid-template-columns:1fr;grid-template-rows:minmax(250px,55%) minmax(0,1fr)}
  .rk-legenda{border-left:0;border-top:1px solid #ece9e4;padding:12px 14px 20px}
  .rk-dkop{padding:12px 12px 10px 16px}
}
@media(prefers-reduced-motion:reduce){.rk-paneel,.rk-achter,.rk-tegel{transition:none}}


  /* fotonotitie:begin - kanttekening over de foto's, staat op elke voorbeeldreis */
  .fotonotitie{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;width:fit-content;max-width:min(100%,430px);margin:6px 0 20px auto;padding:0}
  .fn-krul{width:34px;height:42px;flex:none;color:var(--cta,#c8481f);margin-top:2px}
  .fn-kop{font-family:var(--tekst,'Inter',system-ui,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--cta,#c8481f);margin:0 0 5px}
  .fn-tekst{font-family:var(--hand,'Caveat',cursive);font-weight:600;font-size:21px;line-height:1.24;color:var(--cta-donker,#a93a14);margin:0}
  @media (min-width:981px){.fotonotitie{width:auto;max-width:none;margin:2px 0 22px}.rij-zij>.fotonotitie{margin-left:-48px}}
  @media (max-width:980px){.rij:has(>.rij-zij>.fotonotitie:only-child){display:flex;flex-direction:column}.rij:has(>.rij-zij>.fotonotitie:only-child)>.rij-zij{order:-1}}
  @media (max-width:640px){.fotonotitie{margin:4px 0 16px;column-gap:11px}.fn-krul{width:28px;height:35px}.fn-tekst{font-size:19px}.fn-kop{font-size:10px}}
  /* fotonotitie:eind */