/* bundel: /css/film-extra-css-1453048e.css /css/mob-v2-778d4192.css /css/dd-voet-stijl-ca254bf3.css /css/wk-stijl-60ac6cb5.css */

.hero-foto video{width:100%;height:clamp(280px,44vw,460px);object-fit:cover;display:block;background:var(--mos-donker);pointer-events:none}
.hero-foto figcaption{font-family:var(--hand,'Caveat',cursive);font-weight:700;font-size:20px;color:var(--zacht,#68725a);text-align:center;padding:12px 4px 0}
.fam-def .polamini video{height:132px}
.fam-info .polamini video{height:200px}


/* =====================================================================
   Mobiele laag v2 - alles staat in een media query, desktop blijft gelijk
   ===================================================================== */
.mb2,.mb2-sheet{display:none}
.knop-tx-mob{display:none}

/* ---------------------------------------------------------------------
   Filmblok: de bronbestanden zijn deels liggend (720x406) en deels
   staand (406x720), dus de kaarten werden ongelijk hoog. Eén staande
   verhouding voor alles, met een bijsnede vanuit het midden.
   Dit geldt ook op desktop; het is geen mobiele uitzondering.
   --------------------------------------------------------------------- */
.film-grid .filmkaart video,
.film-grid .filmkaart .rm-poster{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

@media(max-width:760px){

  /* ---------- 1. Header: logo, compacte CTA, burger -----------------
     De volledige CTA liep over het woordmerk heen op 375px. Op mobiel
     staat er een kortere tekst (.knop-tx-mob), zonder avatars en met
     minder ruimte eromheen, zodat alle drie de onderdelen passen. */
  .top .wrap{height:58px;gap:10px;padding:0 14px}
  .logo{flex:0 0 auto;min-width:0}
  .logo-tx{font-size:17.5px;white-space:nowrap}
  .logo-tx small{display:none}
  .top .knop.knop-vol{display:inline-flex;margin-left:auto;order:2;
    padding:9px 14px;font-size:13px;gap:0;line-height:1.15;white-space:nowrap}
  .top .knop.knop-vol .nav-ava,.top .knop.knop-vol i{display:none}
  .top .knop.knop-vol .knop-tx{display:none}
  .top .knop.knop-vol .knop-tx-mob{display:inline}
  .burger{margin-left:0}
  /* nooit twee dezelfde knoppen tegelijk: zodra de balk onderin
     opkomt, geeft de kopbalk de CTA aan haar door. Op de homepage doet
     de balk iets anders (bestemming kiezen), dus daar blijft hij staan. */
  .top .knop.knop-vol{transition:opacity .22s ease}
  body.mb2-balk-aan:not(.mb2-home) .top .knop.knop-vol{opacity:0;pointer-events:none}
}

/* smallere toestellen: eerst de knop krimpen, daarna pas het woordmerk */
@media(max-width:365px){
  .top .wrap{gap:8px;padding:0 12px}
  .logo-tx{font-size:16.5px}
  .top .knop.knop-vol{padding:8px 12px;font-size:12.5px}
}
@media(max-width:340px){
  .logo-tx{display:none}
}
@media(max-width:760px){

  /* ---------- 2. Vaste actiebalk onderin --------------------------- */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .mb2{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:68;
    align-items:center;gap:10px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
    border-top:1px solid rgba(83,97,68,.14);
    box-shadow:0 -8px 24px -18px rgba(20,26,16,.7);
    transform:translateY(0);transition:transform .28s ease}
  .mb2[data-weg="1"]{transform:translateY(120%)}
  .mb2-prog{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(83,97,68,.14)}
  .mb2-prog i{display:block;height:100%;width:0;background:var(--cta,#c8481f);transition:width .12s linear}
  .mb2-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 1 auto;
    min-height:46px;padding:0 18px;border-radius:999px;
    background:var(--cta,#c8481f);color:#fff;font-weight:700;font-size:15px;
    font-family:var(--tekst,inherit);white-space:nowrap;text-align:center}
  .mb2-cta i{font-size:17px}
  .mb2-hs{display:none}

  /* ---------- 3. Formulieren: geen zoom-sprong op iOS -------------- */
  input,select,textarea{font-size:16px}

  /* ---------- 4. Aanraakvlakken minstens 44px ---------------------- */
  .voet a,.dd-mega .dd-links a,nav.hoofdmenu > a{min-height:44px;display:flex;align-items:center}
  .voet-kol a{padding:3px 0}

  /* ---------- 5. Ankers vallen niet meer achter de kopbalk --------- */
  [id]{scroll-margin-top:72px}

}

/* =====================================================================
   Homepagina: de drie hero-scenes lagen op 375px over elkaar heen.
   Foto's boven, gespreksballon eronder, binnen dezelfde vervaging.
   ===================================================================== */
@media(max-width:600px){
  .hero{padding:40px 0 84px}
  .hero-visual{height:392px;margin-top:8px}
  .kaart-groot,.s2 .kaart-groot,.s3 .kaart-groot{
    left:auto;right:0;top:0;bottom:auto;width:57%;aspect-ratio:3/3.5}
  .kaart-klein,.s2 .kaart-klein,.s3 .kaart-klein{
    left:0;right:auto;top:34px;bottom:auto;width:40%;aspect-ratio:10/8}
  .chat,.s2 .chat,.s3 .chat{
    left:0;right:0;top:auto;bottom:0;width:auto;transform:none;padding:14px 16px}
  .chat p{font-size:13.5px}
  .badge-zweef{display:none}
  .vlieg{display:none}
  .scene-dots{bottom:-28px}
}

/* =====================================================================
   Landenpagina's: de hero-collage stapelde bovenop zichzelf op mobiel
   (vier absoluut geplaatste kaarten in een kolom van 319px).
   Hier wordt het een net raster. Alleen op pagina's met .hv-groot.
   ===================================================================== */
@media(max-width:760px){
  .mb2-collage .hero-visual{position:static;min-height:0;height:auto;
    display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:6px}
  .mb2-collage .hv-groot,.mb2-collage .hv-klein,
  .mb2-collage .hv-review,.mb2-collage .hero-tip{
    position:static;width:auto;inset:auto;transform:none;margin:0}
  .mb2-collage .hv-klein{order:1;aspect-ratio:1/1.14;border-width:4px}
  .mb2-collage .hv-groot{order:2;aspect-ratio:1/1.14}
  .mb2-collage .hv-review{order:3;grid-column:1/-1;padding:15px 17px}
  .mb2-collage .hv-review p{font-size:15px}
  .mb2-collage .hero-tip{order:4;grid-column:1/-1}
  .mb2-collage .hero-tip p{font-size:13.5px}
}

/* =====================================================================
   Voorbeeldreizen: de pagina is 23.000px lang op mobiel. Zonder
   navigatie is dat een muur. Onderin komt een hoofdstukknop met
   voortgangsbalk; de horizontale inhoudsopgave bovenin vervalt.
   ===================================================================== */
@media(max-width:760px){
  /* --- inhoudsopgave verhuist naar de sheet onderin --- */
  .mb2-reis nav.toc{display:none}

  /* --- actiebalk krijgt twee delen --- */
  .mb2-reis .mb2-hs{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    flex:1 1 auto;min-width:0;gap:1px;min-height:46px;padding:4px 12px 4px 14px;
    background:var(--groen-tint,#eaefe4);border:0;border-radius:14px;
    text-align:left;cursor:pointer;font-family:var(--tekst,inherit);
    -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
  .mb2-reis .mb2-cta{flex:0 0 auto;font-size:14.5px;padding:0 16px}
  .mb2-hs-lab{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--zacht,#68725a);display:flex;align-items:center;gap:4px}
  .mb2-hs-lab::after{content:"";width:0;height:0;border:3.5px solid transparent;
    border-bottom-color:currentColor;margin-bottom:2px}
  .mb2-hs-nu{font-size:13.5px;font-weight:700;color:var(--zwart,#20271a);line-height:1.15;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* --- hoofdstuk-sheet --- */
  .mb2-sheet{display:block;position:fixed;inset:0;z-index:95;
    visibility:hidden;pointer-events:none}
  .mb2-sheet[data-open="1"]{visibility:visible;pointer-events:auto}
  .mb2-sheet-bg{position:absolute;inset:0;background:rgba(20,26,16,.45);
    opacity:0;transition:opacity .25s ease}
  .mb2-sheet[data-open="1"] .mb2-sheet-bg{opacity:1}
  .mb2-sheet-in{position:absolute;left:0;right:0;bottom:0;max-height:88vh;
    display:flex;flex-direction:column;
    background:#fff;border-radius:22px 22px 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
  .mb2-sheet[data-open="1"] .mb2-sheet-in{transform:translateY(0)}
  .mb2-sheet-kop{display:flex;align-items:center;gap:12px;flex:none;
    padding:18px 20px 12px;border-bottom:1px solid rgba(83,97,68,.12)}
  /* stap 2 heeft geen titel in de kop; dan hoeft die balk ook geen hoogte */
  .mb2-sheet-kop.leeg{padding:10px 16px 4px;border-bottom:0}
  .mb2-sheet-kop b{font-family:var(--kop,inherit);font-weight:700;font-size:17px;
    color:var(--zwart,#20271a);flex:1}
  .mb2-sluit{flex:none;width:38px;height:38px;border:0;border-radius:50%;
    background:var(--steun,#f0eeed);color:var(--mos,#536144);font-size:20px;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center}
  .mb2-lijst{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 12px 16px}
  .mb2-lijst a{display:flex;align-items:center;gap:12px;min-height:52px;
    padding:8px 10px;border-radius:14px;
    font-size:15.5px;font-weight:600;color:var(--ink,#414b35)}
  .mb2-lijst a .n{flex:none;width:26px;height:26px;border-radius:50%;
    background:var(--steun,#f0eeed);color:var(--mos,#536144);
    font-family:var(--kop,inherit);font-weight:700;font-size:12.5px;
    display:flex;align-items:center;justify-content:center}
  .mb2-lijst a .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mb2-lijst a .d{flex:none;font-size:12.5px;font-weight:600;color:var(--zacht,#68725a)}
  .mb2-lijst a[data-nu="1"]{background:var(--groen-tint,#eaefe4);color:var(--zwart,#20271a);font-weight:800}
  .mb2-lijst a[data-nu="1"] .n{background:var(--mos,#536144);color:#fff}

  /* --- homepage: de balk kiest een bestemming ---------------------- */
  .mb2-home .mb2-cta::after{content:"";width:8px;height:8px;flex:none;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(-135deg);margin:4px 0 0 3px}
  .mb2-lijst.best{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}
  .mb2-lijst.best a{display:flex;align-items:center;gap:10px;min-height:56px;
    padding:10px 12px;border-radius:16px;background:var(--steun,#f0eeed);
    font-size:15px;font-weight:700;color:var(--zwart,#20271a)}
  .mb2-lijst.best .vlag{flex:none;width:26px;height:19px;border-radius:2px;overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.22)}
  .mb2-lijst.best .vlag svg{display:block;width:100%;height:100%}
  .mb2-lijst.best .naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* --- stap 2: de polaroid komt omhoog, daarna de keuze -------------- */
  .mb2-stap2{padding:4px 16px 34px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* vlag en landnaam groot en gecentreerd: je ziet meteen dat je keuze
     is aangekomen */
  .mb2-land{display:flex;flex-direction:column;align-items:center;gap:7px;margin:0 0 12px}
  .mb2-land .vlag{width:44px;height:33px;border-radius:3px;overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .mb2-land .vlag svg{display:block;width:100%;height:100%}
  .mb2-land b{font-family:var(--kop,inherit);font-weight:700;font-size:26px;
    line-height:1.1;color:var(--zwart,#20271a);text-align:center}
  .mb2-terug{display:inline-flex;align-items:center;gap:7px;margin:2px 0 12px;
    padding:8px 12px 8px 8px;min-height:40px;border:0;border-radius:999px;
    background:none;color:var(--zacht,#68725a);
    font-family:var(--tekst,inherit);font-size:13.5px;font-weight:700;cursor:pointer}
  .mb2-terug::before{content:"";width:7px;height:7px;
    border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin-left:4px}
  .mb2-pola{background:#fff;padding:10px 10px 0;border-radius:5px;width:70%;margin:0 auto 16px;
    box-shadow:0 22px 38px -20px rgba(20,26,16,.55);
    transform-origin:50% 100%;
    animation:mb2-pop .42s cubic-bezier(.2,.9,.3,1.25) both}
  @keyframes mb2-pop{
    from{opacity:0;transform:translateY(26px) scale(.86) rotate(3deg)}
    to{opacity:1;transform:translateY(0) scale(1) rotate(-1.6deg)}}
  .mb2-pola img{display:block;width:100%;height:150px;object-fit:cover;border-radius:2px}
  .mb2-pola p{font-family:var(--hand,'Caveat',cursive);font-weight:700;font-size:18px;
    color:var(--zwart,#20271a);text-align:center;padding:8px 4px 11px;line-height:1.2}
  .mb2-keus-kop{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--zacht,#68725a);margin:0 2px 8px}
  a.mb2-keus{display:block;padding:13px 15px;margin-bottom:8px;border-radius:16px;
    background:var(--steun,#f0eeed)}
  a.mb2-keus b{display:block;font-size:15.5px;font-weight:800;color:var(--zwart,#20271a)}
  a.mb2-keus span{display:block;margin-top:2px;font-size:13px;line-height:1.4;
    color:var(--zacht,#68725a)}
  a.mb2-keus.kids{background:var(--groen-tint,#eaefe4)}
  a.mb2-keus:last-child{margin-bottom:0}
  .mb2-grap{font-family:var(--hand,'Caveat',cursive);font-weight:700;font-size:17.5px;
    color:var(--zacht,#68725a);text-align:center;margin-top:11px;line-height:1.2}
}

@media(max-width:600px){
  /* --- meer regellengte: minder marge om de tekst heen ------------- */
  .mb2-reis main .wrap{padding:0 20px}
  .mb2-reis .plan,.mb2-reis .omgooi{padding:24px 18px}
  .mb2-reis section{padding:52px 0}
  .mb2-reis .verslag .rij{margin-bottom:44px;gap:18px}

  /* --- hoofdstukkop leest als een hoofdstuk ------------------------ */
  .mb2-reis .leg-kop{gap:11px;align-items:flex-start}
  .mb2-reis .leg-num{width:34px;height:34px;font-size:15px;margin-top:1px}
  .mb2-reis .leg-kop h2{font-size:22px;line-height:1.16}
  .mb2-reis .leg-meta{margin:0 0 18px 45px;gap:7px}

  /* --- foto's als veegstrip in plaats van een hoge stapel ---------- */
  .mb2-reis .polas{display:flex;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:12px -20px 20px;padding:6px 20px 8px}
  .mb2-reis .polas::-webkit-scrollbar{height:0}
  .mb2-reis .polas > .pola{flex:0 0 78%;width:auto;margin:0;
    scroll-snap-align:center;transform:none!important}
  .mb2-reis .polas > .pola:only-child{flex-basis:100%}
  .mb2-reis .pola img{height:205px}
  .mb2-reis .pola.breed img{height:230px}
  .mb2-reis .pola .cap{font-size:17px;padding:8px 6px 12px}

  /* --- citaat en weetje iets rustiger ----------------------------- */
  .mb2-reis .pull{margin:22px 0;padding-left:18px}
  .mb2-reis .pull p{font-size:19px}
  .mb2-reis .weetje{padding:15px 16px;margin:18px 0}

  /* --- lezersvraag inklapbaar: het verhaal blijft doorlopen -------- */
  .mb2-qa{border:1px solid rgba(83,97,68,.18);border-radius:16px;background:#fff}
  .mb2-qa > summary{display:flex;align-items:flex-start;gap:10px;
    padding:13px 15px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  .mb2-qa > summary::-webkit-details-marker{display:none}
  .mb2-qa > summary::after{content:"";flex:none;width:8px;height:8px;margin:6px 0 0 auto;
    border-right:2px solid var(--zacht,#68725a);border-bottom:2px solid var(--zacht,#68725a);
    transform:rotate(45deg);transition:transform .2s}
  .mb2-qa[open] > summary::after{transform:rotate(-135deg);margin-top:9px}
  .mb2-qa[open] > summary{padding-bottom:9px}
  .mb2-qa-lab{flex:none;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:var(--mos,#536144);background:var(--groen-tint,#eaefe4);
    border-radius:999px;padding:4px 9px;margin-top:1px}
  .mb2-qa-tx{font-size:13.5px;color:var(--ink,#414b35);line-height:1.4;min-width:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .mb2-qa[open] .mb2-qa-tx{display:none}
  .mb2-qa .qa-titel{display:none}
  .mb2-qa .qa-vraag{border:0;box-shadow:none;padding:0 15px 14px;border-radius:0}
  .mb2-qa .qa-vraag > p{font-size:15px}
  .mb2-qa .qa-antw > p{font-size:14.5px}
  .mb2-qa .ask{margin:0 15px 14px}
  .mb2-reis .rij-zij{margin-top:0}

  /* --- leesmaat gelijk aan het blog: 16px, meer regellengte -------- */
  .mb2-reis .leg p,.mb2-reis .plan p,.mb2-reis .omgooi p,
  .mb2-reis .vluchten p,.mb2-reis .kosten p,.mb2-reis .vr-intro{
    font-size:16px;line-height:1.68}
  .mb2-reis .plan,.mb2-reis .omgooi{padding:22px 16px}
  .mb2-reis .duokol .kol li,.mb2-reis .plan-lijst li{font-size:15.5px;line-height:1.55}
}

/* =====================================================================
   "Lees verder": lange blokken krijgen een maximale hoogte met een
   vervaging en een knop. Alleen op mobiel; JS bouwt de omhulling.
   ===================================================================== */
.mb2-lees-knop{display:none}
@media(max-width:760px){
  .mb2-lees{position:relative}
  .mb2-lees-in{overflow:hidden;transition:max-height .3s ease}
  .mb2-lees[data-open="0"] .mb2-lees-in{
    -webkit-mask-image:linear-gradient(#000 62%,rgba(0,0,0,.15) 100%);
    mask-image:linear-gradient(#000 62%,rgba(0,0,0,.15) 100%)}
  .mb2-lees-knop{display:inline-flex;align-items:center;gap:7px;
    margin-top:10px;min-height:42px;padding:0 16px;border:0;border-radius:999px;
    background:var(--groen-tint,#eaefe4);color:var(--mos,#536144);
    font-family:var(--tekst,inherit);font-size:14px;font-weight:700;cursor:pointer;
    -webkit-tap-highlight-color:transparent}
  .mb2-lees-knop::after{content:"";width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
  .mb2-lees[data-open="1"] .mb2-lees-knop::after{transform:rotate(-135deg);margin-top:2px}
  .mb2-reis .vr-hero .mb2-lees{order:5}
}

/* =====================================================================
   Blogartikelen: 17,5px gaf 33 tekens per regel. 16px met 20px marge
   geeft er ongeveer 42, wat rustiger leest op een telefoon.
   ===================================================================== */
@media(max-width:600px){
  .artikel,.body{padding:0 20px}
  .artikel .intro{font-size:17.5px;line-height:1.55}
  .body p{font-size:16px;line-height:1.68;margin:18px 0}
  .body ul li,.body ol li{font-size:16px;line-height:1.6}
  .body h2{font-size:23px;margin:36px 0 4px}
  .body h3{font-size:19px}
  .body blockquote,.body blockquote p{font-size:17px}
}

/* =====================================================================
   Homepage-hero mobiel: eerst beeld, dan de belofte, dan een korte
   pitch en de knoppen. De lange desktoptekst wordt op mobiel vervangen
   door .lead-mob (zie het HTML-blok onderaan de pagina).
   ===================================================================== */
.hero p.lead-mob{display:none}

/* De kop als traptreden. Geldt voor elke hero met een gesplitste kop:
   twee regels worden links en rechts, drie regels links, midden, rechts. */
@media(max-width:600px){
  .hero h1 br{display:none}
  .hero h1 > .h1-r{display:block}
  .hero h1 > .h1-r.laatste{text-align:right}
  .hero h1 > .h1-r.midden{text-align:center}
}

/* --- alleen de homepage (klasse staat op de section, dus geen JS nodig) --- */
@media(max-width:600px){
  .hero-home{padding:26px 0 76px}
  /* align-items:stretch is nodig: de basis zet center, en dan krijgt
     .hero-visual breedte 0 omdat al z'n kinderen absoluut staan. */
  .hero-home .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-home .wrap > div:first-of-type{display:contents}
  .hero-home .hero-chip{display:none}
  .hero-home h1{order:1;font-size:44px;line-height:1.02;margin-bottom:18px}
  .hero-home p.lead{display:none}
  .hero-home p.lead-mob{display:block;order:2;font-size:16.5px;line-height:1.6;margin-bottom:22px}
  .hero-home .hero-visual{order:3;margin:0 -28px 26px;height:300px}
  .hero-home .hero-knoppen{order:4;margin-bottom:22px}
  .hero-home .trust{order:5}
  .hero-home .kaart-groot{width:52%;right:20px}
  .hero-home .kaart-klein{width:37%;left:20px}
  .hero-home .chat{left:20px;right:20px}

  /* de scenes blijven rouleren, alleen de bolletjes eronder vervallen */
  .hero-home .scene-dots{display:none}
}

/* =====================================================================
   Landen- en gezinspagina's krijgen dezelfde opbouw als de homepage:
   land, kop, belofte, beeld van rand tot rand, dan pas de knoppen.
   ===================================================================== */
@media(max-width:600px){
  .mb2-collage .hero{padding:26px 0 70px}
  .mb2-collage .hero .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .mb2-collage .hero .wrap > div:first-of-type{display:contents}
  .mb2-collage .hero .locator{order:1;margin-bottom:14px}
  .mb2-collage .hero h1{order:2;font-size:38px;line-height:1.04;margin-bottom:14px}
  .mb2-collage .hero p.lead{order:3;margin-bottom:22px}
  .mb2-collage .hero-knoppen{order:5}

  /* Dezelfde speelse collage als op de homepage: twee schuine foto's die
     elkaar overlappen en de tip van Ilse eronder. De reviewkaart valt weg,
     die maakte het op deze breedte alleen maar vol. */
  .mb2-collage .hero-visual{order:4;position:relative;display:block;
    height:318px;min-height:0;margin:0 -20px 26px}
  .mb2-collage .hv-review{display:none}
  .mb2-collage .hv-groot{position:absolute;top:0;right:20px;left:auto;bottom:auto;
    width:52%;aspect-ratio:3/3.5;transform:rotate(2deg);margin:0}
  .mb2-collage .hv-klein{position:absolute;top:34px;left:20px;right:auto;bottom:auto;
    width:38%;aspect-ratio:10/8;transform:rotate(-3.5deg);margin:0;border-width:5px}
  .mb2-collage .hero-tip{position:absolute;left:20px;right:20px;bottom:0;top:auto;
    width:auto;transform:none;margin:0}
  /* de tip is per pagina verschillend lang; drie regels houdt de collage heel */
  .mb2-collage .hero-tip p{display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical;overflow:hidden}
}


.dd-voet{display:flex;align-items:center;gap:9px;margin:10px 0 0;padding:12px 16px;
  border-top:1.5px solid rgba(83,97,68,.14);font-weight:700;font-size:14.5px;
  color:var(--cta,#c8481f);text-decoration:none;border-radius:0 0 14px 14px;transition:.14s}
.dd-voet:hover{background:rgba(83,97,68,.06)}
.dd-voet .ti-arrow-right{margin-left:auto}


/* ---------------------------------------------------------------------
   Welkomstpop-up voor bezoekers die van een oude pagina komen.
   Staat standaard uit. Het scriptje onderaan de pagina zet hem aan.

   In de kaart staat het Instagram-bericht van Ilse van 15 augustus, met
   de opmaak van een echt Instagram-bericht eromheen. Daarboven de kop,
   een zin uitleg en twee knoppen. De eerste knop brengt de bezoeker naar
   de pagina waar hij heen wilde; de tweede naar het hele verhaal.
   --------------------------------------------------------------------- */
.wk[hidden]{display:none}
.wk{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;
  justify-content:center;padding:20px}
.wk-doek{position:absolute;inset:0;background:rgba(32,39,26,.55);
  backdrop-filter:blur(2px)}
.wk-kaart{position:relative;z-index:1;width:100%;max-width:516px;
  background:var(--wit,#fff);border-radius:var(--radius,22px);
  box-shadow:0 30px 70px -24px rgba(32,39,26,.6);
  max-height:calc(100vh - 40px);overflow-y:auto;
  animation:wk-op .3s cubic-bezier(.2,.7,.3,1) both}
@keyframes wk-op{from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wk-kaart{animation:none}}

.wk-x{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(240,238,237,.9);color:#20271a;
  font-size:18px;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.wk-x:hover{background:#e4e1df}
/* De standaardrand van de browser is fel blauw en past niet bij de site.
   Alleen zichtbaar voor wie met het toetsenbord werkt. */
.wk-x:focus{outline:none}
.wk-x:focus-visible,.wk-ja:focus-visible,.wk-nee:focus-visible,
.wk-meer:focus-visible{outline:2px solid var(--mos,#536144);outline-offset:2px}

/* ---- de kop, de zin en de knoppen, boven het bericht ---------------- */
.wk-body{padding:24px 24px 18px}
.wk-kop{font-family:var(--kop,system-ui);font-size:24px;line-height:1.15;
  color:var(--zwart,#20271a);margin:0 0 8px;font-weight:700;padding-right:34px}
.wk-tekst p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink,#414b35)}
.wk-knoppen{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.wk-ja{display:inline-flex;align-items:center;gap:7px;background:var(--cta,#c8481f);
  color:#fff;border:0;border-radius:999px;padding:12px 19px;font-weight:600;
  font-size:15px;text-decoration:none;cursor:pointer;font-family:inherit;
  white-space:nowrap}
.wk-ja:hover{background:var(--cta-donker,#a93a14)}
.wk-nee{display:inline-flex;align-items:center;background:none;
  border:1.5px solid rgba(83,97,68,.3);border-radius:999px;padding:12px 18px;
  font-weight:600;font-size:15px;color:var(--ink,#414b35);cursor:pointer;
  font-family:inherit;text-decoration:none;white-space:nowrap}
.wk-nee:hover{border-color:var(--mos,#536144)}

/* ---- het Instagram-bericht ------------------------------------------
   Dezelfde opmaak als op /reis-met-kinderen, maar met een ingekorte
   tekst. Een echt Instagram-bericht knipt de tekst ook af met "meer". */
.wk-ig{margin:4px 16px 16px;border:1px solid #dbdbdb;border-radius:10px;
  overflow:hidden;font-size:13.5px;line-height:1.5;color:#111;
  font-family:var(--tekst,system-ui);background:#fff}
.wk-ig-kop{display:flex;align-items:center;gap:10px;padding:10px 12px}
.wk-ig-ava{width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:var(--groen-tint,#e7f1e8);border:1px solid #dbdbdb;padding:5px;
  object-fit:contain}
.wk-ig-naam{font-weight:600;font-size:13.5px;color:#111;text-decoration:none}
.wk-ig-naam:hover{text-decoration:underline}
.wk-ig-plek{display:block;font-weight:400;font-size:11.5px;color:#737373}
.wk-ig-foto{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:center 30%;display:block;border-top:1px solid #efefef;
  border-bottom:1px solid #efefef}
.wk-ig-knoppen{display:flex;gap:15px;padding:10px 12px 3px;font-size:21px;
  color:#262626}
.wk-ig-knoppen .ti-heart-filled{color:#ed4956}
.wk-ig-knoppen .op-slot{margin-left:auto}
.wk-ig-tel{padding:0 12px;font-weight:600;font-size:13.5px}
.wk-ig-tekst{padding:5px 12px 0;color:#111}
.wk-ig-tekst b{font-weight:600}
.wk-meer{color:#737373;text-decoration:none;font-size:13.5px}
.wk-meer:hover{color:#111}
.wk-ig-datum{padding:9px 12px 12px;font-size:10.5px;letter-spacing:.2px;
  text-transform:uppercase;color:#737373}
.wk-ig-datum a{color:#737373;text-decoration:underline}

@media(max-width:600px){
  .wk{padding:0;align-items:flex-end}
  .wk-kaart{max-width:none;border-radius:22px 22px 0 0;max-height:92vh}
  .wk-body{padding:22px 20px 14px}
  .wk-kop{font-size:21px}
  .wk-knoppen{flex-direction:column}
  .wk-ja,.wk-nee{justify-content:center;text-align:center}
  .wk-ig{margin:2px 12px 14px}
  .wk-ig-foto{aspect-ratio:4/3}
}